#topcontrol {
  z-index: 1011000011;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
h2[style*="text-align: center"],
h2.centered {
  text-align: center;
  margin: 0 0 90px;
}
  h2[style*="text-align: center"]:after,
  h2.centered:after {
    left: 50% !important;
    transform: translateX(-50%);
  }
.hidden,
.menu-icon,.fas.menu-closer {
  display: none;
}
hr {
  margin: 100px 0;
}
img {
  margin: 0 auto;
}
.main {
  padding: 90px 0 30px;
}
.main.with-bg-img {
  padding: 90px 0 70px;
}
.intro-content {
  padding-top: 40px;
}
.container {
  position: relative;
  z-index: 9;
  padding: 0 40px;
}
#conference-header {
  position: relative;
  z-index: 10;
	padding: 40px 0;
}
#conference-header .container {
  max-width: 90%;
  display: flex;
  justify-content: space-between;
}
  .conference-logo {
    display: flex;
		max-width: 200px;
	  height: auto;
  }
  .logo-title {
    font-size: 32px;
    color: var(--blue);
    text-transform: uppercase;
    margin: 0;
  }
  #conference-menu {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: right;
    align-items: center;
  }
    #conference-menu li a {
      display: inline-block;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: center;
      text-transform: uppercase;
      padding: 8px 16px;
    }
    #conference-menu li:not(.button):last-child a {
      padding: 8px 0 8px 10px;
    }
    #conference-menu li.button {
      margin-left: 10px;
    }
    #conference-menu li.button a {
      padding: 15px 40px;
      border-radius: 32px;
    }
#conference-banner {
  margin: 0 0 60px;
}
#conference-banner .img {
  max-width: 80%;
  margin: 0 auto;
  background: var(--lightgrey);
}
  #conference-banner .img img {
    mix-blend-mode: multiply;
    image-rendering: -webkit-optimize-contrast;
  }
.conference-content:not(#conference-banner) {
  display: none;
}
@media screen and (max-width: 1366px) {
  #conference-banner .img {
    max-width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  #conference-header .container {
    max-width: 100%;
  }
	.menu-icon,
  .menu-close {
    align-self: center;
    display: inline-flex;
    align-items: center;
    font-size: 60px;
    color: var(--black);
    line-height: 1;
    text-transform: uppercase;
    text-align: right;
    padding: 8px 0;
    cursor: pointer;
    transition: var(--fade);
	}
		.menu-icon:hover,
		.menu-close:hover {
		  color: var(--red);
		}
		.menu-icon *,
		.menu-close *,
		.menu-closer {
		  font-weight: 400 !important;
		}
	#conference-menu {
    position: fixed;
    z-index: 100;
    top: 0;
    left: -150vw;
    margin: 0;
    width: 100%;
    height: 100vh;
    background: var(--black);
    transition: var(--fade);
	}
		#conference-menu li {
		  margin: 15px 0;
		}
    #conference-menu li.button {
		  margin: 15px 0;
		}
    #conference-menu a,
		#conference-menu a:after {
		  color: var(--white) !important;
		}
    #conference-menu li:hover > a {
		  color: rgba(255,255,255,0.6);
		}
		#conference-menu li.menu-item-has-children a:after,
		#conference-menu .sub-menu li.menu-item-has-children a:after {
      content: '\f30b' !important;
      font-weight: normal;
      color: var(--white);
		}
		#conference-menu li:not(.menu-item-has-children) a:after {
		  display: none;
		}
	#conference-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    align-items: center;
	}
	#conference-menu.show-menu .menu-closer {
    position: absolute;
    z-index: 999999;
    top: 2%;
    right: 4%;
    display: flex !important;
    align-items: center;
    cursor: pointer;
    font-size: 130%;
    font-weight: 400;
    color: var(--white);
    transition: var(--fade);
	}
	#conference-menu.show-menu .menu-back {
    left: 4%;
	  right: auto;
    transition: var(--fade);
	}
		.admin-bar .show-menu .menu-closer {
		  top: calc(2% + 46px);
		}
    #conference-menu.show-menu .menu-back:hover,
    #conference-menu.show-menu .menu-closer:hover {
      color: rgba(255,255,255,0.6);
    }
	.menu-closer.fa-times {
	  z-index:9999;
    right:4%;
	  left:auto;
	}
	.menu-back {
	  z-index: 102;
	  font-weight: normal;
	}
		.menu-back:after {
      font-family: var(--font);
      font-size: initial;
      font-weight: 300;
      content: 'Back';
      margin: 0 0 0 5px;
		}
		.menu-closer:hover {
		  color: var(--white);
		}
	#conference-menu .sub-menu .sub-menu {
	  background-color: var(--blue);
	}
	#conference-menu.show-menu {
	  left: 0 !important;
	}
	#conference-menu.hide-menu {
	  left: -150vw !important;
	}
}

