@media (min-width: 576px) {  }
@media (min-width: 768px) {  }
@media (min-width: 992px) {  }
@media (min-width: 1200px) {  }
@media (min-width: 1400px) {  }

@font-face {
  font-family: Recoleta;
  src: url('../fonts/recoleta-regular.otf');
  font-weight: 400;
}
@font-face {
  font-family: Recoleta;
  src: url('../fonts/recoleta-bold.otf');
  font-weight: 700;
}
@font-face {
  font-family: Recoleta;
  src: url('../fonts/recoleta-black.otf');
  font-weight: 900;
}

/*
*
* Variables
*
*/

:root{
    
    /* Colors */
    --color-bg:#000000;
    --color-text:#ffffff;
    --color-mute:rgba(255,255,255,0.50);
    --color-accent:#C0E98D;
    /* /Colors */

    /* Typography */
    /*--font-family-primary:"Times New Roman", serif;*/
    /*--font-family-primary:"Poppins", sans-serif;*/
    --font-family-primary:"Recoleta", sans-serif;
    --font-family-secondary:"Poppins", sans-serif;
    /*--font-family-secondary:"Recoleta", sans-serif;*/

    --font-size-default:16px;
    --font-height-default:16px;
    --font-weight-default:400;

    --font-size-h1:clamp(48px,9vw,128px);
    --font-height-h1:clamp(48px,9vw,108px);
    --font-weight-h1:900;

    --font-size-h2:clamp(24px,3vw,42px);
    --font-height-h2:clamp(24px,3vw,42px);
    --font-weight-h2:600;

    --font-size-h3:clamp(18px,2vw,21px);
    --font-height-h3:clamp(18px,2vw,21px);
    --font-weight-h3:500;

   /* --font-size-p:21px;
    --font-height-p:26px;
    --font-weight-p:300;*/

    --font-size-p:13px;
    --font-height-p:13px;
    --font-weight-p:400;

    --font-size-big:clamp(16px,2vw,21px);
    --font-height-big:clamp(16px,2vw,21px);
    --font-weight-big:300;

    --font-weight-thin:200;
    /* Typography */

    /* Offsets */
    --layout-offset-y:1.5vw;
    --layout-offset-x:3vw;

    --nav-offset-y:1.6vw;
    --nav-offset-x:3.5vw;
    --nav-height:50px;

    --section-offset-y:8vw;
    --section-offset-x:1vw;
    --header-offset:180px;    

    /* /Offset */

    /* Line Separator */
    --line-separator-height:0.005em;
    --line-separator-width:3vw;
    --line-separator-background:rgba(255,255,255,0.3);   
    --line-separator-margin:1vw;   
    /* /Line Separator */

    --sb-track-color: #000000;
    --sb-thumb-color: #323333;
    --sb-size: 4px;

}
@media (min-width: 768px) {
  :root{
    --header-offset:60px;
  }
}
/*
*
* Globals
*
*/
html, body{
  height: 100%;
}
body{
  background-color:var(--color-bg);
  font-family:var(--font-family-secondary);  
  font-size:var(--font-size-p);
  font-weight:var(--font-weight-p);
  line-height:var(--font-height-p);
  color:var(--color-text);
}
body.no-scroll{
  overflow-y:hidden;
}
body::-webkit-scrollbar {
  width: var(--sb-size);
}

body::-webkit-scrollbar-track{
  background: var(--sb-track-color);
  border-radius: 3px;
}

body::-webkit-scrollbar-thumb{
  background: var(--sb-thumb-color);
  border-radius: 3px;
}

@supports not selector(::-webkit-scrollbar){
  body {
    scrollbar-color: var(--sb-thumb-color)
    var(--sb-track-color);
  }
}

main{
  /*min-height: 100%;*/
  position: relative;
}
.offset-x{
  padding-left:var(--layout-offset-x);
  padding-right:var(--layout-offset-x);
}
.offset-y{
  padding-top:var(--layout-offset-y);
  padding-bottom:var(--layout-offset-y);
}

