body{
    background: #ffffff;
  }
  
  #placeholder{
    width:100%;
    height:100%;
    margin: 0 auto;
    background-image: url("../img/d-2019-v1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #gradient{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
  }
  
  #logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #logo{
    width: 100%;
    max-width: 550px;
    height: auto;
    
    animation: fadein 14s;
      -moz-animation: fadein 4s; /* Firefox */
      -webkit-animation: fadein 4s; /* Safari and Chrome */
      -o-animation: fadein 4s; /* Opera */
  }
  @keyframes fadein {
      from {
          opacity:0;
      }
      to {
          opacity:1;
      }
  }
  @-moz-keyframes fadein { /* Firefox */
      from {
          opacity:0;
      }
      to {
          opacity:1;
      }
  }
  @-webkit-keyframes fadein { /* Safari and Chrome */
      from {
          opacity:0;
      }
      to {
          opacity:1;
      }
  }
  @-o-keyframes fadein { /* Opera */
      from {
          opacity:0;
      }
      to {
          opacity: 1;
      }
  }

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px 1px;
}

.logo { grid-area: 2 / 1 / span 1 / span 3; }

.bg { grid-area: 1 / 1 / 4 / 5; }

  
  .medium-video-player{
    position: absolute;
    left: 15%;
    top: 15%; 
    width: 70vw;
    height:auto;
  }