header, footer{
    background-color: #2d4a64;
    color:#fdd017;
}
header{padding: 10px 0 5px 0;}
p.small-txt{
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}  
@media (max-width: 768px){
    header .container{
        padding-right: 10px;
        padding-left: 10px;
    }
/*    p.small-txt{
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }  */
    p.small-txt span{font-size: 12px !important;}
}
.reduced-text{font-size: 12px;}
.header-left{float:left; width: 20%;}
.header-right{float:right; width: 78%; padding-top: 10px;}
.header-right .form-row{width:100%;}
.form-inline .form-control {
    width: 100%;
}
footer a{color:#fdd017;}
.yellow-text{color:#fdd017;}
.breadcrumb { 
    margin-top: 10px;
    background-color: #f8f9fa;
}
h1,h2,h3,.product h2 a{color:#2d4a64;}

.hover-item img{
    -webkit-transform: scale(1) rotate(0) translateY(0);
       -moz-transform: scale(1) rotate(0) translateY(0);
         -o-transform: scale(1) rotate(0) translateY(0);
        -ms-transform: scale(1) rotate(0) translateY(0);
            transform: scale(1) rotate(0) translateY(0);
    -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
}

.hover-item:hover img{
    -webkit-transform: scale(1.05) rotate(0) translateY(0);
       -moz-transform: scale(1.05) rotate(0) translateY(0);
         -o-transform: scale(1.05) rotate(0) translateY(0);
        -ms-transform: scale(1.05) rotate(0) translateY(0);
            transform: scale(1.05) rotate(0) translateY(0);
    -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
}

.product{padding: 5px 5px 1px 5px; margin-bottom: 1px;}
.product:hover{
    background: #eee;
}
.product h2{font-size: 15px; font-weight: bold;}
.sort-wrap{margin-bottom: 15px;}
button.search-button{
   color:#fdd017 !important;
   border-color: #fff !important; 
}
button.search-button:hover{
    background: #336;
}

.loader-wrap, #inst-loader-wrap{text-align: center; display: flex; justify-content: center; padding: 10px 0;}

div.pagination{   
    float: right;
    padding-right: 10px;
    margin-top: 0;
    margin-bottom: 15px;
}
div.pagination > span:first-child,div.pagination > a:first-child{border-left:1px solid #eee;}
div.pagination a,div.pagination span.active{border-top:1px solid #eee;border-right:1px solid #eee;border-bottom: 1px solid #eee; padding: 8px 10px;}
div.pagination a:hover{background: #eee;}
div.pagination span.active{background: #eee;}
.line{
    border-bottom: 1px dotted #ddd;
    padding: 1px 0 20px 0;
    margin-bottom: 20px;
    width: 100%;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.loadingmodal {
    display:    none;
    position:   fixed;
    z-index:    1050;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
        url('../images/ajax-loader.gif') 
        50% 50% 
        no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .loadingmodal {
    display: block;
}

@media (max-width: 768px){
   .line{display: none;}
}

@media (min-width: 576px){
    .form-inline .form-control {
        width: 100%;
    }
}
.footer h3{
    color: #fdd017;
}
.footer ul{
    padding-left: 25px;
}
@media (max-width: 768px){
    .footer ul{
        padding-left: 5px;
    }
}