:root {
	--azul-1: #67aebb;
	--azul-2: #1d6a87;
	--naranja: #f2a255;
	--naranja-oscuro: #c96;
	--naranja-oscuro-2: #b85;
	
	--fuente-tamano: 30px;
}

* { box-sizing: border-box; }
body { margin: 0px; padding: 0px; font-family: 'Nunito Sans', sans-serif; font-size: var(--fuente-tamano); }
h1 { margin-top: 0px; font-size: 40px; color: #CBA67D; }
h2 { font-size: var(--fuente-tamano); color: #CBA67D; }
h3 { margin: 20px 0px; font-family: 'Oooh Baby', cursive; font-size: 40px; line-height: 60px; }

/* Botones */

.botones { display: flex; justify-content: center; }
.botones.izquierda { justify-content: flex-start; }
.botones.derecha { justify-content: flex-end; }
.boton { margin: 10px; padding: 10px 20px; background-color: var(--naranja-oscuro); border: none; text-decoration: none; color: white; }
.boton:hover { background-color: var(--naranja-oscuro-2); }

/* Formularios */

input[type=text], input[type=number] { padding: 10px 11px; font-size: 20px; border: 1px solid #666; border-radius: 5px; }
input[type=text] { Width: 100%; }
input[type=number] { Width: 100px; }
input[type=submit] { font-size: 22px; border-radius: 5px; }

/* Banner */

picture.banner { display: flex; justify-content: center; align-items: center; }
picture.banner > img { display: block; width: 100%; margin: 0px; padding: 0px; }

/* Banner 1 - Ancho Completo */

.banner-1 { display: flex; justify-content: center; align-items: center; }
.banner-1 > img { display: block; width: 100%; margin: 0px; padding: 0px; }

/* Banner 2 - Máximo Ancho Completo */

.banner-2 { display: flex; justify-content: center; align-items: center; }
.banner-2 > img { max-width: 100%; }

/* msg */
div#msg { position: fixed; top: 0px; right: 0px; left: 0px; 
display: grid; grid-template-columns: 50px auto 50px;
margin: 5px; background-color: #eee; border: 1px solid #aaa; border-radius: 5px; }
div#msg > picture { display: flex; justify-content: center; align-items: center; }
div#msg > picture > img { height: 24px; }
div#msg > picture:last-child > img { height: 24px; cursor: pointer; }
div#msg > div > p { margin: 14px 0px; font-size: 19px; }

div#msg.ok { background-color: #efe; border-color: #aca }
div#msg.error { background-color: #fee; border-color: #caa; }

/* Encabezado */

header { padding: 80px 0px; text-align: center;
	background-image: url('/tehagotupagina/plantillas/angela/imagenes/header.gif');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
header > div { padding: 20px; }
header img#logo { width: 370px; max-width: 100%; }

@media screen and (max-width: 700px){
	header {
		background-image: url('/tehagotupagina/plantillas/angela/imagenes/header-top.png'),
		url('/tehagotupagina/plantillas/angela/imagenes/header-bottom.png');
		background-position: top right, bottom;
		background-size: 380px, 100%;
	}
	header > div { padding: 100px 20px; }
}

@media screen and (max-width: 500px){
	header {
		background-size: 300px, 100%;
	}
	header > div { padding: 50px 30px; }
}

main { margin-bottom: 40px;
background-image: url('/tehagotupagina/plantillas/angela/imagenes/fondo-main-top-2.gif'), 
	url('/tehagotupagina/plantillas/angela/imagenes/fondo-main-bottom.gif') ;
background-position: right top, left bottom;
background-size: 100%, 100%;
background-repeat: no-repeat, no-repeat;
 }
main > div:nth-child(1) { padding: 100px 50px 50px 100px; display: flex; }
main > div:nth-child(1) > div { text-align: center; }

main > div:nth-child(2) { padding: 50px; display: flex; flex-direction: row-reverse; }
main > div:nth-child(2) > div { text-align: center; }

main > div:nth-child(2) > div > footer { padding-top: 100px; }

@media screen and ( min-width: 1400px ){
	main { background-size: 50%, 50%; }
	main > div { margin: 0px auto; Width: 1400px; }
}

@media screen and ( max-width: 1100px ){
	main > div:nth-child(1) { padding-left: 50px; }
	main > div:nth-child(2) { padding-bottom: 300px; }
}

@media screen and ( max-width: 700px ){
	main { margin-bottom: 40px;
	background-image: url('/tehagotupagina/plantillas/angela/imagenes/fondo-main-top-2.gif'), 
		url('/tehagotupagina/plantillas/angela/imagenes/fondo-main-bottom.gif') ;
	background-position: right top, left bottom;
	background-size: 1000px, 750px;
	background-repeat: no-repeat, no-repeat;
	 }
}

@media screen and ( max-width: 530px ){
	main > div:nth-child(1) { padding-left: 10px; padding-right: 20px; }
	main > div:nth-child(2) { padding-bottom: 240px; }
	
	main > div:nth-child(2) > div > footer { padding-left: 30px; padding-right: 30px; }
}

@media screen and ( max-width: 500px ){
	main > div:nth-child(2) { padding-left: 20px; padding-right: 20px; }
}


/* Flex 3 */

.flex3 { display: flex; flex-wrap: wrap; }
.flex3 > div { width: 33.33%; display: flex; justify-content: center; align-items: center; }
.flex3 > div > img { width: 100%; }
.flex3 > div > div { text-align: center; padding: 10px 0px 30px; }

@media screen and ( max-width: 1024px ){
	.flex3 > div { width: 50%; }
	.flex3 > div:nth-child(1) { order: 2; }
	.flex3 > div:nth-child(2) { order: 1; }
	.flex3 > div:nth-child(3) { order: 3; }
}

@media screen and ( max-width: 680px ){
	.flex3 > div { width: 100%; }
	
	.flex3 > div:nth-child(1) { order: 1; }
	.flex3 > div:nth-child(2) { order: 2; padding: 40px 0px 50px; }
	.flex3 > div:nth-child(3) { order: 3; }
}

/* Confirmación */

#confirmacion { padding: 110px 20px; text-align: center; }
#confirmacion > p { margin-top: 16px; }
#confirmacion > img { height: 75px; }
#confirmacion .flex-n { display: flex; flex-wrap: wrap; justify-content: center; }
#confirmacion .flex-n > div { margin: 0px 30px; }
#confirmacion .flex-n > div img { height: 75px; }

.form-campos { margin: 0px auto; width: 614px; font-size: 24px; }
.form-campos tbody tr {  }
.form-campos tbody td { padding: 6px 0px; }
.form-campos tbody > tr > td:first-child { text-align: left; Width: 190px; }
.form-campos tbody > tr > td:last-child { text-align: left; }
.form-campos tfoot > tr > td { text-align: right; }
.form-campos tfoot > tr > td > .boton:last-child { margin-right: 0px; }

@media screen and ( max-width: 680px ){
	.form-campos { width: 100%; }
	.form-campos tbody > tr > td { display: block; }
}

#ubicacion {  }
#ubicacion iframe { width: 100%; height: 600px; }