/* Animation Smartphone */
svg{
    max-width:500px;
	display:block;
    margin: 0 auto;
    max-height: 500px;
}

@keyframes fadein_bubble_1{
    0% {
      transform: translateY(-100%);
      opacity:0;
    }
	50% {
        transform: translateY(0%);
        opacity: 1;
    }
    55% {
        transform: translateX(-20px) rotate(-3deg);
    }
    
    65% {
        transform: translateX(5px) rotate(3deg);
    }
    
    75% {
        transform: translateX(-5px) rotate(-2.6deg) translateY(0%);
    }
    
    85% {
        transform: translateX(5px) rotate(2.4deg);
    }
    
    100% {
        transform: translateX(-3px) rotate(0deg);
  }
}

@keyframes fadein_bubble_2{
    0% {
      transform: translateY(-100%);
      opacity:0;
    }
	50% {

        opacity: 1;
    }
    55% {
        transform: translateX(-15px) rotate(2.5deg);
    }
    
    65% {
        transform: translateX(3px) rotate(-2.5deg) translateY(0%);
    }
    
    75% {
        transform: translateX(-7px) rotate(2.9deg);
    }
    
    85% {
        transform: translateX(7px) rotate(-2.2deg);
    }
    
    100% {
        transform: translateX(-5px) rotate(0deg);
  }
}

@keyframes fadein_box{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}


#svg_image_bubble{
    animation: fadein_bubble_1 4s ease-in-out;
}

#svg_rect_image{
    animation: fadein_box 3s linear;
}

#svg_text_bubble{
    animation: fadein_bubble_2 4s ease-in-out;
}

#svg_rect_text{
    animation: fadein_box 3s linear;
}

#svg_like_share_bubble{
    animation: fadein_bubble_1 4s ease-in-out;
}

#svg_rect_like{
    animation: fadein_box 2s linear;
}

#svg_info_bubble{
    animation: fadein_bubble_2 4s ease-in-out;
}

#svg_rect_info{
    animation: fadein_box 2s linear;
}

#svg_map_bubble{
    animation: fadein_bubble_1 4s ease-in-out;
}

#svg_rect_map{
    animation: fadein_box 1s linear;
}

#svg_social_bubble{
    animation: fadein_bubble_2 4s ease-in-out;
}

#svg_rect_social{
    animation: fadein_box 1s linear;
}


/* Animation buy local */
#buy_local{
    max-width: 600px;
    height:auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    display: flex;
}

@keyframes flying_hearts{
    0% {
      transform: translateY(0%);
    }
    65% {
        transform: translateY(-65%);
        opacity: 0;
    }
    
    100% {
        transform: translateY(-100%);
        opacity:0;
  }
}

@keyframes pulse_hearts_phone{
	0% {
		animation-timing-function: ease-out;
		transform: scale(1);
	}

	10% {
		animation-timing-function: ease-in;
		transform: scale(0.80);
	}

	30% {
		animation-timing-function: ease-out;
		transform: scale(0.98);
	}

	50% {
		animation-timing-function: ease-in;
		transform: scale(0.75);
	}

	60% {
		animation-timing-function: ease-out;
		transform: scale(1);
	}

    80% {
		animation-timing-function: ease-in;
		transform: scale(0.88);
	}
}

@keyframes pulse_bars {
	0%,
	50%,
	100% {
		opacity: 1;
	}

	25%,
	75% {
		opacity: 0;
	}
}

#gutes_phone{
    animation: pulse_hearts_phone 4s ease 0s infinite normal;
    transform-origin: center;
    transform-box: fill-box;
}
#gutes_phone-2{
    animation: pulse_hearts_phone 4s ease 0s infinite normal;
    transform-origin: center;
    transform-box: fill-box;
}
#gutes_phone-3{
    animation: pulse_hearts_phone 4s ease 0s infinite normal;
    transform-origin: center;
    transform-box: fill-box;
}

#gutes_1{
    animation: flying_hearts 5s linear infinite;
}
#gutes_2{
    animation: flying_hearts 6s linear infinite;
}
#gutes_3{
    animation: flying_hearts 4s linear infinite;
}
#gutes_4{
    animation: flying_hearts 3s linear infinite;
}
#gutes_5{
    animation: flying_hearts 8s linear infinite;
}

