.contenair
{
  display: flex;
   flex-direction: flex;
   margin-left:0em;
   justify-content: center;


}


.headeraccueil                      
{
	margin-top:2em;
	margin-right:0.5em;
	margin-left: 0.5em;
	font-family: cantarellregular;
	font-weight:bold;
	
}


.facebook
{
   margin-top:2em;

}
.twitter
{
   margin-top:2em;
   margin-left:0.5em; 
}
.instagram
{
   margin-top:2em;
   margin-left:0.5em; 
   
}
.logo
{
	margin-top:0em;
	margin-left:10%;
	margin-right: 5%;
	margin-bottom: 6em;
	
}

.barres3
{
  opacity:0;

}
.invisible1 img
{
 width: 5px;
 height: 5px;
 opacity: 0;
}
body
{
	margin:0;
  position: relative;

}
.contenair2
{
	display: flex;
   flex-direction: flex;
   margin-top: 5em;
}

.quartier
{
  display: flex;
  flex-direction: column;
  margin-left: 4%;
  margin-right: 4%;
}
.quartier1
{
  display: flex;
  flex-direction: column;
  margin-left: 4%;
  margin-right: 4%;
}
.okay
{
  display: flex;
  flex-direction: flex;
}
.camion
{
  margin-right: 2%;
}
.secu
{
  margin-right: 1%;
}
header
{
	display: flex;
	 flex-direction: flex;
}
p.sécurité
{
	font-weight:bold;
}
p.rapide
{
	font-weight:bold;
	margin-left:1.5em;
}

footer.lalu
{
	background-color:#1C45FA;
	margin-top: 0em;
	height: 18em;
  width: 10000px;
  position: relative;

}
footer.end
{
  position: absolute; 
  bottom: 0;
}

p.commander
{
	color:white;
	font-size: 2.5em;
	display:flex;
  flex-direction: flex;
  justify-content: center;
  margin-top: 2em;
  line-height:7em;
  }
  .photo
  {
  	  text-align: center;
  	  margin-top: 4em;
  	  
 }
 p.derniere
 {
 	text-align: center;
 	margin-top:3em;
 	font-size: 1.3em;
 	color:grey;
 	font-weight:bold;
 }

 p.qui
 {

 }
p.nous
{
  margin-left:8em;
}
p.plus
{
  margin-left:8em;
}
p.droit
{
	text-align:center;
	font-size:0.8em;
	margin-top:2em;
	color: grey;
}
p.droit1
{
	text-align:center;
	font-size:0.8em;
	
	color: grey;
	margin-bottom:1em;
}
.barre
{
	border-bottom: 2px #117cc6 solid;
}
 p.dernierephoto
 {
 	text-align: center;
 	margin-top:3em;
 	font-size: 1.3em;
 	color:grey;
 	font-weight:bold;
 	margin-bottom:3em;
 }
 .téléphone
 {
text-align: center;
font-weight:bold;
padding: 12px;
 }
 p.derniere1
 {
 	text-align: center;
 	margin-top:2em;
 	font-size: 1.3em;
 	color:grey;
 	font-weight:bold;
 }
 .photonouscontacter
 {
 	text-align:center;
 }

 .comment
 {
 	color:grey;
 	font-weight:bold;
 	margin-left:3em;
 	margin-top: 3em;
 	margin-bottom: 3em;
 	font-size: 1.4em;
 }
 .texte
 {
 	font-size:1.1em;
 	margin-left:2.5em;
 	font-family: Georgia;
 }
 .fin2
  {
 	display:flex;
  flex-direction: flex;
  justify-content: center;
  margin-top:22em;
 }

.base
{
	font-family: open_sansregular;
	font-size: 0.9em;
}

.grostitre
{
  font-size: 1.2em;
  font-weight: bold;
}
 html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}
p.droit
 {
 	position: absolute; bottom: 1em;left: 40%;right: 40%;
}
.fin
{
	text-align: center;

}
.folder1
{
	margin-top:3em;
	margin-bottom: 1.5em;
}
.logobouge1
{
	margin-left: 40%;
  
  
}
.logobouge3
{
  line-height: 5%;

}
.logobouge2
{
	margin-left: 80%;
   line-height: 5%;
  
	
}
html, body {
    padding:0;
    margin:0;
    height:100%

}
#cache {
    position:fixed;
    background:rgba(0,0,0,0);
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: -1;
    transition:background .5s



}
#cache:target {
    background:rgba(0,0,0,.5);
    z-index: 1;
}
.popup {
    position:fixed;
    z-index: 1000;
    display:none;
    top:5%;
    left:10%;
    bottom:0%;

}
.popup a {
    position:absolute;
    background: #333;
    color:#fff;
    border-radius: 50%;
    width:20px;
    line-height: 20px;
    text-align: center;
    font-family:arial;
    right:50px;
    text-decoration: none;

}
#cache:target ~ .popup {
    display:block;
    }
