

* {margin:0; padding:0; font-size:1em; box-sizing:border-box;}
a img {border:0;}
a {
	text-decoration: none;
}
body {  
	background-color:#182180;
	font-family: 'Montserrat', sans-serif;
}


.formulaire1{
	display:flex;
	justify-content: center;
}

.formulaire1-titre {

	text-align: center;
	line-height: 1.4em;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
}


.ex-blanc {
	font-family: 'Montserrat', sans-serif;
	color: #ffffff;
	font-size: 0.65em;
	font-weight: 400;
	background-color: transparent;
	width: 250px;
	display: flex;
	justify-content: left;
}



.ex-rouge {
	font-family: 'Montserrat', sans-serif;
	color: #ff3b34;
	font-size: 0.65em;
	font-weight: 400;
	background-color: transparent;
	width: 250px;
	display: flex;
	justify-content: left;
}




.progression{
	background: rgba(255, 255, 255, 0.2);
	margin: 0 auto;
	width: 250px;
	height: 10px ;
	border-radius: 10px;
	display:flex;
	justify-content: left;
}

.progression2{
	background: transparent;
	width: 250px;
	height: 19px ;
	margin: 0 auto;
	padding-left: 70px;
	display:flex;
	justify-content: left;
	align-items: flex-end;
	font-family: 'Montserrat', sans-serif;
	color: #2ec0dc;
	font-size: 0.7em;
	font-weight: 600;
}


.progression3{
	background: transparent;
	width: 250px;
	height: 19px ;
	margin: 0 auto;
	padding-left: 150px;
	display:flex;
	justify-content: left;
	align-items: flex-end;
	font-family: 'Montserrat', sans-serif;
	color: #2ec0dc;
	font-size: 0.7em;
	font-weight: 600;
}


.progression4{
	background: transparent;
	width: 250px;
	height: 19px ;
	margin: 0 auto;
	padding-left: 233px;
	display:flex;
	justify-content: left;
	align-items: flex-end;
	font-family: 'Montserrat', sans-serif;
	color: #2ec0dc;
	font-size: 0.7em;
	font-weight: 600;
}


.progression5{
	background: transparent;
	width: 250px;
	height: 19px ;
	margin: 0 auto;
	padding-left: 117px;
	display:flex;
	justify-content: left;
	align-items: flex-end;
	font-family: 'Montserrat', sans-serif;
	color: #2ec0dc;
	font-size: 0.7em;
	font-weight: 600;
}

.nom-groupe{
	height: 30px ;
	line-height: 1.5em;
	color: #2ec0dc;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2em;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.nom-groupe2{
	height: 30px ;
	line-height: 1.5em;
	color: #2ec0dc;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2em;
	font-weight: 600;
}

.attention-texte{
	text-align: center;
	line-height: 1.5em;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9em;
	font-weight: 400;
}

.attention-texte2{

	width: 250px;
	margin: 0 auto;
	text-align: center;
	line-height: 1.5em;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9em;
	font-weight: 400;

}

.cartouche-bleu{
	background: #2ec0dc;
	width: 33%;
	height: 10px ;
	border-radius: 10px;
}


.cartouche-bleu2{
	background: #2ec0dc;
	width: 66%;
	height: 10px ;
	border-radius: 10px;
}


.cartouche-bleu3{
	background: #2ec0dc;
	width: 100%;
	height: 10px ;
	border-radius: 10px;
}


.cartouche-bleu4{
	background: #2ec0dc;
	width: 50%;
	height: 10px ;
	border-radius: 10px;
}



.choix-lien a{
font-family: 'Montserrat', sans-serif;
font-size: 0.9em;
font-weight:400;
color: #ff7568;
text-decoration: underline;
}


.lien-precedent a{
font-family: 'Montserrat', sans-serif;
font-size: 0.9em;
font-weight:600;
color: #ffffff;
text-decoration: underline;
}

input.pseudo{
	background: transparent;
	border: 0.1em solid;
	border-color: #7b83a6;
	color: white;
	border-radius: 7px;
	height: 50px;
	width: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
	padding-left: 1em;
		box-shadow: none;
	outline: 0;
}

