body{
	overflow-y:auto;

}
.vin{
	
	height: 20rem;
	width: 100%;
  position: relative;
 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color:white;
  font-size:40px;
  font-style: italic;

}
.img{
	margin-left: 5%;
	max-width:300px;
	max-height: 609px;
}

.paraph {
	text-align: center;
	margin-left:5%;
	margin-top:5%;
	padding-left: 15%;
	
}

 li{
	list-style: none;
	border-bottom:2px solid rgb(162, 137, 81); 

}

.vin:hover{
	filter:grayscale(70%);
}

#vinPlaisir{
	background-image:url("img/vinPlaisir2.jpeg");
	color:white;

}

#vinTerroir{
	background-image:url("img/VinTerroir.jpeg");
	 color:white;
}
#vinCara{
		background-image:url("img/vinCaractere.jpeg");
		 color:white;
}
#Effer{
		background-image:url("img/bulles.jpg");
		 color:white;	
}
.droite span{
	position: absolute;
	left:10%;
	top:45%;
	
}
.gauche span{
	position:absolute;
	left:70%;
	top:45%;
}
.paraph h3 {
	color:rgb(162, 137, 81);
	margin-bottom:5%;
  font-style: italic;
}
.paraph a{
	background-color: white;
	color:rgb(162, 137, 81);
	border-radius:20px ;
	border-color: rgb(162, 137, 81)
}
.paraph a:hover {
	background-color:rgb(162, 137, 81) ;
	color:white;
}
@media (max-width: 600px){
	.vin{
		font-size:20px;
	}
	.img{
		display:block;
		margin-left:-3%;
		
	}
	.paraph {
		text-align: center;
		
		margin-top:5%;
		margin-left:-10%;
		
	}
	.gauche span{
		
		left:50%;
		
	}
	.droite span{
		
		left:5%;
		
		
	}
}