body {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    color: #0f0e09;
}

html {
    width: 100%;
    height: 100%;
}
body, h1, h2, h3, h4, p, div, span, td, a{
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
}

.nav-top{
  background-color: rgba(0,0,0,0.7);
}

a{
  text-decoration: underline;
}
.nav-top .logo-top{
  margin-top: -15px;
  margin-bottom: -70px;
}
.nav-top .logo-top img{
  height: 90px;
}
.nav-top .btn-primary{
  padding: 5px 10px;
  font-size: 0.8em;
  margin-top: 5px;
}
.navbar-toggler{
  color: #efdc97;
  border-color: #efdc97;
}
.navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #efdc97;
    margin: 6px 0;
}
.nav-text-link{
  font-weight: 300;
  font-size: 0.8em;
  color: #fff;
  padding-top: 20px;
}
.nav-text-link.active{
  font-weight: 400;
  text-decoration: underline;
  color: #ede59f;
}
.nav-text-link:hover{
  color: #ede59f;
}
a{
  color: #000000;
}
a:hover{
  color: #3b2511;
}
h1{
  font-size: 2rem;
}
.bold{
  font-weight: bold;
}
.light{
  font-weight: 300;
}

.ui-loader{
  display: none;
}
.navbar-toggle
{
    position: absolute;
    top: 0;
    right: 0;
    float: none; 
    color: #ccc;
    border-color: #ccc;
}
.navbar-toggle span
{
    background-color: #ccc;
}

.navbar{
  margin-bottom: 0;
}

.navbar-nav{
  float: right;
}
.navbar-nav>li{
  margin: 20px 15px;
}
.navbar-nav>li>a{
  padding: 5px 10px;
  color: #000;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 0.9em;
  text-transform: uppercase;
}
.navbar-nav>li>a:hover,
.navbar-nav>li>a:active,
.navbar-nav>li.active>a{
  color: #e30c12;
  background-color: transparent;
  border-bottom: 1px solid #e30c12;
}
.navbar-nav>li>a:focus{
  color: #e30c12;
  background-color: transparent;
}

.splash{
  z-index: -1;
}
.splash .container{
  min-height: 30em;
}
.splash#home{
  background-image: url('../assets/img/banner-home.jpg');
  background-size: cover;
  background-position: center center;
  border-bottom: 10px solid #fff;
  padding-top: 120px;
}
.splash#como-funciona{
  background-image: url('../assets/img/banner-como-funciona.jpg');
  background-size: cover;
  background-position: bottom center;
  border-bottom: 10px solid #dcca6f;
  padding-top: 120px;
}

