/************************************************************************************************* algemene styles voor HTML tags*/
body,
body * {
    box-sizing: border-box;
}

body * {
    font-family: 'Roboto Slab', serif;
    /*Hier staat dat alle teksten het Verdana lettertype krijgen. Dit kan per HMTL element weer worden aangepast in de rest van deze stylestheet.*/
}

body {
    margin: 0;
    /*Margin is de ruimte om een HTML element heen. Standaard staat de margin van body op 8px*/
    padding: 0;
    /*Padding is de ruimte binnen het HTML element. */
    font-size: 16px;
    /*Dit is de grootte van de tekst van de body*/
    line-height: 1.3em;
    /*Dit is de regelafstand van de body*/
    background-color: #f3f0e9;
    /*dit is de achtergrondkleur van de body*/
    background-image: url(../images/wallpaper2.png);
    background-size: 110%;
    background-attachment: fixed;
}

h1,
h2,
h3 {
    font-weight: normal;
    /*De kopjes zijn normaal gesproken 'bold' oftewel dik. Ik heb ze op 'normal' gezet.*/
    line-height: 1.4em;
    /*De regelafstand van de kopjes*/
}

h1 {
    margin-top: 1em;
    /*de intro van een periode heeft een beetje ruimte nodig, anders staat het menu er overheen*/
}

header {
    background-color: #090a0b;
    background-image: url(../images/GIFHEADER2.0.gif);
    background-size: 70%;
    background-position-y: 5px;
    background-position-x: center;
    background-attachment: fixed;
    background-repeat: repeat-x
}

header h1 {
    margin-top: 0;
    /*de intro moet geen ruimte boven hebben*/
    font-size: 2rem;
    /*de maat van de h1 kop in de header is 2 keer zo groot als de standaard maat van de body tekst. Met de maat 'rem' reken je met de standaard maat van de body tekst. */
    color: white;
    /*De kleur van de h1 kop in de header is zwart*/
    font-weight: bold;
}

header h2 {
    font-size: 1.6rem;
    color: white;
    /*De kleur van de h1 kop in de header is donkergrijs*/
    font-weight: bold;
}

header h3 {
    font-size: 1.2rem;
    color: white;
    /*De kleur van de h1 kop in de header is grijs*/
}

#navbar {
    background-color: #070909;
    overflow: hidden;
    text-align: center;
}

#navbar ul {
    display: inline-block;
    padding-right: 0px;
    padding-left: 0px;
}

#navbar ul li {
    font-weight: bold;
    color: #e4ded3;
    text-align: center;
    padding: 0px 30px 0px 30px;
    text-decoration: none;
    list-style-type: none;
    font-size: 30px;
    display: inline-block;
}

a {
    text-decoration: none;
    /*Linkjes krijgen standaard een lijntje onder de tekst. Ik heb dat hier weggehaald*/
    color: white;
    /*Linkjes zijn altijd blauw, ik heb ze magenta gemaakt. */
}

a:hover {
    /*als je met je muis over een element gaat heet dat hover*/
    text-decoration: underline;
    /*Als je met je muis over de link gaat komt er een lijntje onder*/
    color: white;
    /*Als je met je muis over de link gaat wordt de tekstkleur roze*/
}

/************************************************************************************************* navigatie*/

/*HAMBURGER MENU*/
.menu-toggle,
.hamburger {
    /*hamburger en menu-toggle checkbox zijn net zo groot en staan over elkaar heen, menu-toggle checkbox bovenaan*/
    position: fixed;
    top: 20px;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    margin: 0;
    cursor: pointer;
}

.hamburger {
    /*hamburger ligt onder de menu-toggle checkbox*/
    z-index: 99998;
    transition: 0.3s;
    background-color: #fff;
    /*achtergrondkleur en randkleur zijn  nodig als het menu over een donker of zwart vlak valt bij scrollen*/
    border: 10px solid #FFF;
    border-bottom-width: 0;
    box-sizing: content-box;
}

