@charset "UTF-8";
/* CSS Document */

:root {
  --dark-grey: #404041;
  --xlight-grey: #f5f5f5;
  --light-grey: #efefef;
  --white: #ffffff;
  --blue: #0b5a9f;
  --blue-darker: #07365F;
  --blue-lighter: #1081E5;
  --green: #66b948;
  --green-darker: #498532;
  --green-lighter: #90CD7A;
}


body {
	font-family:  'liebling', open-sans, Calibri, Helvetica, Arial, sans-serif;
	color: var(--dark-grey);	
	font-weight: 300;
    background: var(--light-grey);
    overflow-x: hidden !important;
}

h1 {
    font-size: 1.5em;
    font-family: "liebling", georgia, open-sans, Calibri, sans-serif;
    font-weight: 800;
    color: var(--blue);
    
}

h2 {
    font-size: 1.5em;
    font-family: "liebling", georgia, open-sans, Calibri, sans-serif;
    font-weight: 700;
    color: var(--dark-grey);
    
}

h3 {
    font-size: 1.5em;
    font-family: "liebling", georgia, open-sans, Calibri, sans-serif;
    font-weight: 700;
    color: var(--dark-grey);
  
}

h4 { 
    font-size: 2em;
    font-weight: 800;
    font-family: "liebling", georgia, open-sans, Calibri, sans-serif;
}

p {
    font-size: 1em;
    line-height: 1.3em;
}

strong {
font-weight: 700;
}

.head-width strong {    
font-size: 1.1em;
}

.mt-big {
    margin-top: 6em;
}

.balance {
    text-wrap: balance;
}

.highlight {
    color: var(--orange);
}

p a:link, p a:visited {
    color: var(--blue);
    text-decoration: underline solid var(--blue);
    transition: all 0.2s ease-out;
}

p.dark a:link, .white-text p a:link, p.dark a:visited, .white-text p a:visited {
    color: var(--light-grey);
    font-weight: 700;
    text-decoration: underline solid var(--white);
    transition: all 0.3s ease-out;   
}

p a:active, p a:hover, p.dark a:active, p.dark a:hover {
    color: var(--green);
    text-decoration: underline solid var(--green);
    transition: all 0.3s ease-out;
}



::-moz-selection {
    color: var(--white);
    background: var(--blue);
}

::selection {
   color: var(--white);
    background: var(--blue);
}

.navbar {
    background: var(--white);
    border-top: 10px solid var(--blue);
}

.nav-link {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.05em; 
}

.nav-item {
    padding-inline: 8px;
}

.navbar {
    transition: all ease-in 0.3s;
}

.navbar-brand img {
    height: 55px!important;
    margin-block: 5px;
}


a.nav-link:link, a.nav-link:visited {
    color: var(--blue);
}

a.nav-link:active, a.nav-link:hover { 
    color: var(--green);
}

.navbar .nav-link.active a:link, .navbar .navlink.active a:visited {
    color: var(--green);
    border-bottom: 5px solid var(--green);
}

.splash {
    height: 88vh;
    height: 88svh;
    min-height: 600px;
    
}

.outline {
    outline: 1px solid var(--white);
    outline-offset: -45px;
}

h1.splash-heading {
    text-shadow: 0 0 45px #000000,0 0 90px #000000;
    position: relative;
    text-wrap: balance;
    color: var(--white);
    z-index: 100;
}

h1.splash-heading::before {
    position: absolute;
    content: "";
    width: 85%;
    height: 15px;
    background: var(--green);
    left: 7.5%;
    bottom: 0;
    z-index: -1;
    box-sizing: border-box;
}

.secondary-splash{
    padding-top: 15vh;
    min-height: 400px;
    padding-bottom: 50px;
}

.secondary-splash h1 {
    font-weight: 300;
    font-size: 2.2em;
    color: var(--white);
}

.tertiary-splash {
    padding-top: 10vh;
    min-height: 500px;
    height: 500px;
}

.secondary-pull {
    margin-top: -200px;
}

h5.card-title {
    color: var(--blue);
    font-weight: 700;
}

.content {
    padding-block: 6em;
}

.bg-dotted {
    background: url("img/background-dots.jpg") center left no-repeat #fff;
    background-size: cover;
}

.bg-dotted-green {
    background: url("img/background-dots-green.jpg") center left no-repeat #bee5af;
    background-size: cover;
}


.bg-blue-noise {
    background-image: url("img/noise-blue.png");
    background-size: 60px 60px;
    background-repeat: repeat;
    color: var(--white);
}