section.black1{
  background: #414141;
  background: -moz-radial-gradient(center, ellipse cover, #414141 0%, #222222 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #414141 0%,#222222 100%);
  background: radial-gradient(ellipse at center, #414141 0%,#222222 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#222222',GradientType=1 );
  color: #fff;
}
section.black2{
  background: #414141;
  background: -moz-radial-gradient(center, ellipse cover, #414141 0%, #111111 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #414141 0%,#111111 100%);
  background: radial-gradient(ellipse at center, #414141 0%,#111111 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#111111',GradientType=1 );
  color: #fff;
}
section.gold{
  background-image: url('../assets/img/bg-dourado.jpg');
  background-size: cover;
  background-position: center center;
  color: #000;
}


section.black1 .container,
section.black2 .container,
section.gold .container{
  padding-top: 40px;
  padding-bottom: 50px;
}
section.black1 h1,
section.gold h1{
  padding-top: 0;
  color: #fff;
  font-weight: 700;
  line-height: 0.8em;
}
section.black1 h1 .light,
section.gold h1 .light{
  font-weight: 300;
  font-size: 0.6em;
}
section.black1 a{
  color: #ffffff;
}
section.black1 a.btn-primary{
  color: #000000;
}
section.black1 a.btn-primary:hover{
  color: #fff;
}

section.gold h1{
  color: #000;
  line-height: 1em;
}

section.gold h2.title1,
section.gold h2.title2{
  font-weight: bold;
  font-size: 2.5em;
  padding: 0;
  margin: 0;
}
section.gold h2.title2{
  font-size: 3.8em;
}

.quadros{
  color: #fff;
}

.quadros .border{
  padding: 2px;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
  background: linear-gradient(to right, rgba(199,173,84,1), rgba(233,221,143,1));
  border: none !important;
}

.quadros a{
  text-decoration: none;
}

.topics{
  font-size: 1.4em;
  font-weight: 300;
}
.quadros .border .contents{
  background-color: #1e1e1b;
}

.quadros .item p{
  padding: 15px 40px;
  min-height: 135px;
  margin-bottom: 0;
  font-weight: 300;
}
.quadros .item img{
  margin-top: 15px;
  max-width: 80%;
}

.btn{
  -webkit-box-shadow: 5px 5px 6px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 5px 5px 6px 0px rgba(0,0,0,0.25);
  box-shadow: 5px 5px 6px 0px rgba(0,0,0,0.25);
  border-radius: 6px;
}
.btn.white-space{
  white-space: normal;
}
.btn-primary{
  text-transform: uppercase;
  font-size: 1.2em;
  border: 1px solid #ddc472;
  color: #000000;
  background: #efdc97;
  background: -moz-linear-gradient(top, #efdc97 0%, #9f8345 100%);
  background: -webkit-linear-gradient(top, #efdc97 0%,#9f8345 100%);
  background: linear-gradient(to bottom, #efdc97 0%,#9f8345 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efdc97', endColorstr='#9f8345',GradientType=0 );
  text-shadow: 1px 1px 1px rgba(205, 187, 138, 1);
  padding-left: 40px;
  padding-right: 40px;
}
.btn-primary:hover{
  border: 1px solid #ddc472;
}
.btn-footer{
  text-transform: uppercase;
  font-size: 1.2em;
  border: 1px solid #ddc472;
  color: #e5d294;
  background: #0c0a0a;
  background: -moz-linear-gradient(top, #0a0909 0%, #3b2611 100%);
  background: -webkit-linear-gradient(top, #0a0909 0%,#3b2611 100%);
  background: linear-gradient(to bottom, #0a0909 0%,#3b2611 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a0909', endColorstr='#3b2611',GradientType=0 );
  text-shadow: 1px 1px 1px rgba(10, 9, 9, 1);
  padding-left: 20px;
  padding-right: 20px;
}
.btn-footer:hover{
  border: 1px solid #ddc472;
  color: #fff;
}

p.light{
  font-weight: 300;
}
p .bold{
  font-weight: 700;
}
p.big{
  font-size: 1.4em;
}
p.middle{
  font-size: 1.2em;
}
.gold{
  color: #fff8af;
}

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
  .golden{
    color: #dece77;
  }
}
@supports not (-webkit-overflow-scrolling: touch) {
  .golden{
    background: -webkit-linear-gradient(#dece77, #e7db8c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.relative{
  position: relative;
}

.e-gratis{
  position: absolute;
  right: 0;
  top: 50px;
  background-color: #bf0411;
  width: 50%;
  -webkit-box-shadow: 5px 5px 6px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 5px 5px 6px 0px rgba(0,0,0,0.25);
  box-shadow: 5px 5px 6px 0px rgba(0,0,0,0.25);
}
.e-gratis .contents{
  padding: 5px 10px;
  font-size: 4em;
  font-weight: bold;
  font-style: italic;
}
.e-gratis .contents p{
  margin: 0;
  padding: 0;
}

.black-content{
  background-color: #1e1e1b;
  padding: 40px;
}
.black-content .icon img{
  border-right: 1px solid #4a4a47;
  padding-right: 25px;
}
.black-content .title{
  font-size: 2em;
  font-weight: bold;
  line-height: 1.2em;
}
.black-content .description{
  font-size: 1.4em;
  font-weight: 300;
}
.black-content .description2{
  font-size: 1.2em;
  font-weight: 300;
}

.ranking .bar p{
  font-weight: 300;
  font-size: 1.2em;
  color: #000;
  margin: 0;
}
.ranking .bar{
  padding: 5px 20px;
}
.ranking .pontos{
  margin-top: 5px;
  padding: 10px 20px;
  border: 2px solid #fff;
}
.ranking .pontos p{
  font-weight: 400;
  font-size: 1.6em;
  line-height: 1.2em;
  margin: 0;
}
.ranking .pontos p .big{
  font-size: 1.2em;
  font-weight: 700;
}
.ranking .bar-1{
  background-color: #fff;
}
.ranking .bar-2{
  padding: 15px 20px;
  background: #ddc472;
  background: -moz-linear-gradient(left, #ddc472 0%, #f2dc96 100%);
  background: -webkit-linear-gradient(left, #ddc472 0%,#f2dc96 100%);
  background: linear-gradient(to right, #ddc472 0%,#f2dc96 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddc472', endColorstr='#f2dc96',GradientType=1 );
}
.ranking .bar-3{
  padding: 30px 20px;
  background: #afafaf;
  background: -moz-linear-gradient(left, #afafaf 0%, #ffffff 100%);
  background: -webkit-linear-gradient(left, #afafaf 0%,#ffffff 100%);
  background: linear-gradient(to right, #afafaf 0%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#ffffff',GradientType=1 );
}
.ranking .bar-4{
  padding: 50px 20px;
  background: #e5af52;
  background: -moz-linear-gradient(left, #e5af52 0%, #ffffff 26%, #f3cd96 68%, #f2d896 100%);
  background: -webkit-linear-gradient(left, #e5af52 0%,#ffffff 26%,#f3cd96 68%,#f2d896 100%);
  background: linear-gradient(to right, #e5af52 0%,#ffffff 26%,#f3cd96 68%,#f2d896 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5af52', endColorstr='#f2d896',GradientType=1 );
}
.ranking .pontos-2 p .big{
  color: #ddc472;
  color: -moz-linear-gradient(left, #ddc472 0%, #f2dc96 100%);
  color: -webkit-linear-gradient(left, #ddc472 0%,#f2dc96 100%);
  color: linear-gradient(to right, #ddc472 0%,#f2dc96 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddc472', endColorstr='#f2dc96',GradientType=1 );
}
.ranking .pontos-3 p .big{
  color: #afafaf;
  color: -moz-linear-gradient(left, #afafaf 0%, #ffffff 100%);
  color: -webkit-linear-gradient(left, #afafaf 0%,#ffffff 100%);
  color: linear-gradient(to right, #afafaf 0%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#ffffff',GradientType=1 );
}
.ranking .pontos-4 p .big{
  color: #e5af52;
  color: -moz-linear-gradient(left, #e5af52 0%, #ffffff 26%, #f3cd96 68%, #f2d896 100%);
  color: -webkit-linear-gradient(left, #e5af52 0%,#ffffff 26%,#f3cd96 68%,#f2d896 100%);
  color: linear-gradient(to right, #e5af52 0%,#ffffff 26%,#f3cd96 68%,#f2d896 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5af52', endColorstr='#f2d896',GradientType=1 );
}
.golden-border{
  border: 2px solid #ddc472;
  padding: 40px 80px;
}
.inline-block{
  display: inline-block;
}
.text-form{
  max-width: 240px;
  float: right;
  padding-bottom: 120px;
}
.text-form.update{
  padding-top: 120px;
  padding-bottom: 120px;
  margin: 0 auto;
  float: inherit;
}
.img-form{
  background-image: url('../assets/img/formulario-hiroclub.png');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% auto;
}

.regulamento p{
  font-family: arial, verdana;
  text-align: justify;
}

.previa-show{
  display: inline-block;
  border-radius: 20px;
  margin: 0 auto;
  padding: 2px;
  border: none !important;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
  background: linear-gradient(to right, rgba(199,173,84,1), rgba(233,221,143,1));
}
.previa-show img{
  border-radius: 20px;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
}
.capa-show img{
  max-width: 500px;
}
footer{
  background-image: url('../assets/img/bg-footer.jpg');
  background-size: cover;
  background-position: center center;
}
footer .container{
  padding-top: 80px;
  padding-bottom: 40px;
}
footer img{
  max-width: 100%;
}

footer .social{
  margin-top: 10px;
}
footer .social a.item{
  margin: 0 5px;
}

.background-formulario .img-form{
  background-image: none;
}
.background-formulario{
  background-image: url(../assets/img/formulario-hiroclub-new.png);
  background-repeat: no-repeat;
  background-position: 82% 100%;
  background-size: auto 95%;  
}
.background-formulario.update{
  background-position: 95% 100%;
}
.background-formulario.padding-top{
  background-size: auto 82%;  
}

@media(max-width:767px) {	
  .logo-mobile img{
    height: 60px;
  }
  .splash#home{
    background-image: url('../assets/img/banner-home-mobile.jpg');
  }
  .splash#como-funciona{
    background-image: url('../assets/img/banner-como-funciona-mobile.jpg');
  }
  .quadros .border{
    margin: 10px 20px;
  }
  .quadros .item{
    flex-basis: inherit;
  }
  .quadros .item p {
      padding: 15px 65px;
  }
  section.gold h2.title1,
  section.gold h2.title2{
    text-align: center;
  }
  .e-gratis{
    position: inherit;
    top: 0;
    width: 100%;
    text-align: center;
  }
  .black-content{
    text-align: center;
  }
  .black-content .icon img{
    border-bottom: 1px solid #4a4a47;
    border-right: none;
    padding-bottom: 25px;
    padding-right: none;
  }
  .black-content .text{
    padding-top: 25px;
  }
  section.black1 h1, section.gold h1 {
      line-height: 1em;
  }
  .black1 .logo-col{
    text-align: center !important;
  }
  .golden-border{
    padding: 10px 20px;
  }
  .text-form{
    max-width: inherit;
    float: inherit;
    padding-bottom: 10px;
  }
  .capa-show img{
    max-width: 100%;
  }
  .img-form{
    min-height: 200px;
    background-position: top center;
  }
  .background-formulario,
  .background-formulario.padding-top{
    background-position: bottom center;
    background-size: 100% auto;
  }
  .background-formulario .img-form{
    min-height: 25em;
  }
  .background-formulario.update .img-form{
    min-height: 12em;
  }
  footer .container{
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  footer .container .col-sm{
    margin-bottom: 20px;
  }
}
@media (min-width: 1900px){
  .splash .container{
    min-height: 45em;
  }
  .text-form.update{
    padding-top: 180px;
    padding-bottom: 180px;
  }
  .background-formulario.update {
    background-position: 85% 100%;
  }
}  
@media (min-width: 1440px) and (max-width: 1919px) {
  .splash#como-funciona{
    padding-top: 160px;
  }
}  
@media (min-width: 768px) {
}  
@media(max-width:979px) {
}
@media(max-width:1199px) {
}  
@media (max-width: 579px){
}  
@media (max-width: 400px){
}  
@media (max-width: 325px){
}  
@media (max-height: 500px){
}  
