/* ===================================================================
   desktop.CSS
   ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   Applies when screen width  768px (linked via media query).
   =================================================================== */  



   html, body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
  }
  
  html {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  
  html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  
  
  
  
  .panel {
    height: 100vh;
    width: 100vw;
  
    padding-top: 2vh;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-bottom: 2vh;
    
    margin-bottom: 7.5vh;
  
    position: relative;
    box-sizing: border-box;
  
    /* outline: 1px solid blue; */
  }
  
  
  /*
  
  .section {
    outline: 1px solid gray;
  }
  
  
  */
  
  
  
  
  
  
  
  /* /$$$$$$$$                    /$$    
  |__  $$__/                   | $$    
     | $$  /$$$$$$  /$$   /$$ /$$$$$$  
     | $$ /$$__  $$|  $$ /$$/|_  $$_/  
     | $$| $$$$$$$$ \  $$$$/   | $$    
     | $$| $$_____/  >$$  $$   | $$ /$$
     | $$|  $$$$$$$ /$$/\  $$  |  $$$$/
     |__/ \_______/|__/  \__/   \___/  */
                                       
  
  
  .title {
    font-size: 2.75vw;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
  
   cursor: pointer;
   font-style: normal;
  }

  .title.active {
   font-style: italic;
  }


  
  .body {
    font-size: 1.4vw;
    line-height: 1.4;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  a {
    color: white;
    text-decoration: none;
    font-size: 1.4vw;
  }
  
  
  
  a:hover {
    font-style: italic;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  /* 
  
  /$$   /$$ /$$$$$$$$ /$$$$$$$   /$$$$$$ 
  | $$  | $$| $$_____/| $$__  $$ /$$__  $$
  | $$  | $$| $$      | $$  \ $$| $$  \ $$
  | $$$$$$$$| $$$$$   | $$$$$$$/| $$  | $$
  | $$__  $$| $$__/   | $$__  $$| $$  | $$
  | $$  | $$| $$      | $$  \ $$| $$  | $$
  | $$  | $$| $$$$$$$$| $$  | $$|  $$$$$$/
  |__/  |__/|________/|__/  |__/ \______/                                     
  
  */
  
  
  
  
  
  /* Full-height panel for the parallax image */
  #panelHero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
  
    padding-bottom: 5vh;
  }
  
  
  
  /* MENU MENU MENU MENU*/
  
  #panelHero .menuDramatiker {
    position: absolute;
    z-index: 20;

    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 18vw;
    height: 4vh;
  }
  
  #panelHero .menuDramatiker .body {
    position: absolute;
    z-index: 10;
    color: #050505;
  }
  
  #panelHero .menuDramatiker .body.white {
    color: white;
    animation: slow 3s ease-in;
  }
  
  #panelHero .menuDramatiker .blackTriangle {
    position: absolute;
    top: -0.01vh;
    left: 0;
    z-index: 9;
    width: 100%;
    height: auto;
    pointer-events: none;
  }
  
  
  
  
  
  
  /* IMAGE IMAGE IMAGE */

  #panelHero .epicStage {
    height: 70vh;
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  
  #panelHero .parallax-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #panelHero .parallax-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  
  
  
  
  
  
  /* TITLE TITLE TITLE */
  
  .sectionTitle {
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2vh;
  }
  
  .scream {
    font-size: 18vw;
    line-height: 1;
    white-space: nowrap;
    color: #050505;
    font-family: 'Bebas Neue', sans-serif;
    display: inline-block;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /*
  
   /$$      /$$  /$$$$$$  /$$$$$$$  /$$   /$$
  | $$  /$ | $$ /$$__  $$| $$__  $$| $$  / $$
  | $$ /$$$| $$| $$  \ $$| $$  \ $$|  $$/ $$/
  | $$/$$ $$ $$| $$  | $$| $$$$$$$/ \  $$$$/ 
  | $$$$_  $$$$| $$  | $$| $$__  $$  >$$  $$ 
  | $$$/ \  $$$| $$  | $$| $$  \ $$ /$$/\  $$
  | $$/   \  $$|  $$$$$$/| $$  | $$| $$  \ $$
  |__/     \__/ \______/ |__/  |__/|__/  |__/                                 
                                             
  */
  
  
  
  
  #panelWorks {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  
  
  
  /* MENU MENU MENU MENU*/
  
  #panelWorks .menuWorks {
    position: absolute;
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 18vw;
    height: 4vh;
  }
  
  #panelWorks .menuWorks .body {
    position: absolute;
    z-index: 10;
    color: white;
  }
  
  #panelWorks .menuWorks .body.white {
    color: white;
  }
  
  #panelWorks .menuWorks .blackTriangle {
    position: absolute;
    top: -0.01vh;
    left: 0;
    z-index: 9;
    width: 100%;
    height: auto;
    pointer-events: none;
  }
  



  #panelWorks .floating {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 98vw;
    height: auto;

    z-index: 10;
    
  }
  
  
  
  #panelWorks .floating .logline {
    position: relative;
    display: flex;
    z-index: 20;
    width: 33%;  
    min-height: 22vh;

    justify-content: center;
    align-content: center;
  
    margin-top: 22.5vh;
    margin-bottom: 25vh;
  }
  
  #panelWorks .floating .logline .body {
    position: relative;
    display: flex;
  
    z-index: 20;
    
    text-align: justify;
    justify-content: center;
    align-content: center;
    color: white;
    transition: opacity 0.3s ease-out;
  }
  
  
  
  
  
  
  #panelWorks .floating .lightBeam {
      position: absolute; 
      width: 98vw;
      min-height: 68vh;
      height: auto;
      z-index: 0;
      display: flex;
      align-items: center;
  }
  
  
   
     #panelWorks .floating .lightBeam .beamImage {
      width: 100%;
      height: auto;
      pointer-events: none;
      transition: opacity 0.3s ease-out;
     }
  
  






     
  
    #panelWorks .lightingPanel {
      position: relative; 
      display: flex;
      flex-direction: row;
      justify-content: center; 
  
      width: 100%;
      height: auto;
  
      margin-bottom: 5vh;
    }
  
  
    #panelWorks .lightingPanel .lightingLeft {
      position: relative;
      flex-direction: column;
      display: flex;
      justify-content: space-between; 
  
      align-items: flex-end;
  
      width: 100%;
      height: auto;
      padding-right: 1vw;
      padding-left: 2.5vw;
    }
  
    #panelWorks .lightingPanel .lightingLeft .exposee {
      position: relative;
      flex-direction: row;
      display: flex;
      justify-content: space-between; 
  
      align-items: flex-start;
  
      width: 100%;
      height: auto;
      min-height: 7vh;
      margin-bottom: 2vh;

    }
  
  
    #panelWorks .lightingPanel .lightingRight {
      position: relative;
      flex-direction: column;
      display: flex;
      justify-content: space-between; 
  
      align-items: flex-start;
  
      width: 100%;
      height: auto;
      padding-left: 1vw;
      padding-right: 2.5vw;
  
    }
  
    #panelWorks .lightingPanel .lightingRight .exposee {
      position: relative;
      flex-direction: row;
      display: flex;
      justify-content: space-between; 
  
      align-items: flex-start;
  
      width: 100%;
      height: auto;
      min-height: 7vh;
      margin-bottom: 2vh;

    }
  
    #panelWorks .lightingPanel .workInfo{
      display: flex;
      position: relative;

      flex-direction: column;
    }
  

    #panelWorks .lightingPanel .lightingRight .workInfo{
      align-items: flex-end;
    }


    #panelWorks .lightingPanel .pdf{
      display: flex;
      position: relative;
      order: 2;
      font-size: 0.875vw;

      padding-top: 0vh;
    }
  
  
    #panelWorks .lightingPanel .title:hover {
      font-style: italic;
     }
  
  
  
  
  
  
  
  
  
  
    /*
  
  /$$$$$$  /$$   /$$ /$$$$$$$$ /$$   /$$  /$$$$$$  /$$$$$$$ 
  /$$__  $$| $$  | $$|__  $$__/| $$  | $$ /$$__  $$| $$__  $$
  | $$  \ $$| $$  | $$   | $$   | $$  | $$| $$  \ $$| $$  \ $$
  | $$$$$$$$| $$  | $$   | $$   | $$$$$$$$| $$  | $$| $$$$$$$/
  | $$__  $$| $$  | $$   | $$   | $$__  $$| $$  | $$| $$__  $$
  | $$  | $$| $$  | $$   | $$   | $$  | $$| $$  | $$| $$  \ $$
  | $$  | $$|  $$$$$$/   | $$   | $$  | $$|  $$$$$$/| $$  | $$
  |__/  |__/ \______/    |__/   |__/  |__/ \______/ |__/  |__/ */
  
  
  
  
  
  
  #panelAutor {
        display: flex;
        flex-direction: row;
        justify-content: center; 
        
        position: relative; 
        min-height: 100vh; 
      }
       
     
      #panelAutor .menuAuthor {
        position: absolute; 
        z-index: 20;
    
        display: flex;
        align-items: flex-start;
        justify-content: center;
    
        width: 18vw;
        height: 4vh;
        
       }
    
       #panelAutor .menuAuthor .body {
        position: absolute;     
        z-index: 10;                
      }
    
       #panelAutor .menuAuthor .blackTriangle {
        position: absolute;  
        top: -0.01vh;
        left: 0;
        z-index: 9;
    
        width: 100%;
        height: auto;
        pointer-events: none;
      }
  
  
  
  
  
  
      #panelAutor .vitaLeft {
        position: relative;
        z-index: 20;
  
        display: flex;
        align-items: flex-start;
        justify-content: center;
  
        width: 33.3vw;
        height: auto;
        
        padding-top: 27vh;
       }
    
       #panelAutor .vitaLeft .body {
        max-width: 28vw;
        text-align: justify;
  
       }
  
  
  
      #panelAutor .vitaRight {
        position: relative;
        z-index: 20;
      
        display: flex;
        flex-direction: column;
        align-items: center; 
        justify-content: space-between;
      
        width: 33.3vw;
        height: auto;
      }
      
      #panelAutor .vitaRight .body {
        position: relative;
        z-index: 20;
      
        width: 100%;
        height: auto;
      
        padding-top: 27vh;
        margin-bottom: 23vh;
        
        max-width: 28vw;
        text-align: justify;
      }
      
  
      #panelAutor .vitaRight .kontakt {
      position: relative;
      z-index: 20;
  
      width: 100%;
  
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-end;
      text-align: right;
  
      margin-right: 2vw;
      margin-bottom: 2vh;
  
      }
      
      #panelAutor .vitaRight .kontakt .title {
        position: relative;
        z-index: 20;
        
        padding-bottom: 2vh;
      }
      
      #panelAutor .vitaRight .kontakt .mail {
        position: relative;
        z-index: 20;
  
        font-size: 1.4vw;
        line-height: 1.4;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
      }
      
      #panelAutor .vitaRight .kontakt .mail:hover {
        font-style: italic;
        cursor: pointer;
      }
  
  
  
  
  
  
  
  
  
  
  
      #panelAutor .hzPortrait {
        position: relative;
        z-index: 5;
  
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
  
        width: 27.5vw;
        height: auto;
        
        margin-left: 2.5vw;
        margin-right: 2.5vw;
       }
     
       #panelAutor .hzPortrait .portraitHz {
        width: 100%;
        height: auto;
        pointer-events: none;
  
        margin-bottom: 2.5vh;
       }
  
  
      #panelAutor .hzPortrait .credits {
        position: relative;
        z-index: 20;
      
        display: flex;
        align-items: flex-start;
        justify-content: center;
      
        width: 100%;
        height: auto;
       }
  
      #panelAutor .hzPortrait .body {
       font-size: 0.87vw;
      }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      /* PANEL INFO */
  
       #panelInfo {
        display: flex;
        position: relative;
        align-items: center;
  
        width: 100vw;
        height: 5vh;
        margin-bottom: 0;
      }
       
  
  
       #panelInfo .info {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
  
        width: 100%;
        height: auto;
       }
  
       #panelInfo .info .body {
        position: relative;
  
        width: 100%;
  
        text-align: left;
        font-size: 1vh;
        color: gray;
  
        margin-bottom: 1vh;
      }
  
       #panelInfo .info a.body {
        position: relative;
        width: 100%;
  
        text-align: left;
        font-size: 1vh;
        color: gray;
       }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
       .curtain-left, .curtain-right {
        position: fixed;
        top: 0;
        width: 50%;
        height: 100%;
        background-color: black;
        z-index: 100;
        transition: transform 3s ease-out;
      }
      
      .curtain-left {
        left: 0;
        transform: translateX(0); /* Start off-screen to the left */
      }
      
      .curtain-right {
        right: 0;
        transform: translateX(0); /* Start off-screen to the right */
      }
      
      .content {
        position: relative;
        z-index: 1;
        padding: 20px;
        transition: opacity 3s ease-out;
        opacity: 0;
      }
      
      /* Animation classes */
      .curtain-left.open {
        transform: translateX(-100%); /* Move to the center */
      }
      
      .curtain-right.open {
        transform: translateX(100%); /* Move to the center */
      }
      
      .content.show {
        opacity: 1;
      }
      
      
      
      
      .scream.flicker {
        animation: flicker 1.5s ease-in-out;
      }
      
      .scream.white {
        color: white; /* Text turns white after curtains open */
      }
      
      @keyframes flicker {
        0%, 100% { opacity: 1; }
        5% { opacity: 0.4; }
        10% { opacity: 0.9; }
        15% { opacity: 0.7; }
        20% { opacity: 0.95; }
        25% { opacity: 0.85; }
        30% { opacity: 0.98; }
        35% { opacity: 0.75; }
        40% { opacity: 0.9; }
        45% { opacity: 0.8; }
        50% { opacity: 1; }
      }
      
      
      @keyframes slow {
        0% { opacity: 0; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
      }