/*
Theme Name: Riverside
Author: Gusta Mociaro e Elton Hilsdorf Neves
Version: 1.0
*/


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&display=swap');

a{text-decoration:none}a:hover{text-decoration:none;}ol,ul{list-style:none}a,article,blockquote,body,dd,div,dl,dt,em,fieldset,footer,form,h1,h2,h3,h4,h5,h6,header,html,iframe,img,label,legend,li,main,nav,ol,p,section,span,ul{margin:0;padding:0;border:0}a,h1,h2,h3,h4,h5,h6,p,ul{font-size:1em;font-weight:400}

html{
    background-color: #fff;
}

body {
    font-size: 16px;
    color: #000;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    overflow-x: hidden;
}

body h1,
body h2,
body h3,
body h4 {
    font-family: "Roboto Slab", serif;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
}

.containerp {
    max-width: 1200px;
    margin: 0 auto 2rem;
}

.flex {
    clear: both;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.center {
    justify-content: center;
}

.between {
    justify-content: space-between;
}

header{
    padding: 30px 0;
}

#navegacao{
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
}

#navegacao a{
    color: #304A38;
    transition: all 0.3s;
}

#navegacao a:hover{
    color: #4E7F5D;
}

#navegacao p{
    font-weight: 600;
    color: #304A38;
}

#navegacao a.social span{
    background: #304A38;
    border-radius: 50%;
    aspect-ratio: 1;
    padding: 5px;
    color: #fff;
    display: inline-block;
}

#navegacao a.social span:hover{
    background: #4E7F5D;
}

header #links{
    justify-content: flex-end;
    gap: 10px;
    background: #DEDEDE;
    padding: 10px;
    width: fit-content;
    border-radius: 10px;
}

nav ul{
    gap: 1.4rem;
}

nav li a{
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
}

.uk-offcanvas-bar{
    background: #304A38;
}

.uk-offcanvas-bar img{
    margin-bottom: 30px;
}

.uk-nav-default>li>a{
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 20px;
}

#navegacao nav li.acessor a{
    background: #304A38;
    border-radius: 2rem;
    padding: 0.8rem 1rem;
    color: #fff;
    display: inline-block;
    transition: all 0.3s;

}

#navegacao nav li.acessor a:hover{
    background: #4E7F5D;
}

main #banner{
    position: relative;

}

main #banner img{
    width: 100%;
}

#pagina {
    padding: 50px 0;
    border:0 solid red;
}
/*
#pagina.quemsomos .flex {
    flex-direction: row-reverse;
} */

#pagina p {
    margin-bottom: 20px;
    border:0 solid blue;
}

.bolinhas{
    position: absolute;
    bottom: 0;
    width: 100%;
}

.uk-dotnav>*>*{
    border: 1px solid #fff;
}

.uk-dotnav>.uk-active>*{
    background: #fff;
}

#riverside{
    padding: 50px 0;
}

#riverside .flex{
    gap: 50px;
}

.texto{
    max-width: 50%;
}

.texto h2{
    font-size: 2rem;
    color: #304A38;
    text-transform: uppercase;
    font-weight: 600;
    text-wrap: balance;
    margin-bottom: 1rem;
}

.texto p{
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.texto h2::after{
    width: 5rem;
    height: 0.2rem;
    content: "";
    display: block;
    background: #304A38;
    margin-top: 1rem;
}

#diferenciais{
    padding: 0;
    /* padding-top: 50px; */
    padding-bottom: 50px;
    /* background-color: #304A38; */
}

#diferenciais .container{
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.diferencial{
    width: 300px;
}

.diferencial .ico{
    width: 100%;
    height: 150px !important;
    /* aspect-ratio: 1; */
    background: #F2F3F1;
    text-align: center;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    filter: drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.2));
    margin-bottom: 20px;
}

.diferencial h3{
    color: #304A38;
    font-size: 2.5rem;
    font-weight: 800;
    padding-top: 20px;
    margin-bottom: 5px;
    text-align: center;
    letter-spacing: 0.5;
}

.diferencial p{
    padding-bottom: 20px;
    margin-bottom: 5px;
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: 0.5;
    color: #4E7F5D;
}


#solucoes{
    padding: 0 0 50px;
}

#titsolucoes{
    background: url(images/bg-solucoes.jpg) center top no-repeat;
    background-size: cover;
    padding: 100px 50px;
    text-align: center;
    margin-bottom: 2rem;
}

#titsolucoes h2{
    background: #304A38 ;
    mix-blend-mode: hard-light;
    display: inline-block;
    padding: 20px 100px;
    color: #fff;
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;

}

#solucoes .container{
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.solucao{
    width: 300px;
}

.solucao .ico{
    width: 100%;
    aspect-ratio: 1;
    background: #F2F3F1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    filter: drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.2));
    margin-bottom: 20px;
}

