@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap');
@import url("https://use.typekit.net/bek7kdi.css");
:root {
	--accent: #e6ae25;
/* 	--accent: #d7577e; */

	--main: #ffffff;
}

/* overzicht pagina */
/* --------------------------------------------------------------------- */
main{
  padding: 2rem;
	padding-top: 5rem;
  margin-bottom: 5rem;
}

main .popvideo{
  display: inline;
}

main .popimage{
  display: inline;
}
.broadway{
	font-family: 'Broadway', sans-serif;
	font-size: 2.5rem;
	line-height: 3.8rem;
	color: #6463B1;
}

#backbuttonprivacy{
    border-radius: 7rem;
    color: white;
    background-color: #6463b1;
    display: block;
    text-align: left;
    text-decoration: none;
    position: absolute;
    left: 1rem;
    top:5rem;
    width: 3rem;
    height: 3rem;
    font-weight: bold;
    font-size: 1.5rem;
    cursor: pointer;
}
#mainprivacy{
    display: block;  
    max-width: 80vw;
    margin-left: 4rem;
}

#mainprivacy> ul>li{
    margin-top: 0.8rem;
}
#mainprivacy> p{
    margin-top: 0.8rem;
}

#mainprivacy> h3{
    margin-top: 2rem;
    font-size: 1.2rem;
}
#mainprivacy> h4{
    margin-top: 2rem;
     font-weight: bold;
}

#ppms_cm_privacy_settings{
    max-width: 50vw
}

}
.oeftitel{
	margin-bottom: 0rem;
	margin-top: 4rem;
}
main h2{
  margin-top: 5rem;
}

p{
	font-size: 1rem;
}
p .bold{
	font-weight: 800;
}
.displayrange{
	pointer-events: none;
}
.checkvoorhamburger{
	display: none;
}

.checkvoormenu{
	display: none;
}

#mobilehoofdstukken{
	position: absolute;
	top: 50px;
	left: 0;
	width: 100%;
	display: none;
	z-index: 110;
}

.checkvoorhamburger:checked ~ #mobilehoofdstukken{
	display: block;
}

#mobilemenu{
	position: absolute;
	top: 60px;
	right: 0;
	width: 100%;
	display: none;
	z-index: 15;
}

.checkvoormenu:checked ~ #mobilemenu{
	display: block;
}

#mobilemenu a{
	background-color: #6463B1;
	padding: 15px;
	color: white;
	display: block;
	text-align: right;
	text-decoration: none;
}
#mobilemenu a:hover{
	background-color: #7372B9;
}


#mobilehoofdstukken a{
	background-color: #6463B1;
	padding: 15px;
	color: white;
	display: block;
	text-align: left;
	text-decoration: none;
}

#mobilehoofdstukken a:hover{
	background-color: #7372B9;
}

#mobilehoofdstukken ul{
	list-style-type: none;
	margin-left: 0rem;
}


#mobilemenu ul{
	list-style-type: none;
	margin-left: 0rem;
}

.hoofdstukkenmenu-btn{
		position: relative;
	  display: block;
    width: 40px;
    height: 40px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
		transform: scale(0.7);
}

.mainmenu-btn{
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	font-size: 10px;
	text-align: center;
	cursor: pointer;
	transform: scale(0.7);
}

.bar {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 40px;
    height: 2px;
    background: #fff;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
}

.mainmenu-btn .bar{
	background: #6463B1;
	right: 0;
}

.mainmenuitem{
	display: none;
}

.mainmenuitem.login {
	display: block;
	color:#6463b1;
	text-decoration: none;
	padding-top: 10px;
	padding-bottom: 10px;
}
.bar.middle {
    top: 15px;
    opacity: 1;
}


.bar.bottom {
    top: 30px;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
}

.checkvoorhamburger:checked ~ .hoofdstukkenmenu-btn .bar.top, .checkvoormenu:checked ~ .mainmenu-btn .bar.top{
    width: 56px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkvoorhamburger:checked ~ .hoofdstukkenmenu-btn .bar.middle, .checkvoormenu:checked ~ .mainmenu-btn .bar.middle {
    opacity: 0;
}

.checkvoorhamburger:checked ~ .hoofdstukkenmenu-btn .bar.bottom, .checkvoormenu:checked ~ .mainmenu-btn .bar.bottom {
    width: 56px;
    top: 40px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* algemeen*/
/* --------------------------------------------------------------------- */
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
  color: #6463b1;
  line-height: 1.5rem;
	overflow-x: hidden;
}

nav{
  display: flex;
  justify-content: flex-end;
	position: fixed;
	top:0;
	padding: 10px 0;
	width: 100vw;
	border-bottom: 1pt solid #6463b1;
	z-index: 105;
	background-color: white;
}


 .logo{
  position: fixed;
	padding:10px;
	z-index: 112;
	top:0;
}


nav a:hover {
  color:#d29381;
}


footer{
  background-color: black;
  height: 20rem;
}

#popup a{
	color: #91a8d1;
	font-size: 1rem;
}

#popup a:hover{
	font-size: 1rem;
	color: #6463b1;
	font-weight: 400;
}

main a{
	color: #e6ae25;
	font-size: 1rem;
	display: inline;
}

main a:hover{
	font-size: 1rem;
	color: #6463b1;
	font-weight: 400;
}

h2{
  color:#d29381;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  line-height: 2rem;
	font-family: acumin-pro-wide, sans-serif;
	font-weight: 400;
	font-style: normal;
}

h3{
  color: #6463b1;
  font-weight: bold;
  margin: 1rem 0;
}

.vraagkader{
  padding:1rem;
  border: 2pt solid #6463b1;
  margin-bottom: 3rem;
  display: block;
  break-inside: avoid;
  min-height: 5rem;
}

.vraagkader textarea{
	border-radius: 15px;
}
/* scrollbar*/
/* --------------------------------------------------------------------- */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #91A8D1;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #91A8D1;
}
/* lichaamstekeningen*/
/* --------------------------------------------------------------------- */



.pinterest{
  max-width: 1500px;
  margin: 5rem auto;
}

.scrollcontainer{
	height: 30rem;
	position: relative;
	margin-bottom: 1.5rem;
	margin-top: 1.5rem;
}

#tekeningenkader{
	border-radius: 12px;
	padding:1rem;
	max-height:100%;
	overflow:auto;
	border: 2pt solid #91A8D1;
}

.scrollcontainer .pinterest{
	margin: 0 auto;
	column-gap: 1.5rem;
}
.containertekening{
	max-height:100%;
	overflow:auto;
	padding:1rem;
  border: 2pt solid #6463b1;
  margin-bottom: 1.5rem;
  display: block;
  break-inside: avoid;
	min-height: 5rem;
}

