/* fichier css de art et glamour - site v2 - septembre 2016*/
/* -----------------------------------RESET CSS------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* -----------------------------------FIN DU RESET.CSS-------------------------------*/


/* ------------------------------------ STRUCTURE GLOBALE DU SITE ELEMENTS HTML -----------------------------------*/
@import 'https://fonts.googleapis.com/css?family=Capriola|Catamaran|Poppins|Fjalla+One';
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  
body {
	margin:auto;
	width:100%;
	
}
header {
	width:100%;
	height:100%;
margin:auto;
vertical-align:middle;
}

#entete {
	position:absolute;
	z-index:350000;
	vertical-align:top;
}
p {font-family:Verdana, Geneva, sans-serif;
}
p.italic1 {
	font-style:italic;
	font-size:0.8em!important;
}
h1{
	margin:auto;
	padding-bottom: 2%;
    font-size: 1.3em;
	color:#000;
font-family: 'Catamaran', sans-serif;
	text-align:center;
	line-height:50px;
	vertical-align:middle;
}
h2{
font-size:0.85em;
color:#fff;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
text-align:center;
margin: 0 0% 4% 0;
}
a {text-decoration:none;
color:#000;}
strong {color:#000; font-family:Verdana, Geneva, sans-serif; font-weight:bold;
}
footer {background-image:url(../images/trait.jpg);
background-color:#000;
background-repeat:repeat-x;
color:#FFF;
height:25px;
}

/* ------------------------------------ FIN DE STRUCTURE GLOBALE DU SITE ELEMENTS HTML -----------------------------------*/

/* ------------------------------------ ELEMENTS REPETES DANS TOUT LE SITE -----------------------------------*/
.container {
width:100%;
margin:auto;
}
header img {
text-align:center;
}
.container #top  {
	max-height:85px;
	display:inline-block;
}
.main-content {
	width:100%;
	margin:auto;
	padding-top:2%;
}

.box1 {
width:100%;
font-size:1em; 
color:#000; 
text-align:center;
vertical-align:top; 
}
.box2 {
	display:inline-block;
	width:47%;
	}
.box2 img {
	max-width:100%;
	display:block;
	}
	.box2d {
		width:44%;
		display:inline-block;
		text-align:center;
	}
	.box2d img {
		max-width:100%;
		display:block;
	}
.box3 {
width:13%;
margin-left: 3%;
display:inline-block;
}
.box3 img, .box4 img, .box6 img {
	max-width:100%;
}
.image_logo {
display:none;
} 
.box4 {
width : 35%;
padding:0% 1% 0% 1%;
text-align:justify;
display:inline-block;
}
.box5  {
	width:64.583333333333333333333333333333%;
	margin:auto;
}
.box5 iframe {
	padding:0% 0% 0% 0%;
	display:block;
	vertical-align:top;
	z-index:2000;
}
.box6 {
	width: 22%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 0% 1% 0% 1%;
    padding: 1% 2% 1% 2%;
    line-height: 1.2em;
}

.box20 {
	width: 22%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 0% 1% 0% 1%;
    padding: 1% 2% 1% 2%;
    line-height: 1.2em;
}

.image_bandeau1 {display:none;
}
.bandeau1 {display:none;
}
#apDiv1 {
	position:absolute;
	width:200px;
	height:102px;
	vertical-align:middle;
	color:#000;
	z-index:10001;
	left: 60%;
	top: -14px;
	display: hidden;
	font-family: 'Fjalla One', sans-serif;
}
#apDiv2 {
	font-family: 'Fjalla One', sans-serif;
	vertical-align:top;
 margin-top: 30px;
    float: left;
}
#apDiv2 p {
	font-family: 'Fjalla One', sans-serif;
	vertical-align:middle;
 margin-bottom: 20px;
 display:inline-block;

}
#apDiv3 {display:none;}
#cssmenu {display:none;}
/* ------------------------------------ FIN DES ELEMENTS REPETES DANS TOUT LE SITE -----------------------------------*/

