@font-face{
font-family: Olympic Branding;
src: url(../fonts/myfont.ttf);
}
@font-face{
	font-family:"myfont";
	src:url(../fonts/myfont.ttf);
	font-family:"josefin";
	src:url(../fonts/josefin.ttf);
}
@font-face{
	font-family:josefin;
	src:url(../fonts/JosefinRegular.ttf);
}
@font-face{
	font-family:"myfont";
	src:url(../fonts/myfont.ttf);
}

@font-face{
	font-family:josefinSemiBold;
	src:url(../fonts/JosefinSemiBold.ttf);
}
/* ------------------------------------------------------------------- */

*{
	margin: 0;
	padding: 0;
}


#wrapper{
	/* border: 2px solid black;  */
	position: relative;
	display: block;
	background-color:#fcefd6;
	width: 1100px;
	margin: 0 auto;
	height: auto !important;
}

body{
	width:100%;
    height:100%;
	background-color: #fcefd6;
	display: block;
}

/*---------------------------------HEADER --------------------------------*/

header{
 	/* border:3px solid red; */
 	position: relative;
 	display: block;
 	margin: 0 auto; 
	height: 100vh !important;  
 	width: 1100px;
}
header h1{
	font-family: myfont;
	font-weight:normal;
	text-align:center;
	font-size: 70px;
	
}
 #BGimg{
 	position: absolute;
 	margin: 30px 0 0 430px;
 	z-index: 0;
 	padding: 0;
 }

 #imgtitre{
 	position: absolute;
	z-index: 9;
 	margin: 400px 0 0 415px;

 }


 #bar{
 	z-index: 1;
 	position: absolute;
 	margin: 550px 0 0 -165px ;
 	padding: 0 0 0 0px;
 	width: 1423px;
 	height: 65px;
 	background-color: #5e7a81;
}

li{
	background-repeat:no-repeat;
	list-style-type:none;
}

nav > ul {
/*	border:3px solid red;*/
	margin: 0 0 0 200px;
	padding: 0;
	position: relative;
	display: block;
	top: 450px
}


#l1{
	position: absolute;
	z-index: 2;
	/* border:1px solid red; */
}
#l2{
	position: absolute;
	margin-left: 150px;
	z-index: 5;
	/* border:1px solid blue; */
}
#l3{
	position: absolute;
	margin-left: 330px;
	z-index: 4;
	/* border:1px solid red; */
}



#l4{
	position: absolute;
	margin-left: 500px;
	z-index: 3;
	/* border:1px solid red; */
}



/*------------------------------ HEADER END -----------------------*/

/*------------------------- FIXED ------------------------*/
#abonne{
	position: fixed;bottom: 1%; right: 2%; 
    display: block;
    z-index: 25;

}


footer{
width:1423px;
margin:0 auto;
position:fixed;
height:auto;
}

 #barfixed {
	/* border:1px solid blue; */
 	z-index: 20;
 	position: fixed;
	bottom:0%; 
	right:0%; 
 	width: 100%;
 	height: 7%;
 	background-color: rgba(92,122,129,0.5);
 }
#iconeH{
	position: fixed;
	bottom:1%;  
	left:1%;
	display: inline-block;
	z-index: 19;
}
#fb/*, #tweet, #pin*/{
	position: fixed;
	bottom:1.5%;  
	left:5%;
	display: inline-block;
	z-index: 20;
}
#tweet/*, #tweet, #pin*/{
	position: fixed;
	bottom:1.5%;  
	left:7.5%;
	display: inline-block;
	z-index: 20;
}
#pin/*, #tweet, #pin*/{
	position: fixed;
	bottom:1.5%;  
	left:10%;
	display: inline-block;
	z-index: 20;
}
/* FIXED menu on the side*/



/*----------------------- END FIXED ---------------*/



/* SECTION BOX2r*/


#box2{
    /*border: 1px solid pink;*/
    position: relative;
    display: block;
    width: 0 auto;
    height: 100vh;
	padding-top:50px;
	background-color:#fcefd6;
}

#box2 h1{
	font-family: myfont;
	font-weight:normal;
	text-align:center;
	font-size: 70px;
}

#polyBgBox {
	position: absolute;
    display: block;
    /*z-index: 0;*/
    margin: -30px 0 0 180px;
    width: auto;
    height: 765px;
}

#m2{
    