.containertekening img{
	width: 100%;
}

/* vragenlijst*/
/* --------------------------------------------------------------------- */
.antwoord{
  padding:1rem;
  border: 1pt solid #91a8d1;
  margin-bottom: 1rem;
  display: block;
  min-height: 2rem;
	border-radius: 15px;
}

/* buttons en lists*/
/* --------------------------------------------------------------------- */
button{
  background-color: white;
  border: none;
  border: 1pt solid #6463b1;
  color: #6463b1;
  font-weight: 500;
  border-radius: 30pt;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
  cursor: pointer;
}

#naaruploader{
	margin-top: 2rem;
}
input[type="submit"]{
  background-color: white;
  border: none;
  border: 1pt solid #6463b1;
  color: #6463b1;
  font-weight: 500;
  border-radius: 30pt;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
  cursor: pointer;
}

ul{
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 3rem;
}

.startminiquiz{
  color: white;
  background-color:#6463b1;
}

}


/* textareas*/
/* --------------------------------------------------------------------- */


textarea:focus{
	outline: none;
	border: 2pt solid #91A8D1;
}
textarea::placeholder{
	color: #6463b1;
	font-family: 'Open Sans', sans-serif;
}

input[type=text], input[type=password], input[type=email], input[type=number]{
	font-family: 'Open Sans', sans-serif;
	width: 50%;
	color: #6463b1;
  padding: 5px;
  display: inline-block;
  border: 1px solid #6463b1;
  border-radius: 4px;
  box-sizing: border-box;
}

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
/*    background-color: white; /* Fallback color if gradients are not supported */
/*    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
/*    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
/*    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
		background-color: white;
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #6463b1;
    border-radius: 4px;
/*    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); */
    color: #6463b1;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
		max-width: 57%;
    padding-top: 6px;
    padding-bottom: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

select:focus{
	outline: none;
	border: 2pt solid #91A8D1;
}


option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus{
	outline: none;
	border: 2pt solid #91A8D1;
}

/* relaties popups*/
/* --------------------------------------------------------------------- */


#formtoekomstidee textarea{
	grid-column: 1/4;
	border: 1pt solid #6463b1;
	margin-top: 3rem;
	font-family: 'Open Sans', sans-serif;
	color: #6463b1;
	border-radius: 4px;
}

#formtoekomstidee textarea:focus{
	outline: none;
	border: 2pt solid #91A8D1;
}


#formtoekomstidee button{
	display: block;
	margin-right: auto;
	grid-column: 1;
}

/* video controls*/
/* --------------------------------------------------------------------- */

video{
  display: block;
  width: 150vh;
  margin: 0 auto;
  border-top: 0;
  border-bottom: 0;
}

#containervideo{
  position: relative;
  width:fit-content;
  display: block;
  margin: 0 auto;
}

#containertimeline{
  position: relative;
  width: 100%;
  width: calc(100% - 40px);
  margin: auto;
	margin-top: 4.5rem;
}

.tijdlijnpunt{
  position: absolute;
  width: 0.6rem;
  height:0.6rem;
  margin-left: -0.3rem;
  border-radius: 20px;
  background-color: white;
  font-size: 0;
  transform: scale(1);
  cursor: pointer;
}



.tijdlijnpunt:hover{
	transform: scale(1.2);
}
/* copied from codepen */
.player-container {
	max-width: 152.8vh;
	margin: auto;
	margin-top: 110.5px;
  border: 2pt solid #e6ae25;
  border-top: 0;
  border-bottom: 0;
}
.player {
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
/*	box-shadow: 0px 10px 0px -3px rgba(0, 0, 0, 0.2); */
	position: relative;
	overflow: hidden;
	background: #000000;
	z-index: 3;
}
.player:fullscreen {
	padding-bottom: 100vh;
}
.player:-webkit-full-screen {
	padding-bottom: 100vh;
}
.player:-moz-full-screen {
	padding-bottom: 100vh;
}
.player:-ms-fullscreen  {
	padding-bottom: 100vh;
}

#video {
	width: 100%;
	height: auto;
	position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.controls {
	padding: 0;
	position: absolute;
	bottom: -148px;
	width: 100%;
	height: 148px;
	box-sizing: border-box;
	background: linear-gradient(
		180deg,
		rgba(100,99,177,0) 0%,
		rgba(100,99,177,1) 100%
	);
	transition: all 0.2s ease-in;
}

.controlsvisible {
	bottom: 0;
	transition: all 0.2s ease-out;
}

.time {
	position: absolute;
	right: 30px;
	bottom: 100%;
	padding-bottom: 14px;
	margin-bottom: -5rem;
}
.progress {
	height: 8px;
	width: calc(100% - 40px);
	background: rgba(60, 60, 60, 0.6);
	margin: auto;
	margin-bottom: -5rem;
	border-radius: 6px;
	position: absolute;
	left: 20px;
	bottom: 100%;
	transition: height 0.1s ease-in-out;
}
.progress:hover {
	height: 10px;
}
.progress-filled {
	background: var(--accent);
	width: 0%;
	height: 100%;
	border-radius: 6px;
	transition: all 0.1s;
}
.controls-main {
	width: calc(100% - 40px);
	margin: auto;
	height: 60%;
	display: flex;
	margin-top: 4.5rem;
	justify-content: space-between;
}
.controls-left,
.controls-right {
	flex: 1;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.controls-left {
	margin-left: 10px;
}
.controls-right {
	margin-right: 10px;
	justify-content: flex-end;
}
.volume {
	display: flex;
	align-items: center;
}
.volume-btn {
	margin-right: 10px;
}
.volume-btn #volume-off, .volume-btn #volume-high {
	opacity: 0;
}
.volume-btn.loud #volume-high{
	opacity: 1;
}
.volume-btn.muted #volume-off {
	opacity: 1;
}
.volume-btn.muted #volume-high, .volume-btn.muted #volume-low {
	opacity: 0;
}
.volume-slider {
	height: 8px;
	width: 80px;
	background: rgba(60, 60, 60, 0.6);;
	border-radius: 6px;
	position: relative;
}
.volume-filled {
	background: var(--main);
	width: 100%;
	height: 100%;
	border-radius: 6px;
	transition: width 0.2s ease-in-out;
}
.volume-filled:hover, .play-btn:hover.play-btn:before, .play-btn:hover.play-btn:after{
	background: var(--accent);
}

.play-btn {
	width: 30px;
	height: 30px;
	position: relative;
	margin: auto;
	transform: rotate(-90deg) scale(0.8);
	transition: -webkit-clip-path 0.3s ease-in 0.1s, shape-inside 0.3s ease-in 0.1s,
		transform 0.8s cubic-bezier(0.85, -0.25, 0.25, 1.425);
}



