/***GLOBAL VARIABLES
*****************************************************/
:root {
/***TEXT***/
    /*--fontSize: clamp(1rem, 1.25vw, 1.5rem);*/
    --fontSizeXSmall: 0.7rem;
    --fontSizeSmall: 0.85rem;
    --fontSizeMedium: 1.15rem;
    --fontSizeLogo: 1.05rem;
    --fontSizeLarge: 1.925rem;
    --fontSizeXLarge: 3.95rem;
    --fontWeight: 400;
    --letterSpacing: .02em;
    --wordSpacing: 0em;
    --lineHeightNatural: 1.1;
    --lineHeightLow: 1;
    --lineHeightHigh: 1.4;
    /***FONTS***/
    --RoobertSemiBold: "Roobert SemiBold", Arial, Helvetica, sans-serif;
    --RoobertBold: "Roobert Bold", Arial, Helvetica, sans-serif;
    --BradfordBook: "Bradford Book", "Times New Roman", Times, serif;
    --BradfordMedium: "Bradford Medium", "Times New Roman", Times, serif;
    /***SPACES***/
    --spaceY: calc(var(--fontSizeMedium) * var(--lineHeightHigh));
    --spaceX: calc(var(--fontSizeMedium) * 1.75);
    --bodySpaces: 0;
    --rowGutterXSmall: calc(var(--fontSizeXSmall) * var(--lineHeightNatural));
    --rowGutterSmall: calc(var(--fontSizeSmall) * var(--lineHeightNatural));
    --rowGutterMedium: calc(var(--fontSizeMedium) * var(--lineHeightNatural));
    --rowGutterLarge: calc(var(--fontSizeLarge) * var(--lineHeightLow));
    --rowGutterBetweenSections: calc(var(--fontSizeLarge) * 2);
    --colGutter: calc(var(--spaceX)*1);
    --mainTopSpace: calc(var(--headerHeight) + var(--rowGutterMedium));
    --mainBottomSpace: calc(var(--rowGutterSmall) * 12);
    /***GRIDS***/
    --gridColumns: 9;
    --gridGutters: calc(var(--gridColumns) - 1);
    --gridTemplate: repeat(var(--gridColumns), 1fr);
    --gridGap: calc(var(--rowGutterSmall)*5) var(--colGutter);
    /***SIZES***/
    --menuHeight: var(--fontSizeLarge);
    --headerHeight: calc(var(--spaceY)*2 + var(--menuHeight));
    --footerHeight: calc(var(--spaceY)*2 + var(--rowGutterSmall));
    --mainWidth: 1800px;
    --mainHeight: calc(100vh - var(--mainTopSpace));
    --colWidth: calc((100vw - var(--spaceX)*2 - var(--colGutter)*var(--gridGutters)) / var(--gridColumns));
    --gridItemWidth: calc(var(--colWidth)*3 + var(--colGutter)*2);
    /***COLOR***/
    --paletteWhite: #ECE8DD;
    --paletteBlack: #000000;
    --paletteGray: #0F0F0F;
    --paletteMidGray: #2d2d2d;
    --paletteLightGray: #4b4b4b;
    --paletteRed: rgba(255, 55, 0); 
    --paletteYellow: rgba(255, 200, 25);
    --paletteBlue: rgba(55, 95, 155);
    --paletteLightBlue: rgba(195, 205, 225);
    --backColor: var(--paletteBlack);
    --textColor: var(--paletteWhite);
    --linkColor: var(--textColor);
    --hoverColor: var(--paletteRed);
    /***DECORATION***/
    --linkDeco: underline;
    --borderWidth: 0.1rem;
    --borderLine: var(--borderWidth) solid var(--textColor);
    /***TRANSITION***/
    --transitionDurationXFast: 0.3s;
    --transitionDurationFast: 0.6s;
    --transitionDurationSlow: 0.9s;
    --transitionDurationXSlow: 1.2s;
    --transitionDurationXXSlow: 5.4s;
}
  
/***FONTS
*****************************************************/
* {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
	text-size-adjust: 100%;
    -webkit-font-smoothing: smooth;
	-moz-font-smoothing: smooth;
    -moz-osx-font-smoothing: smooth;
	-ms-font-smoothing: smooth;
    -o-font-smoothing: smooth;
    text-rendering: geometricPrecision;
}
@font-face {
    font-family: "Roobert Bold";
    src: url("https://motionprinciples.com/assets/Roobert-Bold.woff");
}
@font-face {
    font-family: "Roobert SemiBold";
    src: url("https://motionprinciples.com/assets/Roobert-SemiBold.woff");
}
@font-face {
    font-family: "Bradford Book";
    src: url("https://motionprinciples.com/assets/BradfordLL-Book.woff");
}
@font-face {
    font-family: "Bradford Medium";
    src: url("https://motionprinciples.com/assets/BradfordLL-Medium.woff");
}
.font_size_Logo {
    margin-top: -2px;
    font-family: var(--RoobertBold);
    font-size: var(--fontSizeLogo);
    letter-spacing: var(--letterSpacing);
    line-height: var(--lineHeightLow);
}
.font_size_XS {
    font-size: var(--fontSizeXSmall);
    line-height: var(--lineHeightNatural);
    font-family: 'Times New Roman', Times, serif;
}
.font_size_S {
    font-size: var(--fontSizeSmall);
    line-height: var(--lineHeightNatural);
}
.font_size_M {
    font-size: var(--fontSizeMedium);
    line-height: var(--lineHeightNatural);
}
.font_size_L {
    font-size: var(--fontSizeLarge);
    line-height: var(--lineHeightNatural);
}
.font_size_XL {
    font-size: var(--fontSizeXLarge);
    line-height: var(--lineHeightNatural);
}
.uppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform: capitalize;
}
.lowercase {
    text-transform: lowercase;
}

/***RESET
*****************************************************/
::-webkit-scrollbar {
    display: none;
}
::-webkit-selection {
    color: var(--paletteRed);
    background-color: transparent;
}
::-moz-selection {
    color: var(--paletteRed);
    background-color: transparent;
}
::-ms-selection {
    color: var(--paletteRed);
    background-color: transparent;
}
::-o-selection {
    color: var(--paletteRed);
    background-color: transparent;
}
::selection {
    color: var(--paletteRed);
    background-color: transparent;
}
img::-webkit-selectio {
    color: transparent;
    background-color: transparent;
}
img::-moz-selection {
    color: transparent;
    background-color: transparent;
}
img::-ms-selection {
    color: transparent;
    background-color: transparent;
}
img::-o-selection {
    color: transparent;
    background-color: transparent;
}
img::selection {
    color: transparent;
    background-color: transparent;
}
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    /*color-scheme: light dark;*/
    /*scroll-behavior: smooth;*/
}
body {
    position: relative;
    margin: var(--bodySpaces);
    color: var(--textColor);
    background: var(--backColor);
    font-family: var(--RoobertSemiBold);
    line-height: var(--lineHeightNatural);
}
body.scroll_less {
    overflow: hidden;
    }
