/* ==== HERO BLOCK GENERAL PROPERTIES ==== */
/* Set height and vertically centers spacing above and below content */
.hero-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

/* 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-1 */
.hero-1  { background-color: gray;  }

.hero-1 h1 { 
    font-family: sans-serif;
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
    font-size: calc(36px + (80 - 36) * ((100vw - 320px) / (1600 - 320)));
}

.hero-1 h2 { 
    font-family: sans-serif;
    color: #fff;
    font-weight: normal;
    line-height: 1.4;
    font-size: calc(20px + (32 - 20) * ((100vw - 320px) / (1600 - 320)));
}


/* hero-2 */
.hero-2  { background-color: gray; }  

.hero-2 h1 { 
    font-family: sans-serif;
    color: #11ece5;
    font-weight: bold;
    line-height: 1.4;
    font-size: calc(42px + (104 - 42) * ((100vw - 320px) / (1600 - 320)));
}

.hero-2 h2 { 
    font-family: sans-serif;
    color: hotpink;
    font-weight: normal;
    line-height: 1.4;
    font-size: calc(20px + (32 - 20) * ((100vw - 320px) / (1600 - 320)));
}

/* hero-3 */
.hero-3 { background-color: gray; }

.hero-3 h1 { 
    font-family: sans-serif;
    color: #000;
    font-weight: bold;
    line-height: 1.2;
    text-transform: uppercase;
    font-size: calc(48px + (90 - 48) * ((100vw - 320px) / (1600 - 320)));
}

.hero-3 h2 { 
    font-family: sans-serif;
    color: #000;
    font-weight: normal;
    line-height: 1.4;
    font-size: calc(28px + (38 - 28) * ((100vw - 320px) / (1600 - 320)));
}

/* hero-4 */
.hero-4 { background-color: gray; } 

/* Desktop - Heading and sub-heading alignment */
@media (min-width:768px) {
    .hero-4 h1, .hero-4 h2 { text-align: left }
}

/* Desktop - Heading and sub-heading alignment */
@media (max-width:767px) {
    .hero-4 h1, .hero-4 h2 { text-align: center }
}

.hero-4 h1 { 
    font-family: sans-serif;
    color: #000;
    color: #ffc107;
    font-weight: normal;
    line-height: 1.2;
    font-size: calc(56px + (104 - 56) * ((100vw - 320px) / (1600 - 320)));
}

.hero-4 h2 { 
    font-family: sans-serif;
    color: hotpink;
    font-weight: normal;
    line-height: 1.4;
    font-size: calc(32px + (42 - 32) * ((100vw - 320px) / (1600 - 320)));
}

/* hero-5 */
.hero-5 { background-color: gray; }  

/* Heading and sub-heading alignment */
.hero-5 h1, .hero-5 h2 { text-align: left }

.hero-5 h1 { 
    font-family: sans-serif;
    color: #000;
    font-weight: normal;
    line-height: 1.2;
    font-size: calc(42px + (84 - 42) * ((100vw - 320px) / (1600 - 320)));
}

/* Desktop  */
@media (min-width:768px) { .hero-block.hero-5 h1 { margin-bottom: 6% } }

/* Mobiles */
@media (max-width:767px) { 
    .hero-block.hero-5 h1 { margin-bottom: 16% }
    .hero-block { margin-bottom: 40px; padding: 20% 10% }
    .hero-block.hero-5 .col-md-6.col-xs-12 { text-align: left !important }
}

.text-red { color:red }
.text-darkgray { color:#888 }