@-moz-document url-prefix() {
		.play-btn {
				transform: rotate(0deg) scale(0.8);
				background-image: url(../img/pause_button.png);
				background-position: center;
				background-size: 100%;
				background-blend-mode: screen;
		}

		.play-btn.paused {
			  background-image: url(../img/play_button.png);
				background-position: center;
				background-size: 100%;
		}

		.play-btn.play-btn:before, .play-btn.play-btn:after, .play-btn:hover.play-btn:before, .play-btn:hover.play-btn:after{
			background: transparent;
		}

}

.play-btn.paused {
	transform: rotate(0deg);
}
.play-btn:before,
.play-btn:after {
	content: "";
	position: absolute;
	background: white;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: inherit;
}
.play-btn:before {
	-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
	shape-inside: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
}
.play-btn:after {
	-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
	shape-inside: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
}
.play-btn.paused:before {
	-webkit-clip-path: polygon(10% 0, 90% 51%, 90% 51%, 10% 51%);
	shape-inside: polygon(0 0, 100% 51%, 100% 51%, 0 51%);
}
.play-btn.paused:after {
	-webkit-clip-path: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
	shape-inside: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
}
button:focus {
	outline: none;
}
.speed-list {
	list-style: none;
	margin: 0;
	padding: 0;
	/*display: flex;*/

/*	margin-right: 20px;*/
	text-align: center;
}

.speed-list{
	position: absolute;
  margin-top: -16rem;
	background-color: white;
	padding:1rem;
	border-radius: 15px;
	margin-left: -1.2rem;
	border: 2pt solid var(--accent);
	display: none;
	z-index: 50;
}

#showspeed{
	display: none;
}

#speedicon{
	fill:white;
}

  .speed:hover #speedicon{
	fill: var(--accent);
}

#showspeed:checked ~ .speed-list{
	display: block;
}

#showspeed:checked + label #speedicon{
	fill: var(--accent);
}
/*
.speed{
	display: none;
}*/

.speed svg{
	margin-right: 2rem;
  margin-top: 0.5rem;
}
.speed-list li {
	color: var(--accent);
	padding: 5px;
	cursor: default;
}
.speed-list li:hover,
.speed-list li.active {
	color: var(--accent);
	font-weight: bold;
}
.fullscreen {
	display: flex;
	justify-content: center;
}

.time-current{
	color:white;
}

/* tekst kleuren*/
/* --------------------------------------------------------------------- */

.tekstgroen{
  color:#139f7e;
}

.tekstgeel{
  color:#e6ae25;
}

.tekstrood{
  color:#f2582c;
}

.tekstzwart{
  color:black;
}

span.tekstzwart, span.tekstgroen, span.tekstgeel, span.tekstrood{
  font-weight: bold;
}
/* lgbt popups */
/* --------------------------------------------------------------------- */
#uitleggeslacht{
	display: grid;
	grid-template-columns: 2fr 1.5fr;
}

#smartphoneintersekse{
	grid-column: 1/3;
}

#imggeslacht{
  width: 100%;
}

#imggender{
  width:100%;
}


main #uitlegexpressie{
	margin: 0;

}
#uitlegexpressie img{
	width: 70%;
	display: block;
	margin: 0 auto;
}


#taalcontainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#wrapnobabes {
  width: 100%;
  height: 80vh;
  max-height: 560px;
  padding: 0;
  overflow: hidden;
  position:relative;
	display:none;
 }

 #nobabes {
 width: 200%;
 height: 300vw;
 position:absolute;
 top: -8.7rem;
 left:center;
}



  #nobabes {
        -ms-zoom: 0.8;
        -moz-transform: scale(80%);
        -moz-transform-origin: 0 0;
        -o-transform: scale(80%);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(80%);
        -webkit-transform-origin: 0 0;
    }

  #overlaynobabes{
    position: absolute;
    height: 100%;
    width:100%;
    z-index: 99;
  }

  #socialnobabes{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
		width:50%;
		margin-top: 1rem;
		margin-bottom: 1rem;
  }

	a.socialicon{
		width: 4rem;
		height: 4rem;
		display: block;
		background-size: 100%;
	}

	.socialicon:nth-child(1){
		background-image: url(../img/socials-20.jpg);
	}

	.socialicon:nth-child(2){
		background-image: url(../img/socials-19.jpg);
	}

	.socialicon:nth-child(3){
		background-image: url(../img/socials-21.jpg);
	}

	.socialicon:nth-child(4){
		background-image: url(../img/socials-22.jpg);
	}

/* lgbt rainbow cameleon */
/* --------------------------------------------------------------------- */


.arrowright {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid #91a8d1;
  position: absolute;
  left: 70%;
  top:10%;
}



.regenboogcamcontainer img{
  width: 80%;
}


.oefeningcameleon h3{
  margin-top: 2rem;
  position: relative;
}

.oefeningcameleon h3 img{
  position: absolute;
  width:3rem;
  left: 35%;
  top: -0.6rem;
}
#uitlegexpressie{
 width: 100%;
 margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
}



#strikje_icon{
  left: 45%;
}
#gender_icon{
  top: -0.8rem;
  left: 18%;
}

#hart_emo_icon{
  left:55%
}

#hart_seks_icon{
  left:50%
}
.schaalcontainercameleon{
  position:relative;
  width:100%;
}

.schaalcontainercameleon label{
  position: absolute;
  top:0;
  left: 80%;
	font-size: 0.9rem;
}

#formsekse{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

input[type=range] {
  height: 24px;
  -webkit-appearance: none;
  margin-right: 2rem;
  margin-left:0;
  width: 70%;
}

input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 60%;
  height: 7px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #91a8d1;
  border-radius: 14px;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border: 0px solid #FFFFFF;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #B1CDFF;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #6463B1;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #91a8d1;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #91a8d1;
  border-radius: 14px;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border: 0px solid #FFFFFF;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #91A8D1;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #6463B1;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 70%;
  height: 7px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #91a8d1;
  border: 0px solid #FFFFFF;
  border-radius: 28px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #91a8d1;
  border: 0px solid #FFFFFF;
  border-radius: 28px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #91A8D1;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #B1CDFF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #91a8d1;
}
input[type=range]:focus::-ms-fill-upper {
  background: #91a8d1;
}
/* seksquiz */
/* --------------------------------------------------------------------- */



/* plusje voor popup */

/* --------------------------------------------------------------------- */

/* positie*/


