/*
Theme Name: ID7D 2025
Theme URI: https://id7d.org
Description: ID7D
Version: 1
Author: Zabdiel
Author URI: https://poeticavisua.com
*/

/* RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }body {line-height: 1; }ol, ul {list-style: none; }blockquote, q {quotes: none; }blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none; }:focus {outline: 0; }ins {text-decoration: none; }del {text-decoration: line-through; }table {border-collapse: collapse; border-spacing: 0; } * {padding: 0; margin: 0; border: 0; }

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

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
	padding:0;
	margin:0; }

fieldset, img { border:0 }

ol, ul, li { list-style:none }

:focus { outline:none }

:root {
	--marino: #002066;
	--azul: #06357a; /* azul */
	--cielo: #19aadb; /* azul cielo */
	--vino: #94284d; /* amarillo */
	--rojo: #FE2E2E;
	--naranja: #eb5b25; /* naranja */
	--verde: #009984; /* verde */
	--amarillo: #f4b519; /* amarillo */
	--dorado: #ebc366; /* dorado */
	
	--contraste2: #1e1f54;
	--contraste3: #14214c;

	--blanco: #fff;
	--negro: #111;
	--gris: #999;
	--gris2: #dedede;
	--gris3: #333;
	--gris5: #555;
	--celeste: #e6eff4;
	--alfa: #f3f3f3;
	--hover: #FEB1F1;
}

html{
	background-color: var(--negro);
	scroll-behavior: smooth;
}

body,
input,
textarea,
select {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 300;
	color: var(--gris5);
}

a { text-decoration:none; }
a, a:visited {	text-decoration: none; }
a:hover { text-decoration: none; }

.izqueirda, .left { float:left; }
.derecha, .right { float:right; }
.centro, .center { text-align: center; }
.justificado { text-align: justify; }
.clear { clear: both; }
.inline { display: inline-block; }
.hidden { display: none; }

img.alignright { margin: 3px 0 10px 20px; display: inline; }
img.alignleft { margin: 3px 20px 10px 0; display: inline; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
img.centered { display: block; margin-left: auto; margin-right: auto; }

.alignleft { float: left; }
.alignright { float: right; }
.aligncenter { text-align:center; }

.salto { height: 20px; }

#wrap {
	max-width: 1024px;
	margin: 0px auto 0px;
	clear: both;
	overflow: hidden;
}
/*box-shadow: 0px 0px 10px #111;*/

#page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: var(--azul) none repeat scroll 0% 0%;
	z-index: 99999;
}
#page-loader .preloader-interior {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	border-radius: 50%;
	border: 8px solid transparent;
	border-top-color: var(--cielo);
 
	-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
		  animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#page-loader .preloader-interior:before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	border: 8px solid transparent;
	border-top-color: var(--marino);
 
	-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
	  animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#page-loader .preloader-interior:after {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 8px solid transparent;
	border-top-color: var(--blanco);
 
	-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
	  animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
	0%   { 
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}
@keyframes spin {
	0%   { 
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}

header {
	width: 100%;
	z-index: 100;
	display: block;
	position: fixed;
	}

#cabeza {
	border-top: 5px solid var(--azul);
	margin: 0px auto 0px;
	background-color: var(--blanco);
	padding-bottom: 10px;
}

.menuvacio { height: 20px; visibility: hidden; }

.topnav {
	overflow: hidden;
	background-color: var(--blanco);
	padding-top: 8px;
	display: block;
	margin-left: 20px;
	z-index: 100;
	text-align: right;
}
	.topnav a {
		color: var(--gris3);
		text-align: center;
		padding: 12px 3px;
		text-decoration: none;
		font-weight: normal;
		font-size: 15px;
		line-height: 30px;
	}
	.topnav a:hover {
		text-decoration: none;
		color: var(--gris3);
	}
	.topnav .icon {
		display: none;
		border: 1px solid var(--blanco);
	}

	.topnav a.oculto {
		display: none;
	}
	a.botonmini {
		display: block;
		color: var(--naranja);
		margin: 15px 0px 0px 0px;
		padding: 12px 8px;
		font-size: 12px;
	}

