/* Custom Clopay CSS */

.single-clopay.product-details {
  margin-top: 190px;
}

.single-clopay .breadcrumbs {
  position: relative;
}

.single-clopay.product-details .product-info .row {
  flex-direction: column-reverse;
}

.page-header:has(+ .bg-dark-cover) .header-bottom::after {
  background: #c6c9ce;
}

.by-clopay + p {
  margin-top: 25px;
}

.clopay-btn-tertiary.btn-tertiary {
  margin-left: 0;
  margin-top: 30px;
  background: linear-gradient(to bottom, #78be20 0%, #78be20 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 2px 2px;
  transition: background-size 0.2s;
}

.clopay-btn-tertiary.btn-tertiary:hover {
  background: linear-gradient(to bottom, #84329b 0%, #84329b 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 4px 50px;
}

.clopay-action-btns {
  display: flex;
  gap: 40px;
  margin-top: 100px;
}

.clopay-action-btns a {
  color: #7f8387;
  text-decoration: none;
  background: none;
}

.clopay-action-btns a:hover {
  color: #fff;
}

.clopay-action-btns a i {
  margin-right: 7px;
  top: 5px;
  position: relative;
}

.clopay-action-btns a i.print,
.clopay-action-btns a i.download {
  top: 3px;
}

.product-slider .breadcrumbs-link.hidden-sm-up a {
  color: #2b3139;
  margin-bottom: 35px;
  left: 15px;
}

i.email {
  display: inline-block;
  width: 21.785px;
  height: 24.055px;
  background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="21.785" height="24.055" viewBox="0 0 21.785 24.055"><path id="Icon_ionic-md-share" data-name="Icon ionic-md-share" d="M22.644,20.138a3.307,3.307,0,0,0-2.367.907L11.6,16.028a4.064,4.064,0,0,0,.122-.846,4.062,4.062,0,0,0-.122-.846L20.156,9.38A3.631,3.631,0,1,0,19,6.72a4.04,4.04,0,0,0,.122.846l-8.556,4.956a3.653,3.653,0,0,0-2.488-.967A3.593,3.593,0,0,0,4.5,15.182a3.653,3.653,0,0,0,6.129,2.66l8.617,5.016a3.032,3.032,0,0,0-.121.786,3.52,3.52,0,1,0,3.52-3.505Z" transform="translate(-4.5 -3.094)" fill="%237f8387" /></svg>')
    no-repeat center;
  background-size: contain;
}

i.download {
  display: inline-block;
  width: 15.034px;
  height: 18.041px;
  background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="15.034" height="18.041" viewBox="0 0 15.034 18.041"><path id="Icon_ionic-md-download" data-name="Icon ionic-md-download" d="M21.784,10.866H17.49V4.5H11.044v6.366H6.75l7.517,7.428ZM6.75,20.417v2.124H21.784V20.417Z" transform="translate(-6.75 -4.5)" fill="%237f8387"/></svg>')
    no-repeat center;
  background-size: contain;
}

i.print {
  display: inline-block;
  width: 20.046px;
  height: 18.041px;
  background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20.046" height="18.041" viewBox="0 0 20.046 18.041"><path id="Icon_material-print" data-name="Icon material-print" d="M20.039,9.511H6.007A3,3,0,0,0,3,12.518v6.014H7.009v4.009H19.036V18.532h4.009V12.518A3,3,0,0,0,20.039,9.511ZM17.032,20.536H9.014V15.525h8.018Zm3.007-7.016a1,1,0,1,1,1-1A1.005,1.005,0,0,1,20.039,13.521Zm-1-9.021H7.009V8.509H19.036Z" transform="translate(-3 -4.5)" fill="%237f8387"/></svg>')
    no-repeat center;
  background-size: contain;
}

.product-info a:has(*),
.product-info a:has(*):hover {
  background: none;
}




@media (max-width: 600px) {
  .product-overview .text-content-wrapper {
    padding: 0 20px;
  }

  .product-overview .text-content-wrapper .clopay-btn-secondary {
    width: 270px;
  }

  .clopay-action-btns a:has(.print),
  .clopay-action-btns a:has(.download) {
    margin-top: 5px;
  }

  .clopay-action-btns {
    gap: 20px;
    margin-top: 30px;
  }

  .clopay-single-cta.full-width-image-cta--homepage
    .full-width-image-cta__content {
    padding-bottom: 75px;
  }
}

@media (max-width: 1024px) {
  .single-clopay-tabs button.tab-accordion__panel__toggle::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 3px;
    background-color: #84329b;
    left: 20px;
    margin-top: 15px;
    transform: translate(0, -50%);
    transition: all ease 0.3s;
  }

  .single-clopay-tabs button.tab-accordion__panel__toggle::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 16px;
    background-color: #84329b;
    left: 27px;
    margin-top: 15px;
    transform: translate(0, -50%);
    transition: all ease 0.3s;
  }

  .single-clopay-tabs button.tab-accordion__panel__toggle.is-active::before,
  .single-clopay-tabs button.tab-accordion__panel__toggle.is-active::after {
    transform: translate(0, -50%) rotate(-45deg);
  }

  .single-clopay-tabs
    :is(.tab-accordion__tab, .tab-accordion__panel__toggle):is(.is-active, :not(:focus)),
  .single-clopay-tabs
    :is(.tab-accordion__tab, .tab-accordion__panel__toggle):focus:not(:focus-visible) {
    border: none;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  }

  .single-clopay-tabs
    .is-active
    :is(.tab-accordion__tab, .tab-accordion__panel__toggle):is(.is-active, :not(:focus)) {
    border-bottom: 2px solid #83329b;
    color: #84329b;
  }

  .single-clopay-tabs .tab-accordion__tab,
  .tab-accordion__panel__toggle {
    padding: 10px 30px;
  }

  .single-clopay-tabs.tab-accordion {
    margin-bottom: 170px;
  }
}




