html, body, .slide-animate-container, #slides, #slides .slide {
  width: 100%;
  height: 100%;
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes moveTekst {
  0%   { top: -100%; }
  100% { top: 0; }
}
@keyframes moveFoto {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-45%); }
}
@keyframes moveTweet {
  0%   { transform: translateY(20%); }
  100% { transform: translateY(-100%); }
}
@keyframes moveWeer {
  0%   { transform: translateY(0); height: 25%; opacity: 0; }
  100% { transform: translateY(-45vh); height: 50%; opacity: 1; }
}



html {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #000;
    font-family: -apple-system, 'Helvetica Neue', 'Arial', sans-serif, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans';
    font-size: 1.25vw; /* 480 px breed */
    text-rendering: geometricPrecision;
    line-height: 100%;
    overflow: hidden;
}


p {	 font-size: 1.25vw; font-style: normal;	font-variant: normal; font-weight: normal; }
h1 { font-size: 1.25vw; font-style: normal; font-variant: normal; font-weight: normal; }
h2 { font-size: 1.25vw; font-style: normal; font-variant: normal; font-weight: normal; }
h3 { font-size: 1.25vw; font-style: normal; font-variant: normal; font-weight: normal; }
h4 { font-size: 1.25vw; font-style: normal; font-variant: normal; font-weight: normal; }
h5 { font-size: 1.25vw; font-style: normal; font-variant: normal; font-weight: normal; }
ul { margin: 0; padding: 0; }


.align { 
	display: table-cell; 
	vertical-align: middle; 
}





/* achtergrond foto */
#foto {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: #000;
}
.foto-animate {
    /* animation */
	animation: moveFoto;
	animation-fill-mode: forwards;
	animation-timing-function: linear;	
}
#foto img {
	width: 100%;
	height: 100%;
}
@media screen and (orientation:portrait) {
   /* Portrait styles here */
	#foto {
		width: 221%;
		height: auto;
	}
}




/* header */
#header {
	position: absolute;
	top: 5%;
	left: 3%;
	width: 40%;
	height: auto;
}
.header-animate {
	opacity: 0;
	/* animation */
	animation: fadeIn;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}
#header h1 {
	color: #fff;
	font-size: 360%;
	line-height: 120%;
	text-shadow: 0 0 1em #000;
	padding: 0;
	margin: 2% 0;
	display: block;
}
#header h2 {
	color: #fff;
	font-size: 300%;
	line-height: 120%;
	text-shadow: 0 0 1em #000;
	padding: 0;
	margin: 2% 0;
	display: block;	
}
@media screen and (orientation:portrait) {
   /* Portrait styles here */
   	#header {
		top: 3%;
		left: 5%;
   	}
	#header h1 {
		font-size: 500%;
	}
	#header h2 {
		font-size: 400%;
	}
}




/* footer opbouwen */
#footer {
	position: absolute;
	top: 95%;
	left: 0;
	width: 100%;
	height: 3%;
	background: #fff;
	padding: 1%;
}


#logo {
	position: absolute;
	bottom: 0.6vw;
	left: 89%;
	width: 6%;
	height: auto;
	padding: 1%;
	background: #fff;
	z-index: 9999;
}
#logo img {
	width: 100%;
}
@media screen and (orientation:portrait) {
   /* Portrait styles here */
	#footer .webslogan {
		bottom: 7%;
		left: 5%;
	}
	#footer .logo {
		left: 77%;
		bottom: 1%;
		width: 18%;
	}
	#footer h3 {
		font-size: 200%;
	}
	#footer h4 {
		font-size: 200%;
		margin: 7% 0 0;
	}
}




#slide {
	position: absolute;
	width: 100%;
	height: 100%;
}


/* witte tekst vlak */
#tekst {
	position: absolute;
	top: -100%;
	left: 50%;
	width: 33%;
	min-height: 40%;
	height: auto;
	padding: 5% 3%;
	background-color: #fff;
	border-bottom: 0.5vw solid #fff;
}
.tekst-animate {
	/* animation */
	animation: moveTekst;
	animation-delay: 2s;
	animation-duration: 1s;
   	animation-fill-mode: forwards;
}
#tekst h1 {
	color: #8e8e8e;
	font-size: 240%;
	line-height: 120%;
	padding: 0;
	margin: 2% 0 5%;
	display: block;
}
#tekst p {
	margin: 2% 0;
	display: block;
}
#tekst h1 {
	font-size: 4vw;
	line-height: 100%;
}
#tekst h2 {
	font-size: 3vw;
	line-height: 100%;
}
#tekst h3 {
	font-size: 2.5vw;
	line-height: 100%;
}
#tekst h4 {
	font-size: 2vw;
	line-height: 100%;
}
#tekst p {
	font-size: 150%;
	line-height: 120%;
}
#tekst a {
	color: #009848;
	text-decoration: none;
}
#tekst ul {
	line-height: 120%;
	margin: 0 8%;
	padding: 0;
	
}
@media screen and (orientation:portrait) {
   /* Portrait styles here */
	#tekst {
		position: absolute;
		top: 75%;
		left: 5%;
		width: 70%;
		height: 15%;
		padding: 0;
		background-color: #fff;
	}
	#tekst h1 {
		font-size: 350%;
	}
	#tekst p {
		font-size: 200%;
		line-height: 140%;
	}
}






/* openingstijden sjaboon */
#openingstijden {
	position: absolute;
	width: 100%;
	height: 100%;
}
#tijden {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 101%;
	padding: 0 0 5%;
	background: #fff;
	display: table;
}
#openingstijden #footer {
	background: none;
}

#tijden li {
	float:left;
	list-style: none;
	width: 80%;
	margin: 1% 10% 0 10%;
	padding: 0 0 2% 0;
	line-height: 50%;
	
	opacity: 0;
	/* animation */
	animation: fadeIn;
	animation-duration: 1s;
   	animation-fill-mode: forwards;
}	
#tijden li:nth-child(2n) {
	margin-top: 2%;
	font-size: 200%;
	text-align: right;
	border-bottom: 1px solid #999;
}
#tijden li:nth-child(2n + 1) {
	font-size: 140%;
	font-family: Arial, Sans-Serif;
}
#tijden li:nth-child(1), #tijden li:nth-child(2){
	animation-delay: 0.5s;
}
#tijden li:nth-child(3), #tijden li:nth-child(4){
	animation-delay: 0.7s;
}
#tijden li:nth-child(5), #tijden li:nth-child(6){
	animation-delay: 0.9s;
}
#tijden li:nth-child(7), #tijden li:nth-child(8){
	animation-delay: 1.1s;
}
#tijden li:nth-child(9), #tijden li:nth-child(10){
	animation-delay: 1.3s;
}
#tijden li:nth-child(11), #tijden li:nth-child(12){
	animation-delay: 1.5s;
}
#tijden li:nth-child(13), #tijden li:nth-child(14) {
	animation-delay: 1.7s;
}
@media screen and (orientation:portrait) {
   /* Portrait styles here */
	#tijden {
		position: absolute;
		top: 40%;
		left: 0;
		width: 100%;
		height: 55%;
		background: #fff;
		font-size: 180%;
		display: table;
	}
	#tijden li {
		margin: 3% 10% 0 10%;
		padding: 0 0 2% 0;
	}
	#openingstijden #foto {
		width: 150%;
		height: auto;
	}
	#openingstijden .logo img {
		width: 50%;
		float: right;
	}
}