.barref
{
	border-top: 3px #117cc6 solid;
}
p.droit5
{
	text-align:center;
	font-size:0.8em;
	color: grey;
	margin-top:45%;
}
.invisible
{
	opacity:0;
}
.abcd
{
  margin: 0;
  opacity: 0;

}
.abc
{
  background-color: #247FDA;
}
.bloc
{
  margin-top: 5em;
  display: flex;
  flex-direction: flex;
  margin-bottom: 2em;
}
.petitbloc
{
  margin-left: 4%;

}
.petitbloc1
{
  margin-right: 0%;
  margin-left: 4%;
}
.petitbloc2
{
  margin-right: 0%;
  margin-left: 4%;
}
.conditionsss
{
  position:absolute;z-index:8;
  background-color: white;
  
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 10em;
  padding: 3em;

}
.titrecd
{
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 2em;
}
.article
{
  font-size: 1.3em;
}
.droit3
{
  margin-top: 190em;
  text-align:center;
  font-size:0.8em;
  color: grey;
}
.barref
{
  border-top: 3px #117cc6 solid;
}
.invisible
{
  opacity:0;
}
.fondgris
{
  background-color: #ededed;
}
.contact
{
  position:absolute;z-index:8;
  background-color: white;
  top: 50%; left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
  margin-top: 5em;
  padding: 3em;
  width: 44%
}
.formulaire
{
 text-align: center;    

}












#cache1 {
    position:fixed;
    background:rgba(0,0,0,0);
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: -1;
    transition:background .5s



}
#cache1:target {
    background:rgba(0,0,0,.5);
    z-index: 1;
}
.popup1 {
    position:absolute;
    z-index: 1000;
    display:none;
    top:5%;
    left:10%;
    bottom: 0%;
    position: fixed;

}
.popup1 a {
    position:absolute;
    background: #333;
    color:#fff;
    border-radius: 50%;
    width:20px;
    line-height: 20px;
    text-align: center;
    font-family:arial;
    right:50px;
    text-decoration: none;

}
#cache1:target ~ .popup1 {
    display:block;
    }
.logobouge24
{
	margin: 0%;
}

















@font-face {
    font-family: 'cantarellregular';
    src: url('police/Cantarell-Regular-webfont.eot');
    src: url('police/Cantarell-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/Cantarell-Regular-webfont.woff') format('woff'),
         url('police/Cantarell-Regular-webfont.ttf') format('truetype'),
         url('police/Cantarell-Regular-webfont.svg#cantarellregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansregular';
    src: url('police/OpenSans-Regular-webfont.eot');
    src: url('police/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/OpenSans-Regular-webfont.woff') format('woff'),
         url('police/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('police/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {

    min-width: 320px;
}








































.fin a:link {
 color: grey;
 text-decoration:none;
 }
.fin a:visited {
 color: grey; 
}



.commander a:link {
 color: white;
 text-decoration:none;
 }
 .commander a:visited {
 color: white; 
}

a:link {
 color: black;
 text-decoration:none;
 }

a:visited {
 color: black;
 }
a:hover {
 color: grey;
 text-decoration: none;
}
.contenair
 {
	 position: fixed;
	 background-color:white;
	 width: 100%;
	 margin:0;
   z-index: 999999;

 }

































  /* The animation code */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
.panoram {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
} 
















































/* Menu déroulant */
*{
  margin:0;
  padding:0;
  
}
#menu{
  width:150px;
  margin:20px auto 0 auto;
  opacity: 0;
  position: absolute;
}
.menu, .sousmenu{
  text-align:center;
  opacity: 0;
}
.menu{
  height:18px;
  width:150px;
  padding:2px 0;
  background:#404040;
  color:#fff;
  opacity: 0;
}
.sousmenu{
  height:18px;
  width:150px;
  padding:1px 0;
  background:#808080;
  color:#fff;
  opacity: 0;
}
.menu a{
  display:block;
  width:100%;
  height:100%;
  color:#fff;
  font-family:arial,sans-serif;
  font-size:12px;
  font-weight:bold;
  text-decoration:none;
  background:#404040;
  opacity: 0;
}
.sousmenu a{
  display:block;
  width:100%;
  height:100%;
  color:#fff;
  font-family:arial,sans-serif;
  font-size:12px;
  font-weight:bold;
  text-decoration:none;
  background:#808080;
  opacity: 0;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
  background:#ca0008;
  opacity: 0;
}
















html, body {
  height: 100%;
  margin: 0; padding: 0;
}
body {
  display : table;
  width: 100%;
}
footer {
  display : table-row;
  height: 100px; /* à titre d'exemple */
}









































#box {
  width: 150px;
  height: 50px;
  background-image: url("image/logosansfond.png");
  position: absolute;
  z-index: 8;
  background-size: cover;
  opacity: 100;

 margin-top: 4%;
}




#panorama
{
  width: 100%;
  height: 45%;
  z-index: 4;
 
    

  position: relative;

}

#bleuu
{
  background-color:#1C45FA;
  height: 18em;
}