@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,400;0,900;1,100&display=swap');

/* Base classes */
.container { max-width: 1600px; margin: 0px auto; padding: 0px 20px }

ul.list-inline { list-style: none; margin: 0px; padding: 0px; }
ul.list-inline li { display: list-item; float: left; margin: 0px; }

.text-align-center { text-align: center;  }

.clear-fix { clear: both }

.spacer { width: 60px; height: 2px; margin: 60px auto; background-color: red }

@-webkit-keyframes catching {
    0%   { color: #FF6100; transform: scale(1.5); }
    100% { color: white; transform: scale(1); }
}

@keyframes catching {
    0%   { color: #FF6100; transform: scale(1.5); }
    100% { color: white; transform: scale(1); }
}
.catcher { -webkit-animation-name: catching; animation-name: catching; animation-duration: 0.5s; -webkit-animation-duration: 0.5s; }

/* Base classes end */
body { font-family: 'Exo', sans-serif; font-size: 20px; }

a { color: white; text-decoration: none }

/* Text selection */
::-moz-selection { color: white; background: red; }
::selection { color: white; background-color: red; } 

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background-color: #4E0000;
}

::-webkit-scrollbar-thumb {
    background-color: #8F0000; 

}
::-webkit-scrollbar-thumb:hover {
    background-color: red;
}

/* CSS Tooltip - made by https://chrisbracco.com/a-simple-css-tooltip/ */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 3px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: white /* rgba(255, 255, 255, 0.95) */;
  box-shadow: 0px 0px 13px 0px rgba(80, 80, 80, 0.2);
  color: #666;
  content: attr(data-tooltip);
  text-align: center;
  font-family: 'Roboto';
  font-weight: 300;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid white /* rgba(255, 255, 255, 0.95) */;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}

/* Landing page */
.header { position: absolute; left: 0px; top: 0px; width: 100%; padding: 30px 0px; line-height: 60px; z-index: 999; color: white }
.header .logo { display: inline-block; height: 60px; }
.header img { height: 40px; vertical-align: middle }
.header nav { float: right; line-height: 40px; padding-top: 10px; font-size: 14px; font-weight: bold; text-transform: uppercase;}
.header nav li { margin-left: 50px; opacity: 0.66; filter: alpha(opacity = 0.66); transition: opacity 0.3s; }
.header nav li:hover { opacity: 1; filter: alpha(opacity = 1); }
.header nav li a { display: inline-block; }
.header .ghost-btn { padding: 0px 12px; border: 2px solid white; border-radius: 4px; }
.header .ghost-btn:hover { transform: scale(1.1); transition: all 0.08s linear; }
@media (max-width: 680px) {
    .header { text-align: center; }
    .header nav li { margin-left: 20px }
    .header .btn { padding: 0; border: none; }    
    .header .home { display: none }
}
@media (max-width: 680px) and (max-height:650px) {
    .header { padding: 0 }
    .header .logo { display: none }
    .header nav { padding-bottom: 10px; font-weight: normal; font-size: 12px; }
}
@media (max-width: 400px) {
    .header { padding: 10px 0px 0px 0px }
    .header nav { padding-bottom: 10px; font-weight: normal; font-size: 12px; }
}

