:root {
  --white: #ffffff;
  --black: #000000;
  --shadow: rgba(0, 0, 0, .3);
}

body {background-color: var(--white); padding: 0; margin: 0; font-family: 'Roboto Condensed', sans-serif; color: var(--black);}
img {width: 100%; height: auto; display: block;}
h1, h2, p {margin: 0 0 40px 0;}
p {line-height: 24px;}

.blob {max-width: 150px; max-height: 150px; margin: 50px auto 0 auto;}
.svg-blob {max-width: 300px; max-height: 300px; transform-origin: 50% 50%; animation: move 24s ease-in-out infinite;}
.logo-svg {max-width: 60px; position: absolute; top: 100px; left: 50%; margin-left: -30px; fill: var(--white); width: 100%;}
.logo-name {max-width: 100px; width: 100%; margin: 0 auto; fill: var(--black);}
.logo-name svg {max-width: 100px;}
.claim {font-weight: bold; font-size: 16px; text-transform: uppercase; display: table; margin: -18px auto;}

.content {width: 90%; max-width: 400px; margin: 150px auto; font-size: 18px; text-align: center; font-weight: 300;}
.content h2 {font-size: 40px;}

.kontakt {font-weight: 700; font-size: 28px; line-height: 40px;}
.kontakt svg {margin-right: 12px;}
.kontakt a {color: #000000; text-decoration: none; transition: all .3s ease;}
.kontakt a:hover svg {transform: rotate(-45deg); transition: all .3s ease;}
@media screen and (max-width: 360px){
.kontakt {font-size: 26px;}
}
@media screen and (max-width: 360px){
.kontakt {font-size: 24px;}
.kontakt svg {margin-right: 8px;}
}

#countdown {font-weight: 700;}
.lighter {color: #888888; font-weight: 300; font-size: 12px;}

.holiday {display: table; margin: 0 auto 30px auto; text-align: center;}
.holiday .fa-umbrella-beach {font-size: 40px; margin-bottom: -5px;}
.holiday .fa-sun {font-size: 40px; margin-bottom: 15px;}
.holiday-box {background-color: var(--black); color: var(--white); padding: 20px; font-size: 18px;}
@media screen and (max-width: 388px){
.holiday-box {font-size: 16px;}
}
@media screen and (max-width: 350px){
.holiday-box {font-size: 14px;}
}

.copy {text-align: center; font-size: 12px; margin-bottom: 50px;}


@keyframes move {
  0%   { transform: scale(1)   translate(0, 0) rotate(0); fill: var(--black); filter: drop-shadow( 20px 14px 10px var(--shadow)); }
  25%  { transform: scale(0.9) translate(0.01vw, 0.01vh) rotate(40deg); fill: var(--black); filter: drop-shadow( 14px 14px 6px var(--shadow)); }
  50%  { transform: scale(1) translate(0.05vw, 0.05vh) rotate(10deg); fill: var(--black); filter: drop-shadow( -16px -16px 16px var(--shadow)); }
  75%  { transform: scale(0.9) translate(0.01vw, 0.01vh) rotate(-40deg); fill: var(--black); filter: drop-shadow( 14px 14px 6px var(--shadow)); }
  100% { transform: scale(1)   translate(0, 0) rotate(0); fill: var(--black); filter: drop-shadow( 20px 14px 10px var(--shadow)); }
}
@keyframes logo {
  0%   { transform: translate(0, 0);}
  25%  { transform: translate(0, 2.5vh);}
  50%  { transform: translate(0, 2.05vh);}
  75%  { transform: translate(0, 0);}
  100% { transform: translate(0, 0);}
}