* {
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
}

/* ANIMATIONS ====================================================================== */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeUp {
    0% {
        opacity          : 0;
        -webkit-transform: translate(0, 60px);
        transform        : translate(0, 60px);
    }

    100% {
        opacity          : 1;
        -webkit-transform: translate(0);
        transform        : translate(0);
    }
}

@keyframes fadeUp {
    0% {
        opacity          : 0;
        -webkit-transform: translate(0, 60px);
        transform        : translate(0, 60px);
    }

    100% {
        opacity          : 1;
        -webkit-transform: translate(0);
        transform        : translate(0);
    }
}

.fadeanimation {
    opacity: 0;
}

.fadeanimation.fadeIn {
    -webkit-animation: fadeIn 1s ease-in-out forwards;
    animation        : fadeIn 1s ease-in-out forwards;
}

.fadeanimation.fadeUp {
    -webkit-animation: fadeUp 1s ease-in-out forwards;
    animation        : fadeUp 1s ease-in-out forwards;

}

.fadeanimation.fadeIn.delay03 {
    -webkit-animation-delay: .3s;
    animation-delay        : .3s;
}

.fadeanimation.fadeIn.delay05 {
    -webkit-animation-delay: .5s;
    animation-delay        : .5s;
}

.fadeanimation.fadeIn.delay07 {
    -webkit-animation-delay: .7s;
    animation-delay        : .7s;
}

.fadeanimation.fadeIn.delay10 {
    -webkit-animation-delay: 1s;
    animation-delay        : 1s;
}

.fadeanimation.fadeIn.delay12 {
    -webkit-animation-delay: 1.2s;
    animation-delay        : 1.2s;
}

.fadeanimation.fadeIn.delay15 {
    -webkit-animation-delay: 1.5s;
    animation-delay        : 1.5s;
}

.fadeanimation.fadeUp.delay03 {
    -webkit-animation-delay: .3s;
    animation-delay        : .3s;
}

.fadeanimation.fadeUp.delay05 {
    -webkit-animation-delay: .5s;
    animation-delay        : .5s;
}

.fadeanimation.fadeUp.delay07 {
    -webkit-animation-delay: .7s;
    animation-delay        : .7s;
}

.fadeanimation.fadeUp.delay10 {
    -webkit-animation-delay: 1s;
    animation-delay        : 1s;
}

.fadeanimation.fadeUp.delay12 {
    -webkit-animation-delay: 1.2s;
    animation-delay        : 1.2s;
}

.fadeanimation.fadeUp.delay15 {
    -webkit-animation-delay: 1.5s;
    animation-delay        : 1.5s;
}


/* STYLES ====================================================================== */
html {
    height: 100%;
}

body {
    margin            : 0;
    padding           : 0;
    height            : 100%;
    width             : 100%;
    /*background-color: rgb(191,185,177);*/
    background-color  : #ffffff;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing    : 0;
    line-height       : 1.66;
    color             : #000000;
    line-height       : 1.5;
    font-size: 20px;
    /*background-image: url('../images/scorpiaux-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;*/
}

.content {
    height               : 100%;
    width                : 100%;
    -webkit-box-sizing   : border-box;
    box-sizing           : border-box;
    padding              : 40px;
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
    -webkit-box-pack     : center;
    -ms-flex-pack        : center;
    justify-content      : center;
    -webkit-box-align    : center;
    -ms-flex-align       : center;
    align-items          : center;
    text-align           : center;
}

.content img {
    width      : 100%;
    height     : auto;
    max-width  : 380px;
    /*max-width: 200px;*/
    margin     : 0 0 60px 0;
    display    : block;
}

.content h1 {
    font-size     : 40px;
    margin     : 0 0 30px 0;
}

.content p{
    margin   : 0 auto;
    padding  : 0;
    max-width: 450px;
}

.content a {
    color          : #000000;
    text-decoration: none;
}

.content a:hover {
    text-decoration: underline;
}

.content .buttons {
    margin-top: 25px;
}
footer{
    position: absolute;
    left: 0;
    bottom: 25px;
    width: 100%;
    font-size: 12px;
}
@media only screen and (max-width: 500px) {
    .content img {
        max-width: 200px;
        margin   : 0 0 60px 0;
    }
}