/* TEST ANIMATION SCROLL */
.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}
 
.js-scroll.scrolled {
  opacity: 1;
}

.scrolled.slide-left {
  animation: slide-in-left 1s ease-in-out;
}
 
.scrolled.slide-right {
  animation: slide-in-right 1s ease-in-out;
}
 
@keyframes slide-in-left {
  0% {
    transform: translateX(-50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
 
@keyframes slide-in-right {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


/* Title section*/

.animation-name{
    animation-name: myName;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

@keyframes myName{
   /* from {left:-50%;top:10vh;}
    to {left:40%;top:10vh;} */
	0% {
    transform: translateX(-50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.animation-name2{
  animation-name: myName2;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes myName2{
 /* from {left:-50%;top:10vh;}
  to {left:40%;top:10vh;} */
0% {
  transform: translateX(50%);
  opacity: 0;
}
100% {
  transform: translateX(0);
  opacity: 1;
}
}

.animation-banner{
    animation-name: myBanner;
    animation-duration: 3s;
    animation-fill-mode: forwards;
} 

@keyframes myBanner{
   /* from {left:45%;top:100%;}
    to {left:45%;top:50%;} */
	0% {
    transform: translateY(1000%);
    opacity: 0;
  }
  100% {
    transform: translateY(500%);
    opacity: 1;
  }
}


/* About me section*/
.animation-me{
    animation-name: myPics;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

@keyframes myPics{
	0% {
    transform: translateX(-50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
	
  /*  from {opacity: 0;}
    to {opacity: 1;} */
}

.animation-description{
    animation-name: myDescription;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

@keyframes myDescription{
   /* from {left:100%;opacity: 0;}
    to {left:0%;opacity: 1;} */
	0% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
	
} 


/* Animations left and right*/

.animation-left{
    animation-name: myLeft;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}


@keyframes myLeft{
    from {left:-50%;opacity:0;}
    to {left:5%;opacity: 1;}
}


.animation-right{
    animation-name: myRight;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}


@keyframes myRight{
    from {left:100%;opacity: 0;}
    to {left:0%;opacity: 1;}
}