#listing {font-family: 'Arial'; font-size:12px; font-weight: normal;}

@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: #01141E;
        color: #fff !important;
        height: 40px; 
        text-align:left; 
        line-height: 40px;

    }
    #tabs label,
    #tabs label:hover {
        color:#fff;
        border:0;
        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
    }
    .tabNames label {border:0;}
}

@media screen and (max-width: 1580px) {
  .pagecontainer {overflow:visible;}
  .icarsoft p {padding:0 10px;}
  .icarsoft p:before {display: none !important;}
  #brands .owl-nav div, 
  #offers .owl-nav div,
  #homeCats .owl-nav div {left:0;}
  #brands .owl-nav .owl-next, 
  #offers .owl-nav .owl-next,
  #homeCats .owl-nav .owl-next {right:0;}
  #brands .topitemholder {padding:10px 40px;}
  #offers {padding:0 10px;}
  #homeBlocks {overflow:hidden; width: 100% !important}
  #homeBlocks .holder {width: calc(100% + 20px); display: block; margin:0; padding:0;}
  #homeBlocks .holder:after {content:''; clear:both; display: table}
  #promoLeft img {max-width: 100%}
}

@media screen and (max-width: 1540px) {
  .inside, 
  .mainTable {width: 100% !important}
  .stBadge {min-width: 0}
  .stBadge > img{display: none}
  #homeBlocks {padding:0 10px;}
  #homeBlocks .holder {width:calc(100% + 15px);}
  #homeBlocks .box .in img {max-width: 100%}
  .icarsoft {font-size:20px}
  #search .v4sbox {min-width: 150px}
  #LeftPanel {width: 250px}
  .mainTable {padding:0 10px;}
  #tabs,
  .threeBlocks,
  #page {width: 100%; padding-left:10px; padding-right: 10px}
}

@media screen and (max-width: 1440px) {
  #search {display: none}
}

@media screen and (max-width:1280px){
  #search {display: block; float: right; margin:20px 10px 0 0; min-width: 250px}
  #header {padding:10px 0 0 0;}
  #header h1 {margin:0 0 10px 0;}
  #menu {float:none; clear: both; margin:0;}
  #menu ul {display: none; font-size: 14px;}
  .respMenu {display:block; position:relative; font-family: 'Oswald', sans-serif; cursor:pointer; background:#18BDE8; font-size:16px; text-transform: uppercase; color:#fff; padding:0 40px 0 10px; height:50px; line-height:50px;}
  .respMenu:before {display: block;content: "";border-top: 4px solid #fff;position: absolute;height: 11px; width: 20px;right: 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;right: 10px;top: 30px;}
  #respMenu:checked ~ ul {display: block;}
  #menu ul li {float: none; font-weight: normal; border-top:1px rgba(255,255,255,0.2) solid; display: list-item;}
  #menu ul li.home a img {margin:0 10px 0 0; display: none}
  #menu ul li.home a span {display: inline-block;}
  #menu ul li a {padding:10px; background:#555; display: block; color:#fff;}
  #menu ul li:hover a {text-decoration: none; color:#fff;}
  #menu ul li a:hover {background: #016FFC;}
  #menu ul li:after {display: none;}
  #menu #categoriestop,
  #menu #navmenu {float:none; display: block}
  #menu ul #categoriestop ul,
  #menu ul #navmenu ul {display: block; top:auto; left:auto; position: relative; padding:0;}
  #menu #categoriestop ul li,
  #menu #navmenu ul li {border:0; padding:00; margin:0;}
  #menu #categoriestop ul li a,
  #menu #navmenu ul li a {padding-left: 20px}
  .tabNames label {padding:0 40px;}
  .centerpart {float: none}
}   

@media screen and (max-width: 1080px) {
  .icarsoft,
  #filters p,
  #homeBlocks .box h3 b {font-size: 16px}
  #filters select {margin:0 10px; min-width: 200px}
  #filters p {margin:0;}
  #filters input {margin:0 0 0 10px; padding:0 40px;}
  #page .gallery {width: 60%;}
  #page .rightDesc {width: 40%}
  #page .bigBtns li {float: none; margin:0 0 10px 0; display: block}
  #page .bigBtns li a {display: block}
} 

@media screen and (max-width: 980px) {
  .icarsoft {height: 50px;}
  .icarsoft .tmb {width:240px; height:80px; margin:-15px 0 0 -120px;}
  .icarsoft .tmb img {max-width: 80%}
  .icarsoft p {display: none}
  #brands h3, 
  #offers h3 {font-size: 20px}
  #footer .contact .btn,
  #footer .box h3 {font-size: 16px}
  #footer .box h4,
  #footer {font-size: 13px}
  .dynpg .l,
  .dynpg .r {display: none}
  .tabNames label {padding:0 20px;}
}

@media screen and (max-width: 920px) {
  #homeBlocks .box {width: 50%; margin-bottom:15px}
  .threeBlocks .block {margin:0;  padding:10px; width: 33.333%; display: block; float: left;}
}

@media screen and (max-width:780px){
  #footer .box {width: 50%}
  #footer .box h3 {background:#1ABDE6; height: 60px; display: block;}
  #footer .contact {padding:0 0 20px 0;}
  #footer .contact a,
  #footer .payment h4,
  #footer .payment img,
  #footer .contact p {margin-left:40px;}
  #footer .payment img {max-width: 70%}
  #filters p {float: none; display: block; margin:0;}
  #filters select {float: none; width:100%; margin:0 0 10px 0;}
  #filters input {margin:0;}
  #LeftPanel {display: none}
  .mainTable {padding:0 13px 0 0;}
  .threeBlocks {padding:0 10px 0 10px;}
  .threeBlocks .block {float: none; width: 100%; margin:0 0 10px 0;}
  .tabNames {display: table}
  .tabNames label {display: table-cell; margin:0; padding:0; font-size: 16px}
  #page {margin-top: 10px}
  #tabs {margin-bottom: 10px}
  #page .gallery {width: 100%; float: none; border:0; padding-right:0}
  #page .rightDesc {width: 100%; float: none; padding:0;}
  #page .rightDesc h2.title {font-size: 20px; margin:0 0 10px;}
  #page .rightDesc .price {display: block; padding:10px 0; margin:0 0 10px;}
  #page .rightDesc .price strong {font-size:20px}
  #page .btns li {padding:5px 0;}
  #page .btns {padding-bottom: 10px}
  #page .bigBtns li {float: left; width: calc(50% - 7.5px)}
  #page .bigBtns li:last-child {float: right}
  #page .half {float: none; width: 100%; margin:0 0 10px 0;}
}

@media screen and (max-width:640px){
  .dynpg .prev,
  .dynpg .next {display: none}
  #header h1 {text-align:center; float:none; display: block;}
  #header h1 img {max-width: 95%}
  #page .bigBtns li a {font-size: 16px; padding:0; text-align: center}
  #search {float:none; clear: both; margin:0; padding:10px;}
}

@media screen and (max-width:540px){
  .grid td.gallery {display: block; width: 100%}
}

@media screen and (max-width:480px){
  #footer .payment {padding:0 0 20px 0;}
  #homeBlocks .box,
  #footer .box {float: none; clear:both; width: 100%;}
  #page .bigBtns li a,
  #footer .contact .btn {font-size: 13px}
  #homeBlocks .box .in {margin:0;}
}

@media screen and (max-width:380px){
  table.JTI_feedback td.JTI_FeedbackHead3,
  table.JTI_feedback td.JTI_FeedbackRow3 {display: none !important;}
}
