/*
Pour dire en CSS3 ce qui devra être animé :
Angular ajoute dynamiquement des classes CSS.
La transition se fait soit entre ng-enter et ng-enter-active
ou entre ng-leave et ng-leave-active.
*/
 .animate-if.ng-enter, .animate-if.ng-leave {
    -webkit-transition: 1s linear all;
    -moz-transition: 1s linear all;
    -ms-transition: 1s linear all;
    -o-transition: 1s linear all;
    transition: 1s linear all;
}
/* du début de l'entrée */
 .animate-if.ng-enter {
    max-height: 0;
    opacity: 0;
}
/* à la fin de l'entrée */
 .animate-if.ng-enter.ng-enter-active {
    max-height: 999px;
    opacity:1;
}
/* du début de la sortie */
 .animate-if.ng-leave {
    max-height: 999px;
    opacity:1;
}
/* à la fin de la sortie */
 .animate-if.ng-leave.ng-leave-active {
    max-height: 0;
    opacity:1;
}


.animationIf.ng-enter,
.animationIf.ng-leave {
  -webkit-transition: opacity ease-in-out 1s;
  -moz-transition: opacity ease-in-out 1s;
  -ms-transition: opacity ease-in-out 1s;
  -o-transition: opacity ease-in-out 1s;
  transition: opacity ease-in-out 1s;
}
.animationIf.ng-enter,
.animationIf.ng-leave.ng-leave-active {
  opacity: 0;
}
.animationIf.ng-leave,
.animationIf.ng-enter.ng-enter-active {
  opacity: 1;
}


/**
*/
/* when hiding the picture */
.catalogSingleItem.ng-hide-add         { animation:0.5s lightSpeedOut ease; }

/* when showing the picture */
.catalogSingleItem.ng-hide-remove      { animation:0.5s flipInX ease; }

/* ANIMATIONS (FROM ANIMATE.CSS) ======================== */
/* flip in */
@keyframes flipInX {
  0% {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    transform: perspective(400px);
    transform: perspective(400px);
    transform: perspective(400px);
  }
}

/* light speed out */
@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}





.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

.lds-dual-ring.blue:after{
  border: 6px solid #174d80;
  border-color: #174d80 transparent #174d80 transparent;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}