/*    border: 1px solid #000;*/
    position: relative;
    display: block;
    margin: 50px auto;
    padding: 0;
    z-index: 1;
    width:300px;
    height:  auto;
	cursor:cell;

}


#robe {
/*    border: 1px solid #f00;*/
    position: absolute;
    display: inline-block;
    margin: 20px 0 0 165px;
    width: auto;
    height: 170px;
}


#creme {
/*    border: 1px solid #f00;*/
    position: absolute;
    display: inline-block;
    margin: 330px 0 0 100px;
    width: 150px;
}

#clef {
/*    border: 1px solid #f00;*/
    position: absolute;
    display: inline-block;
    margin: 55px 0 0 730px;
}
#bague {
/*    border: 1px solid #f00;*/
    position: absolute;
    display: inline-block;
    margin: 370px 0 0 825px;
    width: 183px;
    height: auto;
}


/*--------------------------------- BEAUTE ---------------------------*/


#beaute{
	width:100%;
	height:100vh; 
	/* height:auto; */
	margin:0,auto; 
	/* border:1px solid red;   */
	position:relative;
	overflow:hidden;
	padding-top:50px;
	padding-bottom:50px; 
	background: url(../images/polyturq.png) no-repeat center;
	background-size: 87%;
	background-position:'cover';  
	
}

#beaute h1{
	font-family: myfont;
	font-weight:normal;
	text-align:center;
	font-size: 70px;
}

.main-article{
  /* overflow:hidden; */
  width:100%; 
  margin:0 auto;
  position:relative;
}
.clr:after{
  content:"";
  display:block;
  clear:both;
}
.main-article .a2{
  /* border: 5px solid pink; */
  display: table-cell;
  position: relative;
  left: 26%;
  float: left;
  overflow: hidden;
  transform: rotate(-30deg) skewY(30deg);
  width: 45%;
  padding-bottom: 51.96304849%;
  overflow:hidden;  
  visibility:hidden;   
 
  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
}

.main-article .a2 *{
  position:absolute;
  visibility:visible;
}
.main-article .a2 .a3{
  width:100%;
  height:100%;
  text-align:center;
  color:#fff;
  overflow:hidden;
  
  -webkit-transform: skewY(-30deg) rotate(60deg);
  -ms-transform: skewY(-30deg) rotate(60deg);
  transform: skewY(-30deg) rotate(60deg);
  
	-webkit-backface-visibility:hidden;
  
}

/* HEX CONTENT */
.main-article .a3 img{
  left:-100%; right:-100%;
  width: 100%; height:100%;
  margin:0 auto;  
  /* border:1px solid pink */;  
}

.main-article .a2 .a3 h4 {
  width:90%;
  padding:0 5%;
  background-color: rgba(188, 70, 112, 0.8);
  font-family: myfont;

  -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
  -ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
  transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}
.main-article .a2 .a3  p{
  width:90%;
  padding:0 5%;
  background-color: rgba(188, 70, 112, 0.8);
  font-family: josefin;
  -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
  -ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
  transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}
.main-article .a2 .a3 h4{
  bottom:110%;
  font-weight:normal;
  font-size:4em;
  padding-top:100%;
  padding-bottom:100%;
}
/* .main-article .a2 .a3 h4:after{
  content:'';
  display:block;
  position:absolute;
  bottom:-1px; left:45%;
  width:10%;
  text-align:center;
  z-index:1;
  border-bottom:2px solid #fff;
} */

.main-article .a2 .a3 p{
	padding-top:10%;
	top:100%;
	padding-bottom:50%;
}


/* HOVER EFFECT  */

 .main-article .a2 .a3:hover h4 {
  bottom:50%;
  padding-bottom:10%;
  
}

  .main-article .a2 .a3:hover p {
  top:40%;
  padding-top:10%;
}


article{
	position:relative; 
	display:block; 
	width:25%;
	height:22%;
	cursor:cell;
	border-radius:50%;
}
article img{
width:100%;
height:100%;
}

article h4{
position:absolute;
top:-4%;
text-align:center;
font-family:myfont;
font-weight:normal;
font-size:3em;
color:black;
padding:0;
margin:0;
width:200px;
display:none; 
} 
.selection-article article:nth-child(1){
	/* border:1px solid pink;  */  
	margin-top:-53%;  
	margin-left:5%;
	width:200px;
	height:200px;
	position:relative;
	overflow:hidden;
	float:left;
	clear:both;
}

