*{
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
html{
    width: 100%;
    -webkit-tap-highlight-color:transparent;
    height:100%;
}
body {
  color: #000;
  font-family: 'Favorit Mono';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-stroke: 0.10px;
  width: 100%;
  padding: 0;
  font-size: 1.2rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-stroke: 0.10px;
}
a{
  color: inherit;
  text-decoration: none;
}
p{
  margin:0 0 1em;
}
p:last-of-type{
  margin:0;
}
h1,h2,h3,h4{
  font-weight: 100;
}
h3{
  color: #000;
  font-size: 1em;
  text-transform:uppercase;
}
nav ul{
  height: 10rem;
  background-color: #00dc96;
  border: 1px solid;
  width: 100rem;
  font-size: 2.05rem;
  z-index: 7;
  opacity: 0;
  display: flex;
  margin: -.35rem 0 1em !important;
  pointer-events:none;
  padding: 0;
  float: right;
  justify-content: space-between;
  list-style: none;
  text-transform: none !important;
  right: 10rem;
  border-radius: 5rem;
  position: relative;
  overflow: hidden;
}
#langmob {
    display: none;
}
nav ul.in {
    width: 100rem;
    padding: 0;
    pointer-events:all;
    opacity: 1;
    transition: .75s width linear, .75s padding linear, 0s opacity;
}
nav li {
    display: inline-block;
    height: 1em;
    width:25%;
    text-align:center;
    opacity:0;
    transition: 0.1s opacity 0;
}
.subsite nav ul {
    /* right: calc(12rem - 1px); */
}
 .rex-current{
  text-transform:uppercase;
}
nav ul.in li{
  opacity:1;
  text-transform: uppercase;
  transition: 0.1s opacity .65s;
}
nav ul #lang{
  display:inline-block;
  position:relative;
  top: 50%;
  left: 0;
}

nav .circle {
    position: absolute;
    top: 9.6rem;
    right: 0;
}
.text table td .secondcol{
    display:none;
}
nav .circle .hamburger {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
nav .circle a{
  display:inline-block;
  height:100%;
  width:100%;
}
.text a {
  color: #00dc96;
}
.sponsorlogo {
    float: right;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}.sponsorlogo {
    width: 10rem;
}

.sponsorlogo img {
    width: 100%;
    height: auto;
}
.linkimage figure {
    z-index: 0;
}
.text a:not(.more):after {
  content: '\2197';
  margin:0 0 0 .5em;
}
.text a:empty{
	display:none;
}
.text a.sponsorlogo:after{
  content:'';
}
.text table a:not(.more):after {
  content: '';
  margin:0;
}
main {
    height: auto;
    margin: -7.1rem 2.35rem 0 2.38rem;
    padding: 0 10rem;
    display: inline-block;
    width: calc(100% - 5.23rem);
    position: relative;
    clear: both;
}
.more.active .le, .more:not(.active) .mo{
  display: inline-block;
}
.more.active .mo, .more:not(.active) .le{
  display:none;
}
#title, #logos {
    padding: 1rem;
    position: relative;
    height: 10rem;
    background-color: #FFF;
    width: calc(30rem + 1px);
}

.leftcorner, .rightcorner {
    width: 10rem;
    top: 0;
    height: 100%;
    border: 1px solid #000;
    position: absolute;
    pointer-events:none;
}
.first > *:not(#pattern), .first #months, .first #years {
    opacity: 0;
}
body:not(.first) > *:not(#pattern), body:not(.first) #months, body:not(.first) #years {
    opacity: 1;
    transition:1s opacity;
}
.outfold {
    height: auto !important;
}
.leftcorner{
    left:0;
    border-right:none;
}

.rightcorner{
    right:0;
    border-left:none;
}

