@import url('reset.css');

/* General Codrops Demo Style */
body{
	font-family: 'PT Sans Narrow', Arial, sans-serif;
	font-size:14px;
}
a{
	color:#ddd;
	text-decoration:none;
}
a:hover{
	color:red;
/* 	color:#00c6e3;
 */}
p.sub{
	padding:25px 10px 10px 10px;
	text-align:left;
	color:#aaa;
}
.clr{
	clear:both;
}
h1{
	margin:5px;
	font-size:24px;
	text-align:center;
	color:#fff;
	font-family:"Pacifico", Georgia, "Times New Roman", serif;
	text-shadow:1px 1px 1px #000;
	padding-bottom:10px;
	line-height:40px;
}
h1 span{
	font-size:10px;
	display:block;
	letter-spacing:2px;
	font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
	color:#00c6e3;
	line-height:14px;
	padding-top:10px;
	text-shadow:none;
	text-transform:uppercase;
}
/* Header Style */
.header{
	font-size:13px;
	background:#000;
	opacity:0.9;
	text-transform:uppercase;
	-moz-box-shadow: 1px 0px 2px #000;
	-webkit-box-shadow: 1px 0px 2px #000;
	box-shadow: 1px 0px 2px #000;
}
.header a{
	line-height:18px;
	padding:0 4px;
	letter-spacing:1px;
	text-shadow:1px 1px 1px #000;
	color:#ddd;
}
.header a:hover{
	color:white;
/* 	color:#fff;
 */}
.header a span{
	font-weight:bold;
}
.header span.right_ab{
	float:right;
}
.content{
	margin:0px 25px 30px 25px;
}
@media screen and (max-width: 640px) {
	.header a{
		display:block;
		text-align:center;
		font-size:10px;
		text-shadow:none;
	}
	.header span.right_ab{
		float:none;
	}
}


  .custom-dropdown--large {
    font-size: 1.5em;
}

.custom-dropdown--small {
    font-size: .7em;
}

.custom-dropdown__select{
    font-size: inherit; /* inherit size from .custom-dropdown */
  /*   padding: .5em; add some space*/
    margin: 0; /* remove default margins */
}

.custom-dropdown__select--white {
    background-color: #fff;
    color: #444;    
}

@supports (pointer-events: none) and
      ((-webkit-appearance: none) or
      (-moz-appearance: none) or
      (appearance: none)) {

    .custom-dropdown {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }

    .custom-dropdown__select {
        padding-right: 2.5em; /* accommodate with the pseudo elements for the dropdown arrow */
        border: 0;
        border-radius: 3px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;    
    }

    .custom-dropdown::before,
    .custom-dropdown::after {
        content: "";
        position: absolute;
        pointer-events: none;
    }

    .custom-dropdown::after { /*  Custom dropdown arrow */
        content: "\25BC";
        height: 1em;
        font-size: .625em;
        line-height: 1;
        right: 1.2em;
        top: 50%; margin-top: -.5em;
    }

    .custom-dropdown::before { /*  Custom dropdown arrow cover */
        width: 2em;
        right: 0; top: 0; bottom: 0;
        border-radius: 0 3px 3px 0;
    }

    .custom-dropdown__select[disabled] {
        color: rgba(0,0,0,.3);
    }

    .custom-dropdown.custom-dropdown--disabled::after {
        color: rgba(0,0,0,.1);
    }

    /* White dropdown style */
    .custom-dropdown--white::before {
        top: .5em; bottom: .5em;
        background-color: #fff;
        border-left: 1px solid rgba(0,0,0,.1);
    }

    .custom-dropdown--white::after {
        color: rgba(0,0,0,.9);
    }

    /* FF only temp fix */
    @-moz-document url-prefix() {
        .custom-dropdown__select              { padding-right: .9em }
        .custom-dropdown--large .custom-dropdown__select { padding-right: 1.3em }
        .custom-dropdown--small .custom-dropdown__select { padding-right: .5em }
    }
}


   

  /* These inline styles will always be active even if an alternate
   stylesheet is selected with the stylesheet swticher */

  #example {text-align:center;
  }

  #example div {
  }

  #div-before {
  background-color: rgba(255, 255, 255, 0.1);   
  color:rgba(0, 0, 255, 0.5);
  text-align:center;
  
  }

  #div-after {
  background-color:blue;
  color:#000;
  }


  #div-1 {
  width:100%;
  color: rgba(0, 0, 0, 0.8);   
  }
  
  #div-12 {
  width:100%;
  color: rgba(0, 0, 0, 0.8);   
  display:inline-block;
  padding-left:3em;
  }
  
  
  #div-1-padding {
  padding:10px;
  }
 
  #div-1a {
  background-color:pink;
  color:#fff;
  width:20%;
  display:inline-block;
  }
 #div-1d {
  background-color:white;
  color:red;
  width:4%;
  display:inline-block;
  }
 #div-1d2 {
  width:14%;
  display:inline-block;
  color: rgba(255, 255, 255, 1); 
  }
   #div-1d2f {
  background-color:white;
  color:red;
  width:14%;
  display:inline-block;
   opacity:0;
  }
  
  #div-1b {
  background-color:orange;
  color:#fff;
  width:20%; 
  display:inline-block;
  }
  
  #div-1c {
  color:#fff;
  margin-top:1%;
  width:49%; 
 display:inline-block;
 float:left;
 min-height:100px; 
 max-height:300px; 
 top:0%;
