* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    min-height: 100dvh;
    overflow-y: hidden;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
}

#container {
    overflow-x: scroll;
    overflow-y: hidden;
}
        /* ===== Scrollbar CSS ===== */
          /* Firefox */
          * {
            scrollbar-width: thin;
            scrollbar-color: #55a3f3 #0f172a;
        }
        
          /* Chrome, Edge, and Safari */
        *::-webkit-scrollbar {
            width: 10px;
            background-color:#0f172a;
        }
        
        
        *::-webkit-scrollbar-thumb {
            background-color: #55a3f3;
            border-radius: 10px;
            border: 2px none #ffffff;
            
        }   

        #slide_0 {
            width:100vw;
            background-color: blueviolet;
        }
        #slide_5_5 {
          float:right;
          text-align: right;
        }
        #celular {
            align-content:center;
            margin: auto;
            overflow-y: hidden;
            border: none;
            padding: 0vw;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0,0,0,0.8); 
        }
        #celular::backdrop {
            background-color: rgba(0,0,0,1);  
            backdrop-filter: blur(7px);
            cursor: pointer;
        }
        .w-full {
            margin: auto;
            display: block;
            width:100%;
            height:auto;
        }
.box {
    display: flex;
    align-items: stretch;
}
.img_teste {
    height: 100dvh;
    width: auto;
    object-position: bottom left;
}
.relative {
    position: relative;
}
.overlay {
    left:0;
    top:0;
    position:absolute;
}
.testando {
    top:-200;
}

.swipe-section {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: visible;
}
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: red;
    transform: scaleX(0);
    transform-origin: 0%;
    z-index: 50;
}

.progress {
    z-index: 51;
    position: fixed;
    bottom: 20px;
    left: 10px;
    padding: 10px;
    background: #eeeeee;
    color: #222222;
    font-size: 18px;
    font-weight: bold;
    width: 100px;
    text-align: center;
    border-radius: 5px;
}

#anim_1 {
    margin-left:2.5vw;
}

#slide_1_0,#slide_1_1,#slide_1_2,#slide_1_3,#slide_1_4,#slide_1_5,#slide_1_6,#slide_2_1,#slide_2_3,#slide_2_4,#slide_3_0,#slide_3_1,#slide_3_2,#slide_3_3,#slide_3_4,#slide_3_5,#slide_4_1 {
    opacity: 0;
}
#slide_3_0 {
  top:40px;
}


#slide_1_bg,#slide_1_tubo_teste,#slide_1_moco_balcao,#slide_1_balcao,#slide_1_moco_costas,#slide_1_moca_lupa,#slide_1_texto,#slide_1_sustentabilidade,#slide_1_tutorial {
    opacity:0;
    top:50px;
}
#slide_1_moco_costas {
    top:0px;
    left:-50px;
}
#slide_1_moca_lupa {
    top:0px;
    left:50px;
}
#slide_3_links,#slide_4_links,#slide_2_quadro,#slide_2_biocombustiveis,#slide_2_vacinas,#slide_2_bioplasticos,#slide_2_fibras,#slide_2_bioenergia,#slide_2_biocosmeticos,#slide_2_biopesticidas,#slide_2_alimentos,#slide_2_titulo,#slide_2_mulher_pc,#slide_2_mulher {
    opacity:0;
}
#slide_2_quadro {
    top:120px;
}
#slide_2_titulo {
    top:-50px;
}
#slide_2_mulher_pc {
    left:-80px;
}

#slide_3_1 {
    left:-50px;
}
#slide_3_3 {
    left:-50px;
}
#slide_3_5 {
    top:100px;
}
#slide_4_biblioteca,#slide_4_homem_lendo,#slide_4_tubo,#slide_4_livro,#slide_4_homem,#slide_4_mulher,#slide_4_cooperar,#slide_4_cooperacre,#slide_4_bioeco,#slide_4_energia,#slide_4_controle,#slide_4_seguranca,#slide_4_preservacao {
    opacity: 0;
}
#slide_4_energia,#slide_4_controle,#slide_4_seguranca,#slide_4_preservacao {
    left:-60px;
}