ul {
    display: block;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
li {
  display: inline;
}
a {	
    /*color: var(--linkColor);*/
    text-decoration: none;
    transition-property: color;
    transition-duration: var(--transitionDurationXFast);
}
a:hover {	
    color: var(--hoverColor);
    transition-property: color;
    transition-duration: var(--transitionDurationXFast);
}
h1, h2, h3 {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding: 0;
    font-size: var(--fontSizeMedium);
    font-style: normal;
    font-weight: 400;
}
p {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}
span {
    display: inline;
}
form, input, textarea, submit,
iframe, embed, audio {
    margin: 0;
    padding: 0;
    color: var(--textColor);
    background: transparent;
    border: 0;
    outline: none;
    font: inherit;
    font-size: inherit;
}
input:focus, textarea:focus {
    outline: none;
}
input[name="submit"] {
	cursor: pointer;
}
:-webkit-input-placeholder {
	/*internet explorer*/
	color: var(--paletteBlack);
}
::-moz-input-placeholder {
	/*mozilla edge*/
    color: var(--paletteBlack);
}
::-ms-input-placeholder {
	/*microsoft edge*/
    color: var(--paletteBlack);
}
::-o-input-placeholder {
	/*microsoft edge*/
    color: var(--paletteBlack);
}
::placeholder {
	/*chrome, firefox, opera, safari*/
    color: var(--paletteBlack);
}
img, video {
    vertical-align: middle;
}
img.lazy,
video.lazy {
    opacity: 1;
    transition: opacity var(--transitionDurationSlow);
}
img.lazy.loaded,
video.lazy.loaded {
    opacity: 1;
}

/***GRADIENTS
*****************************************************/
.gradient_top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    width: 100%;
    transition-property: transform, height, opacity, box-shadow;
    transition-duration: 1.8s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    pointer-events: none;
}
.gradient_top:not(.resize) {
    height: 100vh;
    opacity: 0.25;
    -webkit-box-shadow: inset 0px calc(var(--headerHeight)*1.2) calc(var(--headerHeight)*1.2) -6vw var(--backColor);
    -moz-box-shadow: inset 0px calc(var(--headerHeight)*1.2) calc(var(--headerHeight)*1.2) -6vw var(--backColor);
    -ms-box-shadow: inset 0px calc(var(--headerHeight)*1.2) calc(var(--headerHeight)*1.2) -6vw var(--backColor);
    box-shadow: inset 0px calc(var(--headerHeight)*1.2) calc(var(--headerHeight)*1.2) -6vw var(--backColor);
}
.gradient_top.resize {
    height: var(--headerHeight);
    opacity: 0.25;
    -webkit-box-shadow: inset 0px calc(var(--headerHeight)*0.6) calc(var(--headerHeight)*0.6) -3vw var(--backColor);
    -moz-box-shadow: inset 0px calc(var(--headerHeight)*0.6) calc(var(--headerHeight)*0.6) -3vw var(--backColor);
    -ms-box-shadow: inset 0px calc(var(--headerHeight)*0.6) calc(var(--headerHeight)*0.6) -3vw var(--backColor);
    box-shadow: inset 0px calc(var(--headerHeight)*0.6) calc(var(--headerHeight)*0.6) -3vw var(--backColor);
}
.gradient_bottom {
    position: fixed;
    bottom: 0;
    left: 50vw;
    transform: translate(-50%, 100%);
    z-index: 500;
    width: 150%;
    height: 50vh;
    box-shadow: 0 calc(var(--headerHeight)*-0.5) calc(var(--headerHeight)*1) rgba(0,0,0,0.75);
    /*background: linear-gradient(to top, black, transparent);*/
    opacity: 1;
    transition: transform var(--transitionDurationXFast);
    pointer-events: none;
}
.gradient_top.hide {
    transform: translateY(-100%);
}
.gradient_bottom.hide {
    transform: translateY(100%);
}

/***INTRO
*****************************************************/
.intro {
    position: relative;
    margin-left: 50%;
    z-index: 200;
    width: 100vw;
    height: 100vh;
    transform: translateX(-50%);
    background: var(--paletteWhite);
    transition-property: width, height, opacity;
    transition-duration: var(--transitionDurationFast);
    /*transition-timing-function: cubic-bezier(0, 0, 1, 1);*/
    clip-path: url(#intro_circle);
}
.intro.resize {
    width: 100% !important;
    height: var(--headerHeight) !important;
}
/*
.intro.landscape {
    width: 100vw;
    height: 350vh;
}
.intro.portrait {
    width: 100vw;
    height: 300vh;
}
.intro.landscape.resize, 
.intro.portrait.resize {
    width: 100% !important;
    height: var(--headerHeight) !important;
}
*/
.intro:not(.hide) {
    opacity: 1;
}
.intro.hide {
    opacity: 0;
    pointer-events: none;
}
.intro svg.intro_circle {
    width: 100%;
    height: 100%;
    /*transition-property: width, height, transform;*/
    /*
    transition-property: transform;
    transition-duration: var(--transitionDurationXSlow);
    */
    /*transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);*/
}
/*
.intro svg.intro_circle {
    transform: translateX(0%)
}
*/
.intro svg.intro_circle clipPath circle {
    transition-property: cx, cy, r, transform;
    transition-duration: var(--transitionDurationXSlow);
    /*transition-duration: 1.25s;*/
    transition-timing-function: ease-out;
}
.intro svg.intro_circle clipPath circle {
    /*cx: calc(50% + var(--menuHeight)*0.5);*/
    cx: 50%;
    cy: 0%;
    r: 125rem;
    transform: translateY(0%);
}
.intro svg.intro_circle.mask clipPath circle {
    cx: 50%;
    /*cy: 50%;*/
    cy: calc((var(--menuHeight)/2) + var(--spaceY));
    r: 0.9625rem !important;
    /*r: calc(var(--menuHeight) * 0.5);*/
    transform: translate(calc(var(--menuHeight) * 0.523), calc(var(--menuHeight) * 0.005));
}
.intro .logo {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--menuHeight);
    transition-property: top, transform;
    transition-duration: var(--transitionDurationXSlow);
}
.intro .logo:not(.animate) {
    top: 50vh;
    transform: translateY(-50%);
}
.intro .logo.animate {
    top: var(--spaceY);
    transform: translateY(0%); 
}
.intro .logo .isologo {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: calc(var(--menuHeight)*0.1);
    height: var(--menuHeight);
}
.intro .logo .isologo .item_square,
.intro .logo .isologo .item_circle {
    display: inline-block;
    aspect-ratio: 1/1;
    cursor: pointer;
}
.intro .logo .isologo .item_square {
    align-self: center;
    height: 95%;
    background: var(--paletteBlack);
    opacity: 1;
}
.intro .logo .isologo .item_circle {
	background: var(--paletteBlack);
    transition-property: height;
    transition-duration: var(--transitionDurationFast);
}
.intro .logo .isologo .item_circle:not(.grow) {
    height: calc(var(--menuHeight)*1);
    border-radius: 100%;
}
.intro .logo .isologo .item_circle.grow {
    height: calc(var(--menuHeight)*1.05);
    border-radius: 100%;
}
/*
.intro .logo .isologo svg.item_circle {
    transition-property: height;
    transition-duration: var(--transitionDurationFast);
}
.intro .logo .isologo svg.item_circle:not(.grow) {
    height: calc(var(--menuHeight)*1);
    border-radius: 100%;
}
.intro .logo .isologo svg.item_circle.grow {
    height: calc(var(--menuHeight)*1.05);
    border-radius: 100%;
}
.intro .logo .isologo svg.item_circle circle {
    cx: 50%;
    cy: 50%;
    r: 50%;
    fill: var(--paletteBlack);
}
*/
.intro .logo .logotype {
    height: var(--menuHeight);
    z-index: 200;
    color: var(--paletteBlack);
    opacity: 1;
    transition-duration: var(--transitionDurationXSlow);
    transition-property: top, width, height, opacity;
    /*transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);*/
    cursor: pointer;
}
.intro .logo:not(.animate) .logotype {
    width: calc(var(--menuHeight)*3.3);
}
.intro .logo.animate .logotype {
    width: 0;
}
.logotype .info_text {
    padding-left: calc(var(--fontSizeMedium)*0.3);
}
.logotype img {
    height: 100%;
}

