.colorGreen {
    color: #51DB61;
}

.colorDarkBlue {
    color: #0E52AE;
}

.colorBlue {
    color: #00BAFF;
}

.colorOrange {
    color: #FDA623;
}

.colorYellow {
    color: #FBD104;
}

.colorYellow2 {
    color: #FFEE00;
}

.colorGray {
    color: #707070;
}

.colorWhite {
    color: #FFF;
}

.colorTeam {
    color: #00467F;
}

.disabled {
    opacity: .5;
}

#carousel .carousel-indicators [data-bs-target], #main-goals .carousel-indicators [data-bs-target] {
    border: 1px solid white;
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

#carousel .carousel-indicators .active, #main-goals .carousel-indicators .active {
    background-color: #00457C !important;
}

.bg-l {
    background: url("../images/pagina_projetoJapi/borda_emformato_L.svg") no-repeat 0 0 / contain;
    padding-bottom: 5px;
    padding-left: 10px;
}

.vh-centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.v-centered {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.btn-left-icon, .btn-right-icon {
    text-decoration: none;
    padding: .5rem 1rem;
    width: 12rem;
    border: none;
    border-radius: 20px;
}

.btn-left-icon span, .btn-right-icon span {
    font-size: 1rem !important;
}

.btn-left-icon i {
    margin-right: 8px;
}

.btn-right-icon i {
    margin-left: 8px;
}

.px-cont {
    width: 50%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.title-w-hr {
    width: fit-content;
}

.title-w-hr-center {
    width: fit-content;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.title-w-hr hr, .title-w-hr-center hr {
    opacity: 1;
    margin-top: 0.5rem;
}

.py-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
}

.cont-default {
    padding: 5rem 8rem;
}

#desktop {
    #home {
        .img1 {
            background: url("../images/pagina_projetoJapi/bg_inicio_part1.webp") no-repeat 0 0 / cover;
            min-height: 100vh;

            .main-txt {
                position: absolute;
                top: 40%;
            }

            .btn-continue {
                position: absolute;
                bottom: 5%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-family: OpenSansLight, serif;
                color: white;

                /* Layout Properties */
                width: 8.5rem;
                height: 2.5rem;
                /* UI Properties */
                border: 2px solid #FFFFFF;
                background-color: rgb(0 0 0 / 30%);;
                border-radius: 25px;

                span {
                    font-size: 1rem;
                }

                i {
                    font-size: 1.5rem;
                }
            }
        }

        .img2 {
            background: url("../images/pagina_projetoJapi/bg_inicio_part2.webp") no-repeat 0 0 / cover;
            min-height: 100vh;

            .main-txt {
                font-size: 1.5rem;
                line-height: 1;
                position: absolute;
                top: 40%;

                .t1 {
                    line-height: 1.2;
                    width: 35%;
                }

                .t2 {
                    line-height: 1.2;
                    width: 26%;
                }
            }
        }

        .img3 {
            background: url("../images/pagina_projetoJapi/bg_inicio_part3.webp") no-repeat 0 0 / cover;
            min-height: 100vh;

            .colorWhite {
                margin-top: 50vh;
                transform: translateY(-50%);
                font-size: 1.5rem;
                line-height: 1.1;

                .d-inline-block.extraBold {
                    font-size: 2rem;
                }
            }
        }

        .img4 {
            background: url("../images/pagina_projetoJapi/bg_inicio_part4.webp") no-repeat 0 0 / cover;
            min-height: 100vh;

            .main-div {
                padding: 0 10rem;
                margin-top: 50vh;
                transform: translateY(-50%);

                div.colorOrange {
                    border-left: 2px solid;
                    border-bottom: 2px solid;
                    border-color: #FDA623;
                    padding-left: 3px;
                    padding-bottom: 3px;
                }

                div.colorWhite {
                    font-size: 1.2rem;
                    line-height: 1;

                    .col-4 {
                        padding-right: 9rem;
                    }

                    .light {
                        font-size: 0.8rem;

                        span {
                            color: #FDA623;
                        }
                    }
                }
            }
        }

        .carousel-control-next, .carousel-control-prev {
            width: 8%;
        }

        /*.carousel-control-next{
            right: 2rem;
        }
        .carousel-control-prev{
            left: 2rem;
        }*/
    }

    #techno-monit {
        background: url("../images/pagina_projetoJapi/bg_tecnologiaemonitoramento.webp") no-repeat 0 0 / cover;
        min-height: 85vh;

        .main-txt {
            line-height: 1.2;

            .s1 {
                font-size: 2.8rem;
            }

            .s2 {
                font-size: 2.5rem;
            }
        }

        #carousel-monitoring, #carousel-monitoring-mobile {

            .carousel-indicators {
                position: unset;
                margin-top: 2.5rem;
                margin-left: 0;
                margin-right: 0;
                justify-content: flex-start !important;
            }

            .carousel-indicators [data-bs-target] {
                opacity: 1;
                border-radius: 50%;
                width: 12px;
                height: 12px;
            }

            .carousel-indicators .active {
                background-color: #FDA623 !important;
            }

            .carousel-item {
                line-height: 1.2;

                .colorOrange {
                    font-size: 1.4rem;
                }
            }

            .sub {
                font-size: .9rem;
            }

            .w-75 {
                width: 90% !important;
            }
        }

        #swiperTechnology {
            .swiper-slide--one {
                background: url("../images/pagina_projetoJapi/mapa-de-localizacao-projeto-japi-01.webp") no-repeat 0 0 / cover;
            }

            .swiper-slide--two {
                background: url("../images/pagina_projetoJapi/mapa-de-localizacao-projeto-japi-02.webp") no-repeat 0 0 / cover;
            }

            .swiper-slide--three {
                background: url("../images/pagina_projetoJapi/mapa-de-localizacao-projeto-japi-03.webp") no-repeat 0 0 / cover;
            }

            .swiper-slide--four {
                background: url("../images/pagina_projetoJapi/mapa-de-localizacao-projeto-japi-04.webp") no-repeat 0 0 / cover;
            }

            .fs-4 {
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                line-height: 1.2;
                width: 30%;
            }

            @media (max-width: 1600px) {
                .fs-4 {
                    width: 35%;
                }
            }
            @media (max-width: 1470px) {
                .fs-4 {
                    width: 50%;
                }
            }

            .swiperBox {
                height: 3.5rem;
                transform: translateX(-50%);

                .swiper-pagination-bullet {
                    opacity: 1;
                    background-color: white;
                }

                .swiper-pagination-bullet-active {
                    background-color: #FBD104;
                }

                .swiper-button-prev, .swiper-button-next {
                    i {
                        color: white;
                    }
                }
            }
        }

        @media (max-width: 1600px) {
            .col-4 {
                width: 41.66666667%
            }

            .col-8 {
                width: 58.33333333%
            }
        }
    }

    #main-goals {
        background: url("../images/pagina_projetoJapi/bg_atuacaoLAMCE.webp") no-repeat 0 0 / cover;
        min-height: 100vh;

        .carousel-indicators {
            max-width: 200px;
            margin: 0 auto;
        }

        .txt-shadow {
            text-shadow: 0 3px 6px #000000;
        }

        .itm1 {
            .col-4 {
                font-size: 1.1rem;
                line-height: 1.3;
                padding-right: 6rem;

                .mb-5 {
                    margin-bottom: 2rem !important;
                }
            }

            .col-8 {
                img {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            @media (max-width: 1700px) {
                .col-4 {
                    width: 41.66666667%
                }

                .col-8 {
                    width: 58.33333333%
                }
            }
            @media (max-width: 1450px) {
                .col-4 {
                    width: 50%
                }

                .col-8 {
                    width: 50%
                }
            }
        }

        .itm2 {

            .icon-text {
                padding-right: 18rem;

                div.d-flex {
                    margin-bottom: 1.5rem;

                    i {
                        font-size: 1.3rem;
                        margin-right: 1rem;
                        padding-top: .3rem;
                    }
                }
            }

            .icon-text2 {
                div.d-flex {
                    i {
                        font-size: 1.3rem;
                    }
                }
            }

            @media (max-width: 1500px) {
                .icon-text {
                    padding-right: 10rem;
                }

            }
            @media (max-width: 1280px) {
                .col-6 {
                    margin-left: 8.33333333%;
                    width: 41.66666667%
                }

                .icon-text {
                    padding-right: 6rem;
                }

            }
        }

        .carousel-control-next, .carousel-control-prev {
            width: 8%;
        }
    }

    #team {
        background-color: #EEECEC;
        padding-bottom: 6rem;

        img[img50] {
            transform: translateY(-50%);
            margin-bottom: -3%;
        }

        .row {
            width: 100%;
            padding: 0 33rem;
        }

        @media (max-width: 1615px) {
            .row {
                padding: 0 27rem;
            }
        }
        @media (max-width: 1470px) {
            .row {
                padding: 0 18rem;
            }
        }
        @media (max-width: 1150px) {
            .row {
                padding: 0 13rem;
            }
        }
    }

    #explain {
        background: url("../images/pagina_projetoJapi/bg_porquejapi.webp") no-repeat 0 0 / cover;
        min-height: 60vh;
    }

    #partners {
        min-height: 60vh;
    }

    #photos {
        background: url("../images/pagina_projetoJapi/mapa_regiaodeestudo.webp") no-repeat 0 0 / contain;
        background-color: #F5F5F5;
        min-height: 70vh;

        .container {
            padding: 0 20rem;
        }
    }

    @media (max-width: 1280px) {
        .cont-default {
            padding: 5rem 3rem;
        }
    }

    #modalPrjImages {
        background: url("../images/pagina_projetoJapi/fundofotos.webp") no-repeat 0 0 / cover;

        .carousel-indicators {
            margin: 2rem 0;
            width: 300px;
            left: 50%;
            transform: translateX(-50%);

            .carousel-control-next, .carousel-control-prev {
                position: unset;
            }

            .carousel-control-next {
                padding-left: 1rem;
            }

            .carousel-control-prev {
                padding-right: 1rem;
            }
        }

        .carousel-indicators [data-bs-target] {
            background-color: #91C7EF;
            opacity: 1;
            border-radius: 50%;
            width: 15px;
            height: 15px;
        }

        .carousel-indicators .active {
            background-color: #FDA623;
        }

        .modal-body {
            min-height: 70vh;

        }

        .modal-bg {
            background-color: rgba(0, 0, 0, 0.38);
            border: 1px solid #FFFFFF;
        }

        .modal-footer {
            border: none;

            a {
                width: unset;
                border: 1px solid #fff;
            }
        }
    }

    #modalGallery {
        .modal-content {
            background-color: rgba(0, 0, 0, .5);
        }

        .controls-img {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);

            button {
                padding: 0;
                text-align: center;
                background: 0 0;
                border: 0;
                transition: opacity .15s ease;
            }
        }

        .modal-footer {
            border: none;

            a {
                border: 1px solid white;
                width: unset;
            }
        }
    }
}

