body {
    background-color: #ffffff;font-family: 'Montserrat', sans-serif;
}
.d-flex {
    display:flex;
}
.align-center {
    align-items: center;			
}
.container {
    align-items: center;
    max-width: 90%;
}
.col-L {
    padding:2em;
}
.col-R {
    max-width: 50%;
    width:50%
}	
.color-white{fill:#FFFFFF;}	
.logo {
    height: 40px;
    width: 40px;
    font-size: .5em;
    background-color: #0c3e5f;
    border-radius: 50%;
    padding: 1em;
    margin: 1em;		    
}	

header{
    margin-top: -70px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #fcfcfc;
    height: 80px;
    
    
}	
.footer{
    
}
.gidm{
   
    margin-top: 70px;
    margin-left: 100px ;
    width: 247px;
    height: 150px;
    
}

.bouton{
    background-color: #0c3e5f; /* Couleur de fond */
    border: none; /* Pas de bordure */
    color: white; /* Couleur du texte */
    padding: 20px 30px; /* Espacement intérieur */
    text-align: center; /* Alignement du texte */
    text-decoration: none; /* Pas de soulignement */
    display: inline-block; /* Affichage en ligne */
    font-size: 18px; /* Taille de police */
    margin: 4px 2px; /* Marge externe */
    cursor: pointer; /* Curseur de souris */
    border-radius: 20px; /* Coins arrondis */
    position: relative; /* Position relative */
    top: -200px; /* Décalage vers le haut */
    left: 50%; /* Décalage vers la gauche de 50% */
    transform: translateX(-50%); /* Centrage horizontal */

}
 
h1 {
    margin: 0;
    font-size: 3vmax;
    font-size: 10px;
    font-size: 3vmin;
    color:#434343;
}	
.st0{fill:#0c3e5f;}
.st1{fill:#FFB8B8;}
.st2,.st4,.st7 {
    stroke:#3F0E8C;
    stroke-miterlimit:10;
}
.st2{fill:none;}
.st3{fill:#FFFFFF;stroke:#1D1D1B;stroke-width:0.9847;stroke-miterlimit:10;}
.st4{
    fill:#00D292;
}
.st5{fill:#00D292;}
.st6{fill:#00CCCB;}
.st7{fill:#00CCCB;}
.st8{fill:none;stroke:#1D1D1B;stroke-width:0.9847;stroke-miterlimit:10;}	
.st4,.st5,.st6{
    -webkit-animation: downMotion 8s ease-in-out infinite;
    -moz-animation: downMotion 8s ease-in-out infinite;
    animation: downMotion 8s ease-in-out infinite;
}	
.st0{
    -webkit-animation: upMotion 10s ease-in-out infinite;
    -moz-animation: upMotion 10s ease-in-out infinite;
    animation: upMotion 10s ease-in-out infinite;
}
.st7,.run{
    -webkit-animation: upMotion 6s ease-in-out infinite;
    -moz-animation: upMotion 6s ease-in-out infinite;
    animation: upMotion 6s ease-in-out infinite;
}
.rotate {
    transform-origin: 116px 88px;
    -webkit-animation: 4s rotate infinite linear;
    animation: 4s rotate infinite linear;
}   		
 @keyframes downMotion {
     0% {transform: translate(0, -15px);}
     50% {transform: translate(0, 0); }
     100% {transform: translate(0, -15px);}
  }
 @-webkit-keyframes downMotion {
     0% {transform: translate(0, -15px);}
     50% {transform: translate(0, 0); }
     100% {transform: translate(0, -15px);}
  }
 @-moz-keyframes downMotion {
     0% {transform: translate(0, -15px);}
     50% {transform: translate(0, 0); }
     100% {transform: translate(0, -15px);}
  } 		  		 
 @keyframes upMotion {
     0% {transform: translate(0, 15px);}
     50% {transform: translate(0, 0); }
     100% {transform: translate(0, 15px);}
  } 
 @-webkit-keyframes upMotion {
     0% {transform: translate(0, 15px);}
     50% {transform: translate(0, 0); }
     100% {transform: translate(0, 15px);}
  }  
 @-moz-keyframes upMotion {
     0% {transform: translate(0, 15px);}
     50% {transform: translate(0, 0); }
     100% {transform: translate(0, 15px);}
  }   		 		 
@keyframes rotate {100% {transform: rotate(360deg); } }
@-webkit-keyframes rotate {100% {-webkit-transform: rotate(360deg); } }
@-moz-keyframes rotate {100% {-webkit-transform: rotate(360deg); } } 
@-o-keyframes rotate {100% {-webkit-transform: rotate(360deg); } }		 		 	
@media only screen and (min-width: 992px) {
    .container {
        justify-content: center;
        height: calc(100vh - 16px);
        display: flex;
        flex-wrap: wrap;
    }			
    .col-L {
        width:40%;
        margin-right:10%;
    }
}
@media only screen and (max-width: 991px) {
    .flex-column {
        flex-direction: column;
    }
}