.fragment.blur {
    filter: blur(5px);
}
.fragment.blur.visible {
    filter: none;
}

.fragment.transparent {
	opacity: 0.0;
}

.fragment.transparent.visible {
	opacity: 1.0;
}

/*-----*/
.club-logo{
	background: #ffffff;
	border-radius: 10px;
	padding:20px 20px 10px 20px;
}

img.club-logo-vertical{
	height: 250px;
	width: auto;
}

img.club-logo-horizontal{
	width: 500px;
	height: auto;
}


.pentagon {
	position: relative;
	/*clip-path: polygon( 50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
	-webkit-clip-path: polygon(33% 0, 66% 0, 100% 50%, 50% 100%, 0 50%);
	clip-path: polygon(33% 0, 66% 0, 100% 50%, 50% 100%, 0 50%);*/
	clip-path: polygon( 59.79% 96.709%,93.124% 71.678%,93.124% 71.678%,94.775% 70.262%,96.214% 68.668%,97.433% 66.919%,98.426% 65.039%,99.184% 63.054%,99.699% 60.987%,99.964% 58.863%,99.972% 56.707%,99.714% 54.542%,99.183% 52.393%,86.456% 11.909%,86.456% 11.909%,85.665% 9.85%,84.644% 7.944%,83.413% 6.205%,81.992% 4.649%,80.402% 3.292%,78.662% 2.147%,76.792% 1.23%,74.813% 0.557%,72.745% 0.142%,70.608% 0%,29.392% 0%,29.392% 0%,27.254% 0.142%,25.185% 0.557%,23.206% 1.23%,21.337% 2.147%,19.597% 3.292%,18.007% 4.649%,16.586% 6.205%,15.356% 7.944%,14.335% 9.85%,13.544% 11.909%,0.817% 52.393%,0.817% 52.393%,0.286% 54.542%,0.028% 56.707%,0.036% 58.864%,0.301% 60.988%,0.816% 63.055%,1.574% 65.041%,2.567% 66.92%,3.786% 68.669%,5.225% 70.263%,6.876% 71.678%,40.21% 96.709%,40.21% 96.709%,42.02% 97.893%,43.928% 98.814%,45.911% 99.472%,47.944% 99.867%,50.001% 99.998%,52.059% 99.867%,54.091% 99.472%,56.074% 98.814%,57.983% 97.893%,59.792% 96.709%,59.79% 96.709% ); 
	margin: 5px;
	width: 200px;
	height: 300px;
}

.pentagon .label{
	width: 100%;
	position: absolute;
	top: 55px;
	font-size: 0.4em;
	color: #ffffff;
}

.pentagon .label.small{
	top: 58px;
	font-size: 0.3em;
}

.pentagon .label.bestuurders{
	top: 25px;
}

.pentagon .label.bestuurders.small{
	top: 30px;
	font-size: 0.3em;
}

.pentagon .stats{
	width: 100%;
	position: absolute;
	top: 60px;
	font-family: Klub KNVB07 Bold, Helvetica, sans-serif;
	/*font-family: Klub KNVB11 Medium, Helvetica, sans-serif;*/
	font-size: 2.3em;
	color: #ffffff !important;
}

.pentagon .stats.small{
	top: 75px;
	font-size: 1.75em;
}

.pentagon .stats.bottom{
	top: 85px !important;
}

.pentagon .stats .perc{
	font-family: Klub KNVB02 Black, Helvetica, sans-serif;
	/*font-size: 0.5em;*/
}

.pentagon .icon{
	width: 100%;
	position: absolute;
	top: 0px;
}

.pentagon .icon img{
	height: 25px;
}

.pentagon .icon.small img{
	height: 21px;
	padding: 2px 0;
}

img.teletekst-img{
	width: 600px;
	padding-bottom: 20px;
}

img.share-img{
	width: 500px;
	padding-bottom: 20px;
}

/* mute */
.mute-button {
	background-color: rgba(0, 0, 0, 0.4);
	border: none;
	border-radius: 0px;
	padding: 10px 8px;
	cursor: pointer;
	position: fixed;
	left: 30px;
	top: 30px;
	z-index: 1000;
	transition: background-color 0.3s;
}

.mute-button:hover {
	background-color: rgba(0, 0, 0, 0.9);
}

.mute-button i {
	color: white;
	font-size: 18px;
}