/* top:50%;
 new*/
 z-index:500;
  position: fixed;
  left:70%;

  }
  
   #div-1c1 {
  color:#fff;
  margin-top:1%;
  width:49%; 
 display:inline-block;
 float:left;
 min-height:100px; 
 max-height:300px; 
 top:0%;
 /*top:50%;
 new*/
 z-index:500;
  position: fixed;
  left:50%;

  } 
  
  
  
  
  
  
  
  
  
    #div-1c p{
  background-color:rgba(52, 103, 153, 0.8);
  color:#fff;
  width:49%; 
 float:left;
 min-height:50px; 
 max-height:200px; 
 text-align:center;
vertical-align : baseline;
font-size :1.8em;
  }
  
      #div-1c1 p{
  background-color:rgba(52, 103, 153, 0.8);
  color:#fff;
  width:49%; 
 float:left;
 min-height:50px; 
 max-height:200px; 
 text-align:center;
vertical-align : baseline;
font-size :1.8em;
  }
  
  
  
  #example div p {
  margin:0 .25em;
  padding:.25em 0;
  }
  #description {
  float:left;
  width:40%;
  }
  pre {
  padding:1em;
  border:1px dashed #aaa;
  background:#fafafa;
  }
  p {
  margin:0.5em 0;
  }
  h3 {
  color:#999;
  }
  
  #div-1b span {
  display: none;
  position: absolute;   /* positionnement hors flux */
  width:20%; 
  height:200px;
  background: #069;
  text-align:center;
  vertical-align:center;
  transition: all .5s;  /* la transition à appliquer */ 
}
#div-1b:hover span {
  display: block;
  width:19,5%; 
  height:200px;
  background: #069 0.6;
  opacity:0.6; 
  color:white;
  text-align:center;
  vertical-align:center;
  text-decoration:none
}
  
.a {
text-decoration:none;
color:white;
}
}

	#div-12 .demo-gallery{padding-top:9em;padding-left:2em;padding-right:2em;}

  /* Media 500 px */
  
@media all and (max-width: 500px) {
	#div-1d2 {width:100%;height:0.6em}
	#div-1d {width:100%;height:0.6em}
	#div-1a {width:100%;}
	#div-1b {width:100%;}
	 
#div-1b span {display: block;width:50%;height:200px;background: #069 0.6;color:white;opacity:0.6;text-align:center;vertical-align:center;text-decoration:none;}
#div-1b:hover span {display: block;width:50%;}
     

 #div-1c p{
  background-color:rgba(52, 103, 153, 0.8);
  color:#fff;
  width:80%; 
 float:left;
 min-height:50px; 
 max-height:150px; 
 text-align:center;
vertical-align : baseline;
font-size :0.8em;

  }

  
   }
        
  /* Media 650 px */
		
