@import url("https://fonts.googleapis.com/css2?family=Great+Vibes");
/* FONTS, Font COLORS, LINKS  ========================================*/
#perform-menu-link{
  border-bottom: 3px solid #d5b1f2;
}

/* Links ----------------------------------------------------*/


/* ----------------------------------------------
  PHONES Portrait 320-767px, Default values without media query
-------------------------------------------------*/
.sidenav {
  top: 10%;
}

hr {
  margin: 1em 15%;
  height: 2px;
  border: 0;
  background-image: linear-gradient(to right, rgba(237, 169, 33, 0), rgba(237, 169, 33, 0.4), rgba(237, 169, 33, 0));
}

.grid-div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5em;
  width: 100%;
  margin: 3em auto 0.5em auto;
}

.grid-div p {
  margin: 0.5em 0;
  text-align: center;
  padding: 0 10px;
}

.performer-div {
  padding-top: 0.5em;
  padding-bottom: 0;
  box-shadow: 0 0 3px 0 rgba(237, 169, 33, 0.4);
  border-radius: 5px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}

.performer-img-div {
  position: relative;
  margin-top: 0.5em;
}

.performer-img-div img {
  max-width: 100%;
  border-radius: 5px;
  margin: 0.2em 0 -3px 0;
  padding: 0;
}

.popup-text {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background-color: white;
  opacity: 0.9;
  overflow: hidden;
  transition: 0.4s ease-in;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-text p {
  text-align: justify;
  margin: 6px;
}

.showPopup {
  height: 35%;
}

.border-bottom {
  border-bottom: 1px solid lightgrey;
}

#rose {
  height: 0.5em;
  vertical-align: top;
}

/* ----------------------------------------------
PHONES PORTRAIT 320-767px  
  ----------------------------------------------*/
/*closing Phone PORTRAIT Media Query */
/* ----------------------------------------------
  PHONES LANDSCAPE 320-767px  
-------------------------------------------------*/
@media screen and (min-width: 320px) and (orientation: landscape) {
  .grid-div {
    margin: 5px;
    grid-template-columns: 1fr 1fr;
  }
}
/*Closing Landscape Query*/
/* -------------------------------------------------
IPAD PORTRAIT, 768px and Up
---------------------------------------------------*/
@media screen and (min-width: 768px) and (orientation: portrait) {
  h1 {
    font-size: 2.5em;
    margin: 0.2em 0;
  }

  h2 {
    font-size: 1.4em;
    /*margin-top: 0.3em;*/
    /*margin-bottom: 0.6em;*/
  }

  h3 {
    font-size: 1.2em;
  }

  p {
    font-size: 1.1em;
  }

  .list {
    font-size: 1.1em;
  }
}
/*closing Ipad Portrait */
/*  --------------------------------------
IPAD LANDSCAPE 768px
------------------------------------------*/
@media screen and (min-width: 768px) and (orientation: landscape) {
  .grid-div {
    grid-template-columns: 1fr 1fr;
    grid-gap: 4em 2.5em;
    width: 100%;
    margin: 4em auto 0.5em auto;
  }

  h1 {
    font-size: 3.5em;
    margin: 0.3em 0;
  }

  h2 {
    font-size: 1.7em;
    /*margin: 0.5em 0;*/
  }

  h3 {
    font-size: 1.4em;
    margin: 0.8em 0;
  }

  p {
    font-size: 1.2em;
  }

  .myMenu > li > a {
    font-size: 1.2em;
  }

  .list {
    font-size: 1.3em;
    line-height: 1.5em;
  }
}
/*closing Ipad Landscape*/
/*  --------------------------------------
DESKTOPS 1024px and Up
------------------------------------------*/
@media screen and (min-width: 1025px) and (any-hover: hover) {
  .performer-div:hover .popup-text {
    height: 35%;
  }
}

/*# sourceMappingURL=performers.css.map */