.menu-toggle:checked+.hamburger {
    /*bij selected hamburgerknopje geen achtergrondkleur en randkleur*/
    background-color: transparent;
    border-color: transparent;
}

.menu-toggle {
    /*menu-toggle checkbox ligt boven alles*/
    z-index: 99999;
    opacity: 0;
}

.menu {
    opacity: 0;
    /*volledig transparant*/
    position: fixed;
    top: 0;
    right: -50vw;
    /*menu staat buiten beeld*/
    width: 50vw;
    /*menu is zo breed als een halve pagina, en hij staat buiten beeld*/
    height: 100vh;
    z-index: 99997;
    /*de menu liggen overal overheen, behalve over de menu-toggle checkbox en het hamburgermenu*/
    background-color: rgba(0, 0, 0, 0.8);
    transition: opacity 1s, right 1s;
}

.menu-toggle:checked~.menu {
    /*menu wordt zichtbaar bij klik op menu-toggler checkbox*/
    opacity: 100;
    /*volledig zichtbaar*/
    right: 0;
}

/***************************************************************Hamburgermenu balkjes die bij hover en select een kruis worden*/
.hamburger .bar {
    width: 100%;
    height: 16%;
    padding-top: 16%;
    background-color: #000;
    margin: 16% 0 0 0;
    transition: 0.2s;
}

.hamburger:hover,
.menu-toggle:hover+.hamburger {
    transform: scale(1.05);
}

.menu-toggle:checked+.hamburger .bar {
    background-color: #FFF;
}

.hamburger .bar1 {
    margin-top: 0;
}

.hamburger .bar2 {
    margin-bottom: 0;
}

.hamburger .bar3 {
    margin-top: -16%;
}

.menu-toggle:checked+.hamburger .bar1,
.menu-toggle:checked+.hamburger .bar4 {
    opacity: 0;
}

.menu-toggle:checked+.hamburger .bar2 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
}

.menu-toggle:checked+.hamburger .bar3 {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transform-origin: center center;
}

/************************************************************************************************* navigatie hyperlinks */
#nav>ul,
#nav>ul>li {
    list-style: none;
}

#nav>ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0;
    padding: 15px 0 0 0;
}

#nav>ul>li {

    flex: 0 1 auto;
    margin: 0;
    padding: 0 90px 0 0;
    text-align: right;
    border-bottom: 1px solid transparent;
}

#nav a {
    display: block;
    color: #FFF;
    padding: 0 2em;
    text-decoration: none;
    line-height: 3em;
}

#nav a:hover,
#nav a.selected {
    background-color: #FFF;
    color: #000;
}

/*clearfix is om de float op te heffen*/
.clearfix::after {
    content: '';
    clear: both;
    display: table;
}

/************************************************************************************************* Header/naam/hero afbeelding etc.. */
header {
    padding: 107px calc(50px + 2vw);
}

/************************************************************************************************* verschillende sections */

section#tegels {
    min-height: 100vh;
    padding: 50px;
    margin: 0;
    display: flex;
    /* de div #tegels is een flex-box container, elementen daarbinnen zijn flexibel in te delen */
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
}

.tegel {
    padding: 1.5vw;
    /*ruimte van de rand van de tegel tot de content in de tegel*/
    margin-top: 10px;
    margin-bottom: 10px;
    /*ruimte buiten de rand van de tegel, tussen de tegels dus*/

    flex-grow: 0;
    /*mag wel/niet GROTER zijn dan flex-basis (0 = mag niet of 1 = mag wel)*/
    flex-shrink: 1;
    /*mag wel/niet KLEINER zijn dan flex-basis (0 = mag niet of 1 = mag wel)*/
    flex-basis: 100%;
    /*gewenste breedte van het element (cijfer in %, px, em vh, vw of auto)*/

    min-height: 300px;
    /*min staat voor minimaal. Minimale hoogte*/

    display: flex;
    /*de tegel is zelf ook weer een flex-box container*/

}

