@font-face {
    font-family: "Rock";	
    src: url('scriptbold.eot?#iefix') format('embedded-opentype'),
         url('scriptbold.woff') format('woff'),
         url('scriptbold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
	}

@font-face {
    font-family: "luzro";	
    src: url('luzro.eot?#iefix') format('embedded-opentype'),
         url('luzro.woff') format('woff'),
         url('luzro.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
	}

/* STRUCTURE GENERALE */

 	body{
 		width: 100%;
 		height: 100%;
 		margin: 0;
		font-size: 18px;
		font-family: "Luzro", Arial, Verdana, sans-serif;
		letter-spacing: 1px;
		/*IMAGE DE FOND*/
		margin:0;
		padding:0;
  		background: url('danseurs-rock.jpg') no-repeat center fixed; 
  		-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  		background-size: cover; /* version standardisée */
  		/* FIN IMAGE DE FOND*/
	}
	header, section{
		width: 100%;
		margin: 0 auto;
		color: #fff;
		letter-spacing: 2px;
		line-height: 30px;
		text-align: center;
	}
	section{
		background-color: rgba(0,0,0,0.7);
		border-bottom: 1px solid #16a5ff;
	}

	.div_centre{
		width: 800px;
		margin: 0 auto;
		padding: 30px 0
	}
	p{
		text-align: justify;
	}
	img{
		width: 100%;
		max-width: 600px;
		margin: 20px 0;
	}
	#un img{
		width: 200px;
	}
	iframe{
		margin: 35px 0 15px;
		width: 100%;
		height: 300px;
	}
	footer{
		text-align: center;
		color: #fff;
	}



/* LIENS HYPERTEXTE */

		a
		{
			color: #16a5ff;
			text-decoration: none;
		}
		a:hover
		{
			color: #16a5ff;
		}
		:hover{
			transition: all 0.4s ease 0s;
		}
		a img
		{
			border: none;
		}
		ul{
			margin: 0;
			padding: 0;
		}
		li{
			display: inline-block;
		}



		header nav{
			width: 100%;
			background-color: #16a5ff;
		}
		header a{
			color: #fff;
			text-transform: uppercase;
			text-decoration: none;
			display: block;
			padding: 20px 15px;
			box-sizing: border-box;
		}
		header a:hover{
			color: #16a5ff;
			background-color: #000;
		}
		header img{
			margin-top: 30px;
			width: 80%;
			max-width: 400px;
		}

/*TITRE*/

		h1
		{
			font-size: 9px;
		    font-family: Arial, sans-serif;
		    color: #16a5ff;
		    letter-spacing: 3px;
		    text-transform: uppercase;
		    margin-bottom: 30px;
		}


		h2, h3
		{
			font-family: "luzro", Verdana, sans-serif; 
			color: #16a5ff;
		}
		h2{
			font-size: 20px;
			text-transform: uppercase;
			letter-spacing: 4px;
			margin-bottom: 50px;
		}
		h3{
			font-size: 16px;
			letter-spacing: 1px;	
		}



		td{
			text-align: left;
		}



	/* FORMULAIRE */

	#deux img{
		width: 150px;
	}

	form p{
		width: 100%;
	}

	form p label{
		width: 20%;
		max-width: 160px;
		display: inline-block;
		text-align: left;
		float: left;
		margin-left: 50px;
	}

	.clear{
		clear: both;
	}

	input, textarea, option 
	{
		width: 60%;
	 	border: 1px solid #16a5ff;
	 	padding: 15px;
	 	color: #fff;
	 	font-size: 15px;
	    background-color: rgba(0, 0, 0, 0);
	    outline: none;
	    transition:height 1s;
	    -webkit-transition:height 1s;
	}
	input:hover, textarea:hover, option:hover 
	{
		box-shadow: 0px 0px 17px #fff;
	}
	input[type='submit'] {
	    margin-left: 26.3%;
	    float: left;
	}
	select{
	 	font-size: 15px;
	 	border: 1px solid #16a5ff;
	    padding: 20px 15px;
		width: 64%;
	    background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
	}
	input:hover, textarea:hover, select:hover, option:hover 
	{
	 	border: 1px solid #16a5ff;
	}

	a#bouton, input[type=submit]
	{
		width: auto;
		border: 1px solid #16a5ff;
		color: #16a5ff;
	    background-color: rgba(0, 0, 0, 0);
		font-weight: bold;
		text-align: center;
	}
	a#bouton{
		padding: 15px;
		margin-top: 30px;
	}
	a#bouton:hover, input[type=submit]:hover
	{
		background-color: #16a5ff;
		border: 1px solid #16a5ff;
		color: #FFF;
	}


/* TABLETTE PORTRAIT */

@media all and (max-width: 768px) {
	li{
		display: block;
	}
	.div_centre {
	    width: 90%;
	    padding: 30px 25px;
	    box-sizing: border-box;
	}
	form p label {
	    margin-left: 20px;
	}
	select {
	    width: 64%;
	}
	input[type='submit'] {
	    margin-left: 23%;
	}
	#un img{
		width: 300px;
	}
}

/* SMARTPHONE PAYSAGE */

@media all and (max-width: 640px) {
 	body{
		font-size: 16px;
	}
	form p label {
	    width: 25%;
	    max-width: 250px;
	    margin-left: 20px;
	}
	select {
	    width: 66%;
	}
	input[type='submit'] {
	    margin-left: 28.7%;
	}
	img{
		margin: 0;
	}
	#un img{
		width: 80%;
		padding: 20px 0;
	}

}

/* SMARTPHONE PORTRAIT */

@media all and (max-width: 470px) {

	p{
		text-align: left;
	}

	header li{
		display: block;
	}
	.div_centre{
		width: 95%;
	}
	span.txtform{
		font-size: 14px;
	}
	form p label {
	    width: 100%;
	    max-width: 100%;
	    text-align: center;
	    margin-left: 0;
	    margin-bottom: 10px;
	}
	input, textarea, option {
	    width: 100%;
	    box-sizing: border-box;
	}
	select {
	    width: 100%;
	}
	input[type='submit'] {
	    margin-left: 0;
	    float: none;
	    width: 100%;
	    border: 1px solid #16a5ff;
	    background-color: #16a5ff;
	    color: #FFF;
	    letter-spacing: 4px;
	    text-transform: uppercase;
	}



}