* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
line-height:1em;
}

body{
margin: 0;
padding: 0;
height:100%;
font-family: helvetica Neue,Trebuchet MS,Arial,sans-serif;
color: #555;
height:100%;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
-ms-overflow-x: scroll;
}

h1{
line-height: auto;
font-size: 1.5em;
margin: 0;
padding-bottom:1em;
text-align:left;
}

h2{
line-height: auto;
font-size: 1.2em;
margin: 0;
padding-bottom:0em;
text-align:justify;
text-shadow: 2px 2px 4px #000000;
}

h3{
line-height: auto;
font-size: 0.55em;
margin: 0;
padding-bottom:1em;
text-align:justify;
text-shadow: 2px 2px 4px #000000;
}

h4{
font-size: 2em;
margin: 0;
padding-bottom:1em;
text-align:left;
color:black;
text-transform:uppercase;  
break-inside: avoid-column;
/* Pour Firefox : */
page-break-inside: avoid;
/* Pour WebKit : */
-webkit-column-break-inside: avoid;

}


h5{
margin: 10;
padding-bottom:1em;
text-align:justify;
display:block;	
font-size:inherit;
 }


h6 {
display:inline;
font-size: 0.7em;
float:right;
}

h7{
font-size: 0.9em;
margin: 0;
padding-bottom:1em;
text-align:center;
color:black;
line-height: 2;
font-weight: 400;
}




p {
line-height: 1.5em;
margin: 10;
padding-bottom:1em;
text-align:justify;
font-size: 1.3em;
}

a {
line-height: auto;
margin: 10;
padding-bottom:1em;
color:black;
text-decoration:none;
font-size: 1em;
}

a:hover {
line-height: auto;
margin: 10;
font-size: 1em;
}

li {
list-style-type :none;	
text-align:left;
font-size:1em;
}

li a {
margin: 10;
padding-bottom:1em;
text-align:justify;

/* modifications possibles */
line-height: 1.5em;
font-size: 1.3em;

}

button {
height:60px;
margin-bottom:1em;
margin-right: auto;
margin-left: auto;
padding:0;
cursor:pointer;
right: 0;
left: 0;
width:100%;
font-size: 0.7em;
border:0;

/*modifications possibles */
background-color:rgba(0,0,0,1);
color:rgba(255,255,255,1);
border-radius:1px;
}


/* CONTENU CENTRAL */

#wrap{
position: relative;
height:100%;
margin:0;
padding:0;
}



/* MENU CENTRAL */

#nav {
display:inline;
position: relative;
border-bottom: 0px solid #ddd;
width: 100%;
margin-left: auto;
margin-right: auto;
line-height: 9vh;
top:-500px;
padding:0px;
z-index:99999;

/* modifications possibles */
background-color:rgba(0,0,0,0.6);
text-align: center;
font-size: 14px;
font-style:normal;
}


#nav1 {
display:inline-block;
position:relative;
margin-left:5vw;
margin-right:5vw;

}


#nav2 {
display:inline-block;
position:relative;
margin-right:0;
margin-left:0;
right:2vw;

}


#nav3 {
display:inline-block;
position:absolute;
margin-right:0;
margin-left:0;
left:2vw;
float : left;
COLOR:WHITE;
font-size: 1.8em;
background-color:rgba(255,255,255,0);

}



.txtnav3 {
padding:5px 15px 5px 15px;
line-height:2em;
white-space:nowrap;

/* modifications possibles */
color:rgba(255,255,255,1);
border-radius: 0px;
font-variant: small-caps;


}


.link, .link2, .linkfa { 
padding:5px 15px 5px 15px;
line-height:2em;
cursor:pointer;
white-space:nowrap;

/* modifications possibles */
color:rgba(255,255,255,1);
border-radius: 0px;
font-variant: small-caps;

}




.linkactive,  .link2:active {
color:rgba(255,255,255,1);
border-bottom:1px;
border-bottom-color:white;
border-bottom-style:solid;

border-top:1px;
border-top-color:white;
border-top-style:solid;

}




.link:hover, .link2:hover {
/* modifications possibles */
color:rgba(255,255,255,1);

border-bottom:1px;
border-bottom-color:white;
border-bottom-style:solid;

border-top:1px;
border-top-color:white;
border-top-style:solid;

}


.active {
font-style:italic;
font-weight:bold;
}

   

/* BLOC D'ACCUEIL */
#Accueil{
background:url(../images/ImagesFond/ImageFond-Accueil-GiovanniDAndrea.jpg) fixed ;

