/* ==== 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% 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-image: linear-gradient(90deg, #ff00cc, #333399);  }

.hero-1 h1 { 
    font-family: 'Open Sans', 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: 'Open Sans', 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: #1f364d; }  

.hero-2 h1 { 
    font-family: 'Libre Baskerville', 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: 'Open Sans', 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: #fabbb6; }

.hero-3 h1 { 
    font-family: 'Fjalla One', 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: 'Open Sans', 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: #3c1c78; } 

/* 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: 'Roboto Slab', 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: 'Roboto', 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: #fbf5eb; }  

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

.hero-5 h1 { 
    font-family: 'Libre Baskerville', 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 }

.slide-in-top {
    -webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
            animation: slide-in-top 1a cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
 }
 

 /* ----------------------------------------------
 * Generated by Animista on 2020-4-8 10:45:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */

 @-webkit-keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
   @keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }

  .slide-in-left {
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
            animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
 }

 /* ----------------------------------------------
 * Generated by Animista on 2020-4-8 10:45:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }