/*
Era de Ouros do Podcast
*/

/* geral */

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

/* scrollbar */

::-webkit-scrollbar {
    width: 10px;
    display: none;
}

/* smooth */

html {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

/* main */

body {
    margin: 0;
    font-family: 'Lora', 'Proxima Nova', sans-serif;
    font-weight: 400;
    line-height: 1.8;
    color: #262161; /* azul escuro */
    background-color: transparent;
    font-style: normal;
    font-size: 1.15rem;
}

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

@media only screen and (max-width: 900px) {
    body {
        font-size: 1rem;
    }
}

/* fonts */

@font-face {
   font-family: 'Proxima Nova';
   src: url('https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_fontes/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/estudo-podcasts-de-ouro/_fontes/Proxima-Nova-Bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
}

/* fonts sizes */
a {
    color: inherit;
    text-decoration: underline;
}

a:hover {
    color: #f5e9d1;
    text-decoration: none;
    background-color: #262161;
}

strong, b, .b {
    font-weight: 700;
}

.i {
    font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', sans-serif;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 30px;
}

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

@media only screen and (max-width: 500px) {
    h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3 {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto; 
    }
    
    .display-1 {
        font-size: 3rem;
    }
    
    .display-2 {
        font-size: 2.5rem;
    }
    
    .display-3, h1 {
        font-size: 2rem;
    }
    
    .display-4 {
        font-size: 1.75rem;
    }
}

/* colors */

.branco {
    color: #f5e9d1!important;
}

.azul {
    color: #262161!important;
}

.vermelho {
    color: #eb1c24!important;
}

.creme {
    color: #f5ae94!important;
}

/* cores de fundo */

.bg-branco {
    background-color: #f5e9d1!important;
}

.bg-azul {
    background-color: #262161!important;
}

.bg-vermelho {
    background-color: #eb1c24!important;
}

.bg-creme {
    background-color: #f5ae94!important;
}

@media only screen and (max-width: 500px) {
}

/* alinhamentos */

.mobile, .tablet {
    display: none;
}

.display-none {
    display: none!important;
}

.position-relative {
    position: relative!important;
}

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

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

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

.lg-text-right, .md-text-right {
    text-align: right;
}

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

.d-ml-auto {
    margin-left: auto;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-40 {
    margin-top: 40px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mr-20 {
    margin-right: 20px;
}

.mt-md-40 {
    margin-top: 40px;
}

.mb-0 {
    margin-bottom: 0px;
}

@media only screen and (max-width: 900px) {
    
    .d-ml-auto {
        margin-left: 0;
    }
    
    .lg-text-right {
        text-align: left;
    }
    
    .md-mt-60 {
        margin-top: 60px;
    }
    
    .mt-md-40 {
        margin-top: 0;
    }
    
    .no-tablet {
        display: none;
    }
}

@media only screen and (max-width: 500px) {
    
    .md-text-right {
        text-align: left;
    }
    
    .desktop {
        display: none;
    }
    
    .mobile {
        display: block;
    }
    
    .pd-sm-0 {
        padding-right: 0;
        padding-left: 0;
    }
}

/* estruturas */

.destacado {
    margin: 100px auto;
}

.titulo {
    margin-bottom: 60px;
}

.box {
    padding: 40px;
    background-color: #262161;
    width: auto;
    border-radius: 50px;
}

.box-creme {
    background-color: #f5e9d1;
}

.borda {
    padding: 40px;
    border: 2px solid #262161;
    width: auto;
    border-radius: 50px;
}

.borda-creme {
    border-color: #f5e9d1;
}

.bolha {
    padding: 5px;
    background-color: #262161;
    border-radius: 50px;
}

.radio {
    border-radius: 50%;
    text-align: center;
    height: 350px;
    width: 350px;
    padding: 25% 0;
}

.linha {
    content: '';
    display: block;
    margin: 5px 0 20px;
    border-bottom: 2px solid #fff;
}

.lista {
    font-size: 1rem;
    padding-left: 15px;
    list-style: none;
    position: relative;
}

.leg {
    padding-left: 15px;
}

.lista li::before, .leg::before {
    content: '_';
    height: 10px;
    width: 10px;
    display: block;
    left: 0;
    position: absolute;
}

.leg::before {
    left: 35px;
}

.col-titulo {
    padding: 40px 40px 10px;
}

@media only screen and (max-width: 900px) {
    .radio {
        padding: 20% 0;
    }
    
    .destacado {
        margin: 60px auto;
    }
}

@media only screen and (max-width: 500px) { 
    .destacado {
        margin: 40px auto;
    }
}

/* menu */

#menu {
    height: 540px;
}

#menu .col-12 {
    position: relative;
}

#menu a {
    transform: rotate(-90deg);
    height: 33%;
    width: 600px;
    position: absolute;
    left: -56%;
    top: 230px;
    text-align: right;
    text-decoration: none;
}

#menu a:hover {
    background-color: transparent;
    color: inherit;
    text-decoration: underline;
}

.progress {
    background-color: #f8f9fa;
}

.progress-bar {
    background-color: #3f3487;
}

.bg-conhecer {
    background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/entre-conhecer-e-consumir.png);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-brasil {
    background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/podcast-no-brasil.png);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-quem {
    background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/quem-ouve-podcast.png);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-rotina {
    background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/podcast-na-rotina.png);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}

@media only screen and (min-width: 2000px) {
    #menu {
        height: 750px;
    }
    
    #menu a {
        left: -16%;
    }
}