/* ------------------------------------------------ page d'accueil ----------------------------------*/
.redirection p, .redirection p a{
	text-align:center;
	font-family:Poppins, sans-serif;
}
.image_bandeau {
	display:block;
	margin:auto;
	max-width:100%;
}

.toggle-info {
	color:#000;
  cursor: pointer;
}

.info-panel {
  display: none;
  cursor: pointer;
}
#page_accueil #accueil .box1 p {text-align:center;
font-family:Poppins, sans-serif;
font-size:1em;
line-height:1.3em;
width:100%;
}
figure.effect-goliath{background:#000;}
 figure.effect-goliath img,figure.effect-goliath h2{-webkit-transition:-webkit-transform .35s;transition:transform .35s}
 figure.effect-goliath img{-webkit-backface-visibility:hidden;backface-visibility:hidden}
 figure.effect-goliath h2,figure.effect-goliath p{position:absolute;bottom:0;left:0;padding:30px}
 figure.effect-goliath p{text-transform:none;font-size:90%;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}
 figure.effect-goliath:hover img{-webkit-transform:translate3d(0,-80px,0);transform:translate3d(0,-80px,0)}
 figure.effect-goliath:hover h2{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}
 figure.effect-goliath:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
12345678910

#bandeau .box1 {
background-color:#f3efef; 
font-family:Verdana, Geneva, sans-serif; 
font-weight:bold; 
font-size:1em; 
text-align:center;
}
#bandeau .box1 img {
	max-width:100%;
}
#page_accueil #presentation .box1 {

	text-align:justify;
	color:#000;
	line-height:1.5em;
	font-family:Poppins, sans-serif;
	font-size:1em;
	padding-top: 1%;
	vertical-align:top;
}
#page_accueil #accueil2 .box1 {
	height:66px;
	font-family:Poppins, sans-serif;
	padding-bottom:3%;
}
#page_accueil #accueil2 .box1 p {
	display:inline-block;
	line-height: 1.3em;
	vertical-align:middle;
	font-family:Poppins, sans-serif;
		padding-bottom:1%;
}
#departements
{
	display:inline-block;
	width:90%; }

#page_accueil #departements .box6 p, #page_accueil #departements .box1 p
{	display:block;
	font-size:0.8em;
	font-family:Poppins, sans-serif;
	line-height:1.5em;
}

#page_accueil #presentation .box2d {
	line-height:1.5em;
	text-align:center;
	border-radius:10px; 
border:1px solid #000000;
padding:0% 1% 1% 1%;
margin : 0% 3%; 
}
#page_accueil #presentation .box2 li {
	margin-left:20px;
	list-style-type:disc;
	    font-size: 0.9em;
		line-height: 1em;
}
#infos_legales {
	color:#FFF;
	background-color:#000;
	height:60px;
	padding-top:20px;
}
.fb_iframe_widget {
    display: inline-block;
    position: relative;
	color:#FFF;
}
#infos_legales {
	width:100%;
	height:auto;
	background-color:#000;
	display:inline-block;
	font-family:Verdana, Geneva, sans-serif; 
	font-size:0.9em; 
	color:#FFF;
	padding-top:20px;
	padding-left:140px;
	line-height: 1.4em;
}
#infos_legales .box2 {
	padding:0%;
	margin:auto;
display:inline-block;
font-family:Verdana, Geneva, sans-serif; 
font-size:0.9em; 
color:#fff;
vertical-align:middle; 
line-height: 1.4em;
}
#infos_legales .box2 img {
	display:block;
	margin:auto;

}
#infos_legales a {
margin:auto;
display:inline-block;
font-family:Verdana, Geneva, sans-serif; 
color:#fff;
text-decoration:none;
}
#media .box3 {
	margin:auto;
