/*

███▄ ▄███▓ ▄▄▄      ▓█████▄ ▓█████         
▓██▒▀█▀ ██▒▒████▄    ▒██▀ ██▌▓█   ▀         
▓██    ▓██░▒██  ▀█▄  ░██   █▌▒███           
▒██    ▒██ ░██▄▄▄▄██ ░▓█▄   ▌▒▓█  ▄         
▒██▒   ░██▒ ▓█   ▓██▒░▒████▓ ░▒████▒        
░ ▒░   ░  ░ ▒▒   ▓▒█░ ▒▒▓  ▒ ░░ ▒░ ░        
░  ░      ░  ▒   ▒▒ ░ ░ ▒  ▒  ░ ░  ░        
░      ░     ░   ▒    ░ ░  ░    ░           
       ░         ░  ░   ░       ░  ░        
                      ░                     
 ▄▄▄▄ ▓██   ██▓                             
▓█████▄▒██  ██▒                             
▒██▒ ▄██▒██ ██░                             
▒██░█▀  ░ ▐██▓░                             
░▓█  ▀█▓░ ██▒▓░       simon3fus.ch          
░▒▓███▀▒ ██▒▒▒                              
▒░▒   ░▓██ ░▒░                              
 ░    ░▒ ▒ ░░                               
 ░     ░ ░                                  
      ░░ ░                                  
  ██████  ██▓ ███▄ ▄███▓ ▒█████   ███▄    █ 
▒██    ▒ ▓██▒▓██▒▀█▀ ██▒▒██▒  ██▒ ██ ▀█   █ 
░ ▓██▄   ▒██▒▓██    ▓██░▒██░  ██▒▓██  ▀█ ██▒
  ▒   ██▒░██░▒██    ▒██ ▒██   ██░▓██▒  ▐▌██▒
▒██████▒▒░██░▒██▒   ░██▒░ ████▓▒░▒██░   ▓██░
▒ ▒▓▒ ▒ ░░▓  ░ ▒░   ░  ░░ ▒░▒░▒░ ░ ▒░   ▒ ▒ 
░ ░▒  ░ ░ ▒ ░░  ░      ░  ░ ▒ ▒░ ░ ░░   ░ ▒░
░  ░  ░   ▒ ░░      ░   ░ ░ ░ ▒     ░   ░ ░ 
      ░   ░         ░       ░ ░           ░ 

*/

/********************************************************
     Colors
*********************************************************/
:root {
  --grun: #03cca8;
  --hover: #018f75;

  --white: #ffffff;

  --black-1: #2a2a2a;
  --black-2: #242424;
  --black-3: #3a3a3a;

  --grey-1: #e4e4e4;
  --grey-2: #f6f6f6;
  --grey-3: #efefef;
}

/********************************************************
       scrollbar
  *********************************************************/

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--white);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--grun);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--hover);
}

/********************************************************
       selektionsfarbe
  *********************************************************/

::selection {
  background: var(--black-1);
  color: var(--grun);
}
::-moz-selection {
  background: var(--black-1);
  color: var(--grun);
}

/********************************************************
       Typo
  *********************************************************/

h1,
h2,
h3,
h4,
p,
a {
  font-family: "Rubik", sans-serif;
  color: var(--white);
}

h1 {
  font-size: 55px;
  font-weight: 700;
}

h2 {
  font-size: 30px;
  font-weight: 700;
}

h3 {
  font-size: 24px;
  font-weight: 700;
}

h4 {
  font-size: 18px;
  font-weight: 700;
}

p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.3px;
}

a {
  font-size: 18px;
  color: var(--grun);
  text-decoration-line: none;
}
a:hover {
  color: var(--white)
}

/********************************************************
       Global
  ********************************************************/
body {
  background-color: var(--black-3);
  position: relative;

}

.body-case {
  background-color: var(--grey-1);
}

.body-case #pointer {
  z-index: -1;
}

.body-case .nav p {
  color: var(--grun);
}

.body-case .nav p:hover {
  color: var(--white);
}

/* Header */

header {
  position: absolute;
  z-index: 100;
  height: 70px;
  width: 100%;
  padding-left: 20px;
  display: flex;
  align-items: center;
}

.logo {
  width: 170px;
}

#lottie-logo {
  height: auto;
  width: 170px;
  background-color: rgba(165, 42, 42, 0.294);
}

/* Navigation */
.nav-wrapper {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  height: 70px;
  display: flex;
  align-items: center;
}

.nav {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.nav p:hover {
  color: var(--grun);
}

#menuToggle {
  display: none;
}

/* 3 SPANS */

span {
  font-family: "Rubik", sans-serif;
  color: var(--white);
  font-size: 30px;
  font-weight: 700;
  text-decoration: none;
  margin-right: 5px;
}

