@import url('https://fonts.googleapis.com/css?family=Actor&display=swap');
@import url('https://fonts.googleapis.com/css?family=Actor|Open+Sans:400,400i,600,600i,700,700i,800,800i&display=swap');

/* MAIN STYLING */

    html{
        font-family: 'Open Sans', sans-serif;
        box-sizing: border-box;
    }

    body{
        font-size: 14px;
        line-height: 22px;
    }

    a{
        text-decoration: none;
        color: #f1ad0a;
        font-weight: bold;
        letter-spacing: 0.75px;
    }

    .wrapper{
        width: 70%;
        margin: auto;
    }

/* TYPOGRAPHY */

    h1{
        font-size: 4rem;
        line-height: 4rem;
        font-weight: bold;
        color: #FAFAFA;
        font-size: calc(60px + (75 - 60) * ((100vw - 320px) / (1920 - 320)));
        line-height: calc(60px + (75 - 60) * ((100vw - 320px) / (1920 - 320)));

    }

    h2{
        font-size: 1.2rem;
    }


/* HEADER STYLING */

    header{
        background-color: #272727;
        color: #FAFAFA;
        padding: 1.2rem 0;
    }

    .text-logo{
        font-family: 'Actor', sans-serif;
        font-size: calc(30px + (40 - 30) * ((100vw - 320px) / (1920 - 320)));
        padding-bottom: 0.8rem;
        /* align-self: center; */
    }

    .text-logo a{
        color: #FAFAFA;
    }

    .logo{
        display: flex;
        align-content: center;
        flex-direction: column;
        justify-content: space-between;
    }

  



    .flex-header{
        display: flex;
        justify-content: space-between;
        padding: 0.6rem 0;
    }

    .header-info{
        text-align: right;
        color: #FAFAFA;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .header-info a{
    font-size: 1.2rem;
        margin-bottom: 0.4rem;
    }

    .header-info-mobile{
        display:none;
        text-align: right;
        color: #FAFAFA;
    }

    .header-info-mobile a{
        font-size: 1rem;
    }

    .header-br{
        display:none;
    }