.hero { height: 100vh; max-height: 1440px; display: flex; align-items: center; justify-content: center; background-image: url(img/hero.jpg); background-color: #1f1f1f; background-repeat: no-repeat; background-position: center top; background-size: cover; color: white }
.hero .wrapper { animation-name: showHeroTitle;
    animation-iteration-count: 1;
    animation-duration: 1.5s;
    animation-timing-function: linear; 
    color: white; text-shadow: 0px 0px 50px black; text-align: center; }
.hero .hgroup { /* display: table-cell; height: 40vh;  */ }
.hero h1 { font-size: 40px; }
.hero h1 .name { color: red; text-shadow: none; padding: 0 20px; }
.hero p { font-family: 'Roboto Slab'; font-size: 40px; font-weight: 300 }
.hero .img { height: 50vh; max-width: 686px; max-height: 1080px; margin-left: auto; margin-right: auto; background-image: url(img/hero.png); background-repeat: no-repeat; background-position: center bottom; background-size: contain; 
    animation-name: showHeroImg;
    animation-iteration-count: 1;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    transform: translateY(-40px);
}
.hero .btn { display: inline-block; background-color: #00AFFF; padding: 10px 15px; border-radius: 5px; font-size: 20px; box-shadow: 0px 3px 0px #0075ab; }
.hero .btn:hover { opacity: 0.9; filter: alpha(opacity = 0.9); }
.hero .btn:active { margin-top: 4px; height: 26px; box-shadow: none; transition: all 0.08s linear; }
.hero .scroll { position: absolute; width: 100px; max-width: 100%; height: 100px; left: 50%; transform: translateX(-50px); bottom: 0; text-align: center; }
.hero .scroll img { animation: pulseScrollImg 2s ease 0s infinite; }
.sub-hero { height: 10vh }
@media (max-width: 680px) {
    .hero .hgroup { margin-top: 40px; }
    .hero h1 { font-size: 30px; }
}
@media (max-width: 400px) {
    .hero .hgroup { margin-top: 80px; }
}
@media (min-height: 800px) and (min-width: 680px) {
    .hero h1, .hero p { font-size: 50px; }
}
@media (min-height: 900px) and (min-width: 680px) {
    .hero h1, .hero p { font-size: 70px; }
}
@media (max-height: 500px) {
    .hero .hgroup .btn { display: none }
}
@keyframes showHeroTitle {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes showHeroImg {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    0% {
        opacity: 0;
    }
    100% {
        transform: translateY(-40px);
        opacity: 1;
    }
}
@keyframes pulseScrollImg {
  0% {
      opacity: 0.7;
      transform: scale(1);
  }
  60% {
      opacity: 1;
      transform: scale(1.2);
  }
  100% {
      opacity: 0.7;
      transform: scale(1.0);
  }
}

.features h2 { margin: 130px 0px 0px 0px; text-align: center;  font-weight: 300; font-size: 40px; color: #222 }
.features .item { box-sizing: border-box; width: 28%; height: 200px; float: left; color: #666; line-height: 1.7 }
.features .item a { display: inline-block; color: #666; border-bottom: 2px solid #DDD }
.features .item.hidden { display: none }
.features .icon { float: left; width: 70px; height: 70px; line-height: 70px; font-size: 40px; color: black; box-shadow: 0px 0px 13px 0px rgba(80, 80, 80, 0.1); border-radius: 500px; text-align: center; color: red }
.features .icon:hover { animation: jump .15s linear alternate 2; }
.features .text { margin-left: 100px; font-size: 16px }
.features h3 { margin: 0px 0px 10px 0px; line-height: 20px; font-size: 20px; text-transform: uppercase; }
.features p { font-family: 'Roboto Slab'; font-weight: 300; font-size: 20px }
.features .hint { background-color: #f7f7f7; }
@media (min-width: 1100px) {
    .features .item:nth-child(2), .features .item:nth-child(3), .features .item:nth-child(5), .features .item:nth-child(6) { margin-left: 5%; }
    .features .item:nth-child(9), .features .item:nth-child(10), .features .item:nth-child(12), .features .item:nth-child(13), .features .item:nth-child(15), .features .item:nth-child(16) { margin-left: 5%; }
}
@media (max-width: 1100px) {
    .features .item { width: 100%; float: none; margin-left: 0 }
}
@media (max-width: 490px) {
    .features .item { height: auto; text-align: center; }
    .features .item .icon { float: none; margin: 20px auto 20px }
    .features .item .text { margin-left: 0 }
}
@keyframes jump {
  0%   {transform: translate3d(0,0,0) }
  40%  {transform: translate3d(0,-7%,0) }
  100% {transform: translate3d(0,-21%,0) }
}

.about { padding-top: 10vh }

.subscribe { margin-bottom: 130px }
.subscribe h2 { margin: 130px 0px 0px 0px; text-align: center; font-weight: 300; font-size: 30px; color: #222 }
.btn { margin-left: 5px; padding: 10px 40px; border: 2px solid red; border-radius: 5px; background-color: red; color: white; box-sizing: content-box; -moz-box-sizing: content-box; font-family: Arial, Tahoma; font-size: 18px; box-shadow: 0px 4px 0px #8F0000; vertical-align: top }
.btn:hover { opacity: 0.8; }

.footer { margin-top: 260px; font-size: 13px; color: #999 }
.footer .container { padding-top: 40px; padding-bottom: 40px; border-top: 1px solid #CCC;  }
.footer a { color: #999; border-bottom: 1px #666 dotted; }
.footer ul { float: right; }
.footer ul a { display: inline-block; padding: 0px 10px; border: none; }
.footer ul a:hover { transform: scale(2); transition: all 0.08s linear; }
#imprint-text { display: none }
@media (max-width: 900px) {
    .footer { text-align: center; }
    .footer ul { float: none; margin-top: 20px }
    .footer ul li:nth-child(1) { width: 45%; text-align: right; }
    .footer ul li:nth-child(2) { width: 10%; }
    .footer ul li:nth-child(3) { width: 45%; text-align: left; }
}
.icons {
    font-size: 2em;
}