html, body{
	height:100% !important;
	background-color:#FFF;
}

.desktop{ display:none !important; }


#haircalculator{

}

#haircalculator .header{
	padding-top:20px;
}
#haircalculator .header .logo{
	width:170px;
}

#haircalculator .header .gradient{
	opacity:1;
	top:-10vh;
}
#haircalculator .header .gradient .g1{
	width:70vw;
	height:38vh;
	border-radius:50%;
	top:-18vh;
	left:-20vw;
	filter: blur(50px);
	transform:scale(1);
	animation:gradientAnimationGOne 5s infinite;
}
#haircalculator .header .gradient .g2{
	width:80vw;
	height:40vh;
	border-radius:50%;
	top:-15vh;
	right:-10vh;
	filter: blur(50px);
	transform:scale(1);
	animation:gradientAnimationGTwo 8s infinite;
}

@keyframes gradientAnimationGOne {
  0%   { transform:scale(1); }
  33%  { transform:scale(0.8); }
  66% { transform:scale(1.2); }
}
@keyframes gradientAnimationGTwo {
  0%   { transform:scale(1); }
  33%  { transform:scale(1.2); }
  66% { transform:scale(0.8); }
}

#haircalculator .t-p{
	top:8vw;
	right:5vw;
	padding: 7px 10px;
    border-radius: 10px;
}


#haircalculator .progress-bar{
	width:90vw;
	height:5px;
	border-radius:10px;
	background-color:var(--c-g0);
	overflow:hidden;
	left:5vw;
	bottom:2vw;
}
#haircalculator .progress-bar .bar{
	width:0%;
	height:100%;
	background-color:var(--c-1);
	border-radius:2vw;
	transition:all 0.5s;
}


#haircalculator #btn-sale{
	top:8vw;
	left:5vw;
	padding: 7px 10px;
    border-radius: 10px;
}
#haircalculator #btn-sale img{
	width:24px;
}




#haircalculator .question{
	width:100%;
	left:0%;
	padding:20vh 5vw 0;
}
#haircalculator .question-closed{
	transform:scale(1.1);
	opacity:0;
	top:100%;
}
#haircalculator .question-left{
	top:0;
	left:-100%;
}
#haircalculator .question-right{
	top:0;
	left:100%;
}

#haircalculator .question .questionText{
	margin-bottom:5vw;
}

#haircalculator .question .bottom{
	padding:5vw 5vw 5vw;
	left:0;
	bottom:0;
}
#haircalculator .question .bottom .wait .text{
	opacity:0.5;
}


#haircalculator .question .answerBox{
	padding-right:20px;
	overflow-y: scroll;
}
#haircalculator .question .answer .answerChoice{
	width:100%;
	border:1px solid var(--c-1);
	border-radius:10px;
	padding:5px 5px 5px 10px;
	margin-bottom:10px;
	font-size:18px;
	cursor:pointer;
	overflow:hidden;
	position:relative;
}
#haircalculator .question .answer .answerChoice .info{
	display: block;
  font-size: 11px;
  opacity: 0.7;
}
#haircalculator .question .answer .answerChoice .highlight{
	transition:all 0.3s;
}
#haircalculator .question .answer .answerChoice .highlight_multi{
	transition:all 0.3s;
}


#haircalculator .question .answer .answerPrice{
	display:grid;
	grid-template-columns:auto min-content min-content;
	grid-gap:2px;
	align-items:center;
}
#haircalculator .question .answer .priceText{
	padding:7px 10px;
	border-radius:10px;
}
#haircalculator .question .answer .price-sale{
	white-space: nowrap;
	opacity:0;
}
#haircalculator .question .answer .price{
	white-space: nowrap;
}

#haircalculator .question .answer .a_selected{
	color:var(--c-w) !important;
}
#haircalculator .question .answer .a_selected .highlight_multi{
	width:100%;
}





#haircalculator .question .sale{
	height:60vh;
	border-radius:20px 20px 0 0;
	padding:5vw 5vw 12vw 5vw;
	transition:all 0.3s;
}
#haircalculator .question .sale-closed{
	bottom:-100%;
}

#haircalculator .question .answer .answerChoiceSale{
	width:100%;
	border:1px solid var(--c-1);
	border-radius:10px;
	padding:10px;
	font-size:18px;
	overflow:hidden;
	position:relative;
}
#haircalculator .question .answer .salePrice{
	display:grid;
	grid-template-columns:auto 58px 58px;
	grid-gap:2px;
	align-items:center;
}

#haircalculator .question .answer .answerChoiceSale input{
	width:100%;
	border-radius:10px;
	padding:5px 10px;
	border:1px solid var(--c-1);
	font-size:16px;
	color:var(--c-1);
	font-family: 'sawton';
}

#haircalculator .question .answer .sale-block{
	margin-top:2px;
	margin-bottom:15px;
}
#haircalculator .question .answer .sale-block .perc{
	background-color:var(--c-2);
	color:var(--c-1);
	padding:7px 10px;
	text-align:center;
	border-radius:10px;
	cursor:pointer;
}

#haircalculator .question .sale .btn-apply-sale{
	width:90vw;
	padding:7px;
	border-radius:10px;
	Left:5vw;
	bottom:2vw;
}



#haircalculator .i{
	width:100%;
	box-sizing:border-box;
	padding:10px;
	background-color:transparent;
	border:1px solid var(--c-1);
	color:var(--c-1);
	font-size:20px;
	border-radius:10px;
	margin-bottom:15px;
	font-family: 'sawton';
}





#haircalculator .btn{
	width:100%;
	box-sizing:border-box;
	padding:7px;
	border:1px solid var(--c-1);
	background-color:var(--c-1);
	color:var(--c-w);
	font-size:24px;
	border-radius:10px;
	font-family: 'sawton';
	text-align:center;
	cursor:pointer;
}
#haircalculator .btn .icon{
	height:44px;
}
#haircalculator .btn .icon-right{
	top:0vw;
	right:0vw;
}
#haircalculator .btn .icon-left{
	top:0vw;
	left:0vw;
}
#haircalculator .btn .icon img{
	height:100%;
}

#haircalculator .btn-icon{
	width:45px;
	height:45px;
}




#haircalculator .final{
	opacity:0;
	margin-left:10px;
	font-weight:500;
}



#haircalculator #end .cta{
	margin-top:5vw;
}
#haircalculator #end .cta .buttons{
	display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5vw;
  margin-top:2vw;
}
#haircalculator #end .cta .buttons .btn{
	width: 100%;
	border-radius: 20vw;
	padding: 1.5vw 2vw;
	margin-top: 2vw;
	border: 3px solid;
	color: var(--c-1);
	display: grid;
	grid-template-columns: 8vw auto;
	grid-gap: 2vw;
	align-items: center;
	background-color: transparent;
}
#haircalculator #end .cta .buttons .btn .icon img{
	width:100%;
	display:block;
}
#haircalculator #end .cta .buttons .btn .data{
	text-align:left;
}
#haircalculator #end .cta .buttons .btn .data .name{
	font-size:18px;
}
#haircalculator #end .cta .buttons .btn .data .sub{
	font-size:12px;
}