@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);

/*GERAL----------------------------------------------------------*/

/*TEXTO---------------------------------------------------------------------------*/
h1 {
    font-size: 90px;
}

h2 {
    font-size: 28px;
}

p,
li,
a,
label {
    font-size: 20px;
}

button,
input,
select {
    font-size: 16px;
}

/*------------------------------*/

h1,
h2,
p,
button,
label,
input,
select,
li,
a {
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    /*Regular*/
    color: #333333;
    margin: 0;
}

/*Títulos*/
h1 {
    font-weight: 900;
    /*Black*/
}

h2,
.subTitleIndex {
    font-weight: 600;
    /*Semi-bold*/
}

/*Corpo*/
p,
li,
a {
    font-weight: normal;
    /*Light*/
    line-height: 28px;
    text-decoration: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.underline:hover {
    text-decoration: underline;
    cursor: pointer;
}

/*Botão*/
.button {
    width: fit-content;
    border-radius: 24px;
    padding: 8pt 24pt;
    filter: drop-shadow(4px 4px 4px #333333);
    transition: transform .5s ease;
    cursor: pointer;

    &:hover {
        transform: scale(1.05);
        background-color: #0087A1;
        color: #F9F6EE;
        filter: drop-shadow(4px 4px 4px #333333);
    }
}

/*Formulário*/
label {
    font-weight: 700;
    /*Bold*/
}

input,
select {
    font-weight: 300;
    /*Light*/
    opacity: 50%;
    padding: 16px;
    border-radius: 8pt;
    border: #333333 1px solid;
    padding: 16px;
    background-color: #F9F6EE;
}

input:valid,
select:valid {
    outline: 1px solid green;
    background-color: #F9F6EE;
    background-image: url(../source/img/icon/check.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: right;
}

input:invalid:focus,
select:invalid:focus {
    background-image: url(../source/img/icon/danger.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: right;
    outline: 1px solid red;
}

.req {
    color: red;
    font-weight: 300;
}

.form_error {
    display: none;
    font-size: 14px;
    font-weight: 300;
    color: red;
    margin-top: -15px;
}

#form_error_escol {
    margin-top: 5px;
}

.text_color_blue {
    color: #0087A1;
}

/*LOADING--------------------------------------------------------------------------*/
/* Loader ocupa a tela inteira */
#animacao_load {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 9999;

    .rect1 {
        color: #8CC63F;
        animation: changeColor 2s infinite;
        animation-delay: 1s;
    }

    .rect2 {
        color: #F9F6EE;
        animation: changeColor 2s infinite;
    }

    .rect3 {
        color: #BED62F;
        animation: changeColor 2s infinite;
        animation-delay: 0.5s;
    }

    .rect4 {
        color: #06A189;
        animation: changeColor 2s infinite;
        animation-delay: 1.5s;
    }
}

/* Animação do spinner */
@keyframes changeColor {
    0% {
        fill: #BED62F;
    }

    33% {
        fill: #8CC63F;
    }

    66% {
        fill: #06A189;
    }

    100% {
        fill: #F9F6EE;
    }
}

/*BARRA DE PROGRESSO SCROLL*/
/*https://pt.stackoverflow.com/questions/292906/barra-de-carregamento-baseado-no-scroll*/
#progress-container {
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;

    #progress-bar-container {
        width: 100%;
        height: 8px;
        background-color: rgba(51, 51, 51, 0.3);

        #progress-bar {
            height: 8px;
            background-image: -webkit-linear-gradient(90deg, #0087A1, #20BEC6, #6DC8B7, #06A189, #8CC63F, #BED62F, #E2E417, #F68B1E, #EF4023, #E21A22, #9E2D33);
            background-image: linear-gradient(90deg, #0087A1, #20BEC6, #6DC8B7, #06A189, #8CC63F, #BED62F, #E2E417, #F68B1E, #EF4023, #E21A22, #9E2D33);
            width: 0;
            border-radius: 50px;
        }
    }
}

/*CLASS PARA REVELAR CONTEÚDO AO FAZER SCROLL*/
.reveal {
    position: relative;
    opacity: 0;
    transition: 2s all ease;
}

.reveal.active {
    opacity: 1;
}

/*POSIÇÕES---------------------------------------------------------------------------*/
body {
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #F9F6EE;
}

.cursor-image {
    position: absolute;
    z-index: 1000;
    width: 32px;
    height: 32px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.cc_main {
    background-color: #F9F6EE;
    top: 127px;
}

.row {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.column {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.gutter {
    gap: 32px
}

.gutterMain {
    gap: 80px;
}

.margin {
    padding: 0 96px;
}

/*CURSOR---------------------------------------------------------------------------*/
#customCursor {
    display: block;
}

/*HAMBURGUER---------------------------------------------------------------------------*/
#hamburgerMenu {
    display: none;
    height: 48px;
    margin-left: 24px;
    cursor: pointer;
    transition: scale 0.5s ease-in-out;

    &:hover {
        scale: 1.1;
    }
}

#menuMobile {
    overflow: hidden;
    z-index: 1;
    position: fixed;
    top: 127px;
    left: 0;
    width: calc(100vw - 80px);
    min-height: calc(100vh - 127px - 80px);
    height: fit-content;
    background-color: #47720D;
    padding: 40px;

    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    /*gap: 16px;*/

    h2 {
        font-size: 2.5vh;
        font-weight: 900;
        line-height: normal;
        text-align: center;
        text-transform: uppercase;
        color: #F3FFAA;
        cursor: pointer;
        transition: scale 0.5s ease-in-out;

        &:hover {
            scale: 1.1;
        }
    }

}

.menuClose {
    display: none;
}

.menuOpen {
    display: flex;
}

.bodyScrollHidden {
    overflow: hidden;
}

/*HEADER---------------------------------------------------------------------------*/

.buttonCertificaHeader {
    border: #0087A1 2.5px solid;
    padding: 4px 12px;
    border-radius: 24px;
    cursor: pointer;
}

header {
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 1;
}

.menuContainer {
    display: inline-block;
}

.cc_nav {
    background-color: #F9F6EE;
    padding: 0 40px;
    justify-content: space-between;
    align-items: center;

    ul {
        justify-content: space-between;
        align-items: center;

        &:first-child {
            gap: 32px;
        }

        &:last-child {
            gap: 20px;
        }

        .cc_nav_img_logo {
            height: 120px;
            width: auto;
        }
    }

    a {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.5px;
        color: #333333;
        text-decoration: none;
        cursor: pointer;

        display: flex;
        align-items: center;

        &:hover {
            /* text-decoration: underline 2px #20BEC6; */
            color: #0087A1
        }

        .arrow_left {
            width: 14px;
            height: auto;
            padding-right: 6px;
        }

        .arrow_down {
            transform: rotate(-90deg);
            width: 14px;
            height: auto;
            padding-top: 6px;
        }
    }
}

.button_toogle,
.button_toogle_M {
    background-color: #DDEAED;
    border-radius: 12px;
    justify-content: space-evenly;

    .button_toogle_pt,
    .button_toogle_M_pt {
        background-color: #DDEAED;
        padding: 4px 12px;
        border-radius: 12px;
        transition: background-color 0.5s ease-in-out;
    }

    .button_toogle_en,
    .button_toogle_M_en {
        background-color: #DDEAED;
        padding: 4px 12px;
        border-radius: 12px;
        transition: background-color 0.5s ease-in-out;
    }
}

/*HEADER SCROLLED*/
.headerScrolled .cc_nav {
    background-color: rgb(51, 51, 51, 0.5);
    transition: background-color .5s ease;
}

.headerScrolled a {
    color: #F9F6EE;
    transition: color .5s ease;
}

/*Barra de Navegação*/
.dropdown {
    position: relative;
    height: 48px;
    align-content: center;

    .subnav {
        display: none;
        position: absolute;
        top: 100%;
        left: -15px;
        background-color: #F9F6EE;
        border: 0 1px 1px 1px solid #ddd;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        list-style: none;
        padding: 16px 0;

        z-index: 1000;

        a {
            padding: 8px 15px;
            white-space: nowrap;
            color: black;

            &:hover {
                color: #0087A1
            }
        }
    }

    &:hover .subnav {
        display: block;
    }
}

/*FAQS*/
#cc_footer_faqs{
    align-items: center;
    max-width: 1265px;
    margin: auto;
}
.cc_faqs{
      border: 1px solid #333333;  
      border-radius: 16px;
      padding: 24px;
      width: calc(100% - 48px);
      cursor: pointer;
      background-color: #F9F6EE;
      transition: filter .5s ease;

      &:hover{
        filter: drop-shadow(4px 4px 10px #333333);

    }
}
.cc_faq_pergunta{
    padding-bottom: 8px;
}
.cc_faq_resposta{
    border-top: 1px solid rgb(51, 51, 51, 0.5); 
    padding-top: 8px;
}
.respostaClose{
    display: none;
}
.respostaOpen{
    display: block;
}
#fraseFonte{
    font-size: 14px;
    line-height: 16px;
}
#fraseFonte a{
    font-size: 14px;
    text-decoration: underline;

}
/*FOOTER---------------------------------------------------------------------------*/
#cc_outras {
    p {
        height: 28px;
        padding-bottom: 0;
    }
}

.cc_footer {
    background-color: #F9F6EE;
    width: 100vw;
    overflow-x: hidden;
    position: relative;
    top: 127px;
    padding-bottom: 24px;
    padding-top: 80px;

    /*FORMULÁRIO CERTIFIQUE-SE*/
    h2:first-child {
        width: 100%;
        text-align: center;
    }

    .cc_footer_form {
        position: relative;
        padding-top: 0;
        padding-bottom: 48px;
        max-width: 1265px;
        margin: auto;
        justify-content: center;

        span {
            min-width: 400px;
        }
    }

    #div_submeter_button {
        width: 100%;
        display: flex;
        justify-content: center;

        .submit_button_form {
            width: 400px;
            position: relative;
            border-radius: 8pt;
            border: #0087A1 2.5px solid;
            background-color: rgb(0, 135, 161);
            color: #F9F6EE;

            &:hover {
                filter: drop-shadow(4px 4px 4px rgb(32, 190, 198, 0.75));
            }
        }
    }

    /*FUNDO PRETO CONTACTOS*/
    .cc_footer_contactos {
        background-color: #333333;
        padding-top: 80px;
        padding-bottom: 80px;
        justify-content: space-between;

        h2,
        .cc_footer_contactos_h3 {
            text-align: left;
            padding-top: 0;
            font-weight: 600;
            color: #F9F6EE;
        }

        .cc_footer_contactos_p {
            color: #F9F6EE;
            font-weight: 300;
        }

        div>div {
            gap: 8px;
        }

        .cc_mapaGPS {
            width: 50vw;

            .cc_imagemGPS {
                position: relative;
                width: 100%;
                filter: drop-shadow(7px 7px 10px #000000);
            }
        }
    }

    /*ESTRUTURA WEBSITE*/
    .cc_footer_indice {
        justify-content: space-between;

        a {
            font-weight: 400;

            p {
                font-size: 16px;
                color: #333333;
                max-width: 300px;
            }

            .indice_title {
                font-weight: 500;
                font-size: 16px;
                line-height: 20px;
                padding-bottom: 4px;
            }
        }

        div {
            max-width: 300px;
            padding-right: 16px;
        }
    }

    /*FINANCIMENTO E POLÍTICAS*/
    .cc_footer_financimaneto p {
        text-align: center;
        font-size: 16px;
    }

    #div_imagensFin {
        justify-content: center;
        align-items: center;
        row-gap: 8px;

        div {
            align-items: center;
            justify-content: center;
        }

        img {
            height: 40px;
            width: auto;
        }

        #imgPLA,
        #imgRepublica {
            height: 54px;
        }

        #imgUniao {
            height: 36px;
        }
    }

    #div_direitos {
        justify-content: space-between;

        div {
            justify-content: flex-start;
        }
    }

    .direitosReservados {
        font-size: small;
    }
}
}

/*LANDING---------------------------------------------------------------------------*/
.cc_landing_rvcc {
    min-height: calc(100vh - 127px);
}

.cc_landing_div {
    padding-top: 40px;
    /* min-width: 425px; */
    min-height: 75vh;
    flex-wrap: nowrap;
    justify-content: space-between;

    div {
        max-width: 750px;

        .cc_landing_h1 {
            padding-bottom: 4px;
        }

        .cc_landing_h3 {
            padding-bottom: 48px;
            font-weight: 600;
            color: #F9F6EE;
        }

        .cc_landing_h4 {
            font-weight: 600;
            padding-bottom: 4px;
        }

        .cc_landing_p1 {
            color: #F9F6EE;
            font-weight: 400;
            padding-bottom: 24px;
        }

    }
}

.cc_landing_img {
    min-width: 425px;
    min-height: calc(100vh - 127px);
    background-image: url("../source/img/landing_rvcc.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/*CERTIFIQUE-SE---------------------------------------------------------------------------*/
.cc_certifica {
    margin-bottom: 40px;
    text-align: center;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;

    .cc_certifica_p,
    .cc_certifica_p a {
        font-size: 16px;
        color: #F9F6EE;
    }

    .cc_certifica_p a {
        text-decoration: underline;
        cursor: pointer;

        &:hover {
            font-weight: 500;
            filter: drop-shadow(4px 4px 10px #333333);
        }
    }
}

/*GALERIA-------------------------------------------------------------------------------------*/
#cc_galeria {
    padding-top: 80px;
    padding-bottom: 80px;
    align-items: center;
    justify-content: space-between;

    #cc_galeria_div {
        max-width: 1253px;
        margin: auto;
    }

    #cc_galeria_div2 {
        display: none;
    }

    .cc_galeria_img {
        border-radius: 24px;
        background-color: #F9F6EE;
        filter: drop-shadow(7px 7px 10px #333333);
        transition: transform .5s ease;

        &:hover {
            transform: scale(1.05);
        }
    }

    .cc_galeria_img1 {
        max-width: 395px;
        max-height: 592.5px;
        min-width: calc(320px - 32px);
        min-height: calc(480px - 32px);
        width: 25vw;
        height: 37.5vw;
        aspect-ratio: auto 10 / 15;
    }

    .cc_galeria_img2 {
        max-width: 288px;
        max-height: 432px;
        min-width: calc(320px - 32px);
        min-height: calc(480px - 32px);
        width: 20vw;
        height: 30vw;
        aspect-ratio: auto 10 / 15;
    }

    .cc_galeria_img3 {
        max-width: 501px;
        max-height: 335px;
        min-width: calc(320px - 32px);
        min-height: calc(213px - 32px);
        width: 35vw;
        height: 23vw;
        aspect-ratio: auto 15 / 10;
    }

    #ver_mais {
        /* margin-top: 48px; */
        color: #F9F6EE;
        background-color: rgb(51, 51, 51, 0.05);
    }
}