/* ------spans------- grafiker --------------- */

.grafiker {
  position: relative;
  padding-bottom: 7px;
}
.grafiker::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background-color: var(--grun);
}

.grafiker-hover {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}

.grafiker-hover img {
  width: 100%;
  height: 100%;
}

.grafiker:hover ~ .grafiker-hover {
  opacity: 0.5;
}

/* -------spans------ iad --------------- */
.iad {
  position: relative;
  padding-bottom: 7px;
}
.iad::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background-color: var(--grun);
}

.iad-hover {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}

.iad-hover img {
  width: 100%;
  height: 100%;
}

.iad:hover ~ .iad-hover {
  opacity: 0.5;
}

/* -------spans------ gümmeler Velo --------------- */

.velo {
  position: relative;
  padding-bottom: 7px;
}
.velo::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background-color: var(--grun);
}

.velo-hover {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}
.velo-hover img {
  width: 100%;
  height: 100%;
}
.velo:hover ~ .velo-hover {
  opacity: 0.5;
}

/* Content */

main {
  height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: none;
}

section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pointer {
  overflow: hidden;
  position: fixed;
  display: inline-block;
  z-index: 5;
  opacity: 0.7;
}

body #pointer {
  overflow: hidden;
  position: fixed;
  z-index: -5;
  transform: translate(-20%, -10%);
}

.inhalt {
  max-width: 800px;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
  z-index: 6;
}

.madeby {
  position: absolute;
  position: fixed;
  z-index: 10;
  right: 2%;
  bottom: 90px;
}

#pfeiltext {
  fill: #000000 !important;
  animation: 20s linear infinite kreis;
}

#pfeiltext:hover {
  animation-play-state: paused;
}

.about {
  width: 100%;
  padding-left: 10%;
  padding-right: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.about-text {
  padding-top: 160px;
  padding-bottom: 200px;
  margin-bottom: 130px;
  max-width: 800px;
  margin-right: 345px;
  overflow: hidden;
}
.about-text h3 {
  max-width: 800px;
  color: var(--white);
  overflow: hidden;
}

.about-bild {
  position: absolute;
  position: fixed;
  right: 0;
  width: 60%;
  height: 100%;
  z-index: -50;
  overflow: hidden;
}

.about-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.about-bild-mobile {
  display: none;
}

/* Footer */

.footer-left {
  position: absolute;
  z-index: 10000;
  height: 180px;
  width: 400px;
  bottom: 0;
  left: 0;
  background-color: var(--grun);
  position: fixed;
}

.hitmeup {
  font-size: 25px;
}

.footer-left h2 {
  color: var(--black-1);
  margin-top: 20px;
}

.kontakt {
  margin-left: 40px;
  max-width: 250px;
  padding-top: 17px;
}

.kontakt a {
  color: var(--black-1);
}

.mail {
  padding-right: 15px;
}
.abstand {
  display: block;
  padding-bottom: 10px;
}

.footer-right {
  position: absolute;
  z-index: 7;
  height: 60px;
  width: 100%;
  bottom: 0;
  right: 0;
  background-color: var(--black-1);
  position: fixed;
}

.footer-socials {
  color: var(--grun);
  text-align: right;
}

.footer-socials a {
  margin-right: 20px;
}

/********************************************************
       Portfolio
  *********************************************************/

/* Portfolio */
.portfolio-wrapper {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 200px;
}

#portfolio-link {
  margin: auto;
  width: auto;
  margin-bottom: 10px;
  margin-top: 10px;
}

.portfolio-wrapper p,
h2,
h3,
h4 {
  color: var(--black-3);
  margin: auto;
  max-width: 750px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.portfolio-wrapper h2 {
  margin-bottom: 20px;
}

.portfolio-wrapper h4 {
  margin-top: 70px;
  margin-bottom: 25px;
  font-size: 20px;
}

.portfolio-wrapper a {
  color: var(--black-3);
  font-weight: 700;
  position: relative;
  display: inline-block;
  margin-top: 25px;
}

.portfolio-wrapper p {
  margin-bottom: 40px;
}

.portfolio-wrapper a::before {
  content: "";
  position: absolute;
  height: 2px;
  width: auto;
  left: 0;
  right: 0;
  margin-top: 26px;
  background-color: var(--grun);
}

.icon {
  display: inline-block;
  width: 30px;
  margin-bottom: -8px;
  margin-left: -3px;
  margin-right: 10px;
}

.portfolio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.portfolio h3 {
  position: relative;
  margin: 0px;
  display: inline;
  text-align: center;
  color: var(--white);
}

.portfolio-bild {
  max-width: 1000px;
  margin: auto;
  margin-top: 150px;
  margin-bottom: 150px;
  position: relative;
  z-index: -5;
}

iframe {
  position: relative;
  width: 100%;
  z-index: 7;
  cursor: pointer;
}

#video-play {
  position: relative;
  z-index: 7;
  cursor: pointer;
}

