div.backdrop {
  position: fixed;
  z-index: -2;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: url('../church_inside.png') center/cover;
  opacity: 50%;
}

div.overlay {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.7);
}

div.header {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  width: 100vw;
  background: linear-gradient(#478, #367);
  color: #fff;
  font-size: 1.5rem;
  #box-shadow: 0 0 12px 4px #222;
  border: none;
}

div.header div.logo {
  #font-family: Oswald;
}

div.header div.loginlink {
  position: absolute;
  right: 0;
  display: flex;
  justify-content: end;
  align-items: center;
  height: 100%;
  width: 20vw;
  margin-right: 2vw;
  font-size: 0.9rem;
  color: #ccc;
  cursor: pointer;
  #border: 1px solid #234;
}

div.main {
  position: fixed;
  z-index: 0;
  height: 100vh;
  width: 100vw;
}

div.main div.leftpanel {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  height: 80vh;
  width: 25vw;
  padding: 5vh 0;
  font-family: Oswald;
  overflow: auto;
  #border: 1px solid white;
}

div.main div.leftpanel div.register {
  padding: 0.25rem 4rem;
  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.5));
  border-radius: 0.2rem;
  color: #012;
  font-size: 1.5rem;
  cursor: pointer;
}

div.main div.leftpanel div.register:hover {
  color: #000;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  box-shadow: 2px 5px 10px #333;
}

div.main div.leftpanel div.register:active {
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3));
}

div.main div.leftpanel div.poster {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 5vh 0;
}

div.main div.leftpanel div.poster img {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  height: 43vh;
  width: 15vw;
}

div.main div.leftpanel div.map {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.main div.leftpanel div.map iframe {
  width: 70%;
}

div.main div.midpanel {
  position: absolute;
  top: 5vh;
  left: 25vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80vh;
  width: 70vw;
  #border: 1px solid white;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 0.25rem;
  color: #fff;
}

div.main div.midpanel div.selectors {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4vh;
  width: 100%;
  background: rgba(144, 144, 144, 0.6);
}

div.main div.midpanel div.selectors div.selector {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 20%;
  #border: 1px solid #456;
  color: #eee;
  cursor: pointer;
}

div.main div.midpanel div.selectors div.selector:hover {
  background: linear-gradient(rgba(144, 144, 144, 1), rgba(144, 144, 144, 0.3));
  box-shadow: 2px 4px 8px #555;
}

div.main div.midpanel div.selectors div.selector.selected:hover {
}

div.main div.midpanel div.selectors div.selector:active {
  background: linear-gradient(rgba(144, 144, 144, 0.3), rgba(144, 144, 144, 1));
}

div.main div.midpanel div.selectors div.selector.selected {
    background: rgba(160, 160, 160, 1);
    color: #000;
    box-shadow: 2px 4px 8px #555;
}

div.main div.midpanel div.sections {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  height: 90%;
  width: 90%;
  margin-top: 5vh;
  overflow: auto;
  outline: none;
  #border: 1px solid orange;
}

div.main div.midpanel div.sections div.section {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 95%;
  padding: 1rem 0.2rem;
  #margin: 2vh 0;
  #border: 1px solid #888;
}

div.main div.midpanel div.sections div.section div.heading {
  margin-bottom: 4vh 0;
  font-size: 1.5rem;
  font-family: Oswald;
  #border: 1px solid red;
}

div.main div.midpanel div.sections div.section div.text {
  margin-top: 2vh;
  font-family: Roboto;
  font-weight: 100;
  font-size: 1.1rem;
  text-align: justify;
  #border: 1px solid blue;
}

div.main div.midpanel div.sections div.section div.image {
  display: none;
  width: 100%;
  margin: 2vh 0;
  border-radius: 0.2rem;
  #border: 1px solid yellow;
}

div.main div.midpanel div.sections div.section div.image img {
  #margin: 2vh 0;
  width: 100%;
  background: center/cover;
  border-radius: 0.2rem;
}

div.main div.midpanel div.sections div.area {
  display: none;
}

div.main div.midpanel div.sections div.area div.guest {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 25%;
  margin: 5px;
  border: 1px solid #888;
}

div.main div.midpanel div.sections div.area div.guest div.label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.1rem;
  background: rgba(176, 192, 255, 0.25);
}

div.main div.midpanel div.sections div.area div.guest div.data {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  #background: rgba(0, 0, 0, 0.5);
  padding: 0.1rem;
  padding-left: 1rem;
  padding-right: -1rem;
  overflow: auto;
}