@-webkit-keyframes bugfix{from{padding:0}to{padding:0}}
@-webkit-keyframes fake{from{opacity:1}to{opacity:1}}
@keyframes fake{from{opacity:1}to{opacity:1}}
body {background:#fff; animation:bugfix infinite 1s; -webkit-animation:bugfix infinite 1s; padding:0;}
img {max-width:100%;}
.respMenu,
#respMenu,
#respCats {display:none}
#topArea {padding-top:10px}
#menu > ul {display:table; width: 100%}
#menu > ul > li {display: table-cell;}
#menu ul li label {font-family:'Open Sans', sans-serif; text-transform: uppercase; height: 50px; line-height: 50px; padding:0 24px; font-size:15px; cursor: pointer; color:#fff; font-weight: normal; display:block;}
#menu ul li:hover > label {background:#CD0000;}
#menu ul li label img {margin-left: 5px; position: relative; top:2px;}
#header h1 {float:none; margin:0 auto;}
#page > h1.title {display:none;}
@media screen and (max-width: 1000px){
  #page {padding:10px;}
  #page .sidebar h1.title,
#topArea {display:none;}
.respCats,
.respMenu {display:block; position:relative; cursor:pointer; background:#2C2A69; font-size:16px; font-weight: bold; color:#fff; padding:0 10px 0 40px; height:50px; line-height:50px; text-transform: uppercase;}
#menu ul {display: none; background:#428BCA}
#menu ul li {width: 100%; display: block;}
.respMenu:before {display: block;content: "";border-top: 4px solid #fff;position: absolute;height: 11px; width: 20px;left: 10px; top: 16px;border-bottom: 4px solid #fff;border-top: 4px solid #fff;}
.respMenu:after {display: block; content: "";background: #fff;position: absolute;height: 4px;width: 20px;left: 10px;top: 30px;}
.respCats:after {position:absolute; width: 0; right:10px; top:15px; content:''; height: 0;border-style: solid;border-width: 10px 5px 0 5px;border-color: #fff transparent transparent transparent;}
#respCats:checked ~ ul,
#respMenu:checked ~ ul {display:block !important}
#menu ul li.cats label.respCats {height: auto; line-height:normal; text-align: left; color:#000; background:transparent; padding:7px 10px; font-size: 13px;}
#menu ul li.cats label.respCats:hover {background:#CD0000; color:#fff;}
#menu ul li.cats label.respCats img {display: none}
  #footer .box {float:none; width:100%;}
  #footer .box ul {width:100%; display:block;}
  #footer .box ul:after {content:''; clear:both; display:table;}
  #footer .box ul li {float:left; width:33.333%;}
  #page > h1.title {display:block;}
}

.product {display:block; position: relative; margin: 0; padding: 0}
.product:after {content: ''; clear: both; display: table}
.product .prod {float: left; width:25%; display: block; padding:10px 5px; text-align:center;}
.product .prod.first {}
.product .prod.last {}
.product .prod .image {margin:0 auto; padding: 0 5px; display:block;}
.product .prod .image span {display:block; margin:0; padding:0; overflow:hidden;}
.product .prod .image span a {width:100%; height: 100px; position: relative; display: block;}
.product .prod .image span a img {max-width: 100%; max-height:100px; position: absolute; left:0; top:0; right:0; bottom:0; margin: auto; border:none; padding:0}
.product .prod .title {} 
.product .prod .title h4 {margin:0; padding:10px 0;}
.product .prod .title h4 a {text-decoration: none; color:#000;}
.product .prod .title h4 a:hover {text-decoration: underline;}
.product .prod .price {}
.product .prod .price p {margin:0; padding:0}
.product .prod .btn {display:none; text-align: center; margin:0; padding:10px 0; }
.product .prod .btn a {display: inline-block; text-decoration: none; padding:0 10px;height:25px; line-height: 25px; color:#fff; background:#222;}
.product .prod .btn a:hover {text-decoration: underline;}

.gallery {width:100%;position:relative;padding-top:350px !important; display:block; margin:0 auto;}
.gallery > img {position:absolute;left:0;top:0;transition:all .5s; max-width:100%; margin:auto; bottom:0; right:0; max-height:350px; padding:0px;}
.gallery input[name='slide_switch'] {display:none}
.gallery label {margin:0; padding:0; float:left; border:1px solid #999; background:#fff;  cursor:pointer; transition:all .5s; width:25%; height:100px; position:relative;}
.gallery label img {display:block; width:auto; max-width:100%; position:absolute; margin:auto; padding:0; right:0; left:0; top:0; bottom:0; max-height:100%;}
.gallery > input[name='slide_switch']:checked+label {border-color:#666;opacity:1}
.gallery > input[name='slide_switch'] ~ img {opacity:0;transform:scale(1)}
.gallery > input[name='slide_switch']:checked+label+img {opacity:1;transform:scale(1)} 

@media screen and (max-width: 780px) {
.gallery label {width:25%; height:100px;}
}

@media screen and (max-width: 580px) {
.gallery label {width:33.333%;}
}

@media screen and (max-width: 380px) {
.gallery label {width:50%;}
}


#tabs {
    width:100%;
    height: auto;
    padding:10px 0 0 0;
    margin: 0 auto;
    overflow:hidden;
    clear: both;
}
#tabs section {
    display: none;
    padding: 10px 0;
    position: relative;
    margin:0;
}
#tabs input {
    display: none;
}
#tabs label:hover {
    color: #428BCA;
    cursor: pointer;
}
#tabs .box {
    margin:0;
    padding:0;
    position: relative;
}
.tabNames label {
    display: inline-block;
    margin: 0;
    padding: 0 ;
    height: 40px; 
    line-height: 40px;
    font-size: 16px;
    background:#151515;
    color: #fff;
    text-transform: uppercase;
    float:none; 
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
    display: table-cell;
    vertical-align:middle;
    position: relative;
    text-align: center;
}
.tabNames label:last-child {border:none;}
#tab0 ~ .tabNames,
#tab1 ~ .tabNames,
#tab2 ~ .tabNames,
#tab3 ~ .tabNames,
#tab4 ~ .tabNames,
#tab5 ~ .tabNames {
    display: none;
}
#tab0:checked ~ #content0,
#tab0:checked ~ .tabNames,
#tab1:checked ~ #content1,
#tab1:checked ~ .tabNames,
#tab2:checked ~ #content2,
#tab2:checked ~ .tabNames,
#tab3:checked ~ #content3,
#tab3:checked ~ .tabNames,
#tab4:checked ~ #content4,
#tab4:checked ~ .tabNames,
#tab5:checked ~ #content5,
#tab5:checked ~ .tabNames {
    margin:0;
    display: table;
    width: 100%
}
#tab0:checked ~ .tabNames label[for=tab0],
#tab1:checked ~ .tabNames label[for=tab1],
#tab2:checked ~ .tabNames label[for=tab2],
#tab3:checked ~ .tabNames label[for=tab3],
#tab4:checked ~ .tabNames label[for=tab4],
#tab5:checked ~ .tabNames label[for=tab5] {
    color:#fff;
    background:#CD0000
}
@media screen and (max-width: 650px) {
  .product .prod {width:50%;}
  .product .prod.it3 {clear:both;}
  
    .tabNames {padding:0}
    .tabNames i:before, 
    .tabNames i:after {
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
    }
    .tabNames i {
      position: absolute;
      -webkit-transform: translate(-6px, 0);
      -moz-transform: translate(-6px, 0);
      -ms-transform: translate(-6px, 0);
      -o-transform: translate(-6px, 0);
      transform: translate(-6px, 0);
      margin-top:15px;
      right: 10px;
    }
    .tabNames i:before,
    .tabNames i:after {
      content: '';
      position: absolute;
      background: #fff;
      width: 3px;
      height: 9px;
    }
    .tabNames i:before {
      -webkit-transform: translate(-2px, 0) rotate(-45deg);
      -moz-transform: translate(-2px, 0) rotate(-45deg);
      -ms-transform: translate(-2px, 0) rotate(-45deg);
      -o-transform: translate(-2px, 0) rotate(-45deg);
      transform: translate(-2px, 0) rotate(-45deg);
    }
    .tabNames i:after {
      -webkit-transform: translate(2px, 0) rotate(45deg);
      -moz-transform: translate(2px, 0) rotate(45deg);
      -ms-transform: translate(2px, 0) rotate(45deg);
      -o-transform: translate(2px, 0) rotate(45deg);
      transform: translate(2px, 0) rotate(45deg);
    }
    #tabs input:checked ~ .tabNames i:before {
      -webkit-transform: translate(2px, 0) rotate(-45deg);
      -moz-transform: translate(2px, 0) rotate(-45deg);
      -ms-transform: translate(2px, 0) rotate(-45deg);
      -o-transform: translate(2px, 0) rotate(-45deg);
      transform: translate(2px, 0) rotate(-45deg);
      background: #213045;
    }
    #tabs input:checked ~ .tabNames i:after {
      -webkit-transform: translate(-2px, 0) rotate(45deg);
      -moz-transform: translate(-2px, 0) rotate(45deg);
      -ms-transform: translate(-2px, 0) rotate(45deg);
      -o-transform: translate(-2px, 0) rotate(45deg);
      transform: translate(-2px, 0) rotate(45deg);
      background: #213045;
    }
    #tab0 ~ .tabNames,
    #tab0 ~ .tabNames label[for=tab0],
    #tab1 ~ .tabNames,
    #tab1 ~ .tabNames label[for=tab1],
    #tab2 ~ .tabNames,
    #tab2 ~ .tabNames label[for=tab2],
    #tab3 ~ .tabNames,
    #tab3 ~ .tabNames label[for=tab3],
    #tab4 ~ .tabNames,
    #tab4 ~ .tabNames label[for=tab4],
    #tab5 ~ .tabNames,
    #tab5 ~ .tabNames label[for=tab5]  {
        display: inline-block;
        width: 100%;
        background: #428BCA;
        color: #fff !important;
        height: 40px; text-align:left; line-height: 40px;
    }
    #tabs label,
    #tabs label:hover {
        color:#fff;
        padding: 0 10px
    }
    #tab0 ~ .tabNames label[for=tab1],
    #tab0 ~ .tabNames label[for=tab2],
    #tab0 ~ .tabNames label[for=tab3],
    #tab0 ~ .tabNames label[for=tab4],
    #tab0 ~ .tabNames label[for=tab5],
    #tab1 ~ .tabNames label[for=tab0],
    #tab1 ~ .tabNames label[for=tab2],
    #tab1 ~ .tabNames label[for=tab3],
    #tab1 ~ .tabNames label[for=tab4],
    #tab1 ~ .tabNames label[for=tab5],
    #tab2 ~ .tabNames label[for=tab0],
    #tab2 ~ .tabNames label[for=tab1],
    #tab2 ~ .tabNames label[for=tab3],
    #tab2 ~ .tabNames label[for=tab4],
    #tab2 ~ .tabNames label[for=tab5],
    #tab3 ~ .tabNames label[for=tab0],
    #tab3 ~ .tabNames label[for=tab1],
    #tab3 ~ .tabNames label[for=tab2],
    #tab3 ~ .tabNames label[for=tab4],
    #tab3 ~ .tabNames label[for=tab5],
    #tab4 ~ .tabNames label[for=tab0],
    #tab4 ~ .tabNames label[for=tab1],
    #tab4 ~ .tabNames label[for=tab2],
    #tab4 ~ .tabNames label[for=tab3],
    #tab4 ~ .tabNames label[for=tab5],
    #tab5 ~ .tabNames label[for=tab0],
    #tab5 ~ .tabNames label[for=tab1],
    #tab5 ~ .tabNames label[for=tab2],
    #tab5 ~ .tabNames label[for=tab3],
    #tab5 ~ .tabNames label[for=tab4],
    #tab0:checked ~ .tabNames label[for=tab1],
    #tab0:checked ~ .tabNames label[for=tab2],
    #tab0:checked ~ .tabNames label[for=tab3],
    #tab0:checked ~ .tabNames label[for=tab4],
    #tab0:checked ~ .tabNames label[for=tab5],
    #tab1:checked ~ .tabNames label[for=tab0],
    #tab1:checked ~ .tabNames label[for=tab2],
    #tab1:checked ~ .tabNames label[for=tab3],
    #tab1:checked ~ .tabNames label[for=tab4],
    #tab1:checked ~ .tabNames label[for=tab5],
    #tab2:checked ~ .tabNames label[for=tab0],
    #tab2:checked ~ .tabNames label[for=tab1],
    #tab2:checked ~ .tabNames label[for=tab3],
    #tab2:checked ~ .tabNames label[for=tab4],
    #tab2:checked ~ .tabNames label[for=tab5],
    #tab3:checked ~ .tabNames label[for=tab0],
    #tab3:checked ~ .tabNames label[for=tab1],
    #tab3:checked ~ .tabNames label[for=tab2],
    #tab3:checked ~ .tabNames label[for=tab4],
    #tab3:checked ~ .tabNames label[for=tab5],
    #tab4:checked ~ .tabNames label[for=tab0],
    #tab4:checked ~ .tabNames label[for=tab1],
    #tab4:checked ~ .tabNames label[for=tab2],
    #tab4:checked ~ .tabNames label[for=tab3],
    #tab4:checked ~ .tabNames label[for=tab5],
    #tab5:checked ~ .tabNames label[for=tab0],
    #tab5:checked ~ .tabNames label[for=tab1],
    #tab5:checked ~ .tabNames label[for=tab2],
    #tab5:checked ~ .tabNames label[for=tab3],
    #tab5:checked ~ .tabNames label[for=tab4]{
        display: none
    }
    #tab0:checked ~ section,
    #tab1:checked ~ section,
    #tab2:checked ~ section,
    #tab3:checked ~ section,
    #tab4:checked ~ section,
    #tab5:checked ~ section {
        border-bottom: 1px solid #223247
    }
    #tabs .box:last-of-type section {
        border-bottom:none !important;
    }
    #tabs section,
    .tabNames label {
        padding:10px 0;
    }
    .tabNames label:last-child {
        border-bottom:none;
    }
}