display:inline-block;
width:33%;
font-family:Verdana, Geneva, sans-serif; 
font-size:0.9em; 
color:#fff; 
text-align:center; 
vertical-align:middle; 
line-height: 1.3em;
}
#infos_legales a {
margin:auto;
display:inline-block;
font-family:Verdana, Geneva, sans-serif; 
font-size:0.9em; 
color:#fff;
text-decoration:none;
}
#fond {
    background-image:url(../images/back.png);
	opacity:0.4;
    display: none; 
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 0;
}
#popup {
    width: 659px;
    background-color: white;
    padding: 0 20px 20px;
    height: auto;
    z-index: 9;
    position: fixed;
    display: none;
    top: 200px;
    right: 0px;
    left: 0;
    margin: 0 auto;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 0px #48312B solid;
}
#close {
    width: 30px;
    height: 30px;
    position: relative;
    top: -10px;
    right: -350px;
    color: white;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
 
.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
 
.oModal:target {
  opacity:1;
  pointer-events: auto;
}
 
.oModal:target > div {
  margin: 2% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div {
  max-width: 824px;
  position: relative;
  margin: 1% auto;
  padding: 5px 5px 5px 5px;
  border-radius: 5px;
  background: #eee;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div header,.oModal > div footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
.oModal .footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
}
 
.oModal > div h2 {
  margin:0;
}
 
.oModal > div .btn {
  float:right;
}
/*----------------------------------FIN PAGE ACCUEIL ---------------------------------------*/



/*----------------------------------- PAGE MAQUILLAGE ----------------------------------------*/
#page_maquillage #stella .box4 {
	margin:0% 2% 0% 2%;
	margin:auto;
	display:inline-block;
	vertical-align:top;
	line-height: 1.3em;
}
#page_maquillage #stella .box4 img {margin:auto;
display:block;
text-align:center;
}
#page_maquillage #stella .box4 p {padding:0% 3% 0% 3%;
}
#page_maquillage #maquillage .box5 {
	width:64.583333333333333333333333333333%;
	margin:auto;
	display:inline-block;
}

div.background {
background-image:url(../images/maquillage_domicile_lyon.jpg);
	background-repeat:no-repeat;
	background-position:center;
 }

div.transbox {
     background-color: #ffffff;
     opacity: 0.6;
     filter: alpha(opacity=60); /* For IE8 and earlier */
 }

div.transbox p {
     margin: 5%;
	 font-family:Verdana, Geneva, sans-serif;
	 font-size:1em;
     font-weight:bolder;
	 text-align:center;
     color: #000000;
	 line-height:1.5em;
 }
/* Le parent */
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
/* L'enfant */
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#page_maquillage #stella .box2 p {
	margin:1% 1% 1% 1%;
	text-align:justify;
	display:inline-block;
	vertical-align:top;
}
/*------------------------------------------------ FIN PAGE MAQUILLAGE -------------------------------------*/
/*---------------------------------------------------PAGE RESERVATIONS -------------------------------------*/

#page_reservation #reservation #form .box1 input, #form .box1 textarea {
	width:80%;
	margin:0% 10% 0% 10%;
	color:#000; 
	text-align:center;
		}
#page_reservation #reservation #form .box1 {
	font-family:'Roboto Condensed', sans-serif;
	font-size:0.8em; 
	color:#000; 
	font-weight:bold; 
	text-align:center;
		}
#retour_accueil .box1, #retour_accueil .box1 a {
	font-family:'Roboto Condensed', sans-serif;
	font-size:0.9em;
	color:#000;
}
/* -------------------------------------------FIN PAGE RESERVATIONS ----------------------------------------*/
/*----------------- SPECIFICITES POUR LES DIFFERENTES TAILLES D'ECRAN -----------------------*/
@media all and (min-width: 1230px) and (max-width: 1920px)
{	#apDiv2 {
    position: absolute;
    width: 252px;
    height: 150px;
    z-index: 10001;
    left: 70%;
    top: -9px;
}
	#apDiv2 {
