/* Main Theme CSS
//--------------------------------------------------------------------- */

/* Header compendium
---------------------------------------------------------------- */
header.header-compendium {
	padding-top: 80px;
	height: 100vh;
}

header.header-compendium div.pod {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100%;
}

header.header-compendium div.pod div.img { position: relative; }

header.header-compendium div.pod div.txt div.heading {
	background: var(--gradient-main-diagonal);
	color: var(--color-blanco);
	height: 50%;
	position: relative;
	padding: 30px;
}

header.header-compendium div.pod div.txt div.heading div.heading-inner {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
}

header.header-compendium.singlemaintheme div.pod div.txt div.heading div.heading-inner { text-align: left; }
header.header-compendium.singlemaintheme div.pod div.txt div.heading h1 { margin-bottom: 5px; }

header.header-compendium div.pod div.txt div.heading h1,
header.header-compendium div.pod div.txt div.heading p.tagline {
	font-family: var(--font-family-secundaria);
	font-weight: 500;
}

header.header-compendium div.pod div.txt div.heading p.tagline {
	color: var(--color-dark-blue);
	margin-bottom: 10px;
	font-weight: 700;
}

header.header-compendium div.pod div.txt div.tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas: 'area1 area2' 'area1 area3';
	height: 50%;
}

header.header-compendium div.pod div.txt div.tiles div.item { position: relative; }
header.header-compendium div.pod div.txt div.tiles div.item:nth-of-type(1) { grid-area: area1; }
header.header-compendium div.pod div.txt div.tiles div.item:nth-of-type(2) { grid-area: area2; }
header.header-compendium div.pod div.txt div.tiles div.item:nth-of-type(3) { grid-area: area3; }

header.header-compendium div.pod div.txt div.tiles div.item div.bg {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

header.header-compendium div.pod div.txt div.tiles div.item div.bg::after {
	display: block;
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	transition: width .3s ease;
	mix-blend-mode: multiply;
}

header.header-compendium div.pod div.txt div.tiles div.item div.bg::after { background: #0000001e; }
header.header-compendium div.pod div.txt div.tiles div.item:hover div.bg::after { width: 100%; }

header.header-compendium div.pod div.txt div.tiles div.item:nth-of-type(1) {
	background: var(--color-dark-blue-2);
	color: var(--color-blanco);
}

header.header-compendium div.pod div.txt div.tiles div.item:nth-of-type(2) { color: var(--color-blanco); }
header.header-compendium div.pod div.txt div.tiles div.item:nth-of-type(2) div.bg { background: var(--color-dark-blue); }

header.header-compendium div.pod div.txt div.tiles div.item div.tile-txt {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	padding: 30px;
}

header.header-compendium div.pod div.txt div.tiles div.item div.tile-txt h5 {
	font-family: var(--font-family-secundaria);
	font-weight: 500;
	margin-bottom: 5px;
	transition: color .3s ease;
}

header.header-compendium div.pod div.txt div.tiles div.item:hover div.tile-txt h5 { color: var(--color-teal); }

header.header-compendium div.pod div.txt div.tiles div.item a.tile-link {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

header.header-compendium div.pod div.txt div.tiles div.item div.botones { margin-top: 15px; }

header.header-compendium.singlemaintheme div.pod div.txt div.tiles {
	display: block;
	height: 50%;
	position: relative;
}

header.header-compendium.singlemaintheme div.pod div.txt div.tiles div.img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

header.header-compendium.singlemaintheme div.pod div.txt div.tiles a.boton {
	display: block;
	position: absolute;
	bottom: 30px;
	right: 30px;
}

header.header-compendium.singlemaintheme div.pod div.txt div.tiles a.boton:hover {
	background: var(--color-blanco);
	color: var(--color-dark-blue);
}

header.header-compendium.singlemaintheme div.pod div.txt div.tiles ul {
	height: 100%;
	display: block;
	background: var(--color-dark-blue-2);
	padding: 30px 30px 90px 30px;
	overflow: hidden;
	width: 100%;
	transition: opacity .3s ease;
}

header.header-compendium.singlemaintheme div.pod div.txt div.tiles ul li { width: 50%; }

header.header-compendium.singlemaintheme div.pod div.txt div.tiles ul li a,
header.header-compendium.singlemaintheme div.pod div.txt div.tiles ul li h5 {
	display: inline-block;
	font-family: var(--font-family-secundaria);
	font-weight: 500;
	color: var(--color-blanco);
	position: relative;
	padding: 5px 5px 5px 20px;
	transition: all .4s ease;
}

header.header-compendium.singlemaintheme div.pod div.txt div.tiles ul li h5 { color: var(--color-teal); }
header.header-compendium.singlemaintheme div.pod div.txt div.tiles ul li a:hover {
	color: var(--color-teal-2);
	padding-left: 25px;
}

header.header-compendium.singlemaintheme div.pod div.txt div.tiles ul li a i {
	display: block;
	font-size: 75%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

header.header-compendium.singlemaintheme div.pod div.txt div.tiles ul li.all-subthemes a { color: var(--color-teal-2); }
header.header-compendium.singlemaintheme div.pod div.txt div.tiles ul li.all-subthemes a:hover { color: var(--color-blanco); }

header.header-compendium.singlemaintheme div.pod div.img {
	overflow: hidden;
	background: var(--color-dark-blue);
	/*background: var(--color-dark-blue) url(../imagenes/temp10.jpg) no-repeat;*/
	background-size: cover;
}

header.header-compendium.singlemaintheme div.pod div.img div.navegacion {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

header.header-compendium.singlemaintheme div.pod div.img div.navegacion ul li {
	width: calc(100% / 3);
	text-align: center;
}

header.header-compendium.singlemaintheme div.pod div.img div.navegacion ul li a {
	display: block;
	color: var(--color-blanco);
	font-size: 12px;
	height: 35px;
	line-height: 35px;
}

header.header-compendium.singlemaintheme div.pod div.img div.navegacion ul li:nth-of-type(2) a { background: var(--color-blue); }
header.header-compendium.singlemaintheme div.pod div.img div.navegacion ul li:nth-of-type(1) a { background: var(--color-dark-blue-2); }
header.header-compendium.singlemaintheme div.pod div.img div.navegacion ul li:nth-of-type(3) a { background: var(--color-dark-blue-2); }

header.header-compendium.singlemaintheme div.pod div.img div.navegacion ul li a:hover {
	background: var(--color-blanco);
	color: var(--color-dark-blue);
}

header.header-compendium.singlemaintheme div.pod div.img div.slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 35px);
}

header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--color-principal);
}

header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider:nth-of-type(1) { background: var(--color-blue); }
header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider:nth-of-type(2) { background: var(--color-dark-blue); }
header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider:nth-of-type(3) { background: var(--color-dark-blue-2); }

header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider div.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, #00000080, #00000000);
	opacity: .4;
}

