/*HOME PAGE MOVEMENT*/

#home div h1 {
  -webkit-animation: size 5s; /* Chrome, Safari, Opera */
  animation: size 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-iteration-count: 1;
  -ms-animation-fill-mode: forwards;
  -webkit-backface-visibility: hidden;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes size {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

@keyframes size {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

#home div h1:nth-child(1) {
  -webkit-animation: mymove 5s; /* Chrome, Safari, Opera */
  animation: mymove 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-iteration-count: 1;
  -ms-animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
  
  0% {
    transform: translate3d(0, -26vh, 0);
    }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mymove {
  0% {
        transform: translate3d(0, -26vh, 0);
        animation-timing-function: ease-in;
    }

  100% {
    transform: translate3d(0, 0, 0);
    animation-timing-function: ease-in;
  }
}

#home div h1:nth-child(2) {
  -webkit-animation: second_move 5s; /* Chrome, Safari, Opera */
  animation: second_move 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-iteration-count: 1;
  -ms-animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes second_move {
  
  0% {
    transform: translate3d(135%, 0, 0);
    }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes second_move {
  0% {
        transform: translate3d(135%, 0, 0);
        animation-timing-function: ease-in;
    }

  100% {
    transform: translate3d(0, 0, 0);
    animation-timing-function: ease-in;
  }
}

#home div h1:nth-child(3) {
  -webkit-animation: third_move 5s; /* Chrome, Safari, Opera */
  animation: third_move 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-iteration-count: 1;
  -ms-animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes third_move {
  
  0% {
    transform: translate3d(-100%, 0, 0);
    }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes third_move {
  0% {
        transform: translate3d(-100%, 0, 0);
        animation-timing-function: ease-in;
    }

  100% {
    transform: translate3d(0, 0, 0);
    animation-timing-function: ease-in;
  }
}

#home div h1:nth-child(4) {
  -webkit-animation: fourth_move 5s; /* Chrome, Safari, Opera */
  animation: fourth_move 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-iteration-count: 1;
  -ms-animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes fourth_move {
  
  0% {
    transform: translate3d(0, 30vh, 0);
    }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fourth_move {
  0% {
    transform: translate3d(0, 30vh, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media screen and (max-width: 960px) {

  /* Chrome, Safari, Opera */
  @-webkit-keyframes fourth_move {
    from {top: 20vh;}
    to {top: -19.8vh;}
  }

  @keyframes fourth_move {
    from {top: 20vh;}
    to {top: -19.8vh;}
  }
}

@media screen and (max-width: 625px) {

  /* Chrome, Safari, Opera */
  @-webkit-keyframes fourth_move {
    from {top: 30vh;}
    to {top: -13vh;}
  }

  @keyframes fourth_move {
    from {top: 30vh;}
    to {top: -13vh;}
  }
}

/* SHOWING PROJECT DETAILS */
.ng-hide-remove      { 
  animation: 2s scale ease;
  -webkit-animation: 2s scale ease;  
  -ms-animation: 2s scale ease;
}

/* FLIP IN */

@keyframes scale {
  from {
    opacity: 0;
    transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
  }
}