.button
{
    position: absolute;
    cursor: pointer;
    transition: opacity 0.35s, transform 0.35s;
    background-color: #FFFFFF;
    border: solid #FFFFFF 1.5rem;
    border-radius: 5rem;
    padding : 2rem 5rem 2rem 5rem;
    text-align: center;
    vertical-align: middle;
    font-size: 3rem;
    color:#41555C;
}
/*Tous les overlays partagent cette classe */
.overlay {
    position: absolute;
    left:0;
    top:0;
    bottom: 0px;
    right: 0px;
    z-index: 100;
    background-color: transparent;
}
/* Cette classe permet de cacher touts div au départ */
.hidden{
    display: none !important;
}
.fadeIn{
    animation-duration: 0.5s;
    animation-name: animFadeIn;
    animation-iteration-count: 1;
}

/*Animation sur les overlay pour fade in*/
@keyframes animFadeIn {
    from {
        opacity:0;
    }

    to {
        opacity:1;
    }
}

.button:hover{
    transform: translate3d(0,-10%,10vw);
    opacity: 0.5;
}

/*COMMENCER*/

#debuter #btnDebuter{
    bottom: 14rem;
    left: 42%;
}

/*Overlay #1 START     */
#choix1{
    background-color: transparent;
    display: block;
}


#choix1 #btnFastFood{
    left:30%;
    bottom:15%;
}
#choix1 #btnBio{
    right:30%;
    bottom:15%;
}
/*Overlay #1 END      */

/*overlay continuer1*/

#continuer1 #continuer1{
    bottom: 2rem;
    left: 43%;
}

#continuer2 #continuer2{
    bottom: 2rem;
    left: 43%;
}

#continuer3 #continuer3{
    bottom: 2rem;
    left: 43%;
}

#continuer4 #continuer4{
    bottom: 2rem;
    left: 43%;
}

/*overlay choix 3*/
#choix3 #btnVentilateur{
    bottom: 10%;
    left: 15%;
}

#choix3 #btnClimatiseur{
    bottom: 10%;
    right: 15%;
}

/*Overlay choix 4*/
#choix4 #btnVelo{
    bottom: 10%;
    left: 15%;
}

#choix4 #btnVoiture{
    bottom: 10%;
    right: 15%;
}

/*Overlay choix5*/
#choix5 #btnSupermarche{
    bottom: 10%;
    left: 15%;
}

#choix5 #btnEpicerie{
    bottom: 10%;
    right: 15%;
}



/* overlay shinning START*/
#choix-shinning #btnOpen{
    left:50%;
    top:30%;
}
#choix-shinning #btnNo{
    right:160px;
    bottom:200px;
}

#choix-shinning #btnTest{
    left: 500px;
    bottom: 600px;
}
/* overlay shinning END*/


/*Overlay #2 START  -- Carte google   */
#googleMap #map{
    max-height: 100%;
    height: 100%;
    background-color: transparent!important;

}
/*Overlay #2 END  -- Carte google */


/*Overlay #3 START  -- Carte google   */
#overlay3{
    background-color: #cccccc;
    align-items: center;
    justify-content: center;

}
/*Overlay #3 END  -- Carte google */


/*Overlay FIN START     */
#fin{
    background-color: #41555C;
    display: flex;
    align-items: center;
    justify-content: center;
}
#fin span{
    font-family: "Arial";
    font-size: 15em;
    animation-duration: 0.5s;
    animation-name: animFin;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/*Overlay FIN END     */

/*Animation sur le mot fin*/
@keyframes animFin {
    from {
        opacity:1;
        rotation: 0deg;
    }

    to {
        opacity:0;
        rotation: 180deg;
    }
}