@import url(http://fonts.googleapis.com/css?family=Lato:100,400|Codystar:300,400|Poiret+One|Exo:100,200,400,200italic|Archivo+Black|Archivo+Narrow|Oxygen:400,300|Open+Sans|Open+Sans+Condensed:300|Raleway:400,300|Raleway+Dots|Exo+2);

html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html, body {
	line-height: 1;
	min-height:100%;
	background-color: #000000;
	font-family:Arial, Verdana, sans-serif;
}

body {

}

#winner{
	
	
	position: fixed;
	right: 40px;
	top: 203px;
	
}

#mainwrapper{
	width: 100%;
	height: 100%;
	top: 0;
}

#-home{
	position: fixed;
	top: 0;
	left: 0;
	width: 95%;
	height: 100%;
	min-width: 100%;
min-height: 100%;
	
	background-color: black;
	z-index: 1;
	
	

}

#-services{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 95%;
 
	min-width: 100%;
 z-index: 2;
	background-color: black;
	
	
	

}

.iaminfoboxmenu{
    
  position: relative;
   
    font-size: 12px;
    min-height: 50px;
    width: 890px;
    padding: 40px;
   
    
    
}

.shifter{
    
    position:relative;
    top:11px;
    left: -10px;
    cursor: pointer;
    
}

.iaminfobox{
    
    width: 950px;
    
    margin-top: 50px;
    left:50%;
    background-color: black; 
    color: #fff;
    position: fixed;
    z-index: 2000000;
    margin-left: -475px;
       border: #444 solid 1px;
    
}

.closebutton{
    
   position:absolute;
   right: 0;
   top:0;
   cursor: pointer;
       width: 50px;
    height: 50px;
    background-image:url(images/closebutton.png);
    
}

.shovedown{
    margin-bottom: 25px;
     font-family: 'Codystar','myFirstFont';
font-weight: 300;
font-size: 35px;
    
}

.infoinner{
    
    font-family:myFirstFont;
    padding-top: 17px;
        /* line-height: 17px !important; */
		line-height: 25px !important;
    
}





.iaminfoboxmenu ul li{
     
     display: inline;
    margin-right: 10px;
   
}

.iaminfoboxmenu ul li a{
    display: inline-block;
  
    border: #444 solid 1px;
    padding: 5px;
    font-size:12px;
     margin-bottom: 10px;
    
    
    
    
}




.hidden{
    
    display: none;
    
}

.iaminfoboxinfo{
    position: relative;
    margin:0 auto;
    font-size: 12px;
    height: 320px;
    overflow-y: scroll;
    background-color: #222;
    
    width: 850px;
    padding-top: 10px;
padding-left: 40px;
padding-right: 40px;
 font-family:myFirstFont;
 line-height: 17px;
 margin-bottom: 10px;
 
 
 

    
}

 ::-webkit-scrollbar {
    width: 12px;
    background-color: #222;
}
 
::-webkit-scrollbar-track {

    border-radius: 10px;
  
}
 
::-webkit-scrollbar-thumb {
    border-radius: 0;
      background-color: #fff;
   
}
 


#servicestitle{
    position: fixed;
        bottom:50px;
        right: 260px;
   z-index: 1000;
   color: #fff;
    
    
}
.servicesh1{
    
  font-family: 'Codystar','myFirstFont','myFirstFont'; font-weight: 300; 
  font-size: 35px;  
}

.currentinfo{
    
    background-color: white;
    color: #000;
    
}

#skincaretitle{
    position: fixed;
        bottom:50px;
        right: 260px;
   z-index: 1000;
   color: #fff;
    
    
}
.skincareh1{
    
  font-family: 'Codystar','myFirstFont'; font-weight: 300; 
  font-size: 35px;  
}


#-skincare{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 95%;
 
	min-width: 100%;
 z-index: 3;
	background-color: black;
	
	
	

}

#-cosmetics{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 95%;
 
	min-width: 100%;
 z-index: 4;
	background-color: black;
	
	
	

}

#-social{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 95%;
 
	min-width: 100%;
 z-index: 5;
	background-color: black;
	
	
	

}


