/* CSS Document */


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

}

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

}

body {
	font-family: 'gilroy-regular', sans-serif;
	overflow-x: hidden;
}

* {
  	backface-visibility: hidden;
  	box-sizing: border-box;
	padding:0;
	margin:0;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
  width: auto;
}


h1,h2,h3,h4,h5,h6,strong,button span{
	font-family: 'gilroy-bold', sans-serif;
	font-weight: normal;
}

h1,h2,h3,h4,h5,h6{
	margin:0;
}

body.login{
	background: #3bb0c7 url("https://development.botervet.nl/herome/app/assets/images/TA_NAOMI-12-3.png") center bottom no-repeat;
	background-size:auto;
}

.container-holder{
	width:100%;
	margin:0 auto;
	position: relative;
	padding:0;
	height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  	height: calc(var(--vh, 1vh) * 100);
}

.container-holder.home{
	background-color:#F6FCFF;
}

.container-holder.picker{
	background-color:#002B64;
}

.container-holder.login{
	background: -webkit-linear-gradient(rgba(0,43,100,0.19) 0%, rgba(0,43,100,0) 100%);
	background: -o-linear-gradient(rgba(0,43,100,0.19) 0%, rgba(0,43,100,0) 100%);
	background: linear-gradient(rgba(0,43,100,0.19) 0%, rgba(0,43,100,0) 100%); 
}

iframe{
	max-width: 100%;
}

#question-container {
  width: 100%;

	
}

#options-container {
	margin-top: 10px;
	padding:0 25px;
}


#question{
	color:#ACC9E8;
	text-align: center;
	font-size:20px;
	padding:0 25px;
	margin-bottom:1.5rem;
}

#question.change-margin{
	margin-top:40px;
}

header{
	position: relative;
	min-height: 70px;
}

header .logos{
	position: absolute;
	left: 25px;
  	top: 10px;
	z-index: 10;
}

.logo-big{
	width: 140px;
}

.picker header{
	padding-left:25px;
	padding-right:25px;
	padding-top:10px;
}

.picker header .logos{
	position: relative;
	left:0;
	top:0;
}

.picker header .logos svg{
	max-width: 35px;
}
.st0{fill:none;}
.picker header .logos .st1{fill:#ACC9E8;}

.header-nav{
	position: relative;
	color:#ACC9E8;
}

.header-nav nav{
	margin-top:20px;
	position: relative;
	z-index: 100;
}

.header-nav nav ul{
	display: flex;
}

.header-nav nav ul li{
	display: flex;
	align-items: center;
  	padding: 0.5rem;
}

.header-nav nav ul li .sub-navigation ul{
	display: flex;
	flex-direction: column;
}

.header-nav nav ul li .sub-navigation ul li{
	display: flex;
	align-items: center;
  	padding:0.2rem 1rem 0.2rem 0.5rem;
}

.header-nav nav ul li .sub-navigation ul#colornav, .header-nav nav ul li .sub-navigation ul#skinnav{
	display: block;
	max-height: 250px;
  	overflow-y: auto;
}

.header-nav nav ul li .sub-navigation ul#colornav li, .header-nav nav ul li .sub-navigation ul#skinnav li{
	padding:0;
	display: inline-block;
	width:25%;
}

.header-nav nav ul li .sub-navigation ul#skinnav li{
	padding:0;
	display: inline-block;
	width:23%;
}

.nail-color, .skin{
	position: relative;
}

.skin{
	padding:0.35rem;
}

.nail-color .check, .skin .check{
	display:none;
	position: absolute;
	width:30px;
	top: 1.4rem;
  	left: 1.5rem;
	z-index:20;
}

.nail-color.active .check, .skin.active .check{
	display:block;
}

.sub-navigation h3{
	width:100%;
	text-align: left;
	font-size:22px;
	padding:10px 0 10px 8px;
}

/*.header-nav nav ul li img{
	max-width:75%;
}*/

