/*  GENERAL
=========================================== */

:root {
    --dark:#121314;      /*  text dark default  */
    /* --light:#9c9c8e; */
    --light:#bfbfae;
    --red:#cb2227;
}

/*  prevent scrolling  */

html.noscroll,
body.noscroll {
    overflow: hidden;
}

/*  cursor  */

.nopoint {
    pointer-events: none;
}
.allpoint {
    pointer-events: all;
}

/*  background image positions  */

/*
top-left : Top Left
top-center : Top Center
top-right : Top Right
center-left : Center Left
center : Center Center
center-right : Center Right
bottom-left : Bottom Left
bottom-center : Bottom Center
bottom-right : Bottom Right
*/

.background.top-left {
    background-position: left top;
}
.background.top-center {
    background-position: center top;
}
.background.top-right {
    background-position: right top;
}
.background.center-left {
    background-position: left center;
}
.background.center-right {
    background-position: right center;
}
.background.bottom-left {
    background-position: left bottom;
}
.background.bottom-center {
    background-position: center bottom;
}
.background.bottom-right {
    background-position: right bottom;
}


/*  TYPOGRAPHY
=========================================== */

html, body {
    background-color: var(--dark);
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35;
    color:var(--light);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.35;
}
h1 {
    font-size: 51px;
}
h2 {
    font-size: 42px;
}
h3 {
    font-size: 35px;
}
h4 {
    font-size: 29px;
}
h5 {
    font-size: 24.5px;
}
h6 {
    font-size: 20.5px;
}

.light-f {
    color:var(--light);
}
.red-f {
    color:var(--red);
}


/*  CONTAINERS
=========================================== */

.title-area,
.site-inner,
.custom-hero,
footer {
    -webkit-transition:0.35s all ease 0.25s;
    transition:0.35s all ease 0.25s;
}
.title-area {
    z-index: 1;
}
.site-inner {
    max-width: unset;
    padding: 0;
}
aside.sidebar-primary {
    display:none;
}

.container {
    width:100%;
    max-width: 1300px;
    margin:0 auto;
    position: relative;
}


/*  BUTTONS
=========================================== */

.btn-main {
    text-align: center;
    line-height: 1;
    display: inline-block;
    position: relative;
}

/* size */

.btn-main.sm {
    padding:10px 25px;
}
.btn-main.md {
    padding:15px 45px;
}
.btn-main.lg {
    padding:20px 95px;
}


/*  ANIMATIONS
=========================================== */

@keyframes zoomOut {
    0%   { opacity:0; transform:scale3d(1.15, 1.15, 1) }
    25%  { opacity:1 }
    100% { transform:scale3d(1, 1, 1) }
}
@-webkit-keyframes zoomOut {
    0%   { opacity:0; -webkit-transform:scale3d(1.15, 1.15, 1) }
    25%  { opacity:1 }
    100% { -webkit-transform:scale3d(1, 1, 1) }
}


/*  HEADER / NAVIGATION
=========================================== */

header.site-header {
    background-color: transparent;
    width:100%;
    box-shadow: none;
    z-index: 10;
    position: relative;
}
.single-project header,
.tm-about-page header {
    position: absolute;
}
.single-project header:before {
    background: -moz-linear-gradient(top, rgba(18,19,20,1) 0%, rgba(18,19,20,0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(18,19,20,1)), color-stop(100%, rgba(18,19,20,0)));
    background: -webkit-linear-gradient(top, rgba(18,19,20,1) 0%, rgba(18,19,20,0) 100%);
    background: -o-linear-gradient(top, rgba(18,19,20,1) 0%, rgba(18,19,20,0) 100%);
    background: -ms-linear-gradient(top, rgba(18,19,20,1) 0%, rgba(18,19,20,0) 100%);
    background: linear-gradient(to bottom, rgba(18,19,20,1) 0%, rgba(18,19,20,0) 100%);
    width:100%;
    height:200px;
    top:0;
    left:0;
    content:"";
    display: block;
    z-index: 0;
    position: absolute;
}
header .wrap {
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    position: relative;
}
.title-area .site-title {
    width:0;
    height:0;
    visibility: hidden;
    opacity: 0;
}
.title-area img {
    max-width:165px;
}

