/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   TABLE OF CONTENTS                                                           +
+   1. PRELOADS AND ROOT                                                        +
+   2. LAYOUT MATTERS INCL. SITE HEADER TEXT                                    +
+   3. NAVIGATION MENU(S)                                                       +
+   4. GENERAL TEXT MATTERS                                                     +
+   5. OTHER LISTS THAN NAV MENUS                                               +
+   6. FORMS                                                                    +
+   7. TABLES                                                                   +
+   8. TINY MCE MATTERS                                                         +
+   9. ANIMATION MATTERS                                                        +
+  10. MISCELLANEOUS                                                            +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   1. PRELOADS AND ROOT                                                        +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

@font-face {
    font-family: 'Broadway Universal';
    font-style: normal;
    font-weight: normal;
    src: local('Broadway'),
         url('../fonts/Broadway-webfont.ttf') format('truetype');
    font-display: swap;   /* 'Swap' is required by Google Lighthouse. */
}
@font-face {
    font-family: 'Impact Universal';
    font-style: normal;
    font-weight: normal;
    src: local('Impact'),
         url('../fonts/Impact-webfont.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Verdana Web';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Verdana-webfont.ttf') format('truetype');
    font-display: swap;
}
/* No 'Verdana Universal' because WinChromium then does not use the local Verdana
but the Verdana Web, which on Windows is not as sharp as the local Verdana. */

:root {
    --bgImage_1: linear-gradient(to bottom, #EACCC8, #F8EEED);
    --bgImage_1a: linear-gradient(to top,  #EACCC8, #F8EEED);
    --bgImage_2: linear-gradient(to bottom, #C3CDD0, #E7EBEC);
    --bgImage_2a: linear-gradient(to top, #C3CDD0, #E7EBEC);
    --color_1: #D3D3D3;
    --color_2: #DA9D58;
    --color_3: black;
    --time_1: 400ms;
    --shadow_1: 2px 2px 5px #DCDCDC, -2px 2px 5px #DCDCDC;
}




/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   2. LAYOUT MATTERS INCL. SITE HEADER TEXT                                    +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*  PAGES MAY HAVE AN ADDITIONAL ON-PAGE STYLE BLOCK  */

*,
*:before,
*:after {
    box-sizing: border-box;
    content-visibility: visible; /* 'Auto' messes up the layout. Test whether 'visible' is good for SEO. */
}
html {
    scroll-behavior: smooth;
    /* o/verflow-x: hidden; // The particles div used to create an unnecessary hor. scrollbar. */
}
body {
    margin: 0;
    min-height: 100vh;
}
body:before { /* Work-around for iOS, that doesn't support fixed backgrounds. */
    content: "";
    position: fixed;
    top: 0;
    height: 100vh; /* Fix for the disappearing address bar in some mobile browsers.  */
    left: 0;
    width: 100vw;
    background: #F3F6FB url(../images/laptop-met-handen-min.jpg) center top/cover;
    z-index: -1;
}
.smallScreen body:before {
    background: #F3F6FB url(../images/laptop-met-handen_klein-min.jpg)  center top/cover;
}
canvas,
.particles-js {
    position: absolute;
}
#grandContainer {
    min-height: 100vh;
    max-width: 1150px;
    margin: 0 auto;
    display: grid;
    gap: 5px 5px;
}
header {
    background: none;
    padding: 20px;
    position: relative; /* For the hamburger and font-size controls. */
    z-index: 3;
}
#titleContainer {
    color: var(--color_3);
    font: italic 4em 'Broadway Universal';
    text-align: center;
}
nav, main, footer {
    border: 2px solid var(--color_1);
    background-color: rgba(255,255,255,0.95);
    z-index: 3;
}
nav {
    z-index: 4;
}
main {
    min-height: 1000px;
    max-height: 10000px; /* For the reason, see https://stackoverflow.com/questions/59095113/font-size-display-issue-on-google-chrome-for-android. */
    position: relative; /* For the font-size controls. */
    color: black;
}
main > div {
    padding: 20px 10px; /* Will be overruled for big screens under @Media. */
}
main > div:not(.textCont) {
    display: grid;
    align-content: center;
    justify-content: center;
}
#text1Cont,
#text3Cont {
    box-shadow: inset 10em 2px #E7EBEC;
}
#text2Cont,
#text4Cont {
    box-shadow: inset -10em 2px #EACCC8;
}
footer {
    padding: 5px 20px;
}
footer p {
    margin: 0;
}


@media screen and (max-width: 899px) { /* = Roughly the menu wrapping point. */
    body {
        padding: 0;
    }
    #grandContainer {
        margin: 0;
        gap: 5px 0;
    }
    #titleContainer {
        font-size: 2.5em;
    }
    footer {
        padding: 10px;
    }
    main > div {
        margin-bottom: 2em;
    }
}



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   3. NAVIGATION MENU(S)                                                       +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* GLOBAL DECLARATIONS */

