body, html {
  height: 100%;
  margin: 0;
  padding:0;
  font: 15px/1.8 "Lato", sans-serif;
  color: #777;
}


.calqueopacity {
    background-color: rgba(250, 250, 250, 0.35);
	background-size:cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	margin:0;
  padding:0;
}

img#drapeau{
	position:absolute;
	top:2px;
	left:2px;
	z-index:7;
	opacity:0.6;
}

div.alignementbas{position:absolute; bottom:0px; margin:0;
  padding:0; width:100%;}


/************************* cadre 1 d'accueil avec logo ****************/
div#cadreparallax1 {
	  margin:0;
  padding:0;
	position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../elements/img_parallax1.jpg");
  height:800px;
  
}
div#logoaccueil {
	border:0px solid yellow;
   background-image: url("../elements/logo1.svg");
	background-position:center;
	background-repeat:no-repeat;
  top:150px;
  
  min-height:200px;
  height:100%;
  width:100%;
  
  padding:0;
}
/************************* cadre 1-1 biographie ****************/
div#cadreparallax1-1 {
	  margin:0;
  padding:0;
	position: relative;
	background-color:black;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height:500px;
}
div#cadrebiographie{
background-color:black;
color:#ddd;	
text-align:center;
margin-top:0;
padding-top:0px;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
text-align:justify;
}

div#cadrebiographie h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color:#ddd;
  text-align:center;
}
div#cadrebiographie p{ margin:0;
  padding:0;}

/************ cadre 2 avec membres ********/
div#cadreparallax2 {
	  margin:0;
  padding:0;
	position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../elements/fond-montagne soleil.jpg");
  height: 1000px;
}
div#cadretitremembres {
  position:;
  left: 0;
  top:;
  width:100%;
  text-align: center;
  color: #000;
}
	span#textetitremembres{
	background-color:transparent;
	font-size:25px;
	color: #f7f7f7;
	text-shadow:2px 2px #000000;
	}
/*** div des membres et photos ***/
div#cadrepourmembres{
	margin-top:200px;
display:flex;
justify-content:center;
width:100%;
background-color:black;
color:#ddd;	
padding-top:50px;
padding-bottom:50px;
}
div.membre{
	margin-left:auto;
	margin-right:auto;
	border:1px solid grey;
	text-align:center;
}
div.membre img{
margin:1px;
max-width:110px;
}


/*********************** cadre 3  de la discographie *******************************/
div#cadreparallax3 {
	  margin:0;
  padding:0;
	position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../elements/fond-obedience.jpg");
  height: 1000px;
}
div#cadretitrediscographie {
  position:;
  left: 0;
  top:;
  width:100%;
  text-align: center;
  color: #000;
}
	span#textetitrediscographie{
	background-color:transparent;
	font-size:25px;
	color: #f7f7f7;
	text-shadow:2px 2px #000000;
	}

div#cadrepourdiscographie{
margin-top:200px;
background-color:black;
width:100%;
color:#ddd;	
padding-top:50px;
padding-bottom:50px;
}
div#cadrepourdiscographie p{padding-left:20px;}



/****************** cadre 4 pour contact **********************/

div#cadreparallax4 {
	  margin:0;
  padding:0;
	position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../elements/fond-the eyes of emptiness.jpg");
 height: 1000px;
}
div#cadretitrecontact {
  position:;
  width:100%;
  text-align: center;
  color: #000;
}
span#textetitrecontact {
	background-color:transparent;
	font-size:25px;
	color: #f7f7f7;
	text-shadow:2px 2px #000000;
}
div#cadrepourcontact{
	margin-top:200px;
background-color:black;
width:100%;
color:#ddd;	
padding-top:50px;
padding-bottom:50px;
}
div#cadrepourcontact p{padding-left:20px;}

/********************* cadre 5  tout en bas avec une phrase ***************/
div#cadreparallax5 {
	  margin:0;
  padding:0;
	position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../elements/img_parallax1.jpg");
  height: 800px;
   opacity: 0.65;
}
div#phrasedefin, div#phrasedefin-jp{
  position:absolute;
  left: 0;
  top: 50%;
  width:100%;
  text-align: center;
  vertical-align:center;
  color: #000;
}
div#phrasedefin span {
  color: #fff;
  padding: 10px;
  font-size: 45px;
  letter-spacing:2px;
  font-style:italic bold;
  line-height:49px;
  font-family: 'Tangerine', cursive;
}

