/*
* # Semantic UI
* https://github.com/Semantic-Org/Semantic-UI
* http://www.semantic-ui.com/
*
* Copyright 2014 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

/*******************************

Transitions

*******************************/

/*

Some transitions adapted from Animate CSS
https://github.com/daneden/animate.css

*/ .transition {

-webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
-webkit-animation-duration: 500ms;
        animation-duration: 500ms;
-webkit-animation-timing-function: ease;
        animation-timing-function: ease;
-webkit-animation-fill-mode: both;
        animation-fill-mode: both;

}

/*******************************

States

*******************************/

/* Animating */ .animating.transition {

-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-transform: translateZ(0);
        transform: translateZ(0);
visibility: visible !important;

}

/* Loading */ .loading.transition {

position: absolute;
top: -99999px;
left: -99999px;

}

/* Hidden */ .hidden.transition {

display: none;
visibility: hidden;

}

/* Visible */ .visible.transition {

display: block !important;
visibility: visible !important;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-transform: translateZ(0);
        transform: translateZ(0);

}

/* Disabled */ .disabled.transition {

-webkit-animation-play-state: paused;
        animation-play-state: paused;

}

/*******************************

Variations

*******************************/

.looping.transition {

-webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;

}

/*******************************

Types

*******************************/

/*******************************

Animations

*******************************/

/*————–

Emphasis

—————*/

.flash.transition {

-webkit-animation-name: flash;
        animation-name: flash;

} .shake.transition {

-webkit-animation-name: shake;
        animation-name: shake;

} .bounce.transition {

-webkit-animation-name: bounce;
        animation-name: bounce;

} .tada.transition {

-webkit-animation-name: tada;
        animation-name: tada;

}

/* originally authored by Nick Pettit - github.com/nickpettit/glide */ .pulse.transition {

-webkit-animation-name: pulse;
        animation-name: pulse;

}

/* Flash */ @-webkit-keyframes flash {

0%,
50%,
100% {
  opacity: 1;
}
25%,
75% {
  opacity: 0;
}

} @keyframes flash {

0%,
50%,
100% {
  opacity: 1;
}
25%,
75% {
  opacity: 0;
}

}