header {
    padding: 2.15rem 1.9rem 0 2.38rem;
    display: inline-block;
    width: 100%;
    margin: 0 0 10rem;
    height: 12.5rem;
}
article {
    width: calc(60rem + 1px);
    position: absolute;
    padding: 1.5rem 1.5rem 4.5rem;
    margin: 0 0 10rem;
    height: auto;
    background-color: #FFF;
    clear: both;
    display: inline-block;
    z-index: 4;
    }
body:not(.subsite) article{
  display:block;
}
.subsite article.right {
   /* float:right; */
   position:relative;
   margin: 0 0 10rem 30rem;
}
.subsite article.left{
 float:left;
 position:relative;
}
article.xl {
    width: calc(80rem + 1px);
}
article.xs {
    width: calc(40rem + 1px);
}
article .circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.text, footer, .quote, .text table, .sponsortext {
    line-height: 1.4;
}
h1, h2, nav ul, article .circle span, #title .versal, .mobdate{
     font-family: 'Diatype Pre';
     text-transform:uppercase;
     letter-spacing: 0.06em;
     margin:0 0 1em;
     line-height: 1.25em;
     font-size: 1.75rem;
}
.mobdate{
  display:none;
}
#title .chiffre{
  letter-spacing: 0.04em;
}

nav {
    margin: -5rem 0 0;
    z-index: 5; 
    width: auto;
    max-width: 120rem;
    padding: 0;
    position: sticky;
    top: 2.45rem;
    clear: both;
    display: inline-block;
    left: 12.38rem;
}
.clickable article{
  z-index:6;
}

#months {position: fixed;top: .75rem;left: 2rem;width: calc(100% - 3.2rem);}

#years {
    position: absolute;
    left: .75rem;
    top: 2rem;
}
#address {float: left;width: 30rem;}
#pattern ul{
  font-size: .55rem;
}
#pattern #pluses {
    position: fixed;
    color: #00dc96;
    font-size: 1.5rem;
    left: 2rem;
    top: 1.75rem;
}
#pluses li {
    width: 10rem;
    display: inline-block;
    vertical-align: top;
    line-height: .5;
    height: 10rem;
}
strong, b {font-weight: 100;/* text-transform: uppercase; */color: #00dc96;}
.plus {
  width: .75rem;
  height: .75rem;
  position: relative;
}
.bigplus {
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  position: relative;
}
.plus:after, .bigplus:after {
  content: " ";
  position: absolute;
  display: block;
  background-color:#00dc96;
  height: 100%;
  transform: translateY(calc(-50% + .5px));
  top: 50%;
  left: 50%;
  width: 1px;
}
.circlebox.act .bigplus:after{
  display:none;
}
.plus:before, .bigplus:before {
  content: " ";
  position: absolute;
  display: block;
  background-color:#00dc96;
  width: 100%;
  transform: translateX(calc(-50% + .5px));
  left: 50%;
  top: 50%;
  height: 1px;
}
table {
    font-size: inherit;
}
.bigplus:after {
background-color:#000;
  transform: translateY(calc(-50% + 1px));
  width: 2px;
}

.bigplus:before {
  transform: translateX(calc(-50% + 1px));
  height: 2px;
  background-color:#000;
}

#pluses li:nth-of-type(12n) {
    width: auto;
}
#months li:nth-child(11),#months li:nth-child(10) {
    margin: 0 0 0 -.1rem;
}
#months li {
    display: inline-block;
    width: 10rem;
    padding: 0 0 0 0.2rem;
}
#months li:last-of-type{
    width: auto;
    padding: 0;
    margin: 0 0 0 .2rem;
}
#years li{
  display: block;
  height: 10rem;
  margin: -3px 0 3px;
}
#pattern {
    pointer-events: none;
    position: absolute;
    width: 100%;
    overflow: hidden;
}
#logos {
    width: calc(50rem + 1px);
    display: flex;
    justify-content: space-between;
    left: calc(10rem - 1px);
    padding: 1.4rem 1.5rem;
}