div#phrasedefin-jp span{
	  color: #fff;
  padding: 10px;
  font-size: 45px;
  letter-spacing:2px;
  font-style:italic;
  line-height:49px;
  font-family: 'Hannari', serif;
}

/**********************  cadre écoute Dying Day ***********************/
div#parallax-dyingday {
	position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../elements/pochette-dyingday.jpg");
  height:1500px;
}
div#cadrepourdyingday{
background-color:black;
color:#ddd;	
text-align:center;
padding:50px 20px;
text-align: justify;
}
div#cadrepourdyingday h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color:#ddd;
  text-align:center;
}
  
/**********************  cadre écoute Obédience ***********************/
div#parallax-obedience {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../elements/pochette-obedience.jpg");
  height: 1500px;
}

div#cadrepourobedience{
background-color:black;
color:#ddd;	
text-align:center;
padding:50px 20px;
text-align: justify;
}
div#cadrepourobedience h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color:#ddd;
  text-align:center;
}
/**********************  cadre écoute Divers ***********************/
div#parallax-divers {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../elements/fond-the eyes of emptiness.jpg");
  height: 1000px;
}
div#cadrepourdivers{
background-color:black;
color:#ddd;	
text-align:center;
padding:50px 20px;
text-align: justify;
}
div#cadrepourdivers h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color:#ddd;
  text-align:center;
}

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






a{
color:grey;
}



/************* bouton et menu lattéral ********/

div#boutonmenu{
cursor: pointer;
position:fixed;
top:10px;
right:10px;

border:1px solid red;
z-index:4;
  display: block;
  width: 50px;
  height: 50px;
  font-size:30px;
  color:white;
  text-align:center;
  background-color: black;
  border-radius: 45%;
box-shadow: inset -25px 25px -40px rgba(0,0,0,0.5);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,0.3) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,0.3) 0%, transparent 100%);  
background-image: -o-linear-gradient(-45deg, rgba(255,255,220,0.3) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,0.3) 0%, transparent 100%);
}
div#boutonmenu span{
	position:absolute;
	top:-3px;
	right:12px;
}

div#boutonmenu-decor1{
position:fixed;
top:10px;
right:10px;

border:2px solid yellow;
margin-left:290px;
z-index:3;
display: block;
  width: 50px;
  height: 50px;
  border-radius: 45%;
}
div#boutonmenu-decor2{
position:fixed;
top:10px;
right:10px;

border:2px solid orange;
margin-left:289px;
z-index:3;
display: block;
  width: 50px;
  height: 50px;
  border-radius: 45%;
}
div#boutonmenu-decor3{
position:fixed;
top:10px;
right:10px;

border:2px solid grey yellow grey grey;
margin-left:290px;
z-index:3;
display: block;
  width: 50px;
  height: 50px;
  border-radius: 35%;
}




#conteneur-menu2 {
	display:none;
	z-index:6;
	position:fixed;
	top:60px;
	right:10px;
	border:0px solid blue;
	
    height: 150px;
    width: 220px;
	text-align:right;
}
#boutonmenu:hover #conteneur-menu2{display:block;}

#conteneur-menu2 ul {
    padding: 0;
	padding-top:5px;
    margin: 0;
    margin-right: 5px;
    float: right;
}
 
#conteneur-menu2 ul li {
    list-style: none;
}
 
#conteneur-menu2 ul li a {
    text-decoration: none;
	text-shadow:2px 2px #000000;
    font-size: 20px;
	margin:2px;
    padding: 5px;
    display: block;
    color: white;
    background: transparent;
    width: 200px;        /*230 à l'origine*/
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
    line-height: 30px;   /*20 à l'origine*/
}
 
 
#conteneur-menu2 ul li a:hover {
    background-image: transparent;
	padding-right: 20px;
    width: 180px;
	float:right;
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
}



