*{

    font-size:16px;
    font-family: 'Jura', sans-serif;
    font-weight: 400;
    color:#2f2f2f;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
}

.blockpage{
  width:90%;
  margin:0 auto;
}

.fa-bars{
  display:none;
}

header{
  margin-top: 50px;
  min-width: 1024px;
  margin:50px auto;

}

h1{
  text-align:left;
  font-size:35px;
  padding-left: 100px;
  display:inline-block;
  
 

}

span{
  text-align:left;
  font-size:30px;
  display: inline-block;
  width :10%;
  padding-left:350px;
   
}
nav ul{
     margin-top:120px;
     min-width:1240px;
     display: inline-block;
     margin-bottom:100px;
   }
    
ul li{
  list-style: none;
  display: inline-block;
  padding-left:60px;
}

a{
  text-decoration:none;
  cursor:pointer;
}

a:hover{
  color:#ccc;
}

main{
  display:inline-block;
  margin-bottom: 150px;
  width:100%;
}

.disque{
  width:320px;
  height:257px;
  display:inline-block;
  margin-right: 150px;
  margin-left:250px;
}

#tourne{
  width:100%;
  height:100%;
}



article{
  display: inline-block;
  width:310px;
  height:250px;
  vertical-align: top;
  }

footer{
  margin-left:100px;
  color:#ccc;
}

.propop {
opacity:0;

}

.propos{
  background: transparent;
  cursor:pointer;
}


/*MUSIQUE*/

.premier{
    
    z-index:1;
    
    width:500px;
    height:315px;

    

    }

.theatre{
    
    z-index:2;
    position:relative;
    left:163px;
    width:336px;
    height:163px;
    background:white;
    padding-top:45px;
    font-size:14px;
    top:-317px;
  

}

  section {
    position:relative;
    background:white;
    height:57px;
    width:500px;
    z-index:3;
    top:-221px;
   
    
    
}
.lecteur{
  
  width:500px;
  height: 286px;
  margin:0 0 0 250px;
  position: relative;
  display:block;
  
}

.l1{
  height: 286px;
}
 
.l2{
  height: 375px;
}
.l3{height:350px; }

.pasie{
    top:-253px;
    width:500px;
    height:375px;
}

.asie{
    top:-374px;
}

.basie{
    top:-221px;
    

}
.player{
    top:-505px;
    height:375px;
}

.palettes{
    top:-378px;
}
.blayer{
    top:-221px;
    
}
.visiblinsep{
    opacity:1;
    margin-left:20px;
}

.invisiblinsep{
    opacity:0;
  padding-left: 10px;
  padding-right:5px;
}

.visiblasie{
    opacity:1;
    margin-left:20px;
}

.invisiblasie{
    opacity:0;
    display:inline-block;
    padding-left: 10px;
  padding-right:5px;
}

.visiblep{
    opacity:1;
    margin-left:20px;
}

.invisiblep{
    opacity:0;
    padding-left: 10px;
    padding-right:5px;
}


h3{  
    cursor:pointer;
     color:#470C43;
}


/*CHANSONS*/

.l4{
  height:469px;
  
}
.chanson{
  height:469px;
}
.cache{
  top:-472px;
  padding-top:8px;
}
.credits{
  padding-left: 10px;
  padding-right:5px;
  opacity:0;
  }

.lescredits{
  margin-left:20px;
}

.paroles{
  color:#470C43;
  margin-left:320px;
  margin-top: 35px;
}

/*PAROLES*/

.textes{
  padding:0px 100px 0px 170px;
}


.autres{
  font-size:18px;
  color:#85BBFF;
  margin-bottom:15px;
 
}

.dev{
  color:#4CE8C4;
  font-size: 18px;
  margin-bottom:15px;
  
}


.contact{

  color:#FFA850;
  border:none;
  margin:0;
  font-size: 18px;
  margin-bottom:15px;
  }
  

/*VIDEO*/
.screen{
   
    width:560px;
    height:315px;
    border:7px #ddd solid;
    border-radius:10px;
    margin:0 auto;
    margin-bottom: 25px;
    
}

.video{
  width:560px;
  margin-left: 250px;
}
.titreu {
    padding: 15px;
    opacity:0;
}

.titred {
    padding: 15px;
    opacity:0;
}
.titret {
    padding: 15px;
    opacity:0;
}
.titreq{
    padding: 15px;
    opacity:0;
  }


.visi{
    opacity:1;
}

/*BIO ET CONTACT*/

.left{
  width:430px;
  margin-left:200px;
  display:inline-block;
}
.right{
  width:350px;
  margin-left:130px;
  display:inline-block;
  vertical-align: top;
  min-width:260px;
      
    
}
.zik{
  display:block;
}
.invisible{
  display:block;
  text-align: justify;
  margin-bottom:12px;
}
.musique{  
    display:none;

}


.invisibles{
  display:none;
  margin-bottom: 15px;
  margin-left:80px;

}

.portrait{
  height:320px;
  width:320px;
  margin-top: 50px;
}

img{
  width:50%;
  height:50%;
  border-radius:10px;
 
}

