/* ======= RESET ======= */

* {
    padding: 0;
    margin: 0; 
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
            box-sizing: border-box;
    *behavior: url(boxsizing.htc);
    -webkit-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-rendering: optimizeLegibility; 
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

img {
    display: block;
    max-width: 100%;
    border: 0; 
}

/* ==================== HTML 5 ===================== */
article, aside, details, figcaption, figure, footer,
header, hgroup, main, nav, section, summary, picture {
    display: block; 
}

figure {
    margin: 0;
}

/* ==================== FORMULÁRIO ===================== */
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background-color: transparent !important;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

a {
    text-decoration: none;
    background-color: transparent;
}

a:hover, a:focus {
    color: #fff;
    text-decoration: none;
}

a:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

a:active, a:hover { outline: 0; }

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    line-height: 1;
}

b, strong {
    font-weight: bolder; 
}

li { list-style: none; }

/* corrige o bug do float */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/*** loading ***/

.loading{
  position: fixed;
  z-index: 1500;
  width: 100%;
  height: 100vh;
  background: url('../images/loading.gif') no-repeat center center #FF7400;
  background-size: auto 50px;
}

/*** loading ***/

/*** base ***/

body{
    background: #101010;
    font-family: 'GlobotipoTexto-Regular';
    color: #F1F2F2;
}

.wrapper{
    overflow: hidden;
}