background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
z-index:9999;
background-position : top 10% ;
height:100vh;
padding:0px 0;
width: 100%;
z-index:99999;
color: #fff;
font-size: 4em;
text-align: center;
}

#title {
display:none;
padding-top:25vh;
padding-left:7vh;
height:100%;
text-align: justify;
visibility:relative;
font-size: 1.5em;
font-variant: small-caps;
}





/* BLOC PAGE */



#page{
z-index: 9999;
padding-top:relative;
margin:0;
bottom:0;
position: relative;
overflow:hidden;
font-size: 0.7em;
text-align: left; 
min-height:100vh;
}


.pageX, .pageALT {
z-index: 9999;
padding-top:10vh;
margin:0;
bottom:0;
position: relative;
width:100vw;
overflow:hidden;
min-height:100vh;
text-align:center;
padding-bottom:100px;
border-bottom:0px;
border-bottom-color:black;
border-bottom-style:solid;


}


#Actualités{
display:block;	
background:url(../images/ImagesFond/ImageFond-Accueil.jpg) center fixed;


background-color: black;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
z-index:9999;


}



#Equipage{
display:block;
background:url(../images/ImagesFond/ImageFond-Equipage-PointFocaleEricFusco.jpg) bottom fixed;

background-color: black;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;

}

#Racontars{
display:block;
background:url(../images/ImagesFond/ImageFond-Racontars.jpg) bottom fixed;

background-color: black;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
}

#Discographie{
display:block;
background:url(../images/ImagesFond/ImageFond-Discographie-GiovanniDAndrea.jpg) top fixed;

background-color: black;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;

}

#Concert{
display:block;
background:url(../images/ImagesFond/ImageFond-Medias.jpg) center fixed;

background-color: black;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;

}

#Media{
display:block;
background:url(../images/ImagesFond/ImageFond-Agenda-PascalSauriat.jpg) center fixed;

background-color: black;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
}

#Contact{
display:block;

background:url(../images/ImagesFond/ImageFond-Contact-GiovanniDAndrea.jpg) center fixed;


background-color: black;
background-repeat : no-repeat;
max-height: 100%;
max-width: 100%;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
}

     


#bottomfooter {
display:block;
position : fixed;
right: 0;
left: 0;
margin:0;
padding:0;
height:3vh;
bottom:0;
z-index:99990;
overflow:hidden;
width:100%;
background-color:rgba(255,255,255,0.8);
border-radius:0;
text-align:center;
color:black;
}






/* modifications possibles */

.inner{

position:relative;
width:60vw;
min-height : 16em;
min-width:100px;
float:left;
padding:1em;

margin-top:10vh;
margin-bottom:10em;
margin-left:10vw;
margin-right:10vw;

line-height:1em;
overflow-wrap:normal;

background:rgba(250,250,250,0.8);
color:rgba(0,0,0,0.8);

border-color:rgba(0,0,0,1);
border:0px;
border-style:solid;

 border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;


}

.inner a {
line-height: auto;
margin: 10;
padding-bottom:1em;
color:black;
text-decoration:underline;
font-size: 1em;
}


.aside {
position:relative;
width:5%;

float:right;
margin-top:10vh;

margin-left:5em;
margin-right:5em;
padding:0;
z-index:1000;
color:rgba(0,0,0,0.8);
}

.aside img {
position:relative;
width: 16em;
height: auto;
overflow:hidden;
float:right;
border-radius:0em;
-webkit-border-radius:0em;
-moz-border-radius:0em;
border-style:none;

}



.innerc{
position:relative;
width:60vw;
min-height : 150px;
min-width:100px;
float:left;
padding:1em;

margin-top:3em;
margin-bottom:3em;
margin-left:10vw;
margin-right:10vw;

line-height:1em;
overflow-wrap:normal;

background:rgba(250,250,250,0.8);
color:rgba(0,0,0,0.8);

border-color:rgba(0,0,0,1);
border:0px;
border-style:solid;

 border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}


.fa-info-circle:hover, .fa-info:hover, .fa-headphones:hover, .fa-video:hover, .fa-plus:hover, .fa-home:hover, .fa-angle-double-left:hover,.fa-angle-double-down:hover, .fa-facebook:hover, .fa-globe:hover, .fa-music:hover {
	transform: scale(1.5) ;
}


.fa-info-circle, .fa-headphones, .fa-video, .fa-plus {
font-size:1.5em;
padding-left:0.5em;
padding-right:0.5em;
}


