// (C) Copyright 2020 Hewlett-Packard Enterprise Company, L.P.

$appearance-duration: 0.2s;
$normal-animation-duration: 0.5s;
$changing-animation-delay: 0.8s;
$changing-opacity: 0.2;

@mixin transition-property($properties...) {
  -webkit-transition-property: $properties;
	-moz-transition-property: $properties;
	transition-property: $properties;
}

@mixin transition-duration($durations...) {
  -webkit-transition-duration: $durations;
	-moz-transition-duration: $durations;
	transition-duration: $durations;
}

@mixin transition-timing-function($functions...) {
  -webkit-transition-timing-function: $functions;
	-moz-transition-timing-function: $functions;
	transition-timing-function: $functions;
}

@mixin transition-delay($delays...) {
  -webkit-transition-delay: $delays;
	-moz-transition-delay: $delays;
	transition-delay: $delays;
}

@mixin transition($property, $duration) {
  -webkit-transition: $property $duration;
	-moz-transition: $property $duration;
	transition: $property $duration;
}

@mixin transition-full($property, $duration, $function, $delay) {
  -webkit-transition: $property $duration $function $delay;
	-moz-transition: $property $duration $function $delay;
	transition: $property $duration $function $delay;
}

@mixin transitions($property, $duration, $property2, $duration2) {
  -webkit-transition: $property $duration, $property2 $duration2;
	-moz-transition: $property $duration, $property2 $duration2;
	transition: $property $duration, $property2 $duration2;
}

@mixin transitions3($property, $duration, $property2, $duration2,
  $property3, $duration3) {
  -webkit-transition: $property $duration, $property2 $duration2,
    $property3 $duration3;
	-moz-transition: $property $duration, $property2 $duration2,
    $property3 $duration3;
	transition: $property $duration, $property2 $duration2,
    $property3 $duration3;
}

@mixin transition-none() {
  -webkit-transition: none;
	-moz-transition: none;
	transition: none;
}

@mixin animation($duration, $easing) {
  -webkit-animation: $duration $easing;
  -moz-animation: $duration $easing;
  -ms-animation: $duration $easing;
  -o-animation: $duration $easing;
  animation: $duration $easing;
}

@mixin animation-fill-mode($mode) {
  -webkit-animation-fill-mode: $mode;
	-moz-animation-fill-mode: $mode;
	-ms-animation-fill-mode: $mode;
	-o-animation-fill-mode: $mode;
	animation-fill-mode: $mode;
}

@mixin animation-name($name) {
  -webkit-animation-name: $name;
	-moz-animation-name: $name;
	-ms-animation-name: $name;
	-o-animation-name: $name;
	animation-name: $name;
}

@-webkit-keyframes fadeIn {
	  0% {opacity: 0}
	100% {opacity: 1}
}

@-moz-keyframes fadeIn {
	  0% {opacity: 0}
	100% {opacity: 1}
}

@-ms-keyframes fadeIn {
	  0% {opacity: 0}
	100% {opacity: 1}
}

@-o-keyframes fadeIn {
	  0% {opacity: 0}
	100% {opacity: 1}
}

