body{
       /*background: #223;*/
      /*background: url("erman.jpg");*/
      background-size: 100vw 100vh; 
      background-attachment:fixed;
      width:100vw;
      height: 100vh;
      overflow: hidden;
  }
  button{
      animation-name: ani 
      animation-duration: 20s;
       background: rgba(0,0,0,.5);
	   width: 50px;
	   height: 50px;
     padding: 0px;
     padding-left: 2px;
     border: 1px solid rgba(0,0,0,.8);
	   border-radius: 5px;
      z-index:100;
  }
  nav{
      border: 1px solid white;
	  border-radius: 10px;
	  width: 10px;
	  height: 10px;
    float: left;
    margin: 1px;
    background: #fff;
  }

  .ts-anime{
    animation: ts-anime 20s infinite;
  }

/* ###**#*##################################
//###**#*################################## */

@keyframes bolinha1{
  0%{ border-top-right-radius: 10%;
    border-bottom-right-radius: 60%;
    border-top-left-radius: 40%;
    border-bottom-left-radius: 80%;
    top: 300px;
    left: 70px;}
  20%{ border-top-right-radius: 40%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 70%;
    border-bottom-left-radius: 90%;
    /*top: 380px;
    left: 50px;*/}
  40%{ border-top-right-radius: 60%;
    border-bottom-right-radius: 70%;
    border-top-left-radius: 70%;
    border-bottom-left-radius: 30%;
    top: 360px;
    left: 60px;}
  60%{ border-top-right-radius: 90%;
    border-bottom-right-radius: 80%;
    border-top-left-radius: 60%;
    border-bottom-left-radius: 70%;}
  80%{ border-top-right-radius: 20%;
    border-bottom-right-radius: 80%;
    border-top-left-radius: 70%;
    border-bottom-left-radius: 50%;
    top: 290px;
    left: 80px;}
}
@keyframes bolinha2{
  0%{ border-top-right-radius: 10%;
    border-bottom-right-radius: 60%;
    border-top-left-radius: 40%;
    border-bottom-left-radius: 80%;
    top: 400px;
    left: 70px;}
  20%{ border-top-right-radius: 40%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 70%;
    border-bottom-left-radius: 90%;
    /*top: 380px;
    left: 50px;*/}
  40%{ border-top-right-radius: 60%;
    border-bottom-right-radius: 70%;
    border-top-left-radius: 70%;
    border-bottom-left-radius: 30%;
    top: 460px;
    left: 60px;}
  60%{ border-top-right-radius: 90%;
    border-bottom-right-radius: 80%;
    border-top-left-radius: 60%;
    border-bottom-left-radius: 70%;}
  80%{ border-top-right-radius: 100%;
    border-bottom-right-radius: 80%;
    border-top-left-radius: 70%;
    border-bottom-left-radius: 50%;
    top: 490px;
    left: 80px;}
  100%{ border-top-right-radius: 10%;
    border-bottom-right-radius: 60%;
    border-top-left-radius: 40%;
    border-bottom-left-radius: 80%;
    top: 400px;
    left: 70px;
  }
}
@keyframes bolinha3{
  0%{ border-top-right-radius: 10%;
    border-bottom-right-radius: 60%;
    border-top-left-radius: 40%;
    border-bottom-left-radius: 80%;
    top: 0px;
    left: 70px;
    
  }
  20%{ border-top-right-radius: 40%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 70%;
    border-bottom-left-radius: 90%;
    top: 50%;
    left: 0px;
    width: 70px;
    height: 50px;
    width: 70px;
    height: 20px;
  }
  40%{ border-top-right-radius: 60%;
    border-bottom-right-radius: 70%;
    border-top-left-radius: 70%;
    border-bottom-left-radius: 30%;
    top: 100%;
    left: 50%;}
  60%{ border-top-right-radius: 90%;
    border-bottom-right-radius: 80%;
    border-top-left-radius: 60%;
    border-bottom-left-radius: 70%;
    top: 50%;
    left: 95%;
    width: 50px;
    height: 70px;
  }
  80%{ border-top-right-radius: 100%;
      border-bottom-right-radius: 80%;
      border-top-left-radius: 70%;
      border-bottom-left-radius: 50%;
      top: 0%;
      left: 50%;
      width: 10px;
      height: 80px;
      background: linear-gradient(90deg, #ff006655, #6600ff55);
    }
  97.999%{ border-top-right-radius: 100%;
    border-bottom-right-radius: 80%;
    border-top-left-radius: 70%;
    border-bottom-left-radius: 50%;
    top: 5%;
    left: 50%;
    width: 70px;
    height: 50px;
    background: linear-gradient(90deg, #ff006655, #6600ff55);
  }
  99.999%{ border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
    border-top-left-radius: 70%;
    border-bottom-left-radius: 50%;
    top: 5%;
    left: 50%;
    width: 50px;
    height: 70px;
  }
  100%{ border-top-right-radius: 10%;
    border-bottom-right-radius: 60%;
    border-top-left-radius: 40%;
    border-bottom-left-radius: 80%;
    top: 5%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: linear-gradient(90deg, #ff006600, #6600ff00);
  }
}
@keyframes ts-anime{
  0%{ text-shadow: 1px 5px 24px #ffffff00}
  20%{ text-shadow: 1px 5px 24px #ffffff99}
  40%{ text-shadow: 1px 5px 24px #ffffff44}
  60%{ text-shadow: 1px 5px 24px #ffffffff}
  80%{ text-shadow: 1px 5px 24px #ffffff44}
}
@keyframes mov-ft{
  0%{ transform: scale(.7); }
  50%{ transform: scale(.9); }
  100%{ transform: scale(.7); }
}
@keyframes rect-r{
  0%{   background: #f9dc0044;}
  50%{   background: #f9dc00aa;}
  100%{   background: #f9dc0044; }
}
@keyframes optmus-parte-4{
  0%{ left: 0;}
  50%{   left: 5%;}
  80%{   left: -5%;}
  100%{  left: 0%;}
}
@keyframes optmus-parte-4-5{
  0%{ left: 50%;}
  50%{   left: 55%;}
  80%{   left: 45%;}
  100%{  left: 50%;}
}
@keyframes dez{
  0%{ border:none;}
  98%{ border:none;}
  100%{ border:3px solid #fff;}
}


@keyframes rot{
  0%{ width: 1px;}
  20%{ width: 40px;}
  40%{ width: 1px;}
  60%{ width: 20px;}
  80%{ width: 10px;}
}
@keyframes rotan{
  0%{ transform: translate(-50%,-50%) rotatex(90deg); }
  20%{ transform: translate(-50%,-50%) rotatex(50deg); }
  40%{ transform: translate(-50%,-50%) rotatex(80deg); }
  60%{ transform: translate(-50%,-50%) rotatex(90deg); }
  80%{ transform: translate(-50%,-50%) rotatex(70deg); }
}

@keyframes zoomar{
  0%{
  top: -0%;
  left: -0%;
  width: 200%;
	height: 200%; 
    }
  20%{
  top: -0%;
  left: -0%;
  width: 200%;
	height: 200%; 
    }
  23%{
  top: -0%;
  left: -0%;
  width: 100%;
	height: 100%; 
    }
  25%{
  top: -0%;
  left: -100%;
  width: 200%;
	height: 200%; 
    }
  45%{
  top: -0%;
  left: -100%;
  width: 200%;
	height: 200%; 
    }
  48%{
  top: -0%;
  left: -0%;
  width: 100%;
	height: 100%; 
    }
  50%{
  top: -100%;
  left: -0%;
  width: 200%;
	height: 200%; 
    }
  70%{
  top: -100%;
  left: -0%;
  width: 200%;
	height: 200%; 
    }
  73%{
  top: -0%;
  left: -0%;
  width: 100%;
	height: 100%; 
    }
  75%{
  top: -100%;
  left: -100%;
  width: 200%;
	height: 200%; 
    }
  95%{
  top: -100%;
  left: -100%;
  width: 200%;
	height: 200%; 
    }
  100%{
  top: -0%;
  left: -0%;
  width: 200%;
	height: 200%; 
    }
}


/* ###**#*##################################
//###**#*################################## */
.pans{
  /*animation: rodar 15s infinite;*/
  transform-style: preserve-3D;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotatex(0deg) perspective(2000px);
  width: 100%;
	height: 100%;
  /*background: rgba(0,0,0,.5);*/
  transition: 2s;
  transform-origin: center;
  overflow: hidden;
   /*z-index:-100;*/
}
.pans .panels{
  /*animation: zoomar 20s infinite;*/
  transform-style: preserve-3D;
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translate(0%,0%) rotatex(0deg) perspective(2000px);
  width: 200%;
	height: 200%;
  /*background: rgba(0,0,0,.5);*/
  /*transition: 1s;*/
  transition: 1s cubic-bezier(.68,-0.55,.27,1.55);
  transform-origin: center;
  overflow: hidden;
}
 .pane{
  animation: rodar 25s infinite;
  position: relative;
  width: 50% !important;
	height: 50% !important;
  float: left;
  /*overflow: hidden;*/
  overflow-y: scroll !important;
  /*overflow-x: wrap !important;*/
  max-height: 100vh;
  /*padding: 20px;*/

}
.pane h1{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color:#fff;
  font-size: 6em;
}
.pans .panels .panel2 h1{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color:#555;

}
.pans .panels .panel1{
  transform-origin: right;
  transform: rotatey(0deg);
  /*background: url("img.jpg");*/
  background-size: 100% 100%;
}
/*.pans .panels .panel2{
  transform-origin: left;
  transform: rotatey(0deg);
  background: url("erman.jpg");
  /*z-index: 60;
  background-size: 100% 100%;
  overflow-y: scroll;
}*/
.panels .panel3{
  transform-origin: left;
  transform: rotatey(0deg);
  /*background: rgba(5,255,25,.8);*/
  background-size: 100% 100%;
}
.pans  .panels .panel4{
  transform-origin: left;
  transform: rotatey(0deg);
  /*background: rgba(255,55,5,.8) ;*/
}
.pans .panels .panel5{
  transform-origin: left;
  transform: rotatey(-60deg);
  /*background: rgba(5,255,25,.8) ;*/
}

/*//////////////////////////////*/

.cetas{
    position: absolute;
  left: 50%;
  top: calc(100% - 35px);
  transform: translateX(-50%);
  height: 50px;
  /*background: blue;*/
  /*z-index: 100;*/
}
.cetas button{
  position: relative;
  border: 5px solid #602;
    border-radius: 15px;
    width: 30px;
    height: 30px;
    float: left;
    margin: 1px;
    background:#fff;
}
.cetas button:hover{
  width: 50px;
  height: 50px;
  top:-20px;
}
.bola-gradiente{
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background: linear-gradient(90deg, #ff006688, #6600ff88);
  box-shadow: 1px 10px 24px #ff006688;
  /*background: #60f;*/
}
.bola-gradiente .bola-centro-gradiente{
  position: absolute;
  margin-top: 20px;
  border-top-right-radius: 80%;
  border-bottom-right-radius: 20%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 50px;
  background: linear-gradient(90deg, #ff006688, #6600ff88);
  padding: 20px;
}
.bolinha1{
  animation: bolinha1 3s infinite;
  transform: .5s;
  width: 70px;
  height: 50px;
  position: absolute;
  margin-top: 20px;
  border-top-right-radius: 10%;
  border-bottom-right-radius: 60%;
  border-top-left-radius: 40%;
  border-bottom-left-radius: 80%;
  background: linear-gradient(90deg, #ff006688, #6600ff88);
  top: 300px;
  left: 70px;
}
.bolinha2{
  animation: bolinha2 5s infinite;
  transition: 1s;
  width: 70px;
  height: 50px;
  position: absolute;
  margin-top: 20px;
  border-top-right-radius: 10%;
  border-bottom-right-radius: 60%;
  border-top-left-radius: 40%;
  border-bottom-left-radius: 80%;
  background: linear-gradient(90deg, #ff006688, #6600ff88);
  top: 300px;
  left: 70px;
}
.bolinha3{
  animation: bolinha3 25s infinite;
  transition: 1s;
  width: 70px;
  height: 50px;
  position: absolute;
  margin-top: 20px;
  border-top-right-radius: 10%;
  border-bottom-right-radius: 60%;
  border-top-left-radius: 40%;
  border-bottom-left-radius: 80%;
  background: linear-gradient(90deg, #ff006688, #6600ff88);
  top: 300px;
  left: 70px;
}
.bolinha3-1{
    animation: bolinha3 40s infinite !important;
}

.optmus-rects .rectangulo1{
  position: absolute;
  bottom: -30px;
  right: -30px;
  background: #f9dc0066;
  /*width: 100px;
  height: 80px;*/
  width: 25%;
  height: 25%;
}
.optmus-rects .rectangulo2{
  position: absolute;
  top: -30px;
  left: -30px;
  background: #f9dc00ff;
  /*width: 100px;
  height: 80px;*/
  width: 25%;
  height: 25%;
  z-index: -1;
}
.optmus-rects .rect-r{
  position: absolute;
  top: 0px;
  right: 0%;
  background: #f9dc00ff;
  /*width: 100px;
  height: 80px;*/
  width: 25%;
  height: 100%;
  animation: rect-r 20s infinite;
  /*z-index: -1;*/
}

.mov-ft{
  animation: mov-ft 40s infinite;
}

/*=================== font color ... =====*/
.bold{
  font-weight: bold;
}
.amarelo{
  color: #f5cc00;
}
.bg-amarelo{
  background: #f5cc00;
}
.subtitulo{
  font-size: 20px;
  font-weight: bold;
}
.mrgtp-20{
  margin-top: 20px;
}



/*==============Servicos=========*/
.icon-servico{
  font-size: 60px;
}
/*
.optmus-image{
  animation: dez 12s infinite;
  position: relative;
}
.optmus-image:hover~*.parte{
  animation: none;
}
.optmus-image img:nth-child(1){
  position: relative;
  width: 100%;
  opacity: .1;
  z-index: 0;
}
.optmus-image .parte{
  position: absolute;
  width: 100%;
  overflow: hidden;
}
.optmus-image .parte img{
  position: absolute;
  width: 100%;
  top: 0;
}
.optmus-image .parte:nth-child(2){
   animation: optmus-parte-4 6s infinite;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  overflow: hidden;
}
.optmus-image .parte:nth-child(2)  img{
  position: absolute;
  width: 100%;
  top: 0;
}
.optmus-image .parte:nth-child(3){
   animation: optmus-parte-4 4s infinite;
  top: 20%;
  left: 0;
  width: 100%;
  height: 20%;
}
.optmus-image .parte:nth-child(3)  img{
  position: absolute;
  width: 100%;
  top: -100%;
}
.optmus-image .parte:nth-child(4){
   animation: optmus-parte-4 6s infinite;
  top: 40%;
  left: 0;
  width: 100%;
  height: 20%;
}
.optmus-image .parte:nth-child(4)  img{
  position: absolute;
  width: 100%;
  top: -200%;
}
.optmus-image .parte:nth-child(5){
  animation: optmus-parte-4 4s infinite;
  top: 60%;
  left: 0px;
  width: 50%;
  height: 20%;
}
.optmus-image .parte:nth-child(5)  img{
  position: absolute;
  width: 200%;
  top: -300%;
}
.optmus-image .parte:nth-child(6){
  animation: optmus-parte-4-5 6s infinite;
  top: 60%;
  left: 50%;
  width: 50%;
  height: 20%;
}
.optmus-image .parte:nth-child(6)  img{
  position: absolute;
  width: 200%;
  top: -300%;
  left: -100%;
}
.optmus-image .parte:nth-child(7){
  animation: optmus-parte-4 2s infinite;
  top: 80%;
  left: 0;
  width: 100%;
  height: 20%;
}
.optmus-image .parte:nth-child(7)  img{
  position: absolute;
  width: 100%;
  top: -400%;
}
.optmus-image .parte:nth-child(8){
  animation: optmus-parte-4 6s infinite;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20%;
}
.optmus-image .parte:nth-child(8)  img{
  position: absolute;
  width: 100%;
  top: -500%;
}

*/