/* Add your custom CSS here */
.hero-block {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: gray;
    overflow: hidden 
}

@media (min-width: 768px) { 
    .hero-block { height: 80vh }
}

.hero-text-container { padding: 0 12% 4% 12%; z-index: 2 }

.hero-bg-media {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; 
    z-index: 0;
}

.hero-bg-media * {
    object-fit: cover; width: 100%; height: 100%;
}

.bg-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-block h1, .hero-block h2 {
    line-height: 1.2;
    color:#fff;
    text-shadow: 2px 2px #222;
}

.hero-block h1 {
    font-size: calc(48px + (112 - 48) * ((100vw - 320px) / (1600 - 320)));
    margin-bottom: 24px;
}

.hero-block h2 {
    font-weight: normal;
    font-size: calc(22px + (54 - 22) * ((100vw - 320px) / (1600 - 320)));
    text-transform: uppercase;
}



/* ----------------------------------------------
 * Generated by Animista on 2020-7-30 7:28:59
 * 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-top {
	-webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


.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-7-29 19:38:33
 * 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;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
}


/* ================ UTILITY CLASSES ============= */
.text-center { text-align: center }

/* Passive link styles */
            
a:link, a:visited {
    text-decoration: none;
    padding-bottom: 2px;
    color: #83c5be;
} 
            
/* Interactive link styles */
            
a:hover, a:focus, a:active {
    text-decoration: none; 
    padding-bottom: 2px;
    color: #e56b6f;
    border-bottom: solid 2px #e56b6f;
}
.section-selector-1 .container-btn a.btn:nth-child(1):focus,
.section-selector-1 .container-btn a.btn:nth-child(1):hover,
.section-selector-1 .container-btn a.btn:nth-child(1):active .container-btn { border-color: var(--indigo-300) }

.section-selector-1 .container-btn a.btn:nth-child(1):focus,
.section-selector-1 .container-btn a.btn:nth-child(1):hover,
.section-selector-1 .container-btn a.btn:nth-child(1):active .container-btn { border-color: var(--indigo-400) }

.section-selector-1 { background-color: var(--teal-800) }
.section-selector-1 .container-btn a.btn:nth-child(1):link,
.section-selector-1 .container-btn a.btn:nth-child(1):visited { background-color: var(--slate-050) }

.section-selector-2 { background-color: var(--slate-100) }
.section-selector-3 { background-color: var(--white-000) }
.section-selector-4 { background-color: var(--slate-100) }
.section-selector-5 { background-color: var(--white-000) }
.section-selector-1 { background-color: var(--teal-800) }
.section-selector-6 { background-color: var(--teal-800) }
.section-selector-6 .col-1 h2 { color: var(--white-000) }
.section-selector-6 .col-1 h3 { color: var(--white-000) }
.section-selector-6 div[class^='flex-cols-'] div[class^='col-'] h3 { color: var(--white-000) }
.section-selector-6 div[class^='flex-cols-'] div[class^='col-'] figure.icon { color: var(--white-000) }