@media all and (max-width: 670px) 
	 {
     #div-1d {width:2%;}
     #div-1d2 {width:2%;}
     #div-1d2f {display:none}
	 #div-1a {width:100%;margin-top:0.6em;}
	 #div-1b {width:45%;}
	 #div-1b span {display: block;width:20%;height:200px;background: #069 0.6;color:white;opacity:0.6;text-align:center;vertical-align:center;text-decoration:none;}
	 #div-1b:hover span {display: block;width:30%;}
	
	#div-1c {position: fixed;width:70%;left:1%;} 
	#div-1c1 {position: fixed;left:71%;width:25%;}
/*     #div-12 {padding-top:4.5em;}
 */	#div-12 .demo-gallery{padding-top:9em;padding-left:2em;padding-right:.5em;}
     .demo-gallery > ul > li {
                float: left;
/*             margin-bottom: 15px;
                margin-right: 15px;
 */            width: 125px;
               max-width: 125px;
                height: 125px;
				max-height: 125px;
 				list-style-type:none;
				list-style-position: inside;
            }

	}
    
/* Media 800 px */

  @media all and (max-width: 800px) 
	{
	#div-1d2 {width:4%;}
	#div-1d2f {width:4%;}
	#div-1a {width:25%;}
	#div-1b {width:25%;}
	
	 #div-1c p{
  background-color:rgba(52, 103, 153, 0.8);
  color:#fff;
  width:80%; 
 float:left;
 min-height:50px; 
 max-height:150px; 
 text-align:center;
vertical-align : baseline;
font-size :0.8em;
  }
	
#div-12 .demo-gallery{padding-top:9em;padding-left:2em;padding-right:2em;}
	
	
	
  }












		

#popup {
	width: 350px ;
	background-color: rgba(255,255,255,0.9);
	padding: 0 20px 20px;
	height: auto;
	z-index: 2000;
	position: fixed;
	display: none;
	top: 130px;
	right: 0px;
	left: 0;
	margin: 0 auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 3px #5B7D9A solid;
	font-size:12px;
	text-align:justify;
	font-size:18px;
}

#close {
	width: 30px;
	height: 30px;
	position: absolute;
	top: -15px;
	right: -15px;
	background-color: #5B7D9A;
	color: white;
	line-height: 30px;
	text-align: center;
	font-size: 20px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	cursor:default;
	z-index: 2001;
}

#close:hover{ background-color:#F60}

