/*  ##########################################################################
    #                                                                        #
    #           # ============================================= #            #
    #           # Website concept en realisatie:                #            #
    #           # ============================================= #            #
    #           # Tigplant - Grafisch ontwerp en Webdesign      #            #
    #           # ============================================= #            #
    #           # www.tigplant.nl                               #            #
    #           # ============================================= #            #
    #                                                                        #
    ##########################################################################  */

html {
    font-size: 16px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #ffffff;
    /* lichte achtergrond met een kleine korrel */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 4 4'%3E%3Cpath fill='%23ecede7' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
.achtergrond-donker {
    /* donkere achtergrond met een kleine korrel */
    background-color: #f5f5f5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23e7e7e7' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); 
}
body {
    margin: 0;
    padding: 0;
    color: #696969;
    line-height: 1.5rem;
    /* min-height: 100vh;*/
}
.container {
    position: relative;
    margin: 0 auto;
    max-width: 70rem;
    /* min-height: 100vh; */
}
.paragraaf {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.group:after {
    content: "";
    display: table;
    clear: both;
}
header {
    margin-bottom: 1rem;
}
/* responsive images */
img {
    max-width: 100%;
    height: auto;
    width: auto;
}
.align-center {
    text-align: center;
}
.hide-for-mobile {
    display: none;
}

/*  ==========================================================================
    Text styling
    ==========================================================================  */

h1, h2 {
    color: #222222;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.1rem;
    /* letter-spacing: 1px; */
    line-height: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 0;
}
footer h2 {
    padding-top: 1.75rem;
    padding-bottom: 0.75rem;
}
h3 {
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.90rem;
    padding-top: 0;
    padding-bottom: 0;
    margin: 1rem auto 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
p, blockquote, a, address, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tr, th, td {
    color: #222222;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.75rem;
}
p {
    margin: 0 auto 1rem auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
p:last-of-type {
    padding-bottom: 1rem;
}
.welkom-container p:last-of-type {
    padding-bottom: 0;
}
dl, ol, ul {
    margin: 0;
    padding: 1rem;  
    padding-top: 0;
}
footer p:last-of-type {
    font-size: x-small;
    margin: 0;
    margin-left: 1.5rem;
    padding: 0;
    padding-bottom: 1rem;
}
footer p:last-of-type a {
    font-size: x-small;
}
footer ul {
    padding-bottom: 0; 
}
main dl, main ol, main ul {
    list-style-type: disc;
    list-style-position: inside;
}
h1, h2 {
    margin: 1rem;
    margin-top: 0;
}
b {
    font-weight: 700;
}
.indexlink:link, .indexlink:visited {
    display: inline-block;
    padding: 5px;
    background-color: #DEE6F0;
    margin-bottom: 3rem;
}
.indexlink:hover, .indexlink:active {
    background-color: black;
    color: white;
}

/*  ==========================================================================
    End of text styling
    ==========================================================================  */

.arrowparent {
    position: relative;
    height: 3rem;
    padding: 0;
    overflow: visible;
}
.erismeerarrow {
    position: absolute;
    top: 100%;
    margin-top: -0.5rem;
    right: 1rem;
    font-family: 'Font Awesome 5 Free'; 
    max-width: 2rem;
    max-height: 2rem;
    font-size: 0;
    z-index: 99;
}
.arrowparent .erismeerarrow {
    top: 40%;
}
.erismeerarrow:after {
    font-family: 'Font Awesome 5 Free'; 
    content: "\f358";
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: #6B7A83;
}

/*  ==========================================================================
    Hamburgermenu voor de navigatie
    ==========================================================================  */
/*  checkbox voor het hamburgermenu, appearance: none werkt niet in Edge en IE11 */
/*  maar het uitklapmenu gekoppeld aan checkbox werkt wel in alle browsers */
/*  daarom opacity: 0 gebruikt */
#show-menu, #footer-show-menu {
    box-sizing: border-box;
    position: absolute;
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1.5rem;
    top: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
    z-index: 1;
    outline: none;
    cursor: pointer;
    opacity: 0;
    margin: 0;
    padding: 0;
  }
/*  label op exact dezelfde plek zetten als de checkbox, daartoe alles gelijk gemaakt bij show-menu, show-menu-label en show-menu-label-after, font, lijnhoogte. */
#show-menu-label, #footer-show-menu-label {
    box-sizing: border-box;
    position: absolute;
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1.5rem;
    top: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
    z-index: 1;
}
/* ::after stijl nu aan label gekoppeld ipv aan checkbox, zie comment aan begin */
#show-menu-label:after, #footer-show-menu-label:after {
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900;
    font-size: 1.6rem;
/* met de lijnhoogte kan je het icoontje verticaal precies op zijn plek krijgen */
    line-height: 2.85rem;
    border-bottom-left-radius: 25%;
    border-top-left-radius: 25%;
    border-bottom-right-radius: 25%;
    width: 42px;
    height: 42px;
    top: 0;
    left: 0;
/* horizontaal uitlijnen van het icoontje */
    text-align: center;
}
/* Animatie v/h hamburger icon, Safari 4.0 - 8.0 */
@-webkit-keyframes streepjesin {
  from {
    color: transparent;
    background-color:  transparent;
    }
  to {
    color: black;
    background-color: white;
    }
}
/* Animatie v/h hamburger icon, Standard syntax */
@keyframes streepjesin {
  from {
    color: transparent;
    background-color:  transparent;
    }
  to {
    color: black;
    background-color: white;
    }
}
/* Animatie v/h pijltje icon, Safari 4.0 - 8.0 */
@-webkit-keyframes pijltjein {
  from {
      color: transparent;
      background-color: transparent;
    }
  to {
      color: black;
      background-color: #DEE6F0;
    }
}
/* Animatie v/h pijltje icon, Standard syntax */
@keyframes pijltjein {
  from {
      color: transparent;
      background-color: transparent;
    }
  to {
      color: black;
      background-color: #DEE6F0;
    }
}
.show-menu-label-in:after {
    content: "\f0c9";
    background-color: white;
    /* Animatie v/h hamburger icon */ 
    -webkit-animation-name: streepjesin; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 750ms; /* Safari 4.0 - 8.0 */
    animation-name: streepjesin;
    animation-duration: 750ms;
}
.show-menu-label-uit:after {
    content: "\f0d8";
    background-color: #DEE6F0;
    /* Animatie v/h pijltje icon */ 
    -webkit-animation-name: pijltjein; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 750ms; /* Safari 4.0 - 8.0 */
    animation-name: pijltjein;
    animation-duration: 750ms;
}
/* het menu heeft geen hoogte en is verborgen */
nav div {
    overflow: hidden;
    height: 0;
    transition: height 500ms;
}
/*  na klikken op het trigram icoon (het label bovenop de checkbox)
    schuift het menu naar beneden uit en krijgt zijn normale hoogte */
#show-menu:checked + div, #footer-show-menu:checked + div {
/*  hoogte op vaste waarde gezet ipv auto anders werkt transition niet */
    height: 11rem;
}