.try {
  background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	outline: inherit;
  position: absolute;
  top: 55%;
  left: 48%;
  height: 40px;
  width: 40px;
  background-color: #d29381;
  border-radius: 50%;
  transform: scale(1);
  transition: 0.5s ease-in-out;
  z-index: 10;
}



.min{
  margin: 44% auto 0 auto;
  width: 80%;
  height: 6%;
  background-color: white;
  transition:1s ease;
  transform: translate( 0, -50%);
}

.plus{
  margin: -48% auto 0 auto;
  width: 6%;
  height: 80%;
  background-color: white;
  transition: 1s ease;
}


.try:hover{
  transform: scale(1.2) rotate(0deg);
  background-color: #e6ae25;
}

.rotate:hover{
  transform: scale(1.2) rotate(-45deg);
}

 .rotate{
  transform: scale(1.2) rotate(-45deg);
  background-color: #e6ae25;
  top: 1%;
  left: 90%;
}
/*



/* skip */

/* --------------------------------------------------------------------- */

#containerintro{
  position: relative;
}

#skipintro{
  padding: 1rem 2rem;
  position: absolute;
	background-color: white;
  top: 1%;
  right:2%;
  cursor: pointer;
	color:#6463b1;
	border: 2pt solid #6463b1;
  border-radius: 30px;
  z-index: 12;
	transition: all 0.2s ease-in;
}

.displaycheckbox{
	pointer-events: none;
}

.factoren{
	list-style-type: none;
	list-style-position: inside;
	display: grid;
	grid-template-columns: 0.6fr 10fr;
}

.factoren label{
	grid-column: 2;
}
.factoren input{
	grid-column: 1;
}

.factoren p{
	grid-column: 1/3;
}
.antwoordvlag .factoren{
	grid-row: 3/5;
	grid-column: 2;
	margin-bottom: auto;
}

.factoren li{
	display: inline;
}

#skipintro:hover{
	background-color: rgba(100,99,177,0.5);
	color:white;
}

/* popup */
/* --------------------------------------------------------------------- */


#popup{
  position: relative;
  margin:auto;
	margin-top: 2%;
  background-color: white;
  border: 2pt solid #e6ae25;
  border-radius: 30pt;
	overflow: auto;
	max-height: 65vh;
  max-width: 61%;
  padding: 2rem;
  z-index: 11;
}
/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
	width:100%;
	height:100%;
	position: absolute;
	z-index: 9;
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

}

#popup::-webkit-scrollbar-thumb {
  background: #e6ae25;
  border-radius: 10px;
}

#popup::-webkit-scrollbar {
  width: 0px;
	height: 0px;
}
.popvideo{
  width:100%;
  height: auto;
  border: 2pt solid #e6ae25;
  margin-top: 1.5rem;
}

.popimage{
  width:100%;
  display: block;
  margin: 0 auto;
}
/* NHIE stijlen */

/* --------------------------------------------------------------------- */

.NHIE{
  width:60%;
  height:17rem;
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;
}

.have{
  background-image: url("../img/I_Have.jpg");
}

.not{
  background-image: url("../img/I_Have_Never.jpg");
}

.labelNHIE{
  display: block;
  position: relative;
}

.labelNHIE [type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
.labelNHIE [type=radio] + .NHIE{
  cursor: pointer;
}

/* CHECKED STYLES */
.labelNHIE [type=radio]:checked + .NHIE {
  width:100%;
}

input[type=checkbox]:checked + label .antwoord {
  display: block;
}

.toonantwoorden{
	display: none;
}

 .toonantwoorden + label h3{
	cursor: pointer;
	display: inline;
}
.aantalantw{
	display: inline;
}

.NHIEantwoord {
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 10px;
  width: 100%;
}


.NHIEoverzicht{
  height:20rem;
}
/* vlaggen stijlen */

/* --------------------------------------------------------------------- */

.containerUitlegVlaggen{
  margin-top: 1rem;
}

.containerUitlegVlaggen h3{
  grid-row: 1;
}
.containerUitlegVlaggen ul li{
  font-size: 0.8rem;
  line-height: 1rem;
  margin-bottom: 0.5rem;
}

.vlag {
  height: 16rem;
  width: 70%;
  margin: 0 auto;
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  }

	.antwoordvlag h3:first-child{
	/*	color: #E6AE25;*/
  	font-family: font-family: acumin-pro-wide, sans-serif;
		font-weight: normal;
		font-size: 1.2rem;
	}

	.vraag >h3:nth-child(1){
	/*	color: #E6AE25;*/
  	font-family: font-family: acumin-pro-wide, sans-serif;
		font-weight: normal;
		font-size: 1.2rem;
	}

 .groen{
  background-image: url("../img/groene_vlag.jpg");
 }

 .geel{
  background-image: url("../img/gele_vlag.jpg");
 }

 .rood{
  background-image: url("../img/rode_vlag.jpg");
 }

 .zwart{
  background-image: url("../img/zwarte_vlag.jpg");
 }


.labelvlag{
  display: block;
  position: relative;
}

.labelvlag [type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
.labelvlag [type=radio] + .vlag{
  cursor: pointer;
}

/* CHECKED STYLES */
.labelvlag [type=radio]:checked + .vlag {
  width:100%;
	transform: scale(1.2);
}


.vlaggenantwoord {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 5vw;
  width: 100%;
}

.vlaggenantwoord button{
	grid-column: 1/3;
}
.frametrukje{
  display: none;
}



/* progress bar vlaggen stijlen */

/* --------------------------------------------------------------------- */



.antwoordvlag .vlag{
  width:40%;
  height: 20rem;
  margin: 0;
	grid-column: 1;
}

.antwoordvlag h3:first-child{
  grid-column: 1 / 4;
}



.antwoordvlag button{
  display: block;
  margin-right: auto;
	grid-column: 1;
}

.progressbars{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 5fr 0.5fr;
  gap: 20px;
	grid-column: 3;
  grid-row: span 2 / 5;
  height:25rem;
	border: 1pt solid #E6AE25;
	border-radius: 10px;
	padding: 1rem;
	margin-bottom: 2rem;
}

.progressbars p{
	grid-row: 2;
	text-align: center;
}

.hoeveelgroen{
  background-color: #139f7e;

}

.hoeveelrood{
  background-color: #f2582c;
}
.hoeveelgeel{
  background-color: #e6ae25;
}

.hoeveelzwart{
  background-color: black;
}

.hoeveelgroen, .hoeveelrood, .hoeveelgeel, .hoeveelzwart{
	display: block;
	margin: 0 auto;
  width: 3rem;
  margin-top: auto;
}

/* switch + hoofdstukken stijlen */

/* --------------------------------------------------------------------- */


.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin:0;
	margin-right: 0rem;
}


.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d0dbef;
  border: 1pt solid white;
  -webkit-transition: .4s;
  transition: .4s;
	transform: scale(0.8);
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

 input:checked + .slider {
  background-color: #6463b1;
}

 input:focus + .slider {
  box-shadow: 0 0 1px #6463b1;
}

 input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#klassikaal{
	position: fixed;
	width: 100vw;
	top: 60px;
  background-color: #6463b1;
  padding: 5px  0;
	display: flex;
	z-index: 103;
}