input.pseudo2{
	background: transparent;
	border: 0.1em solid;
	border-color: #ff3b34;
	color: white;
	border-radius: 7px;
	height: 50px;
	width: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
	padding-left: 1em;
		box-shadow: none;
	outline: 0;
}




#header { 
	width:100%; 
	height: 70px;
	background-color: white;
	padding-top:0em; 
	line-height:0em; 
	text-align:center; 
	position:relative;
	display: flex;

	justify-content: space-between;



}


.bloc1 {
	width: 100%;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;

}


.bloc2 {

	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 35px;
	color: white;


}



.bloc3 {

	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 35px;
	color: white;
	font-family: "Montserrat", sans-serif; 
	font-size: 1em;
	font-weight:400;

}


.ensemblefiltre{
	display: flex;
	align-items: center;


}


.index-ordre{
display: flex;
justify-content: flex-start;
align-items: center;
color: white;
}

.index-ordre-texte{
margin-left: 0.8em;
font-family: 'Montserrat', sans-serif; 
font-size: 0.9em; 
font-weight:600;
}


.index-ordre-texte-trier{
margin-left: 0em;
font-family: 'Montserrat', sans-serif; 
font-size: 0.9em; 
font-weight:400;
}








.titre-groupe {
	margin-left: 1.8em; 
	font-family: "Montserrat", sans-serif; 
	margin-right: 2em;
	color: #2ec0dc ;
	font-size: 1em;
	font-weight: 600;

}



.gerer-groupe a {
	margin-left: 2.7em; 
	font-family: "Montserrat", sans-serif; 
	margin-right: 2em;
	text-decoration: underline;
	color: #ffffff ;
	font-size: 0.7em;
	font-weight: 400;
}




.pays {

	background-color: rgba(255, 255, 255, .05);
	color: white;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: left;
	margin-left: 0.9em;
	margin-right: 0.9em;
	padding-left: 0.8em;
	padding-right: 0.8em;

}


.classement-pays {

	background-color: rgba(255, 255, 255, .05);
	color: white;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: left;
	margin-left: 0.9em;
	margin-right: 0.9em;
	padding-left: 0.8em;
	padding-right: 0.8em;

}

.classement-pays2 {

	background-color: #242c86;
	color: white;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: left;
	margin-left: 0.9em;
	margin-right: 0.9em;
	padding-left: 0.8em;
	padding-right: 0.8em;

}



.pays-non {
	
	background-color: rgba(255, 255, 255, .05);
	color: white;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: left;
	margin-left: 0.9em;
	margin-right: 0.9em;
	padding-left: 0.8em;
	padding-right: 0.8em;
}