/* MAIN CONTENT STYLING */

    .main-content{
        padding-top: 3.2rem;
        padding-bottom: 3.2rem;
        background-image: url('img/gijsens-8794.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .flex-inleiding{
        display: flex;
        flex-direction: column;
    }
    .tagline{
        width: 100%;
        margin-bottom: 1.6rem;
    }

    .inleiding{
        color: #FAFAFA;
    }


/* FORM STYLING */

    /* form{
        width: 70%;
        min-width: 70%;
        margin: auto;
        margin-top: 3.2rem;
    } */

    .form-mobile{
        display: none;
    }

    .form-wrapper{
        max-width: 650px;
    }

    form{
        /* min-width: 550px; */
        width: 100%;
        margin-top: 3.2rem;
        -webkit-appearance:none;
    }

    input, option, textarea, select{
        display: block;
        width: 100%;
        padding: 0.8rem;
        border-radius: 0.8rem;
        border: 1px solid #272727;
        font-size: 1rem;
        box-sizing: border-box;
    }

    input[type="text"], textarea, select {
        background-color : rgba(252, 252, 252, 0.95); 
      }

    input a{
        display: inline-block;
    }

    .input-wrapper{
        padding-bottom: 0.6rem;
    }

    select{
        width: 100%;
        box-shadow: none;
    }

    select:invalid {
        box-shadow: none;
    }

    .input-info{
        font-size: 0.7rem;
        color: #FAFAFA;
        padding-left: 0.8rem;
        font-style: italic;
    }

    .textarea-wrapper{
        width: 100%;
    }

    textarea{
        font-family: 'Open Sans', sans-serif;
        resize: none;
        width: 100%;
    }

    .form-desktop .textarea-wrapper{
        margin-bottom: 0.4rem;
    }

    .checkbox{
        color: white;
        width: auto;
    }

    .checkbox-wrapper p, .checkbox-wrapper input{
        color: #FAFAFA;
        display: inline;
    }

    .submit-button{
        color: #FAFAFA;
        background-color: #f1ad0a;
        border: none;
        font-size: 1rem;
        border-radius: 1.2rem;
        padding: 10px 20px;
        margin-top: 0.8rem;
        cursor:pointer;
        transition-duration: 0.2s;
    }


    .submit-button:hover{
        background-color: #FAFAFA;
        color: #272727;
    }

    .submit-wrapper{
        display: flex;
    }

/* FOOTER STYLING */

    footer{
        background-color: #3D4347;
        color: #FAFAFA;
    }

    .footer-info{
        display: flex;
    }

    .footer-contact span{
        padding-right: 10px;
    }

    .mail{
        padding-left: 35px;
    }


    .flex-footer{
        display: flex;
        justify-content: space-between;
        padding-bottom: 3.2rem;
    }

    .footer-section:first-of-type{
        margin-left: 0;
    }

    .footer-section:first-of-type p{
        padding-right: 1rem;
    }

    .footer-section, .footer-section-2{
        width: 100%;
        margin-left: 2rem;
    }

    .footer-section h2{
        padding-top: 1.6rem;
        padding-bottom: 0.8rem;
        border-bottom: 1px solid;
        margin-bottom: 0.8rem;
    }

    .footer-section a{
        display: block;
    }

    .footer-section button{
        text-transform: uppercase;
        background-color: #f1ad0a;
        padding: 12px 25px;
        border-radius: 50px;
        border-style: none;
        font-size: 1rem;
        /* color: #272727; */
        color: #FAFAFA;
        margin-top: 0.8rem;
        font-weight: medium;
        text-shadow: #272727 1px 1px 0.5;
        transition-duration: 0.2s;
        letter-spacing: 1px;
        cursor: pointer;
    }

    .footer-section button:hover{
        background-color: #FAFAFA;
        color: #272727;
    }

    .footer-flex{
        display: flex;
        /* justify-content: center; */
        align-items: center;
    }

    :-moz-ui-invalid:not(output) {
        box-shadow: none;
    }

    .footer-openingsuren p:nth-of-type(2){
        margin-top: 0.4rem;
    }

    .footer-openingsuren p:nth-of-type(3){
        font-style: italic;
    }

    /* .footer-gijsens{
        margin-top: 2rem;
    } */

    .legalfooter{
        background-color: #272727;
        font-size: 0.65rem;
        display: flex;
        justify-content: space-between;
        padding: 0.6rem 0;
    }

    .legalfooter .flex-footer{
        padding-bottom: 0;
    }

    .legalfooter small{
        align-self: center;
    }


/* PRIVACYVERKLARING STYLING */

    .privacybeleid{
        padding: 3.2rem 0;
        color: #3d4347;
    }

    /* .privacybeleid .wrapper{
        padding-left: 
    } */

    .privacybeleid h2{
        font-weight: bold;
        font-size: 2.2rem;
        padding-bottom: 1.6rem;
    }

    .privacybeleid h2+p{
        padding-bottom: 3.2em;
        padding-left: 0;
    }

    .privacybeleid h3{
        font-weight: bold;
        padding-bottom: 0.2rem;
    }

    .privacybeleid p{
        padding-bottom: 1.6rem;
        padding-left: 1.2rem;
    }

    .second-paragraph{
        padding-bottom: 0.8em;
    }

/* MEDIA QUERIES */



    @media screen and (max-width: 414px){
        .tagline br{
            display: none;
        }

    }

    @media screen and (max-width: 480px){
        .flex-header{
            /* display: block; */
            flex-direction: column;
        }

        .flex-header p{
            text-align: left;
        }

        .header-info-mobile{
            line-height: 1rem;
        }

        .header-info-mobile a{
            display: none;
        }

        .header-br{
            display: inline;
        }

        .header-info-mobile{
            display: none;
        }
    }

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

        body{
            background-color: lightgrey;
        }

        .privacybeleid{
            background-color: #FAFAFA;
        }

        .wrapper{
            min-width: 87.5%;
        }



        .logo-tagline{
            text-align: left;
        }

        .header-info-mobile{
            font-size: 0.8rem;
        }



        .inleiding br{
            display: none;
        }

        .inleiding p{
            background-color: rgba(39, 39, 39, 0.9);
            padding: 1rem;

        }

        form{
            width: 100%;
        }

        .form-desktop{
            display: none;
        }

        .form-mobile{
            display: block;
            background-color: lightgrey;
            padding-bottom: 1.6rem;
        }

        input, option, textarea, select, button{
            font-size: 0.8rem;
    
        }

        .checkbox-wrapper a{
            text-decoration: underline;
        }

        .checkbox-wrapper p{
            color: rgba(39, 39, 39, 0.9);
            font-size: 0.8rem;
        }

        .input-info{
            color: rgba(39, 39, 39, 0.9);
        }

        .telnr{
            color: #f1ad0a;
        }

        .header-info-mobile{
            /* display:block; */
            display: none;
        }

        .header-info{
            display:none;
        }

    }

    @media screen and (max-width: 1024px){

        /* .wrapper{
            min-width: 80%;
        } */

        .wrapper{
            width: 85%;
        }

        .flex-footer{
            flex-direction: column;
        }

        .footer-section{
            width: 100%;
            margin-left: 0;
        }

        h1{
            font-size: calc(50px + (80 - 50) * ((100vw - 320px) / (1920 - 320)));
            line-height: calc(50px + (80 - 50) * ((100vw - 320px) / (1920 - 320)));
        }

        /* .logo-tagline{
            display: none;
        } */

        .footer-info{
            margin-bottom: 0.6rem;
        }
    }