/*  ==========================================================================
    Einde hamburgermenu voor de navigatie
    ==========================================================================  */

/*  ==========================================================================
    Styling of navigation
    ==========================================================================  */

.socMedia li a:link:after {
    display: block;
    position: absolute;
    text-align: right;
    width: 1.6rem;
    height: 1.6rem;
    top: 0;
    left: 0.05rem;
    font-family: 'Font Awesome 5 Brands'; 
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
}
.socMedia li:nth-of-type(1) a:after {
    content: "\f16d";  
}
.socMedia li:nth-of-type(2) a:after {
    content: "\f0d2";  
}
.socMedia li a:link, .socMedia li a:visited {
    display: block;
    box-sizing: border-box;
    background-color: white;
    border-radius: 6px;
    color: black;
    width: 1.6rem; 
    height: 1.6rem;
    padding-top: 0.8rem; 
    padding-bottom: 0.8rem;
    font-size: 0;
    text-align: right;
}
footer .socMedia li a:link, footer .socMedia li a:visited {
    background-color: transparent;
}
nav div {
    display: flex;
    /* shorthand for flex-direction and flex-wrap */
    flex-flow: row nowrap;
    text-align: center;
}
nav ul:first-child {
    flex: 0 1 auto;
    display: flex;
    flex-flow: column nowrap;
    width: 2.6rem;
    height: 36%;
    margin-top: 0.5rem;
    border-right: 1px solid black;
}
footer nav ul:first-child {
    width: auto;
    margin-left: 0;
    height: 40%;
}
nav ul:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column nowrap;
    padding-right: 2.6rem;
}
footer nav ul:last-child {
    margin-top: 0.5rem;
}
nav .socMedia {
    margin: 0;
    padding: 0;
}
nav li {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
nav .socMedia li {
    margin-right: 2rem;
    margin-left: auto;
    padding: 0;
}
footer nav .socMedia li {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
    padding: 0;
}
nav a {
    display: inline-block;
    position: relative;
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: 0.5s;
}
nav a:link {
    border-bottom: 1px solid transparent;
}
nav a:hover {
    border-color: black;
}
.socMedia li a:link {
    border: 0;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.socMedia li a:hover {
    color: darkgrey;
    background-color: transparent;
}
nav a.current {  
    border-color: black;
}

/*  ==========================================================================
    End of styling of navigation
    ==========================================================================  */

/*  ==========================================================================
    Hero styling
    ==========================================================================  */

header h1 {
    display: none;
}
.hero {
    position: relative;
    min-height: 14rem;
    background-image: url("../images/studiohelder-hero-small.jpg");
    background-size: cover;
    background-position: bottom center;
}
.logo {
    position: absolute;
    height: 8rem;
}
.headerlogo {
    top: 0;
    left: 0;
}
.footerlogo {
    top: 0;
    right: 0;
    height: 6rem;
}
.crisplogo {
    position: absolute;
    top: 1rem;
    right: 4rem;
    height: 3rem;
}
.cta, .fcta {
    position: absolute;
    top: 9rem;
    right: 1rem;
    background-color: #0B82B7;
    height: 2rem;
    width: 9rem;
    color: white;
    text-transform: uppercase;
    line-height: 2rem;
    text-align: left;
    padding-left: 0.5rem;
}
.cta:after, .fcta:after {
    display: block;
    position: absolute;
    top: 0;
    right: 0.5rem;
    text-align: center;
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900;
    line-height: 2rem;
    content: "\f095";
}
.cta:hover, .fcta:hover {
    -webkit-box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.9);
    -moz-box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.9);
    box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.9);
}
.fcta {
    position: relative;
    top: 0;
    left: 0;
}
.fcta a {
    color: white;
}

/*  ==========================================================================
    End of Hero styling
    ==========================================================================  */

/*  ==========================================================================
    Styling Welkom sectie
    ==========================================================================  */

.welkom-container {
    position: relative;
    background-color: #DEE6F0;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 2rem;
}
.welkom-tekst p:first-of-type {
    margin-right: 1rem;
}
.welkom-tekst h2:first-of-type {
    margin-right: 8rem;
}
.welkom-tekst h3:first-of-type {
    margin-right: 3.5rem;
}
.welkom-tekst ul {
    padding-bottom: 0;
}
.welkom-image {
    float: right;
    width: 28vw;
    height: 36vw;
    /* Plaatje klein stukje verplaatsen */
    transform: translate(-0.5rem, -9rem);
    overflow: hidden;
    -webkit-box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
    -moz-box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
    box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
    margin: 0;
    background-color: black;
    object-fit: cover;
}