/** XXXXXXXXXXXXXXXXXXXXXXXXXX  barre d'en tete  menu centré XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX **/
#menu{
	cursor: pointer;
	display:none;
	z-index:6;
border: 0px solid red;
position:fixed;
top:0px;
left:50%;
margin-left:-125px;
}

#menu ul {
	border: 0px solid blue;
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu .li1 {
	border: 0px solid yellow;
 float:left;
 margin:0;
 padding:0;
 background-color:rgba(0,0,0,0.2);
 }
 #menu .li2 {
	border: 0px solid yellow;
 float:left;
 margin:0;
 padding:0;
 background-color:black;
 }
 #menu .li1 a {
 display:block;
 width:110px;
 color:white;
 text-decoration:none;
 padding:5px;
 }
#menu .li2 a {
 display:block;
 width:110px;
 color:white;
 text-decoration:none;
 padding:5px;
 }
#menu .li2 a:hover {
 color:#FFD700;
 }
#menu ul .li1 ul {
 display:none;
 }
#menu ul .li1:hover ul {
 display:block;
 }
#menu .li1:hover ul .li2 {
 float:none;
 }
#menu .li1 ul {
 position:absolute;
 }
 
 
div#lignehaut{
	 z-index:5;
	 display:none;
	 position:fixed;
	 top:0px;
	 height:36px;
	 width:100%;
	 border:1px solid;
	 border-color:transparent transparent grey transparent;
	 background-color:grey;
	 opacity: 0.5;
 }
 
 
 
/***************** Présentation des Albums *************************/
div.album{}
div.album h2{
	margin: 2em 0 0.5em 0;
	font-size: 1.4em;
	color: #e6b367;
	border-bottom: 1px dotted #444;
}
div.album h4{
	margin: 1.5em 0 0.5em 0;
	padding: 0 0 0.5em 0;
	font-size: 1.2em;
	color: #eee;
	border-bottom: 1px dotted #444;
	text-align:justify;
	letter-spacing:;
}
 
/************** lecteur audio ********************/
div#lecteuraudio{
	border:0px solid yellow;
position:fixed;
z-index:5;
background-color:grey;
padding-top:5px;
bottom:0px;
width:100%;
text-align:center;
} 
 
 .play-list{
  padding:0;margin:0;
  list-style:none;
}
.play-list .material-icons,
.play-list a span{vertical-align:middle;}
.play-list a{cursor:pointer;color:white;}
.play-list a.gris{color:grey;}

 


/*************** photos des pochettes de CD ****************/
div.album img{max-width:100px;}


/****************************  agrandissement des photos et images *****************************/
.myImg {
  z-index:1;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.myImg:hover {opacity: 0.7; z-index:1;}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index:10; /* Sit on top */
  padding-top: 20px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ 
}


/* Modal Content (image) */
.modal-content {
 margin: auto;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height:90%;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 40px;/*150px*/
}

/* Add Animation */
.modal-content, #caption{  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}



 
/*********** Footer *******************/
div#foot{
	  margin:0;
  padding:0;
background-color:black;
color:white;
text-align:center;
} 
 
 
 
 
 
 
 
 
 
 
/** XXXXXXXXXXXXXXXXXXXXXXXXXX écrans entre 400px et 599px de large XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX **/
@media screen and (min-width: 400px) and (max-width: 599px){

}

/** XXXXXXXXXXXXXXXXXXXXXXXXXX écrans entre 600px et 899px de large XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX **/
@media screen and (min-width: 600px) and (max-width: 899px){
div#boutonmenu{display:none;}
div#menu{display:inline-block;}
div#lignehaut{display:inline-block;}
div.album h4{letter-spacing:2px;}
br.brpetit{display:none;}
}


/** XXXXXXXXXXXXXXXXXXXXXXXXXX ecrans de plus de 900px de large XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX **/
@media (min-width: 900px){
div#boutonmenu{display:none;}
div#menu{display:inline-block;}
div#lignehaut{display:inline-block;}
div.album h4{letter-spacing:2px;}
br.brpetit{display:none;}
}