@charset "utf-8";
/* CSS Document */

/* GENERAL COPY STYLES */

h1 { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:300%; color:#ffffff; line-height:100%; }

/* GENERAL PAGE STYLES */

html { height:100%; }

hr { color:#CCC 1px solid; }

body { background:#7a7a7a; overflow-x:hidden; overflow-y:hidden; margin:0; width: 100%; height: 100%; text-align:center; }

.clearfix {display: inline-block;} 

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

 .gradient{
    /* fallback (Opera) */
    background: #eeeff0;
	background-repeat:no-repeat;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #ffffff, #eeeff0);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                top, bottom, from(#ffffff), to(#eeeff0));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#ffffff', EndColorStr='#eeeff0', GradientType=0);
  }

image { border:none; }

.float-right { float:right; border:none; margin-left:15px; }

.float-left { float:left; margin-right:15px;  }

#pagewrap{ position:relative; background:url(images/home-gradient.png); background-repeat:repeat-x; top:0; left:0; width:100%; height:100%; margin:0; text-align:center; }

#container{ position:relative; height:auto; width:90%; margin-left:auto; margin-right:auto; padding-bottom:25px; vertical-align:top; text-align:left; margin-bottom:2%; }

.shadow { 	margin: 10px;	background-color: rgb(0,48,61); /* Needed for IEs */	-moz-box-shadow: 2px 1px  2px rgba(0,48,61,0.6); -webkit-box-shadow: 2px 1px 2px rgba(0,48,61,0.6);	box-shadow: 2px 1px 2px rgba(0,48,61,0.6);	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";	zoom: 1; }

.shadow .content {	position: relative; /* This protects the inner element from being blurred */	padding: 100px;	background-color: #DDD; }



/* NAVIGATION */

#navigation { position:fixed; top:0;  width:70%; margin:1% 5% 5% 12%; height:13%;  padding-top:30px; z-index:3000; }

a.nav:link, a.nav:hover, a.nav:visited, a.nav:active { font-family:dosis, sans-serif; font-size:16px; font-style:normal; font-weight:400; text-decoration:none; color:#ffffff;     line-height:40px; padding:0 12px; margin:0 12px; }

#uppermenu { position:relative; width:auto; height:40px; padding-top:2px; margin:20px 7% 0 auto; text-align:center; float: right; }


#home-body { position:relative; width:100%; height:78%; top:9%; background:url(images/home-bg.png); background-size:contain; background-position:125% 5%; background-repeat:no-repeat; }

#home-image { position:relative; width:50%; height:78%; float:right; margin-right:3%; margin-top:-5%; vertical-align:bottom; }

#home-text { position:relative; width:40%; height:78%; margin-left:3%; height:auto; text-align:left; margin-top:8%;  }

#home-header { position:relative; text-align:right; margin-left:-5%; width:100%; margin-top:5%; margin-right:20%; }

#home-paragraph { position:relative; text-align:justify; width:55%; max-height:50%; margin-left:39%;  font-family:dosis, sans-serif; font-size:16px; color:#FFF; margin-top:-2%;  overflow:auto; padding-right:5px; }

#footer { position:relative; width:100%; height:15%; top:8%; background:#000000; font-family:dosis, sans serif; font-size:18px; font-weight:400; line-height:10px; color:#ffffff; padding-top:10px; }

#small-logos { position:relative; width:30%; height:62px; float:left; margin-top:0; margin-left:17%; z-index:3000; text-align:left; }

/* About */

#about-body { position:relative; width:100%; height:78%; top:9%; background:url(images/about-bg.png); background-size:contain; background-position:22% 50%; background-repeat:no-repeat; }

#about-text { position:relative; width:40%; height:78%; margin-left:30%; height:auto; text-align:left; margin-top:8%;  }

#about-header { position:relative; text-align:left; margin-left:57%; width:100%; margin-top:5%; margin-right:5%; }

#about-paragraph { position:relative; text-align:justify; width:66%; max-height:50%; margin-left:58%;  font-family:dosis, sans-serif; font-size:16px; color:#FFF; margin-top:-2%;  overflow:auto; padding-right:5px; }

/* Product Intro */

#line-body { position:relative; width:100%; height:78%; top:9%; background:url(images/line-bg.png); background-size:contain; background-position:85% 5%; background-repeat:no-repeat; }

#home-image { position:relative; width:50%; height:78%; float:right; margin-right:3%; margin-top:-5%; vertical-align:bottom; }

#line-text { position:relative; width:40%; height:78%; margin-left:3%; height:auto; text-align:left; margin-top:8%;  }

#line-header { position:relative; text-align:right; margin-left:-5%; width:100%; margin-top:5%; margin-right:20%; }

#line-paragraph { position:relative; text-align:justify; width:57%; max-height:35%; margin-left:43%;  font-family:dosis, sans-serif; font-size:16px; color:#FFF; margin-top:-2%;  overflow:auto; padding-right:5px; }


/* Products */

#products-body-eye { position:relative; width:100%; height:78%; top:9%; background:url(images/products-bg-eye.png); background-size:contain; background-position:85% 5%; background-repeat:no-repeat; }

#products-body-cleanser { position:relative; width:100%; height:78%; top:9%; background:url(images/products-bg-cleanser.png); background-size:contain; background-position:85% 5%; background-repeat:no-repeat; }

#products-body-toner { position:relative; width:100%; height:78%; top:9%; background:url(images/products-bg-toner.png); background-size:contain; background-position:85% 5%; background-repeat:no-repeat; }

#products-body-scrub { position:relative; width:100%; height:78%; top:9%; background:url(images/products-bg-scrub.png); background-size:contain; background-position:85% 5%; background-repeat:no-repeat; }

#products-body { position:relative; width:100%; height:78%; top:9%;  }

#products-menu { position:relative; min-width:14%; height:40%;  margin-top:2%; margin-left:8%; text-align:left; font-family:dosis, sans-serif; font-size:16px; color:#FFF; display:inline-block;  }

#products-text { position:relative; width:50%; height:60%; text-align:left; margin-top:2%; display:inline-block;  margin-right:10%; background:url(images/products-bg-day.png); background-size:contain; background-position:100% 50%; background-repeat:no-repeat;  }

#products-text-night { position:relative; width:50%; height:60%; text-align:left; margin-top:2%; display:inline-block; margin-right:10%; background:url(images/products-bg-night.png); background-size:contain; background-position:100% 50%; background-repeat:no-repeat;  }

#products-text-eye { position:relative; width:50%; height:60%; text-align:left; margin-top:2%; display:inline-block; margin-right:10%;   }

#products-image { position:relative; width:50%; height:78%; float:right; margin-right:3%; margin-top:-5%; vertical-align:bottom; }



#products-header { position:relative; text-align:right; margin-left:1%; width:40%; margin-top:8%; }

#products-paragraph { position:relative; text-align:justify; width:40%; max-height:70%; margin-left:5%;  font-family:dosis, sans-serif; font-size:16px; color:#FFF; margin-top:0;  overflow:auto; padding-right:5px; }

#products-paragraph-eye { position:relative; text-align:justify; width:60%; max-height:70%; margin-left:5%;  font-family:dosis, sans-serif; font-size:16px; color:#FFF; margin-top:0;  overflow:auto; padding-right:5px; }




/* Contact */

#contact-body { position:relative; width:100%; height:78%; top:9%; background:url(images/contact-bg.png); background-size:contain; background-position:22% 50%; background-repeat:no-repeat; }

#about-text { position:relative; width:40%; height:78%; margin-left:30%; height:auto; text-align:left; margin-top:8%;  }

#about-header { position:relative; text-align:left; margin-left:57%; width:100%; margin-top:5%; margin-right:5%; }

#about-paragraph { position:relative; text-align:justify; width:66%; max-height:50%; margin-left:58%;  font-family:dosis, sans-serif; font-size:16px; color:#FFF; margin-top:-2%;  overflow:auto; padding-right:5px; }
