@import url('https://fonts.googleapis.com/css?family=Saira:400,700&display=swap');

/*********/
/* RESET */
/*********/
*, *::before, *::after {
	box-sizing:border-box;
    font-family: 'Saira', sans-serif;
}

a, [role="button"] {
	text-decoration:none;
	color:var(--sannes-blue);
    outline:none;
    cursor:pointer;
}

a:focus,
a:hover,
[role="button"]:focus,
[role="button"]:hover {
	text-decoration:underline;
}

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

/**************/
/* VARIABELEN */
/**************/
:root {
	--main-color:rgb(55,51,47);
    --main-background:rgb(225,221,217);
    --translucent-color:rgba(193,189,185,.9);
    --light-translucent-color:rgba(225,221,217,.9);
    
    --sannes-blue:#1b75bb;
    --sannes-dark-blue:#0066a8;	
    
    --main-padding: 5vw;
    --nav-number-of-items:6;
    --nav-item-width:var(--nav-number-of-items);
}

@media (min-width: 36em) {
	:root { --main-padding: 4vw; }
}
@media (min-width: 48em) {
	:root { --main-padding: 3vw; }
}
@media (min-width: 76em) {
	:root { --main-padding: 2.5vw; }
}
@media (min-width: 84em) {
	:root { --main-padding: 2em; }
}
/*
@media (min-width: 116em) {
	:root { --main-padding: 2vw; }
}
@media (min-width: 136em) {
	:root { --main-padding: 1.75vw; }
}
@media (min-width: 156em) {
	:root { --main-padding: 1.5vw; }
}
*/


/********/
/* BODY */
/********/
body, html {
    margin:0; padding:0;
	color:var(--main-color);
}

body {
	background-color:var(--main-background);
	-webkit-text-size-adjust:100%;
}

body.show-uitleg {
    overflow:hidden;
}


/**********/
/* HEADER */
/**********/
body > header *, body > header *::before, body > header *::after {
    margin:0; padding:0;
}

body > header {
   padding:calc(var(--main-padding)*2) var(--main-padding) calc(var(--main-padding) / 2);
	z-index:500;
}

/* HEADER CONTAINER */
body > header > div {
    max-width:22em;
}

/* TITEL */
body > header h1 {
	font-size:2.5em;
 	font-weight:400;
	line-height:1em;
}
    
body > header h1 div {
	position:relative;
    display:inline-block;
	word-break:break-all;
}

body > header h1:hover div {
	background:rgba(255,255,153,.75);
}

body > header h1 div:focus {
	background:white;
	outline:none;
	min-width:3em;
}

body > header h1 div:focus::before {
	content: "max 12 karakters";
	position:absolute;
	
	font-size:.66rem;
	bottom:-1rem;
	left:0;
	
	line-height:1rem;
   white-space:nowrap;
}

/* INSTRUCTIE */
body > header p {
    padding:.75em 0 0;
}

/* NAV */
body > header nav {
	max-width:calc(var(--nav-item-width)*4em + (var(--nav-item-width) - 1)*.5em);
    padding-top:1em;
}

body > header nav ul {
    display:grid;
    grid-template-columns: repeat(var(--nav-item-width), 1fr);
    grid-gap:.125em;
}

@media (min-width:22em) {  
    body > header nav ul {
        grid-gap:.25em;
    }
}

@media (min-width:24em) {  
    body > header nav ul {
        grid-gap:.5em;
    }
}

/* HEADER QUERIES */
@media (min-width:48em) {    
    body > header {
        display:flex;
        justify-content:space-between;
        align-items: center;
    }
    
    body > header > div {
        margin-right:var(--main-padding);
    }
    
    body > header nav {
        flex-grow:1;
        padding:0;
    }
    
    body > header nav ul {
        padding-top:0;
    }
}

@media (min-width:80em) {
    :root {
        --nav-item-width:calc(var(--nav-number-of-items) * 2);
    }
}

@media (min-width:84em) and (min-height:54em) {
 	body > header {
		position: sticky;
		position:-webkit-sticky;
		top:calc( -6.875em );
		background-color:var(--light-translucent-color);
	}
	
	body > header h1 {
		position:-webkit-sticky;
		position:sticky;
		top:1rem;
		z-index:10;
	}
	
	body > header p {
		transition:1s;
	}
	
	body.small > header p {
		opacity:0;
		visibility:hidden;
		user-select:none;
	}
	
	body > header nav {
		position:-webkit-sticky;
		position:sticky;
		top:1.5rem;
   }
}


/********/
/* MAIN */
/********/


/****************/
/* MAIN BLOKJES */
/****************/
main > ul {
    margin:0;
    padding:calc(var(--main-padding) * 1.5) var(--main-padding) var(--main-padding);
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(16em + 2vw), 1fr));
    grid-gap:var(--main-padding);
}

.proloog main > ul {
    grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
}

/* MAIN BLOKJES QUERIES */
@media (min-width: 30em) {	
    .proloog main > ul {
        grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
    }
}

@media (min-width: 48em) {	
	.proloog main > ul {
        grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    }
}

@media (min-width: 68em) {
	.proloog main > ul {
        grid-template-columns: repeat(auto-fill, minmax(calc(14em + 1vw), 1fr));
    }
}

@media (min-width: 90em) {	
	.proloog main > ul {
        grid-template-columns: repeat(auto-fill, minmax(calc(16em + 2vw), 1fr));
    }
}


/***********/
/* BLOKJES */
/***********/
.blokjes > li {    
    position:relative;
    height:0;
    padding-bottom:100%;
    list-style:none;
}

main .blokjes > li { 
	overflow:hidden;
}

.blokjes > li > * {
	position:absolute;
	height:100%; width:100%;
}

.blokjes:not(.lijstje) > li > * {
	padding:var(--main-padding);
	background:white;
	
	overflow-x:hidden;
	overflow-y:auto;
	-ms-overflow-style:none;
}

/* blokjes - ID */
.blokjes > li > article::after {
	content: attr(id);
	position:absolute;
	left:50%; top:0;
	transform:translateX(-50%);
	padding:0 .25rem .0625rem;
    
	white-space:nowrap;
	font-size:.66em;
	line-height:1em;
	background-color:var(--main-background);
	z-index:100;
}

/* blokjes - nav item */
.lijstje a {
    display:block;
    padding:calc(var(--main-padding)/4);
    outline:dashed 1px var(--main-color);
    transition:.25s;
}

.proloog .lijstje a {
    color:var(--main-color);
    outline-offset:-2px;
}

.proloog .lijstje a:hover,
.proloog .lijstje a:focus {
    color:white;
}

nav .lijstje a {
    color:var(--sannes-blue);
    outline-offset:-3px;
}

nav .lijstje a.active {
    color:var(--main-color);
}

.lijstje a:hover,
.lijstje a:focus {
    background-color:var(--sannes-blue);
}
.lijstje a.active {
    background-color:white;
    cursor:default;
}
.lijstje a:hover,
.lijstje a:focus,
.lijstje a.active{
    outline-color:transparent;
}

/* blokjes - nav item plaatjes */
.lijstje a::before {
    position:absolute;
    top:50%; left:50%;
    line-height:1.2em;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    text-align:center;
    transform:translate(-50%, -50%);
}

nav .lijstje a::before {
    font-size:1.75em;
    filter:grayscale(1);
}

@media (min-width:22em) {
    nav .lijstje a::before {
        font-size:2em;
    }
}

@media (min-width:24em) {
    nav .lijstje a::before {
        font-size:2.25em;
    }
}

.proloog .lijstje a::before {
    font-size:5em;
}

.lijstje a:hover::before,
.lijstje a:focus::before,
.lijstje a.active::before {
    filter:grayscale(0);
}

.lijstje [href*="index"]::before { content:"\1F3E1"; }
.lijstje [href*="selectors"]::before { content:"\1F3AF"; }
.lijstje [href*="letters-kleuren"]::before { content:"\1F3A8"; }
.lijstje [href*="transforms"]::before { content:"\1F98B"; }
.lijstje [href*="positioneren"]::before { content:"\1F9D8\200D\2640\FE0F";}
.lijstje [href*="flexbox"]::before { content:"\1F3A3"; }
.lijstje [href*="grid"]::before { content:"\1F36B";} 
.lijstje [href*="media-queries"]::before { content:"\1F95E"; }
.lijstje [href*="animations"]::before { content:"\1F488"; }
.lijstje [href*="mixen"]::before { content:"\1F378"; }
.lijstje [href*="vlaggen"]::before { content:"\1F30D"; }
.lijstje [href*="alles-tesaam"]::before { content:"\1F984"; }

.lijstje a::before,
.lijstje a::after {
    transition:.25s;
}

.lijstje a:hover::before,
.lijstje a:hover::after,
.lijstje a:focus::before,
.lijstje a:focus::after{
    transition:1s;
}

/* transform */
.lijstje [href*="transforms"]:hover::before,
.lijstje [href*="transforms"]:focus::before { 
    content:"\1F41B";
}

/* positioneren */
.proloog .lijstje [href*="positioneren"] {
    --hover-maat:.5em;
}

nav .lijstje [href*="positioneren"] {
    --hover-maat:.25em;
}

.lijstje [href*="positioneren"]:hover::before,
.lijstje [href*="positioneren"]:focus::before { 
    top:calc(50% - var(--hover-maat));
}