#-booking{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 95%;
 
	min-width: 100%;
 z-index: 6;
	background-color: black;
	
	
	

}



#-contact{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 95%;
 
	min-width: 100%;
 z-index: 7;
	background-color: black;
	
	
	

}
#stage2ajax{
    
    width: 100%;
    height: 100%;
    z-index: 101;
    
    position: relative;
    display: none;
    
}


.stage1video{
position: fixed;
top: 0;
left: 0;
	
	background-color: #000000;
min-height: 100%;
width: 100%;
object-fit: contain;

	
}



#ajax1{
    
    
    position: fixed;
top: 0;
left: 0;
	object-fit: contain;
	background-color: transparent;
height: 100%;
min-width: 90%;
min-height: 100%;
width: auto;
    
}

.hidetext{
     
    display: none;
    
}

#stage2infos{
    
    position: fixed;
   width: 350px;
   
    z-index: 102;
   background: url('Test.png');
    color: #fff;
    top: 20px;
    height: 100%;
   left:0;
    display: none;
    
    padding: 30px;
    
    font-size: 12px;
    
}





.stage2video{
position: fixed;
top: 0;
left: 0;
	object-fit: contain;
	background-color: transparent;
min-height: 100%;
width: 100%;
 

	
}



.stage3video{
position: fixed;
top: 0;
left: 0;
	object-fit: contain;
	background-color: transparent;
min-height: 100%;
width: 100%;





	
}

.stage4video{
position: fixed;
top: 0;
left: 0;
	object-fit: contain;
	background-color: transparent;
min-height: 100%;
width: 100%;




	
}



.stage5video{
position: fixed;
top: 0;
left: 0;
	object-fit: contain;
	background-color: transparent;
min-height: 100%;
width: 100%;




	
}




.stage6video{
position: fixed;
top: 0;
left: 0;
	object-fit: contain;
	background-color: transparent;
min-height: 100%;
width: 100%;


	
}


.stage7video{
position: fixed;
top: 0;
left: 0;
	object-fit: contain;
	background-color: transparent;
min-height: 100%;
width: 100%;


	
}


#menu{
	width: 200px;
	height: 100%;
	background-color: black;
	position: fixed;
top: 0;
right: 0;
	z-index: 20;
	
	
	
}


@font-face
{
font-family: myFirstFont;
src: url(OpenSans-Light.ttf);
}


#trans{
	width: 10px;
	height: 100%;
	background-color: black;
	position: fixed;
top: 0;
right: 200px;
	z-index: 19;
	opacity: .3;
	
	
	
}

#scroll{
	position: fixed;
	bottom: 30px;
	right: 40px;
	z-index: 25;
	width: 118px;
	height: 59px;
	background-image:url(images/scroll3.png);
}
#controller{
	position: fixed; 
	z-index: 200;
	bottom: 20px;
	right: 230px;
	width: 200px;
	height: 33px;

		background-image:url(images/progres3.png);
}


#services li:hover{
background-color: #3e3e3e;
	
	}
	
	#makeup li:hover{
background-color: #3e3e3e;
	
	}
	
	#skincare li:hover{
background-color: #3e3e3e;
	
	}
	
	

#services ul{
	position: fixed;
	z-index: 202;
}

#makeup ul{
	position: fixed;
	z-index: 202;
}


#services li{
	
	
	text-align: center;
	
	width: 200px;
	font-family:myFirstFont;
	position: relative;
	z-index: 201;
	line-height: 20px;
	     font-family: 'Codystar','myFirstFont';
font-weight: 300;
	border-bottom: 1px solid #3e3e3e;
	padding-bottom: 5px;
}

#makeup li{
		border-bottom: 1px solid #3e3e3e;
	padding-bottom: 5px;
	text-align: center;
	
	width: 200px;
	font-family:myFirstFont;
	position: relative;
	z-index: 201;
	line-height: 20px;
	     font-family: 'Codystar','myFirstFont';
font-weight: 300;
}


