@font-face {
  font-family: "ESAllianz";
  src: url("../fonts/ESAllianz/ESAllianz-Regular.woff2") format("woff2"), url("../fonts/ESAllianz/ESAllianz-Regular.woff") format("woff");
}
* {
  box-sizing: border-box;
}

:root {
  --font-size: 0.87vw;
  --line-height: 1.14vw;
  --text-width: calc(var(--font-size) * 37);
  --padding-left: calc(var(--line-height));
  --padding-top: var(--line-height);
  --back-color: #fff;
}

html {
  font-size: var(--font-size);
}

body {
  font-family: "ESAllianz", "Arial", sans-serif;
  font-size: var(--font-size);
  line-height: var(--line-height);
  padding: var(--padding-top) var(--padding-left);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background: var(--back-color);
}

.img {
  display: inline-block;
  padding-top: calc(var(--line-height) * 0.1);
  padding-right: calc(var(--line-height) * 0.1);
  height: calc(var(--line-height) * 0.75);
}

.inner-img {
  display: block;
  height: calc(var(--line-height) * 0.75);
}

.en {
  --text-width: calc(var(--font-size) * 37.5);
}

.en .inner-img {
  margin-right: calc(var(--line-height) * 0.2);
}

#languages {
  position: absolute;
  right: var(--padding-left);
}
#languages span:nth-child(1)::after {
  content: ",";
}

h1 {
  margin-bottom: calc(var(--line-height) * 3);
  display: none;
}

h2 {
  font-size: calc(var(--font-size) * 0.75);
}

.dot-dot-dot::before {
  content: "(";
}

.dot-dot-dot::after {
  content: ")";
}

.dot::after {
  content: ".";
}

.dot {
  opacity: 0;
}

.dot.show {
  opacity: 1;
}

#more,
#languages,
p, ul {
  max-width: var(--text-width);
}

#more,
#languages,
p:not(:last-child), ul:not(:last-child) {
  margin-bottom: var(--line-height);
}

#info {
  width: var(--text-width);
  position: fixed;
  padding-top: calc(var(--line-height) / 2);
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  background: var(--backcolor);
}
#info > * {
  margin-bottom: var(--line-height);
  width: 50%;
}

#extra {
  display: none;
}

#more {
  display: inline-block;
}

body.full-text #extra {
  display: inline;
}
body.full-text #intro {
  margin-bottom: var(--line-height);
}
body.full-text #more,
body.full-text .dot-dot-dot {
  display: none;
}
body.full-text #more .dot,
body.full-text .dot-dot-dot .dot {
  opacity: 1;
}

@media screen and (hover: hover) {
  #languages span:not(.current):hover,
a:hover {
    cursor: pointer;
    color: lightgrey;
  }
  .dot-dot-dot:hover {
    cursor: pointer;
  }
  .dot-dot-dot:hover .dot {
    opacity: 0;
  }
  .dot-dot-dot:hover::after {
    content: "";
  }
  .dot-dot-dot:hover::before {
    content: "+";
  }
}
@media screen and (min-width: 1100px) {
  body {
    padding-bottom: calc(var(--line-height) * 3 + var(--line-height));
  }
  #languages {
    position: fixed;
    padding: var(--padding-top) var(--padding-left);
    left: unset;
    right: 0;
    margin: 0;
    bottom: 0;
    background: #fff;
  }
  #languages .current {
    display: inline-block;
  }
  #coming {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: var(--padding-top) var(--padding-left);
    background: #fff;
  }
  #info {
    bottom: unset;
    display: block;
    right: var(--padding-left);
    top: var(--padding-top);
    width: unset;
    padding-top: 0;
    margin: 0;
  }
  #info > * {
    width: unset;
  }
}
@media screen and (max-height: 52em) and (max-width: 1100px) {
  #info {
    position: static;
    display: block;
  }
  #info > * {
    width: 100%;
  }
  #info *:last-of-type {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 2120px) {
  :root {
    --font-size: 19px;
    --line-height: 24px;
  }
}
@media screen and (max-width: 750px) {
  #languages {
    left: unset;
    right: var(--padding-left);
    position: absolute;
  }
  #languages .current {
    display: none;
  }
  #languages span:nth-child(1)::after {
    display: none;
  }
  .title {
    display: block;
  }
}
@media screen and (max-width: 667px) {
  #info {
    width: calc(100vw - var(--padding-left) * 2);
  }
}
@media screen and (max-width: 600px) {
  h1 {
    position: fixed;
    background: var(--back-color);
    width: 100%;
    top: 0;
    padding: var(--padding-top) 0;
  }
  #languages {
    top: var(--padding-top);
    z-index: 1;
  }
  #info {
    position: static;
    display: block;
    padding-top: calc(var(--line-height) / 1);
  }
  #info > * {
    width: 100%;
  }
  #info > *:last-child {
    margin-bottom: 0;
  }
}

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