body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Hide scrollbars */
    margin: 0;
    padding: 0;
    background-color: black;
}

.grid-container {
    display: grid;
    grid-template-columns: 23.33vw 23.33vw 23.33vw 30vw;
    grid-template-rows: 15vh 26.66vh 26.66vh 26.66vh 5vh;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
    
.prim { 
    grid-area: 2 / 1 / 5 / 4;
    min-height: 80vh;
    min-width: 70vw; max-width: 70vw;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.suba { 
    grid-area: 2 / 4 / 3 / 5; 
    min-width: 30vw; max-width: 30vw;
    max-height: 26.66vh;
    text-align: center;
    position: relative;
}
.subb { 
    grid-area: 3 / 4 / 4 / 5;
    min-width: 30vw; max-width: 30vw;
    max-height: 26.66vh;
    text-align: center;
    position: relative; 
}
.subc { 
    grid-area: 4 / 4 / 5 / 5;
    min-width: 30vw; max-width: 30vw;
    max-height: 26.66vh;
    text-align: center;
    position: relative; 
}
.banner { 
    grid-area: 1 / 1 / 2 / 5;
    min-height: 15vh; max-height: 15vh;
}

.banner img {
    width: 25vw;
    height: auto;
    position: absolute;
    top: 0px;
    right: 0;
    padding: 10px;
}
.footer {
    grid-area: 5 / 1 / 6 / 5;
}
video#vt-prim_youtube_api {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#vt-suba_youtube_api {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 2px;
    object-fit: cover;
}

video#vt-subb_youtube_api {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 2px;
    object-fit: cover;
}

video#vt-subc_youtube_api {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 2px;
    object-fit: cover;
}

.primeTitle {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 12rem;
    color: white;
    text-shadow: 0 0 3px #000, 0 0 5px #000;
    position: relative;
    top:35%;
    z-index: 20;
    opacity: 0;
    /*visibility: hidden; */
}

.subTitle {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 4rem;
    color: white;
    text-shadow: 0 0 3px #000, 0 0 5px #000;
    position: relative;
    top:35%;
    z-index: 20;
    opacity: 0;
    /*visibility: hidden; */
}

/* Text in newsbar */
#newstext {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 4rem;
    color: gold;
    max-width: 75vw;
    margin: 5px;
    transform: translateY(-8px);
    text-align: center;
  }

  #newstext em {
    color:aqua;
    text-shadow: 2px 2px rgb(9, 29, 182);
  }

  /* Animate video screens moving */
  @keyframes slideAndResize {
    0% {
      width: 70vw;
      height: 80vh;
      left: 0;
      top: 0;
    }
    100% {
      width: 30vw;
      height: 26.66vh;
      left: 70vw;
      top: 53.32vh;
    }
  }
  
  @keyframes revertPosition {
    0% {
      width: 30vw;
      height: 26.66vh;
      left: 70vw;
      top: 53.32vh;
    }
    100% {
      width: 70vw;
      height: 80vh;
      left: 0;
      top: 0;
    }
  }
  

@keyframes textFade {
    0%   {opacity: 1;}
    80%  {opacity: 1;}
    100% { opacity: 0;}
}

  .animate-transition {
    animation: slideAndResize 1s ease-in-out forwards;
  }
  
  .animate-revert {
    animation: revertPosition 1s ease-in-out forwards;
  }
  
  .animate-textfade {
    animation: textFade 8s;
  }