h1{
  font-family:var(--font-family-primary);
  font-size:var(--font-size-h1);
  font-weight:var(--font-weight-h1);
  line-height:var(--font-height-h1);
}
h2{
  font-family:var(--font-family-primary);
  font-size:var(--font-size-h2);
  font-weight:var(--font-weight-h2);
  line-height:var(--font-height-h2);
}
h3{
  font-family:var(--font-family-primary);
  font-size:var(--font-size-h3);
  font-weight:var(--font-weight-h3);
  line-height:var(--font-height-h3);
}
a.underline, a.underline-hover{  
  position:relative;
  display:inline-block;
}
a.underline:after, a.underline-hover:after{  
  content:'';
  width:0;
  height:0.05vw;
  background-color:rgba(255,255,255);
  position:absolute;
  bottom:0;
  display:block;
  margin:auto;
  transition: all 0.5s ease;
}
a.underline:after, a.underline-hover.active:after, a.underline-hover:hover:after{  
  width:100%;
}
.text-big{
  font-size:var(--font-size-big);
  font-weight:var(--font-weight-big);
  line-height:var(--font-height-big);
}
.text-mute{
  opacity:0.9;
}
/*
*
* Loader
*
*/
#site-loader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:var(--color-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:15;
}
#site-loader:not(.active){
  display:none;
}
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}


/*
*
* Header
*
*/
header.main.sticky{
  position:absolute;
  top:0;
  left:0;
  right:0;
}
header.main{
  position:relative;
  z-index:3;
}
header.mobile-nav-open{
  z-index:16;
}
header.main .logo img{
  width:160px;
}
header.main nav:not(.always-visible){
  display:none;
}
header.main nav a:not(:last-child){
  margin-right:20px;
}
header.main #nav-toggle{
  display:inline-block;
}

header.main #nav-toggle span{
  display:block;
  width:30px;
  height:2px;
  background-color:var(--color-text);
}
header.main #nav-toggle span:first-child{
  margin-bottom:10px;
}
header.main #nav-toggle.active span:first-child{
  margin-bottom:0;
}

@media (min-width: 768px) {
  header.main nav:not(.always-visible){
    display:inline-block;
  }
  header.main #nav-toggle{
    display:none;
  }
}


/* Mobile Nav */
.mobile-nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:var(--color-bg);
  z-index:14;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.mobile-nav:not(.open){
  display:none;
}
.mobile-nav a{
  font-size:var(--font-size-h1);
  font-weight:var(--font-weight-h1);
  line-height:var(--font-height-h1);
}

/*
*
* CTA
*
*/
.cta{
  padding-top:20vh;
  padding-bottom:20vh;
}
.cta h2{
  font-size:var(--font-size-h1);
  font-weight:var(--font-weight-h1);
  line-height:var(--font-height-h1);
  margin-bottom:30px;
}
.cta ul li{
  display:inline;
}
.cta ul li:not(:last-child){
  margin-right:50px;
}
.cta ul li a{
  font-size:var(--font-size-big);
  font-weight:300;
  line-height:var(--font-height-big);
}
/*
*
* Footer
*
*/
footer{  
  padding-top:10vh !important;
}
.footer-contact, footer.sticky{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}
@media (max-width: 768px) {
  footer > div{
    display:inline;
  }
}
/*
*
* Work
*
*/
.work header{
  min-height:40vh;
  position:relative;
}

.work .portfolio-filter a:not(last-child){  
  margin-bottom:5px;
}

.work .projects-grid{  
  display:grid;
  grid-template-columns:100%;
  grid-gap:calc(var(--layout-offset-x)*1.5);
  padding:var(--section-offset-y) calc(var(--layout-offset-x)*3) 0;

}
.work .projects-grid .project{  
  aspect-ratio:16/9;
  position:relative;
  width:100%;
  background-color:#222222;
}
.work .projects-grid .project:hover img{  
  transform: scale(1.02);
}

.work .projects-grid .project img{  
  aspect-ratio:16/9;
  position:relative;
  transition:all 0.5s ease;
}