#bar_1,#bar_2,#bar_3,#bar_4,#bar_5,#bar_6,#bar_7{
    animation: pulse_bars 4s ease 0s infinite normal forwards;
}

#bar_1-2,#bar_2-2,#bar_3-2,#bar_4-2,#bar_5-2,#bar_6-2,#bar_7-2{
    animation: pulse_bars 5s ease 0s infinite normal forwards;
}

#bar_1-3,#bar_2-3,#bar_3-3,#bar_4-3,#bar_5-3,#bar_6-3,#bar_7-3{
    animation: pulse_bars 5s ease 0s infinite normal forwards;
}

/* Animation Produkte */

#svg_animation_products{
    max-width:800px;
    height:auto;
    width: 100%;
}

@keyframes fadein {
    0% { 
        opacity: 0; 
    }
    100%  { 
        opacity: 1;
     }
}

@keyframes click {
    0% {
        transform: scale(1);
      }
    50% {
          transform: scale(0.8)
      }
      
      100% {
        transform: scale(1);
    }
}
@keyframes open_up {
    0% {
        transform: translateY(-200%);
        opacity:0;
      }
      70%{
          transform: translateY(-200%);
      }
      80% {
        transform: translateY(0%);
          opacity: 1;
      }
      
      100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes mouse_movement{
    0% {
        transform: translateX(0) translateY(0);
      }
      20%{
          transform: translateX(35%) translateY(-5%);
      }
      80% {
        transform: translateX(7%) translateY(10%);
      }
      
      100% {
        transform: translateX(0%) translateY(40%);
    }
}

@keyframes plop{
    0% {
        opacity: 0;
    }
    99%{
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

#svg_browse{
    animation: open_up 5s;
    transform-origin: center;
    transform-box: fill-box;
}
#svg_caption_text{
    animation: fadein 1s;
    animation-delay: 0s;
}

#svg_beschreibung_text{
    animation: fadein 3s;
    animation-delay: 0s;
}

#svg_image_browse{
    animation: click 1s;
    transform-origin: center;
    transform-box: fill-box;
    animation-delay: 3s;
}

#svg_mouse{
    animation: mouse_movement 5s;
    animation-delay: 6s;
}

#svg_tshirt{
    animation: plop 10s;
    transform-origin: center;
    transform-box: fill-box;
}

#svg_success{
    animation: plop 11s;
    transform-origin: center;
    transform-box: fill-box;
}

/* Animation Waving Guy */

#svg_animation_guy{
    max-width:400px;
    height:auto;
    width: 100%;
}

    @keyframes idea {
        0%,
        100% {
            transform: rotate(0deg);
            transform-origin: 50% 50%;
        }
    
        10% {
            transform: rotate(8deg) scale(1.05);
        }
    
        20%,
        40%,
        60% {
            transform: rotate(-10deg) scale(1.05);
        }
    
        30%,
        50%,
        70% {
            transform: rotate(10deg) scale(0.95);
        }
    
        80% {
            transform: rotate(-8deg);
        }
    
        90% {
            transform: rotate(8deg);
        }
    }


    @keyframes arm {
        0%,
        100% {
            transform: rotate(0deg);
        }
    
        10% {
            transform: rotate(4deg);
        }
    
        20%,
        40%,
        60% {
            transform: rotate(-5deg);
        }
    
        30%,
        50%,
        70% {
            transform: rotate(5deg);
        }
    
        80% {
            transform: rotate(-3deg);
        }
    
        90% {
            transform: rotate(4deg);
        }
    }

#svg_birne{
    animation: idea 6s infinite;
    transform-origin: center;
    transform-box: fill-box;

}

#svg_arm_1{
    animation: arm 4s infinite;   
    transform-origin: 100% 100%;
    transform-box: fill-box;
}

@keyframes ballon_float_1{
        0% {
            transform: translatey(0%);
        }
        25% {

            transform: translatey(-5%);
        }

        75% {

            transform: translatey(5%);
        }
        100% {

            transform: translatey(0%);
        }
}

/* Animation Tourism */

#svg_tourismus{
	max-width:400px;
    height:auto;
    width: 100%;
}

