@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i|Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500');
body{ margin-left:0 !important; margin-right:0 !important;}
.wrapper img, #banner img{ max-width:100%; height:auto;}
*{ padding:0px; margin:0px;}
a img{ border:0px;}
ul, ol{ list-style-type:none;}
a{ text-decoration:none;}
div:after, ul:after{	content:"";	height:0;	clear:both;	visibility:hidden;	display:block;}
div{ display:block;}
.clear{ clear:both; line-height:0; font-size:0;}
.wrapper{ width:1200px; margin:0 auto;}

#header{ padding:18px 0 22px; background:#000;}
#logo{ float:left;}
#search{ float:right; margin:23px 0 0; border:1px solid #9d9d9d; width:190px; height:33px; position:relative; border-radius:4px;}
#search input[type="text"] { background: #fff; border:0 none; font:400 14px/40px "Roboto",sans-serif; height:33px; text-indent:10px; width:100%; border-radius:4px;}
#search input[type="submit"]{ background: #ecad00 url("../images/search.png") no-repeat 50% 50%; border:0; font-size:0; height:33px; position:absolute; right:0; top:0; width:33px; cursor:pointer; border-radius:0;}
.right-top{ float:right; width:45%;}
.twenty-five{ width:37%; float:left;}
.thirty{ width:59%; float:left;}
.thumb-top{ float:left; position:relative; padding:0 0 0 42px; color:#fff; font:700 16px/20px "Roboto",sans-serif;}
.thumb-top span{ font-size:24px; line-height:28px; font-weight:400;}
.thumb-top img{ position:absolute; left:0; top:0;}
.top-imggap{ padding:23px 0 0;}
#navigation{ background:#ecad00;}
#navigation ul li{ float:left;}
#navigation ul li+li{ border-left:1px solid #000;}
#navigation ul li a{ display:block; font:400 16px/61px "Roboto",sans-serif; color:#fff; padding:0 59px; text-transform:uppercase; transition:all 300ms ease-out 0s;} 
#navigation ul li a:hover{ background:#000; color:#fff;}
#navigation #nav-btn, #navigation input[type="checkbox"] {    display: none;}
#navigation #nav-btn, #navigation input[type="checkbox"] {    display: none;}
#options{ margin-top:15px; /*background:#ecad00;*/}
#options > div{ float:left; color:#000; font:400 16px/20px "Roboto",sans-serif; padding:15px 8px; position:relative; text-transform:uppercase; box-sizing:border-box; width:49.34%; min-height:103px; margin:8px 8px 0 0; background:#ecad00;}

#options > div img{ float:left;}
#options > div > div{ display:inline-block; padding:2px 8px 8px;}
#options > div span{ display:block;}
#options  > div:nth-child(2n+2){ background:#000000; color:#fff; margin-right:0;}
.twenty-one{ float:left;}

#content{ padding:20px 0 20px; background:url(../images/content-bg.jpg) repeat 0 0;}
#content h3{ font:400 18px/22px "Roboto",sans-serif; padding:0 0 15px; color:#000;}
#footer{ background:#262628; padding:30px 0;}
#footer ul li{ float:left;}
#footer ul li a{ color:#fff; font:400 14px/16px "Roboto",sans-serif; padding:0 20px; text-transform:uppercase;}
#footer ul li:first-child a{ padding-left:0;}
#footer p{ color:#fff; font:400 14px/16px "Roboto",sans-serif; padding:15px 0 0;text-transform:uppercase;}
#footer .footer-left{ float:left;}
#footer .footer-right{ float:right; padding:10px 0 0;}
#footer .footer-right h4{ display:inline-block; vertical-align:top;}
.table-option{ width:1200px; margin:0 auto;}
.right-footer {color: #fff;float: right;font: 400 14px/28px "Roboto",sans-serif; padding: 7px 0 0;text-transform: uppercase; text-align:center;}

a.cart{margin:10px 0 0; display:block;}

.slider  .img-details{ position: absolute; left: 0; top: 0; -webkit-transition: all 0.25s; transition: all 0.25s;
 text-align:center; z-index:2;  overflow: hidden; background: #FFF; height:480px; width:480px; box-sizing:border-box;}
.slider .grid-wrapper {  -webkit-flex-wrap: wrap;  -ms-flex-wrap: wrap;  flex-wrap: wrap; position:relative; margin:0 auto; height:480px; width:480px;}
 .slider{	width: 100%;	display:inline-block;	position:relative;	padding:0px;}
.slider .grid-item {  height: 20%;  width: 20%;  position:relative;  z-index:2;  background:#ccc;  opacity:0;  float:left}
.slider .grid-item:hover:nth-of-type(5n + 1) ~ .img-details img{ left: 0px; }
.slider .grid-item:hover:nth-of-type(5n + 2) ~ .img-details img { left: -25%; }
.slider .grid-item:hover:nth-of-type(5n + 3) ~ .img-details  img{ left: -50%; right:auto;}
.slider .grid-item:hover:nth-of-type(5n + 4) ~ .img-details  img{ right: -25%; left:auto; }
.slider .grid-item:hover:nth-of-type(5n + 5) ~ .img-details  img{ right: 0%; left:auto; }
.slider .grid-item:hover:nth-of-type(1n + 1) ~ .img-details img { top: 0px; }
.slider .grid-item:hover:nth-of-type(1n + 6) ~ .img-details  img{ top: -25%; }
.slider .grid-item:hover:nth-of-type(1n + 11) ~ .img-details img { top:-50%; bottom:auto;}
.slider .grid-item:hover:nth-of-type(1n + 16) ~ .img-details  img{ bottom:-25%; top:auto;}
.slider .grid-item:hover:nth-of-type(1n + 21) ~ .img-details  img{ bottom:0;  top:auto;}
.slider .grid-item ~ .img-details img{ position:absolute; top:0; left:0; max-width:100%}
.slider .grid-item:hover ~ .img-details img{  width: 150%;  height:auto;  max-width:150%;  max-height:150%;}
.slider input[name='slide_switch'] { display: none;}
.slider label { margin: 13px 0.5% 0; cursor: pointer; transition: all 0.5s; opacity: 1; float:left; width:32.33%;}
.slider span {  text-align:center; display:block; border: 1px solid #ccc;}
.slider #id5 + label,.slider #id10 + label,.slider #id15 + label{margin-right:0;}
.slider  span:has(img[src=""]){display:none;}
.slider label img[src=""]{display:none} 
.slider label img{display:none }
.slider label img{display:block !important; width:100%; height: 120px;}
.slider input[name='slide_switch'][value != ""] + label {display:  inline-block !important}
.slider input[name='slide_switch'][value != ""] + label + .img-details{display:  inline-block !important}
.slider input[name='slide_switch'][value=""] + label{display: none !important}
.slider input[name='slide_switch'][value=""] + label + .img-details{display:  none !important}
.slider input[name='slide_switch']:checked+label { opacity: 1;}
.slider input[name='slide_switch']:checked+label span, .slider span:hover { border-color: #ccc; }
.slider input[name='slide_switch'] ~ .img-details { opacity: 0; display:none;}
.slider input[name='slide_switch']:checked + label + .img-details { opacity: 1; display:inline-block; z-index:1; border:solid 1px #ccc;}
.slider label + .img-details { opacity: 1; display:block; z-index:1;}
.img-details {  transition: all 300ms ease-out 0s;}
.img-details  img{ transition: all 300ms ease-out 0s;}
.slider .grid-item:nth-child(5n+1){ clear:left;}


.tab-content{ padding:45px 0 0;}
.tab-content > label{ background: #262628;  border-radius: 0; color: #fff; display:inline-block;font:400 16px/47px 'Raleway', sans-serif;  padding:0 42px; margin-bottom:0; cursor:pointer; height:47px; text-align:center;}
.tab-content input[type="radio"]{ display:none;}
.tab-content input[type="radio"]:checked+label, .tab-content > label:hover, .tab-content > a:hover{ background: #ecad00;  border:none; color:#fff; margin-bottom:0;}
.tab-content > div{ display:none;}
.accordion-content{ border:1px solid #bbbbbb; border-radius:0 0 4px 4px; padding:1px 15px 10px;}
.accordion-heading{ font:400 16px/30px 'Raleway', sans-serif; padding:1px 18px; color:#313131; border-radius:4px 4px 0 0; border:1px solid #ececec; cursor:pointer; background:#c9cfcd;}
.accordion-heading.ui-accordion-header-active{ color:#fff; background:#ecad00; border:1px solid #3c1706;}
.accordion-content p{ font:400 14px/20px "Roboto",sans-serif; color:#464545; padding:10px 0 0;}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4, #tab5:checked ~ #content5, #tab6:checked ~ #content6   {    display: block;}

#details-left{ width:480px; float:left;}
#details-right{ width:705px; float:right;}
#details-right .price{  font:700 38px/40px "Roboto",sans-serif; color:#1b4196; text-transform:uppercase; padding:15px 0; border-top:solid 1px #fff;}
#details-right .price span{ color:#22397d;}
#content h1{ color:#000; font:400 30px/32px "Roboto",sans-serif;   padding:15px 0 10px; text-transform:uppercase;}
#content p{ font:400 15px/20px "Roboto",sans-serif; color:#090909; padding:10px 0 0;}








@media only screen and (max-width: 1198px) {
.wrapper{ width:1000px;}
.right-top{ width:50%;}
#navigation ul li a{ padding:0 39px;}
#options > div{ width:49.19%; font-size:13px;}

#details-left {    float: left;    width:400px;}
#details-right {    float: right;    width:585px;}
.slider  .img-details{ height:400px; width:400px;}
.slider .grid-wrapper { height:400px; width:400px;}
.tab-content > label{ padding:0 36px;}
}
@media only screen and (max-width: 990px) {
.wrapper{ width:748px;}
#navigation ul li a{ padding:0 14px;}
#options > div {  box-sizing: border-box;  float: left;  padding:10px 20px;  width: 49%; margin:0 0 5px 1%; font-size:16px;}
#options > div:nth-child(4n+1){ clear:none; margin:0 0 5px 1%;}
.table-option{ width:748px;}
#footer ul li a{ padding:0 10px;}
#footer .footer-left{ float:none; margin:0 auto; display:table; text-align:center;}
.right-footer{ float:none; margin:0 auto; text-align:center; display:table; padding-top:20px;}
#details-left {    float: none;    width:100%;}
#details-right {    float: none;    width:100%; padding:30px 0 0;}
.tab-content > label{ padding:0 18px;}
.list > div, .list > div > div{ width:50%;}
#logo{ float:none; text-align:center; padding:0 0 10px;}
.right-top{ width:72%;}

}
@media only screen and (max-width: 740px) {
.wrapper{ width:98%;}
#options > div:nth-child(4n+1){ margin:0;}
#options > div {  box-sizing: border-box;  float:none;  padding:17px 9px;  width:100%; box-sizing:border-box; margin:4px 0 0;}
#options > div > div{ padding:5px 15px;}
#options > div > div:nth-child(4n+4){ padding:5px 25px;}
.fourty, .sixty{ width:100%; float:none;}
#content { padding:25px 0;}
.heading{ text-align:center;}
#footer .footer-right, #footer .footer-left{ float:none; text-align:center;}
#footer ul{ display:none;}
#footer p{ padding:0 0 10px;}
.ctrlbr { border-bottom: 0 none !important; float:none; margin:0 auto; padding:10px 0 0 !important; text-align:center;}
.ctrlbr .cur{ float:none;}
td.gallery {    padding: 15px 7px !important; display:block; width:auto; float:none;}
span.pdmt .label{ display:none;}
table.pgbc table.pager .pages a { margin:0 2px; padding:2px 8px;}
#fpcap > div > span{ display:block; text-align:center;}
#LeftPanel{ height:50px; display:block; overflow:hidden;}
#LeftPanel:hover{ height:auto;}
#fpcap .countClass, #fpcap .matchClass, #fpcap .keywordClass{font: italic 400 16px/20px "Lora",sans-serif !important;}
#navigation input[type="checkbox"]+ul{ display:none;}
#navigation input[type="checkbox"]:checked+ul{ display:block;}
#navigation ul li{ float:none;}
#navigation ul li a{ line-height:34px;}
#navigation ul li{ border-top:1px solid #0e0a07;}
#navigation ul li+li{border-left:0;}
#navigation #nav-btn { background:url("../images/navigation.png") no-repeat 0 50%;  border-radius:4px; color: #fff; cursor: pointer; display: block;
    font:400 17px/40px "Roboto Condensed",sans-serif;  height:40px; margin:0; text-align: right;  text-transform: uppercase;}
#logo{ float:none; text-align:center;}
.table-option{ width:98%;}
.table-option #LeftPanel{ float:none; display:block; width:auto;}
.table-option #LeftPanel+td, .table-option #LeftPanel+td+td{ float:none; display:block; width:auto;}
.slider  .img-details{ height:350px; width:350px;}
.slider .grid-wrapper { height:350px; width:350px;}
.twenty-one{ float:none; text-align:center;}
.right-top{ width:100%; float:none;}
.twenty-five {display: table;float: none;margin: 0 auto;text-align: center;width: 100%; padding:15px 0;}
.thirty{display: table;float: none;margin: 0 auto;text-align: center;width:74%; }
.thumb-top{ float:none; margin:0 auto; display:inline-block; text-align:left;}
.tab-content > label{ padding:0 19px;}

}

@media only screen and (min-width: 740px) {

}
@media only screen and (max-width: 450px) {
.wrapper{ width:96%;}	
.table-option{ width:96%;}

.slider  .img-details{ height:300px; width:300px;}
.slider .grid-wrapper { height:300px; width:300px;}
#options > div{ padding:17px 5px;}
#options > div > div{ padding:5px 4px;}
.tab-content > label{ padding:0 20px; float:none; display:block; border-radius:4px; margin:2px 0 0;}
}