/***HEADER AND MENU
*****************************************************/
header {
    width: 100%;
    min-height: var(--headerHeight);
    position: -webkit-sticky;
    position: fixed;
    top: 0;
    padding: var(--spaceY) var(--spaceX);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    /*
    transition-property: padding-top;
    transition-duration: var(--transitionDurationXXSlow);
    */
}
nav.menu {
    /*display: inherit;*/
    
    /*transform: translateX(4%);*/
}
nav.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: calc(var(--menuHeight)*0.1);
    width: 100%;
    height: var(--menuHeight);
}
nav.menu .item_square,
nav.menu .item_circle {
    display: inline-block;
    aspect-ratio: 1/1;
    background-color: var(--paletteWhite);
    transition-property: height, background-color, opacity;
    transition-duration: var(--transitionDurationXFast);
    cursor: pointer;
}
nav.menu .item_square {
    align-self: center;
    height: 95%;
    opacity: 1;
}
header.desktop_version nav.menu .item_square:not(.active):hover {
    background-color: var(--paletteRed);
}
body#project header.desktop_version nav.menu .item_circle:not(.active):hover {
    background-color: var(--paletteRed);
}
nav.menu .item_circle {
    height: 100%;
    border-radius: 100%;
}
nav.menu .item_square.active,
nav.menu .item_circle.active {
    background-color: var(--paletteBlack);
}
header.desktop_version nav.menu .item_square.active:hover,
header.desktop_version nav.menu .item_circle.active:hover {
    background-color: var(--paletteWhite);
}

/***INTRO ANIMATION***/
body#index nav.menu ul {
    transition-property: column-gap;
    transition-duration: var(--transitionDurationXFast);
}
nav.menu ul.iso_gap {
    column-gap: calc(var(--menuHeight)*0.1);
}

section.info.zero_opacity {
    opacity: 0;
}
section.info {
    opacity: 1;
}
main.content {
	transition: padding-top var(--transitionDurationSlow), opacity var(--transitionDurationSlow);
}
main.content:not(.fade) {
    opacity: 1;
}
main.content.fade {
    opacity: 0;
}
@keyframes introMenu {
    0% {
        height: 200vw;
    }
    100% {
        height: var(--menuHeight);
    }
}
@keyframes introCircle {
    0% {
        transform: translateY(-50%) scaleX(3);
    }
    25% {
        transform: translateY(-75%) scaleX(2);
    }
    50% {
        transform: translateY(-75%) scaleX(1);
    }
    75% {
        transform: translateY(0%) scaleX(1);
    }
    100% {
        transform: translateY(0%) scaleX(1);
    }
}

/***INFO
*****************************************************/
section.info.desktop_version {
    position: fixed;
    /*transform: translateX(-50%) translateY(0);*/
    aspect-ratio: 1/1;
    color: var(--paletteBlack);
    background-color: var(--paletteRed);
    overflow: hidden;
    /*
    transition-property: top, left, right, transform, width, height, opacity, box-shadow;
    transition-duration: var(--transitionDurationFast);
    */
}
section.info.desktop_version.transitioning {
    transition-property: top, left, right, transform, width, height, opacity, box-shadow;
    transition-duration: var(--transitionDurationFast);
}
body#index section.info.desktop_version,
body#works section.info.desktop_version,
body#project section.info.desktop_version {
    z-index: 1;
}
section.info.desktop_version:not(.open) {
    top: calc(var(--spaceY) + var(--menuHeight) * 0.025);
    left: calc(50vw - (var(--menuHeight) * 1.025));
    /*transform: translateX(-100%);*/
    transform-origin: right;
    width: calc(var(--menuHeight) * 0.95);
    height: calc(var(--menuHeight) * 0.95);
    /*background-color: transparent;*/
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0);
    /*transition-timing-function: cubic-bezier(0.9, 0, 1, 1);*/
}
section.info.desktop_version.open {
    top: 0;
    left: 0;
    /*transform: translateX(0%);*/
    overflow-y: scroll;
    width: 100vw;
    height: 100vh;
    /*background-color: var(--paletteRed);*/
    box-shadow: 0px 7.5vh 15vh 0px rgba(0, 0, 0, 1);
    transition-timing-function: cubic-bezier(0.1, 0.7, 0.2, 1);
}
section.info.desktop_version .info_content {
	margin-inline: auto;
    display: grid;
    column-gap: var(--colGutter);
    height: 100vh;
    max-width: var(--mainWidth);
    padding-inline: var(--spaceX);
    /*overflow-y: scroll;*/
    transition-property: padding-inline, opacity;
    transition-duration: var(--transitionDurationXFast);
}
section.info.desktop_version .info_content a {
    color: var(--paletteBlack);
}
section.info.desktop_version .info_content a:hover {
    color: var(--paletteWhite);
}
section.info.desktop_version .info_content:not(.active) {
    padding-inline: calc(var(--spaceX)*3);
    opacity: 0;
}
section.info.desktop_version .info_contentn.active {
    padding-inline: var(--spaceX);
    opacity: 1;
}
section.info.desktop_version .info_content .info_motion,
section.info.desktop_version .info_content .info_production {
    display: flex;
    flex-direction: column;
    row-gap: var(--rowGutterMedium);
    flex: 1;
    height: 100%;
    padding-block: var(--mainTopSpace) calc(var(--fontSizeMedium)*1.75);
}
section.info.desktop_version .info_content .info_motion {
    grid-column: 1/10;
}
section.info.desktop_version .info_content .info_production {
    grid-column: 8/10;
}
/*
section.info.desktop_version .info_content .info_production {
    transition: background-color var(--transitionDurationXFast);
}
section.info.desktop_version .info_content .info_production:hover {
    background-color: var(--paletteLightBlue);
}
section.info.desktop_version .info_content .info_motion .info_title {
    font-family: var(--RoobertBold);
}
section.info.desktop_version .info_content .info_production {
    font-family: var(--BradfordMedium);
}
*/
section.info.desktop_version .info_content .info_contact {
    display: flex;
    flex-direction: column;
    row-gap: var(--rowGutterMedium);
    height: 100%;
}
section.info.desktop_version .info_content .info_credits {
    padding-top: calc(var(--rowGutterMedium)*2);
}

