/**
 * HOJA DE ESTILO PARA SITIO WEB DE OM
 * DESARROLLADA POR ALFREDO RAUL GOMEZ VALERIO PARA ARROW MARKETING
 * MÉXICO, MARZO DE 2024
 */

/** Preloader
-------------------------------------------------------------------------------------**/
#preloader {
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2000;
}

#preloader i,
#preloader img {
	display: block;
	color: #546e7a;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	font-size: 30px;
}

#preloader img { width: 35px; height: 35px; }

#preloader i::before {
	display: block;
	-moz-animation: preloader 1s ease infinite;
	-webkit-animation: preloader 1s ease infinite;
	animation: preloader 1s ease infinite;
}

@-moz-keyframes preloader { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes preloader { 100% { -webkit-transform: rotate(360deg); } }
@keyframes preloader { 100% { transform: rotate(360deg); } }

.abraxas { display: none !important; width: 0 !important; height: 0 !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important; }

/* Iconos
---------------------------------------------------------------- */
i.icono {
	display: inline-block;
	font-size: inherit;
}

i.icono svg {
	position: relative;
	top: .125em;
	flex-shrink: 0;
	height: 1em;
	width: 1em;
	fill: currentColor;
	transition: fill .3s;
}

/** Layout General
-------------------------------------------------------------------------------------**/
html, body {
	font-size: 100%;
	font-family: 'Roboto', sans-serif;
}

/** Variables
-------------------------------------------------------------------------------------**/
:root {
	--color-splash-bg: #111821;
	--color-blanco: #fff;
	--color-claro: #f1f1f1;
	--color-principal: #111821;
	--color-oscuro: #111821;
	--color-negro: #000;
	--color-gris: #555;
	--color-gris-claro: #ccc;
	--color-verde: #a9bf3b;
	--degradado-verde: linear-gradient(90deg, #a9bf3b, #82a351);
	--degradado-header: linear-gradient(0deg, #c9ceae, #efefef 65%);
	--degradado-footer: linear-gradient(180deg, #fff, #c3cd90);
}


/** Ajustes Generales
-------------------------------------------------------------------------------------**/
a:hover, a:focus { text-decoration: none; }
.no-padding { padding: 0 !important; }

.degradado-rosa { background: var(--degradado-rosa); }
.degradado-purpura { background: var(--degradado-purpura); }
.degradado-azul { background: var(--degradado-azul); }
.degradado-verde { background: var(--degradado-verde); }
.degradado-naranja { background: var(--degradado-naranja); }

ul {
	list-style: none;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	-webkit-padding-start: 0;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5 {
	padding: 0;
	margin: 0;
	font-weight: 700;
}

.img-bg {
	width: 100%;
	height: 100%;
	position: relative;
}

img.bg {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 575px) { .img-bg { height: 50vh; } }

.font-size-18 { font-size: .8rem; }
@media (max-width: 1199px) { .font-size-20 { font-size: .8rem; } }
@media (max-width: 991px) { .font-size-20 { font-size: .75rem; } }

.font-size-20 { font-size: .9rem; }
@media (max-width: 1199px) { .font-size-20 { font-size: .8rem; } }
@media (max-width: 991px) { .font-size-20 { font-size: .75rem; } }

.font-size-24 { font-size: 1rem; line-height: 1.6rem; }
@media (max-width: 1199px) { .font-size-24 { font-size: .8rem; line-height: 1.4rem; } }
@media (max-width: 991px) { .font-size-24 { font-size: .8rem; line-height: 1.2rem; } }
@media (max-width: 500px) { .font-size-24 { font-size: .8rem; } }

.font-size-28 { font-size: 1.1rem; line-height: 1.8rem; }
@media (max-width: 1199px) { .font-size-28 { font-size: 1rem; line-height: 1.7rem; } }
@media (max-width: 991px) { .font-size-28 { font-size: .9rem; line-height: 1.6rem; } }
@media (max-width: 500px) { .font-size-28 { font-size: .8rem; line-height: 1.3rem; } }

.font-size-30 { font-size: 1.2rem; }
@media (max-width: 1199px) { .font-size-30 { font-size: 1.1rem; } }
@media (max-width: 991px) { .font-size-30 { font-size: 1rem; } }
@media (max-width: 500px) { .font-size-30 { font-size: .9rem; } }

.font-size-32 { font-size: 1.3rem; line-height: 2.2rem; }
@media (max-width: 1199px) { .font-size-32 { font-size: 1.2rem; line-height: 2rem; } }
@media (max-width: 991px) { .font-size-32 { font-size: 1rem; line-height: 1.7rem; } }
@media (max-width: 500px) { .font-size-32 { font-size: 1rem; } }

.font-size-36 { font-size: 1.5rem; }
@media (max-width: 1199px) { .font-size-36 { font-size: 1.35rem; } }
@media (max-width: 991px) { .font-size-36 { font-size: 1.2rem; } }
@media (max-width: 500px) { .font-size-36 { font-size: 1.1rem; } }

.font-size-40 { font-size: 1.8rem; }
@media (max-width: 1199px) { .font-size-40 { font-size: 1.6rem; } }
@media (max-width: 991px) { .font-size-40 { font-size: 1.4rem; } }
@media (max-width: 500px) { .font-size-40 { font-size: 1.25rem; } }

.font-size-48 { font-size: 2rem; }
@media (max-width: 1199px) { .font-size-48 { font-size: 1.8rem; } }
@media (max-width: 991px) { .font-size-48 { font-size: 1.6rem; } }
@media (max-width: 500px) { .font-size-48 { font-size: 1.5rem; } }

.font-size-56 { font-size: 2.3rem; }
@media (max-width: 1199px) { .font-size-56 { font-size: 2.1rem; } }
@media (max-width: 991px) { .font-size-56 { font-size: 1.9rem; } }
@media (max-width: 500px) { .font-size-56 { font-size: 1.6rem; } }

.font-size-64 { font-size: 2.6rem; line-height: 3.4rem; }
@media (max-width: 1199px) { .font-size-64 { font-size: 2.35rem; line-height: 3rem; } }
@media (max-width: 991px) { .font-size-64 { font-size: 2.1rem; line-height: 2.7rem; } }
@media (max-width: 500px) { .font-size-64 { font-size: 1.8rem; line-height: 2.3rem; } }

.font-size-72 { font-size: 3rem; line-height: 3.6rem; }
@media (max-width: 1199px) { .font-size-72 { font-size: 2.35rem; line-height: 3rem; } }
@media (max-width: 991px) { .font-size-72 { font-size: 2.1rem; line-height: 2.7rem; } }
@media (max-width: 500px) { .font-size-72 { font-size: 1.8rem; line-height: 2.3rem; } }

.font-size-96 { font-size: 4rem; }
@media (max-width: 1199px) { .font-size-96 { font-size: 3.6rem; } }
@media (max-width: 991px) { .font-size-96 { font-size: 3.2rem; } }
@media (max-width: 500px) { .font-size-96 { font-size: 3rem; } }

.font-size-128 { font-size: 5.5rem; }
@media (max-width: 1199px) { .font-size-128 { font-size: 5rem; } }
@media (max-width: 991px) { .font-size-128 { font-size: 4rem; } }
@media (max-width: 500px) { .font-size-128 { font-size: 3rem; } }

/** Padding general
-------------------------------------------------------------------------------------**/
.padding-top-120 { padding-top: 120px !important; }
.padding-top-60 { padding-top: 60px !important; }
.padding-top-40 { padding-top: 40px !important; }
.padding-top-30 { padding-top: 30px !important; }
.padding-top-15 { padding-top: 15px !important; }
.padding-bottom-120 { padding-bottom: 120px !important; }
.padding-bottom-60 { padding-bottom: 60px !important; }
.padding-bottom-40 { padding-bottom: 40px !important; }
.padding-bottom-30 { padding-bottom: 30px !important; }
.padding-bottom-15 { padding-bottom: 15px !important; }

/* 80% */
@media (max-width: 1199px) {
	.padding-top-120 { padding-top: 96px !important; }
	.padding-top-60 { padding-top: 48px !important; }
	.padding-top-40 { padding-top: 32px !important; }
	.padding-top-30 { padding-top: 24px !important; }
	.padding-top-15 { padding-top: 12px !important; }
	.padding-bottom-120 { padding-bottom: 96px !important; }
	.padding-bottom-60 { padding-bottom: 48px !important; }
	.padding-bottom-40 { padding-bottom: 32px !important; }
	.padding-bottom-30 { padding-bottom: 24px !important; }
	.padding-bottom-15 { padding-bottom: 12px !important; }
}

/* 60% */
@media (max-width: 991px) {
	.padding-top-120 { padding-top: 72px !important; }
	.padding-top-60 { padding-top: 36px !important; }
	.padding-top-40 { padding-top: 24px !important; }
	.padding-top-30 { padding-top: 18px !important; }
	.padding-top-15 { padding-top: 9px !important; }
	.padding-bottom-120 { padding-bottom: 72px !important; }
	.padding-bottom-60 { padding-bottom: 36px !important; }
	.padding-bottom-40 { padding-bottom: 24px !important; }
	.padding-bottom-30 { padding-bottom: 18px !important; }
	.padding-bottom-15 { padding-bottom: 9px !important; }
}

/* 40% */
@media (max-width: 767px) {
	.padding-top-120 { padding-top: 48px !important; }
	.padding-top-60 { padding-top: 24px !important; }
	.padding-top-40 { padding-top: 16px !important; }
	.padding-top-30 { padding-top: 12px !important; }
	.padding-top-15 { padding-top: 6px !important; }
	.padding-bottom-120 { padding-bottom: 48px !important; }
	.padding-bottom-60 { padding-bottom: 24px !important; }
	.padding-bottom-40 { padding-bottom: 16px !important; }
	.padding-bottom-30 { padding-bottom: 12px !important; }
	.padding-bottom-15 { padding-bottom: 6px !important; }
}

/** Splash
-------------------------------------------------------------------------------------**/
#splash {
	background: var(--degradado-header);
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

#splash video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	mix-blend-mode: overlay;
}

#splash img.producto {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: scale(1) translateY(-50%) translateX(-50%);
	width: 50%;
	max-width: 600px;
	animation: pulse 3s infinite;
    opacity: .65;
    mix-blend-mode: multiply;
}

#splash ul {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-gris);
	width: 100%;
	text-align: center;
}

#splash ul li {
	display: block;
	position: absolute;
	top: -50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
	opacity: 0;
	transform-origin: 50% 50%;
	line-height: 100%;
}

#splash ul li:nth-of-type(1) { animation: lista 18s infinite; animation-delay: 0s; }
#splash ul li:nth-of-type(2) { animation: lista 18s infinite; animation-delay: 3s; }
#splash ul li:nth-of-type(3) { animation: lista 18s infinite; animation-delay: 6s; }
#splash ul li:nth-of-type(4) { animation: lista 18s infinite; animation-delay: 9s; }
#splash ul li:nth-of-type(5) { animation: lista 18s infinite; animation-delay: 12s; }
#splash ul li:nth-of-type(6) { animation: lista 18s infinite; animation-delay: 15s; }

@keyframes pulse {
	0% { transform: scale(0.9) translateY(-50%) translateX(-50%) rotate(0deg); }
	50% { transform: scale(1) translateY(-50%) translateX(-50%) rotate(180deg); }
	100% { transform: scale(0.9) translateY(-50%) translateX(-50%) rotate(360deg); }
}

@keyframes lista {
	0% { opacity: 0; transform: scale(1) translateY(-50%); }
	3% { opacity: 1; }
	13.6% { opacity: 1; }
	16.6% { opacity: 0;  transform: scale(1.2) translateY(-50%); }
}

/** Top
-------------------------------------------------------------------------------------**/
#top {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	z-index: 100;
	transition: background .3s linear;
	background: var(--color-blanco);
	box-shadow: 0 0 10px 2px rgba(0,0,0,.6);
}