/*  ==========================================================================
    Einde styling Welkom sectie
    ==========================================================================  */

/*  ==========================================================================
    Styling Secundaire navigatie
    ==========================================================================  */

.secnav {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;    
}
.secnav a {
    flex: 1 1 44%;
    position: relative;
    display: block;
    padding: 0;
    margin: 0.25rem;
    height: 45vw;
    background-color: #DEE6F0;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg1 {
    background-image: linear-gradient(rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 50% ,rgba(255,255,255,0.20) 50%, rgba(255,255,255,0.20) 100%), url("../images/studiohelder-bg1.jpg");
    opacity: 0.95;
    transition: opacity 0.5s;
}
.bg1:hover, .bg1:focus, .bg1:active {
    background-image: linear-gradient(rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.40) 50% ,rgba(255,255,255,0.40) 50%, rgba(255,255,255,0.40) 100%), url("../images/studiohelder-bg1.jpg");
    opacity: 0.80;
}
.bg2 {
    background-image: linear-gradient(rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 50% ,rgba(255,255,255,0.20) 50%, rgba(255,255,255,0.20) 100%), url("../images/studiohelder-bg2.jpg");
    transition: opacity 0.5s;
}
.bg2:hover, .bg2:focus, .bg2:active {
    background-image: linear-gradient(rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.40) 50% ,rgba(255,255,255,0.40) 50%, rgba(255,255,255,0.40) 100%), url("../images/studiohelder-bg2.jpg");
    opacity: 0.80;
}
.bg3 {
    background-image: linear-gradient(rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 50% ,rgba(255,255,255,0.20) 50%, rgba(255,255,255,0.20) 100%), url("../images/studiohelder-bg3.jpg");
    transition: opacity 0.5s; 
}
.bg3:hover, .bg3:focus, .bg3:active {
    background-image: linear-gradient(rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.40) 50% ,rgba(255,255,255,0.40) 50%, rgba(255,255,255,0.40) 100%), url("../images/studiohelder-bg3.jpg");
    opacity: 0.80;
}
.bg4 {
    background-image: linear-gradient(rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.40) 50% ,rgba(255,255,255,0.20) 50%, rgba(255,255,255,0.20) 100%), url("../images/studiohelder-bg4.jpg");
    transition: opacity 0.5s; 
}
.bg4:hover, .bg4:focus, .bg4:active {
    background-image: linear-gradient(rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.40) 50% ,rgba(255,255,255,0.40) 50%, rgba(255,255,255,0.40) 100%), url("../images/studiohelder-bg4.jpg");
    opacity: 0.80;
}
.secnav a:after {
    position: absolute;
    top: 0.75rem;
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 2rem;
    width: 100%;
    text-align: center;
    color: white;
}
.secnav a:nth-child(1):after {
    content: "\f06e";
}
.secnav a:nth-child(2):after {
    content: "\f4b8";
}
.secnav a:nth-child(3):after {
    content: "\f518";
}
.secnav a:nth-child(4):after {
    content: "\f086";
}
.secnav h3 {
    padding: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: white;
}
.secnav p {
    position: absolute;
    line-height: 1.4rem;
    top: 51%;
    padding: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
    margin: 0;
    color: black;   
}

/*  ==========================================================================
    Einde styling Secundaire navigatie
    ==========================================================================  */

/*  ==========================================================================
    Styling Moodboard sectie
    ==========================================================================  */


.moodboard-container {
    position: relative;
    background-color: #ffffff;
    /* lichte achtergrond met een kleine korrel */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 4 4'%3E%3Cpath fill='%23ecede7' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
    text-align: left;
    padding-top: 6vw;
    padding-bottom: 6vw;  
}
.moodboard {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    width: calc(100% - 1rem);
    -webkit-box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
    -moz-box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
    box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
}
.plaatjerechts {
    float: right;
    width: 18vw;
    height: 26vw;
    overflow: hidden;
    -webkit-box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
    -moz-box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
    box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
    margin: 8vw 0;
    background-color: black;
}
.plaatjerechts img {
    width: 18vw;
    height: 26vw;
    object-fit: cover;
}

/*  ==========================================================================
    Einde Styling Moodboard sectie
    ==========================================================================  */

/*  ==========================================================================
    Styling Stijl en Visie
    ==========================================================================  */

.stijlenvisie {
    position: relative;
    margin-bottom: 2rem;
}

/*  ==========================================================================
    Einde Styling Stijl en Visie
    ==========================================================================  */

/*  ==========================================================================
    Styling Plattegrond
    ==========================================================================  */

.plattegrond {
    background-color: #DEE6F0;
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

/*  ==========================================================================
    Eind Styling Plattegrond
    ==========================================================================  */

/*  ==========================================================================
    Portfolio styling
    ==========================================================================  */
.insta {
    position: relative;
    margin-bottom: 4rem;
}
#insta-container, #insta-container2 {
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: 1rem;
    padding-top: 0;
    padding-bottom: 0.5rem;
}
#insta-container img, #insta-container2 img {
    box-shadow: 1px 1px 2px 0 rgba(128,128,128,0.4);
    -webkit-box-shadow: 1px 1px 2px 0 rgba(128,128,128,0.4);
    -moz-box-shadow: 1px 1px 2px 0 rgba(128,128,128,0.4);
}
#insta-container img:hover, #insta-container2 img:hover {
    transform: scale(1.05);
    box-shadow: 2px 2px 4px 0 rgba(128,128,128,0.4);
    -webkit-box-shadow: 2px 2px 4px 0 rgba(128,128,128,0.4);
    -moz-box-shadow: 2px 2px 4px 0 rgba(128,128,128,0.4);
}