.solucao .ico img{
    transition: all 0.3s;
}

.solucao .ico:hover img{
    scale: 1.1;
}


.solucao h3{
    color: #304A38;
    font-size: 1.2rem;
    padding: 0 20px;
    margin-bottom: 5px;
}

.solucao p{
    padding: 0 20px;
    margin-bottom: 5px;

}

#conta{
    padding: 0 20px 50px;
    text-align: center;
}

#conta h2{
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    background: #304A38;
    border-radius: 20px;
    padding: 10px 30px;
    display: inline-block;
}

#motivos{
    background: #243a2a url(images/bg-motivos.jpg) left top no-repeat;
    color: #fff;
    max-height: 603px;
    margin-top: 100px;
}

#motivos h2{
    color: #fff;
}

#motivos h2::after{
    width: 5rem;
    height: 0.2rem;
    content: "";
    display: block;
    background: #fff;
    margin-top: 1rem;
}

#motivos .verde{
    margin: 0 auto;
    position: relative;
    height: 400px;
}

#homem{
    position: absolute;
    bottom: 0;
    right: 0;
}

#homem img{
    max-height: 550px;
    height: 100%;
}

#motivos .texto{
    max-width: 50%;
}

.tarja{
    background: #304A38;
    height: 30px;
    border: 0;
    transform: translateY(-30px);
    mix-blend-mode: hard-light;
}

#motivos .cta{
    margin: 0;
    background: #4E7F5D;
    color: #fff;
    display: inline-block;
    font-weight: 600;
    padding: 10px 30px;
    border-radius: 20px;
}

#listamotivos{
    background: #8C9185;
    padding: 50px;
    translate: 0 -30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.motivo{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
}

#listamotivos .numero{
    background: #4E7F5D;
    color: #fff;
    padding: 10px;
    font-weight: 600;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#listamotivos .descricao{
    background: #304A38;
    padding: 10px;
    color: #fff;
    font-weight: 600;
    flex-grow: 1;
}

#ibovespa .titulo{
    align-items: stretch;
}

.tituloibovespa{
    background: #304A38;
    padding: 30px;
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 50%;
}

.tituloibovespa h2{
    color: #fff;
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 600;
}

.tituloibovespa h2::after{
    width: 5rem;
    height: 0.2rem;
    content: "";
    display: block;
    background: #4E7F5D;
    margin-top: 1rem;
}

.destaqueibovespa{
    background: #8C9185;
    padding: 30px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    width: 50%;
}

#valordolar, #valorbitcoin{
    width: 130px;
    text-align: right;
}

#variacao{
    gap: 20px;
}

#variacaoprincipal{
    font-size: 3rem;
    color: #fff;
    padding: 10px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px
}

.subiu{
    background: #4E7F5D;
}

.subiu::before{
    content: "⇧";
}

.caiu{
    background: #770A17;
}

.caiu::before{
    content: "⇩";
}

#pontosprincipal{
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
}

#historico p{
    color: #fff;
    margin-top: 10px;
}

#ibovespa .quadros{
    background: #F1F0F0;
    padding: 20px;
    box-sizing: border-box;
    translate: 0 -10px;
    gap: 20px;
    flex-wrap: wrap;
}

#boxgrafico{
    flex-grow: 1;
    width: 40%;
    min-width: 400px;
}

#boxgrafico canvas{
    width: 100%;
}

#tabela{
    flex-grow: 1;
    width: 40%;
    min-width: 400px;
    display: flex;
    gap: 20px;
}

.altas, .baixas{
    width: 50%;
}

.altas h3, .baixas h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #9E9999;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.altas h3::before{
    content: "⇧";
    background: #4E7F5D;
    padding: 5px 15px;
    color: #fff;
    font-weight: 900;
    margin: 10px;
}

.baixas h3::before{
    content: "⇩";
    background: #770A17;
    padding: 5px 15px;
    color: #fff;
    font-weight: 900;
    margin: 10px;
}

.alta, .baixa, .outra{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px #243a2a;
}

.outra{
    font-size: 1.2rem;
}
.nome{
    font-weight: 600;
    color: #304A38;
    width: 75px;
}

.variacao{
    width: 80px;
    text-align: right;
    font-weight: 600;
}

.alta .variacao{
    color: #4E7F5D;
}

.baixa .variacao{
    color: #770A17;
}

.valor{
    width: 75px;
    text-align: right;
}

.outras{
    width: 40%;
    min-width: 400px;
}

#contato{
    padding: 50px 0;
}

#contato .containerp{
    align-items: stretch;
}

#contato .mapa{
    background: #8C9185;
    padding: 20px;
    width: 50%;
    position: relative;
}

#contato .mapa p{
    color: #fff;
    font-weight: 600;
    margin-bottom: 20px;
}

#contato .mapa iframe{
    width: 100%;
    aspect-ratio: 16 / 9;
}