/* HTML: <div class="slanted-edge"></div> */
.slanted-edge {
  --p: 70px; /* control the shape (can be percentage) */
  height: 125px;
  aspect-ratio: 1;
  clip-path: polygon(0 var(--p),100% 0,100% 100%,0 100%);
  background: #eaf4fa;
  margin-top: -70px;
}

.bg-pale {
    background: #eaf4fa;
}

.underline-fancy {
    display: inline-block;
    text-decoration: underline;
    text-decoration-thickness: 15px;
    text-decoration-color: var(--green);
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-underline-offset: -8px;
}

p.help-sub-text {
    color: var(--blue);
    text-transform: uppercase;
    font-size: 1.5em;
    margin-bottom: 0;
    text-shadow: 0 0 3px rgba(0,0,0,0.2);
}


p.help-text {
    color: var(--blue);
    font-size: 2.5em;
    font-weight: 800;
    position: relative;
    width: -moz-fit-content;
  width: fit-content;
  z-index: 100;
  text-shadow: 0 0 3px rgba(0,0,0,0.2);
}

p.help-text::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 15px;
    background: var(--green);
    left: -10%;
    bottom: 5px;
    z-index: -1;
    box-sizing: border-box;
}

.home-bumper {
    position: relative;
    height: auto;
    
    
}

.home-bumper img {
    filter: grayscale(100%);
    transition: all ease-in 0.2s;
}

.home-bumper:hover img {
    filter: grayscale(25%);
    transition: all ease-in 0.2s;
}

.bumper-overlay {
    background: linear-gradient(180deg, rgba(138, 157, 179, 0) 40%, rgba(22, 93, 163, 0.8) 90%), rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    color: var(--white);
}

.overlay-content {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.overlay-content p {
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
}

.stats h2 {
    position: relative;
    text-wrap: balance;
    color: var(--white);
    text-transform: uppercase;
    font-weight: 400;
    z-index: 100;
    
}

.special h2 {
    position: relative;
    text-wrap: balance;
    color: var(--blue);
    text-transform: uppercase;
    font-weight: 700;
    z-index: 100;
    
}

.stats h2::before, .special h2::before {
    position: absolute;
    content: "";
    width: 85%;
    height: 15px;
    background: var(--green);
    left: 7.5%;
    bottom: 0;
    z-index: -1;
    box-sizing: border-box;
}

p.unit {
    text-transform: uppercase;
}

.head-width h3 {
    color: var(--blue);
    font-size: 2em;
    font-weight: 700;
    position: relative;
    width: -moz-fit-content;
  width: fit-content;
  z-index: 100;
}

.head-width h3::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 15px;
    background: var(--green);
    left: -10%;
    bottom: 5px;
    z-index: -1;
    box-sizing: border-box;
}

.separator {
    position: relative;
    width: 50px;
    height: 4px;
    background: var(--white);
}

p.important-text {
    font-weight: 700;
    font-size: 1.2em;
    color: var(--blue);
}

.service-icon {
    color: var(--blue);
}

.map-container img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
}

.footer {
    background: var(--dark-grey);
}

.footer p {
    font-size: 0.9em;
    color: var(--light-grey);
}

.footer-2 {
    background: var(--dark-beige);
}


.btn-primary { 
  color: var(--white); 
  background-color: var(--blue); 
  border-color: var(--blue); 
  font-weight: 400;
  text-transform: uppercase;
} 
 
.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  color: var(--white);
  background-color: var(--green);
  border-color: var(--green); 
} 
 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  background-image: none; 
} 
 
.btn-primary.disabled, 
.btn-primary[disabled], 
fieldset[disabled] .btn-primary, 
.btn-primary.disabled:hover, 
.btn-primary[disabled]:hover, 
fieldset[disabled] .btn-primary:hover, 
.btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, 
fieldset[disabled] .btn-primary:focus, 
.btn-primary.disabled:active, 
.btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, 
.btn-primary.disabled.active, 
.btn-primary[disabled].active, 
fieldset[disabled] .btn-primary.active { 
  background-color: var(--dark-grey); 
  border-color: var(--dark-grey); 
} 

.btn-secondary { 
  color: var(--white); 
  background-color: var(--green); 
  border-color: var(--green); 
  font-weight: 400;
  text-transform: uppercase;
} 
 
.btn-secondary:hover, 
.btn-secondary:focus, 
.btn-secondary:active, 
.btn-secondary.active, 
.open .dropdown-toggle.btn-secondary { 
  color: var(--white);
  background-color: var(--green-lighter);
  border-color: var(--green-lighter); 
} 
 