@media (min-width: 768px) {
  .clopay-action-btns {
    margin-top: 40px;
  }

  .single-clopay-tabs button.tab-accordion__panel__toggle::before {
    left: 49px;
  }

  .single-clopay-tabs button.tab-accordion__panel__toggle::after {
    left: 55px;
  }
}

@media (min-width: 1200px) {
  .single-clopay.product-details {
    margin-top: 40px;
  }

  .single-clopay.product-details .product-info .row {
    flex-direction: row;
  }

  .product-overview h2 {
    margin-top: 80px;
  }

  .clopay-single-cta.full-width-image-cta--homepage
    .full-width-image-cta__content {
    padding-bottom: 100px;
  }

  .clopay-action-btns {
    margin-top: 30px;
  }
}

/**
 * Product Details Page
 */

/* Product Overview */

.product-overview__subtext {
  font-size: 20px;
  font-weight: 600;
}

.product-overview__description {
  color: #5f7080;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  line-height: 1.7em;
  font-size: 18px;
  margin-bottom: 20px;
}

.product-overview__cta {
  margin-bottom: 20px;
}

.product-overview__logo {
  margin-top: 20px;
}

.product-overview__brochure {
  margin-bottom: 15px;
}

.product-overview__options {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.product-overview__options .btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.product-overview__options .btn + .btn {
  margin-top: 0;
  margin-left: 32px;
}

/* Product Slider */

.product-thumbs .slick-prev,
.product-thumbs .slick-next {
  top: 0;
  z-index: 1;
}

.product-thumbs .thumbnail-slider {
  display: none;
}

.product-thumbs .thumbnail-slider.slick-initialized {
  display: block;
}

.product-thumbs .thumbnail-slider .slick-track .slick-slide > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.product-thumbs .thumbnail-slider .slick-arrow::before {
  font-family: "king-door" !important;
  speak: never;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.product-thumbs .thumbnail-slider .slick-prev::before {
  content: "\e902";
}

.product-thumbs .thumbnail-slider .slick-next::before {
  content: "\e903";
}

.product-info .product-image {
  border: 1px solid #ccc;
}

.product-thumbs {
  margin-top: 15px;
  padding: 10px 0px;
  position: relative;
}

.product-thumbs .slick-list {
  padding-left: 40px;
  padding-right: 40px;
}

.product-thumbs .slick-prev,
.product-thumbs .slick-next {
  background: #9b9b9b;
  height: 100%;
  width: 30px;
  text-align: center;
  bottom: 0;
  position: absolute;
  outline: none;
  border: none;
  font-size: 0;
  color: transparent;
}

.product-thumbs .slick-prev:before,
.product-thumbs .slick-next:before {
  font-size: 21px;
  text-shadow: none;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translate(0, -50%);
}

#product-gallery-main img {
  max-height: 650px;
  width: auto;
  height: 100%;
  margin: 0 auto;
}

.slick-prev:before,
.slick-next:before {
  display: block;
  color: white;
  font-size: 48px;
  font-family: "icomoon";
  text-shadow: 0 2px black;
  text-shadow: 0 2px rgba(0, 0, 0, 0.9);
}

.slick-prev {
  left: 0;
}
.slick-next {
  right: 0;
}

.thumbnail-slider {
  margin-top: 20px;
}

.thumbnail-slider .swiper-wrapper {
  display: none;
  gap: 15px;
}

.thumbnail a {
  display: block;
}

.thumbnail img {
  width: 100%;
  height: auto;
}

.product-carousel-slide .fxgallery-thumb.active::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  background: linear-gradient(
    135deg,
    #6a2572 0%,
    #64236e 14%,
    #6a2675 28%,
    #6f287d 42%,
    #742a84 56%,
    #7a2d8c 70%,
    #7f2f93 85%,
    #84329b 100%
  );
}