#top div.logo {
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

#top div.logo img {
	display: block;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	height: 30px;
	transition: transform .3s ease;
}

#top div.logo img:hover { transform: scale(1.1) translateY(-50%); }

#top div.social {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	font-size: 0;
}

#top div.social ul li {
	display: inline-block;
	font-size: 18px;
	margin-right: 10px;
}

#top div.social ul li i.icono svg { top: 0; }

#top div.social ul li a {
    background: var(--color-verde);
    display: block;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    color: var(--color-blanco);
    font-size: 15px;
	border-radius: 5px;
}

#top div.social ul li a:hover { background: var(--color-principal); }

#top div.social ul li:last-child { margin-right: 0; }

#top div.menu-trigger {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 5px;
	width: 60px;
	height: 60px;
	cursor: pointer;
}

#top div.menu-trigger span {
	display: block;
	width: 40px;
	height: 1px;
	background: var(--color-oscuro);
	position: absolute;
	top: 50%;
	left: 10px;
	transition: background 0;
	transition-delay: .2s;
}

#top div.menu-trigger span::after,
#top div.menu-trigger span::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--color-oscuro);
	position: absolute;
	left: 0;
	transition: top .2s, transform .2s .2s;
}

#top div.menu-trigger span::after { top: 12px; }
#top div.menu-trigger span::before { top: -12px; }

