/*
=====================================================================
*   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
/* ------------------------------------------------------------------ */



.center {
  text-align: center;
}

strong {
  font-size: inherit;
}

.section-head {
  	padding: 0 4%;
   text-align: center;
}
.section-head h1 {
   font: 20px/36px 'montserrat-bold', sans-serif;
   color: #23292F;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 12px;
}

h2 {
   font: 37px/50px 'montserrat-bold', sans-serif;
   color: #333;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin: 5px auto 40px auto;
   text-align: center;
   width: 90%;
   max-width: 1100px;
   margin-top:50px;
}
h2 span {
  text-decoration: underline;
  font-style: italic;
}

#hero h2 {
  font-size: 50px;
  font-weight: bold;
  color: #fff;
  line-height: 64px;
  width: 80%;
  margin: 0 auto;
  font-family: 'opensans-regular', sans-serif;
  letter-spacing: 1.5px;
  text-transform: none;
  padding-bottom: 35px;
}

/* for css animations */
.show { opacity: 1; }
.js #mc_embed_signup input[type="email"],
.js #mc_embed_signup input[type="submit"] {
   opacity: 0;
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
   height: 80px;
   width: 100%;
   background: #13171B;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
   font-size: 56px;
   font-weight: bold;
   color: #fff;
   text-align: center;
   line-height: 78px;
}


/* ------------------------------------------------------------------ */
/* c. Hero Section
/* ------------------------------------------------------------------ */

#hero {
   padding: 0;
   background-color: #3dbbbb;
   overflow: hidden;
}

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

	#hero {
		background-color: #3dbbbb;
	}

}

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

/* Hero Text */
.hero-text {
	color: #676e73;
  text-align: center;
  margin: 35px auto 24px auto;
}
.hero-text h1 {
  font-size: 85px;
  color: #fff;
  line-height: 92px;
  width: 80%;
  margin: 10px auto 20px auto;
  letter-spacing: -1px;
  font-family: 'opensans-regular', sans-serif;
  font-weight: bold;
}
/*.hero-text h1 span { display: block; margin-top:30px; }*/
.hero-text h1 span {
  font-size: 100px;
}
.hero-text a { font-size:58px; }
.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;
}

#features h3.mid-note {
  text-transform: none;
  font-size: 25px;
  line-height: 1.3;
  padding: 40px 5%;
}

/* Hero CTA Buttons */
.buttons {
   text-align: center;
   margin: 0 0 18px 0;
}
.buttons .button {
   font: 14px/24px 'montserrat-bold', sans-serif;
   text-transform : uppercase;
   letter-spacing: 2px;
}
.buttons .trial {
   background: #f64b39;
   -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;
}
.buttons .trial:hover { background: #F86A5A; }
.buttons .learn-more {}


span.died {
  font-size: 22px;
  font-weight: bold;
}

/* ------------------------------------------------------------------ */
/* d. Features Section
/* ------------------------------------------------------------------ */

#features {
   background: #fff;
   padding-top: 20px;
   padding-bottom: 50px;
   overflow: hidden;
}
#features .feature {
   margin-top: 30px;
   margin-bottom: 54px;
}
#features .right {
   padding-left: 32px;
   float: right;
}
#features .left {
   padding-right: 32px;
   float: left;
}
#features h3 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #222;
}
#features ul {
  list-style-type: disc;
  padding-left: 20px;
}
#features ul li {
  font-size: 18px;
  color: #23292F;
  line-height: 26px;
}


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

footer {
   padding-top: 30px;
   margin-bottom: 30px;
   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; }

/* copyright */
footer .copyright {
   margin: 0;
   padding: 0 18px;
   clear: both;
   text-align: right;
}



.join-left,
.join-right {
  display: inline-block;
  vertical-align: middle;
  width: 45%;
  min-width: 300px;
  text-align: center;
  font-weight: bold;
}
.join-left img {
  webkit-box-shadow: 0px 0px 7px 0px rgba(59,58,59,1);
  -moz-box-shadow: 0px 0px 7px 0px rgba(59,58,59,1);
  box-shadow: 0px 0px 7px 0px rgba(59,58,59,1);
}
.join-right2 p {
  font-size: 26px !important;
  line-height: 40px;
}

.receive-left {
  margin-top: 80px;
  vertical-align: top;
  width: 25%;
  display:inline-block;
  min-width:250px;
}
.receive-left img {
  width: 100%;
}
.receive-right {
  margin-top: 50px;
  display:inline-block;
  min-width:300px;
  width: 70%;
}
.when-attend-image {
  width: 100%;
  margin-top: 70px;
}
#features .when-attend p {
  font-weight:bold;
  font-size:36px;
  line-height: 1;
  color: #23292F;
  padding-left: 0;
}
.when-attend ul {
}
.feature-media {
  text-align: center;
}

.ceo-images {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
  max-width: 1100px;
}
.ceo-images div {
  display: inline-block;
  text-align: center;
  margin: 0 0 30px 0;
  color: #fff;
  width: 260px;
}
.ceo-images div p {
  margin: 0 !important;
  padding: 0;
  text-align: center;
  line-height: normal;
  font-size: 18px;
  font-family: 'opensans-regular', sans-serif;
  font-weight: bold;
}
.ceo-images div img {
  border: 5px solid #f5f5f5;
}

.inline-vid {
  display:inline-block;
  width: 500px;
  text-align: center;
  padding: 0 10px;
  margin: 30px auto 20px auto;
}
.inline-vid iframe {
   height: 315px;
}

p.white {
  color: #fff;
}

.report-reveals {
  font-weight: bold;
  font-size: 30px !important;
  text-align: center;
  width: 400px;
  margin: 0 auto;
  line-height: 50px;
  display: inline-block;
  vertical-align: top;
}
.report-reveals span {
  display: block;
  margin-top: 10px;
  font-size: 24px !important;
}

.step, .step em {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  margin: 40px auto 0 auto;
  color: #11ABB0;
  line-height: normal;
}


@media screen and (max-width: 800px) {
  header{
    font-size: 36px;
  }
}

@media screen and (max-width: 530px) {
  header{
    font-size: 20px;
  }
}
.reg-btn {
  background-color: #3dbbbb;
  color: #fff !important;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 5px;
  font-size: 30px;
}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }