* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    cursor: url("Index_page/cursor.png"), auto;
}

body{
    background-color: rgba(234, 186, 141, 0.901);
    animation: change 15s 1
}
@keyframes change {
    0%{background-color:rgb(234, 186, 141, 0.901)}
    10%{background-color:rgba(234, 186, 141, 0.901)}
    20%{background-color:rgba(234, 186, 141, 0.901)}
    30%{background-color:rgba(242, 174, 111, 0.901)}
    40%{background-color:rgba(215, 162, 116, 0.976)}
    50%{background-color:rgba(133, 85, 35, 0.858)}
    60%{background-color:rgba(110, 62, 25, 0.82)}
    70%{background-color:rgba(80, 48, 24, 0.896)}
    80%{background-color:rgba(43, 22, 10, 0.845)}
    90%{background-color:rgba(23, 16, 9, 0.938)}
    100%{background-color:rgba(168, 124, 83, 0.901)}

}


.logoeinfach img {
    position: absolute;
    width: 10%;
    margin-left: -72%;
    margin-top: -1%;
}
.menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 25%;
    margin-top: 1%;
    margin-left: 73%;
}
.menu a:hover {
    /*filter:opacity(0.5);*/
    filter:drop-shadow(2px 2px rgba(115, 181, 232, 0.798));

}
.menu-tab {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    z-index: 10000;

}
.menu-tab img {
    width: 100%;
    
}







.main-area {
    width: 100%;

}

.firstpic {
    animation: animate3 4s linear 1;
}


.bodies {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 490%;
    overflow: hidden;
}

.bodies div {
    position: absolute;
    display: block;
    width: 20%;
    height: 50%;
    list-style: none;
    bottom: 0px;
    animation: animate 18s linear 1;
 
}



.bodies div:nth-child(1) {
    left: 25%;
    bottom: 30%;
    animation-delay: 0s;
    animation-duration: 15s;
}
.bodies div:nth-child(2) {
    left: 75%;
    bottom: 30%;
    animation-delay: 4s;
    animation-duration: 16s;

}
.bodies div:nth-child(3) {
    left: 55%;
    bottom: 30%;
    animation-delay: 0s;
    animation-duration: 13s;

}
.bodies div:nth-child(4) {
    left: 25%;
    bottom: 35%;
    animation-delay: 0s;
    animation-duration: 10s;

}
.bodies div:nth-child(5) {
    left: 5%;
    bottom: 25%;
    animation-delay: 0s;
    animation-duration: 13s;

}
.bodies div:nth-child(6) {
    left: 75%;
    bottom: 25%;
    animation-delay: 2s;
    animation-duration: 10s;
}
.bodies div:nth-child(7) {
    left: 25%;
    bottom: 10%;
    animation-delay: 4s;
    animation-duration: 18s;
}
.bodies div:nth-child(9) {
    left: 75%;
    bottom: 20%;
    animation-delay: 2s;
    animation-duration: 12s;
}
.bodies div:nth-child(10) {
    left: 55%;
    animation-delay: 0s;
    animation-duration: 30s;
}
.bodies div:nth-child(11) {
    left: 2%;
    bottom: 10%;
    animation-delay: 3s;
    animation-duration: 18s;
}
.bodies div:nth-child(12) {
    left: 55%;
    bottom: 15%;
    animation-delay: 0s;
    animation-duration: 18s;
}
.bodies div:nth-child(13) {
    left: 75%;
    bottom: 10%;
    animation-delay: 0s;
    animation-duration: 18s;
}
.bodies div:nth-child(14) {
    left: 15%;
    bottom: 20%;
    animation-delay: 0s;
    animation-duration: 18s;
}
.bodies div:nth-child(15) {
    left: 85%;
    animation-delay: 0s;
    animation-duration: 17s;
}
.bodies div:nth-child(16) {
    left: 15%;
    animation-delay: 0s;
    animation-duration: 16s;
}








@keyframes animate {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(0deg);
    }
    5% {
        opacity: 0.2;
        transform: translateY(0) rotate(1deg);
    }
    15% {
        opacity: 0.8;
        transform: translateY(-50px) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: translateY(-100px) rotate(1deg);
    }

    50% {
        opacity: 1;
        transform: translateY(-500px) rotate(0deg);
    }
    
    60% {
        opacity: 1;
        transform: translateY(-600px) rotate(0deg);
    }
    70% {
        opacity: 1;
        transform: translateY(-700px) rotate(1deg);
    }
    70% {
        opacity: 1;
        transform: translateY(-800px) rotate(0deg);
    }
    80% {
        opacity: 0.5;
        transform: translateY(-900px) rotate(1deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-1900px) rotate(0deg);
    }
    
}



@media (max-width: 1000px) {


    .logoeinfach img {
      position: absolute;
      width: 15%;
      margin-left: -40%;
      margin-top: -3%;
          }
  
      .menu {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          width: 58%;
          margin-top: 3%;
          margin-left: 41%;
      }
      
      .email video {
        position: absolute;
        width: 100%;
        margin-top: 1%;
        margin-left:1%;
        z-index: 999;
    }

    .firstpic{
        margin-top: 80%;
    }

    .bodies {
        margin-top: -50%;
    }

    .bodies img {
        width: 230%;
    }

      }
      

@keyframes animate3 {
    0% {opacity: 0;}
    25% {opacity: 0.25;}
    50% {opacity: 0.5;}
    75% {opacity: 0.75;}
    100% {opacity: 1;}

}

@keyframes animate4 {
    0% {opacity: 1;}
    25% {opacity: 0.75;}
    50% {opacity: 0.5;}
    75% {opacity: 0.25;}
    100% {opacity: 0;}

}

@keyframes animate2 {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    25% {
        opacity: 1;
        transform: translateY(10px) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translateY(20px) rotate(0deg);
    }
    75% {
        opacity: 1;
        transform: translateY(10px) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) rotate(0deg);
    }

    
}


@keyframes animate5 {

    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    10% {
        opacity: 1;
        transform: translateY(6px) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: translateY(0px) rotate(0deg);
    }
    30% {
        opacity: 1;
        transform: translateY(5px) rotate(0deg);
    }

    40% {
        opacity: 1;
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateY(4px) rotate(0deg);
    }

    60% {
        opacity: 1;
        transform: translateY(0px) rotate(0deg);
    } 
    70% {
        opacity: 1;
        transform: translateY(3px) rotate(0deg);
    } 
    80% {
        opacity: 1;
        transform: translateY(0px) rotate(0deg);
    }
    90% {
        opacity: 1;
        transform: translateY(2px) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0px) rotate(0deg);
    }
}


.letter img {
    width: 12%;
    margin-top: -10%;
    margin-left: 39%;
}


/*dragging*/


.box {
    background-color: none;

    position: absolute;

  }
  
.box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
  
.box:hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
    cursor: pointer;
  }

.box1 {
    animation: animate2 2.5s linear infinite;
    width: 20%;
    left: -6%;
    top: 8%;
}
.box2 {
    animation: animate2 2.5s linear infinite;
    width: 13%;
    left: 85%;
    top: 30%;
}


.box3 {
    animation: animate2 2.5s linear infinite;
    width: 12%;
    left: 82%;
    top: 10%;
}
.box4 {
    animation: animate2 2.5s linear infinite;
    width: 20%;
    left: 7%;
    top: 1%;
}
.box5 {
    animation: animate2 2.5s linear infinite;
    width: 10%;
    left: 65%;
    top: -1%;
}
.box6 {
    animation: animate2 2.5s linear infinite;
    width: 10%;
    left: 10%;
    top: 16%;
}
.box8 {
    animation: animate2 2.5s linear infinite;
    width: 12%;
    left: 71%;
    top: 6%;
}
.box9 {
    animation: animate2 2.5s linear infinite;
    width: 12%;
    left: 85%;
    top: 1%;
}
.box10 {
    animation: animate2 2.5s linear infinite;
    width: 16%;
    left: -7%;
    top: 35%;
}
.box11 {
    animation: animate2 2.5s linear infinite;
    width: 12%;
    left: -9%;
    top: 50%;
}
.box12 {
    animation: animate2 2.5s linear infinite;
    width: 15%;
    left: -2%;
    top: 22%;
}
.box13 {
    animation: animate2 2.5s linear infinite;
    width: 14%;
    left: 84%;
    top: 32%;
}
.box14 {
    animation: animate2 2.5s linear infinite;
    width: 22%;
    left: 4%;
    top: 52%;
}
.box16 {
    animation: animate2 2.5s linear infinite;
    width: 18%;
    left: 70%;
    top: 52%;
}
.box17 {
    animation: animate2 2.5s linear infinite;
    width: 23%;
    left: 5%;
    top: 74%;
}
.box18 {
    animation: animate2 2.5s linear infinite;
    width: 16%;
    left: -8%;
    top: 68%;
}
.box19 {
    animation: animate2 2.5s linear infinite;
    width: 22%;
    left: 63%;
    top: 68%;
}
.box20 {
    animation: animate2 2.5s linear infinite;
    width: 15%;
    left: 84%;
    top: 78%;
}
.box21 {
    animation: animate2 2.5s linear infinite;
    width: 16%;
    left: 6%;
    top: 86%;
}
.box22 {
    animation: animate2 2.5s linear infinite;
    width: 13%;
    left: 68%;
    top: 86%;
}