a.logo {
	background: url(images/logo.png) no-repeat top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width:108px;
	height:32px;
	margin: 0px 15px 0px 0px;
	padding: 0px;
	display:block;
	float:left;
	}
	a.logo:hover {
		background-color: none;
	}



/*--------------------------------------------------------------
# generales
--------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
}

h1 {
	letter-spacing:1px;
	display: inline-block;
	box-sizing: border-box;
	font-size: 45px;
	line-height: 55px;
	font-weight: bold;
	color: var(--azul);
	margin: 0px 0px 0px 0px;
	clear:both;
}
h2 {
	box-sizing: border-box;
	font-size: 36px;
	line-height: 46px;
	font-weight: normal;
	color: var(--azul);
	margin: 20px 0px 10px 0px;
	clear:both;
}
h3 {
	display: inline-block;
	box-sizing: border-box;
	font-size: 30px;
	line-height: 38px;
	color: var(--azul);
	font-weight: normal;
	margin: 15px 0px 10px 0px;
	clear:both;
}
h4 {
	font-size: 26px;
	line-height: 32px;
	font-weight: normal;
	color: var(--cielo);
	box-sizing: border-box;
	clear:both;
	margin:10px 0px 10px 0px;
	clear:both;
}
h5 {
	font-size: 22px;
	line-height: 28px;
	font-weight: normal;
	clear:both;
	margin-bottom:10px;
	clear:both;
} 
h6 {
	font-size: 18px;
	line-height: 24px; 
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing:2px;
	margin-bottom: 30px;
	clear:both;
} 

h1 a { color: var(--blanco); }
h1 a:hover { color: var(--blanco); }
h2 a { color: var(--azul); }
h2 a:hover { color: var(--marino); }
h3 a { color: var(--azul); }
h3 a:hover { color: var(--marino); }

p {
	font-size: 18px;
	line-height: 26px;
	margin-bottom: 10px;
}

sup {
	vertical-align: super;
	font-size: 12px;
	line-height: 18px;
}

strong {
	font-size: 18px;
	line-height: 26px;
	font-weight: 300;
	margin-bottom: 10px;
}

.marino { color: var(--marino); }
.azul { color: var(--azul); }
.cielo { color: var(--cielo); }
.vino { color: var(--vino); }
.naranja { color: var(--naranja); }
.verde { color: var(--verde); }

.blanco { color: var(--blanco); }
.negro { color: var(--negro); }
.gris { color: var(--gris); }
.gris2 { color: var(--gris2); }
.rata { color: var(--gris5); }

.bg-marino { background: var(--marino); }
.bg-azul { background: var(--azul); }
.bg-cielo { background: var(--cielo); }
.bg-vino { background: var(--vino); }
.bg-naranja { background: var(--naranja); }
.bg-verde { background: var(--verde); }
.bg-blanco { background: var(--blanco); }
.bg-gris { background: var(--gris); }
.bg-gris2 { background: var(--gris2); }
.bg-celeste { background: var(--celeste); }
.bg-alfa { background: var(--alfa); }

.bg-imagen {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

.linea1, .linea, .lineacolor { 
	width: 100px;
	height: 1px;
	margin: 15px auto 15px;
	border-bottom: 1px solid var(--blanco);
}
.lineacolor { border-bottom: 1px solid var(--azul); }
.linea1 { border-bottom: 1px solid var(--azul); margin: 15px 0px; }

.radio { border-radius: 8px; }

.margen { padding: 15px 20px 30px 20px; }
.margen-page { padding: 10px 0px 10px 0px; }
.margen-img { padding: 15px 15px 0px 15px; }
.margen-templo { padding: 15px 15px 0px 15px; }
.margen-coment {
	width: 100%;
	max-width: 650px;
	margin: 0 auto 0;
	padding: 0px 15px 30px 15px;
}

.flex {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.icon {
	display: block;
	text-align: center;
	margin-bottom: 20px;
	font-size: 40px;
}

.opacity2 { background-color: rgba(0,10,10, 0.2); }
.opacity3 { background-color: rgba(0,10,10, 0.3); }
.opacity4 { background-color: rgba(0,10,10, 0.4); }
.opacity5 { background-color: rgba(0,10,10, 0.5); }
.opacity7 { background-color: rgba(0,10,10, 0.7); }
.opacity9 { background-color: rgba(0,10,10, 0.9); }

/*--------------------------------------------------------------
# transiciones
--------------------------------------------------------------*/

