@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?wkhqk1');
    src:    url('fonts/icomoon.eot?wkhqk1#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?wkhqk1') format('truetype'),
        url('fonts/icomoon.woff?wkhqk1') format('woff'),
        url('fonts/icomoon.svg?wkhqk1#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-instagram2:before {
    content: "\e901";
}
.icon-mail42:before {
    content: "\e904";
}
.icon-facebook:before {
    content: "\e906";
}
.icon-twitter2:before {
    content: "\e907";
}
.icon-linkedin22:before {
    content: "\e908";
}
.icon-tripadvisor:before {
    content: "\e909";
}
.icon-instagram3:before {
    content: "\e90a";
}
.icon-instagram22:before {
    content: "\e90b";
}
.icon-mail4:before {
    content: "\e900";
}
.icon-instagram:before {
    content: "\e905";
}
.icon-twitter:before {
    content: "\e902";
}
.icon-linkedin2:before {
    content: "\e903";
}

	*{
		margin:0;
		padding:0;
	}
     
     .social {
        top: 205px; /* Bajamos la barra 200px de arriba a abajo */
     }

     .social2 {
        top: 230px; /* Bajamos la barra 200px de arriba a abajo */
     }

	.social, .social2 {
		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 */
		z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
	}
 
	.social ul, .social2 ul {
		list-style: none;
	}
 
	.social ul li a, .social2 ul li a {
		display: inline-block; /* per poder editar els enllaços*/
		color:#fff;
		background: #000;
		padding: 10px 15px;
		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 .icon-facebook, .social2 ul li .icon-facebook 
	      {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-twitter, .social2 ul li .icon-twitter  
	      {background: #00abf0;}
	.social ul li .icon-tripadvisor, .social2 ul li .icon-tripadvisor  
	{
	      background: #2E8B57;
	      padding: 10px 13px; /* xapussilla pq la icona és més gran*/
	      }/* TRIP ADVISOR*/
	.social ul li .icon-instagram2, .social2 ul li .icon-instagram2 
	{background: #3b5998;}
 
	.social ul li a:hover, .social2 ul li a:hover  
	{
		background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}