.selection-article article:nth-child(2){
	/* border:1px solid blue; */   
	margin-top:-53%;
	margin-right:5%;
	width:200px;
	height:200px;
	position:relative;
	overflow:hidden;
	float:right;
	clear:both;
}
.selection-article article:nth-child(3){
	/* border:1px solid pink;   */ 
	margin-top:-15%;
	margin-left:5%;
	width:200px;
	height:200px;
	position:relative;
	overflow:hidden;
	float:left;
	clear:both;
}
.selection-article article:nth-child(4){
/* 	border:1px solid blue;   */ 
	margin-top:-15%;
	margin-right:5%;
	width:200px;
	height:200px;
	position:relative;
	overflow:hidden;
	float:right;
	clear:both;
}
.selection-article:nth-child(4){
	clear:both;
	

}
/*--------------------------------- BEAUTE END   ---------------------------*/



/*------------------------------ Geek -----------------------*/
#geek h1{
	font-family: myfont;
	font-weight:normal;
	text-align:center;
	font-size: 70px;
}
#geek{
	width:1100px;
	/* height:755px;  */
	height:100vh!important; 
	margin:0 auto;
	/* border:1px solid blue;  */
	/* padding-top:50px; */
	position:relative;
	padding-bottom:50px; 
	background: url(../images/polybleu.png) no-repeat center;
	background-size: 99%;
	background-position:'cover';
}
.polygon {
   	width:300px; 
	height:330px;  
	/* border:1px solid red; */ 
	display:inline-block;
	vertical-align:top;
}
/*------------------ position des 5 polygones------------------------------------  */

#geek>.polygon:nth-child(-n+3){
	/* border:5px solid pink; */  
	/* margin-top:-6%; */
	margin-bottom:-2%;
	
}
#geek>.polygon:nth-child(2){
	/* border:5px solid green;  */ 
	margin-left:20%;
	margin-right:2%;
	
}
#geek>.polygon:nth-child(3){
	/* border:5px solid yellow; */
	/* margin-right:10%;
	margin-left:2%; */
	/* right:250px; */
}
#geek>.polygon:nth-child(5) .container-mask img.hovering{
left:19%;
}
   
#geek>.polygon:nth-child(4){
	/* border:5px solid purple; */
	margin-left:5%;
	margin-right:2%;
}   
#geek>.polygon:nth-child(5){
	/* border:5px solid purple; */
	margin-right:2%;
}   
.polygon >.container-mask {
	/* float: left; */   
    width:100%;
    height:100%;
    position: relative; 
	/* border:1px solid green;  */
	}

.polygon  .container-mask  img {
	/* border:5px solid pink;  */ 
    position: relative;
	/* overflow:hidden; */
    top:-89%; 
	left:5%;
	filter: grayscale(0%);
		-webkit-filter: grayscale(0%);
		-moz-filter: grayscale(0%);
		-o-filter: grayscale(0%);
		-ms-filter: grayscale(0%);
    transition: 300ms ease-out;
		-webkit-transition: 300ms ease-out;
		-moz-transition: 300ms ease-out;
		-o-transition: 300ms ease-out;
}
.polygon .container-mask img.hovering {
	left: 20%;  
   	filter: grayscale(100%);
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
}
/* .polygon >.container-mask>span.mask {
	width: 	300px;
	height: 330px; 
	overflow:hidden;
	position: absolute;
	z-index: 2;
	background: url("../images/mask.png") no-repeat;
	transition:transform 300ms ease-out;
		-webkit-transition:-webkit-transform 300ms ease-out;
		-moz-transition:-moz-transform 300ms ease-out;
		-o-transition:-o-transform 300ms ease-out;
} */

.polygon >.container-mask>span.mask {
	display:inline-block;
	/* border:1px solid red; */
	width:300px !important;
	height:343px!important;  
	overflow:hidden; 
	position: relative;
	z-index: 2; 
	background: url("../images/newmask.png") no-repeat;
	background-size:98%;
	transition:transform 300ms ease-out;
		-webkit-transition:-webkit-transform 300ms ease-out;
		-moz-transition:-moz-transform 300ms ease-out;
		-o-transition:-o-transform 300ms ease-out;
} 

