*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box;
}
	.social {
     position: fixed;
     left: 0;
     top:350px;
     z-index:2000; 

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

    .social ul li a{
        display: inline-block;
        color: #fff;
        background: #000;
        padding: 10px 15px;
        text-decoration: none;
        /*para la animacion */
        -webkit-transition:all 500ms ease;
        -o-transition:all 500ms ease;
        /* para que quede corcular border-radius: 20px; */
        transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */



    }


    .social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-twitter {background: #00abf0;}
	.social ul li .icon-google-plus {background: #d95232;}
	.social ul li .icon-youtube {background: #ae181f;}
	.social ul li .icon-mail {background: #666666;}
	.social ul li .icon-whatsapp2 {background:#25d366;} 
	.social ul li .icon-linkedin2 {background:#4875B4;}
	.social 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 */
	}
	



		@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?pjk3w');
    src:    url('fonts/icomoon.eot?pjk3w#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?pjk3w') format('truetype'),
        url('fonts/icomoon.woff?pjk3w') format('woff'),
        url('fonts/icomoon.svg?pjk3w#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-facebook:before {
    content: "\ea90";
}
 .icon-twitter:before {
    content: "\ea96";
}
.icon-google-plus:before {
    content: "\ea8b";
}

.icon-youtube:before {
    content: "\ea9d";
}

.icon-mail:before {
    content: "\ea83";
}
.icon-mail2:before {
    content: "\ea84";
}
.icon-mail3:before {
    content: "\ea85";
}
.icon-mail4:before {
    content: "\ea86";
}
.icon-linkedin:before {
    content: "\eac9";
}
.icon-linkedin2:before {
    content: "\eaca";
}

.icon-whatsapp2:before {
  content: "\ea93";
}

@media only screen and (min-width: 500px) {div.banner_mobile {display: none;}div.banner_pc {display: block;}}
@media only screen and (max-width: 800px) {div.banner_pc {display: none;}div.banner_mobile {display: block;}}
	</style>