.nav-light .site-title,
.nav-light .site-title a {
    color:var(--light);
}


/*  header navigation  */

ul#menu-navigation li {
    padding:12px 15px;
}
ul#menu-navigation li a {
    padding:0;
    position: relative;
}
body.nav-dark ul#menu-navigation li a,
body.nav-dark ul#menu-navigation li a:hover {
    color:var(--light);
}
body.nav-light ul#menu-navigation li a,
body.nav-light ul#menu-navigation li a:hover {
    color:var(--light);
}
ul.menu > li a:before {
    width:100%;
    height:1px;
    bottom:-3px;
    content:"";
    display: block;
    border-radius: 1px;
    -webkit-transform:scaleX(0);
    transform:scaleX(0);
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition:0.75s all cubic-bezier(0.99,0.22,0,0.99);
    transition:0.75s all cubic-bezier(0.99,0.22,0,0.99);
    position: absolute;
}
ul.menu > li a:hover::before {
    -webkit-transform:scaleX(1);
    transform:scaleX(1);
}
body.nav-dark ul#menu-navigation > li a:before {
    background:var(--light);
}
body.nav-light ul#menu-navigation > li a:before,
.mobile-menu-master-wrap ul.menu > li a:before {
    background:var(--light);
}

/*  mobile nav burger  */

.nav-trigger-wrap {
    right:0;
    height:34px;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    cursor: pointer;
    z-index:10000;
    padding:5px;
}
body.nomobile .nav-trigger-wrap:hover span.nav-dash,
.nav-trigger-wrap.active span.nav-dash {
    width:30px;
}
span.nav-dash {
    height:2px;
    border-radius: 1px;
    -webkit-transition:0.25s all cubic-bezier(0.85, 0, 0.15, 1);
    transition:0.25s all cubic-bezier(0.85, 0, 0.15, 1);
}
body.nav-dark span.nav-dash {
    background:var(--light);
}
body.nav-light span.nav-dash {
    background:var(--light);
}
span.nav-dash-1 {
    width:16px;
}
span.nav-dash-2 {
    width:30px;
}
span.nav-dash-3 {
    width:21px;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

/*  mobile nav  */

.mobile-menu-master-wrap {
    background-color: var(--dark);
    z-index: 9999;
}
/* .mobile-menu-master-wrap:before {
    background-color: #131626;
    content: '';
    display: block;
    border-radius: 50%;
    -webkit-transform:scale(0);
    transform:scale(0);
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transition:0.75s all ease-in-out;
    transition:0.75s all ease-in-out;
    position: absolute;
} */
.mobile-menu-master-wrap:not(.active) {
    visibility:hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.mobile-nav .title-area,
body.mobile-nav .site-inner,
body.mobile-nav .custom-hero,
body.mobile-nav footer {
    opacity: 0.75;
    /* -webkit-transform:translate3d(-6vw,0,0) scale(0.9);
    transform:translate3d(-6vw,0,0) scale(0.9); */
    transition-delay: 0s !important;
}
body.mobile-nav .mobile-menu-master-wrap:before {
    -webkit-transform:scale(1);
    transform:scale(1);
}
#ela-mobile-navigation {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
}
#ela-mobile-navigation li {
    opacity: 0;
    padding-block:50px;
}
#ela-mobile-navigation li a {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 6px;
    color:var(--light);
    position: relative;
}


/*  TEMPLATE :: HOME
=========================================== */

.projects-wrap {
    gap:10px;
}
a.project-item-wrap {
    height:50vh;
    min-height: 290px;
}
.project-item-bg {
    -webkit-transform-origin:center center;
    transform-origin:center center;
    -webkit-transition:6s transform ease-in-out;
    transition:6s transform ease-in-out;
}
a.project-item-wrap:hover .project-item-bg {
    -webkit-transform:scale(1.25);
    transform:scale(1.25);
}

