/* ==== 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 BLOCKS ========== */

.hero-6 {
    background-color: gray;
}

.hero-6 h1 { 
    /* Font styles */
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
    font-size: calc(60px + (112 - 60) * ((100vw - 320px) / (1600 - 320)));
}

.hero-6 h2 { 
    /* Font styles */
    font-family: 'Roboto Condensed', sans-serif;
    color: #fff;
    font-weight: normal;
    line-height: 1.4;
    font-size: calc(24px + (54 - 24) * ((100vw - 320px) / (1600 - 320)));
}

.hero-7 {
    background-color: gray;
}

.hero-7 h1 { 
    /* Font styles */
    font-family: 'Roboto', sans-serif;
    color: #fff;
    font-weight: bold;
    line-height: 1.1;
    font-size: calc(60px + (112 - 60) * ((100vw - 320px) / (1600 - 320)));
}

.hero-7 h2 { 
    /* Font styles */
    font-family: 'Roboto Condensed', sans-serif;
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: calc(24px + (54 - 24) * ((100vw - 320px) / (1600 - 320)));
}

.hero-8 {
    background-color: gray;
}

.hero-8 h1 { 
    /* Font styles */
    font-family: 'Fjalla One', sans-serif;
    color: #fff;
    font-weight: bold;
    line-height: 1.2;
    text-transform: uppercase;
    font-size: calc(42px + (96 - 42) * ((100vw - 320px) / (1600 - 320)));
}

.hero-8 h2 { 
    /* Font styles */
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-weight: normal;
    line-height: 1.4;
    font-size: calc(22px + (38 - 22) * ((100vw - 320px) / (1600 - 320)));
}

.hero-9 {
    background-color: gray;
}

.hero-9 h1 { 
    /* Font styles */
    font-family: 'Libre Baskerville', serif;
    color: #000;
    color: #fff;
    font-weight: normal;
    line-height: 1.2;
    font-size: calc(56px + (80 - 56) * ((100vw - 320px) / (1600 - 320)));
}

.hero-9 h2 { 
    /* Font styles */
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-weight: normal;
    line-height: 1.4;
    font-size: calc(32px + (42 - 32) * ((100vw - 320px) / (1600 - 320)));
}

/* Desktop - alignment  */
@media (min-width:768px) {
    .hero-9 .row,
    .hero-9 .row .col-md-12,
    .hero-9 .row .col-md-12 h1,
    .hero-9 .row .col-md-12 h2 { text-align: left }
}

/* Mobile - alignment  */
@media (max-width:767px) {
    .hero-9 .row .col-md-12 { text-align: center  }
}