/*-------------------------------*/
/*1º SECÇÃO CONTAINER*/
#mapa_botanico_image {
    padding: 20px 15px 100px 15px;
    height: auto;
    /*margin-bottom: 100px;*/
}

#mapa_botanico_image h1 {
    height: auto;
    margin-bottom: 30px;
}

#localizacao_title_container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    position: relative;
}

/*-------------------------------*/
/*TEXTO+MAPA CONTAINER*/
#mapa_botanico_image_conteudo {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    position: relative;
    width: 100%;
    height: 95vh;
}

/*-------------------------------*/
/*MAPA*/
#svgMapaContainer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
}

#mapa_botanico_image svg {
    height: 95vh;
    width: fit-content;
}

#localizacao_jbuc {
    width: 18px;
    height: 22px;
    margin-right: 5px;
}

.modulo_pequeno_texto {
    width: 18px;
    height: auto;
}

.sp_mapa_botanico:hover {
    cursor: pointer;
}

.sp_mapa_botanico_close {
    display: none;
}

#hover_mapa_container {
    position: fixed;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /*flex-wrap: wrap;*/

    width: fit-content;
    height: 55px;
    border-radius: 10px 10px 10px 0;
    background-color: #66CCCC;
    z-index: 1;
}

#hover_mapa_container > p {
    color: #333333;
    font-size: 15px;
    padding: 2px 20px 2px 20px;
}

/*TEXTO INTERATIVIDADE CONTAINER*/
#texto_interatividade_mapa {
    position: absolute;
    bottom: 0;
    /*width: 450px;*/
    width: fit-content;
    padding-top: 30px;
}

/*DIV 1*/
.nomeComum {
    color: #757575;
}

#textBigContainer {
    /*margin-bottom: 150px;*/
}

.textOpen {
    display: block;
}

.textClose {
    display: none;
}

#textoDesktop {
    /*padding-bottom: 40px;*/
    width: 450px;
}

#textoMobile {
    display: none;
}

/*DIV 2*/
#legendaBigContainer {
    display: block;
    /*position: absolute;*/
    /*bottom: 0;*/
    /*width: 750px;*/
}

#legendaTextTitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333399;
    width: fit-content;
    margin-bottom: 0;
    padding: 20px 0;
}

#legendaMapaTitle {
    font-size: 1rem;
    width: fit-content;
    margin-bottom: 0;
    padding-bottom: 0;
    text-decoration: underline solid #333333 !important;
    -webkit-text-decoration-line: underline !important;
    -webkit-text-decoration-style: solid !important;
    -webkit-text-decoration-color: #333333 !important;
    -webkit-text-decoration-thickness: 1px !important;
}

#legendaMapaTitle:hover {
    color: #66CCCC;
    cursor: pointer;
    text-decoration: underline solid #66CCCC !important;
    -webkit-text-decoration-line: underline !important;
    -webkit-text-decoration-style: solid !important;
    -webkit-text-decoration-color: #66CCCC !important;
    -webkit-text-decoration-thickness: 1px !important;
}

.legendaModulo {
    font-size: 1rem;
    padding-bottom: 10px;
}

.legendaOpen {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    position: relative;
}

.legendaClose {
    display: none;
}

#legendaMapaContainer div:first-child {
    padding-right: 40px;
}

#legendaMapaContainer div p {
    padding-bottom: 0;
    font-size: 1rem;
}

/*-------------------------------*/
/*LEGENDA------------------------*/
.info_numero {
    display: block;
}

.info_numero_close {
    display: none;
}

.modulo_close {
    display: none;
}

.legenda_text_hover:hover {
    color: #66CCCC;
    cursor: pointer;
}

/*-------------------------------*/
/*INFO SPECIE*/
/*SECÇÃO IMAGEM JBUC + NOME LATIM*/
#specie_container {
    position: relative;
    display: none;
    justify-content: space-between;
}

#specie_container_div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /*margin-bottom: 40px;*/
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#specie_latin_name {
    font-size: 2.5rem;
    font-style: italic;
    margin-bottom: 5px;
    /*margin-right: 15px;*/
}

#specie_taxo {
    /*font-size: 2.5rem;*/
    font-size: 1.5rem;
    font-weight: 400;
    color: #333333;
}

.mySlides_JBUC {
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}

#specie_image_jbuc_container {
    max-width: none;
    position: relative;
    width: 100%;
    height: 100vh;
    margin: auto;
}

.specie_image_jbuc {
    width: 100%;
    height: 95%;
    object-fit: cover;
    object-position: bottom;
}

#specie_image_jbuc_1, #specie_image_jbuc_2 {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    padding: 16px;
    left: 0;
    top: 50%;
    margin-top: -22px;
    /*top: 55%;
    width: auto;
    margin-top: -22px;*/
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0, 0, 0, 50%);
}

/* Position the "next button" to the right */
.next {
    /*right: 16px;*/
    left: calc(100% - 41.16px);
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    color: #333399;
    background-color: rgba(255, 255, 255, 50%);
}

/*-------------------------------*/
.fullHeight {
    height: 100vh;
}