.fa-globe {
font-size:1.7em;	
}



.soustitre {
font-size:1em;	
text-align:justify;
padding:1em;
margin-left:8em;

}

.soustitre h1 {
font-size:1.5em;	
text-align:left;
padding-bottom:0.8em;
line-height:1em;
text-align:justify;
}

.soustitre li a {
font-size:0.8em;	
text-align:left;
padding-bottom:0.5em;
text-align:justify;

}



.titre_accordeon
{
	
float:left;
padding:1em;

margin-top:10vh;
margin-bottom:0em;
margin-left:10vw;
margin-right:10vw;

line-height:1em;
overflow-wrap:normal;

background:rgba(250,250,250,0.8);
color:rgba(0,0,0,0.8);

border-color:rgba(0,0,0,1);
border:0px;
border-style:solid;

 border-top-left-radius: 3px;
  border-top-right-radius: 3px;    


position:relative;
width:60vw;
min-width:100px;
float:left;
padding:1em;

overflow-wrap:normal;

line-height:1.5em;

background:rgba(250,250, 250,0.8);
color:rgba(0,0,0,0.8);
border-color:rgba(0,0,0,1);
border-style:solid;
border-bottom:none;



z-index:1;
}



.accordeon {

float:left;
padding:1em;

margin-top:0vh;
margin-bottom:10em;
margin-left:10vw;
margin-right:10vw;

line-height:1em;
overflow-wrap:normal;

background:rgba(250,250,250,0.8);
color:rgba(0,0,0,0.8);

border-color:rgba(0,0,0,1);
border:0px;
border-style:solid;

 border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;    


position:relative;
width:60vw;
min-width:100px;
float:left;
padding:1em;

overflow-wrap:normal;

line-height:1.5em;

background:rgba(250,250, 250,0.8);
color:rgba(0,0,0,0.8);
border-color:rgba(0,0,0,1);
border-style:solid;
border-bottom:none;

z-index:1;
}




.inner_projet2 {
position:relative;
width:100%;
min-width:100px;
float:left;
padding:1em;
margin-bottom:0em;
margin-left:0em;
margin-right:0em;

line-height:1em;
overflow-wrap:normal;
z-index:1;

}




.soustitre2 {
line-height: 1em;
margin: 10;
padding-bottom:0.5em;
text-align:justify;
font-size: 1.2em;

}



/* Lecteur Audio */

#footer {
display:block;
position : fixed;
right: 0;
left: 0;
margin:0;
padding:0;

min-height:7vh;
max-height:7vh;
bottom:-1000px;
z-index:99990;
overflow:hidden;

width:100%; /* largeur du lecteur */
background-color:rgba(255,255,255,0.8);
text-align:center;
color:black;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;

}


#footerpop {
display:block;
position : fixed;
margin: 0;
padding:0;
bottom : 10vh;
right:-2000px;
height:79vh;
float:left;
z-index:999999;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
width:25vw; /* largeur du lecteur */
border:0;
background-color:rgba(255,255,255,0.8);
color:black;
}



#footerpar {
display:block;
position : fixed;

margin: 0;
padding:0;
margin-bottom:10vh;
height:78vh;


bottom:-2000px;
height:79vh;
float:left;
z-index:999999;
overflow:scroll;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;

width:100vw; /* largeur du lecteur */
background-color:rgba(0,0,0,0.6);

color:black;
}

/* LECTEUR AUDIO */


audio {
height:0px;
margin-top:0px;
margin-bottom:0em;
border-radius:1em;
z-index:9999;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
width:100%;
}

#progressBar { 
   border:1px solid #aaa; 
   color:#fff; 
   width:295px; 
   height:20px;
}



.innerplayer {
position:relative;
display:-moz-inline-stack;
display:inline;
display:-webkit-inline;
width:20vw;
height:40px;
min-width:100px;
float:left;
padding:2em;
overflow-wrap:normal;
margin-bottom:100px;
margin-left:20px;
margin-right:auto;
margin-top:5px;
line-height:1.5em;
}

#playlist a, #playlistvid a  {
position:relative;
display:-moz-inline-stack;
display:inline;
display:-webkit-inline;
width:100%;
font-size: 1.3em;

}

#playlist a:hover, #playlistvid a:hover  {
position:relative;
width:300px;
text-decoration:none;
font-size: 1.3em;

}



#disquelist 
{
display:none;
text-align:left;
}