.polygon >.container-mask>span.mask:hover{
	transform:rotate(30deg);
		-webkit-transform:rotate(30deg);
		-moz-transform:rotate(30deg);
		-ms-transform:rotate(30deg);
		-o-transform:rotate(30deg);
	/* border:1px solid green; */
}

.info-box{
	position: relative;
	top:-85%;
	width:300px;
	height:320px;
	background-color:rgba(199,214,219,0.8);
	display:none; 
	font-family:"josefin";
	text-align:center;
	/* border:1px solid green; */
}

.info-box h5{
	text-align:center;
	font-weight:normal;
	font-size:3em;
	font-family:myfont;
	padding:7px;
	line-height:1em;
}
.info-box p{
	text-align:center;
	padding:25px;
	/* text-shadow:500px black; */
}
.socialMedia{
	position:relative;
	padding:7%;
	/* border:1px solid red; */
}
.socialMedia a{
	position:relative;
	/* border:1px solid blue; */
	/* z-index:999; */ 
}
#geek button{
	position:relative;
	top:-100%;
	/* border:1px solid blue; */
	left:45%;
	padding:0;
	margin:0;
	background-color:rgba(252,239,214,0.5);
}

/*------------------------------ GEEK END -----------------------*/









/*--------------------------------- MODE ---------------------------*/

#mode{


    /* border: 1px solid red; */
 
    position: relative;
    display: block;
    width: 0 auto;
    height: 100vh;
	background-color:#fcefd6;

}


#polyBg {
	position: absolute;
    display: block;
    z-index: 0;
    margin: -50px 0 0 180px;
    width: auto;
    height: 765px;
}



#m1{
    
/*    border: 1px solid #000;*/
    position: relative;
    display: block;
    margin: 50px auto;
    z-index: 20;
}

#mode h1{
	padding-left:390px;
	font-family:myfont;
	font-weight:normal;
	font-size:70px;
}

#legging {
/*    border: 1px solid #f00;*/
    position: absolute;
    display: inline-block;
    margin: 20px 0 0 130px;
}

#coat {
/*    border: 1px solid #f00;*/
    position: absolute;
    display: inline-block;
    margin: 30px 0 0 800px;
}

#bag {
/*    border: 1px solid #f00;*/
    position: absolute;
    display: inline-block;
    margin: 380px 0 0 130px;
    width: auto;
    height: 257px;
}

#basket {
/*    border: 1px solid #f00;*/
    position: absolute;
    display: inline-block;
    margin: 430px 0 0 750px;
    width: auto;
    height: 180px;
}

#glasses{
/*    border: 1px solid #f00;*/
    position: absolute;
    display: inline-block;
    margin: 10px 0 0 330px;
}




/*----------------------------------------------------*/




/*------------------------------ MODE END -----------------------



/*------------------------------ ABOUT -----------------------*/

#allpoly{
	position:absolute;
	bottom:1%;
	/* display: block;*/
	margin: 20px 0 0 350px; 
	z-index:50;
	width: 400px;
}
#logofooter{
	position: absolute;
	left:42%;
	/* padding-left: 460px;
	padding-top: 35px;  */
	bottom:10%;
	z-index: 70;
}

#nous{
	position:relative;
    /*border: 1px solid green;*/
    width:1100px;
	height:100vh; 
	margin:0,auto;
	background-color:#fcefd6;
	position:relative;
	display: block;
	background: url(../images/polyvecto3.png) no-repeat center;
    
}

#nous h1{
	font-family: myfont;
	font-weight:normal;
	text-align:center;
	font-size: 70px;
	padding-top: 55px;
	margin: 40px;
}
.debo{
	position:absolute;
	margin-top: 520px;
	z-index:1;
	margin-left: -200px;
	
}
.rosi{
	position:absolute;
	margin-top: 520px;
	z-index:1;
	margin-left: -200px;
	
}
.aud{
	position:absolute;
	margin-top: 520px;
	z-index:1;
	margin-left: -200px;
	
}

#imgnous{
	position: relative;
	/*margin: 0 auto;*/
	margin: 100px 0 0 180px;

}

/*Hover About*/


/*====
Déborah
=====*/


#box    {  float: left;
            width:245px;
           height:354px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,0);
/*          border-bottom:2px solid #fff;*/
/*          border-right:2px solid #fff;*/
/*    border-radius: 150px;*/
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;    
    border-top-left-radius: 150px;
    border-top-right-radius: 150px;

