@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
img{max-width:100%}
* { box-sizing: border-box; }
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, img, p, span, font { color: #777; font-family: "Open Sans", sans-serif; margin: 0; padding: 0; }
body { font-size: 14px; letter-spacing: normal; }

.main_div { width: 100%; float: left; background-image:url(./bg.png); background-repeat:repeat }



.topbanner_div {width:100%;}
.topbanner_1 {height:33px;width:100%;background-color:#000;display:flex;justify-content:center;align-items:center;}
.topbanner_1_in {width:1060px;display:flex;justify-content:flex-end;}
.topbanner_1_in a {font:400 12px/1 'Open Sans',sans-serif;color:#e9e9e9;text-decoration:none;}
.topbanner_1_in .fav::before {font-family:'Font Awesome';content:"\f004";font-size:12px;color:#f1f1f1;padding-right:6px;}

.topbanner_2 {height: 85px;width:100%;background-color:#0c265d;display:flex;justify-content:center;align-items:center;}
.topbanner_2_in {height: auto;width:1060px;display:flex;justify-content:space-between;align-items:center;}
.topbanner_2_in_left {width:20%;display:flex;justify-content:flex-start;align-items:center;}
.topbanner_2_in_left img { width: 150px; max-width:100%;height:auto;}
.topbanner_2_in_right {width:60%;display:flex;justify-content:center;}

/* Menubar */
.menubar-menu{}
.toggle, [id^=drop] { display: none; } 
nav ul { float: left; padding:0; margin:0; list-style: none; position: relative; } 
nav ul li { margin: 0px; display:inline-block; } 
nav ul li a {display:block;padding: 10px 16px 10px 16px;color:#fff;font-size: 15px;text-decoration:none;font-weight: 400;text-transform: capitalize;font-family: 'Open Sans',sans-serif;} 
nav ul li a:hover {color: #dadada;-o-transition:.7s;-ms-transition:.7s;-moz-transition:.7s;-webkit-transition:.7s;transition: .7s;} 
.last_a { padding: 10px 1px 10px 21px;}
/* Menubar */

.topbanner_3 {height:48px;width:100%;background-color:#f2f2f2;border-bottom:1px solid #e9e9e9;}
.topbanner_3_in {margin:0 auto;height:48px;width:1060px;display:flex;justify-content:space-between;align-items:center;}
.topbanner_3_in span {font:400 14px/1 'Open Sans',sans-serif;color:#111;}
.topbanner_3_in span font {font:300 13px/1 'Open Sans',sans-serif;color:#555;}
.topbanner_3_in span:before {font-family: FontAwesome; font-size: 17px;color: #1579f0;position: relative;padding-right: 8px;bottom: -1px;}
.topbanner_3_in .sp1::before {content:"\f0d1";}
.topbanner_3_in .sp2::before {content:"\f017";}
.topbanner_3_in .sp3::before {content:"\f023";}
.topbanner_3_in .sp4::before {content:"\f164";}

.listing_button {width:20%;display:flex;justify-content:flex-end;}
.listing_button a {border-radius:30px;padding: 11px 20px;background-color:transparent;border:1px solid #336ef6;color:white;text-decoration:none;transition:background-color 0.7s ease;font-size: 15px;font-weight: 400;}
.listing_button a:hover {background-color:#041947;}


.description {width:100%;display:flex;justify-content:center;}
.description_in {width:1060px;margin:25px auto 40px;position:relative;display:flex;}
.content_gallery {width:50%;}
.gallery {
  max-width: 800px;
  margin: 20px auto;
  background: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.gallery-main {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* 1:1 aspect ratio */
  overflow: hidden;
  background: #f8f9fa;
}

.gallery input[type="radio"] {
  display: none;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Show first image by default */
#slide1:checked ~ .gallery-main .slide:nth-child(1),
#slide2:checked ~ .gallery-main .slide:nth-child(2),
#slide3:checked ~ .gallery-main .slide:nth-child(3),
#slide4:checked ~ .gallery-main .slide:nth-child(4) {
  opacity: 1;
}

/* Show/hide navigation arrows based on current slide */
.nav-arrow {
  display: none;
}
.nav-arrow img {
  width: 25%;
}


#slide1:checked ~ .gallery-main #left1,
#slide1:checked ~ .gallery-main #right1,
#slide2:checked ~ .gallery-main #left2,
#slide2:checked ~ .gallery-main #right2,
#slide3:checked ~ .gallery-main #left3,
#slide3:checked ~ .gallery-main #right3,
#slide4:checked ~ .gallery-main #left4,
#slide4:checked ~ .gallery-main #right4 {
  display: flex;
}

/* Navigation arrows styling */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  transition: background 0.3s;
  z-index: 10;
}

.nav-arrow:hover {
  background: rgba(255, 255, 255, 0.95);
}

.nav-left {
  left: 20px;
}

.nav-right {
  right: 20px;
}

/* Thumbnail navigation */
.gallery-thumbs {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 20px;
  background: white;
}

.thumb {
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.thumb img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
  background: #f8f9fa;
}

.thumb:hover {
  border-color: #007bff;
  transform: scale(1.05);
}

/* Active thumbnail */
#slide1:checked ~ .gallery-thumbs label:nth-child(1),
#slide2:checked ~ .gallery-thumbs label:nth-child(2),
#slide3:checked ~ .gallery-thumbs label:nth-child(3),
#slide4:checked ~ .gallery-thumbs label:nth-child(4) {
  border-color: #1579f0;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

/* Circle dots for responsive */
.gallery-dots {
  display: none;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: white;
}

.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot:hover {
  background: #222;
  transform: scale(1.2);
}

/* Active dot */
#slide1:checked ~ .gallery-dots label:nth-child(1) .dot,
#slide2:checked ~ .gallery-dots label:nth-child(2) .dot,
#slide3:checked ~ .gallery-dots label:nth-child(3) .dot,
#slide4:checked ~ .gallery-dots label:nth-child(4) .dot {
  background: #303030;
  transform: scale(1.3);
}

/* Responsive design */
@media (max-width: 768px) {
  .gallery {
      margin: 10px;
  }

  .gallery-main {
      height: 300px;
  }

  .gallery-thumbs {
      display: none;
  }

  .gallery-dots {
      display: flex;
  }

  .nav-arrow {
      width: 40px;
      height: 40px;
      font-size: 16px;
  }

  .nav-left {
      left: 10px;
  }

  .nav-right {
      right: 10px;
  }
}

@media (max-width: 480px) {
  .gallery-main {
      height: 250px;
  }

  .nav-arrow {
      width: 35px;
      height: 35px;
      font-size: 14px;
  }
}


.details_div {width: 610px;float:left;padding: 0px 0px 0px 40px;margin-top: 15px;}
.details_div .h1 {font-family: 'Open Sans',sans-serif;margin: 0px 0px 15px 0px;line-height: 31px;text-align: left;font-size: 26px;font-weight: 600;color: #222;letter-spacing: -0.5px;}
.details_div .price {font-family: 'Open Sans',sans-serif;margin: 0px 0px 20px 0px;text-align: left;font-size: 26px;font-weight: 600;color: #dc374f;letter-spacing: -0.5px;}
.details_div .availability {font-family: 'Open Sans',sans-serif;margin: 0px 0px 27px 0px;text-align: left;font-size: 14px;font-weight: 400;color: #111;}
.details_div .availability:before {font-family: FontAwesome;content: "\f00c";font-size: 17px;color: #000000;position: relative;padding-right: 7px;bottom: 0px;}

.details_div .p_div {padding:20px 0px 22px 0px;border-top: 1px solid #e8e8e8;border-bottom: 1px solid #e8e8e8;margin: 10px 0px 7px 0px;float: left;width: 100%;}
.details_div .p_div .p1 {font-family: 'Open Sans',sans-serif;font-size:14px;color:#616161;font-weight: 400;text-align:justify;line-height: 23px;}
.details_div .sub_title {padding: 13px 0px 8px 0px;font-family: 'Open Sans',sans-serif;font-size:20px;color:#333;font-weight: 600;float:left;width:100%;text-transform: uppercase;}


.uk_seller { display: flex; align-items: center; margin-bottom: 30px; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; padding: 12px 0px 12px 1px; } 
.uk_seller .icon { margin-right: 8px; } 
.uk_seller .icon img { width: 20px; float: left; } 
.uk_seller p { font-size: 14px; font-weight: 400; color: #111; margin-right: 10px; } 
.uk_seller a { font-size: 14px; color: #1579f0; font-weight: 600; text-decoration: none; text-decoration: underline; } 
.uk_seller .stars { margin-right: 13px; color: #f7dc6f; font-size: 17px; } 
.uk_seller .stars i { color: #fac64b; letter-spacing: -2px; }



.bullet_div {float:left;width: 100%;}
.bullet_div ul {margin: 0px 0px 15px 18px;}
.bullet_div ul li {font-size:14px;color: #616161;font-family: 'Open Sans',sans-serif;font-weight: 400;list-style:none;text-indent: -18px;padding: 6px 0px 6px 0px;}
.bullet_div ul li:before {content: "+";font-size: 15px;color: #616161;position: relative;padding-right: 10px;bottom: 0px;font-weight: 600;}

.ask_question { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } 
.ask_question p.text { font-size: 14px; font-weight: 600; color: #111; letter-spacing: -0.5px; margin-bottom: 10px; } 
.ask_question a { font-size: 14px; color: #111; font-weight: 600; text-decoration: none; text-decoration: underline; border-radius: 30px; padding: 9px 20px 10px 20px; background-color: transparent; border: 1px solid #336ef6; text-decoration: none; transition: .8s; } 
.ask_question a:hover { background-color: #041947; color: white; }

.compatibility { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 35px; } 
.compatibility_in { display: flex; width: 1060px; justify-content: space-between; align-items: center; border: 1px solid #dfdfdf; } 
.compatibility .left { width: 20%; height: 125px; background-color: #1579f0; display: flex; align-items: center; justify-content: center; } 
.compatibility .right { width: 80%; padding: 0px 30px 0px 30px; } 
.compatibility  p { font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: left; } 
.compatibility .left p { margin: 0; color: #fff; font-size: 20px; text-align: center; } 
.compatibility .left p i { color: #fff; font-size: 24px; } 
.compatibility .right p {margin: 0;color: #111;padding-bottom: 12px;} 
.arrow_right { position: relative; top: -16px; right: -46px; display: inline-block; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 7px solid transparent; border-left: 9px solid #1579f0; }

.compatibility .right .reg_check {width: 100%;display: flex;align-items: center;align-content: center;}
.compatibility .right .reg_check p {margin: 0;color: #111;padding: 0px;}
.compatibility .right .reg_check img {width: 110px;margin-right: 10px;}
.compatibility .right .reg_check a {color: #111;font-size: 14px;color: #1579f0;font-weight: 600;}


.policy {width:100%;float:left;display: flex;justify-content: center;}
.tabbed { width: 1060px; float:left } 
.tabbed input {display: none} 
.tabbed label { display: inline-block; padding: 14px 0px 14px 0px; font-weight: 400; text-align: center; color:#000; width:13%; text-transform: capitalize; font-size: 14px; font-family: 'Open Sans',sans-serif; background-color: #f2f2f2; }
.tabbed label:hover {color: #000; cursor: pointer;}
.tcontent {width:1060px;border: 1px solid #dfdfdf;float: left;}
.tcontent > div {display: none;width: 100%;float: left;} 
.tcontent > div ul {list-style:none}
.tabbed input:checked + label {width: 13%;/* border-bottom: 4px solid #717171; */background-color: #0c265d;color: #fff;}
#tab1:checked ~ .tcontent #content1, #tab2:checked ~ .tcontent #content2, #tab3:checked ~ .tcontent #content3, #tab4:checked ~ .tcontent #content4, #tab5:checked ~ .tcontent #content5, #tab6:checked ~ .tcontent #content6 {display: block;}
.cont {width: 100%;float:left;padding: 20px 20px 20px 20px;}
.cont p {width: 100%;float: left;font-family: 'Open Sans',sans-serif;font-size: 14px;color: #111;font-weight: 400;text-align: justify;}



.footer {width:100%;float:left;margin-top: 45px;background-color: #0c265d;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.footer_in {width:1060px;padding: 32px 0px 35px 0px;display: flex;justify-content: space-between;}
.footer .div1{ width: 25%; padding-right: 30px; } 
.footer .div1 img{ width: 150px; margin-bottom: 10px; } 
.footer .div1 p{ font-family: 'Open Sans', sans-serif; font-size: 13px; color: #fff; font-weight: 400; text-align: left; } 
.footer .div2{ width: 18%; padding-right: 30px; } 
.footer .sub{ font-family: 'Open Sans', sans-serif; font-size: 14px; color: #44a6fa; font-weight: 600; text-align: left; margin-bottom: 7px; display: block; } 
.footer .div2 ul{ list-style: none; } 
.footer .div2 a{ font-family: 'Open Sans', sans-serif; font-size: 13px; color: #fff; font-weight: 400; text-align: left; text-decoration: none; text-transform: capitalize; line-height: 25px; } 
.footer .div3{ width: 30%; padding-right: 30px; }  
.footer .div3 p{ font-family: 'Open Sans', sans-serif; font-size: 13px; color: #fff; font-weight: 400; text-align: left; text-decoration: none; line-height: 21px; margin-bottom: 12px; }   
.footer .div3 img{width: 240px;} 
.footer .div4{ width: 27%; padding-right: 10px; } 
.footer .div4 div{ display: flex; flex-direction: column; } 
.footer .div4 p{ font-family: 'Open Sans', sans-serif; font-size: 13px; color: #fff; font-weight: 400; text-align: left; text-decoration: none; line-height: 20px; margin-bottom: 13px; } 
.footer .div4 a{ width: 120px; border-radius: 30px; padding: 11px 20px 11px 20px; background-color: transparent; border: 1px solid #44a6fa; color: white; text-decoration: none; transition: .7s; text-align: center; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; } 
.footer .div4 a:hover{ background-color: #44a6fa; }



@media (max-width: 1060px) {
  .topbanner_3_in {
    width: 100%;
    padding: 20px;
}

.ask_question { display: none;}

.uk_seller { margin-bottom: 0px;}
}


@media (max-width: 1060px) {
  .topbanner_3_in {
      height: 50px !important;
      padding: 10px !important;
      width: 100%;
      overflow: hidden;
      position: relative;
  }
  .topbanner_3_in span {
      position: absolute;
      width: 100%;
      text-align: center;
      opacity: 0;
      transform: translateX(100%);
      animation: carousel 12s infinite;
  }
  .topbanner_3_in .sp1 {
      animation-delay: 0s;
  }
  .topbanner_3_in .sp2 {
      animation-delay: 3s;
  }
  .topbanner_3_in .sp3 {
      animation-delay: 6s;
  }
  .topbanner_3_in .sp4 {
      animation-delay: 9s;
  }
  @keyframes carousel {
      0% { transform: translateX(100%); opacity: 0; }
      8.33% { transform: translateX(0); opacity: 1; }
      25% { transform: translateX(0); opacity: 1; }
      33.33% { transform: translateX(-100%); opacity: 0; }
      100% { transform: translateX(-100%); opacity: 0; }
  }
}


@media only screen and (max-width: 950px) {
  .topbanner_2_in_right { display: none;}
  .topbanner_3 { height: auto;}
  .topbanner_3_in {height: auto;flex-direction: column;padding: 15px;}
  .topbanner_3_in span { line-height: 32px;}
  
}



@media only screen and (max-width: 1060px) {
  .listing_button {
    width: auto;
  }
}
@media only screen and (max-width: 768px) {
  .listing_button {
    width: 100%;
    justify-content: center;
    margin-top: 15px;
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .listing_button a {
    padding: 10px 15px;
    font-size: 14px;
  }
}


@media only screen and (max-width: 1060px) {
  .details_div {
    width: 100%;
    padding: 0px 5px 0px 5px;
  }
  .compatibility_in {
    width: 90%;
  }
}
@media only screen and (max-width: 768px) {
  .details_div {
    width: 100%;
    float: none;
    padding: 0 3px;
    margin-top: 0px;
  }
  .details_div .h1,
  .details_div .price,
  .details_div .availability,
  .details_div .p_div,
  .details_div .sub_title,
  .uk_seller,
  .bullet_div,
  .ask_question {
    width: 100%;
    float: none;
  }
  .details_div .h1,
  .details_div .price,
  .details_div .availability {
    text-align: left;
    margin: 0px 0px 15px 0px;
  }
  .details_div .p_div .p1,
  .uk_seller p,
  .uk_seller a,
  .bullet_div ul li {
    text-align: center;
  }
  .uk_seller {
    flex-direction: row;
    text-align: left;
    align-items: center;
    display: flex;
    margin-bottom: 25px;
  }
  .uk_seller .icon,
  .uk_seller .stars {
    margin: 0px 14px 0px 0px;
  }
  .ask_question {
    align-items: center;
  }
  .compatibility_in {
    flex-direction: column;
  }
  .compatibility .left {
    width: 100%;
    height: 80px;
  }
  .compatibility .right {
    width: 100%;
    padding: 20px;
    text-align: center;
  }
  .compatibility .left p,
  .compatibility .right p {
    text-align: center;
  }
  .arrow_right {
    display: unset!important;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 9px solid #1579f0;
  }
}
@media only screen and (max-width: 600px) {
  .details_div .h1 {
    font-size: 22px;
  }
  .details_div .price {
    font-size: 22px;
  }
  .compatibility .left p {
    font-size: 16px;
  }
  .compatibility .left p i {
    font-size: 20px;
  }
}





@media only screen and (max-width: 1060px) {
  .description_in {
    width: 95%;
    flex-direction: column;
    margin: 25px auto 32px;
  }
  .content_gallery {
    width: 100%;
    margin-bottom: 20px;
  }
  .gallery { max-width: none; margin: 0px auto;}  
}
@media only screen and (max-width: 768px) {
  .description_in {
    width: 95%;
  }

}
@media only screen and (max-width: 600px) {
  .description_in {
    margin: 15px auto 5px;
  }
  .gallery {
    margin: 10px auto;
  }
}


@media only screen and (max-width: 1060px) {
  .footer_in {
    width: 90%;
  }
}
@media only screen and (max-width: 768px) {
  .footer_in {
    flex-wrap: wrap;
    padding: 32px 0px 35px 0px;
  }
  .footer .div1,
  .footer .div2,
  .footer .div3,
  .footer .div4 {
    width: 50%;
    padding-right: 0px;
    margin-bottom: 25px;
  }
  .footer .div1 p,
  .footer .div2 a,
  .footer .div3 p,
  .footer .div4 p {
    text-align: left;
  }
  .footer .div1 img {
    display: block;
    /* margin: 0 auto 10px auto; */
  }
  .footer .sub {
    text-align: left;
    margin-top: 20px;
  }
  .footer .div2 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
  }
  .footer .div2 li {
    width: 50%;
    text-align: center;
  }
  .footer .div3 img {
    display: block;
    margin: 0 auto;
  }
  .footer .div4 div {
    align-items: center;
  }
  .footer .div4 a {
    margin-top: 10px;
  }
}
@media only screen and (max-width: 600px) {
  .footer_in {
    flex-direction: column;
    align-items: flex-start;
    width: 93%;
    padding: 25px 0px 25px 0px;
  }
  .footer .div1,
  .footer .div2,
  .footer .div3,
  .footer .div4 {
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
  }
  .footer .div1 p {
    text-align: left;
  }
  .footer .div2 ul {
    flex-direction: column;
    align-items: baseline;
  }
  .footer .div2 li {
    width: 100%;
    text-align: left;
  }
  .footer .div3 img {
    /* margin: 0 auto; */
    float: left;
  }
  .footer .div4 div {
    align-items: flex-start;
  }
  .footer .div4 a {
    margin-top: 10px;
  }
}



@media only screen and (max-width: 1060px) {
  .compatibility_in {
    width: 95%;
  }
  .arrow_right {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .compatibility_in {
    flex-direction: column;
  }
  .compatibility .left {
    width: 100%;
    height: 50px;
  }
  .compatibility .right {
    width: 100%;
    padding: 17px;
    text-align: center;
  }
  .compatibility .left p,
  .compatibility .right p {
    text-align: left;
    line-height: 25px;
  }

  .compatibility .right .reg_check {
    margin-right: 0px; margin-bottom: 0px; flex-direction: column; align-items: baseline;
  }
  .compatibility .right .reg_check img {
    margin-right: 0; margin-bottom: 10px;
  }

  .compatibility .right .reg_check p b { display: block; width: 100%;}
}
@media only screen and (max-width: 600px) {
  .compatibility .left p {
    font-size: 16px;
  }
  .compatibility .left p i {
    font-size: 20px;
  }
}


@media only screen and (max-width: 1060px) {
  .topbanner_1_in,
  .topbanner_2_in {
    width: 95%;
  }
}
@media only screen and (max-width: 768px) {
  .topbanner_1 {
    display: none;
  }
  .topbanner_2 {
    height: auto;
    padding: 15px 0;
  }
  .topbanner_2_in {
    flex-direction: column;
    height: auto;
  }
  .topbanner_2_in_left {
    width: 100%;
    justify-content: center;
    margin-bottom: 0px;
  }
  .topbanner_2_in_right {
    width: 100%;
  }
  nav ul {
    width: 100%;
    text-align: center;
  }
  nav ul li {
    display: block;
    margin: 5px 0;
  }
  nav ul li a {
    padding: 10px;
    border-bottom: 1px solid #324c7a;
  }
  .last_a {
    padding: 10px;
  }
  .toggle {
    display: block;
    background-color: #1a3c7a;
    color: #fff;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
  }
  nav {
    display: none;
  }
  [id^=drop]:checked + nav {
    display: block;
  }
}
@media only screen and (max-width: 600px) {
  .topbanner_2_in_left img {
    width: 120px;
  }
  nav ul li a {
    font-size: 14px;
  }
}


@media (max-width: 768px) {
  .compatibility .left {
      position: relative;
  }
  .arrow_right {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-top: 9px solid #1579f0;
      border-bottom: 8px solid transparent;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
  }
}


@media (max-width: 1068px) {
  .tabbed {
      width: 95%;
  }
  .tcontent {
      width: 100%;
  }
  .tabbed label {
      width: auto;
      padding: 14px 20px 14px 20px;
  }
  .tabbed input:checked + label {
      width: auto;
      padding: 14px 20px 14px 20px;
  }
}



@media (max-width: 768px) {
  .footer { margin-top: 30px; }
  .tabbed {
      width: 95%;
      display: flex;
      flex-direction: column;
  }
  .tabbed label {
      width: 100%;
      display: block;
      border-bottom: 1px solid #dfdfdf;
      order: 1;
      position: relative;
      font-size: 17px;
      text-align: left;
  }
  .tabbed label::after {
      content: "+";
      position: absolute;
      right: 15px;
      top: 48%;
      transform: translateY(-50%);
      font-size: 38px;
      font-weight: 100;
  }
  .tabbed input:checked + label::after {
      content: "-";
      top: 38%;
      font-size: 55px;
      right: 17px;
  }
  .tabbed label[for="tab1"] { order: 1; }
  .tabbed label[for="tab2"] { order: 3; }
  .tabbed label[for="tab3"] { order: 5; }
  .tabbed label[for="tab4"] { order: 7; }
  
  .tcontent {
      width: 100%;
      border: none;
      display: contents;
  }
  .tcontent > div {
      width: 100%;
      border: 1px solid #dfdfdf;
      margin-bottom: 0;
  }
  #content1 { order: 2; }
  #content2 { order: 4; }
  #content3 { order: 6; }
  #content4 { order: 8; }
  
  .tabbed input:checked + label {
      width: 100%;
      font-size: 17px;
      text-align: left;
  }
  .cont {
      padding: 15px;
  }
}