body{
	font-family: 'Source Sans Pro', sans-serif;
	background:#dae0e5;
	margin:0;
	padding:0;
}

header{
	width:100%;
	padding-top:5px;
}

#eclate {
	position: absolute;
	top: 404px;
	left: -26px;
}

#fleche {
	position: absolute;
	display:none;
}

#eclate img{
	width: 150px;
}

#chrono {
	position: absolute;
	    z-index: 100;
	top: 445px;
	right: 0;
}

#chrono img{
	width: 100px;
}

#titreMob{
	text-align:center;
	width:90%;
	margin:30px auto 0 auto;
}

#logoMobile img{
	display:block;
	margin:10px auto 0 auto;
}

#logoDesktop img{
	display:none;
}

#container{
	background:#FFF;
	position:relative;
}

#section1{
	display:flex;
	flex-direction:column-reverse;
	padding:10px;
}

#carteDeFrance{
	display:block;
}

#carteDeFrance img{
	display:block;
	width:100%;
}

#guide{
	width: 100%;
	text-align: center;
}

#guide img{
	width:100%;
	margin:auto;
}

.bleu{
	color:#0066cc;
}

#avantages{
	background:#FFF;
	margin-left:10px;
	margin-top:-50px;
	padding:20px 10px 0 10px;
}

ul {
	list-style-image: url('check_vert.png');
	padding-left: 20px;
}

ul li{
	margin-top:5px;
	line-height:18px;
}

#droite {
	margin-bottom: 20px;
}

#formulaire{
	padding:10px;
	background:#fff;
	margin-bottom: 20px;
	margin-top: -20px;

}

iframe{
	height:410px;
	background:#fff;
	border:none;
}

#instruction{
	text-align:center;
	color:#ff3300;
	font-weight:800;
	font-size:20px;
	line-height:22px;
	//padding-top: 20px;
}

#titre{
	display:none;
	text-align:center;
}

h1 {
	font-family: 'Source Sans Pro', sans-serif;
	font-size:34px;
	line-height: 36px;
	color: #0066cc;
	font-weight: 800;
	margin-top: 55px;
	margin-bottom: 5px;
	color:#003399;
}

.titreMoyen{
	font-size: 35px;
}

.titreGros {
	font-size: 2em;
	line-height: 0.65em;
}

h2 {
	font-size: 1.7em;
	color: #2bbd2d;
	font-weight: 600;
	line-height: 1.2em;
	margin-top: 0;
}

#pictos {
	text-align:center;
	background:#fff;
	padding-bottom: 5px;

}



#pictos p{
	display:flex;
	flex-direction:column;
}

#pictos p img {
	width: 30%;
	margin: 5px auto 10px auto;
}

#barrePictos{
	display:flex;
	flex-direction:column;
	text-align:center;
}

#pictoTexte {
	width:100%;
	text-align:center;
}

#pictoTexte img{
	width:80%;
	margin-top:10px;
}

#pictoTexte img{
	width:80%;
	margin-top:10px;
}

.pictexte img {
	margin-bottom: -20px;
	margin-top: 10px;
}

h4{
	margin:0;
	padding:0;
}

#pictosDesktop{
	display:none;
}

.bold{
	font-weight:600;
}

.bouton {
	width: 300px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	background-color: #ff6600;
	text-align: center;
	margin: auto;
	font-weight: 500;
	font-size: 17px;
	cursor: pointer;
	transition-duration: 0.5s;
}

.bouton img{
	margin-top:5px;
}

.bouton:hover {
	background: #003399;
	transition-duration: 0.5s;
}

footer{
	text-align:justify;
	background:#FFF;
	margin-top:20px;
	font-size:12px;
	padding:10px 20px 20px 20px;
}

.signature{
	text-align:center;
}

.signature a{
	font-weight:600;
	color:#ff6600;
	text-decoration:none;
	transition-duration: 0.5s;
}

.signature a:hover{
	color:#003399;
	transition-duration: 0.5s;
}



	/*//////////////BREAKPOINT411PX//////////////*/

	@media (min-width: 411px){
		#eclate {
			position: absolute;
			top: 286px;
			left: -26px;
		}

		#chrono {
    position: absolute;
        z-index: 100;
    top: 387px;
    right: 0;
}

	}

	/*//////////////BREAKPOINT595PX//////////////*/

	@media (min-width: 595px){

		#carteDeFrance img {
			display: block;
			width: 559px;
			margin: auto;
		}

		#guide img {
			width: 552px;
			margin: 30px auto 0  auto;
		}

		#barrePictos{
			margin:30px auto 30px auto;
			display:flex;
			flex-direction:row;
			justify-content:space-around;
		}

		.pictexte{
			width:110px;
		}

	}


	/*//////////////BREAKPOINT768PX//////////////*/

	@media (min-width: 768px){

		header {
			height: 80px;
		}

		#container{
			width:90%;
			margin:auto;
		}

		#section1 {
			width: 90%;
			margin: auto;
		}

	#eclate{
			position: absolute;
			top: 275px;
			left: -60px;
		}

#chrono {
			top: 315px;
			right: 0;
		}

	}


	/*//////////////BREAKPOINT992PX//////////////*/

	@media (min-width: 992px){

		#section1{
			flex-direction:row;
			justify-content: space-between;
		}

		#bandeauBleu{
			margin-left:5%;
			text-align:left;
		}

		#logoMobile img {
			margin-left: 5%;
		}

		#gauche{
			width: 50%;
		}

	#eclate {
			position: absolute;
			top: 275px;
			left: -60px;
		}

		#fleche {
			display:block;
			left: 40%;
		}

		#droite{
			width: 45%;
		}

		#titreMob{
			display:none;
		}

		#instruction {
			margin-top:-96px;
		}

		#titre{
			display:block;
		}

		#carteDeFrance img {
			width: 90%;
			margin: auto;
		}

		#guide img {
			width: 90%;
		}

		iframe{
			width:80%;
		}

		#avantages {
			padding: 20px;
		}

		#formulaire {
			padding: 20px;
		}

		#barrePictos{
			width:80%;
		}
		.titreMoyen {
			font-size: 40px;
			line-height:40px;
		}

	#chrono {
			top: 300px;
			right: 0;
		}
	}



	/*//////////////BREAKPOINT1065PX//////////////*/

	@media (min-width: 1200px){

		#container{
			width:1065px;
		}
	}