#hero {
            height:100vh;
            width:100%;
            background:rgb(24, 16, 16);
            display:flex;
            align-items:center;
            justify-content: center;
}



#hero::after {
      width:100%;
      height:100%;
      content: '';
      position:absolute;
      z-index:10;
      top:20;
      left:0;
      background:rgba(0,0,0,0.5)
}


#hero video {
      width:100%;
      height:100%;
      position:absolute;
      top:20;
      left:0;
      z-index:5;
      object-fit:cover;
      font-family:'object-fit: cover';
}


#hero .texture {
      width:100%;
      height:100%;
      position:absolute;
      top:20;
      left:0;
      z-index:15;
      background:url('../assets/texture.png');
}


#hero .caption {

      position:relative;
      z-index:20;
      text-align:center;
      color:#ffffff;
}



#hero .caption h1 {

      text-transform: uppercase;
      font-size:2em;
      font-family: 'Oswald', sans-serif;
      margin-bottom:0.5rem;
}

#hero .caption h2 {
      font-weight:400;
      font-size:1.5rem;
      margin:0;
      font-family: 'PT Sans', sans-serif;
}

#hero .caption h3 {
      font-weight:400;
      font-size:1.25rem;
      margin:0;
      font-family: 'PT Sans', sans-serif;
}

#content {

      background:url("../assets/OzFaireBG.png");
      background-repeat: repeat-y;
      background-size: cover;
}

#schedulex {

      background:url("../assets/OzFairePaper.png");
      background-repeat: repeat-y;
      background-size: cover;
}

#who {
      height:30vh;
      width:100%;
      display:flex;
      align-items:center;
      justify-content: center;
      color:#ffffff;

}

#who .caption h1 {

      text-transform: uppercase;
      font-size:2em;
      font-family: 'Oswald', sans-serif;
      margin-bottom:0.5rem;
      color:#ffffff;

}

#who .caption h2 {
      font-weight:400;
      font-size:3rem;
      margin:0;
      font-family: 'PT Sans', sans-serif;
      text-align: center;
      color:#ffffff;

}

#who .caption h3 {
      font-weight:400;
      font-size:1.5rem;
      margin:0;
      font-family: 'PT Sans', sans-serif;
      text-align: center;
      color:#ffffff;

}

#who .caption h4 {
      font-weight:200;
      font-size:1rem;
      margin:0;
      font-family: 'PT Sans', sans-serif;
      text-align: center;
      color:#ffffff;

}

#who .caption p {
      font-weight:400;
      font-size:1.5rem;
      margin:0;
      font-family: 'PT Sans', sans-serif;
      text-align: center;
      color:#ffffff;

}
#tickets {
      height:15vh;
      width:100%;
      text-align: center;
      align-items:center;
      justify-content: center;
      color:#ffffff;

}
button {

    background: rgb(194, 224, 92  );
    width: auto;
    border: none;
    color: rgb(0, 0, 0);
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    height: 50px;
    padding: 10px 40px;
}

#schedule {
 
      width:100%;
      height:80rem;
      text-align: center;
      align-items:center;
      justify-content: center;
      object-fit:cover;
      font-family:'object-fit: cover';
}

#location {
      height:60vh;
      width:100%;
      text-align: center;
      align-items:center;
      justify-content: center;
      color:#ffffff;
}
#schedule .h2 {
      font-weight:400;
      font-size:3rem;
      margin:0;
      font-family: 'PT Sans', sans-serif;
      text-align: center;
}

#map-canvas { height: 70%; width :50%; margin-left:auto; margin-right:auto;}

@media screen and (min-width:768px)
{
      #hero .caption h1 {
            font-size:2.5rem;
      }

      #hero .caption h2 {
            font-size:1.75rem;
      }
}

@media screen and (min-width:992px)
{
      #hero .caption h1 {
            font-size:3rem;
      }

      #hero .caption h2 {
            font-size:2rem;
      }
}



@media screen and (min-width:1200px)
{
      #hero .caption h1 {
            font-size:4rem;
      }

      #hero .caption h2 {
            font-size:2.5rem;
      }
}