@keyframes fadeIn {
	  0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeOut {
	  0% {opacity: 1}
	100% {opacity: 0}
}

@-moz-keyframes fadeOut {
	  0% {opacity: 1}
	100% {opacity: 0}
}

@-ms-keyframes fadeOut {
	  0% {opacity: 1}
	100% {opacity: 0}
}

@-o-keyframes fadeOut {
	  0% {opacity: 1}
	100% {opacity: 0}
}

@keyframes fadeOut {
	  0% {opacity: 1}
	100% {opacity: 0}
}

@-webkit-keyframes fadeInLeft {
	  0% {opacity: 0.7; -webkit-transform: translateX(-10px);}
	100% {opacity: 1; -webkit-transform: translateX(0);}
}

@-moz-keyframes fadeInLeft {
  	0% {opacity: 0.7; -moz-transform: translateX(-10px);}
	100% {opacity: 1; -moz-transform: translateX(0);}
}

@-ms-keyframes fadeInLeft {
  	0% {opacity: 0.7; -ms-transform: translateX(-10px);}
	100% {opacity: 1; -ms-transform: translateX(0);}
}

@-o-keyframes fadeInLeft {
  	0% {opacity: 0.7; -o-transform: translateX(-10px);}
	100% {opacity: 1; -o-transform: translateX(0);}
}

@keyframes fadeInLeft {
  	0% {opacity: 0.7; transform: translateX(-10px);}
	100% {opacity: 1; transform: translateX(0);}
}

@-webkit-keyframes fadeInDown {
	  0% {opacity: 0.7; -webkit-transform: translateY(-10px);}
	100% {opacity: 1; -webkit-transform: translateY(0);}
}

@-moz-keyframes fadeInDown {
  	0% {opacity: 0.7; -moz-transform: translateY(-10px);}
	100% {opacity: 1; -moz-transform: translateY(0);}
}

@-ms-keyframes fadeInDown {
  	0% {opacity: 0.7; -ms-transform: translateY(-10px);}
	100% {opacity: 1; -ms-transform: translateY(0);}
}

@-o-keyframes fadeInDown {
  	0% {opacity: 0.7; -o-transform: translateY(-10px);}
	100% {opacity: 1; -o-transform: translateY(0);}
}


@-webkit-keyframes fadeInDown2 {
    0% {opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; top: -20px;}
    80% {opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; top: -20px;}
    100% {opacity: 1; max-height: 200px; padding-top: 13px; padding-bottom: 13px; top: 0px;}
}

@-moz-keyframes fadeInDown2 {
    0% {opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; top: -20px;}
    80% {opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; top: -20px;}
    100% {opacity: 1; max-height: 200px; padding-top: 13px; padding-bottom: 13px; top: 0px;}
}

@-ms-keyframes fadeInDown2 {
    0% {opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; top: -20px;}
    80% {opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; top: -20px;}
    100% {opacity: 1; max-height: 200px; padding-top: 13px; padding-bottom: 13px; top: 0px;}
}

@-o-keyframes fadeInDown2 {
    0% {opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; top: -20px;}
    80% {opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; top: -20px;}
    100% {opacity: 1; max-height: 200px; padding-top: 13px; padding-bottom: 13px; top: 0px;}
}

@-webkit-keyframes unFadeInDown2 {
    0% {opacity: 1; max-height: 200px; padding-top: 13px; padding-bottom: 13px; top: 0px;}
    100% {opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; top: -20px;}
}

@-moz-keyframes unFadeInDown2 {
    0% {opacity: 1; max-height: 200px; padding-top: 13px; padding-bottom: 13px; top: 0px;}
    100% {opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; top: -20px;}
}

@-ms-keyframes unFadeInDown2 {
    0% {opacity: 1; max-height: 200px; padding-top: 13px; padding-bottom: 13px; top: 0px;}
    100% {opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; top: -20px;}
}

@-o-keyframes unFadeInDown2 {
    0% {opacity: 1; max-height: 200px; padding-top: 13px; padding-bottom: 13px; top: 0px;}
    100% {opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; top: -20px;}
}
@-webkit-keyframes fadeInDown3 {
      0% {opacity: 0; -webkit-transform: translateY(-3px);}
     30% {opacity: 0; -webkit-transform: translateY(-3px);}
    100% {opacity: 1; -webkit-transform: translateY(0);}
}

@-moz-keyframes fadeInDown3 {
      0% {opacity: 0; -moz-transform: translateY(-3px);}
     30% {opacity: 0; -moz-transform: translateY(-3px);}
    100% {opacity: 1; -moz-transform: translateY(0);}
}

@-ms-keyframes fadeInDown3 {
      0% {opacity: 0; -moz-transform: translateY(-3px);}
     30% {opacity: 0; -moz-transform: translateY(-3px);}
    100% {opacity: 1; -moz-transform: translateY(0);}
}

@-ms-keyframes fadeInDown3 {
      0% {opacity: 0; -moz-transform: translateY(-3px);}
     30% {opacity: 0; -moz-transform: translateY(-3px);}
    100% {opacity: 1; -moz-transform: translateY(0);}
}

@keyframes fadeInUp {
  	0% {opacity: 0.7; transform: translateY(10px);}
	100% {opacity: 1; transform: translateY(0);}
}

@-webkit-keyframes fadeInUp {
	  0% {opacity: 0.7; -webkit-transform: translateY(5px);}
	100% {opacity: 1; -webkit-transform: translateY(0);}
}

@-moz-keyframes fadeInUp {
  	0% {opacity: 0.7; -moz-transform: translateY(5px);}
	100% {opacity: 1; -moz-transform: translateY(0);}
}

@-ms-keyframes fadeInUp {
  	0% {opacity: 0.7; -ms-transform: translateY(5px);}
	100% {opacity: 1; -ms-transform: translateY(0);}
}

@-o-keyframes fadeInUp {
  	0% {opacity: 0.7; -o-transform: translateY(5px);}
	100% {opacity: 1; -o-transform: translateY(0);}
}

@keyframes fadeInUp {
  	0% {opacity: 0.7; transform: translateY(5px);}
	100% {opacity: 1; transform: translateY(0);}
}