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

.bold {
  font-weight: bolder;
}
.center {
  text-align: center;
}
strong {
  font-size: inherit;
}
.uppercase {
  text-transform: uppercase;
}

.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 {
   color: #333;
   letter-spacing: 1.5px;
   margin: 5px auto 40px auto;
   text-align: center;
   width: 90%;
   max-width: 1100px;
}
h2 span {
  text-decoration: underline;
}

/* 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 {
   width: 100%;
   text-align: center;
   padding-top: 35px;
   padding-bottom: 40px;
   /*background: #C4C4C4 url(img/hero-bg.png) top left repeat;*/
   background-color: #3dbbbb;;
}
header h1 {
  font-size: 60px;
   font-weight: normal;
   color: #fff;
   line-height: 70px;
   width: 80%;
   margin: 0 auto;
   margin-top: 30px;
}
header h2 {
  font-size: 38px;
   font-weight: bold;
   color: #fff;
   line-height: 58px;
   width: 80%;
   margin: 0 auto;
}


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

#hero {
   padding: 60px 0 0 0;
   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: 83%;
   text-align: center;
   margin: 54px auto 24px auto;
}
.hero-text h1 {
   font: 30px/1.0em 'montserrat-regular', sans-serif;
   color: #fff;
   padding: 0;
   margin: 0;
   text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
   line-height: 46px;
}
.hero-text h1 span,
.hero-text a { color: #3dbbbb;; }
.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 */
.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 {}


/* ------------------------------------------------------------------ */
/* 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;
}
#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;
  vertical-align: top;
}
.join-left {
  margin-top: 10px;
}
.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: 60px;
  font-weight:bold;
  text-align:right;
  padding-right: 50px;
  font-size:30px;
  vertical-align: top;
  width: 25%;
  display:inline-block;
  min-width:250px;
  color: #23292F;
}
.receive-right {
  margin-top: 50px;
  display:inline-block;
  min-width:300px;
  width: 70%;
}
.receive-right ul {
  padding-left: 50px;
}

.ceo-images {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
}
.ceo-images div {
  display: inline-block;
  text-align: center;
  margin: 0 15px;
}
.ceo-images div p {
  margin: 0 !important;
  padding: 0;
  text-align: center;
  line-height: normal;
}

.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: #3dbbbb;;
  line-height: normal;
}

section.images {
  text-align: center;
}
section.images div {
  margin: 20px 50px;
  display: inline-block;
}
section.images div p {
  margin-bottom: 5px;
  font-size: 20px;
}
section.images img {
  border: 3px solid #f5f5f5;
}
section.images .white {
  margin: 0 !important;
  padding: 0;
  text-align: center;
  line-height: normal;
}
section.images .died {
  font-size: 22px;
  font-weight: bold;
}
.reg-btn {
  background-color: #3dbbbb;
  color: #fff !important;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 5px;
  font-size: 30px;
}

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

@media screen and (max-width: 767px) {
  .hide-small{
    display: none;
  }
  .small-hidden {
    display: none;
  }
}


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

}