.lijstje [href*="positioneren"]::after { 
    content:"";
    position:absolute;
    left:calc(50% - (3 * var(--hover-maat)) ); right:calc(50% - (3 * var(--hover-maat)) );
    top:calc(50% + (2.5 * var(--hover-maat)) ); bottom:calc(50% - (4 * var(--hover-maat)) );
    background-color:var(--main-color);
    border-radius:50%;
    opacity:0;
}

.lijstje [href*="positioneren"]:hover::after,
.lijstje [href*="positioneren"]:focus::after { 
    opacity:.25;
}

/* grid */
.lijstje [href*="grid"]:hover::before,
.lijstje [href*="grid"]:focus::before { 
    content:"\1F36B\1F36B\1F36B\1F36B";
}

nav .lijstje [href*="grid"]:hover::before,
nav .lijstje [href*="grid"]:focus::before {
    width:2.75em;
    font-size:1em;
}

.proloog .lijstje [href*="grid"]:hover::before,
.proloog .lijstje [href*="grid"]:focus::before {
    width:2em;
    font-size:3em;
}

nav .lijstje [href*="grid"]::before,
.proloog .lijstje [href*="grid"]::before { 
    transition:0s;
}

/* animations */
.lijstje [href*="animations"]:hover::before,
.lijstje [href*="animations"]:focus::before { 
    transform:translate(-50%,-50%) rotate(180deg);
}

/* mixen */
.lijstje [href*="mixen"]::before {
    transform-origin:center 90%;
    animation:mixen 2s -1s infinite linear paused;
}

.lijstje [href*="mixen"]:hover::before,
.lijstje [href*="mixen"]:focus::before{
    animation-play-state:running;
}

@keyframes mixen {
    0%{transform:translate(-50%, -50%) perspective(10em) rotateX(0deg) rotateZ(-5deg);}
    25%{transform:translate(-50%, -50%) perspective(10em) rotateX(5deg) rotateZ(0);}
    50%{transform:translate(-50%, -50%) perspective(10em) rotateX(0deg) rotateZ(5deg);}
    75%{transform:translate(-50%, -50%) perspective(10em) rotateX(-5deg) rotateZ(0);}
    100%{transform:translate(-50%, -50%) perspective(10em) rotateX(0deg) rotateZ(-5deg);}
}

/* vlaggen */
.lijstje [href*="vlaggen"]::before {
    animation:vlaggen 1s infinite linear paused;
}

.lijstje [href*="vlaggen"]:hover::before,
.lijstje [href*="vlaggen"]:focus::before{
    animation-play-state:running;
}

@keyframes vlaggen {
    0%{content:"\1F30D";}
    33%{content:"\1F30E";}
    67%{content:"\1F30F";}
    100%{content:"\1F30D";}
}

/* alles tesaam */
.lijstje [href*="alles-tesaam"] {
    background-position:center top; 
    background-size:300% 300%;
}

.lijstje [href*="alles-tesaam"]:hover,
.lijstje [href*="alles-tesaam"]:focus {
    background-position:center 33%; 
    background-size:150% 150%;
    transition:1s;
}

nav .lijstje [href*="alles-tesaam"]:hover,
nav .lijstje [href*="alles-tesaam"]:focus {
    background-image:radial-gradient(
        circle at center bottom,
        transparent 44%,
        DarkOrchid 44%, DarkOrchid 46%,
        dodgerblue 46%, dodgerblue 48%,
        yellowgreen 48%, yellowgreen 50%,
        gold 50%, gold 52%,
        darkorange 52%, darkorange 54%,
        crimson 54%, crimson 56%,
        transparent 56%
    );
}

.proloog .lijstje [href*="alles-tesaam"]:hover,
.proloog .lijstje [href*="alles-tesaam"]:focus {
    background-image:radial-gradient(
        circle at center bottom,
        rgba(255,255,255,0) 40%, rgba(255,255,255,.5) 44%,
        DarkOrchid 44%, DarkOrchid 46%,
        dodgerblue 46%, dodgerblue 48%,
        yellowgreen 48%, yellowgreen 50%,
        gold 50%, gold 52%,
        darkorange 52%, darkorange 54%,
        crimson 54%, crimson 56%,
        rgba(255,255,255,.5) 56%, rgba(255,255,255,0) 60%
    );
}

/* blokjes - nav item labels */
.lijstje span {
	display:block;
	font-size:.66em;
	text-align:center;
}

nav .lijstje span {
	position:absolute;
	left:50%; top:0;
	white-space:nowrap;
	opacity:0;
	transform:translate(-50%, -105%);
	user-select:none;
}