/*  ==========================================================================
    Einde Portfolio styling
    ==========================================================================  */

/*  ==========================================================================
    Styling nieuwe portfolio zonder insta
    ==========================================================================  */

.portfolio {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;    
}
.portfolio a {
    flex: 1 1 10%;
    position: relative;
    display: block;
    padding: 0;
    margin: 0.25rem;
    height: calc(33.33vw - 16px);
    background-color: #DEE6F0;
    background-repeat: no-repeat;
    background-size: contain;
}
.pfbg1 {
    background-image: url("../images/01_Eenvoud-Studiohelder.jpg");
    opacity: 0.99;
    transition: opacity 0.5s;
}
.pfbg1:hover, .pfbg1:focus, .pfbg1:active {
    background-image: url("../images/01_Eenvoud_portfolio-studiohelder_1024.jpg");
    opacity: 0.99;
}
.pfbg2 {
    background-image: url("../images/02_Leeshoek-Studiohelder.jpg");
    transition: opacity 0.5s;
}
.pfbg2:hover, .pfbg2:focus, .pfbg2:active {
    background-image: url("../images/02_Leeshoek_portfolio-studiohelder_1024.jpg");
    opacity: 0.99;
}
.pfbg3 {
    background-image: url("../images/03_Favoriet-Studiohelder.jpg");
    transition: opacity 0.5s; 
}
.pfbg3:hover, .pfbg3:focus, .pfbg3:active {
    background-image: url("../images/03_Favoriet_portfolio-studiohelder_1024.jpg");
    opacity: 0.99;
}
.pfbg4 {
    background-image: url("../images/04_Duurzaam-Studiohelder.jpg");
    transition: opacity 0.5s; 
}
.pfbg4:hover, .pfbg4:focus, .pfbg4:active {
    background-image: url("../images/04_Duurzaam_portfolio-studiohelder_1024.jpg");
    opacity: 0.99;
}
.pfbg5 {
    background-image: url("../images/05_Spiced-pumpkin-Studiohelder.jpg");
    opacity: 0.99;
    transition: opacity 0.5s;
}
.pfbg5:hover, .pfbg5:focus, .pfbg5:active {
    background-image: url("../images/05_Spiced-pumpkin_portfolio-studiohelder_1024.jpg");
    opacity: 0.99;
}
.pfbg6 {
    background-image: url("../images/06_Simpel-Studiohelder.jpg");
    transition: opacity 0.5s;
}
.pfbg6:hover, .pfbg6:focus, .pfbg6:active {
    background-image: url("../images/06_Simpel_portfolio-studiohelder_1024.jpg");
    opacity: 0.99;
}
.pfbg7 {
    background-image: url("../images/07_Tuin-ontwerp-Studiohelder.jpg");
    transition: opacity 0.5s; 
}
.pfbg7:hover, .pfbg7:focus, .pfbg7:active {
    background-image: url("../images/07_Tuin-ontwerp_portfolio-studiohelder_1024.jpg");
    opacity: 0.99;
}
.pfbg8 {
    background-image: url("../images/08_Mooi-Studiohelder.jpg");
    transition: opacity 0.5s; 
}
.pfbg8:hover, .pfbg8:focus, .pfbg8:active {
    background-image: url("../images/08_Mooi_portfolio-studiohelder_1024.jpg");
    opacity: 0.99;
}
.pfbg9 {
    background-image: url("../images/09_Lef-Studiohelder.jpg");
    transition: opacity 0.5s; 
}
.pfbg9:hover, .pfbg9:focus, .pfbg9:active {
    background-image: url("../images/09_Lef_portfolio-studiohelder_1024.jpg");
    opacity: 0.99;
}
.portfolio a:after {
    position: absolute;
    top: 0.75rem;
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 2rem;
    width: 100%;
    text-align: center;
    color: white;
}
.portfolio h3 {
    padding: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: white;
}
.portfolio p {
    position: absolute;
    line-height: 1.4rem;
    top: 54%;
    padding: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
    margin: 0;
    color: black;
    opacity: 0;
}

/*  ==========================================================================
    Einde styling nieuwe portfolio zonder insta
    ==========================================================================  */

/*  ==========================================================================
    Werkwijze styling
    ==========================================================================  */
.werkwijze-images-container {
    position: relative;
    overflow: visible;
    margin-bottom: 1rem;
}
.werkwijze-images-container img, .werkwijze-images-container div {
    -webkit-box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
    -moz-box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
    box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
}
.werkwijze-images-container img:first-of-type {
    max-width: 40vw;
    border: 4px solid white;
    float: left;
    margin-top: 4vw;
    margin-bottom: 8vw;
}
.werkwijze-images-container img:nth-of-type(2) {
    position: absolute;
    border: 4px solid white;
    max-width: 20vw;
    transform: rotate(15deg) translate(-1rem, 1rem);
    top: 50%;
    left: 40%;
}
.werkwijze-images-container img:last-of-type {
    max-width: 45vw;
    float: right;
}
.kleurstaal {
    background-color: #DCD2D0;
    width: 16vw;
    height: 16vw;
    transform: rotate(45deg) translate(25vw, 25vw);
}
.werkwijze-container {
    position: relative;
    color: white;
    background-color: #948B85;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.werkwijze-container h2, .werkwijze-container p, .werkwijze-container ul li  {
    color: white;
}

/*  ==========================================================================
    Einde Werkwijze styling
    ==========================================================================  */

/*  ==========================================================================
    Wie styling
    ==========================================================================  */

