@charset "UTF-8";
.hide {
  display: none !important; }

header {
  display: flex;
  flex-flow: column;
  background: url(../img/sunset.jpg) no-repeat fixed center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  @supports (-webkit-overflow-scrolling: touch) {
    header {
      background-attachment: initial !important; } }

#headline {
  min-height: 35vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 1em; }

#logo {
  top: 0;
  height: 65vh;
  background: url(../img/rad.svg) no-repeat 50% 10%;
  -webkit-background-size: 90vmin;
  -moz-background-size: 90vmin;
  -o-background-size: 90vmin;
  background-size: 90vmin; }

#settings {
  /* background color in case it slides above the logo image */
  background-color: rgba(255, 255, 255, 0.9);
  /* fixes sticky lag which could make the logo background visible */
  border-bottom: 2px solid white;
  border-top: 2px solid white;
  z-index: 10;
  padding: 1em; }
  #settings > div:not(:last-child) {
    margin-bottom: 2em; }

main {
  margin: 2em 0;
  padding: 0 5px; }

body {
  min-width: 250px; }

button:focus {
  outline: none !important; }

button::-moz-focus-inner {
  border: 0 !important; }

article {
  margin-left: auto;
  margin-right: auto; }

@media screen and (min-width: 900px) {
  article {
    margin-left: 0 !important;
    margin-right: 0 !important; }

  body {
    display: flex;
    padding: 4em 2em 2em 2em !important;
    align-items: stretch; }

  header {
    z-index: 10;
    background-image: none !important;
    width: 220px !important;
    flex-shrink: 0;
    /* scroll logo away */
    align-items: stretch; }

  #settings {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin-bottom: 0 !important;
    flex-grow: 1;
    border: none !important; }

  #headline {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    display: none; }

  #language {
    order: 1; }

  #detail {
    order: 2;
    top: 4em;
    position: sticky;
    position: -webkit-sticky; }
    #detail label {
      align-self: flex-start; }

  #toc {
    order: 4; }

  #logo {
    display: none;
    position: relative !important;
    height: 121px !important;
    margin-bottom: 2em;
    background: url(../img/rad.svg) no-repeat center top;
    -webkit-background-size: 90%;
    -moz-background-size: 90%;
    -o-background-size: 90%;
    background-size: 90%; }

  main {
    flex-grow: 1;
    margin: 0 0 0 4em !important; } }
body {
  font-family: "Lato", sans-serif;
  font-size: 12pt;
  color: #333333; }

h1 {
  font-size: 45pt;
  font-weight: bold;
  line-height: 1;
  margin: 0 10vw;
  color: #efefef; }

h2 {
  font-size: 130%;
  color: #888888;
  font-weight: bolder;
  margin: 0; }

h3 {
  font-size: 100%;
  font-weight: normal;
  margin: 0; }

#arrow {
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background: url("../img/arrow.png") no-repeat;
  width: 200px;
  height: 200px;
  position: fixed;
  top: 1.5em;
  right: 1.5em;
  z-index: 30; }

#loader {
  position: fixed;
  top: 3em;
  right: 1em;
  width: 30px;
  height: 30px;
  background: url(../img/wait.svg) no-repeat center center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  z-index: 20;
  display: none; }

#language {
  display: flex;
  justify-content: center; }
  #language span {
    margin: 0 1em; }
  #language .de, #language .en {
    width: 50px;
    height: 50px;
    display: inline-block;
    background: no-repeat center center;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    -o-background-size: 50px 50px;
    background-size: 50px 50px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    cursor: pointer;
    opacity: 0.4;
    border: 2px solid transparent;
    -webkit-transition: opacity 300ms, border-color 300ms;
    -moz-transition: opacity 300ms, border-color 300ms;
    -ms-transition: opacity 300ms, border-color 300ms;
    -o-transition: opacity 300ms, border-color 300ms;
    transition: opacity 300ms, border-color 300ms; }
    #language .de:hover, #language .en:hover {
      opacity: 0.9; }
    #language .de:active, #language .en:active {
      opacity: 1;
      border: 2px solid #888888; }
  #language .de {
    background-image: url(../img/de.svg); }
  #language .en {
    background-image: url(../img/en.svg); }
  #language .selected {
    border: 2px solid #333333 !important;
    opacity: 1 !important; }
    #language .selected:active {
      border-color: #888888 !important; }

.authentication {
  display: flex;
  justify-content: flex-end; }
  .authentication label {
    display: none; }
  .authentication input, .authentication button, .authentication span {
    margin: 0;
    outline: none;
    padding: 5px 10px;
    border: 1px solid #888888;
    -webkit-transition: border-color 300ms, background-color 300ms;
    -moz-transition: border-color 300ms, background-color 300ms;
    -ms-transition: border-color 300ms, background-color 300ms;
    -o-transition: border-color 300ms, background-color 300ms;
    transition: border-color 300ms, background-color 300ms; }
    .authentication input:active, .authentication input:focus, .authentication button:active, .authentication button:focus, .authentication span:active, .authentication span:focus {
      border-color: #333333; }
  .authentication input, .authentication span {
    border-right: none !important;
    min-width: 0 !important;
    flex-grow: 1;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px; }
  .authentication button {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    flex-shrink: 0;
    cursor: pointer;
    background-color: #efefef; }
    .authentication button:hover, .authentication button:active {
      background-color: #cdcdcd; }

#menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 2em;
  z-index: 30; }
  #menu > span {
    padding: 0.1em 0.5em; }
    #menu > span:first-child {
      flex-grow: 1; }

