:root{
    --cor_azulforte:rgb(111, 146, 173);
    --cor_contraste:rgb(0, 110, 255);
    --gray-light: #e1e1e1e1; 
    --azul_gestCCon:#1e88e5;
    --cor_azulEscuro:rgb(0, 39, 61);
    --gelo:rgba(0, 73, 107, .8);
}

::selection {
    background-color:var(--azul_gestCCon);color:#FFF;
}

::-webkit-scrollbar {
    width:15px;background-color:rgb(231, 231, 231);
}

::-webkit-scrollbar-thumb {
    width:15px;background-color:var(--azul_gestCCon);border-radius:20px;
}

body{
    background-image: url(../img/Logo_transp_GestCCon_opacity.png);
    background-size:auto 600px;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-attachment: fixed;
}

strong {
    color:var(--azul_gestCCon);
}

.container_topo {
    width:100%;display:flex;justify-content:center;background-color: rgb(231, 231, 231);
    height:35px;position: fixed;top:0;z-index:1;
}

.container_hero {
    width:100%;display:flex;justify-content:center;margin-top:50px;
}

.container_header {
    width:100%;display:flex;justify-content:center;background-color:#FFF;position: fixed;
    height:87.60px;top:35px;z-index:1;
}

.container_funcionalidades {
    width:100%;display:flex;justify-content:center;background-color:var(--gelo);
    padding-bottom:50px;
}

.container_faixa {
    width:100%;display:flex;background-color:var(--cor_azulEscuro);
    height:auto;padding-top: 30px;flex-direction: column;align-items:center;
    padding-bottom:60px;
    /* align-items:center; */
}

.videosFuncoes {
   width:70%;display:flex;justify-content:space-between;margin-top:20px;flex-wrap:wrap;
   align-items:center;
}

.videosFuncoes a {
    flex:1;margin-left:10px;margin-right:10px;
}

.videosFuncoes div {
    width:100%;height:250px;background-color:transparent;border-radius:10px;
}

.vidFunc1 {
    background-image:url(../img/seguranca_condominio.png);background-position:cover;
    background-repeat:no-repeat;background-size:100% auto;border-radius:10px;
    margin-bottom:20px;
}

.vidFunc2 {
    background-image:url(../img/correspondencias_condominio.png);background-position:cover;
    background-repeat:no-repeat;background-size:100% auto;border-radius:10px;
    margin-bottom:20px;
}

.vidFunc3 {
    background-image:url(../img/arquivo_digital_condominio.png);background-position:cover;
    background-repeat:no-repeat;background-size:100% auto;border-radius:10px;
    margin-bottom:20px;
}

.vidFunc1:hover, .vidFunc2:hover , .vidFunc3:hover {
    opacity:.6;background-position:center;transition:1s;
}

.container_contato {
    width:100%;display:flex;justify-content:center;background-color:var(--gelo);
}

.container_dispositivos, .container_faleConosco {
    width:100%;display:flex;justify-content:center;
}

.dispositivos {
    width:70%;
}

.container_faleConosco footer {
    width:70%;margin-bottom: 0;
}

.contact {
    width:100%;
}

.apresentacao span {
    color:var(--azul_gestCCon);
}

.logo {
    padding:10px;padding-left:0px;
}

.logo img{
    width: 100px;
}

.topo{
    column-gap: 20px;
    height:35px;
    z-index: 2; 
    position: fixed;
    width: 70%;
    /* padding-right:10px; */
    background-color: rgb(231, 231, 231);
}

.topo .whatsapp, .topo .email {
    column-gap:5px;
}

.topo a {
    color:gray;font-weight:600;
}

.linha-topo{
    height: 38px;
}   

.btopo{
    background-color: var(--cor_azulforte);
    padding: 0 40px !important;
    border-radius: 0;
    /* margin-right: 10px; */
}   

.header{
    width: 70%; 
    height: auto; 
    position:fixed;
    z-index: 1; 
    top:36px;
    /* padding-right:20px; */
}

.header .container{ 
    display: flex;justify-content: space-between;align-items: center;
}


.menu a{
    margin-left: 50px; 
    color:var(--gray-medium);
    font-size: 18px;
    font-weight:500;
    text-decoration: none;
}

.menu a:hover{ 
    color: var(--cor_contraste);
}

.testarAgora {
    background-color:#2ed370;color:#FFF;padding:10px;width:200px;border:1px solid #2ed370;
    font-weight:bold;border-radius:10px;
}

.testarAgora:hover {
    background-color:#FFF;color:#2ed370;
}

.contato_botao {
    background-color:transparent;color:#FFF;padding:10px;width:200px;border:1px solid transparent;
    font-weight:bold;border-radius:10px;text-decoration:underline;
}

