13
edits
Changes
Jump to navigation
Jump to search
Created page with "→CSS placed here will be applied to all skins: .orbit { position: relative; margin-bottom:3rem; } .orbit-container { position: relative; overflow: hidden; list..."
/* CSS placed here will be applied to all skins */
.orbit {
position: relative;
margin-bottom:3rem; }
.orbit-container {
position: relative;
overflow: hidden;
list-style: none;
margin: 0 0 0 0!important; }
.orbit-slide {
width: 100%;
max-height: 100%; }
.orbit-slide.no-motionui.is-active {
top: 0;
left: 0; }
.orbit-figure {
margin: 0; }
.orbit-image {
margin: 0;
width: 100%;
max-width: 100%; }
.orbit-caption {
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
margin-bottom: 0;
color: #fefefe;
background-color: rgba(10, 10, 10, 0.5); }
.orbit-previous, .orbit-next {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 10;
padding: 1rem;
color: #fefefe; }
[data-whatinput='mouse'] .orbit-previous, [data-whatinput='mouse'] .orbit-next {
outline: 0; }
.orbit-previous:hover, .orbit-next:hover, .orbit-previous:active, .orbit-next:active, .orbit-previous:focus, .orbit-next:focus {
background-color: rgba(10, 10, 10, 0.5); }
.orbit-previous {
left: 0; }
.orbit-next {
left: auto;
right: 0; }
.orbit-bullets {
position: relative;
margin-top: 0.8rem;
margin-bottom: 0.8rem;
text-align: center; }
[data-whatinput='mouse'] .orbit-bullets {
outline: 0; }
.orbit-bullets button {
width: 1.2rem;
height: 1.2rem;
margin: 0.1rem;
background-color: #cacaca;
border-radius: 50%; }
.orbit-bullets button:hover {
background-color: #8a8a8a; }
.orbit-bullets button.is-active {
background-color: #8a8a8a; }
.slide-in-down.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-in-down.mui-enter.mui-enter-active {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); }
.slide-in-left.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-in-left.mui-enter.mui-enter-active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0); }
.slide-in-up.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-in-up.mui-enter.mui-enter-active {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); }
.slide-in-right.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-in-right.mui-enter.mui-enter-active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0); }
.slide-out-down.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-out-down.mui-leave.mui-leave-active {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%); }
.slide-out-right.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-out-right.mui-leave.mui-leave-active {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%); }
.slide-out-up.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-out-up.mui-leave.mui-leave-active {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%); }
.slide-out-left.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-out-left.mui-leave.mui-leave-active {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%); }
.fade-in.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
opacity: 0;
transition-property: opacity; }
.fade-in.mui-enter.mui-enter-active {
opacity: 1; }
.fade-out.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
opacity: 1;
transition-property: opacity; }
.fade-out.mui-leave.mui-leave-active {
opacity: 0; }
.hinge-in-from-top.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotateX(-90deg);
transform: perspective(2000px) rotateX(-90deg);
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.hinge-in-from-top.mui-enter.mui-enter-active {
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
opacity: 1; }
.hinge-in-from-right.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotateY(-90deg);
transform: perspective(2000px) rotateY(-90deg);
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.hinge-in-from-right.mui-enter.mui-enter-active {
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
opacity: 1; }
.hinge-in-from-bottom.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotateX(90deg);
transform: perspective(2000px) rotateX(90deg);
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.hinge-in-from-bottom.mui-enter.mui-enter-active {
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
opacity: 1; }
.hinge-in-from-left.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotateY(90deg);
transform: perspective(2000px) rotateY(90deg);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.hinge-in-from-left.mui-enter.mui-enter-active {
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
opacity: 1; }
.hinge-in-from-middle-x.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotateX(-90deg);
transform: perspective(2000px) rotateX(-90deg);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.hinge-in-from-middle-x.mui-enter.mui-enter-active {
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
opacity: 1; }
.hinge-in-from-middle-y.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotateY(-90deg);
transform: perspective(2000px) rotateY(-90deg);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.hinge-in-from-middle-y.mui-enter.mui-enter-active {
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
opacity: 1; }
.hinge-out-from-top.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.hinge-out-from-top.mui-leave.mui-leave-active {
-webkit-transform: perspective(2000px) rotateX(-90deg);
transform: perspective(2000px) rotateX(-90deg);
opacity: 0; }
.hinge-out-from-right.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.hinge-out-from-right.mui-leave.mui-leave-active {
-webkit-transform: perspective(2000px) rotateY(-90deg);
transform: perspective(2000px) rotateY(-90deg);
opacity: 0; }
.hinge-out-from-bottom.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.hinge-out-from-bottom.mui-leave.mui-leave-active {
-webkit-transform: perspective(2000px) rotateX(90deg);
transform: perspective(2000px) rotateX(90deg);
opacity: 0; }
.hinge-out-from-left.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.hinge-out-from-left.mui-leave.mui-leave-active {
-webkit-transform: perspective(2000px) rotateY(90deg);
transform: perspective(2000px) rotateY(90deg);
opacity: 0; }
.hinge-out-from-middle-x.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.hinge-out-from-middle-x.mui-leave.mui-leave-active {
-webkit-transform: perspective(2000px) rotateX(-90deg);
transform: perspective(2000px) rotateX(-90deg);
opacity: 0; }
.hinge-out-from-middle-y.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.hinge-out-from-middle-y.mui-leave.mui-leave-active {
-webkit-transform: perspective(2000px) rotateY(-90deg);
transform: perspective(2000px) rotateY(-90deg);
opacity: 0; }
.scale-in-up.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.scale-in-up.mui-enter.mui-enter-active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1; }
.scale-in-down.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.scale-in-down.mui-enter.mui-enter-active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1; }
.scale-out-up.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.scale-out-up.mui-leave.mui-leave-active {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
opacity: 0; }
.scale-out-down.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.scale-out-down.mui-leave.mui-leave-active {
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
opacity: 0; }
.spin-in.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: rotate(-0.75turn);
-ms-transform: rotate(-0.75turn);
transform: rotate(-0.75turn);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.spin-in.mui-enter.mui-enter-active {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1; }
.spin-out.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.spin-out.mui-leave.mui-leave-active {
-webkit-transform: rotate(0.75turn);
-ms-transform: rotate(0.75turn);
transform: rotate(0.75turn);
opacity: 0; }
.spin-in-ccw.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: rotate(0.75turn);
-ms-transform: rotate(0.75turn);
transform: rotate(0.75turn);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.spin-in-ccw.mui-enter.mui-enter-active {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1; }
.spin-out-ccw.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.spin-out-ccw.mui-leave.mui-leave-active {
-webkit-transform: rotate(-0.75turn);
-ms-transform: rotate(-0.75turn);
transform: rotate(-0.75turn);
opacity: 0; }
.slow {
transition-duration: 750ms !important; }
.fast {
transition-duration: 250ms !important; }
.linear {
transition-timing-function: linear !important; }
.ease {
transition-timing-function: ease !important; }
.ease-in {
transition-timing-function: ease-in !important; }
.ease-out {
transition-timing-function: ease-out !important; }
.ease-in-out {
transition-timing-function: ease-in-out !important; }
.bounce-in {
transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }
.bounce-out {
transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }
.bounce-in-out {
transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }
.short-delay {
transition-delay: 300ms !important; }
.long-delay {
transition-delay: 700ms !important; }
.shake {
-webkit-animation-name: shake-7;
animation-name: shake-7; }
@-webkit-keyframes shake-7 {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
-webkit-transform: translateX(7%);
transform: translateX(7%); }
5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
-webkit-transform: translateX(-7%);
transform: translateX(-7%); } }
@keyframes shake-7 {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
-webkit-transform: translateX(7%);
transform: translateX(7%); }
5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
-webkit-transform: translateX(-7%);
transform: translateX(-7%); } }
.spin-cw {
-webkit-animation-name: spin-cw-1turn;
animation-name: spin-cw-1turn; }
@-webkit-keyframes spin-cw-1turn {
0% {
-webkit-transform: rotate(-1turn);
transform: rotate(-1turn); }
100% {
-webkit-transform: rotate(0);
transform: rotate(0); } }
@keyframes spin-cw-1turn {
0% {
-webkit-transform: rotate(-1turn);
transform: rotate(-1turn); }
100% {
-webkit-transform: rotate(0);
transform: rotate(0); } }
.spin-ccw {
-webkit-animation-name: spin-cw-1turn;
animation-name: spin-cw-1turn; }
@keyframes spin-cw-1turn {
0% {
-webkit-transform: rotate(0);
transform: rotate(0); }
100% {
-webkit-transform: rotate(1turn);
transform: rotate(1turn); } }
.wiggle {
-webkit-animation-name: wiggle-7deg;
animation-name: wiggle-7deg; }
@-webkit-keyframes wiggle-7deg {
40%, 50%, 60% {
-webkit-transform: rotate(7deg);
transform: rotate(7deg); }
35%, 45%, 55%, 65% {
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg); }
0%, 30%, 70%, 100% {
-webkit-transform: rotate(0);
transform: rotate(0); } }
@keyframes wiggle-7deg {
40%, 50%, 60% {
-webkit-transform: rotate(7deg);
transform: rotate(7deg); }
35%, 45%, 55%, 65% {
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg); }
0%, 30%, 70%, 100% {
-webkit-transform: rotate(0);
transform: rotate(0); } }
.shake,
.spin-cw,
.spin-ccw,
.wiggle {
-webkit-animation-duration: 500ms;
animation-duration: 500ms; }
.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; }
.slow {
-webkit-animation-duration: 750ms !important;
animation-duration: 750ms !important; }
.fast {
-webkit-animation-duration: 250ms !important;
animation-duration: 250ms !important; }
.linear {
-webkit-animation-timing-function: linear !important;
animation-timing-function: linear !important; }
.ease {
-webkit-animation-timing-function: ease !important;
animation-timing-function: ease !important; }
.ease-in {
-webkit-animation-timing-function: ease-in !important;
animation-timing-function: ease-in !important; }
.ease-out {
-webkit-animation-timing-function: ease-out !important;
animation-timing-function: ease-out !important; }
.ease-in-out {
-webkit-animation-timing-function: ease-in-out !important;
animation-timing-function: ease-in-out !important; }
.bounce-in {
-webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }
.bounce-out {
-webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }
.bounce-in-out {
-webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }
.short-delay {
-webkit-animation-delay: 300ms !important;
animation-delay: 300ms !important; }
.long-delay {
-webkit-animation-delay: 700ms !important;
animation-delay: 700ms !important; }
.orbit {
position: relative;
margin-bottom:3rem; }
.orbit-container {
position: relative;
overflow: hidden;
list-style: none;
margin: 0 0 0 0!important; }
.orbit-slide {
width: 100%;
max-height: 100%; }
.orbit-slide.no-motionui.is-active {
top: 0;
left: 0; }
.orbit-figure {
margin: 0; }
.orbit-image {
margin: 0;
width: 100%;
max-width: 100%; }
.orbit-caption {
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
margin-bottom: 0;
color: #fefefe;
background-color: rgba(10, 10, 10, 0.5); }
.orbit-previous, .orbit-next {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 10;
padding: 1rem;
color: #fefefe; }
[data-whatinput='mouse'] .orbit-previous, [data-whatinput='mouse'] .orbit-next {
outline: 0; }
.orbit-previous:hover, .orbit-next:hover, .orbit-previous:active, .orbit-next:active, .orbit-previous:focus, .orbit-next:focus {
background-color: rgba(10, 10, 10, 0.5); }
.orbit-previous {
left: 0; }
.orbit-next {
left: auto;
right: 0; }
.orbit-bullets {
position: relative;
margin-top: 0.8rem;
margin-bottom: 0.8rem;
text-align: center; }
[data-whatinput='mouse'] .orbit-bullets {
outline: 0; }
.orbit-bullets button {
width: 1.2rem;
height: 1.2rem;
margin: 0.1rem;
background-color: #cacaca;
border-radius: 50%; }
.orbit-bullets button:hover {
background-color: #8a8a8a; }
.orbit-bullets button.is-active {
background-color: #8a8a8a; }
.slide-in-down.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-in-down.mui-enter.mui-enter-active {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); }
.slide-in-left.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-in-left.mui-enter.mui-enter-active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0); }
.slide-in-up.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-in-up.mui-enter.mui-enter-active {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); }
.slide-in-right.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-in-right.mui-enter.mui-enter-active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0); }
.slide-out-down.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-out-down.mui-leave.mui-leave-active {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%); }
.slide-out-right.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-out-right.mui-leave.mui-leave-active {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%); }
.slide-out-up.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-out-up.mui-leave.mui-leave-active {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%); }
.slide-out-left.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.slide-out-left.mui-leave.mui-leave-active {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%); }
.fade-in.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
opacity: 0;
transition-property: opacity; }
.fade-in.mui-enter.mui-enter-active {
opacity: 1; }
.fade-out.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
opacity: 1;
transition-property: opacity; }
.fade-out.mui-leave.mui-leave-active {
opacity: 0; }
.hinge-in-from-top.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotateX(-90deg);
transform: perspective(2000px) rotateX(-90deg);
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.hinge-in-from-top.mui-enter.mui-enter-active {
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
opacity: 1; }
.hinge-in-from-right.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotateY(-90deg);
transform: perspective(2000px) rotateY(-90deg);
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.hinge-in-from-right.mui-enter.mui-enter-active {
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
opacity: 1; }
.hinge-in-from-bottom.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotateX(90deg);
transform: perspective(2000px) rotateX(90deg);
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.hinge-in-from-bottom.mui-enter.mui-enter-active {
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
opacity: 1; }
.hinge-in-from-left.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotateY(90deg);
transform: perspective(2000px) rotateY(90deg);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.hinge-in-from-left.mui-enter.mui-enter-active {
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
opacity: 1; }
.hinge-in-from-middle-x.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotateX(-90deg);
transform: perspective(2000px) rotateX(-90deg);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.hinge-in-from-middle-x.mui-enter.mui-enter-active {
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
opacity: 1; }
.hinge-in-from-middle-y.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotateY(-90deg);
transform: perspective(2000px) rotateY(-90deg);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.hinge-in-from-middle-y.mui-enter.mui-enter-active {
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
opacity: 1; }
.hinge-out-from-top.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.hinge-out-from-top.mui-leave.mui-leave-active {
-webkit-transform: perspective(2000px) rotateX(-90deg);
transform: perspective(2000px) rotateX(-90deg);
opacity: 0; }
.hinge-out-from-right.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.hinge-out-from-right.mui-leave.mui-leave-active {
-webkit-transform: perspective(2000px) rotateY(-90deg);
transform: perspective(2000px) rotateY(-90deg);
opacity: 0; }
.hinge-out-from-bottom.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.hinge-out-from-bottom.mui-leave.mui-leave-active {
-webkit-transform: perspective(2000px) rotateX(90deg);
transform: perspective(2000px) rotateX(90deg);
opacity: 0; }
.hinge-out-from-left.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.hinge-out-from-left.mui-leave.mui-leave-active {
-webkit-transform: perspective(2000px) rotateY(90deg);
transform: perspective(2000px) rotateY(90deg);
opacity: 0; }
.hinge-out-from-middle-x.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.hinge-out-from-middle-x.mui-leave.mui-leave-active {
-webkit-transform: perspective(2000px) rotateX(-90deg);
transform: perspective(2000px) rotateX(-90deg);
opacity: 0; }
.hinge-out-from-middle-y.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: perspective(2000px) rotate(0deg);
transform: perspective(2000px) rotate(0deg);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.hinge-out-from-middle-y.mui-leave.mui-leave-active {
-webkit-transform: perspective(2000px) rotateY(-90deg);
transform: perspective(2000px) rotateY(-90deg);
opacity: 0; }
.scale-in-up.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.scale-in-up.mui-enter.mui-enter-active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1; }
.scale-in-down.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.scale-in-down.mui-enter.mui-enter-active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1; }
.scale-out-up.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.scale-out-up.mui-leave.mui-leave-active {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
opacity: 0; }
.scale-out-down.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.scale-out-down.mui-leave.mui-leave-active {
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
opacity: 0; }
.spin-in.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: rotate(-0.75turn);
-ms-transform: rotate(-0.75turn);
transform: rotate(-0.75turn);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.spin-in.mui-enter.mui-enter-active {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1; }
.spin-out.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.spin-out.mui-leave.mui-leave-active {
-webkit-transform: rotate(0.75turn);
-ms-transform: rotate(0.75turn);
transform: rotate(0.75turn);
opacity: 0; }
.spin-in-ccw.mui-enter {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: rotate(0.75turn);
-ms-transform: rotate(0.75turn);
transform: rotate(0.75turn);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 0; }
.spin-in-ccw.mui-enter.mui-enter-active {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1; }
.spin-out-ccw.mui-leave {
transition-duration: 500ms;
transition-timing-function: linear;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
opacity: 1; }
.spin-out-ccw.mui-leave.mui-leave-active {
-webkit-transform: rotate(-0.75turn);
-ms-transform: rotate(-0.75turn);
transform: rotate(-0.75turn);
opacity: 0; }
.slow {
transition-duration: 750ms !important; }
.fast {
transition-duration: 250ms !important; }
.linear {
transition-timing-function: linear !important; }
.ease {
transition-timing-function: ease !important; }
.ease-in {
transition-timing-function: ease-in !important; }
.ease-out {
transition-timing-function: ease-out !important; }
.ease-in-out {
transition-timing-function: ease-in-out !important; }
.bounce-in {
transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }
.bounce-out {
transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }
.bounce-in-out {
transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }
.short-delay {
transition-delay: 300ms !important; }
.long-delay {
transition-delay: 700ms !important; }
.shake {
-webkit-animation-name: shake-7;
animation-name: shake-7; }
@-webkit-keyframes shake-7 {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
-webkit-transform: translateX(7%);
transform: translateX(7%); }
5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
-webkit-transform: translateX(-7%);
transform: translateX(-7%); } }
@keyframes shake-7 {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
-webkit-transform: translateX(7%);
transform: translateX(7%); }
5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
-webkit-transform: translateX(-7%);
transform: translateX(-7%); } }
.spin-cw {
-webkit-animation-name: spin-cw-1turn;
animation-name: spin-cw-1turn; }
@-webkit-keyframes spin-cw-1turn {
0% {
-webkit-transform: rotate(-1turn);
transform: rotate(-1turn); }
100% {
-webkit-transform: rotate(0);
transform: rotate(0); } }
@keyframes spin-cw-1turn {
0% {
-webkit-transform: rotate(-1turn);
transform: rotate(-1turn); }
100% {
-webkit-transform: rotate(0);
transform: rotate(0); } }
.spin-ccw {
-webkit-animation-name: spin-cw-1turn;
animation-name: spin-cw-1turn; }
@keyframes spin-cw-1turn {
0% {
-webkit-transform: rotate(0);
transform: rotate(0); }
100% {
-webkit-transform: rotate(1turn);
transform: rotate(1turn); } }
.wiggle {
-webkit-animation-name: wiggle-7deg;
animation-name: wiggle-7deg; }
@-webkit-keyframes wiggle-7deg {
40%, 50%, 60% {
-webkit-transform: rotate(7deg);
transform: rotate(7deg); }
35%, 45%, 55%, 65% {
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg); }
0%, 30%, 70%, 100% {
-webkit-transform: rotate(0);
transform: rotate(0); } }
@keyframes wiggle-7deg {
40%, 50%, 60% {
-webkit-transform: rotate(7deg);
transform: rotate(7deg); }
35%, 45%, 55%, 65% {
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg); }
0%, 30%, 70%, 100% {
-webkit-transform: rotate(0);
transform: rotate(0); } }
.shake,
.spin-cw,
.spin-ccw,
.wiggle {
-webkit-animation-duration: 500ms;
animation-duration: 500ms; }
.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; }
.slow {
-webkit-animation-duration: 750ms !important;
animation-duration: 750ms !important; }
.fast {
-webkit-animation-duration: 250ms !important;
animation-duration: 250ms !important; }
.linear {
-webkit-animation-timing-function: linear !important;
animation-timing-function: linear !important; }
.ease {
-webkit-animation-timing-function: ease !important;
animation-timing-function: ease !important; }
.ease-in {
-webkit-animation-timing-function: ease-in !important;
animation-timing-function: ease-in !important; }
.ease-out {
-webkit-animation-timing-function: ease-out !important;
animation-timing-function: ease-out !important; }
.ease-in-out {
-webkit-animation-timing-function: ease-in-out !important;
animation-timing-function: ease-in-out !important; }
.bounce-in {
-webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }
.bounce-out {
-webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }
.bounce-in-out {
-webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }
.short-delay {
-webkit-animation-delay: 300ms !important;
animation-delay: 300ms !important; }
.long-delay {
-webkit-animation-delay: 700ms !important;
animation-delay: 700ms !important; }