@charset "utf-8";
/* CSS Document */

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}


* {
	margin: 0;
	padding:0;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
	font-family: sans-serif;
}


.social {
	position: fixed; 
	left:0; 
	top: 210px; 
	z-index: 1000; 
	align-items: left;
	
}

.social span1 {
		cursor:no-drop;
		color: rgb(51,51,51);
}
	
.social ul {
		list-style: none;
		font-size: 25px;
		cursor:pointer;
	   color:rgb(255,255,255);
}
	
 
.social ul li a {
		display: block;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease;
		
}
 
	
.social ul li .icon-facebook2 {
	
		color:rgb(0,51,153);
	
}
		
.social ul li .icon-blogger2 {
		color: rgb(255,153,51);		
		
}	
		
		 
.social ul li .icon-twitter {
		color:rgb(0,153,255);
			
}

.social ul li .icon-instagram {
		color: rgb(102,0,153);
	
}


.social ul li .icon-youtube {
		color: rgb(255,0,0);
	
}

.social ul li .icon-envelop {
	color: rgba(51,153,0,1);
}
 
.social ul li a:hover {

		background-color:rgba(187,187,187,1);
	 
		 padding: 4px 10px; 
}
	
	
		
@media (max-width: 768px) {
		

		.social{
			position:absolute;
			top:150px;
			left:0%;
			width: 10%;
			transform: translateX(-100%);
			transition:all 0.5s;
		}
			
		
		.social ul {
			display: block;
		
		}
		
				
		.social ul li:hover ul  {
			display: none;
			
		}
		
		
		#btn-menu:checked ~ .social{
			transform: translateX(1%);
			
		}
}

@media (max-width: 480px) {
		
		.social{
			top:60px;
					
		}
		
		.social ul {
			padding: 12px 0px;
			font-size: 20px;
		
		}
}