#labelhoofdstukken{
	color: white;
  padding-top: 5px;
	margin-left: 0.5rem;
	font-size: 0.95rem;
}

#labelswitch{
	margin-left: auto;
	color: white;
  padding-top: 5px;
	font-size: 0.95rem;
}

.hoofdstuk{
	display: none;
}

.seksquizvraag, .vraagminiquiz{
 display: grid;
 grid-template-columns: 0.4fr 5fr;
}

.seksquizvraag h3, .vraagminiquiz h3{
	grid-column: 1/3;
}

.seksquizvraag input, .vraagminiquiz input{
	grid-column: 1;
	margin-top: 6px;
	height: 20px;
}

.seksquizvraag p, .vraagminiquiz p{
	grid-column: 1/3;
}


.hiddenc{
 display: none;
}

 #feedbacksq, #feedbackminiquiz{
	font-weight: bold;
}

.seksquizvraag button, .vraagminiquiz button{
	grid-column: 1/3;
	margin-right: auto;
}

.vraagminiquiz a{
	grid-column: 1/3;
}

/* fullscreen */
#mobilehoofdstukken .actief{
 border: 1pt solid white;
 border-left: 0;
 border-right: 0;
 color: white;
 background-color: #7372B9;
}

#labelmainmenu{
	margin-top: 5px;
}

#accountvoorklas:checked ~ .klasaccountselected{
	display: block;
}
.klasaccountselected{
	display: none;
}

#accountvoorschool:checked ~ .schoolaccountselected{
	display: block;
}

.schoolaccountselected{
	display: none;
}

#bestaandaccount:checked ~ .bestaandaccountselected{
	display: block;
}

.bestaandaccountselected{
	display: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


.evaluatiecont p:nth-child(2){
	display: none;
}

.evaluatiecont p:nth-child(3){
text-align: center;
}

#alleevaluaties h3{
	display: none;
}

#alleevaluaties{
	display: grid;
	grid-template-columns: 0.7fr 2fr 0.4fr;
	grid-column-gap: 0.5rem;
}

#ingediendSchema{
	display: grid;
	grid-template-columns: 0.2fr 0.7fr 2fr;
	grid-column: 1/5;
	width: 100%;
}

#mainleerkracht #ingediendSchema p{
	max-width: 100%;
}

#ingediendSchema input[type='checkbox']{
	grid-column: 1;
}

#ingediendSchema input[type='checkbox']:checked + label{
	color: red;
}

 #ingediendSchema input[type='checkbox']:checked ~ #verwijderklassenbutton{
	 color: red;
	 border-color: red;
 }
.evaluatiecont{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column: 3/5;
}

.divider{
	height:2px;
	width: 100%;
	background-color: #6463b1;
	grid-column: 1/4;
	margin: 5px 0;
}

#alleevaluaties h4{
	grid-column: 2;
}

#alleevaluaties h2{
	grid-column: 1/4;
	grid-row: 1;
}

.evaluatiebutton{
	grid-column: 1/4;

}

#backbutton{
	border-radius: 7rem;
	color: white;
	background-color:#6463b1;
	display: block;
	text-align: center;
	text-decoration: none;
	position: absolute;
	top:6rem;
	left: 1rem;
  width: 2rem;
	height:2rem;
	font-weight: bold;
	font-size: 2rem;
}

#maindetail{
	margin-left: 3rem;
	padding-top: 0;
}

.beoordelingschaal{
	margin: 1rem 0 3rem 0;
}

.beoordelingschaal label:nth-child(3){
	text-align: left;
	width: 15%;
	left: 85%
}

.beoordelingschaal label:nth-child(1){

	left:0;
	margin-right: 85%;
	width: 15%;
	text-align: left;
}

.beoordelingschaal input[type=range] {
  margin-right: 2rem;
  margin-left: 20%;
  width: 60%;
}


form p{
	max-width: 100%;
}

.beoordelingschaal input[type=range]::-webkit-slider-runnable-track {
  width: 60%;
  border-radius: 14px;
}

.beoordelingschaal input[type=range]::-moz-range-track {
	width: 100%;
  border-radius: 14px;
}


.beoordelingschaal input[type=range]::-ms-track {
	width: 60%;
  border-radius: 14px;
}

.evaluatie textarea{
	width: 90%;
}

.evaluatie h3{
	margin-top: 4rem;
	margin-bottom: 2rem;
}

.evaluatie label h3{
	margin-bottom: 0.5rem;
}


.abouticon{
	display: block;
	margin: 3rem auto;
	width: 100%;
	max-width: 300px;
}

#logoaboutpagina{
margin: 3rem 0;
width: 100%;
max-width: 300px;
}

#mainleerkracht a{
	color: #6463b1;
}

#mainleerkracht a:hover{
text-decoration: underline;
 color:	#D29391;
}

#mainleerkracht p{
	max-width: 55rem;
}

#schoolpin{
	pointer-events: none;
	width: auto;
}

#showpin{
	margin-left: 1rem;
}

#verwijderklassenbutton{
	margin-top: 2rem;
	grid-column: 1/3;
	display: block;
  margin-right: auto;
}

#klastoevoegencontainer{
	margin-top: 4rem;
}

p.klassenleeg{
	grid-column: 1/5;
}

#vragenoverzichtuitleg{
	margin: 2rem;
	max-width: 50rem;
}

#vragencontainer{
		margin: 0 2rem;
}

input[type='number']#scoreseksquizevaluatie{
	display: inline;
	width:30%;
}

.scoreseksquizevaluatie{
	display: inline;
}

#maakaccountbutton{
  margin-top: -50px;
	margin-left: 75px;
}

#imgbrievenbus{
	width: 20rem;
}
#startuitleg{
	margin-top: 2rem;
	max-width: 40rem;

}


#startuitleg img{
	margin-top: 3rem;
	margin-right: 1rem;
}
#reviews{
	display: none;
}
 #reviewsmobile{
	width: 110%;
	margin-right: 0rem;
	margin-left: -5%;
}
#startillustratie{
	width: 100%;
	margin: 5rem auto 1rem auto;
}
#startuitleg img:nth-child(1){
	margin-top: 1rem;
	margin-bottom: 2rem;
}

