.herocontainer{
    position: relative;
    width: 100%;  
top:0;
left:0;
display:flex;
flex-direction:column;
/*height:300vh;*/
/*overflow:hidden;*/
   
}
.fixedhero{

position:fixed;
z-index:5;
display:flex;
width:100%;
height:100%;
top:0;
left:0;
justify-content:center;
flex-direction:column;
align-items:center;
text-align:center;

}

.fixedbutton{
position:fixed;
z-index:99988;
display:flex;
width:100%;
height:90px;
bottom:0;
left:0;
background:rgba(0,0,0,0.6);
justify-content:center;
flex-direction:column;
align-items:center;
text-align:center;

}

.fixedhero h1{
text-align:center;
max-width:640px;
display:inline;
color:#fff;
}


.herocontainer{
  position:relative;
  min-height:100vh;
}

.comparisonSection {
  position: absolute;
  width:auto;
min-width:100vw;
  height:100vh !important;
overflow:hidden;
  top:0;
  left:0;
 /* padding-bottom: 56.25%; */
/* to maintain aspect ratio (responsive!) */
}
.comparisonImage {
  width: 100%;
  height:100% !important;
}
.afterImage {
  position: absolute;
  overflow: hidden;
  top: 0;
  transform: translate(100%, 0px);
}
.afterImage img {
  transform: translate(-100%, 0px);
}
.comparisonImage img {
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 70px;
}


h2 * {
  will-change: transform;
}

@media screen and (max-width: 500px) {
.section1, .section2, .section3{

background-position:50% 50%;
}


}


/*Slider*/


.wc-block-product-template.is-flex-container {
	position: relative;
	margin: 50px 0 100px !important;
display:flex;
flex-wrap:nowrap !important;
}

.wc-block-product {
	padding: 10px;
	text-align: center;
	-webkit-transition: transform .3s;
	transition: transform .3s;
}




.slick-dots li button:before {
	font-size: 20px;
}

.loverlay{

position:fixed;
width:100%;
height:100%;
background:#fff;
left:0;
top:0;
transition:all 0.5s;
z-index:999999999;
}