@charset "UTF-8";
/**
Fonts
*/
@import url(https://fonts.googleapis.com/css?family=Nunito:300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
@font-face {
    font-family: 'Le_Super_Type_Regular';
    src: url("fonts/Le_Super_Type_Regular.eot");
    src: local("☺"), url("fonts/Le_Super_Type_Regular.woff") format("woff"), url("fonts/Le_Super_Type_Regular.ttf") format("truetype"), url("fonts/Le_Super_Type_Regular.svg") format("svg");
    font-weight: normal;
    font-style: normal; }

body {
    font-size: 16px;
    font-family: "Nunito", sans-serif;
    font-weight: 200;
    background-color: #F2FCFF;
    color: #006283;
}

h1 {
    font-family: "Le_Super_Type_Regular", "Open Sans", sans-serif;
    color: #006283;
}

h2, h3, h4, h5, h6 {
    font-family: "Open Sans", sans-serif;
    color: #006283;
}


    .full-width-image-1 {
        background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)), url('images/veere_leeg_kwartet_ripley.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 50px 0;
    }

    .full-width-image-2 {
        background: url("images/Sandro_Botticelli_-_La_nascita_di_Venere.jpg") no-repeat center center;
        background-size: cover;
        text-align: center;
        height: 450px;
    }

    .dark, .footer {
        background-color: #006283;
        color: #0DC2FF;
    }

    .dark h2 {
        color: #0DC2FF;
    }

    .container-full {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        background-color: fuchsia;
    }

    p.lead.section-lead, p.section-paragraph, h2.section-heading, p.section-paragraph, ol > li {
        color: #0DC2FF
    }

    footer {
        background-color: #006283;
        color: #0DC2FF;
        font-size: 0.8em;
        margin: 0px 0;
        padding: 3%;
    }

    .in-image-text {
        display: inline-block;
        width: 80%;
        height: 50%;
        color: #F2FCFF;
        font-size: 1.5em;
        margin: 0% 4%;
        text-shadow: 2px 1px 2px #0DC2FF;
    }

    .in-image-text h1 {
        font-size: 1.5em;
    }

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset;
    }

    input:-webkit-autofill:first-line {
        color: #006283;
    }

    .social {
        display: block;
    }

    .social a {
        font-size: 1em;
        line-height: 1.25em;
        padding: 0.625em 1.25em 0.625em 2.5em;
        margin-right: 0.3125em;
        border-radius: 0.3125em;
        background-image: url("images/social.svg");
        -webkit-background-size: 1.875em 10em;
        -o-background-size: 1.875em 10em;
        -moz-background-size: 1.875em 10em;
        background-size: 1.875em 10em;
        /* styles carried over from the original implementation */
        background-repeat: no-repeat;
        background-color: #006283;
        color: #0DC2FF;
        display: inline-block;
        float: left;
        text-decoration: none;
        text-shadow: 0 -1px 2px #2C1623;
        width: 70%;
    }

    .social a:hover {
        color: #00A4DA;
        text-decoration: none;
        -webkit-transition: color 0.2s ease;
        -moz-transition: color 0.2s ease;
        -o-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .social .a-github {
        background-position: 0.25em 0em;
    }

    .social .a-linkedin {
        background-position: 0.25em -7.5em;
    }

    .section {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .section-heading {
        font-size: 3em;
        margin: 30px 0;
    }

    .section-lead {
        margin: 30px 0;
    }

    .section-paragraph {
        margin: 30px 0;
    }

    /* ==========================================================================
       Media Queries
       ========================================================================== */

    @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
        .in-image-text {
            width: 80%;
            font-size: 1em;
            padding-top: 10%;
        }

        .in-image-text h1 {
            font-size: 1.5em;
        }
    }
    @media only screen and (min-width: 480px) {
        .in-image-text {
            width: 80%;
            font-size: 1.4em;
            padding-top: 2%;
            margin-left: 2%;
        }

        .in-image-text h1 {
            font-size: 1.5em;
        }
    }
    @media only screen and (min-width: 768px) {
        .in-image-text {
            width: 70%;
            font-size: 1.5em;
            margin-left: 7%;
        }

        .in-image-text h1 {
            font-size: 2em;
        }
    }
    @media (max-width: 768px) {
        .section-heading {
            font-size: 2em;
        }

        .section {
            padding-top: 25px;
            padding-bottom: 25px;
        }
    }
    @media only screen and (min-width: 1140px) {
        /* ===============
            Maximal Width
           =============== */
        .in-image-text {
            display: inline-block;
            width: 50%;
            height: 50%;
            color: white;
            font-size: 1.7em;
            margin: 0% 10%;
            text-shadow: 2px 1px 2px black;
        }

        .in-image-text h1 {
            font-size: 2.5em;
        }
    }