#logout, #message {
  cursor: pointer; }

#guestbook {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #888888; }
  #guestbook > div {
    display: flex;
    flex-direction: column;
    flex-basis: 500px; }
    #guestbook > div textarea {
      margin-bottom: 1em;
      border: 1px solid #333333;
      padding: 0.5em;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      background-color: transparent;
      cursor: text;
      color: #888888;
      min-height: 100px;
      max-width: 700px;
      min-width: 250px; }
  #guestbook button {
    color: #888888 !important;
    cursor: pointer;
    align-self: flex-end;
    background-color: rgba(100, 100, 100, 0.5);
    text-decoration: none;
    border: 1px solid #333333;
    padding: 0.2em 0.4em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms; }
    #guestbook button:hover, #guestbook button:focus {
      border-color: #888888; }
    #guestbook button:active {
      border-color: white; }
    #guestbook button:disabled {
      background-color: rgba(100, 100, 100, 0.5); }
      #guestbook button:disabled:hover, #guestbook button:disabled:focus, #guestbook button:disabled:active {
        border-color: #333333;
        cursor: wait; }

#leave_message {
  cursor: pointer; }

.success {
  border-color: #32c832 !important; }

#detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  #detail label {
    color: #888888;
    margin-bottom: 0.5em; }
  #detail ul {
    width: 220px;
    list-style: none;
    padding: 0;
    margin: 0.5em 0;
    display: flex;
    justify-content: space-between; }
    #detail ul li {
      color: #888888;
      font-size: 80%;
      /* this actually centers the second child properly */
      width: 60px; }
      #detail ul li:first-child {
        text-align: left; }
      #detail ul li:nth-child(2) {
        text-align: center; }
      #detail ul li:last-child {
        text-align: right; }

#toc {
  display: inline-block;
  border: 1px solid #333333;
  background-color: #efefef;
  padding: 0.5em;
  margin-bottom: 2em; }
  #toc:last-child {
    margin-bottom: 0; }
  #toc ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  #toc h3 {
    margin-bottom: 0.5em;
    text-align: center; }

a {
  cursor: pointer;
  text-decoration: none;
  color: #4444ff;
  -webkit-transition: color 300ms;
  -moz-transition: color 300ms;
  -ms-transition: color 300ms;
  -o-transition: color 300ms;
  transition: color 300ms;
  outline: 0; }
  a:hover {
    color: #0000dd; }
  a:active {
    color: #000077; }

article {
  line-height: 1.25 !important;
  margin-bottom: 2em;
  max-width: 700px;
  text-align: justify; }
  article:last-child {
    margin-bottom: 0; }
  article .subtext {
    display: inline;
    color: #888888; }
    article .subtext::after {
      content: " · "; }
  article br {
    display: block;
    content: " ";
    margin: 0 0 0.5em 0; }
  article h2 {
    margin-bottom: 0.5em; }
  article .wall:not(:first-child) {
    margin-top: 1em !important; }

.wall {
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  margin: -3px; }
  .wall img, .wall video {
    height: 120px;
    margin: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer; }

#lightbox {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.98); }
  #lightbox img, #lightbox video {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }

#stage {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center; }

#caption {
  align-self: center;
  padding: 10px;
  flex-shrink: 0;
  color: #888888;
  max-width: 700px; }

#number {
  color: #888888;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  -webkit-transition: background-color 300ms;
  -moz-transition: background-color 300ms;
  -ms-transition: background-color 300ms;
  -o-transition: background-color 300ms;
  transition: background-color 300ms; }
  #number:hover {
    background-color: rgba(0, 0, 0, 0.9); }

#show_prev, #show_next, #close, #close_guestbook {
  cursor: pointer;
  position: absolute;
  padding: 16px;
  color: #efefef;
  font-weight: bold;
  font-size: 20px;
  -webkit-transition: 300ms ease;
  -moz-transition: 300ms ease;
  -ms-transition: 300ms ease;
  -o-transition: 300ms ease;
  transition: 300ms ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  #show_prev:hover, #show_next:hover, #close:hover, #close_guestbook:hover {
    background-color: rgba(100, 100, 100, 0.9); }
  #show_prev:active, #show_next:active, #close:active, #close_guestbook:active {
    color: #cdcdcd; }

#show_prev, #show_next {
  top: 50vh; }

#show_prev {
  left: 0;
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0; }

#show_next {
  right: 0;
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px; }

#close, #close_guestbook {
  top: 0;
  right: 0;
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px; }

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