.hero-body-old{
    /*padding:9rem 1.5rem;*/
    height: 600px;
    align-items:center;
    display:grid;
    position: relative;
    background: url("../images/sampled_output3.jpg") no-repeat center center;
    background-size: cover;
}
@media screen and (max-width: 768px) {
    .hero-body-background {
        height: 450px;
    }    
    .hero-body-long-video {
        padding-top: 0!important;
        padding-bottom: 0!important;
    }
}

.hero-body-background::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*background: linear-gradient(to bottom, rgb(255 255 255 / 0%), rgb(194 194 194));*/
}

.hero-body-background-div-old {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #0000004a;
}
.hero-body-gradient-black{
    padding: 1.5rem 1.5rem 0.5em 1.5em;
    align-items:center;
    display:flex;
    background: linear-gradient(#7a7a7a, #FfFfFf);
}
.hero-body-long-video{
    padding-top: 3em;
    padding-bottom: 3em;
    /* padding: 5em 24rem 2em 24em; */
    align-items:center;
    display:flex;
    /* background: linear-gradient(#9D9D9D, #FfFfFf); */
    /*background: url("../assets/back.jpeg") no-repeat center center;*/
    justify-content: center;
}
.column-video{
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    /*padding:1rem 1rem;*/
    align-items:center;
    display:flex;
    /*background: #4a4a4a;*/
    justify-content: center;
}
.hero-body-example{
    padding:3rem 2rem;
    align-items:center;
    display:flex;
    background: #F5F5F5;
}
.hero-body-gallery{
    padding:5rem 5rem;
    align-items:center;
    display:flex;
    background: #F5F5F5;
}
.hero-body-subtitle{
    padding: 1.5rem 1.5rem 1.5em 1.5em;
    align-items:center;
    display:flex;
    background: #F9F9F9;
}
.hero-body-subtitle-light{
    padding: 1.5rem 1.5rem 1.5em 1.5em;
    align-items:center;
    display:flex;
    background: #FfFfFf;
}
.hero-black{
    background: #050b12;
}
@font-face {
    font-family: shadowintolight;
    src:url("../../font/ShadowsIntoLight-Regular.ttf");
}
@font-face {
    font-family: JosefinSans;
    src:url("../../font/JosefinSans-VariableFont_wght.ttf");
}
@font-face {
    font-family: BebasNeue;
    src:url("../../font/BebasNeue-Regular.ttf");
}
@font-face {
    font-family: Acme;
    src:url("../../font/Acme-Regular.ttf");
}
@font-face {
    font-family: PressStart2P;
    src:url("../../font/PressStart2P-Regular.ttf");
}
@font-face {
    font-family: IndieFlower;
    src:url("../../font/IndieFlower-Regular.ttf");
}
@font-face {
    font-family: DMSerifText;
    src:url("../../font/DMSerifText-Regular.ttf");
}
@font-face {
    font-family: NotoSerifBalinese;
    src:url("../../font/NotoSerifBalinese-Regular.ttf");
}
@font-face {
    font-family: Quicksand;
    src:url("../../font/Quicksand-VariableFont_wght.ttf");
}
@keyframes bounce1 {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}
@keyframes bounce2 {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}
@keyframes bounce3 {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-25px); }
    60% { transform: translateY(-5px); }
}
.word1 { animation: bounce1 1s infinite; }
.word2 { animation: bounce2 2s infinite; }
.word3 { animation: bounce3 3s infinite; }
.word4 { animation: bounce1 1.5s infinite; }
.word5 { animation: bounce2 1.0s infinite; }
.word6 { animation: bounce3 1.75s infinite; }