a{ color: #F1F2F2; }
a:hover{ color: #F1F2F2; }


/*** =================================== HEADER =================================== ***/

.header{
    position: relative;
    padding-top: 50px;
    background: url('../images/bg-m.png') no-repeat center top #101010;
    background-size: 100% auto;
}

@media (min-width: 768px){
    .header{ background: #101010 }

    .header:before{
        position: absolute;
        content: '';
        width: 50%;
        height: 100%;
        background: url('../images/bg.png') no-repeat left top;
        background-size: auto 100%;
        left: 60%;
        top: 0;
    }
}

@media (min-width: 1160px){
    .header:before{
        left: 50%;
        transform: translateX(100px);
    }
}

.col-top{
    position: relative;
    z-index: 10;
}

.logo-top{
    margin-bottom: 35px;
}

@media (max-width: 767px) { .logo-top{ max-width: 200px; } }

.tt-top{
    font-family: 'globotipo_textoblack';
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #F1F2F2;
    max-width: 70%;
    text-transform: uppercase;
}

.txt-top{
    font-family: 'GlobotipoTexto-Regular';
    font-size: 19px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #F1F2F2;
}

.txt-chamada{
    font-family: 'globotipo_textoblack';
    font-size: 17px;
    line-height: 1.1;
    text-transform: uppercase;
}

.img-top{
    position: absolute;
    left: 70%;
    top: 0;
    z-index: 1;
}

@media (min-width: 375px){
    .tt-top{ max-width: 66%; }
    .img-top{ left: 66%; }
}

@media (min-width: 768px){
    .logo-top{ margin-bottom: 40px; }

    .tt-top{
        max-width: none;
        font-size: 42px;
        margin-bottom: 30px;
    }

    .txt-top{
        font-size: 22px;
        margin-bottom: 50px;
    }

    .txt-chamada{
        font-size: 22px;
        margin-bottom: 10px;
    }

    .img-top{
        left: 50%;
        max-height: 100%;
    }
}

@media (min-width: 1160px){
    .header{
        min-height: 480px;
    }

    .tt-top{
        padding-right: 88px;
    }

    .tt-top.is-big{
        font-size: 50px;
    }

    .img-top{
        left: 50%;
        max-height: 100%;
        transform: translateX(-100px);
    }
}

/*** =================================== HEADER =================================== ***/

/*** =================================== SEC TOP =================================== ***/

.sec-top{
    position: relative;
    padding: 20px 0 60px;
}

.rastro{
    position: absolute;
    width: 100%;
    height: 30px;
    right: 75px;
    bottom: 0;
    background: url('../images/rastro_body.png') repeat-x center bottom;
    background-size: auto 100%;
}

.rastro:after{
    position: absolute;
    content: '';
    width: 75px;
    height: 100%;
    left: 100%;
    bottom: 0;
    background: url('../images/rastro_point.png') no-repeat left bottom;
    background-size: auto 100%;
}

@media (min-width: 768px){
    .sec-top{
        padding: 20px 0 100px;
    }

    .rastro{
        height: 56px;
        right: 200px;
    }

    .rastro:after{
        width: 120px;
        height: 56px;
    }
}

@media (min-width: 1160px){
    .rastro{
        right: 50%;
        transform: translateX(470px);
    }
}

.slide-passos{
    margin-bottom: 20px;
}

.passo__item{
    max-width: 270px;
    margin: 0 auto;
}

.passo__img{
    max-width: 32px;
    display: inline-block;
}

.passo__bg{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    -webkit-box-shadow: 10px 6px 9px -5px rgba(0,0,0,0.35);
    -moz-box-shadow: 10px 6px 9px -5px rgba(0,0,0,0.35);
    box-shadow: 10px 6px 9px -5px rgba(0,0,0,0.35);
}

.passo__circle{
    position: relative;
    z-index: 10;
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    border-radius: 50%;
    padding: 10px;
    background-color: #FF8F01;
}

.passo__circle.is-orange{ background-color: #FF7900; }
.passo__circle.is-tangerine{ background-color: #FF5E03; }
.passo__circle.is-blood{ background-color: #FF2F1C; }

.passo__visual{
    position: relative;
    margin-bottom: 20px;
}

.passo__visual:before{
    position: absolute;
    content: '';
    z-index: 1;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 22px;
    background-color: #353432;
    clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
}

.passo__title{
    font-family: 'globotipo_textoblack';
    font-size: 17px;
    line-height: 1;
    margin-bottom: 5px;
    text-transform: uppercase;
    color: #FF8F01;
    text-align: center;
}

.passo__title.is-orange{ color: #FF7900; }
.passo__title.is-tangerine{ color: #FF5E03; }
.passo__title.is-blood{ color: #FF2F1C; }

.passo__text{
    font-family: 'GlobotipoTexto-Regular';
    font-size: 17px;
    line-height: 1.1;
    color: #F1F2F2;
    margin-bottom: 10px;
    text-align: center;
}

.slide-passos.swiper .swiper-pagination{
    position: static;
}

.slide-passos.swiper .swiper-pagination-bullet{
    border: 1px solid #F1F2F2;
    background-color: #101010;
    opacity: 1;
}

.slide-passos.swiper .swiper-pagination-bullet-active{
    background-color: #FB0234;
    border: 0;
}



@media (min-width: 1160px){
    .passo__visual{ margin-bottom: 30px; }

    .passo__title{ font-size: 22px; margin-bottom: 15px; }

    .passo__text{ font-size: 20px; }

    .passo__visual:before{ clip-path: polygon(260px 0%, 100% 50%, 260px 100%, 0% 100%, 10px 50%, 0% 0%); }
}

/*** =================================== SEC TOP =================================== ***/

/*** =================================== SEC CONTEUDOS =================================== ***/

.sec-conteudos{
    padding: 50px 0 30px;
    background: #F6F6F6;
}

.header-conteudos{
    position: relative;
    max-width: 360px;
    margin: 0 auto 20px;
}

.header-conteudos__title {
    position: relative;
    font-family: 'globotipo_textoblack';
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #101010;
}

@media (max-width: 1159px){
    .header-conteudos__title { padding-bottom: 7px; }

    .header-conteudos__title:before {
        position: absolute;
        content: '';
        bottom: 0;
        left: 0;
        width: 40px;
        height: 2px;
        background: #fa0234;
        background: -moz-linear-gradient(left, #fa0234 0%, #ff5e03 50%, #ff8f01 100%);
        background: -webkit-linear-gradient(left, #fa0234 0%, #ff5e03 50%, #ff8f01 100%);
        background: linear-gradient(to right, #fa0234 0%, #ff5e03 50%, #ff8f01 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa0234', endColorstr='#ff8f01', GradientType=1);
    }
}

.header-conteudos__text {
    padding-right: 120px;
    font-family: 'GlobotipoTexto-Regular';
    font-size: 16px;
    line-height: 1.4;
    color: #303030;
}

@media (max-width: 767px) { .header-conteudos__text { min-height: 42px; } }

.header-conteudos__btn {
    position: absolute;
    bottom: 5px;
    right: 0;
    display: inline-block;
    width: 109px;
    font-size: 14px;
    line-height: 1;
    padding: 13px 0;
    text-align: center;
    color: #101010;
    border: 1px solid #101010;
    z-index: 5;
    outline: none;
}

.header-conteudos__btn:hover { color: #101010; opacity: 0.8; outline: none; }
.header-conteudos__btn:visited { color: #101010; outline: none; }
.header-conteudos__btn:focus { color: #101010; outline: none; }
.header-conteudos__btn:active { color: #101010; outline: none; }

.slide-conteudos{
    margin: 0 auto 30px;
    max-width: 360px;
}

.conteudo{
    position: relative;
}

.conteudo__desc{
    position: absolute;
    width: 100%;
    padding: 15px 10px 15px 20px;
    bottom: 0;
    left: 0;
}

.conteudo__desc:before{
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 5px;
    height: 20px;
    transform: translateY(-50%);
    background-color: #FF8F01;
}

.conteudo__desc:after{
    position: absolute;
    content: '';
    top: 50%;
    left: 5px;
    width: 5px;
    height: 20px;
    transform: translateY(-50%);
    background-color: #FB0234;
}

.conteudo__title{
    font-family: 'globotipo_textoblack';
    font-size: 17px;
    line-height: 1;
    color: #F1F2F2;
    text-transform: uppercase;
}

.conteudo__text{
    font-family: 'GlobotipoTexto-Regular';
    font-size: 14px;
    line-height: 1;
    color: #F1F2F2;
    text-transform: uppercase;
}

.swiper.slide-conteudos .swiper-pagination{
    position: static;
}

.swiper.slide-conteudos .swiper-pagination-bullet{
    border: 1px solid #303030;
    background-color: #F6F6F6;
    opacity: 1;
}

.swiper.slide-conteudos .swiper-pagination-bullet-active{
    background-color: #FB0234;
    border: 0;
}

.swiper.slide-conteudos .swiper-button-next, .swiper.slide-conteudos .swiper-button-prev{
    width: 22px;
    height: 22px;
    transition: all ease 0.8s;
}

.swiper.slide-conteudos .swiper-button-next:after, .swiper.slide-conteudos .swiper-button-prev:after{
    content: '';
}

.swiper.slide-conteudos .swiper-button-next.swiper-button-disabled{
    background: url('../images/icon_circle_right.png') no-repeat center;
    opacity: 1;
}

.swiper.slide-conteudos .swiper-button-prev.swiper-button-disabled{
    background: url('../images/icon_circle_left.png') no-repeat center;
    opacity: 1;
}

.swiper.slide-conteudos .swiper-button-next{
    background: url('../images/icon_circle_right_filled.png') no-repeat center;
}

.swiper.slide-conteudos .swiper-button-prev{
    background: url('../images/icon_circle_left_filled.png') no-repeat center;
}

@media (min-width: 768px){
    .sec-conteudos{ padding: 75px 0 40px; }

    .slide-conteudos{
        max-width: 760px;
        margin: 0 auto 75px;
    }

    .header-conteudos{ max-width: 760px; }

    .header-conteudos__title { font-size: 32px; margin-bottom: 5px; }
    .header-conteudos__text { font-size: 20px; }
}

@media (min-width: 1160px){
    .header-conteudos{ max-width: 1160px; margin-bottom: 35px; }

    .slide-conteudos{
        max-width: 1160px;
    }

    .conteudo__desc{ padding: 20px 10px 20px 20px; }

    .header-conteudos__title, .header-conteudos__text{ padding-right: 150px; }

    .header-conteudos__btn {
        width: 146px;
        font-size: 16px;
        padding: 18px;
        border: 2px solid #101010;
    }
}

/*** =================================== SEC CONTEUDOS =================================== ***/

/*** =================================== SEC CANAIS =================================== ***/

.sec-cta-canais{
    padding: 40px 0;
}

.tt-canais{
    font-family: 'globotipo_textoblack';
    font-size: 21px;
    line-height: 1.1;
    margin-bottom: 10px;
    color: #fff;
}

.txt-canais{
    font-family: 'GlobotipoTexto-Regular';
    font-size: 16px;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #fff;
}

.img-canais{
    margin: 0 auto 30px;
}

@media (min-width: 768px){
    .sec-cta-canais { padding: 60px 0; }

    .tt-canais{ font-size: 26px; }
    .txt-canais{ font-size: 18px; }
}

@media (min-width: 1160px){
    .sec-cta-canais { padding: 90px 0; }

    .img-canais{ margin: 0 auto 50px; }
}

/*** =================================== SEC CANAIS =================================== ***/

/*** =================================== SEC DOWNLOAD =================================== ***/

.sec-cta-download{
    background: #1F1F1F;
    position: relative;
}

.sec-cta-download:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: #fa0234;
    background: -moz-linear-gradient(left, #fa0234 0%, #ff5e03 50%, #ff8f01 100%);
    background: -webkit-linear-gradient(left, #fa0234 0%, #ff5e03 50%, #ff8f01 100%);
    background: linear-gradient(to right, #fa0234 0%, #ff5e03 50%, #ff8f01 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa0234', endColorstr='#ff8f01', GradientType=1);
}

.title-download{
    font-family: 'globotipo_textoblack';
    font-size: 24px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #F1F2F2;
    text-align: center;
}

.col-download-img{
    padding: 20px 0;
}

.img-download{
    margin: 0 auto;
}

.col-download-btns{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media (max-width: 1159px){
    .sec-cta-download{ padding: 30px 0; }

    .col-download-btns{
        max-width: 400px;
        margin: 0 auto;
    }

    .link-download{
        width: 48%;
    }
}

@media (min-width: 768px){
    .title-download{ font-size: 32px; }
}

@media (min-width: 1160px){
    .sec-cta-download .row{ align-items: center; }

    .title-download{ text-align: left; }

    .link-download{ margin: 5px 0; }
}
/*** =================================== SEC DOWNLOAD =================================== ***/

/*** =================================== FOOTER =================================== ***/

.footer{
    padding: 45px 0 35px;
}

.tt-regras{
    font-family: 'globotipo_textoblack';
    font-size: 17px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #F1F2F2;
}

.item-regras{
    position: relative;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 15px;
    color: #B7B7B7;
    padding-left: 20px;
}

.item-regras:before{
    content: '•';
    position: absolute;
    top: 0;
    left: 5px;
}

.link-regras{
    color: #B7B7B7;
    text-decoration: underline;
}

.link-regras:hover{
    opacity: 0.8;
    color: #B7B7B7;
    text-decoration: underline;
}

.link-regras:visited{
    color: #B7B7B7;
    text-decoration: underline;
}

.link-regras:active{
    color: #B7B7B7;
    text-decoration: underline;
}

.col-logo-footer{
    padding-top: 20px;
}

.logo-footer{
    margin: 0 auto;
}

@media (max-width: 767px){ .logo-footer { max-width: 205px; } }

@media (min-width: 768px){
    .footer { padding: 70px 0 55px; }

    .tt-regras{ font-size: 24px; }

    .col-logo-footer { padding-top: 50px; }
}

/*** =================================== FOOTER =================================== ***/

/*** =================================== COMPONENTES =================================== ***/

.btn{
    position: relative;
    display: inline-block;
    text-align: center;
    font-family: 'globotipo_textoblack';
    font-size: 16px;
    line-height: 1;
    color: #F1F2F2;
    background-color: #FB0234;
    width: 100%;
    padding: 17px 60px;
    transition: all ease 0.8s;
    outline: none;
}

.btn:hover{ background-color: rgba(251, 2, 52, 0.8); outline: none; }

.btn:before{
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 29px;
    height: 12px;
    background: url('../images/icon-arrow-right.png') no-repeat center;
}

.btn-cta-top.is-up{
    margin-bottom: 40px;
}

.btn-canais{
    white-space: nowrap;
    max-width: 205px;
    margin: 0 auto;
    font-size: 16px;
    padding: 15px 50px 15px 20px;
    outline: none;
}

@media (min-width: 480px){
    .btn{
        width: auto;
    }
}

@media (min-width: 768px){
    .btn{
        max-width: 320px;
        padding: 25px 75px 25px 35px;
        text-align: left;
        font-size: 24px;
    }

    .btn.is-big{
        max-width: none;
        width: auto;
    }

    .btn-canais{
        max-width: 205px;
        margin: 0 auto;
        font-size: 16px;
        padding: 20px 50px 20px 20px;
    }

    .btn:before{
        right: 25px;
    }

    .btn-canais:before{
        right: 13px;
    }
}

@media (min-width: 1160px){
    .btn-cta-top.is-up{ margin-top: -20px; }
}

/*** =================================== COMPONENTES =================================== ***/

/*** =================================== MACETES =================================== ***/

.ff-gt-regular { font-family: 'GlobotipoTexto-Regular'; }
.ff-gt-bold { font-family: 'GlobotipoTexto-Bold'; }
.ff-gt-black { font-family: 'globotipo_textoblack'; }

.color-snow { color: #F1F2F2 !important; }
.color-sun { color: #FF8F01 !important; }
.color-blood { color: #FB0234 !important; }

.uppercase { text-transform: uppercase !important; }

.nowrap { white-space: nowrap; }

.text-border-gradient{
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.text-border-gradient:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: 20px;
    background: #fa0234;
    background: -moz-linear-gradient(left, #fa0234 0%, #ff5e03 50%, #ff8f01 100%);
    background: -webkit-linear-gradient(left, #fa0234 0%, #ff5e03 50%, #ff8f01 100%);
    background: linear-gradient(to right, #fa0234 0%, #ff5e03 50%, #ff8f01 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa0234', endColorstr='#ff8f01', GradientType=1);
}

.text-center, .txt-center { text-align: center; }

.break-lg{ display: none; }

@media (max-width: 767px){
    .nowrap-m{ white-space: nowrap; }

    .break-d { display: none; }
}

@media (min-width: 768px){
    .nowrap-d{ white-space: nowrap; }

    .break-m { display: none; }
}

@media (min-width: 1160px){
    .break-lg{ display: block; }
}
/*** =================================== MACETES =================================== ***/