.portfolio-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bildlegende {
  margin-left: 0;
  font-size: 15px;
  padding-top: 20px;
}

.hero {
  position: relative;
  overflow: hidden;
  z-index: -5;
  width: 100%;
  height: 100vh;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero h1 {
  padding-left: 20px;
  width: 100%;
  margin: 0px;
  position: absolute;
  bottom: 0px;
  font-size: 10vw;
  overflow: hidden;
}

#arrow {
  position: absolute;
  overflow: hidden;
  height: 80px;
  bottom: 20px;
  right: 20px;
  animation: arrow 3s ease-in-out infinite;
}

.portfolio-section-full {
  height: 140vh;
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  z-index: -2;
}

#praxa-1 {
  background-color: rgb(255, 255, 255);
}

#pin-1 {
  background-color: #d1aed4;
}

#multi-1 {
  background-color: #90855e;
}

#sceno-1 {
  background-color: #f3d5cf;
}

#bk-1 {
  background-color: #c0a07a36;
}

.box {
  max-width: 800px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 150px;
  display: flex;
  background-color: var(--grey-3);
}

.box h4 {
  margin-top: 0px;
}

.Leistungen {
  width: 50%;
  padding: 30px;
}

.Services {
  width: 50%;
  padding: 30px;
}

/* Portfolio Next  */
.footer-portfolio {
  width: 100%;
  height: 250px;
  position: relative;
  z-index: 0;
  display: flex;
  background-color: rgb(255, 255, 255);
}

.back {
  height: 100%;
  width: 50%;
  display: flex;
}

.back a {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.back h3 {
  margin: 0px;
  padding: 0px;
  position: absolute;
  color: rgb(156, 156, 156);
}

.back img {
  width: 100%;
  height: 100%;
  opacity: 0.2;
  object-fit: cover;
}

.back:hover {
  background-color: #efefef;
}

.next {
  height: 100%;
  width: 50%;
  display: flex;
}

.next a {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.next h3 {
  margin: 0px;
  padding: 0px;
  position: absolute;
  color: var(--hover);
}

.next img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: 0.4s;
}

.next a:hover > img {
  opacity: 0.3;
}

/* ------- Praxamed --------------- */

.portfolio-prev-1 {
  position: relative;
  padding-bottom: 7px;
  margin-top: 25%;
  cursor: pointer;
}

.portfolio-prev-1::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background-color: var(--grun);
}

.portfolio-prev-1-hover {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}
.portfolio-prev-1-hover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-prev-1 a:hover > h3 {
  color: var(--grun);
}

.portfolio-prev-1:hover ~ .portfolio-prev-1-hover {
  opacity: 0.3;
}

/* ------- Scenotech --------------- */

.portfolio-prev-2 {
  position: relative;
  padding-bottom: 7px;
  margin-top: 25%;
  cursor: pointer;
}

.portfolio-prev-2::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background-color: var(--grun);
}

.portfolio-prev-2-hover {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}
.portfolio-prev-2-hover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-prev-2 a:hover > h3 {
  color: var(--grun);
}

.portfolio-prev-2:hover ~ .portfolio-prev-2-hover {
  opacity: 0.3;
}

/* ------- Disapinity --------------- */

.portfolio-prev-3 {
  position: relative;
  padding-bottom: 7px;
  margin-top: 25%;
  cursor: pointer;
}

.portfolio-prev-3::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background-color: var(--grun);
}

.portfolio-prev-3-hover {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}
.portfolio-prev-3-hover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-prev-3 a:hover > h3 {
  color: var(--grun);
}

.portfolio-prev-3:hover ~ .portfolio-prev-3-hover {
  opacity: 0.3;
}

/* ------- Multi --------------- */

.portfolio-prev-4 {
  position: relative;
  padding-bottom: 7px;
  margin-top: 25%;
  cursor: pointer;
}

.portfolio-prev-4::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background-color: var(--grun);
}

.portfolio-prev-4-hover {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}
.portfolio-prev-4-hover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-prev-4 a:hover > h3 {
  color: var(--grun);
}

.portfolio-prev-4:hover ~ .portfolio-prev-4-hover {
  opacity: 0.3;
}

/* ------- BactoKind --------------- */

.portfolio-prev-5 {
  position: relative;
  padding-bottom: 7px;
  margin-top: 25%;
  cursor: pointer;
}

.portfolio-prev-5::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background-color: var(--grun);
}

.portfolio-prev-5-hover {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}
.portfolio-prev-5-hover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-prev-5 a:hover > h3 {
  color: var(--grun);
}

.portfolio-prev-5:hover ~ .portfolio-prev-5-hover {
  opacity: 0.3;
}

