* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
	--veld-maat:3.5vw;
	--lijn-maat:.4vw;
	--lijn-style:solid var(--lijn-maat) white;
}

body,
html {
    width: 100%;
    height: 100%;
}

body {
    background: #ccffcc;
}


/************/
/* HET VELD */
/************/

.veld {
    position: absolute;
    width:50vw;
    height:64vw;
	
	left:50vw;
    top:40vh;
	
    background-color:green;
    background-image: repeating-linear-gradient(45deg, transparent var(--veld-maat), rgba(0, 100, 0, .5) var(--veld-maat), rgba(0, 100, 0, .5) calc(2 * var(--veld-maat)), transparent calc(2 * var(--veld-maat)), transparent calc(3 * var(--veld-maat))),
        repeating-linear-gradient(-45deg, transparent var(--veld-maat), rgba(0, 100, 0, .5) var(--veld-maat), rgba(0, 100, 0, .5) calc(2 * var(--veld-maat)), transparent calc(2 * var(--veld-maat)), transparent calc(3 * var(--veld-maat)));
	
    transform: translate(-50%, -50%) perspective(100vw) rotateX(40deg);
	
    box-shadow: inset 0 0 0 var(--lijn-maat) white;
}


.veld * {
	position: absolute;
}

.hoekvlag {
    
    width: var(--veld-maat);
    height: var(--veld-maat);
    border: var(--lijn-style);
}
.linkerboven {
    border-radius: 0 0 100% 0;
    top: 0;
    left: 0;
}
.rechterboven {
    border-radius: 0 0 0 100%;
    top: 0;
    right: 0;
}
.linkeronder {
    border-radius: 0 100% 0 0;
    bottom: 0;
    left: 0;
}
.rechteronder {
    border-radius: 100% 0 0 0;
    bottom: 0;
    right: 0;
}

.middenlijn {
    background: #ffffff;
    top: calc(50% - 2px);
    width: 100%;
    height: var(--lijn-maat);
}