/* Shake */ @-webkit-keyframes shake {

0%,
100% {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

} @keyframes shake {

0%,
100% {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

}

/* Bounce */ @-webkit-keyframes bounce {

0%,
20%,
50%,
80%,
100% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
40% {
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
}
60% {
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
}

} @keyframes bounce {

0%,
20%,
50%,
80%,
100% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
40% {
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
}
60% {
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
}

}

/* Tada */ @-webkit-keyframes tada {

0% {
  -webkit-transform: scale(1);
          transform: scale(1);
}
10%,
20% {
  -webkit-transform: scale(0.9) rotate(-3deg);
          transform: scale(0.9) rotate(-3deg);
}
30%,
50%,
70%,
90% {
  -webkit-transform: scale(1.1) rotate(3deg);
          transform: scale(1.1) rotate(3deg);
}
40%,
60%,
80% {
  -webkit-transform: scale(1.1) rotate(-3deg);
          transform: scale(1.1) rotate(-3deg);
}
100% {
  -webkit-transform: scale(1) rotate(0);
          transform: scale(1) rotate(0);
}

} @keyframes tada {

0% {
  -webkit-transform: scale(1);
          transform: scale(1);
}
10%,
20% {
  -webkit-transform: scale(0.9) rotate(-3deg);
          transform: scale(0.9) rotate(-3deg);
}
30%,
50%,
70%,
90% {
  -webkit-transform: scale(1.1) rotate(3deg);
          transform: scale(1.1) rotate(3deg);
}
40%,
60%,
80% {
  -webkit-transform: scale(1.1) rotate(-3deg);
          transform: scale(1.1) rotate(-3deg);
}
100% {
  -webkit-transform: scale(1) rotate(0);
          transform: scale(1) rotate(0);
}

}

/* Pulse */ @-webkit-keyframes pulse {

0% {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
50% {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  opacity: 0.7;
}
100% {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

} @keyframes pulse {

0% {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
50% {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  opacity: 0.7;
}
100% {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

}

/*————–

Slide

—————*/

.slide.down.transition.in {

-webkit-animation-name: slideIn;
        animation-name: slideIn;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;

} .slide.down.transition.out {

-webkit-animation-name: slideOut;
        animation-name: slideOut;
-webkit-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
        transform-origin: 50% 0%;

} .slide.up.transition.in {

-webkit-animation-name: slideIn;
        animation-name: slideIn;
-webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;

} .slide.up.transition.out {

-webkit-animation-name: slideOut;
        animation-name: slideOut;
-webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;

} @-webkit-keyframes slideIn {

0% {
  opacity: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
100% {
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

} @keyframes slideIn {

0% {
  opacity: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
100% {
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

} @-webkit-keyframes slideOut {

0% {
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
100% {
  opacity: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

} @keyframes slideOut {

0% {
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
100% {
  opacity: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

}

/*————–

Flips

—————*/

.flip.transition.in, .flip.transition.out {

-webkit-perspective: 2000px;
        perspective: 2000px;

} .horizontal.flip.transition.in {

-webkit-animation-name: horizontalFlipIn;
        animation-name: horizontalFlipIn;

} .horizontal.flip.transition.out {

-webkit-animation-name: horizontalFlipOut;
        animation-name: horizontalFlipOut;

} .vertical.flip.transition.in {

-webkit-animation-name: verticalFlipIn;
        animation-name: verticalFlipIn;

} .vertical.flip.transition.out {

-webkit-animation-name: verticalFlipOut;
        animation-name: verticalFlipOut;

}

/* Horizontal */ @-webkit-keyframes horizontalFlipIn {

0% {
  -webkit-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
  opacity: 0;
}
100% {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  opacity: 1;
}

} @keyframes horizontalFlipIn {

0% {
  -webkit-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
  opacity: 0;
}
100% {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  opacity: 1;
}

}

/* Horizontal */ @-webkit-keyframes horizontalFlipOut {

0% {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  opacity: 1;
}
100% {
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  opacity: 0;
}

} @keyframes horizontalFlipOut {

0% {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  opacity: 1;
}
100% {
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  opacity: 0;
}

}

/* Vertical */ @-webkit-keyframes verticalFlipIn {

0% {
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  opacity: 0;
}
100% {
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  opacity: 1;
}

} @keyframes verticalFlipIn {

0% {
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  opacity: 0;
}
100% {
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  opacity: 1;
}

} @-webkit-keyframes verticalFlipOut {

0% {
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  opacity: 1;
}
100% {
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  opacity: 0;
}

} @keyframes verticalFlipOut {

0% {
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  opacity: 1;
}
100% {
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  opacity: 0;
}

}

/*————–

Fades

—————*/

.fade.transition.in {

-webkit-animation-name: fadeIn;
        animation-name: fadeIn;

} .fade.transition.out {

-webkit-animation-name: fadeOut;
        animation-name: fadeOut;

} .fade.up.transition.in {

-webkit-animation-name: fadeUpIn;
        animation-name: fadeUpIn;

} .fade.up.transition.out {

-webkit-animation-name: fadeUpOut;
        animation-name: fadeUpOut;

} .fade.down.transition.in {

-webkit-animation-name: fadeDownIn;
        animation-name: fadeDownIn;

} .fade.down.transition.out {

-webkit-animation-name: fadeDownOut;
        animation-name: fadeDownOut;

}

/* Fade */ @-webkit-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;
}

} @keyframes fadeOut {

0% {
  opacity: 1;
}
100% {
  opacity: 0;
}

}

/* Fade Up */ @-webkit-keyframes fadeUpIn {

0% {
  opacity: 0;
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
}
100% {
  opacity: 1;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

} @keyframes fadeUpIn {

0% {
  opacity: 0;
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
}
100% {
  opacity: 1;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

} @-webkit-keyframes fadeUpOut {

0% {
  opacity: 1;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
100% {
  opacity: 0;
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
}

} @keyframes fadeUpOut {

0% {
  opacity: 1;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
100% {
  opacity: 0;
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
}

}

/* Fade Down */ @-webkit-keyframes fadeDownIn {

0% {
  opacity: 0;
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
}
100% {
  opacity: 1;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

} @keyframes fadeDownIn {

0% {
  opacity: 0;
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
}
100% {
  opacity: 1;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

} @-webkit-keyframes fadeDownOut {

0% {
  opacity: 1;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
100% {
  opacity: 0;
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
}

} @keyframes fadeDownOut {

0% {
  opacity: 1;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
100% {
  opacity: 0;
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
}

}

/*————–

Scale

—————*/

.scale.transition.in {

-webkit-animation-name: scaleIn;
        animation-name: scaleIn;

} .scale.transition.out {

-webkit-animation-name: scaleOut;
        animation-name: scaleOut;

}

/* Scale */ @-webkit-keyframes scaleIn {

0% {
  opacity: 0;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
100% {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

} @keyframes scaleIn {

0% {
  opacity: 0;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
100% {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

} @-webkit-keyframes scaleOut {

0% {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
100% {
  opacity: 0;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

} @keyframes scaleOut {

0% {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
100% {
  opacity: 0;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

}

/*————–

Drop

—————*/

.drop.transition {

-webkit-transform-origin: top center;
    -ms-transform-origin: top center;
        transform-origin: top center;
-webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
        animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);

} .drop.transition.in {

-webkit-animation-name: dropIn;
        animation-name: dropIn;

} .drop.transition.out {

-webkit-animation-name: dropOut;
        animation-name: dropOut;

}

/* Scale */ @-webkit-keyframes dropIn {

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

} @keyframes dropIn {

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

} @-webkit-keyframes dropOut {

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

} @keyframes dropOut {

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

}

/*————–

Browse

—————*/

.browse.transition.in {

-webkit-animation-name: browseIn;
        animation-name: browseIn;
-webkit-animation-timing-function: ease;
        animation-timing-function: ease;

} .browse.transition.out, .browse.transition.out.left {

-webkit-animation-name: browseOutLeft;
        animation-name: browseOutLeft;
-webkit-animation-timing-function: ease;
        animation-timing-function: ease;

} .browse.transition.out.right {

-webkit-animation-name: browseOutRight;
        animation-name: browseOutRight;
-webkit-animation-timing-function: ease;
        animation-timing-function: ease;

} @-webkit-keyframes browseIn {

0% {
  -webkit-transform: scale(0.8) translateZ(0px);
          transform: scale(0.8) translateZ(0px);
  z-index: -1;
}
10% {
  -webkit-transform: scale(0.8) translateZ(0px);
          transform: scale(0.8) translateZ(0px);
  z-index: -1;
  opacity: 0.7;
}
80% {
  -webkit-transform: scale(1.05) translateZ(0px);
          transform: scale(1.05) translateZ(0px);
  opacity: 1;
  z-index: 999;
}
100% {
  -webkit-transform: scale(1) translateZ(0px);
          transform: scale(1) translateZ(0px);
  z-index: 999;
}

} @keyframes browseIn {

0% {
  -webkit-transform: scale(0.8) translateZ(0px);
          transform: scale(0.8) translateZ(0px);
  z-index: -1;
}
10% {
  -webkit-transform: scale(0.8) translateZ(0px);
          transform: scale(0.8) translateZ(0px);
  z-index: -1;
  opacity: 0.7;
}
80% {
  -webkit-transform: scale(1.05) translateZ(0px);
          transform: scale(1.05) translateZ(0px);
  opacity: 1;
  z-index: 999;
}
100% {
  -webkit-transform: scale(1) translateZ(0px);
          transform: scale(1) translateZ(0px);
  z-index: 999;
}

} @-webkit-keyframes browseOutLeft {

0% {
  z-index: 999;
  -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
          transform: translateX(0%) rotateY(0deg) rotateX(0deg);
}
50% {
  z-index: -1;
  -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
          transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
}
80% {
  opacity: 1;
}
100% {
  z-index: -1;
  -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
          transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  opacity: 0;
}

} @keyframes browseOutLeft {

0% {
  z-index: 999;
  -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
          transform: translateX(0%) rotateY(0deg) rotateX(0deg);
}
50% {
  z-index: -1;
  -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
          transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
}
80% {
  opacity: 1;
}
100% {
  z-index: -1;
  -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
          transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  opacity: 0;
}

} @-webkit-keyframes browseOutRight {

0% {
  z-index: 999;
  -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
          transform: translateX(0%) rotateY(0deg) rotateX(0deg);
}
50% {
  z-index: 1;
  -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
          transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
}
80% {
  opacity: 1;
}
100% {
  z-index: 1;
  -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
          transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  opacity: 0;
}

} @keyframes browseOutRight {

0% {
  z-index: 999;
  -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
          transform: translateX(0%) rotateY(0deg) rotateX(0deg);
}
50% {
  z-index: 1;
  -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
          transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
}
80% {
  opacity: 1;
}
100% {
  z-index: 1;
  -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
          transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  opacity: 0;
}

}

/*******************************

Site Overrides

*******************************/