.wie-container {
    position: relative;  
}
.wie-container p {
    margin-right: 0;
}
.wie-portret {
    position: absolute;
    top: 0;
    right: 0;
    border: 6px solid white;
    max-width: 30vw;
    max-height: 30vw;
    transform: translate(-1rem, -3rem) rotate(2deg);
    -webkit-box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
    -moz-box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
    box-shadow: 3px 3px 21px -7px rgba(0,0,0,0.7);
}

/*  ==========================================================================
    Einde Wie styling
    ==========================================================================  */


/*  ==========================================================================
    Footer styling
    ==========================================================================  */

.footer-container {
    position: relative;
    max-width: 70rem;
    margin: 0 auto;
    min-height: 14rem;
}
footer {
    background-color: #DEE6F0;
    position: relative;
}
footer nav{  
    overflow: visible;
}
/* Contact icons */
#contactlist li a {
    text-decoration: none;
}
#contactlist li:before {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    line-height: 1.5rem;
    margin-right: 0.5rem;
    width: 1rem;
}
#contactlist li a:before {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    line-height: 1.5rem;
    margin-right: 0.5rem;
    width: 1rem;
}
#contactlist li:nth-child(1):before {
    content: "\f095";
}
#contactlist li:nth-child(2):before {
    content: "\f0e0";
}
#contactlist li:nth-child(3):before {
    content: "\f0ac";
}
#footer-show-menu {
    top: calc(100% - 3.5rem);
    right: 1rem;
    z-index: 98;    
}
#footer-show-menu-label {
    top: calc(100% - 3.5rem);
    right: 1rem;
    z-index: 98;
}
.footer-show-menu-label-in:after {
    content: "\f0c9";
    z-index: 96;
    background-color: white;
    /* Animatie v/h hamburger icon */ 
    -webkit-animation-name: streepjesin; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 750ms; /* Safari 4.0 - 8.0 */
    animation-name: streepjesin;
    animation-duration: 750ms;
}
.footer-show-menu-label-uit:after {
    content: "\f0d8";
    z-index: 98;
    background-color: #DEE6F0;
    /* Animatie v/h pijltje icon */ 
    -webkit-animation-name: pijltjein; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 750ms; /* Safari 4.0 - 8.0 */
    animation-name: pijltjein;
    animation-duration: 750ms;
}
#footer-show-menu-label:after {
    border-top-right-radius: 25%;
    border-bottom-right-radius: 0;
}
/* het menu heeft geen hoogte en is verborgen */
footer nav div {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 0;
    background-color: white;
    width: 100%;
    overflow: hidden;
    transition: height 500ms;
}
/*  na klikken op het trigram icoon (het label bovenop de checkbox)
    schuift het menu naar beneden uit en krijgt zijn normale hoogte */
#footer-show-menu:checked + div {
/*  hoogte op vaste waarde gezet ipv auto anders werkt transition niet */
    height: 10.5rem;
    z-index: 97;
    opacity:0.95;
}


/*  ==========================================================================
    Einde Footer styling
    ==========================================================================  */

/*  ==========================================================================
    Voor schermen breder dan 375px pixels
    ==========================================================================  */

@media screen and (min-width: 375px) {
    h1, h2 {
        font-size: 1.4rem;
        line-height: 2rem;
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }
    h3 {
        font-size: 1.05rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    p, blockquote, a, address, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tr, th, td {
        color: #222222;
        font-size: 0.85rem;
    }
    .logo {
        height: 9rem;
    }
    .headerlogo {
        top: -1rem;
        left: 0;
    }
    .secnav a {
        height: 36vw;
    }
    .footerlogo {
        top: -1rem;
        right: 0;
    }
    .cta, .fcta {
        position: absolute;
        top: 8rem;
        right: 1rem;
        height: 2.5rem;
        width: 10rem;
        font-size: 0.9rem;
        line-height: 2.5rem;
        text-align: left;
        padding-left: 0.75rem;
    }
    .fcta {
        position: relative;
        top: 0;
        left: 0;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .cta:after, .fcta:after {
        line-height: 2.5rem;
    }
    .welkom-tekst h2:first-of-type {
        margin-right: 8rem;
    }
    .welkom-image {
        width: 28vw;
        height: 36vw;
        /* Plaatje klein stukje verplaatsen */
        transform: translate(-0.5rem, -12rem);
    }
}
/*  ==========================================================================
    Einde schermen breder dan 375px pixels
    ==========================================================================  */

/*  ==========================================================================
    Voor schermen breder dan 480px pixels
    ==========================================================================  */

@media screen and (min-width: 480px) {
    .logo {
        position: absolute;
        height: 10rem;
    }
    .headerlogo {
        top: 0;
        left: 0;
    }
    .footerlogo {
        top: 0;
        right: 0;
    }
    .crisplogo {
        position: absolute;
        top: 1rem;
        right: 4.5rem;
        height: 4rem;
    }
    .welkom-tekst h2:first-of-type {
        margin-right: 14rem;
    }
    .welkom-tekst p:first-of-type {
        margin-right: 11rem;
    }
    .welkom-image {
        width: 28vw;
        height: 36vw;
        /* Plaatje klein stukje verplaatsen */
        margin-right: 0;
        margin-top: 0;
    }
    .hide-for-mobile {
        display: block;
    }
    .moodboard-container {
        padding-top: 6vw;
        padding-bottom: 6vw;
        max-height: 56vw;
        overflow: hidden;   
    }
    .moodboard-container .plaatjerechts {
        margin-right: 0.5rem;
    }
    .moodboard {
        width: 65%;
    }
    .wie-portret  {
        transform: translate(-2rem, -2rem) rotate(2deg);
    }
    .secnav {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;    
    }
    .secnav a {
        flex: 1 1 22%;
        height: 36vw;
    }
    .secnav a:after {
        font-size: 1.75rem;
        line-height: 1.75rem;
        width: 100%;
        text-align: center;
        color: white;
    }
    .secnav h3 {
        margin: 0;
        margin-top: 3rem;
        margin-bottom: 0.5rem;
        padding-left: 0.25rem; 
        padding-right: 0.25rem;
    }
    .secnav p, .portfolio p {
        padding-left: 0.25rem; 
        padding-right: 0.25rem;
        line-height: inherit;
        margin: 0;
        top: 55%;
    }

}
/*  ==========================================================================
    Einde schermen breder dan 480px pixels
    ==========================================================================  */

/*  ==========================================================================
    Voor schermen breder dan 520px pixels
    ==========================================================================  */

@media screen and (min-width: 520px) {

    .secnav {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;    
    }
    .secnav a {
        flex: 1 1 22%;
        height: 32vw;
    }
    .secnav h3 {
        margin-top: 3.5rem;
        margin-bottom: 1rem;
    }
    .secnav p, .portfolio p  {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

}

/*  ==========================================================================
    Voor schermen breder dan 588px pixels
    ==========================================================================  */

@media screen and (min-width: 588px) {

    .hide-for-mobile {
        display: block;
    }
    .welkom-tekst h2:first-of-type {
        margin-right: 11rem;
    }
    .welkom-tekst p:first-of-type {
        margin-right: 11rem;
    }
    .welkom-image {
        width: 28vw;
        height: 36vw;
        /* Plaatje klein stukje verplaatsen */
        margin-right: 0;
        margin-top: 2rem;
    }
    
/*  ==========================================================================
    Portfolio styling (schermen breder dan 588px pixels)
    ==========================================================================  */

    #insta-container, #insta-container2 {
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-bottom: 1rem;
    }
    #insta-container img, #insta-container2 img {
        box-shadow: 1px 1px 5px 1px rgba(128,128,128,0.4);
        -webkit-box-shadow: 1px 1px 5px 1px rgba(128,128,128,0.4);
        -moz-box-shadow: 1px 1px 5px 1px rgba(128,128,128,0.4);
    }
    #insta-container img:hover, #insta-container2 img:hover {
        width: 120%;
        box-shadow: 1px 1px 6px 2px rgba(128,128,128,0.4);
        -webkit-box-shadow: 1px 1px 6px 2px rgba(128,128,128,0.4);
        -moz-box-shadow: 1px 1px 6px 2px rgba(128,128,128,0.4);
    }

/*  ==========================================================================
    Einde Portfolio styling (schermen breder dan 588px pixels)
    ==========================================================================  */
}
/*  ==========================================================================
    Einde schermen breder dan 588px pixels
    ==========================================================================  */

