
#pagina { overflow: hidden; margin-bottom: 60px; }

#fondo {
		padding: 20px 0;
		color: #FFF;
		height: 500px;
		background-repeat: no-repeat;
		background-position: center;
		-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}

#fondo #logo { text-align: center; }


#fondo #col1 { float: left; width: 55%;  }
#fondo #col2 { float: right; width: 35%; }


#fondo #col1 #icono { float: left; width: 100px; height: 200px; margin-right: 20px; }
#fondo #col1 #iconotxt { float: left; width: 420px; height: 200px; color: #FFF; font-size: 18px; line-height: 24px;  }
h1 { font-size: 32px; line-height: 36px; font-weight: 600; color: #FFF; margin: 8px 0; margin-bottom: 14px; }
h2 { font-size: 22px; line-height: 26px; font-weight: 600; color: #FFF; margin: 8px 0; margin-bottom: 14px; }
a { color: #FFF; }



#fondo #col2 #burbujas { position: absolute; z-index: 20; float: left; margin-top: -100px; }
#fondo #col2 #burbujas .burbuja1,
#fondo #col2 #burbujas .burbuja2,
#fondo #col2 #burbujas .burbuja3 { position: absolute; border-radius: 300px; -moz-border-radius: 300px; -webkit-border-radius: 300px; background-position: center;
		-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
#fondo #col2 #burbujas .burbuja1 { top: 0; left: 185px; width: 215px; height: 215px; border: 14px solid #65f0fe; }
#fondo #col2 #burbujas .burbuja2 { top: 142px; left: 0px; width: 158px; height: 158px; border: 12px solid #65f0fe; }
#fondo #col2 #burbujas .burbuja3 { top: 300px; left: 120px; width: 130px; height: 130px; border: 10px solid #65f0fe; }


#fondo #contratalo { margin-left: 120px;}
#fondo #contratalo button {
		background: #7eff51;
		border-bottom: 1px #247702 solid; border-right: 1px #247702 solid;
		color: #103084;
		font-size: 18px;
		margin-top: 10px;
		padding: 8px 10px 3px 10px;
		cursor: pointer;
		border: none; width: auto; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
}


#blanco { position: relative; padding: 30px 0; background: #FFF; margin-bottom: 20px; }

#blanco #formulario { float: left; width: 300px; color: #103084; text-align: justify; }
#blanco #formulario a { color: #103084; }
#blanco #formulario form { margin-top: 14px; }
#blanco #formulario #enviar { margin-top: 10px; background: #103084; color: #fff; width: 100%; font-size: 16px; text-align: center; padding: 5px 4px; cursor: pointer; }
#blanco #formulario #checkprotec { font-size: 12px; }
#blanco #formulario #checkprotec a { text-decoration: underline; }
#blanco #formulario  #titemail { font-size: 26px; color: #FFF; text-align: center; margin-top: 30px; }
#blanco #formulario  #redes { font-size: 20px; color: #666; text-align: center; margin-top: 10px; }

#blanco #formulario .agente { margin-top: 20px; text-align: center; }

#blanco .texto { float: right; width: 700px; font-size: 18px; text-align: justify; }
#blanco .texto img { margin-bottom: 15px; }
#blanco .texto h3 { font-size: 22px; display: inline; }

#pie2 .boton { float: right; width: 200px; font-size: 18px; text-align: justify; }
#pie2 .boton .enviarboton { float: right; width: auto; margin-top: 30px; background: #ff1720; color: #FFF; font-size: 18px; text-align: center; padding: 8px 30px; 
border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-bottom: 2px; border-bottom-color: #a02626; border-bottom-style: solid; cursor: pointer; }




#pie2 { position: relative; height: 270px; padding: 30px 0 90px 0; background: #77f2ff; }
#pie2 .imagen {
	position: absolute;
	z-index: 30;
	width: 380px;
	height: 285px;
	margin-top: -80px;
}
#pie2 .texto { float: right; width: 730px; padding-left: 20px; font-size: 20px; line-height: 25px; font-weight: 600; color: #103084; text-align: justify; }


#whatsapp { position: fixed; bottom: 20px; left: 20px; z-index: 2000; }
#whatsapp img { width: 40px; }





#iconos { padding-bottom: 100px; margin-top: 40px; overflow: hidden; }
.icono { width: 16.6%; height: 130px; float: left; padding: 1%; text-align: center; font-size: 17px; line-height: 20px; color: #004f9f; }
.icono img { width: 34%; }




#info { position: relative; padding: 30px 0 90px 0; font-size: 17px; color: #103084; background: #77f2ff; overflow: hidden; }
#info  h2 { color: #103084; margin-top: 50px; }
#info li { list-style-position: inside; }



@media screen and (max-width: 1100px) {

	#fondo { padding: 20px 2%; font-size: 90%; }	
	
	#fondo #col1 { float: left; width: 60%; }
	#fondo #col2 { float: right; width: 40%; }
	#fondo #col1 #icono { float: left; width: 20%; height: auto; padding-right: 20px; }
	#fondo #col1 #iconotxt { width: 75%; height: 200px; font-size: 16px; line-height: 22px; }
	h1 { font-size: 30px; line-height: 34px; }
	h2 { font-size: 20px; line-height: 24px; }


	#fondo #col2 #burbujas { float: right; margin-top: -100px; }
	#fondo #col2 #burbujas .burbuja1 { top: 0; left: 185px; width: 190px; height: 190px; border-width: 13px; }
	#fondo #col2 #burbujas .burbuja2 { top: 142px; left: 50px; width: 158px; height: 158px; border-width: 11px; }
	#fondo #col2 #burbujas .burbuja3 { top: 300px; left: 120px; width: 130px; height: 130px; border-width: 9px; }
	
	
	#blanco { padding: 20px; margin-top: 60px; }
	#blanco #formulario { width: 30%; }
	#blanco #formulario  #titemail { font-size: 22px; margin-top: 60px; }
	#blanco .texto { width: 66%; font-size: 17px; }
	#blanco .texto h3 { font-size: 20px;}
	
	#pie2 { position: relative; height: 270px; padding: 30px 2%; }
	#pie2 .imagen {	position: relative; float: left;	width: 30%;	margin-top: -75px;  } #pie2 .imagen img { width: 100%; }
	#pie2 .texto { float: right; width: 65%; padding-left: 20px; }
	
	#info { position: relative; padding: 30px 2%; }

}



@media screen and (max-width: 800px) {

	#fondo { font-size: 90%; }
	#fondo #col2 #burbujas .burbuja1 { top: 0; left: 155px; width: 160px; height: 160px; border-width: 12px; }
	#fondo #col2 #burbujas .burbuja2 { top: 142px; left: 50px; width: 140px; height: 140px; border-width: 10px; }
	#fondo #col2 #burbujas .burbuja3 { top: 300px; left: 120px; width: 130px; height: 130px; border-width: 7px; }
	
	#blanco #formulario  #titemail { font-size: 20px; margin-top: 60px; }
	
	.icono { width: 25%; height: 130px; float: left; padding: 1%; text-align: center; font-size: 17px; line-height: 20px; color: #004f9f; }

}




@media screen and (max-width: 700px) {

	#fondo { font-size: 70%; }
	#fondo #col1 { float: left; width: 100%; }
	#fondo #col2 { float: right; width: 100%; margin-top: 0px; }
	#fondo #col1 #icono { float: left; width: 20%; height: auto; margin: 0; padding-right: 20px; }
	#fondo #col1 #iconotxt { float: right; width: 78%; height: auto; line-height: 22px; margin: 0;  }
	
	#fondo #col2 #burbujas  { margin-top: 30px; margin-left: 90px; }
	#fondo #col2 #burbujas .burbuja1 { top:  0px; left: 0px;   width: 150px; height: 150px; border-width: 11px; }
	#fondo #col2 #burbujas .burbuja2 { top: 10px; left: 160px; width: 135px; height: 135px; border-width: 9px; }
	#fondo #col2 #burbujas .burbuja3 { top: 20px; left: 310px; width: 120px; height: 120px; border-width: 6px; }

	
	
	#blanco { padding: 10px 2%; margin-bottom: 60px; }
	#blanco #formulario { width: 100%; margin-bottom: 40px; }
	#blanco #formulario  #titemail { font-size: 22px; margin-top: 30px; }
	#blanco .texto { width: 100%; font-size: 17px; }
	#blanco .texto h3 { font-size: 20px;}
	
	
	#pie2 { position: relative; height: 480px; }
	#pie2 .imagen {	position: relative; float: left;	width: 60%; height: auto; margin-top: -75px; }
	#pie2 .texto { float: right; width: 100%; height: auto; padding-left: 20px; }

}


@media screen and (max-width: 600px) {
	
	#fondo { font-size: 60%; }
	#fondo.largo { height: 700px; }
	#fondo #col2 #burbujas  { margin: 0; margin-top: 20px; transform: scale(0.9,0.9); }
	#fondo #col2 #burbujas .burbuja1 { top:  0px; left: 0px;   width: 140px; height: 140px; border-width: 11px; }
	#fondo #col2 #burbujas .burbuja2 { top: 10px; left: 150px; width: 125px; height: 125px; border-width: 9px; }
	#fondo #col2 #burbujas .burbuja3 { top: 20px; left: 290px; width: 110px; height: 110px; border-width: 6px; }

	#blanco .texto img { width: 100%; }
	
	.icono { width: 50%; height: 150px; float: left; padding: 5%; text-align: center; font-size: 15px; line-height: 18px; color: #004f9f; }
	.icono img { width: 34%; }

}

@media screen and (max-width: 400px) {

	#fondo { font-size: 50%; }
	#fondo #col2 #burbujas  { margin: 0; margin-top: 20px; transform: scale(0.7,0.7); }
	#fondo #col2 #burbujas .burbuja1 { top:  0px; left: 250px;   width: 140px; height: 140px; border-width: 11px; }
	#fondo #col2 #burbujas .burbuja2 { top: 10px; left: 120px; width: 125px; height: 125px; border-width: 9px; }
	#fondo #col2 #burbujas .burbuja3 { top: 20px; left: 0px; width: 110px; height: 110px; border-width: 6px; }

}