html{
 
  overflow: hidden;
}


.containerpublino {  
  width: 42vw;
  height: 83vh;
  top: 3%;
  font-family: 'M PLUS Code Latin', sans-serif;
  display: grid;
  grid-template-columns: 0.2fr 1fr 1fr 1fr 1fr 1fr 1fr 0.2fr;
  grid-template-rows: 0.2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.2fr;
  gap: 3px 3px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . . outtt"
    ". titol titol titol titol pipou . ."
    ". titulono1 titulono1 titulono1 . gifprev gifprev ."
    ". titulona1 titulona1 titulona1 . gifprev gifprev ."
    ". titulono2 titulono2 titulono2 . gifprev gifprev ."
    ". titulona2 titulona2 titulona2 titulona2 gifprev gifprev ."
    ". titulono3 titulono3 titulono3 . gifprev gifprev ."
    ". corpi corpi corpi corpi corpi corpi ."
    ". corpi corpi corpi corpi corpi corpi ."
    ". corpi corpi corpi corpi corpi corpi ."
    ". corpi corpi corpi corpi corpi corpi ."
    ". . . putgif putgif putgif entergif ."
    ". . . . . . . .";
}
.pipous{
  font-size: 6vh;
  
}
.pipou {
  grid-area: pipou;
  }
.outtt {
   grid-area: outtt;
   }

.titol {
   grid-area: titol;
   font-size: 6vh;
  }

.titulono1 {
   grid-area: titulono1;
   font-size: 4vh;
   }

.titulona1 {
   grid-area: titulona1; 
   
  }

.titulono2 {
   grid-area: titulono2;
   font-size: 3vh;
   }

.titulono3 {
   grid-area: titulono3;
   font-size: 2.6vh;
   }

.titulona2 { 
  grid-area: titulona2;
 }

.putgif {
   grid-area: putgif; 
  }

.entergif { 
  grid-area: entergif;
 }

.corpi {
   grid-area: corpi; 
  }
  .gifprev {
    grid-area: gifprev; 
   }
.tituna1{
  width: 15vw;
  font-size: 3vh;
  color:rgb(0, 0, 0);
 
  border: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0) ;
  border-radius: 0.3vh;
  box-sizing: border-box;
  border-style: ridge;
}

.tituna2{
  width: 25vw;
  font-size: 3vh;
  color:rgb(0, 0, 0);
 
  border: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0) ;
  border-radius: 0.3vh;
  box-sizing: border-box;
  border-style: ridge;
}


.noni2{
  width: 10%;
  height: 15%;
  background-color: #3246f1;
  font-family: 'M PLUS Code Latin', sans-serif;
  
 
  text-align: center;
  font-size: 2vh;
  color:rgb(0, 0, 0);
  background: rgb(48, 136, 194);
  border: rgb(27, 34, 134);
 
  border-radius: 0.3vh;
  box-sizing: border-box;
  border-style: groove;
  cursor: pointer;
}

.noni{
  width: 98%;
  height: 10%;
 
  font-family: 'M PLUS Code Latin', sans-serif;
  
 
  text-align: center;
  font-size: 1.8vh;
  color:rgb(0, 0, 0);
  background: rgb(159, 185, 202);
  border: rgb(255, 255, 255);
 
  border-radius: 0.3vh;
  box-sizing: border-box;
  border-style: double;
  cursor: pointer;
}
.containerlistanotiee { 
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Noticiasmac Noticiasmac noticiasmacne"
    "Noticiasmac Noticiasmac noticiasmacne"
    "todasnoti todasnoti todasnoti"
    "todasnoti todasnoti todasnoti"
    "todasnoti todasnoti todasnoti"
    "todasnoti todasnoti todasnoti"
    "todasnoti todasnoti todasnoti"
    "todasnoti todasnoti todasnoti";
}

.Noticiasmac { 
  font-family: 'M PLUS Code Latin', sans-serif;
  
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 5vh;
  color:rgb(0, 0, 0);
  grid-area: Noticiasmac;
 }

.noticiasmacne {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 4vh;
  color:rgb(0, 0, 0);
   grid-area: noticiasmacne;
   }

.todasnoti { 
  width: 100%;
  height: 100%;
  grid-area: todasnoti;
  overflow-x: hidden;
  overflow-y: scroll; }

.containernotimacio {  
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.8fr 0.1fr 0.1fr 1fr;
  gap: 10px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "imagemacio imagemacio imagemacio imagemacio imagemacio"
    "titulomacio titulomacio . . ."
    "subtitulomacio subtitulomacio subtitulomacio subtitulomacio ."
    "tuttitota tuttitota tuttitota tuttitota tuttitota";
}

.imagemacio { 
  grid-area: imagemacio;

 }

.titulomacio { 
  grid-area: titulomacio;
  font-family: 'M PLUS Code Latin', sans-serif;
  
  width: 100%;
  height: 100%;
  text-align: justify;
  font-size: 2.6vh;
  color:rgb(0, 0, 0);
 }

.subtitulomacio { 
  grid-area: subtitulomacio;
  font-family: 'M PLUS Code Latin', sans-serif;
  
  width: 100%;
  height: 100%;
  text-align: justify;
  font-size: 2.2vh;
  color:rgb(0, 0, 0);
}

.tuttitota { 
  overflow-y: scroll;
  grid-area: tuttitota;
  font-family: 'M PLUS Code Latin', sans-serif;
  white-space: pre-line;
  width: 100%;
  height: 100%;
  text-align: justify;
  font-size: 1.5vh;
  color:rgb(0, 0, 0);
}

.containernequinho { 
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 0.1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.1fr;
  grid-template-rows: 0.1fr 1fr 0.1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . . . . ."
    ". quest quest quest quest quest quest nequinhobla nequinhobla ."
    ". . . . . . . . . .";
}

.nequinhobla {
  width: 100%;
  height: 100%;
   grid-area: nequinhobla;
   text-align: justify;
  font-size: 7vh;
  color: rgb(19, 95, 23);
  }
  .nequi {
    width: 100%;
    height: 100%;
     grid-area: nequinhobla;
     text-align: justify;
    font-size: 7vh;
    color: rgb(19, 95, 23);
    }
.quest { 
  font-family: 'M PLUS Code Latin', sans-serif;
  width: 100%;
  height: 100%;
  grid-area: quest;
  text-align: center;
  font-size: 5vh;
  color: rgb(0, 0, 0);
 }

.containerzaptalk {  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 0.1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.1fr;
  grid-template-rows: 0.1fr 0.4fr 0.6fr;
  gap: 1px 1px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . . . ."
    ". yourtalk yourtalk yourtalk yourtalk yourtalk yourtalk yourtalk ."
    ". . . . . . sendingmsg sendingmsg .";
}

.yourtalk { grid-area: yourtalk; }

.sendingmsg { grid-area: sendingmsg; }



.containerzapquestoes {  
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.2fr 1fr 0.3fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "topquestoes"
    "zonadefeed"
    "speakplace";
}

.topquestoes { 
  grid-area: topquestoes;
background-color: #ffffff;
border-style: solid;
border-color: #ffffff;
}

.zonadefeed { 
  grid-area: zonadefeed;
background-color: #d6d6d6;
overflow-x: hidden;
overflow-y: scroll;
}

.speakplace { 
  grid-area: speakplace;

}
.sendinpuit{
 
  font-family: 'M PLUS Code Latin', sans-serif;
  
  width: 100%;
  height: 100%;
  text-align: justify;
  font-size: 2vh;
  color:rgb(0, 0, 0);
  background: rgb(252, 252, 252);
  border: sandybrown;
  border-color: #000000;
  border-radius: 0.3vh;
  box-sizing: border-box;
  border-style: solid;
 
}
.sendmsga{
 
  font-family: 'M PLUS Code Latin', sans-serif;
  
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 2vh;
  color:rgb(0, 0, 0);
 background-color: rgb(41, 171, 211);
}


.containernoti {  display: grid;
  top: 5%;
  width: 70%;
  height: 75%;
  grid-template-columns: 0.3fr 0.6fr 0.6fr 1fr 1fr 0.8fr 0.8fr 0.3fr;
  grid-template-rows: 0.3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.3fr;
  gap: 0px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . . sairee"
    ". listanoticias listanoticias noticialactual noticialactual respostasnoticias respostasnoticias ."
    ". listanoticias listanoticias noticialactual noticialactual respostasnoticias respostasnoticias ."
    ". listanoticias listanoticias noticialactual noticialactual respostasnoticias respostasnoticias ."
    ". listanoticias listanoticias noticialactual noticialactual respostasnoticias respostasnoticias ."
    ". listanoticias listanoticias noticialactual noticialactual respostasnoticias respostasnoticias ."
    ". listanoticias listanoticias noticialactual noticialactual respostasnoticias respostasnoticias ."
    ". listanoticias listanoticias noticialactual noticialactual respostasnoticias respostasnoticias ."
    ". . . . . . . .";
}

.listanoticias { 
  grid-area: listanoticias;
background-color: #ffffff;

}

.noticialactual {
   grid-area: noticialactual;
   background-color: #ffffff;
  }

.respostasnoticias {
   grid-area: respostasnoticias;


  }

.sairee {
   grid-area: sairee;
   font-size: 4vh;
  }












