@font-face {
    font-family: 'Futura';
    src: url('../fonts/futura/Futura Book font.ttf')format('truetype');
}

html {
    position: relative;
    min-height: 100%;
}

body{
    font-family: 'Futura', sans-serif;
}

.navbar{
    position: sticky;
    border-radius: 0;
    border: none;
}

#content{
    padding-bottom: 163px;
}

.navbar .nav{
    font-size: 18px;
    margin-top: 15px;
    text-shadow: 2px 0px 2px #000;
}

.navbar-header{
    position: relative;
    z-index: 1;
}

.navbar-brand>img {
    margin-top: -10px;
    height: auto;
    width: 125px;
}

.navbar-search button,
.navbar-search input, 
.navbar-search select {
    margin-left: 0px;
    border-radius: 5px;
    border: 1px solid rgba(65,41,200,0.5);
    outline: none;
    font-size: 18px;
    height: 40px;
}

#searchBtn{
    width: 1%
}

#categorySearch{
    float: left;
}

.navbar-collapse > div {
    float: none !important;
    padding-right: 0px;
}

.navbar-collapse > div::after {
    content: '';
    display: block;
    clear: both;
}

.navbar-search .input-group-addon{
    padding: 0;
    border: none;
    background: none;
} 

#loginRegister{
    margin-top: 5px;
    margin-right:10px;
}

#loginRegister button{
       box-shadow: 0px 3px 2px rgba(0,0,0,0.2);
    }

#loginRegister button:active{
    transform: translateY(2px);
    box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}

.btn-register{
    background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);
    background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%);
    background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%);
    color: black;
}

.btn-register:hover{
    background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
    background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
    background: linear-gradient(to bottom, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
}

.btn-register:focus:active{
    background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%);
    background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);
    background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);
}

.btn-login{
    background: -moz-linear-gradient(top, #b6e026 0%, #abdc28 100%);
    background: -webkit-linear-gradient(top, #b6e026 0%,#abdc28 100%);
    background: linear-gradient(to bottom, #b6e026 0%,#abdc28 100%);
    margin-right: 10px;
    color: black;
}

#login{
    border-right: 1px solid #b7f8ef;
}

#register{
    margin-left: 10px;
}

#register > small{
    color: white;
}

.btn-login:hover{
    background: -moz-linear-gradient(top, #8fc400 0%, #8fc400 100%);
    background: -webkit-linear-gradient(top, #8fc400 0%,#8fc400 100%);
    background: linear-gradient(to bottom, #8fc400 0%,#8fc400 100%);
    color: white;
}

.btn-login:active{
    background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%);
    background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%);
    background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%);
    color: #11bca4;
}

.navbar-btn{
    margin-top: 10px;
}

#navlogo-small{
    display:none;
}

#normalCategorySearch{
        display: inline;
    }
    
#smallCategorySearch{
        display: none;
    }

#shoppingCartBtn{
    margin-left: 20px;
}

.shoppingCartMenu{
    background-color: white !important;
}

.shoppingCartMenu > li > a{
    text-shadow: none;
    color: black !important;
}

.shoppingCartMenu > li > a:hover{
    color: white !important;
}


@media(max-width:767px) {
    
    .navbar-search {
        padding-bottom: 0;
        padding-top: 0;
        border: 0;
        margin-bottom: 20px;
    }
    .navbar-search .input-group{
        width: 100%;
    }
    
    .navbar-search button,
    .navbar-search .input-group-addon, 
    .navbar-search #categorySearch {
        display: inline-block;
        width: 100%;
    }
    
    #categorySearch{
        width: 100%;
        margin-bottom: 5px;
    }
    
    #searchBtn{
        width: 100%;
        margin-top: 5px;
    }
    
    .navbar-collapse > div {
        padding: 0;
    }
    
    .navbar .nav{
        text-align: center;
    }
    .navbar-brand>img {
        height:auto;
        width:220px
    }

    .navbar-btn {
        width: 100%;
        margin-top: 0;
    }

    .navbar.navbar-default .navbar-nav {
      margin-top: 0px;
    }

    #login-btn{
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 18px;
        margin: 0px;
        text-decoration: none;
    }
    
    #loginRegister{
        margin:auto;
    }

    #navlogo-small{
        display:inline;
        height: auto;
        width: 170px;
    }

    #navlogo{
        display:none;
    }
    
    #shoppingCartBtn{
        margin-left: 0px;
    }

}

/*----NAVBAR COLORING!---*/
/*with help using
https://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0
*/
.navbar-default {
  background-color: rgba(34,96,194,1);
  border-color: #4129c8;
}
.navbar-default .navbar-brand {
  color: #b7f8ef;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #11bca4;
}
.navbar-default .navbar-text {
  color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a {
  color: #FFFFFF;
}

.navbar-default .navbar-nav > li > a:hover{
  color: #FFFFFF;
    background-image: -webkit-radial-gradient(rgba(173,216,230,1) 10%,rgba(173,216,230,0 6) 70%); /*Safari 5.1-6*/
    background-image: -o-radial-gradient(rgba(173,216,230,1) 10%,rgba(173,216,230,0) 70%); /*Opera 11.1-12*/
    background-image: -moz-radial-gradient(rgba(173,216,230,1)  10%,rgba(173,216,230,0)70%); /*Fx 3.6-15*/
    background-image: radial-gradient(rgba(173,216,230,1) 10%, rgba(173,216,230,0) 70%); /*Standard*/
}

.navbar-default .navbar-nav > li > a:focus {
    color: #FFFFFF;
    background-image: none;
}


.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #2260c2;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #FFFFFF;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #FFFFFF;
  background-color: #4129c8;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
  background-color: #4129c8;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #11bca4;
  background-color: #4129c8;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #11bca4;
  background-color: #4129c8;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #4129c8;
    text-shadow: none;
    background-color: #FFFFFF;
    background-image: none;
    transform: translateY(-3px);
    box-shadow: 0 3px 3px rgba(0,0,0,0.4);
}
.navbar-default .navbar-toggle {
  border-color: #4129c8;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #4129c8;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #b7f8ef;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #FFFFFF;
}
.navbar-default .navbar-link {
  color: #FFFFFF;
}
.navbar-default .navbar-link:hover {
  color: #11bca4;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #FFFFFF;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #FFFFFF;
    background-color: #4129c8;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #11bca4;
    background-color: #4129c8;
  }
}


/*--footer---*/
.footer-default {
    width: 100%;
    height: auto;
    padding: 30px 0px;
    background-image: url(../../images/footer-background.jpg);
    box-shadow: inset 0px 7px 10px rgba(0,0,0,0.2);
    text-shadow: 3px 0px 5px #000;
}

.footer-default a{
    color: white;
    font-size: 20px;
    margin-right: 20px;
}

.footer-default a:hover{
    color: #4129c8;
    text-shadow: none;
}

.footer-default a:active{
    font-size: 20px;
    margin-right: 20px;
}

#disclaimerFooter{
    color: white;
    box-shadow: 0px 3px 0px rgba(0,0,0,0.3);
}

#disclaimerFooter:active{
    box-shadow: 0px 0px 0px rgba(0,0,0,0.3);
    transform: translateY(3px)
}


#footerBrandImg{
    height: auto;
    width: 270px;
}

@media(max-width:768px) {
    
    .footer-default{
        padding: 30px 0px;
    }
    .footer-default ul li{
        margin-top: 10px;
        float: none;
    }
    
    #footer-brand{
    margin-top: 40px;
        float: left !important;
    }
    
    #footer-brand::after{
        content: '';
        display: block;
        clear: both;
    }
        
}