@keyframes ballon_float_2{
    0% {
        transform: translatey(0%) translateX(0);
    }
    25% {

        transform: translatey(-1%) translateX(1%);
    }

    75% {

        transform: translatey(1%)translateX(-1%);
    }
    100% {

        transform: translatey(0%);
    }
}

@keyframes ballon_float_3{
    0% {
        transform: translatey(0%) translateX(0);
    }
    25% {

        transform: translatey(-1%) translateX(5%);
    }

    75% {

        transform: translatey(1%)translateX(10%);
    }
    100% {

        transform: translatey(0%);
    }
}

#svg_ballon_groß{
animation: ballon_float_1 10s ease 0s infinite normal;
}

#svg_ballon_klein{
    animation: ballon_float_2 8s ease 0s infinite normal;
}

#svg_ballon_mittel{
    animation: ballon_float_3 12s ease 0s infinite normal;
}

/* Animation Kosten */
 @keyframes rotate_wippe{
    0% {
      transform: rotate(0);
    }
  
    25%{
        transform: rotate(4deg);
    }
    50%{
        transform: rotate(-4deg);
    }
    100% {
      transform: rotate(0);
    }
  }

 @keyframes shadow_left{
    0% {
        transform: scaleX(1);
    }
  
    25%{
        transform: scaleX(0.8);
    }
    50%{
        transform: scaleX(1.2);
    }
    100% {
        transform: scaleX(1);
    }
  }

  @keyframes shadow_right{
    0% {
        transform: scaleX(1);
    }
  
    25%{
        transform: scaleX(1.2);
    }
    50%{
        transform: scaleX(0.8);
    }
    100% {
        transform: scaleX(1);
    }
  }

#svg_wippe_full{
    animation: rotate_wippe 10s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

#svg_schatten_links{
    animation: shadow_left 10s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

#svg_schatten_rechts{
    animation: shadow_right 10s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

/*Animation E-Commerce*/

@keyframes blob_1 {
    0%{
        d: path("M463.61,45.96c8.24,5.16,11.03,18.77,11.75,30.8,.79,11.96-.5,22.35-3.51,32.31-2.94,10.03-7.67,19.7-15.33,28.01-7.59,8.31-18.27,15.26-30.23,17.12-11.96,1.79-25.22-1.5-36.54-8.6-11.32-7.09-20.7-18.05-25-30.73-4.3-12.75-3.51-27.22,3.22-37.18,6.81-9.96,19.49-15.47,30.45-19.77,10.89-4.23,20.06-7.24,31.59-10.46,11.46-3.22,25.29-6.59,33.6-1.5Z");
        transform: translatey(0%) translateX(0%);
    }
    25%{
        d: path("M457.6,52.26c8.31,8.88,12.89,20.06,16.05,31.31,3.15,11.32,4.87,22.64,2.01,32.81-2.87,10.17-10.39,19.2-19.56,27.01-9.17,7.88-19.99,14.54-31.74,15.69-11.68,1.15-24.21-3.22-35.32-10.46-11.18-7.16-20.85-17.19-25.79-29.52-4.94-12.25-5.16-26.79,.93-37.32,6.09-10.53,18.48-17.05,29.66-25.07,11.25-7.95,21.35-17.34,32.38-18.7,11.03-1.36,23.07,5.3,31.38,14.26Z");
        transform: translatey(-2%) translateX(2%);
    }
    50%{
        d: path("M449.14,65.66c7.59,6.81,13.54,14.69,16.19,23.43,2.58,8.74,1.86,18.48-.14,28.66-2.08,10.17-5.37,20.92-12.68,26.51-7.24,5.66-18.48,6.23-28.51,4.66-10.03-1.58-18.98-5.3-28.87-10.1-9.89-4.8-20.7-10.67-23.57-19.13-2.87-8.52,2.29-19.7,5.23-32.45,2.94-12.75,3.73-27.01,11.03-33.88,7.38-6.95,21.2-6.38,32.74-3.3,11.61,3.15,20.92,8.81,28.58,15.62Z");
        
    }
    75%{
        d: path("M448.45,53.48c8.24,7.02,12.54,18.34,16.55,30.02,4.01,11.61,7.74,23.5,4.51,33.1-3.22,9.6-13.32,16.91-23.43,24-10.03,7.16-20.13,14.11-30.3,14.33-10.24,.21-20.63-6.3-27.87-14.33-7.24-8.1-11.32-17.62-15.19-27.72-3.87-10.1-7.45-20.63-6.95-32.24,.57-11.61,5.16-24.29,14.18-31.02,9.1-6.73,22.49-7.67,35.32-6.73,12.75,.93,24.93,3.58,33.17,10.6Z");
        transform: translatey(2%) translateX(-2%);
    }
    100%{
        d: path("M463.61,45.96c8.24,5.16,11.03,18.77,11.75,30.8,.79,11.96-.5,22.35-3.51,32.31-2.94,10.03-7.67,19.7-15.33,28.01-7.59,8.31-18.27,15.26-30.23,17.12-11.96,1.79-25.22-1.5-36.54-8.6-11.32-7.09-20.7-18.05-25-30.73-4.3-12.75-3.51-27.22,3.22-37.18,6.81-9.96,19.49-15.47,30.45-19.77,10.89-4.23,20.06-7.24,31.59-10.46,11.46-3.22,25.29-6.59,33.6-1.5Z");
        transform: translatey(0%) translateX(0%);
    }
}