.containerpaineisrolantes {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.3fr 0.3fr 0.3fr 0.3fr 0.3fr 0.3fr 0.3fr 0.3fr 0.3fr 0.3fr 0.3fr 0.3fr 0.3fr;
  gap: 3px 3px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . . sairrrr"
    ". setacima . painel1actual painel1actual painel1actual painel1actual ."
    ". setacima . painel1actual painel1actual painel1actual painel1actual ."
    ". setacima . painel1mudar painel1mudar painel1mudar painel1mudar ."
    ". . . painel1mudar painel1mudar painel1mudar painel1mudar ."
    ". textoindicar . . . . actualizarpainel1 ."
    ". textoindicar . . . . . ."
    ". textoindicar . painel2actual painel2actual painel2actual painel2actual ."
    ". . . painel2actual painel2actual painel2actual painel2actual ."
    ". setabaixo . painel2mudar painel2mudar painel2mudar painel2mudar ."
    ". setabaixo . painel2mudar painel2mudar painel2mudar painel2mudar ."
    ". setabaixo . . . . actualizarpainel2 ."
    ". . . . . . . .";
}

.sairrrr { 
  grid-area: sairrrr;

}
.botaoactpainelrolante{

  width: 100%;
  height: 100%;
  background-color: #5f9957;
  color: #04dbfb;
  cursor: pointer;
}
.painel1actual {
   grid-area: painel1actual;
   font-family: 'M PLUS Code Latin', sans-serif;
  color: #49adbd;
   width: 100%;
   height: 100%;
   text-align: center;
   font-size: 2vh;
   border-style: groove;
border-color: #754c4a;
border-radius: 1vh;
box-sizing: border-box;


background: rgb(155, 56, 72);
opacity: 1;
  
   }

.painel1mudar { 
  grid-area: painel1mudar; 
  font-family: 'M PLUS Code Latin', sans-serif;
  
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 2vh;
  color:rgb(0, 0, 0);
  background: rgb(252, 252, 252);
  border: sandybrown;
  border-color: #000000;
  border-radius: 0.3vh;
  box-sizing: border-box;
  border-style: solid;
}

.actualizarpainel1 { 
  grid-area: actualizarpainel1;
  font-family: 'M PLUS Code Latin', sans-serif;
  
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 2vh;
  color:rgb(223, 10, 10);
  background: rgb(252, 252, 252);
  border: sandybrown;
  border-color: #E55451;
  border-radius: 1vh;
  box-sizing: border-box;

 }

.painel2actual { 
  grid-area: painel2actual;
  font-family: 'M PLUS Code Latin', sans-serif;
  
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 2vh;
  color:rgb(113, 208, 236);



  border-radius: 0.2vh;
  border-style: groove;
  border-color: #000000;
  border-radius: 1vh;
  box-sizing: border-box;
  background: rgb(16, 127, 155);
  opacity: 1;
 }

.painel2mudar { 
  grid-area: painel2mudar;
  font-family: 'M PLUS Code Latin', sans-serif;
  
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 2vh;
  color:rgb(0, 0, 0);
  background: rgb(252, 252, 252);
  border: sandybrown;
  border-color: #000000;
  border-radius: 0.3vh;
  box-sizing: border-box;
  border-style: solid;
 }

.actualizarpainel2 {
   grid-area: actualizarpainel2; 
   font-family: 'M PLUS Code Latin', sans-serif;
  
   width: 100%;
   height: 100%;
   text-align: center;
   font-size: 2vh;
   color:rgb(223, 10, 10);
   background: rgb(252, 252, 252);
   border: sandybrown;
   border-color: #E55451;
   border-radius: 1vh;
   box-sizing: border-box;
  
  }

.setacima { 
  grid-area: setacima;
  font-family: 'M PLUS Code Latin', sans-serif;
  
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 6vh;
  color:rgb(223, 10, 10);
  background: rgb(252, 252, 252);
  border: sandybrown;
  border-color: #E55451;
  border-radius: 1vh;
  box-sizing: border-box;
 
 }

.setabaixo {
   grid-area: setabaixo;
   font-family: 'M PLUS Code Latin', sans-serif;
  
   width: 100%;
   height: 100%;
   text-align: center;
   font-size: 6vh;
   color:rgb(223, 10, 10);
   background: rgb(252, 252, 252);
   border: sandybrown;
   border-color: #E55451;
   border-radius: 1vh;
   box-sizing: border-box;
   
   }

.textoindicar {
   grid-area: textoindicar;
   font-family: 'M PLUS Code Latin', sans-serif;
  
   width: 100%;
   height: 100%;
   text-align: center;
   font-size: 3vh;
   color:rgb(223, 10, 10);
   background: rgb(252, 252, 252);
   border: sandybrown;
   border-color: #E55451;
   border-radius: 1vh;
   box-sizing: border-box;
 
   }





.cosulestiloprod1{
  font-family: 'M PLUS Code Latin', sans-serif;
  
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 6vh;
  color:rgb(223, 10, 10);
  background: rgb(252, 252, 252);
  border: sandybrown;
  border-color: #E55451;
  border-radius: 1vh;
  box-sizing: border-box;
  border-style: double;

}
.cosulestiloprod2{
  font-family: 'M PLUS Code Latin', sans-serif;
 
  bottom: 2vh;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 4vh;
  color:rgb(255, 255, 255);
  background: rgb(202, 29, 29);
  border: none;
  border-color: #E55451;
  border-radius: 1vh;
  box-sizing: border-box;

}


