html { 
  margin:0;
  padding:0;
  background: url(fond.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}
logo{
    width: 100%;
    margin: 0px auto;
	 position: fixed;
	z-index: 4; 
}
.imagelogo
{
	max-width: 100%;
}
 .enveloppe
{
	max-width: 100%;
	right: 5%;
	 position: fixed;
	 margin-top: 1%;
	z-index: 4; 
} 
  body {  
margin: 0px;
 font-family: 'Dancing Script', cursive;
	font-size: 100%;
	color: : black; 
	text-align: center;
	}
.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.droite {
  float:right;
}
 
.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
 
.oModal:target {
  opacity:1;
  pointer-events: auto;
}
 
.oModal:target > div {
  margin: 1% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
.oModal > div h2 {
  margin:0;
}
 
.oModal > div .btn {
  float:right;
}
 
.oModal > div section,.oModal > div > header, .oModal > div > footer {
  padding:15px;
}

a {
text-decoration: none;
}

@media all and (min-width: 1079px) {
 
#contenant1  {
	max-width: 100%;
	padding: 2% 10% 2% 10%;
	height: auto;
	text-align: justify;
	background-color: transparent; 
		margin-left: auto;
		margin-right: auto; 
		font-size: 26px;
} 
.plume
{
	max-width: 100%;
}  
 .oModal > div {  
  max-width: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  color: black;
  background: url(vp.jpg) no-repeat center fixed; 
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  font-size: 22px;  
  overflow-y: auto;
  max-height: 95%; 
} 

h1 {
   font-size: 50px;
	font-style: normal ;
  }
  h2 {
   font-size: 30px;
	font-style: normal; 
  }
.chanson {
max-width: 100%;
display:inline-block;
margin: 15px;
 }    
	 }
	 
	 @media all and (max-width: 1078px) and (min-width: 779px) {

 #contenant1  {
	max-width: 100%;
	padding: 2% 10% 2% 10%;
	height: auto;
	text-align: justify;
	background-color: transparent; 
		margin-left: auto;
		margin-right: auto; 
		font-size: 20px;
} 
.plume
{
	max-width: 50%;
}  
.oModal > div {  
  max-width: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  color: black;
  background: url(vp.jpg) no-repeat center fixed; 
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  font-size: 20px;
    overflow-y: auto;
  max-height: 95%; 
  
} 
.chanson {
max-width: 50%;
display:inline-block;
margin: 10px;
 }
 h1 {
   font-size: 28px;
	font-style: normal ;
  }
    h2 {
   font-size: 25px;
	font-style: normal; 
  }

	 }
	 
	  @media all and (max-width: 778px) and (min-width: 100px) {

 #contenant1  {
	max-width: 100%;
	padding: 2% 10% 2% 10%;
	height: auto;
	text-align: justify;
	background-color: transparent; 
		margin-left: auto;
		margin-right: auto; 
		font-size: 18px;
} 
.plume
{
	max-width: 40%;
}  
.oModal > div {  
  max-width: 400px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  color: black;
  background: url(vp.jpg) no-repeat center fixed; 
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  font-size: 16px;
    overflow-y: auto;
  max-height: 95%; 
} 
.chanson {
max-width: 30%;
display:inline-block;
margin: 8px;
 } 
 h1 {
   font-size: 26px; 
	font-style: normal;
  }
    h2 {
   font-size: 20px;
	font-style: normal; 
  }
}