@media only screen and (min-width: 1900px) {
    #menu a {
        left: -36%;
    }
    
    .bg-conhecer, .bg-brasil, .bg-quem, .bg-rotina {
        background-position: bottom;
    }
}

@media only screen and (max-width: 1050px) {
    #menu a {
        left: -200px;
    }
}

@media only screen and (max-width: 500px) {
    #menu {
        height: auto;
    }
    
    #menu .col-12 {
        height: 250px;
    }

    #menu a {
        transform: rotate(0);
        position: relative;
        left: 15px;
        top: 20px;
        height: auto;
        width: 100%;
        text-align: left;
    }
    
    #menu .bg-conhecer a {
        top: -20px;
    }
    
    .bg-conhecer {
        background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/entre-conhecer-e-consumir-mobile.png);
    }
    
    .bg-brasil {
        background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/podcast-no-brasil-mobile.png);
    }
    
    .bg-quem {
        background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/quem-ouve-podcast-mobile.png);
    }
    
    .bg-rotina {
        background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/podcast-na-rotina-mobile.png);
    }
}

/* conteúdo */
#main {
    position: relative;
    height: auto;
    overflow-y: scroll;
    margin: 0;
    padding: 0;
}

#main > .row {
    margin-left: 0;
    margin-right: 0;
}

#resumo, #conhecer, #brasil, #quem, #rotina, #conclusao .row {
    padding: 120px 15px;
    position: relative;
}

#conhecer {
    background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/bg-conhecer.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 650px;
}

#brasil {
    background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/bg-brasil.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 900px;
}

#brasil .tipos {
    padding-left: 0;
    list-style: none;
    width: 100%;
    justify-content: center;
    margin: 40px 0;
    display: inline-flex;
    display: -ms-inline-flexbox;
}

#brasil .tipos li {
    margin-right: 10px;
    padding: 5px 15px;
}

#brasil .usuarios {
    padding-left: 0;
    list-style: none;
    width: 100%;
    justify-content: center;
    margin-bottom: 40px;
}

#brasil .usuarios li {
    margin-bottom: 20px;
}

.grafico {
    width: 100%;
    height: 50px;
    background-color: #f5e9d1;
    color: #262161;
    border-radius: 25px;
    padding-left: 20px;
}

#quem {
    background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/bg-quem.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 750px;
}

.genero {
    background-position: center;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 100px;
    margin-bottom: 40px;
}

.genero h1 {
    margin-bottom: 0;
}

.homem {
    background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/homens.png);
}

.mulher {
    background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/mulheres.png);
}

.mapa {
    position: relative;
    text-align: center;
}

.mapa .bolha {
    position: absolute;
    width: 200px;
    height: auto;
    padding: 20px;
}

.mapa .bolha p {
    margin-bottom: 0;
}

.bolha.norte {
    top: 0;
    left: 0;
}

.bolha.nordeste {
    top: 0;
    right: 0;
}

.bolha.sudeste {
    right: 0;
    bottom: 0;
}

.bolha.sul {
    left: 0;
    bottom: 0;
}

#rotina {
    background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/bg-rotina.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 750px;
}

@media only screen and (min-width: 2000px) {
    #conhecer {
        background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/bg-conhecer-big.png);
        padding-bottom: 600px;
    }
    
    #brasil {
        background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/bg-brasil-big.png);
        padding-bottom: 950px;
    }
    
    #quem {
        background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/bg-quem-big.png);
        padding-bottom: 700px;
    }
    
    #rotina {
        background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/bg-rotina-big.png);
        padding-bottom: 700px;
    }
    
}

@media only screen and (min-width: 1900px) and (max-width: 1990px) {
    #conhecer {
        background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/bg-conhecer-big.png);
        padding-bottom: 450px;
    }
    
    #brasil {
        background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/bg-brasil-big.png);
        padding-bottom: 700px;
    }
    
    #quem {
        background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/bg-quem-big.png);
        padding-bottom: 550px;
    }
    
    #rotina {
        background-image: url(https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-podcasts-de-ouro/_imagens/bg-rotina-big.png);
        padding-bottom: 550px;
    }
    
}

@media only screen and (max-width: 900px) {
    
    #resumo, #conhecer, #quem, #brasil, #rotina, #conclusao .row {
        padding: 60px 20px;
    }
    
    #conhecer {
        padding-bottom: 340px;
    }
    
    #brasil {
        padding-bottom: 540px;
    }
    
    #brasil .tipos {
        display: block;
    }
    
    #brasil .tipos li {
        margin-bottom: 20px;
        width: max-content;
    }
    
    #brasil .mr-20 {
        margin-right: 0;
    }
    
    #quem {
        padding-bottom: 440px;
    }
    
    .genero {
        padding: 80px 60px;
    }
    
    #rotina {
        padding-bottom: 400px;
    }
}

@media only screen and (max-width: 500px) {
    #main > .row > .col-12 {
        padding-left: 0;
        padding-right: 0;
    }
    
    .borda {
        width: 100%;
        padding: 20px;
    }
    
    .mapa .bolha {
        position: relative;
        width: 100%;
        margin-bottom: 20px;
    }
    
    #conhecer {
        padding-bottom: 140px;
    }
    
    #brasil {
        padding-bottom: 260px;
    }
    
    .grafico {
        width: max-content!important;
        padding-right: 20px;
    }
    
    #quem {
        padding-bottom: 220px;
    }
    
    #rotina {
        padding-bottom: 200px;
    }
    
}