/*
CÓDIGO PARA INFOGRÁFICO
Gente Globosat
*/

/* geral */

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* main */

body {
    margin: 0;
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 400;
    line-height: 1.8;
    color: #000;
    background-color: transparent;
    font-style: normal;
}

home,
image,
footer,
header,
main,
menu,
nav {
  display: block;
}

/* fonts */

@font-face {
   font-family: 'Proxima Nova';
   src: url('https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/canais-adultos/_fonte/Proxima-Nova-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: 'Proxima Nova';
   src: url('https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/canais-adultos/_fonte/Proxima-Nova-Bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
}

@font-face {
   font-family: 'Proxima Nova';
   src: url('https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/canais-adultos/_fonte/Proxima-Nova-Black.woff') format('woff');
   font-weight: 900;
   font-style: normal;
}


/* fonts sizes */

strong {
    font-weight: 700;
}

.font-black { font-weight: 900; }

.font-big {
    font-size: 5rem;
}

h1 { font-size: 2.5rem; }

h2 { font-size: 2rem; }

h3 { font-size: 1.75rem; }

h4 { font-size: 1.5rem; }

h5 { font-size: 1.25rem; }

h6 { font-size: 1rem; }

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 30px;
}

p { font-size: 1.5rem; }

@media only screen and (min-width: 2500px) {
    h1 { font-size: 2.5rem; }
    
    h2 { font-size: 2rem; }
    
    h3 { font-size: 1.8rem; }
}

@media only screen and (max-width: 1300px) {
    p { font-size: 1.25rem; }
}

@media only screen and (max-width: 1030px) and (min-width: 500px) {
    
    h2 { font-size: 1.5rem; }
    
    p { font-size: 0.9rem; }
}


@media only screen and (max-width: 325px) {
    h1 { font-size: 1.8rem; }
    
    h2 { font-size: 1.25rem; }
}

/* colors */

.blue {
    color: #1e4494!important;
}

.white {
    color: #fff!important;
}

.black {
    color: #000!important;
}

.magenta {
    color: #e73951!important;
}

.rose {
    color: #f48888!important;
}

.yellow {
    color: #fccf25!important;
}

.purple {
    color: #37184b!important;
}

.green {
    color: #69be50!important;
}

/* alinhamentos */

.display-none {
    display: none;
}

.text-align-center {
    text-align: center!important;
}

.text-align-right {
    text-align: right!important;
}

.text-align-left {
    text-align: left!important;
}

.margin-bottom {
    margin-bottom: 5%;
}

.margin-bottom-bottom {
    margin-bottom: 10%;
}

.margin-top {
    margin-top: 5%;
}

.margin-top-top {
    margin-top: 10%;
}

.margin-no {
    margin: 0;
}

.padding-bottom {
    padding-bottom: 5%;
}

.padding-bottom-bottom {
    padding-bottom: 10%;
}

.padding-top {
    padding-top: 5%;
}

.padding-top-top {
    padding-top: 10%;
}

.padding-right {
    padding-right: 15%;
}

.padding-left {
    padding-left: 15%;
}

.little-icon {
    width: 25px;
    margin-bottom: 5%;
}

.justify-flex-end {
    justify-content: flex-end!important;
}

@media only screen and (max-width: 2600px) and (min-width: 1900px) {
    .padding-top-top {
        padding-top: 5%;
    }
    
    .margin-bottom-bottom {
        margin-bottom: 5%;
    }
}

@media only screen and (max-width: 900px) {
    .padding-top {
        padding-top: 10%;
    }
}

@media only screen and (max-width: 500px) {
    .margin-top {
        margin-top: 10%;
    }
    
    .margin-top-top {
        margin-top: 20%;
    }
    
    .margin-bottom {
        margin-bottom: 10%;
    }
    
    .margin-bottom-bottom {
        margin-bottom: 20%;
    }
    
    .padding-bottom {
        padding-bottom: 10%;
    }

    .padding-top {
        padding-top: 15%;
    }
    
    .padding-top-top {
        padding-top: 20%;
    }
    
    .padding-right {
        padding-right: 5%;
    }
    
    .padding-left {
        padding-left: 25%;
    }
    
    .big-icon {
        width: 150px;
        margin-bottom: 10%;
    }
    
    .big-big-icon {
        width: 200px;
        margin-bottom: 10%;
    }
}

@media only screen and (max-width: 350px) {
    .padding-top {
        padding-top: 40%;
    }
}

/* containers */
.container {
    position: absolute;
}

.container-blocker {
    position: relative;
}

/* imagens sizes */

.desktop {
    display: block;
}

.mobile {
    display: none;
}

.bg-img {
    width: 100%;
    height: auto;
    z-index: -30;
}

@media only screen and (max-width: 500px) {
    .desktop {
        display: none;
    }
    
    .mobile {
        display: block;
    }
}

/* VENUS */

#venus {
    background-color: #e73951;
}

