.transitionIn {
animation: transitionIn 0.75s;
transition-timing-function: ease-out;
}

@keyframes transitionIn {
 from {
 opacity: 0;
transform: translateY(0px);

 }

to {
  opacity: 1;
transform: translateY(0px)
}

}

.transitionIntroText {
  animation: transitionIntroText 0.7s;
  animation-delay: 0s;
  opacity: 0;
  animation-fill-mode: forwards;
  transition-timing-function: ease-in;
}

.introtext{
  animation: transitionIntroText 0.7s;
  animation-delay: 0s;
  line-height: 40px;
  animation-fill-mode: forwards;
  transition-timing-function: ease-in;
}

@keyframes transitionIntroText {
 from {
 opacity: 0;
 transform: translateY(-30px);
 /* transform: scale(99%); */
 line-height: 30px;
 }

to {
  opacity: 1;
transform: translateY(0px);
/* transform: scale(100%); */
line-height: 40px;
}


}

.readmoreButton {
  animation: readmoreButton 0.5s;
      animation-delay: 0.7s;
      opacity: 0;
      animation-fill-mode: forwards;
      transition-timing-function: ease-in;
  }

@keyframes readmoreButton {
 from {
 opacity: 0;

 }

to {
  opacity: 1;

}

}


.sliderIn1 {
animation: sliderIn 0.45s;
/* animation-delay: 0.35s; */
transition-timing-function: ease-out;
}

.sliderIn2 {
animation: sliderIn 0.65s;
/* animation-delay: 0.35s; */
transition-timing-function: ease-out;
}


.sliderIn3 {
animation: sliderIn 0.25s;
/* animation-delay: 0.35s; */
transition-timing-function: ease-out;
}

.sliderIn4 {
animation: sliderIn 0.3s;
/* animation-delay: 0.35s; */
transition-timing-function: ease-out;
}

.sliderIn5 {
animation: sliderInLeft 0.5s;
/* animation-delay: 0.35s; */
transition-timing-function: ease-out;

}

.sliderIn6 {
animation: sliderInRight 0.5s;
/* animation-delay: 0.35s; */
transition-timing-function: ease-out;

}


@keyframes sliderIn {
 from {
 opacity: 0;
transform: translateY(150px);

 }1
to {
  opacity: 1;
transform: translateY(0px)
}

}


@keyframes sliderInLeft {
 from {
 opacity: 0;
transform: translateX(150px);

 }1
to {
  opacity: 1;
transform: translateX(0px)
}

}

@keyframes sliderInRight{
 from {
 opacity: 0;
transform: translateX(-150px);

 }1
to {
  opacity: 1;
transform: translateX(0px)
}

}



.Playground_header,.Portfolio_header {
  animation: Header 0.50s;
  /* animation-delay: 0.35s; */
  transition-timing-function: ease-out;
}

@keyframes Header {
 from {
 opacity: 0;
transform: translateY(-250px);
/* letter-spacing: 10px; */

 }1
to {
  opacity: 1;
transform: translateY(0px);
letter-spacing:0px;
}
}

.toWhite {
  animation: toWhite 0.5s;
  /* animation-delay: 0.35s; */
  transition-timing-function: ease-out;
}
@keyframes toWhite {
 from {
 background-color:#1D1D1D;
  }1 to {
  background-color:white;
}
}


.IntroIn1 {
  animation: intro 10s forwards;
  animation-delay: 1s;
  opacity: 0.0;
  transition-timing-function: ease-out;
}

@keyframes intro {

 0% {
 opacity: 0.0;
transform: translateY(150px);
color: transparent;
 text-shadow: 0 0 200px rgba(0,0,0,1);

}

10% {
opacity: 1;
transform: translateY(0px);
color: black;
 text-shadow: none;

 }
20% {
  opacity: 1;
transform: translateX(0px);
word-spacing: normal;
}

21.5% {
  word-spacing: 15px;

}

24% {
  word-spacing: 5px;
}

30% {
opacity: 1;
transform: translateY(700px);
transform: translateX(700px);
word-spacing: normal;

}

32% {
  word-spacing: 10px;
}
/*
40% {
opacity: 1;
transform: translateY(100px) translateX(500px);
/* word-spacing: 200px; */
/* word-spacing: 0px */
/* word-spacing: normal
} */

/* top */
40% {
opacity: 1;
transform: translateY(-200px);
/* word-spacing: 200px; */
  margin-bottom: 0px!important;
  word-spacing: normal;
}

41% {
opacity: 1;
transform: translateY(-200px);
/* word-spacing: 200px; */
  margin-bottom: 0px!important;
  word-spacing: normal;
}


42% {
  margin-bottom: 20px!important;
  transform: translateY(-220px);
  word-spacing: normal;
}



50% {
opacity: 1;
transform: translateY(0px) translateX(0px);
margin-bottom: 0px;
word-spacing: normal;
}

52% {
  word-spacing: 10px;
}



60% {
opacity: 1;
transform: translateY(0px) translateX(-600px);
word-spacing: normal;
}

65% {
opacity: 1;
transform: translateY(0px) translateX(-600px);
word-spacing: normal;

color: black;
 /* text-shadow: none; */

}

70% {
  word-spacing: 40px;
  /* color: transparent; */
   /* text-shadow: 0 0 3px rgba(0,0,0,1); */
}

85% {
opacity: 1;
transform: translateY(0px) translateX(900px);
word-spacing: normal;
word-spacing: -3px;

color: black;
 /* text-shadow: none; */

}

90% {
opacity: 1;
transform: translateY(0px) translateX(0px) rotate(5deg);

}

95% {
opacity: 1;
transform: translateY(0px) translateX(0px) rotate(5deg);

}

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

}




/* transform: skewY(10deg); */
/* word-wrap: 0px; */



/* pageloader */
/*
.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color:white;
  display:flex;
  justify-content: center;
  align-items: center;
}
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #Fff;
  animation: loader 2s infinite ease;
}
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
} */