There are no notes for this item.
<p>
Compiled CSS file ready to be downloaded
</p>
/*------------------------------------* #BUILD
\*------------------------------------*/
/*------------------------------------* #GLOBAL
\*------------------------------------*/
/*------------------------------------* #COLORS
\*------------------------------------*/
/*------------------------------------* #FONTS
\*------------------------------------*/
@font-face {
font-family: "Cisco Sans Bold";
font-style: normal;
font-weight: 400;
src: url("../../assets/fonts/CiscoSansBold.woff2") format("woff2"), url("../../assets/fonts/CiscoSansBold.woff") format("woff"); }
@font-face {
font-family: "Cisco Sans Bold Oblique";
font-style: normal;
font-weight: 400;
src: url("../../assets/fonts/CiscoSansBoldOblique.woff2") format("woff2"), url("../../assets/fonts/CiscoSansBoldOblique.woff") format("woff"); }
@font-face {
font-family: "Cisco Sans Extra Light";
font-style: normal;
font-weight: 400;
src: url("../../assets/fonts/CiscoSansExtraLight.woff2") format("woff2"), url("../../assets/fonts/CiscoSansExtraLight.woff") format("woff"); }
@font-face {
font-family: "Cisco Sans Extra Light Oblique";
font-style: normal;
font-weight: 400;
src: url("../../assets/fonts/CiscoSansExtraLightOblique.woff2") format("woff2"), url("../../assets/fonts/CiscoSansExtraLightOblique.woff") format("woff"); }
@font-face {
font-family: "Cisco Sans Heavy";
font-style: normal;
font-weight: 400;
src: url("../../assets/fonts/CiscoSansHeavy.woff2") format("woff2"), url("../../assets/fonts/CiscoSansHeavy.woff") format("woff"); }
@font-face {
font-family: "Cisco Sans Heavy Oblique";
font-style: normal;
font-weight: 400;
src: url("../../assets/fonts/CiscoSansHeavyOblique.woff2") format("woff2"), url("../../assets/fonts/CiscoSansHeavyOblique.woff") format("woff"); }
@font-face {
font-family: "Cisco Sans Light";
font-style: normal;
font-weight: 400;
src: url("../../assets/fonts/CiscoSansLight.woff2") format("woff2"), url("../../assets/fonts/CiscoSansLight.woff") format("woff"); }
@font-face {
font-family: "Cisco Sans Light Oblique";
font-style: normal;
font-weight: 400;
src: url("../../assets/fonts/CiscoSansLightOblique.woff2") format("woff2"), url("../../assets/fonts/CiscoSansLightOblique.woff") format("woff"); }
@font-face {
font-family: "Cisco Sans Regular";
font-style: normal;
font-weight: 400;
src: url("../../assets/fonts/CiscoSansRegular.woff2") format("woff2"), url("../../assets/fonts/CiscoSansRegular.woff") format("woff"); }
@font-face {
font-family: "Cisco Sans Regular Oblique";
font-style: normal;
font-weight: 400;
src: url("../../assets/fonts/CiscoSansRegularOblique.woff2") format("woff2"), url("../../assets/fonts/CiscoSansRegularOblique.woff") format("woff"); }
@font-face {
font-family: "Cisco Sans Thin";
font-style: normal;
font-weight: 400;
src: url("../../assets/fonts/CiscoSansThin.woff2") format("woff2"), url("../../assets/fonts/CiscoSansThin.woff") format("woff"); }
@font-face {
font-family: "Cisco Sans Thin Oblique";
font-style: normal;
font-weight: 400;
src: url("../../assets/fonts/CiscoSansThinOblique.woff2") format("woff2"), url("../../assets/fonts/CiscoSansThinOblique.woff") format("woff"); }
/*------------------------------------* #PAGE
\*------------------------------------*/
html,
:before,
:after {
color: #58585b;
font-family: "Cisco Sans Thin", Helvetica, Arial, sans-serif;
font-size: 0.875em; }
h1, h2, h3, h4, h5, h6,
p {
margin: 0; }
/* Apply a natural box layout model to all elements, but allowing components to change. From: https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
box-sizing: border-box; }
*,
*:before,
*:after {
box-sizing: inherit; }
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden; }
/*!
* animate.css -http://daneden.me/animate
* Version - 3.5.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2016 Daniel Eden
*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; }
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s; }
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s; }
@-webkit-keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0); }
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); }
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0); } }
@keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0); }
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); }
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0); } }
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom; }
@-webkit-keyframes flash {
from, 50%, to {
opacity: 1; }
25%, 75% {
opacity: 0; } }
@keyframes flash {
from, 50%, to {
opacity: 1; }
25%, 75% {
opacity: 0; } }
.flash {
-webkit-animation-name: flash;
animation-name: flash; }
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05); }
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05); }
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse; }
@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1); }
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1); }
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1); }
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1); }
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1); }
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1); }
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1); }
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1); }
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1); }
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1); }
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand; }
@-webkit-keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0); }
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0); } }
@keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0); }
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0); } }
.shake {
-webkit-animation-name: shake;
animation-name: shake; }
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0); }
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg); }
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg); }
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg); }
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg); }
50% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0); }
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg); }
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg); }
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg); }
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg); }
50% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
.headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake; }
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg); }
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg); }
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg); }
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg); }
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg); }
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg); }
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg); }
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg); }
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); } }
.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing; }
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
10%, 20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
10%, 20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
.tada {
-webkit-animation-name: tada;
animation-name: tada; }
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
from {
-webkit-transform: none;
transform: none; }
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
to {
-webkit-transform: none;
transform: none; } }
@keyframes wobble {
from {
-webkit-transform: none;
transform: none; }
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
to {
-webkit-transform: none;
transform: none; } }
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble; }
@-webkit-keyframes jello {
from, 11.1%, to {
-webkit-transform: none;
transform: none; }
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg); }
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg); }
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg); }
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg); }
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg); }
77.7% {
-webkit-transform: skewX(0.39062deg) skewY(0.39062deg);
transform: skewX(0.39062deg) skewY(0.39062deg); }
88.8% {
-webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
transform: skewX(-0.19531deg) skewY(-0.19531deg); } }
@keyframes jello {
from, 11.1%, to {
-webkit-transform: none;
transform: none; }
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg); }
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg); }
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg); }
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg); }
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg); }
77.7% {
-webkit-transform: skewX(0.39062deg) skewY(0.39062deg);
transform: skewX(0.39062deg) skewY(0.39062deg); }
88.8% {
-webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
transform: skewX(-0.19531deg) skewY(-0.19531deg); } }
.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center; }
@-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1); }
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9); }
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03); }
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97); }
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1); }
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9); }
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03); }
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97); }
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn; }
@-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0); }
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0); }
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0); }
to {
-webkit-transform: none;
transform: none; } }
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0); }
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0); }
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0); }
to {
-webkit-transform: none;
transform: none; } }
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown; }
@-webkit-keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0); }
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0); }
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0); }
to {
-webkit-transform: none;
transform: none; } }
@keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0); }
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0); }
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0); }
to {
-webkit-transform: none;
transform: none; } }
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft; }
@-webkit-keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0); }
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0); }
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0); }
to {
-webkit-transform: none;
transform: none; } }
@keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0); }
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0); }
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0); }
to {
-webkit-transform: none;
transform: none; } }
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight; }
@-webkit-keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0); }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0); }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp; }
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9); }
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1); }
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); } }
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9); }
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1); }
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); } }
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut; }
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); } }
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); } }
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown; }
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); } }
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); } }
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft; }
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); } }
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); } }
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight; }
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0); }
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); } }
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0); }
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); } }
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp; }
@-webkit-keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; } }
@keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; } }
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn; }
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown; }
@-webkit-keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig; }
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft; }
@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig; }
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight; }
@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig; }
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp; }
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig; }
@-webkit-keyframes fadeOut {
from {
opacity: 1; }
to {
opacity: 0; } }
@keyframes fadeOut {
from {
opacity: 1; }
to {
opacity: 0; } }
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut; }
@-webkit-keyframes fadeOutDown {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
@keyframes fadeOutDown {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown; }
@-webkit-keyframes fadeOutDownBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); } }
@keyframes fadeOutDownBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); } }
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig; }
@-webkit-keyframes fadeOutLeft {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); } }
@keyframes fadeOutLeft {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); } }
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft; }
@-webkit-keyframes fadeOutLeftBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); } }
@keyframes fadeOutLeftBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); } }
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig; }
@-webkit-keyframes fadeOutRight {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); } }
@keyframes fadeOutRight {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); } }
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight; }
@-webkit-keyframes fadeOutRightBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); } }
@keyframes fadeOutRightBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); } }
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig; }
@-webkit-keyframes fadeOutUp {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); } }
@keyframes fadeOutUp {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); } }
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp; }
@-webkit-keyframes fadeOutUpBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); } }
@keyframes fadeOutUpBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); } }
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig; }
@-webkit-keyframes flip {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; } }
@keyframes flip {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; } }
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip; }
@-webkit-keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX; }
@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY; }
@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px); }
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1; }
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0; } }
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px); }
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1; }
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0; } }
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important; }
@-webkit-keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px); }
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1; }
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0; } }
@keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px); }
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1; }
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0; } }
.flipOutY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY; }
@-webkit-keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0; }
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1; }
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1; }
to {
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0; }
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1; }
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1; }
to {
-webkit-transform: none;
transform: none;
opacity: 1; } }
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
@-webkit-keyframes lightSpeedOut {
from {
opacity: 1; }
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0; } }
@keyframes lightSpeedOut {
from {
opacity: 1; }
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0; } }
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
@-webkit-keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0; }
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0; }
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn; }
@-webkit-keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft; }
@-webkit-keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight; }
@-webkit-keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft; }
@-webkit-keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight; }
@-webkit-keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1; }
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0; } }
@keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1; }
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0; } }
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut; }
@-webkit-keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; } }
@keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; } }
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft; }
@-webkit-keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; } }
@keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; } }
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight; }
@-webkit-keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; } }
@keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; } }
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft; }
@-webkit-keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0; } }
@keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0; } }
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight; }
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1; }
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0; } }
@keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1; }
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0; } }
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge; }
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn; }
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
@keyframes rollOut {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut; }
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
50% {
opacity: 1; } }
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
50% {
opacity: 1; } }
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn; }
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown; }
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft; }
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight; }
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp; }
@-webkit-keyframes zoomOut {
from {
opacity: 1; }
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
to {
opacity: 0; } }
@keyframes zoomOut {
from {
opacity: 1; }
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
to {
opacity: 0; } }
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut; }
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown; }
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center; } }
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center; } }
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft; }
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center; } }
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center; } }
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight; }
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp; }
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown; }
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft; }
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight; }
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp; }
@-webkit-keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
@keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown; }
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); } }
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); } }
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft; }
@-webkit-keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); } }
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); } }
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight; }
@-webkit-keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); } }
@keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); } }
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp; }
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.spin {
-webkit-animation-name: spin;
animation-name: spin;
-webkit-animation-timing-function: linear;
animation-timing-function: linear; }
header,
.header {
font-size: 4.286em; }
h1,
.alpha {
font-size: 1.5em;
font-family: "Cisco Sans Regular", Helvetica, Arial, sans-serif; }
h2,
.beta {
font-size: 1.5em; }
h3,
.gamma {
font-size: 1.286em;
font-family: "Cisco Sans Regular", Helvetica, Arial, sans-serif; }
h4,
.delta {
font-size: 1.143em;
font-family: "Cisco Sans Regular", Helvetica, Arial, sans-serif; }
h5,
.epsilon {
font-size: 1.143em; }
.body-small {
font-size: 0.857em;
font-family: "Cisco Sans Regular";
color: #000; }
.print-fine {
font-size: 0.714em;
font-family: "Cisco Sans Regular";
color: #000; }
/*------------------------------------* #ICONS
\*------------------------------------*/
.icon__view-list {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-list%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-list%22%20fill%3D%22%23626469%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C3%20L20%2C3%20L20%2C5%20L0%2C5%20L0%2C3%20Z%20M0%2C7%20L20%2C7%20L20%2C9%20L0%2C9%20L0%2C7%20Z%20M0%2C11%20L20%2C11%20L20%2C13%20L0%2C13%20L0%2C11%20Z%20M0%2C15%20L20%2C15%20L20%2C17%20L0%2C17%20L0%2C15%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
background-repeat: no-repeat;
display: block;
background-size: 16px 16px;
width: 16px;
height: 16px; }
.icon__view-tile {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-tile%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-tile%22%20fill%3D%22%23626469%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C0%20L9%2C0%20L9%2C9%20L0%2C9%20L0%2C0%20Z%20M2%2C2%20L7%2C2%20L7%2C7%20L2%2C7%20L2%2C2%20Z%20M0%2C11%20L9%2C11%20L9%2C20%20L0%2C20%20L0%2C11%20Z%20M2%2C13%20L7%2C13%20L7%2C18%20L2%2C18%20L2%2C13%20Z%20M11%2C0%20L20%2C0%20L20%2C9%20L11%2C9%20L11%2C0%20Z%20M13%2C2%20L18%2C2%20L18%2C7%20L13%2C7%20L13%2C2%20Z%20M11%2C11%20L20%2C11%20L20%2C20%20L11%2C20%20L11%2C11%20Z%20M13%2C13%20L18%2C13%20L18%2C18%20L13%2C18%20L13%2C13%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
background-repeat: no-repeat;
display: block;
background-size: 16px 16px;
width: 16px;
height: 16px; }
.icon__view-column {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2020%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-column%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%20fill%3D%22%23626469%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%226%202%208%202%208%2014%206%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%2212%202%2014%202%2014%2014%2012%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-2%22%20x%3D%220%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-3%22%20x%3D%2218%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-4%22%20x%3D%220%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
background-repeat: no-repeat;
display: block;
background-size: 16px 16px;
width: 16px;
height: 16px; }
.icon__info {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2212px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Einformation-solid%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22information-solid%22%20fill-rule%3D%22nonzero%22%20fill%3D%22%23626469%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22information-solid%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M5%2C2%20C5%2C1.44771525%205.44386482%2C1%206%2C1%20C6.55228475%2C1%207%2C1.44386482%207%2C2%20C7%2C2.55228475%206.55613518%2C3%206%2C3%20C5.44771525%2C3%205%2C2.55613518%205%2C2%20Z%20M5%2C5.00292933%20C5%2C4.44902676%205.44386482%2C4%206%2C4%20C6.55228475%2C4%207%2C4.43788135%207%2C5.00292933%20L7%2C9.99707067%20C7%2C10.5509732%206.55613518%2C11%206%2C11%20C5.44771525%2C11%205%2C10.5621186%205%2C9.99707067%20L5%2C5.00292933%20Z%20M1.75735932%2C10.2426407%20C4.10050507%2C12.5857864%207.89949495%2C12.5857864%2010.2426407%2C10.2426407%20C12.5857864%2C7.89949495%2012.5857864%2C4.10050507%2010.2426407%2C1.75735932%20C7.89949495%2C-0.585786439%204.10050507%2C-0.585786439%201.75735932%2C1.75735932%20C-0.585786439%2C4.10050507%20-0.585786439%2C7.89949495%201.75735932%2C10.2426407%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
background-repeat: no-repeat;
display: block;
background-size: 12px 12px;
width: 12px;
height: 12px; }
/*------------------------------------* #BUTTONS
\*------------------------------------*/
.button {
font-size: inherit;
border: none;
border-radius: 2px;
color: #fff;
padding: 2px 13px;
cursor: pointer;
min-width: 75px;
font-family: "Cisco Sans Regular", Helvetica, Arial, sans-serif; }
.button:hover {
border-color: #fff; }
.button:focus, .button:active {
border-color: transparent; }
.button:disabled {
opacity: .5;
cursor: default;
pointer-events: none;
border: 1px solid transparent; }
.button--default {
background-color: #626469;
box-shadow: 0px 0px 0px 1px #626469;
border: 1px solid #626469; }
.button--default:focus, .button--default:active {
box-shadow: 0px 0px 0px 1px #000; }
.button--primary {
background-color: #1493e6;
box-shadow: 0px 0px 0px 1px #1493e6;
border: 1px solid #1493e6; }
.button--primary:focus, .button--primary:active {
box-shadow: 0px 0px 0px 1px #626469; }
/*------------------------------------* #SPLIT BUTTON
\*------------------------------------*/
/* split--radio -> Split Button
split--multi -> Segmented Button */
.split__button {
border: 1px solid #626469;
background: none;
outline: none;
display: inline;
float: left;
margin: 0;
padding: 2px 6px;
cursor: pointer; }
.split__button--first {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-right-width: 0; }
.split__button--last {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-left-width: 0; }
.split__button--selected {
background-color: #1493e6;
border-color: transparent; }
.split--multi .split__button--selected:active {
background-color: transparent;
border-color: #626469; }
.split__button--selected.split__button--first {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px; }
.split__button--selected.split__button--last {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px; }
.split--radio:hover .split__button:not(.split__button--selected) .icon__view-list,
.split--multi .split__button:hover .icon__view-list,
.split--multi .split__button--selected:hover .icon__view-list {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-list%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-list%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C3%20L20%2C3%20L20%2C5%20L0%2C5%20L0%2C3%20Z%20M0%2C7%20L20%2C7%20L20%2C9%20L0%2C9%20L0%2C7%20Z%20M0%2C11%20L20%2C11%20L20%2C13%20L0%2C13%20L0%2C11%20Z%20M0%2C15%20L20%2C15%20L20%2C17%20L0%2C17%20L0%2C15%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E"); }
.split--radio:active .split__button:not(.split__button--selected) .icon__view-list,
.split--multi .split__button:active .icon__view-list,
.split--multi .split__button--selected:active .icon__view-list {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-list%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-list%22%20fill%3D%22%231493E6%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C3%20L20%2C3%20L20%2C5%20L0%2C5%20L0%2C3%20Z%20M0%2C7%20L20%2C7%20L20%2C9%20L0%2C9%20L0%2C7%20Z%20M0%2C11%20L20%2C11%20L20%2C13%20L0%2C13%20L0%2C11%20Z%20M0%2C15%20L20%2C15%20L20%2C17%20L0%2C17%20L0%2C15%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E"); }
.split__button--selected .icon__view-list,
.split--radio .split__button--selected:hover .icon__view-list,
.split--radio .split__button--selected:active .icon__view-list {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-list%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-list%22%20fill%3D%22%23FFFFFF%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C3%20L20%2C3%20L20%2C5%20L0%2C5%20L0%2C3%20Z%20M0%2C7%20L20%2C7%20L20%2C9%20L0%2C9%20L0%2C7%20Z%20M0%2C11%20L20%2C11%20L20%2C13%20L0%2C13%20L0%2C11%20Z%20M0%2C15%20L20%2C15%20L20%2C17%20L0%2C17%20L0%2C15%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E"); }
.split--radio:hover .split__button:not(.split__button--selected) .icon__view-tile,
.split--multi .split__button:hover .icon__view-tile,
.split--multi .split__button--selected:hover .icon__view-tile {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-tile%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-tile%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C0%20L9%2C0%20L9%2C9%20L0%2C9%20L0%2C0%20Z%20M2%2C2%20L7%2C2%20L7%2C7%20L2%2C7%20L2%2C2%20Z%20M0%2C11%20L9%2C11%20L9%2C20%20L0%2C20%20L0%2C11%20Z%20M2%2C13%20L7%2C13%20L7%2C18%20L2%2C18%20L2%2C13%20Z%20M11%2C0%20L20%2C0%20L20%2C9%20L11%2C9%20L11%2C0%20Z%20M13%2C2%20L18%2C2%20L18%2C7%20L13%2C7%20L13%2C2%20Z%20M11%2C11%20L20%2C11%20L20%2C20%20L11%2C20%20L11%2C11%20Z%20M13%2C13%20L18%2C13%20L18%2C18%20L13%2C18%20L13%2C13%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E"); }
.split--radio:active .split__button:not(.split__button--selected) .icon__view-tile,
.split--multi .split__button:active .icon__view-tile,
.split--multi .split__button--selected:active .icon__view-tile {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-tile%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-tile%22%20fill%3D%22%231493E6%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C0%20L9%2C0%20L9%2C9%20L0%2C9%20L0%2C0%20Z%20M2%2C2%20L7%2C2%20L7%2C7%20L2%2C7%20L2%2C2%20Z%20M0%2C11%20L9%2C11%20L9%2C20%20L0%2C20%20L0%2C11%20Z%20M2%2C13%20L7%2C13%20L7%2C18%20L2%2C18%20L2%2C13%20Z%20M11%2C0%20L20%2C0%20L20%2C9%20L11%2C9%20L11%2C0%20Z%20M13%2C2%20L18%2C2%20L18%2C7%20L13%2C7%20L13%2C2%20Z%20M11%2C11%20L20%2C11%20L20%2C20%20L11%2C20%20L11%2C11%20Z%20M13%2C13%20L18%2C13%20L18%2C18%20L13%2C18%20L13%2C13%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E"); }
.split__button--selected .icon__view-tile,
.split--radio .split__button--selected:hover .icon__view-tile,
.split--radio .split__button--selected:active .icon__view-tile {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-tile%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-tile%22%20fill%3D%22%23FFFFFF%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C0%20L9%2C0%20L9%2C9%20L0%2C9%20L0%2C0%20Z%20M2%2C2%20L7%2C2%20L7%2C7%20L2%2C7%20L2%2C2%20Z%20M0%2C11%20L9%2C11%20L9%2C20%20L0%2C20%20L0%2C11%20Z%20M2%2C13%20L7%2C13%20L7%2C18%20L2%2C18%20L2%2C13%20Z%20M11%2C0%20L20%2C0%20L20%2C9%20L11%2C9%20L11%2C0%20Z%20M13%2C2%20L18%2C2%20L18%2C7%20L13%2C7%20L13%2C2%20Z%20M11%2C11%20L20%2C11%20L20%2C20%20L11%2C20%20L11%2C11%20Z%20M13%2C13%20L18%2C13%20L18%2C18%20L13%2C18%20L13%2C13%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E"); }
.split--radio:hover .split__button:not(.split__button--selected) .icon__view-column,
.split--multi .split__button:hover .icon__view-column,
.split--multi .split__button--selected:hover .icon__view-column {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2020%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-column%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%226%202%208%202%208%2014%206%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%2212%202%2014%202%2014%2014%2012%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-2%22%20x%3D%220%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-3%22%20x%3D%2218%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-4%22%20x%3D%220%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E"); }
.split--radio:active .split__button:not(.split__button--selected) .icon__view-column,
.split--multi .split__button:active .icon__view-column,
.split--multi .split__button--selected:active .icon__view-column {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2020%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-column%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%20fill%3D%22%231493E6%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%226%202%208%202%208%2014%206%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%2212%202%2014%202%2014%2014%2012%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-2%22%20x%3D%220%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-3%22%20x%3D%2218%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-4%22%20x%3D%220%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E"); }
.split__button--selected .icon__view-column,
.split--radio .split__button--selected:hover .icon__view-column,
.split--radio .split__button--selected:active .icon__view-column {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2020%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-column%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%20fill%3D%22%23FFFFFF%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%226%202%208%202%208%2014%206%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%2212%202%2014%202%2014%2014%2012%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-2%22%20x%3D%220%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-3%22%20x%3D%2218%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-4%22%20x%3D%220%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E"); }
/*------------------------------------* #SEGMENTED BUTTON
\*------------------------------------*/
/*------------------------------------* #CHECKBOX
\*------------------------------------*/
.control {
position: relative; }
.control input {
position: absolute;
z-index: -2;
opacity: 0; }
.control__name {
display: block;
padding-left: 30px; }
input:not([disabled]) ~ label {
cursor: pointer; }
.control__indicator {
position: absolute;
left: 0;
top: 2px;
height: 13px;
width: 13px;
background-color: #fff;
border-radius: 3px;
border: 1px solid #626469;
z-index: -1; }
.control input:disabled ~ .control__indicator {
background-color: #fff;
opacity: .5;
pointer-events: none; }
.control__indicator:after {
content: '';
position: absolute;
display: none; }
.control input:checked ~ .control__indicator:after {
display: block; }
.control--checkbox .control__indicator:after {
left: 4px;
top: -2px;
width: 5px;
height: 12px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(27deg); }
input:indeterminate ~ .control__indicator:after {
width: 9px;
height: 0;
display: block;
transform: none;
left: 1px;
top: 4px;
border-width: 0 0 3px 0; }
.control--checkbox input:disabled ~ .control__indicator:after {
opacity: .5; }
.control:hover input:not([disabled]) ~ .control__indicator,
.control:hover input:not([disabled]):checked ~ .control__indicator {
border: 1px solid #626469; }
.control input:not([disabled]):active ~ .control__indicator:after,
.control input:not([disabled]):checked:active ~ .control__indicator:after {
content: '';
width: 7px;
height: 7px;
border-radius: 2px;
border: none;
background-color: #1493e6;
left: 2px;
top: 2px;
display: block;
transform: none; }
/*------------------------------------* #RADIO
\*------------------------------------*/
.control--radio .control__indicator {
border-radius: 50%; }
.control--radio input:disabled ~ .control__indicator:after {
opacity: .5; }
.control--radio .control__indicator:after {
left: 3px;
top: 3px;
height: 5px;
width: 5px;
border-radius: 50%;
border: 1px solid #626469;
display: block; }
.control--radio input:checked ~ .control__indicator:after {
background-color: #000;
border-color: #000; }
.control--radio input:not([disabled]):active ~ .control__indicator:after,
.control--radio input:not([disabled]):checked:active ~ .control__indicator:after {
border-radius: 50%;
height: 5px;
width: 5px;
top: 3px;
left: 3px; }
/*------------------------------------* #SWITCH
\*------------------------------------*/
.switch {
margin: 0 1em;
padding: 0;
border: none;
background-color: transparent;
position: relative;
cursor: pointer;
outline: none; }
.switch__bg {
display: block;
border-radius: 2px;
background-color: #626469;
width: 30px;
height: 17px; }
.switch--active .switch__bg {
background-color: #1493e6; }
.switch__toggle {
display: block;
border: 1px solid #626469;
width: 17px;
height: 17px;
transition: all .125s ease-in-out;
border-radius: 2px;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to bottom, white 0%, #e1e1e1 100%); }
.switch__toggle__inner {
width: 70%;
height: 70%;
display: block;
margin: 15%;
border-radius: 2px;
background: linear-gradient(to bottom, #e1e1e1 0%, white 100%); }
.switch--active .switch__toggle {
left: 13px;
transition: all .125s ease-in-out;
border-color: #1493e6; }
.switch:hover .switch__toggle__inner {
border: 1px solid #1493e6;
margin: 15%; }
.switch--active:hover .switch__toggle__inner {
border-color: #626469; }
.switch:hover .switch__toggle {
border-color: #1493e6; }
.switch--active:hover .switch__toggle {
border-color: #626469; }
.switch:active .switch__toggle__inner {
border-color: transparent;
background-color: #1493e6;
width: 60%;
height: 70%;
margin: 15% 20% 15%; }
.switch--active:active .switch__toggle__inner {
background-color: #626469; }
.switch:disabled,
.switch--active.switch:disabled {
opacity: .5;
pointer-events: none; }
/*------------------------------------* #LINKS
\*------------------------------------*/
.link {
color: #58585b; }
.link:hover {
color: #000; }
.link:active {
color: #0066ff; }
/*------------------------------------* #SCROLLBAR
\*------------------------------------*/
::-webkit-scrollbar {
width: 15px; }
::-webkit-scrollbar-track {
background-color: #e9e9e9; }
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #fff;
box-shadow: 0 0 0 2px #e9e9e9 inset, 0 0 0 3px #626469 inset; }
/*------------------------------------* #BREADCRUMB HIERARCHICAL
\*------------------------------------*/
.breadcrumb {
list-style: none;
margin: 0;
padding: 0;
height: 16px; }
.breadcrumb__item {
display: inline-block;
padding: 0 5px 0 11px;
position: relative; }
.breadcrumb__item + .breadcrumb__item:before {
display: block;
position: absolute;
left: 0; }
.breadcrumb__item--hierarchical + .breadcrumb__item--hierarchical:before {
content: "/";
top: 0; }
.breadcrumb__item .link {
text-decoration: none; }
.breadcrumb__item--selected .link {
color: #0066ff; }
/*------------------------------------* #BREADCRUMB PARALLEL
\*------------------------------------*/
.breadcrumb__item--parallel + .breadcrumb__item--parallel:before {
content: "";
width: 1px;
height: 12px;
background-color: #58585b;
top: 3px; }
/*------------------------------------* #TOOLTIP
\*------------------------------------*/
.trigger-tooltip {
position: relative;
float: left; }
.tooltip {
display: none;
background-color: #fff;
border: 1px solid #a7a9ab;
font-size: 12px;
color: #39393b;
padding: 5px;
position: absolute;
z-index: 2;
border-radius: 2px;
text-align: left; }
.tooltip--large {
width: 160px; }
.trigger-tooltip:hover .tooltip,
.contextual-menu--active .tooltip {
display: block; }
.trigger-tooltip:hover .tooltip--top,
.contextual-menu--active .tooltip--top {
bottom: 20px;
left: 0; }
.trigger-tooltip:hover .tooltip--contextual.tooltip--top,
.trigger-tooltip:hover .tooltip--contextual.tooltip--top-left,
.trigger-tooltip:hover .tooltip--contextual.tooltip--top-right,
.contextual-menu--active .tooltip--contextual.tooltip--top,
.contextual-menu--active .tooltip--contextual.tooltip--top-left,
.contextual-menu--active .tooltip--contextual.tooltip--top-right {
bottom: 25px; }
.trigger-tooltip:hover .tooltip--right,
.contextual-menu--active .tooltip--right {
top: -25%;
left: calc(100% + 5px); }
.trigger-tooltip:hover .tooltip--contextual.tooltip--right,
.contextual-menu--active .tooltip--contextual.tooltip--right {
left: calc(100% + 10px); }
.trigger-tooltip:hover .tooltip--bottom,
.contextual-menu--active .tooltip--bottom {
top: 20px;
left: 0; }
.trigger-tooltip:hover .tooltip--contextual.tooltip--bottom,
.trigger-tooltip:hover .tooltip--contextual.tooltip--bottom-left,
.trigger-tooltip:hover .tooltip--contextual.tooltip--bottom-right,
.contextual-menu--active .tooltip--contextual.tooltip--bottom,
.contextual-menu--active .tooltip--contextual.tooltip--bottom-left,
.contextual-menu--active .tooltip--contextual.tooltip--bottom-right {
top: 25px; }
.trigger-tooltip:hover .tooltip--left,
.contextual-menu--active .tooltip--left {
top: -25%;
right: calc(100% + 5px); }
.trigger-tooltip:hover .tooltip--contextual.tooltip--left,
.contextual-menu--active .tooltip--contextual.tooltip--left {
right: calc(100% + 10px); }
.input-box--error:focus ~ .tooltip--error,
.input-box--error[checked] ~ .tooltip--error {
display: block;
position: absolute;
bottom: 75%;
left: 80%; }
.input-box--error:focus ~ .contextual-menu .tooltip,
.input-box--error[checked] ~ .contextual-menu .tooltip {
bottom: inherit;
top: 25px; }
.input-box--error:focus ~ .contextual-menu .tooltip:before,
.input-box--error[checked] ~ .contextual-menu .tooltip:before {
border-width: 0 6px 8px 6px;
border-color: transparent transparent #a7a9ab;
bottom: inherit;
top: -8px; }
.input-box--error:focus ~ .contextual-menu .tooltip:after,
.input-box--error[checked] ~ .contextual-menu .tooltip:after {
border-width: 0 5px 7px 5px;
border-color: transparent transparent #fff;
bottom: inherit;
top: -7px; }
.form__hint {
position: absolute;
color: inherit;
margin: -10px 5px 0; }
/*------------------------------------* #TOASTER
\*------------------------------------*/
.toaster {
background-color: #e9e9e9;
border: 1px solid #a7a9ab;
padding: 10px 30px;
position: fixed;
width: 100%;
bottom: 0;
z-index: 5; }
.toaster__content {
margin-bottom: 0 !important; }
/*------------------------------------* #INPUTBOX
\*------------------------------------*/
.input-box__label {
display: block;
padding: 0 0 5px 5px; }
.input-box {
min-width: 238px;
border-radius: 2px;
border: 1px solid #626469;
padding: 3px 5px;
position: relative;
font-size: 14px;
color: #58585b;
margin: 0; }
.input-box:hover {
border-color: #626469; }
.input-box:focus,
.input-box[checked] {
border-color: #1493e6;
outline: none;
box-shadow: 2px 0 0 0 #1493e6 inset; }
.input-box:disabled {
opacity: .5;
background-color: #e9e9e9; }
.input-box:disabled:hover {
border-color: #626469; }
.input-box[readonly],
.input-box[readonly]:focus {
border-color: #e9e9e9;
box-shadow: none; }
.input-box--error {
box-shadow: 2px 0 0 0 #e32800 inset; }
.input-box--error:focus,
.input-box--error[checked] {
border-color: #e32800;
box-shadow: 2px 0 0 0 #e32800 inset; }
.input-box--warning,
.input-box--warning:hover,
.input-box--warning:focus {
border-color: #ff7300;
box-shadow: 2px 0 0 0 #ff7300 inset; }
/*------------------------------------* #CONTEXTUAL MENU
\*------------------------------------*/
.contextual-menu {
border: 0;
background-color: transparent;
cursor: pointer;
position: relative; }
.contextual-menu--active .icon__info {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2212px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Einformation-solid%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22information-solid%22%20fill-rule%3D%22nonzero%22%20fill%3D%22%231493E6%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22information-solid%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M5%2C2%20C5%2C1.44771525%205.44386482%2C1%206%2C1%20C6.55228475%2C1%207%2C1.44386482%207%2C2%20C7%2C2.55228475%206.55613518%2C3%206%2C3%20C5.44771525%2C3%205%2C2.55613518%205%2C2%20Z%20M5%2C5.00292933%20C5%2C4.44902676%205.44386482%2C4%206%2C4%20C6.55228475%2C4%207%2C4.43788135%207%2C5.00292933%20L7%2C9.99707067%20C7%2C10.5509732%206.55613518%2C11%206%2C11%20C5.44771525%2C11%205%2C10.5621186%205%2C9.99707067%20L5%2C5.00292933%20Z%20M1.75735932%2C10.2426407%20C4.10050507%2C12.5857864%207.89949495%2C12.5857864%2010.2426407%2C10.2426407%20C12.5857864%2C7.89949495%2012.5857864%2C4.10050507%2010.2426407%2C1.75735932%20C7.89949495%2C-0.585786439%204.10050507%2C-0.585786439%201.75735932%2C1.75735932%20C-0.585786439%2C4.10050507%20-0.585786439%2C7.89949495%201.75735932%2C10.2426407%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E"); }
.tooltip--error.tooltip--contextual:after,
.contextual-menu--active .tooltip--contextual:after {
content: "";
display: block;
position: absolute;
border-style: solid;
z-index: 4; }
.tooltip--error.tooltip--contextual:before,
.contextual-menu--active .tooltip--contextual:before {
content: "";
display: block;
position: absolute;
border-style: solid;
z-index: 3; }
.tooltip--contextual.tooltip--top:after,
.tooltip--contextual.tooltip--top-left:after,
.tooltip--contextual.tooltip--top-right:after {
border-width: 7px 5px 0 5px;
border-color: #fff transparent transparent;
bottom: -7px; }
.tooltip--contextual.tooltip--top:after,
.tooltip--contextual.tooltip--top-right:after {
left: 5px; }
.tooltip--contextual.tooltip--top-left:after {
right: 5px; }
.tooltip--contextual.tooltip--top:before,
.tooltip--contextual.tooltip--top-left:before,
.tooltip--contextual.tooltip--top-right:before {
border-width: 8px 6px 0 6px;
border-color: #a7a9ab transparent transparent;
bottom: -8px; }
.tooltip--contextual.tooltip--top:before,
.tooltip--contextual.tooltip--top-right:before {
left: 4px; }
.tooltip--contextual.tooltip--top-left:before {
right: 4px; }
.tooltip--contextual.tooltip--right:after {
border-width: 5px 7px 5px 0;
border-color: transparent #fff transparent transparent;
top: 6px;
right: 100%; }
.tooltip--contextual.tooltip--right:before {
border-width: 6px 8px 6px 0;
border-color: transparent #a7a9ab transparent transparent;
top: 5px;
right: 100%; }
.tooltip--contextual.tooltip--bottom:after,
.tooltip--contextual.tooltip--bottom-left:after,
.tooltip--contextual.tooltip--bottom-right:after {
border-width: 0 5px 7px 5px;
border-color: transparent transparent #fff;
top: -7px; }
.tooltip--contextual.tooltip--bottom:after,
.tooltip--contextual.tooltip--bottom-right:after {
left: 5px; }
.tooltip--contextual.tooltip--bottom-left:after {
right: 5px; }
.tooltip--contextual.tooltip--bottom:before,
.tooltip--contextual.tooltip--bottom-left:before,
.tooltip--contextual.tooltip--bottom-right:before {
border-width: 0 6px 8px 6px;
border-color: transparent transparent #a7a9ab;
top: -8px; }
.tooltip--contextual.tooltip--bottom:before,
.tooltip--contextual.tooltip--bottom-right:before {
left: 4px; }
.tooltip--contextual.tooltip--bottom-left:before {
right: 4px; }
.tooltip--contextual.tooltip--left:after {
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #fff;
top: 6px;
left: 100%; }
.tooltip--contextual.tooltip--left:before {
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #a7a9ab;
top: 5px;
left: 100%; }
/*------------------------------------* #CONTEXTUAL OVERLAY
\*------------------------------------*/
.overlay {
background-color: #a7a9ab;
position: absolute;
z-index: 5;
width: 100%;
height: 100%; }
.overlay__container {
background-color: #fff;
position: absolute;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
margin: 45px 0 45px;
width: calc(100% - 50%);
height: 65%;
left: 25%;
right: 25%; }
.overlay__close {
font-size: 25px;
font-weight: 900;
top: 15px;
position: absolute;
right: 5px;
line-height: 0;
display: block;
cursor: pointer; }
.overlay__content {
margin: 30px 15px 20px;
background-color: #e9e9e9;
height: calc(100% - 30px - 20px);
text-align: center;
padding: 15px; }
/*------------------------------------* #WORKING INDICATOR INLINE
\*------------------------------------*/
.loading {
position: relative;
width: 25px;
height: 25px;
margin: 100px auto 0;
border: 2px dotted #1493e6;
border-radius: 50%; }
/*------------------------------------* #PROGRESS DETERMINATE
\*------------------------------------*/
/*------------------------------------* #WORKING INDICATOR PAGE
\*------------------------------------*/
/*------------------------------------* #PROGRESS INDETERMINATE
\*------------------------------------*/
/*------------------------------------* #MESSAGING INLINE
\*------------------------------------*/
.tooltip__error {
background-color: #e32800;
height: calc(100% + 2px);
display: block;
width: 30px;
position: absolute;
top: -1px; }
.tooltip--right .tooltip__error,
.tooltip--top .tooltip__error,
.tooltip--bottom .tooltip__error,
.tooltip--top-right .tooltip__error,
.tooltip--bottom-right .tooltip__error {
left: 0;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px; }
.tooltip--right.tooltip--error,
.tooltip--top.tooltip--error,
.tooltip--bottom.tooltip--error,
.tooltip--top-right.tooltip--error,
.tooltip--bottom-right.tooltip--error {
border-left: none;
padding-left: 35px; }
.tooltip--left .tooltip__error,
.tooltip--top-left .tooltip__error,
.tooltip--bottom-left .tooltip__error {
right: 0;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px; }
.tooltip--left.tooltip--error,
.tooltip--top-left.tooltip--error,
.tooltip--bottom-left.tooltip--error {
border-right: none;
padding-right: 35px; }
.tooltip__error:after {
content: "\00d7";
border-radius: 50%;
background-color: #fff;
color: #e32800;
font-size: 20px;
font-weight: 900;
display: block;
top: calc(50% - 7px);
position: absolute;
left: calc(50% - 7px);
padding: 7px 0 6px 1px;
line-height: 0; }
.tooltip--error.tooltip--top:after,
.tooltip--error.tooltip--top-left:after,
.tooltip--error.tooltip--top-right:after {
border-color: #e32800 transparent transparent; }
.tooltip--error.tooltip--top:before,
.tooltip--error.tooltip--top-left:before,
.tooltip--error.tooltip--top-right:before {
border-color: #e32800 transparent transparent; }
.tooltip--error.tooltip--right:after {
border-color: transparent #e32800 transparent transparent; }
.tooltip--error.tooltip--right:before {
border-color: transparent #e32800 transparent transparent; }
.tooltip--error.tooltip--bottom:after,
.tooltip--error.tooltip--bottom-left:after,
.tooltip--error.tooltip--bottom-right:after {
border-color: transparent transparent #e32800; }
.tooltip--error.tooltip--bottom:before,
.tooltip--error.tooltip--bottom-left:before,
.tooltip--error.tooltip--bottom-right:before {
border-color: transparent transparent #e32800; }
.tooltip--error.tooltip--left:after {
border-color: transparent transparent transparent #e32800; }
.tooltip--error.tooltip--left:before {
border-color: transparent transparent transparent #e32800; }
.tooltip--error.tooltip--left:after,
.tooltip--error.tooltip--right:after {
top: 8px; }
.tooltip--error.tooltip--left:before,
.tooltip--error.tooltip--right:before {
top: 7px; }
.tooltip--error.tooltip--top:after,
.tooltip--error.tooltip--top-right:after,
.tooltip--error.tooltip--bottom:after,
.tooltip--error.tooltip--bottom-right:after {
left: 10px; }
.tooltip--error.tooltip--top:before,
.tooltip--error.tooltip--top-right:before,
.tooltip--error.tooltip--bottom:before,
.tooltip--error.tooltip--bottom-right:before {
left: 9px; }
.tooltip--error.tooltip--top-left:after,
.tooltip--error.tooltip--bottom-left:after {
right: 10px; }
.tooltip--error.tooltip--top-left:before,
.tooltip--error.tooltip--bottom-left:before {
right: 9px; }
/*------------------------------------* #MESSAGE PAGE
\*------------------------------------*/
.toaster--error {
top: 0;
bottom: inherit;
border-color: #e32800;
background-color: #fff;
position: relative;
padding-left: 45px; }
.toaster--error:before {
content: "";
background-color: #e32800;
height: 100%;
display: block;
width: 30px;
position: absolute;
top: 0;
left: 0; }
.toaster--error:after {
content: "\00d7";
border-radius: 50%;
background-color: #fff;
color: #e32800;
font-size: 20px;
font-weight: 900;
display: block;
top: calc(50% - 7px);
position: absolute;
left: calc(15px - 7px);
padding: 7px 0 6px 1px;
line-height: 0; }
/*------------------------------------* #DROPDOWN
\*------------------------------------*/
.input-box--dropdown-menu {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
min-width: 250px;
background-color: #fff; }
.input-box--dropdown-menu ~ .input-box__spinner .input-box__spinner__down:after {
top: 10px; }
/*------------------------------------* #COMBOBOX
\*------------------------------------*/
.input-box--combo-box {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
min-width: 250px;
background-color: #fff; }
.input-box--combo-box ~ .input-box__spinner .input-box__spinner__down:after {
top: 10px; }
input.input-box--combo-box {
min-width: 238px; }
_::-webkit-:host:not(:root:root), input.input-box--combo-box {
display: none; }
_::-webkit-:host:not(:root:root), datalist.input-box--combo-box {
padding: 0;
border: none; }
.input-box--combo-box ~ .input-box__spinner .input-box__spinner__down:before {
display: block; }
/*------------------------------------* #SPINNER
\*------------------------------------*/
.spinner {
position: relative;
display: inline-block; }
.input-box--number {
min-width: 268px; }
.input-box__spinner {
background-color: #fff;
width: 26px;
height: 22px;
display: block;
position: absolute;
right: 1px;
top: 1px;
border-radius: 5px;
pointer-events: none; }
.input-box__spinner__up,
.input-box__spinner__down {
background-color: transparent;
border: none;
margin: 0;
padding: 0;
float: left;
line-height: 0;
height: 9px;
width: 26px; }
.input-box__spinner__up:after,
.input-box__spinner__down:after {
position: absolute;
content: '';
display: block;
border-style: solid;
right: 7px; }
.input-box__spinner__up:after {
border-width: 0 5px 6px 5px;
border-color: transparent transparent #626469 transparent; }
.input-box:hover ~ .input-box__spinner .input-box__spinner__up:after {
border-color: transparent transparent #000 transparent; }
.input-box:active ~ .input-box__spinner .input-box__spinner__up:after {
border-color: transparent transparent #1493e6 transparent; }
.input-box__spinner__down:after {
border-width: 6px 5px 0 5px;
border-color: #626469 transparent transparent transparent; }
.input-box:hover ~ .input-box__spinner .input-box__spinner__down:after {
border-color: #000 transparent transparent transparent; }
.input-box:active ~ .input-box__spinner .input-box__spinner__down:after {
border-color: #1493e6 transparent transparent transparent; }
.input-box--disabled ~ .input-box__spinner {
background-color: #e9e9e9;
opacity: .5; }
.input-box--disabled ~ .input-box__spinner .input-box__spinner__up:after,
.input-box--disabled ~ .input-box__spinner .input-box__spinner__down:after {
opacity: .5; }
.input-box--disabled:hover ~ .input-box__spinner .input-box__spinner__up:after {
border-color: transparent transparent #626469 transparent; }
.input-box--disabled:hover ~ .input-box__spinner .input-box__spinner__down:after {
border-color: #626469 transparent transparent transparent; }
/*------------------------------------* #FORM ELEMENT
\*------------------------------------*/
.form {
position: relative;
float: left; }
.form__hint {
position: absolute;
color: inherit;
margin: -10px 5px 0; }
.input-box--error:focus ~ .tooltip--error,
.input-box--error[checked] ~ .tooltip--error {
display: block;
position: absolute;
bottom: 75%;
left: 80%; }
.input-box--error:focus ~ .contextual-menu .tooltip,
.input-box--error[checked] ~ .contextual-menu .tooltip {
bottom: inherit;
top: 25px; }
.input-box--error:focus ~ .contextual-menu .tooltip:before,
.input-box--error[checked] ~ .contextual-menu .tooltip:before {
border-width: 0 6px 8px 6px;
border-color: transparent transparent #a7a9ab;
bottom: inherit;
top: -8px; }
.input-box--error:focus ~ .contextual-menu .tooltip:after,
.input-box--error[checked] ~ .contextual-menu .tooltip:after {
border-width: 0 5px 7px 5px;
border-color: transparent transparent #fff;
bottom: inherit;
top: -7px; }
/*------------------------------------* #SIDEBAR
\*------------------------------------*/