.project-item-grad {
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    height: 100%;
    -webkit-transform:translate3d(0,40%,0);
    transform:translate3d(0,40%,0);
}
a.project-item-wrap:hover .project-item-grad {
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}
a.project-item-wrap:hover .project-item-peek {
    -webkit-filter:blur(5px);
    filter:blur(5px);
    opacity:0;
}
.project-item-title .f-item {
    opacity:0;
    -webkit-transform:translate3d(-5px,0,0);
    transform:translate3d(-5px,0,0);
    -webkit-transition:0.35s all cubic-bezier(0,0,0,0.99);
    transition:0.35s all cubic-bezier(0,0,0,0.99);
}
a.project-item-wrap:hover .project-item-title .f-item {
    opacity:1;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}
a.project-item-wrap:hover .project-item-title ._title {
    transition-delay: 0.5s;
}
a.project-item-wrap:hover .project-item-title ._streaming {
    transition-delay: 0.6s;
}
a.project-item-wrap:hover .project-item-title ._view {
    transition-delay: 0.7s;
}


/*  TEMPLATE :: ABOUT
=========================================== */

.about-hero {
    height:max(85vh, 450px);
}
.about-hero-inner {
    width:115vw;
    -webkit-animation:zoomOut 8s ease-in-out forwards;
    animation:zoomOut 8s ease-in-out forwards;
}
.about-hero-inner:before {
    background-color: var(--dark);
    width:100%;
    height:100%;
    top:0;
    left:0;
    content:"";
    display: block;
    opacity: 0.85;
    z-index: 1;
    position: absolute;
}
.about-hero-inner:after {
    background: -moz-linear-gradient(top, rgba(18,19,20,0) 0%, rgba(18,19,20,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(18,19,20,0)), color-stop(100%, rgba(18,19,20,1)));
    background: -webkit-linear-gradient(top, rgba(18,19,20,0) 0%, rgba(18,19,20,1) 100%);
    background: -o-linear-gradient(top, rgba(18,19,20,0) 0%, rgba(18,19,20,1) 100%);
    background: -ms-linear-gradient(top, rgba(18,19,20,0) 0%, rgba(18,19,20,1) 100%);
    background: linear-gradient(to bottom, rgba(18,19,20,0) 0%, rgba(18,19,20,1) 100%);
    width:100%;
    height:30%;
    bottom:0;
    left:0;
    content:"";
    display: block;
    z-index: 2;
    position: absolute;
}
figure.about-gallery-item {
    border-left:2px solid var(--dark);
    border-right:2px solid var(--dark);
    -webkit-transform:skew(-8deg);
    transform:skew(-8deg);
}
figure.about-gallery-item img {
    width: 150%;
    max-width: unset;
    -webkit-transform:skew(8deg);
    transform:skew(8deg);
}


/*  titles  */

.about-title {
    font-weight: 700;
    color:var(--red);
    margin:0 0 50px;
}

/*  team  */

.about-team-wrap {
    gap:50px;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
}
figure.team-member p {
    font-size: 15px;
}

/*  contact information  */

.about-contact-content a {
    color:#fafafa;
}
.about-contact-content a:hover {
    color:var(--red);
}


/*  TEMPLATE :: PROJECT SINGLE
=========================================== */

/*  titles  */

.project-content-title {
    font-weight: 700;
    color:var(--red);
    margin:0 0 25px;
}

/*  hero  */