.header-nav nav ul li .sub-navigation{
	display: none;
	position: absolute;
	background: #F6FCFF;
	width: 100%;
	left: 0;
	top: 100%;
	border-radius: 10px;
	padding: 10px 0 10px 10px;
}

.header-nav nav ul li .sub-navigation.active {
	display: block;
	
}


button.option{
	-webkit-appearance: none;
	appearance: none;
	width:100%;
	padding:0;
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	position:relative;
	border:none!important;
	background:#fff;
	border-radius: 10px;
	margin-bottom:10px;
	color:#ACC9E8;
	padding:1rem;
	font-family: 'gilroy-regular';
	transition: all .3s ease;
}

button.option:hover{
	background:#ACC9E8;
	color:#fff;
}

button.image-button{
	-webkit-appearance: none;
	appearance: none;
	width:100%;
	padding:0;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
	position:relative;
	border:none!important;
	background:none;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom:10px;
}

.header-image{
	position: relative;
}

button span, .header-image h2{
	position: absolute;
	left:25px;
	right:25px;
	bottom:25px;
	color:#fff;
	font-size:2rem;
	text-align: left;
}

button bdi{
	position: absolute;
    top: 15px;
    right: 25px;
    font-size: 24px;
    color: #fff;
	font-family: 'gilroy-bold';
	font-weight: normal;
}

button img{
}

.hand-result{
	width:100%;
	max-width:100%;
	position: absolute;
	bottom: 0;
	left:0;
	z-index: 5;
}

.hand-result .product-title{
	position: relative;
	padding:0 25px;
}

.hand-result .product-title h2{
	color:#ACC9E8;
	font-size:26px;
	text-align: center;
}

.hand-result .buy-now{
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	font-size: 22px;
	text-align: center;
	cursor: pointer;
	position: relative;
	border: none !important;
	background: #FBBC05;
	border-radius: 40px;
	margin-bottom: 10px;
	color: #fff;
	padding: 0.7rem 1.7rem;
	font-family: 'gilroy-bold';
	transition: all .3s ease;
	position: absolute;
	left: 0.65rem;
	bottom: 1.3rem;
	font-weight: normal;
	text-decoration: none;
}

.hand-result .buy-now:hover{
	background:#FB9905;
	color:#fff;
}

.bottle-container{
	position: relative;
	width:100%;
	max-width:57%;
	height: 100%;
	bottom:0;
	right:0;
	z-index:11;
	margin-left:auto;
	display:none;
}

.product-image{
	max-width: 110px;
    padding-bottom: 120px;
    margin-left: 2.2rem;

}

.bottle-container .price{
	position: absolute;
	bottom: 6rem;
	left: 3.6rem;
	font-size: 20px;
	color: #fff;
	font-family: 'gilroy-bold';
	font-weight: normal;
}

.hand-container{
	max-width:66%;
	position: absolute;
	bottom: 0;
	left:0;
	z-index: 10;
}

.hand-container .nails{
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
}

.nails .almond, .nails .mountain, .nails .basic, .nails .square, .nails .round, .small, .middle, .large{
	display: none;
}

.shadows{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index:50;
}

.small.active,.middle.active, .large.active, .nails .almond.active, .nails .mountain.active, .nails .basic.active, .nails .square.active, .nails .round.active{
	display: block;
}

.hand-container .nails svg{
	color:#ff0066;	
}


nav button{
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
}

.main-nav{
	position: relative;
}

.main-nav.active::after {
	content: '';
	position: absolute;
	left: 26px;
	top: 100%;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #fff;
}

.overlay{
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background: rgba(255,255,255,0.30);
	z-index: 50;
	display: none;
}

.overlay.active{
	display: block;
}

button.length, button.shapee{
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	padding: 0;
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	position: relative;
	border: none !important;
	background: #ACC9E8;
	border-radius: 10px;
	margin-bottom: 0;
	color: #fff;
	padding: 0.7rem;
	font-family: 'gilroy-regular';
	transition: all .3s ease;

}

