@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);    
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500); 

ul{
  padding: 0px;
  margin:0px;
  list-style: none;
}
li{
  list-style: none;
}
.clear-both{
  clear: both;
}
.main{
  background-image:url(../images/listing-bg.jpg);
}
/*header*/
.top-left{
  margin: auto;
  text-align: center;
}

.top-right{
text-align: center;
color: #FFF;
margin-top:40px
}
.top-right ul li{
  display: inline-block;
  margin: 5px 15px;
  font-weight: bold;
  text-align: left;
}
.top-right i{
  font-size: 32px;
  font-weight: bold;
  color: #BA7900
}
.welcome{
  padding:5px 0px;

}
.welcome p{
  font-size: 17px;
  font-weight: bold;
  text-transform: uppercase;
  color: #FFF;
  margin:0px;
}
.header{
    background-image:url(../images/tab-menu.png) ;
    padding:20px 0px 40px 0px;
    background-size:100% 100%;
}

.logo{
    z-index: 999;
    text-align: center;
    padding:10px;
}

.logo img{
  margin: auto;
    width:300px;
}

.menu-bg input,.menu-bg label{
  display: none;
}
.menu ul li{
  display: inline-block;
}
.menu-bg{  
    
  }
.menu{
  text-align: center;
 border:2px solid #01A4E7;
       background:#fff;
    width: 100%;
 
    position: relative;


}
.menu ul li a{
  display: block;
  padding:10px 10px;
  color: #000;
  text-transform: uppercase;
  font-weight: bold;
  transition: .4s
}
.menu ul li a:hover{
  color: #000;
  
    text-decoration: none;
}
.banner-cate{
  padding: 20px
}
/* HEADER-MIDS */
.mids {width:100%; margin:5px 0; padding:0; background:#fff;text-align: center;}
.mids-box {border:1px dotted #01A4E7;border-right: 0px; border-left: 0px}
.mids-box h1 {margin:0; padding:0; font-size:14px; color:#BA7900; font-weight:700;}
/*header end*/

.banner .gallery1{
    height:500px;
}
.banner .gallery1 img{
    height:100%;
}
.main-body{
  background:#fff;
}
.middle-body{
        background-image:url(../images/cross-bg.png) ;
    padding:20px;
    background-size:100% 100%;
}
.left-body ul {
  padding: 0px
}
.left-body ul li:first-child{
    border-top:1px solid #000;
}
.left-body ul li{
  border:1px solid #000;
  border-top: 0px;
}
.left-body ul li a{
  text-decoration: none;
  font-family:verdana;
  color:#000!important;
  padding: 5px!important;
  font-size:12px;
  font-weight:bold;
}
.gallery1 img{
  width: 100%
}
/*left side end*/
.short-description{
  padding-bottom: 10px;
  padding:15px
}
.right-side{
  margin-top: 15px
}
.right-title h4{
   
 border:2px solid #01A4E7;
  margin:0px;
  padding: 7px;
  color:#BA7900;
  font-weight: bold;
  text-align: left;
}
.feature{
    background: #fff;
  margin:10px 0px;
  border:2px solid #01A4E7;
  padding: 10px;

}
.feature ul li{
  padding:5px 10px;
  border-bottom: 1px  dotted #01A4E7;
}
.feature ul li:before{
  font-family:'FontAwesome';
   content: "\2741";
   padding-right:10px;
    color:#BA7900;
}
.feature h2{
    display: block;
  width: 70%;
  margin:auto;
  padding: 7px ;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  background:#BA7900;

  text-align: center;
  text-decoration: none!important;
  font-size:16px;
  margin:10px auto;

}
#variation{
  position: relative;
  left: 2px;
  margin-top: 10px
}
.variation ul li{
  display: inline-block;
}
.variation {
  display: inline-flex;
  width: 100%;
  margin: 5px 0px;
    background: #fff;
  padding: 10px;
  border:2px solid #01A4E7;
 
}
.variation label{
  padding-right: 5px;
  color: #BA7900;
}
.color{
  width:20px;
  height:20px;
  border: 1px solid #000;
   
}
.size{
  font-weight: bold;
  margin:0px 2px;
   
}
.size input{
  width: 100px
}
.price{
width: 100%;
    height: auto;
    background:#fff;
  padding:15px ;
  text-align: center;
   border: 2px solid #01A4E7;

}
.price h4{
  text-transform: uppercase;
   color: #000;
   margin:0px;
  font-size: 12px
}
.price h4 b{
  font-size:32px;

}
.buy-now-top{
  margin: 5px 0px;
  padding: 10px;
  background: #fff;
border:2px solid #01A4E7;
 
}
.bnb{
  padding: 10px
}
.buy-now-btn i{
  background: #000;;
  padding:15px;
  margin-right: 5px;
   color: #fff;
   border-right: 3px solid #fff;
   

}
.buy-now-btn a{
 
  margin:auto;
  padding: 15px ;
  padding-left: 0px;
color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  background:#BA7900;
  transition: 0.3s;
  text-align: center;
  text-decoration: none!important;
  font-size:15px
}
.buy-now-btn a:hover{
  background:#000;;
color: #fff;
}
.btn-detail,.buy-now-btn{
  text-align: center;
  margin:15px 0px;
}
.btn-detail ul li{
  display: inline-block;
}
.btn-detail ul li a{
  display: inline-block;
   margin:auto;
  padding:7px 15px ;
  color: #FFF;
  font-weight: bold;
  text-transform: uppercase;
  background:#000;;
  transition: 0.3s;
  text-align: center;
  text-decoration: none!important;
  margin: 5px 0px;
  font-size: 13px;
}

/*gallery*/

.product-image-box {
    position: relative;
  width:80%;
  margin-left: auto;
}
.product-image-container{
  background: #fff;
    width: 100%;
    position: relative;
    text-align: center;
    margin: 0 auto;
  border:  double 5px #01A4E7;;
    padding: 30px;
    padding-bottom: 40px;
    height: 495px;

 
}
.product-image-container img{
  max-width: 100%;
  max-height: 100%;


}
.product-more-views {
  position: absolute;
  top:15px;
  width: 100px;
  text-align: center;
}
.x-hold{
  border:  double 5px #01A4E7;;
  background: #fff;
    position: relative;
    text-align: center;
    margin-bottom: 5px;
}
.product-more-views ul { list-style: none;
  padding: 0;
  width: 100px;
  text-align: center;
position: relative;
}

.product-more-views ul li { display: inline-block;}
.product-image-container { display: none;}
.product-image-box input { display: none;}
.product-more-views label{
    width: 60px;
    height: 60px;
    margin: 10px;
    padding: 0;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    position: relative;
    background: #fff;
}
.product-image-box label:hover { cursor: pointer;}
#gal1:checked ~ .product-more-views ul li #lg1, #gal2:checked ~ .product-more-views ul li #lg2, #gal3:checked ~ .product-more-views ul li #lg3, #gal4:checked ~ .product-more-views ul li #lg4, #gal5:checked ~ .product-more-views ul li #lg5, #gal6:checked ~ .product-more-views ul li #lg6, #gal7:checked ~ .product-more-views ul li #lg7, #gal8:checked ~ .product-more-views ul li #lg8, #gal9:checked ~ .product-more-views ul li #lg9, #gal10:checked ~ .product-more-views ul li #lg10, #gal11:checked ~ .product-more-views ul li #lg11, #gal2:checked ~ .product-more-views ul li #lg12 { opacity: 1;filter: 1;}
#gal1:checked ~ #content1, #gal2:checked ~ #content2, #gal3:checked ~ #content3, #gal4:checked ~ #content4, #gal5:checked ~ #content5, #gal6:checked ~ #content6, #gal7:checked ~ #content7, #gal8:checked ~ #content8, #gal9:checked ~ #content9, #gal10:checked ~ #content10, #gal11:checked ~ #content11, #gal12:checked ~ #content12 { display: inline-block;}
.product-more-views img { bottom: 0;
  left: 0;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0;}
#product-condition img{
  position: relative;
  display: none;
  margin-top: 10px;
}




/*Tabs*/
.tab-bg{
  width: 100%;
;
      background-image:url(../images/tab-bg.png) ;
    padding:20px;
    background-size:100% 100%;
    position: relative;
}

.tabs {
  width: 100%;
  margin-top: 20px;
}
.tabs input {
  display: none;
}
.tabs label {
  display: inline-block;
  padding: 10px;
  width: 16%; /* =100/tabs number */
  margin:0px;
    background:#000;
  transition: .3s;

  text-align: center;
  color:#fff;
  font-weight: bold;
  text-transform: uppercase;

}
.tabs label:hover {
  cursor: pointer;
  background:#BA7900;
   color:#fff;
}
.tabs input:checked + label {
  background:#BA7900;
  color:#fff;
}
.content{
  padding: 0px 20px 20px 20px;
  background: #f5f5f5;
  border:1px dashed #01A4E7;
  font-family:Western;
}
.tabs #tab1:checked ~ .content #content1,
.tabs #tab2:checked ~ .content #content2,
.tabs #tab3:checked ~ .content #content3,
.tabs #tab4:checked ~ .content #content4,
.tabs #tab5:checked ~ .content #content5,
.tabs #tab6:checked ~ .content #content6 {
  display: block;
}
.tabs .content > div {
  display: none;
  padding-top: 20px;
  text-align: left;

}
.content h1,.content h2,.content h3,.content h4{
    font-size:24px;
    text-transform:uppercase;
    font-weight:bold;
}
.content li:before {
  font-family: 'FontAwesome';
   content: "\2741";
   padding-right:10px;
    color:#000;
}

