/**** RESET ****/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:0; paddgin:0;
  outline:none;
  font-size:1em;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  font-size:1em;
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/**** Styles ****/
/*********************************************** Structure ************************************************/

body, a, h1, h2, h3, h4, p, #lightbox, #lightbox * {transition:all 0.2s; -webkit-transition:all 0.2s;}


#fv_loader      { position: fixed; top:0; left:0; height:4px; background-color:var(--accent-gold-1); z-index:99999; width:0; opacity:0; }
#fv_transition  { position: fixed; top:0; left:0; width:0; height:100%; background-color:#eeeeee; z-index: 99998; overflow: hidden; }

/* ::-webkit-scrollbar { display: none; } */

:root {
  --section-bg-color-light: #F8F8F8;
  --section-bg-color-dark:  #191D1E;
  --deep-dark: #151818;

  --faded-bg-color-light: #C5CED8;
  --faded-bg-color-dark: #191D1E;

  --faded-text-color-light: #A6B4C2;
  --faded-text-color-dark: #303637;

  --text-color-light:#151818;
  --text-color-dark: #FFFFFF;

  --display-color-light-on: #151818;
  --display-color-light-off:#ECECEC;

  --accent-gold-1: #FFCD5D;
  --accent-gold-2: #F9B92A;
  --accent-dark-1: #151818;

  --spacer-xxl:200px;
  --spacer-xl:90px;
  --spacer-l: 50px;
  --spacer-m: 30px;
  --spacer-s: 20px;

  --border-radius:16px;

}

.mt-xl{ margin-top:var(--spacer-xl)!important }
.mt-l { margin-top:var(--spacer-l)!important }
.mt-m { margin-top:var(--spacer-m)!important }
.mt-s { margin-top:var(--spacer-s)!important }

.mb-xl{ margin-bottom:var(--spacer-xl)!important }
.mb-l { margin-bottom:var(--spacer-l)!important }
.mb-m { margin-bottom:var(--spacer-m)!important }
.mb-s { margin-bottom:var(--spacer-s)!important }

.mr-xl{ margin-right:var(--spacer-xl)!important }
.mr-l { margin-right:var(--spacer-l)!important }
.mr-m { margin-right:var(--spacer-m)!important }
.mr-s { margin-right:var(--spacer-s)!important }

.pt-xxl { padding-top:var(--spacer-xxl)!important }
.pb-xxl { padding-bottom:var(--spacer-xxl)!important }

.pt-xl{ margin-top:var(--spacer-xl)!important }
.pt-l { margin-top:var(--spacer-l)!important }
.pt-m { margin-top:var(--spacer-m)!important }
.pt-s { margin-top:var(--spacer-s)!important }

.pb-xl{ margin-bottom:var(--spacer-xl)!important }
.pb-l { margin-bottom:var(--spacer-l)!important }
.pb-m { margin-bottom:var(--spacer-m)!important }
.pb-s { margin-bottom:var(--spacer-s)!important }

.pr-xl{ margin-right:var(--spacer-xl)!important }
.pr-l { margin-right:var(--spacer-l)!important }
.pr-m { margin-right:var(--spacer-m)!important }
.pr-s { margin-right:var(--spacer-s)!important }

.wrap                 { overflow: hidden; opacity:0; transition:all 0.25s; -webkit-transition:all 0.25s; position: relative }
.loaded               { opacity: 1 }
.nooverflow           { overflow: hidden }
.overflow             { overflow: visible }
.none                 { display: none; opacity:0; position: absolute; top:-10000px; left:-10000px; width:0px; height:0px; overflow: hidden; z-index: -1 }
.hidden               { display: none }
.scale0               { transform:scale(0,0); -webkit-transform:scale(0,0); }
.abs                  { position:absolute; }
.fullwidth            { width:100% }
.abs.fullwidth        { left:0; right:0; }
.below                { z-index:9 }
.above                { z-index:11 }

.vh200                { height:200vh }
.vh100                { height:100vh }
.vh90                 { height:90vh }
.vh80                 { height:80vh }
.vh70                 { height:70vh }
.vh60                 { height:60vh }
.vh50                 { height:50vh }
.vh40                 { height:40vh }
.vh30                 { height:30vh }
.vh20                 { height:20vh }
.vh10                 { height:10vh }

.spinner              { position: absolute; display: block; overflow: hidden; z-index:30; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; }
.spinner svg          { width:24px; height: 24px; flex: left; transition:all 0.25s; -webkit-transition:all 0.25s; transform:scale(0); -webkit-transform:scale(0); opacity:0; }
.spinner.active svg   { transform:scale(1); -webkit-transform:scale(1); opacity:1; }
.spinner              { -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite }


.fv_cursor .inner .spinner   { width:100px; height:100px; margin:-50px 0 0 -50px }
.fv_cursor .inner .spinner svg { width:100px; height:100px; }

.fv_cursor.loading .inner .spinner svg { transform:scale(1); -webkit-transform:scale(1); opacity:1; }