#skincare li{
		border-bottom: 1px solid #3e3e3e;
	padding-bottom: 5px;
text-align: center;
		width: 200px;
	font-family:myFirstFont;
	position: relative;
	z-index: 201;
	line-height: 20px;
	     font-family: 'Codystar','myFirstFont';
font-weight: 300;
}

#skincare ul{
	position: fixed;
	z-index: 202;
}

ul{
	list-style-type: none;
}

a{
	text-decoration: none;
	color: #fff;
	font: normal normal 10px "myFirstFont", Arial, Helvetica, Geneva, sans-serif;
	
}

#menutext{
	position: fixed;
	right: 0;
	
	width: 200px;
	height: 100%;
	line-height: 50px;
	color: #ffffff;
	text-align: center;
	z-index: 21;
	
}

#social-tabs{

margin-left:3px;
}

#services{
	width: 200px;
	height: 500px;
	text-transform:uppercase;
	position: fixed;
	top: 200px;
	right: 0;
	z-index: 200;
}


#makeup{
	width: 200px;
	height: 500px;
	text-transform:uppercase;
	position: fixed;
	top: 200px;
	right: 0;
	z-index: 200;
}

#social{
	width: 200px;
	height: 500px;
	text-transform:uppercase;
	position: fixed;
	top: 200px;
	right: 0;
	z-index:300;

}


#bookingx{
	width: 160px;
	height: 500px;
	padding:20px;
	position: fixed;
	top: 200px;
	right: 0;
	z-index:400;
	text-align:center;
	 font-family:myFirstFont;
 line-height: 17px;
 font-size:11px;
 color:#fff;
 text-transform:uppercase;

}

#choice{
	width: 200px;
	height: 53px;
	background-color: #000; 
	margin-left: -200px;
	display: none;
	position: absolute;
	
}


#contactx{
text-transform:uppercase;
	width: 160px;
	height: 500px;
	padding:20px;
	position: fixed;
	top: 200px;
	right: 0;
	z-index:500;
	text-align:center;
	 font-family:myFirstFont;
 line-height: 17px; 
 font-size:11px;
 color:#fff;

}
#mainmenux{

width:400px;
height:30px;

position:fixed;
top:32px;
left:110px;
z-index:5000; 

}


#skincare{

	width: 200px;
	height: 500px;
	text-transform:uppercase;
	position: fixed;
	top: 200px;
	right: 0;
	z-index: 200;
}

#mute{
	width: 57px;
	height: 57px;
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 30;
	cursor: pointer;
}


.vol_on{

	background-image:url(images/vol_on.png);
	
}

.vol_off{

	background-image:url(images/vol_off.png);
	
}

#logo{
	width: 140px;
	height: 134px;
	position: fixed;
top: 40px;
	right:27px;
	z-index: 40;
}

p {
	margin:1em 0;
	line-height:1.1em;
}

q {
	font-style:italic;
	color:#333;
}

h1 {
	font-size:2.91em;
	margin:0;
}

h1 > small {
	text-align:right;
	display:inline-block;
	font-size:.71em;
	text-indent:15em;
	color:#444;
}

h2 {
	color:inherit;
	font-size:1.91em;
	margin:2em 0 1em 0;
}

h2:first-child {margin-top:0;}

h3 {
	color:#333;
	font-size:1.41em;
	margin:1em 0;
}

h4 {
	color:#444;
	font-size:1.11em;
	margin:1em 0;
}

#progress {
	height:2%;
	background:#444;
	bottom:0;
	z-index:200;
}

#scrollbar {
	position:fixed;
	left:0;
        top: 0;
	
	width:6px;
	background:#fff;
	 

	z-index:1000000;
	
}

#updown{
    
    position: fixed;
    z-index: 1000;
    color: #fff;
   width: 400px;
   height: 293px;
left: 50%;
 top: 10%;

 margin-left: -250px;
    text-align: center;
   line-height: 11px;
    font-size: 11px;
        
}




#updown img{
    
    position: relative;
    top: 7px
    
    
}

