@font-face {
    font-family: 'Lora';
    src: url(/template/Lora-VariableFont_wght.ttf);
}


body {
    font-family: 'Open Sans', Arial, Helvetica, san-serif;
    background-color: #FFC9BD;
}


h1 {
    font-size: 64px;
    font-family: 'Lora', 'Times New Roman';
    font-weight: 700;
    color: #2B374F;
}

section div {
    max-width: 900px;
    margin: auto;
}

#section1, #section3 {
    background-color: #FFC9BD;
    height: 100vh;
    padding-top: 128px;
}
#section2 {
    padding-top: 128px;
    padding-bottom: 128px;
    background-color: #F27460;
    border-top: 24px solid #913538;
}

#hero h1 {
}

.button.primary {
    background-color: #5F959E;
}

#hero .button.primary {
    margin-top: 24px;
}

#hero img {
    max-width: 800px;
    float: right;
    margin-top: -96px;
    margin-right: -128px;
}

#hero .fa-arrow-down {
    color: #5F959E;
    position: absolute;
    left: 50%;
    bottom: 48px;
    font-size: 24px;
    animation: MoveUpDown 3s ease-in-out infinite;
}

@-webkit-keyframes MoveUpDown {
    0% {
        bottom: 48px;
    }
    50% { 
        bottom: 64px;
    }
    100% {
        bottom: 48px;
    }
}

.stat-container {
    background-color: #fffafa;
    padding: 24px;
    text-align: center;
    opacity: .6;
}

.stat-container .number {
    display: block;
    font-size: 64px;
    font-weight: 400; 
    color: #2B374F;
}

.stat-container .desc {
    font-family: 'Lora', 'Times New Roman';
    display: block;
    color: #2e3a4a; 
}

/* 

light accent: #f1dd28;
OKERGEEL: #e8d315;
dark accent: #d0a90d;

donkerblauw: #003C5A;
hover (licht): #005b88;
*/

/* Color Theme Swatches in Hex */
.Soft--Warm-1-hex { color: #2B374F; }
.Soft--Warm-2-hex { color: #5F959E; }
.Soft--Warm-3-hex { color: #FFC9BD; }
.Soft--Warm-4-hex { color: #F27460; }
.Soft--Warm-5-hex { color: #913538; }