/* image banner module */

.image-banner {
  position: relative;
  display: grid;
  min-height: 300px;
  margin-top: 60px;
}
.image-banner.blue-bg {
  background: var(--blue);
}
.image-banner.grey-bg {
  background: var(--lightgrey);
}
  .image-banner .container {
    position: relative;
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 60px;
  }
    .image-banner .container *:last-child {
      margin: 0;
    }
  .image-banner img {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .image-banner a {
    color: #fff;
    text-decoration: underline;
  }
.speakers {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 40px;
}
  .speaker > a {
    display: block;
    width: 100%;
  }
  .speaker p {
    font-size: 16px;
    font-weight: 600;
    color: #777;
    text-align: center;
    padding: 5px 0;
  }
    .speaker p span {
      display: block;
      font-size: 15px;
      font-weight: 400;
    }
  .speaker a img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: 0 30%;
  }
  .bio {
    position: relative;
    padding: 60px 60px 60px 230px;
  }
    .bio img {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
      object-fit: cover;
      border-radius: 0 0 30px 0;
    }
    .bio h4 span {
      display: block;
      font-size: 20px;
      font-weight: 400;
    }
    .bio p {
      font-size: 16px;
      margin: 0 0 20px;
    }
@media screen and (max-width: 1366px) {
  .speakers {
    grid-template-columns: repeat(4, 1fr);
  }
  .bio {
    padding: 60px;
    text-align: center;
  }
  .bio img {
    position: relative;
    border-radius: 16px;
    margin: 0 auto 30px;
  }
}
@media screen and (max-width: 1024px) {
  .speakers {
    grid-template-columns: repeat(3, 1fr);
  }
  .speaker img {
    height: 240px;
  }
}
@media screen and (max-width: 768px) {
  .speakers {
    grid-template-columns: repeat(2, 1fr);
  }
  .speaker img {
    height: 300px;
  }
}
@media screen and (max-width: 468px) {
  .speakers {
    grid-template-columns: 1fr;
  }
}

/* footer */

#footer {
  margin-top: auto;
  padding: 60px 0;
}
#footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  #footer .conference-logo {
    mix-blend-mode: color-burn;
    filter: opacity(0.4);
  }
  #footer ul li {
    margin-left: 30px;
  }
  #footer aside a {
    font-size: 22px;
  }
  #footer aside a:not(:first-child) {
    margin-left: 15px;
  }
@media screen and (max-width: 1024px) {
  #footer .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 50px;
    justify-items: center;
    text-align: center;
  }
  #footer ul li {
    margin-left: 0;
  }
}
blockquote {
  font-style: italic;
}

.sponsors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 30px;
}
  .sponsors .sponsor {
    display: block;
  }
  .sponsor img {
    max-width: 400px;
    max-height: 180px;
  }
@media screen and (max-width: 580px) {
  h2 {
    font-size: 44px;
  }
  .sponsor img {
    max-width: 100%;
  }
}