@import url("https://use.typekit.net/ovi8unz.css");

:root {

/* - - - - - C O L O R S - - - - - */	

--white: #FDF7ED;
--red:#EE2E24;
--black:#252C35;
--purple:#5117EF;
--before-after-aspect-ratio: 1 / 1;
--before-image: url('../images/open.png');
--after-image: url('../images/close.png');
--before-after-background-color: #FDF7ED;

/* - - - - - F O N T S - - - - - */

--font: "degular", sans-serif;

}

/* - - - - - I D S - - - - - */

#open {
  background-color:var(--black);
  padding:30px 50px;
  width:180px;
  background-image:url('../images/open.svg');
  background-repeat:no-repeat;
  background-position: center center;
  background-size: 100px;
  border: 1px solid var(--black);
  border-radius:15px;
}

#dicht {
  background-color:var(--black);
  padding:30px 50px;
  width:180px;
  background-image:url('../images/dicht.svg');
  background-repeat:no-repeat;
  background-position: center center;
  background-size: 100px;
  border: 1px solid var(--black);
  border-radius:15px;
}

* {
	box-sizing: border-box;
}


body {
	font-family: var(--font);
	background-color:#FDF7ED;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  padding:0px;
  margin:0px;
  min-height:100vh;
  position: relative;
   touch-action: pan-x pan-y;

}


h1 {color:var(--black); font-size:60px; line-height:60px;  margin:0px;font-weight:700;}
h2 {color:var(--black); font-size:40px; line-height:40px;  margin:0px;}
h3 {color:var(--black); font-size:26px; line-height:26px;  margin:0px;}
h4 {color:var(--black); font-size:20px; line-height:30px;  margin:0px; font-weight:700;}

h2 strong {font-weight:700;}
h3 {color:var(--black);}


/* - - - - - C L A S S E S - - - - - */

.before-after-container {
  aspect-ratio: var(--before-after-aspect-ratio);
  background: var(--before-after-background-color);
  width: 100%;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  margin:auto;
}
.before-after-container figure {
  background-image: var(--after-image);
  position: relative;
  margin: 0;
  background-size: cover;
  width: 100%;
  height: 100%;
}
#before_after {
  background-image: var(--before-image);
  background-size: cover;
  bottom: 0;
  border-right: 5px solid rgba(255, 255, 255, 1);
  box-shadow: 10px 0 15px -13px #000;
  height: 100%;
  max-width: 98.6%;
  min-width: 0.6%;
  overflow: visible;
  position: absolute;
  width: 50%;
  animation: first 2s 1 normal ease-in-out 0.1s;
  -webkit-animation: first 2s 1 normal ease-in-out 0.1s;
}
input#before_after_slider {
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  cursor: col-resize;
  height: 100vw;
  left: 0;
  margin: 0;
  outline: none;
  padding: 0;
  position: relative;
  top: -100vw;
  width: 100%;
}
input#before_after_slider::-moz-range-track {
  background: transparent;
}
input#before_after_slider::-ms-track {
  border: none;
  background-color: transparent;
  height: 100vw;
  left: 0;
  top: -100vw;
  width: 100%;
  margin: 0;
  padding: 0;
  outline: none;
  position: relative;
  cursor: col-resize;
  color: transparent;
}
input#before_after_slider::-ms-fill-lower {
  background-color: transparent;
}
input#before_after_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 100vw;
  width: 0.5%;
  opacity: 0;
}
input#before_after_slider::-moz-range-thumb {
  -moz-appearance: none;
  height: 100vw;
  width: 0.5%;
  opacity: 0;
}
input#before_after_slider::-ms-thumb {
  height: 100vw;
  width: 0.5%;
  opacity: 0;
}
input#before_after_slider::-ms-tooltip {
  display: none;
}
#before_after::before {
  background: url('../images/comparision.png') no-repeat
  scroll 0 center transparent;
  background-size: contain;
  content: " ";
  float: right;
  left:3px;
  height: 100%;
  margin-right: -50px;
  position: relative;
  top: 0;
  width: 100px;
  z-index:0;
}