.btn-secondary:active, 
.btn-secondary.active, 
.open .dropdown-toggle.btn-secondary { 
  background-image: none; 
} 
 
.btn-secondary.disabled, 
.btn-secondary[disabled], 
fieldset[disabled] .btn-secondary, 
.btn-secondary.disabled:hover, 
.btn-secondary[disabled]:hover, 
fieldset[disabled] .btn-secondary:hover, 
.btn-secondary.disabled:focus, 
.btn-secondary[disabled]:focus, 
fieldset[disabled] .btn-secondary:focus, 
.btn-secondary.disabled:active, 
.btn-secondary[disabled]:active, 
fieldset[disabled] .btn-secondary:active, 
.btn-secondary.disabled.active, 
.btn-secondary[disabled].active, 
fieldset[disabled] .btn-secondary.active { 
  background-color: var(--dark-grey); 
  border-color: var(--dark-grey); 
} 


/* MEDIA QUERIES
------------------------*/

/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) { 

}



/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 991px) {
 
 .secondary-splash {
    
    min-height: 500px;
}
    
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 992px) {
  
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 578px) { 
    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 768px) { 
    
}

@media (min-width: 992px) { 
   
}

/*X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1400px) { 
}

/* ---- Slides ----- */

.splash-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 80vh;
    height: 80svh;
    min-height: 600px;
    z-index: 100;
    margin-top: 100px;
    background: rgba(20, 82, 198, 0.78);
    backdrop-filter: grayscale(1);
}

.main-container {
  position: absolute;
  top: 0;
  left:0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 80vh;
  min-height: 600px;
  margin-top: 100px;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
 
  overflow: hidden;
  z-index: 1;
  perspective: 400px;
  transition: opacity 0.3s;
}
.img {
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}

.main-container.loaded .loader-container {
  display: none;
}
.main-container.loaded .img,
.main-container.loaded .info-container {
  opacity: 1;
}
.main-container.loaded .title {
  opacity: 0;
}

.main-container.loaded .img-1 {
  
  animation: kenburns-top 7s linear both reverse 0.5s, fade-out 1.2s ease-in forwards 7s;
  z-index: 6;
}
.main-container.loaded .img-2 {
  
  animation: kenburns-bottom 7s linear both 7s, fade-out 1.2s ease-in forwards 14s;
  z-index: 5;
}
.main-container.loaded .img-3 {
 
  animation: kenburns-right 7s linear both reverse 14s, fade-out 1.2s ease-in forwards 21s;
  z-index: 4;
}
.main-container.loaded .img-4 {
  
  animation: kenburns-left 7s linear both 21s, fade-out 1.2s ease-in forwards 28s;
  z-index: 3;
}
.main-container.loaded .img-5 {
  
  animation: kenburns-right 7s linear both reverse 28s, fade-out 1.2s ease-in forwards 35s;
  z-index: 2;
}
.main-container.loaded .img-6 {
 
  animation: kenburns-right 7s linear both reverse 35s, fade-out 1.2s ease-in forwards 42s;
  z-index: 1;
}
/**
 * ----------------------------------------
 * animation kenburns-top
 * ----------------------------------------
 */
@keyframes kenburns-top {
  0% {
    transform: scale(1) translateY(0);
    transform-origin: 50% 16%;
  }
  100% {
    transform: scale(1.05) translateY(-15px);
    transform-origin: top;
  }
}
/**
 * ----------------------------------------
 * animation kenburns-bottom
 * ----------------------------------------
 */
@keyframes kenburns-bottom {
  0% {
    transform: scale(1) translateY(0);
    transform-origin: 50% 84%;
  }
  100% {
    transform: scale(1.05) translateY(15px);
    transform-origin: bottom;
  }
}
/**
 * ----------------------------------------
 * animation kenburns-right
 * ----------------------------------------
 */
@keyframes kenburns-right {
  0% {
    transform: scale(1) translate(0, 0);
    transform-origin: 84% 50%;
  }
  100% {
    transform: scale(1.05) translateX(20px);
    transform-origin: right;
  }
}
/**
 * ----------------------------------------
 * animation kenburns-left
 * ----------------------------------------
 */
@keyframes kenburns-left {
  0% {
    transform: scale(1) translate(0, 0);
    transform-origin: 16% 50%;
  }
  100% {
    transform: scale(1.05) translate(-20px, 15px);
    transform-origin: left;
  }
}
/**

 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/**
 
/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@keyframes rotate-center {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* end slides */