/*          margin:5% auto 0 auto; */
          background:url(../images/debo.png) no-repeat center;
  background-size:cover;
/*border-radius:5px;*/
overflow:hidden;
/*clear: both;*/
}

#overlay    {  background:rgba(84,132,155,.75);
               text-align:center;
               padding:10px 0 66px 0;
/*    margin: 10px;*/
/*    margin: 10px 0 0 0;*/
               opacity:0;
               -webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}

#box:hover #overlay {
               opacity:1;}

#plus       {  font-family:josefin;
/*               font-weight:900;*/
    font-size: 2em;
               color:rgba(255,255,255,.85);
    /*               font-size:96px;}*/}

#nous #box h1{
    border-bottom: solid #fff 1px;
    font-size: 1.5em;
}

#nous #box p{
    color: #fff;
    margin-top: -20px;
}


/*====
Rosy
=====*/


#box4    {  float: left;
            width:245px ;
           height:354px ;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,0);
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;    
    border-top-left-radius: 150px;
    border-top-right-radius: 150px;

    background:url(../images/rosy2.png) no-repeat center;
    background-size:cover;
    overflow:hidden;
    padding: 0;
    
    
}

#overlay2    { background:rgba(84,132,155,.75);
               text-align:center;
               padding:10px 0 66px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}

#box4:hover #overlay2 {
               opacity:1;}

#plus2       {  font-family:josefin;
    font-size: 2em;
               color:rgba(255,255,255,.85);}

#nous #box4 h1{
    border-bottom: solid #fff 1px;
    font-size: 1.5em;
}

#nous #box4 p{
    color: #fff;
    margin-top: -20px;
/*    clear: both;*/
}

/*====
Audrey
=====*/
#box3    { float: left;
    width:245px;
           height:354px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,0);
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;    
    border-top-left-radius: 150px;
    border-top-right-radius: 150px;
  background:url(../images/audrey.png) no-repeat center;
  background-size:cover;
overflow:hidden;
/*clear: both;*/
}

#overlay3    {  background:rgba(84,132,155,.75);
               text-align:center;
               padding:10px 0 66px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}

#box3:hover #overlay3 {
               opacity:1;}

#plus3       {  font-family:josefin;
    font-size: 2em;
               color:rgba(255,255,255,.85);
}

#nous #box3 h1{
    border-bottom: solid #fff 1px;
    font-size: 1.5em;
}

#nous #box3 p{
    color: #fff;
    margin-top: -20px;
    clear: both;
    
}


/*------------------------------ ABOUT END -----------------------*/

/* _______________________________________ABONNEMENT_________________________________ */
#grayBack {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: black;
     z-index: 1999;
     opacity: 0.5;
}


#abonnement p{
	font-family: josefin;
	font-weight:normal;
	/* font-size: 14px; */
	
}
#abonnement h1{
	font-family: myfont;
	font-weight:normal;
	text-align:center;
	font-size: 70px;
	margin:40px 40px; 
	
}
#abonnement h2{
	font-family: myfont;
	font-weight:normal;
	text-align:center;
	font-size: 50px;
	margin: 20px;
	/* font-size:220%; */
}
#abonnement{
	 position: fixed;
     display: none;   
     left:50%; 
     top:50%; 
	 width:50%;
	 height:auto;
     z-index: 2000;
     text-align:center;
	 line-height:25px;
     background-color: #fcefd6;
     font-size:1em; 
     /* line-height: 30px;  */
     color: #202020;
     border : 3px outset #555555;
}
#abonnement button{
	float:right;
	width:30px;
}
li{
	font-family: josefin;
	font-size: 14px;
}
.puce li{
display:inline-block;
}
#formules{
	margin-top: 90px;
	
}
form{
font-family:josefin;
}

.formule li{
	display: inline-block;
	vertical-align:top;
	margin:3px;
/* 	width:500px; */
	height:auto;
} 
.explication li{
display:inline-block;
vertical-align:top;
margin:20px;
font-size:16px;
} 
.lettre{
	position:absolute;
	width: 60px;
	margin-left: -400px;
	margin-top: 60px;
	z-index:1;
	
}
.boite{
	position:absolute;
	width: 60px;
	margin-top: 65px;
	margin-left: -240px;
	
}
.cadeau{
	position:absolute;
	width: 60px;
	margin-top: 65px;
	margin-left: -85px;
	
}


/* ____________________________________________ABONNEMENT END__________________________ */