.middencirkel {
    border-radius: 50%;
    border: var(--lijn-style);
    width: calc(5 * var(--veld-maat));
    height: calc(5 * var(--veld-maat));
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.doelgebied {
    transform: translate(-50%);
    border: var(--lijn-style);
    width: calc(5 * var(--veld-maat));
    height: calc(2.5 * var(--veld-maat));
	left: 50%;
}
.boven.doelgebied {	
	top: 0;
}

.onder.doelgebied {
	bottom: 0;
}

.doelgebiedcirkel {
    left: 50%;
   
    transform: translate(-50%);
   	border: var(--lijn-style);
    
    width: calc(2.5 * var(--veld-maat));;
    height: calc(1 * var(--veld-maat));
}
.boven.doelgebied .doelgebiedcirkel{	
	top: 100%;
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.onder.doelgebied .doelgebiedcirkel{
	bottom: 100%;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}


/*************/
/* HET SHIRT */
/*************/
.speler {
	position: absolute;
    width: 9%;
    height:0;
	padding-bottom:15%;
	
	transform-origin: bottom center;
	transform:translateX(-50%);
	
	animation-name:despeler;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}

@keyframes despeler {
    0% {
        opacity: 0;
		transform:translateX(-50%) scale(.75);
    }
    100% {
        opacity: 1;
		transform:translateX(-50%) scale(1);;
    }
}

.schaduw {
	position:absolute;
	width:100%;
	height:100%;
	
	background:black;
	
	transform-origin:bottom right;
	
	animation-name:deschaduw;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.spelers > div:nth-of-type(1) .schaduw {animation-delay:0;}

.spelers > div:nth-of-type(2) .schaduw,
.spelers > div:nth-of-type(3) .schaduw,
.spelers > div:nth-of-type(4) .schaduw,
.spelers > div:nth-of-type(5) .schaduw {animation-delay:1.5s;}

.spelers > div:nth-of-type(6) .schaduw,
.spelers > div:nth-of-type(7) .schaduw,
.spelers > div:nth-of-type(8) .schaduw {animation-delay:3s;}

.spelers > div:nth-of-type(9) .schaduw,
.spelers > div:nth-of-type(10) .schaduw,
.spelers > div:nth-of-type(11) .schaduw {animation-delay:4.5s;}

@keyframes deschaduw {
    0% {
        opacity: .25;
		transform:translate3D(0,0,-10em) perspective(40vh)  rotateX(-60deg) skewX(-18deg);
    }
    100% {
        opacity:.25;
		transform:translate3D(1vw, 1vw,-10em) perspective(40vh)  rotateX(-60deg) skewX(-18deg);
    }
}

.middenshirt {
    position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	
	background-color: #ffffff;
	background-image:
		linear-gradient(to right, white 0%, white 100%),
		linear-gradient(to left, white 0%, white 100%),
		linear-gradient(to right, white 0%, white 100%),
		linear-gradient(to left, white 0%, white 100%),
		linear-gradient(to right, transparent 48.5%, white 48.5%, white 51.5%, transparent 51.5%),
		linear-gradient(to bottom, transparent 36%, white 36%, white 37.8%, transparent 37.8%),
		linear-gradient(135deg, #2c987f 41.2%, white 41.2%, white 43%, #cc515a 43%)
		;
	background-size:42% 32.1%, 42% 32.1%, 42% 58.3%, 42% 58.3%, 100%, 100%, 100%;
	background-position:left top, right top, left bottom, right bottom, center, center, center;
	background-repeat:no-repeat;
}

.middenshirt *,
.schaduw *{
	position: absolute;
}

.mouw {
    width: 40%;
    height: 50%;
    top: 0;
	background-color:inherit;
}
.linker.mouw {
	left: 0;
    transform-origin: left top;
	transform: rotate(45deg);
}

.rechter.mouw {
    right: 0;
    transform-origin: right top;
	transform: rotate(-45deg);
}

.open {
    height: 16%;
    width: 60%;
    background: #ffffff;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    top: -8%;
}

.cijfer {
    top: 9%;
    right: 65%;
	
	font-size: 1.2vw;
    font-weight: bold;
	font-family: 'Nunito', sans-serif;
	letter-spacing: -1px;
    
	color: #2c987f;
   
	z-index:2;
}

img {
    width: 16%;
    right: 13%;
    top: 14%;
}

/***********/
/* DE NAAM */
/***********/
.spelernaam {
	position: absolute;
	bottom:0%;
	left:50%;
	transform:translateX(-50%);
	
	font-size: 1.5vw;
	font-weight: bold;
	font-family: 'Nunito', sans-serif;
    color:#ffffff;
	
	animation-name: denaam;
	animation-duration: .5s;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}

@keyframes denaam {
    0% {
        opacity: 0;
		transform:translate(-50%, 50%);
    }
    100% {
        opacity: 1;
		transform:translate(-50%, 100%);
    }
}

.spelers > div:nth-of-type(1) .spelernaam {animation-delay:.75s;}

.spelers > div:nth-of-type(2) .spelernaam,
.spelers > div:nth-of-type(3) .spelernaam,
.spelers > div:nth-of-type(4) .spelernaam,
.spelers > div:nth-of-type(5) .spelernaam {animation-delay:2.25s;}

.spelers > div:nth-of-type(6) .spelernaam,
.spelers > div:nth-of-type(7) .spelernaam,
.spelers > div:nth-of-type(8) .spelernaam {animation-delay:3.75s;}

.spelers > div:nth-of-type(9) .spelernaam,
.spelers > div:nth-of-type(10) .spelernaam,
.spelers > div:nth-of-type(11) .spelernaam {animation-delay:5.25s;}



/**************/
/* DE SPELERS */
/**************/

.spelers {
	position:absolute;
	
	width:50vw;
    height:67vw;
	
	left:50vw;
    top:40vh;
	
	transform: translate3D(-50%, -50%, 40em);
}

.dm {
    bottom: 8%;
    left: 50%;
    
}
.dm .middenshirt {
	filter: invert(1);
}

.la {
    bottom: 27%;
    left: 11.5%;
	animation-delay:1.5s; 
}
.cvleft {
    bottom: 27%;
    left: 37%;
	animation-delay:1.5s; 
}
.cvright {
    bottom: 27%;
    left: 63%;
	animation-delay:1.5s; 
}
.ra {
    bottom: 27%;
    left:88.5%;
	animation-delay:1.5s; 
}

.lcm {
    bottom: 46%;
    left: 16.75%;
	animation-delay:3s; 
}
.cm {
    bottom: 46%;
    left: 50%;
	animation-delay:3s; 
}
.rcm {
    bottom: 46%;
    left: 83.25%;
	animation-delay:3s; 
}

.lb {
    bottom: 65%;
    left:22%;
	animation-delay:4.5s; 
}
.sp {
    bottom: 65%;
    left:50%;
	animation-delay:4.5s; 
}
.rb {
    bottom: 65%;
    left:78%;
	animation-delay:4.5s; 
}