/* ===================================================================================

Theme Name: GrandConference Child – Existem Events
Theme URI: https://themes.themegoods.com/grandconference/landing
Template: grandconference
Description: Premium Conference & Event Theme
Version: 1.3
Author: ThemeGoods
Author URI: https://themeforest.net/user/ThemeGoods
License: GNU General Public License
License URI: https://themeforest.net/licenses/regular_extended
Text Domain: grandconference

====================================================================================== */


/* Amends to parent theme style */

label { font-size: 17px; }
.ppb_header_content ul li { margin-left: 1.25em; }
h2.ppb_title { font-weight: 500; }
.mc4wp-form-fields input { text-align: left; }
.grecaptcha-badge { visibility: hidden; }
.sidebar_content ul li .social_wrapper.shortcode,
.sidebar_content ul li .social_wrapper.shortcode ul {
    text-align: left !important;
}
figure.wp-block-image { margin: 0; }
figure.wp-block-image + h2 { margin-top: 0.65em; }
#page_caption.hasbg .page_tagline {
    border: 0;
    max-width: 770px;
    margin: 2em 3em 0 0;
}
.ui-accordion + p:empty + h2 { margin-top: 1.75em; }
#page_content_wrapper .sidebar .content .textwidget,
.page_content_wrapper .sidebar .content .textwidget { padding: 0; }
#page_caption.hasbg .page_tagline { opacity: 1; }
.ticket_wrapper li.title_row .ticket_desc {
    font-size: 14px;
    opacity: 1;
    font-weight: 800;
    margin-top: 0.5em;
}

/*  PARTNERS GRID -----------------------------------------------------------*/
.partnersGrid {
  /*display: grid;
  grid-gap: 4rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 0.15fr));
  justify-content: center;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-left: 4rem;
  padding-right: 4rem;
  max-width: 1600px;
  margin: 0 auto;
}
.partnersGrid.exhibitor {
  padding-left: 0;
  padding-right: 0;
}

.partnersGrid div {
  flex: 0 1 35%;
  margin: 3% 3%;
  max-width: 300px;
}
.partnersGrid.headline div,
.partnersGrid.premier div { flex: 0 1 43%; }
.partnersGrid.exhibitor div { flex: 0 1 35%; }

@media(min-width: 960px) {
  .partnersGrid div  { flex: 0 1 25%; }
  .partnersGrid.headline div,
  .partnersGrid.premier div { flex: 0 1 25%; }
  .partnersGrid.exhibitor div { flex: 0 1 20%; }
}
@media(min-width: 1200px) {
  .partnersGrid div { flex: 0 1 14%; }
  .partnersGrid.headline div,
  .partnersGrid.premier div { flex: 0 1 20%; }
  /* Scale exhibitors to fit 6 per line */
  .partnersGrid.exhibitor div {
      flex: 0 1 12%;
      margin: 2% 2%;
  }
}
.partnersGrid img {
	max-width: 100%;
	max-height: 80px;
  object-fit: contain;
  object-position: center;
}

/*  PARTNERS SLIDE IN PANEL--------------------------------------------------*/
/* --------------------------------
SEE: https://codyhouse.co/gem/css-slide-in-panel/

*/
.cd-panel {
  div, div::after, div::before,
  p, p::after, p::before,
  a, a::after, a::before,
  ul, ul::after, ul::before,
  li, li::after, li::before {
    content: '';
    box-sizing: border-box;
  }
}
.panelHeaderText {
  font-weight: 700;
}
.cd-panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  transition: visibility 0s 0.6s;
  z-index: 110;
}
.cd-panel::after {
  /* overlay layer */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  content: '';
}
.cd-panel.is-visible {
  visibility: visible;
  transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.5s;
}
.cd-panel.is-visible .cd-panel-close::before {
  animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
  animation: cd-close-2 0.6s 0.3s;
}


