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

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body{
	
	background-image:url(bgdivder.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	font-family: 'Roboto', sans-serif;
	}

#contenedor{
	width: 100%;
	height: auto;
	}


#izq{
	
	z-index: 1000;
	padding: 25px;
	
	width: 100%;
	height: auto;
	background:rgba(255,255,255,0.5);
	display: flex;
	justify-content:space-between ;
	flex-wrap: wrap;
	overflow: hidden;
	}

#der{
	position: relative;
	width: 100%;
	height: 100vh;
	background: url(bgdivder.jpg);
	background-size: cover;
	background-attachment: fixed;
	
	
	left: 0px;
	overflow: hidden;
	
 		
}


#patrocinio{
	width: 100%;
	height: auto;
	text-align: center;
}


#contenedorpatrocinadores{
	width: 100%;
	display: flex;
	justify-content: center;
}

.imgpatrocinador{
	width: 50%;
	height: auto;
	max-width: 133px;
}
#menubar, #menubar2, #menubar3, #menubar4, #menubar5, #menubar6, #menubar7, #menubar8, #menubar9, #menubar10, #menubar11, #menubar12, #menubar13, #menubar14, #menubar15, #menubar16, #menubar17, #menubar18, #menubar19, #menubar20{display: none;}


#item14, #item15{
	position: relative;
	z-index: 1000;
}
.link{	
	cursor: pointer;	
	}



.texto{
	font-family: 'Roboto', sans-serif;
	display: block;
	color:#FFFFFF;
	text-align: center;
	width: 100px;
	height: 50px;
	transition: all 0.2s;
	
}

.texto:hover {

	width: 120px;
	transition: all 0.2s;
	
}

.lbs2{
	position: absolute;
	width: 100%;
	top: 0px;
	z-index: 2000;
	opacity: 1;
	
	
	animation-name: items;
	animation-iteration-count: 1;
	animation-duration: 1s;
	animation-timing-function: ease;
}

@keyframes items{
	0% {opacity: 0;}
	100% {opacity: 1;}
}


#base{
	position: relative;
	z-index: 0;
}

#familia{
	position: absolute;
	z-index: 1;
	right: 0px;
	bottom: 60px;
	
}

#capas{
	width: 250px;
	height: 250px;
	
}




	#itemsizquierdo{
		position: relative;
		z-index: 6000;
		float: left;
		display: flex;
		justify-content:center;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
	
			
	}	
	
#patrocinador{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	width: 100%;
}

	.item{		
	width: 25%;
	height: auto;	
	}
	
.item:hover{
	background: rgba(203,203,203,0.47);
}
	.option{
		float: left;
		width: 50%;
		max-height: auto;
		max-width: 420px;
		margin: auto;
		text-align: center;
		

	}
	
	
.redes{
	display: block;
	background: linear-gradient(to bottom, #26b4d4, #2980b7);
	width: 50%;
	margin: auto;
	z-index: 5000;
	
	transition: all 1s;
		
}

.redes:hover{
	background: #25c0db;
}

#item11{
	z-index: 5000;
}

.lbs3{
	position: absolute;
	width: 100%;
	height: auto;
	top: 0px;
	right: 0px;
	z-index: 2000;
	opacity: 1;
	
	
	animation-name: items;
	animation-iteration-count: 1;
	animation-duration: 1s;
	animation-timing-function: ease;
}	


.itempatrocinador{
		
	width: 50%;
	height: auto;	
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100000;
	}
	
.textoverano{
	display: block;
	width: 100%;
	height: auto;
	font-size: 30px;
	color:#40ab66;
	text-align: center;
	margin: auto;
}



@keyframes item-patrocinado{
	0%{transform: scale(1);}
	50%{transform: scale(1.2);}
	100%{transform: scale(1);}
}
	
	
#patrocinador{
		width: 100%;
}
	
	#der{
		width: 100%;
	}
	
	.item{
		
	width: 25%;
	height: auto;	
	}
	
	.itempatrocinador{
		
	width: 70%;
	height: auto;	
	}
	
	

.itemmapa-patrocinado1{
	position: absolute;
	top: 8%;
	left: 18%;
	width: 50px;
	height: auto;
	z-index: 10000;
}

.itemmapa-patrocinado1:hover{
animation: item-patrocinado 1s 1;	
}


.itemmapa-patrocinado2{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: auto;
	z-index: 10000;
}

.itemmapa-patrocinado2:hover{
animation: item-patrocinado 1s 1;	
}



@media (min-width:700px){
	
		.item{
		
	width: 19%;
	height: auto;	
	}
	
.texto{
	font-size: 10px;
}	

#patrocinador{
		width: 100%;
}

	
.itemmapa-patrocinado1{
top: 10%;
left: 18%;
width: 90px;
	}
	
	
.lbs3{
	width: 25%;}	
}

@media (min-width:1000px){	
	#itemsizquierdo{	
		width: 60%;			
	}

#patrocinador{
		width: 40%;
}

	
	.itemmapa-patrocinado1{
	top: 20%;
	left: 18%;
	width: 90px;
}
}