#top div.menu-trigger.ani-in span { background: transparent !important; }
#top div.menu-trigger.ani-in span::after,
#top div.menu-trigger.ani-in span::before { top: 0; transition: top .2s, transform .2s .2s; }
#top div.menu-trigger.ani-in span::after { transform: rotate(45deg); }
#top div.menu-trigger.ani-in span::before { transform: rotate(-45deg); }

#top div.menu-trigger.ani-out span::after,
#top div.menu-trigger.ani-out span::before { transition: transform .2s, top .2s .2s; }

#top.claro,
#top.corto { background: var(--color-blanco); }
#top.claro div.logo img,
#top.corto div.logo img { filter: none; }
#top.claro div.menu-trigger span,
#top.corto div.menu-trigger span { background: var(--color-oscuro); }
#top.claro div.menu-trigger span::after,
#top.claro div.menu-trigger span::before,
#top.corto div.menu-trigger span::after,
#top.corto div.menu-trigger span::before { background: var(--color-oscuro); }
#top.claro ul.iconos li a img,
#top.corto ul.iconos li a img { filter: none; }

#top div.menu {
	position: fixed;
	top: 70px;
	left: -50%;
	width: 50%;
	height: calc(100vh - 70px);
	background: var(--color-blanco);
	transition: left .4s ease;
	overflow: auto;
}

#top div.menu ul { padding: 60px 60px; }

#top div.menu ul li a {
	font-weight: 900;
	font-size: 3rem;
	color: var(--color-oscuro);
}

#top div.menu ul li:nth-child(5n+1) a:hover { color: var(--color-verde); }
#top div.menu ul li:nth-child(5n+2) a:hover { color: var(--color-verde); }
#top div.menu ul li:nth-child(5n+3) a:hover { color: var(--color-verde); }
#top div.menu ul li:nth-child(5n+4) a:hover { color: var(--color-verde); }
#top div.menu ul li:nth-child(5n+5) a:hover { color: var(--color-verde); }

@media (max-width: 991px) {
	#top { height: 60px; }
	#top div.logo img { height: 25px; }
	#top div.menu-trigger { width: 40px; height: 40px; left: 12px; }
	#top div.menu-trigger span { width: 35px; left: 3px; }
	#top div.menu-trigger span::after { top: 11px; }
	#top div.menu-trigger span::before { top: -11px; }
	#top div.menu { height: calc(100vh - 60px); top: 60px; }
	#top div.menu ul li a { font-size: calc(3rem * .9); }
}

@media (max-width: 767px) {
	#top div.menu { width: 100%; left: -100%; }
	#top div.menu ul { padding: 30px; }
	#top div.menu ul li a { font-size: calc(3rem * .8); }
}

@media (max-width: 575px) {
	#top div.menu ul li a { font-size: 2rem; }
	#top div.social ul li { margin-right: 5px; }
	#top div.social ul li a { width: 20px; height: 20px; font-size: 12px; line-height: 19px; }
}

/** RTE
-------------------------------------------------------------------------------------**/
div.rte *:last-child { margin: 0; }

.rte strong {
	color: var(--color-verde);
	font-weight: inherit;
}

.rte ul li {
	position: relative;
	padding-left: 30px;
	margin-bottom: .5em;
}

.rte ul li:last-child { margin-bottom: 0; }

.rte ul li::before {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	background: var(--degradado-verde);
	border-radius: 50%;
	position: absolute;
	top: .35em;
	left: 5px;
}


/** Assets
-------------------------------------------------------------------------------------**/
.botones .boton { margin: 15px 30px 0 0; }
.botones .boton:last-child { margin: 15px 0 0 0; }

.boton {
	display: inline-block;
	padding: 15px 45px;
	color: var(--color-blanco);
	border-radius: 50px;
	transition: all .3s ease;
	text-align: center;
}

.boton:hover {
	color: var(--color-blanco);
	transform: scale(1.1);
}

.boton.outline { border: 1px solid var(--color-blanco); }

.boton.degradado-rosa:hover { background: linear-gradient(90deg,var(--color-naranja),var(--color-naranja)); }
.boton.degradado-purpura:hover { background: linear-gradient(90deg,var(--color-purpura),var(--color-purpura)); }
.boton.degradado-azul:hover { background: linear-gradient(90deg,var(--color-azul),var(--color-azul)); }
.boton.degradado-verde:hover { background: linear-gradient(90deg,var(--color-verde),var(--color-verde)); }
.boton.degradado-naranja:hover { background: linear-gradient(90deg,var(--color-naranja),var(--color-naranja)); }