/***MOBILE INFO PAGE***/
/*
body#info {
	background-color: var(--paletteRed);
}
*/
body#info main.content {
	height: 100%;
}
section.info.mobile_version {
	color: var(--paletteBlack);
    background-color: var(--paletteRed);
}
section.info.mobile_version a {
	color: var(--paletteBlack);
}
section.info.mobile_version a:hover {
	color: var(--paletteWhite);
}
section.info.mobile_version .info_content {
	margin-inline: auto;
    display: grid;
    column-gap: var(--colGutter);
    height: 100%;
    max-width: var(--mainWidth);
    padding-inline: var(--spaceX);
}
section.info.mobile_version .info_content .info_motion {
    display: flex;
    flex-direction: column;
    row-gap: var(--rowGutterMedium);
    flex: 1;
    height: 100%;
    padding-block: var(--mainTopSpace) calc(var(--fontSizeMedium) * 1.75);
}
section.info.mobile_version .info_content .info_contact {
    display: flex;
    flex-direction: column;
    row-gap: var(--rowGutterMedium);
    height: 100%;
}
section.info.mobile_version .info_content .info_credits {
    padding-top: calc(var(--rowGutterMedium)*2);
}

/***MAIN TEMPLATE
*****************************************************/
body#index main.content,
body#works main.content {
    position: relative;
    margin-inline: auto;
    /*padding-top: var(--spaceY);*/
    /*max-width: var(--mainWidth);*/
    /*height: 100vh;*/
    min-height: var(--mainHeight);
    overflow-y: hidden;
    /*pointer-events: none;*/
}
body#index main.content {
	padding-top: var(--headerHeight);
}
body#works main.content:not(.push) {
	padding-top: var(--mainTopSpace);
}
body#works main.content.push {
	padding-top: 100vh;
}
/*
main.content:not(.hide) {
    opacity: 1;
}
main.content.hide {
    opacity: 0;
}
*/

