502 lines
26 KiB
SCSS
502 lines
26 KiB
SCSS
|
|
$mapHeight: 520px;
|
|
$mapWidth: 2500px ;
|
|
|
|
// start bounce mixin ==============================================
|
|
|
|
@mixin bounce-up-down{
|
|
|
|
@include animation-duration( 1s);
|
|
@include animation-delay(0.5s);
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count:infinite;
|
|
-webkit-animation-iteration-count:infinite;
|
|
|
|
-webkit-animation-name: bounce;
|
|
animation-name: bounce;
|
|
}
|
|
|
|
@-webkit-keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
|
|
40% {-webkit-transform: translateY(-8px);}
|
|
60% {-webkit-transform: translateY(-4px);}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
|
|
40% {transform: translateY(-8px);}
|
|
60% {transform: translateY(-4px);}
|
|
}
|
|
|
|
// end bounce mixin ================================================
|
|
|
|
#pf-map-tab-element{
|
|
max-width: 2515px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
.pf-map-tab-content{
|
|
|
|
.pf-map-wrapper{
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: $mapWidth + 15px;
|
|
height: $mapHeight + 30px;
|
|
overflow: auto;
|
|
padding: 5px;
|
|
background: rgba($gray-darker, 0.93);
|
|
box-shadow:inset -3px 3px 10px 0 rgba($black, 0.3);
|
|
@include border-bottom-radius(5px);
|
|
border: {
|
|
width: 1px;
|
|
style: solid;
|
|
color: $gray-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
// map overlay =====================================================
|
|
.pf-map-overlay{
|
|
position: absolute;
|
|
display: none; // triggered by js
|
|
z-index: 10000;
|
|
height: 36px;
|
|
right: 10px;
|
|
background: rgba($black, 0.25);
|
|
@include border-radius(5px);
|
|
|
|
&.pf-map-overlay-timer{
|
|
width: 36px;
|
|
bottom: 23px;
|
|
}
|
|
|
|
&.pf-map-overlay-info{
|
|
top: 8px;
|
|
color: $gray-darker;
|
|
padding: 3px;
|
|
line-height: 26px;
|
|
min-height: 36px;
|
|
min-width: 36px;
|
|
|
|
i{
|
|
display: none;
|
|
margin: 2px;
|
|
width: 26px;
|
|
height: 26px;
|
|
opacity: 0.8;
|
|
color: $orange-dark;
|
|
|
|
&.fa{
|
|
font-size: 26px;
|
|
}
|
|
|
|
&.glyphicon{
|
|
margin-left: 4px;
|
|
font-size: 25px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
// 20x20px grid background
|
|
.pf-grid-small{
|
|
background: inline-image("#{$base-url}/grid_40x40.png") !important;
|
|
}
|
|
|
|
.pf-map{
|
|
width: $mapWidth;
|
|
height: $mapHeight;
|
|
position: relative;
|
|
font-family: $font-family-bold;
|
|
|
|
// jsPlumb classes =================================================
|
|
|
|
._jsPlumb_target, ._jsPlumb_source{
|
|
|
|
}
|
|
|
|
._jsPlumb_overlay{
|
|
opacity: 1;
|
|
pointer-events: none; // click through overlays
|
|
will-change: opacity;
|
|
@include transition( opacity 0.18s ease-out);
|
|
}
|
|
|
|
// system that is currently dragged
|
|
.jsPlumb_dragged{
|
|
@extend .pf-system-selected;
|
|
}
|
|
|
|
// hover effects ===================================================
|
|
|
|
._jsPlumb_hover{
|
|
|
|
// hover effect for connections
|
|
&._jsPlumb_overlay{
|
|
opacity: 0 !important; // hide opacity on hover
|
|
}
|
|
|
|
&:not(._jsPlumb_overlay){
|
|
@include bounce-up-down; // label should not bounce
|
|
}
|
|
}
|
|
|
|
// hover effect for systems
|
|
._jsPlumb_target_hover, ._jsPlumb_source_hover{
|
|
@include bounce-up-down;
|
|
@include box-shadow(0 6px 12px rgba(0,0,0,.3));
|
|
}
|
|
|
|
// =================================================================
|
|
|
|
.pf-system{
|
|
position: absolute;
|
|
min-width: 60px;
|
|
height: auto;
|
|
overflow: hidden; // hide bg on round corners -_-
|
|
background-color: $gray-dark;
|
|
font-family: $font-family-bold;
|
|
z-index: 100;
|
|
will-change: top, left, opacity, transform;
|
|
|
|
//opacity: 0; // trigger by js
|
|
border: {
|
|
width: 2px;
|
|
style: solid;
|
|
color: $gray-light;
|
|
}
|
|
@include border-radius(5px);
|
|
|
|
// change border color with transition
|
|
@include transition( border-color 0.5s ease-out, box-shadow 0.2s ease-out );
|
|
@include transform( translate3d(0, 0, 0) );
|
|
|
|
&:hover{
|
|
// makes the systems "flying" :)
|
|
@include box-shadow(0 6px 12px rgba(0,0,0, 0.3));
|
|
@include transform( translate3d(0, -2px, 0) );
|
|
}
|
|
|
|
.pf-system-head{
|
|
padding: 0px 3px 0px 3px;
|
|
cursor: pointer;
|
|
font-family: Arial; // fix for element width on custom font family
|
|
font-weight: bold;
|
|
|
|
.pf-system-head-name{
|
|
border: none;
|
|
display: inline-block;
|
|
min-width: 41px;
|
|
color: $gray-lighter;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.fa-lock{
|
|
display: none; // triggered by system-lock class
|
|
}
|
|
|
|
.pf-system-head-expand{
|
|
margin-left: 2px;
|
|
color: $gray-light;
|
|
display: none; // triggered by JS
|
|
}
|
|
}
|
|
|
|
// ===============================================================
|
|
|
|
.pf-system-body{
|
|
height: 0px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
cursor: -moz-grab;
|
|
cursor: -webkit-grab;
|
|
cursor: grab;
|
|
padding: 0 4px;
|
|
white-space: nowrap;
|
|
display: none; // triggered by JS
|
|
will-change: width;
|
|
|
|
border: {
|
|
top: {
|
|
width: 1px;
|
|
style: dashed;
|
|
color: $gray-light;
|
|
}
|
|
}
|
|
|
|
.pf-system-body-item{
|
|
color: $gray-light;
|
|
font-size: 10px;
|
|
|
|
.pf-system-body-right{
|
|
text-overflow: ellipsis;
|
|
float: right;
|
|
color: $teal-lighter;
|
|
display: none; // hover effect
|
|
}
|
|
// user status ===============================================
|
|
.pf-user-status{
|
|
font-size: 7px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// system head specific tooltip style
|
|
.tooltip{
|
|
|
|
&.in{
|
|
opacity: 1;
|
|
}
|
|
|
|
.tooltip-inner{
|
|
color: $gray-dark;
|
|
background-color: $gray-lighter;
|
|
padding: 3px 3px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// active system
|
|
.pf-system-active:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
|
|
@include box-shadow($yellow-lighter 0px 0px 8px 0px);
|
|
}
|
|
|
|
|
|
// selected system
|
|
.pf-system-selected:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
|
|
@include box-shadow($red-darkest 0px 0px 8px 0px);
|
|
|
|
.pf-system-head, .pf-system-body{
|
|
background-color: $red-darkest;
|
|
}
|
|
}
|
|
|
|
// locked system
|
|
.pf-system-locked{
|
|
|
|
.pf-system-sec{
|
|
cursor: default !important;
|
|
}
|
|
|
|
.pf-system-body{
|
|
cursor: default !important;
|
|
}
|
|
|
|
.fa-lock{
|
|
color: $gray-light !important;
|
|
display: inline-block !important;
|
|
}
|
|
}
|
|
|
|
// Endpoints =======================================================
|
|
.pf-map-endpoint-source, .pf-map-endpoint-target{
|
|
z-index: 50;
|
|
|
|
svg {
|
|
circle{
|
|
@include transition( stroke 0.18s ease-out, fill 0.18s ease-out);
|
|
}
|
|
|
|
*{
|
|
stroke: $gray-light;
|
|
stroke-width: 2; // border width
|
|
fill: $gray;
|
|
cursor: pointer;
|
|
|
|
&:hover{
|
|
stroke: $gray-lightest; // hover style
|
|
}
|
|
}
|
|
}
|
|
|
|
// hover effect for Endpoints
|
|
&:hover{
|
|
circle{
|
|
stroke: $orange !important;
|
|
}
|
|
}
|
|
|
|
// while dragging
|
|
&._jsPlumb_dragging{
|
|
circle {
|
|
stroke: $orange;
|
|
}
|
|
}
|
|
}
|
|
|
|
._jsPlumb_endpoint_drop_allowed{
|
|
circle {
|
|
stroke: $green !important;
|
|
fill: $green !important;
|
|
}
|
|
}
|
|
|
|
._jsPlumb_endpoint_drop_forbidden{
|
|
circle {
|
|
stroke: $red-darker !important;
|
|
fill: $red-darker !important;
|
|
}
|
|
}
|
|
|
|
// Connections =====================================================
|
|
|
|
svg._jsPlumb_connector{
|
|
cursor: pointer;
|
|
stroke-linecap: round; // line endings
|
|
@include transition( stroke 0.18s ease-out) ;
|
|
will-change: all;
|
|
|
|
path{
|
|
@include transition( stroke 0.18s ease-out) ;
|
|
}
|
|
|
|
path:not(:first-child){
|
|
stroke: $gray; // inner line
|
|
}
|
|
|
|
path:first-child{
|
|
stroke: $gray-light; // outer line
|
|
}
|
|
|
|
&:hover{
|
|
path:first-child{
|
|
stroke: $gray-lightest; // hover style
|
|
}
|
|
}
|
|
|
|
&._jsPlumb_dragging{
|
|
@include transition( opacity 0.18s ease-out) ;
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
svg.pf-map-connection-stargate {
|
|
|
|
path:first-child{
|
|
stroke: $gray-light;
|
|
}
|
|
|
|
path:not(:first-child){
|
|
stroke: $indigo-darkest;
|
|
}
|
|
|
|
&:hover{
|
|
path:first-child{
|
|
stroke: $gray-lightest;
|
|
}
|
|
}
|
|
}
|
|
|
|
svg.pf-map-connection-jumpbridge {
|
|
|
|
path:first-child{
|
|
stroke: rgba(255,255,255,0); // invisible border color
|
|
}
|
|
|
|
path:not(:first-child){
|
|
stroke: $teal-lighter;
|
|
}
|
|
|
|
&:hover{
|
|
path:first-child{
|
|
stroke: rgba(255,255,255,0); // invisible border color
|
|
}
|
|
|
|
path:not(:first-child){
|
|
stroke: $gray-lightest;
|
|
}
|
|
}
|
|
}
|
|
|
|
svg.pf-map-connection-wh-fresh {
|
|
// special wh-connection style (
|
|
}
|
|
|
|
svg.pf-map-connection-wh-eol {
|
|
|
|
path:first-child{
|
|
stroke: $pink-dark;
|
|
}
|
|
|
|
&:hover{
|
|
path:first-child{
|
|
stroke: $gray-lightest;
|
|
}
|
|
}
|
|
}
|
|
|
|
svg.pf-map-connection-wh-reduced {
|
|
|
|
path:not(:first-child){
|
|
stroke: $orange;
|
|
}
|
|
}
|
|
|
|
svg.pf-map-connection-wh-critical {
|
|
|
|
path:not(:first-child){
|
|
stroke: $red-darker;
|
|
}
|
|
}
|
|
|
|
// Connection overlay ==============================================
|
|
.pf-map-connection-overlay{
|
|
padding: 1px 4px;
|
|
font-size: 11px;
|
|
z-index: 1020;
|
|
@include border-radius(8px);
|
|
@include box-shadow(0 6px 12px rgba(0,0,0,.4));
|
|
}
|
|
|
|
.frig{
|
|
background-color: $orange-light;
|
|
color: $gray-darkest;
|
|
}
|
|
|
|
.mass{
|
|
background-color: $red-darker;
|
|
color: #eaeaea;
|
|
}
|
|
}
|
|
|
|
// dialoges ===========================================================
|
|
.ui-dialog-content{
|
|
label{
|
|
min-width: 60px;
|
|
}
|
|
}
|
|
|
|
// context menu ======================================================
|
|
.dropdown-menu{
|
|
font-family: $font-family-bold;
|
|
z-index: 1020; // over tooltips
|
|
|
|
i{
|
|
width: 20px
|
|
}
|
|
}
|
|
|
|
// tooltip for a system with active user (they are not positioned within the system element)
|
|
.pf-system-tooltip-inner{
|
|
color: $gray-lighter;
|
|
padding: 2px 4px;
|
|
min-width: 25px; // make sure tooltip is not flickering on low numbers -> fix width
|
|
@include transition( color 0.2s ease-out );
|
|
|
|
}
|
|
|
|
|
|
/*!
|
|
* font-awesome-animation - v0.0.7
|
|
* https://github.com/l-lin/font-awesome-animation
|
|
* License: MIT
|
|
*/
|
|
|
|
@-webkit-keyframes wrench{0%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}18%,20%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}28%,30%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}38%,40%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}48%,50%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}58%,60%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}75%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes wrench{0%{-webkit-transform:rotate(-12deg);-ms-transform:rotate(-12deg);transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg);-ms-transform:rotate(12deg);transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg)}18%,20%{-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}28%,30%{-webkit-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg)}38%,40%{-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}48%,50%{-webkit-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg)}58%,60%{-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg)}75%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}}.faa-parent.animated-hover:hover>.faa-wrench,.faa-wrench.animated,.faa-wrench.animated-hover:hover{-webkit-animation:wrench 2.5s ease infinite;animation:wrench 2.5s ease infinite;transform-origin-x:90%;transform-origin-y:35%;transform-origin-z:initial}.faa-parent.animated-hover:hover>.faa-wrench.faa-fast,.faa-wrench.animated-hover.faa-fast:hover,.faa-wrench.animated.faa-fast{-webkit-animation:wrench 1.2s ease infinite;animation:wrench 1.2s ease infinite}.faa-parent.animated-hover:hover>.faa-wrench.faa-slow,.faa-wrench.animated-hover.faa-slow:hover,.faa-wrench.animated.faa-slow{-webkit-animation:wrench 3.7s ease infinite;animation:wrench 3.7s ease infinite}@-webkit-keyframes ring{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes ring{0%{-webkit-transform:rotate(-15deg);-ms-transform:rotate(-15deg);transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg);-ms-transform:rotate(-18deg);transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg);-ms-transform:rotate(18deg);transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg);-ms-transform:rotate(-22deg);transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg);-ms-transform:rotate(22deg);transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg);-ms-transform:rotate(-18deg);transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg);-ms-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg);-ms-transform:rotate(-12deg);transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg);-ms-transform:rotate(12deg);transform:rotate(12deg)}20%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}}.faa-parent.animated-hover:hover>.faa-ring,.faa-ring.animated,.faa-ring.animated-hover:hover{-webkit-animation:ring 2s ease infinite;animation:ring 2s ease infinite;transform-origin-x:50%;transform-origin-y:0;transform-origin-z:initial}.faa-parent.animated-hover:hover>.faa-ring.faa-fast,.faa-ring.animated-hover.faa-fast:hover,.faa-ring.animated.faa-fast{-webkit-animation:ring 1s ease infinite;animation:ring 1s ease infinite}.faa-parent.animated-hover:hover>.faa-ring.faa-slow,.faa-ring.animated-hover.faa-slow:hover,.faa-ring.animated.faa-slow{-webkit-animation:ring 3s ease infinite;animation:ring 3s ease infinite}@-webkit-keyframes vertical{0%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}22%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes vertical{0%{-webkit-transform:translate(0,-3px);-ms-transform:translate(0,-3px);transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px);-ms-transform:translate(0,3px);transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px);-ms-transform:translate(0,-3px);transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px);-ms-transform:translate(0,3px);transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px);-ms-transform:translate(0,-3px);transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px);-ms-transform:translate(0,3px);transform:translate(0,3px)}22%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}}.faa-parent.animated-hover:hover>.faa-vertical,.faa-vertical.animated,.faa-vertical.animated-hover:hover{-webkit-animation:vertical 2s ease infinite;animation:vertical 2s ease infinite}.faa-parent.animated-hover:hover>.faa-vertical.faa-fast,.faa-vertical.animated-hover.faa-fast:hover,.faa-vertical.animated.faa-fast{-webkit-animation:vertical 1s ease infinite;animation:vertical 1s ease infinite}.faa-parent.animated-hover:hover>.faa-vertical.faa-slow,.faa-vertical.animated-hover.faa-slow:hover,.faa-vertical.animated.faa-slow{-webkit-animation:vertical 4s ease infinite;animation:vertical 4s ease infinite}@-webkit-keyframes horizontal{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}6%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}12%{-webkit-transform:translate(0,0);transform:translate(0,0)}18%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}24%{-webkit-transform:translate(0,0);transform:translate(0,0)}30%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}36%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes horizontal{0%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}6%{-webkit-transform:translate(5px,0);-ms-transform:translate(5px,0);transform:translate(5px,0)}12%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}18%{-webkit-transform:translate(5px,0);-ms-transform:translate(5px,0);transform:translate(5px,0)}24%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}30%{-webkit-transform:translate(5px,0);-ms-transform:translate(5px,0);transform:translate(5px,0)}36%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}}.faa-horizontal.animated,.faa-horizontal.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-horizontal{-webkit-animation:horizontal 2s ease infinite;animation:horizontal 2s ease infinite}.faa-horizontal.animated-hover.faa-fast:hover,.faa-horizontal.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-horizontal.faa-fast{-webkit-animation:horizontal 1s ease infinite;animation:horizontal 1s ease infinite}.faa-horizontal.animated-hover.faa-slow:hover,.faa-horizontal.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-horizontal.faa-slow{-webkit-animation:horizontal 3s ease infinite;animation:horizontal 3s ease infinite}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.faa-flash.animated,.faa-flash.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-flash{-webkit-animation:flash 2s ease infinite;animation:flash 2s ease infinite}.faa-flash.animated-hover.faa-fast:hover,.faa-flash.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-flash.faa-fast{-webkit-animation:flash 1s ease infinite;animation:flash 1s ease infinite}.faa-flash.animated-hover.faa-slow:hover,.faa-flash.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-flash.faa-slow{-webkit-animation:flash 3s ease infinite;animation:flash 3s ease infinite}@-webkit-keyframes bounce{0%,10%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%,60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,10%,20%,50%,80%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%,60%{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}}.faa-bounce.animated,.faa-bounce.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-bounce{-webkit-animation:bounce 2s ease infinite;animation:bounce 2s ease infinite}.faa-bounce.animated-hover.faa-fast:hover,.faa-bounce.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-bounce.faa-fast{-webkit-animation:bounce 1s ease infinite;animation:bounce 1s ease infinite}.faa-bounce.animated-hover.faa-slow:hover,.faa-bounce.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-bounce.faa-slow{-webkit-animation:bounce 3s ease infinite;animation:bounce 3s ease infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg)}}.faa-parent.animated-hover:hover>.faa-spin,.faa-spin.animated,.faa-spin.animated-hover:hover{-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}.faa-parent.animated-hover:hover>.faa-spin.faa-fast,.faa-spin.animated-hover.faa-fast:hover,.faa-spin.animated.faa-fast{-webkit-animation:spin .7s linear infinite;animation:spin .7s linear infinite}.faa-parent.animated-hover:hover>.faa-spin.faa-slow,.faa-spin.animated-hover.faa-slow:hover,.faa-spin.animated.faa-slow{-webkit-animation:spin 2.2s linear infinite;animation:spin 2.2s linear infinite}@-webkit-keyframes float{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes float{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.faa-float.animated,.faa-float.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-float{-webkit-animation:float 2s linear infinite;animation:float 2s linear infinite}.faa-float.animated-hover.faa-fast:hover,.faa-float.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-float.faa-fast{-webkit-animation:float 1s linear infinite;animation:float 1s linear infinite}.faa-float.animated-hover.faa-slow:hover,.faa-float.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-float.faa-slow{-webkit-animation:float 3s linear infinite;animation:float 3s linear infinite}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes pulse{0%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}.faa-parent.animated-hover:hover>.faa-pulse,.faa-pulse.animated,.faa-pulse.animated-hover:hover{-webkit-animation:pulse 2s linear infinite;animation:pulse 2s linear infinite}.faa-parent.animated-hover:hover>.faa-pulse.faa-fast,.faa-pulse.animated-hover.faa-fast:hover,.faa-pulse.animated.faa-fast{-webkit-animation:pulse 1s linear infinite;animation:pulse 1s linear infinite}.faa-parent.animated-hover:hover>.faa-pulse.faa-slow,.faa-pulse.animated-hover.faa-slow:hover,.faa-pulse.animated.faa-slow{-webkit-animation:pulse 3s linear infinite;animation:pulse 3s linear infinite}.faa-parent.animated-hover:hover>.faa-shake,.faa-shake.animated,.faa-shake.animated-hover:hover{-webkit-animation:wrench 2.5s ease infinite;animation:wrench 2.5s ease infinite}.faa-parent.animated-hover:hover>.faa-shake.faa-fast,.faa-shake.animated-hover.faa-fast:hover,.faa-shake.animated.faa-fast{-webkit-animation:wrench 1.2s ease infinite;animation:wrench 1.2s ease infinite}.faa-parent.animated-hover:hover>.faa-shake.faa-slow,.faa-shake.animated-hover.faa-slow:hover,.faa-shake.animated.faa-slow{-webkit-animation:wrench 3.7s ease infinite;animation:wrench 3.7s ease infinite}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-8deg);transform:scale(.9) rotate(-8deg)}30%,50%,70%{-webkit-transform:scale(1.3) rotate(8deg);transform:scale(1.3) rotate(8deg)}40%,60%{-webkit-transform:scale(1.3) rotate(-8deg);transform:scale(1.3) rotate(-8deg)}80%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-8deg);-ms-transform:scale(.9) rotate(-8deg);transform:scale(.9) rotate(-8deg)}30%,50%,70%{-webkit-transform:scale(1.3) rotate(8deg);-ms-transform:scale(1.3) rotate(8deg);transform:scale(1.3) rotate(8deg)}40%,60%{-webkit-transform:scale(1.3) rotate(-8deg);-ms-transform:scale(1.3) rotate(-8deg);transform:scale(1.3) rotate(-8deg)}80%{-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}.faa-parent.animated-hover:hover>.faa-tada,.faa-tada.animated,.faa-tada.animated-hover:hover{-webkit-animation:tada 2s linear infinite;animation:tada 2s linear infinite}.faa-parent.animated-hover:hover>.faa-tada.faa-fast,.faa-tada.animated-hover.faa-fast:hover,.faa-tada.animated.faa-fast{-webkit-animation:tada 1s linear infinite;animation:tada 1s linear infinite}.faa-parent.animated-hover:hover>.faa-tada.faa-slow,.faa-tada.animated-hover.faa-slow:hover,.faa-tada.animated.faa-slow{-webkit-animation:tada 3s linear infinite;animation:tada 3s linear infinite}@-webkit-keyframes passing{0%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}50%{-webkit-transform:translateX(0%);transform:translateX(0%);opacity:1}100%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}}@keyframes passing{0%{-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);opacity:0}50%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%);opacity:1}100%{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);opacity:0}}.faa-parent.animated-hover:hover>.faa-passing,.faa-passing.animated,.faa-passing.animated-hover:hover{-webkit-animation:passing 2s linear infinite;animation:passing 2s linear infinite}.faa-parent.animated-hover:hover>.faa-passing.faa-fast,.faa-passing.animated-hover.faa-fast:hover,.faa-passing.animated.faa-fast{-webkit-animation:passing 1s linear infinite;animation:passing 1s linear infinite}.faa-parent.animated-hover:hover>.faa-passing.faa-slow,.faa-passing.animated-hover.faa-slow:hover,.faa-passing.animated.faa-slow{-webkit-animation:passing 3s linear infinite;animation:passing 3s linear infinite}@-webkit-keyframes burst{0%{opacity:.6}50%{-webkit-transform:scale(1.8);transform:scale(1.8);opacity:0}100%{opacity:0}}@keyframes burst{0%{opacity:.6}50%{-webkit-transform:scale(1.8);-ms-transform:scale(1.8);transform:scale(1.8);opacity:0}100%{opacity:0}}.faa-burst.animated,.faa-burst.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-burst{-webkit-animation:burst 2s infinite linear;animation:burst 2s infinite linear}.faa-burst.animated-hover.faa-fast:hover,.faa-burst.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-burst.faa-fast{-webkit-animation:burst 1s infinite linear;animation:burst 1s infinite linear}.faa-burst.animated-hover.faa-slow:hover,.faa-burst.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-burst.faa-slow{-webkit-animation:burst 3s infinite linear;animation:burst 3s infinite linear} |