.btn_goto_layer {
  width: 15px;
  height: 14px;

  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;

  border: 1px outset black;
  border-radius: 0px;

  margin-left: 7px;
  margin-right: 7px;

}




.openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: rgb(46, 51, 56);
    color: white;
    padding: 12px 17px;
    top: 0;
    border: none;
    border-radius: 25px;
    white-space: nowrap;
}
  
.openbtn:hover {
    background-color: #444;
    transition: 0.25s;
}
    

.top_right_container {
  position: absolute;
  display: inline-block; /* do tamanho do conteudo */
  z-index:100; 
  left: 2%; top: 2%; 
  opacity: 70%;
  border-radius: 25px;
  height: 54px;

  overflow-x: hidden;
  overflow-y: hidden;  

}

.btn_container {
  display: inline-block; /* do tamanho do conteudo */
}




.div_sidebar {
    position: absolute;
    display: inline-block; /* do tamanho do conteudo */
    z-index:100; 
    background-color: rgb(46, 51, 56); 
    opacity: 70%;
    /* opacity: 90%; */    
    border-radius: 25px;


    left: 2%; 
    top: 20%; 

    min-width: 0px;
    width: 107px;
    height: 51px;

    overflow-x: hidden;
    overflow-y: hidden;  

}



.div_sidebar:hover {
    opacity: 100%;
    transition: 0.25s;

}




.div_sidebar_open {
    position: absolute;
    display: inline-block; /* do tamanho do conteudo */
    z-index:100; 
    background-color: rgba(46, 51, 56,0.8); 
    left: 0%;
    top: 0%;
    min-width: 380px;
    max-width: 380px;
    /*width: 25%;*/
    height: 100%;
    /*opacity: 100%;*/
    border-radius: 0px;    
    transition-duration: 0.5s;

    overflow-x: hidden;
    overflow-y: hidden;/* isso seria a scroll do body + logo */
  }

.div_sidebar_open:hover {
  background-color: rgba(46, 51, 56,1.0); 
  transition-duration: 0.5s;
}


/* ================================== */

@keyframes slide_sidebar_in {

  0% {
    opacity: 0%;
    left: -380px;
  }

  100% {
    opacity: 100%;
    left: 0px;
  }

}


@keyframes slide_sidebar_out {

  0% {
    opacity: 100%;
    left: 0px;
  }

  100% {
    opacity: 0%;
    left: -380px;
  }

}




/* ================================== */
@keyframes open_sidebar {

  0% {/* comeca como retangulo flutuando*/
    opacity: 70%;
    height: 51px;
    border-radius: 25px;
  }

  40% {/* move para a ponta da tela*/
    left: 0%;
    top: 0%;
    height: 51px;
    opacity: 100%;
    border-radius: 0px;
  }

  /* expande horizontalmente primeiro? */

  100% {
    left: 0%;
    top: 0%;
    min-width: 380px;
    max-width: 380px;

    /*width: 25%;*/

    height: 100%;

    opacity: 100%;
    border-radius: 0px;

  }

}


@keyframes close_sidebar {

  0% {/* ponto inicial */
    left: 0%;
    top: 0%;

    width: 15%;
    height: 100%;

    opacity: 100%;
    border-radius: 0px;
  }

  60% { /* recolhe verticalmente */
    left: 0%;
    top: 0%;

    min-width: 0px;
    width: 107px;
    height: 51px;

    border-radius: 0px;
  }

  80% {
    left: 2%; 
    top: 2%; 
    min-width: 0px;
    width: 107px;
    height: 51px;
    border-radius: 0px;
  }

  100% { /* puxa o botão para a posicao original */

      left: 2%; 
      top: 2%; 

      min-width: 0px;
      width: 107px;
      height: 51px;

      opacity: 70%;    
      border-radius: 25px;
  }

}
  

/*
observar inicio e fim de animações
el.addEventListener("animationstart", function() {}, false);
el.addEventListener("animationend", function() {}, false);
el.addEventListener("animationiteration", function() {}, false);

document.getElementById('yourElement').style.animation="spin2 4s linear infinite";

*/