button.length .check, button.shapee .check{
	position:absolute;
	top: .7rem;
  	right: 1rem;
	width:24px;
	display: none;
}

button.length.active .check, button.shapee.active .check{
	display: block;
}

.align-items-start {
  -webkit-box-align: start !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}
.flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}
.d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.login-container{
	max-width:300px;
	margin:0 auto;
	height:100%;
}

.login-container header{
	padding-top:20px;
	width:100%;
}

.login-container header h1{
	font-size:1rem;
	color:#fff;
	text-align: center;
	margin-top:0.5rem;
}

.login-container h2{
	font-size:20px;
	color:#fff;
	margin-bottom: 15px;
	text-align: center;
}

.login input,.login button{
	-webkit-appearance: none;
	appearance: none;
	width:100%;
}

.login input{
	font-family: 'gilroy-regular';
	padding:0.7rem 1rem;
	background:rgba(255,255,255,0.90);
	border-radius: 10px;
	border:none;
	font-size:1rem;
	margin-bottom:10px;
	outline: none!important;
}

.login button{
	background:#F8B6CD;
	padding:0.7rem 1rem;
	text-align: center;
	font-family: 'gilroy-bold';
	font-weight: normal;
	color:#fff;
	font-size:20px;
	border:none;
	border-radius: 10px;
	
}

.loginform{
	margin:auto 0;
	width:100%;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.alert {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  border-radius: 10px;
}

.info{
	text-align: center;
	color: #fff;
}

.info p{
	margin-bottom:2rem;
}

.loginform a{
	text-align: center;
	color:#fff;
	font-size:1rem;
	text-decoration: none;
	width: 100%;
	display: block;
	margin-top: 15px;
}

.social-login{
	color:#fff;
	text-align: center;
	margin-top:auto;
	margin-bottom:2rem;
	width:100%;
}

.social-login h3{
	font-size:1rem;
	margin-bottom:10px;
}

.social-login ul li{
	display: inline-block;
	background:#fff;
	width:40px;
	height:40px;
	border-radius: 10px;
	margin:0 3px;
	text-align: center;
}

.social-login ul li a{
	width:100%;
	height:100%;
	text-align: center;
	display: block;
}

.social-login ul li img{
	max-width:25px;	
	margin-left: 8px;
	margin-top: 8px;
}

.social-login ul li img.apple{
	margin-top: 5px;
}

.login-container footer{
	color:#fff;
	font-size:1rem;
	text-align: center;
	line-height: 30px;
	margin-bottom:20px;
	width:100%;
}

.login-container footer a{
	color:#fff;
	text-decoration: none;
}


/*Results*/
.innercanvas {
  --r: 16/9;
  aspect-ratio: var(--r);
  width: min(100%, min(1920px, 95vh*(var(--r))));
  position: relative;
  justify-content: center;
  align-items: center;
  overflow: hidden;
	border-radius: 10px;
}

.result-holder{
	color:#ACC9E8;
	background:#F8B6CD;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.result-holder #result-link{
	background: #9EC9E9;
	color:#fff;
	padding:1rem;
	font-size:20px;
	font-family: 'gilroy-bold';
	font-weight: normal;
	text-align: center;
	margin:0 2rem;
	display: block;
	border-radius: 10px;
	text-decoration: none;
	position: absolute;
	bottom: 2rem;
	left: 0;
	right: 0;
	z-index:1200;
}

.content-box{
	padding:2rem 2rem 8rem 2rem;
	background:#F6FCFF;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	position: absolute;
	bottom:-350px;
	width:100%;
	display: block;
	cursor: pointer;
	transition: bottom 0.4s ease;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	max-height: 100%;
	z-index: 1100;
}

.inner-content-box.open{
	display: block;
    max-height: 550px;
	overflow-y: scroll;
}


/*.inner-content-box p, .inner-content-box .excerpt{
	color:#252525;
}*/



.result-page.more .content-box{
	bottom:0px;
	transition: bottom 0.4s ease;
}

.slideUp {
  bottom: 0 !important;
}


.content-box h2, .content-box .price{
	font-size:26px;
	font-family: 'gilroy-bold';
	font-weight: normal;
	
}

.content-box .price{
	margin-bottom:1rem;
}

.content-box .video-holder{
	margin-bottom:1.5rem;
/*	transition: opacity 0.4s ease;
	height:0;
	display: none;*/
}

.content-box p{
	font-size: 1rem;
	line-height: 21px;
	margin-bottom:1rem;
}

.dragger{
	width:100%;
	display: block;
	text-align: center;
	margin-bottom:1.5rem;
}

.dragger img{
	display: block;
	margin: 0 auto;
}

.logout{
	position: absolute;
	right: 25px;
	top: 2.1rem;
	color: #ACC9E8;
	font-size: 1.7rem;
	z-index: 1000;
}

.back-link{
	position: absolute;
	right: 60px;
	top: 2.1rem;
	color: #ACC9E8;
	font-size: 1.7rem;
	z-index: 50;
}

.not-home .logout, .not-home .back-link, .logout.open{
	color:#fff;
}

.advies-container{
	padding:25px;
	font-family: 'gilroy-bold';
	font-weight: normal;
	color:#ACC9E8;
}

.advies-container h2{
	
	font-size:2rem;
}

.advies-container p{
	font-size:20px;
	padding-top:10px;
}

.excerpt{
	margin-bottom:1rem;
	line-height: 21px;
}

.result-page #result, .result-page .video-holder{
	transition: opacity 0.4s ease;
	opacity: 0;
}

