body {
  font-family: 'Raleway'!important;
}

#text_intro::after {
    color: #FFFF00;
}

/*-------------------------------------------------*/
/*CSS IMAGE DE FOND */
/*-------------------------------------------------*/
.bg-image{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
max-width: 100%;height: 100vh;
}

/*-------------------------------------------------*/
/*CSS TOAST */
/*-------------------------------------------------*/
#toast {
    visibility: hidden;
    max-width: 200px;
    height: 40px;
    /*margin-left: -125px;*/
    margin: auto;
    background-color: #EE8126;
    color: #fff;
    text-align: center;
    border-radius: 5px 15px 10px;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 300px;
    font-size: 17px;
    white-space: nowrap;
}

#toast #desc{    
    color: #fff;   
    padding: 5px;    
    overflow: hidden;
    white-space: nowrap;
}

#toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
    from {top: 0; opacity: 0;} 
    to {top: 300px; opacity: 1;}
}

@keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 300px; opacity: 1;}
}

@-webkit-keyframes expand {
    from {min-width: 0px} 
    to {min-width: 200px}
}

@keyframes expand {
    from {min-width: 0px}
    to {min-width: 200px}
}
@-webkit-keyframes stay {
    from {min-width: 200px} 
    to {min-width: 200px}
}

@keyframes stay {
    from {min-width: 200px}
    to {min-width: 200px}
}
@-webkit-keyframes shrink {
    from {min-width: 200px;} 
    to {min-width: 0px;}
}

@keyframes shrink {
    from {min-width: 200px;} 
    to {min-width: 0px;}
}

@-webkit-keyframes fadeout {
    from {top: 300px; opacity: 1;} 
    to {top: 330px; opacity: 0;}
}

@keyframes fadeout {
    from {top: 300px; opacity: 1;}
    to {top: 330px; opacity: 0;}
}


/*-------------------------------------------------*/
/*CSS GOOGLE DEVELOPER */
/*-------------------------------------------------*/

controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}



#mode-selector {
  color: #fff;
  background-color: #4d90fe;
  margin-left: 12px;
  padding: 5px 11px 0px 11px;
}

#mode-selector label {
  font-family: Raleway;
  font-size: 15px;
  font-weight: 400;
}






/*-------------------------------------------------*/
/*PERSONNALISER LE BLOC TRAJET A PIED/EN VOITURE */
/*-------------------------------------------------*/
.map-control {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
  font-family: "Roboto", "sans-serif";
  font-size: 16px;
  margin: 10px;
  padding-right: 5px;
  /* Hide the control initially, to prevent it from appearing
           before the map loads.
  display: none; */
}




/*-------------------------------------------------*/
/*PERSONNALISER LE BOUTON DE RETOUR EN HAUT DE PAGE*/
/*-------------------------------------------------*/
/*Opacité du bouton et effets d'animation (pour tous les navigateurs)*/
.et_pb_scroll_top.et-visible {
    opacity: 1;
    -webkit-animation: fadeInBottom 1s;
    -moz-animation: fadeInBottom 1s;
    -o-animation: fadeInBottom 1s;
    animation: fadeInBottom 1s;
}
/*Positionnement et couleur du bouton*/
.et_pb_scroll_top.et-pb-icon {
	text-align: center;
	text-decoration: none;
	position: fixed;
	z-index: 99999;
	right: 30px; /*distance du bouton par rapport à la droite de la fenêtre*/
	bottom: 200px; /*distance du bouton par rapport au bas de la fenêtre*/
	border-radius: 5px; /*Propriété permettant d'arrondir le bouton, supprimez la si vous voulez un bouton carré*/
	font-size: 30px;
	background: rgba(4, 20, 24, 0.30); /*couleur de fond du bouton. Mettez celle que vous voulez*/
	display: none;
	cursor: pointer;                
	padding: 10px;
	color: #c1c1c1
}

.et_pb_scroll_top.et-pb-icon {
	color: #ffffff; /*  */
}

/*couleur de fond du bouton au survol*/
.et_pb_scroll_top.et-pb-icon:hover {
      background: rgba(4, 20, 24, 0.50); 
	color: #bfaea8; 
}
 
/*Choix de l'icone et couleur de celle-ci*/
.et_pb_scroll_top:before {
    content: "^"; /* icone provenant des icones de bases de Divi*/
}

 		.et_pb_scroll_top.et-visible {
                opacity: 1;
                -webkit-animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
                animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1)
            }

            .et_pb_scroll_top.et-hidden {
                opacity: 0;
                -webkit-animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
                animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1)
            }



@-webkit-keyframes fadeOutRight {
                0% {
                    opacity: 1;
                    -webkit-transform: translateX(0);
                    transform: translateX(0)
                }

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

            @keyframes fadeOutRight {
                0% {
                    opacity: 1;
                    -webkit-transform: translateX(0);
                    transform: translateX(0)
                }

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

            @-webkit-keyframes fadeInRight {
                0% {
                    opacity: 0;
                    -webkit-transform: translateX(100%);
                    transform: translateX(100%)
                }

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

            @keyframes fadeInRight {
                0% {
                    opacity: 0;
                    -webkit-transform: translateX(100%);
                    transform: translateX(100%)
                }

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