#contato .mapa #selosmapas{
    position: absolute;
    bottom: -20px;
    left: 20%;
}

#formulario{
    background: #304A38;
    padding: 20px;
    text-align: center;
    width: 50%;
}

#formulario form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: left;

}


#formulario h2{
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

input, textarea{
    border: 0;
    padding: 10px;
    margin-bottom: 10px;
    display: block;
}

form label{
    color: #fff;
}

form div{
    margin-bottom: 10px;
}

input[type='checkbox']{
    display: inline;
}

footer{
    padding: 50px 0;
    background: #304A38;
}

footer .center{
    gap: 80px;
}

footer .dados{
    max-width: 300px;
    text-align: center;
    color: #fff;
}

footer .dados .links{
    margin:20px 0 ;
    justify-content: center;
    gap: 10px;
}

footer .dados .links a{
    color: #fff;
}

footer .dados .links a.social span{
    background: #8C9185;
    border-radius: 50%;
    aspect-ratio: 1;
    padding: 5px;
    color: #fff;
    display: inline-block;
}

.cta a{
    color: #fff;
    background: #4E7F5D;
    padding: 5px 15px;
    border-radius: 15px;
    text-transform: uppercase;
    font-weight: 600;
}

.membros h3{
    font-size: 10px;
    font-weight: 400;
    margin: 5px 0;
    text-transform: uppercase;
    color: #fff;
}

.membros p{
    margin-bottom: 5px;
    color: #fff;
    font-size: 10px;
}

#modal{
    max-width: 500px;
    margin: 0 auto;
    background: #304A38;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    border: 5px solid #D9D9D9;
}

#modal h2{
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 600;
}

#modal p{
    color: #fff;
    margin-bottom: 10px;
}







    @media screen and (max-width: 1480px) {
        .container, .containerp{
            margin: 0 20px;
        }


    }

    @media screen and (max-width: 1260px) {
    #motivos .verde{
        margin: 0 20px;
    }

    #ibovespa .quadros{
        flex-direction: column;
    }

    #boxgrafico, #tabela{
        width: 100%;
    }
}

    @media screen and (max-width: 1040px) {
    nav li a{
        font-size: 1rem;
    }

    #motivos .texto{
        width: 40%;
    }

    #listamotivos{
        translate: 0;
        margin-bottom: 20px;
    }

    #contato .mapa iframe{
        aspect-ratio: 1;
    }

    #contato .mapa #selosmapas{
        left: 20px;
    }
    }

    @media screen and (max-width: 860px) {
        #riverside .flex{
            flex-direction: column;
        }

        #riverside .flex:nth-child(2){
            flex-direction: column-reverse;
        }

        .texto{
            max-width: none;
            text-align: center;
        }

        .texto h2{
            font-size: 1.4rem;
        }

        .texto h2::after{
            margin: 20px auto;
        }

        #homem{
            display: none;
        }

        #motivos .texto{
            max-width: none;
            width: 100%;
        }

        #motivos .verde{
            justify-content: center;
        }

        #motivos{
            background-size: cover;
        }

        #ibovespa .titulo{
            flex-direction: column;
        }

        .tituloibovespa, .destaqueibovespa{
            width: auto;
            justify-content: center;
            align-items: center;
        }

        footer .center{
            flex-wrap: wrap;
        }
    }

    @media screen and (max-width: 750px) {
        #contato .containerp{
            flex-direction: column-reverse;
            margin: 0;
        }

        #formulario, #contato .mapa{
            width: auto;
        }

    }

    @media screen and (max-width: 680px) {
        header .between{
            flex-direction: column;
            gap: 50px;
        }

        .menu-burger{
            position: absolute;
            top: 0px;
            right: 20px;
        }

        #logo{
            margin-top: 50px;
        }

        #titsolucoes{
            padding: 0;
        }

        #titsolucoes h2{
            font-size: 1.2rem;
            padding: 20px;
        }

        .solucao h3, .solucao p{
            text-align: center;
        }

        .altas, .baixas{
            width: 100%;
        }

        #tabela{
            flex-wrap: wrap;
        }

        }

        @media screen and (max-width: 500px) {
            .tituloibovespa h2, #variacaoprincipal, #pontosprincipal{
                font-size: 1.4rem;
            }

            #boxgrafico{
                width: 95%;
                max-width: 95%;
                min-width: auto;
            }

            #tabela, .outras{
                min-width: auto;
                width: 100%;

            }

            #ibovespa .quadros{
                padding: 0px 20px;
                margin: 0;
            }

            .outra{
                font-size: 1rem;
                width: 100%;
            }

            #contato .mapa #selosmapas img{
                width: 40%;
            }


        }

        @media screen and (max-width: 380px) {
        #navegacao p, footer .dados .links p{
            display: none;
        }

        .membros{
            text-align: center;
        }
    }