form {
  display: flex;
  flex-direction: column;

  background: rgba(250, 219, 200, 0.8);
  padding: 20px 15px;
  margin-bottom: 15px;
  border-radius: 5px;
}
.groups {
  display: flex;
  justify-content: space-around;
}
form h3 {
  float: none;
}
.jumbotron {
  background: rgba(250, 219, 200, 0.8);
  display: flex;
  justify-content: center;
  padding: 25px !important;
  margin-bottom: 15px;
}
.jumbotron img {
  margin-right: 40px;
}
.jumbotron h1 {
  font-family: "Audiowide", cursive;
  font-size: 60pt;
  color: black;
  text-shadow: 3px 3px#FF7E93;
  letter-spacing: 5px;
}
.form-group {
  margin-right: 15px;
  flex: 1;
}

#favorites {
  display: none;
}
.signDiv {
  display: flex;
  justify-content: space-between;
}
#signIn,
#favorites,
#out {
  margin: 10px 0;
}
#out {
  display: none;
}
#event-genre,
#signIn,
#favorites,
.fav,
#out {
  height: 38px;
  width: 150px;
  background-color: black;
  border-radius: 5px;
  color: white;
}
.greet {
  font-size: 18pt;
  color: whitesmoke;
}
a {
  color: indigo;
  margin: 5px 0;
}
.main-carousel {
  padding: 10px;
  margin-bottom: 50px;
}
.carousel-cell {
  width: 220px;
  margin: 10px;
  height: 220px;
  background-color: rgba(250, 219, 200, 0.8);
}
.carousel-cell h3 {
  text-align: center;
  margin: 100px 0;
}

.rowResult {
  display: flex;
}
.col {
  flex: 1;
  width: 50%;
  padding: 0 !important;
}
.h {
  margin-bottom: 10px;
  padding-top: 5px;
}
button {
  cursor: pointer;
}
#close,
.h {
  text-align: center;
}
.favList,
#close {
  background-color: black;
  border-radius: 5px;
  color: red;
}
.favList {
  padding: 5px 15px;
}
#close {
  padding: 0 10px;
}
.eventDiv,
#savedEvents {
  background-color: rgba(250, 219, 200, 0.8);
  padding: 15px;
  margin: 10px;
  display: flex;
  flex-direction: column;
}
#savedEvents {
  display: none;
  border-radius: 5px;
  flex-direction: column;
}
.rowEvents {
  display: flex;
  justify-content: space-between;
}
.image {
  width: 100%;
}

@media only screen and (max-width: 768px) {
  .rowResult {
    flex-direction: column;
  }
  .col {
    width: 100%;
  }
  #mainpglogo {
    display: none;
  }
  #map {
    width: 85vw !important;
  }
}

#map {
  height: 500px;
  width: 70vw;
  margin: auto;
  max-width: 1110px;
  margin-bottom: 10px;
}

#mainbody {
  display: none;
}

#intro {
  margin-left:0;
  height:100vh;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  overflow:hidden;
}


.color {
  display: grid;
  grid-template-columns: repeat(10,auto);
}

.div {
  height:100vh;
}
#test-0 {
  font-size: 5em;
  position: absolute;
  top: 18%;
  left: 112px;
  opacity: 0;
  z-index: 2;
}
#logo{
  width:10%;
}
#test-1 {
  font-size: 5em;
  position: absolute;
  top: 40%;
  left: 190px;
  opacity: 0;
  z-index: 2;
}
#test-2 {
  font-size: 5em;
  position: absolute;
  top: 40%;
  left: 235px;
  opacity: 0;
  z-index: 2;
}
#test-3 {
  font-size: 5em;
  position: absolute;
  top: 40%;
  left: 250px;
  opacity: 0;
  z-index: 2;
}
#test-4 {
  font-size: 5em;
  position: absolute;
  top: 40%;
  left: 285px;
  opacity: 0;
  z-index: 2;
}
#test-5 {
  font-size: 5em;
  position: absolute;
  top: 40%;
  left: 345px;
  opacity: 0;
  z-index: 2;
}

#playlistDiv
{
 width: 100%;
 display: flex;
 justify-content: space-around;
 margin-top: 2%;

}

#playlist
{
 width: 25%;
 position: relative;

}

#playlist img
{

   max-width: 100%;
   max-height: 100%;
   height: auto;
   width: auto;

}