.startloader{width: 100%;position: fixed;overflow: hidden;height: 100vh;background: #EDE7D9;display: flex;align-items: center;justify-content: center;background-attachment: fixed;
  background-size: cover;z-index: 999999;}
.startloader .typewriter{text-align: center;position: relative;float: left;padding: 30px 0px 30px 0px;width: 100%;}
.startloader .typewriter h1{z-index: 111111;font-size: 25vh;text-align: center;text-transform: uppercase; color: #EDE7D9;line-height: 25vh;font-weight: 800;-webkit-text-stroke-width: 2px;-webkit-text-stroke-color: #000000; }
    @keyframes typing {
      from {
        width: 100%
      }
    }
        
    @keyframes blink {
      50% {
        border-color: transparent
      }
    }
    .first_line {
        animation: typewriter_1 2s steps(33) 1s 1 normal both,
          first_cursor 900ms steps(33) 8;
      }
      .second_line {
        animation: typewriter_2 2s steps(31) 1s 1 normal both,
          second_cursor 900ms steps(31) infinite;
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
      }
      .third_line {animation: typewriter_3 2s steps(31) 1s 1 normal both,
        second_cursor 900ms steps(31) infinite;
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
      }
    
      @keyframes typewriter_1 {
        from {
          width: 0;
        }
        to {
          width: 100%;
          border-right: none;
        }
      }
      @keyframes typewriter_2 {
        from {
          width: 0;
        }
        to {
          width:100%;
          border-right: none;
        }
      }
      @keyframes typewriter_3 {
        from {
          width: 0;
        }
        to {
          width: 100%;
          border-right: none;
        }
      }
.first_line,.second_line,.third_line {white-space: nowrap; overflow: hidden;margin: 0 auto;}

/* shake-zoom-animation */
.animate-top-right{position: absolute;right: 10%;top: 7%;}
.animate-top-right svg {animation: tilt-shaking 2s ease-in;width: 12vh;height: 12vh;visibility: hidden; }
.animate-bottom-left{position: absolute;left: 20%;bottom: 5%;z-index: 999999;}
.animate-bottom-left svg{animation: tilt-shaking 4s ease-in;width: 12vh;height: 12vh;visibility: hidden;}
.animate-left{position: absolute;top: 30%;left: 5%;}
.animate-left svg{animation: tilt-shaking 3s ease-in;width: 12vh;height: 12vh;visibility: hidden;}
@keyframes tilt-shaking {
  0% {transform: scale(1.4, 1.4); }
  /* 25% { transform: rotate(35deg); } */
  50% {transform: scale(1.8, 1.8); }
  /* 75% { transform: rotate(-15deg); } */
  100% { transform: scale(1, 1);
  visibility: visible;
  }
}
/* table animation left to right*/
.table-animate{position: absolute;top: 4%;left: 22%;}
.leftto{
animation: left-to 1.5s ease-in-out infinite;
    animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-direction: alternate;
  }
  @keyframes left-to {
    0%   {left: 20%; right: 0px;}
    100%  {left: 22%; right: 22%;}
  }
  /* ==================================================== */

  
.table-animate img{width: 50vh;}
/* bg-color-animate */

.yellow-color{position: absolute;top: 22%!important;}
.yellow-color .color-box{width:26vh;height: 7vh;background: rgba(253, 213, 11, 0.50);position: absolute;right:3%!important;;overflow: hidden;}
.left_right_1{animation: yellow-color 1s infinite;animation-duration: 1s;animation-timing-function: ease-in;animation-direction: alternate;}
  @keyframes yellow-color {0%{left: 5%; right: 5%;}100%{left: 12%; right: 12%;}}



.red-color{position: absolute;top:36%!important;}
.red-color .color-box{width:26vh;height: 7vh;background: rgba(196, 96, 96, 0.50);position: absolute;left:18%!important;;overflow: hidden;}
.left_right_3{animation: red-color 1.4s infinite;animation-duration: 1.4s;animation-timing-function: ease-in;animation-direction: alternate;}
  @keyframes red-color {0%{left: 5%; right: 5%;}100%{left: 8%; right: 8%;}}



.green-color-one{position: absolute;top:11%!important;}
.green-color-one .color-box{width:26vh;height: 7vh;background: rgba(65, 149, 134, 0.50);position: absolute;left:32%!important;;overflow: hidden;}
.left_right_2{animation: green-color-one 1.3s infinite;animation-duration: 1.3s;animation-timing-function: ease-in;animation-direction: alternate;}
  @keyframes green-color-one {0%{left: 5%; right: 5%;}100%{left: 10%; right: 10%;}}



.green-color{position: absolute;top:56%!important;}
.green-color .color-box{width:26vh;height: 7vh;background: rgba(65, 149, 134, 0.50);position: absolute;left:9%!important;;overflow: hidden;}
.left_right_4{animation: green-color 1.5s infinite;animation-duration: 1.5s;animation-timing-function: ease-in;animation-direction: alternate;}
  @keyframes green-color {0%{left: 5%; right: 5%;}100%{left: 12%; right: 12%;}}



.yellow-color-one{position: absolute;top:52%!important;}
.yellow-color-one .color-box{width:26vh;height: 7vh;background: rgba(253, 213, 11, 0.50);position: absolute;right:35%!important;;overflow: hidden;}

.pink-color{position: absolute;bottom:20%!important;}
.pink-color .color-box{width:26vh;height: 7vh;background: rgba(219, 176, 145, 0.50);position: absolute;left:27%!important;;overflow: hidden;}

.red-color-light{position: absolute;top:68%!important;}
.red-color-light .color-box{width:26vh;height: 7vh;background: rgba(196, 96, 96, 0.50);position: absolute;right:15%!important;;overflow: hidden;}


.red-color-one{position: absolute;top: 45%!important;}
.red-color-one .color-box{width:26vh;height: 7vh;background: rgba(238, 213, 195, 0.50);position: absolute;right: 15%;overflow: hidden;}
.left_right{animation: myfirst 1s infinite;animation-duration: 1s;animation-timing-function: ease-in;animation-direction: alternate;}
  @keyframes myfirst {0%{left: 5%; right: 5%;}100%{left: 10%; right: 10%;}}

  /* koffekodes-icon-animation */
  .code{position: absolute;top: 10%;}
  .code svg{width: 35vh;overflow: hidden;right: -7%;position: absolute;animation: fadeInDown 1s ease-in-out;}
  .left_right_code{animation: myfirst 1.2s infinite;animation-duration: 1.2s;animation-timing-function: ease-in;animation-direction: alternate;}
  @keyframes myfirst {0%{left: 5%; right: 1%;}100%{left: 5%; right: -1%;}}

.cup{position: absolute;bottom: 35%;}
.cup svg{width: 35vh;;overflow: hidden;position: absolute;left:-14%;animation: fadeInUp 1s ease-in-out;}
.left_right_cup{animation: cup 1.2s infinite;animation-duration: 1.2s;animation-timing-function: ease-in;animation-direction: alternate;}
@keyframes cup {0%{left: 1%; right: 3%;}100%{left: 5%; right: 2%;}}

.botton-table{position: absolute;bottom: 17%;}
.botton-table svg{width: 37vh;;overflow: hidden;position: absolute;right:-5%;animation: fadeInUp 1s ease-in-out;}
.left_right_table{animation: cup 1.2s infinite;animation-duration: 1.2s;animation-timing-function: ease-in;animation-direction: alternate;}
@keyframes cup {0%{left: 1%; right: 3%;}100%{left: 5%; right: 2%;}}

.top-table{position: absolute;top: 2%;}
.top-table svg{width: 37vh;;overflow: hidden;position: absolute;left:15%;animation: fadeInDown 1s ease-in-out;}
.left_right_top_table{animation: cup 1.2s infinite;animation-duration: 1.2s;animation-timing-function: ease-in;animation-direction: alternate;}
@keyframes cup {0%{left: 3%; right: 1%;}100%{left: 5%; right: 2%;}}