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

@font-face {
  font-family: Satoshi;
  src: url(../fonts/satoshi-light.otf);
  font-weight: 300;
}
@font-face {
  font-family: Satoshi;
  src: url(../fonts/satoshi-regular.otf);
  font-weight: 400;
}
@font-face {
  font-family: Aboreto;
  src: url(../fonts/aboreto-regular.ttf);
  font-weight: 400;
}

/*
*
* Variables
*
*/

:root{
    
    /* Colors */
    --color-bg:#000000;
    --color-text:#FAE1E1;
    --color-accent:#F5C0C0;
    /* /Colors */

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

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

    --font-size-h1:clamp(48px,10vw,160px);
    --font-height-h1:clamp(48px,10vw,160px);
    --font-weight-h1:400;

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

    --font-size-h3:clamp(24px,3vw,32px);
    --font-height-h3:clamp(24px,3vw,32px);
    --font-weight-h3:400;

    --font-size-p:clamp(24px,3vw,32px);
    --font-height-p:clamp(28px,3.5vw,36px);
    --font-weight-p:400;

    --font-size-small:clamp(14px,2vw,17px);
    --font-height-small:clamp(17px,3vw,21px);
    --font-weight-small:300;

  
    /* Typography */

    /* Offsets */
    --layout-offset-y:2vw;
    --layout-offset-x:2vw;
    --section-offset-y:10vw;
    --p-offset-y:20px;
 

    /* /Offset */

    --sb-track-color: #323333;
    --sb-thumb-color: var(--color-accent);
    --sb-size: 4px;
}
/*
*
* Globals
*
*/
html, body{
  height: 100%;
}
body{
  position:relative;
  background-color:var(--color-bg);
  font-family:var(--font-family-primary);  
  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{  
  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);
}
.text-accent{
  color:var(--color-accent);
}
h1{
  font-family:var(--font-family-secondary);
  font-size:var(--font-size-h1);
  font-weight:var(--font-weight-h1);
  line-height:var(--font-height-h1);
}
h2{
  font-family:var(--font-family-secondary);
  font-size:var(--font-size-h2);
  font-weight:var(--font-weight-h2);
  line-height:var(--font-height-h2);
}
h3{
  font-family:var(--font-family-secondary);
  font-size:var(--font-size-h3);
  font-weight:var(--font-weight-h3);
  line-height:var(--font-height-h3);
}
a{
  font-family:var(--font-family-secondary);
  font-size:var(--font-size-small);
  font-weight:var(--font-weight-small);
  line-height:var(--font-height-small);
}
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:-1px;
  display:block;
  margin:auto;
  transition: all 0.5s ease;
}
a.underline:after, a.underline-hover.active:after, a.underline-hover:hover:after{  
  width:100%;
}
.p-offset-bottom{
  margin-bottom:var(--p-offset-y);
}