nav ul li {
    list-style-type: none;
    text-align: center;
    font-family: Arial, Roboto;
    font-size: 17px !important;
    margin-bottom: 0;
}
nav a,
nav a:visited,
nav a:active {
    display: block;
    color: var(--color_3);
    /*transition: color var(--time_1) ease-out 0ms;*/
    cursor: pointer;
}


/* NARROW SCREENS */

@media screen and (max-width: 899px) { /* = Roughly the menu wrapping point. */
    #hamburger {
        position: fixed;
        width: 25px;
        left: 9px;
        top: 11px;
        border-style: solid;
        border-color: var(--color_3);
        border-width: 3px 0;
        background: none;
        z-index: 5;
    }
    #hamburger:hover {
        cursor: pointer;
    }
    #hamburger hr {
        height: 3px; /* 2 x 1px border (default) + 1px space in between. */
        background-color: var(--color_3);
        border-style: solid;
        border-color: var(--color_3);
        margin: 5px 0; /* Essential as well. */
    }
    #closeButton {
        position: absolute;
        top: -7px; /* Because of the extreme font-size combined with the container's line-height. */
        left: 4px;
        color: var(--color_3);
        font-size: 36px;
        font-weight: bold;
        cursor: pointer;
    }
    nav {
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: -100vw;
        top: 0;
        transition: .3s;
        background: white url(../images/laptop-met-handen_klein-min.jpg) center top/cover;
        color: var(--color_3);
        z-index: 10;
    }
    nav ul {
        width: 200px;
        margin: 20px auto; /* Easiest way to center horizontally. */
        padding: 0;
    }
    nav li {
        margin: 0 0 5px 0;
        border-bottom: 1px solid var(--color_3);
        padding: 5px;
        margin-bottom: 10px;
    }
    nav a,
    nav a:visited {
        color: black;
        text-decoration: none;
        font-size: 1.1em;
    }
}


/*  WIDE SCREENS */

@media screen and (min-width: 900px) { /* 900 */
    #hamburger, #closeButton {
        display: none;
    }
    #indexBody nav a[href="index.php"],
    #kwaliteitsnormenBody nav a[href="kwaliteitsnormen.php"],
    #portfolioBody nav a[href="portfolio.php"],
    #werkwijzeBody nav a[href="werkwijze.php"],
    #updatenBody nav a[href="updaten.php"],
    #prijzenBody nav a[href="prijzen.php"],
    #bedrijfsinfoBody nav a[href="bedrijfsinfo.php"] {
        color: var(--color_2);
    }
    nav {
        position: sticky;
        top: 0;
    }
    nav ul {
        margin: 0;
        height: 40px;
        line-height: 30px;
        text-align: right;
        padding: 0 20px 0 0;
    }
    nav li {
        display: inline-block;
        padding: 5px 15px;
    }
    nav a {
        text-decoration: none;
    }
    nav a:hover {
        text-decoration: underline;
        color: var(--color_2);
    }
}


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

