@font-face{ font-family: 'SuisseIntl'; src: url('SuisseIntl-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face{ font-family: 'SuisseIntl'; src: url('SuisseIntl-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face{ font-family: 'PPNeueMontrealMono'; src: url('PPNeueMontrealMono-Book.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }

:root{
   --gridedge: 0;
   --gridgutter: 10px;
   --contentpad: 10px;
   --contentpad2x: 20px;
   --sectionpad: 48px;
   --sectionpad05x: 24px;
   --size-h1: 88px;
   --size-h2: 52px;
   --size-h3: 32px;
   --size-h4: 30px;
   --size-p: 30px;
   --size-tag: 13px;

   --ink-black: #000000;
   --ink-charcoal: #131313;
   --ink-lightgrey: #F2F2F2;
   --ink-white: #FFFFFF;
   --ink-wisteria: #C9B0EA;
   --ink-sage: #D7DBC3;
   --ink-coral: #EEBCB2;
   --ink-fluo: #D9FF00;
}

html, body{
   font-family: 'SuisseIntl', sans-serif;
   font-weight: 400;
   font-size: var(--size-p);
   /*font-size: calc( 15px + (21 - 15) * (100vw - 980px) / (1920 - 980) );*/
   line-height: 1.2;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-width: 320px;
   margin: 0;
   padding: 0;
   background-color: var(--ink-charcoal);
   color: var(--ink-lightgrey);
   fill: var(--ink-lightgrey);
}
h1, .h1{
   font-family: 'SuisseIntl', sans-serif;
   font-size: var(--size-h1);
   font-weight: 300;
   line-height: 1.0;
   margin: 0;
}
h2, .h2{
   font-family: 'SuisseIntl', sans-serif;
   font-size: var(--size-h2);
   font-weight: 300;
   line-height: 1.0;
   margin: var(--contentpad2x) 0;
}
   .text-large{
      font-family: 'SuisseIntl', sans-serif;
      font-size: var(--size-h2);
      font-weight: 300;
      line-height: 1.0;
   }

h3, .h3{
   font-family: 'SuisseIntl', sans-serif;
   font-size: var(--size-h3);
   font-weight: 300;
   line-height: 1.0;
   margin: var(--contentpad2x) 0;
}
h4, .h4{
   font-family: 'SuisseIntl', sans-serif;
   font-size: var(--size-h4);
   font-weight: 400;
   line-height: 1.0;
   margin: var(--contentpad2x) 0;
}

.text-small, small{
   font-size: var(--size-tag);
   ont-weight: 400;
   line-height: 1.1;
}
.tag{
   display: inline-block;
   white-space: nowrap;
   font-family: 'PPNeueMontrealMono', monospace;
   font-size: var(--size-tag);
   font-weight: 400;
   line-height: 1.0;
   margin: 0;
   text-transform: uppercase;
}

a{
   color: inherit;
   text-decoration: underline;
   text-underline-offset: 2px;
   text-decoration-thickness: 0.5px;
   transition: all 0.6s ease; 
}
   a.tag{
      white-space: normal;
   }
   a:hover{
      text-underline-offset: 4px;
      text-decoration-color: var(--ink-charcoal);
      transition: all 0.6s ease
   }

p{
   margin: var(--contentpad2x) 0;
}

button{
   appearance: none;
   -webkit-appearance: none;
   border-radius: 0;
}

ul.stacked{
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   position: relative;
   row-gap: 8px;
   column-gap: var(--contentpad2x);
}
   ul.stacked.text-tag{
      font-family: 'PPNeueMontrealMono', monospace;
      font-size: var(--size-tag);
      font-weight: 400;
      line-height: 1.0;
      text-transform: uppercase;  
   }
      ul.stacked li{
         display: block;
         width: 100%;
         margin: 0;
         padding: 0;
      }
      ul.stacked li a{
         display: inline-block;
      }

/* blue outline on focus fields */
*:focus{ outline: none; }
/* blue background on focus fields mobile */
*:focus, *:active{ -webkit-tap-highlight-color: transparent; }
/* highlight on content select */
*::selection{
/*   background: rgba(217, 255, 0, 0.99);*/
   background: rgba(255, 255, 255, 0.99);
   color: var(--ink-charcoal);
}
*::-moz-selection{
   background: rgba(255, 255, 255, 0.99);
   color: var(--ink-charcoal);
}
   img::selection,
   video::selection,
   iframe::selection{
      background: rgba(255, 255, 255, 0.33);
   }
   img::-moz-selection,
   video::-moz-selection,
   iframe::-moz-selection{
      background: rgba(255, 255, 255, 0.33);
   }

.unselectable{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.unclickable{ pointer-events: none; }
.visually-hidden{ position: absolute!important; height: 1px!important; width: 1px!important; overflow: hidden!important;clip: rect(1px 1px 1px 1px)!important; clip: rect(1px, 1px, 1px, 1px)!important; white-space: nowrap!important; }

.grid-container{
   display: grid;
   grid-template-columns: [screenleft] var(--gridedge) [edgeleft] var(--gridgutter) [c0] 1fr [c1] 1fr [c2] 1fr [c3] 1fr [c4] 1fr [c5] 1fr [c6] 1fr [c7] 1fr [c8] 1fr [c9] 1fr [c10] 1fr [c11] 1fr [c12] var(--gridgutter) [edgeright] var(--gridedge) [screenright];
   grid-template-rows: auto;
   grid-auto-rows: auto;
   grid-auto-flow: row; 
   align-items: stretch;
   justify-content: stretch; 
   align-content: stretch; 
   margin: 0 auto;
   padding: 0 0;
}
   .grid-container .grid-item{
      grid-column-start: c0; 
      grid-column-end: c12;
      grid-row-start: auto; 
      grid-row-end: auto;
   }

.flex-container{
   width: 100%; max-width: 100%; height: 100%; min-height: inherit; position: relative; padding: 0; margin: 0; box-sizing: border-box;
   display: flex; flex-wrap: nowrap; flex-direction: row; 
   align-items: flex-start;  align-content: flex-start;  justify-content: flex-start;
}
   .flex-container.flex-edges{ align-items: center; justify-content: space-between; }
      .flex-container .flex-item{ 
         display: block; flex-basis: auto; flex-grow: 0; flex-shrink: 0; position: relative; 
         box-sizing: border-box; box-shadow: none; text-decoration: none; border: 0px none; margin: 0 0; padding: 0 0; max-width: 100%; 
      }

.content{
   padding: var(--contentpad);
   position: relative;
}
   .content.text > *:first-child{
      margin-top: 0;
   }
   .content.text > *:last-child{
      margin-bottom: 0;
   }

a.click-to-email{}
a.click-to-email span{ display: none; }

section{
   padding: var(--sectionpad) 0;
}
section + section{
   padding-top: 0;
}

footer{
   padding: 0 0 var(--sectionpad) 0;
}
footer p{
   margin: 8px 0;
}

.container_head{}
   .container_head .item-tag{
      grid-column: c3/c12;
      grid-row: 1/2;
      text-align: right;
   }
   .container_head .item-header{
      grid-column: c0/c3;
      grid-row: 1/3;
   }
      .container_head .item-header .logo{
         display: block;
         width: 100%;
         height: auto;
         max-width: initial;
      }

.container_banner{
   padding-bottom: var(--sectionpad);
}
   .container_banner .item-title{
      grid-column: c0/c7;
      grid-row: 3/4;
   } 
   .container_banner .item-text{
      grid-column: c7/c11;
      grid-row: 4/5;
   }


.container_body{} 
   .container_body .item-tag{
      grid-column: c0/c2;
   }
   .container_body .item-reel,
   .container_body .item-text{
      grid-column: c2/c12;
   }
   .container_body .item-datetime,
   .container_datetime .item-datetime{
      grid-column: c0/c12;
   }

.section-showreel{}
   #modal_tempo-loop{
      position: fixed;
      z-index: 101;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }
      #modal_tempo-loop .modal-wrapper{
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.8);
         backdrop-filter: blur(10px);
         position: relative;
      }
      #modal_tempo-loop .modal-wrapper .modal-inner{
         display: block;
         padding: var(--sectionpad);
         width: 100%;
         box-sizing: border-box;
         height: auto;
      }
      #modal_tempo-loop .loop-controls{
         z-index: 2;
      }

   #close_tempo-loop{
      appearance: none;
      -webkit-appearance: none;
      position: absolute;
      bottom: 40px;
      width: 38px;
      height: 28px;
      line-height: 28px;
      top: 20px;
      right: 20px;
      border: 0;
      margin: 0;
      padding: 0;
      text-align: center;
      border-radius: 0;
      background: rgba(0, 0, 0, 0.2);
      color: #ffffff;
   }
   #toggle_tempo-loop{
      appearance: none;
      -webkit-appearance: none;
      position: absolute;
      height: 28px;
      line-height: 28px;
      width: 96px;
      left: calc(50% - 48px);
      bottom: 36px;
      background: rgba(0, 0, 0, 0.2);
      color: #ffffff;
      backdrop-filter: blur(10px);
      border: 0;
      margin: 0;
      padding: 0;
      text-align: center;
      border-radius: 0;
   }