/*SECÇÃO INFO SPECIE*/
#specie_jbuc_container {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 100vh;
}

#info_specie_container {
    max-width: 600px;
    min-width: 300px;
}

#specie_name {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

#specie_region {
    width: 110%;
    font-size: 1.3rem;
    font-weight: 400;
    color: #333333;
}

.specie_text {
    width: 100%;
}

#family_taxo_container {
    min-width: 300px;
    margin: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#family_taxo_container p {
    padding-bottom: 5px;
}

.family_taxo_2container {
    text-align: center;
    padding: 10px 0 10px 0;
}

.family_taxo_2container > p:first-child {
    /*margin-bottom: 10px;*/
}

/*-------------------------------*/
/*TEXTO SUBLINHADO PARA SABER MAIS*/
.button_infoText {
    font-size: 1.1rem;
    color: #333333;
    background-color: #66CCCC;
    padding: 1px 5px 1px 5px;
    border-radius: 5px;
    cursor: pointer;
}

.span_infoText {
    text-decoration: underline solid 1.7px #66CCCC;
    -webkit-text-decoration-line: underline !important;
    -webkit-text-decoration-style: solid !important;
    -webkit-text-decoration-color: #66CCCC !important;
    -webkit-text-decoration-thickness: 1.7px !important;
    cursor: pointer;
}

.span_infoText:hover {
    text-decoration-color: #333399;
}

.aText {
    color: #333333;
    font-size: 1.1rem;
    text-decoration: underline;
    -webkit-text-decoration-line: underline !important;
}

.aText:hover {
    color: #66CCCC;
}

/*-------------------------------*/
/*SECÇÃO IMAGEM ANATÓMICA*/
#specie_image_anatomy_container {
    max-width: none;

    display: none;
    position: relative;
    width: 100vw;
    height: 95vh;
    margin: auto;
    padding: 20px 0 100px 0;
}

#specie_image_anatomy {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#backgroundContainerAnatomy {
    display: none;
    background-color: rgba(255, 255, 255, 30%);
    position: absolute;
    left: 0;
    top: 20px;
    width: 100%;
    height: calc(100% - 120px);
}

#specie_image_anatomy_button {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#legenda_anatomy_container {
    position: absolute;
    width: 7.3%;
    height: auto;
    padding-bottom: 100px;
    bottom: 1vh;
    left: 1vw;
}

#buttonAnatomiaContainer {
    position: absolute;
    top: 30px;
    left: 10px;
}

/*-------------------------------*/
/*BACKGROUND IMAGE INFO TEXT CONTAINER*/
#backgroundImage_InfoText_Container {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    z-index: -1;
    background-image: url("/2023/insideout/assets/img/background_info_text.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

/*----------------------------------------------------------*/
/*MEDIA QUERIES---------------------------------------------*/
/*769px — 1024px: Small screens, laptops.*/
@media screen and (max-width: 1000px) {
    #mapa_botanico_image_conteudo {
        height: auto;
    }

    #mapa_botanico_image {
        height: fit-content;
    }

    #texto_interatividade_mapa {
        position: relative;
        /*padding-top: 50px;*/
        /*padding-bottom: 20px;*/
    }

    .legendaOpen {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    #backgroundImage_InfoText_Container {
        display: none;
    }
}

/*481px — 768px: iPads, Tablets.*/
@media screen and (max-width: 768px) {
    .span_infoText {
        text-decoration-thickness: 2px;
        -webkit-text-decoration-thickness: 1.7px !important;
        cursor: pointer;
    }
    #localizacao_title_container p {
        font-size: 1rem;
        padding-bottom: 50px;
    }

    #legendaMapaContainer div:first-child {
        padding-right: 0;
    }

    .mobileHeight {
        padding: 40px 15px;
    }

    #svgMapaContainer {
        flex-wrap: wrap;
    }

    #svgMapaContainer {
        height: auto;
        justify-content: center;
    }

    #svgMapaContainer > svg {
        width: 100%;
        /*height: fit-content;*/
        height: auto;
    }

    #specie_container {
        width: 100vw;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    #specie_image_jbuc_container {
        width: 100vw;
        /*height: fit-content;*/
        height: 75vh;
    }

    .specie_image_jbuc {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    #specie_image_anatomy_container {
        width: 100vw;
        height: fit-content;
    }

    #specie_image_anatomy {
        width: 100%;
        height: auto;
    }

    /*   .sp_mapa_botanico:hover {
           cursor: auto;
       }*/
    #specie_jbuc_container {
        height: auto;
    }
}

/*320px — 480px: Mobile devices.*/
@media screen and (max-width: 480px) {
    #legendaTextTitle {
        padding-top: 0;
    }
    #mapa_botanico_image_h1 {
        margin-bottom: 20px;
    }
    #textoDesktop {
        width: auto;
    }
    #specie_region {
        width: 100%;
    }
/*    #specie_latin_name, #specie_name{
        font-size: 2rem;
    }*/
    #specie_taxo{
        font-size: 1.3rem;
    }
}