.transform_up { transform: translateY(20%); }
.transform_down { transform: translateY(-20%); }
.transform_left { transform: translateX(10%); }
.transform_right { transform: translateX(-10%); }

.transform_up1 { transform: translateY(20%); }
.transform_up2 { transform: translateY(30%); }
.transform_up3 { transform: translateY(40%); }
.transform_up4 { transform: translateY(50%); }

.aparece {
	opacity: 1;
	transform: none;
}

h1, h2, h3, h4, h5, h6, p, button,
.item {
	transition: all 2s;
}

/*--------------------------------------------------------------
# 
--------------------------------------------------------------*/

.dos, .tres, .cuatro, .cinco, .seis, .cuatro-dos, .layout {
	display: grid;
	grid-gap: 30px;
	grid-auto-flow: dense;

	font-size: 18px;
	line-height: 26px;
	margin-bottom: 10px;
}

.dos { grid-template-columns: repeat(2, 1fr); }
.tres { grid-template-columns: repeat(3, 1fr); }
.cuatro, .cuatro-dos { grid-template-columns: repeat(4, 1fr); }
.cinco { grid-template-columns: repeat(5, 1fr); }
.seis { grid-template-columns: repeat(6, 1fr); }

.layout { grid-template-columns: repeat(4, 1fr); }
.tools { grid-column: span 1; }
.contenido { grid-column: span 3; }

.titulo, .titulo-single {
	padding-top: 0px;
	margin: 0px auto 0px;
	text-align: center;
}
.titulo-single { padding-top: 30px; }

/*--------------------------------------------------------------
# frase
--------------------------------------------------------------*/

.content-frase {
	padding: 50px 20px;
}

.frase p {
	font-weight: normal;
	font-size: 50px;
	line-height: 66px;
	color: var(--blanco);
	transition: all 1s;
	text-shadow: black 0.1em 0.1em 0.2em
}
.frase span { font-size: 30px; }
.frase span.cita { font-size: 20px; }

/*--------------------------------------------------------------
# cena
--------------------------------------------------------------*/

.about-cena {
	background: url(../../../images/cena/about-cena.jpg) no-repeat center center;
	background-size: 100%;
	width: 100%;
	height: 490px;
}

.colage { height: 100px; }
.cartel, .kit, .programas {
	background-size: 100%;
	width: 100%;
	margin-bottom: 10px;
	border: 1px solid #dedede;
}
.kit, .programas { border: none; }

/*--------------------------------------------------------------
# 
--------------------------------------------------------------*/

input[type=text], input[type=date], input[type=number], input[type="email"], input[type=password],
textarea {
	padding: 10px;
	margin-bottom: 20px;
	font-size: 16px;
	width: 100%;
	display: block;
	border: none;
	border-radius: 6px;
	outline: none;
	color: var(--gris3);
	background: var(--alfa);
	border: 1px solid var(--gris2);
	font-family: "Lato", Arial, sans-serif;
}

button, button.naranja, a.boton, a.boton-blanco {
	display: inline-block;
	position: relative;
	padding: 10px 20px;
	margin-bottom: 10px;
	color: var(--blanco);
	border-radius: 6px;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	background-color: var(--azul);
	z-index: 1;
	-webkit-box-shadow: 0 2px 0 0 rgba(189, 189, 189, 0.5), 0 4px 0 0 rgba(189, 189, 189, 0.5);
	box-shadow: 0 2px 0 0 rgba(189, 189, 189, 0.5), 0 4px 0 0 rgba(189, 189, 189, 0.5);
	-webkit-transform: translateY(0);
	transform: translateY(0);
	border: none;
	text-transform: uppercase;
}
	a.boton-blanco { background-color: var(--contraste2); }
	button:hover, a.boton:hover, a.boton-blanco:hover { 
		top: 3px;
		background-color: var(--gris5);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,var(--marino)),to(var(--azul)));
		background-image: linear-gradient(var(--marino) 10%,var(--cielo) 100%);
		-webkit-box-shadow: none; 
		-moz-box-shadow: none; 
		box-shadow: none;
		color: var(--blanco);
	}
	a.boton-blanco:hover {
		background-color: var(--azul);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,var(--gris5)),to(var(--alfa)));
		background-image: linear-gradient(var(--gris5) 10%,var(--gris5) 100%);
	}

