/* font-family: 'Montserrat', sans-serif; */


span.nota-exso { font-family: serif; font-size: 22px; }
.boton { background-color: #b4906f; border: none; border-radius: 2px; padding: 8px 12px; font-size: 20px; color: #fff; }
.boton:hover { background-color: #a85; border: none; }

body { font-family: "Montserrat",sans-serif; font-size: 22px; }
h2 { color: #b4906f; margin: 50px 10px; letter-spacing: 2px; }
h3 { color: #b4906f; font-weight: normal; }

@media screen and ( max-width: 400px ){
	h2 { font-size: 28px; }
}

/* Encabezado */

body > header { background-image: url("/tehagotupagina/plantillas/michelle-y-matias/img/fondo-header.gif");
background-size: 100% 100%; }
body > header > div { display: flex; padding: 100px 0px 40px; }
body > header > div > div { }
body > header > div > div > picture { display: flex; justify-content: center; align-items: center; }
body > header > div > div > picture > img { height: 110px; }

body > header > div > div > div { text-align: center; }
body > header > div > div > div > h1 { margin: 0px; padding: 20px 20px; font-size: 70px; white-space: nowrap; }
body > header > div > div > div > picture { display: flex; justify-content: center; align-items: center;
width: 600px; padding: 30px 10px; }
body > header > div > div > div > picture > img { width: 100%; }
body > header > div > div > div > div.fecha { padding: 20px; padding-top: 10px; font-size: 24px; }

@media screen and ( max-width: 700px ){
	body > header { background-image: url("/tehagotupagina/plantillas/michelle-y-matias/img/fondo-header-movil.gif"); }
	body > header > div { display: flex; padding: 250px 0px 60px; }
	body > header > div > div { width: 100%; }
	body > header > div > div > picture > img { height: 100px; }
	body > header > div > div > div > picture { width: 100%; padding: 20px 10px; }
}
@media screen and ( max-width: 600px ){
	body > header > div > div > div > h1 { white-space: normal; }
}

/* Banner 1 */

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

/* Estás Invitado e Historia */

#invitado-historia { 
background-image: url("/tehagotupagina/plantillas/michelle-y-matias/img/fondo-invitado-historia.gif");
background-size: 100% 100%;
}
#invitado-historia > div { display: grid; grid-template-columns: 50% 50%; }
#invitado-historia > div > * { display: flex; justify-content: center; align-items: center; padding: 70px 50px 100px; }
#invitado-historia > div > div { grid-column: span 2; text-align: center; }
#invitado-historia > div > picture { display: flex; justify-content: center; align-items: center;
padding: 0px; }
#invitado-historia > div > picture > img { display: block; width: 100%; margin: 0px; padding: 0px; }
#invitado-historia > div > section { text-align: center; }

@media screen and ( max-width: 800px ){
	#invitado-historia > div { display: grid; grid-template-columns: 100%; }
	#invitado-historia > div > div { grid-column: span 1; }
	
}

@media screen and ( max-width: 500px ){
	#invitado-historia > div > * { padding: 50px 20px; }
}

/* Slider */

#slider-1 { padding: 50px 0px;
background-image: url("/tehagotupagina/plantillas/michelle-y-matias/img/fondo.gif");
background-size: 100% 100%;
}

/* Slider */
#slider-1 {}
#slider-1 > div { padding: 50px; }

#slider-1 .owl-item { border: 1px dotted gray; }

#slider-1 .owl-carousel .owl-nav { }

#slider-1 .owl-carousel .owl-nav button.owl-prev,
#slider-1 .owl-carousel .owl-nav button.owl-next { position: absolute; top: 0; bottom: 0;
font-size: 90px; color: #333; text-shadow: 2px 2px #fff; }

#slider-1 .owl-carousel .owl-nav button.owl-prev { left: -40px; }
#slider-1 .owl-carousel .owl-nav button.owl-next { right: -40px; }

#slider-1 .owl-carousel .owl-nav button.owl-prev:hover,
#slider-1 .owl-carousel .owl-nav button.owl-next:hover { color: #282; background-color: #aaa1; }

#slider-1 .owl-carousel .owl-nav button.owl-prev.disabled,
#slider-1 .owl-carousel .owl-nav button.owl-next.disabled { color: #ccc; }

@media screen and ( max-width: 900px ){
	#slider-1 .owl-carousel .owl-nav button.owl-prev,
	#slider-1 .owl-carousel .owl-nav button.owl-next { }
}

/* Itinerario */

#itinerario { padding: 70px 20px 90px; text-align: center;
background-image: url("/tehagotupagina/plantillas/michelle-y-matias/img/fondo-6.gif");
background-size: 100% auto;
}
#itinerario > div { display: flex; flex-wrap: wrap; justify-content: center; }
#itinerario > div > * { margin: 22px; }
#itinerario > div > * img { height: 100px; }
#itinerario > div > div > p { margin: 8px 5px; }

@media screen and ( max-width: 850px ){
	#itinerario { background-size: 100% 100%; padding: 70px 20px 50px; }
}

/* Ceremonia */

#ceremonia {
background-image: 
url("/tehagotupagina/plantillas/michelle-y-matias/img/hojas-2.png"),
url("/tehagotupagina/plantillas/michelle-y-matias/img/hojas-1.png"),
url("/tehagotupagina/plantillas/michelle-y-matias/img/fondo.gif");
background-size: 350px, 300px, 100% auto;
background-position: left bottom, right top, top left;
background-repeat: no-repeat;
}
#ceremonia > div { /* display: flex; flex-direction: row-reverse; */
padding: 50px 20px; }
#ceremonia > div > div { padding: 50px 100px; text-align: center; }
#ceremonia > div > div > picture {  }
#ceremonia > div > div > picture img { height: 100px; }
#ceremonia-footer { display: none; }

