@charset "UTF-8";
@import url(font-awesome.min.css);
@import url("http://fonts.googleapis.com/css?family=Lato:300,400");

/*
	Interphase by TEMPLATED
	templated.co @templatedco
	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/

/* Basic */

	body {
		background: url("../images/chausee3.jpg");
		background-size : 40cm 400cm;
	}

        section {
	        text-align: center;
        }

/* Header */

	body.landing #header {
		background-color: transparent;
		left: 0;
		position: absolute;
		top: 0;
	}

	#header {
		background-color: #202222;
		color: #ffffff;
		cursor: default;
		height: 4.75em;
		line-height: 4.75em;
		width: 100%;
		z-index: 10000;
	}

		#header h1 {
			color: #ffffff;
			height: inherit;
			left: 2.5em;
			line-height: inherit;
			margin: 0;
			padding: 0;
			position: absolute;
			top: 0;
		}

			#header h1 a {	font: 30pt ; color: ghostwhite;	}
			
		#header nav {
			height: inherit;
			line-height: inherit;
			position: absolute;
			right: 2.75em;
			top: 0;
			vertical-align: middle;
		}

			#header nav > ul {
				list-style: none;
				margin: 0;
				padding-left: 0;
			}

				#header nav > ul > li {
					border-radius: 4px;
					display: inline-block;
					margin-left: 1.5em;
					padding-left: 0;
				}

					#header nav > ul > li a {
						font: 20pt ;
						-moz-transition: color 0.2s ease-in-out;
						-webkit-transition: color 0.2s ease-in-out;
						-o-transition: color 0.2s ease-in-out;
						-ms-transition: color 0.2s ease-in-out;
						transition: color 0.2s ease-in-out;
						color: darkred;
						display: inline-block;
						text-decoration: none;
					}

						#header nav > ul > li a:hover {
							color:ghostwhite;
						}

					#header nav > ul > li:first-child {
						margin-left: 0;
					}

					#header nav > ul > li .button {
						height: 2.25em;
						line-height: 2.25em;
						margin-bottom: 0;
						padding: 0 1em;
						position: relative;
						top: -0.075em;
						vertical-align: middle;
					}

		#header .container {
			position: relative;
		}

			#header .container h1 {
				left: 0;
			}

			#header .container nav {
				right: 0;
			}

/* Banner */

	#banner {
		background-image:  url("../images/accident1.gif");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 40cm 18cm;
		color: #ffffff;
		padding: 16em 0em 14em;
		text-align: center;
	}

		#banner h2 {
			color:red;
		  /*  transition:color 4.5s ease-in; */
 			font-size: 75pt ;
			line-height: 1em;
			margin: 0 0 0em 0;
			padding: 0;
		}
		
		
		#banner h3 {
			color:red;
		  /*transition:color 4.5s ease-in; */
			font : lighter normal 35pt ;
			line-height: 1em;
			margin: 0 0 0.5em 0;
			padding: 0;
 		}

		#banner h4 {
			font: normal 30pt ;
			font-size: 30pt;
			color: red;
			margin: 1.5em 0 0 0;
		}


        #banner h2:hover {
				color:ghostwhite ;
						 }
        #banner h3:hover {
				color: ghostwhite;
						 }
        #banner h4:hover {
				color: ghostwhite;
						 }

/* GIF */

* {
	padding: 0;
	margin: 0;	
}
#chapitre1 {
	background-color: grey;
	background-image: url(../images/nightcar.gif);
	background-position: center;
	background-size: 10cm 10cm;
	display: block;
	}

#chapitre1 h1 {
	font-size: 65pt;
	text-align: center;
	color: red;
	padding: 1cm;
	margin: 0;
}

#chapitre1 h1:hover{
	color: ghostwhite;
}

#chapitre1 h2 {
	font-size : 40pt ;
	text-align: center;
	color: red;
	padding: 1cm;
	margin: 0
}

#chapitre1 h2:hover{
	color: ghostwhite;
}

#intro header {
	text-align: center;
	color: white;
}

#intro header h2 {
	padding: 0.3cm 0 0 0;
}

#intro header h3 {
	padding: 0 0 0.5cm 0;
	font-size: 35pt;
}

#intro1 header {
	text-align: center;
	color: darkred;
}

#intro1 header h2 {
	padding: 0.3cm 0 0 0;
}

#intro2 header {
	text-align: center;
	color: darkred;
}

#intro2 header h2 {
	padding: 0.3cm 0 0 0;
}


#intro3 header {
	text-align: center;
	color: darkred;
}