.container_datetime{
   padding-top: var(--sectionpad);
}

.container_foot{}
   .container_foot .item-social{
      grid-column: c0/c2;
   }
   .container_foot .item-contact{
      grid-column: c2/c4;
   }
   .container_foot .item-siteby{
      grid-column: c0/c6;
   }
   .container_foot .item-copyr{
      grid-column: c6/c12;
      text-align: right;
      align-self: end;
   }


@media only screen and (max-width : 1180px){
   :root{
      --sectionpad: 40px;
      --sectionpad05x: 20px;
      --size-h1: 76px;
      --size-h2: 44px;
      --size-h3: 26px;
      --size-h4: 21px;
      --size-p: 21px;
   }

   .container_banner .item-title{
      grid-column: c0/c9;
   }
   .container_banner .item-text{
      grid-column: c4/c11;
      padding-top: var(--sectionpad);
   }

   .container_foot .item-social{
      grid-column: c0/c4;
   } 
   .container_foot .item-contact{
      grid-column: c4/c8;
   }
   .container_foot .item-siteby{
      grid-column: c0/c8;
   }
   .container_foot .item-copyr{
      grid-column: c8/c12;
   }

}


@media only screen and (max-width : 680px){
   :root{
      --sectionpad: 20px;
     --sectionpad05x: 20px;
      --size-h1: 48px;
      --size-h2: 32px;
      --size-h3: 21px;
      --size-h4: 21px;
      --size-p: 21px;
      --size-tag: 12px;
   }
   html, body{
      font-weight: 300;
   }

/*   .container_head .item-tag{
      grid-column: c3/c12;
   }
   .container_head .item-header{
      grid-column: c0/c3;
   }*/

   .container_banner{
      padding-bottom: 0;
   }
   .container_banner .item-title{
      grid-column: c0/c12;
   }
   .container_banner .item-text{
      grid-column: c0/c12;
   }

   .container_body .item-tag{
      grid-column: c0/c12;
   }
   .container_body .item-reel{
      grid-column: c0/c12;
   }
   .container_body .item-text{
      grid-column: c0/c12;
   }
   #toggle_tempo-loop{
      position: relative;
      bottom: unset;
      left: unset;
      margin-top: var(--contentpad2x);
   }

   .container_datetime{
      padding: var(--sectionpad) 0;
   }

   .container_foot .item-social,
   .container_foot .item-contact,
   .container_foot .item-siteby,
   .container_foot .item-copyr{
      grid-column: c0/c12;
      grid-row: auto;
   }
   .container_foot .item-contact,
   .container_foot .item-siteby{
      padding-top: var(--sectionpad05x);
   }
   .container_foot .item-copyr{
      text-align: left;
   }


}