body{
	display: flex;
	margin: none;
	flex-wrap: wrap;
	width: auto;
	height: auto;
	background: url(ms/fond2.jpg)no-repeat top right, black;
	/*padding-left: 50px;*/
	text-align: center;
	font-size: 30px;
	color : whitesmoke;
}

.mentions{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -5;
	background-color: blue;
	padding-left: 100px;
	width: auto;
	height: 900px;
}

p{
	background-position: center;
	text-align: center;
	font-size: 20px;
	color : black;	
}

  html body #mapDiv {
        height: 100%;
        width: 80%;
        margin: 0;
        padding: 0;
      }

.plan{
	width: 1200px;
	height: 200px;
}

.valid{
	width: auto;
	height: 50px;
	margin-top: 8px;
	border: 3px outset blue indigo;
	background-position: center;
	background-color: rgb(64,0,128);
	color: white;
}


h1{
	width: 1400px;
	text-align: center;
	padding-left: 50px;
	background-color: rgba(255, 255, 255, 0.5);
	font-size: 40px;
	font-style: italic;
	text-shadow: 1px 1px 5px black;
	color: black;
}

 h3{
 	font-size: 25px;
	color: rgb(255,60,60);
	background-color: rgba(255, 255, 255, 0.5);
	text-decoration: underline;	
 }

 h2{
 	font-size: 25px;
 	color : whitesmoke;
 	text-align: right;
 	margin-right: 30px;
 }
 
nav{
	position: fixed;
	z-index: +10;
	top : 0;
	left: 0;
	display: flex;
	flex-direction: column;
	/*float: left;*/
	width: 12%;
	height: 630px;
	margin : 0;
	padding: 0;
}


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

.bb1{
	z-index: +5;
	position: absolute;
	top: 0px;
	left: 0px;
	color: rgb(230,184,101);
	font-size: 0px;
	width: 100px;
	min-width: 80px;
	height: 90px;
	clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
	background: url(mois/acc2.png) no-repeat top left, rgb(230,184,101);
	
}

.bb1:hover{
	z-index: +6;
	position: absolute;
	top: 0px;
	left: 0px;
	background:url(mo/bar.png), rgba(163, 73, 164, 1);
	clip-path: polygon(100% 10%, 100% 100%, 10% 100%, 10% 25%, 0 0, 25% 10%);
	font-size: 20px;
	color: rgb(64, 0, 128);
	width: 250px;
	height: 90px;
}

.bb2{
	z-index: +5;
	position: absolute;
	top: 80px;
	left: 0px;
	color: rgb(255, 174, 201);
	font-size: 0px;
	width: 100px;
	height: 90px;
	clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
	background: url(mois/bar.png) no-repeat top left, rgb(255, 174, 201);
	
}

.bb2:hover{
	z-index: +6;
	position: absolute;
	top: 80px;
	left: 0px;
	background:url(mo/bar.png), rgba(163, 73, 164, 1);
	clip-path: polygon( 100% 10%, 100% 100%, 10% 100%, 10% 25%, 0 0, 25% 10%);
	font-size: 20px;
	width: 250px;
	height: 90px;
}

.bb3{
	z-index: +5;
	position: absolute;
	top: 160px;
	left: 0px;
	color: rgb(139, 154, 36);
	font-size: 0px;
	width: 100px;
	height: 90px;
	clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
	background: url(mois/robe2.png) no-repeat top left, rgb(139, 154, 36);
	
}

.bb3:hover{
	z-index: +6;
	position: absolute;
	top: 160px;
	left: 0px;
	background:url(mos/robe.png) rgba(163, 73, 164, 1);
	clip-path: polygon(100% 10%, 100% 100%, 10% 100%, 10% 25%, 0 0, 25% 10%);
	font-size: 20px;
	width: 250px;
	height: 90px;
}

.bb4{
	z-index: +5;
	position: absolute;
	top: 240px;
	left: 0px;
	color: rgb(255,236,168);
	font-size: 0px;
	width: 100px;
	height: 90px;
	clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
	background: url(mois/loupe1.png) no-repeat top left, rgb(255,236,168);
	z-index: +1;
}