.contato_botao:hover {
    background-color:transparent;color:#FFF;
}

.hero-section{
    width: 70%;margin-top:88px;background-color:transparent;
}

.hero-section .row{
    margin-top: 0px;
}

.funcionalidades{
    width: 70%;    
    height: auto;
}

.whatsapp2 {
    position:fixed;bottom:20px;right:20px;cursor: pointer;
}

.whatsapp2 img{
    width: 50px;
    height: 50px;   
}

.scrollspy-example{
    height: 700px;
}

.btn1, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7, 
.btn8, .btn9, .btn10, .btn11, .btn12, .btn13 {
    background-color:rgb(29 87 121);border-color: #a3a3a3;
    /* var(--cor_azulforte) */
    margin: 3px 50px 3px 30px;
    padding: 10px 30px 10px 30px;
    width: 100%;
    margin-left:0;
}

.btn.active {
    color: #feffff;background-color: #3b8dbd;
}

.btn:hover {
    color: #feffff;background-color: #3b8dbd;
}

.btn1div, .btn2div, .btn3div, .btn4div, .btn5div, .btn6div, .btn7div, 
.btn8div, .btn9div, .btn10div, .btn11div, .btn12div, .btn13div {
    opacity:.0;transition:1s;animation-name:animar;animation-duration:1s;animation-iteration-count:1s;
    animation-delay:0s;display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding-left:20px;padding-right:20px;
}

.btn1div h5, .btn2div h5, .btn3div h5, .btn4div h5, .btn5div h5, .btn6div h5, .btn7div h5, 
.btn8div h5, .btn9div h5, .btn10div h5, .btn11div h5, .btn12div h5, .btn13div h5 {
    font-weight:300;
}

.btn1div img, .btn2div img, .btn3div img, .btn4div img, .btn5div img, .btn6div img, .btn7div img, 
.btn8div img, .btn9div img, .btn10div img, .btn11div img, .btn12div img, .btn13div img {
    width:450px;height:auto;margin-top:20px;
}

.modelos {
    border-radius:20px;background-color:rgb(20 55 75) !important;
    /* background-color:rgb(0 39 61) !important; */
}

@keyframes animar {
    0%{opacity:.0;}
    10%{opacity:.1;}
    20%{opacity:.2;}
    30%{opacity:.3;}
    40%{opacity:.4;}
    50%{opacity:.5;}
    60%{opacity:.6;}
    70%{opacity:.7;}
    80%{opacity:.8;}
    90%{opacity:.9;}
    100%{opacity:1;}
}

.active {
    background-color: var(--cor_azulforte);
}

.abra{
    width:70%;height:200px;
    padding: 12px 0px 0 30px;background-color:transparent;
    font-size:large;display:flex;justify-content:space-between;align-items:center;
    padding-left:0;
}

.qrcode img {
    border-radius:10px;
}

.btnapp{
    margin-bottom: 30px;
    background-color: var(--cor_azulforte);
    padding: 10px 40px !important;
}

.ultimadiv {
    background-color:var(--cor_azulEscuro);display:flex;align-items:center;justify-content:center;
}

.ultimadiv p{
    padding: 10px;
}

.ultimadiv svg {
    width:25px;height:25px;margin-left:10px;
}

.Show{
    display: none !important;
}

.ShowFlex{
    display: flex !important;opacity:1;
}

.btn2div, .btn3div, .btn4div, .btn5div, .btn6div, .btn7div, 
.btn8div, .btn9div, .btn10div, .btn11div, .btn12div, .btn13div {
    display: none;
}

.contato {
    width:70%;
}

.enviar {
    background-color:var(--azul_gestCCon) !important;
}

.enviar:hover {
    background-color:var(--cor_azulEscuro) !important;
}

#mensagem {
    height:90px;
}

.carrosselBalls {
    width:100%;display:flex;justify-content:center;align-items:center;margin-top:20px;
}

.carrosselBalls div {
    width:10px;height:10px;border-radius:5px;background-color:var(--cor_azulforte);
    margin-left:10px;margin-right:10px;cursor: pointer;
}

.carrosselBalls div.active {
    background-color:#FFF;
}

.embreve {
    position: absolute;
    width: 260px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 25px;
    font-weight: bold;
    background-color: #4c9ccb54;
    border-radius: 20px;
    z-index: 1;
    font-style: italic;
    margin-top: 0px;
    height: 90px;
    margin-left: 270px;
}

.apps {
    display: flex;
    flex-direction: row;
    margin-left: 0px;
    height: 150px;
    justify-content: center;
    width: 100%;
    align-items: center;
    border-top: 1px solid var(--azul);
}

.apps .playstore {
    margin-bottom: 0px;
    cursor: pointer;
    width: 250px;
}