/*tabs end*/
.cros-bg{
    background-image:url(../images/cross-bg.png);
    padding: 60px 0 80px;
    background-size:100% 100%;
    position: relative;
    margin:0px 0px 10px 0px

}
.crosswrapper{
  text-align:center;
  margin: 10px 0px
}
.crosswrapper a{
  text-decoration: none;
}
.crosswrapper h4{
    color:#fff;
    background:#000;
    padding:5px;
    text-align:center;
    font-weight:bold;
    text-transform:uppercase;
}
.left-title h4{
   background:#000;
    background-size: 100% 100%;
color: #fff;

  text-align: center;
  padding: 10px 10px;
  font-weight: bold
}
.box{
  text-align: center;
  transition:.5s;
  margin: 5px 0px;
    width: 100%;
    overflow: hidden;
    position: relative;
    border:2px solid #008EC7;
    background-size: 100% 100%;
    height: auto;
    padding: 20px
}
img{
   transition:.5s;
}
.box:hover img{
  
  transform: scale(1.3);
}
.box .img-box{
   background:#fff;
  overflow: hidden;
  height: 200px;
  margin:auto;
  padding: 10px;
  text-align: center;

}
.box .img-box img{
  height: 100%
}

.box  h2{
  margin:0px;
  padding:10px;
  text-align: center;
  background-size: 100% 100%;
  background-position: center;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 11px;
}
.box  h1{
  padding:10px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  font-size:15px;
  width:100px;
  margin:10px auto;

}
.box  h3{
  position: relative;
  padding:16px 10px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  font-size:15px;
  background:#000;
  margin:auto;
  
  width: 70%;

  transition:.5s;


}
.box:hover h3{
  background:#BA7900;
}
.category{
  text-align: center;
}
.category .img-boz{
  border:1px solid #000;
  width: 180px;
  margin:2px;
  padding: 5px;
  background:  #fff;
     display: inline-block;
}
.category a{
     display: inline-block;
}
.category h4{
  background: #000;
  color: #fff;
  padding: 7px 0px;
  margin: 0px;
  font-weight: bold;
  font-size: 12px
}
.category .img-boz img{
   display: inline-block;
  max-width: 100%;
  max-height: 100%;
}