.work .projects-grid .project .title{  
  position:absolute;
  top:20%;
  transition:opacity 0.5s ease-in-out;
  opacity:0;
}
.work .projects-grid .project:hover .title{  
  opacity:1;
}
.work .projects-grid .project:nth-child(2n+1) .title{    
  left:-10%;
}
.work .projects-grid .project:nth-child(2n+2) .title{    
  right:-10%;
  text-align: right;
}
.work .projects-grid .project.active .title{  
  opacity:1;
}
@media (min-width: 992px) {
  .work .projects-grid{  
    grid-template-columns:repeat(2,1fr);
  
  }
}
.work #projects-skeleton:not(.active){  
  display:none;
}


.work .projects-grid .project.project-skeleton{  
  aspect-ratio:16/9;
}
/*
*
* Single Project
*
*/
.project header{
  min-height:78vh;
  position:relative;
}
.project header:after{  
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  z-index:2;
}
.project header img{  
  position:absolute;
  left:0;
  top:0;
  z-index:1;
}
.project header .info{  
  position:relative;
  z-index:3;
}
.project header .info #trailer-link{  
  font-size:16px;
  position:relative;
  z-index:4;
}
.project header .info #trailer-link i{  
  font-size:13px;
}
.project header .info h1, .home .slideshow .info h1{  
  padding:10px 0 0;
  text-align:center;
}
.project header .info .subtitle{ 
  padding-bottom:70px; 
  text-align:center;
}
.project header .info .credits, .home .slideshow .info .credits{
  
  display:flex;
  justify-content:space-between;
}


.project header .info .credits li p:first-child, .home .slideshow .info .credits li p:first-child{
  color:var(--color-mute);
  font-size:13px;
  font-weight:400;
  margin-bottom:5px;
}
.project section.stills{
  padding:var(--section-offset-y) 0 0;
  width:80%;
  margin:auto;
}
.project section.stills .still{
  margin-bottom:var(--section-offset-y);
}
.project section.stills .still:last-child{
  margin-bottom:0;
}
.project section.stills .still img{
  margin:auto;
}
@media (max-width: 768px) {
  .project header .info .credits, .home .slideshow .info .credits{
  
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
  }
  .project header .info .credits li, .home .slideshow .info .credits li{
    width:35%;
    margin-bottom:30px;
  }
}

.trailer-modal{
  position:fixed;
  top:0;
  left:0;
  display:none;
  background-color:rgba(0,0,0,0.9);
  z-index:3;
}
.trailer-modal.active{
  display:flex;
  align-items:center;
  justify-content:center;
}

.trailer-modal .trailer-wrapper{
  width:60%;  
}
.trailer-modal .trailer-wrapper video{
  width:100%;
  aspect-ratio:16/9;
}
.trailer-modal .trailer-wrapper #trailer-close{
  margin-bottom:20px;
  float:right;
}

/*
*
* Contact
*
*/
.contact section{
  padding:0 var(--layout-offset-x);
}
.contact section .title{
  margin-bottom:30px;
}
.contact section .title h1{
  line-height:clamp(48px,9vw,136px);
}
.contact section .contacts ul li{
  margin-bottom:20px;
}
.contact section .contacts a{
  font-family:var(--font-family-primary);
  font-size:var(--font-size-h2);
  font-weight:var(--font-weight-h2);
  line-height:var(--font-height-h2);
  position:relative;
  display:inline-block;
}
.contact section .contacts a:after{
  content:'';
  width:100%;
  height:1px;
  background-color:#ffffff;
  position:absolute;
  bottom:0;
  left:0;
  transition:all 0.5s ease;
}
.contact section .contacts a:hover:after{
  width:50%;
}
@media (min-width: 768px) {
  .contact section .title{
    padding-right:calc(var(--layout-offset-x)*4);
    margin-bottom:0;
  }
  .contact section{
    padding:0 0;
  }
}
/*
*
* Home
*
*/
.home .swiper {
  width: 100%;
  height: 75vh;
}
.home .swiper-slide{
  background-color:#222222;
  position:relative; 
}
.home .swiper-slide h1{
  text-wrap:wrap;
  position:relative;
  z-index:2;
  max-width:70vw;
  text-align:center;
   font-size:clamp(48px,8vw,96px);
   line-height:clamp(48px,8.5vw,102px);
}
.home .swiper-slide:not(.active) h1{
  opacity:0;
}
.home .swiper-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  top:0;
  left:0; 
}