nav .lijstje li:nth-last-of-type(-n + 6 ) span {
	top:auto; bottom:0;
	transform:translate(-50%, 105%);
}

nav .lijstje a:focus span,
nav .lijstje a:hover span {
	opacity:1;
}

@media (min-width:80em) {    
    nav .lijstje li:nth-last-of-type(-n + 6 ) span {
		top:0; bottom:auto;
		transform:translate(-50%, -105%);
	}
}


/**********/
/* UITLEG */
/**********/
.uitleg *, .uitleg *::before, .uitleg *::after {
    margin:0; padding:0;
}

.uitleg {
    position:fixed;
    left:0; right:0; top:0; bottom:0;
    background-color:var(--translucent-color);
    padding:calc(var(--main-padding)/2) 0 0;
    
    display:flex;
    flex-wrap:wrap;
    flex-direction:row-reverse;
    justify-content:center;
    
    transform-origin:calc(100% + var(--main-padding)*2/2) calc(var(--main-padding)*2/2);
    transform:rotate(-90deg);
    transition:transform 1s;
    
    z-index:600;
}

.show-uitleg .uitleg {
    transform:none;
}


/* uitleg & download knop */
.uitleg h2,
.uitleg > a {
    position:relative;
    max-width:calc( 17em + var(--main-padding)*7/8);
    flex-grow:0;
    
    font-size:1em;
    font-weight:400;
    line-height:2.25em;
    color:var(--main-color);
    cursor:pointer;
    transition:all 1s, color 0s;
    
    display:flex;
    align-items:center;
}

.uitleg h2 {
    padding:0 calc(var(--main-padding)*7/8);
    background-color:var(--translucent-color);
    transform:translateY(calc(-100% - var(--main-padding)/2));
    justify-content:flex-end;
}

.uitleg > a {
    padding:0 0 0 calc(var(--main-padding)*7/8);
}

.uitleg h2:hover,
.uitleg > a:hover,
.uitleg h2:focus,
.uitleg > a:focus {
    color:var(--sannes-blue);
    text-decoration:none;
}

.uitleg h2:hover span,
.uitleg > a:hover span,
.uitleg h2:focus span,
.uitleg > a:focus span {
    color:var(--sannes-blue );
    text-decoration:underline;
}

.show-uitleg .uitleg h2,
.show-uitleg .uitleg > a {
    background-color:transparent;
    transform:translateY(0);
    flex-grow:1;
}

/* icons */
.uitleg h2::before,
.show-uitleg .uitleg > a::before {
    position:relative;
    font-size:1.5rem;
    transform:translateX(-.1875rem);
    filter:grayscale(1);
}

.uitleg h2::before {
    content:"\1F64B\200D\2640\FE0F";
}

.show-uitleg .uitleg h2::before {
    content:"\1F645\200D\2640\FE0F";
}

.show-uitleg .uitleg > a::before {
    content:"\1F381";
}

.show-uitleg .uitleg > a:hover::before,
.show-uitleg .uitleg > a:focus::before{
    content:"\1F389";
}

.uitleg h2:hover::before,
.uitleg h2:focus::before,
.show-uitleg .uitleg h2::before,
.show-uitleg .uitleg > a::before{
    filter:grayscale(0);
}

/* uitleg content */
.uitleg > div {
    flex-basis:100%;
    height:calc(100% - var(--main-padding)/2 - 2.25em);
    margin:calc(var(--main-padding)/2) auto var(--main-padding);
    border-top:solid calc(var(--main-padding)/4) var(--main-color);
    padding:calc(var(--main-padding)*3/2) var(--main-padding) var(--main-padding);
    
    background-color:var(--main-background);
    overflow:auto;
}

.uitleg > div > * {
    max-width:34rem;
    margin:0 auto;
}

.uitleg h3 {
    font-size:2em;
}
.uitleg h4 {
    font-size:1.5em;
}
.uitleg h3, .uitleg h4 {
    padding-bottom:.5em;
    font-weight:400;
    line-height:1em;
}

.uitleg p {
    padding-bottom:2em;
}
.uitleg p + p:not(:last-of-type) {
    margin-top:-1.5em;
}



@media (min-width:24em) {
    .uitleg {
       position:absolute;
        transform:translateY(-100%);
    }
   
   .show-uitleg .uitleg {
       position:fixed;
    }
    
    .uitleg h2,
    .uitleg > a {
        flex-grow:1;
        background-color:transparent;
    }  
    
    .uitleg h2 {
        top:100%;
        transform:translateY(0);
    }
    
    .show-uitleg .uitleg h2 {
        top:0;
    }
    
    .uitleg h2::before,
    .show-uitleg .uitleg > a::before {
        font-size:1.75rem;
    }
}