.bg-venus {
}

@media only screen and (max-width: 500px) {
    #venus .container {
        padding-top: 15%;
    }
}

/* TELEVISAO */
.bg-televisao {
    top: -1150px;
    z-index: -30;
}

#television-text {
    transform: translate(120px, 0);
}

.television-title {
    transform: translate(150px, 150px);
}

@media only screen and (min-width: 2500px) {
    #television-text {
        transform: translate(-100px, 350px);
    }
}

@media only screen and (max-width: 1950px) and (min-width: 1500px) {
    #television-text {
        transform: translate(250px, 250px);
    }
    
    .television-title {
        transform: translate(200px, 600px);
    }
}

@media only screen and (max-width: 1050px) {
    #television-text {
        transform: translate(50px, 0);
    }
    
    .television-title {
        transform: translate(75px, 100px);
    }
}

@media only screen and (max-width: 900px) {
    #television-text {
        padding-right: 35%;
        padding-top: 7%;
    }
    
    .television-title {
        transform: translate(50px, 25px);
    }
}

@media only screen and (max-width: 500px) {
    #television {
        background-color: #e73951;
    }
    
    #television .container {
        position: relative;
        padding: 0;
    }
    
    #television .col {
        padding-top: 0;
    }
    
    #television-text {
        padding: 5px;
        transform: translate(25px, -50px);
    }
    
    .television-title {
        padding-top: 0;
        padding-left: 10%;
        transform: translate(0);
    }
    
    .television-title h2 {
        font-size: 1.75rem;
    }
}

/* GÊNERO */
#genero {
    background-color: #f48888;
}

.bg-genero {
    top: -1820px;
}

.title-genero {
    transform: translate(150px, 180px);
}

.row-dados {
    position: relative;
    transform: translate(150px, 675px);
}