/*Hieronder staan de gewenste breedtes van de tegels*/
.tegel.kwart_breed {
    flex-basis: 25%;
}

.tegel.een_derde_breed {
    flex-basis: calc(100% / 3);
}

/*calc staat voor calculate, bereken*/
.tegel.helft_breed {
    flex-basis: 50%;
}

.tegel.twee_derde_breed {
    flex-basis: calc(100% / 3 * 2);
}

.tegel.volle_breedte {
    flex-basis: 100%;
}

.tegel.een_hoog {
    min-height: 300px;
}

.tegel.twee_hoog {
    min-height: 600px;
}

.tegel.drie_hoog {
    min-height: 900px;
}

/*opmaak aan de binnenkant van een tegel*/
.tegel .tegel_binnen {
    flex: 0 1 100%;
    line-height: 1.3em;
    word-break: break-word;
    /*animatie van achtergrond plaatje en kleur bij hover*/
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.6) 70.71%);
    padding-bottom: 10px;
    border-radius: 20px;


    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: flex-start;
}

/*dit geldt voor alle plaatjes binnen een tegel*/
.tegel img,
.tegel embed,
.tegel iframe {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;

}

.tegel embed,
.tegel iframe {
    min-height: 400px;
    flex: 0 1 100%;
}

.tegel img {
    min-height: auto;
    flex: 0 1 auto;
}

.tegel .tekst {
    padding: 0 15px;
}

/*dit geldt voor alle kopjes binnen een tegel*/
.tegel_binnen h1 {
    color: #FFFFFF;
}

.tegel_binnen h2 {
    line-height: 1.8em;
    padding: 0 15px;
    color: #FFFFFF;
}

.tegel_binnen h3 {
    color: #FFFFFF;
}

/*paragraph teksten binnen een tegel*/
.tegel_binnen p {
    color: #FFFFFF;
    line-height: 1.2em;
    font-size: 1rem;
    font-weight: 300;
}

.tegel_binnen a {
    font-weight: 300;
}

.tekst>a:nth-child(1) {
    /*linkje meteen onder een iframe of embed*/
    font-size: 0.8rem;
    line-height: 2em;
}

/***************************** FOOTER */
footer {
    display: block;
    background-color: black;
    color: #ccc;
    font-size: .8rem;
    position: relative;
}

footer ul,
footer li {
    list-style: none;
}

footer ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
}

footer li {
    flex: 0 1 auto;
    padding: .5em 1em;
}

/******************************************************************************************Mediaqueries voor mobiel*/
/*voor schermen tot  540px breed: mobiel portait modus */
@media screen AND (max-width: 540px) AND (orientation: portrait) {
    .menu {
        right: -100vw;
        /*menu staat buiten beeld*/
        width: 100vw;
        /*menu is zo breed als een halve pagina, en hij staat buiten beeld*/
    }

    /*op mobiel de titels van de site/module en de units boven laten plakken*/
    header.content {
        padding: 0;
    }

    header.content h1 {
        position: sticky;
        top: 0;
        background-color: #fff;
        width: 100%;
        min-height: 40px;
        padding: 5px 15px;
    }

    header.content h2,
    header.content h3 {
        padding: 0 15px;
    }

    header.content h2 {
        font-size: 1em;
    }

    header.content h3 {
        font-size: .8em;
    }

    .tegel_binnen h2 {
        position: sticky;
        top: 0;
        font-size: 1.5em;
        padding-top: 0px;
        padding-right: 45px;
        padding-bottom: 5px;
        padding-left: .5em;
    }

    .menu-toggle,
    .hamburger {
        top: 0;
        right: 0;
        width: 34px;
        height: calc(1.8em + 10px);
    }

    #nav>ul {
        padding-top: 90px;
    }

    #nav>ul>li {
        width: 100%;
        padding: 0 1em 0 1em;
        text-align: left;
    }

    header {
        padding: 1em;
    }

    section#tegels {
        flex-flow: column nowrap;
        padding: 0;
    }

    .tegel,
    .tegel.kwart_breed,
    .tegel.een_derde_breed,
    .tegel.helft_breed,
    .tegel.twee_derde_breed {
        flex: 0 1 100%;
    }

    .tegel {
        padding: 1em 0;
    }

    .tegel .tegel_binnen {
        border: none;
        border-radius: 10px;
        min-height: 100vh;
        /*op mobiel is de tegel altijd beeldvullend*/
    }

    .tegel .tegel_binnen img {
        max-height: calc(100vh - 50px);
        width: auto;
    }

    .tegel .tegel_binnen embed,
    .tegel .tegel_binnen iframe {
        max-height: 100vh;
        height: calc(100vh - 50px);
        width: 100%;
    }
}

