/*=====================================================================*   Woo v1.0 Layout Stylesheet*   url: styleshout.com*   05-02-2014=====================================================================   TOC:   a. General and Common Styles   b. Header Styles   c. Hero Section   d. perfumelists/ Old features Section   e. how to order/ old agent Section   f. Screenshots Section   g. Call To Action Section   h. Testimonials Section   i. Subscribe Section   j. Footer   k. lightbox   todo: check bug in mobile z-index===================================================================== *//* ------------------------------------------------------------------ *//* a. General and Common Styles/* ------------------------------------------------------------------ */body { background: #181d21; }.section-head {  	padding: 0 4%;   text-align: center;}.section-head h1 {   font: 20px/36px 'montserrat-bold', sans-serif;   color: #333;   text-transform: uppercase;   letter-spacing: 1.5px;   margin-bottom: 12px;}/* for css animations */.show { opacity: 1; }.js #mc_embed_signup input[type="email"],.js #mc_embed_signup input[type="submit"] {   opacity: 0;}/* ------------------------------------------------------------------ *//* b. Header Styles/* ------------------------------------------------------------------ */header {   height: 84px;   width: 100%;   background: #13171B;   position: fixed;   left: 0;   top: 0;   z-index: 990;}/* header logo */header .logo {   display: block ;   margin-left:auto;   margin-right:auto ;   margin-top: 5px ;    width: auto;    height: 5px;   z-index: 991;    /* add position relative since z-index only applies to     elements that have been given an explicit position */   position: relative; }header .logo a {   display: block;   margin-left:auto ;	padding: 0;	border: none;	outline: none;   width: 348px;   height: 19px;   }/* header social */header .header-social {	font-size: 20px;   font-weight: normal;   line-height: 54px;   color: #424a56;   margin: 0 0px 0 0;   padding: 0;   float: left;}header .header-social li {   display: inline-block;   margin-left: 0px;}header .header-social li a { color: #fff; }header .header-social li a:hover { color: #11ABB0; }/* primary navigation--------------------------------------------------------------------- */#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {	 margin: 0;	 padding: 0;	 border: none;	 outline: none;}/* nav-wrap */#nav-wrap {   font: 11px 'montserrat-regular', sans-serif;   text-transform: uppercase;   letter-spacing: 1.0px;   float: left;}/* hide toggle button */#nav-wrap > a { display: none; }ul#nav {   min-height: 54px;   width: auto;   /* left align the menu */   text-align: left;}ul#nav li {   position: relative;     list-style: none;   height: 54px;   display: inline-block;}/* Links */ul#nav li a {   /* 8px padding top + 8px padding bottom + 38px line-height = 54px */   display: inline-block;   padding: 8px 8px;   line-height: 38px;	text-decoration: none;   text-align: left;   color: #58687A;	-webkit-transition: color .2s ease-in-out;	-moz-transition: color .2s ease-in-out;	-o-transition: color .2s ease-in-out;	-ms-transition: color .2s ease-in-out;	transition: color .2s ease-in-out;}ul#nav li a:hover { color: #fff; }ul#nav li a:active { background-color: transparent !important; }ul#nav li.current a { color: #fff; }/* ------------------------------------------------------------------ *//* c. Hero Section/* ------------------------------------------------------------------ */#hero {   padding-top: 15px;   background: #23292f url(img/hero-bg.png);background-size: 10px 10px;   overflow: hidden;}/* For high-res devices */@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {	#hero { 		background: #23292f url(img/hero-bg_@2X.png); 		background-size: 10px 10px;	}  }#hero .row { max-width: 1040px; }/* Hero Text */.hero-text {	color: #676e73;   width: 83%;   text-align: center;   margin: 54px auto 24px auto;}.hero-text h1 {   font: 40px/1.2em 'montserrat-regular', sans-serif;    color: #fff;   padding: 0;   margin: 0;   text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);}.hero-text h1 span,.hero-text a { color: #11ABB0; }.hero-text p {   font: 16px/30px 'opensans-regular', sans-serif;   padding: 0;   margin: 12px 8% 0;   text-shadow: 0px 1px 2px rgba(0, 0, 0, .2);}/* Hero Image */.hero-image {   width: 100%;   margin: 0 auto;}.hero-image img {   vertical-align: bottom;   display: block;}/* Hero CTA Buttons */#hero .buttons {   text-align: center;   margin: 0 0 18px 0;}#hero .buttons .button {   font: 14px/24px 'montserrat-bold', sans-serif;   text-transform : uppercase;   letter-spacing: 2px;}#hero .buttons .trial {   background: #f64b39;   margin-right: 30px;   -webkit-animation-delay: 10s;      -moz-animation-delay: 10s;       -ms-animation-delay: 10s;        -o-animation-delay: 10s;   -webkit-animation-iteration-count: 3;      -moz-animation-iteration-count: 3;  }#hero .buttons .trial:hover { background: #F86A5A; }#hero .buttons .learn-more {}/* ------------------------------------------------------------------ *//* d. perfumelists Section/* ------------------------------------------------------------------ */#perfumelists {   background: #FFFFFF;   padding-top: 1px;   padding-bottom: 5px;   overflow: hidden;}#perfumelists .feature {   margin-top: 5px;   margin-bottom: 5px;}#perfumelists .right {   padding-left: 32px;   float: right;   }#perfumelists .left {   padding-right: 32px;   float: left;   }#perfumelists h3 {   font: 16px/24px 'montserrat-bold', sans-serif;   text-transform: uppercase;   letter-spacing: 1px;   color: #222;}.fluid-video-wrapper { margin-top: 5px; }/*----------------------------------------------*//*	e. agent Section/*----------------------------------------------*/#agent {	background: #FFFFFF;   padding-top: 1px;   padding-bottom: 5px;      border-top: 1px solid #F0F0F0;   border-bottom: 1px solid #F0F0F0;   text-align: center;}#agent .price-block {   background: #fff;   border: 1px solid #E6E6E6;   text-align: center;   margin-bottom: 5px;}.plan-title {  	font: 15px/30px 'montserrat-regular', sans-serif;  	padding: 30px 20px 6px 20px;   margin-bottom: 0px;  	text-align: center;   text-transform: uppercase;   letter-spacing: 2px;}.plan-title .fa {  	display: block;  	margin-bottom: 6px;   font-size: 26px;}.plan-price {	font-family: 'montserrat-bold', sans-serif;   font-size: 30px;   color: #333;	padding: 6px 30px 6px 30px;   margin-bottom: 0;	text-align: center;   letter-spacing: .5px;}.plan-price span {	font-family: 'opensans-light', sans-serif;	font-size: 15px;	color: #999;		display: block;	margin-top: 0;}ul.perfumelists {   margin: 12px 0 0 0;   list-style: none;}ul.perfumelists li {   line-height: 39px;   margin-bottom: 0;}ul.perfumelists li:nth-child(odd) { }ul.perfumelists li:nth-child(even) { }.plan-sign-up {  	padding: 24px 15px;   margin: 0;   text-align: center;}.plan-sign-up .button {   font: 13px/24px 'montserrat-bold', sans-serif;   text-transform: uppercase;   letter-spacing: 2px;}/* ------------------------------------------------------------------ *//* c. Screenshots/* ------------------------------------------------------------------ */#screenshots {   background: #fff url(img/grey.png);   padding-top: 5px;   padding-bottom: 5px;}/* For high-res devices */@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {   #screenshots {      background: #fff url(img/grey_@2X.png);      background-size: 397px 322px;   }}/* Portfolio Content */#screenshots-wrapper .columns { padding: 0; }.item .item-wrap {   background: #fff;   overflow: hidden;   position: relative;   -webkit-transition: all 0.3s ease-in-out;	-moz-transition: all 0.3s ease-in-out;	-o-transition: all 0.3s ease-in-out;	-ms-transition: all 0.3s ease-in-out;	transition: all 0.3s ease-in-out;}.item .item-wrap a {   display: block;   cursor: pointer;}/* overlay */.item .item-wrap .overlay {   position: absolute;   left: 0;   top: 0;   width: 100%;   height: 100%;	opacity: 0;	-moz-opacity: 0;	filter:alpha(opacity=0);   -webkit-transition: opacity 0.3s ease-in-out;	-moz-transition: opacity 0.3s ease-in-out;	-o-transition: opacity 0.3s ease-in-out;	transition: opacity 0.3s ease-in-out;   background: url(img/overlay-bg.png) repeat;}.item .item-wrap .link-icon {   display: block;   color: #fff;   height: 30px;   width: 30px;   font-size: 18px;   line-height: 30px;   text-align: center;   opacity: 0;	-moz-opacity: 0;	filter:alpha(opacity=0);   -webkit-transition: opacity 0.3s ease-in-out;	-moz-transition: opacity 0.3s ease-in-out;	-o-transition: opacity 0.3s ease-in-out;	transition: opacity 0.3s ease-in-out;   position: absolute;   top: 50%;   left: 50%;   margin-left: -15px;   margin-top: -15px;}.item .item-wrap img {   vertical-align: bottom;   -webkit-transition: all 0.3s ease-out;	-moz-transition: all 0.3s ease-out;	-o-transition: all 0.3s ease-out;	-ms-transition: all 0.3s ease-out;	transition: all 0.3s ease-out;}/* on hover */.item:hover .overlay {	opacity: 1;	-moz-opacity: 1;	filter:alpha(opacity=100);}.item:hover .link-icon {   opacity: 1;	-moz-opacity: 1;	filter:alpha(opacity=100);}.item:hover .item-wrap img {   -moz-transform: scale(1.2);	-o-transform: scale(1.2);	-webkit-transform: scale(1.2);	transform: scale(1.2);}/* ------------------------------------------------------------------ *//* g. howroorder / old Call To Action Section/* ------------------------------------------------------------------ */#howtoorder{  background: #FFFFFF;   padding-top: 15px;   padding-bottom: 15px;}#howtoorderh1 {   font: 18px/24px 'montserrat-bold', sans-serif;   text-transform: uppercase;   letter-spacing: 3px;   color: #fff;}#howtoorderh1 span { display: none; }#howtoorder.header-col h1:before {   font-family: 'FontAwesome';   content: "\f093";	padding-right: 18px;	padding-top: 6px;	font-size: 72px;   line-height: 72px;   text-align: center;   float: right;   color: #EBEEEE;  }#howtoorder.action { margin-top: 5px; }#howtoorder.action .button { text-align: center; }#howtoorderh2 {   font: 28px/36px 'montserrat-bold', sans-serif;   color: #EBEEEE;   margin-bottom: 12px;}#howtoorderh2 a {   color: inherit;}#howtoorderp {   color: #697B8B;    font-size: 17px;    padding-right: 5px; }#howtoorderp span {	font-family: 'opensans-semibold', sans-serif; 	color: #A9B5C0;}/* ------------------------------------------------------------------/* h. Testimonials/* ------------------------------------------------------------------ */#testimonials {   background: #10999E url(img/escheresque.png);   padding-top: 112px;   padding-bottom: 66px;   position: relative;   min-height: 198px;   width: 100%;   overflow: hidden;   text-align: center;}/* For high-res devices */@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {	#testimonials {		background: #10999E url(img/escheresque_@2X.png);		background-size: 46px 29px;	}  }#testimonials .quote-left, #testimonials .quote-right {   position: absolute;   top: 50%;   color: #fff;   font-size: 40px;   margin-top: -25px;}#testimonials .quote-left { left: 5%; }#testimonials .quote-right { right: 5%; }#testimonials .text-container {   width: 86%;   margin: 0 auto;}#testimonials h1 {   font: 16px/24px 'montserrat-bold', sans-serif;   color: #6AECF0;   text-transform: uppercase;   letter-spacing: 2px;      margin-bottom: 36px;}/*	Blockquotes */#testimonials blockquote {   margin: 0 0px 30px 0px;   padding-left: 0;   position: relative;   }#testimonials blockquote:before { content: none; }#testimonials blockquote p {   font-family: 'opensans-semibold', sans-serif;   font-style: normal;   color: #fff;   padding: 0;   font-size: 26px;   line-height: 42px;   }#testimonials blockquote cite {   display: block;   font-size: 12px;   font-style: normal;   line-height: 18px;   color: #fff;}#testimonials blockquote cite:before { content: "\2014 \0020"; }#testimonials blockquote cite a,#testimonials blockquote cite a:visited { color: #8B9798; border: none }/* Flex Slider/* ------------------------------------------------------------------ *//* Reset */.flexslider a:active,.flexslider a:focus  { outline: none; }.slides,.flex-control-nav,.flex-direction-nav { margin: 0; padding: 0; list-style: none; }.slides li { margin: 0; padding: 0;}/* Necessary Styles */.flexslider {   position: relative;   zoom: 1;   margin: 0;   padding: 0;}.flexslider .slides { zoom: 1; }.flexslider .slides > li { position: relative; }/* Hide the slides before the JS is loaded. Avoids image jumping */.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }/* Suggested container for slide animation setups. Can replace this with your own */.flex-container { zoom: 1; position: relative; }/* Clearfix for .slides */.slides:before,.slides:after {   content: " ";   display: table;}.slides:after {   clear: both;}/* No JavaScript Fallback *//* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */.no-js .slides > li:first-child { display: block; }/* Slider Styles */.slides { zoom: 1; }.slides > li {   /*margin-right: 5px; */   overflow: hidden;}/* Control Nav */.flex-control-nav {   width: 100%;   text-align: center;}.flex-control-nav li {   margin: 0 6px;   display: inline-block;   zoom: 1;   *display: inline;}.flex-control-paging li a {   width: 12px;   height: 12px;   display: block;   background: #ddd;   background: rgba(255, 255, 255, .3);   cursor: pointer;   text-indent: -9999px;   border-radius: 20px;   box-shadow: inset 0 0 3px rgba(255, 255, 255, .3);}.flex-control-paging li a:hover {    background: #CCC;    background: rgba(255, 255, 255, .7);}.flex-control-paging li a.flex-active {    background: #fff;    background: rgba(255, 255, 255, .9);    cursor: default;}/* ------------------------------------------------------------------ *//* i. Subscribe Section/* ------------------------------------------------------------------ */#subscribe {   background: #FFFFFF;   padding-top: 96px;   padding-bottom: 66px;   overflow: hidden;   text-align: center;}#subscribe a, #subscribe a:visited  { color: #fff; }#subscribe a:hover, #subscribe a:focus { color: #11ABB0; }#subscribe h1 { color: #fff; }#subscribe p {   color: #7A7A7A;   text-align: center;   padding: 0;}/* mailchimp signup form */#mc_embed_signup {   background: none;   clear: both;   display: block;   margin: 6px auto 30px auto;   width: 70%;  	text-align: center;   }#mc_embed_signup:before,#mc_embed_signup:after {    content: " ";    display: table;}#mc_embed_signup:after {    clear: both;}#mc_embed_signup input[type="submit"] {   float: right;   height: 60px;   margin: 0;   padding: 0 20px;   font-size: 16px;   line-height: 60px;   width: 47%;  }#mc_embed_signup input[type="email"] {   display: inline;   float: left;   height: 60px;   margin: 0;   padding: 18px 20px;   font-size: 18px;   line-height: 24px;   font-family: 'montserrat-regular',sans-serif;   width: 47%;     text-align: center;}/* ------------------------------------------------------------------ *//* j. Footer/* ------------------------------------------------------------------ */footer {   padding-top: 24px;   margin-bottom: 60px;   background: #FFFFFF;   font-size: 13px;   line-height: 24px;   position: relative;   }footer a, footer a:visited { color: #0A6567; }footer a:hover, footer a:focus { color: #ff0000; }footer .info { padding-right: 90px; }footer .footer-logo a {   display: block;   margin-bottom: 12px;   margin-top: 12px;   margin-left: 0px;}footer .footer-logo a img {   height: 24px;   width: 92px;}footer .right-cols .columns {   padding-right: 1px;   padding-left: 0px;   width: 33.33333%; ;}footer .right-cols .columns p { margin-bottom: 6px; }footer h3 {   font: 13px/24px 'opensans-semibold', sans-serif;   margin-bottom: 0;   font-weight: normal;   color: #000000;   text-transform: uppercase;   letter-spacing: 1px;}footer h3:before {   font-family: 'FontAwesome';   	margin: 0 0 6px 3px;	font-size: 30px;   line-height: 48px;   text-align: left;   color: #738291;   display: block;}footer h3.address:before { content: "\f041"; }footer h3.social:before { content: "\f0c0"; }footer h3.contact:before { content: "\f0e0"; }footer ul {   margin: 0;   padding: 0;}footer ul li {   margin: 0;   line-height: 24px;}footer ul li a,footer ul li a:visited { color: #3c4753; }footer a:hover, footer a:focus { color: #ff0000; }/* copyright */footer .copyright {   margin: 0;   padding: 0 18px;   clear: both;}/* Go To Top Button */#go-top {	position: absolute;	top: -24px;   left: 50%;   margin-left: -30px;   text-align: center;   z-index: 889;}#go-top a {	text-decoration: none;	border: 0 none;	display: block;	width: 60px;	height: 60px;	background: #525252;	-webkit-transition: all 0.2s ease-in-out;   -moz-transition: all 0.2s ease-in-out;   -o-transition: all 0.2s ease-in-out;   -ms-transition: all 0.2s ease-in-out;   transition: all 0.2s ease-in-out;   color: #fff;   font-size: 21px;   line-height: 60px; 	border-radius: 100%;}#go-top a:hover { background: #ff0000; }/* ------------------------------------------------------------------ *//* k. lightbox/* ------------------------------------------------------------------ */#imagelightbox {   cursor: pointer;   position: fixed;   z-index: 995;   -ms-touch-action: none;   touch-action: none;   -webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */   -moz-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */   box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */}/* activity indication */#imagelightbox-loading,#imagelightbox-loading div { border-radius: 50%; }#imagelightbox-loading {   width: 2.5em; /* 40 */   height: 2.5em; /* 40 */   background-color: #444;   background-color: rgba( 0, 0, 0, .5 );   position: fixed;   z-index: 999;   top: 50%;   left: 50%;   padding: 0.625em; /* 10 */   margin: -1.25em 0 0 -1.25em; /* 20 */   -webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */   -moz-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */   box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */}#imagelightbox-loading div {   width: 1.25em; /* 20 */   height: 1.25em; /* 20 */   background-color: #fff;   -webkit-animation: imagelightbox-loading .5s ease infinite;   -moz-animation: imagelightbox-loading .5s ease infinite;   -o-animation: imagelightbox-loading .5s ease infinite;   animation: imagelightbox-loading .5s ease infinite;}@-webkit-keyframes imagelightbox-loading {	from { opacity: .5; -webkit-transform: scale( .75 ); }	50% { opacity: 1; -webkit-transform: scale( 1 ); }	to { opacity: .5; -webkit-transform: scale( .75 ); }}   @-moz-keyframes imagelightbox-loading {	from { opacity: .5; -moz-transform: scale( .75 ); }	50% { opacity: 1; -moz-transform: scale( 1 ); }	to { opacity: .5; -moz-transform: scale( .75 ); }}@-o-keyframes imagelightbox-loading {	from { opacity: .5; -o-transform: scale( .75 ); }	50% { opacity: 1; -o-transform: scale( 1 ); }	to { opacity: .5; -o-transform: scale( .75 ); }}@keyframes imagelightbox-loading {	from { opacity: .5; transform: scale( .75 ); }	50% { opacity: 1; transform: scale( 1 ); }	to { opacity: .5; transform: scale( .75 ); }}/* lightbox overlay */#imagelightbox-overlay {   background-color: #383838;   background-color: rgba( 0, 0, 0, .8 );   position: fixed;   z-index: 994;   top: 0;   right: 0;   bottom: 0;   left: 0;}/* close button */#imagelightbox-close {	     position: fixed;   z-index: 999;   top: 2.5em; /* 40 */   right: 2.5em; /* 40 */ }#imagelightbox-close i {	  	display: block;	background: #fff;	padding: 10px;	border-radius: 100%;	-webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */	-moz-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */	box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */}a#imagelightbox-close { color: #333; }a#imagelightbox-close:hover, a#imagelightbox-close:focus { color: #11ABB0; }/* lightbox caption */#imagelightbox-caption {	text-align: center;	color: #fff;	background-color: #000;	position: fixed;	z-index: 999;	left: 0;	right: 0;	bottom: 0;	padding: 0.625em; /* 10 */}#imagelightbox-loading,#imagelightbox-overlay,#imagelightbox-close,#imagelightbox-caption {	-webkit-animation: fade-in .25s linear;	-moz-animation: fade-in .25s linear;	-o-animation: fade-in .25s linear;	animation: fade-in .25s linear;}@-webkit-keyframes fade-in {	from { opacity: 0; }	to { opacity: 1; }}@-moz-keyframes fade-in {	from { opacity: 0; }	to { opacity: 1; }}@-o-keyframes fade-in {	from { opacity: 0; }	to { opacity: 1; }}@keyframes fade-in {	from { opacity: 0; }	to { opacity: 1; }}@media only screen and (max-width: 41.250em) { /* 660 */	#container	{ width: 100%; }	#imagelightbox-close	{		top: 1.25em; /* 20 */		right: 1.25em; /* 20 */	}}