/***GRID
*****************************************************/
section.grid {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: var(--gridTemplate);
    grid-gap: var(--gridGap);
    pointer-events: none;
    padding-inline: max(var(--spaceX), (100vw - var(--mainWidth)) / 2);
    padding-bottom: var(--mainBottomSpace);
}
.grid .grid_item {
    grid-column: span 3;
    align-self: start;
    pointer-events: auto !important;
}
.grid .grid_item.hide {
    transition-property: transform;
    transition-duration: 1s !important;
    transition-timing-function: cubic-bezier(0.9, 0, 1, 1);   
}
.grid_item[data-zone="top-left"].hide {
    transform: translate(-500%, -500%);
}
.grid_item[data-zone="top-center"].hide {
    transform: translate(0%, -500%);
}
.grid_item[data-zone="top-right"].hide {
    transform: translate(500%, -500%);
}
.grid_item[data-zone="middle-left"].hide {
    transform: translate(-500%, 0%);
}
.grid_item[data-zone="middle-right"].hide {
    transform: translate(500%, 0%);
}
.grid_item[data-zone="bottom-left"].hide {
    transform: translate(-500%, 500%);
}
.grid_item[data-zone="bottom-center"].hide {
    transform: translate(0%, 500%);
}
.grid_item[data-zone="bottom-right"].hide {
    transform: translate(500%, 500%);
}
/*
.grid .grid_item,
.grid .grid_item .item_link,
.grid .grid_item .item_media,
.grid .grid_item .item_media img,
.grid .grid_item .item_data {
    transition-property: all;
}
*/
/***GRID ITEM (COVER)***/
.grid_item.cover {
    display: flex;
    justify-content: center;
    perspective-origin: center;
    perspective: 200vh;
    aspect-ratio: 3 / 4;
    /*height: 100%;*/
}
.grid_item.tagline.square:not(.intersected_partial),
.grid_item.tagline.circle:not(.intersected_partial) {
    margin-top: 25%;
}
.grid_item.tagline.square.intersected_partial,
.grid_item.tagline.circle.intersected_partial {
    margin-top: 0%;
    transition-duration: var(--transitionDurationXSlow);
}
.grid_item.cover.square:not(.intersected_partial) {
    padding-top: 25%;
}
.grid_item.cover.square.intersected_partial {
    padding-top: 0%;
    transition-duration: var(--transitionDurationXSlow);
}
.grid_item.cover.landscape:not(.intersected_partial) {
    padding-top: 75%;
}
.grid_item.cover.landscape.intersected_partial {
    padding-top: 0%;
    transition-duration: var(--transitionDurationXSlow);
}
.grid_item.cover.portrait:not(.intersected_partial) {
    padding-top: 25%;
}
.grid_item.cover.portrait.intersected_partial {
    padding-top: 0%;
    transition-duration: var(--transitionDurationXSlow);
}
.grid_item.cover:not(.portrait) .item_link {
    align-self: start;
}
.grid_item.cover .item_link {
    transition: width var(--transitionDurationXFast);
    transform-style: preserve-3d;
}
.grid_item.cover .item_link:hover .item_media {
    /*background: var(--paletteRed);*/
}
/*
.grid_item.cover .item_link:hover .item_media > * {
    opacity: 1;
}
*/
/***COVER MEDIA***/
.grid_item.cover svg.cover_circle {
    position: absolute;
    width: 100%;
    transition: aspect-ratio var(--transitionDurationSlow);
}
.grid_item.cover svg.cover_circle #cover_circle {
}
svg.cover_circle clipPath circle {
    transition-property: cx, cy, r;
    transition-duration: var(--transitionDurationSlow);
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.grid_item.cover .item_media {
    position: relative;
    z-index: 0;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    /*height: 100%;*/
    box-shadow: 0px 1.5vw 3vh 0px rgba(0, 0, 0, 0.3);
    opacity: 1;
    transition: aspect-ratio, opacity;
    transition-duration: var(--transitionDurationXFast);
}
.grid_item.cover.hover a.item_link .item_media {
    opacity: 0.2;
}
/*
.grid_item.cover.square .item_media {
    aspect-ratio: 1/1;
}
.grid_item.cover.landscape .item_media {
    aspect-ratio: 16/9;
}
.grid_item.cover.portrait .item_media {
    aspect-ratio: 3/4;
}
*/
.grid_item.cover.square:not(.intersected_full) .item_link {
    width: 80%;
}
.grid_item.cover.square.intersected_full .item_link {
    width: 100%;
}
.grid_item.cover.landscape:not(.intersected_full) .item_link {
    width: 75%;
}
.grid_item.cover.landscape.intersected_full .item_link {
    width: 100%;
}
.grid_item.cover.square:not(.intersected_full) svg.cover_circle,
.grid_item.cover.landscape:not(.intersected_full) svg.cover_circle,
.grid_item.cover.portrait:not(.intersected_full) svg.cover_circle {
    aspect-ratio: 1/1;
}
.grid_item.cover.square.intersected_full svg.cover_circle {
    aspect-ratio: 1/1;
}
.grid_item.cover.landscape.intersected_full svg.cover_circle {
    aspect-ratio: 16/9;
}
.grid_item.cover.portrait.intersected_full svg.cover_circle {
    aspect-ratio: 3/4;
}
.grid_item.cover .item_link svg.cover_circle clipPath circle{
    transition-property: cx, cy, r;
    transition-duration: var(--transitionDurationSlow);
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.grid_item.cover:not(.intersected_full) svg.cover_circle clipPath circle {
    cx: 50%;
    cy: 50%;
    r: 50%;
}
.grid_item.cover.intersected_full svg.cover_circle clipPath circle {
    cx: 50%;
    cy: 50%;
    r: 100%;
}
.grid_item.cover.square:not(.intersected_full) .item_media {
    aspect-ratio: 1/1;
}
.grid_item.cover.square:not(.intersected_full) .item_media {
    aspect-ratio: 1/1;
}
.grid_item.cover.square.intersected_full .item_media {
    aspect-ratio: 1/1;
}
.grid_item.cover.landscape:not(.intersected_full) .item_media {
    aspect-ratio: 1/1;
}
.grid_item.cover.landscape.intersected_full .item_media {
    aspect-ratio: 16/9;
}
.grid_item.cover.portrait:not(.intersected_full) .item_media {
    aspect-ratio: 1/1;
}
.grid_item.cover.portrait.intersected_full .item_media {
    aspect-ratio: 3/4;
}
.grid_item.cover .item_media img,
.grid_item.cover .item_media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.grid_item.cover .item_media .media_fallback {
	position: absolute;
    inset: 0;
    z-index: 1;
    transition: opacity var(--transitionDurationXFast);
}
.item_media.ready .media_fallback {
    opacity: 0;
    pointer-events: none;
}

/***COVER DATA***/
.grid_item.cover .item_data {
    position: relative;
    padding-top: calc(var(--fontSizeSmall)*0.6);
    font-size: var(--fontSizeSmall);
    transition: opacity var(--transitionDurationXFast);
}
.grid_item.cover.hover a.item_link .item_data {
    opacity: 0;
}
.grid_item.cover:not(.intersected_full) .item_data {
    opacity: 0;
}
.grid_item.cover.intersected_full .item_data {
    opacity: 1;
}
.grid_item.cover .item_data .data_client {
    margin-right: calc(var(--fontSizeSmall)*0.3);
    font-family: var(--RoobertBold);
    color: var(--paletteWhite);
}
.grid_item.cover .item_data .data_title {
    font-family: var(--BradfordBook);
    color: var(--paletteRed);
}
.grid_item.cover .item_data .data_title,
.grid_item.cover .item_data .data_client {
    transition: color var(--transitionDurationXFast);
}
.grid_item.cover a:hover .item_data .data_title {
    color: var(--paletteWhite);
}
.grid_item.cover a:hover .item_data .data_client {
    color: var(--paletteRed);
}

/***GRID ITEM (TAGLINE)***/
.grid_item.tagline {
    position: relative;
    overflow: hidden;
    perspective-origin: center;
    perspective: 500vh;
    filter: drop-shadow(0px 1.5vw 3vh rgba(0, 0, 0, 0.3));
}
.grid_item.tagline .item_data {
    position: absolute;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.grid_item.tagline.square .item_data {
    justify-content: start;
    align-items: start;
    text-align: left;
}
.grid_item.tagline.circle .item_data {
    justify-content: center;
    align-items: start;
    text-align: center;
    /*border-radius: 100%;*/
}
.grid_item.tagline .item_data.back {
    z-index: -1;
    color: var(--paletteWhite);
    /*background: var(--paletteBlack);*/
}
.grid_item.tagline .item_data.front {
    z-index: 0;
    color: var(--paletteBlack);
}
.grid_item.tagline .item_data.inner {
    z-index: 1;
    color: var(--paletteWhite);
    background: var(--paletteBlack);
}
.grid_item.tagline .item_data .data_text {
    aspect-ratio: 1/1;
    width: 100%;
    padding: calc(var(--spaceY)*0.75) calc(var(--spaceX)*0.6);
    font-family: var(--BradfordBook);
    font-size: var(--fontSizeXLarge);
    /*border-radius: 100%;*/
}
.grid_item.tagline.square .item_data .data_text {
	text-align: left;
    /*border-radius: 100%;*/
}
.grid_item.tagline.circle .item_data .data_text {
    display: flex;
    align-items: center;
    padding: calc(var(--spaceY)*0.75) calc(var(--spaceX)*0.6);
    justify-content: center;
    align-items: center;
    text-align: center;
    /*border-radius: 100%;*/
}

/*** TAGLINE COLORS ***/
.grid_item.tagline .item_data.red {
    background: var(--paletteRed);
}
.grid_item.tagline .item_data.blue {
    background: var(--paletteBlue);
}
.grid_item.tagline .item_data.yellow {
    background: var(--paletteYellow);
}
.grid_item.tagline .item_data.black {
    background: var(--paletteBlack);
}
/*
.grid_item.tagline .item_color {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition-property: all;
    transition-duration: var(--transitionDurationSlow);
}
*/
/*
.grid_item.tagline.square .item_color.red {
    top: 0;
    left: 0;
    background: var(--paletteRed);
}
.grid_item.tagline .item_color.yellow {
    background: var(--paletteYellow);
}
.grid_item.tagline.blue .item_color.blue {
    background: var(--paletteBlue);
}
*/
/*
.grid_item.tagline.square:hover .item_data.front.red {
    width: 0;
}
*/

/*** TAGLINE MASKS AND MOTIONS ***/
.grid_item.tagline.square.move_x,
.grid_item.tagline.square.move_y,
.grid_item.tagline.square.move_xy,
.grid_item.tagline.square.rotate,
.grid_item.tagline.square.scale_inout,
.grid_item.tagline.square.scale_rotate_inout,
.grid_item.tagline.circle.move_x,
.grid_item.tagline.circle.scale_inout,
.grid_item.tagline.circle.scale_xy {
    aspect-ratio: 1/1;
}
.grid_item.tagline.circle.move_y {
    aspect-ratio: 3/4 ;
}
.grid_item.tagline.square > svg,
.grid_item.tagline.circle > svg {
    position: absolute;
    aspect-ratio: 1/1;
}


/***SQUARE***/
.grid_item.tagline.square > svg rect {
    transition-property: x, y, scale, rotate;
    transition-duration: var(--transitionDurationSlow);
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    
}
/***SQUARE ROTATE***/
.grid_item.tagline.square.rotate > svg rect {
    width: 100%;
    height: 100%;
    /*
    x: 0;
    y: 0;
    */
    transform-origin: center;
    /*transition-property: rotate;*/
    transition-duration: 0.6s;
}
.grid_item.tagline.square.rotate .item_data.front {
    aspect-ratio: 1/1;
}
@keyframes rotateSquare {
    0% {
        rotate: 0deg;
        animation-timing-function: cubic-bezier(0.25, 0.5, 0.75, 1);
    }
    100% {
        rotate: 720deg;
    }
}

/***SQUARE MOVE***/
.grid_item.tagline.square.move_x > svg rect,
.grid_item.tagline.square.move_y > svg rect,
.grid_item.tagline.square.move_xy > svg rect {
    width: 100%;
    height: 100%;
    x: 0;
    y: 0;
    transition-property: x, y, width, height, rotate;
    transition-duration: var(--transitionDurationSlow);
}
/*
.grid_item.tagline.square.scale_inout > svg clipPath {
    display: flex;
    justify-content: center;
    align-items: center;
}
*/
.grid_item.tagline.square.move_x > svg rect {
    /*
    animation-name: moveSquareX;
    animation-duration: 1.75s;
    animation-timing-function: cubic-bezier(0.15, 0.9, 0.35, 0.1);
    animation-iteration-count: infinite;
    animation-play-state: running;
    */
}
.grid_item.tagline.square.move_x:hover > svg rect {
    /*transform: translate();*/
    /*animation-play-state: paused;*/
}
.grid_item.tagline.square.move_y > svg rect {
    /*
    animation-name: moveSquareY;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    */
}
.grid_item.tagline.square.move_xy > svg rect {
    /*
    animation-name: moveSquareXY;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    */
}
.grid_item.tagline.square.move_x .item_data.front,
.grid_item.tagline.square.move_y .item_data.front,
.grid_item.tagline.square.move_xy .item_data.front {
    aspect-ratio: 1/1;
}
/*
.grid_item.tagline.square.move_x:hover > svg rect {
    x: 100%;
    y: 100%;
    width: 100%;
    height: 100%;
}
*/
@keyframes moveSquareX {
    0% {
        x: 100%;
    }
    100% {
        x: -100%;
    }
}
@keyframes moveSquareY {
    0% {
        y: -100%;
    }
    100% {
        y: 100%;
    }
}
@keyframes moveSquareXY {
    0% {
        x: -100%;
        y: -100%;
    }
    100% {
        x: 100%;
        y: 100%;
    }
}

/***SQUARE SCALE***/
.grid_item.tagline.square.scale_inout > svg.square_scale_out rect,
.grid_item.tagline.square.scale_inout > svg.square_scale_in rect {
    transition-property: x, y, transform;
    transition-duration: var(--transitionDurationSlow);
    transform-origin: center;
}
.grid_item.tagline.square.scale_inout > svg.square_scale_out rect {
    width: 100%;
    height: 100%;
    transform: scale(1) translate(-50%, -50%);
    /*
    x: 0%;
    y: 0%;
    */
}
.grid_item.tagline.square.scale_inout > svg.square_scale_in rect {
    width: 200%;
    height: 200%;
    transform: scale(1) translate(-50%, -50%);
    /*
    x: 0%;
    y: 0%;
    */
}
.grid_item.tagline.square.scale_inout > svg.square_scale_in rect {
    animation-name: scaleSquareIn;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
}
.grid_item.tagline.square.scale_inout > svg.square_scale_out rect {
    animation-name: scaleSquareOut;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
}
.grid_item.tagline.square.scale_inout:hover > svg.square_scale_in rect,
.grid_item.tagline.square.scale_inout:hover > svg.square_scale_out rect {
    animation-play-state: running;
}
.grid_item.tagline.square.scale_inout .item_data.front {
    clip-path: url(#square_scale_out);
}
.grid_item.tagline.square.scale_inout .item_data.inner {
    clip-path: url(#square_scale_in);
}
@keyframes scaleSquareIn {
    0% {
        /*
        x: 50%;
        y: 50%;
        */
        /*
        width: 0%;
        height: 0%;
        */
        transform: scale(0) translate(-50%, -50%);
    }
    50% {
        /*
        x: 50%;
        y: 50%;
        */
        /*
        width: 0%;
        height: 0%;
        */
        transform: scale(0) translate(-50%, -50%);
    }
    100% {
        /*
        x: 0;
        y: 0;
        */
        /*
        width: 100%;
        height: 100%;
        */
        transform: scale(1) translate(-50%, -50%);
    }
}
@keyframes scaleSquareOut {
    0% {
        /*
        x: 50%;
        y: 50%;
        */
        /*
        width: 0%;
        height: 0%;
        */
        transform: scale(0) translate(-50%, -50%);
    }
    50% {
        /*
        x: 0;
        y: 0;
        */
        /*
        width: 100%;
        height: 100%;
        */
        transform: scale(1) translate(-50%, -50%);
    }
    100% {
        /*
        x: 0;
        y: 0;
        */
        /*
        width: 100%;
        height: 100%;
        */
        transform: scale(1) translate(-50%, -50%);
    }
}

/***SQUARE SCALE AND ROTATE***/
.grid_item.tagline.square.scale_rotate_inout > svg.square_scale_rotate_out rect {
    width: 100%;
    height: 100%;
    x: 0%;
    y: 0%;
}
.grid_item.tagline.square.scale_rotate_inout > svg.square_scale_rotate_in rect {
    width: 0%;
    height: 0%;
    x: 0%;
    y: 0%;
}
.grid_item.tagline.square.scale_rotate_inout > svg.square_scale_rotate_in rect {
    animation-name: scaleRotateSquareIn;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-iteration-count: infinite;
    animation-play-state: running;
    rotate: 0deg;
    transform-origin: center;
}
.grid_item.tagline.square.scale_rotate_inout > svg.square_scale_rotate_out rect {
    animation-name: scaleRotateSquareOut;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-iteration-count: infinite;
    animation-play-state: running;
    rotate: 0deg;
    transform-origin: center;
}
.grid_item.tagline.square.scale_rotate_inout .item_data.front {
    clip-path: url(#square_scale_rotate_out);
}
.grid_item.tagline.square.scale_rotate_inout .item_data.inner {
    clip-path: url(#square_scale_rotate_in);
}
@keyframes scaleRotateSquareIn {
    0% {
        x: 50%;
        y: 50%;
        width: 0%;
        height: 0%;
        rotate: -180deg;
    }
    50% {
        x: 50%;
        y: 50%;
        width: 0%;
        height: 0%;
        rotate: -180deg;
    }
    100% {
        x: 0;
        y: 0;
        width: 100%;
        height: 100%;
        rotate: 0deg;
    }
}
@keyframes scaleRotateSquareOut {
    0% {
        x: 50%;
        y: 50%;
        width: 0%;
        height: 0%;
        rotate: 45deg;
    }
    50% {
        x: 0;
        y: 0;
        width: 100%;
        height: 100%;
        rotate: 0deg;
    }
    100% {
        x: 0;
        y: 0;
        width: 100%;
        height: 100%;
        rotate: 0deg;
    }
}

/***CIRCLE***/
.grid_item.tagline.circle > svg circle {
    cx: 50%;
    cy: 50%;
    transition-property: cx, cy, r;
    transition-duration: var(--transitionDurationSlow);
}

/***CIRCLE MOVE***/
.grid_item.tagline.circle.move_x > svg circle,
.grid_item.tagline.circle.move_y > svg circle {
    r: 50%;
}
/*
.grid_item.tagline.circle.scale_inout > svg.circle_scale_in circle {
    r: 0%;
}
*/
.grid_item.tagline.circle.move_x > svg circle {
    animation-name: moveCircleX;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.175, 0.75, 0.1, 1);
    animation-iteration-count: infinite;
    animation-play-state: running;
    
}
.grid_item.tagline.circle.move_y > svg circle {
    animation: moveCircleY 1.75s infinite, squeezeCircleY 1.75s infinite;
    /*
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-play-state: running;
    */
    transform-origin: bottom;
}
.grid_item.tagline.circle.move_x .item_data.front {
    clip-path: url(#circle_move_x);
}
.grid_item.tagline.circle.move_y .item_data.front {
    clip-path: url(#circle_move_y);
}
@keyframes moveCircleX {
    0% {
        cx: -50%;
    }
    50% {
        cx: 50%;
    }
    100% {
        cx: 150%;
    }
}
@keyframes moveCircleY {
    0% {
        cy: 50%;
        animation-timing-function: cubic-bezier(0.75, 0, 0.75, 0.75);
    }
    50% {
        cy: 93%;
        animation-timing-function: cubic-bezier(0.1, 0.25, 0, 1);
    }
    100% {
        cy: 50%;
        /*animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);*/
    }
}
@keyframes squeezeCircleY {
    0% {
        transform: scaleY(1);
    }
    43% {
       transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.8);
    }
    57% {
        transform: scaleY(0.9);
    }
    100% {
       transform: scaleY(1);
    }
}

/***CIRCLE SCALE***/
.grid_item.tagline.circle.scale_xy > svg.circle_scale_xy circle,
.grid_item.tagline.circle.scale_inout > svg.circle_scale_out circle {
    r: 50%;
}
.grid_item.tagline.circle.scale_xy > svg.circle_scale_xy circle {
    r: 50%;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
/*
.grid_item.tagline.circle.scale_xy:hover > svg.circle_scale_xy circle {
    r: 0%;
}
.grid_item.tagline.circle.scale_xy > svg.circle_scale_xy circle {
    animation-name: scaleCircleXY;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
*/
.grid_item.tagline.circle.scale_inout > svg.circle_scale_in circle {
    animation-name: scaleCircleIn;
    animation-duration: 2.25s;
    animation-timing-function: cubic-bezier(1, 0.5, 0.25, 0.75);
    animation-iteration-count: infinite;
    animation-play-state: running;
}
.grid_item.tagline.circle.scale_inout > svg.circle_scale_out circle {
    animation-name: scaleCircleOut;
    animation-duration: 2.25s;
    animation-timing-function: cubic-bezier(1, 0.5, 0.25, 0.75);
    animation-iteration-count: infinite;
    animation-play-state: running;
}
@keyframes scaleCircleXY {
    0% {
        r: 50%
    }
    50% {
        r: 0%;
    }
}
@keyframes scaleCircleIn {
    0% {
        r: 0%
    }
    50% {
        r: 0%
    }
    100% {
        r: 142%;
    }
}
@keyframes scaleCircleOut {
    0% {
        r: 0%
    }
    50% {
        r: 142%;
    }
    100% {
        r: 142%;
    }
}
/*
@keyframes spinX {
    0% {
        cx: -100%;
    }
    100% {
        cx: 150%;
    }
}
*/

/***TAGLINES INTERACTIONS***/
.tagline.square.move_x {
    
}

/***GRID ANIMATIONS
*****************************************************/
/*
.grid_item.tagline .item_data {
    
    transform-style: preserve-3d;
    animation-name: spin;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-play-state: running;
}
.grid_item.tagline.square .item_data {
    justify-content: start;
    align-items: start;
    text-align: left;
}
*/


/***PROJECT
*****************************************************/
section.video {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
section.video .video_listener {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: pointer;
}
section.video iframe {
    width: 100%;
    height: 100%;
}
section.video article.video_item,
section.video article.video_item iframe {
    width: 100%;
    height: 100%;
}

/***VIDEO CONTROLS***/
.video_control {
    position: fixed;
    left: 0;
    bottom: var(--spaceY);
    padding-inline: var(--spaceX);
    width: 100%;
}
.video_control .control_bar {
    position: relative;
    margin-bottom: calc(var(--rowGutterSmall)*0.5);
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--spaceX);
}
.video_control .control_bar button {
	font-size: var(--fontSizeSmall);
}
.control_bar .bar_buttons {
    display: flex;
    align-items: center;
    column-gap: var(--spaceX);
}
.bar_buttons button,
.bar_buttons span,
.bar_buttons a {
    color: var(--paletteWhite);
    transition: color var(--transitionDurationXFast);
    cursor: pointer;
}
.bar_buttons button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--RoobertBold);
    line-height: var(--lineHeightNatural);
}
.bar_buttons button:hover,
.bar_buttons button.active,
.bar_buttons span:hover,
.bar_buttons span.active,
.bar_buttons a:hover {
    color: var(--paletteRed);
}
.bar_buttons button:focus {
    outline: none;
}
.bar_buttons #pause_toggle {
    width: 10px;
    height: 10px;
    aspect-ratio: 1/1;
    background: var(--paletteWhite);
    transition: background var(--transitionDurationXFast);
}
.bar_buttons #pause_toggle:hover {
    background: var(--paletteRed);
}
.bar_buttons #pause_toggle.stop {
    font-size: var(--fontSizeMedium);
}
.bar_buttons #pause_toggle.play {
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}
*/
.bar_buttons #time_info {
    width: 90px;
}
.video_control #progress_bar {
    width: auto;
    height: 2px;
    background: rgba(235, 235, 221, 0.3);
    cursor: pointer;
}
.video_control #progress {
    width: 0;
    height: 100%;
    opacity: 1;
    background: var(--paletteWhite);
}