.apps .playstore:hover, .apps .applestore:hover {
	opacity:.6;
}

.apps .applestore {
    margin-left: 20px;
    width: 250px;
}


/* PARTE RESPONSIVO */

@media only screen and (max-width: 1700px) {
    .appsmobile {
        flex-wrap: wrap;width: 100%;align-items: center;justify-content: center;
    }

    .ms-4 {
        margin-left: 0rem !important;
    }
}

@media only screen and (min-width:1330px) and (max-width:1600px) {
    .apresentacao video {
        width:450px;height:600px;
    }
}

@media only screen and (min-width:1140px) and (max-width:1330px) {
    .apresentacao video {
        width:350px;height:500px;
    }

    .menu a {
        margin-left:30px;font-size:15px;
    }

    .btn1div, .btn2div, .btn3div, .btn4div, .btn5div, .btn6div, .btn7div, 
    .btn8div, .btn9div, .btn10div, .btn11div, .btn12div, .btn13div {
        display:flex;align-items:center;
    }

    .btn1div img, .btn2div img, .btn3div img, .btn4div img, .btn5div img, .btn6div img, .btn7div img, 
    .btn8div img, .btn9div img, .btn10div img, .btn11div img, .btn12div img, .btn13div img {
        width:100%;height:auto;
    }
}

@media only screen  and (min-width:999px)  and (max-width:1140px) {
    body {
        background-position: right bottom;background-image: url(../img/Logo_transp_GestCCon_opacity_invert.png);
        background-size:auto 400px;
    }

    .topo, .header, .hero-section, .funcionalidades, .abra, .contato, .container_faleConosco footer, .dispositivos {
        width:80%;
    }

    .apresentacao {
        flex-direction:column;
    }

    .apresentacao .col-6 {
        width:100%;
    }

    .apresentacao .col-6:last-child {
        text-align:left !important;
    }

    .apresentacao video {
        width:350px;height:500px;
    }

    .celfooter {
        width: 600px;
    }

    .menu a {
        margin-left:30px;font-size:15px;
    }

    .testarAgora {
        width:150px;
    }

    .btn1div, .btn2div, .btn3div, .btn4div, .btn5div, .btn6div, .btn7div, 
    .btn8div, .btn9div, .btn10div, .btn11div, .btn12div, .btn13div {
        display:flex;align-items:center;
    }

    .btn1div img, .btn2div img, .btn3div img, .btn4div img, .btn5div img, .btn6div img, .btn7div img, 
    .btn8div img, .btn9div img, .btn10div img, .btn11div img, .btn12div img, .btn13div img {
        width:450px;height:auto;
    }

    .funcionalidades_box .col-4:first-child {
        display:none !important;
    }

    .funcionalidades_box .col-7 {
        width:100% !important;
    }
}

@media only screen and (max-width:1056px) {
    .videosFuncoes {
        flex-direction:column;justify-content:center;
    }

    .videosFuncoes a {
        width:400px;
    }
}

@media only screen and (min-width:876px) and (max-width:999px){
    body {
        background-position: right bottom;background-image: url(../img/Logo_transp_GestCCon_opacity_invert.png);
        background-size:auto 400px;
    }

    .topo, .header, .hero-section, .funcionalidades, .abra, .contato, .container_faleConosco footer, .dispositivos {
        width:80%;
    }

    .container_faleConosco footer {
        margin-bottom:50px;
    }

    .apresentacao {
        flex-direction:column;
    }

    .apresentacao .col-6 {
        width:100%;
    }

    .apresentacao .col-6:last-child {
        text-align:left !important;
    }

    .apresentacao video {
        width:350px;height:500px;
    }

    .celfooter{
        display: none;
    }

    .menu{
        transform: translateX(-100%); 
        transition: 0.8s;
        background-color: var(--gray-light);
        position: fixed;
        top: 38px;
        left: 0;
        width: 75%;
        height: 100vh;
    }

    .menu-open{
        transform: translate(0); 
    }

    .menu a{
        display: block;
        margin: 0;
        padding: 15px 15px;
        margin-left: 30px;
        font-size:15px;
    }

    .testarAgora {
        width:150px;
    }

    .btn1div, .btn2div, .btn3div, .btn4div, .btn5div, .btn6div, .btn7div, 
    .btn8div, .btn9div, .btn10div, .btn11div, .btn12div, .btn13div {
        display:flex;align-items:center;
    }

    .btn1div img, .btn2div img, .btn3div img, .btn4div img, .btn5div img, .btn6div img, .btn7div img, 
    .btn8div img, .btn9div img, .btn10div img, .btn11div img, .btn12div img, .btn13div img {
        width:450px;height:auto;
    }

    .funcionalidades_box .col-4:first-child {
        display:none !important;
    }

    .funcionalidades_box .col-7 {
        width:100% !important;
    }

    .container_contato iframe {
        width:500px;height:300px;
    }

    .bar{ 
        width: 40px; 
        height: 3px; 
        margin-bottom: 3px; 
        background-color: black;
        border-radius: 3px; 
        transition: 0.8s; 
    }

    .x .bar:first-child{ 
        transform: rotate(45deg) translate(8px, 2px); 
    }

    .x .bar:last-child{ 
        transform: rotate(-45deg) translate(6px, 0); 
    }

    .x .bar:nth-child(2){ 
        opacity: 0;
        transform: translate(-150px);
    }


    @media (max-width:767px){
        h1{
            font-size: 24px !important;
        }
    }
}

