/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   TABLE OF CONTENTS                                                           +
+   1. ROOT AND LAYOUT MATTERS                                                  +
+   2. NAVIGATION MENU                                                          +
+   3. OTHER LISTS                                                              +
+   4. TEXT MATTERS                                                             +
+   5. TABLES                                                                   +
+   6. MISCELLANEOUS MATTERS                                                    +
+   7. @MEDIA QUERIES                                                           +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   1. ROOT AND LAYOUT MATTERS                                                  +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

@font-face {
    font-family: 'Verdana Webfont';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Verdana-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'Orbitron Web';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Orbitron-ExtraBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Lucida Handwriting Universal';
    font-style: normal;
    font-weight: normal;
    src: local('Lucida Handwriting'),
         url('../fonts/LucidaHandwriting-Italic.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Engravers Universal';
    font-style: normal;
    font-weight: normal;
    src: local('Engravers MT'),
         url('../fonts/Engravers-MT.ttf') format('truetype');
    font-display: swap;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}
html {
    font: normal 62.5% Verdana;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}
html.Android {
    font-family: 'Verdana Webfont';
}
body {
    margin: 0;
    min-height: 100%;
    font-size: 1.5rem; /* 1.5rem x 62.5% inherited from the root = 15px. */
    line-height: 1.4;
}
.smallScreen body {
    font-size: 1.7rem;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   2. NAVIGATION MENU                                                          +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* See the @media queries for the wide screen declarations! */

nav {
    position: sticky;
    top: 0;
    width: calc(100vw - 17px); /* For the content pages, which have a curtailed scrollbar. */
    z-index: 3;
    background-color: rgba(0,0,0,0.9);
    font-family: 'Lucida Handwriting Universal';
    font-size: 14px !important;
}
.touchScreen nav {
    width: 100%;
}
nav ul {
    padding: 0;
    margin: 0;
}
nav li {
    list-style: none;
    white-space: nowrap;
}
nav li ul {
    display: none;
    background-color: rgba(0,0,0,0.9); /* Repeated because it goes out of the nav element. */
}
nav li:hover ul {
    display: block;
}
nav a {
    display: inline-block; /* To make the width declaration have effect. */
    width: 100%; /* To extend the clickable zone. */
    padding: 5px;
    color: white;
    text-decoration: none;
}
nav a span {
    font-weight: bold;
    font-size: 1.1em;
}
nav a:hover {
    cursor: pointer;
    color: orange;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   3. OTHER LISTS                                                              +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#subHeader {
    padding: 0 2em;
}
#subHeader li {
    list-style-type: square;
    text-shadow: 1px 1px 0 black;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   4. TEXT MATTERS                                                             +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

h1 {
    font-size: 3.6rem;
    font-family: 'Orbitron Web', sans-serif;
    letter-spacing: 3px;
    text-shadow: 5px 5px 0px black;
    text-align: center;
    margin: 0;
    hyphens: none;
}
h2 {
    font-size: 1.8em;
    font-family: 'Engravers Universal', serif;
    font-weight: bold;
    text-align: center;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    position: relative;
    z-index: 1;
}
h3 {
    font-size: 1.8em;
    font-family: 'Orbitron Web', sans-serif;
    text-align: center;
}
h4 {
    font-size: 1.4em;
    font-family: 'Orbitron Web', sans-serif;
}
main {
    text-align: justify;
    hyphens: manual;
}
main a,
main a:active,
main a:visited {
    text-decoration: none;
    color: #3366CC; /* Color of newTab icon. */
}
main a:hover {
    text-decoration: underline;
}
.newTab {
    padding-right: 15px;
    background-image: url(../images/newTab-20x20.png);
    background-size: 11px 11px;
    background-position: 100% 65%;
    background-repeat: no-repeat;
}
.SEO {
    display: none;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   5. TABLE(S)                                                                 +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/




/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   6. MISCELLANEOUS MATTERS                                                    +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

a[id] {
    display: block;         /* Webkit needs this for correct anchor-jump-to. */
    position: relative;
    top: -.5em;             /* Finetuning for all. */
}
span[title] {               /* Only spans that replace <a> tags have a title. */
    color: #3366CC;         /* Standard color for <a> tags. */
    cursor: pointer;
}
main {
    position: relative;     /* To position the font size controls. */
}
#fontSizeControls {
    position: absolute;
    right: 8px;
    top: 7px;
    font: normal 14px Verdana;
}
#fontSizeControls a {
    display: inline-block;
    padding: 0 .25em;
    color: black;
    text-decoration: none;
    border: 1px solid black;
}
#fontSizeControls a:hover {
    color: red;
    cursor: pointer;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   7. @MEDIA QUERIES                                                           +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media all and (max-width: 850px) { /* The menu folds at between 800 - 850 px. */
    #companyName {
        position: relative;
        top: 25px;
    }
    #restContainer {
        position: relative; /* Voor de hamburgerknop. */
    }
    #hamburger {
        position: fixed; /* Header has relative. */
        width: 26px;
        left: 9px;
        top: 15px;
        border-style: solid;
        border-width: 3px 0;
        border-color: black;
        background: none;
        z-index: 1;
    }
    #hamburger:hover {
        cursor: pointer;
    }
    #hamburger hr {
        height: 3px; /* 2 x 1px border + 1px space in between. */
        background-color: black;
        border-style: solid;
        border-color: black;
        margin: 5px 0; /* Default margin is much bigger. */
    }
    #closeButton {
        position: absolute;
        top: -3px; /* Because of the extreme big font-size and the default line-height. */
        right: 5px;
        color: white;
        font-size: 36px;
        font-weight: bold;
        cursor: pointer;
    }
    nav {
        position: fixed; /* For the sliding-in effect. */
        left: -100vw;
        top: 0;
        width: 100vw; /* Because of the position:fixed. */
        height: 100vh;
        transition: .3s;
        padding-top: 3em;
        text-align: center; /* Only on narrow screens! */
        font-size: 17px !important;
    }
}


@media all and (min-width: 851px) {
    #hamburger, #closeButton {
        display: none;
    }
    header {
        padding: 40px;
    }
    nav {
        min-height: 40px;
        line-height: 28px; /* Vertical centering. */
        text-align: right;
        padding-right: 20px;
    }
    nav > ul {
        max-width: 1680px; /* Above it, the stretching should be limited. */
        margin: 0 auto;
    }
    nav li {
        position: relative; /* For the relative-absolute positioning (RAP) that follows. */
    }
    nav li ul {
        position: absolute;
        left: 0;
        width: 100%; /* Together with the RAP, this makes it as wide as the parent li.  */
        text-align: center;
    }
    nav li {
        display: inline-block; /* To line them up horizontally. */
        padding: 5px 10px;
    }
    nav li:hover li {
        display: block; /* Must be lined up vertically again. */
    }
}


@media all and (min-width: 950px) {
    nav > ul {
        background-image: url(../images/logo-transp-200.png);
        background-position: left 3px;
        background-repeat: no-repeat;
    }
}
@media all and (min-width: 1100px) {
    nav > ul {
        background-image: url(../images/logo+naam-transp-200.png);
    }
}