.bola-esquerda {
    background-image: url(https://gente.globo.com/wp-content/uploads/2019/04/bolinha-esquerda.png);
    background-size: 110%;
    background-position: top;
    background-repeat: no-repeat;
    padding: 2.5%;
    height: 575px;
}

.bola-esquerda p {
    transform: translate(10px, 285px);
}

.bola-direita {
    background-image: url(https://gente.globo.com/wp-content/uploads/2019/04/bolinha-direita.png);
    background-size: 110%;
    background-position: top;
    background-repeat: no-repeat;
    padding: 2.5%;
}

.bola-direita p {
    transform: translate(10px, 285px);
}

@media only screen and (max-width: 2000px) and (min-width: 1500px) {
    .title-genero {
        transform: translate(150px, 275px);
    }
    
    .row-dados {
        transform: translate(350px, 1075px);
    }
}

@media only screen and (max-width: 1300px) {
    .row-dados {
        transform: translate(75px, 675px);
    }
    
    .bola-direita, .bola-esquerda {
        background-size: 100%; 
    }
    
    .bola-direita p {
        transform: translate(10px, 270px);
    }
    
    .bola-esquerda p {
        transform: translate(15px, 285px);
    }
}

@media only screen and (max-width: 1050px) {
    .title-genero {
        transform: translate(20px, 125px);
    }
    
    .row-dados {
        transform: translate(25px, 500px);
    }
    
    .bola-direita, .bola-esquerda {
        padding: 5%; 
    }
    
    .bola-direita p {
        transform: translate(10px, 215px);
    }
    
    .bola-esquerda p {
        transform: translate(10px, 225px);
    }
}

@media only screen and (max-width: 900px) {
    .title-genero {
        transform: translate(20px, 100px);
    }
    
    .title-genero h1 {
        font-size: 1.75rem;
    }
    
    .row-dados {
        transform: translate(20px, 350px);
    }
    
    .bg-pernas {
        margin-top: 15%;
    }
    
    .bola-direita p {
        transform: translate(5px, 155px);
    }
    
    .bola-esquerda p {
        transform: translate(5px, 155px);
    }
}

@media only screen and (max-width: 500px) {
    #genero .container {
        position: relative;
    }
    
    .title-genero {
        transform: translate(0);
        background-image: url(http://gente.globo.com/wp-content/uploads/2019/04/bg-genero-mobile.png);
        background-size: cover;
        background-repeat: no-repeat;
        padding: 0;
        height: 400px;
    }
    
    .title-genero h1 {
        padding: 20% 5%;
    }
    
    .row-dados {
        display: inline-block;
        transform: translate(0px);
    }
    
    .bola-direita, .bola-esquerda {
        background-image: none;
        height: auto;
    }
    
    .bg-pernas {
        margin: 0;
        padding: 0;
    }
    
    .bola-direita p {
        transform: translate(0);
    }
    
    .bola-esquerda p {
        transform: translate(0);
    }
}

/* CELULAR TV */
.bg-celular-tv {
    background-color: #1e4494;
}

.col-celular {
    transform: translate(75px, 75px);
}

.col-tv {
    transform: translate(1000px);
}

@media only screen and (max-width: 2000px) and (min-width: 1500px) {
    .col-celular {
        transform: translate(175px, 175px);
    }
    
    .col-tv {
        transform: translate(1400px, 500px);
    }
}

@media only screen and (max-width: 1300px) {
    .col-tv {
        transform: translate(900px, 100px);
    }
}

@media only screen and (max-width: 1050px) {
    .col-tv {
        transform: translate(700px, 100px);
    }
}

@media only screen and (max-width: 900px) {
    .col-celular {
        transform: translate(25px, 25px);
    }
    
    .col-tv {
        transform: translate(525px, -125px);
    }
}

@media only screen and (max-width: 500px) {
    #celular-tv .container {
        position: relative;
    }
    
    #celular-tv {
        background-color: #1e4494;
    }
    
    .col-celular, .col-tv {
        transform: translate(0, 0);
    }
}

/* DISPOSITIVOS */
#dispositivos {
    background-color: #fccf25;
}

.dispositivo-title {
    transform: translate(100px, -795px);
}

.grafico-dispositivo {
    height: auto;
    width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: inherit;
    padding-bottom: 75px;
}

@media only screen and (max-width: 2000px) and (min-width: 1500px) {
    .dispositivo-title {
        transform: translate(300px, -1085px);
    }
    
    .dispositivo-title h2 {
        font-size: 3rem;
    }
}

@media only screen and (max-width: 1300px) {
    .dispositivo-title {
        transform: translate(100px, -705px);
    }
}

@media only screen and (max-width: 1030px) {
    .dispositivo-title {
        transform: translate(100px, -565px);
    }
}

@media only screen and (max-width: 900px) {
    .dispositivo-title {
        transform: translate(20px, -425px);
    }
}

@media only screen and (max-width: 500px) {
    .dispositivo-title {
        transform: translate(0);
        padding-top: 10%;
        padding-left: 5%;
        background-color: #05a9aa;
    }
    
    .dispositivo-title h2 {
        font-size: 1.75rem;
        margin-bottom: 0;
    }
    
    .grafico-dispositivo {
        width: 95%;
    }
}

/* EYE */
.bg-eye-mobile {
    background-color: #e73951;
    padding-top: 400px;
}

.eye-title {
    transform: translate(100px, 55px);
}

.eye-text {
    transform: translate(200px, 150px);
}

.row-eye-grafico {
    transform: translate(200px, 350px);
}