/* Espace qui affiche le titre en cours */
.buttonfooter3 { 
display:inline;
border-radius:5px;
height:20px;
min-width:15%;
max-width:15vw;
border:0;
margin-bottom:1em;
margin-top:1em;
margin-right: 0;
margin-left: 0;
right: 0;
left: 0;
padding:5px 5px 5px 5px;
cursor:pointer;
width:auto;
overflow:hidden;
vertical-align:middle;
background-color : inherit;
color:rgba(255,255,255,1);
font-size:0.8em;
text-align:left;
}

.buttontitre { 
display:inline;
border-radius:5px;
height:5vh;
min-width:15%;
max-width:15vw;
border:0;
margin-bottom:1em;
margin-top:1em;
margin-right: 0;
margin-left: 0;
right: 0;
left: 0;
padding:5px 5px 5px 5px;
cursor:default;
width:auto;
overflow:hidden;
vertical-align:middle;
background-color : inherit;
color:rgba(0,0,0,1);
font-size:0.8em;
text-align:left;
}


/* boutons précédent suivant play fermer le lecteur */
.buttonfooter {
height:25px;
width:50px;
border:0;
margin-bottom:1em;
margin-top:1em;
margin-right: 0;
margin-left: 0;
right: 0;
left: 0;
padding:10px 10px 10px 10px;
cursor:pointer;
width:auto;
overflow:hidden;
vertical-align:top;
background-color:inherit;
/* modifications possibles */ 
color:rgba(0,0,0,1);
font-size:0.9em;
}

.buttonfooter:hover, .buttonfooter:active {
color:rgba(255,255,255,1);
}

/* bouton volume */
.buttonfooter2 {
border:0;
margin-bottom:1em;
margin-top:1em;
margin-right: 0;
margin-left: 0;
padding:5px 5px 5px 5px;
cursor:pointer;
right: 0;
left: 0;
overflow:hidden;
vertical-align:middle;
height:20px;
width:12%;

/* modifications possibles */ 
color:rgba(255,255,255,1);
font-size:0.8em;		
}



/* Pochettes d'album */
.button {
position:relative;
margin-left:1em;
margin-right:1em;
margin-bottom:1em;
margin-top:0px;
overflow:hidden;
float:left;
border:0;
z-index:1;	
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
font-size:2em;

/* modifications possibles */ 
-webkit-border-radius:15em;
-moz-border-radius:15em;
border-radius:15em;
filter: grayscale(0.5);
-webkit-filter: grayscale(0.5);
height:7em;
width:7em;

}

P.buttonhover {

text-align:center;
text-shadow: 2px 2px 4px #000000;

/* modifications possibles */ 
font-size: 0.8em;
color:white;

}

.buttondisque {
height:25px;
width:50px;
border:0;
margin-bottom:1em;
margin-top:1em;
margin-right: 0;
margin-left: 0;
right: 0;
left: 0;
cursor:pointer;
width:auto;
overflow:hidden;
vertical-align:top;
background-color:inherit;
padding:5px 5px 5px 5px;

/* modifications possibles */ 
color:rgba(0,0,0,1);
font-size:1em;
}

.buttondisque:hover {
color : white;
}




/* Paroles */
.paroles {
position:absolute;
display:none;
visibility:hidden;
overflow:hidden;
}

#afficheparoles{
display:none;
visibility:visible;
position:relative;
width:50vw;
min-width:10px;
float:left;
padding:0em;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
line-height:1.5em;
z-index: 999998;
overflow:hidden;


/* modifications possibles */ 

color:rgba(0,0,0,0.8);
border-radius:1em;

}


.texteparoles {
line-height: 1.5em;
margin: 0;
padding-bottom:0em;

/* modifications possibles */
break-inside: avoid-column;
/* Pour Firefox : */
page-break-inside: avoid;
/* Pour WebKit : */
-webkit-column-break-inside: avoid;

/* modifications possibles */ 
font-size: 1.1em;
font-style:normal;
text-align:left;
}

.texteparoles2 {
line-height: 1.1em;
margin: 0;
break-inside: avoid-column;
/* Pour Firefox : */
page-break-inside: avoid;
/* Pour WebKit : */
-webkit-column-break-inside: avoid;

/* modifications possibles */ 
font-size: 1.3em;
font-style:italic;
font-weight:50;
text-align:left;
}



.disque1-tracks {
	display : block;
}
.disque2-tracks {
	display : none;
}
.disque3-tracks {
	display : none;
}