/*
Auteure: Camille Pousin
URL: https://camillepousin.ch
Description: mise en forme du didacticiel vaudois pour la naturalisation
*/

/* Typographie et mise en forme des textes */

h1 {
	font-family: Roboto Condensed !important;
	font-weight: 50 !important;
	color: #565656 !important;
	}


h2, h3 {
	font-family: Roboto Condensed !important;
	font-weight: 50 !important;
	color: #565656 !important;
	}
	
	
p 	{
	font-family: Roboto !important;
	line-height: 150% !important;
	font-weight: 300 !important;
	text-align: left !important;
	}

a	{
	color: #565656 !important;
	text-decoration: underline !important;
	cursor: pointer !important;  
	}

strong {
	font-weight: 300 !important;
	}
	
ul, li {
	font-family: Roboto !important;
	line-height: 150% !important;
	font-weight: 300 !important;
	text-align: left !important;
	list-style-type: none !important;
	padding-left: 0 !important;
	cursor: pointer !important;  
	}

li.tdm {
	font-family: Roboto Condensed !important;
	line-height: 40% !important;
	font-weight: 300 !important;
	text-align: left !important;
	list-style-type: none !important;
	padding-left: 0 !important;
	cursor: pointer !important;  
}

.legende {
	font-family: Roboto Condensed !important;
	font-weight: 100 !important;
	color: #565656 !important;	
}
.explBtnPlay {
	font-family: Roboto !important;
	font-style: italic !important;
}

.btnGrey {
	font-family: Roboto Condensed !important;
	font-weight: 300 !important;
	}

.footer {
	font-family: Roboto Condensed !important;
	font-weight: 300 !important;
	}

.fond {
	box-shadow: 0px 0px 10px #CDCDCD !important;
}

.container {
	box-shadow: 0px 0px 0px rgba(255,255,255, 0) !important;
}

.containerMob {
	background-color: #FFFFFF !important;
	width: 100vw !important;
}

.geo {color: #71c67e !important;}

.hist {color: #F57B35 !important;}

.pol {color: #A990E9 !important;}

.soc {color: #53ABF9 !important;}

.grey {color: #565656 !important;}

.fine {
	font-size: 0.3em !important;
	line-height:normal !important;
	}

*:focus, div[role=button]:focus {
	outline: none !important;
}

@media screen and (max-width: 900px) {
*:focus, div[role=button]:focus {
	outline: none !important;
}
}

/* Position des éléments fixes */
.sticky {
	position: fixed !important;
	top: 0 !important;
	}
		
/* Animation des images */
@keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
	}
	
.animate {
	animation: fadein 3.5s linear;
	}
	
@media screen and (max-width: 576px) {
	.BtnHomeGener {
	transform: scale(0.7);
	}
}

/* Mise en page du menu */
.sidenav {
	height: 100vmax !important;
	width: 0; /* la propriété change avec JavaScript */
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 1 !important;
	background-color: #FFF !important;
	overflow-x: hidden !important;
	transition: 0.4s ease;
}

/* Bouton pour ouvrir le menu */
.menubtn {
	font-family: Roboto Condensed !important;
	font-weight: 200 !important;
	font-size: 26px !important;
	color: #565656 !important;
	text-align: left !important;
	background-color: #FFF !important;
	border-style: none !important;
	cursor: pointer !important;  
}

.menuS {
	font-size: 24px !important;
}

/* Liens du menu */
.nav-btn, .sidenav .closebtn, .closebtn {
	position: relative !important;
	padding: 1.5em 0.3em 1.5em 1.8em !important;
	text-decoration: none !important;
	font-family: Roboto Condensed !important;
	font-weight: 200 !important;
	font-size: 22px !important;
	line-height: 110% !important;  
	color: #565656 !important;
	text-align: left !important;
	display: inline-block !important;
	width: 100% !important;
	background-color: #FFF !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: #FFFFFF !important;
	border-bottom-color: #ECECEC !important;
	cursor: pointer !important;  
}
.closebtnS {
	font-size: 20px !important;
}

.closeMenu {
	top: 0 !important;
}

/* Change la couleur au survol des boutons et liens */
.nav-btn:hover, .closebtn:hover {
	background-color: #ECECEC !important;
}


/* Sur les écrans de moins de 450px de haut, adapter la taille de la police et le padding */
@media screen and (max-width: 577px) {
  .nav-btn, .sidenav .closebtn  {
	padding: 2em 0.3em 2em 4em !important;
	font-size: 20px !important;
	line-height: 90% !important;  
  }
  .menubtn {
	font-size: 22px !important;
  }
  .menuS {
  	display: none !important;
  }
} 


 /* Overlay */
.overlay { 
  height: 100vmax !important;
  width: 0; /* la propriété change avec JavaScript */
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  background-color: rgba(255,255,255, 0.8);
  overflow-x: hidden !important;
  transition: 0.2s;
}