.dark                 { color:var(--text-color-dark) }
.dark.deepdark, .deepdark { background-color:var(--deep-dark) }
.dark #wordmark path  { fill:#ffffff }
.accentcolor          { color:var(--accent-gold-2) }
.opacity25            { opacity:0.25 }
.fade50, .opacity50   { opacity:0.5 }
.opacity75            { opacity:0.75 }
.opacity0             { opacity:0 }

.shim                 { position: absolute; z-index:9; left:0; right:0; bottom:-1px; top:0; background:rgba(0,0,0,0.5); }
.bgfx                 { transition: all 1s cubic-bezier(.17,.67,.22,.98); -webkit-transition:all 1s cubic-bezier(.17,.67,.22,.98); background-size: cover; background-position: center center; background-repeat: no-repeat; transform:scale(1,1); -webkit-transform:scale(1,1); opacity:0.7; }
section.active .bgfx  { transform:scale(1.05,1.05); -webkit-transform:scale(1.05,1.05); opacity:1; transition: all 8s cubic-bezier(.17,.67,.22,.98); -webkit-transition:all 8s cubic-bezier(.17,.67,.22,.98); }

.testimonial img { width:100px; margin-left:auto; margin-right:auto }

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/*********************************************** Context menu ************************************************/

.contextmenu-wrap           { position:fixed; z-index: 100; bottom:30px; left:0; right:0; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:10px; }
.contextmenu                { display:flex; flex-direction:row; justify-content:space-between; align-items:center; background-color: rgba(220,220,220, 0.6); border-radius: 50px; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding:5px 10px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out }
.contextmenu.hidden         { bottom:-100px }
.contextmenu-items          { display:flex; flex-direction:row; justify-content:space-evenly; align-items:center; white-space: nowrap; transform:rotate(0deg) translate3d(0,0,0); transform-origin: bottom left; margin:0 auto; padding:5px 0; gap:0px }

.contextmenu-items a        { color:var(--text-color-light); padding:6px 12px; border-radius:30px; opacity:1; text-decoration:none; font-weight:500 }
.contextmenu-items a.active { color:var(--text-color-dark); background-color:var(--accent-dark-1) }
.contextmenu-items span     { display:none }

.dark .contextmenu                { background-color: rgba(70,70,70,0.5); }
.dark .contextmenu-items a        { color:var(--text-color-dark) }
.dark .contextmenu-items a.active { color:var(--text-color-light); background-color:var(--accent-gold-1) }


/*********************************************** Lightbox ************************************************/

.zmenu          { position: fixed; top:0; left:0; right:0; height:100vh; max-height:100vh; z-index: 21; display: none; opacity: 0; }
.zmenu.active   { display: block; }

