@charset "utf-8";
/* CSS personalizado */
*{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
}
.clear{
    clear: both;
}
.ubuntu-font{
    font-family: 'ubuntu', sans-serif;
}
.cinza{
    background-color: #333640;
}
.verde-oliva{
    background-color: #0F3239;
}
.azul-marinho{
    background-color: #1E3A66;
}
.vinho{
    background-color: #401429;
}
.cereja{
    background-color: #731630;
}
.laranja{
    background-color: #E7543C;
}
.cereja-text{
    color: #731630;
}
h1{
    font-size: 3.5em;
    font-weight:700;
    font-family: 'Ubuntu', sans-serif;
}
h2{
    font-size: 1.5em;
    font-weight: 200;
}
h3{
    font-size: 2em;
font-weight: 200;
    line-height: 1.5em
}
h4{
    font-weight: 100;
    line-height: 1.4em;
}
h5{
    font-size: 1.8em;
    font-weight: 100;
    line-height: 1.4em;
}
.flow-text{
    font-weight: 100;
    font-size: 1.3em;
}
.flow-text a{
    font-weight: 700;
    color: #fff;
    background-color:#0F3239;
}
section{
    margin: 0 0;
    padding: 1em 0;
}
p{
    margin: 0 0 1em;
    
}
.parallax-container{
    position: relative;
    overflow: hidden;
}
.titulo{
    font-size: 3.3em;
}
.container-topo{
    height: 100%;
    max-height: 100%;
    min-height: 42em;
    margin: 0 auto;
}
.topo-page{
    height: 100%;
    max-height: 100%;
    min-height: 20em;
    margin: 0 auto;
}
#titulo-page {
	margin:3em 0;
	z-index: -1;
}
#titulo-page {
    min-height:;
    width: ;
    z-index: 1;
    color:#fff;
    font-size:1.5em;
}
.texto-page h1, h2, h3, h4, h5{
    font-weight: 300;
    color: #1E3A66;
    opacity: .9;
}
.texto-page strong{
    font-weight: 400;
    color: #0F3239;
    opacity: .8;
}
.section{
    padding: 0 0;
    margin: 0 0;
}
iframe{
    width: 43.750em;
    height: 24.625em;
}
.light{
    font-weight: 100;
}
.espacador-1{
    height: 1em;
}
.espacador-2{
    height: 2em;
}
.espacador-3{
    height: 3em;
}
.texto-bonus{
    font-size: 1.3em;
    margin: 0 0 1em;
}
.h3-bonus{
    margin: 0 0 0.5em;
    padding: 0.2em 0.4em;
}
.cta h1{
    font-size: 1.7em;
    font-weight: 200;
    line-height: 1.3em;
}

/* Estilo BG Pontos */
.degrade {
    background: linear-gradient(253deg, #401429, #0F3239, #1E3A66, #333640);
    background-size: 300% 300%;
    -webkit-animation: Background 25s ease infinite;
    -moz-animation: Background 25s ease infinite;
    animation: Background 25s ease infinite;
  }
 
  @-webkit-keyframes Background {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  
  @-moz-keyframes Background {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  
  @keyframes Background {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
canvas{
    height: 42em;
    width: 100%;
}
#canvas, #text {
	position: absolute;
	top:6em;

	z-index: -1;
}
#text {
    min-height:;
    width: ;
    z-index: 1;
    color:#fff;
    font-size:2em;
    
}
#text h1 {
	opacity: 0.8
}
/* Scroll */
.mouse_scroll {
	display: block;
	margin: 0 auto;
	width: 24px;
	height: 55px;
    margin: -55px auto 30px;
}
.m_scroll_arrows
{
  display: block;
  width: 5px;
  height: 5px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
   
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  margin: 0 0 3px 4px;
  
  width: 16px;
  height: 16px;
}
.um
{
  margin-top: 1px;
}
.um, .dois, .tres
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
}
.um
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
}
.dois
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  margin-top: -6px;
}
.tres
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  margin-top: -6px;
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
/* Ilustracao Animada */
.figura-a{
    float: left;
    margin: 0 0;
    padding: 0 0;
    z-index: 10;
    position: relative;
    font-family:'ubuntu', sans-serif;
    height: 100%;
    min-height: 300px;
    width: 100%;
    opacity: .4;
    -webkit-animation: 7s linear infinite;
    -moz-animation:  7s linear infinite;
    animation: up-down 7s linear infinite; 
}
@keyframes up-down{
  
  0%, 50%{
     transform: translate(0, 0);
  }
    25%{
    transform: translate(0, -4%);
  }
    75%{
    transform: translate(0, 4%);
  }
}
.figura-b{
    float: left;
    margin: -300px 0 50px;
    padding: 0 0;
    z-index: 11;
    position: relative;
    font-family:'ubuntu', sans-serif;
    height: 100%;
    width: 100%;
    
    animation: up-down-b 5s linear infinite; 
}
@keyframes up-down-b{
  
  0%{
     opacity: 0;
  }
    50%{
    opacity: 1;
  }
    100%{
    opacity: 0;
  }
}
.title-ilustracao{
    float: left;
    z-index: 13;
    position: relative;
    font-family:'ubuntu', sans-serif;
    width: 100%;
    margin: -17.938em 0 0 .3em;
}
.title-ilustracao h1{
    position: relative;
    color: #EEE;
    font-weight: 600;
    font-size: 60px;
    padding: 0;
    margin: 0;
    line-height: 1;
    text-shadow: 0 0 40px #000155;
}
.title-ilustracao h3{
    font-weight: 200;
    font-size: 20px;
    padding: 0;
    margin: 0;
    line-height: 1;
    color: #EEE;
    letter-spacing: 2px;
    text-shadow: 0 0 10px #000155;
}
    
