/* hover effect */

/* quotes */
.stars .star {
    height: 20px; 
    width: 20px;
}
.stars-lg .star {
    height: 36px; 
    width: 36px;
}
.star svg path { fill:#ffcc00; }
.quote svg { width: 60px; height: auto; }

/* mega text banners */
@media (min-width: 1200px) {
    #mega h1 { font-size:6vw; }
}
@media (min-width: 768px) and (max-width:1199px) {
    #mega h1 { font-size:8vw; }
}
@media (max-width: 767px) {
    #mega h1 { font-size:36px; }
}

/* shape: https://css-shape.com/trapezoid/ */
.trapezoid {
  --p: 7vw; 
  height: 100%;
  clip-path: polygon(var(--p) 100%,calc(100% - var(--p)) 100%,100% 0,0 0);
}

/* shape: https://css-shape.com/trapezoid/ */
.trapezoid-flipped {
  --p: 7vw;
  height: 100%;
  clip-path: polygon(var(--p) 0,calc(100% - var(--p)) 0,100% 100%,0 100%);
}

/* shape: https://css-shape.com/parallelogram/ */
.parallelogram {
  --p: 7vw; 
  height: 100%;
  clip-path: polygon(var(--p) 0,100% 0,calc(100% - var(--p)) 100%,0 100%);
}

.parallelogram-flipped {
  --p: 7vw; 
  height: 100%;
  clip-path: polygon(0 0,calc(100% - var(--p)) 0,100% 100%,var(--p) 100%);
}

/* shape: https://css-shape.com/slanted-edge/ */
.slant-right {
  --p: 15vw; /* control the shape (can be percentage) */
  height: 100%;
  clip-path: polygon(0 0,calc(100% - var(--p)) 0,100% 100%,0 100%);
  width: 60vw;
  padding-left: 5vw; 
  padding-right: 15vw;
}

/* shape: https://css-shape.com/slanted-edge/ */
.slant-left {
  --p: 15vw; 
  height: 100%;
  clip-path: polygon(var(--p) 0,100% 0,100% 100%,0 100%);
  width: 60vw;
  margin-left: auto;
  padding-right: 5vw; 
  padding-left: 15vw;
}

/* slants */
.slant-nw {
  height: 100%;
  clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 calc(100% - 50px));
  padding-top: 75px;
  padding-bottom: 75px;
  width: 100vw;
}
.slant-wn {
  height: 100%;
  clip-path: polygon(0 0, 100% 50px, 100% calc(100% - 50px), 0 100%);
  padding-top: 75px;
  padding-bottom: 75px;
  width: 100vw;
}
.double-slant-nw {
  height: 100%;
  clip-path: polygon(0 45px, 100% 0, 100% 100%, 0 calc(100% - 35px));
  padding-top: 150px;
  padding-bottom: 150px;
  position: relative;
  width: 100vw;
  z-index: 1;
}
.double-slant-nw:after {
  content: "";
  position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  background-color: var(--offblack);
  opacity: 0.25;
  clip-path: polygon(0 90px, 100% 10px, 100% calc(100% - 12px), 0 calc(100% - 70px));
  z-index:-1;
}
.double-slant-wn {
  height: 100%;
  clip-path: polygon(0 0, 100% 45px, 100% calc(100% - 35px), 0 calc(100% - 15px));
  padding-top: 150px;
  padding-bottom: 150px;
  position: relative;
  width: 100vw;
  z-index: 1;
}
.double-slant-wn:after {
  content: "";
  position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  background-color: var(--offblack);
  opacity: 0.25;
  clip-path: polygon(0 12px, 100% 90px, 100% calc(100% - 70px), 0 calc(100% - 30px));
  z-index:-1;
}

.bottom-slant-down {
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 12%));
  padding-top: 50px;
  padding-bottom: 0;
  width: 100vw;
}
.double-slant-down {
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 60px));
  padding-top: 50px;
  padding-bottom: 0;
  width: 100vw;
}
.double-slant-down::after {
  background-color: var(--white);
  content: "";
  clip-path: polygon(0 calc(100% - 90px), 100% calc(100% - 50px), 100% 100%, 0 100%);
  opacity: 0.25;
  position: absolute;
  top: 0;
  right: 0; 
  bottom: 0; 
  left: 0;
  z-index: 3;
}
.double-slant-down img { position: relative; z-index: -1; }

.bottom-slant-up {
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12%), 0 100%);
  width: 100vw;
}
.double-slant-up {
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20%), 0 100%);
  width: 100vw;
}
.double-slant-up::after {
  background-color: var(--white);
  content: "";
  clip-path: polygon(0 calc(100% - 12%), 100% calc(100% - 25%), 100% 100%, 0 100%);
  opacity: 0.25;
  position: absolute;
  top: 0;
  right: 0; 
  bottom: 0; 
  left: 0;
  z-index: 3;
}
.double-slant-up img { position: relative; z-index: -1; }

.top-slant-up {
  height: 100%;
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
  width: 100vw;
}

.top-slant-down {
  height: 100%;
  clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%);
  width: 100vw;
}

.top-double-up {
  height: 100%;
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
  width: 100vw;
}
.top-double-up::after {
  background-color: var(--white);
  content: "";
  clip-path: polygon(0 0, 100% 0, 100% 10%, 0 18%);
  opacity: 0.25;
  position: absolute;
  top: 0;
  right: 0; 
  bottom: 0; 
  left: 0;
  z-index: 3;
}
.top-double-up img { position: relative; z-index: -1; }

.top-double-down {
  height: 100%;
  clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%);
  width: 100vw;
}
.top-double-down::after {
  background-color: var(--white);
  content: "";
  clip-path: polygon(0 0, 100% 0, 100% 20%, 0 10%);
  opacity: 0.25;
  position: absolute;
  top: 0;
  right: 0; 
  bottom: 0; 
  left: 0;
  z-index: 3;
}
.top-double-down img { position: relative; z-index: -1; }

.footer-social svg {
  height: 30px; 
  width: auto;
}

.footer-social-1rem svg {
  height: 1em; 
  width: auto;
}

@media (max-width: 767px) {

  .top-slant-up,
  .top-double-down,
  .top-double-up,
  .top-double-down {
    padding-top: 275px;
  }

}

/* hero grid */
#heroGrid .bg-grid {
  background-image: linear-gradient(to right, #80808012 1px, #0000 1px), linear-gradient(#80808012 1px, #0000 1px);
  background-repeat: repeat;
  background-size: 24px 24px, 24px 24px;
}
#heroGrid .eyebrow {
  background-color: rgba(157,215,251,0.15);
  border: 1px solid rgba(157,215,251,0.35);
  border-radius: 2rem;
  color: #9dd7fb;
  padding: 0.75em 1.5em;
  position: relative;
} 
#heroGrid .eyebrow:before { 
  background-color: #faa81b;
  border-radius: 50%; 
  content: " ";
  display: inline-block;
  height: 0.5em;
  margin-right: 0.5em;
  transform: translateY(-.10em);
  width: 0.5em;
}
.btn-icon { height: 0.8em; width: 1em; vertical-align:middle; }
.btn-icon svg { height: 16px; width: 16px; }
@keyframes adjustShadow {
  0% {
    text-shadow: rgba(157,215,251,0.3) 0px 0px 30px;
  }
  100% {
    text-shadow: rgba(157,215,251,0.46) 0px 0px 20px;
  }
}
@keyframes moveFormGradient {
  0% {
    background-position: 2% 50%;
  }
  100% {
    background-position: 93% 50%;
  }
}