#ontstaan img{
	width: 100%;
	max-width: 300px
}

#ontstaan div{
	margin-bottom: 2rem;
}

#kenmerkenproject div{
	margin-bottom: 2rem;
}

#kenmerkenproject{
	margin-bottom: 5rem;
}

#hoofdstukcover{
	background-color: white;
	width:100vw;
	height:105%;
	position:absolute;
	/*overflow-y: scroll;
	overflow-x: hidden;*/
	top:0;
	z-index: 100;
}


#hoofdstukcover img:nth-child(5){
	margin-top: 3.5rem;
	cursor:pointer;
}

#hoofdstukcover img:nth-child(5):hover{
	opacity: 0.9;
	filter: hue-rotate(-15deg);
}

#hoofdstuktitel{
	width: 90vw;
	max-width: 440px;
}

#hoofdstuktiteloef{
	width: 90vw;
	max-width: 440px;
	margin-left: -1.4rem;
	margin-bottom: -4rem;
}

#evaluatietitel{
	width: 90vw;
	max-width: 440px;
	margin-bottom: -4rem;
	margin-top: 5rem;
}
#uitlegswitch{
	position: absolute;
	right:5vw;
	width: 15rem;
	top:7rem;
	font-size: 0.9rem;
}

#hoofdstukcover #uitlegswitch img:nth-child(1){
   float:right;
	 margin-left: 5rem;
}

#uitleghoofdstuk{
	padding-top: 20rem;
	padding-left: 10%;
}
#uitleghoofdstuk img:nth-child(1){
	margin-left: -1.4rem;
}

#uitlegswitch p{
   margin-right: 2rem;
}

#imgfeatured{
	width: 80%;
	margin: 1rem auto;
	display: block;
	border: 1pt solid #D29391;
}

#whoisit{
	width: 80%;
	display: block;
	margin: 1rem auto;
}

#imgcarousel{
	position:relative ;
	margin-top: 0;
}

#lastperson, #nextperson{
	position: absolute;
	width: 2rem;
	top:40%;
	cursor: pointer;
}

#lastperson{
	right: 91%;
	display: none;
}

#nextperson{
	left:91%;
}

#featuring h2{
	margin-top: 3rem;
	margin-left: 10%;
}

#nobabesmobile{
	display: block;
	width: 83vw;
	max-width: 30rem;
}

@media print {
	input[type=range] {
	  -webkit-appearance: auto;
	}

	input[type=range]::-webkit-slider-runnable-track {
		-webkit-appearance: auto;
	  height: 0px;
	}

	input[type=range]::-moz-range-track {
	  height: 0px;
	}

	input[type=range]::-ms-track {
	  height: 0px;
	}

	input[type=range]::-webkit-slider-thumb {
		margin-top: -7px;
	}


}

input.fullbutton{
 color: white;
 background-color:#6463b1;
}

input.fullbutton:hover{
 color: #6463b1;
 background-color: white;
}
textarea{
	width:80%;
	font-family: 'Open Sans', sans-serif;
	color: #6463b1;
	border: 1pt solid #6463b1;
	padding:1rem;
	border-radius: 4px;
}

textarea:focus{
	outline: none;
	border: 2pt solid #91A8D1;
}

#loginscroll{
	text-align: center;
}

.downloadbutton{
	border: 1pt solid #6463b1;
	padding: 0.8rem;
	border-radius: 20pt;
	text-align: center;
}

.downloadbutton:hover{
	border: 2pt solid #6463b1;
}

.downloadbutton img{
	width:50%;
	display: block;
	margin: 0 auto;
}

#downloadfiles{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem;
}

.downloadbutton a{
	font-weight: bold;
	font-size: 1rem;
}

.downloadbutton a:hover{
	font-weight: bold;
	font-size: 1rem;
}