@media only screen and (max-width:876px){
    body {
        background-position: right bottom;background-image: none;
        background-size:auto 400px;
    }

    .appsmobile div:not(.embreve), .appsmobile div iframe {
        width:100%;
    }

    .embreve {
        width:160px;margin-left:170px;height: 60px;font-size: 18px;
    }

    .apps .playstore, .apps .applestore {
        width: 150px;
    }

    .topo, .header, .hero-section, .funcionalidades, .abra, .contato, .container_faleConosco footer, .dispositivos {
        width:90%;
    }

    .container_faleConosco footer {
        margin-bottom:50px;
    }

    .apresentacao {
        flex-direction:column;
    }

    .apresentacao .col-6 {
        width:100%;
    }

    .apresentacao .col-6:last-child {
        text-align:left !important;
    }

    .apresentacao video {
        width:350px;height:500px;
    }

    .maocel {
        width:350px;height:auto;
    }

    .celfooter{
        display: none;
    }

    .menu{
        transform: translateX(-100%); 
        transition: 0.8s;
        background-color: var(--gray-light);
        position: fixed;
        top: 38px;
        left: 0;
        width: 75%;
        height: 100vh;
    }

    .menu-open{
        transform: translate(0); 
    }

    .menu a{
        display: block;
        margin: 0;
        padding: 15px 15px;
        margin-left: 30px;
        font-size:15px;
    }

    .testarAgora {
        width:150px;
    }

    .btn1div, .btn2div, .btn3div, .btn4div, .btn5div, .btn6div, .btn7div, 
    .btn8div, .btn9div, .btn10div, .btn11div, .btn12div, .btn13div {
        display:flex;align-items:center;
    }

    .btn1div h5, .btn2div h5, .btn3div h5, .btn4div h5, .btn5div h5, .btn6div h5, .btn7div h5, 
    .btn8div h5, .btn9div h5, .btn10div h5, .btn11div h5, .btn12div h5, .btn13div h5 {
        font-size:15px;
    }

    .btn1div img, .btn2div img, .btn3div img, .btn4div img, .btn5div img, .btn6div img, .btn7div img, 
    .btn8div img, .btn9div img, .btn10div img, .btn11div img, .btn12div img, .btn13div img {
        width:300px;height:auto;
    }

    .funcionalidades_box .col-4:first-child {
        display:none !important;
    }

    .funcionalidades_box .col-7 {
        width:100% !important;
    }

    .contato {
        padding:0 !important;padding-bottom:30px !important;
    }

    .container_contato iframe {
        width:100%;height:180px;
    }

    .abra .col-2  {
        display:none;
    }

    .abra .col-10 {
        width:100%;
    }

    .abra {
        height:auto;
    }

    .bar{ 
        width: 40px; 
        height: 3px; 
        margin-bottom: 3px; 
        background-color: black;
        border-radius: 3px; 
        transition: 0.8s; 
    }

    .x .bar:first-child{ 
        transform: rotate(45deg) translate(8px, 2px); 
    }

    .x .bar:last-child{ 
        transform: rotate(-45deg) translate(6px, 0); 
    }

    .x .bar:nth-child(2){ 
        opacity: 0;
        transform: translate(-150px);
    }

    .container_faixa h3 {
        font-size:15px;
    }

    .linkwhatsapp {
        display:block !important;
    }

    .carrosselBalls div {
        margin-left:5px;margin-right:5px;
    }

    .ultimadiv {
        font-size:12px;
    }


    @media (max-width:767px){
        h1{
            font-size: 24px !important;
        }
    }
}

@media only screen and (max-width:600px) {
    .videosFuncoes {
        flex-direction:column;justify-content:center;
    }

    .videosFuncoes a {
        width:90%;
    }

    .vidFunc1:hover, .vidFunc2:hover , .vidFunc3:hover {
        opacity:.6;background-position:cover;transition:1s;
    }
}