/*
*
* About
*
*/
.about{
  padding-top:var(--main-offset);
  padding-bottom:15vh;
}
img.grayscale{
  filter:grayscale(1);
 }
 .about-wrapper{
   display:flex;
 }
 .sections-wrapper{
   width:60%;
 }
 @media (max-width: 768px) {
  .sections-wrapper{
   width:100%;
 }
}
 .about section p{
   padding-right:5vw;   
   font-size:clamp(18px,2vw,42px);
   line-height:clamp(20px,2.2vw,48px);
    font-weight:400;
 }
   @media (max-width: 768px) {
 .sections-wrapper{
   width:100%;
 }
  .about section .media-small img{
 max-height:80vh;
 margin:30px 0;

 }
}
  @media (max-width: 992px) {
     .about section h1{
      line-height:clamp(48px,8vw,100px)
 }
  
  .about section p{   
    font-weight:300;
    margin-bottom:15px;
 }

}
 .about section.intro p, .about section ul{
   padding-right:15vw;
 }
 .about section.intro{
  min-height:70vh;
  padding-top:10vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
 }
 .about section.bio, .about section.team, .about section.awards{
  margin-bottom:50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
 }
   @media (max-width: 992px) {
    .about section.bio, .about section.team, .about section.awards{
  margin-bottom:15px;
 }
   }
 .about section.intro p.tags{
  font-size:28px;
  line-height:28px;
  font-weight:300;
  margin-top:10px;
 }
 .about section.intro p:not(.tags), .about section.intro ul{
  margin-top:calc(var(--layout-offset-y)*1.5);
 }
 .about section.intro ul li{
  display:inline;
  margin-right:var(--layout-offset-x);
 }
 .about section.intro ul li a{
  display:inline-block;
  position:relative;
 }
 .about section.intro ul li a:after{
  content:'';
  width:100%;
  height:0.05vw;
  display:inline-block;
  background-color:#ffffff;
  position:absolute;
  bottom:-2px;
  left:0;

 }
 
 .about section.awards p:last-child{
  margin-top:calc(var(--layout-offset-y)*0.5);
 }
 .about .media-wrapper{
  height:100vh;
   width:40%;
 }
 .about .media-wrapper .media{
   width:100%;
   height:100%;
   display:flex;
   align-items:center;
   justify-content:end;
 }
 .about .media-wrapper .media img{
   width:85%;
   height:90%;
   object-fit:cover;
 }
 @media (max-width: 768px) {
  .about .about-wrapper{
    display: flex;
    flex-direction: column;
  }
  .about .media-wrapper{
    height:auto;
    margin-top:20px;
     width:60%;
   }
  .about .media-wrapper .media img{
    width:100%;
    height:auto;
  }
  .about section.intro {
    min-height: auto;
    padding-top: 10vh;
}
.about .about-wrapper .sections-wrapper{
  width:100%;
}
.about .about-wrapper section{
  margin-bottom:20px;
}

  }
 /*
 *
 * Splash
 *
 */
 main.splash img{
   width:300px;
   
 }
@media (min-width: 768px) {
  main.splash img{
    width:400px;
  }
}
@media (min-width: 1200px) {
  main.splash img{
    
  }
}

/*
*
* Quiz
*
*/
.quiz-splash{
  margin-top:10vh;
  min-height:70vh;
  display:flex;
  align-items:Center;
 }
.quiz-splash_question h2 span{
  display:block;
}

.quiz-splash_question img{
  width:clamp(50px,25vw,260px);
  height:clamp(50px,25vw,260px);
  transition:all 0.5s ease;
}
.quiz-splash_question:hover img{
  transform: scale(1.02);
}
.quiz-splash_question h2{
  margin-left:20px;
  --font-size-h2:clamp(24px,6vw,64px);
  --font-height-h2:clamp(24px,6vw,64px);
  --font-weight-h2:500;
}
@media (max-width: 576px) {
  .quiz-splash_question{
    margin-bottom:50px;
  } 
}