@media (max-width: 600px) {
  .swiper-scrollbar.swiper-scrollbar-horizontal {
    display: none;
  }

  .thumbnail-slider.product-carousel__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .thumbnail-slider.product-carousel__wrap .swiper-button-prev,
  .thumbnail-slider.product-carousel__wrap .swiper-button-next {
    position: relative;
    right: unset;
    left: unset;
  }

  .product-info .product-image {
    width: 90%;
    margin-inline: auto;
  }
}

@media (min-width: 768px) {
  .product-info .product-image {
    width: 75%;
    margin-inline: auto;
  }

  .product-slider .breadcrumbs.hidden-md-up {
    left: 100px;
  }

  .thumbnail-slider.product-carousel__wrap {
    margin-right: -95px;
  }

  .product-overview .text-content-wrapper {
    padding: 0px 100px;
    margin-top: 40px;
  }

  .clopay-btn-secondary + .clopay-btn-tertiary {
    display: block;
    width: 216px;
  }
}

@media (min-width: 1200px) {

  .single-clopay .breadcrumbs {
    padding-top:126px;
  }

  .thumbnail-slider .swiper-wrapper {
    display: flex;
  }

  .product-overview {
    padding: 0 21px 126px;
  }

  .product-overview .text-content-wrapper {
    max-width: 430px;
  }

  .thumbnail-slider.product-carousel__wrap {
    padding-bottom: 75px;
  }

  .product-info .product-image {
    width: 50vw;
    max-width:1000px;
    margin-left: 0;
  }

  .product-slider {
    padding-top:70px;
  }

  .product-1410 .product-info .product-image {
    width: 35vw;
  }

  .product-1410 .swiper.thumbnail-slider.product-carousel__wrap {
    width: 35vw;
  }

  .thumbnail-slider.product-carousel__wrap {
    margin-right: auto;
    margin-left:0;
    max-width: 1000px;
    width: 50vw;
  }

  .product-overview .text-content-wrapper {
    padding: 0;
    margin-top: 0;
  }

  .clopay-btn-secondary + .clopay-btn-tertiary {
    display: inline-block;
    width: unset;
  }
}

/* CTA Section */

.clopay-single-cta .full-width-image-cta__wrap::before,
.clopay-single-cta .full-width-image-cta__wrap::after {
  display: none;
}

/* Tab Section */

