/*Base*/

html, body{
height:100%;
width:100%;
}
@font-face {
  font-family: "NunitoSans-Regular";
  src: url("fonts/NunitoSans-Regular.eot"); /* IE9 Compat Modes */
  src: url("fonts/NunitoSans-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/NunitoSans-Regular.otf") format("opentype"), /* Open Type Font */
    url("fonts/NunitoSans-Regular.svg") format("svg"), /* Legacy iOS */
    url("fonts/NunitoSans-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/NunitoSans-Regular.woff") format("woff"), /* Modern Browsers */
    url("fonts/NunitoSans-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-family: "NunitoSans-Light";
  src: url("fonts/NunitoSans-Light.eot"); /* IE9 Compat Modes */
  src: url("fonts/NunitoSans-Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/NunitoSans-Light.otf") format("opentype"), /* Open Type Font */
    url("fonts/NunitoSans-Light.svg") format("svg"), /* Legacy iOS */
    url("fonts/NunitoSans-Light.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/NunitoSans-Light.woff") format("woff"), /* Modern Browsers */
    url("fonts/NunitoSans-Light.woff2") format("woff2"); /* Modern Browsers */
}


*{
margin:0 auto; padding:0; border:0;
}

body{
font-family: "NunitoSans-Light";
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size:14px;
line-height:16px;
text-rendering: optimizelegibility;
overflow-x: hidden;
overflow-y: auto;
min-height:100%;
}

h1.titre{
background-color: rgba(0,0,0,0.50); 
color: rgb(255, 255, 255);
letter-spacing: 2px;
font-size: 22px;
line-height: 20px;
position: relative;
text-align: center;
padding: 3% 0 2%;
z-index:500;
}

.content{
//background-color: rgba(0,0,0,0.50); 
width: 360px;
//min-height: 62px;
margin: 0 auto;
text-align: center;
position: relative;
top:26px; 
display:block; 
content:''; 
clear:both;
}

.content-b::before{
background-color: rgba(0,0,0,0.50);
width: 120px;
margin: 0 -17%;
text-align: center;
position: absolute;
content: 'bienvenue';
clear: both;
padding: 12px 0;
top:64px;
font-size: 13px; 
color:#fff;
letter-spacing: 2px; 
//z-index:5000; 
transition:1s;
cursor:pointer;
}

.content-b:hover:before{
background-color: transparent;
color: transparent;
transition:1s;
}
.content-b:hover:after{
background-color: rgba(0,0,0,0.50);
content: 'entrez'; 
width: 120px;
margin: 0 -17%;
text-align: center;
position: absolute;
clear: both;
padding: 12px 0;
top:64px;
font-size: 13px; 
color:#fff;
letter-spacing: 2px; 
font-weight: 200;
z-index:5000;
}

.content li{ 
display:inline;
}

.content li a{ 
//display:inline-block; 
//color: rgb(255, 255, 255);
letter-spacing: 2px;
font-size: 13px;
line-height: 20px;
position: relative;
text-decoration:none; 
margin:0px 16px;
}


.content ul{ 
list-style-type:none;
//padding : 2% 0;
background-color: rgba(0,0,0,0.50); 
text-align: center; 
line-height:40px;
} 

.liste-1 a, .liste-2 a, .liste-3 a, .liste-4 a, .liste-5 a{ 
//border-bottom:6px dashed rgba(0,0,0,0);
color:#FFF;
transition-property:color;
transition-duration: 0.5s;
}

.liste-1 a:hover, .liste-2 a:hover, .liste-3 a:hover, .liste-4 a:hover, .liste-5 a:hover{ 
color:#AAA;
}


.anim {
  width:100%;
  margin-top: -20px;
  z-index:500;
 //display:none;
 opacity:0;
}

 .anim-b {
  width:100%;
 top: 103px;
  z-index:500;
// display:block;
 //opacity:0;
}


/*p.leg-3:before, p.leg-2:before, p.leg-1:before{
content:"+";
font-size:3rem;
color:rgba(255,255,255,0.7);
}*/

p.leg-2{
position: absolute;
//background-image: linear-gradient(to top, rgba(0,0,0,0.6), 20%, rgba(0,0,0,0));
width: 95%;
color: #FFF;
left: -0%;
top: -214%;
}

.leg-2 :hover{
opacity:1;
transition-property:opacity;
transition-duration: 0.5s;
}

.leg-2A :hover p.leg-2:before, .leg-2B :hover p.leg-2:before, .leg-2C :hover p.leg-2:before{
opacity:0.7;
}

.leg-2A p.leg-2:before, .leg-2B p.leg-2:before, .leg-2C p.leg-2:before{
content:"+";
font-size:3rem;
color:#FFFFFF;
opacity:0;
-webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
}

/*.leg-1:hover, .leg-3:hover, .leg-2:hover {
opacity:1;
}
*/

@media only screen and (max-width: 640px) and (orientation:portrait){
.content{
width:100%;
}

.content-b{
width:100%;
margin:0;
}



}