#title {
    float: left;
    font-family: 'Diatype Pre';
    font-size: 1.75rem;
    text-transform:none;
    padding: 1.5rem 1.5rem;
    margin: 0;
}
#title p{
 /* top:50%;
  transform:translateY(-50%);
  position:absolute;*/
 margin: -.3rem 0 0;
}
.more {
    position: absolute;
    bottom: 1.5rem;
    color:#00dc96;
}
.more:before{
  content:'\2192';
  margin:0 .5em 0 0;
}
.circle, #up {
    display: inline-block;
    border: 1px solid;
    position: relative;
    width: 10rem;
    z-index: 3;
    background: #FFF;
    height: 10rem;
    border-radius: 5rem;
}
article .circle {
    position: absolute;
    left: calc(-10rem + 1px);
    top: 0;
}
.smallimage, .largeimage{
  background-size: cover;
  z-index: -3;
  background-repeat: no-repeat;
  position: absolute;
}
.smallimage {
    width: calc(20rem + 1px);
    height: 30rem;
}
.largeimage {
    width: calc(30rem + 1px);
    height: 40rem;
}
#lang {
    position: absolute;
    right: .4rem;
    top: 2.25rem;
   
}

#lang span {

    display: inline-block;
}
#lang span:first-of-type:after{
  content:'/';
}
.droptext{
  display: none;
  margin: 1em 0 0;
}
.circlebox {
    position: absolute;
    width: 10rem;
    height: 10rem;
}
header .circlebox{
  position:relative;
  float: left;
}
.circlebox.act .quote{
       width: 30rem;
       padding:1rem calc((10rem / 2) - 1rem);
       opacity: 1;
       border: 1px solid #000 !important;
       transition: .25s width linear, .25s padding linear, 0s opacity .05s;
}
#unis {
    float: left;
    /* clear: both; */
    display: block;
    border: none;
    padding: 0;
    width: 40rem;
    border-radius: 0;
    position: relative;
    margin: 0 -10rem 0 10rem;
}

#credits {
    float: left;
    width: 30rem;
}

#unis .sponsor {
    display: inline-block;
    height: 8rem;
    width: 16rem;
    margin: 1rem 4rem 0 2rem;
}
#unis .sponsor:nth-of-type(2){
  margin: 1rem 0 0 4rem;
  width: 12rem;
}
.circlebox.act .circle{
   background-color:#00dc96;
}

footer > div, .circlebox .quote {
    background-color: #FFF;
    display: inline-block;
    padding: 1rem calc((10rem / 2) - 1rem);
    border: 1px solid;
    height: 10rem;
    border-radius: calc(10rem / 2);
}
nav button {
    border: 1px solid #000 !important;
    display: inline-block;
    height: 10rem;
    float: right;
    background-color: #FFF;
    width: 10rem;
    right: -1px;
    position: absolute;
    outline: none;
    margin: -.35rem 0 0 !important;
    border-radius: 5rem;
}
.subsite nav button{
  /* right:1.95rem; */
}
.sponsors {
    display: inline-block;
    width: 100%;
}

.sponsortext {
    width: 28.65rem;
    float: right;
    margin: -.35rem 0 0;
}

.sponsors .sponsor {
    float: left;
    width: 12.5rem;
}
.text table {
    border-collapse: collapse;
    margin: 0 0 1em;
    color: #00dc96;
    width: 100%;
}
.text table td{
  vertical-align:top;
}
.sponsor {
    width: 9rem;
    height: 4.5rem;
    background-size: cover;
    display: inline-block;
}
.sponsor a{
  display:inline-block;
  width:100%;
  height:100%;
}

.text table td:first-of-type {
    width: 50%;
}
.text table td:nth-child(3){
  width: 8.5rem;
  color: #000;
}
.text table td:nth-child(3) a{
  color: #00dc96;
  font-size: 1.25em;
  line-height: 1;
}