#fond {
    background-color: rgba(0,0,0,0.2);
	display: none;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 2000;


}



				
				
				
            .demo-gallery > ul {
              margin-bottom: 0;
			  list-style-position: inside;
			   margin:0;
			   padding:0;

            }
            .demo-gallery > ul > li {
                float: left;
/*             margin-bottom: 15px;
                margin-right: 15px;
 */            width: 150px;
               max-width: 150px;
                height: 150px;
				max-height: 150px;
 				list-style-type:none;
				list-style-position: inside;
            }
			

            .demo-gallery > ul > li a {
              border: 3px solid #FFF;
              border-radius: 3px;
              display: block;
              overflow: hidden;
              position: relative;
              float: left; box-shadow: 1px 1px 12px #555;
            }
            .demo-gallery > ul > li a > img {
              -webkit-transition: -webkit-transform 0.15s ease 0s;
              -moz-transition: -moz-transform 0.15s ease 0s;
              -o-transition: -o-transform 0.15s ease 0s;
              transition: transform 0.15s ease 0s;
              -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
/*               height: 100%;
              width: 100%;
 */			  max-height:150px;
 */			  max-width:150px;
			 

            }
            .demo-gallery > ul > li a:hover > img {
              -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
            }
            .demo-gallery > ul > li a:hover .demo-gallery-poster > img {
              opacity: 1;
            }
            .demo-gallery > ul > li a .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.1);
              bottom: 0;
              left: 0;
              position: absolute;
              right: 0;
              top: 0;
              -webkit-transition: background-color 0.15s ease 0s;
              -o-transition: background-color 0.15s ease 0s;
              transition: background-color 0.15s ease 0s;
            }
            .demo-gallery > ul > li a .demo-gallery-poster > img {
              left: 50%;
              margin-left: -10px;
              margin-top: -10px;
              opacity: 0;
              position: absolute;
              top: 50%;
              -webkit-transition: opacity 0.3s ease 0s;
              -o-transition: opacity 0.3s ease 0s;
              transition: opacity 0.3s ease 0s;
            }
            .demo-gallery > ul > li a:hover .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.5);
            }
            .demo-gallery .justified-gallery > a > img {
              -webkit-transition: -webkit-transform 0.15s ease 0s;
              -moz-transition: -moz-transform 0.15s ease 0s;
              -o-transition: -o-transform 0.15s ease 0s;
              transition: transform 0.15s ease 0s;
              -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
              height: 100%;
              width: 100%;
            }
            .demo-gallery .justified-gallery > a:hover > img {
              -webkit-transform: scale3d(1.2, 1.2, 1.2);
              transform: scale3d(1.2, 1.2, 1.2);
            }
            .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
              opacity: 1;
            }
            .demo-gallery .justified-gallery > a .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.1);
              bottom: 0;
              left: 0;
              position: absolute;
              right: 0;
              top: 0;
              -webkit-transition: background-color 0.15s ease 0s;
              -o-transition: background-color 0.15s ease 0s;
              transition: background-color 0.15s ease 0s;
            }
            .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
              left: 50%;
              margin-left: -10px;
              margin-top: -10px;
              opacity: 0;
              position: absolute;
              top: 50%;
              -webkit-transition: opacity 0.3s ease 0s;
              -o-transition: opacity 0.3s ease 0s;
              transition: opacity 0.3s ease 0s;
            }
            .demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.5);
            }
            .demo-gallery .video .demo-gallery-poster img {
              height: 48px;
              margin-left: -24px;
              margin-top: -24px;
              opacity: 0.8;
              width: 48px;
            }
            .demo-gallery.dark > ul > li a {
              border: 3px solid #04070a;
            }
            .home .demo-gallery {
              padding-bottom: 40px;
            }
			
			
		 .demo-gallery > ul > li span {
 /* display: block;*/
  position: relative;   /* positionnement hors flux */
  width:30%; 
 /* height:30%;*/
  top:-30%;
  margin-left:4px;
  padding-top:1%;
  background-color:rgba(52, 103, 153, 0.6);
  color:white;
  font-size:2.2em;
  font-style: bold;
  text-align:center;
  vertical-align:top;
  z-index:0;
  transition: all .2s;  /* la transition à appliquer */ 
}
.demo-gallery > ul > li:hover span {
  /*display: block;*/
  position: relative;   /* positionnement hors flux */
  width:6%; 
  height:6%;
  z-index:0;
  top:-20%; 
  font-size:2em;
  background-color:rgba(52, 103, 153, 0.9);
  color:white;
  text-align:center;
  vertical-align:center;
  text-decoration:none
}	
			

	@media all and (max-width: 850px) {

		.demo-gallery > ul > li 
		{
			float: left;
			height: 200px;
			list-style-type:none;
			width:45%;
			list-style-position: inside;
		}

		.demo-gallery > ul > li a {
              border: 3px solid #FFF;
              border-radius: 3px;
              display: block;
              overflow: hidden;
              position: relative;
              float: left; box-shadow: 1px 1px 12px #555;
			  list-style-position: inside;
            }

			  .demo-gallery > ul > li a > img {
			width:100%;
			heigth:120%;
			}

			.demo-gallery > ul > li span {
			 /* display: block;*/
			  position: relative;   /* positionnement hors flux */
			  width:30%; 
			 /* height:30%;*/
			  top:-50%;
			  margin-left:4px;
			  padding-top:1%;
			  background-color:rgba(52, 103, 153, 0.6);
			  color:white;
			  font-size:2.2em;
			  font-style: bold;
			  text-align:center;
			  vertical-align:top;
			  transition: all .2s;  /* la transition à appliquer */ 
			}
			.demo-gallery > ul > li:hover span {
			  /*display: block;*/
			  position: relative;   /* positionnement hors flux */
			  width:6%; 
			  height:6%;
			  top:-100%; 
			  font-size:2em;
			  background-color:rgba(52, 103, 153, 0.9);
			  color:white;
			  text-align:center;
			  vertical-align:center;
			  text-decoration:none
			}	


		}