html {
    font: normal 62.5% Verdana; /* See body for the 62.5%. */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
html.Android {
    font-family: 'Verdana Web'; /* DroidChromium still reverts to Roboto when it reads Verdana. */
}
body {
    font-size: 1.5rem; /* 1.5 x 62,5% = 15px, etc. Mind the rem. */
    line-height: 1.4;
    color: var(--color_3);
}
.smallScreen body {
    font-size: 1.7rem;
}
h1 {
    font-family: 'Impact Universal';
    font-weight: normal;
    font-size: 1.8em; /* For big screens, see the @media query. */
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px white, 2px 2px 0px var(--color_3);
    color: var(--color_2);
    /*background: #F2AE62;
    background: -webkit-linear-gradient(to bottom, #F2AE62, #CC9352);
    background: linear-gradient(to bottom, #F2AE62, #CC9352);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/ /* Is incompatible with the text-shadow. */
}
h2 {
    font-size: 1.5em;
    margin: 2em 0 0 0;
}
h2:first-child {
    margin-top: 0;
}
h3 {
    font-size: 1.2em;
    margin-bottom: 0;
    font-family: 'Impact Universal';
}
h3 {
    font: normal 1.6em 'Broadway Universal';
}
main {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}
h1, h2, h3 {
    hyphens: none;
}
.firstPar:first-letter {
    float: left;
    font: bold 5.1em/0.7 'Broadway Universal';
    margin: 4px 5px 0 0;
    color: #EACCC8;
    text-shadow: 2px 2px 0px black;
}
.touchScreen .firstPar:first-letter {
    margin: 4px 5px 0 0;
}
.seo,
.SEOcontent {
    display: none;
}
#footNote,
#dateLastModified {
    font-size: 0.7em;
}
p:first-child {
    margin-top: 0;
}


@media screen and (min-width: 900px) {
    h1 {
        font-size: 3.4em;
    }
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   5. OTHER LISTS THAN NAV MENUS                                               +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

li {
    margin-bottom: 1em;
}
.littleTextList li {
    margin-bottom: 0;
}
.orphanItemContent {
    margin-left: 40px;
}



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   6. FORMS                                                                    +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

form {
    display: block;
}
fieldset {
    padding-top: 10px;
    border: 1px solid var(--color_1);
    border-radius: 8px;
}
fieldset p {
    margin-top: 0;
}
legend {
    padding: 0 5px;
    font-weight: bold;
    font-size: larger;
    border: 1px solid var(--color_1);
    border-radius: 5px;
}
#contactForm fieldset > label:nth-of-type(-n+4) {
    display: none;
}
input,
input::placeholder,
textarea,
textarea::placeholder {
    color: black; /* Not supported by Firefox, while font:inherit is... */
    font: inherit;
}
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm input[type="tel"],
#contactForm input[type="submit"],
#contactForm button {
    width: 100%;
    height: 30px;
    margin: 0 auto 10px auto;
    padding-left: 10px;
    border-radius: 8px;
    background-image: var(--bgImage_1);
    border: 1px solid #548C8C;
}
#contactForm input[type="checkbox"] {
    position: relative;
    left: 2px;
    top: 2px;
}
#contactForm fieldset > div {
    width: 100%;
    margin: 0 auto 10px auto;
    padding: 10px 10px 20px 10px;
    border-radius: 8px;
    background-image: var(--bgImage_1);
    border: 1px solid #548C8C;
}
#contactForm button,
#contactForm input[type="submit"] {
    background-image: var(--bgImage_2a);
    border-color: #437070;
    font: inherit;
    color: black;
    text-shadow: 1px 1px 1px white;
}
#contactForm button:hover,
#contactForm input[type="submit"]:hover {
    background-image: var(--bgImage_2);
    cursor: pointer;
}
#contactForm textarea {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    background-image: var(--bgImage_1);
    border: 1px solid #548C8C;
    padding: 10px;
}
#contactForm input[type="submit"] {
    cursor: pointer;
}
#contactForm input[type="text"]:focus,
#contactForm input[type="email"]:focus,
#contactForm input[type="tel"]:focus,
#contactForm textarea:focus  {
    outline: none;
    background-image: var(--bgImage_1a);
}
#contactForm #timeOptions {
    display: none;
}


@media screen and (max-width: 899px) { /* Should this be listed under LAYOUT MATTERS? */
    #formBelow {
        display: inline;
    }
}
@media screen and (min-width: 900px) {
    #formBelow {
        display: none;
    }
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   7. TABLES                                                                   +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/




/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   8. TINY MCE MATTERS                                                         +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