/*voor schermen tot  750px breed: mobiel landscape modus */
@media screen AND (max-width: 750px) AND (orientation: landscape) {
    header.content h1 {
        position: sticky;
        top: 0;
        background-color: #fff;
        width: 100%;
        min-height: 40px;
        padding: 5px 15px;
    }

    header.content h2,
    header.content h3 {
        padding: 0 15px;
    }

    header.content h2 {
        font-size: 1em;
    }

    header.content h3 {
        font-size: .8em;
    }

    .tegel_binnen h2 {
        position: sticky;
        top: 0;
        background-color: #333333;
        font-size: 1.5em;
        padding-top: 0px;
        padding-right: 45px;
        padding-bottom: 5px;
        padding-left: .5em;
    }

    .menu-toggle,
    .hamburger {
        top: 0;
        right: 0;
        width: 34px;
        height: calc(1.8em + 10px);
    }

    #nav>ul {
        padding-top: 90px;
    }

    #nav>ul>li {
        width: 100%;
        padding: 0 1em 0 1em;
        text-align: left;
    }

    header {
        padding: 1em;
    }

    section#tegels {
        flex-flow: column nowrap;
        padding: 0;
    }

    .tegel,
    .tegel.kwart_breed,
    .tegel.een_derde_breed,
    .tegel.helft_breed,
    .tegel.twee_derde_breed {
        flex: 0 1 100%;
    }

    .tegel {
        padding: 1em 0;
    }

    .tegel .tegel_binnen {
        border: none;
    }

    .tegel .tegel_binnen img {
        max-height: calc(100vh - 50px);
        width: auto;
    }

    .tegel .tegel_binnen embed,
    .tegel .tegel_binnen iframe {
        max-height: 100vh;
        height: calc(100vh - 50px);
        width: 100%;
    }
}

/*voor schermen vanaf 541px  tot 880px breed en portait modus: tablet */
@media screen AND (min-width: 541px) AND (max-width: 880px) AND (orientation: portrait) {

    /*tablet in portrait modus is te smal voor meerdere tegels naast elkaar. Dus alles 100% breed en onder elkaar*/
    .tegel,
    .tegel.kwart_breed,
    .tegel.een_derde_breed,
    .tegel.helft_breed,
    .tegel.twee_derde_breed {
        flex: 0 1 100%;
    }

    .menu {
        right: -100vw;
        /*menu staat buiten beeld*/
        width: 100vw;
        /*menu is zo breed als een halve pagina, en hij staat buiten beeld*/
    }
}

/*voor schermen vanaf 751px breed t/m 1024px breed en landscape modus : tablet*/
@media screen AND (min-width: 751px) AND (max-width: 1024px) AND (orientation: landscape) {

    /*tablet in landscape modus is te smal voor 3 of 4 tegels naast elkaar. Dus alles 50% breed*/
    .tegel.kwart_breed,
    .tegel.een_derde_breed,
    .tegel.helft_breed,
    .tegel.twee_derde_breed {
        flex: 0 1 50%;
    }
}