/***PROJECT INFO***/
.video_info,
.video_share {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: calc(var(--rowGutterSmall)*1);
    text-align: center;
    width: 100vw;
    height: 100vh;
    padding-inline: var(--spaceX);
    padding-block: var(--mainTopSpace) calc(var(--mainBottomSpace)*0.5);
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(1vw);
    backdrop-filter: blur(1vw);
    transition: opacity var(--transitionDurationXFast);
}
.video_info:not(.open),
.video_share:not(.open) {
    opacity: 0;
    pointer-events: none;
}
.video_info.open,
.video_share.open {
    opacity: 1;
    pointer-events: auto;
}
.video_info {
	/*
    justify-content: center;
    */
	justify-content: start;
	overflow-y: scroll;
    text-align: center;
}
.video_share {
    justify-content: end;
    text-align: left;
}
.video_info > *,
.video_share > * {
    width: calc(var(--colWidth)*3 + var(--colGutter)*2);
}
.video_info .info_main,
.video_share .share_main {
    font-size: var(--fontSizeLarge);
}
.video_info .info_credits {
    line-height: var(--lineHeightHigh);
}
.video_info .info_credits .credits_title {
    margin-bottom: var(--rowGutterSmall);
    opacity: 0.3;
}
.video_info .credits_stack .credit_row {
    display: flex;
    justify-content: center;
    column-gap: calc(var(--spaceX)*0.5);
}
.video_info .credits_stack .credit_row {
    display: flex;
    justify-content: center;
    column-gap: calc(var(--spaceX)*0.5);
}
.video_info .credit_row > * {
    flex: 1; 
}
.video_info .credit_row .row_role {
    text-align: right; 
    opacity: 0.3;
}
.video_info .credit_row .row_name {
    text-align: left;
}
.video_share .share_link .link_title {
    margin-bottom: var(--rowGutterSmall);
}
.video_share .share_link .link_title span {
    opacity: 0.5;
    transition: opacity var(--transitionDurationXFast);
    cursor: pointer;
}
.video_share .share_link .link_title span:hover {
    opacity: 1;
}
/***SHARE PROJECT INPUT***/
.video_share .share_link .link_url {
    position: relative;
    margin-bottom: var(--rowGutterSmall);
    z-index: 0;
    display: flex;
    align-items: center;
    column-gap: calc(var(--spaceX) * 0.1);
}
.link_url .input_text {
    flex-grow: 1;
    padding:
    	calc(var(--spaceY) * 0.425)
        calc(var(--rowGutterSmall) + var(--spaceY)*1.5)
        calc(var(--spaceY) * 0.45)
        calc(var(--spaceX) * 0.5);
    border-radius: calc(var(--spaceY) * 0.75);
    color: var(--paletteGray);
    background: rgba(75, 75, 75, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition-property: background;
    transition-duration: var(--transitionDurationXFast);
    user-select: none;
}
.link_url.copied .input_text {
	background: rgba(236, 231, 221, 0.75);
}
.link_url .input_submit {
    position: absolute;
    right: calc(var(--spaceX) * 0.25);
    height: 75%;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    color: var(--paletteBlack);
    background: var(--paletteWhite);
    box-shadow: inset 3px -3px 3px gray;
    transition-property: background, box-shadow;
    transition-duration: var(--transitionDurationXFast);
    cursor: pointer;
}
.link_url.copied .input_submit {
	background: var(--paletteRed);
    box-shadow: inset 3px -3px 3px rgba(0, 0, 0, 0.75);
}

/***FOOTER
*****************************************************/
footer {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: var(--gridTemplate);
    column-gap: var(--colGutter);
    width: 100%;
    padding: calc(var(--fontSizeSmall)*3) var(--spaceX);
    font-size: var(--fontSizeSmall);
    background: var(--paletteGray);
}
footer a {
    color: var(--paletteWhite);
}
footer a:hover {
    color: var(--paletteRed);
}
footer .footer_stack.address {
    grid-column: 1/6;
    display: flex;
    column-gap: var(--colGutter);
}
footer .footer_stack.contact {
    grid-column: 6/10;
    display: flex;
    flex-direction: column;
}
.footer_stack.address .address_title {
    width: calc(var(--colWidth)*2 + var(--colGutter));
}
.footer_stack.address .address_content {
    display: flex;
    flex-direction: column;
    row-gap: var(--rowGutterSmall);
}
.footer_stack.contact .stack_item {
    display: flex;
    column-gap: var(--colGutter);
}
.stack_item .contact_title {
    width: var(--colWidth);
}
.footer_stack.contact .stack_item.newsletter {
    margin-top: calc(var(--rowGutterSmall)*2);
    align-items: center;
}

/***FOOTER INPUT***/
.stack_item.newsletter .newsletter_form,
.stack_item.newsletter form.subscription_form {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    column-gap: calc(var(--spaceX)*0.1);
    width: 100%;
    /*width: calc(var(--colWidth)*3 + var(--colGutter)*2);*/
}
.stack_item.newsletter form.subscription_form .hiddenFields {
	display: none;
}
.newsletter_form .input_text,
form.subscription_form input.input_email {
    flex-grow: 1;
    padding: calc(var(--spaceY)*0.425) calc(var(--spaceX)*0.5) calc(var(--spaceY)*0.45);
    border-radius: calc(var(--spaceY)*0.75);
    color: var(--paletteWhite);
    background: rgba(75, 75, 75, 0.75);
    transition-property: background, color;
    transition-duration: var(--transitionDurationXFast);
}
form.subscription_form.message input.input_email {
    color: transparent;
    pointer-events: none;
}
form.subscription_form input.input_email:focus {
	color: var(--paletteBlack);
    background: var(--paletteWhite);
}
.newsletter_form .input_submit,
form.subscription_form input[name="submit"] {
    position: absolute;
    right: calc(var(--spaceX)*0.25);
    height: 75%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    color: var(--paletteBlack);
    background: var(--paletteWhite);
    box-shadow: inset 3px -3px 3px gray;
    transition-property: background, box-shadow;
    transition-duration: var(--transitionDurationXFast);
    cursor: pointer;
}
.input_email:focus ~ input[type="submit"],
.subscription_form:focus-within input[type="submit"] {
    box-shadow: inset 3px -3px 3px var(--paletteBlack);
    background: var(--paletteRed);
}
.newsletter_form .input_submit:hover {
    background: var(--paletteGray);
    box-shadow: inset 3px -3px 3px var(--paletteBlack);
}
.footer_stack.contact .stack_item.newsletter {
    margin-top: calc(var(--rowGutterSmall)*2);
    align-items: center;
}
form.subscription_form .response_message {
	position: absolute;
    color: var(--paletteWhite);
    left: calc(var(--spaceX) * 0.6);
    transition-property: opacity;
    transition-duration: var(--transitionDurationXFast);
}
.footer_stack.contact .stack_item.signature {
    flex-grow: 1;
    justify-self: end;
    display: flex;
    align-items: end;
    font-size: var(--fontSizeXSmall);
    color: #3b3b3b;
}