/* RESET SOME COMMON BROWSER DEFAULTS
======================================================== */
*, *::before, *::after {
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
}

/* FONTS
======================================================== */
@font-face {
  font-family: 'league-spartan_medium';
  src: url('vendor/fonts/LeagueSpartan-Medium.eot');
  src: url('vendor/fonts/LeagueSpartan-Medium.eot?#iefix')
       format('embedded-opentype'),
       url('vendor/fonts/LeagueSpartan-Medium.woff2')
       format('woff2'),
       url('vendor/fonts/LeagueSpartan-Medium.woff')
       format('woff'),
       url('vendor/fonts/LeagueSpartan-Medium.ttf')
       format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* BASIC/GLOBAL STUFF
======================================================== */
html, body {
  height: 100%;
  font-family: 'league-spartan_medium', sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
html, body, footer {
  font-size: 18px;
}
body {
  color: #000000;
  background-color: #455C97;
}
body {
  display: flex;
  flex-direction: column; /* STACK CHILDREN VERTICALLY */
  min-height: 100vh;      /* BODY FILL VIEWPORT HEIGHT */
}
header, main {
  display: flex;
  flex-wrap: wrap;
}
body.legal {
  background-color: #EDD74E;
  font-size: .8em;
}
a {
  text-decoration: none;
  color: #000000 !important;
}
a:hover {
  text-decoration: underline;
}
/* ICONS
-------------------------------------------------------- */
.badge {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: 0;
  z-index: 8000;
  background-color: transparent;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.badge > a { position: absolute;
             width: 100%;
             height: 100%;
             top: 0;
             left: 0;
             text-decoration: none;
          /* Makes sure the link doesn't get underlined */
             z-index: 12;
          /* raises anchor tag above everything else in div */
             background-color: white;
          /* workaround to make clickable in IE */
             opacity: 0;
          /* workaround to make clickable in IE */
             filter: alpha(opacity=0);
          /* workaround to make clickable in IE */
             cursor: pointer;
             pointer-events: auto;
}
/* SWIPER JS
-------------------------------------------------------- */
.swiper {
  cursor: grab;
  cursor: -webkit-grab;
}
.grabbing {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
.slideshow {
  position: relative;
  overflow: hidden;
}

/* ----------------------------------------------------- */

/* (INSIDE) THE HEADER
======================================================== */
header {
  font-size: 0;
}
header > div,
header > div img,
header > div > .swiper {
  width: 100%;
}
header > .hkk { /* HIER KOMMT KUNST */
  margin-left: -1.25%;
  margin-right: -1.25%;
  width: 102.5%;
}
.badge.DOWN {
  left: 10px;
  bottom: 10px;
  background-image: url("img/down.svg");
}

/* MAIN SECTION
======================================================== */
main {
  flex-grow: 1;  /* TAKE ALL VERTICAL SPACE -> PUSH FOOTER */
  margin-top: 3em;
}
main > div {
  width: 50%;
  height: auto;

  display: flex;
/*justify-content: center;*/ /* HORIZONTAL */
  align-items: baseline;     /* VERTICAL */
}
main .swiper-slide img {
  width: 100%;
}
main > div.full {
  width: 100%;
}
main > div.txt {
  overflow-x: hidden;
  flex-direction: column;
}
main > div.h {
  justify-content: end;
}
main > div.h > *,
main > div.txt > p,
main > div.txt > h1,
main > div.txt > ul {
  padding: 8%;
  padding-top: 2%;
  padding-bottom: 2%;
  width: 100%;
  text-align: left;
  font-size: 1.5em;
  line-height: 1.4;
}
main > div.txt > ul {
  list-style: none;
  padding-left: 0;   /* optional: removes default indent */
  text-align: right;
}
main > div.txt > h1 {
  padding-bottom: 0;
  font-size: 1.8em;
  line-height: 1.2;
}
main > div.h > h1 {
  font-size: 2em;
  margin-bottom: 8em;
  padding-top: 1em !important;
}
body.legal main {
  display: initial;
}
body.legal main > div {
  margin: auto;
}
body.legal main > div.h > * {
  text-align: left;
  padding-top: 3em;
  padding-bottom: 0;
}
body.legal p,
body.legal ul {
  padding-bottom: 1em !important;
}
body.legal p + ul {
  padding-top: 0;
}

/* RESPONSIVE
-------------------------------------------------------- */
@media (max-width: 800px) {

  main > div {
    width: 100%;
  }
  main > div.swiper + div.txt {
    margin-top: 2em;
  }
}
/* ----------------------------------------------------- */


/* (INSIDE) THE FOOTER
======================================================== */
footer {
 padding-top: 7vh;
 padding-bottom: 3vh;

 display: flex;
 justify-content: center; /* HORIZONTAL */

 position: relative; /* CREATE POSITIONING CONTEXT */
}
footer > div {
 padding-left: .2em;
 padding-right: .2em;
}
footer > div.badge {
  position: absolute;
  bottom: 2.5vh;
}
.badge.MAIL {
  right: 60px;
  background-image: url("img/mail.svg");
}
.badge.INSTA {
  right: 10px;
  background-image: url("img/instagram.svg");
}