/* twitter sjabloon */
#twitter {
	position: absolute;
	top: 0;
	left: 0;
	width: 96%;
	height: 100%;
	padding: 0 2%;
}
.twitter-animate {
	animation: moveTweet;
   	animation-fill-mode: forwards;
	animation-timing-function: linear;	
}
#twitter #header {
	position: absolute;
	top: 20%;
	right: 3%;
	width: 94%;
	height: auto;
}
#twitter #header h1 {
	text-align: right;
	padding: 0 0 0 50%
}
#twitter #footer {
	background: none;
}
#twitter #foto img {
	opacity: 0.7;
}
.tweet {
	position:relative;
	float: left;
	width: 30%;
	padding: 2%;
	margin: 2%;
	color: #000;
	background: #fff; 
}
.tweet img.profile {
	width: 15%;
	float: left;
	margin: 0;
}
.twittermedia {
	width: 80%;
	max-height: 25vh;
	margin: 0 0 0 20%;
	overflow: hidden;
}
.tweet img.media {
	width: 100%;
	float: left;
	margin: 1% 0 3%;
}
.tweet p {
	font-size: 120%;
	line-height: 120%;
	padding: 0;
	margin: 0 0 0 20%;
}
.tweet hr {
	border-top: 1px solid #999;
	border-bottom: none;
}
.tweet small {
	font-size: 80%;
	float: right;
	color: #666;
}
.tweet:nth-child(n) {
	transform: scale(0.9);
	margin: 3% 6% 3% 5%;
}
.tweet:nth-child(2n) {
	transform: scale(1.1);
	margin: 9% 3% 3% 15%;
}
.tweet:nth-child(3n) {
	transform: scale(0.7);
	margin: 0 10% 4% 15%;
}
.tweet:nth-child(4n) {
	transform: scale(0.9);
	margin: 0 15% 3% 55%;
}
.tweet:nth-child(5n) {
	transform: scale(1.1);
	margin: 0 1% 0;
}
.tweet:nth-child(6n) {
	transform: scale(1.1);
	margin: 3% 15%;
}
.tweet:after {
  content: "";
  position: absolute;
  bottom: -2.9em; /* value = - border-top-width - border-bottom-width */
  border-width: 3em 0 0 3em; /* vary these values to change the angle of the vertex */
  left: 50px; /* controls horizontal position */
  border-style: solid;
  border-color: #fff transparent;
  display: block;
  width: 0;
}
@media screen and (orientation:portrait) {
	/* Portrait styles here */
	#twitter {
		z-index: 2;
	}
	#twitter #header {
		top: 71%;
		left: 5%;
		width: 70%;
		font-size: 150%;
		z-index: 9999;
	}
	#twitter #header h1 {
		text-align: left;
		text-shadow: none;
		color: #000;
		padding: 0;
		margin: 0;
	}
	#twitter #footer {
		background: #fff;
		z-index: 3;
	}
	.tweet {
		width: 45%;
	}
}





/* nieuws sjabloon */
#nu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
}
#nu #blend {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	/* animation */
	animation: fadeIn;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-delay: 3s;
}
#nu #pre {
	position: absolute;
	top: 16.7%;
	left: 31.25%;
	width: 37.5%;
	height: 66.6%;
	background: #fff;
	border-radius: 50%;
	text-align: center;
	/* animation */
	animation: fadeOut;
	animation-duration: 1s;
   	animation-fill-mode: forwards;
   	animation-delay: 3s;
}
#nu #logo {
	/* animation */
	animation: fadeOut;
	animation-duration: 1s;
   	animation-fill-mode: forwards;
   	animation-delay: 3s;
}
#nu #pre h1 {
	width: 80%;
	color: #000;
	font-size: 400%;
	line-height: 120%;
	margin: 15% 10% 0;
}
#nu #pre h2 {
	width: 80%;
	color: #000;
	font-size: 350%;
	line-height: 120%;
	margin: 0 10% 0;
}
#nu #pre img {
	width: 40%;
}


#nu .item {
	list-style: none;
	position: relative;
	float: left;
	width: 27%;
	margin: 8.5% 0 0 4.5%;
	background: #fff;
	opacity: 0;
	/* animation */
	animation: fadeIn;
	animation-duration: 1s;
   	animation-fill-mode: forwards;
}
#nu .item .foto {
	width: 100%;
	height: 17vw;
	background-size: 100% 177%;
	background-position: 0 50%;	
}
#nu .item h1 {
	font-size: 140%;
	line-height: 120%;
	height: 6vw;
	padding: 0;
	margin: 7%;
	display: block;
}
#nu .item p {
	font-size: 110%;
	line-height: 120%;
	height: auto;
	margin: 7%;
}
#nu #footer {
	background: none;
}

