﻿.product-features { box-sizing: border-box; overflow: hidden;  padding: 5rem .625rem 8rem}
@media (min-width:768px) {
.product-features { padding: 5rem .9375rem }
}
@media (min-width:768px) {
.product-features-slider-wrapper {display: none}
}
.product-features-titles { max-width: 740px; margin: 0 auto 3.75rem}
.product-features-caption { display: block; font-weight: 700;  font-size: .625rem; line-height: 100%; letter-spacing: .13em;  text-transform: uppercase; color: #262626; text-align: center;  margin: 0 0 1rem
}
@media (min-width:991px) {
.product-features-caption { font-size: .75rem }
}
@media (min-width:1920px) {
.product-features-caption { font-size: .925rem }
}
@media (min-width:2560px) {
.product-features-caption { font-size: 1rem  }
}
.product-features-title { font-size: 1.75rem; line-height: 125%; font-weight: 700; text-align: center;  color: #262626; margin: 0 auto 1rem;  max-width: 100%
}
@media (min-width:478px) {
.product-features-title { font-size: 1.75rem }
}
@media (min-width:768px) {
.product-features-title {  font-size: 1.75rem  }
}
@media (min-width:991px) {
.product-features-title { font-size: 2.125rem }
}
@media (min-width:1280px) {
.product-features-title { font-size: 2.25rem  }
}
@media (min-width:1440px) {
.product-features-title { font-size: 3rem  }
}
@media (min-width:1920px) {
.product-features-title { font-size: 4rem }
}
@media (min-width:2560px) {
.product-features-title { font-size: 4.5rem }
}
@media screen and (min-width:1024px) {
.product-features-title {  max-width: 800px  }
}
.product-features-subtitle {  font-size: .875rem; line-height: 180%; font-weight: 500; text-align: center;  margin: 0 auto 24px; color: #262626}
@media (min-width:768px) {
.product-features-subtitle {  font-size: .75rem  }
}
@media (min-width:991px) {
.product-features-subtitle { font-size: .875rem  }
}
@media (min-width:1280px) {
.product-features-subtitle {  font-size: 1rem }
}
@media (min-width:1920px) {
.product-features-subtitle { font-size: 1.125rem  }
}
@media (min-width:2560px) {
.product-features-subtitle {  font-size: 1.25rem  }
}
@media screen and (min-width:1024px) {
.product-features-subtitle {  max-width: 500px; margin: 0 auto  }
}
.product-features-layers {  height: 275px;  max-width: 88%; overflow: hidden; margin: 0 auto 16px}
@media (min-width:768px) {
.product-features-layers { height: 500px; max-width: 980px; margin: 0 auto  }
}
@media (min-width:1280px) {
.product-features-layers { height: 500px;  max-width: 980px;  margin: 0 auto  }
}
.product-features-layer { width: 100%;  position: absolute; transition: .5s;  cursor: pointer; display: flex;  flex-direction: row; justify-content: space-between;  opacity: .5}
.product-features-layer:first-child { transform: translateY(0); z-index: 10}
@media screen and (min-width:1024px) {
.product-features-layer:first-child {  -webkit-animation: float 6s ease-in-out infinite;  animation: float 6s ease-in-out infinite; transform: translateY(0)  }
}
.product-features-layer:nth-child(2) {  transform: translateY(60px); z-index: 9}
@media screen and (min-width:1024px) {
.product-features-layer:nth-child(2) {  transform: translateY(140px)  }
}
.product-features-layer:nth-child(3) { transform: translateY(120px);  z-index: 8}
@media screen and (min-width:1024px) {
.product-features-layer:nth-child(3) { -webkit-animation: float2 6s ease-in-out infinite;  animation: float2 6s ease-in-out infinite;  transform: translateY(280px) }
}
.product-features-layer-active { opacity: 1 !important}
.product-features-layer-wrapper { position: relative; width: 90%}
.product-features-layer-wrapper img {width: 100%}
.product-features-layer-icon {  position: absolute; width: 30px}
.product-features-layer-icon-one { top: 24px; left: 24px;  z-index: 12
}
.product-features-layer-icon-two {  right: 20px;  top: 64px; z-index: 12}
.product-features-layer-icon-three {  bottom: 32px; left: 24px; z-index: 12}
.product-features-item { display: none; width: 100%; margin-left: 32px}
.product-features-item div {  margin-left: 1.25rem}
.product-features-item p { font-weight: 500; max-width: 340px; font-size: 16px; line-height: 171%;  margin: 0 0 .5rem}
@media (min-width:768px) {
.product-features-item { display: flex; flex-direction: row; justify-content: flex-start; align-items: center }
}
.product-steps { padding: 80px 24px;  box-sizing: border-box; overflow: hidden; position: relative}
@media screen and (min-width:1024px) {
.product-steps { padding: 0 24px 150px }
}
.product-steps-grid { width: 100%}
@media screen and (min-width:1024px) {
.product-steps-grid { display: grid; -moz-column-gap: 0;  column-gap: 0; max-width: 1200px; margin: 0 auto;/*grid-template-columns: 1fr 1.4fr;*/ }
}
.product-steps-grid-item { display: flex; align-items: center}
.product-steps .container {z-index: 50; max-width: 1200px !important}
.product-steps-image-wrapper { position: absolute; bottom: 0; left: 0; width: 100%; padding-top: 240vw !important; height: 0; margin: 0 auto; background: #e0e5f7; overflow: hidden; z-index: 0}
.product-steps-image-wrapper img { position: absolute;  top: 0;  width: 100%;  height: 100%; -o-object-fit: cover; object-fit: cover;  -o-object-position: bottom center; object-position: bottom center
}
@media screen and (min-width:1024px) {
.product-steps-image-wrapper { width: 100%; padding-top: 75% }
.product-steps-image-wrapper img { -o-object-position: bottom right;  object-position: bottom right }
}
@media screen and (min-width:1216px) {
.product-steps-image-wrapper { padding-top: 55.56% }
}
.product-steps-image {width: 100%; height: 100%; flex: 1;position: absolute;-o-object-fit: cover; object-fit: cover;-o-object-position: bottom right; object-position: bottom right; top: 0; bottom: 0}
.product-steps-content {  padding: 0 32px; margin: 48px 0 0}
@media screen and (min-width:1024px) {
.product-steps-content { padding: 0; margin: 0; max-width: 100%  }
}
.product-steps-titles { ax-width: 380px; margin: 0 0 40px}
@media screen and (min-width:1024px) {
.product-steps-titles { max-width: 550px; margin: 0  }
}
.product-steps-title {  font-size: 1.75rem; line-height: 125%; font-weight: 700; max-width: 300px; text-align: left; color: #262626;  margin: 0 0 28px}
@media (min-width:478px) {
.product-steps-title { font-size: 1.75rem}
}
@media (min-width:768px) {
.product-steps-title { font-size: 1.75rem }
}
@media (min-width:991px) {
.product-steps-title { font-size: 2.125rem }
}
@media (min-width:1280px) {
.product-steps-title { font-size: 2.25rem  }
}
@media (min-width:1440px) {
.product-steps-title { font-size: 3rem  }
}
@media (min-width:1920px) {
.product-steps-title { font-size: 4rem  }
}
@media (min-width:2560px) {
.product-steps-title {  font-size: 4.5rem  }
}
@media screen and (min-width:1024px) {
.product-steps-title { max-width: 460px  }
}
.product-steps-subtitle { font-weight: 500;  font-size: .875rem; line-height: 180%; color: #262626;  text-align: center;  width: 100%; margin: 0 0 16px}

@media (min-width:768px) {
.product-steps-subtitle {  font-size: .75rem  }
}
@media (min-width:991px) {
.product-steps-subtitle { font-size: .875rem }
}
@media (min-width:1280px) {
.product-steps-subtitle {font-size: 1rem }
}
@media (min-width:1920px) {
.product-steps-subtitle {font-size: 1.125rem}
}
@media (min-width:2560px) {
.product-steps-subtitle {font-size: 1.25rem}
}
@media screen and (min-width:1024px) {
.product-steps-subtitle { width: 440px; text-align: left;  margin: 0 0 24px }
}
.product-steps-points { list-style: none; padding: 0; margin: 0 0 40px}
.product-steps-points li {  display: flex; align-items: center; font-weight: 500; font-size: 14px; line-height: 125%;  color: #262626; margin-bottom: 24px}
.product-steps-points li:last-child { margin-bottom: 0}
.product-steps-points li span { margin-left: 12px}
@media screen and (min-width:1024px) {
.product-steps-points li { font-size: 16px }
}
.patch-breakdown { display: block;}
.patch-breakdown-layers { max-width: 88%; margin: 0 auto 16px; position: relative}
@media (min-width:768px) {
.patch-breakdown-layers { height: auto; max-width: 680px; margin: 0 auto}
}
@media (min-width:991px) {
.patch-breakdown-layers { max-width: 720px; margin: 0 auto }
}
@media (min-width:1280px) {
.patch-breakdown-layers { max-width: 940px; margin: 0 auto  }
}
.patch-breakdown-layer { width: 100%; position: relative; transition: .5s; cursor: pointer; opacity: .85}
.patch-breakdown-layer:first-child { z-index: 10 !important}
.patch-breakdown-layer:nth-child(2) { z-index: 9 !important}
.patch-breakdown-layer:nth-child(3) { z-index: 8 !important}
.patch-breakdown-layer-active { opacity: 1 !important}
.patch-breakdown-layer-active .patch-layer-image:first-child,.patch-breakdown-layer-active .patch-layer-image:nth-child(3) {  -webkit-animation: float 4s ease-in-out infinite;  animation: float 4s ease-in-out infinite}
.patch-layer-image_00 {  -webkit-animation: float1 6s ease-in-out infinite;  animation: float1 6s ease-in-out infinite}
.patch-layer { width: 100%; margin: 5px auto; padding: 10px 0px;  display: flex; flex-direction: column;  justify-content: space-between; align-content: center;align-items: center; border-bottom: solid 1px #ccc;}
@media (min-width:768px) {
.patch-layer { flex-direction: row; border-bottom: none;  }
.patch-layer-image { width: 325px; height: 135px }
}
.patch-layer-content {width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center}
@media (min-width:768px) {
.patch-layer-content { margin-left: 16px; justify-content: flex-start }
}
@media (min-width:991px) {
.patch-layer-content { margin-left: 16px;  justify-content: flex-start }
}
@media (min-width:1280px) {
.patch-layer-content { margin-left: 32px }
}
.patch-layer-divider {display: none;}
@media (min-width:768px) {
.patch-layer-divider { width: 52px; height: 8px; margin-right: 1.25rem ; display: inline-block;}
@media (min-width:1280px) {
.patch-layer-divider { width: 92px; height: 12px  }
}
.patch-layer-text{ width: 100%; padding:15px 0px 10px 0px; border-bottom:dashed 1px #ccc;}
.patch-layer-text h3 {margin: 5px 0px; font-size: 1.15rem;  }
#cms-main.patch-layer-text p { font-weight: 400;  font-size: 12px;  line-height: 171%;  margin: 0 0 .375rem }
@media (min-width:991px) {
.patch-layer-text p { font-size: 14px; line-height: 171%;  margin: 0 0 .25rem }
}
@media (min-width:1280px) {
.patch-layer-text p { font-size: 16px; line-height: 171%; margin: 0 0 .5rem }
}
@-webkit-keyframes float {
  to { transform: translatey(0) }
  50% { transform: translatey(-10px) }
  0% { transform: translatey(0) }
}
@keyframes float {
  to { transform: translatey(0) }
  50% {  transform: translatey(-10px) }
  0% { transform: translatey(0)}
}
@-webkit-keyframes float1 {
  0% { transform: translatey(20px) }
  50% { transform: translatey(45px) }
  to { transform: translatey(20px) }
}
@keyframes float1 {
  0% { transform: translatey(20px) }
  50% { transform: translatey(45px) }
  to { transform: translatey(20px)  }
}
@-webkit-keyframes float2 {
  0% { transform: translatey(300px)  }
  50% { transform: translatey(280px) }
  to { transform: translatey(300px) }
}
@keyframes float2 {
  0% { transform: translatey(300px)}
  50% { transform: translatey(280px) }
  to { transform: translatey(300px) }
}