dialog:not([open]) {
    display: none !important;
}

dialog::backdrop {
  background-color: rgba(255,255,255,0.1);  
  backdrop-filter: blur(7px);
  cursor: pointer;
}
#botoes-slide-1, #botoes-slide-2, #botoes-slide-3 {
    opacity:0;
}
#potencial_riqueza,#preservacao_amazonia,#energia_limpa {
    margin: auto;
    overflow-y: hidden;
    border: solid 2px #eeeeee;
    padding: 0vw;
    width: 65vw;
}

#como_surgiu_bio, #case_cooperacre, #case_cooperar, #seguranca_alimentar, #controle_passivos {
    margin: auto;
    overflow-y: hidden;
    border: solid 2px #eeeeee;
    padding: 0vw;
    width: 35vw;
}
.dialog_texto {
    margin: auto;
    padding: 2vw;
    border: none;
    width: 75vw;
    overflow-y: hidden;
}
.dialog_texto h3 {
    font-size: 1.7rem;
    color:#65BAB8;
}
.dialog_texto p {
    font-size: 1rem;
    color:#171C67;
}

.cls-1 {
    fill: #ffffff;
}

.cls-1, .cls-2 {
    stroke-width: 0px;
    cursor: pointer;
}
.cls-3 {
    stroke-width: 4px;
    stroke:#65BAB8;
    fill:none;
}

.cls-2 {
    fill: #2C54AC;
}

.link3-1 {
  fill: #9dc748;
}

.link3-1, .link3-2, .link3-3 {
  stroke-width: 0px;
}

.link3-2 {
  fill: none;
}

.link3-3 {
  fill: #fff;
}

.link4-1 {
  fill: #65bab8;
}

.link4-1, .link4-2, .link4-3 {
  stroke-width: 0px;
}

.link4-2 {
  fill: #171c67;
}

.link4-3 {
  fill: rgba(255,255,255,.01);
}


.sl-logo {
    fill: transparent;
  }

  .sl-logo, .cls-2, .cls-3, .cls-4 {
    stroke-width: 0px;
  }

  .icons-1 {
    fill: transparent;
  }

  .icons-1, .icons-2, .icons-3 {
    stroke-width: 0px;
  }

  .icons-2 {
    fill: none;
  }

  .icons-3 {
    fill: #fff;
  }

  .action-1 {
    fill: none;
  }

  .action-1, .action-2 {
    stroke-width: 0px;
  }

  .action-2 {
    fill: transparent;
  }

  .cls-2 {
    fill: none;
  }

  .cls-3 {
    fill: #92b940;
  }

  .cls-4 {
    fill: #fff;
  }

  .esg-1 {
    fill: none;
  }

  .esg-1, .esg-2, .esg-3, .esg-4 {
    stroke-width: 0px;
  }

  .esg-2 {
    fill: none;
  }

  .esg-3 {
    fill: #9ec848;
  }

  .esg-4 {
    fill: #fff;
  }

  .origem-1 {
    fill: #171c67;
  }

  .origem-1, .origem-2, .origem-3 {
    stroke-width: 0px;
  }

  .origem-2 {
    fill: #65b8b6;
  }

  .origem-4 {
    fill: none;
    stroke: #65b8b6;
    stroke-miterlimit: 10;
    stroke-width: 6.1px;
  }

  .origem-3 {
    fill: #fff;
  }

  .cooperar-1 {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 6.6px;
  }

  .cooperar-2 {
    fill: #8e1b1b;
  }

  .cooperar-2, .cooperar-3, .cooperar-4, .cooperar-5 {
    stroke-width: 0px;
  }

  .cooperar-3 {
    fill: #171c67;
  }

  .cooperar-4 {
    fill: #65b8b6;
  }

  .cooperar-5 {
    fill: #fff;
  }

  .cooperacre-1 {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 6.6px;
  }

  .cooperacre-2 {
    fill: #8e1b1b;
  }

  .cooperacre-2, .cooperacre-3, .cooperacre-4, .cooperacre-5, .cooperacre-6 {
    stroke-width: 0px;
  }

  .cooperacre-3 {
    fill: #9dc748;
  }

  .cooperacre-4 {
    fill: #171c67;
  }

  .cooperacre-5 {
    fill: #65b8b6;
  }

  .cooperacre-6 {
    fill: #fff;
  }

  .bioeco-1 {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 6.6px;
  }

  .bioeco-2 {
    fill: #8e1b1b;
  }

  .bioeco-2, .bioeco-3, .bioeco-4, .bioeco-5 {
    stroke-width: 0px;
  }

  .bioeco-3 {
    fill: #171c67;
  }

  .bioeco-4 {
    fill: #65b8b6;
  }

  .bioeco-5 {
    fill: #fff;
  }

  .links-1 {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 6.6px;
  }

  .links-2 {
    fill: #ffffff;
  }

  .links-2, .links-3, .links-4 {
    stroke-width: 0px;
  }

  .links-3 {
    fill: #9dc748;
  }

  .links-4 {
    fill: #171c67;
  }


  /* MOUSE CLIQUE 1 */

  .mc-1-1 {
    fill: #65bab8;
  }

  .mc-1-1, .mc-1-2, .mc-1-3 {
    stroke-width: 0px;
  }

  .mc-1-2 {
    fill: #171c67;
  }

  .mc-1-3 {
    fill: transparent;
  }

  .mc-1-4 {
    fill: #fff;
  }