.row-eye-grafico .col {
    background-color: #fccf25;
    color: #37184b;
    padding: 15px 30px;
    margin-right: 30px;
    margin-bottom: 50px
}

.row-eye-grafico h1 {
    margin-bottom: 0;
}

.col-83 { max-width: 83%; }

.col-68 { max-width: 68%; }

.col-58 { max-width: 58%; }

.col-36 { max-width: 36%; }

.col-24 { max-width: 24%; }

@media only screen and (max-width: 2000px) and (min-width: 1500px) {
    .eye-text {
        transform: translate(200px, 250px);
    }
}

@media only screen and (max-width: 1300px) {
    .eye-text {
        transform: translate(100px, 150px);
    }
    
    .row-eye-grafico {
        transform: translate(100px, 350px);
    }
}

@media only screen and (max-width: 1050px) {
    .eye-title {
        transform: translate(100px, 25px);
    }
    
    .eye-text {
        transform: translate(100px, 100px);
    }
    
    .row-eye-grafico {
        transform: translate(50px, 200px);
    }
}

@media only screen and (max-width: 900px) {
    .eye-title h1, .row-eye-grafico h1 {
        font-size: 1.75rem;
    }
    
    .eye-text {
        transform: translate(100px, 50px);
    }
    
    .row-eye-grafico {
        transform: translate(25px, 100px);
    }
}

@media only screen and (max-width: 500px) {
    #eye .container {
        position: relative;
        background-color: #e73951;
        background-image: url(http://gente.globo.com/wp-content/uploads/2019/04/bg-eye-mobile.png);
        background-repeat: no-repeat;
        background-size: 145%;
        background-position: bottom;
    }
    
    .row-eye-grafico h1 {
        font-size: 1.25rem;
    }
    
    .eye-title {
        transform: translate(0);
        margin-top: 15%;
    }
    
    .eye-text {
        transform: translate(0);
        margin-bottom: 10%;
    }
    
    .row-eye-grafico {
        transform: translate(0);
        padding-left: 5%;
    }
    
    .row-eye-grafico .col {
        margin-right: 0;
    }
    
    .col-number {
        font-size: 3rem;
        transform: rotate(90deg);
        align-self: center;
    }
}

/* TESOURA */

.bg-tesoura {
    padding-top: 150px;
    background-color: #e73951;
}

.tesoura-title {
    transform: translate(75px, 75px);
}

.row-tesoura {
    transform: translate(175px, 650px);
}

.row-apimentar {
    transform: translate(175px, 950px);
}

.bg-tesoura-mobile {
    transform: rotate(180deg);
}

@media only screen and (max-width: 2000px) and (min-width: 1500px) {
    .tesoura-title {
        transform: translate(100px, 150px);
    }
    .row-tesoura {
        transform: translate(425px, 850px);
    }

    .row-apimentar {
        transform: translate(425px, 1350px);
    }
}

@media only screen and (max-width: 1300px) {
    .tesoura-title {
        transform: translate(50px, 70px);
    }
    .row-tesoura {
        transform: translate(75px, 600px);
    }

    .row-apimentar {
        transform: translate(90px, 800px);
        padding: 7.5%;
    }
}

@media only screen and (max-width: 1050px) {
    .tesoura-title {
        transform: translate(25px, 35px);
    }
    
    .tesoura-title br {
        display: none;
    }
    
    .row-tesoura {
        transform: translate(45px, 300px);
    }

    .row-apimentar {
        transform: translate(45px, 335px);
        padding: 7.5%;
    }
}

@media only screen and (max-width: 500px) {
    #tesoura {
        background-color: #e73951;
    }
    
    #tesoura .container {
        position: relative;
    }
    
    .tesoura-title {
        margin-bottom: 5%;
        transform: translate(0);
    }
    
    .row-tesoura, .row-apimentar {
        text-align: left!important;
        transform: translate(0);
        padding: 0 5%;
    }
    
    .row-apimentar h2 {
        font-size: 1.75rem;
        margin-top: 10%;
    }
}

/* FONTES */
#fontes {
    background-color: #000;
}

.img-balao {
    width: 100px;
    height: auto;
    margin-bottom: 5%;
}