/* Your ANIMATION */





.view {
	
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

}

.image-slider-header {

    background-image: url("../img/slider-header/slider-header-image-0.jpg");
    transition: background-image 1s ease-in-out; /* Sanfter Übergang */
    transition: opacity 1s ease-in-out; /* Sanfter Übergang */
    opacity: 1; /* Standardmäßig sichtbar */
	
	box-shadow: 0px -41px 35px -23px rgba(0,0,0,1) inset;
	-webkit-box-shadow: 0px -41px 35px -23px rgba(0,0,0,1) inset;
	-moz-box-shadow: 0px -41px 35px -23px rgba(0,0,0,1) inset;
}

.image-slider-header.fading {
    opacity: 0; /* Während des Übergangs unsichtbar */
}
.image-slider-header.image0 { background-image: url("../img/slider-header/slider-header-image-0.jpg");}
.image-slider-header.image1 { background-image: url("../img/slider-header/slider-header-image-1.jpg");}
.image-slider-header.image2 { background-image: url("../img/slider-header/slider-header-image-2.jpg");}
.image-slider-header.image3 { background-image: url("../img/slider-header/slider-header-image-3.jpg");}
.image-slider-header.image4 { background-image: url("../img/slider-header/slider-header-image-4.jpg");}
.image-slider-header.image5 { background-image: url("../img/slider-header/slider-header-image-5.jpg");}




#anim-1 {
 animation-name: textwelle-1;
 animation-duration: 3s;
}

@keyframes textwelle-1 {
  0% {
    transform: scale(0.0);
    opacity: 0;
  }  
  70% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;	
  }
}


#anim-2 {
 animation-name: textwelle-2;
 animation-duration: 4s;
}

@keyframes textwelle-2 {
  0% {
    transform: scale(0.0);
    opacity: 0;
  } 
  20% {
    transform: scale(0.0);
    opacity: 0;
  }
  70% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;	
  }
}
#anim-3 {
 animation-name: textwelle-3;
 animation-duration: 6s;
}

@keyframes textwelle-3 {
  0% {
    transform: scale(0.0);
    opacity: 0;
  } 
  20% {
    transform: scale(0.0);
    opacity: 0;
  }
  70% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;	
  }
}

/* SYMBOLS */

.anim-4-icon-1 {animation: textwelle-4-1 5s ease 0s 1 normal forwards;}
@keyframes textwelle-4-1  {
	0% {opacity: 0; transform: translateY(50px);}
	65% {opacity: 0;transform: translateY(50px);}
	100% {opacity: 1;transform: translateY(0);}
    }

.anim-4-icon-2 {animation: textwelle-4-2 5s ease 0s 1 normal forwards;}
@keyframes textwelle-4-2  {
	0% {opacity: 0; transform: translateY(50px);}
	75% {opacity: 0;transform: translateY(50px);}
	100% {opacity: 1;transform: translateY(0);}
    }

.anim-4-icon-3 {animation: textwelle-4-3 5s ease 0s 1 normal forwards;}
@keyframes textwelle-4-3  {
	0% {opacity: 0; transform: translateY(50px);}
	85% {opacity: 0;transform: translateY(50px);}
	100% {opacity: 1;transform: translateY(0);}
    }



/* MAIL CONTACT ICON */
.an-shake-trigger:hover .an-shake-contact{
  animation: shake-stop 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake-stop {
  0%,100% { transform: translate(0px, 0px) rotate(0deg); }
}

.an-shake-contact {
  animation-name: shake2;
  animation-iteration-count: infinite ;
  animation-duration: 4s;
  animation-fill-mode: both;
  }

@keyframes shake2 {
	0%  {transform: scale3d(1, 1, 1);}
    50% {transform: scale3d(1, 1, 1);}
	60% {transform: scale3d(1.25, 0.75, 1);}
	70% {transform: scale3d(0.75, 1.25, 1);}
	80% {transform: scale3d(1.15, 0.85, 1);}
	90% {transform: scale3d(0.95, 1.05, 1);}
	95% {transform: scale3d(1.05, 0.95, 1);}
	100% {transform: scale3d(1, 1, 1);}
    }



@keyframes font-fade-in {
	from {opacity: 0;transform: translateX(50px);}
	to {opacity: 1;transform: translateX(0px); }
	}
@keyframes font-fade-up {
	from {opacity: 0; transform: translateY(50px); }
	to {opacity: 1; transform: translateY(0px); }
	}
@keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
	}

/* in .view verwende!! und die class .animate zum jeweiligen element */
.anim-5-fade-in.in-view {animation: font-fade-in 2s ease;}
.anim-fade-in.in-view {animation: fade-in 2s ease; position: sticky}
.anim-fade-in-slow.in-view {animation: fade-in 3s ease; position: sticky}
.anim-fade-up.in-view {animation: font-fade-up 1.5s ease;}



@keyframes load{
  from {width: 0%;   background-color:rgba(58,58,58,1.00) ;}
  
}

/* SATISTIK AVATAR */

.bar {
  background-color:rgba(58,58,58,1.00) ;
  padding: 2px;
  border-radius: 15px;
  margin-bottom: 5px;
  font-size: 15px;
  color: #FFF;
  font-weight: 700;
}
.bar.in-view::before{
  content:  attr(data-skill);
  background-color: #000;
  display: inline-block;
  padding: 5px 0 5px 10px;
  border-radius: inherit;
  animation: load 2s 0s;

}
.bar.psd::before{
  background-color: rgba(77, 148, 212, 0.37);
  color: #ffffff;
  width: calc(100% - 0px);
}
.bar.indesign::before{
  background-color: rgba(223,31,95,0.37);
  color: #ffffff;
  width: calc(100% - 0px);
}
.bar.illu::before{
  background-color: rgba(255,150,0,0.37);
  color: #ffffff;
  width: calc(85% - 0px);
}
.bar.dreamw::before{
  background-color: rgba(214,103,210,0.35);
  color: #ffffff;
  width: calc(100% - 0px);
}
.bar.php::before{
  background-color: rgba(247,236,26,0.36);
  color: #ffffff;
  width: calc(40% - 0px);
}
.bar.cms::before{
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: calc(100% - 0px);
}
.bar.outdoor::before{
  background-color: rgba(28,159,0,0.35);
  color: #ffffff;
  width: calc(100% - 0px);
}



.bar.front::before{
  background-color: #ffcc33;
}
.bar.back::before{
  background-color: #a6cfe3;
}
.bar.basic::before{
  width: calc(40% - 10px);
}
.bar.intermediate::before{
  width: calc(60% - 10px);
}
.bar.advanced::before{
  width: calc(80% - 10px);
}
.bar.expert::before{
  width: calc(100% - 10px);
}



/* SHAPES */

.custom-shape {
position: relative;
top: 0px;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}

.divider-top-1 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 96px;
}

.divider-top-1 .shape-fill {
    fill: #000000;
}
.custom-shape-2 {
position: relative;
top: 0px;
left: -15px;
width: 115%;
overflow: hidden;
line-height: 0;
}

.divider-top-2 svg {
    position: relative;
    display: block;
    width: calc(127% + 1.3px);
    height: 47px;
    transform: rotateY(180deg);
}

.divider-top-2 .shape-fill {
    fill: #282828;
}


 /* ARROW */

.arrow {
-webkit-animation: bounce 3s infinite;
animation: bounce 3s infinite;
bottom: 4rem;
left: calc(50% - 19px);
position: absolute;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
transition: opacity 250ms ease-in-out;
width: 38px;
font-size: 45px;
color: rgba(255,255,255, 0.8);
}
.arrow--hide {
    opacity:0
}

@-webkit-keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
        -webkit-transform: translateY(0);
        transform:translateY(0)
    }

    40% {
        -webkit-transform: translateY(-15px);
        transform:translateY(-15px)
    }

    60% {
        -webkit-transform: translateY(-5px);
        transform:translateY(-5px)
    }
}

@keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
        -webkit-transform: translateY(0);
        transform:translateY(0)
    }

    40% {
        -webkit-transform: translateY(-15px);
        transform:translateY(-15px)
    }

    60% {
        -webkit-transform: translateY(-5px);
        transform:translateY(-5px)
    }
}


 /* PARALLAX STYLE */

.parallax {
  /* The image used */
  background-image: url("../img/muster-1.jpg");

  /* Full height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
}