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

	body{
		background-image: url("Img/Fond.jpg");
		background-attachment: fixed;
		background-size: cover;
	}

	#titre{
		margin-left: 5%;
		margin-top: 3%;
	}

	#persoTitre{
		font-size: 26px;
	}

	#imgTitre{
		width: 300px;
	}

	.titrePerso{
		text-align: center;
		font-family : daysregular, arial;
	}

	#informations{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 2%;
		margin-top: 2%;
		width: 300px;
		color: white;
		padding: 20px;
		font-size: 20px;
		float: left;
		position: relative;
		text-align: justify;
	}

	#personnages{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 10%;
		margin-top: 2%;
		width: 260px;
		color: white;
		padding: 10px;
		font-size: 20px;
		float: left;
		position: relative;
	}

	.stylePerso{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 2%;
		margin-top: 2%;
		width: 300px;
		color: white;
		padding: 20px;
		font-size: 20px;
		float: left;
		position: relative;
	}

	#goku{
		display: none;
	}


	#vegeta{
		display: none;
	}


	#picolo{
		display: none;
	}


	#gohan{
		display: none;
	}


	#personnages > img{
		margin:5px;
		width: 200px;
		height: 200px;
		cursor:pointer; 
	}

	.image{
		margin-left: 7%;
	}

	#contenu{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 10%;
		margin-top: 2%;
		width: 260px;
		color: white;
		padding: 10px;
		font-size: 20px;
		float: left;
		position: relative;
	}

	#explication{
		padding-right: 20px;
		padding-left: 20px;
		text-align: center;
	}

	.retour{
		text-decoration:none;
		font-family : daysregular, arial;
		color: white;
		text-align: center;
	}

	.retour:hover{
		color: red;
	}

	#video{
		margin-left: 5%;
		width: 230px;
	}

	#fin{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 10%;
		margin-top: 2%;
		width: 260px;
		color: white;
		padding: 10px;
		font-size: 20px;
		float: left;
		position: relative;
		margin-bottom: 5%;
	}

	#haut{
		margin-left:34%;
	}

	#hide{
		display: none;
	}

	.small{
		font-size: 10px;
		list-style-type: none;
		text-align: center;
		margin:20px;
	}

	ul{
		padding: 0;
	}

}

/* -----------------------------------------------------------------------------------------------------------*/

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

	body{
		background-image: url("Img/Fond.jpg");
		background-attachment: fixed;
		background-size: cover;
	}

	#titre{
		margin-left: 25%;
		margin-top: 3%;
	}

	#persoTitre{
		font-size: 26px;
	}

	#imgTitre{
		width: 300px;
	}

	.titrePerso{
		text-align: center;
		font-family : daysregular, arial;
	}

	#informations{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 8%;
		margin-top: 2%;
		width: 500px;
		color: white;
		padding: 20px;
		font-size: 20px;
		float: left;
		position: relative;
		text-align: justify;
	}

	#personnages{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 28%;
		margin-top: 2%;
		width: 260px;
		color: white;
		padding: 10px;
		font-size: 20px;
		float: left;
		position: relative;
	}

	.stylePerso{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 8%;
		margin-top: 2%;
		width: 300px;
		color: white;
		padding: 20px;
		font-size: 20px;
		float: left;
		position: relative;
	}

	#goku{
		display: none;
	}


	#vegeta{
		display: none;
	}


	#picolo{
		display: none;
	}


	#gohan{
		display: none;
	}


	#personnages > img{
		margin:5px;
		width: 200px;
		height: 200px;
		cursor:pointer; 
	}

	.image{
		margin-left: 7%;
	}

	#contenu{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 28%;
		margin-top: 2%;
		width: 260px;
		color: white;
		padding: 10px;
		font-size: 20px;
		float: left;
		position: relative;
	}

	#explication{
		padding-right: 20px;
		padding-left: 20px;
		text-align: center;
	}

	.retour{
		text-decoration:none;
		font-family : daysregular, arial;
		color: white;
		text-align: center;
	}

	.retour:hover{
		color: red;
	}

	#video{
		margin-left: 5%;
		width: 230px;
	}

	#fin{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 28%;
		margin-top: 2%;
		width: 260px;
		color: white;
		padding: 10px;
		font-size: 20px;
		float: left;
		position: relative;
		margin-bottom: 5%;
	}

	#haut{
		margin-left:34%;
	}

	#hide{
		display: none;
	}

	.small{
		font-size: 10px;
		list-style-type: none;
		text-align: center;
		margin:20px;
	}

	ul{
		padding: 0;
	}

}


/* ------------------------------------------------------------------------------------------------------------*/