.autres{
  font-size:18px;
  color:#85BBFF;
  margin-bottom:15px;
 
}

.dev{
  color:#4CE8C4;
  font-size: 18px;
  margin-bottom:15px;
  
}


.contact{

  color:#FFA850;
  border:none;
  margin:0;
  font-size: 18px;
  margin-bottom:15px;
  }

.site{
  color:#85BBFF;
  
}
.nomarges{
  margin-left:0;
  padding-left: 0
}

/*Actualités*/

.couleur

{
  color:#FFA850;
}

/*MOBILE FIRST

PAGE ACCUEIL*/
@media screen and (max-width:760px) and (min-width:320px)  {


header{
  margin-top: 50px;
  min-width:320px;
  margin:50px auto;

}


.bio{
    
    display:block;
    height:100%;
}

article{
   
    z-index:2;
    height:165px;
    background:white;
    font-size:14px;
    margin-bottom:30px;

     }


h1 {
    
    margin-top:50px;
    font-size:35px;
    margin-bottom:10px;
    padding-left: 0px;
    display: block;
    width:100%;

  }

span {
     
     font-size:23px;
     margin-left:0;
     display:block;
     padding-left: 0px;
}





.fa-bars{
  display :inline-block;
  margin-left:250px;
  font-size:20px;
  padding:15px;
  
  
}

nav ul{
     margin-top:15px;
     display:none;
     min-width: 320px;
     margin-bottom: 0px;
     max-width:100%;
     
}
ul li{
  
  display: block;
  width:100%;
  padding-left:0px;
}


a:hover{
  color:#ccc;
}



li{
  list-style: none;
  display:block;
  width:100%;
  
}


a{
  text-decoration:none;
  border-top :1px solid #ccc;
  padding:15px;
  display: block;

}

li:last-child{
    border-bottom:1px solid #ccc;
}

ul li:last-child{
  width: 100%;
}


.propop {
opacity:0;

}

.propos{
  background: transparent;
  display:block;
  

}

h2 {
    font-size:16px;
    padding-top:28px;
} 

a footer{
    margin-top:75px;
    
}
.minus{font-size: 10px;
    color:#ccc;
  }



.disque{
  width:300px;
  height:250px;
  display:block;
  text-align: center;
  margin-left:0px;
}





/*PAGE MUSIQUE
PAGE CHANSONS*/



.theatre{
      
      
      margin-left:-163px;
      background:white;
      top:-316px;
    
    
}

.premier{
    height:314px;
    margin-left: 0;
    width:320px;
}

section {
   
    top:-253px;
    background:white;
    position:relative;
    height:55px;
    width:320px;
    z-index:3;
    margin-left: 0;
     top:-250px;
  }

.pasie{
    top:-253px;
    width:310px;
    height:375px;
}

.asie{
    top:-377px;
}

.basie{
    top:-251px;
    

}
.player{
    top:-505px;
    height:379px;
}

.palettes{
    top:-381px;
}
.blayer{
    top:-251px;
    
}
.visiblinsep{
    opacity:1;
}

.invisiblinsep{
    opacity:0;}

.visiblasie{
    opacity:1;
}

.invisiblasie{
    opacity:0;
    display:inline-block;
}

.visiblep{
    opacity:1;
}

.invisiblep{
    opacity:0;
}

.lecteur{width: 320px;
margin-left:0;}

/*CHANSONS*/

.l4{
  height:469px;
  margin-top:20px;
  
}
.chanson{
  height:469px;
}
.cache{
  top:-472px;
  padding-top:8px;
}
.credits{
  padding-left: 7px;
  padding-right:7px;
  opacity:0;
  }
.lescredits{
  text-align:right; 
}

/*CHANSONS*/

.textes{
  padding:0px 10px 0px 10px;
}


.textes>h3{
  margin-top: 35px;
}

  /*VIDEOS*/

.screen{
   
    width:320px;
    height:180px;
    border:4px #ddd solid;
    border-radius:10px;
    margin-bottom:25px;
}

.video{

    width:320px;
    margin-left:0px;
}

/*BIO ET CONTACT*/

.left{
  margin-left: 0px;
  width:300px;
}
.right{
  margin-left: 0px;
  width:300px;
}
.contact{

  color:#FFA850;
  border:none;
  margin-left:0px;
  }


.invisible{
  display:none;
  margin-bottom: 15px;
  margin-left:80px;

}
.portrait{
  width:50%;
  height:12%;
  border-radius:10px;
  margin-left:80px;

  
  }

.musique{  
    color:#470C43;
     
     }
h4{
     color:#470C43;


}
.autres{
  color:#85BBFF;
  padding-left:17px;
  padding-bottom: 10px
 
}

.dev{
  padding-left:17px;
  color:#4CE8C4;
  
}
.site{
  color:#85BBFF;
}
img{
  display:none;
}
.musique{
  padding-top:25px;
  padding-left:14px;
  padding-bottom: 25px;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
}
.invisible{
  margin-left:0px;

}
.invisibles{
  margin-left:0px;

}

#tourne{
  display:block;
}

}