/********************************************************
       @Media
  ********************************************************/

@media screen and (max-width: 700px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 25px;
  }

  p {
    font-size: 17px;
    line-height: 1.5;
  }

  main {
    height: 70vh;
    margin-bottom: 150px;
  }

  .inhalt {
    padding-left: 20px;
    padding-right: 20px;
  }

  .madeby {
    display: none;
  }

  .logo {
    width: 130px;
    height: auto;
  }

  header {
    height: 60px;
  }

  main {
    cursor: inherit;
  }

  #pointer {
    display: none;
  }

  /* Nav desktop */
  .nav-wrapper {
    display: none;
  }

  /* Nav burger */

  #menuToggle {
    display: absolute;
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle input {
    display: block;
    width: 40px;
    height: 30px;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  /*
   * hamburger
   */
  #menuToggle #span-nav {
    display: block;
    width: 30px;
    height: 2px;
    margin-bottom: 5px;
    position: relative;
    right: 0px;
    background: var(--grun);

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }

  #menuToggle #span-nav:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle #span-nav:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  /* 
   * Transform all the slices of hamburger
   * into a crossmark.
   */
  #menuToggle input:checked ~ #span-nav {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: var(--grun);
  }

  /*
   * hide the middle one
   */
  #menuToggle input:checked ~ #span-nav:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
   * last one should go the other direction
   */
  #menuToggle input:checked ~ #span-nav:nth-last-child(2) {
    transform: rotate(-45deg) translate(-1px, -0px);
  }

  #menu {
    position: absolute;
    width: 100vw;
    height: 120vh;
    right: -20px;

    margin-top: -100px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: -100vw;

    padding: 50px;
    padding-top: 125px;
    text-align: center;

    background: #1a1a1a;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(0, -100%);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  #menu li {
    padding: 30px 0;
    font-size: 22px;
  }

  /*
   * slide it in
   */
  #menuToggle input:checked ~ ul {
    transform: none;
  }

  /* Spans */

  span {
    font-size: 20px;
  }

  .grafiker::before {
    display: none;
  }

  .iad::before {
    display: none;
  }

  .velo::before {
    display: none;
  }

  /* Portfolio */

  .box {
    margin: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    position: relative;
    background-color: var(--grey-3);
    flex-direction: column;
  }

  .Leistungen {
    padding: 20px;
    width: 100%;
  }

  .Services {
    width: 100%;
    padding: 20px;
  }

  .hero h1 {
    font-size: 40px;
    bottom: 170px;
    text-align: center;
    padding: 0px;
    margin: 0px;
  }

  #arrow {
    width: 100%;
    right: 0;
    bottom: 60px;
  }

  .portfolio-wrapper {
    padding-top: 120px;
  }

  section {
    flex: none;
    height: inherit;
    padding: 0px;
    margin: 0px;
  }

  .portfolio {
    margin-bottom: 100px;
    padding-top: 20px;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  /*
  .portfolio-prev-1,
  .portfolio-prev-2,
  .portfolio-prev-3,
  .portfolio-prev-4 {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  */

  .portfolio-prev-1-hover,
  .portfolio-prev-2-hover,
  .portfolio-prev-3-hover,
  .portfolio-prev-4-hover {
    display: none;
  }

  .footer-portfolio {
    background-color: var(--white);
    flex-wrap: wrap;
    height: 450px;
  }

  .back,
  .next {
    width: 100%;
  }

  .back {
    height: 150px;
  }

  .next {
    height: 300px;
  }
  .next img {
    opacity: 0.3;
  }
  /* About */

  .about {
    display: inherit;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    width: 100%;
  }

  .about-text {
    margin-bottom: -200px;
    margin-right: 0px;
    padding-top: 70px;
    max-width: 800px;
  }

  .about-bild {
    display: none;
  }
  .about-bild-mobile {
    display: inherit;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 50px;
    margin-bottom: 150px;
  }

  .about-bild-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
  }

  /* Footer */

  .footer-left {
    width: 100%;
    bottom: 50px;
    height: auto;
    box-shadow: 0px 2px 11px 3px rgba(0, 0, 0, 0.4);
  }
  .hitmeup {
    font-size: 20px;
  }

  .kontakt a {
    font-size: 15px;
  }

  .kontakt {
    margin-left: 20px;
    padding-top: 0px;
    margin-bottom: 20px;
  }

  .footer-right {
    height: 50px;
    width: 100%;
    padding-left: 20px;
    z-index: 10000;
  }

  .footer-socials {
    text-align: left;
    margin-bottom: 0px;
    margin-top: 10px;
  }

  .footer-socials a {
    font-size: 15px;
  }
} /* 700 closing */

/********************************************************
       Animation
  ****************************************/

@keyframes kreis {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes arrow {
  0% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-20px);
  }
}