.sv-class-1 {
fill: none;
stroke: #65bab8;
stroke-width: 2px;
stroke-miterlimit: 10;
}

.sv-class-2 {
fill: #2c54ac;
}

.sv-class-2, .sv-class-3 {
stroke-width: 0px;
}

.sv-class-3 {
fill: #fff;
}

.txt_btn-1 {
fill: #65bab8;
}

.txt_btn-1, .txt_btn-2 {
stroke-width: 0px;
}

.txt_btn-3 {
fill: none;
stroke: #2c54ac;
stroke-miterlimit: 10;
stroke-width: 2px;
}

.txt_btn-2 {
fill: #fff;
}

.btn-more {
  width:2.8vw;
  height:2.8vw;
  /* opacity: 0; */
}

.read-more {
  width:2.8vw;
  height:2.8vw;
  opacity: 0;
}

.btn-read-info {
  width:3vw;
  height:3vw;
  opacity: 0;
}

.btn-more, .read-more, .btn-read-info, .mc-1-3, .btn-icons{
cursor: pointer;
}
      
.close-button, .close-button-text {
    z-index:999;
    width:2vw;
    height: 2vw;
    top:0.5vh;
    left:70vw;
    cursor:pointer;
}
.close-button-text {
    left:72.5vw;
}
.z-100 {
    z-index:100;
}



/* #como_surgiu_bio, #potencial_riqueza, #case_cooperacre, #case_cooperar, #preservacao_amazonia, #seguranca_alimentar, #controle_passivos, #energia_limpa */
@media (max-aspect-ratio: 17/9) {


    #potencial_riqueza,#preservacao_amazonia,#energia_limpa {
        padding: 1vw;
        width: 70vw;
    }

    #como_surgiu_bio, #case_cooperacre, #case_cooperar, #seguranca_alimentar, #controle_passivos {
        padding: 1vw;
        width: 40vw;
    }

    .close-button {
        left:67vw;
    }
    .close-button-small {
      left:37vw;
  }

    #btn-coop-numeros {
        top:11vh;
        left: 36dvw;
    }

    #btn-dez-motivos {
        top:11vh;
        left:83vw;
    }
    #slide-1-txt-1 {
        top:23vh;
        left:117dvw;
    }

    #ajuda-onu {
        top:10vh;
        left:25vw;
    }

    #economia-mundial {
        top:75vh;
        left:12vw;
    }

    #slide-3-txt-1 {
        top:4vh;
        left:22vw;
    }

    #slide-3-txt-2 {
        top:38vh;
        left:66vw;
    }

}