#mobile {
    #home_mobile {

        .carousel-control-next, .carousel-control-prev {
            top: unset;
            bottom: 3rem;
        }

        .img1 {
            background: url("../images/pagina_projetoJapi/bg_inicio_part1_mobile.webp") no-repeat 0 0 / cover;
            min-height: 80vh;

            .w-75 {
                position: absolute;
                padding-top: 75vh;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        .img2 {
            background: url("../images/pagina_projetoJapi/bg_inicio_part2_mobile.webp") no-repeat 0 0 / cover;
            min-height: 80vh;

            .w-75 {
                position: absolute;
                padding-top: 75vh;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        .img3 {
            background: url("../images/pagina_projetoJapi/bg_inicio_part3_mobile.webp") no-repeat 0 0 / cover;
            min-height: 80vh;

            .w-75 {
                position: absolute;
                padding-top: 75vh;
                left: 50%;
                transform: translate(-50%, -50%);

                .w-25 {
                    width: 10% !important;
                }

                .colorYellow {
                    font-size: 1.2rem;
                }
            }
        }

        .img4 {
            background: url("../images/pagina_projetoJapi/bg_inicio_part4_mobile.webp") no-repeat 0 0 / cover;
            min-height: 80vh;

            .w-75 {
                position: absolute;
                padding-top: 75vh;
                left: 50%;
                transform: translate(-50%, -50%);

                .light {
                    font-size: .8rem;
                }

                .col-12 {
                    span:not(.light) {
                        color: #FDA623;
                    }
                }
            }
        }
    }

    #techno-monit_mobile {
        background: url("../images/pagina_projetoJapi/bg_tecnologiaemonitoramento_mobile.webp") no-repeat 0 0 / cover;

        .main-txt {
            font-size: 1.6rem;
            line-height: 1.1;
        }

        .phrases {
            min-height: 600px;
        }

        #carousel-monitoring, #carousel-monitoring-mobile {
            line-height: 1.3;

            .light.sub {
                font-size: .8rem;
            }

            .carousel-indicators {
                position: unset;
                margin-top: 2.5rem;
                margin-left: 0;
                margin-right: 0;
                justify-content: center !important;
            }

            .carousel-indicators [data-bs-target] {
                opacity: 1;
                border-radius: 50%;
                width: 12px;
                height: 12px;
            }

            .carousel-indicators .active {
                background-color: #FDA623 !important;
            }


        }

        #swiperTechnology_mobile {
            .swiper-slide--one {
                background: url("../images/pagina_projetoJapi/mapa-de-localizacao-projeto-japi-01.webp") no-repeat 0 0 / cover;
            }

            .swiper-slide--two {
                background: url("../images/pagina_projetoJapi/mapa-de-localizacao-projeto-japi-02.webp") no-repeat 0 0 / cover;
            }

            .swiper-slide--three {
                background: url("../images/pagina_projetoJapi/mapa-de-localizacao-projeto-japi-03.webp") no-repeat 0 0 / cover;
            }

            .swiper-slide--four {
                background: url("../images/pagina_projetoJapi/mapa-de-localizacao-projeto-japi-04.webp") no-repeat 0 0 / cover;
            }

            .swiperBox {
                .swiper-pagination {
                    position: unset;
                    width: unset;
                    transform: unset;
                    margin: 0 2rem;
                }

                .swiper-button-next, .swiper-button-prev {
                    position: unset;
                    margin-top: .1rem;
                    opacity: 1;

                    i {
                        color: white !important;
                    }

                }

                .swiper-pagination-bullet-active {
                    background: #FBD104 !important;
                }

                .swiper-pagination-bullet {
                    background: #FFFFFF;
                    opacity: 1;
                }
            }
        }
    }

    #main-goals_mobile {
        .carousel-control-next, .carousel-control-prev {
            top: unset;
            bottom: 3.75rem;
        }

        .space-bts {
            padding-bottom: 10rem !important;
        }

        #carousel-goals_mobile {
            .itm1, .itm2, .itm3 {
                background: url("../images/pagina_projetoJapi/bg_atuacaoLAMCE_mobile.webp") no-repeat 0 0 / cover;

            }

            .itm2 {
                .icon-text {
                    div {
                        margin-bottom: 3rem;
                        line-height: 1.2;
                    }

                    i {
                        font-size: 1.3rem;
                        margin-right: 1rem;
                    }
                }
            }

            .itm3 {
                .icon-text2 {
                    i {
                        margin-top: .6rem;
                    }
                }
            }
        }
    }

    #team_mobile {
        background-color: #EEECEC;

        img[img50] {
            transform: translateY(-50%);
            position: relative;
            z-index: 2;
            margin-bottom: -15%;
        }

        .mb-5 {
            margin-bottom: 2.5rem !important;
        }
    }

    #explain_mobile {
        background: url("../images/pagina_projetoJapi/bg_porquejapi_mobile.webp") no-repeat 0 0 / cover;
        min-height: 70vh;

        .w-75 {
            width: 85% !important;
        }
    }

    #photos_mobile {
        background: url("../images/pagina_projetoJapi/mapa_regiaodeestudo_mobile.webp") no-repeat 0 0 / auto;
        background-color: #F5F5F5;
        padding-top: 11rem !important;
    }

    #partners_mobile {
        min-height: 60vh;
    }

    #modalScenary {
        .modal-body {
            background: url("../images/pagina_projetoJapi/bg_modal_cenariosambientais_mobile.webp") no-repeat 0 0 / cover;
        }
    }

    #modalPrjImages_mobile {
        .modal-body {
            background: url("../images/pagina_projetoJapi/bg_modal_imgsdaregiao_mobile.webp") no-repeat 0 0 / cover;
        }

        .carousel-indicators {
            margin: 2rem 0;

            .carousel-control-next, .carousel-control-prev {
                position: absolute;
                transform: translateY(15%);
            }

            .carousel-control-next {
                padding-left: 1rem;
            }

            .carousel-control-prev {
                padding-right: 1rem;
            }
        }

        .carousel-indicators [data-bs-target] {
            background-color: #91C7EF;
            opacity: 1;
            border-radius: 50%;
            width: 15px;
            height: 15px;
        }

        .carousel-indicators .active {
            background-color: #FDA623;
        }
    }

    #modalGallery_mobile {
        .modal-content {
            background-color: rgba(0, 0, 0, .5);
        }

        .controls-img {
            position: absolute;
            bottom: 15%;
            left: 50%;
            transform: translateX(-50%);

            button {
                padding: 0;
                text-align: center;
                background: 0 0;
                border: 0;
                transition: opacity .15s ease;
            }
        }

        .modal-footer {
            border: none;

            a {
                border: 1px solid white;
                width: unset;
            }
        }
    }

    .modal-footer {
        background-color: #6B6969;

        a {
            border: 1px solid white;
            width: unset;
        }
    }
}

@media (max-width: 1024px) {
    #desktop {
        display: none;
    }

    body {
        color: #fff;
    }
}

@media (min-width: 1025px) {
    #mobile {
        display: none;
    }

    .opacity {
        background: transparent;
    }

    body {
        color: #fff;
    }
}

@media (min-width: 1600px) {
    .itm2 .right-border {
        border-right: 2px solid rgba(253, 166, 35, 0.7);
    }
}