@keyframes blob_1_movement {
    0%{
        transform: translatey(0%) translateX(0%);
    }
    25%{
        transform: translatey(-2%) translateX(2%);
    }
    50%{
    }
    75%{
        transform: translatey(2%) translateX(-2%);
    }
    100%{
        transform: translatey(0%) translateX(0%);
    }
}

#svg_blob_1 path{
    animation: blob_1 10s linear infinite;
}

#svg_poi{
    animation: blob_1_movement 10s linear infinite;
}

@keyframes blob_2 {
    0%{
        d: path("M128.92,57.36c9.25,9.83,13.5,24.14,13.14,38.08-.29,14.02-5.28,27.59-14.53,39.04-9.32,11.52-22.89,20.84-36.84,21.13-13.87,.22-28.03-8.51-37.72-19.96-9.69-11.52-14.82-25.68-15.92-40.95-1.1-15.26,1.83-31.63,11.52-41.53,9.69-9.83,26.05-13.14,41.39-12.11,15.34,1.03,29.65,6.38,38.97,16.29Z");
        transform: translatey(0%) translateX(0%);
    }
    20%{
        d: path("M133.4,57.17c10.13,11.37,13.58,28.18,12.62,43.95-.95,15.78-6.46,30.6-16.58,39.99-10.05,9.47-24.88,13.58-40.43,14.24-15.48,.73-31.7-1.91-42.19-11.37-10.49-9.47-15.19-25.68-15.34-42.05-.07-16.29,4.4-32.73,14.9-44.18,10.49-11.37,26.93-17.68,43.51-17.83,16.58-.15,33.39,5.87,43.51,17.24Z");
        transform: translatey(4%) translateX(2%);
    }
    55%{
        d: path("M132.07,56.92c9.47,9.91,12.18,26.12,11.81,42.05-.37,15.85-3.82,31.41-13.36,40.8-9.47,9.39-25.02,12.69-39.48,11.67-14.46-1.03-27.88-6.38-38.3-15.85-10.42-9.39-17.76-22.82-18.2-36.69-.44-13.87,6.02-28.18,16.44-38.08,10.42-9.91,24.73-15.41,39.99-16.44,15.34-.95,31.55,2.64,41.09,12.55Z");
    }
    70%{
        d: path("M134.28,53.47c10.42,11.81,14.24,28.77,13.94,45.28-.37,16.58-4.99,32.73-15.34,44.18-10.42,11.37-26.56,18.05-41.97,17.24-15.34-.81-29.94-9.1-41.24-20.55-11.37-11.37-19.45-25.98-19.67-40.73-.15-14.75,7.56-29.65,18.86-41.46,11.37-11.81,26.27-20.55,42.19-21.5,15.92-1.03,32.87,5.72,43.22,17.54Z");
        transform: translatey(-4%) translateX(-2%);
    }
    100%{
        d: path("M128.92,57.36c9.25,9.83,13.5,24.14,13.14,38.08-.29,14.02-5.28,27.59-14.53,39.04-9.32,11.52-22.89,20.84-36.84,21.13-13.87,.22-28.03-8.51-37.72-19.96-9.69-11.52-14.82-25.68-15.92-40.95-1.1-15.26,1.83-31.63,11.52-41.53,9.69-9.83,26.05-13.14,41.39-12.11,15.34,1.03,29.65,6.38,38.97,16.29Z");
        transform: translatey(0%) translateX(0%);
    }
}