#before_after::after {

  content: "";
  float: right;
  left:103px;
  height: 100%;
  position: relative;
  top: calc(50% - 50px);
  z-index:-1;
  border-radius:100px;
  width: 100px;
  height:100px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);

}

@keyframes first {
  0% {
    width: 0%;
  }
  50% {
    width: 80%;
  }
  100% {
    width: 50%;
  }
}
@-webkit-keyframes first {
  0% {
    width: 0%;
  }
  50% {
    width: 80%;
  }
  100% {
    width: 50%;
  }
}

.hover-shake-out:hover, .hover-shake-out:focus, .hover-shake-out:active {
  animation: hover-shake-out 1s linear 1;
  cursor: pointer;
}

@keyframes hover-shake-out {
  10% {
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    transform: translateX(1px) rotate(0);
  }
  100% {
    transform: translateX(-1px) rotate(0);
  }
}

.get-down {margin-top:100px;}

.btn-transparant {
  font-size:20px;
  background-color:transparent;
  border:0px solud var(--white);
  text-align:left;
  color:var(--black);
  font-weight:700;
}

.btn-purple {
	background-color:var(--purple);
	border-radius:15px;
	margin-top:40px;
	color:var(--white);
	padding:10px;
	padding:20px 30px;
	border:1px solid var(--purple);
}

.btn-red {
	background-color:var(--red);
	border-radius:15px;
	padding:20px 30px;
	margin-top:40px;
	color:var(--white);
	border:1px solid var(--red);
}

.btn-multicolor {
	background-color:var(--black);
	border-radius:15px;
	padding:10px 20px;
	margin-top:40px;
	color:var(--white);
	border:1px solid var(--black);

}




.head {
  background-color:#f3f8fa; border-radius:10px 10px 0px 0px; line-height:50px; 
}

.results {border: 1px solid #eee; padding:20px 0px 20px; line-height:40px; border-top:0px;}

.vrhl {color:#f76840; padding:0px 30px; background-color:#fae6e1; border-radius:50px; border: 1px solid #fae6e1; display:inline-block; margin-left:10px; float:right;}

#inzendingen {
  background-color:#ffffff;

}


input[type=email], input[type=text] {
	border:0px solid var(--white);
	padding:20px 40px;
	border-radius:15px;
}

.max-container {
	border: 0px solid #ccc;
	max-width:540px;;
	aspect-ratio: 9 / 16;
	box-shadow: rgba(238, 46, 36, 0.2) 0px 25px 450px -12px;
}

.min-h-100 {min-height:100vh;}


.start {
	padding:10px 60px 15px 60px;
	text-transform:uppercase;
	background-color:var(--red);
	color:var(--white);
	text-decoration:none;
	text-align:center;
	display:inline-block;
	margin:0px;
	font-weight:700;
	font-size:40px;
	border-radius:20px;
	margin-top:20px;
	margin-bottom:20px;
	transition:0.3s;
	border: 1px solid var(--red);
}

.duwo {
	position: absolute;
	width:200px;
	height:200px;
	background-size:contain;
	background-repeat:no-repeat;
	z-index:-1;
}

.restart {
	position: absolute;
	left:5px;
	bottom:5px;
  width:15px;
  height:15px;

}

.duwo_1 {left:-30px; bottom:-70px; background-image:url('../images/duwo_1.png');}
.duwo_2 {right:-30px; bottom:70px; width:100px; background-image:url('../images/duwo_2.png');}
.duwo_3 {right:-30px; top:-70px; background-image:url('../images/duwo_5.png');}
.duwo_4 {left:-130px; top:40%; background-image:url('../images/duwo_4.png');}
.duwo_5 {left:0px; bottom:0px; background-image:url('../images/duwo_5.png');}
.duwo_8 {left:0px; top:0px; background-image:url('../images/duwo_8.png');}
.duwo_6 {right:-90px; top:30px; background-image:url('../images/duwo_6.png'); height:400px !important;}