/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 70px;
  padding-bottom: 20px;
  color: #5a5a5a;
  font-family: 'Open Sans', sans-serif;
  background-image: url('http://thegrove.com.br/metodo/images/d/de/Bgtexture.jpg');
}

h2 {
	color: #333;
  font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

.main-headers {
  font-size: 3em;
  margin-bottom: 1em;
  font-weight: 900;
}

/* CSS FOR - planos.php
-------------------------------------------------- */

h2 {
  font-size: 3em;
  margin-bottom: 1.1em;
  font-weight: 900;
  margin-top: 30px;
}

.quick-access a {
  text-decoration: none;
}

.anchor-links {
  display: block;
  height: 60px; /*same height as header*/
  margin-top: -60px; /*same height as header*/
  visibility: hidden;
}

.planos {
  padding-right: 10px;
  padding-left: 10px;
}

/* SIGN UP MAGNET - index.php
-------------------------------------------------- */

.signUp .button {
  width: 100%;
  margin-top: 12px;
}

.signUp img {
  margin: 20px 0 10px;
}

.signUp h2 {
  font-size: 45px;
  margin-bottom: 20px;
  margin-top: 0;
  font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 900;
  font-style: bold;
  width: 100%;
}

.signUp p:last-child {
  font-size: 13px;
  margin-top: 10px;
}

#signUpText {
  margin-bottom: 20px;
  font-size: 20px;
}

/* VIDEO EXAMPLE - index.php
-------------------------------------------------- */

  .arrow_box { 
    position: relative; 
    background: #26893A; 
    border: 4px solid #35bf51;  
    padding: 30px 15px;
    color: #DDF8C6;
    font-weight: 900;
    margin-bottom: 40px;
    font-size: 45px;
  }
 
  .arrow_box:after, .arrow_box:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } 
  .arrow_box:after { border-color: rgba(38, 137, 58, 0); border-top-color: #26893A; border-width: 30px; margin-left: -30px; } 
  .arrow_box:before { border-color: rgba(53, 191, 81, 0); border-top-color: #35bf51; border-width: 36px; margin-left: -36px; }

  #assista {   
    background-color: #333;
    color: white;
    padding: 30px 0;
    margin-bottom: 10px !important; 
    margin-top: 20px;
  }

  .demo-video {
    max-width: 853px;
    margin: auto;
    margin-bottom: 20px;
    padding: 0 15px 30px;
  }

  .wide-bg {
    margin-top: 3em;
/*  background-color: #B8ECD0;
    background-image: url('http://thegrove.com.br/blog/wp-content/uploads/2013/07/02.png');
    border-top: 5px solid #52B27F;
    border-bottom: 5px solid #52B27F;*/
  }

  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
  }
  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

/* BENEFITS - index.php
-------------------------------------------------- */
  #como-funciona {    
    margin-top: 35px;
    font-size: 4em;
  }

  .featurette img {
    margin: auto; 
  }

  #benefits-1 h2 {
    font-size: 2.5em;
    font-weight: 700;
  }

  #benefits-2 div:last-child {
    padding-left: 60px;
  }

  #benefits-2 h2 {
    margin-top: 35px;
    font-size: 2.5em;
    font-weight: 700;
  }

  #benefits-3 h2 {
    margin-top: 75px;
    font-size: 2.5em;
    font-weight: 700;   
  }

  #benefits-4 h2 {
    font-size: 2.5em;
    font-weight: 700;
    margin-top: 95px;
  }

  .marketing {
    margin-bottom: 150px;
  }

  .marketing h2:nth-child(1+n) {
    color: red;
  }

/* TESTIMONIALS - index.php
-------------------------------------------------- */

  .testy {
    background: #333; /*#fb5235;*/
    background-image: url('http://thegrove.com.br/blog/wp-content/uploads/2013/07/02.png');
    padding: 30px 0;
    margin: 65px 0 20px;
    color: white;
  }

  .testy h2 {
    font-size: 3em;
    color: white;
    margin-bottom: 1.5em;
    font-weight: 900;
  }

  .author img {
    margin-bottom: 10px;
  }

  .author p {
    margin-bottom: 20px;
  }


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Pad the edges of the mobile views a bit */
.marketing {
  padding-right: 15px;
  padding-left: 15px;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  text-align: center;
  border-top: 10px solid white;
  border-right: 10px solid white;
}

/* Featurettes
------------------------- */

.featurette-divider {
  margin: 35px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

/* PRICING TABLE
----------------------------*/

#btn-skype {
	margin-bottom: 10px;
}

#btn-presencial {
	margin-bottom: 10px;
}

.price {
  font-size: 4em;
}
 
.price-cents {
  vertical-align: super;
  font-size: 50%;
}
 
.price-month {
  font-size: 35%;
  font-style: italic;
}
.panel {
-webkit-transition-property : scale;
-webkit-transition-duration : 0.2s;
-webkit-transition-timing-function : ease-in-out;
-moz-transition : all 0.2s ease-in-out;  
}
 
.panel:hover {
box-shadow: 0 0 10px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 10px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
}

/* CARROUSEL IN SOBRE.PHP
-------------------------------------------------- */

#carousel-example-generic {
  max-width: 600px;
  margin: 127px auto;
}


#footer-address {
  font-size: 12px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

  /* Remove the edge padding needed for mobile */
  .marketing {
    padding-right: 0;
    padding-left: 0;
  }

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left:  15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left:  0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }

}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 40px;
    margin-bottom: 20px;
  }

/* STYLE FOR SIGN UP MAGNET
-------------------------------------------------- */

#receba {
  margin-top: 45px;
}

.signUp > div {
  margin: 20px 0;
}

.signUp .button {
  margin-top: 12px;
}

.signUp img {
  margin-top: 20px;
  padding-left: 20px;
}

.signUp h2 {
  margin-bottom: 60px;
}

.signUp p:last-child {
  margin-top: 10px;
}

#signUpText {
  margin-bottom: 60px;
  font-size: 22px;
}

/* VIDEO EXAMPLE - index.php
-------------------------------------------------- */

  .main-headers {
    font-size: 3em;
    margin-bottom: 1em;
    font-weight: 900;
  }

  #assista {
    margin-top: 2em;
/*    color: white;*/
  }

  .wide-bg {
    margin-top: 6em;
  }


/* BENEFITS - index.php
-------------------------------------------------- */
  #como-funciona {    
    background: #333;
    color: white;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 4em;
    padding: 15px;
  }

  .featurette img {
    margin: auto; 
  }

  #benefits-1 h2 {
    font-size: 2.5em;
    font-weight: 700;
  }

  #benefits-2 div:last-child {
    padding-left: 60px;
  }

  #benefits-2 h2 {
    margin-top: 35px;
    font-size: 2.5em;
    font-weight: 700;
  }

  #benefits-3 h2 {
    margin-top: 75px;
    font-size: 2.5em;
    font-weight: 700;   
  }

  #benefits-4 h2 {
    font-size: 2.5em;
    font-weight: 700;
    margin-top: 95px;
  }

  .marketing {
    margin-bottom: 150px;
  }

/* TESTIMONIALS - index.php
-------------------------------------------------- */



/* CONTACT INFO
-------------------------------------------------- */

.contactInfo {
  margin-top: 62px;
}

.contactInfo > h4 {
  margin-bottom: 25px;
}

.contactInfo p:first-child {
  margin-bottom: 20px;
}

}