@keyframes blob_2_movement {
    0%{
        transform: translatey(0%) translateX(0%);
    }
    20%{
        transform: translatey(4%) translateX(2%);
    }
    55%{
    }
    70%{
        transform: translatey(-4%) translateX(-2%);
    }
    100%{
        transform: translatey(0%) translateX(0%);
    }
}

#svg_blob_2 path{
    animation: blob_2 10s linear infinite;
}

#svg_cash{
    animation: blob_2_movement 10s linear infinite;
}

@keyframes blob_3 {
    0%{
        d: path("M146.03,374.62c10.82,13.87,10.38,36.3,4.97,56.63-5.41,20.33-15.79,38.48-32.55,48.43-16.67,9.86-39.7,11.43-57.68,2.71-17.98-8.73-30.89-27.75-35.25-48.43-4.45-20.59-.35-42.76,12.04-56.98,12.39-14.22,33.07-20.51,54.45-20.94,21.29-.52,43.28,4.8,54.01,18.59Z");
        transform: translatey(0%) translateX(0%);
    }
    20%{
        d: path("M138.26,380.47c12.13,14.49,15.71,36.39,10.47,55.15-5.15,18.85-19.2,34.38-36.65,42.76-17.36,8.38-38.31,9.42-54.36,1.4-16.06-8.03-27.4-25.22-30.63-43.19-3.14-17.89,1.75-36.56,12.74-50.79,10.99-14.31,28.1-24.17,46.95-25.57,18.85-1.4,39.44,5.67,51.48,20.24Z");
        transform: translatey(-5%) translateX(1%);
    }
    50%{
        d: path("M146.03,374.62c10.82,13.87,10.38,36.3,4.97,56.63-5.41,20.33-15.79,38.48-32.55,48.43-16.67,9.86-39.7,11.43-57.68,2.71-17.98-8.73-30.89-27.75-35.25-48.43-4.45-20.59-.35-42.76,12.04-56.98,12.39-14.22,33.07-20.51,54.45-20.94,21.29-.52,43.28,4.8,54.01,18.59Z");
    }
    75%{
        d: path("M138.26,380.47c12.13,14.49,15.71,36.39,10.47,55.15-5.15,18.85-19.2,34.38-36.65,42.76-17.36,8.38-38.31,9.42-54.36,1.4-16.06-8.03-27.4-25.22-30.63-43.19-3.14-17.89,1.75-36.56,12.74-50.79,10.99-14.31,28.1-24.17,46.95-25.57,18.85-1.4,39.44,5.67,51.48,20.24Z");
        transform: translatey(1%) translateX(-3%);
    }
    100%{
        d: path("M146.03,374.62c10.82,13.87,10.38,36.3,4.97,56.63-5.41,20.33-15.79,38.48-32.55,48.43-16.67,9.86-39.7,11.43-57.68,2.71-17.98-8.73-30.89-27.75-35.25-48.43-4.45-20.59-.35-42.76,12.04-56.98,12.39-14.22,33.07-20.51,54.45-20.94,21.29-.52,43.28,4.8,54.01,18.59Z");
        transform: translatey(0%) translateX(0%);
    }
}

@keyframes blob_3_movement {
    0%{
        transform: translatey(0%) translateX(0%);
    }
    20%{
        transform: translatey(-5%) translateX(1%);
    }
    50%{
    }
    75%{
        transform: translatey(1%) translateX(-3%);
    }
    100%{
        transform: translatey(0%) translateX(0%);
    }
}

#svg_blob_3 path{
    animation: blob_3 12s linear infinite;
}

#svg_laden{
    animation: blob_3_movement 12s linear infinite;
}

