@font-face {
    font-family: "Bebas Neue";
    src:
        url("fonts/BebasNeue-Regular.ttf")
}

@media (min-width: 1200px){
  .ml-xl-n50 {
      margin-left: -50px;
  }
  .ml-xl-n30 {
      margin-left: -30px;
  }
  .ml-xl-n25 {
      margin-left: -25px;
  }
  .ml-xl-n20 {
      margin-left: -20px;
  }
  .mr-xl-n50 {
      margin-right: -50px;
  }

  .h1-xl {
    font-size: 40px !important;
  }

  .h5-xl {
    font-size: 24px !important;
  }

  .h6-xl {
    font-size: 20px !important;
  }

  .display-4-xl {
    font-size: 56px !important;
  }

  .display-5-xl {
    font-size: 40px !important;
  }
}

@media (min-width: 1400px) {
     .bg3-position-xxl {
      object-position: -250px;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .bg3-position-xl {
      object-position: -500px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .h4-lg {
      font-size: 24px;
  }

  .h3-lg {
      font-size: 28px;
  }

  .bg3-position-lg{
      object-position: 0px;
  }
  .ml-lg-n50 {
      margin-left: -50px;
  }

  .mr-lg-n50 {
      margin-right: -50px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
    .bg3-position-md{
        object-position: -60px;
    }

    .bg-zoomed-md{
        background-size: 0%;
    }

    .h4-md {
      font-size: 24px;
    }
}

@media (min-width: 575px) and (max-width: 767px){
  .bg3-position-sm {
      object-position: -170px;
  }

  .bg-zoomed-sm{
        background-size: 200%;
  }
}

@media (min-width: 450px) and (max-width: 574px){
  .bg3-position-xs {
      object-position: -350px;
  }

  .bg-zoomed-xs{
        background-size: 300%;
  }
}

@media (max-width: 450px){
  .bg3-position {
      object-position: -455px;
  }

  .bg-zoomed{
        background-size: 500%;
  }

  .h7 {
      font-size: 12px;
  }
}

html, body {
    margin: 0;
    padding: 0;
    font-family: "Bebas Neue";
    line-height: normal;
}

.active, .inactive:hover{
    opacity: 100%;
    color: #FFFFFF;
}

.inactive{
    opacity: 75%;
    color: #FFFFFF;
}

.carousel.slide{
    position: absolute;
    top: 380px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.carousel-control-next, .carousel-control-prev{
    filter: invert(100%);
}

.carousel-indicators{
    filter: invert(0%);
}

.card {
  margin-left: 10px;
  margin-right: 10px;
}