@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}



   .fa-whatsappi{
 /* background: #00BB2D;*/
  color: #00BB2D;
  width: 40px;
  height: 40px;
}

.middle{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 70%;
	vertical-align: middle;
}

.btnns{
	display: block;
	width: 40px;
	height: 40px;
	background: #f1f1f1;
	margin: 4px;
	border-radius: 30%;
	box-shadow: 0 5px 15px -5px #00000070;
	color: #3498bd;
	overflow: hidden;
	position: relative;

}
.btnns i {
	line-height:  40px;
	font-size: 28px;
	transition: 0.2s linear;
}



.btnns:hover i{
     transform: scale(1.3);
     color:#f1f1f1;
}

.btnns::before{
	content: "";
	position: absolute;
	width:120%;
	height: 120%;
	background: #3498db;
	transform: rotate(45deg);
	left: -110%;
	top: 90%;
}

.btnns:hover::before{
	animation: aaa 0.7s 1;
	top:.10%;
	left:-10%;
}

@keyframes aaa{
	0%{
     left:-110%;
     top:90%;
	}

	50%{
     left:10%;
     top:-30%;
	}

	100%{
     top:-10%;
     left:-10%;
	}
}
.fa-whatsappi{
 /* background: #00BB2D;*/
  color: #00BB2D;
  width: 40px;
  height: 40px;
}

.middle{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 70%;
	vertical-align: middle;
}

.btnn{
	display: block;
	width: 40px;
	height: 40px;
	background: #f1f1f1;
	margin: 4px;
	border-radius: 30%;
	box-shadow: 0 5px 15px -5px #00000070;
	color: #3498bd;
	overflow: hidden;
	position: relative;

}
.btnn i {
	line-height:  40px;
	font-size: 28px;
	transition: 0.2s linear;
}



.btnn:hover i{
     transform: scale(1.3);
     color:#f1f1f1;
}

.btnn::before{
	content: "";
	position: absolute;
	width:120%;
	height: 120%;
	background: #3498db;
	transform: rotate(45deg);
	left: -110%;
	top: 90%;
}

.btnn:hover::before{
	animation: aaa 0.7s 1;
	top:.10%;
	left:-10%;
}

@keyframes aaa{
	0%{
     left:-110%;
     top:90%;
	}

	50%{
     left:10%;
     top:-30%;
	}

	100%{
     top:-10%;
     left:-10%;
	}
}



.flotante {position:fixed;
top:207px;
z-index:9999999;
right:0px;
}

.flotantep {position:fixed;
top:250px;
z-index:9999999;
right:0px;
}