.modal-window2 {

  position: fixed;
  background-color: rgba(200, 200, 200, 0.75);

  z-index: 998;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal-window2:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window2>div {
  opacity: 1 ;
 
  position: relative;
  margin: 1% auto;
  padding: 2rem;
  background: rgb(255, 255, 255);
  color: #444;


}

.modal-window2 header {
  font-weight: bold;
}

.modal-close2 {
  color: red;
  line-height: 5px;
  font-size: 70px;
  position: absolute;
  right: 0;
 
  text-align: center;
  top: 1;
  width: 50px;
  text-decoration: none;
}

.modal-close2:hover {
  color: #000;
}


















.invisivel {
  visibility: hidden;
  position: absolute ;
}

.containerlogin {
 background-color: #000;
  visibility: hidden;
  position: absolute;
  display: grid;
  grid-template-columns: 3.5fr 2.5fr 2.5fr 3.5fr;
  grid-template-rows: 2.5fr 2fr 2fr 2.5fr;
  gap: 15px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . ."
    ". otlologin login ."
    ". brutuslogin drimteclogin ."
    ". . . .";
}
.entrar{
  font-family: 'M PLUS Code Latin', sans-serif;
 
}



.look1{background-color: rgb(255, 255, 255);}
.look2{background-color: rgb(12, 96, 192);border-radius: 0.5vh;}

.look3{background-color: rgb(255, 255, 255);}
.look4{background-color: rgb(255, 255, 255);}
.look5{background-color: rgb(12, 96, 192);border-radius: 0.5vh;}
.look6{background-color: rgb(255, 255, 255);}
.look7{background-color: rgb(255, 255, 255);}
.look8{background-color: rgb(12, 96, 192);border-radius: 0.5vh;}
.look9{background-color: rgb(255, 255, 255);}
.look10{background-color: rgb(255, 255, 255);}
.look11{background-color: rgb(12, 96, 192);border-radius: 0.5vh;}
.look12{background-color: rgb(255, 255, 255);}

.user{
  position: absolute;
  font-size: 3vh;
width: 16vh;
height: 5vh;
}
.botaologin{
  font-size: 2vh;
 position: absolute;
bottom: 1vh;
right: 1vh;
width: 8vh;
height: 4.5vh;
}
.entra { 
  grid-area: login;
  width: 20vh;
  height: 9vw;
  font-size: 12px;
  color:rgb(255, 255, 255);
  background: #52a0f8;
  border: none;
  border-radius: 5vh;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  transition: all 400ms ease  
  
}
.entrahover{
  position: relative;
  transform-style: preserve-3d;

}
.entrahover:after {
 
  top: -100%;
  left:0px;
  width: 100%;
  bottom:100%;
 

  position: relative;
  font-size: relative;
  
  border-radius: none;
  box-sizing: border-box;
  content: '';
  transform-origin: left bottom;
  transform: rotateX(90deg);
}
.entrahover:hover {

 transform-origin: center bottom;
 transform: rotatex(-90deg) translatey(100%);
}
.drimteclogin { 
  grid-area: drimteclogin;
  width: 20vh;
  height: 9vw;
  font-size: 15px;
  color:rgb(219, 26, 26);
  background: rgb(255, 255, 255);
  border: none;
  border-radius: none;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  transition: all 400ms ease  
  
}
.drimtecloginhover{
  position: relative;
  transform-style: preserve-3d;

}
.drimtecloginhover:after {
 
  top: -100%;
  left:0px;
  width: 100%;
  bottom:100%;
  background-image: url(drim.jpg);
  background-repeat: no-repeat;
    
    background-size:contain;
    background-position: center;
  position: absolute;
  font-size: relative;
  
  border-radius: none;
  box-sizing: border-box;
  content: '';
  transform-origin: left bottom;
  transform: rotateX(90deg);
}
.drimtecloginhover:hover {

 transform-origin: center bottom;
 transform: rotatex(-90deg) translatey(100%);
}






 .otlologin { 
  grid-area: otlologin;
  width: 20vh;
  height: 9vw;
  font-size: 15px;
  color:rgb(219, 26, 26);
  background: rgb(255, 254, 254);
  border: none;
  border-radius: none;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  transition: all 400ms ease  
  
}
.otlologinhover{
  position: relative;
  transform-style: preserve-3d;

}
.otlologinhover:after {
 
  top: -100%;
  left:0px;
  width: 100%;
  bottom:100%;
  background-image: url(otlo2.jpg);
  background-repeat: no-repeat;
    
    background-size: cover;
    background-position: center;
  position: absolute;
  font-size: relative;
  
  border-radius: none;
  box-sizing: border-box;
  content: '';
  transform-origin: left bottom;
  transform: rotateX(90deg);
}
.otlologinhover:hover {

 transform-origin: center bottom;
 transform: rotatex(-90deg) translatey(100%);
}

   .brutuslogin { 
    grid-area: brutuslogin;
    width: 20vh;
    height: 9vw;
    font-size: 15px;
    color:rgb(219, 26, 26);
    background: rgb(202, 29, 29);
    border: none;
    border-radius: none;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    transition: all 400ms ease  
    
  }
  .brutusloginhover{
    position: relative;
    transform-style: preserve-3d;

  }
  .brutusloginhover:after {
   
    top: -100%;
    left:0px;
    width: 100%;
    bottom:100%;
    background-image: url(drim.jpg);
    background-repeat: no-repeat;
      
      background-size: cover;
      background-position: center;
    position: absolute;
    font-size: relative;
    
    border-radius: none;
    box-sizing: border-box;
    content: '';
    transform-origin: left bottom;
    transform: rotateX(90deg);
 }
 .brutusloginhover:hover {
  
   transform-origin: center bottom;
   transform: rotatex(-90deg) translatey(100%);
 }














.login {
  

  color:rgb(199, 114, 108);
  background-color:rgb(12, 96, 192);
  border-radius: 2vh;
  height: 100%;
  width:100%;
  position: relative;
   grid-area: login;
   }
.entrar{
  color: white;
  font-size: 4vh;
  position: relative;
top: 6.5vh;
text-align: center;
}
.spacecosul{
  position: absolute;

}
.spacegiza{
position: absolute;
}
.segmentado{
  width: 35vw;
  height: 30vh;
  top: 30vh;
 left: 30vw;
  
  text-align: center;
  position: absolute;
}
.quant{
  width: 35vw;
  height: 30vh;
  top: 30vh;
 left: 30vw;
  
  text-align: center;
  position: absolute;
}

.containersege {
 

  opacity: 1;
  
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
  grid-template-rows: 0.1fr 1fr 1fr 1fr 0.1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . sairs"
    ". sege sege ."
    ". yep nop ."
    ". . . ."
    ". . . .";
}

.sege { 
  font-family: 'M PLUS Code Latin', sans-serif;
  font-size: 4vh;
  grid-area: sege;
  position: relative;

}
.nop { grid-area: nop;

  width: 10vw;
  height: 12vh;
  position: relative;}
.yep { grid-area: yep;

  width: 10vw;
  height: 12vh;
  position: relative;
}
.botaosegyep{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 4vh;
  color:rgb(221, 67, 67);
  background: rgb(24, 59, 126);
  border: sandybrown;
  border-color: #5174e5;
  border-radius: 2vh;
  box-sizing: border-box;
  border-style: groove;
  font-family: 'M PLUS Code Latin', sans-serif;
  cursor: pointer;
}
.botaosegnop{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 4vh;
  color:rgb(221, 67, 67);
  background: rgb(24, 59, 126);
  border: sandybrown;
  border-color: #3246f1;
  border-radius: 2vh;
  box-sizing: border-box;
  border-style: groove;
  cursor: pointer;
  font-family: 'M PLUS Code Latin', sans-serif;
}

.botaosegnop1{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 4vh;
  color:rgb(221, 67, 67);
  background: rgb(24, 59, 126);
  border: sandybrown;
  border-color: #3246f1;
  border-radius: 2vh;
  box-sizing: border-box;
  border-style: groove;
  cursor: pointer;
  font-family: 'M PLUS Code Latin', sans-serif;
}
.botaonovoyep{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 4vh;
  color:rgb(221, 67, 67);
  background: rgb(24, 59, 126);
  border: sandybrown;
  border-color: #3246f1;
  border-radius: 2vh;
  box-sizing: border-box;
  border-style: groove;
  cursor: pointer;
  font-family: 'M PLUS Code Latin', sans-serif;
}
.botaonovonop{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 4vh;
  color:rgb(221, 67, 67);
  background: rgb(24, 59, 126);
  border: sandybrown;
  border-color: #3246f1;
  border-radius: 2vh;
  box-sizing: border-box;
  border-style: groove;
  cursor: pointer;
  font-family: 'M PLUS Code Latin', sans-serif;
}

.sairs { grid-area: sairs;

  position: relative;
}



.containeraftersegprod {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 1vh 1vh;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . sairdaqui"
    ". multi mortos pessoais ."
    ". vidali pplerres petizinhos ."
    ". . . . .";
}





.multi { grid-area: multi; }

.mortos { grid-area: mortos; }

.pessoais { grid-area: pessoais; }

.vidali { grid-area: vidali; }

.pplerres { grid-area: pplerres; }

.petizinhos { grid-area: petizinhos; }

.sairdaqui { grid-area: sairdaqui;
 }


 .containerquant {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . zeros . sairmi"
    ". one two three ."
    ". four five six ."
    ". seven eigth nine ."
    ". limpar totali calcular ."
    ". . . . .";
}
.zeros { 
  grid-area: zeros;
  position: relative;
 }
.limpar { 
  grid-area: limpar;
  position: relative;
 }

.one { grid-area: one; }

.two { grid-area: two; }

.three { grid-area: three; }

.four { grid-area: four; }

.five { grid-area: five; }

.six { grid-area: six; }

.seven { grid-area: seven; }

.eigth { grid-area: eigth; }

.nine { grid-area: nine; }

.totali {
   grid-area: totali; 
   width: 100%;
   height: 100%;
   text-align: center;
   font-size: 3vh;
   color:rgb(223, 10, 10);
   background: rgb(252, 252, 252);
   border: sandybrown;
   border-color: #E55451;
   border-radius: 2vh;
   box-sizing: border-box;
   border-style: double;
  }

.calcular { grid-area: calcular; }

.sairmi { grid-area: sairmi; }






.containercosul {
  top: 3vh;
  width: 72vw;
  height: 83vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 2px 2px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . . . . sair"
    ". nomemyspacecosul1 nomemyspacecosul1 likescosul coments medalhas . debate definicoescosul ."
    ". nomemyspacecosul2 nomemyspacecosul2 likescosul coments medalhas . produzi tools ."
    ". . . . . . . . . ."
    ". prodi1 prodi2 prodi3 prodi4 prodi5 prodi6 prodi7 . ."
    ". cosulprodu1 cosulprodu2 cosulprodu3 cosulprodu4 cosulprodu5 cosulprodu6 cosulprodu7 . ."
    ". . . . . . . . . ."
    ". . . . . . . . . .";
}

.coments { grid-area: coments; }

.medalhas { grid-area: medalhas; }

.questions { grid-area: questions; }

.nomecosul { grid-area: nomecosul; }

.sair { grid-area: sair; }

.debate { grid-area: debate; }

.produzi { grid-area: produzi; }

.cosul { grid-area: cosul; }

.cosulprodu1 { grid-area: cosulprodu1; }

.cosulprodu2 { grid-area: cosulprodu2; }

.cosulprodu3 { grid-area: cosulprodu3; }

.cosulprodu4 { grid-area: cosulprodu4; }

.cosulprodu5 { grid-area: cosulprodu5; }

.cosulprodu6 { grid-area: cosulprodu6; }

.cosulprodu7 { grid-area: cosulprodu7; }

.nomemyspacecosul1 { 
  grid-area: nomemyspacecosul1; 
  top: 0%;
  font-family: 'M PLUS Code Latin', sans-serif;;
  font-size: 5.5vh;
}

.nomemyspacecosul2 { 
  grid-area: nomemyspacecosul2; 
  top: 0%;
  font-family: 'M PLUS Code Latin', sans-serif;;
  font-size: 6vh;
}

.likescosul { grid-area: likescosul; }

.definicoescosul { grid-area: definicoescosul; }

.tools { grid-area: tools; }

.prodi1 { grid-area: prodi1; }

.prodi2 { grid-area: prodi2; }

.prodi3 { grid-area: prodi3; }

.prodi4 { grid-area: prodi4; }

.prodi5 { grid-area: prodi5; }

.prodi6 { grid-area: prodi6; }

.prodi7 { grid-area: prodi7; }


.containergiza {
  font-family: 'M PLUS Code Latin', sans-serif;
  top: 2vh;
  width: 72vw;
  height: 85vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 1.7px 1.7px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . . . . . sair"
    ". Nomemyspace1 Nomemyspace1 prod1 . prod5 Likes Dislikes Noticia Definicoesmy ."
    ". Nomemyspace2 Nomemyspace2 prod2 prod4 prod6 Likes Dislikes Paineis Alerta ."
    ". . . prod3 . prod7 . . . . ."
    ". . . . . . . . . . ."
    ". Nomecosul Nomecosul produ1 produ2 produ3 produ4 produ5 produ6 produ7 ."
    ". cosul1 cosul1 cosul1produ1 cosul1produ2 cosul1produ3 cosul1produ4 cosul1produ5 cosul1produ6 cosul1produ7 ."
    ". cosul2 cosul2 cosul2produ1 cosul2produ2 cosul2produ3 cosul2produ4 cosul2produ5 cosul2produ6 cosul2produ7 ."
    ". cosul3 cosul3 cosul3produ1 cosul3produ2 cosul3produ3 cosul3produ4 cosul3produ5 cosul3produ6 cosul3produ7 ."
    ". cosul4 cosul4 cosul4produ1 cosul4produ2 cosul4produ3 cosul4produ4 cosul4produ5 cosul4produ6 cosul4produ7 ."
    ". cosul5 cosul5 cosul5produ1 cosul5produ2 cosul5produ3 cosul5produ4 cosul5produ5 cosul5produ6 cosul5produ7 ."
    ". cosul6 cosul6 cosul6produ1 cosul6produ2 cosul6produ3 cosul6produ4 cosul6produ5 cosul6produ6 cosul6produ7 ."
    ". cosul7 cosul7 cosul7produ1 cosul7produ2 cosul7produ3 cosul7produ4 cosul7produ5 cosul7produ6 cosul7produ7 ."
    ". cosul8 cosul8 cosul8produ1 cosul8produ2 cosul8produ3 cosul8produ4 cosul8produ5 cosul8produ6 cosul8produ7 ."
    ". cosul9 cosul9 cosul9produ1 cosul9produ2 cosul9produ3 cosul9produ4 cosul9produ5 cosul9produ6 cosul9produ7 ."
    ". cosul10 cosul10 cosul10produ1 cosul10produ2 cosul10produ3 cosul10produ4 cosul10produ5 cosul10produ6 cosul10produ7 ."
    ". cosul11 cosul11 cosul11produ1 cosul11produ2 cosul11produ3 cosul11produ4 cosul11produ5 cosul11produ6 cosul11produ7 ."
    ". cosul12 cosul12 cosul12produ1 cosul12produ2 cosul12produ3 cosul12produ4 cosul12produ5 cosul12produ6 cosul12produ7 ."
    ". cosul13 cosul13 cosul13produ1 cosul13produ2 cosul13produ3 cosul13produ4 cosul13produ5 cosul13produ6 cosul13produ7 ."
    ". cosul14 cosul14 cosul14produ1 cosul14produ2 cosul14produ3 cosul14produ4 cosul14produ5 cosul14produ6 cosul14produ7 ."
    ". cosul15 cosul15 cosul15produ1 cosul15produ2 cosul15produ3 cosul15produ4 cosul15produ5 cosul15produ6 cosul15produ7 .";
}
.botaodebatecosul{

  background-color: #3090C7;
  height: 100%;
  width:100%;
  position: relative;
  }
  .botaotoolscosul{
  
    background-color: #659EC7;
    height: 100%;
    width:100%;
    position: relative;
    }
    .botaoproduzicosul{
  
      background-color: #659EC7;
      height: 100%;
      width:100%;
      position: relative;
      }
      .botaodefinicoescosul{
  
        background-color: #3090C7;
        height: 100%;
        width:100%;
        position: relative;
        }
.botaonoticia{

background-color: #3090C7;
height: 100%;
width:100%;
position: relative;
}
.botaopaineis{

  background-color: #659EC7;
  height: 100%;
  width:100%;
  position: relative;
  }
  .botaodefinicoes{

    background-color: #659EC7;
    height: 100%;
    width:100%;
    position: relative;
    }
    .botaoalerta{

      background-color: #3090C7;
      height: 100%;
      width:100%;
      position: relative;
      }
.Definicoesmy {

   grid-area: Definicoesmy; 
  }

.Alerta {
 
   grid-area: Alerta;
   }

.Noticia { 
 
  grid-area: Noticia; 
}

.Paineis { 
  
  grid-area: Paineis;
 }

.Nomemyspace1 { 
  grid-area: Nomemyspace1;
  
  top: 0%;
  font-family: 'M PLUS Code Latin', sans-serif;;
  font-size: 5.5vh;
}

.Nomemyspace2 { 
  grid-area: Nomemyspace2; 

  top: 0%;
  font-family: 'M PLUS Code Latin', sans-serif;;
  font-size: vh;}

.prod1 { 

  grid-area: prod1;
 }

.prod2 {
 
   grid-area: prod2;
   }

.prod3 { 

  grid-area: prod3;

 }

.prod4 { 
  
  grid-area: prod4; 
}

.prod5 { 
 
  grid-area: prod5;
}
.prod6 { 
 
  grid-area: prod6; 
}

.prod7 {

  grid-area: prod7;
 }

.Likes { grid-area: Likes; }

.Dislikes { grid-area: Dislikes; }

.Nomecosul {
  background-color: #E55451;
   grid-area: Nomecosul;
   }

.cosul1 { grid-area: cosul1; }

.cosul2 { grid-area: cosul2; }

.cosul3 { grid-area: cosul3; }

.cosul4 { grid-area: cosul4; }

.cosul5 { grid-area: cosul5; }

.cosul6 { grid-area: cosul6; }

.cosul7 { grid-area: cosul7; }

.cosul8 { grid-area: cosul8; }

.cosul9 { grid-area: cosul9; }

.cosul10 { grid-area: cosul10; }

.cosul11 { grid-area: cosul11; }

.cosul12 { grid-area: cosul12; }

.cosul13 { grid-area: cosul13; }

.cosul14 { grid-area: cosul14; }

.cosul15 { grid-area: cosul15; }

.produ1 { 
 
  grid-area: produ1; 
}

.produ2 {

  grid-area: produ2;
 }

.produ3 { 
  
  grid-area: produ3;
 }

.produ4 {
 
  grid-area: produ4; 
}

.produ5 {
  
  grid-area: produ5;
 }

.produ6 {

   grid-area: produ6; 
  }

.produ7 {
 
  grid-area: produ7; 
}

.corprod1{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 3vh;
  color:rgb(255, 255, 255);
  background: rgb(173, 44, 44);
  border: groove;
  border-color: #E55451;
  border-radius: 1vh;
  box-sizing: border-box;
 
}
.corprod2{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 3vh;
  color:rgb(255, 255, 255);
  background: rgb(202, 29, 29);
  border: groove;
  border-color: #000000;
  border-radius: 1vh;
  box-sizing: border-box;
}
.simboltabgiza{
  position: relative;
  color:rgb(29, 32, 204);
  left: 20%;
  bottom: 30%;
  font-size: 4vh;
}
.simboltabgiza2{
  position: relative;
  color:rgb(0, 0, 0);
  left: 25%;
  bottom: 20%;
  font-size: 2.2vh;
}
.simboltabgiza3{
  position: relative;
  color:rgb(0, 0, 0);
  left: 25%;
  bottom: 30%;
  font-size: 4vh;
}
.zog{
  position: relative;
  left: 10%;
  text-align: justify;
 top: 10%;
 font-size: 2.5vh;
 }
 .zog2{
   position: relative;
   left: 30%;
   text-align: justify;
  font-size: 1.5vh;
  top: 5%;
  }
  .zog3{
    position: relative;
    left: 10%;
    text-align: justify;
   font-size: 2.5vh;
   top: 5%;
   }


.corcabeca{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 2vh;
  color:rgb(255, 254, 254);
  background: rgb(28, 103, 133);
  border-style: groove;
  border-color: #241110;
  border-radius: 1vh;
  box-sizing: border-box;
}
.cosulimparcor{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 2vh;
  color:rgb(255, 255, 255);
  background: rgb(28, 103, 133);
  border: sandybrown;
  border-color: rgb(0, 0, 0);
  border-radius: 1vh;
  box-sizing: border-box;
  border-style: groove;
}
.cosulimparlinhacor{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 2vh;
  color:rgb(54, 51, 51);
  background: #db5050;
  border: sandybrown;
  border-color: #168b9b;
  border-radius: 1vh;
  box-sizing: border-box;
  border-style: double;
}
.cosulparlinhacor{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 2vh;
  color:rgb(0, 0, 0);
  background: #cf7b7b;
  border: sandybrown;
  border-color: #130d0d;
  border-radius: 1vh;
  box-sizing: border-box;
  border-style: double;
}
.cosulparcor{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 2vh;
  color:rgb(0, 0, 0);
  background: rgb(232, 227, 247);
  border: sandybrown;
  border-color: rgb(67, 150, 184);
  border-radius: 1vh;
  box-sizing: border-box;
  border-style: groove;
}
.cosul1produ1 { grid-area: cosul1produ1; }

.cosul2produ1 { grid-area: cosul2produ1; }

.cosul3produ1 { grid-area: cosul3produ1; }

.cosul4produ1 { grid-area: cosul4produ1; }

.cosul5produ1 { grid-area: cosul5produ1; }

.cosul6produ1 { grid-area: cosul6produ1; }

.cosul7produ1 { grid-area: cosul7produ1; }

.cosul8produ1 { grid-area: cosul8produ1; }

.cosul9produ1 { grid-area: cosul9produ1; }

.cosul10produ1 { grid-area: cosul10produ1; }

.cosul11produ1 { grid-area: cosul11produ1; }

.cosul12produ1 { grid-area: cosul12produ1; }

.cosul13produ1 { grid-area: cosul13produ1; }

.cosul14produ1 { grid-area: cosul14produ1; }

.cosul15produ1 { grid-area: cosul15produ1; }

.cosul1produ2 { grid-area: cosul1produ2; }

.cosul2produ2 { grid-area: cosul2produ2; }

.cosul3produ2 { grid-area: cosul3produ2; }

.cosul4produ2 { grid-area: cosul4produ2; }

.cosul5produ2 { grid-area: cosul5produ2; }

.cosul6produ2 { grid-area: cosul6produ2; }

.cosul7produ2 { grid-area: cosul7produ2; }

.cosul8produ2 { grid-area: cosul8produ2; }

.cosul9produ2 { grid-area: cosul9produ2; }

.cosul10produ2 { grid-area: cosul10produ2; }

.cosul11produ2 { grid-area: cosul11produ2; }

.cosul12produ2 { grid-area: cosul12produ2; }

.cosul13produ2 { grid-area: cosul13produ2; }

.cosul14produ2 { grid-area: cosul14produ2; }

.cosul15produ2 { grid-area: cosul15produ2; }

.cosul1produ3 { grid-area: cosul1produ3; }

.cosul2produ3 { grid-area: cosul2produ3; }

.cosul3produ3 { grid-area: cosul3produ3; }

.cosul4produ3 { grid-area: cosul4produ3; }

.cosul5produ3 { grid-area: cosul5produ3; }

.cosul6produ3 { grid-area: cosul6produ3; }

.cosul7produ3 { grid-area: cosul7produ3; }

.cosul8produ3 { grid-area: cosul8produ3; }

.cosul9produ3 { grid-area: cosul9produ3; }

.cosul10produ3 { grid-area: cosul10produ3; }

.cosul11produ3 { grid-area: cosul11produ3; }

.cosul12produ3 { grid-area: cosul12produ3; }

.cosul13produ3 { grid-area: cosul13produ3; }

.cosul14produ3 { grid-area: cosul14produ3; }

.cosul15produ3 { grid-area: cosul15produ3; }

.cosul1produ4 { grid-area: cosul1produ4; }

.cosul2produ4 { grid-area: cosul2produ4; }

.cosul3produ4 { grid-area: cosul3produ4; }

.cosul4produ4 { grid-area: cosul4produ4; }

.cosul5produ4 { grid-area: cosul5produ4; }

.cosul6produ4 { grid-area: cosul6produ4; }

.cosul7produ4 { grid-area: cosul7produ4; }

.cosul8produ4 { grid-area: cosul8produ4; }

.cosul9produ4 { grid-area: cosul9produ4; }

.cosul10produ4 { grid-area: cosul10produ4; }

.cosul11produ4 { grid-area: cosul11produ4; }

.cosul12produ4 { grid-area: cosul12produ4; }

.cosul13produ4 { grid-area: cosul13produ4; }

.cosul14produ4 { grid-area: cosul14produ4; }

.cosul15produ4 { grid-area: cosul15produ4; }

.cosul1produ5 { grid-area: cosul1produ5; }

.cosul2produ5 { grid-area: cosul2produ5; }

.cosul3produ5 { grid-area: cosul3produ5; }

.cosul4produ5 { grid-area: cosul4produ5; }

.cosul5produ5 { grid-area: cosul5produ5; }

.cosul6produ5 { grid-area: cosul6produ5; }

.cosul7produ5 { grid-area: cosul7produ5; }

.cosul8produ5 { grid-area: cosul8produ5; }

.cosul9produ5 { grid-area: cosul9produ5; }

.cosul10produ5 { grid-area: cosul10produ5; }

.cosul11produ5 { grid-area: cosul11produ5; }

.cosul12produ5 { grid-area: cosul12produ5; }

.cosul13produ5 { grid-area: cosul13produ5; }

.cosul14produ5 { 
  grid-area: cosul14produ5;
 
}

.cosul15produ5 { 
  grid-area: cosul15produ5;
 
}

.cosul1produ6 { 
  grid-area: cosul1produ6;


}

.cosul2produ6 { 
  grid-area: cosul2produ6; 


}

.cosul3produ6 { 
  grid-area: cosul3produ6;

}

.cosul4produ6 { grid-area: cosul4produ6; }

.cosul5produ6 { grid-area: cosul5produ6; }

.cosul6produ6 { grid-area: cosul6produ6; }

.cosul7produ6 { grid-area: cosul7produ6; }

.cosul8produ6 { grid-area: cosul8produ6; }

.cosul9produ6 { grid-area: cosul9produ6; }

.cosul10produ6 { grid-area: cosul10produ6; }

.cosul11produ6 { grid-area: cosul11produ6; }

.cosul12produ6 { grid-area: cosul12produ6; }

.cosul13produ6 { grid-area: cosul13produ6; }

.cosul14produ6 { grid-area: cosul14produ6; }

.cosul15produ6 { grid-area: cosul15produ6; }

.cosul1produ7 { grid-area: cosul1produ7; }

.cosul2produ7 { grid-area: cosul2produ7; }

.cosul3produ7 { grid-area: cosul3produ7; }

.cosul4produ7 { grid-area: cosul4produ7; }

.cosul5produ7 { grid-area: cosul5produ7; }

.cosul6produ7 { grid-area: cosul6produ7; }

.cosul7produ7 { grid-area: cosul7produ7; }

.cosul8produ7 { grid-area: cosul8produ7; }

.cosul9produ7 { grid-area: cosul9produ7; }

.cosul10produ7 { grid-area: cosul10produ7; }

.cosul11produ7 { grid-area: cosul11produ7; }

.cosul12produ7 { grid-area: cosul12produ7; }

.cosul13produ7 { grid-area: cosul13produ7; }

.cosul14produ7 { grid-area: cosul14produ7; }

.cosul15produ7 { grid-area: cosul15produ7; }

.sair { grid-area: sair; }




.modal-window {

  position: fixed;
  background-color: rgba(200, 200, 200, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window>div {
  opacity: 0.8;
 
  position: relative;
  margin: 1% auto;
  padding: 2rem;
  background: #fff;
  color: #444;
  font-size: 30px;

}

.modal-window header {
  font-weight: bold;
}

.modal-close {
  color: red;
  line-height: 5px;
  font-size: 50px;
  position: absolute;
  right: 0;
 
  text-align: center;
  top: 1;
  width: 50px;
  text-decoration: none;
}

.modal-close:hover {
  color: #000;
}


.grid-container {
  
    display: grid; 
    grid-template-columns: 0.1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.1fr; 
    grid-template-rows: 0.9fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.9fr; 
    max-width: 100%;
    gap: 1vh 1vh;
    visibility: hidden;
    grid-template-areas: 
      ". . . . . . . . . . ."
      ". . BRUTUS reclame1 reclame1 reclame1 reclame1 reclame1 reclame1 . ."
      ". . BRUTUS novidadespp DPROD DPROD RSOCIAL workplacepp QUATRO . ."
      ". . gizatalks gizatalks DPROD DPROD RSOCIAL SETE NOVE . ."
      ". . gizatalks gizatalks DPROD DPROD RSOCIAL TRES DEZ . ."
      ". . gizatalks gizatalks debatetopesquerda debatetop debatetopdireita teamtalks teamtalks . ."
      ". . CINCO  DOIS  ROFICIAL DPROCE DPROCE teamtalks teamtalks . ."
      ". . SEIS OITO ROFICIAL DPROCE DPROCE teamtalks teamtalks . ."
      ". . UM concursospp ROFICIAL DPROCE DPROCE vendaspp DRIMTEC . ."
      ". . reclame2 reclame2 reclame2 reclame2 reclame2 reclame2 DRIMTEC . ."
      ". . . . . . . . . . ."; 
  }

  .vendas{
    font-family: 'M PLUS Code Latin', sans-serif;
    font-size: 2vh;
    grid-area: vendaspp;
    background: rgb(255, 255, 255);
    position: relative;
  }
  .concursos{
    font-family: 'M PLUS Code Latin', sans-serif;
    font-size: 2vh;
    grid-area: concursospp;
    background: rgb(255, 255, 255);
    position: relative;
  }
  .novidades{
    font-family: 'M PLUS Code Latin', sans-serif;
    font-size: 2vh;
    grid-area: novidadespp;
    background: rgb(255, 255, 255);
    position: relative;
  }
  .workplace{
    font-family: 'M PLUS Code Latin', sans-serif;
    font-size: 2vh;
    grid-area: workplacepp;
    background: rgb(255, 255, 255);
    position: relative;
  }











  .debatestop5esquerda{
    grid-area: debatetopesquerda;
    background: rgb(255, 255, 255);
    position: relative;
  }
  .debatestop5direita{
    grid-area: debatetopdireita;
    background: rgb(255, 255, 255);
    position: relative;
  }
  .topesquerda{
    top: 3.8vh;
    position: absolute;
    right: 1vw;
    font-size: 2.5vh;
    font-family: 'M PLUS Code Latin', sans-serif;
    color: rgb(4, 21, 172);
  }
  .debatesesquerda{
    top: 0.5vh;
    position: absolute;
    right: 1vw;
    font-size: 3vh;
    font-family: 'Amatic SC', cursive;
    color: rgb(28, 138, 0);
  }
  .topdireita{
    top: 0.5vh;
    position: absolute;
    left: 1vw;
    font-size: 2.5vh;
    font-family: 'M PLUS Code Latin', sans-serif;
    color: rgb(4, 21, 172);
  }
  .debatesdireita{
    top: 3.8vh;
    position: absolute;
    left: 1vw;
    font-size: 3.3vh;
    font-family: 'Amatic SC', cursive;
    color: rgb(28, 138, 0);
  }
.ddseta{
  top: 3.8vh;
  position: absolute;
  right: 0vw;
  font-size: 3.3vh;
 
  color: rgb(28, 138, 0);
}
.tdseta{
  top: 0.5vh;
  position: absolute;
  right: 0vw;
  font-size: 3.3vh;
 
  color: rgb(0, 14, 138);


}
.deseta{
  top: 0.5vh;
  position: absolute;
  left: 0vw;
  font-size: 3.3vh;
 
  color: rgb(28, 138, 0);
}
.teseta{
  top: 3.8vh;
  position: absolute;
  left: 0vw;
  font-size: 3.3vh;
 
  color: rgb(0, 23, 156);
}
.ddsetadown{
  top: 3.8vh;
  position: absolute;
  right: 0vw;
  font-size: 3.3vh;
 
  color: rgb(28, 138, 0);
}
.tdsetaup{
  top: 0.5vh;
  position: absolute;
  right: 0vw;
  font-size: 3.3vh;
 
  color: rgb(0, 14, 138);


}
.desetaup{
  top: 0.5vh;
  position: absolute;
  left: 0vw;
  font-size: 3.3vh;
 
  color: rgb(28, 138, 0);
}
.tesetadown{
  top: 3.8vh;
  position: absolute;
  left: 0vw;
  font-size: 3.3vh;
 
  color: rgb(0, 23, 156);
}
.debatestop5{
  grid-area: debatetop;
  background: rgb(255, 255, 255);
  position: relative;
}
.top{
  top: 3.8vh;
  position: absolute;
  left: 3.1vw;
  font-size: 2.5vh;
  font-family: 'M PLUS Code Latin', sans-serif;
  color: rgb(4, 21, 172);
}
.debates{
  top: 0.5vh;
  position: absolute;
  left: 3.1vw;
  font-size: 3.3vh;
  font-family: 'Amatic SC', cursive;
  color: rgb(28, 138, 0);
}
  .ranksocial{
    grid-area: RSOCIAL;
    background: rgb(255, 255, 255);
    color: rgb(131, 75, 75);
  
  
  }

  .rs1{
    top:1.5%;
    left: 0%;
    border-radius: 1vh;
    background: #3FC1C9;
    position: relative;
    height: 15%;
    width: 90%;
  }
  .rs2{
    top: 3%;
    left: 0%;
    border-radius: 1vh;
    background: #3FC1C9;
    position: relative;
    opacity: 0.8;
    height: 15%;
    width: 90%;
  }
  .rs3{
    top: 4.5%;
    left: 0%;
    border-radius: 1vh;
    position: relative;
    background: #3FC1C9;
    width: 90%;
    height: 15%;
  }
  .rs4{
  
   
    top: 6%;
    left: 0%;
    border-radius: 1vh;
    position: relative;
    background: #3FC1C9;
    width: 90%;
    height: 15%;
  }
  .rs5{
    top: 7.5%;
    left: 0%;
    border-radius: 1vh;
    position: relative;
    background: #3FC1C9;
    width: 90%;
    height: 15%;
  }
  .rs6{
  
   
    top: 9%;
    left: 0%;
    border-radius: 1vh;
    position: relative;
    background: #3FC1C9;
    width: 90%;
    height: 15%;
  }


  .rankoficial{
    grid-area: ROFICIAL;
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
  
  
  }

  .ro1{
    bottom:-1.5%;
    left: 10%;
    border-radius: 1vh;
    background: #3FC1C9;
    position: relative;
    height: 15%;
    width: 90%;
    border-style: groove;
    border-color: #8CDCDA;
    border-radius: 1vh;
    box-sizing: border-box;
  }
  .ro2{
    bottom: -3%;
    left: 10%;
    border-radius: 1vh;
    background: #3FC1C9;
    position: relative;
    opacity: 0.8;
    height: 15%;
    width: 90%;
  }
  .ro3{
    bottom: -4.5%;
    left: 10%;
    border-radius: 1vh;
    position: relative;
    background: #3FC1C9;
    width: 90%;
    height: 15%;
  }
  .ro4{
  
   
    bottom: -6%;
    left: 10%;
    border-radius: 1vh;
    position: relative;
    background: #3FC1C9;
    width: 90%;
    height: 15%;
  }
  .ro5{
    bottom: -7.5%;
    left: 10%;
    border-radius: 1vh;
    position: relative;
    background: #3FC1C9;
    width: 90%;
    height: 15%;
  }
  .ro6{
  
   
    bottom: -9%;
    left: 10%;
    border-radius: 1vh;
    position: relative;
    background: #3FC1C9;
    width: 90%;
    height: 15%;
  }






  .duvidaprocedimentos{
    grid-area: DPROCE;
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
  
  
  }


  .dp1{
    bottom:4.5%;
    left: 10%;
    border-radius: 1vh;
    background: #FCE38A;
    position: relative;
    height: 22.5%;
    width: 90%;
    border-style: groove;
    cursor: pointer;
  }
  .dp2{
    bottom: 3%;
    left: 10%;
    border-radius: 1vh;
    background: #FCE38A;
    position: relative;
    opacity: 0.8;
    height: 26%;
    width: 90%;
    border-style: groove;
    cursor: pointer;
  }
  .dp3{
    bottom: -2%;
    left: 10%;
    border-radius: 1vh;
    position: relative;
    background: #FCE38A;
    width: 90%;
    height: 26%;
    border-style: groove;
    cursor: pointer;
  }
  .dp4{
  
   
    bottom: -8%;
    left: 10%;
    border-radius: 1vh;
    position: relative;
    background: #FCE38A;
    width: 90%;
    height: 26%;
    border-style: groove;
    cursor: pointer;
  }

  .duvidaproduto{
    grid-area: DPROD;
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
  
  
  }
  .newsdprodutonamep{
    font-family: 'Changa', sans-serif;
    font-size: 1.6vh;
    left: 0.8vw;
    position: absolute;
    top: 0.4vh;
  
  }
  .newsdprodutonames{
    font-family: 'Amatic SC', cursive;
    font-size: 2vh;
    left: 0.8vw;
    position: absolute;
    top: 2.3vh;
  
  }
  .tituloproduto{
    font-family: 'Changa', sans-serif;
    font-size: 1.5vh;
    left: 4.8vw;
    position: absolute;
    top: 0.1vh;
  }
  .corpoproduto{
    font-family: 'M PLUS Code Latin', sans-serif;
    font-size: 1vh;
    left: 4.6vw;
    right: 4.8vw;
    position: absolute;
    top: 1.6vh;
    color:rgb(224, 224, 224);
  }
  .produtopati{
    font-family: 'M PLUS Code Latin', sans-serif;
    font-size: 2vh;
    left: 16.7vw;
    top: 3.2vh;
    position: absolute;
  
  }
  .produtoicon{
  
    font-size: 2vh;
    left: 17vw;
    top: 1vh;
    position: absolute;
  
  }
  .horaproduto{
    font-family: 'Changa', sans-serif;
    font-size: 2.5vh;
    left: 14vw;
    position: absolute;
    top: 1vh;
    color:rgb(192, 248, 118);
    font-style: bold;
  }
  
  .horaprodutodt{
    font-family: 'Amatic SC', cursive;
    font-size: 3vh;
    left: 15.5vw;
    position: absolute;
    top: 1vh;
  
  }
    .barraproduto1{
      font-family: 'Amatic SC', cursive;
      font-size: 4vh;
      left: 4vw;
      top: 0vh;
      position: absolute;
    }
    .barraproduto2{
      font-family: 'Amatic SC', cursive;
      font-size: 4vh;
      left: 13.6vw;
      position: absolute;
      top: 0vh;
    }
    .barraproduto3{
      font-family: 'Amatic SC', cursive;
      font-size: 4vh;
      left: 16vw;
      position: absolute;
      top: 0vh;
    }
  

  .dpr1{
    top:0%;
    right: 0%;
    border-radius: 1vh;
    background: #FCE38A;
    position: relative;
    height: 26%;
    width: 90%;
    border-style: groove;
    cursor: pointer;
  }
  .dpr2{
    top: 3%;
    right: 0%;
    border-radius: 1vh;
    background: #FCE38A;
    position: relative;
    opacity: 0.8;
    height: 26%;
    width: 90%;
    border-style: groove;
    cursor: pointer;
  }
  .dpr3{
    top: 7%;
    right: 0%;
    border-radius: 1vh;
    position: relative;
    background: #FCE38A;
    width: 90%;
    height: 26%;
    border-style: groove;
    cursor: pointer;
  }
  .dpr4{
    top: 4.5%;
    right: 0%;
    border-radius: 1vh;
    position: relative;
    background: #FCE38A;
    width: 90%;
    height:22.5%;
    border-style: groove;
  }
.newssendernamep{
  font-family: 'Changa', sans-serif;
  font-size: 1.6vh;
  left: 0.8vw;
  position: absolute;
  top: 0.4vh;

}
.newssendernames{
  font-family: 'Amatic SC', cursive;
  font-size: 2vh;
  left: 0.8vw;
  position: absolute;
  top: 2.3vh;

}
.titulonews{
  font-family: 'Changa', sans-serif;
  font-size: 1.5vh;
  left: 4.8vw;
  position: absolute;
  top: 0.1vh;
}
.corponews{
  font-family: 'M PLUS Code Latin', sans-serif;
  font-size: 1vh;
  left: 4.6vw;
  right: 4.8vw;
  position: absolute;
  top: 1.6vh;
  color:rgb(224, 224, 224);
}
.news2{

  font-size: 2vh;
  left: 15vw;
  top: 0.5vh;
  position: absolute;
}
.news{

  font-size: 2vh;
  left: 15vw;
  top: 1.5vh;
  position: absolute;

}
.horanews{
  font-family: 'Changa', sans-serif;
  font-size: 2.5vh;
  left: 12.35vw;
  position: absolute;
  top: 1vh;
  color:rgb(192, 248, 118);
  font-style: bold;
}

.horanewsdt{
  font-family: 'Amatic SC', cursive;
  font-size: 3vh;
  left: 13.7vw;
  position: absolute;
  top: 1vh;

}
  .barranews1{
    font-family: 'Amatic SC', cursive;
    font-size: 4vh;
    left: 4vw;
    top: 0vh;
    position: absolute;
  }
  .barranews2{
    font-family: 'Amatic SC', cursive;
    font-size: 4vh;
    left: 12vw;
    position: absolute;
    top: 0vh;
  }
  .barranews3{
    font-family: 'Amatic SC', cursive;
    font-size: 4vh;
    left: 14.3vw;
    position: absolute;
    top: 0vh;
  }






.talks{
  
  font-size: 3vh;
left: 1vw;
top: 1vh;
  position: absolute;
}
.painel{


  font-size: 5vh;
}
.painel2{

  color: #000000;
  font-size: 4vh;
}

.barrateam1{
  font-family: 'Amatic SC', cursive;
  font-size: 4vh;
  left: 3vw;
  position: relative;
}
.barrateam2{
  font-family: 'Amatic SC', cursive;
  font-size: 4vh;
  left: 6vw;
  position: absolute;
  top: 0vh;
}
.barrateam3{
  font-family: 'Amatic SC', cursive;
  font-size: 4vh;
  left: 9.5vw;
  position: absolute;
  top: 0vh;
}
.produtot{
  font-family: 'Amatic SC', cursive;
  font-size: 2vh;
  left: 3.7vw;
  position: absolute;
  top: 0.5vh;
  color: rgb(255, 255, 255);
}
.pseguras{
  font-family: 'Changa', sans-serif;
  font-size: 2vh;
  left: 3.5vw;
  position: absolute;
  top: 2.4vh;

}
.psegurasdt{
  font-family: 'Amatic SC', cursive;
  font-size: 2vh;
  left: 4.7vw;
  position: absolute;
  top: 2.4vh;
}
.hora{
  font-family: 'Changa', sans-serif;
  font-size: 2.5vh;
  left: 6.5vw;
  position: absolute;
  top: 1vh;
  color:rgb(192, 248, 118);
  font-style: bold;
}

.horadt{
  font-family: 'Amatic SC', cursive;
  font-size: 3vh;
  left: 8.3vw;
  position: absolute;
  top: 1vh;
  

}
.pnome{
  font-family: 'Changa', sans-serif;
  font-size: 2vh;
  left: 11vw;
  position: absolute;
  top: 0.4vh;

}

.snome{
  font-family: 'Amatic SC', cursive;
  font-size: 2vh;
  left: 11vw;
  position: absolute;
  top: 2.3vh;

}

.posicao{
  font-family: 'M PLUS Code Latin', sans-serif;
  font-size: 2.8vh;
  left: 0.5vw;
  position: absolute;
top: 0vh;
color: rgb(0, 0, 0);

}
.snomerank{
  font-family: 'Amatic SC', cursive;
  font-size: 1.8vh;
  left: 2.5vw;
  position: absolute;
top: 1.6vh;
color: rgb(255, 255, 255);

}
.pnomerank{

  font-family: 'Changa', sans-serif;
  font-size: 1.6vh;
  left: 2.5vw;
  position: absolute;
top: 0vh;
color: rgb(0, 0, 0);
}
.elvis{

  font-size: 0.8vh;
  left: 1.3vw;
  position: absolute;
top: 1vh;
color: rgb(44, 38, 38);
}
.iconrank{
  
  font-size: 2.8vh;
  left: 1vw;
  position: absolute;
top: 0.5vh;
color: rgb(44, 38, 38);

}
.iconrank2{
  
  font-size: 2.8vh;
  left: 1vw;
  position: absolute;
top: 0.5vh;
color: rgb(245, 145, 145);

}

.pontos{
  font-family: 'Amatic SC', cursive;
  font-size: 3vh;
  left: 5.5vw;
  position: absolute;
top: 0vh;
color: rgb(255, 255, 255);
}
.pontosdt{
  font-family: 'Changa', sans-serif;
  font-size: 1.5vh;
  left: 7.5vw;
  position: absolute;
top: 0vh;
color: rgb(0, 0, 0);
}

.temarank2{
  font-family: 'Amatic SC', cursive;
  font-size: 3vh;
  left: 3vw;
  position: absolute;
top: 0vh;
color: rgb(250, 250, 250);

}
.temarank{
  font-family: 'Amatic SC', cursive;
  font-size: 3vh;
  left: 3vw;
  position: absolute;
top: 0vh;
color: rgb(3, 3, 3);

}
.gizatalks{
  grid-area: gizatalks;
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);


}
.gizanews1{
  top:2.5%;
  left: 10%;
  border-radius: 3vh;
  background: rgb(30, 140, 184);
  position: relative;
  height: 20%;
  width: 80%;
  border-style: groove;
  border-color: #241110;
  border-radius: 1vh;
  box-sizing: border-box;
  cursor: pointer;
}
.gizanews2{
  top: 5%;
  left: 10%;
  border-radius: 3vh;
  background: #FA4659;
  position: relative;
  
  height: 20%;
  width: 80%;
  border-style: groove;
  border-color: #241110;
  border-radius: 1vh;
  box-sizing: border-box;
  cursor: pointer;
}
.gizanews3{
  top: 7.5%;
  left: 10%;
  border-radius: 3vh;
  position: relative;
  background: rgb(20, 163, 108);
  width: 80%;
  height: 20%;
  border-style: groove;
  border-color: #241110;
  border-radius: 1vh;
  box-sizing: border-box;
  cursor: pointer;
}
.gizanews4{

 
  top: 10%;
  left: 10%;
  border-radius: 3vh;
  position: relative;
  background: rgb(218, 160, 2);
  width: 80%;
  height: 20%;
  border-style: groove;
  border-color: #241110;
  border-radius: 1vh;
  box-sizing: border-box;
  cursor: pointer;
}
.teamtalks{
  grid-area: teamtalks;
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);

}
.teamnews1{
  top:2.5%;
  left: 10%;
  border-radius: 3vh;
  background: rgb(218, 160, 2);
  position: relative;
  height: 20%;
  width: 80%;
  border-style: groove;
  border-color: #241110;
  border-radius: 1vh;
  box-sizing: border-box;
}
.teamnews2{
  top: 5%;
  left: 10%;
  border-radius: 3vh;
  background: rgb(20, 163, 108);
  position: relative;
  height: 20%;
  width: 80%;
  border-style: groove;
  border-color: #241110;
  border-radius: 1vh;
  box-sizing: border-box;
}
.teamnews3{
  top: 7.5%;
  left: 10%;
  border-radius: 3vh;
  position: relative;
  background: #FA4659;
  width: 80%;
  height: 20%;
  border-style: groove;
  border-color: #241110;
  border-radius: 1vh;
  box-sizing: border-box;
}
.teamnews4{
  top: 10%;
  left: 10%;
  border-radius: 3vh;
  position: relative;
  background: rgb(30, 140, 184);
  width: 80%;
  height: 20%;
  border-style: groove;
  border-color: #241110;
  border-radius: 1vh;
  box-sizing: border-box;
 
}
.textoreclame1{
  color: rgb(90, 212, 214);
  position: relative;
  width: 100%;
  height: 100%;
  top: 1vh; 
  font-family: 'Amatic SC', cursive;
  
  }

.reclame1{
 
grid-area: reclame1;
border-radius: 0.4vh;
position: relative;
width: 100%;
font-size: 5vh;
border-style: groove;

background: #364F6B;
border-radius: 1vh;
box-sizing: border-box;



opacity: 1;

}
.reclame2{
  
  grid-area: reclame2;
  border-radius: 0.4vh;
  position: relative;
  width: 100%;
  font-size: 5vh;
  border-style: groove;
  border-color: #000000;
  border-radius: 1vh;
  box-sizing: border-box;
  background: #364F6B;
  opacity: 1;

  }



  .textoreclame2{
    color: rgb(90, 212, 214);
    position: relative;
    width: 100%;
    height: 100%;
    top: 1vh; 
    font-family: 'Amatic SC', cursive;
    
    }
  .DRIMTEC { 
    grid-area: DRIMTEC;
    width: 20vh;
    height: 9vw;
    font-size: 10px;
    color:rgb(219, 26, 26);
    background: #ffffff;
    border: none;
    border-radius: none;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    transition: all 400ms ease  
  }
  .DRIMTECHOVER{
    position: relative;
    transform-style: preserve-3d;

  }

  .DRIMTECHOVER:after {
   
    top: -100%;
    left:0px;
    width: 100%;
    bottom:100%;
    position: absolute;
    font-size: relative;
    background-image: url(drim.jpg);
    background-repeat: no-repeat;
      
      background-size: contain;
      background-position: center;
    border-radius: none;
    box-sizing: border-box;
    content: '';
    transform-origin: left bottom;
    transform: rotateX(90deg);
 }
 .DRIMTECHOVER:hover {
  
   transform-origin: center bottom;
   transform: rotatex(-90deg) translatey(100%);
 }
  .BRUTUS { 
    grid-area: BRUTUS;
    width: 20vh;
    height: 9vw;
    font-size: 15px;
    color:rgb(219, 26, 26);
    background: rgb(255, 255, 255);
    border: none;
    border-radius: none;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    transition: all 400ms ease  
    
  }
  .BRUTUSHOVER{
    position: relative;
    transform-style: preserve-3d;

  }
  .BRUTUSHOVER:after {
   
    top: -100%;
    left:0px;
    width: 100%;
    bottom:100%;
    background-image: url(drim.jpg);
    background-repeat: no-repeat;
      
      background-size: contain;
      background-position: center;
    position: absolute;
    font-size: relative;
    
    border-radius: none;
    box-sizing: border-box;
    content: '';
    transform-origin: left bottom;
    transform: rotateX(90deg);
 }
 .BRUTUSHOVER:hover {
  
   transform-origin: center bottom;
   transform: rotatex(-90deg) translatey(100%);
 }
  
 
  .UM { 
    font-family: 'M PLUS Code Latin', sans-serif;
    grid-area: UM; 
    width: 100%;
    font-size: 2vh;
    text-align: center;
    color:#3FC1C9;
    background: #364F6B;
    border: none;
    border-radius: 1vh;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    transition: all 400ms ease  
  }
  .UMHOVER{
    position: relative;
    transform-style: preserve-3d;

  }
  .UMHOVER:after {
    
    top: -100%;
    left:0px;
    width: 100%;
    bottom:100%;
    position: relative;
    font-size: relative;
    background:rgb(204, 194, 194);
    border-radius: none;
    box-sizing: border-box;
    content: '';
    transform-origin: left bottom;
    transform: rotateX(90deg);
 }
 .UMHOVER:hover {
  
   transform-origin: center bottom;
   transform: rotatex(-90deg) translatey(100%);
 }

  .DOIS { 
    font-family: 'M PLUS Code Latin', sans-serif;
    grid-area: DOIS;
    width: 100%;
    font-size: 2vh;
    text-align: center;
  
    position: relative;
    color:#3FC1C9;
    background: #364F6B;
    border: none;
    border-radius: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 400ms ease  

   
    

  }
  .DOISHOVER{
    position: relative;
    transform-style: preserve-3d;

  }
  .DOISHOVER:after {
   
    top: -100%;
    left:0px;
    width: 100%;
    bottom:100%;
    position: relative;
    font-size: relative;
    background:rgb(221, 126, 126);
    border-radius: none;
    box-sizing: border-box;
    content: '';
    transform-origin: left bottom;
    transform: rotateX(90deg);
 }
 .DOISHOVER:hover {
  
   transform-origin: center bottom;
   transform: rotatex(-90deg) translatey(100%);
 }
  
  .TRES { 
    font-family: 'M PLUS Code Latin', sans-serif;
    grid-area: TRES;
    width: 100%;
    font-size: 15px;
    color:#3FC1C9;
    background: #364F6B;
    border: none;
    border-radius: none;
    box-sizing: border-box;
    cursor: pointer;
    position: RELATIVE;
    transition: all 400ms ease  
  }
  .TRESHOVER{
    position: relative;
    transform-style: preserve-3d;

  }
  .TRESHOVER:after {
   
    top: -100%;
    left:0px;
    width: 100%;
    bottom:100%;
    position: absolute;
    font-size: relative;
    background:rgb(199, 94, 94);
    border-radius: none;
    box-sizing: border-box;
    content: '';
    transform-origin: left bottom;
    transform: rotateX(90deg);
 }
 .TRESHOVER:hover {
  
   transform-origin: center bottom;
   transform: rotatex(-90deg) translatey(100%);
 }

  .QUATRO { 
    text-align: center;
    
    font-family: 'M PLUS Code Latin', sans-serif;
    grid-area: QUATRO;
    width: 100%;
    font-size: 15px;
    color:#3FC1C9;
    background: #364F6B;
    border: none;
    border-radius: none;
    box-sizing: border-box;
    cursor: pointer;
    position: RELATIVE;
    transition: all 400ms ease  
  }
  .QUATROHOVER{
    position: relative;
    transform-style: preserve-3d;

  }
  .QUATROHOVER:after {
   
    top: -100%;
    left:0px;
    width: 100%;
    bottom:100%;
    position: relative;
    font-size: relative;
    background:rgb(124, 118, 118);
    border-radius: none;
    box-sizing: border-box;
    content: '';
    transform-origin: left bottom;
    transform: rotateX(90deg);
 }
 .QUATROHOVER:hover {
  
   transform-origin: center bottom;
   transform: rotatex(-90deg) translatey(100%);
 }
  
  .CINCO { 
    font-family: 'M PLUS Code Latin', sans-serif;
    grid-area: CINCO;
    width: 100%;
    font-size: 2vh;
    text-align: center;
    color:#3FC1C9;
    background: #364F6B;
    border: none;
    border-radius: none;
    box-sizing: border-box;
    cursor: pointer;
    position: RELATIVE;
    transition: all 400ms ease  
  }
  .CINCOHOVER{
    position: relative;
    transform-style: preserve-3d;

  }
  .CINCOHOVER:after {
   
    top: -100%;
    left:0px;
    width: 100%;
    bottom:100%;
    position: relative;
    font-size: relative;
    background:rgb(129, 118, 118);
    border-radius: none;
    box-sizing: border-box;
    content: '';
    transform-origin: left bottom;
    transform: rotateX(90deg);
 }
 .CINCOHOVER:hover {
  
   transform-origin: center bottom;
   transform: rotatex(-90deg) translatey(100%);
 }
  
  .SEIS { 
    font-family: 'M PLUS Code Latin', sans-serif;
    grid-area: SEIS;
    width: 100%;
    font-size: 2vh;
    text-align: center;
    color:#3FC1C9;
    background: #364F6B;
    border: none;
    border-radius: none;
    box-sizing: border-box;
    cursor: pointer;
    position: RELATIVE;
    transition: all 400ms ease  
  }
  .SEISHOVER{
    position: relative;
    transform-style: preserve-3d;

  }
  .SEISHOVER:after {
   
    top: -100%;
    left:0px;
    width: 100%;
    bottom:100%;
    position: relative;
    font-size: relative;
    background:rgb(110, 100, 100);
    border-radius: none;
    box-sizing: border-box;
    content: '';
    transform-origin: left bottom;
    transform: rotateX(90deg);
 }
 .SEISHOVER:hover {
  
   transform-origin: center bottom;
   transform: rotatex(-90deg) translatey(100%);
 }
  
  .SETE { 
    font-family: 'M PLUS Code Latin', sans-serif;
    grid-area: SETE;
    width: 100%;
    font-size: 2vh;
    text-align: center;
    color:#3FC1C9;
    background: #364F6B;
    border: none;
    border-radius: none;
    box-sizing: border-box;
    cursor: pointer;
    position: RELATIVE;
    transition: all 400ms ease  
  }
  .SETEHOVER{
    position: relative;
    transform-style: preserve-3d;

  }
  .SETEHOVER:after {
   
    top: -100%;
    left:0px;
    width: 100%;
    bottom:100%;
    position: relative;
    font-size: relative;
    background:rgb(119, 105, 105);
    border-radius: none;
    box-sizing: border-box;
    content: '';
    transform-origin: left bottom;
    transform: rotateX(90deg);
 }
 .SETEHOVER:hover {
  
   transform-origin: center bottom;
   transform: rotatex(-90deg) translatey(100%);
 }
  
  .OITO {
    font-family: 'M PLUS Code Latin', sans-serif;
     grid-area: OITO; 
     width: 100%;
     font-size: 2vh;
     color:#3FC1C9;
     background: #364F6B;
     border: none;
     text-align: center;
     border-radius: none;
     box-sizing: border-box;
     cursor: pointer;
     position: RELATIVE;
     transition: all 400ms ease  
   }
   .OITOHOVER{
     position: relative;
     transform-style: preserve-3d;
 
   }
   .OITOHOVER:after {
    
     top: -100%;
     left:0px;
     width: 100%;
     bottom:100%;
     position: relative;
     font-size: relative;
     background:rgb(243, 170, 170);
     border-radius: none;
     box-sizing: border-box;
     content: '';
     transform-origin: left bottom;
     transform: rotateX(90deg);
  }
  .OITOHOVER:hover {
   
    transform-origin: center bottom;
    transform: rotatex(-90deg) translatey(100%);
  }
  
  .NOVE { 
    font-family: 'M PLUS Code Latin', sans-serif;
    text-align: center;
    grid-area: NOVE;
    width: 100%;
    font-size: 2vh;
    color:#3FC1C9;
    background: #364F6B;
    border: none;
    border-radius: none;
    box-sizing: border-box;
    cursor: pointer;
    position: RELATIVE;
    transition: all 400ms ease  
  }
  .NOVEHOVER{
    position: relative;
    transform-style: preserve-3d;

  }
  .NOVEHOVER:after {
   
    top: -100%;
    left:0px;
    width: 100%;
    bottom:100%;
    position: absolute;
    font-size: relative;
    background:rgb(165, 61, 61);
    border-radius: 1px;
    box-sizing: border-box;
    content: '';
    transform-origin: left bottom;
    transform: rotateX(90deg);
 }
 .NOVEHOVER:hover {
  
   transform-origin: center bottom;
   transform: rotatex(-90deg) translatey(100%);
 }
  
  .DEZ { 
    font-family: 'M PLUS Code Latin', sans-serif;
    text-align: center;
    grid-area: DEZ;
    width: 100%;
    height: 100%;
    font-size: 15px;
    color:#3FC1C9;
    background: #364F6B;
    border: none;
    border-radius: none;
    box-sizing: border-box;
    cursor: pointer;
    position: RELATIVE;
    transition: all 400ms ease  
  }
  .DEZHOVER{
    position: relative;
    transform-style: preserve-3d;

  }
  .DEZHOVER:after {
   
    top: -100%;
    left:0px;
    width: 100%;
    bottom:100%;
    position: absolute;
    font-size: relative;
    background:red;
    border-radius: none;
    box-sizing: border-box;
    content: '';
    transform-origin: left bottom;
    transform: rotateX(90deg);
 }
 .DEZHOVER:hover {
  
   transform-origin: center bottom;
   transform: rotatex(-90deg) translatey(100%);
 }


 body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

  background-color: rgb(255, 255, 255);
  opacity: 0.9;
  margin: 0;
  position:relative;
  top:50;
  bottom:0;
  left: 0;
  right: 0;
 
}
i {
     

  color: black;
  will-change: transform;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 3.3s ease;
  transition: all 3.3s ease;
}


.container {
  position: fixed;
  top: -100%;
  left:0px;
  width: 100%;
  bottom:100%;
  transform-origin: left bottom;
  transform: rotateX(90deg);
  
  background-color: rgb(255, 255, 255) ;
  transform-style: preserve-3d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;


 
  -webkit-transition: all 2.1s ease;
  transition: all 2.1s ease;
  box-sizing: border-box;
  content:'';

}







.container i:nth-of-type(1) {

          -webkit-transition-delay: 1.1s;
                  transition-delay: 0.4s;
}

.container i:nth-of-type(2) {

          -webkit-transition-delay: .9s;
                  transition-delay: .4s;
}

.containercicloofi {  display: grid;
  grid-template-columns: 0.2fr 1fr;
  grid-template-rows: 0.15fr 1fr;
  gap: 2px 2px;
  grid-auto-flow: row;
  grid-template-areas:
    "cabelhos cabelhos"
    "cabelhos cabelhos";
    height: 80vh;
    overflow-x: scroll;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.cabelhos {
   grid-area: cabelhos;
   background-color: #04dbfb;
   overflow-y: none;

  }