.boton-redes {
	display: inline-block;
	text-align: center;
	color: var(--color-oscuro);
}

.boton-redes img {
	display: inline-block;
	height: 3.5rem;
	margin-bottom: 20px;
}

.boton-redes span {
	display: block;
	text-transform: uppercase;
	font-weight: 900;
}

.boton-redes:hover { color: var(--color-purpura); }

@media (max-width: 991px) { .boton-redes img { height: 3rem; } }

/** Home Strains
-------------------------------------------------------------------------------------**/
div.home-strains {
	color: var(--color-gris);
	background: var(--degradado-header);
}

div.home-strains h5 {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 900;
}

div.home-strains .item h1 { font-weight: 400; }

div.home-strains .item h2 {
	font-weight: 400;
	margin-bottom: 10px;
}

div.home-strains .item p {
	font-weight: 500;
}

div.home-strains .item div.img {
	position: relative;
	width: 100%;
	height: 100%;
}

div.home-strains .item div.img img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: contain;
	width: 100%;
	height: 100%;
}

@media (max-width: 991px) { div.home-strains .item .botones .boton { display: block; width: 100%; } }
@media (max-width: 767px) { div.home-strains .item h1 { font-size: 2rem; } }
@media (max-width: 575px) {	div.home-strains .item div.img { height: 30vh; margin-bottom: 30px; } }

/** Image Feed
-------------------------------------------------------------------------------------**/
div.image-feed ul { font-size: 0; }

div.image-feed ul li {
	display: inline-block;
	vertical-align: top;
	width: calc(100% / 3);
	padding: 15px;
}

div.image-feed ul li div.pod {
	padding-top: 100%;
	position: relative;
	overflow: hidden;
}

div.image-feed ul li div.pod img { transition: all .3s ease; }
div.image-feed ul li div.pod:hover img.bg { transform: scale(1.1); }

div.image-feed ul li div.pod div.overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 15px;
	color: var(--color-blanco);
	transition: all .3s ease;
	opacity: 0;
}

div.image-feed ul li div.pod:hover div.overlay { opacity: 1; }

div.image-feed ul li div.pod div.overlay span {
	display: inline-block;
	font-size: 1rem;
	text-align: center;
	position: relative;
}

div.image-feed ul li div.pod div.overlay span:last-child { float: right; }
div.image-feed ul li div.pod div.overlay span i { display: block; }

@media (max-width: 767px) {
	div.image-feed ul { padding: 8px; text-align: center; }
	div.image-feed ul li { padding: 7px; }
}

/** Shop carrousel
-------------------------------------------------------------------------------------**/
div.shop-carrousel div.pod { position: relative; }

div.shop-carrousel div.pod div.img {
	position: relative;
	padding-top: 100%;
	overflow: hidden;
}

div.shop-carrousel div.pod div.img img {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 80%;
	height: 80%;
	object-fit: contain;
	transition: all .3s ease;
}

div.shop-carrousel div.pod div.img img:hover { transform: translateX(-50%) translateY(-50%) scale(1.1); }

div.shop-carrousel div.pod div.txt {
	margin-top: 15px;
	text-align: center;
	font-weight: 900;
	text-transform: uppercase;
}

div.shop-carrousel div.pod div.txt h5 { margin-bottom: 15px; }
div.shop-carrousel div.pod a { color: var(--color-oscuro); }
div.shop-carrousel div.pod a:hover { color: var(--color-purpura); }

div.shop-carrousel .tns-controls {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 1140px;
	height: 0;
	z-index: 100;
}

div.shop-carrousel .tns-controls button {
	display: block;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	padding: 0;
	font-size: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

div.shop-carrousel .tns-controls button::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background: url(../imagenes/icono_flecha.svg);
	background-size: contain;
}

div.shop-carrousel div.tiny-slider-outer { position: relative; }
div.shop-carrousel .tns-controls button:nth-of-type(2) { right: 0; left: auto; left: initial; }
div.shop-carrousel .tns-controls button:nth-of-type(1)::after { transform: rotate(90deg); }
div.shop-carrousel .tns-controls button:nth-of-type(2)::after { transform: rotate(-90deg); }

div.shop-carrousel .tns-nav {
	display: none;
	font-size: 0;
	text-align: center;
	margin-top: 30px;
}

div.shop-carrousel .tns-nav button {
	padding: 0;
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 1px solid var(--color-oscuro);
	background: transparent;
	border-radius: 50%;
	margin: 0 5px;
}

div.shop-carrousel .tns-nav button.tns-nav-active { background: var(--color-oscuro); }

@media (max-width: 1199px) {
	div.shop-carrousel div.tiny-slider-outer { padding: 0 60px; }
	div.shop-carrousel .tns-controls { width: 100%; }
}

@media (max-width: 991px) {
	div.shop-carrousel div.tiny-slider-outer { padding: 0 30px; }
	div.shop-carrousel .tns-controls button { width: 30px; height: 30px; }
}

@media (max-width: 575px) {
	div.shop-carrousel div.tiny-slider-outer { padding: 0; }
	div.shop-carrousel .tns-controls { display: none; }
	div.shop-carrousel .tns-nav { display: block; }
}

/** Formulario de suscripción
-------------------------------------------------------------------------------------**/
div.formulario-de-suscripcion {
	background: var(--color-oscuro);
	color: var(--color-blanco);
}

div.formulario-de-suscripcion h2 { font-weight: 400; }
div.formulario-de-suscripcion div.form { text-align: center; }

div.formulario-de-suscripcion div.form input {
	display: inline-block;
	width: 80%;
	border: 1px solid var(--color-blanco);
	border-radius: 50px;
	background: transparent;
	color: var(--color-blanco);
	padding: 15px;
	margin-bottom: 30px;
}