.minitat {
    animation: animate2 2.5s linear infinite;
    width: 28%;
    left: 3%;
    top: 30%;
}
.minitat1 {
    animation: animate2 2.5s linear infinite;
    width: 14%;
    left: 22%;
    top: 22%;
}
.minitat2 {
    animation: animate2 2.5s linear infinite;
    width: 20%;
    left: 25%;
    top: 1%;
}
.minitat3 {
    animation: animate2 2.5s linear infinite;
    width: 20%;
    left: 10%;
    top: 4%;
}
.minitat4 {
    animation: animate2 2.5s linear infinite;
    width: 20%;
    left: -2%;
    top: 20%;
}
.minitat5 {
    animation: animate2 2.5s linear infinite;
    width: 20%;
    left: 23%;
    top: 14%;
}
.minitat6 {
    animation: animate2 2.5s linear infinite;
    width: 25%;
    left: 19%;
    top: 68%;
}

.minitat7 {
    animation: animate2 2.5s linear infinite;
    width: 10%;
    left: 17%;
    top: 75%;
}
.minitat8 {
    animation: animate2 2.5s linear infinite;
    width: 10%;
    left: -4%;
    top: 38%;
}
.minitat9 {
    animation: animate2 2.5s linear infinite;
    width: 20%;
    left: 1%;
    top: 15%;
}
.minitat10 {
    animation: animate2 2.5s linear infinite;
    width: 11%;
    left: 3%;
    top: 45%;
}
.minitat11 {
    animation: animate2 2.5s linear infinite;
    width: 11%;
    left:-8%;
    top: 30%;
}
.minitat12 {
    animation: animate2 2.5s linear infinite;
    width: 15%;
    left:-6%;
    top: 54%;
}


.plant1 {
    animation: animate2 2.5s linear infinite;
    width: 23%;
    left:-8%;
    top: -4%;
}
.plant2 {
    animation: animate2 2.5s linear infinite;
    width: 24%;
    left:6%;
    top: 51%;
}


.vase {
    animation: animate2 2.5s linear infinite;
    width: 17%;
    left:-3%;
    top: 67%;
}


.til {
    animation: animate2 2.5s linear infinite;
    width: 27%;
    left:8%;
    top: 40%;
}

/*dragging*/







.bodytemplate {
    position: relative;
    margin-top: 15%;
    margin-left: 11%;
}

.body{
    margin-top: 10%;
    position: relative;
}
.body2 {
    position: relative;
    margin-top: 15%;
}
.body img{
    width: 90%;
}
.body2 img{
    width: 85%;
    margin-top: -10%;
    margin-left: 14%;
}
/*.body3 img{
    width: 100%;
    margin-top: -10%;
    margin-left: 0%;
}
*/






/*more*/
.more_gallery {
    width: 9%;
    margin-left: 45%;
    margin-top: 1%;
    
}
.more_gallery img {
    animation: animate5 2s linear infinite;
    width: 100%;
}




 
/*imagegallery*/

.try-area {
    width: 100%;
    margin-top: 60%;
    margin-bottom: 5%;
  

}


.bluehour video {
    width:100%;
}
.withtat video {
    width:100%;
}
.glider-contain {
    width: 90% !important;
    margin-top: 12%;

}

.glider img {
    width:100%;
}

.glider-next {
   margin-top: 10%;
   margin-right: -2%;
}
.glider-prev {
    margin-top: 10%;
    margin-left: -1%;
 }
/*imagegallery*/







.email {
    margin-top: 10%;
}




.email video {
    position: relative;
    opacity: 0.5;
    width: 9%;
    margin-top: -4.8%;
    margin-left:89.5%;
    z-index: 999;
}

.email1 img {
    position: absolute;
    width: 7%;
    margin-top: -4%;
    margin-left:89%;
    z-index: 999;
}






.iphone {
    margin-top: 20%;
    display: flex;
    margin-left: 7%;

}
.iphone img {
    opacity: 0;
    width:80%;
}