.footer{
     background-image:url(../images/footer-bg.png) ;
    padding:40px 0px 10px 0px;
    background-size:100% 100%;
}
.footer-title h4{
  margin:0px;
  padding:10px;
  background:#BA7900;
  color: #fff;
  text-align: center;
  font-weight: bold;
  background-size: 100% 100%;
  font-weight: bold;
  text-transform: uppercase;
}
.footer-detail{
    padding:20px;
}

.footer-detail ul li a{
  text-decoration: none!important;
   color:#000;
}
.footer-detail ul li a:before {
  font-family: 'FontAwesome';
   content: "\2741";
    padding-right:10px;
     color:#BA7900;
}
.footer-detail-1 img{
  width: 100%;
   padding:20px;
}
.designby p{
  background: #BA7900;
  color: #fff;
  font-weight: bold;
  text-align: center;

 margin:auto;
 padding: 10px;
}
@media only screen and (max-width: 767px) {
.menu-bg input,.menu-bg label{
  display: block;
}
.menu-bg input{
  visibility: hidden;
}
.menu-bg label{
  background:#000;
  color: #fff;
  padding-left:10px;
  font-size: 20px;
  padding: 5px;
  text-align: left;
}
.menu-bg label:before{
  font-family: 'FontAwesome';
   content: "\f0c9";
    padding-right:10px;
     color:#BA7900;
     font-size: 20px;
     background:#000;
     width: 100%
}
.menu-bg input:checked ~ .menu{
  display: block;
  transition: .3s
}
.menu{
  display: none;
}
.menu ul li{
  display: table;
   width: 100%!important;
   text-align: left;
}
.menu ul li a{
  font-size: 15px;
  display: block;
  width: 100%!important
}
.buy-now-btn a{
    font-size:13px;
}

.footer-detail ul{
  float: none;
}
.header {
  text-align: center;
}
.tabs label{
  width: 100%
}
.top-left, .top-right{
  width: 100%;
  margin-top: 0px
}
.product-more-views{
  position: relative;
  top: 0px;
  margin-top: 10px
}
.product-image-container{
  height: auto;
}
.product-more-views,.product-more-views ul,.product-image-box{
  width: 100%
}
.content {

    position: relative;
top: 0;
        width:100%; 
            right:0px; 
                height: auto; 
    overflow: auto;
}
.tab-bg{
  height: auto;
  padding: 0px
}
.middle-body,.short-description{
  padding: 0px
}
.top-right ul li{
  display: block;
  text-align: center;
}
.logo img {
  width: 100%
}
.product-image-container img{
  height: auto
}
.variation{
  width: 100%
}
.banner .gallery1{
    height:auto;
}
.banner .gallery1 img{
    max-height:100%;
}
}