.bb4:hover{
	z-index: +6;
	position: absolute;
	top: 240px;
	left: 0px;
	background:url(mo/loupe1.png) rgba(163, 73, 164, 1);
	clip-path: polygon(100% 10%, 100% 100%, 10% 100%, 10% 25%, 0 0, 25% 10%);
	font-size: 20px;
	width: 280px;
	height: 90px;
}

.bb5{
	z-index: +5;
	position: absolute;
	top: 320px;
	left: 0px;
	color: rgb(32,240,230);
	font-size: 0px;
	width: 100px;
	height: 90px;
	clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
	background: url(mois/marecherche1.png) no-repeat top left, rgb(200,191,231);
}

.bb5:hover{
	z-index: +6;
	position: absolute;
	top: 320px;
	left: 0px;
	background:url(), rgba(163, 73, 164, 1);
	clip-path: polygon(100% 10%, 100% 100%, 10% 100%, 10% 25%, 0 0, 25% 10%);
	font-size: 20px;
	width: 280px;
	height: 90px;
}

.bb6{
	z-index: +5;
	position: absolute;
	top: 400px;
	left: 0px;
	color: rgb(0,112,194);
	font-size: 0px;
	width: 100px;
	height: 90px;
	clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
	background: url(mois/coeur.png) no-repeat top left, rgb(44,62,124);
}

.bb6:hover{
	z-index: +6;
	position: absolute;
	top: 400px;
	left: 0px;
	background:url(mo/coeur.png), rgba(163, 73, 164, 1);
	clip-path: polygon(100% 10%, 100% 100%, 10% 100%, 10% 25%, 0 0, 25% 10%);
	font-size: 20px;
	width: 250px;
	height: 90px;
}

.bb7{
	z-index: +5;
	position: absolute;
	top: 480px;
	left: 0px;
	color: rgb(255,223,255);
	font-size: 0px;
	width: 100px;
	height: 90px;
	clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
	background: url(mois/avatar.png) no-repeat top left, rgb(255,223,255);
}

.bb7:hover{
	z-index: +6;
	position: absolute;
	top: 480px;
	left: 0px;
	background:url() rgba(163, 73, 164, 1);
	clip-path: polygon(100% 10%, 100% 100%, 10% 100%, 10% 25%, 0 0, 25% 10%);
	font-size: 20px;
	width: 250px;
	height: 90px;
}

.bb8{
	z-index: +5;
	position: absolute;
	top: 560px;
	left: 0px;
	color: rgb(54,86,111);
	font-size: 0px;
	width: 100px;
	height: 90px;
	clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
	background: url(mois/mail.png) no-repeat top left, rgb(54,86,111);
}

.bb8:hover{
	z-index: +6;
	position: absolute;
	top: 560px;
	left: 0px;
	background: url() rgba(163, 73, 164, 1);
	clip-path: polygon(100% 10%, 100% 100%, 10% 100%, 10% 25%, 0 0, 25% 10%);
	font-size: 20px;
	width: 250px;
	height: 90px;
	}

.photos{
	display: flex;
	flex-wrap: wrap;
	background-position: right;
	width: 1400px;
	height: auto;
	justify-content: space-around;
	padding-left: 10px;
}

.mesphotos{
	display: inline;
	width: 1400px;
	height: auto;
	padding-left: 20px;

}

.mesphotos img{
	width: auto;
	height: auto;
	margin: 0px;
	padding: 10px;
	border: 10px ridge rgb(0,74,127);
	background: rgb(255,214,216);	
}

.photos img{
	width: auto;
	height: auto;
	margin: 0px;
	padding: 10px;
	border: 10px ridge rgb(0,74,127);
	background: rgb(255,214,216);	
}

.panier img{
	width: auto;
	height: auto;
	margin: 0px;
	padding: 10px;
	border: 10px ridge rgb(0,74,127);
	background: rgb(255,214,216);	
}

mark{
	color: red;
	font-size: 25px;
	text-decoration: ; 
}