footer {
    position: relative;
    margin: 10rem 2.35rem 10rem 2.38rem;
    bottom: 0;
    clear: both;
    display: inline-block;
    width: calc(100% - 5.23rem);
}
#up {
    float: none;
    margin: 0;
    padding: 0;
    left: 100rem;
    background-image: url(../img/pfeil.png);
    background-size: 33%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
}


.subsite main {
    margin: .68rem 2.35rem 0 2.38rem;
}
.circlebox .circle{
  top:0;
  left:0;
  cursor:pointer;
  position:absolute;
}

.circlebox .quote {
    position: absolute;
    left: 10rem;
    pointer-events: none;
    top: 0;
    background-color: #00dc96 !important;
    width: 0;
    z-index: 6;
    padding: 0;
    opacity: 0;
    transition: .25s width linear, .25s padding linear, 0s opacity .2s;
}
.circlebox .quote > *{
  transition: .05s opacity 0s;
  opacity:0;
}
.circlebox.act .quote > *{
  opacity:1;
   transition: .05s opacity .2s;
}


.subsite nav {
    margin: 0 0 -11.4rem;
    top: 2.45rem;
    position: sticky;
}

footer > div p, nav ul li, .quote p {position: relative;top: 50%;transform: translateY(-50%);}
 

@media (min-width: 993px) {
html{
    font-size: calc((8.73vw) / 10);
}
nav li a:hover{
  text-transform:uppercase;
}
::-webkit-scrollbar {
 width: .25rem;
}
::-webkit-scrollbar-track {
 background-color: #FFF;
}
::-webkit-scrollbar-thumb {
 background-color: #00dc96;
}

footer a:hover, .text table td:nth-child(3) a:hover, .sponsortext a:hover{
  color: #00dc96;
}

nav button:hover, #up:hover, .circlebox:hover .circle, nav .circle:hover{
   background-color: #00dc96;
}

} 
@media (min-width: 600px) and (max-width:992px) {
html{
    font-size: 12px;
}
}
@media (min-width: 200px) and (max-width:599px) {
html{
    font-size: 12px;
}
}

@media (max-width: 992px) {
 html{
    font-size: calc((8.73vw) / 4);
}
#pluses li:nth-of-type(12n) {
    width: 5rem;
}
#pluses li:nth-of-type(9n) {
    width: auto;
}
  #years, #months{
    display:none;
  }
  #pluses li {
    width: 5rem;
    height: 5rem;
}
#logos {
    left: 0;
    position: absolute;
    width: 40rem;
    bottom: 0;
}
#langmob {
    display: inline-block;
    width: 10rem;
    font-family: 'Diatype Pre';
    font-size: 1.75rem;
    position: relative;
    text-transform: uppercase;
    overflow: hidden;
}
#language span {
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
}
#langmob #language:hover{
  background-color:#00dc96;
}

#langmob #language {
    position: absolute;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    left: 0;
    top: 0;
}
#up {
      background-image: url(../img/pfeil_mob.png);
      background-size: 45%;
      left: 32.8rem;
}

main, .subsite main {
    margin: 4.6rem 2.85rem 0;
    width: calc(40rem + 1px);
    padding: 0;
}

.smallimage, .largeimage {
    position: relative;
    top: 2.5rem !important;
    margin: 0 0 5rem;
}
.text table td:nth-child(2) {
    display: block !important;
    padding: 0 0 1em;
    width: 100%;
    clear: both;
}
.text table td .secondcol{
    display:block;
}

.text table td:nth-child(3) {
    width: 2rem;
    text-align: right;
    vertical-align: top;
}

.text table td:first-of-type {
    width: 100%;
    display: block !important;
    clear: both;
}
article, .subsite article.right, .subsite article.left, article.xl, article.xs {
    position: relative;
    left: 0 !important;
    margin: 0 0 5rem;
    top: 0 !important;
    width: 100%;
}
nav, .subsite nav{
  position:absolute;
  top: 2.75rem;
  padding: 0 0 0;
  width: 10rem;
  margin: 0;
}
.subsite nav button, nav button{
  float: none;
  top: 0;
  right: auto !important;
  left: 0;
}
header {
    margin: 2.35rem 2.9rem 0;
    height: 30rem;
    position: relative;
    padding: 0;
    margin: 2.4rem 2.85rem 0;
    width: auto;
}
.subsite main {
    margin: 2.4rem 2.85rem 0;
}

