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

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

	#imgAnime{
		width: 300px;
		height: 168px;
	}

	#boule{
		margin-left: 80%;
		margin-top: 5%;
		position: fixed;
		display: none;
	}

		#boule2{
		margin-left: 5%;
		margin-top: 5%;
		position: fixed;
		display: none;
	}

	.ball{
		width:  250px;
		height: 250px;
	}
	

	#titre{
		margin-left: 7%;
		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 :28%;
	}

	#hide{
		display: none;
	}

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

	ul{
		padding: 0;
	}

	.dbz{
		text-align: justify;
	}

}

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

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

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

	#imgAnime{
		width: 500px;
		height: 281px;
	}


	#boule{
		margin-left: 80%;
		margin-top: 5%;
		position: fixed;
		display: none;
	}

		#boule2{
		margin-left: 5%;
		margin-top: 5%;
		position: fixed;
		display: none;
	}

	.ball{
		width:  250px;
		height: 250px;
	}

	#titre{
		margin-left: 25%;
	}

	#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: 500px;
		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: 24%;
	}

	#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;
	}

	.dbz{
		text-align: justify;
	}

}


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


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

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

	.dbz{
		text-align: justify;
	}

	#imgAnime{
		width: 800px;
		height: 450px;
	}

	#boule{
		margin-left: 83%;
		margin-top: 5%;
		position: fixed;
	}

	#boule2{
		margin-left: 2%;
		margin-top: 5%;
		position: fixed;
	}

	.ball{
		width:  150px;
		height: 150px;
	}

	#titre{
		margin-left: 32%;
	}

	.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%;
	}

	#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;
	}

	.dbz{
		text-align: justify;
	}

	#imgAnime{
		width: 800px;
		height: 450px;
	}

	#boule{
		margin-left: 80%;
		margin-top: 5%;
		position: fixed;
	}

		#boule2{
		margin-left: 5%;
		margin-top: 5%;
		position: fixed;
	}

	.ball{
		width:  250px;
		height: 250px;
	}

	#titre{
		margin-left: 37%;
	}

	.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%;
	}

	#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;
	}

	ul{
		padding: 0;
	}
}