@charset "UTF-8";

@font-face {
    font-family: 'palosecolight';
    src: url('../fonts/paloseco-light-webfont.woff2') format('woff2'),
         url('../fonts/paloseco-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'palosecomedium';
    src: url('../fonts/paloseco-medium-webfont.woff2') format('woff2'),
         url('../fonts/paloseco-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/* STYLES POUR LES BALISES HTML */


body {
    width: 100vw;
    height: 100vh;
    background-image: url(../images/fond.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: bottom right;
    overflow: hidden;
    content: "";
    display: block;
    clear: both;
    font-family: "palosecolight", helvetica, verdana, sans-serif;
    color: #314671;
}

h1 {
    font-family: "palosecolight", helvetica, verdana, sans-serif;
    font-size: 1.4em;
    text-transform: uppercase;
    text-align: center;
}

h2 {
    font-family: "palosecolight", helvetica, verdana, sans-serif;
    font-size: 1.2em;
    text-align: center;
}
p {
    font-family: helvetica, verdana, sans-serif;
    font-size: 0.7em;
    line-height: 0.2em;
    color: #314671;
    text-align: center;
}

label{
    font-family: "palosecolight", helvetica, verdana, sans-serif;
    font-size: 1em;
    text-align: center;
}

input {
    background-color: #f0eef9;
    border: none;
    width: 100%;
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 10px;
}
textarea {
    background-color: #f0eef9;
    border: none;
    width: 100%;
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 10px;
}
#bouton {
    color: #f0eef9;
    background-color: #314671;
    width: 50%;
    padding: 10px;
    margin-top: 20px;
    margin-left: 25%;
    border-radius: 20px;
    border: none
}


input[type="button"] {
    font-size: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

hr{
    overflow: hidden;
    border-style: solid;
    border-width: 0.5px;
}







 





.conteneur1{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 1033px;
    height: 2000px;
    animation: defile 20s linear infinite;
}
.conteneur2{
    position: absolute;
    bottom: 0px;
    right: -100vw;
    width: 1033px;
    height: 2000px;
    animation: defile 20s linear infinite 10s;
}


@keyframes defile {
    0% {
        right: calc(0vw - 1033px);
    }
    100% {
        right: 100vw;
    }
}


.train{
    position: absolute;
    width: 100%;
    height: 140px;
    bottom: 0;
    background-image: url(../images/train.png);
    background-repeat: no-repeat;
    background-position:0% 50%;
}
/* pile 1*/ 
.p1-bleu{
    position: absolute;
    bottom: 465px;
    left: 100px;
    animation: p1-bleu 20s infinite;
}
.p1-rouge{
    position: absolute;
    bottom: 294px;
    left: 48px;
    animation: p1-rouge 20s infinite;
}
.p1-craft{
    position: absolute;
    bottom: 124px;
    left: 74px;
    animation: p1-craft 20s infinite;
}
/* pile 1 c2*/ 
.c2-p1-bleu{
    position: absolute;
    bottom: 465px;
    left: 100px;
    animation: p1-bleu 20s infinite 10s;
}
.c2-p1-rouge{
    position: absolute;
    bottom: 294px;
    left: 48px;
    animation: p1-rouge 20s infinite 10s;
}
.c2-p1-craft{
    position: absolute;
    bottom: 124px;
    left: 74px;
    animation: p1-craft 20s infinite 10s;
}


@keyframes p1-bleu {
    0% {
        opacity: 0;
        bottom: 2465px;
    }
    20% {
        opacity: 0;
    }
    25% {
        opacity: 1;
        bottom: 2465px;
    }
    50% {
        bottom: 465px;
    }
}
@keyframes p1-rouge {
    0% {
        opacity: 0;
        bottom: 2294px;
    }
    15% {
        opacity: 0;
    }
    20% {
        opacity: 1;
        bottom: 2294px;
    }
    45% {
        bottom: 294px;
    }
}
@keyframes p1-craft {
    0% {
        opacity: 0;
        bottom: 2124px;
    }
    15% {
        opacity: 1;
        bottom: 2124px;
    }
    40% {
        bottom: 124px;
    }
}





/* pile 2*/ 
.p2-rouge{
    position: absolute;
    bottom: 418px;
    left: 448px;
    animation: p2-rouge 20s infinite;
}
.p2-craft{
    position: absolute;
    bottom: 247px;
    left: 420px;
    animation: p2-craft 20s infinite;
}
.p2-bleu1{
    position: absolute;
    bottom: 130px;
    left: 360px;
    animation: p2-bleu1 20s infinite;
}
.p2-bleu2{
    position: absolute;
    bottom: 124px;
    left:500px;
    animation: p2-bleu2 20s infinite;
}
/* pile 2 c2*/ 
.c2-p2-rouge{
    position: absolute;
    bottom: 417px;
    left: 448px;
    animation: p2-rouge 20s infinite 10s;
}
.c2-p2-craft{
    position: absolute;
    bottom: 247px;
    left: 420px;
    animation: p2-craft 20s infinite 10s;
}
.c2-p2-bleu1{
    position: absolute;
    bottom: 130px;
    left: 360px;
    animation: p2-bleu1 20s infinite 10s;
}
.c2-p2-bleu2{
    position: absolute;
    bottom: 124px;
    left:500px;
    animation: p2-bleu2 20s infinite 10s;
}



@keyframes p2-rouge {
    0% {
        opacity: 0;
        bottom: 2417px;
    }
    40% {
        opacity: 0;
    }
    45% {
        opacity: 1;
        bottom: 2417px;
    }
    70% {
        bottom: 417px;
    }
}
@keyframes p2-craft {
    0% {
        opacity: 0;
        bottom: 2247px;
    }
    35% {
        opacity: 0;
    }
    40% {
        opacity: 1;
        bottom: 2247px;
    }
    65% {
        bottom: 247px;
    }
}
@keyframes p2-bleu1 {
    0% {
        opacity: 0;
        bottom: 2130px;
    }
    30% {
        opacity: 0;
    }
    35% {
        opacity: 1;
        bottom: 2130px;
    }
    60% {
        bottom: 130px;
    }
}
@keyframes p2-bleu2 {
    0% {
        opacity: 0;
        bottom: 2124px;
    }
    25% {
        opacity: 0;
    }
    30% {
        opacity: 1;
        bottom: 2124px;
    }
    55% {
        bottom: 124px;
    }
}


/* pile 3*/ 
.p3-bleu1{
    position: absolute;
    bottom: 460px;
    left: 760px;
    animation: p3-bleu1 20s infinite;
}
.p3-bleu2{
    position: absolute;
    bottom: 583px;
    left: 779px;
    animation: p3-bleu2 20s infinite;
}
.p3-craft{
    position: absolute;
    bottom: 289px;
    left: 747px;
    animation: p3-craft 20s infinite;
}
.p3-rouge{
    position: absolute;
    bottom: 118px;
    left: 736px;
    animation: p3-rouge 20s infinite;
}
/* pile 3 c2*/ 
.c2-p3-bleu1{
    position: absolute;
    bottom: 460px;
    left: 760px;
    animation: p3-bleu1 20s infinite 10s;
}
.c2-p3-bleu2{
    position: absolute;
    bottom: 583px;
    left: 779px;
    animation: p3-bleu2 20s infinite 10s;
}
.c2-p3-craft{
    position: absolute;
    bottom: 289px;
    left: 747px;
    animation: p3-craft 20s infinite 10s;
}
.c2-p3-rouge{
    position: absolute;
    bottom: 118px;
    left: 736px;
    animation: p3-rouge 20s infinite 10s;
}


@keyframes p3-bleu2{
    0% {
        opacity: 0;
        bottom: 2583px;
    }
    60%{
        opacity: 0;
    }
    65% {
        opacity: 1;
        bottom: 2583px;
    }
    90% {
        bottom: 583px;
    }
}
@keyframes p3-bleu1{
    0% {
        opacity: 0;
        bottom: 2460px;
    }
    55%{
        opacity: 0;
    }
    60% {
        opacity: 1;
        bottom: 2460px;
    }
    85% {
        bottom: 460px;
    }
}
@keyframes p3-craft {
    0% {
        opacity: 0;
        bottom: 2289px;
    }
    50%{
        opacity: 0;
    }
    55% {
        opacity: 1;
        bottom: 2289px;
    }
    80% {
        bottom: 289px;
    }
}
@keyframes p3-rouge {
    0% {
        opacity: 0;
    }
    45%{
        opacity: 0;
    }
    50% {
        opacity: 1;
        bottom: 2118px;
    }
    75% {
        bottom: 118px;
    }
}


.position-droite {
    float: right;
    position: relative;
    margin-right: 10px;
    margin-top: 10px;
    padding: 25px;
    z-index: 999;
}

.fond-formulair {
    padding: 20px;
    margin-top: 10px;
    width: 300px;
    height: auto;
    background-color: #a5bfdb;
    border-right: solid 50px #7997bc;
}


.formulair-craft{
    float: right;
    position: absolute;
    right: 40px;
    top: 150px;
    z-index: 888;
    min-height: 171px;
    min-width: 201px;
}
.formulair-craft img{
    position: absolute;
    bottom: 0;
}
#logo{
    position: relative;
    width: 140px;
    margin-left: -70px;
    left: 50%;
}