/* This is an example, feel free to delete this code */

:root {
  --colorbg-btn-RRSS-g: #333;
  --colorbg-btn-RRSS-g2: var(--color-base-Azul);
  --color-btn-RRSS-g: white;
  --tamaño-btn-RRSS-g: 60px;
  --fuente-principal: 'Popins', sans-serif;
  --espaciado-xs: 8px;

  --top-btn-RRSS: 120%;
  --tamaño-btn-RRSS: 60px;
  --sombra-btn-RRSS: 0 2px 15px rgba(0, 0, 0, 0.9);
  --tamaño-icono-RSS: 32px;

}

.container-tooltip-RRSS {
  margin: 10px 0;
  position: relative;
  cursor: pointer;
  font-size: 17px;
  padding: 0px;  
  height: 320px;  
  display: flex;
  justify-content: center;
  align-items: center; 
}
.tooltip-container {
  width: 250px;
  height: 250px;
  justify-self: center;
  background: var(--color-base-Blanco);
  
  position: relative;
  display: flex;
  justify-content: center; 
  align-items: center; 
  top: 0;
  border-radius: 50%;
  border: 1px solid #3333;
  box-shadow: 1px 0px 7px 1px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 1px 0px 7px 1px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 1px 0px 7px 1px rgba(0, 0, 0, 0.3);
}

.tooltip-container .container-text-RRSS .text {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  fill: var(--color-base-Blanco);
  transition: all 0.2s;
  font-size: 11px;
  background: var(--colorbg-btn-RRSS-g2);
  color: var(--color-btn-RRSS-g);

  width: var(--tamaño-btn-RRSS-g);
  height: var(--tamaño-btn-RRSS-g);
  border-radius: 50%;
  justify-self: center;
  text-align: center;
  line-height: 15px;
  top: 94px;
  z-index: 1;
  
}
.tooltip-container:hover .container-text-RRSS .text {
  fill: rgb(3, 169, 244);
  transition: all 0.6s;
  transform: rotate(223deg);
}

.tooltip-container .container-text-RRSS .text i {
  display: flex;
  position: relative;
  font-size: 36px;
  justify-self: center;
  justify-content: center;
  padding: 5px;
  justify-self: center;
}