nav .circle {
    right: 0;
}

.subsite main article:first-of-type {
    width: 75% !important;
}

.text {
    height: auto !important;
}
nav ul.in {
    width: 30rem;
    display: block;
    padding: 1rem 5rem;
}

.subsite nav ul{
  right: 13rem;
}
article .circle {
 
    display: none;

}
nav ul li {
    display: block;
    top: 0;
    width: 100%;
    height: 1.1em;
    text-transform: uppercase;
    transform: none;
    text-align: left;
}

footer {
    width: 100%;
    padding: 0 2.9rem 10rem;
    margin: 5rem 0  0;
}

#credits {
   display: none;
}

#address {
    float: left !important;
    display: block !important;
    clear: both;
    width: calc(30rem - 2px);
}

.circlebox {
    position: relative;
    top: 0 !important;
    margin-left: 0 !important;
    left: 0;
}
header .circlebox{
  margin: calc(10rem - 1px) 0 0;
  float: none;
}
.mobdate{
  display:block;
}
nav {
    left: 32.9rem;
}
.sponsors .sponsor {
    width: 12.5rem;
}

.sponsors .sponsortext {
    width: 23.6rem;
}
.subsite nav{
  left: 33rem;
}
.text table td:nth-child(3) a{
  /* font-size: 2em; */
  /* line-height: .75; */
}
main {
    height: auto !important;
}nav ul #lang {
    top: 0;
    display: none;
}
#pattern #pluses {
    left: 2.5rem;
    top: 2.025rem;
}nav ul{
  transition: .25s width linear, .25s padding linear, 0s opacity .24s;
  left: -10rem;
}
nav ul.in{
     transition: .25s width linear, .25s padding linear, 0s opacity;
}
nav li {
    transition: 0.05s opacity 0;
}
nav ul.in li{
  transition: 0.05s opacity .2s;
}

nav ul, nav ul.in, nav li, nav ul.in li, .circlebox.act .quote, .circlebox .quote, .circlebox.act .quote > *{
  transition:none;
 
}
 .circlebox .quote{
 height: calc(10rem + 2px);
}
header .circle {
    height: calc(10rem + 2px);
}

#unis {
    width: 40rem;
    margin: 5rem 0 0;
    background-color: #FFF;
}

#unis .sponsor {
    display: inline-block;
    margin: 1rem 4rem 0 2rem;
    background-color: #FFF;
}

figure:nth-of-type(2), figure:nth-of-type(4){
left:0 !important;
}
figure:nth-of-type(1), figure:nth-of-type(3){
left:10rem !important;
}
}


_::-webkit-full-page-media, _:future, :root article {


   padding: 1.5rem 1.5rem calc(4.5rem - 1px);

}

nav ul, nav ul.in, nav li, nav ul.in li, .circlebox.act .quote, .circlebox .quote, .circlebox.act .quote > *{
  transition:none;
}
@font-face {
    font-family: 'Diatype Pre';
    src: url('fonts/DiatypePre-Bold.eot');
    src: url('fonts/DiatypePre-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/DiatypePre-Bold.woff2') format('woff2'),
        url('fonts/DiatypePre-Bold.woff') format('woff'),
        url('fonts/DiatypePre-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Favorit Mono';
    src: url('fonts/FavoritMono-Light.eot');
    src: url('fonts/FavoritMono-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/FavoritMono-Light.woff2') format('woff2'),
        url('fonts/FavoritMono-Light.woff') format('woff'),
        url('fonts/FavoritMono-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
::selection {
  color: #000;
 background-color: #00dc96;
}
::-moz-selection {
 color: #000;
 background-color: #00dc96;
}