#hero {
height:100vh;
width:100%;
display:flex;
align-items:center;
justify-content: center;
position: relative;
padding-bottom: 50%;
}



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


#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;
}


#hero .caption {

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



#hero .caption h1 {

font-size:2em;
font-family: 'Dancing Script';
color: #fff;
margin-bottom:0.5rem;
}

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




@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;
}
}