@font-face {
    font-family: 'sofia_promedium';
    src: url('sofia_pro_medium-webfont.eot');
    src: url('sofia_pro_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('sofia_pro_medium-webfont.woff2') format('woff2'),
         url('sofia_pro_medium-webfont.woff') format('woff'),
         url('sofia_pro_medium-webfont.ttf') format('truetype'),
         url('sofia_pro_medium-webfont.svg#sofia_promedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sofia_prolight';
    src: url('sofiapro-light-webfont.eot');
    src: url('sofiapro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('sofiapro-light-webfont.woff2') format('woff2'),
         url('sofiapro-light-webfont.woff') format('woff'),
         url('sofiapro-light-webfont.ttf') format('truetype'),
         url('sofiapro-light-webfont.svg#sofia_prolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sofia_proextra_light';
    src: url('sofiaproextralight-webfont.eot');
    src: url('sofiaproextralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('sofiaproextralight-webfont.woff2') format('woff2'),
         url('sofiaproextralight-webfont.woff') format('woff'),
         url('sofiaproextralight-webfont.ttf') format('truetype'),
         url('sofiaproextralight-webfont.svg#sofia_proextra_light') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sofia_proregular';
    src: url('sofiaproregular-webfont.eot');
    src: url('sofiaproregular-webfont.eot?#iefix') format('embedded-opentype'),
         url('sofiaproregular-webfont.woff2') format('woff2'),
         url('sofiaproregular-webfont.woff') format('woff'),
         url('sofiaproregular-webfont.ttf') format('truetype'),
         url('sofiaproregular-webfont.svg#sofia_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sofia_probold';
    src: url('sofiaprobold-webfont.eot');
    src: url('sofiaprobold-webfont.eot?#iefix') format('embedded-opentype'),
         url('sofiaprobold-webfont.woff2') format('woff2'),
         url('sofiaprobold-webfont.woff') format('woff'),
         url('sofiaprobold-webfont.ttf') format('truetype'),
         url('sofiaprobold-webfont.svg#sofia_probold') format('svg');
    font-weight: normal;
    font-style: normal;
}
.container-fluid {padding: 0 15px;}
.container {width:1170px;margin:auto;padding:0 15px}
.row { display: flex;flex-wrap: wrap;margin-right: -15px;margin-left: -15px;}
.col-6 {flex: 0 0 50%;max-width: 50%;padding:0 15px}
.col-4 {flex: 0 0 33.333333%;max-width: 33.333333%;padding:0 15px}
.col-3 {flex: 0 0 25%;max-width: 25%;padding:0 15px}
.row.align-items-end {align-items: flex-end;}
.top-bar {background:#98cbc8;padding:20px 15px;text-align:center;color:#fff;font-family: 'sofia_promedium';     transition: all 0.3s ease;}
.top-bar p{margin:0;font-size:20px;}
.top-bar.header-sticky {position: fixed;left: 0;right: 0;z-index: 999;}
.full-banner {background:#000 url(back-background.png) no-repeat;background-size: 110%;background-position: top center;padding:250px 0 0 ;text-align:center;}
.full-banner h2 {font-family: 'sofia_promedium';font-size:90px;margin:0 0 100px;color:#fff;}
.full-banner p {margin:0 0 250px;font-size:24px; font-family: 'sofia_prolight';line-height:38px;color:#fff;}
.full-banner span {display:block;padding:0 0 300px;font-size:26px; font-family: 'sofia_promedium';line-height:28px;color:#fff;cursor: pointer;}
.full-banner span img {display: block;margin: 10px auto;width: 5%;}
.bottom-content {display:none; position:relative; padding-top: 200px;font-size:18px; font-family: 'sofia_promedium';color:#fff;line-height:28px;max-width: 100%;margin: auto auto;padding-bottom: 40px;}
.bottom-content p {margin:0 0 30px;font-family: 'sofia_promedium';    font-size: 20px;}
.bottom-content ul {margin:0 0 30px;padding:0;list-style:none;}
.bottom-content h5 {font-family: 'sofia_prolight';}
.bottom-content i {font-family: 'sofia_proextra_light';}
.shop-link {padding-bottom: 40px;}
.shop-link a {display:block;color:#fff;font-family: 'sofia_proextra_light';font-size:30px;font-weight:100;text-transform: capitalize;text-align: right;}
.industry {background: #89a3c6;padding: 40px 0;color:#fff;}
.industry span {display:block; font-family: 'sofia_prolight';font-size:18px;margin:0 0 10px;color:#fff;text-align:center;}
.industry h2 {font-family: 'sofia_promedium';font-size: 90px;letter-spacing: 40px;text-align: center;margin: auto auto 50px;}
.industry-list {margin-bottom: 50px;}
.industry-list .name {line-height: 46px;font-family: 'sofia_proregular';font-size:46px;text-align:left;color:#fff;}
.industry-list .price {line-height: 46px;font-family: 'sofia_probold';font-size:46px;text-align:right;color:#5a63cd;}
.industry-list .price i {font-style:normal;color:#dde3ed;font-family: 'sofia_prolight';font-size: 24px;line-height: 30px;display:inline-block;margin-left: 5px;text-align: left;}
.bottom-text { margin-top: 10px;display:block;color:#c2cee0;font-family: 'sofia_proextra_light';text-align: center;font-size: 22px;}
.text-line {color:#fff;font-size:40px;text-align:center;font-family: 'sofia_proextra_light';}
.text-line b {font-family: 'sofia_proregular';}
.fabrics {background: #e0d2b6;padding: 40px 0 0;color:#fff;}
.fabrics span {display:block; font-family: 'sofia_prolight';font-size:18px;margin:0 0 10px;color:#fff;text-align:center;}
.fabrics h2 {font-family: 'sofia_proextra_light';font-size: 90px;letter-spacing: 40px;text-align: center;margin: auto auto 40px;line-height: 80px;}
.product-list h2 {color:#000000; font-family: 'sofia_prolight';font-size:46px;margin:0px;letter-spacing: 0px;line-height: 72px;}
.product-list hr {background: #000;height: 2px;display: block;width: 150px;margin: 0 auto;padding: 0;}
.product-list h4 {display: block;font-family: 'sofia_prolight';font-size: 26px;margin: 0 0 10px;color: #000;text-align: center;}
.wrap {width: 50%;max-width: 50%;}
.product1 {position:relative; padding: 200px 0;background-size:cover !important;background-position: left !important;display: flex;justify-content: flex-end;align-items: center;}
.product2 {position:relative;padding: 200px 0;background-size:cover !important;background-position: right !important;display: flex;justify-content: flex-start;align-items: center;}
.product3 {position:relative;padding: 200px 0;background: url(product-bg3.png) no-repeat;background-size:cover;background-position: left;display: flex;justify-content: flex-end;align-items: center;}
.product4 {position:relative;padding: 200px 0;background: url(product-bg4.png) no-repeat;background-size:cover;background-position: right;display: flex;justify-content: flex-start;align-items: center;}
.factories {background:#e8f7f7;padding-top:50px;padding-bottom: 10px;}
.factories h2 {font-family: 'sofia_proextra_light';font-size: 82px;letter-spacing: 40px;color:#658669;text-align: center;margin: auto auto 80px;line-height: 80px;}
.factories div img {display: block;width: 100%;margin: auto;}
.factories h4 {margin: 40px auto 0px;text-align: center;color: #326a6b;line-height: 30px;font-size: 24px;font-family: 'sofia_proregular';}
.factories ul {display: flex;margin-left: 150px;list-style: none;}
.factories ul li {font-size: 30px;font-family: 'sofia_prolight';color: #000;position: relative;margin-right: 60px;padding-left: 40px;}
.factories ul li:before {content:"";width:30px;height:30px;background:#dceed0;margin-right:20px;position: absolute;top: 10px;left: 0;}
.factories ul li:nth-child(2):before {background:#669471;}
.factories img {width:100%;}
.factories a {display: table;margin: 40px auto 0px;text-align: center;color: #326a6b;line-height: 20px;font-size: 24px;font-family: 'sofia_proregular';border-bottom:1px solid #326a6b;padding-bottom: 10px;}
.documents {background:#3e467d;padding:50px 0;}
.documents h2 {font-family: 'sofia_proextra_light';font-size: 82px;letter-spacing: 33px;color:#fff;text-align: center;margin: auto auto 0px;line-height: 80px;}
.documents p {text-align:center;color:#fff;font-size:18px;font-family: 'sofia_prolight';margin:0 0 80px;}
.white-box { text-align: center;}
.white-box a { border: 2px solid #fff;padding: 40px;display:block;color:#fff;font-size:30px;font-family: 'sofia_proregular';text-decoration: underline;}
.how-we-do {background:#b8d085;padding:80px 0;}
.how-we-do h2 {font-family: 'sofia_promedium';font-size: 80px;letter-spacing: 10px;color:#fff;text-align: left;margin: auto auto 100px;line-height: 100px;}
.how-we-do h3 {text-align: right;color: #fff;font-size: 30px;position: relative;font-family: 'sofia_prolight';margin: 0 0 100px;}
.how-we-do h3:before {content:"";background:url(shape1.png) no-repeat;width: 300px;height: 100px;position: absolute;top: -70px;left: 110px;background-size:100%;}
.padding-5 {padding:0 5px;}
.box {text-align: left;/* padding: 30px; */border: 2px solid #fff;margin-bottom: 10px;font-family: 'sofia_prolight';font-size: 26px;color: #fff;height: 150px;display: flex;justify-content: center;align-items: center;}
.improvement {background:#81b8b3;padding:50px 0 300px;}
.improvement span {display:block; font-family: 'sofia_prolight';font-size:18px;margin:0 0 10px;color:#fff;text-align:center;}
.improvement h2 {font-family: 'sofia_proextra_light';font-size: 90px;letter-spacing: 40px;text-align: center;margin: auto auto 50px;color:#fff;line-height:70px;}
.improvement hr {margin-top: 0;margin-bottom: 50px;border: 0;}
.improvement p {margin: auto;max-width: 75%;text-align: center;color: #fff;font-size: 18px;font-family: 'sofia_proregular';}
.improvement p a{text-decoration:underline;}
.bg-color-1 {background:#326034;}
.bg-color-2 {background:#548b56;}
.bg-color-3 {background:#92b98c;}
.bg-color-4 {background:#b4d5ae;}
.box-content {text-align: center;margin-top: 80px;color:#fff;}
.box-content span {display:block;width:50px;height:50px;border:2px solid #fff;margin:auto auto 10px;}
.box-content h4 {font-family: 'sofia_proregular';font-size:26px;margin:0;}
.box-content p {font-family: 'sofia_prolight';font-size:18px;margin:0;}
.box-content hr {margin-top: 1px;margin-bottom: 5px;border: 0;border-top: 1px solid #fff;display: block;width: 220px;}
.stick-around {padding:50px 0 80px;background:#fff;margin-top: 100px;}
.stick-around h2 {color:#81b8b3;font-family: 'sofia_proextra_light';font-size: 60px;letter-spacing: 20px;text-align: center;margin: auto auto 50px;line-height: 70px;}
.stick-around a {font-size: 28px;text-align: center;text-decoration: underline;color: #81b8b3;display: block;padding: 40px;border: 2px solid #81b8b3;}
.hover-div {opacity: 0;visibility: hidden;background: rgba(255, 255, 255, 0.5);width: 100%;height: 100%;display:none;}
.hover-div .wrapper {right: 50px; position: absolute;top: 50%;transform: translateY(-50%);width:40%}
.hover-div .wrapper ul {margin:0;padding:0;list-style:none;}
.hover-div .wrapper ul li {position:relative;line-height:30px;color:#000;font-size:20px;font-family: 'sofia_prolight';    margin-bottom: 20px;padding-left: 40px;}
.hover-div .wrapper ul li:before {content:"";background: url(tick.png) no-repeat;background-size:80%;width:30px;height:30px;    position: absolute;left: 0;top: 3px;}
.product1:hover .hover-div , .product2:hover .hover-div , .product3:hover .hover-div, .product4:hover .hover-div{ opacity: 1;display:block;position: absolute;visibility: visible;}
.product1:hover  .product-name , .product2:hover  .product-name, .product3:hover  .product-name, .product4:hover  .product-name {opacity: 0;}
.shoplink {display: flex;justify-content: space-around;align-items: center;margin: 50px 0 30px;}
.shoplink a {text-align: center;font-size: 20px;text-decoration: none;color: #000;border-bottom: 1px solid #000;padding-bottom: 0px;  text-transform: capitalize;display: block;}
.learn-link {text-align:center}
.learn-link a {color: #000;border-bottom: 1px solid #000;display: inline;text-align: center;margin: auto;text-transform: capitalize;}
.product-name p {display:none}

.product2 .hover-div .wrapper , .product4 .hover-div .wrapper {left:50px}


.eyedrop{
  position: relative;
  overflow: hidden;
  z-index: 99;    width: 80%;
    margin: auto;
}
#eyedrop::before {
  content: '';
  position: absolute;
  background: url(fd-l2.png) no-repeat;
  width: 100%;
  bottom: 0;
  animation: wipe 2s cubic-bezier(.2,.6,.8,.4) forwards;
  z-index: -1;
}
#eyedrop1::before {
  content: '';
  position: absolute;
  background: url(fd-l2.png) no-repeat;
  width: 100%;
  bottom: 0;
  animation: wipe1 2s cubic-bezier(.2,.6,.8,.4) forwards;
  z-index: -1;
}
#eyedrop2::before {
  content: '';
  position: absolute;
  background: url(fd-l2.png) no-repeat;
  width: 100%;
  bottom: 0;
  animation: wipe2 2s cubic-bezier(.2,.6,.8,.4) forwards;
  z-index: -1;
      background-position: center;

}
.after_eyedrop::after {
  content: '';
  position: absolute;
  background: url(fd-l1.png) no-repeat;
  width: 100%;
  bottom: 0px;
  z-index: -2;    left: 0;
  animation: wipe3 2s cubic-bezier(.2,.6,.8,.4) forwards;
} 

@keyframes wipe {
  0% {
    height: 0;
  }
  100% {
    height: 35%;
  }
}

@keyframes wipe3 {
  0% {
    height: 30%;
  }
  100% {
    height: 70%;
  }
}


@keyframes wipe1 {
  0% {
    height: 0;
  }
  100% {
    height: 60%;
  }
}
@keyframes wipe2 {
  0% {
    height: 0;
  }
  100% {
    height: 85%;
  }
}

.m-drop .count {position: absolute;top:auto; left: 0;right: 0;text-align: center;color: #fff;bottom:50px}
.m-drop .count h3 {font-family: 'sofia_prolight';font-size: 36px;margin: 0 0 0px;line-height: 36px;}
.m-drop .count p {font-size: 20px;margin: 0;line-height: 26px;}
.m-drop .count1 {position: absolute;top: 40%;left: 0;right: 0;text-align: center;color: #fff;}
.m-drop .count1 h3 {font-family: 'sofia_prolight';font-size: 50px;margin: 0 0 10px;line-height: 50px;}
.m-drop .count1 p {font-size: 26px;margin: 0;line-height: 30px;}
.m-drop1 .count {position: absolute;top: 55%;left: 0;right: 0;text-align: center;color: #fff;}
.m-drop1 .count h3 {font-family: 'sofia_prolight';font-size: 100px;margin: 0 0 0px;line-height: 100px;}
.m-drop1 .count p {font-size: 26px;margin: 0;line-height: 30px;}
.m-drop2 .count {position: absolute;top: 45%;left: 0;right: 0;text-align: center;color: #fff;}
.m-drop2 .count h3 {font-family: 'sofia_prolight';font-size: 60px;margin: 0 0 0px;line-height: 60px;}
.m-drop2 .count p {font-size: 26px;margin: 0;line-height: 30px;}

.cs-close img{width: 16px;
    margin-top: 12px;
    font-weight: bold;
    cursor: pointer;}

.documents .offset-md-3 {
    margin-left: 25%;
}


@media(max-width: 1200px){
  .container {max-width: 960px;}
  .bottom-content {max-width:100%}
  .industry h2 {font-size: 80px;letter-spacing: 20px;}
  .industry-list .name , .industry-list .price{font-size:40px}
  .fabrics h2,.improvement h2 { letter-spacing: 30px;}
  .product4 , .product2{    background-position: -100px 0px;}
  .wrap {width: 50%;max-width: 50%;padding: 0 15px;}
  .product-list h4 br {display:none}
  .full-banner,.bottom-content {padding: 100px 0 10px;}  
  .full-banner p { margin: 0 0 100px;}
  .full-banner {    background-size: cover;}
}

@media(max-width: 991px){
  .container {max-width: 720px;}
  .industry h2 {font-size: 60px;letter-spacing: 5px;line-height: 60px;}  
  .fabrics h2, .improvement h2,.factories h2 , .documents h2,.how-we-do h2 {letter-spacing: 5px;font-size: 60px;}
  .product1 , .product2, .product3 , .product4 {padding:100px 0}
  .product-list h2 {font-size: 34px !important;margin: 0px;letter-spacing: 0px !important;line-height: 50px;}
  .product-list h4 {font-size:24px}
  .how-we-do h3:before {left: -50px;}
  .box-content hr {width:100%}
  .box-content h4 {font-size:24px}
  .col-4 , .col-3 {flex: 0 0 50%;max-width: 50%;}  
  .product4 , .product2{    background-position: right;}
  .stick-around a , .water-bubble{margin-bottom:30px}
   .hover-div .wrapper {right: 0;width: 94%;left: 0;margin: auto;}
  .product2 .hover-div .wrapper, .product4 .hover-div .wrapper {left: 0px;}
  .hover-div .wrapper ul li {margin-bottom: 10px;font-size: 16px;}
  .shoplink {margin:10px 0}
  .product1:hover .wrap , .product2:hover .wrap, .product3:hover .wrap,.product4:hover .wrap {display:none}
  .product1, .product2, .product3, .product4 {height:450px}

}

@media(max-width: 767px){
  .container {width: 100%;}
  .full-banner h2 {font-size:40px;margin-bottom:30px;line-height: 50px;}
  .full-banner span {padding:0}
  .full-banner p {margin: 0 0 20px;}
  .industry h2 {font-size: 40px;letter-spacing: 5px;line-height: 50px;}
  .col-6 {flex: 0 0 100%;max-width: 100%;padding: 0 15px;}  
  .industry-list .price {text-align:left}
  .industry-list .price i br , .how-we-do h2 br {display:none}
  .text-line {line-height: 40px; font-size: 30px;}
  .fabrics h2, .improvement h2, .factories h2, .documents h2, .how-we-do h2 {letter-spacing: 5px;font-size: 46px;}
  .wrap {width: 100%;max-width: 80%;padding: 15px;margin: auto;background: #fff;}
  .factories ul {    margin-left: 0;}
  .white-box a {padding:30px;margin:0 0 30px}
  .how-we-do h2 {line-height:60px}
  .how-we-do h3:before {left: 0;}
  .box {text-align: left;padding: 30px 20px;font-size: 20px;height: 120px;}
  .improvement p {    max-width: 90%;}
  .improvement h2 {font-size:40px}
  .top-bar p {font-size:16px}
  .shoplink a {margin: 0 10px;}
  .product-name p {display: block;color: #000;text-align: center;text-decoration: underline;}
  .documents .offset-md-3 { margin-left: 0; }
  .factories .col-4{flex: 0 0 100%;
    max-width: 100%;}
  .stick-around a {
    font-size: 22px;
padding: 10px;}
  .col-4, .col-3 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
}
 }

.full-banner div {color:#fff;}
.CollectionItem__Content.CollectionItem__Content--bottomCenter {
    background: rgba(255, 255, 255, 0.4);
    padding-top: 15px;
}