* Styles go here */
/*
.category {
}

.category.ng-enter {

  -webkit-transition: 1.2s linear all;
  transition: 1.2s linear all;
  opacity:0;
}

.category.ng-enter-stagger {  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s;
  
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}
.category.ng-enter.ng-enter-active {

  opacity:1;
}
*/
.category {
  display:block;
  font-size:20px;
  background:black;
  color:#fff;
  margin:10px;
  padding:10px;
  text-align:center;
}

.category.ng-enter {
  /* standard transition code */
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
  opacity:0;
}

.category.ng-enter.ng-enter-active {
  /* standard transition styles */
  opacity:1;
}

.box-one {
    margin:10px 0 20px 0;
    padding:10px;
    border:1px solid rgba(0,0,0,0.2);
    background:#f00;
    color:#fff;
    border-radius:4px;

    -webkit-transition:all linear 0.5s;
    transition:all linear 1s;
}

.box-one.ng-hide {
    opacity:0;
    /* transform: scale(0.8); */
}

.box-popup.ng-enter-stagger {
    transition-delay: 0.05s;
    animation-delay: 0.05s;
}

.box-popup.ng-enter {
    -webkit-animation: 0.1s show;
    animation: 0.1s show;
    opacity: 0;
}

.box-popup.ng-enter.ng-enter-active {
    -webkit-animation: 0.5s show;
    animation: 0.5s show;
}

.box-popup.ng-hide-add {
    -webkit-animation: 0.08s hide;
    animation: 0.08s hide;
}

@keyframes hide {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    30% {
        transform: scale(1.02);
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

@-webkit-keyframes hide {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    30% {
        transform: scale(1.02);
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

.box-popup.ng-hide-remove {
    -webkit-animation: 0.05s show;
    animation: 0.05s show;
}

@keyframes show {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    70% {
        transform: scale(1.02);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes show {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    70% {
        transform: scale(1.02);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.box-result.ng-enter-stagger {
    transition-delay: 0.2s;
    animation-delay: 0.2s;
}

.box-result.ng-enter {
    -webkit-animation: 0.2s show;
    animation: 0.2s show;
    opacity: 0;
}

.box-result.ng-enter.ng-enter-active {
    -webkit-animation: 0.5s show;
    animation: 0.5s show;
}

.box-result.ng-hide-add {
    -webkit-animation: 0.5s hide;
    animation: 0.5s hide;
}

.box-result.ng-hide-remove {
    -webkit-animation: 0.3s show;
    animation: 0.3s show;
}