/* Langing Page */
/* Timer */
.container-timer {
  width: 100%;
  text-align: center;
}
.timer {
  color: #fff;
  font-size: 36px;
  font-weight: 100;
  opacity: 0;
  transition: opacity .3s ease;
  
  &__section {
    display: inline-block;
    text-align: center;
    margin: 0 10px;
  }
  
  &__number {
    font-weight: 300;
  }
  
  &__label {
    font-size: .5em;
  }
}
.numero{
    display: inline-block;
    text-align: center;
}
.rotulo{
    font-size: .5em;
}
.ladoalado{
    display: inline-block;
    margin: 0.5em;
}
.botao-comprar h1{
    font-size: 1.5em;
    font-weight: 300;
}
.btn-gigante{
    width: 90%;
    height: 2.7em;
    font-size: 2.3em;
    margin: 0.3em 0 0.3em 0;
    padding: 2.3% 3% 1% 3%;
    border-radius: 0.5em;
}
.fotoperfil img{
    border-radius: 50%;
    border: .3em solid #FFF;
    max-height: 100%;
    max-width: 100%;
}
.namidia img{
    max-height: 100%;
    max-width: 100%;
    border-radius: .5em;
}
.obs{
    font-size: 0.6em;
    font-weight: 400;
    background-color: crimson;
    padding: .3em .5em;
    border-radius: .8em;
    color: white;
}
.side-nav{
    width: 14em !IMPORTANT; 
    max-width: 14em;
}
/* Estilo para Tablet */
@media screen and (max-width: 62.5em){
    .card .card-image img{
        min-height: 19em;
        min-width: 19em;
    }
}

/* estilo mobile */
@media screen and (max-width: 37.4375em){
    .titulo{
    font-size: 2em;
}
    iframe{
        width: 20em;
        height: 11.250em;
        margin: 0 0;
        padding: 0 0;
}
    .botao-comprar h1{
    font-size: 1.5em;
    font-weight: 300;
}
.btn-gigante{
    width: 90%;
    height: 3.7em;
    font-size: 2.3em;
    margin: 0.3em 0 0.3em 0;
    padding: 2.3% 3% 1% 3%;
    border-radius: 0.5em;
}
    .imagem-mockup{
        width: 13.125em;
        max-width: 13.125em;
        height: auto;
    }
    .imagem-infografico{
        width: 13.125em;
        max-width: 13.125em;
        height: auto;
        margin: 0 0;
        padding: 0 0;
    }
    .section img{
        width: 13.125em;
        max-width: 13.125em;
        height: auto;
        margin: 0 auto;
        padding: 0 0;
    }
    .imagem-preco img{
        width: 17em;
        max-width: 17em;
        height: auto;
        margin: 0 auto;
        padding: 0 0;
    }
    h1{
        font-size: 2.2em;
        font-weight: 300;
    }
    h2{
        font-size:1.3em;
        font-weight: 300;
        line-height: normal
    }
    .cta h1{
    font-size: 1.3em;
    font-weight: 300;
    line-height: auto;
}
    
    
}