body{
    font-family: "Ebrima", Arial, sans-serif; 
    font-size: 12px;
}

/************* header ***************/
.fixed-top{
    background-color: white;
}

#special-offer{
    display: none;
}

.banner {
    background-color:#bfdcda;
    font-family: "Myriad Pro", Arial, sans-serif;  
    color: #3c6b95;
}

.banner a{
    text-decoration: none;
}

.banner-menu{
    padding-top:15px;
}

.banner-menu-item{
    float: left;
    text-transform: uppercase;
    padding-left: 5px;
    font-family: Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;  
}
.banner-menu-item a{
    color: #393939;
    text-decoration: none;
}

.navbar-toggler{
    border: 0 !important;
    font-size:12px;
    color: #393939  !important;
    font-family: Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;  
    padding-top:10px;
}

.navbar-toggler-icon{
    background-image: none !important;
    margin-left:-15px;
    border: 0;
    outline: none;
}

#navbarToggler .filterbtn{
    padding-left: 0;
    margin-left:-20px;
}

.navbar-brand{
    vertical-align: bottom;
    padding-top:10px;
    padding-bottom:0px;
}

#navbarMenu{
    font-size: 12px;
}

#frmSearch{
    width: 80%;
    min-width: 150px;
    height: 40px;    
    font-family: "Myriad Pro", Arial, sans-serif;  
    font-size: 17px;
    padding-top: 10px;
}

#frmSearch div {
    width: 100%;
    height: 35px;
    border-bottom: solid 1px #666666;
    display: flex;
    justify-content: space-between;
    padding: 2px;
    float:right;
}
#frmSearch input {
    width: 100%;
    border: 0;
    margin: 2px 0px 2px 10px;
    outline: none;
}

#frmSearch button {
    color:#000000;
    background-color: white;
    border: 0px;
    margin-right:3px;
}



.filterbtn {
    display: inline-block;
    color: #333;
    text-align: center;
    padding: 14px 15px 0px 15px;
    text-decoration: none;
}

.filterdown:hover .filterbun{
    color:red;
}
.filterdown{
    display: inline-block;
    white-space: nowrap;
}
.filterdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.filterdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.filterdown-content a:hover {background-color: #e1e1e1}

.filterdown:hover .filterdown-content {
    display: block;
}

li.filterdown {
    display: inline-block;
}

#divSeperator{
    background-image: linear-gradient(to bottom right, #f1f1f1, white);
    height: 5px;
}
/************* content ***************/
#divContent{
    margin-top:2px
}

.breadcrumb-bkcolor{
    background-color: white;
}
.collection-card-size{
     margin: 20px;
}
.collection-card-color{
    color: white;
    background-color:rgb(58,177,173);
}
.collection-card-text{
    font-size: 23px;
    text-align: center;
}

/************* footer ***************/
.footer-area {
    color: #efefef;
    background-color:#3c3c3c;
    font-family: "Myriad Pro", Arial, sans-serif; 
    font-size: 11px;
    padding-top:30px;
    padding-bottom:20px;
    margin-top:55px;
    
}

.footer-link {
    padding: 4px;
}

.footer-area a{
    display: inline-block;
    color: #efefef;
    text-decoration: none;
    padding-bottom: 5px;
}

.footer-company{
    font-family: "Myriad Pro", Arial, sans-serif; 
    font-size: 13px;
    padding: 4px;
}

.footer-description{
    padding: 4px;
    font-family: "Myriad Pro", Arial, sans-serif; 
    font-size: 11px;
}

.footer-copyright {
    color: #fcfcfc;
    background-color:#000000;
    font-size: 11px;
    padding:4px;
}

.footer-copyright a:link {
    color: #fcfcfc;
}
.footer-copyright a:visited {
    color: #fcfcfc;
}
.footer-copyright a:hover {
    color: #ffffff;
}
.footer-copyright a:active {
    color: #fcfcfc;
}

.footer-banner{
    padding: 8px 30px;
	background-color:rgb(20,20,20);
}

.footer-menu {
    color:rgb(200,200,200);
}

.footer-bottom{
    padding: 5px 10px;
    color: rgb(80,80,80);
    background-color:black;
    font-size: small;
}

.flex-box {
    display: flex;    
}

.warning {
    color: red;
    font-size: small;
}


.sisi_logo{
    display:none;
}

/*************************/


@media (min-width: 576px){
    .banner-menu{
        padding-top:50px;
    }
    
    #frmSearch{
        padding-top: 40px;
    }

    .navbar-brand{
        min-height: 10px;
    }

    #navbarToggler .filterbtn{
        padding-left: 14px;
        margin-left: 0px;
    }
    #divContent{
        margin-top:2px;
    }    

    .collection-card-size{
        min-width: 200px;
    }
    
}

@media (min-width: 768px){
    #special-offer{
        display: inline;
    }

    #navbarMenu{
        font-size: 16px;
    }
    #divContent{
        margin-top:2px;
    }    

}


@media (min-width: 992px){
    body{
        font-size: 16px;
    }

    .banner {
        font-size: 14px;
    }
    
    .banner-menu-item{
        font-size: 14px;
        padding-left: 15px;
    }

    .banner-menu{
        float:right;
    }

    #frmSearch{
        padding-top: auto;
    }

    .nav-item{
        padding: 0 20px;
    }
   
    .sisi_logo{
        display: inline-block;
    } 
}

@media (min-width: 1200px){
    .sisi_logo{
        position: absolute;bottom:0px;
    }
    .collection-card-size{
        min-width: 230px;
    }
}

@media (min-width: 1540px){
    .container {
        max-width: 1510px;
    }
    .filterbtn {
        padding-left: 45px;
    }
    .nav-item{
        padding: 0 50px;
    }
    .collection-card-padding{
        padding: 0px 200px;
    }
        
}