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

}



/*------------------------------------*\

    TAGS

\*------------------------------------*/



html {

  font-family: sans-serif; // 1

  -ms-text-size-adjust: 100%; // 2

  -webkit-text-size-adjust: 100%; // 2

}



body {

  font-family: 'Open Sans', sans-serif;

  font-size: 16px;

  color: #000;

}



.cf:before,

.cf:after {

  content: "";

  display: table;

}

.cf:after {

  clear: both;

}

.cf {

  *zoom: 1;

}



img {

  border: 0;

  display: block;

  max-width: 100%;

}





ul { list-style-type: none; }



/* ==================== HTML 5 ===================== */



article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

nav,

section,

summary { display: block; }



figure { margin: 0; }





/* ==================== LINKS ===================== */



a {

  color: color('primary', 'base');

  text-decoration: none;



  &:hover,

  &:focus {

    color: color('primary', 'light');

    text-decoration: underline;

  }



  &:focus {

    @include tab-focus;

  }

}



//

// Remove the gray background color from active links in IE 10.

//



a { background-color: transparent; }



//

// Improve readability of focused elements when they are also in an

// active/hover state.

//



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





/* ==================== TIPOGRAFIA ===================== */



b, strong { font-weight: bold; }



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



.gf-bold {

  font-family: 'GloboFutura-Bold';

}



.gt-regular {

  font-family: 'GlobotipoTexto-Regular';

}



.gt-bold {

  font-family: 'GlobotipoTexto-Bold';

}



.txt-upper {

  text-transform: uppercase;

}





/* ================= STYLE ================= */



body {

    font-family: 'GlobotipoTexto-Regular';



    background: url('bg-mobile.png') no-repeat center top #000; background-size: cover;

}