header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider img.bg { opacity: .9; }

header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider div.txt {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-blanco);
	padding: 30px;
	padding-left: 260px;
}
header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider div.txt div.img-inner {
	position:absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 30px;
	width: 200px;
	height: 200px;
}

header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider div.txt .heading {
	font-weight: 500;
	font-family: var(--font-family-secundaria);
	margin-bottom: 5px;
}

header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider div.botones {
	margin-top: 30px;
	text-align: right;
}

@media (max-width: 1199px) {
	header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider div.txt div.img-inner { width: 150px; height: calc(100% - 30px); left: 15px; }
	header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider div.txt { padding-left: 180px; }
	header.header-compendium.singlemaintheme div.pod div.txt div.tiles ul li a,
	header.header-compendium.singlemaintheme div.pod div.txt div.tiles ul li h5 { display: block; }
}

@media (max-width: 991px) { header.header-compendium.singlemaintheme div.pod div.txt div.tiles ul li { display: block; width: 100%; } }

@media (max-width: 767px) {
	header.header-compendium div.pod { height: auto; }
	header.header-compendium.singlemaintheme { padding-top: 60px; height: auto; }
	header.header-compendium.singlemaintheme div.pod { grid-template-columns: 1fr; }
	header.header-compendium div.pod div.txt div.heading { height: auto; }
	header.header-compendium.singlemaintheme div.pod div.txt div.heading div.heading-inner { transform: none; top: 0; padding: 60px 0; }
	header.header-compendium.singlemaintheme div.pod div.txt div.tiles { height: auto; }
	header.header-compendium.singlemaintheme div.pod div.img div.slider { position: relative; top: 0; left: 0; height: auto; }
	header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider { height: auto; padding-bottom: 35px; }
	header.header-compendium.singlemaintheme div.pod div.img div.slider div.item-slider div.txt { top: 0; transform: none; }
}

@media (min-width: 2500px) {
	div.feed-compendium { background: var(--color-clear-2); }
	div.feed-compendium div.pod { max-width: 2200px; margin: 0 auto; }
	header.header-compendium.singlemaintheme div.pod div.txt div.heading div.heading-inner { margin: 0; }
}