div.tox-tinymce {
    z-index: 999 !important;
}
button.tox-tbtn {
    border: 1px solid var(--color_3) !important;
    background-image: linear-gradient(to bottom, #DEDEDE, #FCFCFC) !important;
}

button.tox-tbtn:hover {
    border: 1px solid var(--color_3) !important;
    background-image: linear-gradient(to top, #DEDEDE, #FCFCFC) !important;
    cursor: pointer;
}
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
    background: pink !important;
}



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   9. ANIMATION MATTERS                                                        +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

main > div {
    transform: translateZ(0);
    /* This Z(0) cures the bug in iOS that under certain circumstances makes elements in transition rotation disappear. See https://stackoverflow.com/questions/18146511/bug-in-css3-rotatey-transition-on-safari/68885605#68885605 */
    position: relative;
    z-index: 5; /* For Safari on iOS. */
}
.gridImg[data-style-change="scale"] {
    transform: scale(0.8);
    transition-property: transform;
    transition-duration: 2s;
    will-change: transform;
}
.gridImg[data-style-change="rotateX"] {
    transform: rotateX(0deg);
    transition-property: transform;
    transition-duration: 4s;
    will-change: transform;
}
.gridImg[data-style-change="rotateY"] {
    transform: rotateY(180deg);
    transition-property: transform;
    transition-duration: 1.5s;
    will-change: transform;
}
.gridImg[data-style-change="opacity"] {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 4s;
    will-change: opacity;
}
.gridImg[data-style-change="borderRadius"] {
    border-radius: 50%;
    transition-duration: 1.5s;
    will-change: border-radius;
}



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+  10. MISCELLANEOUS                                                            +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

a,
.messageGenerator,
.moreInfoLink {
    font-weight: bold;
}
a[id] {
    display: block;         /* Webkit needs this for correct anchor-jump-to */
    position: relative;
    top: -.5em;             /* finetuning for all */
}
a[target="_blank"]:not(.getsNoIcon):after {
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAe0lEQVR4nNWSQQqAMAwE512itHpS/JRf8WvqQV9RKVSQmlQpKLiQQ0l3koXAX+SEypIFNg3QA4swaYjMVgPMQKFMNsFsTpEucoq5BFagufvrEuY6vI84PAGUkTm1pdgcT5mzAJLeBcwht6YKmFKALkCks/Xlze2DLT/WDnEBLc03u+QKAAAAAElFTkSuQmCC) no-repeat; /* Black on transparant background. From https://icons8.com/icon/43738/external-link. */
    background-size: contain;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: text-bottom;
    margin: 0 -0.2em 0.05em 0.2em;
}
.savedForLaterUse {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAeklEQVR4nNWPywmAMBAFU5coiZ4Um7IVW0s8aBUjSgISNisICs4tnze7z5hfgMBTkQM2UQCMwCIMm7KwKwkCUBUm2xi2qZLY08jhGliBTv2LcHkJt/F81hEhE+RhbcuSYE6dHwkkXheEo7fy3gBeEwxRUsID/d2W37MDD4bnE/+CKLwAAAAASUVORK5CYII=) no-repeat; /* White on transparent background. */
}
.moreInfo,
.moreInfo_2 {
    display: none;
    padding-left: 3ch;
}
main a,
main a:active,
main a:visited,
.messageGenerator,
.moreInfoLink {
    text-decoration: none;
    color: #3366CC; /* Same color as the newTab icon. */
    cursor: pointer;
}
main a:hover {
    text-decoration: underline;
}
figure {
    margin: 0;
}
#fontSizeControls {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 14px;
    white-space: nowrap; /* For Edge on Android. */
}
#fontSizeControls a {
    display: inline-block;
    padding: 3px 6px 3px 5px;
    color: black;
    text-decoration: none;
    border: 1px solid var(--color_3);
    color: var(--color_3);
}
#fontSizeControls a:hover {
    color: var(--color_2);
    cursor: pointer;
}
main img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}



/* The share buttons are not used anymore, but may be used again later. */
#shareButtonsCont {
    margin-top: 1em;
}
#shareButtonsCont .icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(../images/social-media-icons-hor.png);
}
#shareButtonsCont .icon:hover {
    cursor: pointer;
    border: 1px solid blue;
}
#shareButtonsCont .icon.facebook-30x30 {
    background-position: 0 0;
}
#shareButtonsCont .icon.twitter-30x30 {
    background-position: -30px 0;
}
#shareButtonsCont .icon.linkedin-30x30 {
    background-position: -60px 0;
}
#shareButtonsCont .icon.email-30x30 {
    background-position: -90px 0;
}