.result-page.more #result, .result-page.more .video-holder{
	transition: opacity 0.4s ease;
	opacity: 1;
}


button.read-more{
	-webkit-appearance: none;
	appearance: none;
	width:100%;
}

button.read-more{
	font-family: 'gilroy-bold';
	font-weight: normal;
	background:none;
	border:none;
	font-size:16px;
	color:#ACC9E8;
	text-align: left;
	content: '+ lees meer';
}

button.read-more.minder{
	display:none;
}

.navigation {
	height: 100%;
	width: 300px;
	position: fixed;
	z-index: 100;
	top: 0;
	right: -100%;
	background-color: rgba(248,182,205,1.00);
	overflow-x: hidden;
	transition: 0.5s;
	padding: 100px 2rem;
	
}

.navigation.show{
	right:0;
}

.navigation li.drop-down{
	position: relative;
}


.navigation ul.sub-menu {
	padding-left:1rem;
	height:0;
	opacity: 0;
	transition: 0.5s;
	visibility: hidden;
}

.navigation ul.sub-menu li:last-child {
	margin-bottom: 1rem;	
}

.navigation ul li{
	line-height:2rem;
	display: block;
}

.navigation ul li.drop-down .sub-menu.open {
	height:80px;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}



.navigation a{
	color:#fff;
	font-family: 'gilroy-bold';
	font-weight: normal;
	font-size:18px;
	text-decoration: none;
}

.navigation a i{
	padding-left:0.2rem;
}

.overlay-nav{
	height:100%;
	width:0;
	position: fixed;
	top:0;
	right:0;
	background:rgba(0,0,0,0.40);
	z-index:40;
	opacity: 0;
	transition: opacity 0.5s;
}

.overlay-nav.show{
	width:100%;
	opacity:1;
}

.input-container{
	position: relative;
}

.input-container input{
	padding-left:2.5rem;
}

.input-container .log-icon{
	position: absolute;
    top: 12px;
    left: 1rem;
	color:#555;
}


@media only screen and (min-width: 960px) {
	body {
	  	margin: 20px;
	}
	
	.container-holder{
		width:390px;
		height: 840px;
	}
	
	.product-image{
		max-width:140px;
		padding-bottom:120px;
		margin-left:1rem;
	}

}