@media (min-aspect-ratio: 17/9) {
  

    #potencial_riqueza,#preservacao_amazonia,#energia_limpa {
        padding: 1vw;
        width: 70vw;
    }
    
    #como_surgiu_bio, #case_cooperacre, #case_cooperar, #seguranca_alimentar, #controle_passivos {
        padding: 1vw;
        width: 40vw;
    }
    
    .close-button {
        left:67vw;
    }
    .close-button-small {
      left:37vw;
  }

    #slide_4_1 {
        left:-250px;
    }
    #btn-coop-numeros {
        top:10vh;
        left: 30dvw;
    }

    #btn-dez-motivos {
        top:10vh;
        left:70vw;
    }
    #slide-1-txt-1 {
        top:22vh;
        left:77vw;
    }

    #ajuda-onu {
        top:10vh;
        left:25vw;
    }

    #economia-mundial {
        top:75vh;
        left:10vw;
    }

    #slide-3-txt-1 {
        top:5vh;
        left:17vw;
    }

    #slide-3-txt-1 {
        top:5vh;
        left:17vw;
    }
    
    #slide-3-txt-2 {
        top:38vh;
        left:63vw;
    }
}

#slide_3_0,#slide_4_cooperar,#slide_4_cooperacre,#slide_4_bioeco,#slide_4_preservacao,#slide_4_seguranca,#slide_4_controle,#slide_4_energia {
    cursor:pointer;
}

#clique_3_como_surgiu,#clique_4_cooperar,#clique_4_cooperacre,#clique_4_bioeconomia,#clique_4_coop_destaque,#clique_4_preservacao,#clique_4_seguranca_alim,#clique_4_cont_pass,#clique_4_en_limpa {
    cursor:pointer;
}

@media (min-aspect-ratio: 19/9) {

    #potencial_riqueza,#preservacao_amazonia,#energia_limpa {
        padding: 1vw;
        width: 70vw;
    }
    
    #como_surgiu_bio, #case_cooperacre, #case_cooperar, #seguranca_alimentar, #controle_passivos {
        padding: 1vw;
        width: 20vw;
    }
    
    .close-button {
        left:67vw;
    }
    .close-button-small {
      left:37vw;
  }


    #slide_4_1 {
        left:-150px;
    }


    #btn-coop-numeros {
        top:10vh;
        left: 28dvw;
    }

    #btn-dez-motivos {
        top:10vh;
        left:65vw;
    }
    #slide-1-txt-1 {
        top:23vh;
        left:92vw;
    }      
    #ajuda-onu {
        top:9vh;
        left:22vw;
    }
    #economia-mundial {
        top:75vh;
        left:10vw;
    }

    #slide-3-txt-1 {
        top:5vh;
        left:17vw;
    }
    
    #slide-3-txt-2 {
        top:38vh;
        left:53vw;
    }
}

@media (min-aspect-ratio: 21/9) {

    #potencial_riqueza,#preservacao_amazonia,#energia_limpa {
        padding: 1vw;
        width: 70vw;
    }

    #como_surgiu_bio, #case_cooperacre, #case_cooperar, #seguranca_alimentar, #controle_passivos {
        padding: 1vw;
        width: 40vw;
    }

    .close-button {
        left:67vw;
    }
    .close-button-small {
        left:37vw;
    }
    #slide_4_1 {
        left:-150px;
    }
    #btn-coop-numeros {
        top:9vh;
        left: 25dvw;
    }

    #btn-dez-motivos {
        top:9vh;
        left:58vw;
    }
    #slide-1-txt-1 {
        top:20vh;
        left:83vw;
    }      
    #ajuda-onu {
        top:6vh;
        left:18vw;
    }
    #economia-mundial {
        top:65vh;
        left:8vw;
    }

    #slide-3-txt-1 {
        top:3vh;
        left:15vw;
    }
    
    #slide-3-txt-2 {
        top:32vh;
        left:47vw;
    }
}