.bouton-valide {

	background: linear-gradient(to bottom right, #fc4c4c,#fe8664);
	color: white;
	border-radius: 7px;
	height: 50px;
	width: 250px;
	display: flex;
	align-items: center;
	margin-left: 0.9em;
	margin-right: 0.9em;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;

}

.bouton-valide-on {

	background: linear-gradient(to bottom right, #fc4c4c,#fe8664);
	color: white;
	border-radius: 7px;
	height: 50px;
	display: flex;
	align-items: center;
	margin-left: 0.9em;
	margin-right: 0.9em;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;

}


.bouton-valide-off {

	background: linear-gradient(to bottom right, #fc4c4c,#fe8664);
	color: white;
	border-radius: 7px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: left;
	margin-left: 0.9em;
	margin-right: 0.9em;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
	opacity: 0.3;

}



.bouton-valide-home {

	background: linear-gradient(to bottom right, #fc4c4c ,#fe8664);
	color: white;
	border-radius: 7px;
	height: 50px;
	width: 250px;
	display: flex;
	align-items: center;
	justify-content: left;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
	margin: 0 auto;

}


.texte-rouge {
	font-family: 'Montserrat', sans-serif;
	color: #ff3b34;
	font-size: 0.9em;
	font-weight: 400;
}




input[type="text"].login {
	background: transparent;
	border: 0.1em solid;
	border-color: #7b83a6;
	color: white;
	border-radius: 7px;
	height: 50px;
	width: 250px;
	display: flex;
	align-items: center;
	justify-content: left;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
	padding-left: 1em;
}




input[type="radio"].demo1 {
  display: none;
}
input[type="radio"].demo1 + label {
	background: transparent;
	border: 0.1em solid;
	border-color: #7b83a6;
	color: white;
	border-radius: 7px;
	height: 50px;
	width: 250px;
	display: flex;
	align-items: center;
	justify-content: left;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 400;
	margin: 0 auto;
}
input[type="radio"].demo1:checked + label {
  	background: transparent;
	border: 0.1em solid;
	border-color: #ff7568;
	color: #ff7568;
	border-radius: 7px;
	height: 50px;
	width: 250px;
	display: flex;
	align-items: center;
	justify-content: left;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 400;
	margin: 0 auto;
}




.bouton-submit-choix {

	background: linear-gradient(to bottom right, #fc4c4c ,#fe8664);
	color: white;
	border-radius: 7px;
	height: 50px;
	width: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
	margin: 0 auto;
}





.bouton-submit-choix1 {

	background: linear-gradient(to bottom right, #fc4c4c ,#fe8664);
	color: white;
	border-radius: 7px;
	height: 50px;
	width: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
	margin: 0 auto;
}



.bouton-submit-score1 {

	background: linear-gradient(to bottom right, #fc4c4c ,#fe8664);
	color: white;
	border-radius: 7px;
	height: 50px;
	width: 250px;
	font-weight: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
	margin: 0 auto;
	padding-top: 0.9em;
	padding-bottom: 0.9em;

}



.bouton-submit-choix2 {

	background: linear-gradient(to bottom right, #fc4c4c ,#fe8664);
	color: white;
	border-radius: 7px;
	height: 50px;
	width: 250px;
	display: flex;
	align-items: center;
	justify-content: left;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
	margin: 0 auto;
	border: none;
	box-shadow: none;
}








.tierpays{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 0.2em;
	margin-right: 0.5em;

}




.classement-tierpays{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 0.2em;
	margin-right: 0.5em;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.95em;
	font-weight: 400;


}



.classement-titre{
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
	margin-left: 2.2em;


}



.classement-actualise{

	color: white;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9em;
	font-weight: 600;
	margin-left: 3.5em;
	margin-right: 3.5em;


}




.centrage-de-merde{
display: flex;
justify-content: center;
align-items: center;
align-self: center;



}



.classement-numero{
	background-color: ;
	width: 30px;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2em;
	font-weight: 400;

	text-align: center;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 0.2em;
	margin-right: 0.1em;


}



.pays-points {
	display: flex;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9em;
	font-weight: 400;
	margin-bottom: 0.2em;


}

.points {
	color: #ffffff;
	background-color: #2ec0dc;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8em;
	font-weight: 600;
	margin-left: 1em;
	padding-left: 1em;
	padding-right: 1em;
	height: 17px;
	border-radius: 17px;
	display: flex;
	align-items: center;


}

.classement-points {
	color: #ffffff;
	background-color: #2ec0dc;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8em;
	font-weight: 600;
	margin-left: 1em;
	height: 17px;
	border-radius: 17px;
	display: flex;
	flex-direction: row;
	padding-left: 0.5em;
	padding-right: 0.5em;
	display: flex;
	align-items: center;
	justify-content: space-around;

}




.chanson {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.7em;
	font-weight: 300;
}



.score-titre-pays {
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
}


.score-titre-chanson {
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.7em;
	font-weight: 300;
	padding-top: 0.4em;
}



.score-titre-textes {
display: flex;
flex-direction: column;
margin-left: 0.6em;

}



.score-titre-gen {
display: flex;
flex-direction: row;
margin-left: 1em;
margin-right: 1em;
}




.score-contenu {
	background-color: rgba(255, 255, 255, .05);
	color: white;
	height: 155px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8em;
	font-weight: 700;
	padding-top: 0.9em;
	padding-bottom: 0.9em;
	margin-left: 0.9em;
	margin-right: 0.9em;
	border-radius: 7px;
}


.score-points {
	color: #ffffff;
	background-color: #2ec0dc;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9em;
	font-weight: 700;
	margin-left: 1em;
	padding-left: 1em;
	padding-right: 1em;
	height: 24px;
	border-radius: 24px;
	display: flex;
	align-items: center;

}
 

.home-texte1 {

	text-align: center;
	line-height: 1.4em;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
}

.home-texte2 {

	text-align: center;
	line-height: 1.6em;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9em;
	font-weight: 300;
}


.home-texte3 {

	text-align: center;
	line-height: 1.4em;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2em;
	font-weight: 600;

}


.home-texte3 a{

	text-align: center;
	line-height: 1.4em;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.0em;
	font-weight: 600;
	text-decoration: underline;

}





.regles-texte1 {

	color: #182180;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
}



.regles-texte2 {

	color: #182180;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85em;
	line-height: 1.3em;
	font-weight: 700;
}


.regles-textefermer a {

	color: #182180;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	line-height: 1.3em;
	font-weight: 700;
}




.regles-texte3 {

	color: #ff7568;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.87em;
	font-weight: 700;
}



.regles-texte4 {

	color: #182180;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.87em;
	font-weight: 600;
}




.regles-texte5 {

	color: #182180;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.87em;
	font-weight: 400;
}





/*================================*/
/*=== Partie sur le Swipe Menu ===*/
/*================================*/
/* Menu burger */
#menu-burger {position:absolute;right:0em; z-index:9999; top: 1.2em; left:1.8em; display:inline-block; cursor:pointer;}
#menu-burger .bar1,
#menu-burger .bar2,
#menu-burger .bar3 {width:28px; height:2px; border-radius: 3px; background-color:#002060; margin:6px 0; transition:0.4s;}
#menu-burger:hover {opacity:.75; transition:.5s;}
#menu-burger.clicked .bar1 {-webkit-transform:rotate(-45deg) translate(-4px, 7px); transform:rotate(-45deg) translate(-4px, 7px);}
#menu-burger.clicked .bar2 {opacity: 0;}
#menu-burger.clicked .bar3 {-webkit-transform:rotate(45deg) translate(-3px, -8px); transform:rotate(45deg) translate(-3px, -8px);}

.menu-lien-gris{
display:block; 
color:#002060; 
text-decoration:none; 
font-weight:700; 
background:#fff; 
transition:background .5s; 
padding:1em; 
text-align:left;
font-family: 'Montserrat', sans-serif; 
font-weight: 600; 
margin-bottom:.2em; 
box-shadow:0px 2px 0 #bfbfbf;
opacity: 0.2; 
}

/* Main menu (slide) */
#menu {position:fixed; z-index:9999; left:-100%; top:auto; background:#ffffff; padding:4em 0.8em; width:100%; min-height:100%; width: box-shadow:0px 0 0px #9A2519;}
#menu ul li {list-style:none;}
#menu ul li a {display:block; color:#002060; text-decoration:none; font-weight:700; background:#fff; transition:background .5s; padding:1em; text-align:left;font-family: 'Montserrat', sans-serif; font-weight: 600; margin-bottom:.2em; box-shadow:0px 2px 0 #f2f2f2}
#menu ul li a:hover {background:#ffffff; color: #002060; transition:background .5s;}
#menu.visible {animation:.5s slideRight ease-in forwards; transition-delay:0;}
#menu.invisible {animation:1s slideLeft ease-out forwards; transition-delay:0;}

/* Animations pour le menu slide */
@keyframes slideRight {
	from {left:-100%;}
	to {left:0%;}
}
@-webkit-keyframes slideRight {
	from {left:-100%;}
	to {left:0%;}
}
@keyframes slideLeft {
	from {left:0%;}
	to {left:-100%;}
}
@-webkit-keyframes slideLeft {
	from {left:0%;}
	to {left:-100%;}
}