@keyframes cd-close-1 {
  0%, 50% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(45deg);
  }
}
@keyframes cd-close-2 {
  0%, 50% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-45deg);
  }
}
.cd-panel-header {
  position: fixed;
  width: 90%;
  height: 50px;
  line-height: 50px;
  background: #111;
  z-index: 2;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    transform: translate3d(0,0,0);
    transition: transform 0.5s 0s;
    transition-timing-function: cubic-bezier(0.2,1,0.3,1), ease;
  max-width: 450px;
}
.panelHeaderText {
  font-weight: bold;
  color: #FFF;
  padding-left: 5%;
}
.from-right .cd-panel-header, .from-left .cd-panel-header {
    transform: translate3d(0,-50px,0);
}
.from-right .cd-panel-header {
  right: 0;
}
.from-left .cd-panel-header {
  left: 0;
}
.is-visible .cd-panel-header {
    transition: transform 0.5s 0.3s;
    transform: translate3d(0,0,0);
}
@media only screen and (min-width: 768px) {
  .cd-panel-header {
    width: 60%;
  }
}
@media only screen and (min-width: 1000px) {
  .cd-panel-header {
    width: 40%;
  }
}
@media only screen and (min-width: 1400px) {
  .cd-panel-header {
    width: 30%;
  }
}

.cd-panel-close {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 60px;
  /* image replacement */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
.cd-panel-close::before, .cd-panel-close::after {
  /* close icon created in CSS */
  position: absolute;
  top: 22px;
  left: 20px;
  height: 3px;
  width: 20px;
  background-color: #FFF;
  content: "";
  /* this fixes a bug where pseudo elements are slighty off position */
  backface-visibility: hidden;
}
.cd-panel-close::before {
  transform: rotate(45deg);
}
.cd-panel-close::after {
  transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
  background-color: #162a31;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
  background-color: #ffffff;
  transition-property: transform;
  transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
  transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
  transform: rotate(135deg);
}

.cd-panel-container {
  position: fixed;
  width: 90%;
  height: 100%;
  top: 0;
  background: #FFF;
  color: #222;
  z-index: 1;
  transition: transform 0.6s, opacity 0.3s;
  transition-timing-function: cubic-bezier(0.2,1,0.3,1), ease;
  transform: translate3d(0, 0, 0);
  max-width: 450px;
  opacity: 0;
  &.mod-dark {
     background: #222;
     color: #FFF;
  }
}
.from-right .cd-panel-container {
  right: 0;
  transform: translate3d(130%, 0, 0);
}
.from-left .cd-panel-container {
  left: 0;
  transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

@media only screen and (min-width: 768px) {
  .cd-panel-container {
    width: 60%;
  }
}
@media only screen and (min-width: 1000px) {
  .cd-panel-container {
    width: 40%;
  }
}
@media only screen and (min-width: 1400px) {
  .cd-panel-container {
    width: 30%;
  }
}

.cd-panel-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 5.35rem 2rem;
    overflow: auto;
    /* smooth scrolling on touch devices */
    -webkit-overflow-scrolling: touch;
}
.cd-panel-content img {
    max-width: 100%;
}

.cd-panel-content .job-title::after  {
    content: ",";
}
.cd-panel-content p:first-of-type {
    margin-top: 0;
}
@media only screen and (min-width: 768px) {
  .cd-panel-content p {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.6;
  }
}
.profileBoxContent {
    transition-timing-function: cubic-bezier(0.2,1,0.3,1), ease;
    transition-duration: 1.7s;
    transition: transform 0.6s, opacity 0.3s;
    opacity: 0;
}
.is-visible .profileBoxContent {
      opacity: 1;
}
/* Panel Customisations */
.profileBox {
  cursor: pointer;
  display: grid;
  justify-content: center;
}
.profileBoxContent { display: none; }
.cd-panel-content > .profileBoxContent { display: block; margin-right: 4rem; }
.cd-panel-content img { max-width: 70%; margin-bottom: 1.75rem; }


/* Mek Instagram widget styles */
.meks-instagram-widget > div {
  box-sizing: border-box;
}
.meks-instagram-widget > div img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

.meetingButton {
    background: #000;
    color: #FFF;
    padding: 0.5em 0.75em;
    margin: 0.5em 0;
    display: inline-block;
    border-radius: 0.3em;
    transition: background 0.3s;
}
.meetingButton:hover {
    background: #333;
    color: #FFF;
}