vertical-align: top;
    margin-top: 55px;
    float: left;
	}
	}
	@media screen and (max-width:1230px)
{
	.container {width:100%;
	margin:auto;}
	.main-content {width:100%;
	margin:auto;
	}
	.under-content {width:100%;
	margin:auto;}
	.under-content2 {width:100%;
	margin:auto;
	}
	#apDiv2 {
    position: absolute;
    width: 252px;
    height: 150px;
    z-index: 10001;
    left: 57%;
    top: -9px;
}
	#apDiv2 {
vertical-align: top;
    margin-top: 37px;
    float: left;
	}
#apDiv3 {
display:none;}
#cssmenu {display:none;}
.bandeau1 {display:none;
}
.bandeau {display:block;
margin:auto;
max-width:100%;
}
div#intro_image {
    position: relative;
}
 
div#intro_slogan {
    position: absolute;
    top: 3%;
	text-align:center;
	font-family:'Capriola', sans-serif;
	font-size:0.8em;
    width: 100%;
	color:#000;
	line-height: 1em;
}

	}
	
@media screen and (max-width:980px)
{
	.container {width:100%;
	margin:auto;}
	#apDiv2 {
    position: absolute;
    width: 252px;
    height: 150px;
    z-index: 10001;
    left: 70%;
    top: -9px;
}
	#apDiv2 {
vertical-align: top;
    margin-top: 24px;
    float: left;
	}
#apDiv3 {
display:none;}
#cssmenu {display:none;}
	}
@media screen and (max-width:793px)
{
		.container {width:100%;
	margin:auto;}
.image_bandeau {display:none;
}
.image_logo {display:block;
margin:auto;
max-width:100%;
}
#media {display:none;
}
.bandeau {display:none;
}
.bandeau1 {display:block;
margin:auto;
max-width:100%;
}
#infos_legales {
	text-align:center!important;
	font-family:Verdana, Geneva, sans-serif; 
	font-size:0.9em; 
	color:#FFF;
	padding-top:10px;
	padding-left:0px;
	height:auto;
}
#infos_legales .box2, #infos_legales .box2 p, #infos_legales .box2 a {display:block;
text-align:center!important;
margin:auto;
font-size:1em;
width:96%;
}
#infos_legales .box2d img {display:inline!important;
}
#popup {
	width:320px;
}
#popup img {
   max-width:100%;
	margin:auto;
}
	
#cssmenu {display:block;}
h1{
    font-size: 1.2em;
	margin:auto;
	color:#000;
	font-family:bolonewtregular, Muli, arial sans-serif;
	text-align:center;
	line-height:normal;
	vertical-align:middle;
}
	.box2 {
	margin: auto;
	text-align:justify;
	display:inline-block;
	width:100%;
	font-size:1em;
}
.box2d {text-align:center;
width:100%;
}
.box4, .box4 p, .box6, box6 p {width: 100%;
	margin:auto;
	display:block;}
#page_accueil #presentation .box2 li {
	margin: auto;
	text-align:justify;
	display:inline-block;
	width:100%;
	list-style-type:disc;
}
#apDiv2 {display:none!important;
}
#apDiv3 {display:block;
text-align:center;
font-family: 'Fjalla One', sans-serif;
color:#000;}
	
}
@media screen and (max-width:480px)
{ 
	.container {width:100%;
	margin:auto;}
.main-content {
    width: 96%;
	margin:auto;}
	.under-content, .under-content2 {
    width: 96%;
	margin:auto;}
.image_bandeau {display:none;}
.image_logo {display:block;
padding-top:2%;
margin:auto;
max-width:100%;}
#media {display:none;
}
#infos_legales {
	text-align:center!important;
	font-family:Verdana, Geneva, sans-serif; 
	font-size:0.9em; 
	color:#FFF;
	padding-top:10px;
	padding-left:0px;
	height:auto;
}
#infos_legales .box2, #infos_legales .box2 p, #infos_legales .box2 a {display:block;
text-align:center!important;
margin:auto;
font-size:1em;
width:96%;
}
#infos_legales .box2d img {display:inline!important;
}
.bandeau {display:none;
}
.bandeau1 {display:block;
margin:auto;
max-width:100%;
}
#cssmenu {display:block;
    margin-top: 3%;
}
.ddmenu {display:none;}
.box2g {background-image:none;
}
.box3 {width:96%;
}
.box2d {width:100%;
text-align:center;
}
.box3 img {max-width:96%;
margin:auto;
display:block;
}

