.social {
position: relative; /* Posicion relativ*/
left: 5px; /* Establecemos la barra en la izquierda */
top: 40px; /* Bajamos la barra 200px de arriba a abajo */
z-index: 2/* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
.social ul {
list-style: none;
}
 
.social ul li a {
display: inline-block;
color:#fff;
background: #000;
padding: 20px 20px;
font-size: 120%;
text-shadow: -3px 2px 2px black;
text-decoration: none;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
}
 
.social ul li .azul {background:#00205C;} /* Establecemos los colores , aprovechando su class */
.social ul li .rosa {background: #9C0E7A;}
.social ul li .icon-googleplus {background: #79a1b4;}
.social ul li .icon-pinterest {background: #ae181f;}
.social ul li .icon-mail {background: #00205c;}
 
.social ul li a:hover {
background: #00ABCD; /* Cambiamos el fondo cuando el usuario pase el mouse */
padding: 20px 120px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}

/* ==========================================================================
LIGAS PARA SECCION DE COVID-19
========================================================================== */

.social2 {
position: relative; /* Posicion relativ*/
left: 0px; /* Establecemos la barra en la izquierda */
top: 60px; /* Bajamos la barra 200px de arriba a abajo */
/*LO QUITE PARA QUE NO SE SUPERPONGA/* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
.social2 ul {
list-style: none;
}
 
.social2 ul li a {
display: inline-block;
color:#ffffff;
background: #EDF0F3;
padding: 20px 20px;
font-size: 120%;
text-shadow: 0px 0px 5px #00ABCD;
text-decoration: none;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
}

.social2 ul li .azul2 {background:#5b6770;} /* Establecemos los colores , aprovechando su class */
.social2 ul li .rosa2 {background: #7c878e;}
.social2 ul li .blanco2 {background: #a1a6a9;}
.social2 ul li .icon-pinterest2 {background: #ae181f;}
.social2 ul li .icon-mail2 {background: #666666;}
 
.social2 ul li a:hover {
background: #00ABCD; /* Cambiamos el fondo cuando el usuario pase el mouse */
padding: 20px 120px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}
/* ==========================================================================
LIGAS PARA SECCION DE COVID-19 ----- version blancos
========================================================================== */
.social3 ul li a {
display: inline-block;
color:#C9F3FF;
background: #EDF0F3;
padding: 20px 20px;
font-size: 120%;
text-shadow: 0px 2px 2px #00205C;
text-decoration: none;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
}
 
.social3 ul li .azul3 {background:#00205C;} /* Establecemos los colores , aprovechando su class */
.social2 ul li .rosa3 {background: #9C0E7A;}
.social2 ul li .blanco2 {background: #E8EBF0;}
.social2 ul li .icon-pinterest2 {background: #ae181f;}
.social2 ul li .icon-mail2 {background: #666666;}
 
.social2 ul li a:hover {
background: #00ABCD; /* Cambiamos el fondo cuando el usuario pase el mouse */
padding: 20px 120px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}