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

:root {
  --white: #ffffff;
  --darkblue: #467ca7;
  --red:#c4281a;
  --lightgreen:#45be34;
  --darkgreen:#458734;
}

html{font-size:1.8vw;font-family: "Montserrat-Regular", Verdana, "sans-serif"; padding:0px; margin:0px; height:100%; min-height:100%;}
body{margin:0px; padding:0px; height:100%; min-height:100%;}
header{background-image: none; height:4rem; margin-bottom: 0.5rem;}
body.poll-page header, body.video-page header{margin-bottom:0px;}
body.lesmenu header, body.slideshow-page header, body.quiz-page header{margin-bottom:0px;}
body.regular-page {font-size: 1.4vw;}
main{max-width:unset; width:100%; margin:0px; position:relative; min-height:100%; height:auto;}
div {box-sizing: border-box;}
a {text-decoration: none; color:var(--darkblue);}
a:hover{opacity:0.82;}
h1{color:var(--darkblue); line-height:2; font-size:2rem; margin-top:0px; margin-bottom:0.5rem;}
h1:after{content: ""; display: block; width: 12%; margin: auto; border-bottom: solid 2px var(--red); }
h2{font-size:0.86rem; color:var(--darkblue); font-weight: 400;}
h3{font-size:0.5rem; color:var(--darkblue); font-weight: 400; font-style: italic;}
img{width:100%;padding: 0px; background-color: unset; box-shadow:unset;}
strong{font-weight:bold;}
body.home h1{text-align:center;}
body.lesmenu h1, body.slideshow-page h1, body.quiz-page h1, body.poll-page h1, body.video-page h1{font-size:1.28rem;}
body.lesmenu h1:after, body.quiz-page h1:after, body.slideshow-page h1:after, body.poll-page h1:after, body.video-page h1:after, body.regular-page h1:after {left: 0px; position: absolute; margin-left: 4%;}
body.home h2{text-align:center; max-width:30%; margin-left:auto; margin-right:auto; font-weight: 400; background-color:unset; color:#000000; display:block; margin-top:0.2rem; margin-bottom:0.1rem;}
body.home h3{text-align:center; max-width:30%; margin-left:auto; margin-right:auto; background-color:unset; color:#000000; display:block; margin-top:0px;}
#logo {background-image: url(/assets/images/logo-ts.webp); width: 12%; aspect-ratio: 100 / 50; background-size: contain; background-repeat: no-repeat; position: absolute; left: 4%; top: 0.5rem;}
footer{background-color:var(--darkblue); border-top: 1px solid var(--red); width: 100%; display:inline-block; position:absolute; bottom:0px; left:0px; height:3rem;font-size: 0.5rem; line-height: 3rem; color:#ffffff; text-align: center;}
footer:after {content: ""; display: block; opacity: 0.8; position: absolute; width: 3rem; height: 3rem; right: 1rem;top: -2rem; background-image: url(/assets/images/red-circle.webp);  background-repeat: no-repeat; background-size: contain;}
footer:before {content: ""; display: block; opacity: 1; position: absolute; width: 3rem; height: 3rem; right: 1rem;top: -2rem; background-image: url(/assets/images/red-circle.webp);  background-repeat: no-repeat; background-size: contain; z-index:-1;}
body.lesmenu footer:before {opacity: 0.4; width: 100%; height: 6rem; left: 0px; top: -6rem; background-image: url(/assets/images/banner-bloodcells.webp); background-size: cover; z-index: -2; animation-name: appearOpacity4; animation-duration: 5s; animation-fill-mode: forwards;}
body.home footer:after, body.home footer:before{right: 10rem; animation: Pulsate 15s linear infinite;}

.columns{width:100%; display:flex; margin-top:0.5rem; margin-bottom:0.5rem; position:relative;}
.column{width:45%;}
.column:nth-of-type(2n) {margin-left: 10%;}

body.regular-page .text {column-count: 2;}
.text p {break-before: avoid; break-inside: avoid;}

body.home .column{width:48%; display:inline-block;}
body.home .column:nth-of-type(2n) {margin-left: 2%;}
body.home main .text {width: 40%; margin-left: auto; margin-right: auto; text-align: center; font-size:0.645rem; position:relative;}
body.home main .text:nth-of-type(2n):before{content: ""; display: block; opacity: 1; position: absolute; width: 6rem; height: 6rem; top: 1.5rem; left: -7rem; background-image: url(/assets/images/illu-longembolie.webp); background-repeat: no-repeat; background-size: contain; z-index: -2; animation-name: appearOpacity; animation-duration: 5s; animation-fill-mode: forwards;}
body.home main .text:nth-of-type(2n):after {content: ""; display: block; opacity: 1; position: absolute; width: 5rem; height: 5rem; top: 0.5rem; right: -6rem; background-image: url(/assets/images/illu-trombose.webp); background-repeat: no-repeat; background-size: contain; z-index: -2; animation-name: appearOpacity; animation-duration: 8s; animation-fill-mode: forwards;}

body.home .image-ct:after{content: ""; display: block; opacity: 0.6; position: absolute; width: 4rem; height: 4rem; left: 6rem; bottom: -2rem; background-image: url(/assets/images/red-circle.webp); background-repeat: no-repeat; background-size: contain; animation: Pulsate 12s linear infinite;}
body.home .image-ct:before{content: ""; display: block; opacity: 1; position: absolute; width: 4rem; height: 4rem; left: 6rem; bottom: -2rem; background-image: url(/assets/images/red-circle.webp); background-repeat: no-repeat; background-size: contain; z-index:-1; animation: Pulsate 12s linear infinite;}
.image-ct{position:relative;}

body.home main .column:nth-child(odd) {text-align: right;}
body.lesmenu .column:nth-of-type(2n){background-color: rgba(0, 0, 0, 0.65); padding:0.5rem 1rem; margin-top: -4rem; color: #ffffff; font-size: 0.645rem; height:fit-content;}
body.lesmenu .column:nth-of-type(2n):after {content: ""; display: block; opacity: 0.6; position: absolute; width: 2rem; height: 2rem; right: 1rem; top: -5rem; background-image: url(/assets/images/red-circle.webp); background-repeat: no-repeat; background-size: contain;}
body.lesmenu .column:nth-of-type(2n):before {content: ""; display: block; opacity: 1; position: absolute; width: 2rem; height: 2rem; right: 1rem; top: -5rem; z-index:-1; background-image: url(/assets/images/red-circle.webp); background-repeat: no-repeat; background-size: contain;}

body.lesmenu .column:nth-of-type(2n) h2{color:#ffffff;}
body.home main .text.lessen-home {text-align: left; color:var(--darkblue); font-size:0.58rem; width:22%; line-height:1.5; margin-bottom:1rem;}
.content-container {margin-left: 4%; width: 92%;overflow: auto;	height: 100%; margin-bottom:3rem; display:inline-block;}
body.lesmenu .content-container{overflow:visible;}
body.video-page .content-container, body.poll-page .content-container, body.home .content-container{margin-left: 0px; width: 100%;}
body.video-page .h1-ct{background-image: url("/assets/images/header-back-red.webp"); background-size: cover; background-repeat: no-repeat; aspect-ratio: 1920 / 140; padding-top: 0.5rem;}
body.video-page h1{color:#ffffff; margin-left:4%;}
body.video-page h1:after {border-bottom: solid 2px #ffffff;}
body.video-page .columns{width:92%;}
body.video-page .columns.columns-2 {margin-left:4%;}
body.video-page .text {font-size: 0.8rem;}
body.video-page h2 {font-weight:bold;}
body.video-page .content-container a {width: 100%; display: inline-block; margin-bottom: 0.5rem;}
body.poll-page .h1-ct{background-image: url("/assets/images/header-back-red.webp"); background-size: cover; background-repeat: no-repeat; aspect-ratio: 1920 / 140; padding-top: 0.125rem;}
body.poll-page h1{color:#ffffff; margin-left:4%;}
body.poll-page h1:after {border-bottom: solid 2px #ffffff;}
body.poll-page .columns.columns-2 {margin-left:4%;}

.column .cms6_component_video_embed {position: relative; top: -2rem; width: 18vw; aspect-ratio: 216 / 384;}
.column .cms6_component_video_embed__yt_container{height:100%; position: absolute; width: 100%;}
.column iframe.cms6_component_video_embed__yt_video{height:100%; width:100%;}
.column .cms6_component_video_embed__yt_container:after{content: ""; display: block; opacity:0.8; position:absolute; width:2rem; height: 2rem; right:-1rem; bottom:2rem; background-image: url("/assets/images/red-circle.webp"); background-repeat: no-repeat; background-size: contain;}

.breadcrumbs {font-size: 0.5rem; color: #333333; margin-left: 20vw; font-weight:100; line-height: 6vw;}
.breadcrumbs a{color:#333333; text-decoration: none;}
.breadcrumb::after{content: " | ";}
.breadcrumb:last-of-type {opacity:0.5;}
.breadcrumb:last-of-type::after{content: "";}
button, .button{color: #ffffff; background-color:var(--lightgreen); border:1px solid var(--darkgreen); border-radius:6px; box-shadow: 0.2rem 0.2rem 0.2rem rgba(100,100,100,0.5); padding:0.5rem 1rem; display:inline-block; font-family:inherit; cursor:pointer; font-size: 0.625rem;}
body.regular-page .breadcrumbs {display: none;}

.link{color: #ffffff; background-color:var(--lightgreen); border:1px solid var(--darkgreen); border-radius:6px; box-shadow: 0.2rem 0.2rem 0.2rem rgba(100,100,100,0.5); padding:0.5rem 1rem; display:inline-block;}
.link.lesonderdeel{background-image: url("/assets/images/next-button.webp"); background-repeat: no-repeat; background-size: contain; background-position: right;}
a .link {text-decoration: none; color:#ffffff; font-weight:normal; font-size:0.8rem;}
a .link.lesonderdeel {background-color: #ffffff; display: block; border: solid 2px var(--darkblue); width: 100%; border-radius:0px; margin-bottom:0.5rem; color:var(--darkblue); animation: appear 2s forwards; position:relative;}
a .link.lesonderdeel .link_description{font-size:0.645rem; margin-top:0.2rem; color: #000000; font-weight: normal;}
a .link.lesonderdeel p{margin:0px;}
.link-pdf{position:relative;}
.link-pdf:after{content: ""; display: block; margin-left: 1rem; width: 1.5rem; height: 1.5rem;   background-image: url(/assets/images/icon-pdf.webp); background-repeat: no-repeat; background-size: contain; background-position: right; position: absolute; right: -2.5rem;top: 0.25rem;}

.sponsor {width: 12%; position: absolute; right: 4%; bottom: 0px;}
span.sponsor-text {display: inline-block; width: 60%; font-size: 0.4rem; text-align: right; opacity: 0.5; margin-right: 5%; line-height: 1.1; vertical-align:middle;}
.sponsor img {width: 35%; display: inline-block; vertical-align:middle;}
.copyright {position: absolute;left: 0px; bottom: 0px; width: 100%; z-index: 0;}
footer nav {display: inline-block; position: absolute;  left: 4%; z-index:1; height: 2rem; text-align: left; width: 50%; vertical-align: middle; line-height: 100%; top:0.5rem;}
footer nav a {display: inline-block; width: 100%; color: #ffffff; height: 1rem !important; line-height: 1rem !important;  position: relative;  margin: 0px; padding: 0px;}

@keyframes appear {
	0%   {opacity:0; left:-50%;}	
	100%	{opacity:1; left:0px;}
}
@keyframes appearOpacity {
	0%   {opacity:0; }	
	100%	{opacity:1;}
}
@keyframes appearOpacity4 {
	0%   {opacity:0; }	
	100%	{opacity:0.4;}
}

@keyframes orbit 
{
    from { transform: rotate(0deg) translateX(150px) rotate(0deg) }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg) }
}

@keyframes Pulsate {
  from { opacity: 1; }
  50% { opacity: 0; }
  to { opacity: 1; }
}
@media screen and (max-width: 960px){html{font-size:2vw;}}
@media screen and (max-width: 800px){html{font-size:3vw;}header{height:3rem;}}
@media screen and (max-width: 640px){html{font-size:4vw;}header{height:2rem;}}


@media screen and (max-width: 800px){
	
	body.lesmenu h1, body.slideshow-page h1, body.quiz-page h1, body.poll-page h1, body.video-page h1{position:relative; line-height:1.2; padding-bottom: 0.5rem;}
	
	body.poll-page h1{line-height:2.5;}
	body.lesmenu h1:after, body.quiz-page h1:after, body.slideshow-page h1:after, body.poll-page h1:after, body.video-page h1:after, body.regular-page h1:after{margin-left:0px; bottom:0px;}
	body.home header{height:4rem;}
	body.home main .text:nth-of-type(2n):after, body.home main .text:nth-of-type(2n):before{display:none;}
	body.home main .text{width:80%;}
	body.home main .text.lessen-home{width:50%;}
	body.home .image-ct:before, body.home .image-ct:after{left:1rem;}
	.sponsor {width: 25%;}
	body.home h2{max-width:60%;}
	.columns{display:inline-block;}
	.column{width:100%;}
	body.lesmenu .column:nth-of-type(2n){margin-top:0.5rem; margin-left:0px; margin-bottom: 6rem; position:relative;}
	body.lesmenu .column:nth-of-type(2n):before, body.lesmenu .column:nth-of-type(2n):after{top:-0.5rem;}
	body.regular-page .text {column-count: 1;}
	body.home footer:after, body.home footer:before {right: 2vw;}
	footer:before, footer:after {width: 5vw; height: 5vw; top:-0.75rem;}
	body.home .image-ct:before, body.home .image-ct:after{width: 6vw; height: 6vw; bottom:-0.75rem;}
	
	body.video-page .column:nth-of-type(2n){margin-left:0px;}
	.column .cms6_component_video_embed{margin-top:1rem; top: 0px; width: 40vw; margin-left: auto; margin-right: auto;}	
}