@-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;}

.respMenu,
#respMenu,
#menu ul ul,
#menu ul li.cats,
#respCats {display:none}

.price {overflow: hidden;}
#sidebar #categoriesside {margin:0;padding:0; list-style:none;}
#sidebar #categoriesside li {
    margin: 0;
    padding: 0;
    border-top: 2px #fff solid;
    display: block;
    min-height: 28px;
    background: #e3e3e3;
    font-weight: normal;
}
#sidebar #categoriesside li a {    font-size: 12px;
    color: #2c2c32;
    line-height: 18px;
    display: block;
    padding: 5px 5px 5px 20px;
    font-weight: normal;
    background: url(https://shared1.ad-lister.co.uk/UserImages/d762cec3-7ec1-43df-aec2-9620626166d7/Img/_design/arrow-left.png) left center no-repeat;
}
#sidebar #categoriesside li a:hover {    color: #fff;
    text-decoration: none;
    background: #c3c526;
}

.product {display:block; position: relative; margin: 0; padding: 0}
.product:after {content: ''; clear: both; display: table}
.product .prod {float: left; width:33.333%; display: block; padding:0px; text-align:center;}
.product .prod.it4 {clear: both;}
.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 {padding:5px} 
.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 {padding:5px; background:transparent; min-height:auto;}
.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; right:0; max-height:340px; 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:0;
    margin: 0 auto;
    overflow:hidden;
    clear: both;
    background:transparent;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
}
#tabs section {
    display: none;
    padding: 10px 0;
    position: relative;
    margin:0;
}
#tabs input {
    display: none;
}
#tabs label:hover {
    text-decoration: underline;
    cursor: pointer;
}
#tabs .box {
    margin:0;
    padding:0;
    position: relative;
}
.tabNames {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    background:#C0C226;
    height: 30px;
    padding:10px 5px 0 5px;
    display: block;
    text-align: center;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box;
}
.tabNames label {
    display: inline-block;
    margin:0 5px;
    padding: 0 35px;
    height: 30px;
    line-height:30px;
  font-size:12px;
    color: #fff;
    float:none; 
    vertical-align:middle;
    position: relative;
    text-align: center;
    background:#87892B;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
#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] {
    background:#fff;
    color:#87882B;
}
@media screen and (max-width: 650px) {
    .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: #87892B !important;
        color: #fff !important;
        height: 40px; 
        text-align:left; 
        line-height: 40px;
        border-bottom:1px #fff solid
    }
    #tabs {padding-bottom: 10px}
    #tabs label,
    #tabs label:hover {
        color:#fff;
        padding: 0 10px;
    }
    .tabNames,
    #tabs label {
        border-radius:0;
        -moz-border-radius:0;
        -webkit-border-radius:0;
        margin: 0
    }
    #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
    }
    #tabs section,
    .tabNames label {
        padding:10px;
    }
}

@media screen and (max-width: 980px){
.pageListing,
#listing #footer,
#imgGallery,
.links,
#listing #header {width: 100%}
#right-content {width: calc(100% - 240px); float: right}
.imgHolder .left {float:none; width: 100%; padding-bottom: 10px}
.imgHolder .right{float: none; width:100%;}
.links a.button.buy-now {font-size: 13px}
.tabNames label {padding:0 30px}
}
@media screen and (max-width: 960px){
#right-content {padding-right:10px; width:calc(100% - 230px);}
}
@media screen and (max-width: 920px){
.tabNames label {padding:0 25px}
}
@media screen and (max-width: 870px){
.tabNames label {padding:0 20px}
}
@media screen and (max-width: 820px){
.tabNames label {padding:0 15px}
}
@media screen and (max-width: 780px){
.respCats,
.respMenu {display:block !important; position:relative; cursor:pointer; background:#C3C526; font-size:14px; color:#fff; padding:0 10px 0 40px; height:40px; line-height:40px;}
.respMenu:before {display: block;content: "";border-top: 4px solid #fff;position: absolute;height: 11px; width: 20px;left: 10px; top: 11px;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: 25px;}
.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 {padding-left: 10px; }
.respCats:hover {background:#87882B;}
  #menu ul li.cats,
#respCats:checked ~ ul,
#respMenu:checked ~ ul {display:block;}
  #menu ul ul {background:#87882B;}
  #menu ul li li,
  #menu ul li.cats {height:auto; line-height:normal;}
  #menu ul li li a {padding:5px 10px;}
#header .right p {display: none}
.tabNames label {padding:0 35px}
.imgHolder {padding:0 0 10px 0}
#right-content {padding-left:10px; padding-right:10px}
}
@media screen and (max-width: 750px){
.tabNames label {padding:0 25px}
}
@media screen and (max-width: 680px){
.tabNames label {padding:0 20px}
}
@media screen and (max-width: 640px){
  .product .prod {width:50%;}
  .product .prod.it4 {clear:none;}
  .product .prod.it3,
  .product .prod.it5 {clear:both;}
}