@import url('https://fonts.googleapis.com/css?family=Nova+Round');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700');
@import url('https://fonts.googleapis.com/css?family=IM+Fell+Great+Primer');

body {
font-family: 'Noto Serif', serif;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cccccc' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

h2 {
font-family: 'Nova Round', cursive;
}

a:hover img {
    filter: grayscale(0%);
}

form {
    padding: 1vw;
    color: white;
    font-family: 'Noto Serif', serif;
    border: solid 0.15vw #7b1e12;
    }
    
input, textarea, select, button {
    margin: 0;
    font-size: 1vw;
}    
    
input[type="submit"] {
    border-bottom: solid 0.15vw #7b1212;
    float: right;
    border-left: none;
    border-right: none;
    border-top: none;
    color: #fff;
    padding: 0.15vw 0.6vw 0.15vw 0.6vw;
}

input[type="submit"]:hover {
    background: #7b1e12;
    cursor: pointer;
}

.gridimg {
    filter: grayscale(100%);
    width: 24%;
}

#deuxcol:hover #unecol:hover {

}

.fourcol {
width: 24%;
}

.threecol {
width: 32%;
}

.twocol {
width: 48%;
}

.onecol {
width: 99%;
}

#col1 {
width: 61%;
display: block;
float: left;
padding: 0.15vw;
}

#ad {
display: inline-block;
opacity: 0;
font-size: 2vw;
margin-left: 7vw;
font-family: 'Nova Round', cursive;
animation: bounceIn 1s forwards;
-webkit-animation: bounceIn 1s forwards 10s;
}

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  } 
×

#col2 {
width: 38%;
float: right;
padding: 0.1vw; 
font-size: 1vw;
}

#col2_top {
display: flex;
}

.ash {
    font-size: 0.8rem;
}

#anzeigedesreichtums {
    display: block;
    float: none;
    width: 100%;
    padding-top: 1vw;
    cursor: none;
    clear: both;
    margin: 0 0 3vw 0;
    background-image: url(https://www.testanonpertinente.net/Bungalows/backgrounds/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 0%;
    background-position-y: 60%;
}

#mitmenschen {
    color: #fe3232;
    position: absolute;
    top: 4vw;
    font-family: 'Nova Round', cursive;
    font-size: 4vw;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    width: 95%;
}

.text {
  fill: none;
  -webkit-animation: stroke 10s linear;
  animation: stroke 10s linear;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.text:nth-child(5n + 1) {
  stroke: #fff;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
.text:nth-child(5n + 2) {
  stroke: #fff;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.text:nth-child(5n + 3) {
  stroke: #fff;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.text:nth-child(5n + 4) {
  stroke: #fff;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.text:nth-child(5n + 5) {
  stroke: #fff;
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.text {
  font-family: 'Nova Round', cursive;
  font-size: 8vw;
  text-transform: uppercase;
  margin: 0;
}

svg {
  width: 100%;
}


@keyframes stroke {
   0% {
    stroke-dasharray: 0.2vw 22vw;
    stroke-width: 0.1vw;
    stroke-dashoffset: -36vw;
    opacity:0;
  }
   60% {
    stroke-dasharray: 0.2vw 22vw;
    stroke-width: 0.1vw;
    stroke-dashoffset: -30vw;
    opacity:1;
    
  }
  85% {     
     stroke-width: 0.7vw;
     stroke-dashoffset: -25vw;
     stroke-dasharray: 0.2vw 20vw;
     
}
  100% {
     stroke-width: 1vw;
     stroke-dashoffset: 0;
     stroke-dasharray: 0.1vw 0.2vw;
     
  }  
}


@-webkit-keyframes stroke {
   0% {
    stroke-dasharray: 0.2vw 22vw;
    stroke-width: 0.1vw;
    stroke-dashoffset: -36vw;
    opacity:0;
  }
   60% {
    stroke-dasharray: 0.2vw 22vw;
    stroke-width: 0.1vw;
    stroke-dashoffset: -30vw;
    opacity:1;
    
  }
  85% {     
     stroke-width: 0.7vw;
     stroke-dashoffset: -25vw;
     stroke-dasharray: 0.2vw 20vw;
     
}
  100% {
     stroke-width: 1vw;
     stroke-dashoffset: 0;
     stroke-dasharray: 0.1vw 0.2vw;
     
  }  
}



/* COLONNES PIQUEUR */

ul.rank {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.rank > li {
    position: relative;
    margin: 0;
    height: 10vw;
    opacity: 0.4;
    transition: all 0.75s;
    width: 2.5vw;
    display: inline-block;
    cursor:pointer;
}

ul.rank:hover > li {
	opacity: 1;
}

ul.rank > li + li {
    margin-top: 0.6vw;
}

ul.rank > li:hover ~ li {
    opacity: 0.4;
}

ul.rank > li + li:before {
    content: "";
    display: block;
    position: absolute;
    top: -0.6vw;
    left: 0;
    right: 0;
    height: 0.6vw;
}

.wtf {
    font-size: 2rem;
    display: block;
    float: right;
    margin-right: 2rem;
    padding: 0;
    text-decoration: underline;
    bottom: -10rem;
    position: relative;
}

.wtf a {
    color: #fff;
    font-family: 'Nova Round', cursive;
}