/*  ==========================================================================
    Voor schermen breder dan 640px pixels
    ==========================================================================  */

@media screen and (min-width: 640px) {
    
    .secnav p {
        top: 52%;
    }
    .welkom-tekst h2:first-of-type {
        margin-right: 14rem;
    }
    .welkom-tekst p:first-of-type {
        margin-right: 14rem;
    }
    .welkom-image {
        width: 28vw;
        height: 36vw;
        /* Plaatje klein stukje verplaatsen */
        margin-right: 0;
        margin-top: 2rem;
    }
    .wie-container p {
        margin-right: 0;
    }
    .wie-portret  {
        max-width: 24vw;
        max-height: 24vw;
        transform: translate(-2rem, -3rem) rotate(2deg);
    }
    .pfbg:hover p, .pfbg:focus p, .pfbg:active p {
        opacity: 1;
        transition: opacity 0.5s;
        font-size: 75%;
        line-height: 1;
    }

}
/*  ==========================================================================
    Einde schermen breder dan 640px pixels
    ==========================================================================  */


/*  ==========================================================================
    Voor schermen breder dan 768 pixels
    ==========================================================================  */

@media screen and (min-width: 768px) {

    body {
        line-height: 1.8rem;
    }
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
        max-width: 768px;
        background-color: aqua;
    }
    header {
        margin-bottom: 2rem;
    }
    .paragraaf {
        padding-left: 2rem;
        padding-right: 2rem;
        max-width: 768px;
        margin: 0 auto;
    }
    h1, h2 {
        font-size: 2.2rem;
        padding-top: 3.5rem;
        padding-bottom: 1rem;
        line-height: 2rem;
    }
    footer h2 {
        padding-top: 3rem;
        padding-bottom: 1rem;
    }
    h3 {
        font-size: 1.2rem;
    }
    p, blockquote, a, address, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tr, th, td {
        font-size: 1.1rem;
    }
    section p:last-of-type {
        padding-bottom: 3rem;
    }
    footer p:last-of-type {
        font-size: small;
        max-width: 768px;
        padding-left: 3rem;
        padding-right: 3rem;
        margin: 0 auto;
    }
    footer p:last-of-type a {
        font-size: small;
    }
    .erismeerarrow {
        top: calc(100% - 2rem);
        right: 0;
        margin-top: -2rem;
        max-width: 3rem;
        max-height: 3rem;
    }
    .arrowparent .erismeerarrow {
        margin-top: 2rem;
        top: 40%;
    }
    .erismeerarrow:after {
        font-size: 3rem;
        width: 3rem;
        height:3rem;
    }
   