#intro3 header h2 {
	padding: 0.3cm 0 0 0;
}

#chapitre2 {
	background-color: black;
	background-image: url(../images/bonnespratiques.gif);
	background-position: center;
	background-size: 30%;
	display: block;
		 }

#chapitre2 h1 {
	font-size: 65pt;
	text-align: center;
	color: yellow;
	padding: 0.5cm;
	margin: 0;
}

#chapitre2 h1:hover{
	color: red;
}

#chapitre2 h2 {
	font-size : 40pt ;
	text-align: center;
	color: yellow;
	padding: 1cm;
	margin: 0;
}
#chapitre2 h2:hover{
	color: red;
}
#submenu21 {
	text-align: center;
	}

#submenu21 header {
	text-align: center;
	color: darkred;
}

#submenu21 header h2 {
	padding: 0.3cm 0 0 0;
}

#submenu21 header h3 {
	padding: 0 0 0.5cm 0;
}

#submenu22 {
	text-align: center;
	}

#submenu22 header {
	text-align: center;
	color: darkred;
}

#submenu22 header h2 {
	padding: 0.3cm 0 0 0;
}

#submenu22 header h3 {
	padding: 0 0 0.5cm 0;
}

#submenu23 {
	text-align: center;
	}

#submenu23 header {
	text-align: center;
	color: darkred;
}

#submenu23 header h2 {
	padding: 0.3cm 0 0 0;
}

#submenu23 header h3 {
	padding: 0 0 0.5cm 0;
}

#submenu23 ul {
	padding: 1cm;
}

#menu-scatter > li > a {
  border-radius: 4px;
}
#menu-scatter > li + li {
  margin-left: 2px;
}
#menu-scatter > li.active > a,
#menu-scatter > li.active > a:hover,
#menu-scatter > li.active > a:focus {
  color: yellow;
  background-color: red;
}
#menu-scatter > .active > a > .badge {
  color: red;
  background-color: #fff;
}
#menu-scatter > li > a > .badge {
  margin-left: 3px;
}

#chapitre3 {
	background-image: url(../images/police.gif);
	background-position: center;
	background-size: 29.3%;
	display: block;
		}
#chapitre3 h1 {
	font-size: 65pt ;
	text-align: center;
	color: yellow;
	padding: 1cm;
	margin: 0;
    }

#chapitre3 h1:hover{
	color: red;
}

#chapitre3 h2 {
	font-size: 40pt ;
	text-align: center;
	color: yellow;
	padding: 1cm;
	margin: 0
}
#chapitre3 h2:hover{
	color: red;
	}
#submenu31 {
	text-align : center;
}

#submenu31 header {
	text-align: center;
	color: darkred;
}

#submenu31 header h2 {
	padding: 0.3cm 0 0 0;
}

#submenu32 {
	text-align:center;
}

#submenu32 header {
	text-align: center;
	color: darkred;
}

#submenu32 header h2 {
	padding: 0.3cm 0 0 0;
}

#submenu32 header h3 {
	padding: 0 0 0.5cm 0;
}

#submenu33 {
        text-align:center;
}

#submenu33 header {
	text-align: center;
	color: darkred;
}

#submenu33 header h2 {
	padding: 0.3cm 0 0 0;
}

#submenu33 header h3 {
	padding: 0 0 0.5cm 0;
}



/* Wrapper */
  
/* Footer */

#conclu {
	background-color: grey;
	background-image: url("../images/route3.jpg");
	text-align: center;
}

footer {
	padding: 1cm 1cm 1cm 1cm;
	}

footer #logo img {
    opacity: 0.7;
}

footer #logo img:hover {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}


footer.container{
	background: ghostwhite;
}

#footer h2, #footer h3, #footer h4 {
	color: yellow;
	font-size: 18pt;
	font-weight: 900;
	}
#footer h4 { 
	color: ghostwhite;
}

#footer a {
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			-ms-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
			color: ghostwhite;
		 }

#footer a:active, #footer a:hover {
				color: yellow;
			}

#footer .icons .rounded {
			border-color: red;
			font-size: 1.5em;
		 }

#footer .icons .rounded:active, #footer .icons .rounded:hover {
				border-color: red;
			}

#footer .copyright {
			font-size: 1em;
			margin: 2em 0 0 0;
			padding: 0;
			text-align: center;
		}

#footer .copyright li {
				border-left: solid 1px red;
				display: inline-block;
				list-style: none;
				margin-left: 1.5em;
				padding-left: 1.5em;
			}

#footer .copyright li:first-child {
					border-left: 0;
					margin-left: 0;
					padding-left: 0;
				}