#counter{
    
    position: fixed;
    
    top: 0;
    min-width:20px;
    min-height: 20px;
    right: 0;
    background-color: red;
    z-index: 1000000;
    color: #fff;
    
}

#serviceslink{
    
    position: fixed;
    top: 100px;
    left: 15px;
    z-index: 100;
        
    
    
}

#bg1, #bg2, #bg3 {
	z-index:50;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(images/bubbles.png) repeat 0 0;
}

#bg2 {
	z-index:49;
	background-image:url(images/bubbles2.png);
}

#bg3 {
	z-index:48;
	background-image:url(images/bubbles3.png);
}

#intro {
	width:80%;
	left:50%;
	top:1em;
	margin-left:-40%;
	padding:2em;
	background:#fff;
	text-align:center;
	border-radius:1em;

	-webkit-transform-origin:0 0;
	-moz-transform-origin:0 0;
	-ms-transform-origin:0 0;
	-o-transform-origin:0 0;
	transform-origin:0 0;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: bsrder-box;
	box-sizing: border-box;
}

#intro .arrows {
	font-size:2em;
	color:#09f;
}

#transform {
	width:70%;
	left:50%;
	top:20%;
	margin-left:-35%;
	text-align:center;
	font-size:150%;
        .transform-origin(50%, 50%);
}

#properties {
	width:100%;
	height:100%;
	padding-top:10%;
	text-align:center;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#easing_wrapper {
	width:100%;
	height:100%;
}

#easing {
	top:10%;
	width:50%;
	z-index:101;
}

.drop {
	background:#09f;
	font-weight:bold;
	padding:1em;
}




#download {
	width:80%;
	left:10%;
	height:80%;
	padding:3em;
	border:0 solid #222;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.twitter-share-button, .twitter-follow-button {
	vertical-align:middle;
}


p{
    
    font-family:myFirstFont;
    line-height: 17px !important;
    
}
p b{
    font-weight: bold;
    text-decoration: underline;
    font-family:myFirstFont;
    line-height: 17px !important;
    
}

.iaminfobox h3 {
	color:#fff;
	/* margin:0.5em 0; */
}
.iaminfobox p {
	/* margin:1.5em 0; */
}
.cleaner {
	width:100%;
	height:1px;
	clear:both;
}

.showli{
	
	display:none;
		
}

@media only screen and (max-height : 900px) {
	
	#social-tabs{
	
	height: 300px !important;
	
}
	
	


#skincare{

	width: 200px;
	height: 500px;
	text-transform:uppercase;
	position: fixed;
	top: 180px;
	right: 0;
	z-index: 200;
}
	

#services{
	width: 200px;
	height: 500px;
	text-transform:uppercase;
	position: fixed;
	top: 180px;
	right: 0;
	z-index: 200;

	
}


#makeup{
	width: 200px;
	height: 500px;
	text-transform:uppercase;
	position: fixed;
	top: 180px;
	right: 0;
	z-index: 200;
	
}

#social{
	width: 200px;
	height: 500px;
	text-transform:uppercase;
	position: fixed;
	top: 180px;
	right: 0;
	z-index:300;


}
	
	
#services li{
	
	
	text-align: center;
	
	width: 200px;
	font-family:myFirstFont;
	position: relative;
	z-index: 201;
	line-height: 13px;
	     font-family: 'Codystar','myFirstFont';
font-weight: 300;
	border-bottom: 1px solid #3e3e3e;
	padding-bottom: 2px;
}

#makeup li{
		border-bottom: 1px solid #3e3e3e;
	padding-bottom: 2px;
	text-align: center;
	
	width: 200px;
	font-family:myFirstFont;
	position: relative;
	z-index: 201;
	line-height: 13px;
	     font-family: 'Codystar','myFirstFont';
font-weight: 300;
}
 

#skincare li{
		border-bottom: 1px solid #3e3e3e;
	padding-bottom: 2px;
text-align: center;
		width: 200px;
	font-family:myFirstFont;
	position: relative;
	z-index: 201;
	line-height: 13px;
	     font-family: 'Codystar','myFirstFont';
font-weight: 300;
}

}