@keyframes blob_4 {
    0%{
        d: path("M462.23,355.27c13.11,10.63,22.76,25.68,25.68,41.89,2.92,16.21-.97,33.65-10.36,46.05-9.48,12.31-24.44,19.48-40.03,25.42-15.68,5.93-31.97,10.63-44.28,5.58-12.31-4.96-20.64-19.66-29.4-34.45-8.77-14.7-17.89-29.31-17.62-44.37,.27-15.06,9.92-30.38,23.2-41.09,13.2-10.63,30.02-16.47,46.67-16.3,16.65,.27,33.03,6.64,46.14,17.27Z");
        transform: translatey(0%) translateX(0%);
    }
    25%{
        d: path("M446.64,372.41c11.69,7.35,23.03,17.71,29.49,32.15,6.47,14.52,8.06,33.12-.35,44.19-8.5,11.07-27.1,14.52-43.04,16.47-15.94,2.04-29.14,2.57-40.83-1.51-11.69-4.16-21.79-12.93-28.16-23.91-6.47-10.89-9.12-24.09-10.1-40.21-1.06-16.03-.35-35.07,9.39-42.69,9.83-7.62,28.61-3.99,44.1,0,15.5,3.99,27.72,8.24,39.5,15.5Z");
        transform: translatey(2%) translateX(2%);
    }
    50%{
        d: path("M462.62,360.06c10.36,11.25,15.5,26.13,17.27,41,1.77,14.79,.09,29.49-7.09,40.12-7.09,10.63-19.75,17.27-33.48,23.2-13.73,6.02-28.52,11.34-40.12,7.35-11.51-4.07-19.75-17.45-27.9-31.09-8.24-13.64-16.21-27.63-14.08-39.76,2.21-12.13,14.52-22.5,26.83-33.39,12.31-10.89,24.71-22.23,38.61-24.18,13.99-1.95,29.58,5.49,39.94,16.74Z");
    }
    75%{
        d: path("M453.94,352.44c10.89,9.74,17.18,24.53,21.88,41,4.69,16.56,7.88,34.89,1.77,49.86-6.2,14.97-21.79,26.66-38.61,31.26-16.83,4.61-34.89,2.13-48.36-5.85-13.46-8.06-22.32-21.7-28.34-35.34-6.02-13.64-9.21-27.37-7.97-41.27,1.24-13.9,7-27.99,17.36-37.82,10.36-9.92,25.24-15.59,40.47-16.03,15.23-.35,30.91,4.43,41.8,14.17Z");
        transform: translatey(-5%) translateX(-3%);
    }
    100%{
        d: path("M462.23,355.27c13.11,10.63,22.76,25.68,25.68,41.89,2.92,16.21-.97,33.65-10.36,46.05-9.48,12.31-24.44,19.48-40.03,25.42-15.68,5.93-31.97,10.63-44.28,5.58-12.31-4.96-20.64-19.66-29.4-34.45-8.77-14.7-17.89-29.31-17.62-44.37,.27-15.06,9.92-30.38,23.2-41.09,13.2-10.63,30.02-16.47,46.67-16.3,16.65,.27,33.03,6.64,46.14,17.27Z");
        transform: translatey(0%) translateX(0%);
    }
}

@keyframes blob_4_movement {
    0%{
        transform: translatey(0%) translateX(0%);
    }
    25%{
        transform: translatey(1%) translateX(2%);
    }
    50%{
    }
    75%{
        transform: translatey(-6%) translateX(-4%);
    }
    100%{
        transform: translatey(0%) translateX(0%);
    }
}

#svg_blob_4 path{
    animation: blob_4 12s linear infinite;
}

#svg_mega{
    animation: blob_4_movement 12s linear infinite;
}

@keyframes click {
    0% {
        transform: scale(1);
      }
    49% {
        transform: scale(1);
    }
    50% {
          transform: scale(0.8);
      }
    52%{
        transform: scale(1.0);
    }
      
      100% {
        transform: scale(1);
    }
}

@keyframes change_shirt {
    0% {

      }
    49% {
        opacity: 1;
        transform: translateX(0%);
    }
    50% {
        transform: translateX(4%);
          opacity: 0;
      }
    52%{
    }
      99%{
        transform: translateX(-4%);
        opacity: 0;
      }
      100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes change_cart {
    0% {
        opacity: 0;
      }
    50% {
        opacity: 0;
        transform: translateX(-4%);
    }
    51% {
        transform: translateX(0%);
          opacity: 1;
      }
    52%{
        transform: rotate(-2deg)
    }
    54%{
        transform: rotate(2deg)
    }
    55%{
        transform: rotate(0deg)
    }
    99%{
        transform: translateX(0%);
        opacity: 1;
      }
      100% {
        transform: translateX(4%);
        opacity: 0;
    }
}

#svg_buy_now{
    animation: click 10s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

#svg_shirt{
    animation: change_shirt 10s linear infinite;
}
#svg_cart{
    animation: change_cart 10s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

/*Animation Seo-Search*/
@keyframes fade_in_1 {
    0%{
        transform: translateX(0%);
        opacity:1;
    }
    32%{
        transform: translateX(0%);
        opacity:1;
    }
    33%{
        transform: translateX(2%);
        opacity:0;
    }
    66%{
        
    }

    99%{
        transform: translateX(2%);
        opacity:0;
    }
    100%{
        transform: translateX(0%);
        opacity:1;
    }
}

@keyframes fade_in_2 {
    0%{

    }
    32%{
        opacity: 0;
        transform: translateX(2%);
    }
    33%{
        transform: translateX(0%);
        opacity: 1;
    }

    64%{
        transform: translateX(0%);
        opacity: 1;
    }
    65%{
        transform: translateX(2%);
        opacity: 0;
    }
    66%{
        
    }

    99%{

    }
    100%{

    }
}

@keyframes fade_in_3 {
    0%{
    }
    65%{
        opacity: 0;
        transform: translateX(2%);
    }
    66%{
        transform: translateX(0%);
        opacity: 1;
    }
    98%{
        transform: translateX(0%);
        opacity: 1;
    }
    99%{
        transform: translateX(2%);
        opacity: 0;
    }
    100%{

    }
}

#svg_search_schaufenster{ 
    animation: fade_in_1 10s linear infinite;

}

#svg_search_veranstaltung{
    opacity: 0;
    animation: fade_in_2 10s linear infinite;
}

#svg_search_angebot{
    opacity: 0;
    animation: fade_in_3 10s linear infinite;
}

/* Animation Social Activity*/

@keyframes rotate_circle{
    0% {
      transform: rotate(0);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }

@keyframes rotate_single_icons{
    0% {
        transform: rotate(0);
      }
    
      100% {
        transform: rotate(-360deg);
      }
    }

    @keyframes pulse_hearts_social{
        0% {
            animation-timing-function: ease-out;
            transform: scale(1);
        }
    
        10% {
            animation-timing-function: ease-in;
            transform: scale(0.80);
        }
    
        30% {
            animation-timing-function: ease-out;
            transform: scale(0.98);
        }
    
        50% {
            animation-timing-function: ease-in;
            transform: scale(0.75);
        }
    
        60% {
            animation-timing-function: ease-out;
            transform: scale(1);
        }
    
        80% {
            animation-timing-function: ease-in;
            transform: scale(0.88);
        }
    }

#svg_social_icons{
animation: rotate_circle 20s linear infinite;
transform-origin: center;
transform-box: fill-box;
}
#svg_social_facebook, #svg_social_twitter, #svg_social_whatsapp, #svg_social_share, #svg_social_like, #svg_social_like_2, #svg_social_instagram, #svg_social_envelope {
animation: rotate_single_icons 20s linear infinite;
transform-origin: center;
transform-box: fill-box;
}
#svg_social_heart{
animation: pulse_hearts_social 8s ease 0s infinite normal;
transform-origin: center;
transform-box: fill-box;    
}

/*Animation Customizer*/
@keyframes color_change {
0% {
    fill:#B7D9E5;
    stroke:white; 
    stroke-width: 0px;
}
5%{
    fill:#B7D9E5; 
    stroke:white; 
    stroke-width: 5px;
}
50% {
    fill:#000;
    stroke:white;
    stroke-width: 5px;
}
100% {
    fill:#B7D9E5;
    stroke:white; 
    stroke-width: 0px;
}
}

@keyframes scrolling {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(20%);
    }

    100% {
        transform: translateX(0%);
    }
    }

.header_bar_svg, .footer_bar_svg {
    animation: color_change 10s ease infinite;
}

#svg_scroll_bar{
    animation: scrolling 10s ease infinite;
}

/* Animation Gemeinsam*/
@keyframes drehung{
    0%{
        transform: rotate(-180deg);
    }
    20%{
        transform: rotate(0deg);
    }
    30%{
        transform: rotate(1deg);
    }
    60%{
        transform: rotate(-1deg);
    }
    90%{
        transform: rotate(1deg);
    }
    100%{
        transform: rotate(-180deg);
    }
}

#svg_hand_oben{
    animation: drehung 10s ease infinite;
    transform-origin: top center;
    transform-box: fill-box;
}

#svg_hand_rechts_oben{
    animation: drehung 10s ease infinite;
    transform-origin: top right;
    transform-box: fill-box;
}

#svg_hand_rechts_unten{
    animation: drehung 10s ease infinite;
    transform-origin: bottom right;
    transform-box: fill-box;
}

#svg_hand_links_unten{
    animation: drehung 10s ease infinite;
    transform-origin: bottom left;
    transform-box: fill-box;
}

#svg_hand_links_oben{
    animation: drehung 10s ease infinite;
    transform-origin: top left;
    transform-box: fill-box;
}

/* Animation Support*/

@keyframes message_1{
    0%{
        opacity:0;
    }
    9%{
        opacity:0;
    }
    10%{
        opacity:1;
    }
    99%{
        opacity:1;
    }
    100%{
        opacity:0;
    
    }
}

@keyframes message_2{
    0%{
        opacity:0;
    }
    20%{
        opacity:0;
    }
    21%{
        opacity:1;
    }
    99%{
        opacity:1;
    }
    100%{
        opacity:0;
    
    }
}
@keyframes dots_1{
    0%{
        opacity:0;
    }
    22%{
        opacity:1;
    }
    25%{
        opacity:0;
    }
    32%{
        opacity:1;
    }
    35%{
        opacity:0;
    }
    42%{
        opacity:1;
    }
    45%{
        opacity:0;
    }
    52%{
        opacity:1;
    }
    55%{
        opacity:0;
    }
    62%{
        opacity:1;
    }
    65%{
        opacity:0;
    }
    72%{
        opacity:1;
    }
    75%{
        opacity:0;
    }
    82%{
        opacity:1;
    }
    85%{
        opacity:0;
    }
    92%{
        opacity:1;
    }
    95%{
        opacity:0;
    }
    100%{
        opacity:0;
    }

}
@keyframes dots_2{
    0%{
        opacity:0;
    }
    24%{
        opacity:1;
    }
    27%{
        opacity:0;
    }
    34%{
        opacity:1;
    }
    37%{
        opacity:0;
    }
    44%{
        opacity:1;
    }
    47%{
        opacity:0;
    }
    54%{
        opacity:1;
    }
    57%{
        opacity:0;
    }
    64%{
        opacity:1;
    }
    67%{
        opacity:0;
    }
    74%{
        opacity:1;
    }
    77%{
        opacity:0;
    }
    84%{
        opacity:1;
    }
    87%{
        opacity:0;
    }
    94%{
        opacity:1;
    }
    97%{
        opacity:0;
    }
    100%{
        opacity:0;
    }

}
@keyframes dots_3{
    0%{
        opacity:0;
    }
    26%{
        opacity:1;
    }
    29%{
        opacity:0;
    }
    36%{
        opacity:1;
    }
    39%{
        opacity:0;
    }
    46%{
       opacity:1;
    }
    49%{
        opacity:0;
    }
    56%{
        opacity:1;
    }
    59%{
        opacity:0;
    }
    66%{
        opacity:1;
    }
    69%{
        opacity:0;
    }
    76%{
        opacity:1;
    }
    79%{
        opacity:0;
    }
    86%{
        opacity:1;
    }
    89%{
        opacity:0;
    }
    96%{
        opacity:1;
    }
    99%{
        opacity:0;
    }
    100%{
        opacity:0;
    }

}

#svg_message_1{
    animation: message_1 10s linear infinite;
}
#svg_message_2{
    animation: message_2 10s linear infinite;
}
.support_circle_1{
    animation: dots_1 10s linear infinite;
}
.support_circle_2{
    animation: dots_2 10s linear infinite;
}
.support_circle_3{
    animation: dots_3 10s linear infinite;
}