/* inicio de estilos de redes */
.social {
    position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
    right: 0; /* Establecemos la barra en la izquierda */
    top: 326px; /* Bajamos la barra 200px de arriba a abajo */
    z-index: 8; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
    /*width: 100%;
    margin-left: 47%;*/
}

@media (min-width: 768px) {
   .social{
        top: 270px;
    }
}

@media (min-width: 992px) {
    .social{
    
    }
}
@media (min-width: 1200px) {
   .social{
      
    }
 }

.social ul {
    list-style: none;
}
 
.social ul li a {
    display: inline-block;
    color:#fff;
    background: #000;
    /*padding: 6px 11px;*/
    text-decoration: none;

    -webkit-transition:all 400ms ease;
    -o-transition:all 400ms ease;
    transition:all 400ms ease; /* Establecemos una transición a todas las propiedades */
    
    float: right;
    font-size: 23px;

}

@media (min-width: 768px) {
   .social ul li a{
    
    /*padding: 10px 15px;*/
    }
}

@media (min-width: 992px) {
    .social ul li a{
    
    }
}
@media (min-width: 1200px) {
   .social ul li a{
      
    }
 }

.social ul li .icon-facebook {
    background:#2A4683;
    /*margin-left: 100%;*/
} /* Establecemos los colores de cada red social, aprovechando su class */
.social ul li .icon-google {
    background:#CF2E22;
}
.social ul li .icon-twitter {
    background:#00C2FF;
}
.social ul li .icon-linkedin {
    background:#0075b8;
}

.social ul li .icon-youtube {
    background:#D41D1D;
}
.social ul li .icon-facebook:hover {
    background: #2A4683; /* Cambiamos el fondo cuando el usuario pase el mouse */
    padding: 0px 20px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}
.social ul li .icon-google:hover {
    background: #CF2E22; /* Cambiamos el fondo cuando el usuario pase el mouse */
    padding: 0px 20px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}
.social ul li .icon-twitter:hover {
    background: #00C2FF; /* Cambiamos el fondo cuando el usuario pase el mouse */
    padding: 0px 20px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}
.social ul li .icon-youtube:hover {
    background: #D41D1D; /* Cambiamos el fondo cuando el usuario pase el mouse */
    padding: 0px 20px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}
.social ul li .icon-linkedin:hover{
     background: #0075b8; /* Cambiamos el fondo cuando el usuario pase el mouse */
    padding: 0px 20px;
}

/* fin de estilos de redes */