.animated-titles{
  position: relative;
  overflow: hidden;
  margin: 0;
}
.animated-titles > div {
  position: relative;
  margin: 0;
}
.split-parent {
  overflow: hidden;
}
.split-child {
  display: inline-block;
}
/*
*
* 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;
}
.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  animation: pulse 1s linear infinite;
}
.loader:after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: scaleUp 1s linear infinite;
}

@keyframes scaleUp {
  0% { transform: translate(-50%, -50%) scale(0) }
  60% , 100% { transform: translate(-50%, -50%)  scale(1)}
}
@keyframes pulse {
  0% , 60% , 100%{ transform:  scale(1) }
  80% { transform:  scale(1.2)}
}


/*
*
* Header
*
*/
header.main.sticky{
  position:absolute;
  top:0;
  left:0;
  right:0;
}
header.main{
  position:relative;
  z-index:3;
}
header.main .logo a{
  font-family:var(--font-family-secondary);
  font-size:clamp(18px,2vw,24px) !important;
  line-height:clamp(18px,2vw,24px) !important;
  font-weight:var(--font-weight-small);
  text-transform:uppercase;
}
header.main nav{
  display:none;
}
header.mobile-nav-open{
  z-index:16;
}
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{
    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{
  
  position:relative;
  z-index:3;
 padding:20vh 5vw;
 box-sizing: border-box;
}
.cta .hero-text, .contact .hero-text{
  font-family:var(--font-family-secondary);
  font-size:clamp(28px,4vw,58px);
  line-height:clamp(28px,4vw,58px);
  font-weight:300;
}
.cta .cta-inner{
  border:1px solid rgba(255,255,255,0.3);
  border-radius:30px;
  padding-top:50px;
  padding-bottom:50px;
  padding-right:20px;
  padding-left:20px;
}

@media (min-width: 768px) {
  .cta{
    padding:20vh 5vw;
   }
}

@media (min-width: 1400px) {
  .cta{
    padding:30vh 10vw;
   }
   .cta .cta-inner{
    padding-top:80px;
  padding-bottom:80px;
    padding-right:20px;
    padding-left:20px;
  }
}

/*
* Footer
*/
footer, .footer-contact{
  font-family:var(--font-family-secondary);
  font-size:var(--font-size-small);
  line-height:var(--font-height-small);
  font-weight:var(--font-weight-small);
  position:relative;
  z-index:3;
}
footer > div{
  display:inline;
}
.footer-contact{
 position:absolute;
 left:0;
 right:0;
 bottom:0;
}
/*
*
* Home Page
*/
.home .home-cover{
  padding:var(--layout-offset-y) 0;
  height:100vh;
}
.home .home-cover img, .home .home-cover video, .home .home-cover:before{
  width:100%;
  height:100vh;
  position:fixed;
  left:0;
  top:0;
  z-index:-1;
}
.home .home-cover img, .home .home-cover video, .home .home-cover:before{  
  object-fit:cover;
}
.home .home-cover:before{
  content:'';
  display:inline-block;  
  /*background-color:rgba(245,192,192,0.1);*/
  background-color:rgba(0,0,0,0.3);
  z-index:2;
}
.home .home-cover h1{
  font-size:9.5vw;
  z-index:3;
}

.home .home-bio{
  position:relative;
  z-index:3;
  padding:var(--section-offset-y) var(--layout-offset-x);
}
.home .featured-grid{
  display:grid;
  grid-template-columns:100%;  
  position:relative;
  z-index:3;
}
.home .check-work-link{
  
  position:relative;
  z-index:3;
}
@media (min-width: 768px) {
  .home .featured-grid{  
    grid-template-columns: 50% 50%;
  }
}
@media (min-width: 768px) {
  .home .home-bio{    
    width:60%;
  }
}

.home .featured-grid .project{ 
  aspect-ratio:16/9; 
  height:100%;
}
.home .featured-grid .project .project-inner{
  position:relative;
  z-index:4;
  width:100%;
  height:100%;
  padding:30px;
}
.home .featured-grid .project-inner:before{
  content:'';
  display:inline-block;
  aspect-ratio:16/9; 
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.3);
  z-index:4;
}
.home .featured-grid .project .project-inner h3, .home .featured-grid .project .project-inner .additional-details{
  position:relative;
  z-index:5;
}
.home .featured-grid .project .project-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  left:0;
  top:0;
  z-index:-1;
}

@media (min-width: 768px) {
  .home .featured-grid .project:nth-child(6n+1), .home .featured-grid .project:nth-child(6n+5){
    aspect-ratio: auto;
    grid-row: span 2;
  }
}

/*
Work Page
*/
.work{
  --category-gap:100px;
}
.work header{
  padding:25vh 0 20vh; 
}
@media (min-width: 992px) {
  .work header{
    padding:30vh 0 20vh; 
  }
}