@media all and (max-width: 500px) {

 .demo-gallery{ padding-left:2em:padding-right:.5em !important;}


	    .demo-gallery > ul > li {
                float: left;
                height: 150px;
				list-style-type:none;
				width:100%;
				list-style-position: inside;
            }
		.demo-gallery > ul > li a {
              border: 3px solid #FFF;
              border-radius: 3px;
              display: block;
              overflow: hidden;
              position: relative;
              float: left; box-shadow: 1px 1px 12px #555;
			  list-style-position: inside;
            }

			  .demo-gallery > ul > li a > img {width:100%;}

			  body{/* background-color: #152836;*/height:300px;}

			.lg-outer {
			width: 100%;
			height: 50%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1050;
			opacity: 0;
			-webkit-transition: opacity 0.15s ease 0s;
		-o-transition: opacity 0.15s ease 0s;
  transition: opacity 0.15s ease 0s;

}

				 .demo-gallery > ul > li span {
 /*display: block;*/
  position: relative;   /* positionnement hors flux */
  width:30%; 
 /* height:30%;*/
  top:10%;
  left:-74%;
  padding-top:1%;
  background-color:rgba(52, 103, 153, 0.6);
  color:white;
  font-size:2.2em;
  font-style: bold;
  text-align:center;
  vertical-align:top;
  z-index:0;
  transition: all .2s;  /* la transition à appliquer */ 
}


	.demo-gallery > ul > li:hover span 
	{
		  /*display: block;*/
		  position: relative; 
		  width:6%; 
		  height:6%;
		  left:-74%;
		  z-index:0;
		  top:8%; 
		  font-size:2em;
		  background-color:rgba(52, 103, 153, 0.9);
		  color:white;
		  text-align:center;
		  vertical-align:center;
		  text-decoration:none
	}	

}
@media all and (max-width: 500px) {
#popup {top:50px;}

 .demo-gallery{ padding-left:2em:padding-right:1em !important;}

.lg-outer {
    height: 100% !important;
}
	



			}

			
  
.fixe-bas
{
display:inline-block;background-color:rgba(52, 103, 153, 0.8);height:35px;position:fixed;bottom:0;width: 100%;left:0;z-index:200;
}

.fixe-bas:hover
{
padding-left:10px;background-color:rgba(52, 103, 153, 0.8);height:auto;position:fixed;bottom:0%;width:100%;left:0;color:white;z-index:200;
}

.fixe-bas p
{
padding-left:10px;text-align:left;color:white;font:normal 12px verdana, sans-serif;padding-top:12px;margin:0;
}
.fixe-bas a
{
text-align:left;color:white;font:normal 12px verdana, sans-serif;padding-top:12px;margin:0;
}

.fixe-bas .boxd2
{
display:none;z-index: 200;
}

.fixe-bas:hover .boxd2
{
display:inline-block;z-index: 200;
}


/*ancien style*/

/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);*/
* {
  box-sizing: border-box;
}


#fixe-bas
{
display:inline-block;background: #6E655E;background-opacity:0.5;height:35px;position:fixed;bottom:0;width: 100%;left:0;z-index:200;
}

#fixe-bas:hover
{
padding-left:10px;background: #6E655E;height:auto;position:fixed;bottom:0%;width:100%;left:0;color:white;z-index:200;
}

#fixe-bas p
{
padding-left:10px;text-align:left;color:white;font:normal 12px verdana, sans-serif;padding-top:12px;margin:0;
}
#fixe-bas a
{
text-align:left;color:white;font:normal 12px verdana, sans-serif;padding-top:12px;margin:0;
}

#fixe-bas .boxd2
{
display:none;z-index: 200;
}

#fixe-bas:hover .boxd2
{
display:inline-block;z-index: 200;
}






/* custom scrollbar */
::-webkit-scrollbar {
  width: .95em;
}

::-webkit-scrollbar-track {
  background-color: rgba(217, 217, 217, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(184, 184, 184, 0.5);
  box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
}

/* dummy content */
.content {
width:100%;
  float: left;
  font: 1em 'Open Sans', sans-serif;
  margin: .75em 0 0 0;
  transition: margin .3s ease-in-out;
}
.content > p {
  margin: .25em 0 .75em 0;
}

/* Advanced Checkbox Hack */
body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  position: fixed;
  z-index:150;
  right: 0;
  display: none;
  width: 2em;
  height: 2.25em;
  padding: .35em;
  font-size: 1.1em;
  color: #fff;
  transition: color .3s ease-in-out;
  cursor: pointer;
  user-select: none;
  margin: 0;
  background: rgba(0, 0, 0, 0.4);
}