@media screen and ( max-width: 1050px ){
	#ceremonia { 
	background-size: 250px auto, 250px, 100% 100%;
	}
}

@media screen and ( max-width: 900px ){
	#ceremonia { 
	background-size: 250px auto, 200px 100% 100%;
	}
	#ceremonia > div { justify-content: center; padding: 150px 10px 150px; }
	#ceremonia > div > div { padding: 50px 0px; }
}

@media screen and ( max-width: 600px ){
	#ceremonia > div > div { padding: 100px 0px 200px; }
}

/* A Celebrar */

#celebrar { 
background-image: url("/tehagotupagina/plantillas/michelle-y-matias/img/fondo.gif");
background-size: 100%;
}
/* #celebrar > div { display: grid; grid-template-columns: 34% 32% 34%; } */
#celebrar > div { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; }
#celebrar > div > div { display: flex; justify-content: center; align-items: center;
text-align: center; }
#celebrar > div > div.vacio { display: none; }
#celebrar > div > div > div > picture { display: flex; justify-content: center; align-items: center; }
#celebrar > div > div > div > picture > img { height: 100px; }
#celebrar > div > div > div > h2 { margin: 0px; }
#celebrar > div > picture { display: flex; justify-content: center; align-items: center; }
#celebrar > div > picture > img { width: 100%; }

@media screen and ( max-width: 1050px ){
	#celebrar { background-size: 100% 100%; }
	#celebrar > div { grid-template-columns: 50% 50%; }
	#celebrar > div > div.vacio { display: block; }
}
@media screen and ( max-width: 800px ){
	#celebrar > div { grid-template-columns: 100%; }
	#celebrar > div > div { padding: 80px 10px; }
	#celebrar > div > div.vacio { display: none; }
}

/* Presentes */

#presentes { padding: 180px 20px 150px; text-align: center;
background-image:url("/tehagotupagina/plantillas/michelle-y-matias/img/hojas-1.png"), url("/tehagotupagina/plantillas/michelle-y-matias/img/fondo.gif");
background-size: 250px,100% auto;
background-position: top right, top left;
background-repeat: no-repeat, repeat;
}
#presentes > div { }
#presentes > div > h2 { margin: 50px 10px; }
#presentes > div > div { display: flex; flex-wrap: wrap; justify-content: space-around; }
#presentes > div > div > div img { height: 100px; }

#liverpool { font-size: 18px; }
#liverpool > div { padding: 14px 0px; }
#liverpool > div svg { height: 24px; }
#liverpool > div svg path { color: #000; fill: #000; }
#liverpool > div svg polygon { color: #000; fill: #000; }

@media screen and ( max-width: 1050px ){	
	#presentes { background-size: 250px,100% 100%; }
}
@media screen and ( max-width: 750px ){
	#presentes { background-size: 250px,100% 100%; }
	#presentes > div > div > div { width: 100%; }
	#presentes > div > div > div:first-child { margin-bottom: 50px; }
}

/* Confirmación */

#confirmacion { padding: 160px 20px 200px; text-align: center;
background-image:
url("/tehagotupagina/plantillas/michelle-y-matias/img/hojas-2b.png"), 
url("/tehagotupagina/plantillas/michelle-y-matias/img/hojas-1b.png"), 
url("/tehagotupagina/plantillas/michelle-y-matias/img/fondo.gif");
background-size: 200px, 250px, 100%;
background-position: bottom right, top left;
background-repeat: no-repeat;
}
#confirmacion table { width: 100%; }

@media screen and ( max-width: 1050px ){
	#confirmacion { padding: 100px 20px 200px;
	background-size: 200px, 250px, 100% 100%;
	}
}

@media screen and ( max-width: 800px ){
	#confirmacion { padding: 180px 20px 300px;
	background-size: 200px, 200px, 100% 100%;
	}
}

/* Instrucciones */

#instrucciones { padding: 140px 20px 170px; text-align: center;
background-image: url("/tehagotupagina/plantillas/michelle-y-matias/img/fondo-5.gif");
background-size: 100% 100%;
}
#instrucciones > div { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; justify-content: space-around; }
#instrucciones > div > * { display: flex; justify-content: center;
margin: 20px; }
#instrucciones > div > div > div {}
#instrucciones > div > div > div > picture {  }
#instrucciones > div > div > div > picture > img { height: 100px; }
#instrucciones > div > div > div > div { display: grid; justify-content: center; align-items: center;
height: 100px; }
#instrucciones > div > div > div > div h3 { margin: 0px; }

@media screen and ( max-width: 750px ){
	#instrucciones { padding-bottom: 100px; 
	background-size: 100% 100%; }
	#instrucciones > div { grid-template-columns: auto; }
	#instrucciones > div > div > div > div { height: auto; }
	#instrucciones > div > div > div > div h3 { margin-bottom: 30px; }
}

/* Footer */

body > footer {}
body > footer > div {}

/* 
Diseño Grafico, Edición de Imágenes y Diseño Web 
por tehagotupagina.com 

Desarrollo Web, Programación y Mantenimiento
por exasoluciones.com
*/