button.naranja { background-color: var(--naranja); }

a.mas {
	width: 80px;
	margin: 20px auto 2px;
	text-align: center;
	border: 1px solid var(--gris);
	padding: 10px 15px;
	border-radius: 6px;
	color: var(--gris);
	font-size: 12px;
	line-height: 30px;
	letter-spacing: 1px;
	font-weight: bold;
	text-transform: uppercase;
}
	a.mas:hover { background-color: var(--marino); color: var(--blanco); border: 1px solid var(--gris5); }


/************ radio button custom *************/

label.radio {
		cursor: pointer;
		text-indent: 25px;
		overflow: visible;
		display: inline-block;
		position: relative;
		margin: 0 0 10px 0;
		padding-top: 0px;
	}

		label.radio:before {
			background: var(--cielo);
			content:'';
			position: absolute;
			top: 2px;
			left: 0;
			width: 15px;
			height: 15px;
			border-radius: 100%;
		}

		label.radio:after {
			opacity: 0;
			content: '';
			position: absolute;
			width: 8px;
			height: 4px;
			background: transparent;
			top: 4px;
			left: 2px;
			border: 4px solid var(--blanco);
			border-top: none;
			border-right: none;
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}

input[type="radio"] {
	visibility: hidden;
}

	input[type="radio"]:checked + label:after {
		opacity: 1;
	}


/************ radio button custom *************/

.lbl{
	display: inline-block;
	width: 45px;
	height: 25px;
	background: var(--gris9);
	border-radius: 100px;
	cursor: pointer;
	position: relative;
	transition: .2s;
}
 
.lbl::after{
	content: '';
	display: block;
	width: 17px;
	height: 17px;
	background: #eee;
	border-radius: 100px;
	position: absolute;
	top: 4px;
	left: 4px;
	transition: .2s;
}
	.swtichek:checked + .lbl::after { left: 23px; }
	.swtichek:checked + .lbl { background: var(--cielo); }
	.swtichek { display: none; }

.switch {
	display: flex;
	margin: 0px 10px;
}

.switch input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch label { 
	width: 70px;
	background-color: var(--alfa);
	color: rgba(0, 0, 0, 0.6);
	font-size: 14px;
	line-height: 1;
	text-align: center;
	padding: 7px 5px 5px 5px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	transition: all 0.1s ease-in-out;
}

.switch label:hover { cursor: pointer; }
.switch input:checked + label { background-color: var(--cielo); color: var(--blanco); box-shadow: none; }

.switch label:first-of-type { border-radius: 4px 0 0 4px; }
.switch label:last-of-type { border-radius: 0 4px 4px 0; }

/*--------------------------------------------------------------
# content
--------------------------------------------------------------*/