section.project-hero {
    height:max( 85vh, 400px );
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.project-hero-img {
    -webkit-animation:zoomOut 8s ease-in-out forwards;
    animation:zoomOut 8s ease-in-out forwards;
}
.project-titles:before {
    background: -moz-linear-gradient(top, rgba(18,19,20,0) 0%, rgba(18,19,20,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(18,19,20,0)), color-stop(100%, rgba(18,19,20,1)));
    background: -webkit-linear-gradient(top, rgba(18,19,20,0) 0%, rgba(18,19,20,1) 100%);
    background: -o-linear-gradient(top, rgba(18,19,20,0) 0%, rgba(18,19,20,1) 100%);
    background: -ms-linear-gradient(top, rgba(18,19,20,0) 0%, rgba(18,19,20,1) 100%);
    background: linear-gradient(to bottom, rgba(18,19,20,0) 0%, rgba(18,19,20,1) 100%);
    width:100%;
    height:150%;
    bottom:0;
    left:0;
    content:"";
    display: block;
    z-index: -1;
    position: absolute;
}
.project-titles a:hover {
    -webkit-transform:translate3d(3px,0,0);
    transform:translate3d(3px,0,0);
}
.project-titles a svg {
    opacity:0;
}
.project-titles a:hover svg {
    opacity:1;
}

/*  poster + synopsis + credits + links  */

.project-single.has-poster .content-inner {
    display: grid;
    gap:max(50px, 8vw);
}
.project-synopsis span p:last-child {
    margin-bottom: 0;
}
.project-synopsis span a {
    color:#fafafa;
}
/* .project-links-list a h6 {
    display: inline;
} */
.project-synopsis span a:hover,
.project-links-list a:hover h6 {
    color:var(--red);
}

/*  gallery  */

.project-gallery-inner {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap:25px;
}
.project-gallery-inner figure {
    cursor: pointer;
}
.project-gallery-inner.hover-effect figure:not(.hover) {
    opacity:0.4;
}

/*  gallery modal  */

.project-gallery-modal {
    background-color:rgba(0,0,0,0.85);
}
button.gallery-modal-close {
    background:none;
    -webkit-appearance: none;
    appearance: none;
}
button.gallery-modal-close svg {
    font-size: 30px;
    color:var(--light);
}
button.gallery-modal-close:hover svg {
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
}
.gallery-modal-inner {
    grid-template-columns: 50px 1fr 50px;
}
nav.gallery-nav {
    cursor: pointer;
}
nav.gallery-nav svg {
    font-size: 40px;
    color:var(--light);
    opacity: 0.65;
    z-index: 5;
}
nav.gallery-nav:hover svg {
    opacity: 1;
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
}
.modal-gallery-item img {
    width:auto;
    max-width: 100%;
    height:auto;
    max-height: 90vh;
}



/*  FOOTER
=========================================== */

footer.site-footer {
    background-color: transparent;
    border-top:0px;
    padding-top:75px;
    position: relative;
}
footer.site-footer:before {
    width:100%;
    height:1px;
    top:0;
    left:0;
    border-top:1px solid var(--light);
    content:"";
    display: block;
    opacity: 0.35;
    position: absolute;
}
.footer-inner {
    -webkit-flex-direction: column;
    flex-direction: column;
}
.footer-info a {
    color:var(--red);
}
.footer-info a:hover {
    color:#fafafa;
}
.footer-social a {
    color:var(--light);
    -webkit-transition:0.25s all ease-in-out;
    transition:0.25s all ease-in-out;
    margin-right:30px;
    padding:5px;
}
.footer-social a:before {
    background-color:var(--light);
    width:40px;
    height:40px;
    top:50%;
    left:50%;
    content:"";
    display: block;
    border-radius: 50%;
    -webkit-transform:translate(-50%,-50%) scale3d(0,0,1);
    transform:translate(-50%,-50%) scale3d(0,0,1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition:0.25s transform cubic-bezier(0,0,0,0.99);
    transition:0.25s transform cubic-bezier(0,0,0,0.99);
    position: absolute;
}
.footer-social a:hover {
    color:var(--dark);
}
.footer-social a:hover::before {
    -webkit-transform:translate(-50%,-50%) scale3d(1,1,1);
    transform:translate(-50%,-50%) scale3d(1,1,1);
}
.footer-social a svg {
    font-size: 20px;
    z-index: 1;
    position: relative;
}
.colophon-wrap p {
    font-size: 14px;
    opacity: 0.65;
}
.colophon-wrap p a {
    color:var(--light);
}
.colophon-wrap p a:hover {
    color:var(--red);
}