div.formulario-de-suscripcion div.form input[type=submit] {
	width: calc(20% - 15px);
	margin-left: 10px;
	background: linear-gradient(90deg,var(--color-naranja),var(--color-rosa));
	border-color: transparent;
	font-weight: 900;
}

div.formulario-de-suscripcion div.form input[type=submit]:hover { background: var(--color-rosa); }

div.formulario-de-suscripcion div.form p {
	margin: 0;
	text-transform: uppercase;
	font-weight: 900;
	text-align: left;
	padding-left: 50px;
	letter-spacing: 2px;
}

@media (max-width: 991px) {
	div.formulario-de-suscripcion div.form input { width: 75%; margin-bottom: 15px; }
	div.formulario-de-suscripcion div.form input[type=submit] { width: calc(25% - 15px); }
	div.formulario-de-suscripcion div.form p { padding-left: 25px; }
}

@media (max-width: 575px) {
	div.formulario-de-suscripcion div.form input { width: 100% !important; margin-left: 0 !important; text-align: center; }
	div.formulario-de-suscripcion div.form p { padding-left: 0; text-align: center; }
}

/** Footer
-------------------------------------------------------------------------------------**/
#footer {
	background: var(--degradado-footer);
	color: var(--color-principal);
}

#footer img.logo {
	display: block;
	height: 125px;
	margin: 0 auto 30px auto;
}

#footer ul {
	font-size: 0;
	text-align: center;
}

#footer ul li {
	display: inline-block;
	vertical-align: top;
	margin: 0 20px 20px 20px;
}

#footer ul:last-child li {
	width: 50%;
	margin: 0;
}

#footer ul:last-child li:first-child { text-align: left; }
#footer ul:last-child li:last-child { text-align: right; }
#footer ul:last-child li:last-child a:last-child { display: block; }

#footer ul li a {
	display: inline-block;
	padding: 5px;
	color: var(--color-principal);
}

#footer ul li a:hover { text-decoration: underline; }

#footer div.copy { padding-bottom: 30px; }

#footer div.copy a {
	font-weight: 900;
	color: var(--color-blanco);
}

#footer div.copy a:hover { text-decoration: underline; }
#footer div.copy div.col-12:nth-of-type(2) { text-align: right; }

@media (max-width: 767px) {
	#footer div.copy { text-align: center; }
	#footer div.copy div.col-12:nth-of-type(2) { text-align: center; }
	#footer ul:last-child li a { display: block; padding: 3px 0; }
}

/** Hero Banner
-------------------------------------------------------------------------------------**/
div.hero-banner {
	background: var(--degradado-header);
	position: relative;
	height: calc(100vh - 70px);
	overflow: hidden;
}

div.hero-banner img.bg { opacity: .07; }

div.hero-banner img.adorno {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: scale(1) translateY(-50%) translateX(-50%);
	width: 50%;
	max-width: 800px;
	animation: rotate 3s infinite linear;
	mix-blend-mode: multiply;
	opacity: .7;
}

@keyframes rotate { 100% { transform: scale(1) translateY(-50%) translateX(-50%) rotate(360deg); } }

div.hero-banner video {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	mix-blend-mode:overlay;
}

div.hero-banner div.overlay {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--degradado-header);
	mix-blend-mode: screen;
	display: none;
}

div.hero-banner h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	text-align: center;
	padding: 15px;
	color: var(--color-gris);
}

@media (max-width: 1199px) { div.hero-banner h1 { font-size: 6rem; } }
@media (max-width: 991px) { div.hero-banner h1 { font-size: 4.5rem; } }

@media (max-width: 767px) {
	div.hero-banner img.bg { opacity: .5; }
	div.hero-banner h1 { font-size: 3rem; letter-spacing: 0; white-space: unset; width: 90%; }
}

/** Dos columnas texto e imagen
-------------------------------------------------------------------------------------**/
div.dos-cols-txt-img {
	position: relative;
	overflow: hidden;
}

div.dos-cols-txt-img img.adorno {
	display: block;
    position: absolute;
    top: -250px;
    right: -250px;
    width: 500px;
    opacity: .1;
	-moz-animation: rotate2 10s linear infinite;
	-webkit-animation: rotate2 10s linear infinite;
	animation: rotate2 10s linear infinite;
	transform-origin: 50% 50%;
}

div.dos-cols-txt-img.invertido img.adorno {
	right: auto;
	right: unset;
	left: -250px;
}

@keyframes rotate2 { 100% { transform: scale(1) rotate(360deg); } }

div.dos-cols-txt-img div.img {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: var(--degradado-header);
	overflow: hidden;
}

div.dos-cols-txt-img.invertido div.img {
	left: auto;
	left: unset;
	right: 0;
}

div.dos-cols-txt-img div.img img { opacity: .8; }