#page_accueil #accueil2 .box1 p {
	font-size:0.9em;
    display: inline-block;
    line-height: 1.1em;
    vertical-align: middle;
    font-family: Poppins, sans-serif;
    padding-bottom: 1%;
.view {max-width:100%;
margin:auto;
display:block;
}
.view view-sixth {width:96%;
display:block;
margin:auto;
text-align:center;
}
.box10 p {font-size:0.8em;
line-height:1em;
}
.box11 p {font-size:0.7em;
line-height:0.8em;
}
.box10 img, .box11 img {
	max-width:100%;
	display:block;
margin:auto;
height:100%;
}
.box4, .box6, .box7, .box8, .box9, .box10, .box11 {max-width: 100%;
display:block;}
h1{
    font-size: 1.2em;
	margin:auto;
	color:#000;
	font-family:bolonewtregular, Muli, arial sans-serif;
	text-align:center;
	line-height:normal;
	vertical-align:middle;
}
.box2 p {
	margin: auto;
	text-align:justify;
display:inline-block;
font-family:Verdana, Geneva, sans-serif;
font-size:1.2em;
width:100%;
font-size:1em;
}
#page_accueil #menu2 .box6 p {
	margin: auto;
	text-align:justify;
display:inline-block;
width:100%;

}
#page_prestations_individuelles #groupes .box1 iframe, #page_photos #videos .box2 iframe  {
	padding:0% 1% 0% 1%;
    display:block;
    margin:auto;
    max-width:100%;
}
#page_prestations_individuelles #prestations .box2 img {
	display:block;
	margin:auto;
	max-width:100%;
}
#page_prestations_individuelles #prestations .box2 li {
	vertical-align:top;
	color:#000;
text-align:justify;
font-family:Poppins, sans-serif;
font-weight:normal;
font-size:1em;
line-height: 1.3em;
list-style:square;
list-style-position:inside;
}
#page_maquillage #maquillage .box4, #page_maquillage #stella .box4, #page_maquillage #prestations .box6, #page_accueil #menu2 .box6, #page_accueil #departements .box6 {display:block;
width:96%;
	margin:auto;
	display:block;
}
#page_maquillage #stella .box4 p, .under-content2 #groupes .box1 p {margin:auto;
display:block;
width:96%;
font-family:Poppins, sans-serif;
font-weight:normal;
font-size:0.9em;
line-height: 1.2em;
}
#page_reservation #reservation .box1 p {
	padding:1%;
	margin:auto;
display:block;
width:96%;
font-family:Poppins, sans-serif;
font-weight:normal;
font-size:0.9em;
line-height: 1.2em;
}
#page_maquillage_mariages #maquillage .box5 iframe {     
	display: block;
    margin: auto;
    max-width: 100%;
}
#apDiv2 {display:none!important;
}
#apDiv3 p {display:block;
text-align:center;
font-family: 'Fjalla One', sans-serif;}

#page_maquillage_mariages #mariage_oriental .box0 img {
	display: block;
    margin: auto;
    max-width: 100%;
}
#page_maquillage_mariages #mariages2 .box2g p, #page_maquillage_mariages #mariages2 .box2d p {
	text-align:left;
	font-size:0.9em;
}


div#intro_image {
    position: relative;
}
 
div#intro_slogan {
    position: absolute;
    top: 3%;
	text-align:center;
	font-family:'Capriola', sans-serif;
	font-size:0.8em;
    width: 100%;
	color:#000;
	line-height: 1em;
}
#page_maquillage_mariages #mariages .box1b p {
	line-height:1.3em;
}
	.box2g {
		border-right:none;

	}
	 #oModal .oModal img{
	  max-width:300px;
	  display:block;
  }
  .oModal > div {
  max-width: 320px!important;
  }

}