/* RESPONSIVE CSS */

@media only screen and (min-width : 1630px) {
	
/**********************************************/
/* Structure generale */ 
/**********************************************/	
	/* -------------- header -------------- */
	header {
		background-size: 100% 153px;
	}
	
}


@media only screen and (max-width : 1024px) {

/*.section{background: green !important}*/

/**********************************************/
/* Structure generale */ 
/**********************************************/
	.page {
		width: 720px;
	}
	
	
	/* -------------- header -------------- */
	header {
		background-image: url(../img/bg-header-720.gif);
	}
	
	.page_quiz_result ul li{
		font-size: 18px;
	}


	
/**********************************************/
/* Bloc css de la page inscription.html */
/**********************************************/
	.bloc-form button {
		width: 202px;
		font-size: 16px;
	}
	
	
	
/**********************************************/
/* Bloc css de la page index.html */
/**********************************************/
	/* bandeau */
	.bandeau {
		width: 720px;
		height: 290px;
	}
	
		.bandeau img {
			width: auto;
			height: 100%;
		}

		.bandeau .fond_ballon{
			display: none;
		}
		
		.bandeau .logo_ac2018 {
			left: 50%;
			-webkit-transform: translate3d(-50%,0,0);
			        transform: translate3d(-50%,0,0);
		}
		
	/* texte droite */
	.home-right {
		width: 400px;
		padding: 50px 20px 0 0;
	}
	
		.home-right .txt1 strong, 
		.home-right .txt2 {
			font-size: 19px;
		}
		
		
		
/**********************************************/
/* Bloc css de la page home.html */
/**********************************************/
	/* contenu */
	.home-large p {
		padding-right: 0;
	}
		
}


@media only screen and (max-width : 768px) {

/*.section{background: brown !important}*/


/**********************************************/
/* CLASS génériques */ 
/**********************************************/
	.hidden-mob{
		display: none;
	}
	
	.visible-mob{
		display: block;
	}
	
	
/**********************************************/
/* Structure generale */ 
/**********************************************/
	.page {
		width: 480px;
	}
	
	
	/* -------------- header -------------- */
	header {
		min-height: 188px;
		background-image: url(../img/bg-header-480.gif);
	}
	
		header .page {
			padding: 0 4px;
		}
	
	
		/* logo TOTAL */
		.logo {
			top: 46px;
			left: 0;
		}
		
			.logo img {
				height: 52px;
			}
	
	
		/* main menu */
		.js nav{
			display: none;
		}
		
		.js .slicknav_menu{
			display: block;
		}
		
		#mob-nav {
			margin: 128px -5px 0 0;
		}
		
		
	/* -------------- middle -------------- */
	#middle {
		margin-top: 10px;
	}
	
	
		/* points restants */
		.restant {
			top: -30px;
		}
		
	
	.page .home-center ul li{
		font-size: 14px;
	}

	.page_quiz ul li{
		font-size: 18px;
	}
		
/**********************************************/
/* Bloc css de la page inscription.html */
/**********************************************/
	/* formulaire */
	.bloc-form {
		padding: 30px;
	}
	
		.bloc-form .intro {
			width: auto;
		}
		
		.bloc-form button {
			width: 235px;
			font-size: 19px;
		}
		

/**********************************************/
/* Bloc css de la page recap.html */
/**********************************************/
	/* recap equipe */
	.equipe-recap {
		margin: 50px 30px 0;
	}
	
		.equipe-recap ul li, 
		.equipe-recap ul li:nth-child(2n) {
			float: none;
			width: auto;
		}
		
		
	
/**********************************************/
/* Bloc css de la page index.html */
/**********************************************/
	/* bandeau */
	.bandeau {
		width: 480px;
		height: 213px;
	}
	
	
	/* textes */
	.home-left, 
	.home-right {
		float: none;
		width: auto;
		padding: 30px 30px 0 20px;
	}
	
		.home-left h1 {
			font-size: 35px;
			line-height: 40px;
		}
		
		
		
/**********************************************/
/* Bloc css de la page home.html */
/**********************************************/
	/* contenu */
	.home-large {
		padding: 30px 30px 0 20px;
	}
	
		.home-large h1 {
			margin-bottom: 26px;
			font-size: 35px;
		}


}


@media only screen and (max-width : 480px) {

/*.section{background: red !important}*/

/**********************************************/
/* Structure generale */ 
/**********************************************/
	.page {
		width: 320px;
	}
	
	
	/* -------------- header -------------- */
	header {
		background-image: url(../img/bg-header-320.gif);
	}
	
	
		/* top links */
		.top-links li {
			font-size: 10px;
		}
		
		.top-links li + li:before {
			margin-left: 14px;
		}
		
		.top-links li:nth-child(2):before {
			padding-left: 14px;
		}
	
	.home-center{
		padding: 40px 10px 0 10px;
	}

	.page_quiz_result ul li span{
		max-height: 71px;
	}

	.page_quiz_result .home-center{
		padding: 40px 0 0 0;
	}
		
	
/**********************************************/
/* Bloc css de la page inscription.html */
/**********************************************/
	/* formulaire */
	.bloc-form {
		padding: 20px;
	}
	
		.bloc-form button {
			font-size: 18px;
		}
	
	
	
/**********************************************/
/* Bloc css des pages Pronostic */
/**********************************************/
.page_pronostics .bloc-form label .cote{
	padding: 5px 20px;
	min-width: 150px;
}

.page_pronostics #outputScoreRestant{
	font-size: 21px;
}
	
	
/**********************************************/
/* Bloc css de la page equipes.html */
/**********************************************/
	/* titre et intro */
	.equipe-header {
		width: auto;
		padding: 0 20px;
	}
	
	
	/* note */
	.note {
		padding: 0 10px 20px;
	}
	
	
	/* bouton suivant */
	.pg-equipe .next-pg {
		padding-right: 40px;
	}
	
	
	
/**********************************************/
/* Bloc css de la page index.html */
/**********************************************/
	/* bandeau */
	.bandeau {
		width: 320px;
		height: 213px;
	}
	
	.home-center .txt_btn a{
		float: none;
		display: block;
	}
	.home-center .txt_btn span{
		float: none;
	}


/**********************************************/
/* Bloc css de la page gagnants */
/**********************************************/

	.page .home-center ul li{
		font-size: 11px;
		border: 1px solid white;
	}

	.page .home-center ul li span{
		padding: 0;
	}

}