div.dos-cols-txt-img div.img::after {
	content: '';
	display: block;
	width: 50px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: linear-gradient(90deg, #00000000, #000000b5);
}

div.dos-cols-txt-img div.img video {
	display: block;
    width: calc(100% - 30px);
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div.dos-cols-txt-img div.txt {
	position: relative;
	color: var(--color-principal);
	padding: 90px 30px;
}

div.dos-cols-txt-img div.txt h1 {
	color: var(--color-verde);
	font-weight: 300;
}

div.dos-cols-txt-img div.txt h1.tagline {
	line-height: 125%;
	margin-top: 5px;
}

div.dos-cols-txt-img div.txt::before {
	content: '';
	display: block;
	width: 200%;
	height: 100%;
	position: absolute;
	top: 0;
	left: -15px;
	background: var(--color-blanco);
	z-index: -1;
}

@media (max-width: 1199px) {
	div.dos-cols-txt-img div.txt { padding: 75px 15px; }
	div.dos-cols-txt-img div.txt h1 { max-width: 80%; }
}

@media (max-width: 991px) {
	div.dos-cols-txt-img div.txt { padding: 60px 15px; }
	div.dos-cols-txt-img div.txt h1 { max-width: 90%; }
}

@media (max-width: 767px) {
	div.dos-cols-txt-img div.txt { padding: 45px 0; }
	div.dos-cols-txt-img div.txt h1 { max-width: 100%; }
}

@media (max-width: 575px) {
	div.dos-cols-txt-img div.img { position: relative; width: 100%; height: 35vh; }
	div.dos-cols-txt-img div.txt { padding: 48px 0; }
	div.dos-cols-txt-img div.img::after { display: none; }
}

/** Imagen simple
-------------------------------------------------------------------------------------**/
div.img-simple {
	position: relative;
	height: 100vh;
}

@media (max-width: 767px) { div.img-simple { height: 50vh; } }

/** Retailers
-------------------------------------------------------------------------------------**/
div.retailers-map {
	background: var(--color-oscuro);
	color: var(--color-blanco);
}

div.retailers-map div.form { text-align: center; }

div.retailers-map div.form input {
	display: inline-block;
	width: 80%;
	border: 1px solid var(--color-blanco);
	border-radius: 50px;
	background: transparent;
	color: var(--color-blanco);
	padding: 15px;
	margin-bottom: 30px;
}

div.retailers-map div.form input[type=submit] {
	width: calc(20% - 15px);
	margin-left: 10px;
	background: linear-gradient(90deg,var(--color-verde),var(--color-naranja));
	border-color: transparent;
	font-weight: 900;
}

div.retailers-map div.form input[type=submit]:hover { background: var(--color-naranja); }

div.retailers-map div.form p {
	margin: 0;
	text-transform: uppercase;
	font-weight: 900;
	text-align: left;
	margin-bottom: 30px;
	letter-spacing: 2px;
	text-align: center;
}

div.mapa {
	position: relative;
	height: 70vh;
}

@media (max-width: 991px) {
	div.retailers-map div.form input { width: 75%; margin-bottom: 15px; }
	div.retailers-map div.form input[type=submit] { width: calc(25% - 15px); }
}

@media (max-width: 575px) { div.retailers-map div.form input { width: 100% !important; margin-left: 0 !important; text-align: center; } }

div.retailers-list {
	background: var(--color-oscuro);
	color: var(--color-blanco);
}

div.retailers-list ul { font-size: 0; }

div.retailers-list ul li {
	display: inline-block;
	width: calc(100% / 3);
	vertical-align: top;
	padding: 30px 15px;
}

div.retailers-list ul li a {
	color: var(--color-blanco);
	text-decoration: underline;
}

div.retailers-list ul li a:hover { color: var(--color-rosa); }

@media (max-width: 500px) { div.retailers-list ul li { width: 50%; } }

/** Merch list
-------------------------------------------------------------------------------------**/
div.merch-list-items { font-size: 0; }

div.merch-list-items div.pod {
	position: relative;
	display: inline-block;
	width: calc(100% / 3);
	vertical-align: top;
}

div.merch-list-items div.pod div.img {
	position: relative;
	padding-top: 100%;
	overflow: hidden;
}

div.merch-list-items div.pod div.img img {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 80%;
	height: 80%;
	object-fit: contain;
	transition: all .3s ease;
}

div.merch-list-items div.pod div.img img:hover { transform: translateX(-50%) translateY(-50%) scale(1.1); }

div.merch-list-items div.pod div.txt {
	padding: 15px;
	text-align: center;
	font-weight: 900;
	text-transform: uppercase;
}

div.merch-list-items div.pod div.txt h5 { margin-bottom: 15px; }
div.merch-list-items div.pod a { color: var(--color-oscuro); }
div.merch-list-items div.pod a:hover { color: var(--color-purpura); }

@media (max-width: 450px) { div.merch-list-items div.pod { width: 50%; } }

/** Strains
-------------------------------------------------------------------------------------**/
div.strains-main {
	background: var(--color-oscuro);
	color: var(--color-blanco);
}

div.strains-main div.pod div.img { position: relative; }

div.strains-main div.pod div.img img {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	object-fit: contain;
}

div.strains-main div.pod div.img h1 {
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding: 150px 0 175px;
}

div.strains-main div.strains-header p { margin-bottom: 30px; }

@media (max-width: 1199px) {
	div.strains-main div.pod div.img h1 { padding: 125px 0 150px; }
	div.strains-main div.pod div.img h1 { max-width: 350px; }
}

@media (max-width: 991px) {
	div.strains-main div.pod div.img h1 { padding: 100px 0 125px; }
	div.strains-main div.pod div.img h1 { max-width: 300px; }
}

@media (max-width: 767px) { div.strains-main div.pod div.img h1 { padding: 75px 0 100px; } }

div.strains-main div.tabla div.rainbow-bar {
	background: linear-gradient(90deg, #e742b9, #7a62bf, #318ac6, #7ee081 50%, #faa75b, #f95b90);
	width: 100%;
	height: 15px;
	border-radius: 50px;
	margin-top: 10px;
	position: relative;
}

div.strains-main div.tabla div.rainbow-bar::after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	top: calc(100% + 10px);
	background: url(../imagenes/icono_triangulo.svg) no-repeat;
	background-size: contain;
	filter: invert(1);
}

div.strains-main div.tabla div.rainbow-bar-txt {
	position: relative;
	padding-top: 30px;
	margin-bottom: 15px;
}

div.strains-main div.tabla div.rainbow-bar-txt span:last-child {
	float: right;
	display: block;
}

div.strains-main div.tabla div.barras { padding-left: 120px; }

div.strains-main div.tabla div.bar {
	background: var(--color-rosa);
	width: 100%;
	height: 15px;
	border-radius: 50px;
	margin: 10px 0 15px 0;
	position: relative;
}

div.strains-main div.tabla h5.bar {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 900;
}

@media (max-width: 767px) { div.strains-main div.tabla div.barras { padding-left: 0; } }

div.terpenes {
	background: var(--color-oscuro);
	color: var(--color-blanco);
}

div.terpenes ul { font-size: 0; }

div.terpenes ul li {
	display: inline-block;
	vertical-align: top;
	width: calc(100%/3);
	padding: 15px;
}

div.terpenes ul li div.pod {
	border-radius: 50px;
	overflow: hidden;
	padding-bottom: 25px;
}

div.terpenes ul li div.pod div.txt {
	padding: 0 15px;
	color: #000;
}

div.terpenes ul li div.pod div.img {
	position: relative;
	padding-top: 100%;
}

div.terpenes ul li div.pod div.img::after {
	content: '';
	display: block;
	width: 100%;
	height: 25%;
	position: absolute;
	bottom: 0;
	left: 0;
}

div.terpenes ul li div.pod div.img h3 { 
	color: var(--color-blanco);
	font-weight: 900;
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
}

@media (max-width: 991px) { div.terpenes ul li { width: 50%; } }

@media (max-width: 575px) {
	div.terpenes ul li { width: 100%; }
	div.terpenes ul li div.pod div.img { padding-top: 40%; }
}

/* Testimonials Carrousel
---------------------------------------------------------------- */
div.testimonials-carrousel { overflow: hidden; }

div.testimonials-carrousel div.pod {
	display: grid;
	grid-template-columns: 500px 640px;
}

div.testimonials-carrousel div.pod div.img {
	position: relative;
	height: 200px;
}

div.testimonials-carrousel div.pod div.img div.img-inner {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: var(--degradado-verde);
	position: absolute;
	right: 45px;
	top: 0;
}

div.testimonials-carrousel div.pod div.img div.img-inner::before,
div.testimonials-carrousel div.pod div.img div.img-inner::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--degradado-verde);
	position: absolute;
	top: 0;
	left: -12px;
	border-radius: 50%;
	mix-blend-mode: multiply;
	opacity: .5;
}

