/*!
Theme Name: lp-beneficio-visao
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lp-beneficio-visao
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

lp-beneficio-visao is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
    font-family: 'Inter', sans-serif !important;
}

:root{
    --cor-azul-escuro: #0E2050;
    --cor-azul-claro: #305BF2;
    --col-azul-celeste: #D9E6FD;
    --cor-azul-branco: #E8ECFB;
    --cor-branco: #FFF;
    --cor-preto: #000;
    --cor-laranja: #FF6B00;
}

.cw{
    color: var(--cor-branco);
}

body{
    font-size: 16px;
    line-height: 100%;
    background-color: var(--cor-azul-branco);
    color: var(--cor-azul-escuro) !important;
}

header#masthead {
    position: absolute;
    width: 100%;
    z-index: 3;
}

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

.captacao-lead {
    /* height: 576px; */
    height: 720px;
    min-width: 100%;
    background-color: var(--cor-azul-escuro);
    background-image: url(src/images/bg-header.jpg);
    background-position-x: calc(50% - 160px);
    background-repeat: no-repeat;
    color: var(--cor-branco);
}

.saude-visual-em-dados {
    min-height: 100vh;
    margin-top: 160px;
}

section.saude-visual-em-dados h2 {
    color: var(--cor-azul-claro);
    margin-bottom: 4px;
    font-size: 48px;
    line-height: 100%;
}

section.saude-visual-em-dados h2 span{
    color: var(--cor-azul-claro);
    margin-bottom: 8px;
    font-size: 24px;
}