.content {
	padding: 80px 20px 80px 20px;
}
.content p { color: var(--gris5); }
.content.blanco p { color:var(--blanco); }
.content p a { color: var(--azul); }
.content p a:hover { color: var(--naranja); }
.content strong { font-weight: 600; color: var(--gris5); }
.content em { font-style:italic; color: var(--gris5); }
.content span.marcar { background:#F6CECE; padding:1px 2px; }

.content a.mas { color: var(--gris); }
.content a.mas:hover { color: var(--blanco); }

.content pre { 
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	margin: 0px;
	text-align:left;
}

.content pre strong {
	color: var(--naranja);
	font-weight: normal;
	line-height: 50px;
	padding-left: 30px;
}

.content ul {
	list-style: none;
	padding: 0px;
	margin:0px 0px 0px 10px;
}
	.content ul li {
		font-size:18px;
		line-height: 26px;
	}
	.content ul li::before {
		font-family: 'IcoFont' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		line-height: 1;
		/* Better Font Rendering =========== */
		-webkit-font-feature-settings: "liga";
		-webkit-font-smoothing: antialiased;
		content: "\ea6d";

		color: var(--azul);
		display: inline-block;
		padding-right: 15px;
		font-size: 20px;
		line-height: 25px;
		width: 15px;
	}
	.content ul li a { color: var(--gris5); }
	.content ul li a:hover { color: var(--gris5); }
	.content ul li:last-child { margin-bottom: 10px; }


.content ol {
	list-style: none;
	margin: 0px;
	counter-reset: item;
}
	.content ol li {
		font-size:18px;
		line-height:26px;
	}
	.content ol li::before {
		color: var(--blanco);
		background-color: var(--azul);
		display: inline-block;
		content: counter(item) ;
		counter-increment: item;
		padding: 8px;
		margin-right: 10px;
		font-size: 12px;
		line-height: 5px;
		font-weight: bold;
		border-radius: 16px;
	}
	.content ol li a { color: var(--gris5); }
	.content ol li a:hover { color: var(--gris5); }
	.content ol li:last-child { margin-bottom: 10px; }

.content blockquote {
	background: var(--blanco);
	padding: 15px 20px 10px 20px;
	margin: 30px;
	border-left: 6px solid var(--azul); /* barra lateral de color */
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* sombra ligera */
	font-size: 18px;
	line-height: 1.6;
	color: var(--gris5);
	position: relative;
	text-align: left;
}

/*--------------------------------------------------------------
# comentarios
--------------------------------------------------------------*/

#commentform { padding: 30px 25px 20px 25px; border-radius: 8px; background: var(--alfa); overflow:hidden; }
#commentform a { color: var(--naranja); }
#commentform a:hover { color: var(--cielo); }
#commentform#cotacto { background:none; }

.commentlist_bg { width:580px; margin:auto; } /* ??? */

ol.commentlist { margin: 0px; padding: 0px;}
ol.commentlist li { 
	margin: 15px 0 15px 0;
	padding: 10px 20px;
	list-style-type: none;
	width:100%;
	border-radius: 8px;
	background: var(--alfa);
}
ol.commentlist li p { margin: 0px 0px 10px 0px; padding:0px; color: var(--gris5); } /* comentarios */
ol.commentlist li a { color: var(--verde); line-height:24px; } /* cancelar */
ol.commentlist li a:hover { color: var(--cielo); }
ol.commentlist li div.comment-meta a { color: var(--cielo); line-height:24px; visibility: hidden; } /* fecha y hora */
ol.commentlist li div.comment-meta a:hover { color: var(--verde); }
ol.commentlist li div.vcard cite.fn { font-style:normal; font-size:18px; color: var(--azul); } /* autor */
ol.commentlist li div.vcard span.says { visibility:hidden; } /* dice */
ol.commentlist li div.reply { cursor:pointer; width:70px; }
ol.commentlist li div.reply a {color: var(--naranja); } /* reponder */
ol.commentlist li div.reply a:hover { color: var(--rojo); }
ol.commentlist li ul.children li { margin: 15px 0 12px 0; border: 1px solid #ccc; }

.comentarios { height: 100px; }

/************ video *************/

iframe.video {
	width: 410px;
	height: 231px;
	margin-top: 10px;
}

a.video, a.videoactivo {
	margin-top: 10px;
	float: left;
	text-align: left;
	clear: both;
}
a.videoactivo {
	color: var(--azul);
	text-decoration: underline;
	font-weight: bold;
}

/************ himno *************/

.tools h6 { margin-bottom: 10px; }

.himno h2 { margin-bottom: 10px; }

.himno span.numero {
	font-size: 18px;
	color: var(--blanco);
	background-color: var(--verde);
	padding: 4px 15px;
	margin: 0px 5px 0px 0;
	display: inline-block; 
}

/************ invitacion *************/

#invitacion1, #invitacion2, #invitacion3, #invitacion4 {
	width: 400px;
	height: 600px;
	background: url(../../../images/cena/invitacion.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}
	#invitacion1 { background: url(../../../images/cena/invitacion-1.jpg); }
	#invitacion2 { background: url(../../../images/cena/invitacion-2.jpg); }
	#invitacion3 { background: url(../../../images/cena/invitacion-3.jpg); }
	#invitacion4 { background: url(../../../images/cena/invitacion-4.jpg); }

.inv { height: 165px; }
.inv-pais { width: 53px; height: 53px; }
.inv:hover, .inv-pais:hover { border: 2px solid var(--blanco); }

.inv-logo1, .inv-logo2, .inv-logo3, .inv-logo4, .inv-logo5, .inv-logo6 {
	position: relative;
	width: 85px;
	height: 85px;
	margin: 15px auto 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
	.inv-logo1 { background: url(../../../images/cena/logo-1.png); }
	.inv-logo2 { background: url(../../../images/cena/logo-2.png); }
	.inv-logo3 { background: url(../../../images/cena/logo-3.png); }
	.inv-logo4 { background: url(../../../images/cena/logo-4.png); }
	.inv-logo5 { background: url(../../../images/cena/logo-5.png); }
	.inv-logo6 { background: url(../../../images/cena/logo-6.png); }

.inv-hora {
	position: relative;
	top: 300px;
	left: 53px;
	padding: 0px;
	width: 50px;
	height: 22px;
	text-align: right;
	font-size: 19px;
	line-height: 19px;
	font-weight: 200;
	color: var(--dorado);
	z-index: 10;
}

.inv-lugar1, .inv-lugar2, .inv-lugar3 {
	position: relative;
	top: 320px;
	margin: 0px auto 0px;
	padding: 0px;
	width: 200px;
	height: 20px;
	overflow: hidden;
	text-align: center;
	font-size: 12px;
	line-height: 16px;
	font-weight: 200;
	color: var(--blanco);
	z-index: 20;
}

.inv-nombre {
	position: relative;
	top: 330px;
	margin: 0px auto 0px;
	padding: 0px;
	width: 300px;
	height: 60px;
	overflow: hidden;
	text-align: center;
	font-family: times;
	font-size: 22px;
	line-height: 28px;
	font-weight: 200;
	color: var(--dorado);
	z-index: 30;
}



/*--------------------------------------------------------------
# tabla
--------------------------------------------------------------*/

table {
	background: var(--blanco);
	border:1px solid #e0e0e0;
	margin-bottom:20px;
	width:100%;
	text-align: left;
	}

table th {
	padding:5px;
	border:1px solid #e0e0e0;
	background: var(--cielo);
	color: var(--blanco);
	text-align: center;
	font-weight: normal;
	}

table tr {
	text-align: left;
	padding: 5px;
	}

table td {
	padding: 5px;
	border: 1px solid #e0e0e0;
	background: #fafafa;
	display: left;
	vertical-align: top;
	}

table tr:nth-child(odd) td { background-color: #f1f1f1; }

table tbody tr:hover td { background-color: #CEF6F5; color: var(--negro); }

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/

#footer {
	background: var(--negro);
	color: var(--cielo);
	font-size: 12px;
	padding: 20px 20px;
}
	#footer p {
		font-size: 14px;
		line-height: 18px;
	}
	#footer p a { color: var(--gris2); }
	#footer p a:hover { color: var(--amarillo); }

#login {
	padding: 20px 30%;
}

/***Cookie notice whatsapp***/
#cookie-notice-whatsapp {
	color: var(--blanco);
	font-family:inherit;
	background:#20d562;
	padding:8px;
	position:fixed;  /* Elemento fijo dentro del navegador */
	top:87%;  /* Posición desde el top de la web */
	width:100%;
	max-width:57px;
	max-height:57px;
	box-shadow:0 10px 20px rgba(0,0,0,.2); 
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	margin:0px;
	visibility:visible;
	z-index:1000000;
	right: 10px; 
	}
	#cookie-notice-whatsapp button{ color:inherit; background:var(--alfa); border:0; padding:10px; margin-top:10px; width:100%; cursor:pointer}
/***End Cookie notice whatsapp***/

/*--------------------------------------------------------------
# iconos
--------------------------------------------------------------*/

@font-face {
	font-family: "IcoFont";
	font-weight: normal;
	font-style: "Regular";
	src: url("fonts/icofont.woff2") format("woff2"),
	url("fonts/icofont.woff") format("woff");
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'IcoFont' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

.icon-preparativos:before { content: "\ead3"; font-size: 90px; color: var(--cielo); }
.icon-recomendaciones:before {content: "\ef6e"; font-size: 90px; color: var(--cielo); }
.icon-liturgia:before { content: "\ead2"; font-size: 90px; color: var(--cielo); }