div.testimonials-carrousel div.pod div.img div.img-inner::after { left: -24px; }

div.testimonials-carrousel div.pod div.img div.img-inner div.picture {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: var(--degradado-verde);
	position: relative;
	z-index: 10;
}

div.testimonials-carrousel div.pod .general-title {
	display: block;
	position: relative;
}

div.testimonials-carrousel div.pod .general-title i {
	display: block;
	color: var(--color-gris);
	font-size: 30px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

div.testimonials-carrousel div.pod div.item .rte { position: relative; }

div.testimonials-carrousel div.pod div.item .rte::before {
	content: '';
	display: block;
	width: 50%;
	height: 1px;
	position: absolute;
	bottom: 0;
	background: var(--color-principal);
}

div.testimonials-carrousel div.pod div.item span {
	font-weight: 400;
	color: var(--color-verde);
	display: block;
	line-height: 100%;
}

div.testimonials-carrousel div.pod div.item div.autor {
	display: grid;
	grid-template-columns: 1fr min-content;
}

div.testimonials-carrousel div.pod div.item div.autor i {
	font-size: 25px;
	color: var(--color-azul-pastel);
	cursor: pointer;
	display: block;
	bottom: 5px;
	position: relative;
}

div.testimonials-carrousel div.tns-controls,
div.testimonials-carrousel div.tns-nav { display: none; }

@media (max-width: 1199px) { div.testimonials-carrousel div.pod { grid-template-columns: 360px 600px; } }

@media (max-width: 991px) {
	div.testimonials-carrousel div.pod { grid-template-columns: 157px 580px; }
	div.testimonials-carrousel div.pod div.img div.img-inner { right: 15px; }
}

@media (max-width: 550px) {
	div.testimonials-carrousel div.pod { grid-template-columns: 1fr; }
	div.testimonials-carrousel div.pod div.img { height: 100px; }
	div.testimonials-carrousel div.pod div.img div.img-inner { width: 100px; height: 100px; right: auto; right: unset; left: 30px; }
	div.testimonials-carrousel div.pod .general-title { margin-top: 30px; }
	div.testimonials-carrousel div.pod div.txt { width: calc(100vw - 30px); }
}

/** Dos cols text
-------------------------------------------------------------------------------------**/
div.dos-cols-txt {
	background: var(--color-claro);
}

div.dos-cols-txt h1 {
	color: var(--color-verde);
	font-weight: 300;
}

@media (max-width: 575px) { div.dos-cols-txt div.col-12:last-child { margin-top: 30px; } }

/** Logo grid
-------------------------------------------------------------------------------------**/
div.logo-grid { text-align: center; }

div.logo-grid .grid {
	padding: 0;
	margin: 0;
	list-style: none;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: space-around;
}

div.logo-grid li {
	width: 300px;
	height: 100px;
	margin-top: 10px;
	text-align: center;
}

div.logo-grid img {
	object-fit: contain;
	max-width: 85%;
	height: auto;
	place-self: stretch;
}

/* Contact form
---------------------------------------------------------------- */
div.contact-form {
	width: calc(100vw - 60px);
	margin: 0 auto;
	background-color: var(--color-claro);
	position: relative;
	overflow: hidden;
	margin: 30px auto;
}

div.contact-form::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: var(--degradado-verde);
}

div.contact-form.invertido::before {
	left: auto;
	left: unset;
	right: 0;
}

div.contact-form div.pod {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 'txt form';
	grid-gap: 60px;
	padding: 0 15px;
}

div.contact-form.invertido div.pod { grid-template-areas: 'form txt'; }

div.contact-form div.pod div.opciones {
	color: var(--color-blanco);
	grid-area: txt;
}

div.contact-form div.pod div.opciones a {
	color: var(--color-blanco);
	text-decoration: underline;
}

div.contact-form div.pod div.opciones a:hover { color: var(--color-principal); }

div.contact-form div.pod div.opciones .general-title { margin-bottom: 5px; }

div.contact-form div.pod div.opciones div.opciones-inner {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

div.contact-form div.pod div.opciones ul li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 15px;
	cursor: pointer;
}

div.contact-form div.pod div.opciones ul li:last-child { margin-bottom: 0; }

div.contact-form div.pod div.opciones ul li::before {
	content: '';
	display: block;
	width: 15px;
	height: 15px;
	border: 2px solid var(--color-blanco);
	border-radius: 2px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

div.contact-form div.pod div.opciones ul li.activo::before { background: var(--color-blanco); }
div.contact-form div.pod div.form { grid-area: form; }
div.contact-form div.pod div.form form { position: relative;; }
div.contact-form div.pod div.form form label { display: block; }

div.contact-form div.pod div.form form input[type=text],
div.contact-form div.pod div.form form input[type=email],
div.contact-form div.pod div.form form input[type=tel],
div.contact-form div.pod div.form form textarea {
	display: block;
	width: 100%;
	background: var(--color-blanco);
	border: 1px solid var(--color-principal);
	padding: 5px 15px;
	font-weight: 300;
	border-radius: 15px;
	color: var(--color-gris-oscuro);
	margin-bottom: 15px;
}

div.contact-form div.pod div.form form input.action { display: none; }

div.contact-form div.pod div.form form div.botones {
	display: grid;
	grid-template-columns: 1fr min-content;
	grid-gap: 30px;
}

div.contact-form div.pod div.form form div.botones div:first-child label {
	position: relative;
	padding-left: 30px;
	font-size: 13px;
	line-height: 130%;
}

div.contact-form div.pod div.form form div.botones div:first-child label input {
	display: block;
	width: 15px;
	height: 15px;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

div.contact-form div.pod div.form form div.botones .boton {
	padding: 15px 30px;
	cursor: pointer;
	background: var(--degradado-verde);
	border: none;
}

div.contact-form div.pod div.form form div.botones .boton:hover {
	background: var(--color-principal);
	color: var(--color-blanco) !important;
}

div.contact-form img.adorno {
	display: block;
    position: absolute;
    bottom: -250px;
    right: -250px;
    width: 500px;
    opacity: .1;
	-moz-animation: rotate2 10s linear infinite;
	-webkit-animation: rotate2 10s linear infinite;
	animation: rotate2 10s linear infinite;
	transform-origin: 50% 50%;
}

div.contact-form.invertido img.adorno {
	right: auto;
	right: unset;
	left: -250px;
}

@media (max-width: 1199px) {
	div.contact-form { width: 100vw; }
	div.contact-form div.pod { padding: 0; }
}

@media (max-width: 991px) {
	div.contact-form div.pod { grid-gap: 30px; }
	div.contact-form div.pod div.form form div.botones { grid-template-columns: 1fr; grid-gap: 15px; }
	div.contact-form div.pod div.form form div.botones div.btn { text-align: right; }
}

@media (max-width: 550px) {
	div.contact-form { margin: 0; }
	div.contact-form div.pod { grid-template-columns: 1fr; grid-template-areas: 'txt' 'form'; }
	div.contact-form.invertido div.pod { grid-template-areas: 'txt' 'form'; }
	div.contact-form::before { display: none; }
	div.contact-form div.pod div.opciones { background: var(--color-principal); padding: 30px 0; position: relative; }
	div.contact-form div.pod div.opciones::before { content: ''; display: block; height: 100%; width: 100vw; background: var(--degradado-verde); position: absolute; top: 0; left: -15px; }
	div.contact-form .container { padding-top: 0 !important; }
}

/* Events
---------------------------------------------------------------- */
div.events-grid div.pod {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 15px;
}

div.events-grid div.pod div.item div.img {
	padding-top: 56.25%;
	position: relative;
	border-radius: 25px;
	overflow: hidden;
	background: var(--color-oscuro);
}

div.events-grid div.pod div.item div.img img {
	opacity: .4;
	transition: all .3s ease;
}

div.events-grid div.pod div.item div.img div.txt {
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	padding: 15px;
	text-align: center;
	color: var(--color-blanco);
	text-transform: uppercase;
}

div.events-grid div.pod div.item a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

div.events-grid div.pod div.item:hover div.img img {
	transform: scale(1.1);
	opacity: .5;
}

div.events-single-grid div.pod {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 15px;
}

div.events-single-grid div.pod div.item { position: relative; }

div.events-single-grid div.pod div.item div.txt {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

div.events-single-grid div.pod div.item div.img {
	padding-top: 56.25%;
	position: relative;
	border-radius: 25px;
	overflow: hidden;
	background: var(--color-oscuro);
}

div.events-single-grid div.pod div.item div.img img { transition: all .3s ease; }
div.events-single-grid div.pod div.item:first-child { grid-column: 1/3; }

div.events-single-grid div.pod div.item a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

div.events-single-grid div.pod div.item:hover div.img img { transform: scale(1.1); }
div.events-single-grid div.pagination { text-align: center; } 

@media (max-width: 1199px) { div.events-grid div.pod div.item div.img { padding-top: 75%; } }

@media (max-width: 991px) {
	div.events-grid div.pod { grid-template-columns: 1fr 1fr; }
	div.events-grid div.pod div.item div.img { padding-top: 56.25%; }
	div.events-single-grid div.pod div.item div.txt { font-size: 1.2rem; }
}

@media (max-width: 767px) {
	div.events-single-grid div.container { padding-top: 30px; }
	div.events-single-grid div.pod { padding-top: 0; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 550px) {
	div.events-grid div.pod { grid-template-columns: 1fr; }
	div.events-grid div.pod div.item div.img { padding-top: 56.25%; }
	div.events-single-grid div.pod div.item div.img { padding-top: 100%; }
	div.events-single-grid div.pod div.item div.txt { font-size: 1rem; }
}