#nav-mobile li.search .search-wrapper input#search #search {
    display: block;
    font-size: 16px;
    font-weight: 300;
    width: 100%;
    height: 45px;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 45px 0 15px;
    border: 0;
}

.page-footer {
    background-color: #666666;
    text-align: center;
    height: 50px;
    bottom: 0%;
    left: 0%;
    right: 0%;
    flex: 1 0 auto;

}

.featured-body #crossroads {
    height: 75px;
    width: 300px;
}

.slider .indicators .indicator-item.active {
    background-color: #0288d1;
  }

  .btn, .btn-large, .btn-small {
    background-color: #0288d1;
  }

  .btn:hover, .btn-large:hover, .btn-small:hover {
    background-color: #03a9f4;
  }

  .btn:focus, .btn-large:focus, .btn-small:focus,
  .btn-floating:focus {
    background-color: #01579b;
  }

  .modal.bottom-sheet {
      max-height: 90%;
  }


  hr {
    border: 1px solid #e0e0e0;
  }

  #location-slider, .featured-header, .results-header {
      margin-bottom: 40px;
    }

  .local-artist-header, .discover-header {
    margin-top: 10px;
  }

  #venue-button, #genre-button {
      margin-bottom: 75px;
    }

  .featured-body {
    margin-left: 20px;
    margin-right: 20px;
  }

  .results-body {
      margin-left: 20px;
      margin-right: 20px;
    }

  .events-image {
    max-width: 325px;
    max-height: 200px;
  }

  .events-card {
    width: 325px;
    height: 325px;
  }

  .carousel.carousel-slider .carousel-item img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .carousel.carousel-slider {
    top: 0;
    left: 0;
    display: contain;
  } */
  
  .carousel.carousel-slider .carousel-fixed-item {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    z-index: 1;
  }
  
  .carousel.carousel-slider .carousel-fixed-item.with-indicators {
    bottom: 50px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    z-index: 1;
  } */
  
  
  .carousel.carousel-slider .carousel-item h2 {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    z-index: 1;
  } */
  
  .carousel.carousel-slider .carousel-item p {
    font-size: 15px;
  }

#logo {
  margin: 8px;
}

h5 {
  text-align: center;
}

a {
  color: orange;
}

.playCircle {
  color: #0288d1;
}


body, html {
  height: 100%;
}

.table {
  margin: 30px;
 }
 
 th {
   font-weight: bolder;
   background-color: #eceff1;
 }
 
 #map-link {
   color: black;
 } */

/* ---------HERO BANNER CSS ------------- */
/* The location page hero image */
#venue-hero-image {
/* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/tiesto-uptown.jpg");

/* Set a specific height */
height: 50%;

/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-bottom: 30px;
}

/* The events page hero image */
#events-hero-image {
/* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/crowd.jpg");

/* Set a specific height */
height: 50%;

/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-bottom: 30px;
}

/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

/* #modal-see-events {
  float: right;
  position: absolute;
  top: 16px;
  right: 16px;
} */

/* Media Queries */

@media only screen and (max-width: 600px) {

/* .collection .collection-item.avatar .secondary-content {
  position: block; */

  /* #modal-see-events {
    position: absolute;
    bottom: 16px;
    left: 16px;
  } */

}