/*  ==========================================================================
    Styling of navigation (schermen breder dan 768px)
    ==========================================================================  */

    header nav {
        padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 0;
    }
    footer nav {
        padding: 1rem;
    }
    nav div {
        /* shorthand for flex-direction and flex-wrap */
        flex-flow: row nowrap;
    }
    footer nav div {
        background-color: transparent;
    }
    nav ul:first-child {
        padding-left: 1rem;
        flex: 1 1 auto;
        flex-flow: row nowrap;
        width: auto;
        margin-top: 0;
    }
    header nav ul:first-child {
        padding: 0;
        margin: 0;
    }
    nav ul:last-child {
        padding-right: 1rem;
        justify-content: space-between;
        border-left: 0px;
        flex: 10 1 auto;
        flex-flow: row nowrap;
        width: 100%;
    }
    footer nav ul:last-child {
        margin-top: 0;
    }
    nav li {
        display: inline-block;
        margin-left: 0.5rem;
        margin-right: 0;
    }
    nav .socMedia li, footer nav .socMedia li{
        margin: 0;
        margin-right: 0.5rem;
        padding: 0;
    }

/*  ==========================================================================
    End of styling of navigation (schermen breder dan 768px)
    ==========================================================================  */
    
/*  ==========================================================================
    Hamburgermenu voor de navigatie (schermen breder dan 768px)
    ==========================================================================  */
    
    #show-menu, #show-menu-label, #footer-show-menu, #footer-show-menu-label {
        display: none;
    }
    #show-menu:checked + div, #footer-show-menu:checked + div {
        /* viewport met uitgeklapt menu vergroten naar de huidige mediaquery */
        position: static;
        height: auto;
    }
    header nav div, footer nav div {
        /* viewport met ingeklapt menu vergroten naar de huidige mediaquery */
        position: static;
        overflow: visible; /* anders valt het laatste menu-item half weg */
        height: auto;
    }
    
/*  ==========================================================================
    Einde hamburgermenu voor de navigatie (schermen breder dan 768px)
    ==========================================================================  */

    
/*  ==========================================================================
    Hero styling (schermen breder dan 768px)
    ==========================================================================  */
   
    .hero {
        min-height: 24rem;
        background-image: url("../images/studiohelder-hero.jpg");
    }
    .logo {
        height: 15rem;
    }
    .cta, .fcta {
        top: 11rem;
        right: 4rem;
        height: 3rem;
        width: 15rem;
        line-height: 3rem;
        font-size: 1.4rem;
        padding-left: 1rem;
    }
    .crisplogo {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        height: 6rem;
    }
    .fcta {
        position: relative;
        top: 0;
        left: 0;
    }
    .cta:after, .fcta:after {
        line-height: 3rem;
        padding-right: 0.5rem
    }
    
/*  ==========================================================================
    End of Hero styling (schermen breder dan 768px)
    ==========================================================================  */

/*  ==========================================================================
    Styling Welkom sectie (schermen breder dan 768px)
    ==========================================================================  */

    .welkom-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .welkom-tekst p:first-of-type {
        margin-right: 10rem;
    }
    .welkom-tekst h2:first-of-type {
        margin-right: 10rem;
        line-height: 1.2;
    }
    .welkom-tekst h3:first-of-type {
        margin-right: 10rem;
    }
    .welkom-image {
        width: 28vw;
        height: 36vw;
        /* Plaatje klein stukje verplaatsen */
        margin-right: -7rem;
        margin-top: -7rem;
        -webkit-box-shadow: 7px 7px 42px -7px rgba(0,0,0,0.7);
        -moz-box-shadow: 7px 7px 42px -7px rgba(0,0,0,0.7);
        box-shadow: 7px 7px 42px -7px rgba(0,0,0,0.7);
    }

/*  ==========================================================================
    Einde styling Welkom sectie (schermen breder dan 768px)
    ==========================================================================  */

/*  ==========================================================================
    Styling Secundaire navigatie (schermen breder dan 768px)
    ==========================================================================  */
    
    .secnav {
        padding-top: 2rem;
        padding-left: 0;
        padding-right: 0;
        max-width: 768px;
        justify-content: space-between;
        margin: 0 auto;
    }
    .secnav a {
        flex: 0 0 24%; 
        height: 14rem;
        background-color: #DEE6F0;
        padding: 0;
        margin: 0;
    }
    .secnav a:after {
        top: 1rem;
        font-size: 2.25rem;
        line-height: 2.25rem;
    }
    .secnav h3 {
        padding: 0;
        margin-top: 3.5rem;
        margin-bottom: 0.5rem;
    }
    .secnav p, .portfolio p  {
        top: 50%;
        padding: 0;
        padding-left: 1rem; 
        padding-right: 1rem;
        margin: 0;
        margin-top: 1rem;  
    }
    .pfbg:hover p, .pfbg:focus p, .pfbg:active p {
        opacity: 1;
        transition: opacity 0.5s;
        font-size: 1.25;
        line-height: 1.25;
    }
    
/*  ==========================================================================
    Einde Styling Secundaire navigatie (schermen breder dan 768px)
    ==========================================================================  */

    
/*  ==========================================================================
    Styling Moodboard sectie (schermen breder dan 768px)
    ==========================================================================  */

    .moodboard-container {
        text-align: left;
        max-height: 50vw;
        padding-top: 5vw;
        padding-bottom: 5vw;
        overflow: hidden;
    }
    .moodboard {
        margin-left: 2rem;
        max-height: 40vw;
        width: auto;
        -webkit-box-shadow: 7px 7px 42px -7px rgba(0,0,0,0.7);
        -moz-box-shadow: 7px 7px 42px -7px rgba(0,0,0,0.7);
        box-shadow: 7px 7px 42px -7px rgba(0,0,0,0.7);
    }
    .moodboard-container .plaatjerechts {
        margin-right: 2rem; 
    }
    .plaatjerechts {
        width: 20vw;
        height: 30vw;
        margin: 5vw 0;
        -webkit-box-shadow: 7px 7px 42px -7px rgba(0,0,0,0.7);
        -moz-box-shadow: 7px 7px 42px -7px rgba(0,0,0,0.7);
        box-shadow: 7px 7px 42px -7px rgba(0,0,0,0.7);
    }
    .plaatjerechts img {
        width: 20vw;
        height: 30vw;
        object-fit: cover;
        object-position: bottom;
    }

