.bg-light { background: #F7F7F7 !important }

.navbar {
  --flex-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler { 
  border: 0;
  width: 48px;
  height: 48px;
  display: flex;
  gap: .375rem;
  flex-direction: column;
  justify-content: center;
  font-size: 100%;
  padding: .75rem .5rem }

header .nav-link { 
  transition: all 300ms;
  color: #FFF;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 1 !important;
  font-weight: bold }
  
header .nav-link:hover,
header .nav-link:active,
header .nav-link:focus { 
  letter-spacing: .25rem;
  color: var(--flex-primary) }

@media(max-width:991.98px){
    header [class*="container"] { padding-right: 1rem  !important }

    header .navbar-brand img { width: 150px }
  
    header .navbar-collapse { 
      background: var(--flex-dark);
      width: 100%;
      position: fixed;
      z-index: 100000;
      top: 0;
      left: 0  }
  
    header .navbar-nav {
      justify-content: center;
      width: 100%;
      height: 100vh }  
  
    header .nav-link { 
      text-align: center;
      color: #FFF;
      opacity:.5;
      padding: .75rem 3rem !important; 
      width: 100%;
      font-size: 120% }
  
    header .nav-link.active,
    header .nav-link:hover,
    header .nav-link:active,
    header .nav-link:focus { 
      opacity:1;
      color: var(--flex-primary) !important }
  
    header .btn { 
      margin: 0 3rem;
      font-size: 120% }
}

#hero .hero-cover {
  filter: contrast(10) grayscale(1);
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: .075 }

.galaxy {
  position: relative;
  width: 100%;
  height: 100% }

@media(max-width:767.98px){
  .galaxy { 
    height: 500px;
    transform:scale(.9) }
}

.sun, 
.planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border-radius: 50% }

.sun { background-color: #FFF }

.sun img { z-index: 1 }

.planet {
  background-color: #FFF;
  background-repeat: no-repeat;
  background-size: cover;
  animation-iteration-count: infinite;
  animation-timing-function: linear }

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation-name: orbit;
  animation-iteration-count: infinite;
  animation-timing-function: linear }

/* Animations */
@keyframes orbit {
  0%   { transform: rotateZ(0deg); }
  100% { transform: rotateZ(-360deg); } 
}

/* Orbit sizes */
.p1.orbit,
.p2.orbit {
  width: 2.9em;
  height: 2.9em;
  margin-top: -1.45em;
  margin-left: -1.45em }

.p3.orbit,
.p4.orbit {
  width: 4.2em;
  height: 4.2em;
  margin-top: -2.1em;
  margin-left: -2.1em }

.p5.orbit,
.p6.orbit {
  width: 5.4em;
  height: 5.4em;
  margin-top: -2.7em;
  margin-left: -2.7em }

.p7.orbit {
  border: 1px solid rgba(255, 255, 255, 0.05);
  width: 6.6em;
  height: 6.6em;
  margin-top: -3.3em;
  margin-left: -3.3em }

/* Planet starting positions */
.p1 img { left: 30%; top: 2% } 
.p2 img { left: 102%; top: 50% } 
.p3 img { left: 3%; top: 35% } 
.p4 img { left: 50%; top: 100% } 
.p5 img { left: 30%; top: 3% } 
.p6 img { left: 30%; top: 95% } 

/* Planet animation durations */
.p1.orbit { animation-duration: 15s }
.p2.orbit { animation-duration: 25s }
.p3.orbit { animation-duration: 30s }
.p4.orbit { animation-duration: 40s }
.p5.orbit { animation-duration: 60s }
.p6.orbit { animation-duration: 50s }
  
/* Planet sizes */
.sun { font-size: 10em }
.orbit { font-size: 5.5em }

.planet { 
  width:5.5rem;
  height:5.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  animation-name: planetLabel;
  animation-iteration-count: infinite;
  animation-timing-function: linear  } 

.p1 .planet { animation-duration: 15s }
.p2 .planet { animation-duration: 25s }
.p3 .planet { animation-duration: 30s }
.p4 .planet { animation-duration: 40s }
.p5 .planet { animation-duration: 60s }
.p6 .planet { animation-duration: 50s }

/* Animations */
@keyframes planetLabel {
  0%   { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); } 
}

.btn { 
  font-weight: bold;
  padding: 1rem 1.5rem }

ul.mb-0 { padding-left: 1rem }
ul.mb-0 li:not(:last-child) { margin-bottom: .5rem }

.btn-outline-primary:hover,
.btn-outline-secondary:hover { color: #FFF !important }

.text-gradient {
  background: linear-gradient(180deg, rgba(71,186,248,1) 25%, rgba(79,100,197,1) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientAnimation 3s ease infinite alternate;
}

@keyframes gradientAnimation {
  0% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 100%;
  }
}



  @keyframes zoomIn {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(2);
    }
}

.zoom-in {
    animation: zoomIn 120s ease-out;
}

.btn { transition: all 300ms }

.btn:hover,
.ls-1 { letter-spacing: .25rem  }

.shadow {
  box-shadow: 0 1rem 2rem rgba(17,41,57,5%) !important;
}


#vendors img {
  transition: all 300ms;
  opacity: .25;
  filter:grayscale(1) contrast(1) brightness(0)
}

#vendors img:hover { 
  opacity:1;
  filter:grayscale(0) }

@media(max-width:1199.98px){
  #market .pattern img {
    max-width: 100% !important
  }
}

@media(min-width:769px){
  #market .pattern {
    top: -650px
  }
}

@media(min-width:1200px){
  .position-lg-absolute { position: absolute }

  #market .pattern img {
    position: absolute;
    max-width:650px
  }
}