@import url("https://fonts.googleapis.com/css?family=Chonburi&display=swap");

body {
  overflow-x: hidden;
}

h1 {
  font-family: "Chonburi", "Not Courier Sans", monospace;
  margin: 1em 0;
}

#title {
  margin: 1.5em 0em;
  width: 35em;
}

#title-mobile {
  display: none;
}

#mainImage {
  width: 20em;
}

.appear {
  display: none;
}

#our-speakers {
  transition: 3s ease-in-out;
  opacity: 0;
}

#lead-panelists .panelists {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 0.5em;
  padding: 0.5em;
  background-color: #74ffb6;
  border-radius: 2.5rem;

  cursor: pointer;

  transition: 0.5s ease-in-out;
}

#lead-panelists .row {
  display: flex;
  justify-content: center;
}

#lead-panelists h2 {
  text-align: center;
  font-size: 30px;
  color: #26469d;
  width: 100%;
  font-weight: 600;
  display: block;
  margin: 0;
}

#lead-panelists img {
  width: 100%;
}

#lead-panelists .panelists:hover {
  background-color: #33cc99;
  transition: 0.5s ease-in-out;
}

#workshops .workshop-lead {
  display: block;
  align-items: center;
  justify-content: center;

  background-color: #26469d;
  border-radius: 2.5rem;
  padding: 2.5rem;

  margin: 0.5em 0;

  color: white;

  transition: 0.25s ease-in-out;

  width: auto;
  height: auto;
}
/* 
#workshops .workshop-lead .leader {
  max-height: 0;
  -webkit-transition: max-height 0.3s ease-in-out;
  -moz-transition: max-height 0.3s ease-in-out;
  -o-transition: max-height 0.3s ease-in-out;
  transition: max-height 0.3s ease-in-out;

  overflow-y: hidden;
} */

#workshops .workshop-lead .infoinfo a {
  color: #33cc99
}

/* #workshops .workshop-lead .leader.pop {
  max-height: auto;
} */

.ws-info {
    margin: 2rem;
}

/* .ws-info .selected{
    max-height: max-content;
} */

.ws-info .infoinfo img{
    display: inline-flex;
    width:20%;
    float: left;
}

.ws-info .infoinfo span{
  padding: 0.5em 0;
    text-align: left;
    display: block;
    left: 1em;
    position: relative;
    font-size: 18pt;
}

.workshop-lead:hover {
  cursor: pointer;
  background-color: #09163a;
  transition: 0.5s ease-in-out;
}

.workshop-lead .seleted{
    background-color: #09163a;
}

.panelists .selected {
  width: 50%;
  transition: 2s ease;
  margin: 0 0.5em;
}

#lead-panelists .panelists span {
  font-size: 20px;
  display: none;
  position: relative;
}

#rsvp {
  font-size: 1.5em;
  width: 8em;
}

#our-speakers img {
  width: 20%;

  float: left;
}

.speakers {
  margin: 1em;
}

#our-speakers h2 {
  text-align: center;
  font-size: 35px;
  margin: 1.5em auto;
  width: 40%;
  border: #f199a0 solid 5px;
  background-color: #f199a0;
  color: white;
  padding: 0.5em 0;
  font-weight: 600;
}

#call-for-speakers {
  padding: 1.5em 3em;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../images/spkrrct.jpg");
}

#call-for-speakers h1 {
  color: white;
}

#call-for-speakers p {
  padding: 1em 8em;
}

.btn {
  background-color: #ffa0cb;
  color: #e600a2;
}

.btn-acmc {
  background-color: #f8ff64;
  color: #26469d;
}

.btn-acmc:hover {
  background-color: #26469d;
  color: #f8ff64;
}

#faq-info {
  padding: 2em 3em;
  width: 100%;
  background-position: center;
  background-repeat: repeat;
  background-size: auto;
  background-image: url("../images/pnlsct2.jpg");
}

.faq-item {
  width: 75%;
  background-color: rgba(255, 255, 255, 0.8);
  margin: 2em auto;
  padding: 1em 2em;
  border: solid #e600a2 5px;
  border-radius: 15px;
}

#gmap_canvas {
  width: 50%;
  height: 500px;
  border-radius: 15px;
  padding-bottom: 2em;
}

#location {
  background-color: rgba(255, 160, 203, 0.8);
  border: solid 3px #e600a2;
  border-radius: 15px;
  padding: 2em 6em;
}

.schedule {
  margin: 3% 0;
}

table {
  width: 100%;
}

th {
  border: solid #f199a0 3px;
  background-color: #f199a0;
  color: white;
  text-align: center;
}

td {
  color: #26469d;
  border: solid #5bc0e8 3px;
  font-size: 25px;
}

@media screen and (max-width: 900px) {
  .details {
    margin: 0;
  }

  #title {
    display: none;
  }

  #title-mobile {
    display: block;
    width: 100%;
  }

  #mainImage {
    width: 100%;
  }

  #call-for-speakers {
    padding: 0;
    background-image: url("../images/spkrsqu.jpg");
  }

  #call-for-speakers p {
    color: white;
    padding: 0 0.5em;
  }

  #gmap_canvas {
    width: 100%;
    height: 200px;
  }

  #faq-info {
    padding: 1em;
    background-size: contain;
    background-image: url("../images/pnlsqu2.jpg");
  }

  #location {
    padding: 0.5em;
  }

  .faq-item {
    width: 100%;
    margin: 1em auto;
  }

  #lead-panelists .row {
    flex: 2;
    flex-wrap: wrap;
  }

  #lead-panelists .panelists {
    width: 50%;
    margin: 0.25rem;
  }

  .ws-info .infoinfo img {
    width:50%;
    float: none;
    display:block;
  }

  .ws-info .infoinfo span{
    font-size: 10pt;
    left:0;
  }

  .schedule td {
    font-size: 15px;

  }

  #our-speakers img {
    width:50%;
    float:none;
  }

  #our-speakers h2{
    font-size: 110%;
    margin: 0.5rem auto;

  }
}