body{
    background-color: #000;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}

a{
    text-decoration: none;
    color: #fff;
}

h1{
    font-size: 60px;
}

h2{
    font-size: 60px;
}

h3{
    font-size: 12px;
}



section{
    padding: 80px 0;
}

.arena{
    max-width: 1000px;
    padding: 10px;
    margin: 0 auto;
}

.arena800{
    max-width: 800px;
    padding: 10px;
    margin: 0 auto;
}

.arena50{
    width: 42%;
    padding: 2%;
    margin: 2%;
}

.textCenter{
    text-align: center;
}

.left{
    float: left;
}

.right{
    float: right;
}

.clear{
    clear: both;
}

img{
    max-width: 100%;
}

.weiter{
    font-size: 22px;
    padding: 7px 23px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}

/*color*/

.c1{ color: #fff;}
.c2{ color: #dd137a;}

.cb1{ background-color: #fff;}
.cb2{ background-color: #dd137a;}


/*animation*/

.ani1{
    animation-name: zeig;
  animation-duration: 2s;
}

@keyframes zeig {
    from {opacity: 0;}
    to {opacity: 1;}
  }


  .ani2{
    opacity: 0;
    position: relative;
  }

  .ani2ani{
    top: 0px;
    opacity: 1;
    animation-name: posAni;
  animation-duration: 2s;
}

@keyframes posAni {
    from {opacity: 0;
    top: 100px;}
    to {opacity: 1;
    top: 0px;}
  }



@media only screen and (max-width: 600px) {
    .left,
    .right{
        float: none;
    }

 
    .arena50,
    .arena800{
        width: 92%;
        margin: 2%;
        padding: 2%;
    }

    h2{
        font-size:35px;
    }
    
  }