/* ==== HERO BLOCK GENERAL PROPERTIES ==== */
/* Set height and vertically centers spacing above and below content */

.hero-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: gray;
}

/* Desktop - hero block height and inside spacing */
@media (min-width:768px) {
    .hero-block { margin-bottom: 70px; padding: 8% 5% }
}

/* Mobiles - hero block eight and inside spacing */
 @media (max-width:767px) {
    .hero-block { margin-bottom: 40px; padding: 20% 10% }
    .col-md-6.col-xs-12.text-right,
    .col-md-6.col-xs-12 { text-align: center !important }
    .col-md-6.col-xs-12:nth-child(1) { margin-bottom: 12% }
}

/* Center-align headings and sub-headings */
.hero-block h1, .hero-block h2 { text-align: center }

/* Desktop - Space beneath headings and sub-headings */
@media (min-width:768px) { 
    .hero-block h1 { margin-bottom: 4% } 
    .hero-block h2 { margin-bottom: 6% } 
}

/* Mobiles - Space beneath headings */
@media (max-width:767px) { 
    .hero-block h1 { margin-bottom: 8% } 
    .hero-block h2 { margin-bottom: 14% } 
}

/* =========== INDIVIDUAL HERO BLOCK ========== */

.hero-10 { text-align: center; position: relative; overflow: hidden }

.hero-10 .background-video-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    height: 100%;
}

.hero-10 .background-video { 
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

.hero-10 .bg-overlay {
    /* Optional overlay */
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
    background-image: linear-gradient(rgba(29,38,113,0.7),rgba(195,55,100,0.3)); 
}

.hero-10 video[poster] { object-fit: cover; width: 100%; height: 100% }

/* Desktop - height */
@media (min-width:768px) { .hero-10 .background-video-content { height: 300px } }

/* Mobiles - height  */
@media (max-width:767px) { .hero-10 .background-video-content { height: 380px } }

/* === Heading and sub-heading ====*/

/*  Heading and sub-heading alignment */
@media (max-width:767px) {
    .hero-10 .background-video-content h1,
    .hero-10 .background-video-content h2 { 
        text-align: center;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

.hero-10 .background-video-content h1 { 
    font-family: 'Fjalla One', sans-serif;
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
    font-size: calc(48px + (100 - 48) * ((100vw - 320px) / (1600 - 320)));
    letter-spacing: 2px;
}

.hero-10 .background-video-content h2 { 
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
    font-size: calc(20px + (48 - 20) * ((100vw - 320px) / (1600 - 320)));
}

/* Desktop - Space beneath main heading  */
@media (min-width:768px) { 
    .hero-10 .background-video-content h1 { margin-bottom: 1% }
}

/* Mobiles - Space beneath main heading */
@media (max-width:767px) { .hero-10 .background-video-content h1 { 
    margin-bottom: 8% }
}

/* Desktop - button positioning  */
@media (min-width:768px) { 
    .hero-10 .col-md-6.col-xs-12:nth-child(1) { text-align: right }
    .hero-10 .col-md-6.col-xs-12:nth-child(2) { text-align: left }
}