@font-face {
	font-family: handwriting;
	src: url('fonts/Kalam-Regular.ttf');
}
/*
@font-face {
	font-family: handwriting2;
	src: url('fonts/Kristi.ttf');
}
*/

@font-face {
  font-family: handwriting3;
  font-style: normal;
  font-weight: 400;
  src: local('Over the Rainbow'), local('OvertheRainbow'), url(fonts/Rainbow.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#streepjes{
	position:fixed;
	top:0;
	left:0;
	z-index:1;
	padding:10px;
	box-sizing: border-box;
}



.puzzel li{
	height:300px;
	min-height: 10rem;
	background-image: url("images/puzzelstukje.png");
	background-size: contain;
	background-repeat: no-repeat;
	padding:0;
	min-width:300px;
}


.puzzel li:first-of-type{
	background-image: url("images/puzzelstukje1.png");
}
.puzzel li:nth-child(2){
	background-image: url("images/puzzelstukje2c.png");
}
.puzzel li:nth-child(3){
	background-image: url("images/puzzelstukje2.png");
}
.puzzel li:nth-child(4){
	background-image: url("images/puzzelstukje4.png");
}
.puzzel li:nth-child(5){
	background-image: url("images/puzzelstukje3.png");
}

.puzzel li div{
	/*background-color:rgba(255,255,255,.2);*/
	width:80%;
	padding:4rem 4rem 8rem 4rem;
}

/*
.puzzel li:nth-child(4):before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(images/puzzelstukje.png) 0 0 repeat;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
*/


.list{
	background: #fff;
    border: 1px solid rgba(0, 20, 80, 0.1);
    -webkit-box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
	padding:2rem;
	margin-bottom:2rem;
}

.list ul{
	margin-bottom:1rem;
}

.list ul li:last-child{
	border-top: 1px solid #ddd;
}

section{
	/*
	-webkit-box-shadow: inset 0px -74px 100px 0px rgba(247,249,251,1);
	-moz-box-shadow: inset 0px -74px 100px 0px rgba(247,249,251,1);
	box-shadow: inset 0px -74px 100px 0px rgba(247,249,251,1);
	*/
}

header{
	/*position: relative;*/
	width:250px;
	height:100vh;
	overflow:visible;
	box-shadow: 0rem 1rem 1rem rgba(0,0,0,.1);
	opacity:.5;
	background-color:red;
	left:-200px;
}
header nav{
	width:200px;
	position: relative;
	left:-150px;
	background-color:white;
}
header div{
	background-color:white;
}


header:hover{
	width:250px;
	opacity:1;
	left:0;
}
	
header nav:hover{
	left:0;
}

header:hover nav{
	background-color:white;
	left:0;
}

#headeruitleg{
	line-height:3rem;
	margin-top:2rem;
	margin-bottom:2rem;
}

#headermenu li{
	display:block;
	width:100%;
	
}

header nav ul{
	justify-content: flex-start;
}


#navigation{
    display: none;
}

nav{
	display:flex;
	justify-content:space-between;
	flex-wrap: wrap;
}

nav[role='navigation'] li a{
    color: #f63;
    background-color: transparent;
	border-bottom:1px solid #ddd;
}

nav[role='navigation'] li a:hover {
    background-color: transparent;
}


.logo a {
    background: url(images/logo.png) no-repeat 0 0;
	background-size: contain;
}

@keyframes pulse {
  0%, 100% {
	height:76%;
	top:18%;
    width:80%;
	left:10%;	  
  }
  50% {
    width:86%;
	left:7%;
	height:80%;
	top:15%;	  
  }
}



/*  hover up and down animation  */
#hovergrow {
  /*animation: sideways 5s ease-in-out infinite;*/
	background-image: url("images/puzzelstukje-oranje2.png");
	color:white;
	animation: pulse 5s ease-in-out infinite;
	position: relative;
	left: 0;
	bottom: 0;
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;	
}




#hovergrow:hover{
	bottom:50px;
    -webkit-transform:scale(1.05); /* Safari and Chrome */
    -moz-transform:scale(1.05); /* Firefox */
    -ms-transform:scale(1.05); /* IE 9 */
    -o-transform:scale(1.05); /* Opera */
     transform:scale(1.05);	
}



/*  FLOURISHES  */

/*  https://atomiks.github.io/30-seconds-of-css/#hover-underline-animation  */

.linkbtn {
    display: inline-block;
    position: relative;
    color: #0087ca;
    background-color: rgba(0,0,0,.1);
    border-radius: .4rem;
    border-bottom: 1px solid #0087ca;
    line-height: 2.5rem;
    padding: 0 .5rem;
	cursor: pointer;
}
nav[role='navigation'] li a::after,
.linkbtn::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
nav[role='navigation'] li a:hover::after,
.linkbtn:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}