.blue-eyes{
    background-image: url(src/images/img-eyes.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.acidentes-miopia {
    padding: 80px 0;
    background-image: url(src/images/img-miopia-acidentes.png);
    background-position: calc(50% - 32px) center;
    background-repeat: no-repeat;
    background-size: contain;
}
.ganho-de-produtividade{
    padding: 80px 0;
}

.ganho-de-produtividade .flex-container{
    background-color: var(--col-azul-celeste) ;
}

.ganho-de-produtividade h3{
    color: var(--cor-azul-claro);
    font-weight: 700;
}

.ganho-de-produtividade img {
    display: block;
    margin: 32px calc(50% - 226px) 0;
}

section.saude-visual-em-dados h4 {
    color: var(--cor-azul-escuro);
}

section.saude-visual-em-dados h4 span{
    color: var(--cor-azul-claro);
    font-weight: 800;
}

section.saude-visual-em-dados h5 {
    color: var(--cor-azul-claro);
    font-weight: 800;
}

section.eyecare{
    padding-bottom: 80px;
}

section.eyecare h4{
    font-weight: 700;
}

section.eyecare img{
    display: block;
}

section.eyecare h4 span{
    color: var(--cor-azul-claro);
}

section.eyecare .ceo, .coo{
    text-align: center;
}

section.eyecare .ceo img, .coo img {
    margin: 0 calc(50% - 174px) -32px;
}

.line-sep-left {
    background-image: url(src/images/line-sep.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 605px;
}

.line-sep-right {
    background-image: url(src/images/line-sep.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 615px;
}

section.bv img {
    display: block;
    margin-bottom: 32px;
}

section.bv .bg-azul-claro{
    background-color: var(--cor-azul-claro);
    padding: 32px;
    color: var(--cor-branco);
}

section.bv .bg-azul-claro h6{
    margin-bottom: 0;
}

section.mandala {
    background-image: url(src/images/img-mandala.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: calc(50% + 39px) center;
    padding: 80px 0;
}

section.mandala .col-3.ta-right{
    text-align: right;
}

section.mandala .col-3 div{
    margin-bottom: 32px;
}

section.mandala .col-3 img{
    display: inline-table;
    margin-bottom: 0;
}

section.mandala .col-3 h5{
    color: var(--cor-azul-claro);
    font-weight: 800;
}

.recusros {
    background-image: url(src/images/bg-recursos.png);
    position: relative;
    background-position: center;
}
.recusros::before{
    content: "";
    position: absolute;
    background-color: var(--cor-azul-claro);
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 0;
}

.abrangencia-nacional{
    background-color: var(--cor-azul-escuro);
}

p,h1,h2,h3,h4,h5,h6{
    margin-bottom: 16px;
}

h1{
    font-size: 48px;
    line-height: 150%;

}
h2{ 
    font-size: 40px;
    line-height: 150%;
}
.fs-40{
    font-size: 40px;
    line-height: 140%;
}
h3{ 
    font-size: 32px;
    line-height: 150%;
}
.fs-32{
    font-size: 32px;
    line-height: 150%;
}
h4{ 
    font-size: 28px;
    line-height: 150%;
}

h5{ 
    font-size: 24px;
    line-height: 150%;
}
h6{ 
    font-size: 20px;
    line-height: 150%;
}
strong {
    font-weight: 800;
}
p{ 
    font-size: 16px;
    line-height: 150%;
}

.fz-32{
    font-size: 32px;
    line-height: 150%;
}

.descricao-do-site img {
    display: block;
    margin-top: 32px;
}

.descricao-do-site::before{
    content: "";
    display: block;
    height: 184px;
    position: absolute;
    border: 1px solid var(--cor-laranja);
    bottom: -112px;
}

.form{
    background-color: var(--cor-azul-escuro);
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 55px 0px rgba(0,0,0,0.34);
    -moz-box-shadow: 0px 0px 55px 0px rgba(0,0,0,0.34);
    box-shadow: 0px 0px 55px 0px rgba(0,0,0,0.34);
    padding: 16px;
    position: relative;
    top: 100px !important;
}
.flex-container{
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    position: relative;
    z-index: 1;
}
.space-between{
    justify-content: space-between;
}
.align-items-center{
    align-items: center;
}
.col-1{
    width: 100%;
    max-width: 70px;
    margin: 16px;
}

.col-2{
    width: 100%;
    max-width: 171px;
    margin: 16px;
}

.col-3{
    width: 100%;
    max-width: 273px;
    margin: 16px;
}

.col-3-p16{
    width: 100%;
    max-width: 273px;
    padding: 16px;
}

.col-4{
    width: 100%;
    max-width: 375px;
    margin: 16px;
}

.col-5{
    width: 100%;
    max-width: calc(476px - 32px);
    margin: 16px;
}

.col-6{
    width: 100%;
    max-width: 578px;
    margin: 16px;
}

.col-6-p16{
    width: 100%;
    max-width: 578px;
    padding: 16px;
}

.col-7{
    width: 100%;
    max-width: 679px;
    margin: 16px;
}

.col-10{
    width: 100%;
    max-width: 985px;
    margin: 16px;
}
.col-10-p48{
    width: 100%;
    max-width: 985px;
    padding: 48px;
}

.col-12{
    width: 100%;
    max-width: 1188px;
    margin: 16px;
}

label {
    display: block;
    padding: 4px 0;
    font-size: 14px;
}

input {
    display: block;
    padding: 12px 16px;
    font-size: 16px;
    width: -webkit-fill-available;
    border-radius: 4px;
    border: none;
    margin: 8px 0;
    display: -webkit-inline-box;
}

select {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
    width: -webkit-fill-available;
    border-radius: 4px;
    border: none;
    margin: 8px 0;
    display: -webkit-inline-box;
}

input[type="submit"] {
    text-align: center;
    display: block;
    background-color: var(--cor-azul-claro);
    color: var(--cor-branco);
    border-bottom: 2px solid;
    border-color: var(--cor-preto);
    margin-bottom: 0;
}

input[type="submit"]:hover {
    background-color: var(--cor-laranja);
}

.page-template-page-home h1.entry-title{
    color: var(--cor-azul-escuro);
}

.page-template-page-home h1.entry-title span {
    color: var(--cor-azul-claro);
}
.section-home{
    padding-top: 160px;
}

.section-home{
    padding-top: 160px;
}

section.recusros{
    padding: 80px;
}

section.recusros h4{
    font-weight: 800;
}

section.recusros ul.lista-recursos {
    margin: 16px 0;
}

section.recusros ul.lista-recursos li {
    background-image: url(src/images/icon-check.svg);
    background-repeat: no-repeat;
    background-position: left;
    line-height: 150%;
    padding: 8px 0 8px 39px;
}

section.abrangencia-nacional{
    padding: 80px 0;
    color: var(--cor-branco);
}

section.abrangencia-nacional img {
    display: -webkit-inline-box;
    float: left;
    margin-right: 16px;
    top: 2px;
    position: relative;
}

section.abrangencia-nacional h4{
    font-weight: 800;
}

section.abrangencia-nacional .col-4 img{
    float: left;
    margin-left: 16px;
}

img.icon-2mi {
    height: 60px;
}

img.icon-oculos {
    margin: 14px 0;
}

img.icon-desconto {
    margin: 4px 0;
}

section.abrangencia-nacional .col-4 h5{
    font-weight: 800;
    margin-bottom: 0;
}

section.abrangencia-nacional .col-2{
    -webkit-box-shadow: inset -1px 0px 0px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset -1px 0px 0px 0px rgba(255,255,255,1);
    box-shadow: inset -1px 0px 0px 0px rgba(255,255,255,1);
}
section.abrangencia-nacional .col-4.cb{
    -webkit-box-shadow: inset -1px 0px 0px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset -1px 0px 0px 0px rgba(255,255,255,1);
    box-shadow: inset -1px 0px 0px 0px rgba(255,255,255,1);
}

section.abrangencia-nacional .apoiadores {
    justify-content: space-around;
    align-items: center;
}

section.abrangencia-nacional .apoiadores > li {
    height: -webkit-fill-available;
}

section.abrangencia-nacional .parceiros {
    justify-content: space-around;
    align-items: center;
}

section.abrangencia-nacional .parceiros > li {
    height: -webkit-fill-available;
}

section.abrangencia-nacional .clientes {
    justify-content: space-around;
    align-items: center;
    margin-top: 24px;
}

section.abrangencia-nacional .clientes > li {
    height: -webkit-fill-available;
}

section.depoimentos{
    background-image: url(src/images/bg-depoimentos.jpg);
    background-position: center;
}

.jc-center{
    justify-content: center;
}

section.depoimentos .col-10-p48{
    background-color: var(--col-azul-celeste);
}

section.depoimentos .col-10-p48 blockquote{
    text-align: center;
    color: var(--cor-azul-escuro);
}

section.depoimentos .col-10-p48 blockquote h6{
    font-weight: 800;
}

section.depoimentos .col-10-p48 blockquote p::before{ 
    content: "";
    display: block;
    height: 26px;
    width: 34px;
    background-image: url(src/images/aspas-init.png);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    margin-right: 16px;
    margin-top: -13px;
}

.after{
    margin-left: 4px;
}

section.beneficios h4 {
    background: var(--cor-azul-claro);
    padding: 16px;
    color: white;
    display: inline-block;
    font-weight: 800;
}

section.beneficios .beneficios-list li{
    font-weight: 800;
    background-image: url(src/images/icon-check-blue.png);
    background-repeat: no-repeat;
    background-position: left;
    padding: 8px 0 8px 43px;
    line-height: 150%;
    font-size: 20px;
    display: block;
}

.cta{
    background-color: var(--col-azul-celeste);
    padding: 80px 0 0;
    text-align: center;
}

.cta h3{
    color: var(--cor-azul-claro);
    font-weight: 800;
}

.bt-laranja{
    margin-top: 16px;
    padding: 16px;
    background-color: var(--cor-laranja);
    border-radius: 4px;
    color: var(--cor-branco);
    font-size: 16px;
    display: inline-block;
    border-bottom:2px solid #7A3300;
    text-decoration: none;
    position: relative;
    bottom: -42px;
    font-weight:800;
}

.bt-laranja:hover{
    background-color: var(--cor-azul-escuro);
}


footer{
    margin-top: 80px;
}

footer .flex-container{
    border-top: solid 1px var(--cor-azul-escuro);
    padding: 40px 0;
}

footer .redes {
    justify-content: space-around;
    align-items: center;
    display: flex;
    margin-top: 16px;
}

footer .redes  > li {
    height: -webkit-fill-available;
}

footer h6{
    font-weight: 800;
}

footer .col-6 a {
    display: inline-block;
    line-height: 150%;
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--cor-azul-claro);
}

footer .col-6 a:hover {
    color: var(--cor-laranja);
}

a.header-logo{
    display: inline-block;
}

.logo-white{
    background-image: url(src/images/logo-eyecare-beneficio-visao.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 363px;
    height: 63px;
}

.logo-black{
    background-image: url(src/images/logo-beneficio-visao-footer.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 317px;
    height: 68px;
}

.sticky{
    position: fixed !important;
    background-color: var(--cor-azul-branco);
    -webkit-box-shadow: 0px 0px 55px 0px rgba(0,0,0,0.13);
-moz-box-shadow: 0px 0px 55px 0px rgba(0,0,0,0.13);
box-shadow: 0px 0px 55px 0px rgba(0,0,0,0.13);
}


.bt-header {
    background-color: var(--cor-laranja);
    display: inline-block;
    color: var(--cor-branco);
    padding: 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 800;
    border-bottom: 2px solid var(--cor-preto);
}

.bt-header:hover {
    background-color: var(--cor-azul-claro);
}


.site-branding > .col-2 {
    display: flex;
    align-items: center;
    justify-content: end;
}

.dn{
    display: none;
}

.db{
    display: inline-block;
}

.mobile-display{
    display: none;
}

.desktop-display{
    display: block;
}

.desktop-display-cta{
    display: inline-block;
}

section.bottomBar {
    background: var(--col-azul-celeste);
    width: 100%;
    height: 64px;
    position: fixed;
    bottom: 0;
    z-index: 9;
    display: none;
}


.bt-footer {
    background-color: var(--cor-laranja);
    display: inline-block;
    color: var(--cor-branco);
    padding: 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 800;
    border-bottom: 2px solid var(--cor-preto);
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: calc(50% - 80px);
}

.bt-footer:hover {
    background-color: var(--cor-azul-claro);
}


/**************************************************************************************************/


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

    html{
        display: revert !important;
    }
    
    .flex-container{
        display: unset;
        flex-direction:column;
        width: 100%;
    }

    .mobile-display{
        display: block;
    }

    .desktop-display{
        display: none;
    }

    .desktop-display-cta{
        display: none;
    }

    /*HEADER*/

    .logo-white {
        width: 178px;
        height: 32px;
        background-size: contain;
        margin: 0 auto;
    }

    a.header-logo{
        display: unset;
    }

    .captacao-lead {
        min-width: unset;
        padding-top: 88px;
        height: calc(324px - 88px);
    }

    h1{
        text-align: center;
    }

    .descricao-do-site::before {
        display: none;
    }

    .descricao-do-site img {
        display: block;
        margin: 32px auto;
    }

    .col-5 {
        width: unset;
        max-width: calc(476px - 32px);
        margin: 16px;
    }

    .form {
        top: unset !important;
        display: none;
    }

    .col-4 {
        width: unset;
        max-width: 100%;
        margin: 16px;
    }

    .fs-40 {
        font-size: 28px;
        line-height: 110%;
    }

    /*SAUDE EM DADOS*/

    .saude-visual-em-dados {
        min-height: unset;
        margin-top: 48px;
        text-align: center;
        position: relative;
        padding-bottom: 0;
    }

    .col-12 {
         width: unset; 
         max-width: unset; 
        margin: 16px;
    }


    section.saude-visual-em-dados h4 {
        color: var(--cor-azul-escuro);
        font-size: 24px;
    }

    .saude-visual-em-dados::before{
        content: "";
        position: absolute;
        z-index: 0;
        width: 360px;
        height: 660px;
        background-image: url(src/images/bg-acidentes-mobile.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right center;
        right: 0;
        top: 488px;
    }

    .col-3 {
        width: unset;
        max-width: unset;
        margin: 32px 16px;
    }

    .acidentes-miopia {
        padding: unset;
        display: block;
        background: none;
        margin-top: 312px;
        padding-bottom: 180px;
    }

    .saude-visual-em-dados::after{
        content: "";
        position: absolute;
        z-index: 0;
        width: 360px;
        height: 660px;
        background-image: url(src/images/bg-miopia-mobile.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right center;
        left: 0;
        bottom: -112px;
    }
    
    /*PRODUTIVIDADE*/
    .ganho-de-produtividade {
        padding: 48px 0;
        background-color: var(--col-azul-celeste);
        margin: 48px 0;
    }

    .col-6 {
        width: unset;
        max-width: 578px;
        margin: 16px;
    }

    .ganho-de-produtividade h3{
        font-size: 28px;
        text-align: center;
    }

    .ganho-de-produtividade h6{
        font-size: 20px;
        text-align: center;
    }

    .ganho-de-produtividade img {
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    /*eyecare*/

    section.eyecare {
        padding-bottom: unset;
        text-align: center;
    }

    section.eyecare img{
        display: block;
        margin: 0 auto;
    }

    section.eyecare img.ari {
        display: block;
        margin: 0 auto;
        left: -21px;
        position: relative;
    }

    section.eyecare .col-3-p16 p{
        margin-top: -32px;
    }

    .col-3-p16{
        width: unset;
        max-width: unset;
    }

    /*bv*/

    .bv{
        margin: 48px 0;
        text-align: center;
    }

    .bv .logo-bv{
        width: 60%;
        display: block;
        margin: 16px auto 32px;
    }

    section.bv .bg-azul-claro {
        background-color: var(--cor-azul-claro);
        padding: 16px;
        color: var(--cor-branco);
        display: block;
        width: auto;
        margin: 32px 16px;
    }

    section.mandala {
        background: none;
    }

    section.mandala .col-3.ta-right {
        text-align: left;
    }
    section.mandala .col-3 {
        width: unset;
        max-width: unset;
        margin: 32px 16px;
    }

    section.mandala .col-3 img {
        float: left;
    }

    section.mandala .col-3 h5 {
        font-size: 20px;
        width: calc(100% - 56px);
        text-align: left;
        float: right;
    }

    section.mandala .col-3 p {
        text-align: left;
        display: block;
        width: calc(100% - 56px);
        margin-left: 56px;
    }

    .mandala-img {
        height: 360px;
    }

    .img-mandala-mobile{
        display: block;
        margin-top: -42px;
    }

    /*recursos*/

    section.recusros {
        padding: unset;
        margin: 48px 0 0;
        padding: 32px 0;
        background: unset;
        background-color: var(--cor-azul-escuro);
        text-align: center;
    }

    .recusros::before {
        display: none;
    }
    
    section.recusros h4{
        font-size: 24px;
    }

    section.recusros .col-5{
        padding-top: 32px;
    }

    section.recusros .col-5 h4{
        font-size: 24px;
        color: var(--cor-branco);
    }


    section.recusros ul.lista-recursos {
        margin: 16px 0;
    }

    section.recusros ul.lista-recursos li{
        text-align: left;
    }
    /*abrangencia*/
    section.abrangencia-nacional {
        padding: 0 0 16px;
        color: var(--cor-branco);
        display: -webkit-box;
    }

    section.abrangencia-nacional .flex-container {
        width: 100%;
        display: inline-block;
    }

    section.abrangencia-nacional .flex-container .col-12{
        width: calc(100% - 32px);
    }

    section.abrangencia-nacional .flex-container .col-12 h4{
        font-size: 24px;
        text-align: center;
    }

    section.abrangencia-nacional .flex-container .col-4 img{
        display: block;
        float: unset;
        margin: 0 auto 16px;
    }

    section.abrangencia-nacional .flex-container .col-4 h5{
        display: block;
        font-size: 20px;
        text-align: center;
    }

    section.abrangencia-nacional .flex-container .col-4 p{
        display: block;
        text-align: center;
        margin-bottom: 32px;
    }

    section.abrangencia-nacional .flex-container .col-2 {
        text-align: center;
        margin-bottom: 32px;
        width: calc(100% - 32px);
        max-width: unset;
        box-shadow: unset;
    }

    section.abrangencia-nacional .flex-container .col-2 ul li{
        display: grid;
        width: 100%;
    }

    section.abrangencia-nacional .flex-container .col-2 ul li img{
        display: block;
        margin: 0 auto;
    }

    section.abrangencia-nacional .flex-container .col-4 {
        text-align: center;
        margin-bottom: 32px;
        width: calc(100% - 32px);
        max-width: unset;
        box-shadow: unset;
    }

    section.abrangencia-nacional .flex-container .col-4 ul {
        display: flex;
        flex-direction: row;
    }

    section.abrangencia-nacional .flex-container .col-6 {
        text-align: center;
        margin-bottom: 32px;
        width: calc(100% - 32px);
        max-width: unset;
        box-shadow: unset;
    }

    section.abrangencia-nacional .flex-container .col-6 ul {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    section.abrangencia-nacional .flex-container .col-6 ul li{
        height: unset;
    }

    section.abrangencia-nacional .flex-container .col-6 ul li img{
        margin: 0 auto;
        display: block;
    }


    section.depoimentos {
        background: unset;
        width: calc(100% - 96px);
    }

    section.beneficios img{
        display: block;
        width: 100%;
    }

    .dasa{
        display: none;
    }

    section.bottomBar {
        display: block !important;
    }

    footer {
        margin-bottom: 104px;
    }

    .cta{
        padding: 80px 0;
    }

    .form-mobile{
        color: var(--cor-azul-branco);
        display: block;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        position: fixed;
        z-index: 99;
        background-color: var(--cor-azul-escuro);
        padding: 16px;
        display: none;
    }

    .close, svg{
        background: none;
        border: none;
        padding: 0;
        fill: var(--cor-laranja);
    }

    .close{
        margin-bottom: 16px;
    }


  }

 .dblock{
    display: block !important;
 }


#form-mobile {
    overflow-y: auto;
}