/*
=====================================================================
*   Woo v1.0 Layout Stylesheet
*   url: styleshout.com
*   05-02-2014
=====================================================================

   TOC:
   a. General and Common Styles
   b. Header Styles
   c. Hero Section
   d. Features Section
   e. Pricing 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; font-size: 20px;}

h2 {font-size: 34px; text-align: center}

li {list-style: none;}

.section-head {
  	padding-top: 2%;
   text-align: center;
}
.section-head h1 {
   font-size: 20px/36px;
   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: 60px;
   width: 100%;
   background: #000;
   position: fixed;
   right: 0;
   top: 0;
   z-index: 990;
}

/* header logo */
header .logo {
   margin-left: 36px;
   margin-right: 20px;
   margin-top: 10px;
   float: left;
   width: auto; 
   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: 0;
	padding: 0;
	border: none;
	outline: none;
   width: 100px;
   height: 18px;   
}

/* header social */
header .header-social {
	font-size: 20px;
   font-weight: normal;
   line-height: 54px;
   color: #424a56;
   margin: 0 10px 0 0;
   padding: 0;
   float: right;
}
header .header-social li {
   display: inline-block;
   margin-right: 20px;
}
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-size: 16px;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   float: right;
}

/* hide toggle button */
#nav-wrap > a { display: none; }

ul#nav {
   min-height: 60px;
   width: auto;
	margin-right: 10px;
	
   /* left align the menu */
   text-align: right;
}
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: 44px;
	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 {

   background: #23292f url(img/hero-bg.png);
   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: 200px 200px;
	}
  
}

#hero .row { max-width: 1040px; }

/* Hero Text */
.hero-text {
	color: #676e73;
	width: 600px;
	text-align: center;
	position: absolute;
	top: 200px;
	right: 30px;
	background: none repeat scroll 0% 0% #000;
	opacity: 0.55;
	padding-bottom: 10px;
}
.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: 20px/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. Services Section
/* ------------------------------------------------------------------ */
.col-md-3 {
    width: 25%;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
	float: right;	
}

#service-1 {
    background-color: #1ABC9C;
}
#service-2 {
    background-color: #E67E22;
}
#service-3 {
    background-color: #3498DB;
}
#service-4 {
    background-color: #2ECC71;
}
.service-item {
    position: relative;
    color: #FFF;
    text-align: center;
	font-size: 16px;
    margin-bottom: 30px;
}
.service-item:hover .service-content {
    opacity: 1;
    visibility: visible;
}
.service-item .service-content {
    padding: 10px;
    width: 100%;
    height: 100%;
}


.service-item .service-content .inner-service {
    padding: 20px;
}
.service-item .service-content h3 {
    font-size: 18px;
    text-transform: uppercase;
    color: #FFF;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 1px solid #FFF;
    margin-bottom: 15px;
}


/* ------------------------------------------------------------------ */
/* d. specialize Section
/* ------------------------------------------------------------------ */

#specialize {
   background: #fff;
   padding-top: 96px;
   padding-bottom: 78px;
   overflow: hidden;
   font-size: 18px;
   line-height: 200%
}
#specialize .feature {
   margin-top: 30px;
   margin-bottom: 54px;
}
#specialize .right {
   padding-left: 32px;
   float: right;   
}
#specialize .left {
   padding-right: 32px;
   float: left;   
}
#specialize h3 {
   font-size: 24px ;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #222;
}
.fluid-video-wrapper { margin-top: 18px; }


/*----------------------------------------------*/
/*	e. looking4 Section
/*----------------------------------------------*/

#looking4 {
	background: #F7F7F7;


   border-top: 1px solid #F0F0F0;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
   
}
#looking4 .price-block {
   text-align: center;
   width: 50%;
}

#looking4 .right {float: right; padding: 60px 4%;}
#looking4 .left {float: left; }

#looking4 .price-block img {width: 50%;}



/* ------------------------------------------------------------------ */
/* c. Screenshots
/* ------------------------------------------------------------------ */

#clients {
   background: #fff url(img/grey.png);
   padding-top: 66px;
   padding-bottom: 20px;
   
}

.pad-2 {padding:0 26px}
.pad-2 img {
	margin: 0 10px 10px 0;
	-moz-box-shadow: 5px 5px 3px #222;
   	-webkit-box-shadow: 5px 5px 3px #222;
   	box-shadow: 5px 5px 3px #222;
	text-align: center;
}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

   #clients {
      background: #fff url(img/grey_@2X.png);
      background-size: 397px 322px;
   }

}






/* ------------------------------------------------------------------
/* h. Contact
/* ------------------------------------------------------------------ */

#contact {
   background: #10999E url(img/escheresque.png);
   padding-top: 112px;
   padding-bottom: 66px;
   position: relative;
   min-height: 198px;
   width: 100%;
   overflow: hidden;
   text-align: center;
   color: #fff;
}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

	#contact {
		background: #10999E url(img/escheresque_@2X.png);
		background-size: 46px 29px;
	}
  
}

#contact h2 { color: #fff;}








.map {width:90%; margin: 0 auto;}
.map iframe {width:100%; height:250px;  border-radius:8px}

.block-5 {float:right; text-align: right; width:270px; margin-left:66px}
.block-6 { float: right; width: 50%;}

.pad-3 { width: 50%; margin: auto}

.pad-3 p {padding-bottom:17px}

#form span {
	color: yellow;
	margin-right: 10px;
	float: right;
}
#form {margin:8px 0 0 0; width:595px}
#form input {border:#e0e0e1 1px solid; background:#fff;font:13px verdana, sans-serif;color:#979696;padding:5px 13px 7px 9px;outline:medium none;width:400px; height: 50px; float:right; border-radius:4px}
#form textarea {border:#e0e0e1 1px solid; background:#fff;font:13px verdana, sans-serif;color:#979696; height:188px;outline:medium none;overflow:auto;padding:6px 13px 0 0px;width:560px;resize:none;margin:0 0 0 0;float:right; border-radius:4px}
#form label {position:relative;overflow:hidden;display:block;min-height:41px}
#form textarea:focus, #form  input:focus, #form  select:focus  {
	border: 3px solid #14D0D6;
}
#form img {float: right}

.btns {text-align:right; padding-top:20px}
.btns a {display:inline-block; margin:0 0px 0 10px}

/* --------- Messages -------
------------------------*/

.msg {
	padding: 5px 25px 5px 5px;
	width: auto;
	max-width: 400px;
	margin: 10px 0 10px 0;
	color: #23292f;
	font:12px verdana, sans-serif;
	text-align: right;
}

.msg_error {
	border: 1px solid #c12929;
	background-color: #fff7f4;

}

.msg_approve {
	border: 1px solid #08059C;
	background-color: #F4F4FF;
}

.msg_note {
	border: 1px solid #038206;
	background-color: #F4FFF5;
}




/* ------------------------------------------------------------------ */
/* j. Footer
/* ------------------------------------------------------------------ */

footer {
   color: #3c4753;
   font-size: 13px;
   line-height: 24px;
   position: relative;   
}

footer a, footer a:visited { color: #0A6567; }
footer a:hover, footer a:focus { color: #fff; }

footer .info { padding-right: 90px; }

footer .footer-logo a {
   display: block;
   margin-bottom: 12px;
   margin-left: 3px;
}



/* 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: #0F9095; }