@media (min-width: 576px) {
  .quiz-splash_question{
    width:50%;
  } 
  .quiz-splash_question:nth-child(2){
    margin-top:-100px;
  }
  .quiz-splash_question:nth-child(3){
    margin-left:30%;
  }
}
@media (min-width: 992px){
  .quiz-splash{
    margin-top:0;
   }
}
/* Question Deck */
.quiz-question-deck{
  margin-top:50px;
}
.quiz-question-deck header, .quiz-question-deck #question{
  width:100%;
}
.quiz-question-deck header{
  margin-bottom:50px;
}
.quiz-question-deck header h2{
  font-size:clamp(36px,6vw,64px);
  line-height:clamp(36px,6vw,64px);
  font-weight:500;
  padding:8px 0;
}
.quiz-question-deck header .score{
  border:1px solid rgba(255,255,255,0.2);
  padding:12px 18px;
  border-radius:10px;
  transition:all 0.5s ease;
  display:inline-block;
}
.quiz-question-deck header .score span{
  font-size:14px;
}
@media (min-width: 768px) {
  .quiz-question-deck{
    margin-top:0;
  }
 
}
/* Other Questions */
.quiz-question-deck .question img{
  max-height:80vh;
}
.quiz-question-deck .question .choices .choice{
  border:1px solid rgba(255,255,255,0.2);
  padding:7px 12px;
  border-radius:10px;
  transition:opacity 0.5s ease;
  display:inline-block;
}
.quiz-question-deck .question .choices .choice:hover{
  border:1px solid rgba(255,255,255,0.4);
}
.quiz-question-deck .question .choices .choice{
  margin-right:20px;
  margin-top:10px;
}
.quiz-question-deck .image-option_inner img{
  cursor:pointer;
}
.quiz-question-deck .question .choices .choice.success, .quiz-question-deck .images-question  .choice.success .image-option_inner img{
  border:1px solid rgba(28, 228, 48, 1);
}
.quiz-question-deck .images-question .image-option_inner h3{
  padding-top:10px;
}
.quiz-question-deck .question .choices .choice.error, .quiz-question-deck .images-question .choice.error .image-option_inner img{
  border:1px solid rgb(253, 49, 49);
}
.quiz-question-deck .question .choices .choice span{
  font-size:12px;
  padding-left:5px;
}
.quiz-question-deck .question .choices .choice.success span, .quiz-question-deck .images-question .choice.success span{
  color:rgb(28, 228, 48);
}
.quiz-question-deck .question .choices .choice.error span, .quiz-question-deck .images-question .choice.error span{
  color:rgb(253, 49, 49);
}

.next-question-link{
  display:none;
 }
 .next-question-link.active{
  display:inline-block;
 }
@media (max-width: 768px) {
  
  .next-question-link{
   padding-top:20px;
   text-align:center;
  }
}
@media (min-width: 768px) {
  
  .quiz-question-deck header{
    margin-bottom:0;
  }
  .quiz-question-deck header{
    width:35%;
    /*padding-right:5%;*/
  }
  .quiz-question-deck #question{
    width:65%;
  } 
  .next-question-link{
    position:absolute;
    right:var(--layout-offset-x);
    bottom:0;
  }
}
#answer-more-info{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
/* Images Questions */
.quiz-question-deck .images-question{
  min-height:100%;
  position:relative;
  display:grid;
  grid-template-columns: 100%;
  grid-gap:10vw;
} 


.quiz-question-deck .images-question .image-option img{
  max-width:250px;
}
.quiz-question-deck .images-question .image-option p{
  margin-top:10px;
}

@media (min-width: 768px) {
  .quiz-question-deck .images-question{
    grid-template-columns: repeat(2, 1fr);
    grid-gap:4vw;
  } 
  
  .quiz-question-deck .images-question .image-option:nth-child(1) {
    grid-column: 1 / span 2;
  }
  .quiz-question-deck .images-question .image-option:nth-child(2) {
    margin-top:50px;
  }
  .quiz-question-deck .images-question .image-option:nth-child(3) {
    margin-top:-50px;
  }
  .quiz-question-deck .images-question .image-option_inner {
    width:25vw;
  }
}

/* Game Over Deck */

.game-over-deck{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  min-height:65vh;
  width:100%;
}
.game-over-deck h1{
  margin:15px 0 10px;
}
.game-over-buttons{
  padding-top:20px;
}
.game-over-buttons a:first-child{
  margin-right:15px;
}