#nu li.item:nth-child(1){
	animation-delay: 3.5s;
}
#nu li.item:nth-child(2){
	animation-delay: 4s;
}
#nu li.item:nth-child(3){
	animation-delay: 4.5s;
}
#nu li.item:nth-child(1n+4) {
	display: none;
}
@media screen and (orientation:portrait) {
   /* Portrait styles here */
	#nu #blend {
		background: rgba(0,0,0,0.7);
	}
	#nu #foto {
		height: auto;
		width: 320%;
	}
	#nu #pre {
		position: absolute;
		top: 30%;
		left: 16.7%;
		width: 66.6%;
		height: 37.5%;
		font-size: 180%;
	}
	#nu #footer {
		background: #fff;
		z-index: 9999;
	}
	#nu .item {
		list-style: none;
		position: relative;
		float: left;
		width: 86%;
		margin: 7% 0 0 7%;
		background: #fff;
		font-size: 200%;
		opacity: 0;
		/* animation */
		animation: fadeIn;
		animation-duration: 1s;
	   	animation-fill-mode: forwards;
	}
	#nu .item .foto {
		width: 100%;
		height: 20vw;
		background-size: 100% auto;	
	}
	#nu .item h1 {
		font-size: 140%;
		line-height: 120%;
		height: 3vw;
		padding: 0;
		margin: 7%;
		display: block;
	}
	#nu .item p {
		font-size: 110%;
		line-height: 120%;
		height: 7vw;
		margin: 7%;
	}
}





/* regionaal nieuws sjaboon */
#regionieuws #header {
	width: 30%;
}
#regionieuws #footer {
	background: none;
}

#regio {
	position: absolute;
	top: 0;
	left: 35%;
	width: 65%;
	height: 100%;
	padding: 3% 0 5%;
	background: #fff;
	display: table;
}
#bron {
	position: absolute;
	top: 3%;
	right: 3%;
	width: 60%;
	color: #999;
	text-align: right;
}
#regio li {
	float:left;
	list-style: none;
	width: 80%;
	margin: 4% 10% 0;
	padding: 0 0 4%;
	opacity: 0;
	/* animation */
	animation: fadeIn;
	animation-duration: 1s;
   	animation-fill-mode: forwards;
}	
#regio h1 {
	font-size: 140%;
	line-height: 120%;
	margin: 0 0 1%;
}
#regio p {
	font-size: 110%;
	line-height: 120%;
	margin: 0;
}
#regio img {
	display: none;
}
#regio a {
	color: #000;
}
#regio li:nth-child(1) {
	border-bottom: 1px solid #999;
	animation-delay: 0.5s;
}
#regio li:nth-child(2) {
	border-bottom: 1px solid #999;
	animation-delay: 0.7s;
}
#regio li:nth-child(3) {
	border-bottom: 1px solid #999;
	animation-delay: 0.9s;
}
#regio li:nth-child(4) {
	animation-delay: 1.1s;
}
#regio li:nth-child(n+5) {
	display: none;
}
@media screen and (orientation:portrait) {
   /* Portrait styles here */
	#regio {
		position: absolute;
		top: 40%;
		left: 0;
		width: 100%;
		height: 55%;
		background: #fff;
		font-size: 180%;
		display: table;
	}
	#bron {
		position: absolute;
		top: 43%;
		right: 5%;
		width: 60%;
		color: #999;
		font-size: 180%;
		text-align: right;
	}
	#regionieuws #foto {
		width: 150%;
		height: auto;
	}
	#regionieuws .logo img {
		width: 50%;
		float: right;
	}
}



/* agenda sjabloon */
#agenda {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#agenda #header {
	width: 94%;
	top: 0;
}
#agenda #header h1 {
	text-align: center;
}
#agenda #footer {
	background: none;
}
#agenda #items {
	position: absolute;
	top: 15%;
	left: 15%;
	width: 70%;
	height: auto;
	display: table;
}
#agenda .item {
	width: 100%;
	background: #fff;
	border-top: 1px solid #999;
	opacity: 0;
	/* animation */
	animation: fadeIn;
	animation-duration: 1s;
   	animation-fill-mode: forwards;
}
#agenda #items li {
	list-style: none;
	margin: 0;
	padding: 4% 3%;
	vertical-align: top;
	display: inline-block;
}
#agenda #items li:nth-child(3n + 1) {
	width: 10%;
	font-size: 130%;
	text-align: center;	
} 
#agenda #items li:nth-child(3n + 1) .enddate {
	line-height: 100%;	
} 
#agenda #items li:nth-child(3n + 2) {
	width: 50%;
	font-size: 180%;
} 
#agenda #items li:nth-child(3n) {
	width: 20%;	
} 
#agenda .item:nth-child(1) {
	animation-delay: 1s;
}
#agenda .item:nth-child(2) {
	animation-delay: 1.3s;
}
#agenda .item:nth-child(3) {
	animation-delay: 1.6s;
}
#agenda .item:nth-child(4) {
	animation-delay: 1.9s;
}
#agenda .item:nth-child(n+5) {
	display: none;
}
@media screen and (orientation:portrait) {
   /* Portrait styles here */
	#agenda #header {
		width: 94%;
		top: 5%;
		font-size: 150%;
	}
	#agenda #foto {
		width: 330%;
		height: auto;
	}
	#agenda #items {
		position: absolute;
		top: 20%;
		left: 10%;
		width: 80%;
		height: auto;
		font-size: 180%;
		line-height: 180%;
		display: table;
	}
	#agenda #items li {
		padding: 7% 3%;
	}
	
}








