@font-face {
     font-family: 'Times LT Std';
     src: url('fonts/TimesLTStd-Semibold.woff2') format('woff2'),
       url('fonts/TimesLTStd-Semibold.woff') format('woff');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
   }

   @font-face {
     font-family: 'Times LT Std';
     src: url('fonts/TimesLTStd-SemiboldItalic.woff2') format('woff2'),
       url('fonts/TimesLTStd-SemiboldItalic.woff') format('woff');
     font-weight: 600;
     font-style: italic;
     font-display: swap;
   }

   @font-face {
     font-family: 'Swis721 BT';
     src: url('fonts/Swiss721BT-Bold.woff2') format('woff2'),
       url('fonts/Swiss721BT-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
   }

   @font-face {
     font-family: 'Swis721 BT';
     src: url('fonts/Swiss721BT-Roman.woff2') format('woff2'),
       url('fonts/Swiss721BT-Roman.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }

   html, body {
     margin: 0 auto;
     padding: 0;
     background: #fff;
     font-family: 'Times LT Std';
     font-size: 26px;
     /* height: 4000px; */
     /* black border/background */
   }

   a {
     color: inherit;
     text-decoration: none;
   }

   * {
     box-sizing: border-box;
   }

   .float-left {
     float: left;
   }

   .float-right {
     float: right;
   }

   /* Page wrapper to center content; black around it stays visible */
   body {
     display: flex;
     flex-direction: column;
     align-items: center;
   }

   #top-wrap {
     pointer-events: none;
   }

   .no-scroll .top-frame-outer {
     z-index: 9999;
   }

   .top-frame {
     position: relative;
     margin-top: 0;
     aspect-ratio: 16.1 / 9;
     width: min(100vw, calc((100vh - 60px) * 16 / 9));
     max-height: calc(100vh - 60px);
     /* overflow: hidden; */
     display: flex;
     flex-wrap: wrap;
     justify-content: end;
     /* background-color: black; */
     z-index: 888;
   }

   .caption-wrap {
     position: absolute;
     height: 60px;
     width: 50%;
     right: 0;
     bottom: -60px;
     font-family: 'Swis721 BT';
     display: flex;
     align-items: center;
     /* use align-items for vertical centering */
     flex-wrap: nowrap;
     /* prevent reflow/wrapping that can glitch */
     overflow: hidden;
     /* avoid text pushing layout */
     font-size: 0.6rem;
     line-height: 1.3;
     transform: translateZ(0);
     will-change: transform;
     -webkit-backface-visibility: hidden;
     -webkit-transform-style: preserve-3d;
     backface-visibility: hidden;
   }

   .caption-wrap.updating {
     z-index: 999;
   }

   .top-frame .video-wrap {
     pointer-events: auto;
   }

   .top-frame .video-wrap,
   .top-frame .frame-empty {
     width: 50%;
     height: 50%;
     border: 0;
     display: block;
     align-items: end;
     background-color: black;
   }

   iframe {
     width: 100%;
     height: 100%;
     border: 0;
     display: block;
   }

   .top-frame .frame-empty {
     background-color: transparent;
     pointer-events: none;
   }

   main {
     width: 100%;
     box-sizing: border-box;
     z-index: 999;
     position: relative;
     pointer-events: none;
   }

   main p {
     pointer-events: auto;
   }

   .header {
     height: 70px;
     width: 100%;
     background-color: transparent;
     float: left;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-content: center;
     padding-left: 40px;
     padding-right: 40px;
   }

   .logo {
     flex-grow: 0;
   }

   .logo #cassina {
     height: 26px;
   }

   .stick-top {
     position: sticky;
     top: 0px;
   }

   #logo-linde-freya {
     font-family: 'Swis721 BT';
     font-weight: 600;
     font-size: 28px;
   }

   .intro {
     /* height: calc((100vh - 60px) / 2); */
     width: 50%;
     /* z-index: 999; */
     padding: 40px;
     position: sticky;
     top: 100px;
     transform: translateY(calc((-100vh + 60px) / 2));
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
     justify-content: space-between;
     margin-bottom: calc((-100vh + 60px) / 2);
     padding-bottom: 0;
     pointer-events: auto;
   }

   .colofon a:hover,
   .intro a:hover {
     text-decoration: underline;
     text-decoration-thickness: 2px;
     text-underline-offset: 3px;

   }

   h1 {
     margin: 0;
   }

   .stick-wrap {
     flex-grow: 1;
   }

   .stick-h1 {
     position: sticky;
   }

   h1, h2, h3 {
     font-size: inherit;
     margin: 0;
   }

   .img-row {
     margin-bottom: 40px;
   }

   .img-row.first {
     margin-top: 62px;
   }

   .img-wrap {
     width: 50%;
     padding-right: 40px;
     padding-left: 40px;
   }

   .img-wrap img {
     max-width: 100%;
     max-height: calc(50vw - 80px);
   }

   .footer {
     display: flex;
     z-index: 9999;
     pointer-events: auto;
   }

   .col-half {
     padding: 40px;
     padding-bottom: 0px;
     width: 50%;
   }

   #credits {
     height: calc(50vh + 40px);
     width: 100%;
     padding: 40px;
     position: relative;
   }

   .colofon {
     position: absolute;
     bottom: 40px;
     left: 40px;
   }

   .small {
     font-size: 0.5rem;
     font-family: 'Swis721 BT';
   }

   .logo-credit {
     width: calc(100% - 80px);
     margin-top: 20px;
     margin-bottom: 20px;
   }

   .addres {
     font-size: 1rem;
     font-family: 'Swis721 BT';

   }

   p:last-child {
     margin-bottom: 0px;
   }

   p a {
     text-decoration: underline;
     text-decoration-thickness: 2px;
     text-underline-offset: 3px;
   }

   /* video container with background image */
   .video-wrap {
     position: relative;
     overflow: hidden;
   }

   .video-wrap.video-1 {
     background: url('img/placeholder-video-1.png') center center / cover no-repeat;
     /* change path */
   }

   .video-wrap.video-2 {
     background: url('img/placeholder-video-2.png') center center / cover no-repeat;
     /* change path */
   }

   .video-wrap.video-3 {
     background: url('img/placeholder-video-3.png') center center / cover no-repeat;
     /* change path */
   }

   /* hide iframes until we’re ready */
   .video-wrap iframe {
     opacity: 0;
     transition: opacity 0.3s ease;
     pointer-events: none;
     /* <-- ADD THIS */

   }

   /* shown when all videos are loaded */
   .video-wrap.ready iframe {
     opacity: 1;
   }

   /* fullscreen button */
   .video-wrap .fullscreen-btn {
     position: absolute;
     font-family: Arial, Helvetica, sans-serif;
     top: 8px;
     right: 8px;
     z-index: 10;
     padding: 4px 8px;
     font-size: 16px;
     text-transform: uppercase;
     background-color: transparent;
     color: #fff;
     border: none;
     cursor: pointer;
     transform: rotate(45deg);
     display: none;
   }

   .is-fullscreen .fs-exit-btn {
     display: block !important;

   }

   .is-fullscreen .fullscreen-btn {
     display: none !important;

   }

   .video-wrap:hover .fullscreen-btn {
     display: block;
   }

   .video-wrap .fs-exit-btn {
     position: absolute;
     font-family: Arial, Helvetica, sans-serif;
     top: 8px;
     right: 8px;
     z-index: 11;
     padding: 4px 8px;
     font-size: 25px;
     text-transform: uppercase;
     background-color: transparent;
     color: #fff;
     border: none;
     cursor: pointer;
     display: none;
     /* hidden by default */
   }

   .video-wrap.is-fullscreen {
     position: fixed;
     inset: 0;
     z-index: 9999;
     width: 100vw !important;
     height: 100vh !important;
     background: #000;
   }

   .video-wrap iframe {
     width: 100%;
     height: 100%;
     border: 0;
     opacity: 0;
     transition: opacity 0.3s ease;
   }

   .mobile {
     visibility: hidden;
     display: none;
   }

   @media screen and (max-width: 900px) {
     main {
       margin-top: 100vh;
     }

     body {
       font-size: 18px;
     }

     #top-wrap {
       font-size: 0px;
       background-color: black;

     }

     .top-frame-outer {
       height: 100vh;
     }

     .no-mobile {
       visibility: hidden;
       display: none !important;
     }

     .mobile {
       visibility: visible;
       display: inherit;
     }

     .header-mobile-fixed {
       position: fixed;
       bottom: 36px;
       z-index: 9999;
       pointer-events: auto;
     }

     .h1-mobile {
       width: calc(50% - 10px);
       margin-left: 10px;
       display: inline-block;
       padding: 10px;
       padding-right: 5px;
       padding-bottom: 0px;
       background-color: white;
       position: sticky;
       top: 0px;
       font-size: 18px;
       z-index: 9998;

     }

     .h2-mobile {
       font-size: 0.5rem !important;
       width: 50%;
       display: inline-block;
       padding: 10px;
       padding-left: 7px;
       padding-bottom: 3px;
       background-color: white;
       position: sticky;
       top: 0px;
       vertical-align: bottom;
       z-index: 9998;
     }


     .intro {
       width: 100%;
       display: block;
     }

     .top-frame {
       width: 100%;
       aspect-ratio: 16 / 26.8;
       background-color: black;
       max-height: 100vh;
       margin-bottom: -60px;
     }

     .caption-wrap.mobile {
       position: fixed;
       bottom: 0px;
       width: calc(100% - 10px);
       left: 10px;
       padding-left: 10px;
       padding-right: 10px;
       font-size: 2.2vw;
       /* display: none; */
       z-index: 9999;
       background-color: white;
       height: auto;
       min-height: 36px;
       padding: 10px;
       display: block;
     }

     .video-wrap .fullscreen-btn {
       display: block;
       top: inherit;
       right: inherit;
       bottom: 8px;
       left: 10px;
     }

     .top-frame .video-wrap, .top-frame .frame-empty {
       height: 33.333%;
       width: 100%;
       background-size: contain;
     }

     .top-frame .frame-empty {
       display: none;
       background-color: white;

     }

     .footer {
       display: block;
       margin-top: 40px;
     }

     .img-wrap {
       width: 100%;
       padding-right: 20px;
       padding-left: 20px;
     }

     .addres {
       font-size: 3.3vw;
     }

     .img-wrap img {
       max-width: 100%;
       max-height: calc(100vh - 120px);
     }

     .footer .col-half {
       width: 100%;
       padding: 20px;
     }

     .logo #cassina {
       height: 14px;
     }

     #logo-linde-freya {
       font-size: 15px;
     }

     .colofon {
      position: relative;
       left: 0px;
       bottom: 0px;
       margin-bottom: 20px;
     }

     #credits {
       height: auto;
       padding: 20px;
     }

     .small {
       margin-top: 20px;
     }

     .logo-credit {
       width: calc(100% - 40px);
       margin-top: 0px;
       margin-bottom: 40px;
     }

     .no-scroll .h2-mobile,
     .no-scroll .h1-mobile,
     .no-scroll .header-mobile-fixed,
     .no-scroll .caption-wrap {
       display: none;
     }
   }