.uitlegpunt{
	display: none;
}
@media only screen and (min-width: 800px) {

	.player-container{
		margin-top: 128px;
	}

	#downloadfiles{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	#uitlegevaluatie{
		grid-column: 1/5;
	}

 .downloadbutton{
	 grid-row: 2;
 }

	#startillustratie{
		margin: 8rem auto 1rem auto;
	}

	#reviews{
		display: block;
		max-width: 45vw;
	}

	#reviewsmobile{
	   display: none;
	}

	#startuitleg img{
		margin-top: 1rem;
	}

	#startuitleg{
		margin-left: 2rem;
	}

	#featuring{
		background-color: rgba(255,255,255,0.8);
		margin-top: 4rem;
		margin-bottom: 4rem;
		padding-bottom: 1rem;
		padding-top: 1rem;
	}

	#featuring h2{
		margin-top: 1rem;
		color: #6463B1;
	}

	#hoofdstukcover{
		background-image: url(../img/actergrond_start_tablet.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		background-position: left;
	}

	.antwoordvlag .vlag{
		width:35%;
	}



	#uitlegswitch{
		top:10rem;
		right:5vw;
	}

	#kenmerkenproject{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 2rem;
		margin-top: 2rem;
		max-width: 60rem;
	}
	#kenmerkenproject img:nth-child(6), #kenmerkenproject div:nth-child(3), #kenmerkenproject div:nth-child(7){
		grid-column: 2;
	}

	#kenmerkenproject img:nth-child(4), #kenmerkenproject img:nth-child(8), #kenmerkenproject div:nth-child(5){
		grid-column: 1;
	}

	#kenmerkenproject img:nth-child(4){
		grid-row: 2;
		margin: 0 auto;
	}

	#kenmerkenproject img:nth-child(8){
		grid-row: 4;
			margin: 0 auto;
	}

	#ontstaan{
		display: grid;
		grid-template-columns: auto 1fr;
		grid-column-gap: 3rem;
		margin-top: 5rem;
	}

	#ontstaan div{
		grid-column: 2;
		grid-row:2;
		max-width: 500px;
	}
	#ontstaan h2{
		grid-column: 1/3;
		margin-bottom: 2rem;
	}
	#ontstaan img{
		grid-column: 1;
	}
	#mobilehoofdstukken{
		position: absolute;
		top: 58px;
	}

		.switch {
			margin: 6px 1rem;
		}

		#voordelenaccount{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-column-gap: 3rem;
			margin-bottom: 5rem;
		}

		#voordelenaccount h3{
			grid-row: 1;
		}

		#voordelenaccount img{
			grid-row: 3;
			max-width: 70%;
			margin: 0 auto;
		}
		.slider{
			transform: scale(1);
		}

		#labelhoofdstukken{
			padding-top: 10px;
			margin-left: 1rem;
			font-size: 0.95rem;
		}

		#labelswitch{
			padding-top: 10px;
			font-size: 0.95rem;
		}
		#klassikaal{
			top:68px;
			padding: 10px  0;
		}

		.speed{
			display: block;
		}

		form p{
			max-width: 80%;
		}

		#cameleon-id-img{
			display: block;
			margin-top: auto;
		}

		main	#nobabes {
			width: 100%;
		 }

		 #backbutton{
			 top:7.3rem;
		 }

		 nav a , nav a.mainmenuitem.login {
		   color:#6463b1;
		   text-decoration: none;
			 padding: 22px 20px;
		   text-align: center;
		 }

			.pinterest{
			  max-width: 1500px;
			  column-count: 2;
			  column-gap: 3rem;
			  margin: 5rem auto;
			}
			#vragencontainer{
				max-width: 1500px;
			  column-count: 2;
			  column-gap: 3rem;
			  margin: 5rem 2rem;
			}

			.scrollcontainer{
				height: 30rem;
				position: relative;
				margin-bottom: 1.5rem;
				margin-top: 1.5rem;
			}

			.evaluatiebutton{
				grid-column: auto;
			}

			#tekeningenkader{
				border-radius: 12px;
				padding:1rem;
				max-height:100%;
				overflow:auto;
				border: 2pt solid #91A8D1;
			}

			.scrollcontainer .pinterest{
				margin: 0 auto;
				column-gap: 1.5rem;
			}
			.containertekening{
				max-height:100%;
				overflow:auto;
				padding:1rem;
			  border: 2pt solid #6463b1;
			  margin-bottom: 1.5rem;
			  display: block;
			  break-inside: avoid;
				min-height: 5rem;
			}

			.containertekening img{
				width: 100%;
			}

			#smartphoneintersekse{
			 grid-column: 1;
			}

			#uitlegexpressie{
			 width: 80%;
			}

			#uitleggeslacht{
				display: grid;
				grid-template-columns: 2fr 1fr;
			}


			#uitlegaantrekking{
				display: grid;
				grid-template-columns: 2fr 1fr;
			}

			.regenboogcamcontainer{
				display: grid;
				grid-template-columns: 1.3fr 2fr;
			}

			.regenboogcamcontainer img{
				width: 100%;
				grid-column: 1;
				grid-row: 1;
			}

			.regenboogcamcontainer div{
			 grid-column: 2;
			}

			.oefeningcameleon h3 img{
			  left: 30%;
			}

			#strikje_icon{
				left: 35%;
			}

			#gender_icon{
				top: -0.8rem;
				left: 16%;
			}

			#hart_emo_icon{
				left:50%
			}

			#hart_seks_icon{
				left:50%
			}

			#imggeslacht{
				width: 100%;
				grid-column: 2;
				grid-row: 1/3;
			}

			#imggender{
				width:80%;
			}

			.antwoordvlag{
				width: 70%;
			}
			.NHIE{
			  width:60%;
			  height:18rem;
			  background-size: 60%;
			}

			.NHIEantwoord{
				width: 55%;
			}

			input[type=text], input[type=number]{
				width: 50%;
			}

			.mainmenuitem{
				display: block;
			}

			#welkom{
				margin-top: 2.3rem;
				margin-bottom: 2.3rem;
			}

			.mainmenu-btn{
				display: none;
			}

			#labelmainmenu{
				display: none;
			}
			nav{
				padding:0px;
			}

			select{
				max-width: 50%;
			}

			#klastoevoegencontainer{
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-column-gap: 3rem;
			}

			#alleevaluaties{
				grid-template-columns: 1fr 1fr 1fr 1fr;
				grid-row: 1/3;
			}

			#ingediendSchema{
				grid-template-columns: 0.2fr 0.8fr 1fr 1fr 1fr;
			}



			#alleevaluaties h3{
				grid-row: 3;
				display: block;
			}

			#alleevaluaties h2{
				grid-column: 1/5;
			}

			.evaluatiebutton{
				grid-row: 2;
			}

			.evaluatiecont p:nth-child(3){
			text-align: left;
			}

			.divider{
				grid-column: 1/6;
				max-width: 100%;
			}

			.evaluatiecont p:nth-child(2){
				display: block;
			}

			.evaluatiecont{
				grid-template-columns: 1fr 1fr 1fr;
				grid-column: 3/6;
			}

			#skipintro{
				font-size: 1.5rem;
				bottom: 2rem;
				top:auto;
			/*	font-family: acumin-pro-wide, sans-serif;*/
				border-radius: 5rem;

			}

			#skipintro.skipbtnup {
				top: auto;
				bottom: 8rem;
				transition: all 0.2s ease-out;
			}

			#popup{
				max-width: 65%;
				max-height: 40vw;
			}

			#imgbrievenbus{
				width: 44%;
				float:right;
				margin-top: -4rem;
			}

			#startmain{
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-column-gap: 5rem;
				margin: 0;
				padding: 0;

			}

			#loginscroll{
				border-left: 2pt solid #91A8D1;
				background-color: #f7faff;
				padding: 0 2rem;
				height: 100vh;
			}

			#loginscroll h2{
				color: #6464AD;
				margin-top: 7.5vw;
			}

			#hoofdstuktitel{
				width: 440px;
			}
           

		@media only screen and (min-width: 1000px) {
             #mainprivacy{
                max-width: 50%;
            }

			#downloadfiles{
				width: 80%;
			}
			.uitlegpunt{
				display: inline;
				font-size: 0.8rem;
				transform: scale(0);
				position: absolute;
				background-color: none;
				transition: all 0.2s ease-in;
				bottom: 1rem;
				margin-left: -5rem;
				width: 9rem;
				text-align: center;
				padding: 0.5rem;
				border: 1pt solid #6463B1;
				border-radius: 10px;
				transform-origin: bottom center;
			}

			.laatsteuitlegpunt{
				margin-left: -10rem;
				transform-origin: bottom right;
			}
			.eersteuitlegpunt{
				margin-left: 0rem;
				transform-origin: bottom left;
			}

			.tijdlijnpunt:hover .uitlegpunt{
				transform: scale(1);
			  font-size: 0.8rem;
				background-color: white;
			}

				@media only screen and (min-width: 1320px) {

					#startillustratie{
						width: 90%;
						display: block;
						margin: 5rem auto 2rem auto;
					}

								body {
								  font-size: 100%;
								  line-height: 1.5rem;
								}

								.hoofdstukcover{
									display: grid;
									grid-template-columns: 0.8fr 1fr;
								}

								#hoofdstukcover{
									background-image: url(../img/actergrond_start.jpg);
								}

								#reviews{
									max-width: 35rem;
								}

								#featuring{
								padding-top: calc(27vh + 101px);
								margin-top: 0rem;
								padding-left: 0vw;
								margin-bottom: 0rem;
								padding-bottom: 0rem;
								background-color:rgba(255,255,255,0);
								width: 43rem
								}

								#wrapnobabes{
									display: block;
								}

								#nobabesmobile{
									display: none;
								}


								#featuring h2{
									margin-top: 0rem;
									color: #D29382;
							   }

								#hoofdstuktiteloef{
									margin-bottom: -2rem;
								}

								#imgcarousel{
									width:43rem;
								}

								#uitleghoofdstuk{
								padding-top: 27vh;
								padding-left: 16vw;
								}

								#uitleghoofdstuk ul{
									margin-top: 1rem;
								}
								#uitleghoofdstuk h3{
									margin-top: 3rem;
								}

								#imgbrievenbus{
									display: none;
								}

								#uitlegswitch{
									right:2vw;
								}





								main h2{
								  margin-top: 2rem;
								}

                                .oeftitel{
                                    margin-top: 5rem;
                                }

								.antwoordvlag .vlag{
									width:70%;
								}

								.antwoordvlag .factoren{
									grid-row-gap: 1rem;
									grid-column-gap: 1rem;
								}

								.try{
									height: 50px;
								  width: 50px;
								}

								.evaluatiebutton{
									max-height: 3rem;
								}
								#popup{
									max-height: 70vh;
									max-width: 70%;
								}

								.hoofdstukkenmenu-btn, #mobielehoofdstukken, #labelhoofdstukken{
									display: none;
								}

								#mainleerkracht{
									grid-column-gap: 7rem;
									grid-template-columns: 3fr 1.2fr;
								}


								#klassikaal p{
								  color: white;
								  padding-top: 10px;
								  margin-left: auto;
								}

								.labelvlag [type=radio]:checked + .vlag {

									transform: scale(1);
								}

								.hoofdstuk{
								 border-radius: 30px;
								 padding: 10px 15px;
								 text-decoration: none;
								 color: #6463b1;
								 margin-right: 2.5rem;
								 background-color: white;
								 font-weight: 500;
								 display: block;
							 }

							 .actief{
							 border: 1pt solid white;
							 color: white;
							 background-color: #7372B9;
							}

							 main{
								 display: grid;
							   grid-template-columns: 1fr 0.7fr;
							   grid-column-gap: 2rem;
							   grid-row-gap: 5rem;
								 overflow-x: hidden;
							 }
							 #nuttigelinks{
							 	grid-column: 2;
								margin-top: 9rem;
							 }

							 h2{
								 max-height: 3rem;
							 }

							 #gebruikerhallo{
								 grid-column: 2;

							 }

							 #imgbrievenbusweb{
								 grid-column: 2;
								 width:40rem;
								 margin-top: auto;
								 margin-top: 10rem;
							 }
							 main > * {
							     grid-column: 1;
							 }

							 #vragenstellenmain{
								 grid-template-columns: 1fr 1fr;
							 }
							 #vragenstellenmain textarea{
								 width:90%;
							 }
							 #vragenstellenmain p{
								 width:90%;
							 }

							 main#startmain #loginscroll{
								 grid-column: 2/3;
								 overflow:scroll;
								 padding-top: 7vh;
								 padding: 2rem;
								 border-left: 2pt solid #91A8D1;
								 background-color: #f7faff;
							 }

							 #loginscroll h2{
				 				margin-top: 4vw;
				 			}




							 #loginscroll p{
								 max-width: 50%;
							 }


							 #startmain{
								 grid-template-columns: 1fr 1fr;
								 padding:0;
								 height: 100vh;
								 margin-bottom: 0;
								 overflow: hidden;
								 grid-row-gap: 3rem;
								 grid-column-gap: 5rem;
							 }

							 #startuitleg{
								 grid-column: 1;
								 margin-top: 7vh;
							 }

							 #startuitleg img:nth-child(1){
							 	margin-top: -1rem;
							 }



							 #klastoevoegencontainer{
				 				margin-top: 0rem;
							}

							 .popimage{
								 width: 80%;
							 }
							 .pinterest{
								 max-width: 1500px;
								 column-count: 3;
								 column-gap: 3rem;
								 margin: 5rem auto;
							 }
							 #vragencontainer{
								 grid-column: 1/3;
								 column-count: 4;
								 width: 100%
							 }

							 #smartphoneintersekse{
							 	grid-column: 1;
							 }

							 #uitlegexpressie{
							  width: 80%;
							 }

							 #uitleggeslacht{
							   display: grid;
							   grid-template-columns: 2fr 1fr;
							 }


							 #uitlegaantrekking{
							   display: grid;
							   grid-template-columns: 2fr 1fr;
							 }

							 .regenboogcamcontainer{
							   display: grid;
							   grid-template-columns: 1.3fr 2fr;
							 }

							 .regenboogcamcontainer img{
								 width: 100%;
								 grid-column: 1;
								 grid-row: 1;
							 }

							 .regenboogcamcontainer div{
								grid-column: 2;
							 }

							 .oefeningcameleon h3 img{
						 	  left: 30%;
						 	}

							 #strikje_icon{
							   left: 35%;
							 }
							 #gender_icon{
							   top: -0.8rem;
							   left: 15%;
							 }

							 #hart_emo_icon{
							   left:60%
							 }

							 #hart_seks_icon{
							   left:55%
							 }

							 #imggeslacht{
							   width: 100%;
								 grid-column: 2;
								 grid-row: 1/3;
							 }

							 #imggender{
							   width:80%;
							 }

							 .antwoordvlag{
							   display:grid;
							   grid-template-columns: 0.8fr 1fr 1fr;
							   grid-template-rows: 0.3fr 0.3fr 0.5fr 2fr 0.1fr;
							   column-gap: 3rem;
								 width:100%
							 }

							 .antwoordvlag p:nth-child(0){
								 grid-column: 1;
							 }

							 .antwoordvlag h3{
								 grid-row: 2;
							 }

							 .antwoordvlag h3:first-child{
							   grid-column: 1 / 4;
								 grid-row: 1;
							/*	 color: #E6AE25;*/
							 }

							 #formtoekomstidee{
							 	display: grid;
							 	grid-template-columns: 1fr 1fr 1fr;
							 }

							 input[type=text]{
				 				width: 50%;
				 			}
							.progressbars{
								margin-bottom: 0;
							}

							#seksthree{
								grid-column: 1/3;
								width: 65%
							}


				 }

			 }
		}

		/* onzichtbaar */

		.onzichtbaar{
		display: none;
		}