@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=block);
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');

html, bodt {
    overflow: hidden;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    text-align: center;
    width: 100%;
    height: 100%;
}

.kader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    padding-bottom: 50px;
}

img {
    width: clamp(25rem, 55vw, 55rem);
    cursor: pointer;
}

a {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	text-decoration: none;
	color: rgba(112, 30, 30, 0.8);
}

a:visited { color: rgba(112, 30, 30, 0.8); }

a:hover {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	color: rgba(0, 0, 0, 0.8);
	text-decoration: none;
}

a:focus,
a:active {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	color: rgba(0, 0, 0, 0.8);
}

#infopaneel {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
   /*display: block;*/
   background: rgba(255, 255, 255, 0.95);
   z-index: 100;
   min-height: 100vh;
   min-width: 100vw;
   visibility: hidden;
   opacity: 0;
   transition: visibility 1s, opacity 1s ease-in-out;
   -moz-transition: visibility 1s, opacity 1s ease-in-out;
   -webkit-transition: visibility 1s, opacity 1s ease-in-out;
   font-family: 'Lato', Arial, sans-serif;
   font-weight: 300;
   color: #fff;
   cursor: pointer;
   text-align: center;
}
.tekst {
    /*display: block;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    /*position: relative;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);*/
    line-height: 1.5;
    width: 85%;
    font-size: clamp(0.75rem, 1.25vw, 1.25rem);
    /*font-size: 20px;*/
    color: rgba(0, 0, 0, 1);
}
.titelinfo {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    /*font-size: 40px;*/
    font-weight: 400;
    color: rgba(46, 154, 161, 1);
}
.tussentitel {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: rgba(112, 30, 30, 0.9);
}
.pijltjelink { color: rgba(151, 192, 14, 1); }

.ondertekenen {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 1.7vw, 1.7rem);
    color: rgba(175, 202, 11, 1);
    padding-bottom: 70px;
}

.lijntje {
	margin: 0 auto;
    width: 100px;
	border-style: solid;
    border-width: 3px 0px 0px 0px;
	/*border-color: rgba(112, 189, 149, 1);*/
    border-color: rgba(206, 108, 51);
}

@media(hover: none) {
    img {
        width: clamp(20rem, 55vw, 55rem);
    }
}

@media(hover: none) and (orientation: landscape) {
    img {
        width: clamp(25rem, 55vw, 55rem);
    }
    .kader {
        padding-bottom: 0px;
    }
}