/* IMPORTS */
@import "globalvars.css";
@import "bootstrap-overrides.css";
@import "utility-classes.css";

/* TOPOGRAPHY STYLES */
body {
 background-color: var(--pageBG);
 font-family: var(--font);
}
nav {
  background: #333;
}
#hero {
  background: url('../img/hero.jpg') no-repeat center bottom;
  min-height: 600px;
  position: relative;
}
#content {
  background: #FFF;
  max-width: var(--pageWidth);
}
#footer {
  background-color: var(--dark);
  color: #FFF;
}

/* ELEMENT STYLES */
.navbar-nav .nav-link {
  color: #FFF !important;
}
.nav-item.last {
  padding-right: 0;
}
#hero p {
  color: #FFF;
}
#hero span {
  color: #67AFC5;
  text-shadow: 15px 15px 15px #000;
}
.display-2 {
  background: -webkit-linear-gradient(#004FB1, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 -10px 0;
}
.cta {
  color: var(--light);
  background: url("../../assets/img/cta-bg.jpg") no-repeat left -100px;
  filter: blur(1.5rem);          /* starting blur */
  transition: filter 1s ease;  /* animate filter changes over 3s */
}
.cta.loaded {
  filter: blur(0);             /* animate to sharp */
}
.cta-nav {
  border: 1px solid var(--dark);
  border-radius: var(--spacing2) !important;
}
.img-caption {
  color: var(--light);
  position: absolute;
  text-shadow: 0 0 7px #000;
  text-transform: uppercase;
  bottom: var(--spacing1);
  left: var(--spacing3);
  z-index: 100;
}
#hero .img-caption {
  bottom: var(--spacing7);
  left: var(--spacing5);
}
#footer a {
  color: var(--light);
  text-decoration: none;
}

/* ANIMATIONS */
.glisten {
  animation: glisten infinite;
  amimation-direction: normal;
  animation-delay: 2.5s;
  animation-duration: 10s;
  background: linear-gradient(
    135deg,
    #ffffff   0%,
    #ffffff  50%,
    #6EB6CC  55%,
    #FFFFFF  56%,
    #ffffff 100%
  );
  background-size: 500% 100%;
}
@keyframes glisten {
    0% { background-position: 100% 0; }
  100% { background-position:   0% 0; }
}