/* FONTS
Listas fuentes para uso
--- */

/* @group SHARED STRUCTURES AND STYLES
------------------------------------ */
body { overflow-x: hidden; }
#wrapper { width: 100%; }
a, button { cursor: pointer;
    -webkit-transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, -webkit-transform 0.3s linear;
    -moz-transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, -moz-transform 0.3s linear;
    -ms-transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, transform 0.3s linear;
    -o-transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, transform 0.3s linear;
    transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, transform 0.3s linear;
}
.video-box,
.img-box { overflow: hidden; position: relative; }
.img-box > iframe { object-fit: cover; object-position: center center; height: 100%; width: 100%!important; }
.img-box > img { object-fit: cover; object-position: center center; height: 100%; width: 100%!important; }
.img-box video { object-fit: cover; object-position: center center; height: 100%; width: 100%!important; }
@supports(object-fit: cover) {
  .img-box > img { height: 100%!important; }
}
.outerAbsolute { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 3; }
.outerAbsolute .row { height: 100%; }
.outerAbsolute a,
.outerAbsolute .box { pointer-events: all; }

/* General Text
----------------------*/
h1 { font: 700 3em / 1.2em var(--nobel-font); letter-spacing: .15em;}
h2 { font: 700 2.5em / 1.2em var(--nobel-font); letter-spacing: .15em; }
h3 { font: 700 2em / 1.085em var(--nobel-font); letter-spacing: .15em; }
p, 
li { font: 420 1.8em / 1.6em var(--brandon-font); }
@media only screen
and (min-width : 961px) {
  h1 { font-size: 6.4em; }
  h2 { font-size: 4.5em; }
  h3 { font-size: 3.3em; }
  p, 
  li { font: 400 2em / 1.5em var(--nobel-font); letter-spacing: .07em; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* Buttons 
----------------------*/
.bttn { display: inline-flex; justify-content: center; align-items: center; padding: 1.5rem 2rem; border: .1rem solid var(--light-green); background: none, var(--white); font: 700 1.5em / 1.2em var(--nobel-font); letter-spacing: .17em; text-transform: uppercase; }
.textlink { font: 700 1.6em / 1.2em var(--nobel-font); letter-spacing: .17em; text-transform: uppercase; color: var(--green-2); }
.textlink::after { content: ''; width: 100%; height: .1rem; background-color: var(--gold); display: block; margin: .5rem 0 0; }
@media only screen
and (min-width : 961px) {
  .bttn:hover { background-color: var(--light-green); color: var(--white); }
  .textlink:hover { color: var(--gold); }
}
/* Splide pagination
----------------------*/
.splide__pagination__page { width: 1.9rem; height: 1.9rem; border: .1rem solid var(--gold); background-color: transparent; opacity: 1; margin: 0 .5rem; transition: all .3s ease; }
.splide__pagination__page.is-active { border-color: var(--green-2); background-color: var(--green-2); }
/* Animations
----------------------*/
@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes grow {
  0% { heigth: 0; }
  100% { height: 100%; }
}
@keyframes fadeReverse {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fadeDown {
  0% { translate: 0 -2rem 0; opacity: 0; }
  100% { translate: 0 0 0; opacity: 1; }
}
@keyframes fadeUp {
  0% { translate: 0 5rem 0; opacity: 0; }
  100% { translate: 0 0 0; opacity: 1; }
}
@keyframes fadeScaleFull {
  0% { scale: 0; opacity: 0; }
  100% { scale: 1; opacity: 1; }
}
@keyframes fadeScale {
  0% { scale: .5; opacity: 0; }
  100% { scale: 1; opacity: 1; }
}
@keyframes fadeScaleReverse {
  0% { scale: 1.5; opacity: 0; }
  100% { scale: 1; opacity: 1; }
}
@keyframes fadeScaleDown {
  0% { scale: 1.2; opacity: 0; }
  100% { scale: 1; opacity: 1; }
}
@keyframes ScaleDown {
  0% { scale: 1.2; }
  100% { scale: 1; }
}
@keyframes fadeLeft {
  0% { translate: -5rem 0 0; opacity: 0; }
  100% { translate: 0 0 0; opacity: 1; }
}
@keyframes fadeRight {
  0% { translate: 5rem 0 0; opacity: 0; }
  100% { translate: 0 0 0; opacity: 1; }
}
@keyframes toLeft {
  0% { translate: 80% 0 0; rotate: -2.5deg; }
  100% { translate: 0 0 0; rotate: 0deg; }
}
@keyframes toRight {
  0% { translate: -80% 0 0; rotate: 2.5deg; }
  100% { translate: 0 0 0; rotate: 0deg; }
}
@keyframes menuDown {
 0% { translate: 0 -7.5rem 0; }
 100% { translate: 0 0 0; }
}
@keyframes textUp {
 0% { translate: 0 2rem 0; opacity: 0; }
 100% { translate: 0 0 0; opacity: 1; }
}
@keyframes navDown {
 0% { translate: 0 -2rem 0; }
 100% { translate: 0 0 0; }
}
@keyframes fullDown {
 0% { translate: 0 -100% 0; }
 100% { translate: 0 0 0; }
}
@keyframes fullUp {
 0% { translate: 0 100% 0; }
 100% { translate: 0 0 0; }
}
@keyframes fullUpOp {
 0% { translate: 0 100% 0; opacity: 0; }
 100% { translate: 0 0 0; opacity: 1; }
}
@keyframes fullLeft {
 0% {  translate: -100% 0 0; opacity: 0; }
 100% { translate: 0 0 0; opacity: 1; }
}
@keyframes fullRight {
 0% {  translate: 100% 0 0; opacity: 0; }
 100% { translate: 0 0 0; opacity: 1; }
}
@-webkit-keyframes hvr-icon-hang {
  0% { translate: 0 .6rem 0; }
  50% { translate: 0 .2rem 0; }
  100% { translate: 0 .6rem 0; }
}
@-webkit-keyframes hvr-icon-hang-sink {
  100% { translate: 0 .6rem 0; }
}
@keyframes toTopFromBottom {
	49% { translate: 0 -100% 0; }
	50% { opacity: 0; translate: 0 100% 0; }
	51% { opacity: 1; }
}
@keyframes toBottomFromTop {
	49% { translate: 0 100% 0; }
	50% { opacity: 0; translate: 0 -100% 0; }
	51% { opacity: 1; }
}
@keyframes toRightFromLeft {
	49% { translate: 100% 0 0; }
	50% { opacity: 0; translate: -100% 0 0; }
	51% { opacity: 1; }
}
@keyframes toLeftFromRight {
	49% { translate: -100% 0 0; }
	50% { opacity: 0; translate: 100% 0 0; }
	51% { opacity: 1; }
}
@keyframes openDraw {
  0% { max-height: 0; }
  100% { max-height: 999vh; }
}
@keyframes closeDraw {
  0% { max-height: 999vh; }
  100% { max-height: 0; }
}
@keyframes fadeRotate {
  0% { opacity: 0; }
  100% { opacity: 1; rotate: 720deg; }
}
@keyframes circleSVGnoScale {
  0% { rotage: 360deg; }
  100% { rotage: 0deg; }
}
@keyframes filltext {
  0% { background-size: 0% 100%; }
  100% { background-size: 100% 100%; }
}
@keyframes emptytext {
  0% { background-size: 100% 100%; }
  100% { background-size: 0% 100%; }
}
@keyframes bannerDown {
  0% { translate: 0 -8rem 0; }
  100% { translate: 0 0 0; }
}
@keyframes upndown {
    0% { translate: 0 .5rem 0; }
    50% { translate: 0 0 0; }
    100% { translate: 0 .5rem 0; }
}
@keyframes circleLife {
  0% { stroke-dashoffset: 523; }
  100% { stroke-dashoffset: 0; }
}
@keyframes dash {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes leaf-fade-up-left {
    0% {  
        rotate: 40deg;
        translate: -12vw 5vw;
        opacity: 0;
    }
    100% { 
        rotate: 0;
        translate: 0 0 0; 
        opacity: 1; 
    }
}
@keyframes leaf-fade-up-right {
    0% {  
        rotate: -40deg;
        translate: 12vw 5vw;
        opacity: 0;
    }
    100% { 
        rotate: 0;
        translate: 0 0 0; 
        opacity: 1; 
    }
}
@keyframes leaf-fade-down-left {
    0% {  
        rotate: 40deg;
        translate: -5vw -12vw;
        opacity: 0;
    }
    100% { 
        rotate: 0;
        translate: 0 0 0; 
        opacity: 1; 
    }
}

@keyframes leaf-fade-down-right {
    0% {  
        rotate: -40deg;
        translate: -5vw -12vw;
        opacity: 0;
    }
    100% { 
        rotate: 0;
        translate: 0 0 0; 
        opacity: 1; 
    }
}

.fadeRight,
.fadeLeft,
.fadeDown,
.fadeUp,
.fadeScale,
.fade { position: absolute; left: -999vw; opacity: 0; top: -999vw; }
/* Animations - Active
----------------------*/
.fade.active { animation: fade 1.2s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; left: auto; top: auto; position: relative; }
.fade.slick-nav.active,
.fade.slick-carousel.active { position: relative!important; }
.fadeUp.active { animation: fadeUp 1.2s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; left: auto; top: auto; position: relative; }
.fadeDown.active { animation: fadeDown 1.2s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; left: auto; top: auto; position: relative; }
.fadeScale.active { animation: fadeScale 1.2s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; left: auto; top: auto; position: relative; }
.fadeLeft.active { animation: fadeLeft 1.2s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; left: auto; top: auto; position: relative; }
.fadeRight.active { animation: fadeRight 1.2s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; left: auto; top: auto; position: relative; }
/* @end */

/* @group RESET GENERAL DE TAMAÑO
------------------------------------ */
.no-mobile {}

@media only screen
and (min-width : 961px) {
  .mobile { display: none!important; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
  .no-mobile { display: none!important; }
  /* html { font-size: 7px; } */
}
@media only screen
and (min-width : 0)
and (max-width : 600px) {
  /* html { font-size: 5px; } */
}
/* @end */

/* --- */
*::selection {
    color: var(--white);
    background-color: var(--gold);

}


.popup-video .video-youtube-container,
.popup-video video {
  display: none;
}
.active-video-youtube .video-youtube-container {
  display: block;
}
.active-video-vimeo video {
  display: block;
}