@media only screen and (max-width: 600px) {
	.club-logo{
		border-radius: 20px;
		padding:40px 40px 20px 40px;
	}
	
	img.club-logo-vertical{
		height: 450px;
	}
	img.club-logo-horizontal{
		width: 600px;
	}
	
	.pentagon{
		margin: 0 20px 20px 0;
	}
	
	.pentagon .icon{
		display: none;
	}
	
	.pentagon .label{
		top: 56px;
		font-size: 0.45em;
	}
	
	.pentagon .label.bestuurders{
		top: 23px;
		font-size: 0.45em;
	}
	
	.pentagon .label.small{
		top: 35px !important;
		font-size: 0.35em !important;
	}
	
	.pentagon .stats{
		top: 75px;
		font-size: 2.3em;
	}
	
	.pentagon .stats.small{
		top: 90px;
		font-size: 1.9em;
	}
	
	.pentagon .stats.bottom{
		top: 100px !important;
	}

	.pentagon .emblem{
		bottom: 25px;
	}

	.pentagon .emblem img{
		height: 60px;
	}
	
	#section-mobile{
		top: -120px !important;
	}
	
	img.teletekst-img,
	img.share-img{
		width: 100%;
	}
	
	#section-teletekst,
	#section-share{
		top: -120px !important;
	}
}

/* snow animation */
.snow {
	background-image: 
		url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.3%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st1' cx='5' cy='8' r='1'/%3E%3Ccircle class='st1' cx='38' cy='3' r='1'/%3E%3Ccircle class='st1' cx='12' cy='4' r='1'/%3E%3Ccircle class='st1' cx='16' cy='16' r='1'/%3E%3Ccircle class='st1' cx='47' cy='46' r='1'/%3E%3Ccircle class='st1' cx='32' cy='10' r='1'/%3E%3Ccircle class='st1' cx='3' cy='46' r='1'/%3E%3Ccircle class='st1' cx='45' cy='13' r='1'/%3E%3Ccircle class='st1' cx='10' cy='28' r='1'/%3E%3Ccircle class='st1' cx='22' cy='35' r='1'/%3E%3Ccircle class='st1' cx='3' cy='21' r='1'/%3E%3Ccircle class='st1' cx='26' cy='20' r='1'/%3E%3Ccircle class='st1' cx='30' cy='45' r='1'/%3E%3Ccircle class='st1' cx='15' cy='45' r='1'/%3E%3Ccircle class='st1' cx='34' cy='36' r='1'/%3E%3Ccircle class='st1' cx='41' cy='32' r='1'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.7%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st3' cx='4' cy='14' r='1'/%3E%3Ccircle class='st3' cx='43' cy='3' r='1'/%3E%3Ccircle class='st3' cx='31' cy='30' r='2'/%3E%3Ccircle class='st3' cx='19' cy='23' r='1'/%3E%3Ccircle class='st3' cx='37' cy='22' r='1'/%3E%3Ccircle class='st3' cx='43' cy='16' r='1'/%3E%3Ccircle class='st3' cx='8' cy='45' r='1'/%3E%3Ccircle class='st3' cx='29' cy='39' r='1'/%3E%3Ccircle class='st3' cx='13' cy='37' r='1'/%3E%3Ccircle class='st3' cx='47' cy='32' r='1'/%3E%3Ccircle class='st3' cx='15' cy='4' r='2'/%3E%3Ccircle class='st3' cx='9' cy='27' r='1'/%3E%3Ccircle class='st3' cx='30' cy='9' r='1'/%3E%3Ccircle class='st3' cx='25' cy='15' r='1'/%3E%3Ccircle class='st3' cx='21' cy='45' r='2'/%3E%3Ccircle class='st3' cx='42' cy='45' r='1'/%3E%3C/svg%3E");
	animation: animatedSnow 5s linear infinite;
	background-position: 0 0, 0 0;
	background-repeat: repeat, repeat;
	background-size: 450px 450px;
}

@keyframes animatedSnow {
	0% { background-position: 0 0; }
	100% { background-position: 0 300px; }
}

/* confetti animation */
.confetti {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Ccircle cx='30' cy='20' r='3' fill='%23f3722c'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 30 20' to='360 30 20' dur='4s' repeatCount='indefinite' /%3E%3C/circle%3E%3Crect x='10' y='10' width='6' height='6' fill='%23f94144'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 13 13' to='360 13 13' dur='6s' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='50' y='40' width='4' height='12' fill='%23f9c74f' transform='rotate(20 52 46)' /%3E%3Ccircle cx='80' cy='15' r='2.5' fill='%2390be6d'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 80 15' to='360 80 15' dur='5s' repeatCount='indefinite' /%3E%3C/circle%3E%3Crect x='100' y='70' width='6' height='6' fill='%23577590' /%3E%3Ccircle cx='120' cy='35' r='3.5' fill='%23277da1' /%3E%3Crect x='25' y='80' width='3' height='9' fill='%23f9844a' transform='rotate(-15 26 84.5)' /%3E%3C/svg%3E");
	animation: animatedConfetti 5s linear infinite;
	background-position: 0 0, 0 0;
	background-repeat: repeat, repeat;
	background-size: 450px 450px;
}

@keyframes animatedConfetti {
	0% { background-position: 0 0; }
	100% { background-position: 0 300px; }
}