.js-image-match-section {
  --bs-gutter-x: 19px;
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.js-image-match-section > * {
  box-sizing: border-box;
  flex-shrink: 0;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-bottom: 25px;
}

.design-option {
  margin-bottom: 85px;
  line-height: 1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.design-option img {
  width: auto;
  height: auto;
}

.js-product-image-gallery-nav[data-nav-slider-count="1"],
.by-clopay.no--image-by {
  display: none;
}

.js-image-match-section.image-section a {
  background: none;
}

.js-image-match-section.image-section a:hover {
  color: #000;
}

.js-image-match-section.image-section a span:hover {
  color: #fff;
  background: linear-gradient(to bottom, #84329b 0%, #84329b 100%);
}

.single-clopay-tabs .tab-accordion__panel__content {
  border: none;
}

.single-clopay-tabs .tab-accordion__tab {
  border: none;
  border-bottom: 4px solid #84329b;
  border-radius: 0;
  padding: 8px 37px 8px 5px;  
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 2px 2px;
  color: #000;  
  transition: all 300ms ease-in-out;  
}


.single-clopay-tabs .tab-accordion__tab:hover{
  background: linear-gradient(to bottom, #84329b 0%, #84329b 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 4px 57px;
  color: #fff;
}

.single-clopay-tabs .tab-accordion__tab:focus {
  border: none;
  border-radius: 0;
  background: linear-gradient(to bottom, #84329b 0%, #84329b 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 2px 2px;
  color: #84329b;
  transition: background-size 0.2s;
}

.single-clopay-tabs .tab-accordion__tab.is-active {
  border: none;
  border-radius: 0;
  background: linear-gradient(to bottom, #84329b 0%, #84329b 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 4px 57px;
  transition: background-size 0.2s;
  color: #fff;
}


.single-clopay-tabs .tab-accordion__tab {
  padding: 15px 30px;
  font-weight: 600;
  color: #000;
}


.single-clopay-tabs .tab-accordion__panel__content a.external{
  /*background: none !important;*/
  color: #000;
  transition: all 300ms ease-in-out;
}

.single-clopay-tabs .tab-accordion__panel__content a.external:hover{
  /*background: none !important;*/
  color: #84329b;
}

.single-clopay-tabs .tab-accordion__panel__content table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

.single-clopay-tabs .tab-accordion__panel__content table thead,
.single-clopay-tabs .tab-accordion__panel__content table tbody,
.single-clopay-tabs .tab-accordion__panel__content table tfoot,
.single-clopay-tabs .tab-accordion__panel__content table tr,
.single-clopay-tabs .tab-accordion__panel__content table td,
.single-clopay-tabs .tab-accordion__panel__content table th {
  padding: 10px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.single-clopay-tabs .tab-accordion__panel__content tr.spec-model-header {
  border: 1px solid #ccc;
}

.postid-1296 .single-clopay-tabs .tab-accordion__panel__content table td:last-child{
  display: none;
}

.collection-video-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.collection-video-links a{
  display: block;
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
}

.Paintsysltdlifewrnty,
.Overlaywindowdisltd10yrwrnty,
.Overlaydelltd5yrwrnty,
.Hwltd3yrwrnty{
  background: linear-gradient(to bottom, #84329b 0%, #84329b 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 2px 2px;
  transition: background-size 0.2s;
  display: inline-block;
}


.Paintsysltdlifewrnty img,
.Overlaywindowdisltd10yrwrnty img,
.Overlaydelltd5yrwrnty img,
.Hwltd3yrwrnty img{
  background: none;
  transition: all 300ms ease-in-out;
  display: inline-block;
}


.Paintsysltdlifewrnty:hover,
.Overlaywindowdisltd10yrwrnty:hover,
.Overlaydelltd5yrwrnty:hover,
.Hwltd3yrwrnty:hover{
  /*background: none;  */
}

.Paintsysltdlifewrnty:hover img,
.Overlaywindowdisltd10yrwrnty:hover img,
.Overlaydelltd5yrwrnty:hover img,
.Hwltd3yrwrnty:hover img{
  opacity: 0.8;
}



@media (min-width: 768px) {
  .js-image-match-section {
    --bs-gutter-x: 32px;
  }
}


@media (min-width: 1025px) {
  
  .collection-video-links a{
    margin-bottom: 20px;
  }

}