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

	#test{
		height: 260px;
		width: 100%;
		background-color: rgba(	10, 9, 11 , 0.8);
	}

	#Titre{
		margin-left: 12%;
	}

	h2{
		margin-left: 6%;
	}

	#main{
		
	}

	#Liste{
		text-align: center;
		background-color: rgba(	10, 9, 11 , 0.8);
	}

	a{
		color:white;
		text-decoration:none;
	}                

	a:visited{
		color: white;
	}



#main_content_index{
	width : 100%;
	height : 200px;
}

#dbz1{
	position :absolute;
	width : 80%;
}
#dbz2{
	position :absolute;
	width : 80%;
}
#dbz3{
	position :absolute;
	width : 80%;
}

#bouton{
	width : 80%;
	height : 10%;
	margin-bottom: 12%;
	margin-left: 6%;
}

#bouton_precedent_div{
	width:10%;
	height:100%;
	opacity : 0.8;
	float : left;
	display : inline-block;
	text-align : center;
	vertical-align : middle;
	line-height:50px;
	font-size:48px;
	font-family : sf_collegiateregular, arial;
	
}

#bouton_play_stop_div{
	text-align: center;
	width:80%;
	float : left;
	display : inline-block;
}
#bouton_suivant_div{
	width:10%;
	height:100%;
	opacity : 0.8;
	display : inline-block;
	float : left;
	text-align : center;
	vertical-align : middle;
	line-height:50px;
	font-size:48px;
	font-family : sf_collegiateregular, arial;
}

#bouton_play_stop{
	display : inline-block;
	width : 50px;
	height : 50px;
	background :url("Img/play.png") no-repeat;
	background-size : cover;
	cursor:pointer; 
}

#bouton_precedent{
	display : inline-block;
	width : 50px;
	height : 50px;
	background :url("Img/precedent.png") no-repeat;
	background-size : cover;
	cursor:pointer; 
}

#bouton_suivant{
	display : inline-block;
	width : 50px;
	height : 50px;
	background :url("Img/suivant.png") no-repeat;
	background-size : cover;
	cursor:pointer; 
}

#Kawai{
	height : 80%;
	width : 100%;
	/* permet d'arrondir l'image 
		 border-radius: 50%;
	*/
	margin-left: 8%;

}

/******************************/

.dbz{
	padding: 20px;
	text-align: justify;
}

.dbzfont{
	padding: 20px;
	text-align: justify;
	font-family : sf_collegiateregular, arial;
	margin-left: 50%;
}

.dbznojust{
	padding: 20px;
}

.dbztitle{
	text-align: center;
}

#nav{
	padding-top: 20px;
	font-family : daysregular, arial;
	color: white;
}

#dbztitle{

	color:purple;
	padding: 20px;
}

#dbztitle:visited{
	color: purple;
}

#dbzimg{
	padding: 20px;
	margin-left: 8%;
}

#dbzlist{
	padding: 20px;
	margin-left: 0px;
	text-align: justify;
	background-color: rgba(	10, 9, 11 , 0.8);
}

h1{
	text-align: justify;
	font-family : daysregular, arial;
}

#maintitle{
	margin-left: 0%;
	font-size: 34px;
	font-family : daysregular, arial;
}

.fin{
	font-family : sf_collegiateregular, arial;
	font-size: 18px;

}

#video{
	margin-top: 5%;
	margin-left: 8%;
}

#dbzimg2{
	margin-left:130px;
}

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

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

	#test{
		height: 650px;
		margin-left: 20%;
		width: 60%;
		background-color: rgba(	10, 9, 11 , 0.8);
	}

	#Titre{
		margin-left: 38%;
		width: 60%;
	}

	h2{
		margin-left: 6%;
	}

	#main{
		margin-left: 20%;
		width: 60%;
	}

	#Liste{
		margin-left: 20%;
		width: 60%;
		text-align: center;
		background-color: rgba(	10, 9, 11 , 0.8);
	}

	a{
		color:white;
		text-decoration:none;
	}                

	a:visited{
		color: white;
	}



#main_content_index{
	width : 100%;
	height : 50px;
}

#dbz1{
	position :absolute;
	width : 50%;
}
#dbz2{
	position :absolute;
	width : 50%;
}
#dbz3{
	position :absolute;
	width : 50%;
}

#bouton{
	width : 90%;
	height : 10%;
	margin-bottom: 5%;
	margin-left: 5%;
}

#bouton_precedent_div{
	width:10%;
	height:100%;
	opacity : 0.8;
	float : left;
	display : inline-block;
	text-align : center;
	vertical-align : middle;
	line-height:50px;
	font-size:48px;
	font-family : sf_collegiateregular, arial;
	
}

#bouton_play_stop_div{
	text-align: center;
	width:80%;
	float : left;
	display : inline-block;
}
#bouton_suivant_div{
	width:10%;
	height:100%;
	opacity : 0.8;
	display : inline-block;
	float : left;
	text-align : center;
	vertical-align : middle;
	line-height:50px;
	font-size:48px;
	font-family : sf_collegiateregular, arial;
}

#bouton_play_stop{
	display : inline-block;
	width : 50px;
	height : 50px;
	background :url("Img/play.png") no-repeat;
	background-size : cover;
	cursor:pointer; 
}

#bouton_precedent{
	display : inline-block;
	width : 50px;
	height : 50px;
	background :url("Img/precedent.png") no-repeat;
	background-size : cover;
	cursor:pointer; 
}

#bouton_suivant{
	display : inline-block;
	width : 50px;
	height : 50px;
	background :url("Img/suivant.png") no-repeat;
	background-size : cover;
	cursor:pointer; 
}

#Kawai{
	height : 80%;
	width : 100%;
	/* permet d'arrondir l'image 
		 border-radius: 50%;
	*/
	margin-left: 8%;

}

/******************************/

.dbz{
	padding: 20px;
	text-align: justify;
}

.dbzfont{
	padding: 20px;
	text-align: justify;
	font-family : sf_collegiateregular, arial;
	margin-left: 50%;
}

.dbznojust{
	padding: 20px;
}

.dbztitle{
	text-align: center;
}

#nav{
	padding-top: 20px;
	font-family : daysregular, arial;
	color: white;
	margin-right: 60px;
}

#dbztitle{

	color:purple;
	padding: 20px;
	margin-left: 40%;
	font-size: 26px;
}

#dbztitle:visited{
	color: purple;
}

#dbzimg{
	padding: 20px;
	margin-left: 37%;
}

#dbzlist{
	padding: 20px;
	margin-left: 0px;
	text-align: center;
	background-color: rgba(	10, 9, 11 , 0.8);
}

h1{
	text-align: justify;
	font-family : daysregular, arial;
}

#maintitle{
	margin-left: 0%;
	font-size: 64px;
	font-family : daysregular, arial;
}

.fin{
	font-family : sf_collegiateregular, arial;
	font-size: 28px;
}

#video{
	margin-top: 2%;
	margin-left: 37%;
}

#dbzimg2{
	margin-left:130px;
}

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



}