body,div,span{
    margin:0;padding:0;border:0;
    overflow:hidden;
}
body,html {
  height:99.9vh;
  
  overflow: hidden;
  margin:0;padding:0;border:0;
}

* {
    -webkit-tap-highlight-color: transparent;
}

* {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}
.vermelho_circulo {
    color:#ff3300;
}

.vermelho {
    color:#ff0000;
}

.verde {
    color: #66ff00;
}
.amarelo {
  color: #ffcc00;
}
.azul {
  color: #0233fc;
}

.roxo {
  color:#785959;
}

.palco_central {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  max-height: 100vh;
  background:blue;
}
.c2{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
  
}
.invisivel {
    visibility: hidden;
    
}


.palavra_animacao{
	-webkit-transition: all .9s;
    -moz-transition: all .9s;
    -ms-transition: all .9s;
    -o-transition: all .9s;
    transition: all .9s;
}
.palavra_0 {
    visibility: hidden;
}
.palavra_0 .l1 {
    margin-left:-2vw;
    margin-right:-2vw;
}
.palavra_0 .ll {
    margin-left:-3vw;
    margin-right:-2vw;
    
}
.palavra_0 div {
  display:inline-block;  
  width:23vw;
}
.palavra_0 span {
    visibility: hidden;
}
.palavra_0 .s0 {
    width:100%;
}


h1 {
    position: relative;
    width: 551px;
    height: 551px;
    margin: 1rem auto;
    text-transform: uppercase;
    background: radial-gradient(orchid, slateBlue);
    color: white;
    border-radius: 50%;
    animation: rotation 8s infinite linear;
  }
  .rodar {
    animation: rotation 20s infinite linear;
  }
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }
    
  .char {
    --i: calc(100% / (var(--char-total) + 1));
    position: absolute;
   
    offset-path: path('M225.5.5c124.3 0 225 100.7 225 225s-100.7 225-225 225S.5 349.8.5 225.5 101.2.5 225.5.5');
    offset-distance: calc(var(--i) * var(--char-index));
  /*  offset-anchor: top; FF only */
    padding-top: 4rem;
   
  }
  .container {
    /*centers in the container*/
    text-align: center;
    border-radius: 50%;
  }
  div.circTxt {
    /*allows for centering*/
    display: inline-block;
    /*adjust as needed*/
    margin-bottom: 128px;
    color: whitesmoke;
  }

  .montanhas_crescer {
    /*animation: montanhas_crescer 20s infinite linear;*/
   
  }
  @keyframes montanhas_crescer_1 {

  }
  @keyframes montanhas_crescer {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  .pcirculo{
    background: #009cff;
    color:white;
    /*width: 63%;*/
    
   
  
    border-radius: 50%;
    
    padding:0em;
    margin:0;
    box-sizing: border-box;
    text-align: center;
  }
  .pcirculo:before {
    content:'';
    height:0;
    /*margin:100% 0 0 0;*/
    display:inline-block;
    vertical-align: middle;
  }

  .pcirculo_caos { display: inline-block;  vertical-align: middle;}

  .pcirculo_caos .caoscaos {
    visibility:hidden;
  }

@keyframes pulse {
    0% {
     transform: scale(1, 1);
    }

    50% {
     transform: scale(1.02, 1.02);
    }

    100% {
    transform: scale(1, 1);
    }
}
  .caoscaos {
    display:inline-block;
    transition: transform 3s ease;
    
  }

  .caosEspaco {
    
    transition: transform 10s ease;
  }

  .res-circle {
    /* (A) PERCENTAGE WIDTH & BORDER RADIUS */
    width: 60%;
    border-radius: 50%;
  
    /* (B) BACKGROUND COLOR */ 
    background: #bcd6ff;
   
    /* (C) NECESSARY TO POSITION TEXT BLOCK */
    line-height: 0;
    position: relative;
  }
   
  /* (D) MATCH HEIGHT */
  .res-circle::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
   
  /* (E) TEXT BLOCK */
  .circle-txt {
    /* (E1) CENTER TEXT IN CIRCLE */
    position: absolute;
    bottom: 50%;
    width: 100%;
    text-align: center;
   
  }

  .reveal {
    overflow:hidden;
    position:relative;
    display:inline-block;
}

  .reveal:after {
    content:" ";
    position:absolute;
    display:block;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.1);
    border:0px solid red;
    z-index:70;
    transition: all 2s ease;
}

.reveal.show:after {
    left:100%
}

#test {
  background-size:auto;
  background-image:url("../imagens/jhon_cage/foto_inicial_2.png");

}