/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/*
Extra small devices (portrait phones, less than 544px)
No media query since this is the default in Bootstrap because it is "mobile first"
*/


/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #navigation {
    background: transparent;
  }

  #navigation .navbar-nav {
    margin-bottom: 0;
  }

  .nav-item.last-item {
    margin-bottom: 0;
  }

  #map-wrapper {
    margin: 0;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}


/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

@media (max-width: 1800px) {
  #indicators-title .wrapper {
    margin-top: -150px;
  }
}

@media (max-width: 1580px) {
  #indicators-title .wrapper {
    margin-top: -140px;
  }

  #compare {
    top: -30px;
  }

  #compare .filters {
    top: -190px;
  }

  #compare .lands {
    top: -170px;
  }

  #table {
    top: -320px;
  }

  #table .filters {
    margin-top: -230px;
  }

  #about .top-wave {
    bottom: -30px;
  }
}

@media (max-width: 1460px) {
  #indicators-title .wrapper {
    margin-top: -130px;
  }

  #compare .filters {
    top: -170px;
  }

  #compare .lands {
    top: -150px;
  }

  #about .content {
    top: -20px;
  }
}

@media (max-width: 1280px) {
  #indicators-title .wrapper {
    margin-top: -100px;
    margin-bottom: 40px;
  }

  #table {
    top: -380px;
  }

  #table .filters {
    margin-top: -200px;
  }
}

@media (max-width: 1240px) {
  #indicators-title .wrapper {
    margin-top: -80px;
    margin-bottom: 50px;
  }

  #map .filters {
    margin-top: -250px;
  }

  #about .top-wave {
    bottom: -20px;
  }

  #about .content {
    top: -10px;
  }
}

@media (max-width: 1120px) {
  #indicators-title .wrapper {
    margin-top: -60px;
    margin-bottom: 50px;
  }

  #compare {
    top: -10px;
  }

  #compare .hero {
    top: -140px;
  }

  #compare .filters {
    top: -150px;
  }

  #compare .lands {
    top: -130px;
  }
}

@media (max-width: 991px) {
  #intro .hero h1 {
    margin: -80px 0 70px;
  }

  #indicators-title .wrapper {
    margin-top: -40px;
    margin-bottom: 50px;
  }

  #compare .filters {
    flex-wrap: wrap;
    top: -110px;
  }

  #compare .lands {
    top: -100px;
  }

  #map .scale-wrapper {
    justify-content: center;
  }

  #about .hero h1 {
    margin: 40px 0 30px;
  }
}

@media (max-width: 980px) {
  #intro .hero h1 {
    margin: -80px 0 70px;
  }

  #compare .hero {
    top: -110px;
  }

  #map {
    top: -220px;
  }

  #map .hero h1 {
    margin-top: 50px;
  }

  #table {
    top: -330px;
  }
}

@media (max-width: 870px) {
  #intro .hero h1 {
    margin: -80px 0 70px;
  }

  #indicators-title .wrapper {
    margin-top: -20px;
    margin-bottom: 50px;
  }

  #about .content {
    top: 10px;
  }
}

@media (max-width: 840px) {
  #indicators-title .wrapper {
    margin-top: 0;
    margin-bottom: 50px;
  }
}


@media (max-width: 800px) {
  #compare .hero {
    top: -90px;
  }

  #compare .filters {
    flex-wrap: wrap;
    top: -100px;
  }

  #compare .lands {
    top: -90px;
  }
}

@media (max-width: 720px) {
  #compare {
    top: 0;
  }

  #map {
    top: -200px;
  }

  #map .scale {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  #service .justify-content-center {
    justify-content: flex-start !important;
    padding: 0 30px;
  }

  #service .justify-content-center div:first-child {
    margin-bottom: 15px;
  }

  #about .hero h1 {
    margin: 50px 0 30px;
  }

  #about .top-wave {
    bottom: -10px;
  }
}

@media (max-width: 700px) {
  #indicators-title .wrapper {
    margin-bottom: 40px;
  }
}

@media (max-width: 640px) {
  #indicators-title .wrapper {
    margin-bottom: 30px;
  }
}

@media (max-width: 570px) {
  #intro .hero h1 {
    margin: 0px 0 70px;
  }

  #indicators-title .wrapper {
    margin-bottom: 25px;
  }

  #compare .filters {
    top: -80px;
  }

  #compare .lands {
    top: -60px;
  }

  #map {
    top: -170px;
  }

  #table {
    top: -290px;
  }

  #about .top-wave {
    bottom: -1px;
  }

  #about .hero h1 {
    margin: 80px 0 20px;
  }
}

@media (max-width: 550px) {
  #map .scale {
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    padding: 0 15px;
  }

  #map .scale li {
    width: 100% !important;
    margin: 0 auto !important;
  }

}

@media (max-width: 460px) {
  #compare .hero {
    top: -2px;
  }

  #compare .hero {
    top: -70px;
    height: 760px;
  }

  #compare .hero h1 {
    font-size: 2.3rem !important;
    margin-top: 50px !important;
  }

  #map .hero h1,
  #download h1,
  #table .hero h1 {
    font-size: 2rem !important;
  }

  #table .hero h1 {
    margin-top: 100px !important;
  }

  #table .hero,
  #map .hero {
    height: 550px;
  }

  #compare .filters {
    top: -60px;
  }

  #compare .results-top-wave {
    width: 108%;
    bottom: -6px !important;
  }

  #compare .lands .card .card-header .land-title {
    margin-bottom: 8px;
    float: left;
  }

  #compare .lands .card select {
    margin-left: 0 !important;
    max-width: 250px !important;
  }

  #map select.indicator {
    max-width: 230px;
  }

  .slick-dots {
    bottom: -40px;
  }

  .slick-dots li button:before {
    font-size: 14px;
    color: #ffffffb0;
  }

  .slick-dots li.slick-active button:before {
    font-size: 18px;
    color: #FFFFFF;
  }
}

@media (max-width: 430px) {
  .header-logo {
    max-width: 170px !important;
  }

  #intro .hero h1 {
    font-size: 1.8rem !important;
    margin-top: 30px !important;
  }

  #intro .hero p {
    font-size: 1.25rem !important;
    line-height: 1.65rem !important;
    margin-top: -40px;
  }

  #indicators-title .wrapper h3 {
    font-size: 1.8rem !important;
  }

  #indicators-title .wrapper p {
    font-size: 1.3rem;
  }
}


@media (max-width: 320px) {
  #intro .hero h1 {
    font-size: 1.5rem !important;
    margin-top: 30px !important;
  }

  #intro .hero p {
    font-size: 1rem !important;
    line-height: 1.4rem !important;
    margin-top: -40px;
  }
}