@media screen and (min-width: 1280px){

	body{
		background-image: url("Img/Fond.jpg");
		background-attachment: fixed;
	}

	#titre{
		margin-left: 32%;
		margin-top: 3%;
	}

	.titrePerso{
		text-align: center;
		font-family : daysregular, arial;
	}

	#informations{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 17%;
		margin-top: 2%;
		width: 800px;
		color: white;
		padding: 20px;
		font-size: 20px;
		float: left;
		position: relative;
		display:block;
	}

	#personnages{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 28%;
		margin-top: 2%;
		width: 520px;
		color: white;
		padding: 10px;
		font-size: 20px;
		float: left;
		position: relative;
	}

	.stylePerso{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 17%;
		margin-top: 2%;
		width: 800px;
		color: white;
		padding: 20px;
		font-size: 20px;
		float: left;
		position: relative;
	}

	#goku{
		display: none;
	}


	#vegeta{
		display: none;
	}


	#picolo{
		display: none;
	}


	#gohan{
		display: none;
	}


	#personnages > img{
		margin:8px;
		width: 200px;
		height: 200px;
		cursor:pointer; 
	}

	.image{
		margin-left: 35%;
	}

	.miniature:hover{
		outline:px dashed red;
	}

	#contenu{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 28%;
		margin-top: 2%;
		width: 520px;
		color: white;
		padding: 10px;
		font-size: 20px;
		float: left;
		position: relative;
	}

	#explication{
		padding-right: 20px;
		padding-left: 20px;
		text-align: center;
	}

	.retour{
		text-decoration:none;
		font-family : daysregular, arial;
		color: white;
		text-align: center;
	}

	.retour:hover{
		color: red;
	}

	#video{
		margin-left: 20%;
	}

	#fin{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 28%;
		margin-top: 2%;
		width: 520px;
		color: white;
		padding: 10px;
		font-size: 20px;
		float: left;
		position: relative;
		margin-bottom: 2%;
	}

	#haut{
		margin-left:34%;
	}

	#hide{
		display: none;
	}

	.small{
		list-style-type: none;
		text-align: center;
		margin:20px;
	}
}

/* -------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 1920px){

	body{
		background-image: url("Img/Fond.jpg");
		background-attachment: fixed;
	}


	#titre{
		margin-left: 37%;
		margin-top: 3%;
	}

	.titrePerso{
		text-align: center;
		font-family : daysregular, arial;
	}

	#informations{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 27%;
		margin-top: 2%;
		width: 800px;
		color: white;
		padding: 20px;
		font-size: 20px;
		float: left;
		position: relative;
		display:block;
	}

	#personnages{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 34%;
		margin-top: 2%;
		width: 520px;
		color: white;
		padding: 10px;
		font-size: 20px;
		float: left;
		position: relative;
	}

	.stylePerso{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 27%;
		margin-top: 2%;
		width: 800px;
		color: white;
		padding: 20px;
		font-size: 20px;
		float: left;
		position: relative;
	}

	#goku{
		display: none;
	}


	#vegeta{
		display: none;
	}


	#picolo{
		display: none;
	}


	#gohan{
		display: none;
	}


	#personnages > img{
		margin:8px;
		width: 200px;
		height: 200px;
		cursor:pointer; 
	}

	.image{
		margin-left: 35%;
	}

	.miniature:hover{
		outline:px dashed red;
	}

	#contenu{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 34%;
		margin-top: 2%;
		width: 520px;
		color: white;
		padding: 10px;
		font-size: 20px;
		float: left;
		position: relative;
	}

	#explication{
		padding-right: 20px;
		padding-left: 20px;
		text-align: center;
	}

	.retour{
		text-decoration:none;
		font-family : daysregular, arial;
		color: white;
		text-align: center;
	}

	.retour:hover{
		color: red;
	}

	#video{
		margin-left: 20%;
	}

	#fin{
		background-color: rgba(	10, 9, 11 , 0.8);
		margin-left: 34%;
		margin-top: 2%;
		width: 520px;
		color: white;
		padding: 10px;
		font-size: 20px;
		float: left;
		position: relative;
		margin-bottom: 2%;
	}

	#haut{
		margin-left:34%;
	}

	#hide{
		display: none;
	}

	.small{
		list-style-type: none;
		text-align: center;
		margin:20px;
	}
}
}



/* FONT */

@font-face {
    font-family: 'sf_collegiateregular';
    src: url('Font/SF_Collegiate-webfont.eot');
    src: url('Font/SF_Collegiate-webfont.eot?#iefix') format('embedded-opentype'),
         url('Font/SF_Collegiate-webfont.woff') format('woff'),
         url('Font/SF_Collegiate-webfont.ttf') format('truetype'),
         url('Font/SF_Collegiate-webfont.svg#sf_collegiateregular') format('svg');
    font-weight: normal;
    font-style: normal;
	
	/* Autre façon d'importer un style 
		<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
	*/
}

@font-face {
    font-family: 'comic_zine_otregular';
    src: url('Font/comic_zine_ot-webfont.eot');
    src: url('Font/comic_zine_ot-webfont.eot?#iefix') format('embedded-opentype'),
         url('Font/comic_zine_ot-webfont.woff') format('woff'),
         url('Font/comic_zine_ot-webfont.ttf') format('truetype'),
         url('Font/comic_zine_ot-webfont.svg#comic_zine_otregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'daysregular';
    src: url('Font/Days-webfont.eot');
    src: url('Font/Days-webfont.eot?#iefix') format('embedded-opentype'),
         url('Font/Days-webfont.woff') format('woff'),
         url('Font/Days-webfont.ttf') format('truetype'),
         url('Font/Days-webfont.svg#daysregular') format('svg');
    font-weight: normal;
    font-style: normal;
}