/* CSS Document */
	
.social {
position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
left: 0; /* Establecemos la barra en la izquierda */
top: 15%; /* Bajamos la barra 200px de arriba a abajo */
z-index: 9000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
/*width:150px;*/
/*clip: rect(0px, 50px, 56px, 0px);*/
-webkit-clip-path: inset(0% 76% 0% 0% round 0px 10px 10px 0px);
}
 
.social ul {
list-style: none;
}
  
.social ul li a {
/*margin:-200px -80px -70px -50px;*/

margin:0 0 0 0px;
overflow:hidden; /* IMPORTANTE */

display: inline-block;
color:#fff;
/*background: #000;*/

/*padding: 12px 30px;*/
/*padding: 14px 314px 10px 14px ;*/
width:425px;
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 */
-webkit-border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
}
 
/* Establecemos los colores de cada red social, aprovechando su class */
.social ul li .kandyio {
	/*background:#3f3f3f;*/
	}
	
 
.social ul li a:hover {
/*background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
/*padding: 12px 30px;*/ /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
/*padding: 14px 0px 10px 14px ;*/
/*width:200px;*/
}


.social:hover{
/*width:200px;*/
/*clip: rect(0px, 200px, 56px, 0px);*/
-webkit-clip-path: inset(0% 0% 0% 0% round 0px 10px 10px 0px);

}


.crop{
 float:left;
 margin:.5em 10px .5em 0;
 overflow:hidden; /* IMPORTANTE */
 border:1px solid #ccc;
 }

 /* Indicamos los márgenes que dejamos para simular el crop. */
.crop img{
 margin:-20px -15px -40px -55px;
 }
 
 
 /*social2 para nube*/
.social2 {
position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
/*left: 77%; /* Establecemos la barra en la izquierda */
right: 12%;
top: 78%; /* Bajamos la barra 200px de arriba a abajo */
z-index: 10000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
/*width:150px;*/

}
 
.social2 ul {
list-style: none;
}

.social2 ul li a {
/*margin:-200px -80px -70px -50px;*/

margin:0 0 0 0px;
overflow:hidden; /* IMPORTANTE */

display: inline-block;
color:#fff;
/*background: #000;*/
padding: 10px 15px;
/*width:150px;*/
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 */
}