/* Inicio do tooltip LLamada Telefonica */
/****************************************/
.tooltip1 {
  width: var(--tamaño-btn-RRSS);
  height: var(--tamaño-btn-RRSS);
  position: absolute;
  top: 94px;
  left: 38%;
  
  opacity: 0;
  visibility: hidden;
  background: var(--color-base-Blanco);
  fill: #03a9f4;
  padding: 10px;
  border-radius: 50px;  
  z-index: 1;
  box-shadow: var(--sombra-btn-RRSS);
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip1 i {
  font-size: var(--tamaño-icono-RSS);
  color: var(--color-base-Negro);
  padding-left: 3px;
}

.tooltip-container:hover .tooltip1 {
  top: -25px;
  opacity: 1;
  visibility: visible;
  background: var(--color-base-Blanco)
  border-radius: 50px;
}
.tooltip-container:hover .tooltip1:hover {
  background: var(--color-base-Negro);
  fill: var(--color-base-Blanco);
  color: var(--color-base-Blanco);
}
.tooltip-container:hover .tooltip1:hover i { 
  color: var(--color-base-Blanco);
}


/* Inicio do tooltip whatsApp */
/*******************************************/
.tooltip2 {
  width: var(--tamaño-btn-RRSS);
  height: var(--tamaño-btn-RRSS);
  position: absolute;
  top: 94px;
  left: 38%; 
  opacity: 0;
  visibility: hidden;
  background: var(--color-base-Blanco);
  fill: #1db954;
  padding: 10px;
  border-radius: 50px;
 
  z-index: 1;
  box-shadow: var(--sombra-btn-RRSS);
}
.tooltip2 i {
  font-size: var(--tamaño-icono-RSS);
  color: var(--color-WhatsApp);
  padding-left: 3px;
}
.tooltip-container:hover .tooltip2 {
  top: 94px;
  left: 88%; 
  opacity: 1;
  visibility: visible;
  background: var(--color-base-Blanco);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip2:hover {
  background: #1db954;
  fill: var(--color-base-Blanco);
  color: var(--color-base-Blanco);
}
.tooltip-container:hover .tooltip2:hover i {   
  color: var(--color-base-Blanco);
}


/* Inicio do tooltip facebook */
/*********************************************/
.tooltip3 {
  width: var(--tamaño-btn-RRSS);
  height: var(--tamaño-btn-RRSS);
  position: absolute;
  top: 94px;
  left: 38%;
  opacity: 0;
  visibility: hidden;
  background: var(--color-base-Blanco);
  fill: var(--color-Facebook);
  padding: 10px;
  border-radius: 50px;
  z-index: 1;
  box-shadow: var(--sombra-btn-RRSS);
}
.tooltip3 i {
  font-size: calc(var(--tamaño-icono-RSS) + 3px);
  color: var(--color-Facebook);
  padding-left: 5px;
}

.tooltip-container:hover .tooltip3 {
  top: 210px;
  opacity: 1;
  visibility: visible;
  background: var(--color-base-Blanco);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tooltip-container:hover .tooltip3:hover {
  background: var(--color-Facebook);
  fill: var(--color-base-Blanco);
  color: var(--color-base-Blanco);
}
.tooltip-container:hover .tooltip3:hover i { 
  color: var(--color-base-Blanco);
}



/* Inicio do tooltip Youtube */
.tooltip4 {
  width: var(--tamaño-btn-RRSS);
  height: var(--tamaño-btn-RRSS);
  position: absolute;
  top: 94px;
  left: 38%; 
  opacity: 0;
  visibility: hidden;
  background: var(--color-base-Blanco);
  fill: var(--color-Youtube);
  padding: 10px;
  border-radius: 50px;  
  z-index: 1;
  box-shadow: var(--sombra-btn-RRSS);
}
.tooltip4 i {
  font-size: var(--tamaño-icono-RSS);
  color: var(--color-Youtube);
  padding-left: 3px;
}

.tooltip-container:hover .tooltip4 {
  top: 94px;
  left: -12%;  
  opacity: 1;
  visibility: visible;
  background: var(--color-base-Blanco);  
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip4:hover {
  background: #FE0134;
  fill: var(--color-base-Blanco);
}
.tooltip-container:hover .tooltip4:hover i {
  color: var(--color-base-Blanco);
}


/* Inicio do tooltip Email */
/*******************************************/
.tooltip5 {
  width: var(--tamaño-btn-RRSS);
  height: var(--tamaño-btn-RRSS);
  position: absolute;  
  top: 94px;
  left: 38%; 
  opacity: 0;
  visibility: hidden;
  background: var(--color-base-Blanco);
  fill: var(--color-base-Dorado);
  padding: 10px;
  border-radius: 50px;  
  z-index: 1;
  box-shadow: var(--sombra-btn-RRSS);
}
.tooltip5 i {
  font-size: var(--tamaño-icono-RSS);
  color: var(--color-base-Negro);
  padding-left: 3px;
}
.tooltip-container:hover .tooltip5 {
  top: 5px;
  left: 74%;
  opacity: 1;
  visibility: visible;
  background: var(--color-base-Blanco); 
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip5:hover {
  background: var(--color-base-Dorado);
  fill: var(--color-base-Blanco);
}





/* Inicio do tooltip Instagram */
/*********************************************/
.tooltip6 {
  width: var(--tamaño-btn-RRSS);
  height: var(--tamaño-btn-RRSS);
  position: absolute;
  top: 120px;
  left: 47.4%; 
  opacity: 0;
  visibility: hidden;
  background: var(--color-base-Blanco);
  fill: var(--color-base-Negro);
  padding: 10px;
  border-radius: 50px;  
  z-index: 1;
  box-shadow: var(--sombra-btn-RRSS);
}
.tooltip6 i {
  font-size: var(--tamaño-icono-RSS);
  color: #D62976;
  padding-left: 3px;
}

.tooltip-container:hover .tooltip6 {
  top: 185px;
  left: 74%;
  opacity: 1;
  visibility: visible;
  background: var(--color-base-Blanco);  
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip6:hover {
  background: linear-gradient(#4F5BD5, #962FBF, #D62976, #FA7E1E, #FEDA75);
  fill: var(--color-base-Blanco);
}
.tooltip-container:hover .tooltip6:hover i {  
  color: var(--color-base-Blanco);
}




/* Inicio do tooltip Twitter */
.tooltip7 {
  width: var(--tamaño-btn-RRSS);
  height: var(--tamaño-btn-RRSS);
  position: absolute;
  top: 94px;
  left: 38%;
  opacity: 0;
  visibility: hidden;
  background: var(--color-base-Blanco);
  fill: #000;
  padding: 10px;
  border-radius: 50px;  
  z-index: 1;
  box-shadow: var(--sombra-btn-RRSS);
}
.tooltip7 i {
  font-size: var(--tamaño-icono-RSS);
  color: var(--color-Twitter);
  padding-left: 3px;
}
.tooltip-container:hover .tooltip7 {
  top: 185px;
  left: 2%;
  opacity: 1;
  visibility: visible;
  background: var(--color-base-Blanco); 
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip7:hover {
  background: var(--color-Twitter);
  fill: var(--color-base-Blanco);
}
.tooltip-container:hover .tooltip7:hover i {
  color: var(--color-base-Blanco);
} 


/* Inicio do tooltip WEB */
.tooltip8 {
  width: var(--tamaño-btn-RRSS);
  height: var(--tamaño-btn-RRSS);
  position: absolute;
  top: 94px;
  left: 38%; 
  opacity: 0;
  visibility: hidden;
  background: var(--color-base-Blanco);
  fill: var(--color-base-Negro);
  padding: 10px;
  border-radius: 50px;  
  z-index: 1;
  box-shadow: var(--sombra-btn-RRSS);
}
.tooltip8 i {
  font-size: var(--tamaño-icono-RSS);
  color: var(--color-base-Azul);
  padding-left: 3px;
}
.tooltip-container:hover .tooltip8 {
  top: 5px;
  left: 1%;
  opacity: 1;
  visibility: visible;
  background: var(--color-base-Blanco);  
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;

}
.tooltip-container:hover .tooltip8:hover {
  background: var(--color-base-Azul);
  fill: var(--color-base-Blanco);  
}
.tooltip-container:hover .tooltip8:hover i {  
  color: var(--color-base-Blanco);
}




/* Inicio do tooltip fixo */
.tooltip9 {
  position: absolute;
  top: 0;
  left: -115%;
  opacity: 0;
  visibility: hidden;
  width: 150px;
  height: 150px;
  z-index: -1;
}

.tooltip-container:hover .tooltip9 {
  top: -110%;
  opacity: 1;
  visibility: visible;
  border-radius: 50%;
  z-index: -1;
}
/* Fim do tooltip fixo */
/* Por meio desse ultimo tooltip todos os outros podem
ficar fixos quando houver no principal, para vê-lo dê um
background black acima*/




.container-text-RRSS .text-rotate { 
  width: 110px;
  height: 110px; 
  border-radius: 50%;
  background: var(--color-base-Negro);  
  justify-self: center;
}

.circular-text {
  animation: text-circle 20s linear infinite;
  display: block;
  color: var(--color-base-Blanco);
  position: relative;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  justify-self: center;
  padding: 3px;
}

@keyframes text-circle {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}