/* big screens */
nav[role="off-canvas"] {
  position: fixed;
 /* width: 50em;*/
  width: 100%;
  margin: 0 auto;
  transition-duration: .3s, .5s;
  transition-timing-function: ease-in-out;
  transition-property: left, opacity, box-shadow;
	z-index:300;
/*background: #59709E none repeat scroll 0% 0%;*/
text-align: center;
font-size: 1em;
  
}
nav[role="off-canvas"] a {
  color: #fff;
  text-decoration: none;
  font: 1.3em 'Open Sans', sans-serif;
  transition: color .3s ease-in-out;
  display: table-cell;
  vertical-align: middle;
}
nav[role="off-canvas"] ul {
  padding: 0;
  margin: 0 auto;
  width: 100%;
  padding-left:45%
}
nav[role="off-canvas"] ul > li {
  float: left;
  padding: .55em .55em;
 /* width: 8em; */
  height: 4em;
  margin: .5em;
  background-opacity: .6;
  text-transform: uppercase;
  display: table;
  /*background: rgba(247, 52, 8, 0.65);*/
  /*cursor: pointer;*/
  text-align: center;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
  transition-property: box-shadow, color, opacity, padding-left;
 /* cursor: pointer;*/
}
nav[role="off-canvas"] ul > li:hover {
  color: #fff;
  opacity: 1;
  box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.95);

}
nav[role="off-canvas"] ul > li:hover > a {
  color: #282525;
  /*EEECE1   background: rgba(238, 236, 225, 0.65);*/
}

nav[role="off-canvas"] ul > li:nth-child(1) {
  background-color: rgb(204, 103, 72);
  /*#D0DCAE*/
}
nav[role="off-canvas"] ul > li:nth-child(2) {
  background: rgba(208, 220, 174, 0.65);
  /*#D0DCAE*/
}
nav[role="off-canvas"] ul > li:nth-child(3) {
  background: rgba(144, 204, 203, 0.65);

  }
nav[role="off-canvas"] ul > li:nth-child(4) {
  background: rgba(144, 204, 203, 0.65);
  
}
nav[role="off-canvas"] ul > li:nth-child(5) {
  background: rgba(8, 72, 247, 0.65);
}

/* small screens */
@media screen and (max-width: 54em) {
  html,
  body {
    margin: 0;
    overflow-x: hidden;
  }

  #fixe-bas:hover
{
  background-image:url(Photos/Fond.jpg);height:auto;position:fixed;bottom:0%;width:auto;left:0;z-index: 200;
}
#fixe-bas .boxd2
{
display:none;bottom:0%;font-size:60%;z-index: 200;
}
  
  
  
  .content {
   /* margin: 2.5em .5em 0 .5em;*/
	width:100%;
  }

  nav[role="off-canvas"] {
    position: fixed;
    top: 7em;
    left: -40em;
    width: 20em;
    opacity: 0;	
	padding-left:0%;
	
  }
  
nav[role="off-canvas"] ul {
  padding: 0;
  margin: 0 auto;
  width: 100%;
  padding-left:0%
}
  
  
  
  
  nav[role="off-canvas"] ul > li {
    height: 100%;
    width: 100%;
    text-align: left;
    margin: 0;
	padding-left:0%;

  }
  nav[role="off-canvas"] ul > li:hover {
    box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.45);
  }

  label {
    display: block;
	position:fixed
	z-index:100;
  }

  label:after {
    position: absolute;
    right: .25em;
    top: 0;
    content: "\2261";
    font-size: 1.8em;
	color:white;
  }

  label:hover,
  input:checked ~ label {
    color: red;
  }

  input:checked ~ nav[role="off-canvas"] {
    opacity: 1;
    left: 0;
    box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.8);
	z-index:150;
  }
  input:checked ~ nav[role="off-canvas"] ul > li {
    padding: .55em .55em .55em 1.5em;
  }
  input:checked ~ nav[role="off-canvas"] ul > li:hover {
    padding-left: 3.5em;
  }
  input:checked ~ nav[role="off-canvas"] ul > li:after {
    position: absolute;
    right: .25em;
    content: "\203A";
    font: bold 1.4em sans-serif;
    color: inherit;
  }

  input:checked ~ .content {
    margin-left: 20.5em;
    margin-right: -20.5em;
  }
  
  /*couleur menu*/
nav[role="off-canvas"] a {
  color: red;
  text-decoration: none;
  font: 1.3em 'Open Sans', sans-serif;
  transition: color .3s ease-in-out;
  display: table-cell;
  vertical-align: middle;
}
  
  
  
  
  
  
}