/* weer sjabloon */
#weer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#weer #header {
	position: absolute;
	top: 5%;
	left: 3%;
	width: 94%;
	height: auto;
}
#weer #header h2 {
	font-size: 200%;
	margin: -2% 0;
}
#weer .header-animate {
	opacity: 0;
	/* animation 
	animation: fadeIn;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-delay: 7s;
	*/
}
@media screen and (orientation:portrait) {
   /* Portrait styles here */
	#weer #header {
		top: 3%;
		left: 5%;
	}
	#weer .header-animate {
		opacity: 0;
		/* animation 
		animation: fadeIn;
		animation-duration: 2s;
		animation-fill-mode: forwards;
		animation-delay: 0;
		*/
	}
	#weer #foto {
		width: 180%;
		height: auto;
	}
}



#weer #footer {
	top: 75%;
	height: 25%;
	opacity: 0;
}
.weerfooter-animate {
	/*
	animation: moveWeer;
   	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	animation-delay: 6s;
	animation-timing-function: linear;	
	*/
}
@media screen and (orientation:portrait) {
   /* Portrait styles here */
	#weer #footer {
		top: 55%;
		height: 45%;
	}
	.weerfooter-animate {
		animation: none;
	}
}



#vandaag {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 90%;
	padding: 5% 25%;
	background: rgba(255,255,255,0.7);
}
.vandaag-animate {
	/* animation 
	animation: fadeOut;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 6s;
	*/
}
#vandaag h1 {
	font-size: 500%;
}
#vandaag p {
	font-size: 200%;
	margin: 2%;
	line-height: 100%;
}
#vandaag li {
	display: inline-block;
	width: 40%;
	height: 12vw;
	list-style: none;
	text-align: center;
	background-color: #999;
	color: #fff;
	padding: 0 2% 1%;
	margin: 2%;
}
@media screen and (orientation:portrait) {
   /* Portrait styles here */
	#vandaag {
		position: absolute;
		top: 15%;
		left: 15%;
		width: 60%;
		height: auto;
		padding: 5%;
		background: rgba(255,255,255,1);
	}
	.vandaag-animate {
		/* animation */
		animation: none;
	}
}




#voorspelling {
	position: absolute;
	top: 35%;
	left: 10%;
	width: 70%;
	height: auto;
	opacity: 0;
	/* animation */
	animation: fadeIn;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-delay: 7.5s;
}
#voorspelling table {
	width: 100%;
}
#voorspelling td {
	width: 15%;
	vertical-align: middle;
	font-size: 240%; 
	text-align: center;
	color: #000;
	background: #999;
	padding: 4% 3%;
	border-right: 0.5em solid transparent;
}
#voorspelling td:nth-child(1) {
	width: 25%;
	font-size: 140%; 
	text-align: left;
	color: #000;
	background: none;
}
#voorspelling tr:nth-child(1) td {
	font-size: 140%; 
	color: #000;
	background: none;
	padding: 2% 3%;
	text-transform: capitalize;
}
@media screen and (orientation:portrait) {
   /* Portrait styles here */
	#voorspelling {
		top: 60%;
		left: 1%;
		width: 80%;
		font-size: 180%;
		animation-delay: 2.5s;
	}
	#voorspelling td {
		padding: 6% 3%;
		border-right: 0.15em solid transparent;
	}
}

#vandaag.vandaag-animate {
	/* animation weer edit */
	animation: none !important;
}


div.tweetbeam {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}