.zpanel         { position: absolute; top:0; left:0; right:0; bottom:0; overflow: auto; -webkit-overflow-scrolling:touch; border-bottom:1px solid transparent; display: none; z-index: 21 }
.zpanel.light   { background-color: rgba(240,240,240,0.9) }
.zpanel.white   { background-color: #ffffff }
.zpanel.alt     { background-color: #191D1E }
.zpanel.darkbg  { background-color: rgba(0,0,0,0.8) }
.zpanel.flex.active { display: flex; align-items:center; }
.zpanel.flex section { flex-grow:1; }
.zpanel header  { justify-content:flex-end; position: fixed; left:auto; right:0; width:100px; padding-bottom:0; }

.zpanel.active  { display: block; }

.lightbox_src   { width:100%; margin:auto; cursor: zoom-out }

.lightbox_container         { position: absolute; z-index: 11; width:90vw; min-height: 100vh; left:5vw; right:5vw; }
video.lightbox_video,
img.lightbox_image          { width:100%; max-width: 1600px; transition:all 0.5s; -webkit-transition:all 0.5s; border-radius:8px; margin:5vh auto; }

@media all and (max-height:600px){
  .zpanel.flex.active { align-items: flex-start; padding:100px 0; }
}

.lightbox_zoomout           { cursor: zoom-out }

a.small_close             { text-decoration: none; font-size:25px; color:#fff; width:40px; height:40px; position: absolute; top:0; right:0; z-index:12; text-align: center; line-height: 40px; opacity: 0.3; transition:all 0.25s; -webkit-transition:all 0.25s; }
a.small_close:hover         { opacity: 1; color:#007fff; }
a.small_close.circle        { background: rgba(0,0,0,0.5); opacity:1; border-radius:50%; overflow: hidden; color:#ffffff; top:15px; right:15px; position: fixed; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
a.small_close.circle:hover      { color:#000000; background: #FFCD5D; }

a.chevron-prev,
a.chevron-next { padding:10px; display: block; border-radius: 50%; overflow: hidden; background-color: rgba(0,0,0,0.1); transition:all 0.25s; -webkit-transition:all 0.25s; }

a.chevron-prev svg,
a.chevron-next svg { display: block; width:20px; height:20px; transition:all 0.25s; -webkit-transition:all 0.25s }

a.chevron-prev:hover,
a.chevron-next:hover { background: #FFCD5D; box-shadow:0px 0px 40px rgba(0,0,0,0.2) }

svg .chevron-path { fill:#fff; }

a.chevron-prev:hover svg .chevron-path,
a.chevron-next:hover svg .chevron-path { fill:#000 }

a.chevron-prev          { margin:6px 3px 6px 6px }
a.chevron-next          { margin:6px 6px 6px 3px }

.lightbox_controls_container { position:fixed; z-index: 12; bottom:30px; left:0; right:0; display:flex; flex-direction:row; justify-content:center; align-items:center  }
.lightbox_controls { border-radius:30px; background:rgba(0,0,0,0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display:flex; flex-direction:row; justify-content:space-between; align-items:center }

/*********************************************** Layout ************************************************/

body      { font-family:"Inter", sans-serif; font-optical-sizing: auto; font-style: normal; background-color:var(--section-bg-color-light); font-weight:300; overflow-x:hidden; }
.page     { position:relative; z-index:10; margin:0 auto; background-color:var(--section-bg-color-light); color:var(--text-color-light); }

header    { padding:50px; position:absolute; top:0; left:0; right:0; z-index: 11; display:flex; flex-direction:row; justify-content:space-between; align-items:center }
footer    { margin:0; padding:0 }
footer svg.img,
header svg.img { width:130px }

nav       { position:relative; z-index: 11; display:flex; flex-direction:row; justify-content:flex-end; align-items:center; gap:20px }
nav a     { text-decoration:none; color:currentColor; opacity:0.5 }
nav a:hover, nav a:focus, nav a:active,
nav a.active { opacity:1 }
nav a.active { border-bottom: 2px solid var(--accent-gold-1); font-weight:bold }
nav a.menu{ width:42px; height:42px; border-radius:21px; border:1px solid rgba(0,0,0,0.1); display:flex; flex-direction:row; justify-content:center; align-items:center; }

.dark nav a.menu { border-color:rgba(255,255,255,0.1) }
.dark nav a.menu svg path { fill:var(--text-color-dark); }

.page-menu a,
section   { position:relative; z-index:10; padding:0 120px; overflow:hidden; }
section.hero { padding-top:var(--spacer-xxl); }

section .page-menu { margin:0 -120px }

.page-menu a { text-decoration:none; color:currentColor; position:relative; z-index: 10; display: block; padding-top:45px; padding-bottom:45px }
.page-menu a p::before { display:block; position:absolute; top:50%; margin-left:-50px; content:"→"; opacity:0.25; transform:translateY(-50%); }
.page-menu a p { display:flex; flex-direction:row; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto}
.page-menu a p span { opacity:0.8; font-weight:500 }
.page-menu a p span.meta { border-radius:20px; display:block; padding:1px 10px; text-transform:uppercase; font-weight:300; opacity:0.4; font-size:10px; }


.dark #section-secondary .page-menu a:hover,
.page-menu a:hover { background-color:#fff }

.dark .page-menu a:hover { background-color:var(--accent-dark-1) }

.dark #section-secondary .page-menu,
.page-menu { border-bottom:1px solid rgba(0,0,0,0.1) }

.dark #section-secondary .page-menu a p span.meta,
.page-menu a p span.meta { background-color:#ECECEC }

.dark #section-secondary .page-menu a,
.page-menu a { border-top:1px solid rgba(0,0,0,0.1) }

.dark #section-secondary .page-menu a p::before,
.page-menu a p::before {color:currentColor;}

.dark #section-secondary .page-menu a.active,
.page-menu a.active { background-color:var(--accent-dark-1); color:var(--text-color-dark); }

.dark #section-secondary .page-menu a.active p:before,
.page-menu a.active p:before{color: var(--text-color-dark); opacity: 1 }

.dark #section-secondary .page-menu a.active p span,
.page-menu a.active p span { opacity:1; font-weight:40 0 }

.dark #section-secondary .page-menu a.active p span.meta,
.page-menu a.active p span.meta { background-color:#ffffff; color:var(--text-color-light); opacity:1; font-weight: 500 }


.dark .page-menu a.active { background-color:var(--accent-gold-1); color:var(--text-color-light); }
.dark .page-menu a.active p:before{color: var(--text-color-light); opacity: 1 }
.dark .page-menu a.active p span.meta { background-color:var(--accent-dark-1); color:var(--text-color-dark); opacity:1}

.dark .page-menu { border-bottom:1px solid rgba(255,255,255,0.1) }
.dark .page-menu a p span.meta { background-color:#34393A }
.dark .page-menu a { border-top:1px solid rgba(255,255,255,0.1) }
.dark .page-menu a p::before {color:#ffffff}

article   { position:relative; display: block; z-index:10; max-width:1200px; margin:0 auto }

#section-intro { background-image:url("/_s/img/Pattern-1-Light.svg"); background-position:0 0; background-repeat:no-repeat; }
#section-intro.dark,
.dark #section-intro { background-image:url("/_s/img/Pattern-1-Dark.svg") }

.dark
#pattern-2 { background-image:url("/_s/img/Pattern-2-Dark.svg"); background-position:top right; background-repeat:no-repeat; }
#pattern-2 { background-image:url("/_s/img/Pattern-2-Light.svg"); background-position:top right; background-repeat:no-repeat; position:absolute; top:0; left:0; right:0; height:100vh; z-index:9 }

#section-secondary.dark { background-color:var(--section-bg-color-dark); background-image:url("/_s/img/Pattern-3-Dark.svg"); background-position:bottom right; background-repeat:no-repeat;}
.dark #section-secondary { background-color:var(--section-bg-color-light); color:var(--text-color-light); background-image:url("/_s/img/Pattern-3-Light.svg"); background-position:bottom right; background-repeat:no-repeat;}

.dark #section-secondary .playlist-container,
.dark #section-secondary .playlist .cell { border-color:rgba(0,0,0,0.1) }

.dark #section-secondary
.flexgrid.playlist .cell .cc svg.icon path { fill:var(--text-color-light); }

.dark #section-secondary
.flexgrid.playlist .cell:hover  { background-color:#ffffff }

.dark #section-secondary #wordmark path  { fill:var(--accent-dark-1) }

#section-secondary { z-index:13 }

.rounded-container { overflow:hidden; border-radius:var(--border-radius); margin:50px; position:relative; z-index:20 }

a.large-cta { text-decoration:none; color:var(--accent-gold-2); letter-spacing:-0.04em; font-weight:300; position:relative; padding-right:3em }

/*a.large-cta:after { content:""; display:block; width:100px; height:100px; border-radius:60px; background-color:rgba(249,185,42, 0.1); background-image:url("/_s/img/Arrow-right.svg"); background-repeat: no-repeat; background-position: center center; position:absolute; right:-80px; top:50%; margin:-50px 0 0 0; z-index: -1; transition:all 0.25s; -webkit-transition:all 0.25s;}
a.large-cta:hover:after { background-color:rgba(249,185,42, 0.2); width:120px; height:120px; margin-top:-60px; right:-90px }*/

a.large-cta:after { content:""; display:block; width:3em; height:3em; border-radius:3em; background-color:rgba(249,185,42, 0.1); background-image:url("/_s/img/Arrow-right.svg"); background-repeat: no-repeat; background-position: center center; background-size:1.5em; position:absolute; right:0.5em; top:50%; margin:-1.5em 0 0 0; z-index: -1; transition:all 0.25s; -webkit-transition:all 0.25s }
a.large-cta:hover:after { background-color:rgba(249,185,42, 0.2); width:3.2em; height:3.2em; margin-top:-1.6em; right:0.4em }

a.large-cta.reel-cta:hover:after { background-color:rgba(249,185,42, 0.6); width:400px; height:400px; margin-top:-200px; margin-right:-200px; right:-45px; border-radius:200px }

.scrolldash-container { height:100px; position:relative; }
.scrolldash   { height:100%; width:2px; background-color:var(--accent-gold-1); margin-left: 0; position:absolute; top:0; left:0; -webkit-animation:scrolldashanimation 2s linear infinite; -moz-animation:scrolldashanimation 2s linear infinite; animation:scrolldashanimation 2s linear infinite }

.vdash { height:100px; margin-left:auto; margin-right:auto; border:1px solid rgba(0,0,0,0.2); border-width:0 0 0 1px; width:1px }
.dark .vdash { border-color:rgba(255,255,255,0.1) }

body.dark, .dark .page, .dark section, section.dark { color:var(--text-color-dark); }
.dark .page { background-color:var(--section-bg-color-dark) }

.page { overflow:hidden; }

.faded-text h1.display,
.faded-text { color:var(--faded-text-color-light); }

.dark .faded-text h1.display,
.dark .faded-text { color:var(--faded-text-color-dark) !important; }

/*
section { color:var(--faded-text-color-light) }
section.active { color:var(--text-color-light) }

.dark section, section.dark { color:var(--faded-text-color-dark) }
.dark section.active, section.dark.active { color:var(--text-color-dark) } */

footer a { text-decoration:none; color:currentColor; }

a.deco                              { text-decoration:none; color:var(--accent-gold-1); }
.dark a.deco:after                  { border-color:var(--accent-gold-2) }

a.deco                              { position: relative; z-index:12 }
a.deco:after                        { content:""; position: absolute; z-index:12; bottom:-5px; width:0; border-bottom:2px solid var(--accent-gold-1); left:0; z-index: -1; transition:0.2s all cubic-bezier(.23,.71,.08,.78); -webkit-transition:0.2s all cubic-bezier(.23,.71,.08,.78); }
a.deco.active:after,
a.deco:focus:after,
body.desktop a.deco:active:after, 
body.desktop a.deco:hover:after     { opacity:1; width:100%; left:0;}


/*********************************************** Typography ************************************************/

h1.display  { font-family: "DM Sans", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight:700; font-size:100px; letter-spacing:-0.01em; line-height:1em }
h1,h2,h3,h4 { font-family:"Inter", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight:200; line-height:1.5em; letter-spacing:-0.02em }

/*.large-cta, */
h1        { font-size:36px; }
h2        { font-size:32px }
h3        { font-size:24px }
h4        { font-size:20px }

p         { font-size:18px; line-height:1.5em }
.ts-m     { font-size:14px; line-height:1.5em }
.ts-s     { font-size:12px; line-height:20px }
.ts-xs     { font-size:10px; line-height:10px }

.dark h1.display, h1.display.dark { color:var(--accent-gold-1) }

.heavy    { font-weight:700 }
.center   { text-align:center; }
.quote    { max-width:600px; margin-left:auto; margin-right:auto }


/*********************************************** Scrollspy Anchors ************************************************/

.scrollspy-anchor-wrap { position:fixed; z-index:13; display:block; margin-left:50px; margin-top:var(--spacer-xxl); }
.scrollspy-anchors { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; white-space: nowrap; transform:rotate(90deg) translate3d(0,0,0); transform-origin: bottom left; margin:-25px 0 0 -5px}
.scrollspy-anchors a { text-decoration:none; color:currentColor; opacity:0.5 }
.scrollspy-anchors a:hover, .scrollspy-anchors a:focus, .scrollspy-anchors a:active,
.scrollspy-anchors a.active { opacity:1; font-weight:500 }
.scrollspy-anchors span { opacity:0.2 }

.dark .scrollspy-anchors a.active { color:var(--accent-gold-1); }
.dark.faded .scrollspy-anchors a.active { color:var(--faded-text-color-dark) }

/*********************************************** Flexgrid ************************************************/

.flexgrid                       { box-sizing: border-box; position: relative; z-index: 12; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap }
.flexgrid.nowrap                { flex-wrap: nowrap }
.flexgrid.nowrap .cell          { flex-grow: 1 }
.flexgrid.reverse               { flex-wrap: wrap-reverse; }

.flexgrid .cell                 { display: flex; justify-content: center; align-items: stretch; align-content: space-between; position: relative; z-index: 12; flex-grow: 0; box-sizing: border-box }
.flexgrid .cell.col1            { width:8.33%   }
.flexgrid .cell.col2            { width:16.66%  } 
.flexgrid .cell.col3            { width:24.99%  }

.flexgrid .cell,
.flexgrid .cell.col4            { width:33.33%  }
.flexgrid .cell.col5            { width:41.66%  }
.flexgrid .cell.col6            { width:50%   }
.flexgrid .cell.col7            { width:58.32%  }
.flexgrid .cell.col8            { width:66.63%  }
.flexgrid .cell.col9            { width:74.98%  }
.flexgrid .cell.col10           { width:83.33%  }
.flexgrid .cell.col11           { width:91.63%  }
.flexgrid .cell.col12           { width:100%  }

.flexgrid.project-list.spaced.offset { overflow:visible; }

.viewport_desktop .flexgrid.project-list.offset .cell:nth-child(3n+2){ margin-top:-100px; }

.viewport_mobile .flexwrap .flexgrid.project-list.offset .cell:nth-child(2n) { margin-top:0 }
.viewport_mobile .flexgrid.project-list.offset .cell:nth-child(2n),
.viewport_tablet .flexgrid.project-list.offset .cell:nth-child(2n){ margin-top:-50px; }

.flexgrid .cell .cc             { padding:0; position: relative; white-space:normal; width:100%; }

.flexgrid.spaced                { margin-left:-10px; margin-right:-10px }
.flexgrid.spaced .cell .cc      { padding:10px }

.flexgrid.cards .cell .cc       { background-color:rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin:0 10px 20px; padding:var(--spacer-m); border-radius:var(--border-radius) }

.dark 
.flexgrid.cards .cell .cc       { background-color:rgba(20,20,20,0.5);}

.card-icon { display:block; width:50px; }

.project-tile a                 { display:block; background-colorr:var(--accent-gold-1); overflow:hidden; }
.project-tilee a:hover img      { opacity:0.7 }

.project-tile img               { width:100%; transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; }
.project-tile video             { width:100%; transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; opacity:1; display:block; }

.project-tile video.playing     { opacity:1 }

.flexgrid.project-list          { border-radius:var(--border-radius) }

.project-tile-wrap,
.flexgrid.spaced .project-tile a, 
.flexgrid.spaced .project-tile img, 
.flexgrid.spaced .project-tile video { border-radius:var(--border-radius); overflow:hidden; }

.project-tile span {transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; position:absolute; top:20px; left:20px; color:rgba(255,255,255,0.7); z-index:14; display:block; padding:4px 8px; background-color:rgba(0,0,0,0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius:20px; opacity:0; text-align:center; min-width:60px }
.project-tile:hover span       { opacity:1 }

.case-study-container { background-color:var(--accent-dark-1); border-radius:var(--border-radius); overflow:hidden; }
.dark #section-secondary .case-study-container { background-color:#ffffff }

/*********************************************** Marquee ************************************************/

.marquee                { width:100%; overflow:hidden; position:relative; }
.marquee .curtain-left  { position:absolute; z-index:12; top:0; left:0; width:10vw; bottom:0; background: linear-gradient(90deg, rgba(248,248,248,1) 20%, rgba(248,248,248,0) 100%); }
.marquee .curtain-right { position:absolute; z-index:12; top:0; right:0; width:10vw; bottom:0; background: linear-gradient(90deg, rgba(248,248,248,0) 0%, rgba(248,248,248,1) 80%); }

.dark .marquee .curtain-left  { position:absolute; z-index:12; top:0; left:0; width:10vw; bottom:0; background: linear-gradient(90deg, rgba(25,29,30,1) 20%, rgba(25,29,30,0) 100%); }
.dark .marquee .curtain-right { position:absolute; z-index:12; top:0; right:0; width:10vw; bottom:0; background: linear-gradient(90deg, rgba(25,29,30,0) 0%, rgba(25,29,30,1) 80%); }

.marquee .strip         { position:relative; z-index:11; white-space:nowrap; display:flex; display: flex; flex-direction:row; justify-content: flex-start; flex-wrap:nowrap }
.marquee .strip .tile   { min-width:200px; flex-grow:0 }
.marquee .strip .tile img { width:100px }

.dark .marquee .strip .tile img { filter:invert(1); }

.forward {
    animation: marquee-move-text var(--speed, 30s) linear infinite var(
      --direction,
      forwards
    );
}

.backward {
    animation: marquee-move-text var(--speed, 30s) linear infinite var(
      --direction,
      reverse
    );
}

@keyframes marquee-move-text {
  to {
    transform: translateX(-1800px);
  }
}

/*********************************************** Playlist ************************************************/

.playlist-container             { border-radius:var(--border-radius); border:1px solid rgba(0,0,0,0.1); overflow:hidden }
.flexgrid.playlist              { margin:0 -2px -1px 0 }
.flexgrid.playlist .cell .cc    { padding:20px }


.dark
.flexgrid.playlist .cell .cc svg.icon path { fill:var(--text-color-dark); }
.flexgrid.playlist .cell .cc svg.icon path { fill:var(--text-color-light); }

.flexgrid.playlist .cell .cc svg.icon,
.flexgrid.playlist .cell .cc img{ margin-bottom:30px }
.flexgrid.playlist .cell        { border:1px solid rgba(0,0,0,0.1); border-width:0 1px 1px 0 }

.flexgrid.playlist .cell        { cursor:pointer }
.flexgrid.playlist .cell:hover  { background-color:#ffffff }

.dark .playlist-container,
.dark .flexgrid.playlist .cell  { border-color:rgba(255,255,255,0.1) }

.dark
.flexgrid.playlist .cell:hover  { background-color:#000 }

a.thumb { display:block; border-radius:35px; position: relative; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out }
a.thumb div { margin:0 auto; display:block; width:70px; height:70px; position:relative; border-radius:35px; overflow:hidden; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; border:2px solid rgba(0,0,0,0.2) }
a.thumb:hover div { border:3px solid var(--accent-gold-1) }

.dark a.thumb div { border-color:rgba(220,220,220,0.2) }
.dark a.thumb:hover div { border-color:var(--accent-gold-1) }

a.thumb:after { content:""; display:block; width:100px; height:100px; border-radius:60px; background-color:rgba(249,185,42, 0.1); position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; z-index: -1; transition:all 0.15s; -webkit-transition:all 0.15s; opacity: 0; transform:scale(0.8)}
a.thumb:hover:after { background-color:rgba(249,185,42, 0.2); opacity:1; transform:scale(1) }

/*********************************************** Next project tile ************************************************/

.related-project        { transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; display: block; overflow:hidden; text-align: center; color:currentColor; text-decoration:none; background-position:center center; background-repeat:no-repeat; background-size:cover; position:absolute; left:100px; right:100px; top:100px; bottom:100px; border-radius:8px; opacity:0.05 }
section.active .related-project { transition:all 2s ease-out; -webkit-transition:all 2s ease-out; opacity:0.2; ttransform:scale(1.1) }

/*********************************************** Utility ************************************************/

.valign { align-items: center; display:flex; }
.balign { align-items:flex-end; display:flex; }
.bordertop { border-top:1px solid rgba(0,0,0,0.1); }
.borderbottom { border-bottom:1px solid rgba(0,0,0,0.1); }
.ta-right { text-align:right; }
.marginauto { margin-left:auto; margin-right:auto }

.dark .bordertop,
.dark .borderbottom { border-color:rgba(255,255,255,0.1) }

.transparent { background:transparent !important; }


/*********************************************** Animations ************************************************/


@keyframes scrolldashanimation {
  0% {
    height:100%;
    top:0;
  }

  20% {
    height:0;
    top:100%;
  }

  80% {
    height:0;
    top:0;
  }

  100% {
    height:100%;
    top:0;
  }
}

/*********************************************** Play-stop button ************************************************/

body.no_cursor *,
body.no_cursor  { cursor:none !important; }

/*

fv_cursor
  custom-cursor-content
    play-stop-button
      inner
      video
*/

.fv_cursor_backdrop { transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; position: fixed; top:0; left:0; right:0; bottom:-100px; z-index:-1; display:block; background-color:rgba(0,0,0,0.1); opacity:0 }
.fv_cursor_backdrop.active { z-index:98; opacity:1 }
.fv_cursor { transition:all 0.1s ease-out; -webkit-transition:all 0.1s ease-out; position: absolute; pointer-events: none; z-index:99; top:0; left:0; display:block }
.fv_cursor .custom-cursor-content { pointer-events:none; margin:-150px 0 0 -150px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; display:block; transform:scale(0); }
#cursor.fv_cursor.active_cursor .custom-cursor-content { transform:scale(0.35) }

.play-stop-button { width:300px; height:300px; border-radius:150px; overflow:hidden; background-color:rgba(100,100,100,0.15); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); display: flex; align-items: center; justify-content: center; box-shadow:80px 80px 80px rgba(0,0,0,0.2) }
.play-stop-button .inner { position: relative; z-index:2; background-color:var(--accent-gold-1); color:var(--text-color-light); width:260px; height:260px; overflow:hidden; border-radius:130px; display: flex; align-items: center; justify-content: center; text-align: center; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; transform:scale(1); font-size:40px; font-weight:500 }
.play-stop-button .inner span { transition:opacity 0.2s linear; -webkit-transition:opacity 0.2s linear; opacity:1 }
.play-stop-button .video { position: absolute; z-index:1; top:50%; left:50%; margin:-130px 0 0 -130px; width:260px; height:260px; overflow:hidden; border-radius:130px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; transform:scale(0) }
.play-stop-button .video video { width:260px; height:260px; object-fit: cover; overflow:hidden; border-radius:130px; display:block; transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; opacity:0 }
.play-stop-button .video .video-progress {opacity:0; display: none; position:absolute; height:2px; bottom:0; left:0; right:0; z-index:12; background-color:rgba(255,255,255,0.3); overflow:hidden; border-radius:1px }
.play-stop-button .video .video-progress-inner { height:2px; width:50%; background-color:#ffffff }


#cursor.fv_cursor.loading .play-stop-button .inner { background-color:transparent; }
#cursor.fv_cursor.loading .play-stop-button .inner span { opacity:0 }
#cursor.fv_cursor.active_cursor .play-stop-button .inner {transform:scale(0.8); }
#cursor.fv_cursor.active_cursor .play-stop-button .video {transform:scale(0.8); }

#cursor.fv_cursor.active_cursor.playing .custom-cursor-content { transform:scale(1); }
#cursor.fv_cursor.active_cursor.playing .play-stop-button .video { transform:scale(1); }
#cursor.fv_cursor.active_cursor.playing .play-stop-button .video video { opacity:1 }

body.touch #cursor.fv_cursor.active_cursor.playing .play-stop-button .inner,
#cursor.fv_cursor.active_cursor.playing .play-stop-button .inner {transform:scale(0); }

body.touch .fv_cursor       { position:fixed; top:auto; bottom:-20px; left:50% }
body.touch .fv_cursor       { transition:none; -webkit-transition:none; } 
body.touch #cursor.fv_cursor.active_cursor .custom-cursor-content { transform:scale(0) }
body.touch #cursor.fv_cursor.active_cursor.loading .custom-cursor-content,
body.touch #cursor.fv_cursor.active_cursor.playing .custom-cursor-content { transform:scale(0.7) }
body.touch .play-stop-button .inner { background-color: transparent}
body.touch .play-stop-button .inner span { display: none }

.circular-progress        { position: absolute; top:0px; left:0px; z-index: 12; pointer-events: none; display:block; }
.circular-progress svg    { width:260px; height:260px; float:left; transform: rotate(-90deg); transform-origin: center; opacity:0; transition:all 0.5s ease-out }

#cursor.fv_cursor.active_cursor.playing .circular-progress svg #circle1 { transition:stroke-dashoffset 0.5s linear;  }
#cursor.fv_cursor.active_cursor.playing .circular-progress svg { opacity:1 }

#cursor.fv_cursor.active_cursor.playing .play-stop-button .video .video-progress {opacity: 1}

.background-video { position:absolute; display: flex; align-items: center; justify-content: center; top:50vh; left:0; right:0; height:100vh; z-index:9; opacity:0.25 }
.background-video video { display: block; width:50vw; height:50vw; border-radius:25vw; overflow:hidden; object-fit: cover }
.hero-video-spacer { height:50vh }

.fullscreen_video { display:block; width:100%; height:100vh; object-fit:cover; overflow: hidden }

/*********************************************** Layout Media Queries ************************************************/

body.ios .hideonios { display:none !important }

@media all and (max-width:600px){

  header          { padding:20px }
  footer svg.img,
  header svg.img  { width:110px }

  .page-menu a    { padding:20px }
  section         { padding:0 20px }
  section .page-menu { margin:0 -20px }

  h1.display      { font-size:13vw }
  h1              { font-size:28px; }
  h2              { font-size:24px }
  h3              { font-size:20px }
  h4              { font-size:18px }

  header {flex-direction:column; align-items:stretch; flex-wrap:wrap}
  nav { margin:0 -20px; padding:0 20px; border-bottom:1px solid rgba(0,0,0,0.1); margin-top:20px; flex-grow: 1; align-items: flex-start; justify-content: flex-start;}
  nav a { margin-bottom:-1px; padding:5px 0; font-size:14px !important }
  .dark nav { border-bottom-color:rgba(255,255,255,0.1) }

  p               { font-size:16px; line-height:1.5em }
  .ts-m           { font-size:14px; line-height:1.5em }
  .ts-s           { font-size:12px; line-height:1.25em }
  .ts-xs          { font-size:10px; line-height:1em }

  .flexgrid .cell.col-sm-1        { width:25%; }
  .flexgrid .cell.col-sm-2        { width:50%; }
  .flexgrid .cell.col-sm-3        { width:75%; }
  .flexgrid .cell.col-sm-4        { width:100%; }

  .flexwrap                       { -webkit-overflow-scrolling:touch; white-space: nowrap; overflow-x: scroll; margin-left:-20px; margin-right:-20px; padding-left:0; padding-bottom:0; }
  .flexwrap .flexgrid             { flex-wrap: nowrap; padding-left:20px; padding-bottom:20px }
  .flexwrap .flexgrid .cell       { flex-grow:0; min-width: 75vw }
  .flexwrap .flexgrid .cell .cc   { margin-right:20px }
  .flexwrap .flexgrid.spaced      { margin:0 }
  .flexwrap .flexgrid.spaced .cell .cc { padding-right:0; padding-left:0 }

  .dark #section-secondary .flexwrap.case-study-container,
  .flexwrap.case-study-container { background-color:transparent }
  .flexwrap .flexgrid.cards .cell .cc { padding:var(--spacer-l); margin:0 20px 0 0 }

  .flexwrap.narrow .flexgrid .cell { flex-grow:0; min-width: 45vw }
  .flexwrap.small .flexgrid .cell  { flex-grow:0; min-width: 25vw }

  .flexwrap .flexgrid.project-list { overflow:auto }
  .flexwrap .flexgrid.project-list .project-tile a,
  .flexwrap .flexgrid.project-list .project-tile img,
  .flexwrap .flexgrid.project-list .project-tile video { border-radius:var(--border-radius); overflow:hidden; }

  /*
  .playlist-container .flexwrap                 { white-space:normal }
  .playlist-container .flexwrap .flexgrid       { padding-bottom:0px; flex-wrap:wrap; }
  .playlist-container .flexwrap .flexgrid .cell { min-width:50% }
  */

  :root {

    --spacer-xxl:140px;
    --spacer-xl:50px;
    --spacer-l: 30px;
    --spacer-m: 20px;
    --spacer-s: 15px;

    --border-radius:8px;
  }

  
  .scrollspy-anchor-wrap  { position:fixed; z-index:100; display:block; margin-left:0; left:34px; right:34px; bottom:24px; top:auto; background-color: rgba(220,220,220, 0.6); border-radius: 50px; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding:5px 10px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out }
  .scrollspy-anchors      { display:flex; flex-direction:row; justify-content:space-evenly; align-items:center; white-space: nowrap; transform:rotate(0deg) translate3d(0,0,0); transform-origin: bottom left; margin:0 auto; padding:5px 0; gap:0px }
  .scrollspy-anchor-wrap.hidden { bottom:-100px }

  .scrollspy-anchors a        { color:var(--text-color-light); padding:6px 12px; border-radius:30px; opacity:1; font-size:11px }
  .scrollspy-anchors a.active { color:var(--text-color-dark); background-color:var(--accent-dark-1) }
  .scrollspy-anchors span     { display:none }

  .dark .scrollspy-anchor-wrap { background-color: rgba(70,70,70,0.5); }
  .dark .scrollspy-anchors a        { color:var(--text-color-dark) }
  .dark .scrollspy-anchors a.active { color:var(--text-color-light); background-color:var(--accent-gold-1) }

  .hideonmobile { display:none !important }

  .flexgrid.playlist .cell .cc svg.icon,
  .flexgrid.playlist .cell .cc img{ margin-bottom:20px }

  .flexwrap .project-tile span { left:10px; }
  .project-tile span { opacity:1 }
  .page-menu a p span.meta { font-size:8px }

  .related-project { top:50px; left:10px; right:10px; bottom:50px }
  .playlist-container { border-radius:var(--border-radius) }
  .rounded-container { margin:0 20px 10px 20px; border-radius:var(--border-radius); overflow:hidden; }

  .marquee .strip .tile   { min-width:100px; flex-grow:0 }
  .marquee .strip .tile img { width:70px }

  @keyframes marquee-move-text {
  to {
    transform: translateX(-900px);
  }
}

}

@media all and (min-width:601px) and (max-width:1024px){

  .flexgrid .cell.col-md-1        { width:25% }
  .flexgrid .cell.col-md-2        { width:50% }
  .flexgrid .cell.col-md-3        { width:75% }
  .flexgrid .cell.col-md-4        { width:100% }

  .hideontablet { display:none !important }

  h1.display { font-size:9vw }

  .rounded-container { margin:20px }

}


@media all and (min-width:2001px) {

  .page { margin-top:60px; margin-bottom:60px; border-radius:24px; overflow:hidden; max-width:2000px; box-shadoww:0px 0px 100px rgba(0,0,0,0.10) }
  body.dark { background-color:#292E2F }
  body.darkk,
  body { background-color:#E4E8E9 }

  h1.display { font-size:100px }

}