/*MEDIA QUERIES----------------------------------------------------------*/
/* Medium devices (desktops, 1200px and up) */
@media only screen and (max-width: 1200px) {
    .margin {
        padding: 0 40px;
    }

    .menuContainer {
        display: none;
    }

    #hamburgerMenu {
        display: inline-block;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {

    #customCursor {
        display: none;
    }

    .gutter {
        gap: 48px;
    }


    h1 {
        font-size: 60px;
    }

    h2 {
        font-size: 24px;
        padding-bottom: 0;
    }

    p,
    li,
    a,
    label {
        /* font-size: 16px; */
    }

    button,
    input,
    select {
        font-size: 14px;
    }

    #cc_galeria {
        #cc_galeria_div {
            justify-content: center;
        }
    }

    .cc_footer {
        & .cc_footer_contactos {
            .cc_mapaGPS {
                width: 100vw;
            }
        }

        & .cc_footer_financimaneto {
            #div_direitos {
                gap: 4px;
            }

            #div_direitos>div {
                justify-content: center;
                column-gap: 24px;
                row-gap: 4px;
            }
        }

        .cc_footer_indice {
            justify-content: left;
            gap: 24px;
        }

    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
    .margin {
        padding: 0 16px;
    }

    .gutter {
        gap: 24px;
    }

    h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 22px;
    }

    p,
    li,
    a,
    label {
        font-size: 16px;
        line-height: 24px;
    }

    button,
    input,
    select {
        font-size: 14px;
    }

    .cc_nav {
        padding: 0 16px;

        & ul {
            &:first-child {
                gap: 8px;
            }

            .cc_nav_img_logo {
                height: 120px;
                width: auto;
            }

            .logoStatus {
                display: none;
            }
        }
    }

    .cc_main {
        /* top: 100px; */
    }

    .cc_footer {
        /* top: 100px; */

        .cc_footer_form {
            span {
                min-width: calc(100vw - 32px);
            }
        }

        #div_submeter_button {
            .submit_button_form {
                margin-bottom: 0;
            }
        }

        .cc_footer_indice {
            justify-content: center;

            div {
                width: 100%;
                text-align: center;
            }
        }
    }
  }

  .footer-title {
    font-size: 14px;
    color: #000000;
    font-weight: 600;
    font-family: Montserrat, sans-serif;
    /*Regular*/
    color: #333333;
}