#hero {
            height:100vh;
            width:100%;
            background:#000000;
            display:flex;
            align-items:center;
            justify-content: center;
}
#hero::after {
      width:100%;
      height:100%;
      content: '';
      position:absolute;
      z-index:10;
      top:0;
      left:0;
      background:rgba(0,0,0,0.1);
}


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

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

#hero .caption {
      position:relative;
      z-index:20;
      text-align:center;
      color:#ffffff;
}
#hero .caption h1 {
      font-weight:700;
      font-size:2.5rem;
      font-family: "Roboto", sans-serif;
      margin-bottom:20px;
}

#hero .caption h2 {
      font-weight:400;
      font-size:1rem;
      margin:0;
      padding-left: 30px;
      padding-right: 30px;
      font-family: "Roboto", sans-serif;
}

.btn {
    margin-top: 40px;
	margin-left: 5px;
	margin-right: 5px;
    padding: 18px 25px;
    border: 2px solid #fff;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 2px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    display: inline-block;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
}

.btn::before {
    content: " ";
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,#0565a1, #52c76f);
    position: absolute;
    top: 0;
    left: -100%;
    z-index: -1;
    transition: all 0.4s linear;
}

.btn:hover::before {
    left: 0;
}

.btn:hover {
    border-color: #fff;
    color: #fff;
}
@media screen and (min-width:768px)
{
      #hero .caption h1 {
            font-size:3rem;
      }

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

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



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

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