/*  ==========================================================================
    Einde styling Moodboard sectie (schermen breder dan 768px)
    ==========================================================================  */

/*  ==========================================================================
    Werkwijze styling (schermen breder dan 768px)
    ==========================================================================  */

    .werkwijze-images-container img:first-of-type {
        border: 8px solid white;
    }
    .werkwijze-images-container img:nth-of-type(2) {
        border: 8px solid white;
    }
    .werkwijze-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

/*  ==========================================================================
    Einde Werkwijze styling (schermen breder dan 768px)
    ==========================================================================  */
    
/*  ==========================================================================
    Wie styling (schermen breder dan 768px)
    ==========================================================================  */
    
    .wie-container p {
        margin-right: 0;
    }
    .wie-portret  {
        max-width: 24vw;
        max-height: 24vw;
        border: 8px solid white;
        transform: translate(-2rem, -3rem) rotate(2deg);
        -webkit-box-shadow: 7px 7px 42px -7px rgba(0,0,0,0.7);
        -moz-box-shadow: 7px 7px 42px -7px rgba(0,0,0,0.7);
        box-shadow: 7px 7px 42px -7px rgba(0,0,0,0.7);
    }
    
/*  ==========================================================================
    Einde Wie styling (schermen breder dan 768px)
    ==========================================================================  */
    
/*  ==========================================================================
    Styling of footer (schermen breder dan 768px)
    ==========================================================================  */

    footer {
        /* position: relative; */
        background-color: #DEE6F0;
    }
    .footer-container {
        min-height: 24rem;
    }

/*  ==========================================================================
    End of styling of footer (schermen breder dan 768px)
    ==========================================================================  */
}
/*  ==========================================================================
    Einde schermen breder dan 768 pixels
    ==========================================================================  */

/*  ==========================================================================
    Voor schermen breder dan 1024 pixels
    ==========================================================================  */

@media screen and (min-width: 1024px) {
    header {
        margin-bottom: 4rem;
    }
    .container {
        max-width: 972px;
    }
    .paragraaf {
        max-width: 972px;
        margin: 0 auto;
    }
    .secnav {
        max-width: 972px; 
    }
    .moodboard {
        margin-left: 3rem; 
    }
    .moodboard-container .plaatjerechts {
        margin-right: 3rem; 
    }
    footer p:last-of-type {
        max-width: 972px;
        padding-left: 3rem;
        padding-right: 3rem;
        margin: 0 auto;
    }
    .welkom-tekst p:first-of-type {
        margin-right: 15rem;
    }
    .welkom-tekst h2:first-of-type {
        margin-right: 15rem;
        line-height: 1.2;
    }
    .cta {
        right: -0.75rem;
    }
    .welkom-image {
        width: 36vw;
        height: 36vw;
        max-width: 32rem;
        max-height: 32rem;
        /* Plaatje verplaatsen */
        margin-right: -13rem;
        margin-top: -9rem;
    }
    .wie-portret  {
        max-width: 16rem;
        max-height: 16rem;
        border: 10px solid white;
    }
    .wie-container p {
        margin-right: 0;
        /* voldoende afstand tussen onderkant foto en tekst */
        padding-bottom: 1rem;
    }
    .erismeerarrow {
        right: 0;
    }

}
/*  ==========================================================================
    Einde schermen breder dan 1024 pixels
    ==========================================================================  */

/*  ==========================================================================
    Voor schermen breder dan 1280 pixels
    ==========================================================================  */

    @media screen and (min-width: 1280px) {
        .welkom-container, .werkwijze-container {
            padding-left: 3rem;
            padding-right: 3rem;
        }
        nav {
            padding-top: 1.5rem;
            padding-bottom:  1.5rem;
            padding-left: 1rem;
            padding-right: 1rem;
        }
        nav a {
            font-size: 1rem;
        }
        .logo {
            height: 20rem;
        }
        .headerlogo {
            top: 0;
            left: -5rem;
        }
        .footerlogo {
            top: 0;
            right: 0;
        } 
        .container {
            max-width: 70rem;
        }
        .paragraaf {
            margin: 0 auto;
            padding-left: 3rem;
            padding-right: 3rem;
        }
        /* cta button links uitlijnen met welkom plaatje */
        .cta {
            right: 2.5rem;
        }
        .welkom-tekst p:first-of-type {
            margin-right: 14rem;
        }
        .welkom-tekst p:nth-of-type(2) {
            margin-right: 14rem;
        }
        .welkom-tekst h2:first-of-type {
            margin-right: 10rem;
            line-height: 1.2;
        }
        .welkom-tekst h3:first-of-type {
            margin-right: 10rem;
        }
        .welkom-image {
            /* Plaatje verplaatsen */
            margin-right: -18rem;
            margin-top: -7rem;
        }
        .moodboard {
            margin-left: 5rem; 
        }
        .moodboard-container .plaatjerechts {
            margin-right: 5rem; 
        }
        footer p:last-of-type {
            font-size: small;
            padding-left: 4rem;
            padding-right: 4rem;
            margin: 0 auto;
        }
        .erismeerarrow {
            right: 0;
        }
        .pfbg:hover p, .pfbg:focus p, .pfbg:active p {
            opacity: 1;
            transition: opacity 0.5s;
            font-size: initial;
            line-height: initial;
        }
}
/*  ==========================================================================
    Einde schermen breder dan 1280 pixels
    ==========================================================================  */

/*  ##########################################################################
    #       Website concept en realisatie:                                   #
    #       Tigplant, grafisch ontwerp en webdesign                          #
    #       www.tigplant.nl                                                  #
    ##########################################################################  */