.nietvanzelfsprekend{
	font-family: handwriting, sans-serif;
}

@media (max-width: 768px){

	header{display:none}
	
}

.kopje{
	color:#f63;
}


video{
	object-fit: cover;
	width:100%;
}

video.background-video{
	object-fit: contain;
}

video.background-video figure{
	min-height:100vh
}

ul.gallery li{
	background-color:transparent;
	box-shadow: none;
	-webkit-box-shadow:none;
}



.sharingbuttons{
	display:flex;
	justify-content: center;
	padding: 2rem;
}

#delensection .sharingbuttons{
	justify-content: flex-end; /*space-around;*/
}


.sharingbuttons img{
	margin-right:1rem;
}

.sharingbuttons img:hover{
	position:relative;
	top:-2px;
	
}

.videoplaybutton{
	
}

ul.sharingicons{

}

ul.sharingicons li {
    margin-right: 1rem!important;
    display: inline-block;
    padding-left: 0.75em;
}

/*form{margin-top:5rem;}*/


/* reveal  */


#thuisiscontainer{
	width:100%; 
	min-height:40vh;
}

#thuisiscontainer form{
	position:absolute;
	
}

#thuisiscontainer:hover #thuisistextinput{
	opacity:1;
}
#thuisiscontainer:hover #thuisistextsave{
	opacity:1;
}

.thuisis,
.thuisistext{
  /*display:inline-block;*/
  overflow:hidden;
  white-space:nowrap;
}
.thuisis {
	margin-bottom:6rem;
}

.thuisistext:not(:active),
.thuisistextinput:not(:focus),
.thuisistextinput:not(:active){
  	width:1px;
	
}
.anim{
	animation: reveal 7s normal forward;
}

.features li:hover{
	box-shadow: none;
}


input#thuisistextinput{
	/*font-family: handwriting3;*/
	background-color:white;
	border:none;
	border-bottom:2px solid transparent;
	padding: 2rem;
	color: black;
}

::-webkit-input-placeholder {
    color:    #333;
}
:-moz-placeholder {
    color:    #333;
}
::-moz-placeholder {
    color:    #333;
}
:-ms-input-placeholder {
    color:    #333;
}

#thuisistextinput:hover{
	border-bottom:1px solid #f63;
}

#thuisistextinput:focus::-webkit-input-placeholder,
#thuisistextinput:focus:-moz-placeholder,
#thuisistextinput:focus::-moz-placeholder,
#thuisistextinput:focus:-ms-input-placeholder,
#thuisistextinput:focus::-webkit-input-placeholder{
        color: transparent;
    }

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

button[type='submit']#thuisistextsave{
	background-color:#f63;
	border: 1px solid #b63;
}


/*  ANIMATIONS  */

@keyframes reveal {
    0% {opacity:0;width:1px;}
    20% {opacity:1;width:100%;}

	80% {opacity:1;width:100%;}
    100% {opacity:0;width:100%;}
}

@keyframes sideways {
  0%, 100% {
	   
  }
  50% {
	  transform: translate(1rem);   
  }
}
@keyframes pulse {
  0%, 100% {
	   
  }
  50% {
	  transform: scale(.2rem);
  }
}



/*  mobile changes  */

@media only screen and (max-device-width: 640px) {
	.fullscreen [class*='card-']{
		min-height:auto;
	}
	
	video.background-video{
		
		
	}
	
	video.background-video figure{
	
	}

	section.video2,
	section.video4,
	section.video6{
		height:auto;
	}

	section.video2 figure,
	section.video4 figure,
	section.video6 figure{
		top:-13vh;
	}
	/*
	.video1 figure,
	.video3 figure,	
	.video5 figure{
		min-height:50vh;
	}	
	*/
	
	section.video1,
	section.video2,
	section.video3,
	section.video4,
	section.video5,
	section.video6{
		min-height: 75vh;
	}
	
	ul.puzzel li{
		display:block;
		width:100%;
		margin-left:0;
		min-height: 60vh;
		margin-bottom:2rem;
	}
	
	.puzzel li div{padding:2rem}
	
	input#thuisistextinput{
		padding:1rem;
	}
	
	h1{font-size:2.6rem}
	h2{font-size:2.5rem}
	
	input#thuisistextinput {
		border: 1px solid #f63;
	}
	
}

@media only screen and (max-device-width: 375px) {
	ul.puzzel li{
		min-height: 30vh;
	}

	section.video1,
	section.video2,
	section.video3,
	section.video4,
	section.video5,
	section.video6{
		min-height: 55vh;
	}

}