.frip{
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: -5;
	top : 0;
	left: 0px;
	width: 1500px;
	height: auto;
	padding-left: 50px;
	background: rgb(139,154,36);
	font-size: 20px;
	color: black;
}

.accueil{
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: -5;
	top : 0;
	left: 0px;
	width: 1500px;
	height: auto;
	padding-left: 50px;
	background: rgb(230,184,101);
}

#tournez {
	position: absolute;
	top : 0px;
	left: 0px;
	z-index: +10;
}

#conteneur{ 
	display:block;
	z-index: -10; 
}

@media (orientation:portrait){
 #conteneur { 
	height: 100vw;
	margin: 0;
	padding: 0;
  -webkit-transform: rotate(90deg); 
  -moz-transform: rotate(90deg); 
  -o-transform: rotate(90deg); 
  -ms-transform: rotate(90deg); 
  transform: rotate(90deg); }
  #tournez {
  visibility: visible;
  top: 0px;
  right: 0px;
  z-index: +10; }
   }

@media (orientation:landscape){
 #conteneur { 
 	width: 1500px;
 	height: auto;
  -webkit-transform: rotate(0deg); 
  -moz-transform: rotate(0deg); 
  -o-transform: rotate(0deg); 
  -ms-transform: rotate(0deg); 
  transform: rotate(0deg); }
 #tournez {
  visibility: hidden;
  z-index: -10; }
  }

.imag{
	width: 350px;
	height: 250px;
	clip-path: polygon(50% 0%, 70% 20%, 100% 30%, 70% 50%, 100% 100%, 50% 90%, 0 100%, 30% 50%, 0 30%, 30% 20%);
	position: absolute;
	top: 5px;
	left:100px ;
}

.bar{
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: -5;
	top : 0;
	left: 0px;
	width: 1500px;
	height: auto;
	padding-left: 50px;
	padding-top: 20px;
	background: rgb(255,164,193);
}

.recherches{
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: -5;
	top : 0;
	left: 0px;
	width: 1500px;
	height: auto;
	padding-left: 50px;
	background: rgb(252,145,38);
}

.mesrecherches{
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: -5;
	top : 0;
	left: 0px;
	width: 1500px;
	height: auto;
	padding-left: 50px;
	background: rgb(32,240,230);
}

.favoris{
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: -5;
	top : 0;
	left: 0px;
	width: 1500px;
	height: auto;
	text-align: center;
	font-size: 30px;
	padding-left: 50px;
	padding-top: 20px;
	background: rgb(0,112,192);
}

.choix{
	width: auto;
	text-align: left;
	margin: 10px;
}

.choix p{
	font-size: 20px;
	color: black;
	text-decoration: underline; 
}

.mail{
	position: absolute;
	z-index: -5;
	top : 0;
	left: 0px;
	padding-left: 100px;
	width: 1500px;
	height: auto;
	background: rgb(54,86,111);
}

.contact{
	display: flex;
	flex-direction: row;
	margin-top: 10px;
	padding-right: 160px;
	padding-left: 160px;
	font-size: 20px;
}

.nom{
	width: 500px;
	height: 100px;
}

.commantaire{
	width: 500px;
	height: 100px;
	
}

.box{
	display: flex;
	flex-direction :row;
	width: auto;
	justify-content: space-around;
	padding: 10px;
	font-size: 40px;
}

article{
	display: flex;
	flex-direction :column;
	width: auto;
	max-width: 700px;
	height: 350 px;
	padding: 30px;
	background: rgb(255,214,216);
	border: 10px ridge rgb(0,74,127);
	font-size: 25px;
}

ul{
	text-align: left;
}

.pseudo{
	z-index: -5;
	position: absolute;
	top : 0;
	left: 0px;
	margin-top: 10px;
	text-align: center;
	background: rgb(255,117,255);
	color: black;
	width: 1000px;
	height: auto;
}

.compteur{
	background position: center;
	color: whitesmoke;
	font-size: 25px;
}

/*.cadre{
	border-image: url('mois/frise.png') round;
	border-image-slice: calc(50 / 184 * 100%) calc(80 / 284 * 100%) fill;
	border-image-width: 30px 48px;
}*/