@media ( min-width: 1080px ) {

    body {  background: url('bg-desktop.png') no-repeat center top #000; background-size: 100% auto; }

}



@media ( min-width: 1366px ) {

    body { background: url('bg-desktop.png') no-repeat center top #000; background-size: 100% auto; }

}



@media ( min-width: 1620px ) {

    body { background-size: cover; }

}



.flt-l { float: left; }

.flt-r { float: right; }



.pos-r { position: relative; }



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

.center-img { margin: 0 auto; }



.fw-l { font-weight: 300; }

.fw-m { font-weight: 500; }

.fw-b { font-weight: 700; }



.txt-white { color: #fff; }

.txt-red { color: #fc232b; }



.container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 15px;

}



.header {
  padding: 30px 18px;
  margin-bottom: 40px;
  margin-top: 40px;
}

@media ( min-width: 562px ) {

    .header { padding: 0px 55px; }

}



@media ( min-width: 1366px ) {

    .header { margin-bottom: 437px; }

}



.logo-play { display: inline-block; width: 111px; padding: 0 17px }

.logo-globo { display: inline-block; width: 130px; padding: 0 17px }

@media ( min-width: 562px ) {

    .logo-play, .logo-globo { width: auto; }

}



.title-mobile {

    font-family: 'GlobotipoTexto-Bold';

    font-size: 42px;

    text-align: center;

    text-transform: uppercase;

    /*text-decoration: underline;*/

    color: #fff;

    margin-bottom: 37px;

}

@media ( min-width: 480px ) {

    .title-mobile { font-size: 63px; }

}



@media ( min-width: 800px ) {

    .title-mobile { font-size: 113px; }

}



@media ( min-width: 1366px ) {

    .title-mobile { display: none; }

}



.txt1 { font-size: 22px; margin-bottom: 65px; }

.txt1 .meta { display: inline-block; text-transform: uppercase; color: #fc242b; padding: 5px; background-color: #fff; }

@media ( min-width: 800px ) {

    .txt1 { font-size: 45px; }

}



.txt2 { font-size: 14px; line-height: 21px; margin-bottom: 72px; }

@media ( min-width: 954px ) {

    .txt2 { padding: 0 140px; margin-bottom: 160px; }

}



/*.txt3 { font-size: 32px; color: #fff; margin-bottom: 73px; }*/



.btn, .btn-fixed {

    display: inline-block;

    max-width: 265px;

    width: 100%;

    /*font-family: 'Quicksand', sans-serif;*/

    font-size: 22px;

    color: #fff;

    padding: 21px 0;

    margin-bottom: 63px;

    margin-top: 2rem;

    background-color:  #fc232b;
    /* background: url('detail-btn.png') no-repeat #fc232b; */

    background-size: contain;

}

@media (max-width: 520px) {

  .btn, .btn-fixed {

    /*width: 85%;

    font-size: 25px;*/

  }

}



.btn-fixed {

    font-size: 20px;

    margin-bottom: 0;



    -webkit-box-shadow: 0px 1px 23px 0px rgba(0, 0, 0, 1);

    -moz-box-shadow:    0px 1px 23px 0px rgba(0, 0, 0, 1);

    box-shadow:         0px 1px 23px 0px rgba(0, 0, 0, 1);

}



@media ( min-width: 384px ) {

    .btn-fixed {

      /*font-size: 24px; */

      /*padding: 31px 0; */

    }

}



@media ( min-width: 412px ) {

    /*.btn { padding: 30px 0; }*/

}



@media ( min-width: 486px ) {

    /*.btn-fixed { font-size: 33px; }*/

}



.arrow-down { display: inline-block; width: 100%; text-align: center; margin-bottom: 27px; }

.arrow-down img {

  margin: auto;

}



.list { padding-bottom: 65px; margin-top: 4rem; }

.list .item.desktop { display: none; }



.list .item { width: 100%; float: left; }



.list .item.mobile { background-color: #fc242b; }

.list .item.mobile.img-col2 { width: 50%; }



@media ( min-width: 962px ) {

    .list { margin-top: 241px; }



    .list .item.desktop { display: block; width: 25%; }



    .list .item.mobile { display: none; }

}

.info-secao {

    text-align: left;

    padding-right: 50px;

    position: absolute;

    top: 50%;

    left: 35px;



    -moz-transform: translate(0, -50%);

    -webkit-transform: translate(0, -50%);

    -o-transform: translate(0, -50%);

    -ms-transform: translate(0, -50%);

    transform: translate(0, -50%);

}



.info-secao .title {

  font-family: 'GlobotipoTexto-Bold';

  font-size: 36px;

  font-weight: 700;

  line-height: 25px;

  margin-bottom: 15px;

}



@media ( min-width: 554px ) {

    .info-secao .title { font-size: 55px; line-height: 32px;}

}



@media ( min-width: 962px ) {

    .info-secao .title { font-size: 36px; line-height: 32px;}

}



@media ( min-width: 1200px ) {

    .info-secao .title { font-size: 38px; line-height: 32px; margin-bottom: 27px; }

}



@media ( min-width: 1400px ) {

    .info-secao .title { font-size: 60px; line-height: 36px; }

}



.info-secao .title:before {

    display: block;

    width: 76px;

    height: 2px;

    margin-bottom: 25px;

    background-color: #fff;

    content: '';

}

@media ( min-width: 1200px ) {

    .info-secao .title:before { width: 118px; margin-bottom: 35px; }

}



.info-secao .title .meta { display: block; font-size: 30px; font-weight: 400; }



.info-secao .desc { font-size: 17px; color: #fff; }

@media ( min-width: 554px ) {

    .info-secao .desc { font-size: 27px; }

}

@media ( min-width: 962px ) {

    .info-secao .desc { font-size: 17px; }

}

@media ( min-width: 1200px ) {

  .info-secao .desc { font-size: 23px; }

}

@media ( min-width: 1400px ) {

  .info-secao .desc { font-size: 36px; }

}



.title-programa {

    width: 100%;

    padding: 0 10px;

    position: absolute;

    left: 0;

    bottom: 31px;

}



@media ( min-width: 1200px ) {

    .title-programa { padding: 0 30px; bottom: 35px; }

}





.title-programa .title {

    font-size: 14px;

    text-align: center;

    line-height: 36px;

    color: #fff;

}



@media ( min-width: 375px ) {

    .title-programa .title { font-size: 15px; line-height: 23px; }

}



@media ( min-width: 500px ) {

    .title-programa .title { font-size: 19px; line-height: 23px; }

}



@media ( min-width: 675px ) {

    .title-programa .title { font-size: 29px; line-height: 45px; }

}

@media ( min-width: 960px ) {

    .title-programa .title { font-size: 21px; line-height: 32px; }

}



@media ( min-width: 1400px ) {

    .title-programa .title { font-size: 27px; line-height: 36px; }

}



.title-programa .title:before {

    display: block;

    width: 65px;

    height: 2px;

    margin: 0 auto 17px;

    background-color: #fc242b;

    content: '';

}



@media ( min-width: 1300px ) {

    .title-programa .title:before { width: 118px; margin: 0 auto 27px; }

}



.title-programa .subtitle { font-size: 20px; color: #fff; margin-top: 10px; }



.footer { padding: 52px 0; /* margin-top: 120px; */ }

.logo-footer {

    display: inline-block;

    width: 133px;

    padding: 0 8px;

}

@media ( min-width: 578px ) {

    .logo-footer {  width: auto; padding: 0 20px; }

}



.bar-fixed-bottom {

    width: 100%;

    padding: 0 50px;

    position: fixed;

    left: 0;

    bottom: -100%;

    z-index: 20;

}



.bar-fixed-bottom.show { bottom: 20px; }



.bar-fixed-bottom.bottom {

    width: 100%;

    position: absolute;

    bottom: -50px;

}







.dtl-title {

  background: url('dtl-title.png') no-repeat center/contain;

  color: #fff;

  font-family: 'GlobotipoTexto-Bold';

  font-size: 27px;

  text-transform: uppercase;

  padding: 33px 50px 23px 100px;

  max-width: 944px;

  display: inline-block;

  margin: 80px 0 150px 0;

}

.dtl-title span {

  font-family: 'GlobotipoTexto-Regular';

  margin: 0 -3px;

}



.title-programa.embreve .title:before {

  display: block;

  width: auto;

  height: auto;

  font-size: 12px;

  padding-top: 4px;

  padding-bottom: 4px;

  width: 75px;

  font-weight: 600;

  text-transform: uppercase;

  margin: 0 auto 17px;

  background-color: #fc242b;

  content: 'Em Breve';

}



@media (min-width: 524px) {

  .dtl-title {

    font-size: 27px;

    padding: 33px 50px 23px 100px;

    margin: 80px 0 215px 0;

  }

  .dtl-title span {

    margin: 0 -3px;

  }

}

@media (min-width: 748px) {

  .dtl-title {

    font-size: 46px;

    padding: 33px 50px 23px 100px;

    margin: 80px 0 180px 0;

  }

  .dtl-title span {

    margin: 0 -8px;

  }

  .title-programa.embreve .title:before {

    font-size: 18px;

    padding: 0;

    width: 110px;

  }

}

@media (min-width: 990px) {

  .dtl-title {

    font-size: 67px;

    padding: 40px 50px 23px 100px;

    margin: 80px 0 150px 0;

  }

  .dtl-title span {

    margin: 0 -16px;

  }

  .title-programa.embreve .title:before {



  }

}

@media (min-width: 1200px) {

  .title-programa.embreve .title:before {

    font-size: 24px;

    width: 130px;

  }

}



@media (max-width: 524px) {

  .dtl-title {

    background: url('dtl-title-mobile.png') no-repeat center/contain;

    padding: 49px 23px 44px 23px;

    font-size: 33px;

    line-height: 37px;

    max-width: 320px;

  }

}