.projects-category:not(:last-child){
  margin-bottom:var(--category-gap);
}
.projects-category h2{
  margin-bottom:30px;
  display:flex;
  align-items:center;
}
.projects-category h2:after{
  content:"";
  display:inline;
  height:1px;
  background-color:rgba(255, 255, 255,0.2);
  flex-grow:2;
}
.projects-category h2 .category-title{
  padding-right:20px;
}
/*
.projects-category:not(:last-child):after{
  content:"";
  display:inline-block;
  width:90%;
  height:1px;
  background-color:rgba(255, 255, 255,0.1);
  margin:calc(var(--category-gap)/2) 5% 0;
}*/
.swiper-wrapper{
    --grid-gap:15px;
}
 .swiper-wrapper .project img{
    aspect-ratio:16/9;
  }
  .swiper-wrapper .project img{
    /*height:100%;*/
    width:100%;
    object-fit:cover;
    background-color:#222222;
  }
  .swiper-wrapper .project h3{
    margin-top:calc(var(--grid-gap)/2);
  }
   .swiper-wrapper .project p{
    font-size:var(--font-size-small);
    font-weight:var(--font-weight-small);
    line-height:var(--font-height-small);
  }
  .swiper-button-prev, .swiper-button-next{
    color:var(--color-text) !important;
    margin-top:calc(0px - (var(--swiper-navigation-size))) !important;
  }
@media (min-width: 768px) {
  .work{
  --category-gap:150px;
}
  .swiper-wrapper{
    display:grid !important;
    grid-template-columns:100%;
    grid-gap:var(--grid-gap);
    row-gap:calc(var(--grid-gap) * 4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
 

 
  .swiper-button-prev, .swiper-button-next{
    display:none !important;
  }
}
@media (min-width: 1200px) {
  .work{
  --category-gap:200px;
  }
  .swiper-wrapper{  
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Projects Grid */
#projects-grid {
  margin-bottom: calc(var(--grid-gap) * 4);
}
#projects-grid.no-gap {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .work .projects-grid{  
    --grid-gap:15px;
    display:grid;
    grid-template-columns:100%;
    grid-gap:var(--grid-gap);
    row-gap:calc(var(--grid-gap) * 4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .work .projects-grid{  
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* /Projects Grid */
/* Project Card */
.work .projects-grid .project{
  aspect-ratio:16/9;
}
.work .projects-grid .project img{
  height:100%;
  width:100%;
  object-fit:cover;
  background-color:#222222;
}
.work .projects-grid .project h3{
  margin-top:calc(var(--grid-gap)/2);
}
.work .projects-grid .project p{
  font-size:var(--font-size-small);
  font-weight:var(--font-weight-small);
  line-height:var(--font-height-small);
}
/* /Project Card */
/* Project Modal */
.project-modal{
  position:fixed;
  top:0;
  left:0;
  display:none;
  background-color:rgba(0,0,0,0.9);
  z-index:3;
}
.project-modal.active{
  display:flex;
  align-items:center;
  justify-content:center;
}

.project-modal .trailer-wrapper{
  width:60%;  
}
.project-modal .trailer-wrapper header{
  display:flex;
  justify-content:end;
  margin-bottom:20px; 
}

.project-modal .trailer-wrapper video{
  width:100%;
  aspect-ratio:16/9;
}
.project-modal .trailer-wrapper #trailer-close{
  margin-bottom:20px;
  float:right;
}
/* /Project Modal */
/*
* Bio Page
*/
.bio header{
  padding:35vh 0;  
  position:relative;
}
.bio header h1{
  --font-size-h1:clamp(48px,10vw,112px);
  --font-height-h1:clamp(48px,10vw,112px);
  --font-weight-h1:400;
}
.bio header p{
  font-size:clamp(28px,4vw,42px);
  line-height:clamp(28px,4vw,42px);
  font-weight:300;
}
.bio section.bio-body p{
 margin-bottom:20px;
}
.bio section.bio-image{
  margin-top:50px;
 }
.bio section.bio-image img{
  width:100%;
  margin:auto;
 }
 @media (min-width: 768px) {
  .bio section.bio-image img{
    width:60%;
   }
 }
@media (min-width: 992px) {
  .bio section.bio-body p{
    margin-bottom:100px;
   }
   .bio section.bio-image img{
    width:40%;
   }
}

/*
* Contact
*/