/* Custom colors 
Greens: 
 turquoise: #1abc9c
 green sea: #1abc9c
 emerald: #1abc9c
 nephritis: #27ae60
Blues: 
 peter river: #3498db
 belize hole: #2980b9 
Purples: 
 amethyst: #9b59b6
 wisteria: #8e44ad
Blacks:
 wet asphalt: #34495e
 midnight blue: #2c3e50
YellowsOranges: 
 sunflower: #f1c40f
 orange: #f39c12
 carrot: #e67e22
 pumpkin: #d35400
Reds:
 alizarin: #e74c3c
 pomegranate: #c0392b
WhitesGrays:
 clouds: #ecf0f1
 silver: #bdc3c7
 concrete: #95a5a6
 asbestos: #7f8c8d
 
 */

.transparent-bg {
    background-color: transparent;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.discord-purple-bg {
    background-color: #7289DA;
}

.pattaya {
    font-family: "Pattaya", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.display-8 {
    font-size: 1.8em;
    color: #2980b9;
}

.display-9 {
    font-size: 1.4em;
    color: #2980b9;
}

.teal-color {
    color: #16a085;
}

.teal-background {
    background-color: #16a085;
}

.text-pomegranate {
    color: #c0392b;
}

.pomegranate-bg {
    background-color: #c0392b;
}

.belize-bg {
    background-color: #2980b9;
}
.text-belize{
  color:#2980b9;
}

/* Hero Header */
.hero {
    background: url("/assets/img/helmets_min.jpg") center center/cover no-repeat;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    position: relative;
}

.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.hero-content {
    position: relative;
    z-index: 2;
}

 /* Animated Hamburger */
    .navbar-toggler {
      border: none;
      outline: none;
    }
    .navbar-toggler-icon {
      width: 25px;
      height: 2px;
      background-color: #fff;
      display: block;
      position: relative;
      transition: all 0.3s ease-in-out;
    }
    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
      content: "";
      width: 25px;
      height: 2px;
      background-color: #fff;
      position: absolute;
      left: 0;
      transition: all 0.3s ease-in-out;
    }
    .navbar-toggler-icon::before {
      top: -8px;
    }
    .navbar-toggler-icon::after {
      top: 8px;
    }
    .navbar-toggler.collapsed .navbar-toggler-icon {
      background-color: transparent;
    }
    .navbar-toggler.collapsed .navbar-toggler-icon::before {
      /* transform: rotate(45deg); */
      top: 0;
    }
    .navbar-toggler.collapsed .navbar-toggler-icon::after {
      /* transform: rotate(-45deg); */
      top: 0;
    }