@charset "UTF-8";

 .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;
}
@-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;
} @-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;
} @-webkit-keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
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.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
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.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.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-duration: 0.75s;
animation-duration: 0.75s;
-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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.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-duration: 0.75s;
animation-duration: 0.75s;
-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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.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-duration: 0.75s;
animation-duration: 0.75s;
-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-animation-duration: 0.75s;
animation-duration: 0.75s;
-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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
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-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: hinge;
animation-name: hinge;
}
@-webkit-keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.jackInTheBox {
-webkit-animation-name: jackInTheBox;
animation-name: jackInTheBox;
} @-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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@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: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
} @-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;
}:root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-shadow: none;--f-button-transition: all .15s ease;--f-button-transform: none;--f-button-outline-width: 1px;--f-button-outline-color: rgba(0, 0, 0, .7);--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-opacity: 1;--f-button-svg-disabled-opacity: .5;--f-button-svg-transition: opacity .15s ease;--f-button-svg-transform: none}.f-button{width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);transform:var(--f-button-transform);transition:var(--f-button-transition);backdrop-filter:var(--f-button-backdrop-filter);display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;pointer-events:all;cursor:pointer;overflow:hidden}@media (hover: hover){.f-button:hover:not([aria-disabled]){color:var(--f-button-hover-color, var(--f-button-color));background-color:var(--f-button-hover-bg, var(--f-button-bg))}}.f-button:active:not([aria-disabled]){color:var(--f-button-active-color, var(--f-button-hover-color, var(--f-button-color)));background-color:var(--f-button-active-bg, var(--f-button-hover-bg, var(--f-button-bg)))}.f-button:focus{outline:none}.f-button:focus-visible{outline:var(--f-button-outline-width) solid var(--f-button-outline-color);outline-offset:var(--f-button-outline-offset)}.f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);transform:var(--f-button-svg-transform);fill:var(--f-button-svg-fill);filter:var(--f-button-svg-filter);opacity:var(--f-button-svg-opacity, 1);transition:var(--f-button-svg-transition);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.f-button[aria-disabled]{cursor:default}.f-button[aria-disabled] svg{opacity:var(--f-button-svg-disabled-opacity)}[data-panzoom-action=toggleFS] g:first-child{display:flex}[data-panzoom-action=toggleFS] g:last-child{display:none}.in-fullscreen [data-panzoom-action=toggleFS] g:first-child{display:none}.in-fullscreen [data-panzoom-action=toggleFS] g:last-child{display:flex}[data-autoplay-action=toggle] svg g:first-child{display:flex}[data-autoplay-action=toggle] svg g:last-child{display:none}.has-autoplay [data-autoplay-action=toggle] svg g:first-child{display:none}.has-autoplay [data-autoplay-action=toggle] svg g:last-child{display:flex}:fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:first-child{display:none}:fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:last-child{display:flex}:root{--f-spinner-color-1: rgba(0, 0, 0, .1);--f-spinner-color-2: rgba(17, 24, 28, .8);--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-border-radius: 50%;--f-spinner-border-width: 4px}.f-spinner{position:absolute;top:50%;left:50%;margin:0;padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height);translate:-50% -50%;border:var(--f-spinner-border-width) solid var(--f-spinner-color-1);border-top-color:var(--f-spinner-color-2);border-radius:var(--f-spinner-border-radius);animation:f-spinner .75s linear infinite,f-fadeIn .2s ease .2s both}@keyframes f-spinner{to{rotate:360deg}}.f-panzoom,.f-zoomable{position:relative;overflow:hidden;display:flex;align-items:center;flex-direction:column}.f-panzoom:before,.f-panzoom:after,.f-zoomable:before,.f-zoomable:after{display:block;content:""}.f-panzoom:not(.has-controls):before,.f-zoomable:not(.has-controls):before{margin-bottom:auto}.f-panzoom:after,.f-zoomable:after{margin-top:auto}.f-panzoom.in-fullscreen,.f-zoomable.in-fullscreen{position:fixed;top:0;left:0;margin:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:unset!important;z-index:9999}.f-panzoom__wrapper{position:relative;min-width:0;min-height:0;max-width:100%;max-height:100%}.f-panzoom__wrapper.will-zoom-out{cursor:zoom-out}.f-panzoom__wrapper.can-drag{cursor:move;cursor:grab}.f-panzoom__wrapper.will-zoom-in{cursor:zoom-in}.f-panzoom__wrapper.is-dragging{cursor:move;cursor:grabbing}.f-panzoom__wrapper.has-error{display:none}.f-panzoom__content{display:block;min-width:0;min-height:0;max-width:100%;max-height:100%}.f-panzoom__content.is-lazyloading,.f-panzoom__content.has-lazyerror{visibility:hidden}img.f-panzoom__content{width:auto;height:auto;vertical-align:top;object-fit:contain;transition:none;user-select:none}.f-panzoom__wrapper>.f-panzoom__content{visibility:hidden}.f-panzoom__viewport{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.f-panzoom__viewport>.f-panzoom__content{width:100%;height:100%;object-fit:fill}picture.f-panzoom__content img{vertical-align:top;width:100%;height:auto;max-height:100%;object-fit:contain;transition:none;user-select:none}.f-panzoom__protected{position:absolute;inset:0;z-index:1;user-select:none}html.with-panzoom-in-fullscreen{overflow:hidden}.f-fadeIn{animation:var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;z-index:2}.f-fadeOut{animation:var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;z-index:1}@keyframes f-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes f-fadeOut{to{opacity:0}}.f-crossfadeIn{animation:var(--f-transition-duration, .2s) ease both f-crossfadeIn;z-index:2}.f-crossfadeOut{animation:calc(var(--f-transition-duration, .2s) * .2) ease calc(var(--f-transition-duration, .2s) * .8) both f-crossfadeOut;z-index:1}@keyframes f-crossfadeIn{0%{opacity:0}to{opacity:1}}@keyframes f-crossfadeOut{to{opacity:0}}.is-horizontal .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNextX}.is-horizontal .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrevX}.is-horizontal .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNextX}.is-horizontal .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrevX}@keyframes f-slideInPrevX{0%{transform:translate(calc(100% + var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideInNextX{0%{transform:translate(calc(-100% - var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideOutNextX{to{transform:translate(calc(-100% - var(--f-carousel-gap, 0)))}}@keyframes f-slideOutPrevX{to{transform:translate(calc(100% + var(--f-carousel-gap, 0)))}}.is-vertical .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNextY}.is-vertical .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrevY}.is-vertical .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNextY}.is-vertical .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrevY}@keyframes f-slideInPrevY{0%{transform:translateY(calc(100% + var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideInNextY{0%{transform:translateY(calc(-100% - var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideOutNextY{to{transform:translateY(calc(-100% - var(--f-carousel-gap, 0)))}}@keyframes f-slideOutPrevY{to{transform:translateY(calc(100% + var(--f-carousel-gap, 0)))}}.f-zoomInUp{animation:var(--f-transition-duration, .3s) ease both f-zoomInUp}.f-zoomOutDown{animation:var(--f-transition-duration, .3s) ease both f-zoomOutDown}@keyframes f-zoomInUp{0%{transform:scale(var(--f-zoomInUp-scale, .975)) translate3d(var(--f-zoomInUp-x, 0),var(--f-zoomInUp-y, 16px),0);opacity:var(--f-zoomInUp-opacity, 0)}to{transform:scale(1) translateZ(0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(var(--f-zoomOutDown-scale, .975)) translate3d(var(--f-zoomOutDown-x, 0),var(--f-zoomOutDown-y, 16px),0);opacity:0}}.f-throwOutUp{animation:var(--f-throwOutUp-duration, .2s) ease-out both f-throwOutUp}.f-throwOutDown{animation:var(--f-throwOutDown-duration, .2s) ease-out both f-throwOutDown}@keyframes f-throwOutUp{to{transform:translate3d(0,calc(var(--f-throwOutUp-y, 150px) * -1),0);opacity:0}}@keyframes f-throwOutDown{to{transform:translate3d(0,var(--f-throwOutDown-y, 150px),0);opacity:0}}.has-iframe .f-html,.has-pdf .f-html,.has-gmap .f-html{width:100%;height:100%;min-height:1px;overflow:visible}.has-pdf .f-html,.has-gmap .f-html{padding:0}.f-html{position:relative;box-sizing:border-box;margin:var(--f-html-margin, 0);padding:var(--f-html-padding, 2rem);color:var(--f-html-color, currentColor);background:var(--f-html-bg)}.f-html.is-error{text-align:center}.f-iframe{display:block;margin:0;border:0;height:100%;width:100%}.f-caption{align-self:center;flex-shrink:0;margin:var(--f-caption-margin);padding:var(--f-caption-padding, 16px 8px);max-width:100%;max-height:calc(80vh - 100px);overflow:auto;overflow-wrap:anywhere;line-height:var(--f-caption-line-height);color:var(--f-caption-color);background:var(--f-caption-bg);font:var(--f-caption-font)}.has-html5video .f-html,.has-youtube .f-html,.has-vimeo .f-html{padding:0;width:100%;height:100%;min-height:1px;overflow:visible;max-width:var(--f-video-width, 960px);max-height:var(--f-video-height, 540px);aspect-ratio:var(--f-video-aspect-ratio);background:var(--f-video-bg, rgba(0, 0, 0, .9))}.f-html5video{border:0;display:block;height:100%;width:100%;background:transparent}.f-button.is-arrow{--f-button-width: var(--f-arrow-width, 46px);--f-button-height: var(--f-arrow-height, 46px);--f-button-svg-width: var(--f-arrow-svg-width, 24px);--f-button-svg-height: var(--f-arrow-svg-height, 24px);--f-button-svg-stroke-width: var(--f-arrow-svg-stroke-width, 1.75);--f-button-border-radius: var(--f-arrow-border-radius, unset);--f-button-bg: var(--f-arrow-bg, transparent);--f-button-hover-bg: var(--f-arrow-hover-bg, var(--f-arrow-bg));--f-button-active-bg: var(--f-arrow-active-bg, var(--f-arrow-hover-bg));--f-button-shadow: var(--f-arrow-shadow);--f-button-color: var(--f-arrow-color);--f-button-hover-color: var(--f-arrow-hover-color, var(--f-arrow-color));--f-button-active-color: var( --f-arrow-active-color, var(--f-arrow-hover-color) );overflow:visible}.f-button.is-arrow.is-prev,.f-button.is-arrow.is-next{position:absolute;transform:translate(0);z-index:20}.is-horizontal .f-button.is-arrow.is-prev,.is-horizontal .f-button.is-arrow.is-next{inset:50% auto auto;transform:translateY(-50%)}.is-horizontal.is-ltr .f-button.is-arrow.is-prev{left:var(--f-arrow-pos, 0)}.is-horizontal.is-ltr .f-button.is-arrow.is-next{right:var(--f-arrow-pos, 0)}.is-horizontal.is-rtl .f-button.is-arrow.is-prev{right:var(--f-arrow-pos, 0);transform:translateY(-50%) rotateY(180deg)}.is-horizontal.is-rtl .f-button.is-arrow.is-next{left:var(--f-arrow-pos, 0);transform:translateY(-50%) rotateY(180deg)}.is-vertical.is-ltr .f-button.is-arrow.is-prev,.is-vertical.is-rtl .f-button.is-arrow.is-prev{top:var(--f-arrow-pos, 0);right:auto;bottom:auto;left:50%;transform:translate(-50%)}.is-vertical.is-ltr .f-button.is-arrow.is-next,.is-vertical.is-rtl .f-button.is-arrow.is-next{top:auto;right:auto;bottom:var(--f-arrow-pos, 0);left:50%;transform:translate(-50%)}.is-vertical .f-button.is-arrow.is-prev svg,.is-vertical .f-button.is-arrow.is-next svg{transform:rotate(90deg)}.f-carousel__toolbar{display:grid;grid-template-columns:1fr auto 1fr;margin:var(--f-toolbar-margin, 0);padding:var(--f-toolbar-padding, 8px);line-height:var(--f-toolbar-line-height);background:var(--f-toolbar-bg, none);box-shadow:var(--f-toolbar-shadow, none);backdrop-filter:var(--f-toolbar-backdrop-filter);position:relative;z-index:20;color:var(--f-toolbar-color, currentColor);font-size:var(--f-toolbar-font-size, 17px);font-weight:var(--f-toolbar-font-weight, inherit);font-family:var(--f-toolbar-font, -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif);text-shadow:var(--f-toolbar-text-shadow);text-align:center;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;white-space:nowrap;pointer-events:none}.f-carousel__toolbar.is-absolute{position:absolute;top:0;left:0;right:0}.f-carousel__toolbar .f-button:focus-visible{position:relative;z-index:1}.f-carousel__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:var(--f-toolbar-gap, 0)}.f-carousel__toolbar__column.is-left{display:flex;justify-self:flex-start;justify-content:flex-start}.f-carousel__toolbar__column.is-middle{display:flex;justify-content:center}.f-carousel__toolbar__column.is-right{display:flex;justify-self:flex-end;justify-content:flex-end;flex-flow:nowrap}.f-carousel__toolbar__column{pointer-events:none}.f-carousel__toolbar__column>*{pointer-events:all}.f-counter{position:relative;display:flex;flex-direction:row;cursor:default;user-select:none;margin:var(--f-counter-margin, 0);padding:var(--f-counter-padding, 4px);line-height:var(--f-counter-line-height);background:var(--f-counter-bg);border-radius:var(--f-counter-border-radius)}.f-counter span{padding:0 var(--f-counter-gap, 4px)}:root{--f-thumbs-gap: 8px;--f-thumbs-margin: 0;--f-thumbs-padding-x: 8px;--f-thumbs-padding-y: 8px;--f-thumbs-bg: transparent;--f-thumbs-transition: max-height .3s ease, max-width .3s ease, padding .3s ease;--f-thumbs-z-index: 1;--f-thumbs-viewport-padding-x: 0px;--f-thumbs-viewport-padding-y: 0px;--f-thumb-width: 94px;--f-thumb-height: 76px;--f-thumb-clip-width: 46px;--f-thumb-extra-gap: 16px;--f-thumb-opacity: 1;--f-thumb-transition: opacity .3s ease, transform .15s ease;--f-thumb-border: none;--f-thumb-border-radius: 4px;--f-thumb-shadow: none;--f-thumb-bg: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .05));--f-thumb-focus-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;--f-thumb-selected-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;--f-thumb-border-transition: all .1s ease;--f-thumb-img-width: 100%;--f-thumb-img-height: 100%;--f-thumb-img-fit: cover;--f-thumb-img-position: 50% 20%}.f-thumbs{--f-carousel-slide-width: var(--f-thumb-width);--f-carousel-slide-height: var(--f-thumb-height);--f-carousel-gap: var(--f-thumbs-gap);position:relative;box-sizing:border-box;flex-shrink:0;margin:var(--f-thumbs-margin);padding:var(--f-thumbs-padding-y) var(--f-thumbs-padding-x);overflow:hidden;background:var(--f-thumbs-bg);-webkit-tap-highlight-color:transparent;user-select:none;transition:var(--f-thumbs-transition);z-index:var(--f-thumbs-z-index)}.f-thumbs.is-horizontal{max-height:calc(var(--f-carousel-slide-height) + var(--f-thumbs-padding-y) * 2)}.f-thumbs.is-horizontal.is-hidden{max-height:0;--f-thumbs-padding-y: 0}.f-thumbs.is-vertical{max-width:calc(var(--f-carousel-slide-width) + var(--f-thumbs-padding-x) * 2)}.f-thumbs.is-vertical.is-hidden{max-width:0;--f-thumbs-padding-x: 0}.f-thumbs.is-scrollable.is-hidden{max-height:0;--f-thumbs-padding-y: 0}.f-thumbs.is-ltr{direction:ltr}.f-thumbs.is-rtl{direction:rtl}.f-thumbs img{display:block;width:var(--f-thumb-img-width);height:var(--f-thumb-img-height);object-fit:var(--f-thumb-img-fit);object-position:var(--f-thumb-img-position);pointer-events:none;border-radius:inherit;color:transparent}.f-thumbs img[data-lazy-src]{visibility:hidden}.f-thumbs img.has-lazyerror{display:none}.f-thumbs__viewport{box-sizing:border-box;height:100%;padding:var(--f-thumbs-viewport-padding-y) var(--f-thumbs-viewport-padding-x);overflow:visible;display:grid}.f-thumbs__slide{position:relative;box-sizing:border-box;grid-area:1/1;width:var(--f-carousel-slide-width);height:var(--f-carousel-slide-height);margin:0;padding:0;display:flex;align-items:center;flex-direction:column;cursor:pointer;overflow:visible}.f-thumbs__slide:hover button{opacity:var(--f-thumb-hover-opacity, 1);transform:var(--f-thumb-hover-transform, none)}.f-thumbs__slide:hover button:after{border:var(--f-thumb-hover-border, none);box-shadow:var(--f-thumb-hover-shadow, var(--f-thumb-shadow))}.f-thumbs__slide button{all:unset;display:block;margin:auto;padding:0;position:relative;overflow:visible;width:100%;height:100%;outline:none;transition:var(--f-thumb-transition);border-radius:var(--f-thumb-border-radius);opacity:var(--f-thumb-opacity);transform:var(--f-thumb-transform);background:var(--f-thumb-bg)}.f-thumbs__slide button:after{content:"";position:absolute;inset:0;z-index:1;transition:var(--f-thumb-border-transition);border-radius:inherit;border:var(--f-thumb-border);box-shadow:var(--f-thumb-shadow)}.f-thumbs__slide button:focus-within{opacity:var(--f-thumb-focus-opacity, 1);transform:var(--f-thumb-focus-transform, none)}.f-thumbs__slide button:focus-within:after{border:var(--f-thumb-focus-border, none);box-shadow:var(--f-thumb-focus-shadow, var(--f-thumb-shadow))}.f-thumbs__slide:active{opacity:var(--f-thumb-active-opacity, 1);transform:var(--f-thumb-active-transform, none)}.f-thumbs__slide:active:after{border:var(--f-thumb-active-border, none);box-shadow:var(--f-thumb-active-shadow, var(--f-thumb-shadow))}.f-thumbs__slide.is-selected{z-index:2}.f-thumbs__slide.is-selected button{opacity:var(--f-thumb-selected-opacity, 1);transform:var(--f-thumb-selected-transform, none)}.f-thumbs__slide.is-selected button:after{border:var(--f-thumb-selected-border, none);box-shadow:var(--f-thumb-selected-shadow, var(--f-thumb-shadow))}.f-thumbs.is-modern{--f-carousel-slide-width: calc( var(--f-thumb-clip-width) + var(--f-thumbs-gap) );--f-carousel-slide-height: var(--f-thumb-height);--f-carousel-gap: 0;--width-diff: calc((var(--f-thumb-width) - var(--f-thumb-clip-width)))}.f-thumbs.is-modern .f-thumbs__viewport{width:calc(100% + var(--f-carousel-slide-width) * 2 + var(--f-thumbs-padding-x));margin-inline:calc((var(--f-carousel-slide-width) + var(--f-thumbs-padding-x)) * -1)}.f-thumbs.is-modern .f-thumbs__slide{--clip-shift: calc((var(--width-diff) * .5) * var(--progress));--clip-path: inset( 0 var(--clip-shift) round var(--f-thumb-border-radius, 0) );padding:0;overflow:visible;left:var(--shift, 0);will-change:left;transition:left var(--f-transition-duration) var(--f-transition-easing)}.f-thumbs.is-modern .f-thumbs__slide button{display:block;margin-inline:50%;width:var(--f-thumb-width);clip-path:var(--clip-path);border:none;box-shadow:none;transition:clip-path var(--f-transition-duration) var(--f-transition-easing),opacity var(--f-thumb-transition-duration, .2s) var(--f-thumb-transition-easing, ease)}.f-thumbs.is-modern .f-thumbs__slide button:after{display:none}.f-thumbs.is-modern .f-thumbs__slide:focus:not(:focus-visible){outline:none}.f-thumbs.is-modern .f-thumbs__slide:focus-within:not(.is-selected) button:before{content:"";position:absolute;z-index:1;top:0;left:var(--clip-shift);bottom:0;right:var(--clip-shift);transition:border var(--f-transition-duration) var(--f-transition-easing),box-shadow var(--f-transition-duration) var(--f-transition-easing);border-radius:inherit;border:var(--f-thumb-focus-border, none);box-shadow:var(--f-thumb-focus-shadow, none)}.f-thumbs.is-modern{--f-transition-duration: .25s;--f-transition-easing: ease-out}.f-thumbs.is-modern.is-syncing{--f-transition-duration: 0s}.f-thumbs.is-scrollable .f-thumbs__viewport{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--f-thumb-width),1fr));grid-auto-rows:var(--f-thumb-height);gap:var(--f-thumbs-gap);overflow:auto;overscroll-behavior:contain;user-select:none}.f-thumbs.is-scrollable .f-thumbs__viewport .f-thumbs__slide{grid-area:auto;display:block;position:relative;max-width:100%;width:var(--f-thumb-width);height:var(--f-thumb-height);cursor:pointer;outline:none}:root{--f-progressbar-height: 3px;--f-progressbar-color: var(--f-carousel-theme-color, #575ad6);--f-progressbar-opacity: 1;--f-progressbar-z-index: 30}.f-progressbar{position:absolute;top:0;left:0;right:0;z-index:var(--f-progressbar-z-index);height:var(--f-progressbar-height);transform:scaleX(0);transform-origin:0;opacity:var(--f-progressbar-opacity);background:var(--f-progressbar-color);user-select:none;pointer-events:none;animation-name:f-progressbar;animation-play-state:running;animation-timing-function:linear}.f-progressbar:empty{display:block}button>.f-progressbar{--f-progressbar-height: 100%;--f-progressbar-opacity: .2}@keyframes f-progressbar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}[data-fullscreen-action=toggle] svg g:first-child{display:flex}[data-fullscreen-action=toggle] svg g:last-child{display:none}:fullscreen [data-fullscreen-action=toggle] svg g:first-child{display:none}:fullscreen [data-fullscreen-action=toggle] svg g:last-child{display:flex}.in-fullscreen-mode>.f-carousel{flex:1;min-width:0!important;min-height:0!important}html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto}html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--f-body-margin, 0px) + var(--f-scrollbar-compensate, 0px));overflow:hidden!important;overscroll-behavior-y:none}.fancybox__dialog{position:fixed;inset:0;z-index:1050;width:100%;height:100vh;max-height:unset;max-width:unset;padding:0;margin:0;border:0;overflow:hidden;background:transparent;touch-action:none;overscroll-behavior:contain}.fancybox__dialog:focus{outline:none}.fancybox__dialog::backdrop{opacity:0}@supports (height: 100dvh){.fancybox__dialog{height:100dvh}}.fancybox__dialog *:empty{display:block}.fancybox__container{--fancybox-color: #dbdbdb;--fancybox-backdrop-bg: rgba(24, 24, 27, .95);--f-toolbar-margin: 0;--f-toolbar-padding: 8px;--f-toolbar-gap: 0;--f-toolbar-color: #ddd;--f-toolbar-font-size: 16px;--f-toolbar-font-weight: 500;--f-toolbar-font: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;--f-toolbar-line-height: var(--f-button-height);--f-toolbar-text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);--f-toolbar-shadow: none;--f-toolbar-bg: none;--f-counter-margin: 0;--f-counter-padding: 0px 10px;--f-counter-gap: 4px;--f-counter-line-height: var(--f-button-height);--f-carousel-gap: 17px;--f-carousel-slide-width: 100%;--f-carousel-slide-height: 100%;--f-carousel-slide-padding: 0;--f-carousel-slide-bg: unset;--f-html-color: #222;--f-html-bg: #fff;--f-error-color: #fff;--f-error-bg: #333;--f-caption-margin: 0;--f-caption-padding: 16px 8px;--f-caption-color: var(--fancybox-color, #dbdbdb);--f-caption-bg: transparent;--f-caption-font: inherit;--f-caption-line-height: 1.375;--f-spinner-color-1: rgba(255, 255, 255, .2);--f-spinner-color-2: rgba(255, 255, 255, .8);--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-border-radius: 50%;--f-spinner-border-width: 4px;--f-progressbar-color: rgba(255, 255, 255);--f-button-width: 46px;--f-button-height: 46px;--f-button-color: #ddd;--f-button-hover-color: #fff;--f-button-outline-width: 1px;--f-button-outline-color: rgba(255, 255, 255, .75);--f-button-outline-offset: 0px;--f-button-bg: rgba(54, 54, 54, .75);--f-button-border: 0;--f-button-border-radius: 0;--f-button-shadow: none;--f-button-transition: all .2s ease;--f-button-transform: none;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.75;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, .01)), drop-shadow(1px 2px 1px rgba(24, 24, 27, .05));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: .5;--f-arrow-pos: 32px;--f-arrow-width: 50px;--f-arrow-height: 50px;--f-arrow-svg-width: 24px;--f-arrow-svg-height: 24px;--f-arrow-svg-stroke-width: 2.5;--f-arrow-border-radius: 50%;--f-arrow-bg: rgba(54, 54, 54, .65);--f-arrow-color: #ddd;--f-arrow-hover-color: #fff;--f-close-button-width: 30px;--f-close-button-height: 30px;--f-close-button-svg-width: 24px;--f-close-button-svg-height: 24px;--f-close-button-svg-stroke-width: 1.75;--f-close-border-radius: 4px;--f-close-button-color: #fff;--f-close-button-hover-color: #fff;--f-close-button-bg: transparent;--f-close-button-hover-bg: transparent;--f-close-button-active-bg: transparent;--f-thumbs-margin: 0px;--f-thumbs-padding-x: 8px;--f-thumbs-padding-y: 8px;--f-thumbs-bg: none;--f-thumb-transition: all .2s ease;--f-thumb-width: 94px;--f-thumb-height: 76px;--f-thumb-opacity: 1;--f-thumb-border: none;--f-thumb-shadow: none;--f-thumb-transform: none;--f-thumb-focus-opacity: 1;--f-thumb-focus-border: none;--f-thumb-focus-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);--f-thumb-focus-transform: none;--f-thumb-hover-opacity: 1;--f-thumb-hover-border: none;--f-thumb-hover-transform: none;--f-thumb-active-opacity: var(--f-thumb-hover-opacity);--f-thumb-active-border: var(--f-thumb-hover-border);--f-thumb-active-transform: var(--f-thumb-hover-transform);--f-thumb-selected-opacity: 1;--f-thumb-selected-border: none;--f-thumb-selected-shadow: inset 0 0 0 2px #fff;--f-thumb-selected-transform: none;--f-scrollbar-width: 7px;--f-scrollbar-track-bg: #444;--f-scrollbar-track-border-radius: 10px;--f-scrollbar-track-shadow: inset 0 0 6px rgba(0, 0, 0, .2);--f-scrollbar-thumb-bg: #ddd;--f-scrollbar-thumb-border-radius: 10px}.fancybox__container[theme=light]{--fancybox-color: #222;--fancybox-backdrop-bg: rgba(255, 255, 255, .97);--f-toolbar-color: var(--fancybox-color, #222);--f-toolbar-text-shadow: none;--f-toolbar-font-weight: 400;--f-html-color: var(--fancybox-color, #222);--f-html-bg: #fff;--f-error-color: #555;--f-error-bg: #fff;--f-video-bg: #fff;--f-caption-color: #333;--f-spinner-color-1: rgba(0, 0, 0, .2);--f-spinner-color-2: rgba(0, 0, 0, .8);--f-spinner-border-width: 3.5px;--f-progressbar-color: rgba(111, 111, 116);--f-button-color: #333;--f-button-hover-color: #000;--f-button-outline-color: rgba(0, 0, 0, .85);--f-button-bg: rgba(255, 255, 255, .85);--f-button-svg-stroke-width: 1.3;--f-button-svg-filter: none;--f-arrow-bg: rgba(255, 255, 255, .85);--f-arrow-color: #333;--f-arrow-hover-color: #000;--f-arrow-svg-stroke-width: 1.3;--f-close-button-color: #555;--f-close-button-hover-color: #000;--f-thumb-bg: linear-gradient(#ebeff2, #e2e8f0);--f-thumb-focus-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #888;--f-thumb-selected-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #000;--f-scrollbar-track-bg: #ddd;--f-scrollbar-thumb-bg: #444}.fancybox__container{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column}.fancybox__container:focus{outline:none}.fancybox__container.has-vertical-thumbs{flex-direction:row-reverse}.fancybox__container.has-vertical-thumbs:not(.is-closing) .fancybox__viewport{overflow-x:clip;overflow-y:visible}.fancybox__container>*:not(.fancybox__carousel),.fancybox__container .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected),.fancybox__container .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper,.f-spinner){opacity:var(--f-drag-opacity, 1)}.fancybox__container:not(.is-ready,.is-hiding){visibility:hidden}.fancybox__container.is-revealing>*:not(.fancybox__carousel),.fancybox__container.is-revealing .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-revealing .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected),.fancybox__container.is-revealing .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper,.f-spinner){animation:var(--f-interface-enter-duration, .35s) ease none f-fadeIn}.fancybox__container.is-hiding>*:not(.fancybox__carousel),.fancybox__container.is-hiding .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-hiding .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper){animation:var(--f-interface-exit-duration, .35s) ease forwards f-fadeOut}.fancybox__container.is-hiding .fancybox__carousel .fancybox__slide:not(.is-selected){opacity:0}.fancybox__container.is-hiding{pointer-events:none}.fancybox__container.is-idle .f-carousel__toolbar{pointer-events:none;opacity:0}.fancybox__container.is-idle .f-button.is-arrow{opacity:0}.fancybox__container.is-idle.is-ready .f-carousel__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__container.is-idle.is-ready .f-button.is-arrow{animation:.15s ease-out both f-fadeOut}.fancybox__backdrop{position:fixed;inset:0;z-index:-1;background:var(--fancybox-backdrop-bg)}.fancybox__carousel{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;z-index:10;overflow-y:visible;overflow-x:clip}.fancybox__carousel.is-vertical{--f-carousel-slide-height: 100%}.fancybox__carousel.is-ltr{direction:ltr}.fancybox__carousel.is-rtl{direction:rtl}.fancybox__carousel>.f-button.is-arrow:before{position:absolute;content:"";inset:-30px;z-index:1}.fancybox__viewport{display:grid;flex:1;min-height:0;min-width:0;position:relative;overflow:visible;transform:translate3d(0,var(--f-drag-offset, 0),0)}.fancybox__viewport.is-draggable{cursor:move;cursor:grab}.fancybox__viewport.is-dragging{cursor:move;cursor:grabbing}.fancybox__viewport [data-selectable],.fancybox__viewport [contenteditable]{cursor:auto}.fancybox__slide{box-sizing:border-box;position:relative;grid-area:1/1;display:flex;align-items:center;flex-direction:column;width:var(--f-carousel-slide-width);height:var(--f-carousel-slide-height);min-width:0;min-height:0;max-width:100%;margin:0;padding:var(--f-carousel-slide-padding);background:var(--f-carousel-slide-bg);backface-visibility:hidden;transform:translateZ(0);will-change:transform}.fancybox__slide:before,.fancybox__slide:after{display:block;content:""}.fancybox__slide:before{margin-bottom:auto}.fancybox__slide:after{margin-top:auto}.fancybox__slide.is-selected{z-index:1}.fancybox__slide.f-zoomable{overflow:visible}.fancybox__slide.has-error{--f-html-color: var(--f-error-color, --f-html-color);--f-html-bg: var(--f-error-bg, --f-html-bg)}.fancybox__slide.has-html{overflow:auto;padding:8px}.fancybox__slide.has-close-btn{padding-top:34px}.fancybox__slide.has-controls:before{margin:0}.fancybox__slide .f-spinner{cursor:pointer}.fancybox__container.is-closing .f-caption,.fancybox__slide.is-loading .f-caption{visibility:hidden}.fancybox__container.is-closing .fancybox__carousel{overflow:visible}.f-button.is-close-button{--f-button-width: var(--f-close-button-width);--f-button-height: var(--f-close-button-height);--f-button-border-radius: var(--f-close-border-radius);--f-button-color: var(--f-close-button-color);--f-button-hover-color: var(--f-close-button-hover-color);--f-button-bg: var(--f-close-button-bg);--f-button-hover-bg: var(--f-close-button-hover-bg);--f-button-active-bg: var(--f-close-button-active-bg);--f-button-svg-width: var(--f-close-button-svg-width);--f-button-svg-height: var(--f-close-button-svg-height);--f-button-svg-stroke-width: var(--f-close-button-svg-stroke-width);position:absolute;top:calc((var(--f-button-height) + 2px) * -1);right:0;z-index:10}.fancybox__thumbs{flex:0 1 100%}.fancybox__thumbs.is-scrollable{--f-thumbs-cols: 1;--f-thumbs-gap: 8px;--f-thumbs-transition: none;--f-thumbs-padding-x: 4px;--f-thumbs-padding-y: 8px;--f-thumbs-viewport-padding-x: 4px;--f-thumbs-viewport-padding-y: 0px;max-width:calc(var(--f-thumb-width) * var(--f-thumbs-cols) + var(--f-thumbs-gap) * (var(--f-thumbs-cols) - 1) + var(--f-thumbs-padding-x) * 2 + var(--f-thumbs-viewport-padding-x) * 2)}.fancybox__thumbs.is-scrollable ::-webkit-scrollbar{width:var(--f-scrollbar-width)}.fancybox__thumbs.is-scrollable ::-webkit-scrollbar-track{background:var(--f-scrollbar-track-bg);border-radius:var(--f-scrollbar-track-border-radius);box-shadow:var(--f-scrollbar-track-shadow)}.fancybox__thumbs.is-scrollable ::-webkit-scrollbar-thumb{background:var(--f-scrollbar-thumb-bg);border-radius:var(--f-scrollbar-thumb-border-radius)}.fancybox__thumbs.is-scrollable.is-hidden{max-width:0;--f-thumbs-padding-x: 0;max-height:unset;--f-thumbs-padding-y: unset}.fancybox__thumbs.is-scrollable .f-thumbs__viewport{overflow-x:hidden!important;grid-template-columns:repeat(auto-fill,calc((100% - var(--f-thumbs-gap) * (var(--f-thumbs-cols) - 1)) / var(--f-thumbs-cols)))!important}charset "utf-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both} html {
font-size: 18px;
line-height:1.5em;
} 
.csv-container {
display: flex;
flex-wrap: wrap;
}
.csv-table-wrapper {
flex: 1;
min-width: 300px; padding: 10px;
}
.csv-table {
width: 100%;
border-collapse: collapse;
}
.csv-table td, th {
border: 1px solid #000;
padding: 8px;
text-align: left;
}	
body{
text-decoration: none;
margin:0;
width:100%; font-family: 'Roboto',微軟正黑體,'Inter', sans-serif; 
color:#333333;
line-height:1.5em;
}
h1,h2,h3,h4,h5,h6{
line-height:1.25em;
font-weight: bold;
}
h1{ font-size:2.4rem; }
h2{ font-size:1.6rem; margin-bottom:20px; }
h3{ font-size:1.2rem; margin-bottom:20px; }
h4{ font-size:1.0rem; margin-bottom:20px; }
h5{ font-size:0.9rem; margin-bottom:10px; }
h6{ font-size:0.75rem; margin-bottom:10px; }
a,a:hover,a:visited,a:active{
color:inherit;	
text-decoration: none;
}
.section a,.section a:hover,.section a:active{
color:#3FC5F2;
}
header,footer{
position: relative;
width: 100%;
clear:both;
display: block;
}
.section .section-wrapper{
padding-top: 60px;
padding-bottom: 60px;
}
.section img{
max-width:100%;
height:auto;
}
header .section-wrapper{
position: relative;
}
.top-menu .section-wrapper{
padding-top:0;
padding-bottom:0;
}
.section-wrapper{
width:1200px;
padding-left:15px;
padding-right:15px;
margin:auto;
position: relative;
}
.width12{
width:1200px;
padding-left:15px;
padding-right:15px;
margin:auto;
position: relative;
}
.width8{
width:800px;
padding-left:15px;
padding-right:15px;
margin:auto;
position: relative;
}
.pc-header-items div[class^="menu-top"]{
position: relative;
font-size: 1.2rem;
color:#666666;
display: flex;
width: 100%;
justify-content: flex-end;
align-items: center;
}
.pc-header-items div[class^="menu-top"]>ul{
display: flex;
flex-direction: row;
margin-bottom:0;
padding-left:0;
}
.address,.phone,.whatsapp,.fax,.email,.web,.social,.wechat{
padding-left:30px;
position: relative;
margin-top: 10px;
margin-bottom: 10px;
}
.address:before{ font-family: "Font Awesome 5 Free"; content:"\f3c5"; font-weight: 900; position: absolute; left:0; font-size: 1.24em;}
.phone:before{ font-family: "Font Awesome 5 Free"; content:"\f095"; font-weight: 900;  position: absolute; left:0; font-size: 1.24em;}
.whatsapp:before{ font-family: "Font Awesome 5 Brands"; content:"\f232";  position: absolute; left:0; font-size: 1.24em;}
.fax:before{ font-family: "Font Awesome 5 Free"; content:"\f1ac"; font-weight: 900; position: absolute; left:0; font-size: 1.24em;}
.email:before{ font-family: "Font Awesome 5 Free"; content:"\f0e0";  position: absolute; left:0; font-size: 1.24em;}
.web:before{ font-family: "Font Awesome 5 Free"; content:"\f015"; font-weight: 900; position: absolute; left:0; font-size: 1.24em;}
.social:before{ font-family: "Font Awesome 5 Free"; content:"\f1e0"; font-weight: 900; position: absolute; left:0; font-size: 1.24em; }
.wechat:before{ font-family: "Font Awesome 5 Brands"; content:"\f1d7"; font-weight: 900; position: absolute; left:0; font-size: 1.24em; }
.time:before{ font-family: "Font Awesome 5 Free"; content:"\f017"; font-weight: 900;   position: absolute; left:0; font-size: 1.24em;}
.ig:before{ font-family: "Font Awesome 5 Brands"; content:"\f16d";   position: absolute; left:0; max-width:  font-size: 1.24em;}
.wc:before{ font-family: "Font Awesome 5 Brands"; content:"\f1d7";   position: absolute; left:0; font-size: 1.24em;}
.fb:before{ font-family: "Font Awesome 5 Brands"; content:"\f09a";   position: absolute; left:0; font-size: 1.24em;}
.tk:before{ font-family: "Font Awesome 5 Brands"; content:"\e07b";   position: absolute; left:0; font-size: 1.24em;}
.tw:before{ font-family: "Font Awesome 5 Brands"; content:"\f099";   position: absolute; left:0; font-size: 1.24em;}
.yt:before{ font-family: "Font Awesome 5 Brands"; content:"\f167";   position: absolute; left:0; font-size: 1.24em;}
.social-icon a{
display: inline-block;
margin-right:10px;
width:40px;
height:40px;
border:1px solid rgb(102,102,102);
background:rgb(102,102,102);
border-radius: 50px;
transition: all .3s linear;
}
.social-icon a:hover{
background:rgb(184,28,37);
border:1px solid rgb(184,28,37);
color:#fff;
}
.social-icon a:before{
display: block;
position: relative;
left:unset;
top:unset;
font-size:20px;
line-height: 40px;
text-align: center;
transition: all .3s linear;
color:#fff !important;
}
.social-icon a:hover:before{
color:#fff !important;
}
.small-wrapper{
max-width:830px;
width:100%;
margin:auto;
padding-left:15px;
padding-right:15px;
text-align: justify;
}
h1.section-title{
margin-bottom:30px;
position: relative;
font-weight: 700;
color:#4464AD;
font-family: 'Roboto Condensed', sans-serif;
}
.right-box h1{
font-size:3.2em;
line-height:1.25em;
margin-bottom:20px;
position: relative;
font-weight: 400;
color:#4464AE;
}
.title-desc{
font-size:1.2em;
font-weight: 600;
color:#666;	
display: inline-block;
margin-bottom:20px;
line-height:1.5em;
}
html[lang="en-US"] .title-desc{
font-weight: 400;
}
.thumbnail-list-style .title-desc,.icon-list-style .title-desc{
margin-bottom:0;
}
div[class^="menu-footer"] ul{
display: flex;
flex-direction: row;
margin-bottom:0;
float: left;
padding-left:0;
}
div[class^="menu-footer"] ul a{
padding-left:0px;
padding-right:40px;
}
div[class^="menu-footer"] ul li:last-child a{
padding-right:0;
}
.wpcf7-form-control{
border:1px solid #ddd;
border-radius:5px !important;
margin-bottom:20px;
max-width:100%;
padding:5px 15px;
}
.wpcf7-text {
width:100%;
}
textarea.wpcf7-form-control{
width: 100%;
height:150px;
}
.wpcf7-submit{
background-color:#0C2D59;
color:#fff !important;
font-size: 1em;
font-weight: bold;
clear: both;
padding: 5px 50px;
border-radius: 5px !important;
border-color:#0C2D59;
}
.alignright{ display: block !important; text-align: right !important; }
.alignleft{ display: block !important; text-align: left !important; }
.aligncenter{ display: block !important; text-align: center !important; }
img.alignright {
display: block !important;
margin-right: 0;
margin-bottom: auto;
float: right;
margin-left: 30px;
margin-bottom: 100px;
}
img.alignleft {
display: block !important;
margin-left: 0;
margin-bottom: auto;
float: left;
margin-right: 30px;
margin-bottom: 100px;
}
img.aligncenter{ display: block !important; margin:auto; }
.wow{
visibility: hidden;
} .header-top{
background:#FAFAFA;
padding-top:5px;
padding-bottom:5px;
text-align: center;
border-bottom:1px solid #eee;	
}
.booking-btnsection{
padding-top:50px;
padding-bottom:5px;
text-align: center;
color:#fff;
}
.booking-btnsection a{
color:#fff;
}
[lang="zh-HK"] .header-top .btn-blue{ }
.btn-blue,.btn-more-details{
color:#fff;
background:#23B3DB;
display: inline-block;
margin:auto;
padding:5px 30px;
text-align: center;
}
.btn-more-details{
background:#1f2f94;
color:#fff !important;
clear:both;
display: table;
margin:0;
margin-top:20px;
}
a.btn-blue:hover,a.btn-blue:visited,a.btn-blue:active,a.btn-more-details:hover,a.btn-more-details:visited,a.btn-more-details:active{
color:#fff;
}
.btn-orange{
color:#fff;
background:#F7881F;
display: inline-block;
margin:auto;
padding:5px 30px;
text-align: center;
}
a.btn-orange:hover,a.btn-orange:visited,a.btn-orange:active{
color:#fff;
}
header .section-wrapper{
padding-top:10px;
padding-bottom:10px;
}
header>.section-wrapper{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/right-watermark.webp);
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
color:#666666;	
}
.menu-section-wrapper{
min-height: 37px;
}
.menu-section{
background:#535252;
color:#fff;
}
.menu-section .section-wrapper{
padding-top:0px;
padding-bottom:0px;
width:auto !important;
}
.menu-section.menu-savetop {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.section ul{
list-style: disc;
list-style-position: outside;
}
.section ol{
list-style: auto;
}
header nav{
display: block;
font-size:.9rem;
}
header nav i{
font-size:1rem;
}
header nav ul{
display: flex;
flex-direction: row;
margin: 0;
padding-left:0;
justify-content: center;
}
header nav ul li{
padding:0;	
position: relative;
}
header nav ul li a{
padding:5px 15px;
display: block;
transition: all .3s linear;
}
header nav[class^="menu-top-menu-zh"] ul li a{
padding-left:25px;
padding-right:25px;
}
header nav ul li a:hover{
background:#23B3DB;
}
header nav>ul>li:after{
content:"";
background:#fff;
width:5px;
height:5px;
border:1px solid #fff;
border-radius: 10px;
position: absolute;
right:-3px;
top:0;
bottom:0;
margin:auto;
z-index: 10;
}
header nav ul li:last-child:after{
display: none;
}
header nav ul li .sub-menu{
position: absolute;
display: flex;
flex-direction: column;
left:0;
top:100%;
background:rgba(0,0,0,0.8);
z-index: 10;
visibility: hidden;
opacity: 0;
transition: all .3s linear;
}
header nav ul li:hover .sub-menu{
visibility: visible;
opacity: 1;
}
header nav .sub-menu li{
border-bottom:1px solid rgba(255,255,255,.3);
}
header nav .sub-menu li:last-child{
border-bottom:0;
}
header nav .sub-menu li a{
white-space: nowrap;
transition: all .3s linear;
display: block;
}
header nav .sub-menu li a:hover{
background:#23B3DB;
}
header nav .current-menu-ancestor:before,header nav .current-menu-parent:before,header nav>ul>li.current-menu-item:before,.category .resources-menu-btn:before,.single-post .resources-menu-btn:before{
position: absolute;
bottom:0;
height:3px;
background:#23B3DB;
width:100%;
content:"";
}
header .logo{
position: relative;
display: table;
}
header .logo a img{
max-width: 265px;
height: auto;
aspect-ratio: 265/105 ;
width: 100%;
}	
header .logo-slogun{
bottom:0;
left:calc(100% + 20px);
position: absolute;
white-space: nowrap;
font-size: 1.11rem;
}
#index-banner{
width:100%;
background-position: center;
background-size: cover;
}
.social-btn{
display: inline-block;
float:right;
margin-top: 3px;
}
.social-btn a{
display: inline-block;
margin-left:5px;
margin-right:5px;
width:30px;
height:30px;
line-height: 28px;
color:#535252;
background:#fff;
border:1px solid #fff;
border-radius: 20px;
text-align: center;
transition: all .3s ease-in-out;
}
.social-btn a:hover{
background:#23B3DB;
border:1px solid #23B3DB;
}
.header-slogun{
position: absolute;
bottom:15px;
right:15px;
text-transform: uppercase;
color:#666666;
font-size: 1.33rem;
}
.tree-section .section-wrapper{
display: flex;
align-items: center;
}
.tree-section .section-wrapper>div{
padding-left:30px;
padding-right:30px;
}
.tree-content{
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.animation-wrapper{
margin:auto;
display: table;
}
.section-wrapper h1,.section-wrapper h2,.section-wrapper h3,.section-wrapper h4,.section-wrapper h5,.section-wrapper h6{
color:#283897;
}
.section-wrapper h1.title,.page-title,.page-title-desc h1{
font-size:2.5rem;
margin:auto;
margin-bottom:30px;
text-align: center;
font-weight: 700;
color: #283897;
font-family: 'Roboto', sans-serif;
}
.page-title-desc h1{
text-align: unset;
margin-bottom:10px;
color:#fff;
}
.page-title-desc p{
margin-bottom: 0;
}
.page-title .sub{
color:#23B3DB;
font-size:1.2rem;
}
.section-wrapper p{
text-align: justify;
}
[lang="en-US"] .section-wrapper p{
text-align: unset;
}
.section-wrapper h2{
font-size:1.56rem;
margin-bottom:10px;
}
.logo-group{
margin-top:40px;
}
.index-img-bg{
color:#fff;
background-size: cover;
background-position: center center;
}
.index-img-bg .small-wrapper p:last-child{
margin-bottom:0;
}
.index-img-bg .small-wrapper{
padding-top:20px;
padding-bottom:20px;
}
footer{
color:#fff;
}
.footer-top{
background: #535252;
}
.footer-bottom{
background: #000;
font-size: 0.83rem;
}
.footer-contact-info{
font-size:.83rem;
line-height: 1.25em;
}
.footer-contact-info>div:last-child{
margin-bottom:0;
}
.footer-contact-info>div{
margin-top:20px;
margin-bottom:10px;
}
.news-thumbnail,.program-thumbnail{	
width:100%;
border:1px solid #eee;
border-radius: 10px;
overflow: hidden;
position: relative;
background-size:cover; 
background-position: center;
}
.program-thumbnail{	
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.news-box .news-thumbnail{
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.news-thumbnail[data-fancybox]{
cursor: pointer;
}
.video_thumbnail{
width:800px;
aspect-ratio: 16/9;
position: relative;
margin:auto;
display: block;
border:1px solid #ddd;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
cursor: pointer;
max-width: 100%;
}
.news-thumbnail a,.news-thumbnail img,.video_thumbnail img{
display: block;
height: auto;
width: 100%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
}
.news-thumbnail[data-fancybox] img,.video_thumbnail img{
left:0;
right:0;
height:48px;
width:68px; 
}
.news-thumbnail[data-fancybox]:hover img,.video_thumbnail:hover img{
filter: brightness(125%);
}
.program-thumbnail{
height: 250px;
}
.program-thumbnail img{
position: absolute;
min-height: 100%; 
min-width: 100%;
width: auto;
height: auto;
max-width: unset;
max-height: unset;
margin: auto;
transition: all .3s ease-in-out;    
top: 0;
bottom: 0;
}
.news-title,.program-title{
font-weight: 700;
margin-bottom:5px;
color:#283897;
font-size:1.25rem;
line-height:1.5rem;
}
.news-desc,.program-desc{
color:#333333;
font-size: 1rem;
line-height:1.5;
font-size: 0.85rem;
}
.program-content-box a{
position: absolute;
bottom:15px;
right:15px;
display: block;
}
.news-content-box,.program-content-box{
text-align: justify;
padding:30px 20px 30px;
position: relative;
background:#fff;
border:2px solid #eee;
border-top:0;
border-bottom-right-radius: 11px;
border-bottom-left-radius: 10px;
box-shadow: 0 3px 6px #eee;
}
[lang="en-US"] .news-content-box,[lang="en-US"] .program-content-box{
text-align:unset;
}
.news-content-box{
padding-bottom:50px;
}
.section .news-content-box a{
color:#333 !important;
}
.bg-grey{
background-image:url(//brainx.com.hk/wp-content/themes/blankslate/img/bg-grey.png);
}
.number-box{
background:#23B3DB;
color:#fff;
padding:30px;
border:1px solid #23B3DB;
border-radius: 10px;
text-align: center;
position: relative;
}
.number-box h3.number{
font-size:3.3rem;
color:#fff;
line-height: 1.25em;
margin-bottom:0;
letter-spacing: -2px;
}
.number-box .year{
font-size:2.67rem;
line-height: 1.25em;
font-weight: 300;
}
.article-box{
width:100%;
height:205px;
position: relative;
display: flex;
text-transform: uppercase;
border:1px solid #fff;
border-radius: 10px;
overflow: hidden;
}
.article-box p{
line-height: 1.25em;
margin-bottom: 5px;
}
.article-box .thumbnail{
width:35%;
height: 100%;
position: relative;
overflow: hidden;
}
.article-box .article-excerpt{
width:65%;
padding: 30px;
position: relative;
}
.article-box .article-excerpt *,.article-box .article-excerpt a,.article-box .article-excerpt a:hover,.article-box .article-excerpt a:visited{
color:#fff;
}
.article-box .article-excerpt{
font-size:.85rem;
color:#fff;
line-height: 1.5em;
}
.article-box .article-excerpt h3{
font-size:1rem;
margin-bottom:5px;
line-height: 1.25em;
}
.article-box .article-excerpt a{
font-size:1rem;
position: absolute;
bottom:30px;
left:30px;
}
.article-box .article-excerpt a:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/icon-row.png);
width:30px;
height:30px;
content:"";
}
.article-box .article-excerpt .desc{
font-size:.83rem;
line-height: 1.5em;
}
.article-box .thumbnail img{
position: relative;
height:100%;
width:auto;
}
.article-box .thumbnail {
background-position: center center;
background-size:cover;
}
.number-box div{
z-index: 1;
}
.article-box:after,.number-box:after,.step-box:after{
width:110px;
height:110px;
position: absolute;
bottom:-1px;
right:-1px;
content:"";
z-index: 0;
background-image:url(//brainx.com.hk/wp-content/themes/blankslate/img/white-corner.png);
} #grid-info > .elementor-widget-container{
display: inline-grid;
align-items: center;
}
#grid-info > .elementor-widget-container >* {
margin-bottom: 0;
}
.article-box2{
width:100%;
height:325px;
position: relative;
display: flex;
text-transform: unset;
border:1px solid #fff;
border-radius: 10px;
overflow: hidden;
}
.article-box2 p{
line-height: 1.25em;
margin-bottom: 5px;
}
.article-box2 .thumbnail{
width:35%;
height: 100%;
position: relative;
overflow: hidden;
}
.article-box2 .article-excerpt{
width:65%;
padding: 30px;
position: relative;
}
.article-box2 .article-excerpt *,.article-box2 .article-excerpt a,.article-box2 .article-excerpt a:hover,.article-box2 .article-excerpt a:visited{
color:#fff;
}
.article-box2 .article-excerpt{
font-size:.85rem;
color:#fff;
line-height: 1.5em;
}
.article-box2 .article-excerpt h3{
font-size:1rem;
margin-bottom:5px;
line-height: 1.25em;
}
.article-box2 .article-excerpt a{
font-size:1rem;
position: absolute;
bottom:30px;
left:30px;
}
.article-box2 .article-excerpt a:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/icon-row.png);
width:30px;
height:30px;
content:"";
}
.article-box2 .article-excerpt .desc{
font-size:.83rem;
line-height: 1.5em;
}
.article-box2 .thumbnail img{
position: relative;
height:100%;
width:auto;
}
.article-box2 .thumbnail {
background-position: center center;
background-size:cover;
}
.number-box div{
z-index: 1;
}
.article-box2::after{
content: ""; width:110px;
height:110px;
position: absolute;
bottom:-1px;
right:-1px;
z-index: 0;
background-image:url(https://brainx.com.hk/wp-content/uploads/2024/04/f9bd04-corner.png);
}
.article-box3{
width:100%;
height:325px;
position: relative;
display: flex;
text-transform: uppercase;
border:1px solid #fff;
border-radius: 10px;
overflow: hidden;
}
.article-box3 p{
line-height: 1.25em;
margin-bottom: 5px;
}
.article-box3 .thumbnail{
width:35%;
height: 100%;
position: relative;
overflow: hidden;
}
.article-box3 .article-excerpt{
width:65%;
padding: 30px;
position: relative;
}
.article-box3 .article-excerpt *,.article-box3 .article-excerpt a,.article-box3 .article-excerpt a:hover,.article-box3 .article-excerpt a:visited{
color:#fff;
}
.article-box3 .article-excerpt{
font-size:.85rem;
color:#fff;
line-height: 1.5em;
}
.article-box3 .article-excerpt h3{
font-size:1rem;
margin-bottom:5px;
line-height: 1.25em;
}
.article-box3 .article-excerpt a{
font-size:1rem;
position: absolute;
bottom:30px;
left:30px;
}
.article-box3 .article-excerpt a:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/icon-row.png);
width:30px;
height:30px;
content:"";
}
.article-box3 .article-excerpt .desc{
font-size:.83rem;
line-height: 1.5em;
}
.article-box3 .thumbnail img{
position: relative;
height:100%;
width:auto;
}
.article-box3 .thumbnail {
background-position: center center;
background-size:cover;
}
.number-box div{
z-index: 1;
}
.grecaptcha-badge{
display: block !important;
bottom: 0;
}
.float-menu-1 > ul {
position: fixed;
bottom: 75px;
right: 10px !important;
z-index: 10;
top: unset !important;
}
.elementor-tab-content{
border: 0 !important;
}
.article-box3::after{
content: ""; width:110px;
height:110px;
position: absolute;
bottom:-1px;
right:-1px;
z-index: 0;
background-image:url(https://brainx.com.hk/wp-content/uploads/2024/04/4abaa9-corner.png);
}
.article-box4{
width:100%;
height:325px;
position: relative;
display: flex;
text-transform: uppercase;
border:1px solid #fff;
border-radius: 10px;
overflow: hidden;
}
.article-box4 p{
line-height: 1.25em;
margin-bottom: 5px;
}
.article-box4 .thumbnail{
width:35%;
height: 100%;
position: relative;
overflow: hidden;
}
.article-box4 .article-excerpt{
width:65%;
padding: 30px;
position: relative;
}
.article-box4 .article-excerpt *,.article-box4 .article-excerpt a,.article-box4 .article-excerpt a:hover,.article-box4 .article-excerpt a:visited{
color:#fff;
}
.article-box4 .article-excerpt{
font-size:.85rem;
color:#fff;
line-height: 1.5em;
}
.article-box4 .article-excerpt h3{
font-size:1rem;
margin-bottom:5px;
line-height: 1.25em;
}
.article-box4 .article-excerpt a{
font-size:1rem;
position: absolute;
bottom:30px;
left:30px;
}
.article-box4 .article-excerpt a:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/icon-row.png);
width:30px;
height:30px;
content:"";
}
.article-box4 .article-excerpt .desc{
font-size:.83rem;
line-height: 1.5em;
}
.article-box4 .thumbnail img{
position: relative;
height:100%;
width:auto;
}
.article-box4 .thumbnail {
background-position: center center;
background-size:cover;
}
.arttext{
text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px;
}
.number-box div{
z-index: 1;
}
.article-box4::after{
content: ""; width:110px;
height:110px;
position: absolute;
bottom:-1px;
right:-1px;
z-index: 0;
background-image:url(https://brainx.com.hk/wp-content/uploads/2024/04/50a4db-corner.png);
}
.school-box{
width:100%;
height:205px;
position: relative;
display: grid;
text-transform: uppercase;
border:1px solid #fff;
border-radius: 10px;
overflow: hidden;
}
.school-box p{
line-height: 1.25em;
margin-bottom: 5px;
}
.school-box .thumbnail{
width:35%;
height: 100%;
position: relative;
overflow: hidden;
}
.school-box .school-excerpt{
width:65%;
padding: 30px;
position: relative;
}
.school-box .school-excerpt *,.school-box .school-excerpt a,.school-box .school-excerpt a:hover,.school-box .school-excerpt a:visited{
color:#fff;
}
.school-box .school-excerpt{
font-size:.85rem;
color:#fff;
line-height: 1.5em;
}
.school-box .school-excerpt h3{
font-size:1rem;
margin-bottom:5px;
line-height: 1.25em;
}
.school-box .school-excerpt a{
font-size:1rem;
position: absolute;
bottom:30px;
left:30px;
}
.school-box .school-excerpt a:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/icon-row.png);
width:30px;
height:30px;
content:"";
}
.school-box .school-excerpt .desc{
font-size:.83rem;
line-height: 1.5em;
}
.school-box .thumbnail img{
position: relative;
height:100%;
width:auto;
}
.school-box .thumbnail {
background-position: center center;
background-size:cover;
}
.number-box div{
z-index: 1;
}
.school-box:after,.number-box:after,.step-box:after{
width:110px;
height:110px;
position: absolute;
bottom:-1px;
right:-1px;
content:"";
z-index: 0;
background-image:url(//brainx.com.hk/wp-content/themes/blankslate/img/white-corner.png);
}
#grid-info > .elementor-widget-container{
display: inline-grid;
align-items: center;
}
#grid-info > .elementor-widget-container >* {
margin-bottom: 0;
}
.school-box2{
width:100%;
height:225px;
position: relative;
display: grid;
text-transform: unset;
border:1px solid #fff;
border-radius: 10px;
overflow: hidden;
}
.school-box2 p{
line-height: 1.25em;
margin-bottom: 5px;
}
.school-box2 .thumbnail{
width:35%;
height: 100%;
position: relative;
overflow: hidden;
}
.school-box2 .school-excerpt{
width:65%;
padding: 30px;
position: relative;
}
.school-box2 .school-excerpt *,.school-box2 .school-excerpt a,.school-box2 .school-excerpt a:hover,.school-box2 .school-excerpt a:visited{
color:#fff;
}
.school-box2 .school-excerpt{
font-size:.85rem;
color:#fff;
line-height: 1.5em;
}
.school-box2 .school-excerpt h3{
font-size:1rem;
margin-bottom:5px;
line-height: 1.25em;
}
.school-box2 .school-excerpt a{
font-size:1rem;
position: absolute;
bottom:30px;
left:30px;
}
.school-box2 .school-excerpt a:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/icon-row.png);
width:30px;
height:30px;
content:"";
}
.school-box2 .school-excerpt .desc{
font-size:.83rem;
line-height: 1.5em;
}
.school-box2 .thumbnail img{
position: relative;
height:100%;
width:auto;
}
.school-box2 .thumbnail {
background-position: center center;
background-size:cover;
}
.number-box div{
z-index: 1;
}
.school-box2::after{
content: ""; width:110px;
height:110px;
position: absolute;
bottom:-1px;
right:-1px;
z-index: 0;
background-image:url(https://brainx.com.hk/wp-content/uploads/2024/04/f9bd04-corner.png);
}
.school-box3{
width:100%;
height:225px;
position: relative;
display: grid;
text-transform: uppercase;
border:1px solid #fff;
border-radius: 10px;
overflow: hidden;
}
.school-box3 p{
line-height: 1.25em;
margin-bottom: 5px;
}
.school-box3 .thumbnail{
width:35%;
height: 100%;
position: relative;
overflow: hidden;
}
.school-box3 .school-excerpt{
width:65%;
padding: 30px;
position: relative;
}
.school-box3 .school-excerpt *,.school-box3 .school-excerpt a,.school-box3 .school-excerpt a:hover,.school-box3 .school-excerpt a:visited{
color:#fff;
}
.school-box3 .school-excerpt{
font-size:.85rem;
color:#fff;
line-height: 1.5em;
}
.school-box3 .school-excerpt h3{
font-size:1rem;
margin-bottom:5px;
line-height: 1.25em;
}
.school-box3 .school-excerpt a{
font-size:1rem;
position: absolute;
bottom:30px;
left:30px;
}
.school-box3 .school-excerpt a:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/icon-row.png);
width:30px;
height:30px;
content:"";
}
.school-box3 .school-excerpt .desc{
font-size:.83rem;
line-height: 1.5em;
}
.school-box3 .thumbnail img{
position: relative;
height:100%;
width:auto;
}
.school-box3 .thumbnail {
background-position: center center;
background-size:cover;
}
.number-box div{
z-index: 1;
}
.float-menu-1 > ul {
position: fixed;
bottom: 30px;
right: 40px !important;
z-index: 10;
top: unset !important;
}
.school-box3::after{
content: ""; width:110px;
height:110px;
position: absolute;
bottom:-1px;
right:-1px;
z-index: 0;
background-image:url(https://brainx.com.hk/wp-content/uploads/2024/04/4abaa9-corner.png);
}
.school-box4{
width:100%;
height:225px;
position: relative;
display: grid;
text-transform: uppercase;
border:1px solid #fff;
border-radius: 10px;
overflow: hidden;
}
.school-box4 p{
line-height: 1.25em;
margin-bottom: 5px;
}
.school-box4 .thumbnail{
width:35%;
height: 100%;
position: relative;
overflow: hidden;
}
.school-box4 .school-excerpt{
width:65%;
padding: 30px;
position: relative;
}
.school-box4 .school-excerpt *,.school-box4 .school-excerpt a,.school-box4 .school-excerpt a:hover,.school-box4 .school-excerpt a:visited{
color:#fff;
}
.school-box4 .school-excerpt{
font-size:.85rem;
color:#fff;
line-height: 1.5em;
}
.school-box4 .school-excerpt h3{
font-size:1rem;
margin-bottom:5px;
line-height: 1.25em;
}
.school-box4 .school-excerpt a{
font-size:1rem;
position: absolute;
bottom:30px;
left:30px;
}
.school-box4 .school-excerpt a:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/icon-row.png);
width:30px;
height:30px;
content:"";
}
.school-box4 .school-excerpt .desc{
font-size:.83rem;
line-height: 1.5em;
}
.school-box4 .thumbnail img{
position: relative;
height:100%;
width:auto;
}
.school-box4 .thumbnail {
background-position: center center;
background-size:cover;
}
.school-box4::after{
content: ""; width:110px;
height:110px;
position: absolute;
bottom:-1px;
right:-1px;
z-index: 0;
background-image:url(https://brainx.com.hk/wp-content/uploads/2024/04/50a4db-corner.png);
}
.elementor-1677 .elementor-tabs{
display: flex;
flex-direction: column-reverse; }
.elementor-1881 .elementor-tabs{
display: flex;
flex-direction: column-reverse; }
.research-box2{
width:100%;
height:270px;
position: relative;
display: flex;
text-transform: unset;
border:1px solid #fff;
border-radius: 10px;
overflow: hidden;
}
.research-box2 p{
line-height: 1.25em;
margin-bottom: 5px;
}
.research-box2 .thumbnail{
width:35%;
height: 100%;
position: relative;
overflow: hidden;
}
.research-box2 .research-excerpt{
width:65%;
padding: 30px;
position: relative;
}
.research-box2 .research-excerpt *,.research-box2 .research-excerpt a,.research-box2 .research-excerpt a:hover,.research-box2 .research-excerpt a:visited{
color:#fff;
}
.research-box2 .research-excerpt{
font-size:.85rem;
color:#fff;
line-height: 1.5em;
}
.research-box2 .research-excerpt h3{
font-size:1rem;
margin-bottom:5px;
line-height: 1.25em;
}
.research-box2 .research-excerpt a{
font-size:1rem;
position: absolute;
bottom:30px;
left:30px;
}
.research-box2 .research-excerpt a:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/icon-row.png);
width:30px;
height:30px;
content:"";
}
.research-box2 .research-excerpt .desc{
font-size:.83rem;
line-height: 1.5em;
}
.research-box2 .thumbnail img{
position: relative;
height:100%;
width:auto;
}
.research-box2 .thumbnail {
background-position: center center;
background-size:cover;
}
.number-box div{
z-index: 1;
}
.research-box2::after{
content: ""; width:110px;
height:110px;
position: absolute;
bottom:-1px;
right:-1px;
z-index: 0;
background-image:url(https://brainx.com.hk/wp-content/uploads/2024/04/f9bd04-corner.png);
}
.research-box3{
width:100%;
height:270px;
position: relative;
display: flex;
text-transform: uppercase;
border:1px solid #fff;
border-radius: 10px;
overflow: hidden;
}
.research-box3 p{
line-height: 1.25em;
margin-bottom: 5px;
}
.research-box3 .thumbnail{
width:35%;
height: 100%;
position: relative;
overflow: hidden;
}
.research-box3 .research-excerpt{
width:65%;
padding: 30px;
position: relative;
}
.research-box3 .research-excerpt *,.research-box3 .research-excerpt a,.research-box3 .research-excerpt a:hover,.research-box3 .research-excerpt a:visited{
color:#fff;
}
.research-box3 .research-excerpt{
font-size:.85rem;
color:#fff;
line-height: 1.5em;
}
.research-box3 .research-excerpt h3{
font-size:1rem;
margin-bottom:5px;
line-height: 1.25em;
}
.research-box3 .research-excerpt a{
font-size:1rem;
position: absolute;
bottom:30px;
left:30px;
}
.research-box3 .research-excerpt a:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/icon-row.png);
width:30px;
height:30px;
content:"";
}
.research-box3 .research-excerpt .desc{
font-size:.83rem;
line-height: 1.5em;
}
.research-box3 .thumbnail img{
position: relative;
height:100%;
width:auto;
}
.research-box3 .thumbnail {
background-position: center center;
background-size:cover;
}
.number-box div{
z-index: 1;
}
.float-menu-1 > ul {
position: fixed;
bottom: 75px;
right: 10px !important;
z-index: 10;
top: unset !important;
}
.float-menu-2 > ul {
position: fixed;
bottom: 75px;
right: 10px !important;
z-index: 10;
top: unset !important;
}
.research-box3::after{
content: ""; width:110px;
height:110px;
position: absolute;
bottom:-1px;
right:-1px;
z-index: 0;
background-image:url(https://brainx.com.hk/wp-content/uploads/2024/04/4abaa9-corner.png);
}
.research-box4{
width:100%;
height:270px;
position: relative;
display: flex;
text-transform: uppercase;
border:1px solid #fff;
border-radius: 10px;
overflow: hidden;
}
.research-box4 p{
line-height: 1.25em;
margin-bottom: 5px;
}
.research-box4 .thumbnail{
width:35%;
height: 100%;
position: relative;
overflow: hidden;
}
.research-box4 .research-excerpt{
width:65%;
padding: 30px;
position: relative;
}
.research-box4 .research-excerpt *,.research-box4 .research-excerpt a,.research-box4 .research-excerpt a:hover,.research-box4 .research-excerpt a:visited{
color:#fff;
}
.research-box4 .research-excerpt{
font-size:.85rem;
color:#fff;
line-height: 1.5em;
}
.research-box4 .research-excerpt h3{
font-size:1rem;
margin-bottom:5px;
line-height: 1.25em;
}
.research-box4 .research-excerpt a{
font-size:1rem;
position: absolute;
bottom:30px;
left:30px;
}
.research-box4 .research-excerpt a:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/icon-row.png);
width:30px;
height:30px;
content:"";
}
.research-box4 .research-excerpt .desc{
font-size:.83rem;
line-height: 1.5em;
}
.research-box4 .thumbnail img{
position: relative;
height:100%;
width:auto;
}
.research-box4 .thumbnail {
background-position: center center;
background-size:cover;
}
.htmlbtn:hover{
opacity: .85;
color:#fff;
}
.htmlbtn{
padding: 10px 20px !important;
border: unset;
}
.research-box4::after{
content: ""; width:110px;
height:110px;
position: absolute;
bottom:-1px;
right:-1px;	
z-index: 0;
background-image:url(https://brainx.com.hk/wp-content/uploads/2024/04/50a4db-corner.png);
}
.woocommerce ul.products {
margin: 0 10px 1em;
}
.thwepo-extra-options{
display:none;
}
.page-id-1157 .page-banner{
display:none;
} .floating-menu {
--fm-icon-size: 24px !important;
--fm-label-size: 15px !important;
--fm-label-font: inherit;
--fm-label-font-style: normal;
--fm-label-weight: normal;
--fm-border-radius: 50%;
--fm-color: #E86E2C;
--fm-hover-color: #E86E2C;
--fm-background: #1b094f;
--fm-hover-background: #1b094f;
--fm-z-index: 9999;
--fm-text-font: inherit;
--fm-text-size: 16px;
--fm-text-weight: normal;
visibility: visible !important;
z-index: var(--fm-z-index)
}
.floating-menu.fm-ready {
visibility: visible
}
.floating-menu a {
cursor: pointer;
text-decoration: none
}
.floating-menu ul {
list-style-type: none;
margin: 0;
padding: 0
}
@media print {
.floating-menu {
display: none
}
}
.fm-bar {
position: fixed;
z-index: 10100
}
.fm-bar li {
list-style: none
}
.fm-bar li>.fm-icon,.fm-bar li>.fm-icon [class*=fa-],.fm-bar li>.fm-link .fm-icon,.fm-bar li>.fm-link .fm-icon [class*=fa-],.fm-bar li>.fm-link .fm-label,.fm-bar li>.fm-link .fm-label [class*=fa-],.fm-bar li>.fm-mask .fm-link .fm-icon,.fm-bar li>.fm-mask .fm-link .fm-icon [class*=fa-],.fm-bar li>.fm-mask .fm-link .fm-label,.fm-bar li>.fm-mask .fm-link .fm-label [class*=fa-],.fm-bar li>.fm-mask a .fm-icon,.fm-bar li>.fm-mask a .fm-icon [class*=fa-],.fm-bar li>.fm-mask a .fm-label,.fm-bar li>.fm-mask a .fm-label [class*=fa-],.fm-bar li>a .fm-icon,.fm-bar li>a .fm-icon [class*=fa-],.fm-bar li>a .fm-label,.fm-bar li>a .fm-label [class*=fa-] {
color: var(--fm-color);
background-color: var(--fm-background)
}
.fm-bar li .fm-link {
cursor: pointer
}
.fm-bar li:hover {
z-index: 1001!important
}
.fm-bar li:hover>.fm-icon,.fm-bar li:hover>.fm-link .fm-icon,.fm-bar li:hover>.fm-mask .fm-link .fm-icon,.fm-bar li:hover>.fm-mask a .fm-icon,.fm-bar li:hover>a .fm-icon {
color: var(--fm-hover-color);
background-color: var(--fm-hover-background)
}
.fm-bar li:hover>.fm-link .fm-label,.fm-bar li:hover>.fm-mask .fm-link .fm-label,.fm-bar li:hover>.fm-mask a .fm-label,.fm-bar li:hover>a .fm-label {
color: var(--fm-hover-color);
background-color: var(--fm-hover-background);
z-index: 12
}
.fm-bar li:hover>.fm-icon [class*=fa-],.fm-bar li:hover>.fm-link .fm-icon [class*=fa-],.fm-bar li:hover>.fm-link .fm-label [class*=fa-],.fm-bar li:hover>.fm-mask .fm-link .fm-icon [class*=fa-],.fm-bar li:hover>.fm-mask .fm-link .fm-label [class*=fa-],.fm-bar li:hover>.fm-mask a .fm-icon [class*=fa-],.fm-bar li:hover>.fm-mask a .fm-label [class*=fa-],.fm-bar li:hover>a .fm-icon [class*=fa-],.fm-bar li:hover>a .fm-label [class*=fa-] {
color: var(--fm-hover-color);
background-color: var(--fm-hover-background)
}
.fm-bar li:hover>.fm-icon,.fm-bar li:hover>.fm-link .fm-icon,.fm-bar li:hover>.fm-mask .fm-link .fm-icon,.fm-bar li:hover>.fm-mask a .fm-icon,.fm-bar li:hover>a .fm-icon {
z-index: 13!important
}
.fm-bar .fm-link,.fm-bar a {
width: calc(var(--fm-icon-size)*2);
display: block;
position: relative;
text-decoration: none
}
.fm-bar.fm-right .fm-link,.fm-bar.fm-right a {
position: absolute;
right: 0
}
.fm-bar.fm-button-space li:not(:last-child) {
margin-bottom: 2px
}
.fm-bar.fm-right li {
height: calc(var(--fm-icon-size)*2)
}
.fm-bar.fm-side-space {
margin: 2px
}
.fm-round.fm-side-space {
margin-left: 3px
}
.fm-round .fm-icon,.fm-round .fm-link,.fm-round .fm-mask,.fm-round a,.fm-round li {
border-radius: calc((var(--fm-icon-size)*2)/2)
}
.fm-round.fm-button-space li:not(:last-child),.fm-rounded.fm-button-space li:not(:last-child) {
margin-bottom: 3px
}
.fm-round.fm-button-space .fm-space {
margin-top: 7px
}
.fm-round .fm-label {
border-radius: calc((var(--fm-icon-size)*2)/2);
padding: 0 12px
}
.fm-round .fm-hit,.fm-sub>ul {
width: calc(var(--fm-icon-size)*2)
}
.fm-round .fm-hit {
left: calc(var(--fm-icon-size)*2)
}
.fm-round.fm-label-space .fm-hit {
width: calc(var(--fm-icon-size)*2 - 4px)
}
.fm-round .fm-sub.fm-sub-space>ul,.fm-rounded .fm-sub.fm-sub-space>ul {
margin-top: 3px
}
.fm-round .fm-sub.fm-side.fm-sub-space>ul,.fm-rounded .fm-rounded .fm-sub.fm-side.fm-sub-space>ul {
margin: 0 3px
}
.fm-round .fm-panel,.fm-rounded li,.fm-rounded li img {
border-radius: 5px
}
.fm-round .fm-head {
border-radius: 5px 5px 0 0
}
.fm-connected .fm-label {
right: auto;
left: 0
}
.fm-rounded.fm-side-space {
margin-left: 3px
}
.fm-rounded.fm-button-space .fm-space {
margin-top: 7px
}
.fm-rounded .fm-icon,.fm-rounded .fm-label,.fm-rounded .fm-link,.fm-rounded .fm-mask,.fm-rounded .fm-mask img,.fm-rounded a {
border-radius: 5px
}
.fm-rounded .fm-label {
padding: 0 11px
}
.fm-rounded .fm-hit {
width: 10px;
left: calc(var(--fm-icon-size)*2 - 5px)
}
.fm-rounded-out.fm-label-space .fm-hit,.fm-rounded.fm-label-space .fm-hit {
width: 12px
}
.fm-rounded-out .fm-icon,.fm-rounded-out .fm-label,.fm-rounded-out .fm-link,.fm-rounded-out a,.fm-rounded-out img,.fm-rounded-out li {
border-radius: 0 5px 5px 0
}
.fm-rounded-out .fm-label {
padding: 0 11px;
left: calc(var(--fm-icon-size)*2 - 5px)
}
.fm-rounded-out .fm-hit {
width: 10px;
left: calc(var(--fm-icon-size)*2 - 5px)
}
.fm-rounded-out.fm-connected .fm-label {
left: 0
}
.fm-right .fm-mask {
height: calc(var(--fm-icon-size)*2)
}
.fm-icon>img,.fm-right .fm-icon,.fm-right .fm-mask {
position: absolute;
right: 0
}
.fm-right.fm-rounded-out .fm-icon,.fm-right.fm-rounded-out .fm-link,.fm-right.fm-rounded-out a {
border-radius: 5px 0 0 5px
}
.fm-right .fm-label {
padding: 0 8px 0 11px;
right: calc(var(--fm-icon-size)*2);
left: auto
}
.fm-right.fm-label-space .fm-label {
margin-right: 2px;
margin-left: 0
}
.fm-right.fm-connected .fm-label {
right: 0;
left: auto;
padding-left: var(--fm-icon-size)!important
}
.fm-right .fm-sub.fm-side>ul,.fm-right.fm-label-space .fm-hit,.fm-right.fm-round .fm-hit {
right: calc(var(--fm-icon-size)*2);
left: auto
}
.fm-right.fm-rounded .fm-hit,.fm-right.fm-rounded-out .fm-hit {
right: calc(var(--fm-icon-size)*2 - 5px);
left: auto
}
.fm-right.fm-rounded-out .fm-label {
border-radius: 5px 0 0 5px;
right: calc(var(--fm-icon-size)*2 - 5px)
}
.fm-right .fm-sub.fm-circular>ul,.fm-right .fm-subhit {
right: 0;
left: auto
}
.fm-space {
margin-top: 4px
}
.fm-button-space .fm-space {
margin-top: 6px
}
.fm-mask {
position: relative;
overflow: hidden
}
.fm-mask.fm-off {
overflow: visible
}
.fm-icon {
min-width: calc(var(--fm-icon-size)*2)!important;
height: calc(var(--fm-icon-size)*2)!important;
line-height: calc(var(--fm-icon-size)*2)!important;
position: relative!important;
z-index: 11!important;
display: inline-block!important;
vertical-align: middle!important;
text-align: center!important;
background-repeat: no-repeat!important;
font-size: var(--fm-icon-size)!important;
transition: background-color 100ms linear;
border-radius: 50%!important;
}
.fm-icon>img {
left: 0;
top: 0;
bottom: 0;
margin: auto
}
.fm-icon .fa {
line-height: calc(var(--fm-icon-size)*2)!important
}
.fm-hit,.fm-label {
position: absolute;
top: 0;
display: none
}
.bv-floating-bar {
position: fixed;
bottom: 80px;
right: 10px;
display: flex;
flex-direction: column;
gap: 0;
z-index: 8;
}
.bv-floating-bar a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-decoration: none;
color: white;
} .bv-floating-bar .bv-chat {
background-color: #1588C9;
}
.bv-floating-bar .bv-assessment {
background-color: #F8BD2C;
}
.bv-floating-bar .bv-whatsapp {
background-color: #1CAD3A;
} .bv-floating-bar a span {
position: absolute;
top: 0;
right: 50px;
display: flex;
justify-content: center;
align-items: center;
width: 180px;
height: 48px;
border-radius: 5px;
font-size: 14px;
white-space: nowrap;
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
color: white;
} .bv-floating-bar .bv-chat span {
background-color: #1588C9;
}
.bv-floating-bar .bv-assessment span {
background-color: #F8BD2C;
}
.bv-floating-bar .bv-whatsapp span {
background-color: #1CAD3A;
} .bv-floating-bar a:hover span {
opacity: 1;
transform: translateX(0);
}
.fm-label {
font-family: var(--fm-label-font);
font-style: var(--fm-label-font-style);
font-weight: var(--fm-label-weight);
font-size: var(--fm-label-size);
min-height: calc(var(--fm-icon-size)*2);
line-height: calc(var(--fm-icon-size)*2);
padding: 0 11px 0 8px;
z-index: 10;
box-sizing: border-box;
white-space: nowrap;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content
}
.fm-label .fm-extra-text {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
font-family: var(--fm-text-font);
font-size: var(--fm-text-size);
font-weight: var(--fm-text-weight);
font-style: normal;
line-height: 1.2;
padding-bottom: 12px;
cursor: default
}
.fm-label .fm-extra-text a {
position: relative;
width: auto;
display: inline;
text-decoration: underline
}
.fm-label .fm-extra-text li {
height: auto;
margin-bottom: 0
}
.fm-label-space .fm-label,.fm-label-space.fm-label {
margin-left: 2px
}
.fm-label-space .fm-hit {
width: 2px;
left: calc(var(--fm-icon-size)*2)
}
.fm-hit {
height: 100%;
left: 0
}
.fm-sub {
cursor: pointer
}
.fm-sub>.fm-icon {
position: relative;
z-index: 1000
}
.fm-sub>ul {
left: 0;
top: calc(var(--fm-icon-size)*2)
}
.fm-sub.fm-side>ul {
position: absolute;
left: calc(var(--fm-icon-size)*2);
top: 0
}
.fm-sub.fm-circular>ul {
position: absolute;
left: 0;
top: 0;
width: auto
}
.fm-sub.fm-sub-space>ul {
margin-top: 2px
}
.fm-sub.fm-side.fm-sub-space>ul {
margin: 0 2px
}
.fm-sub.fm-posabs>ul>li,.fm-sub>ul {
position: absolute
}
.fm-subhit,.fm-window {
position: absolute;
display: none;
left: 0;
top: 0
}
.fm-window {
position: fixed;
width: 100%;
height: 100%;
z-index: 10101
}
.fm-shadow {
background-color: #2f2f2f;
opacity: .3;
width: 100%;
height: 100%
}
.fm-panel {
background-color: #f0f0f0;
padding: 1px;
width: 100%;
max-width: 500px;
min-width: 300px;
position: absolute;
display: none
}
.fm-panel.fm-show {
display: block
}
.fm-winshadow .fm-panel {
box-shadow: 0 0 2px 1px rgba(47,47,47,.2)
}
.fm-head {
padding: 18px 17px
}
.fm-title {
color: #fff;
font-size: 22px;
display: inline
}
.fm-close {
float: right;
cursor: pointer;
color: #fff;
font-size: 20px;
position: relative;
top: -20px;
right: -10px
}
#fm-popup .fm-head {
background-color: #3af
}
.fm-black .fm-head {
background-color: #2a2a2a!important
}
.fm-blue .fm-head {
background-color: #4090ff!important
}
.fm-red .fm-head {
background-color: #f23d3d!important
}
.fm-yellow .fm-head {
background-color: #ffbd22!important
}
.fm-body {
font-size: 15px;
padding: 15px;
color: #707070;
content: "";
display: table;
clear: both
}
.fm-body p {
margin: 0;
line-height: 1.125
}
.fm-body p+p {
margin-top: 12px
}
.fm-show {
display: block!important
}
.fm-hide {
display: none!important
}
.fm-clearfix:after {
content: "";
display: table;
clear: both
}
.fm-hold-open {
display: block!important;
opacity: 1!important;
left: calc(var(--fm-icon-size)*2)!important
}
.fm-connected .fm-hold-open {
left: 0!important
}
.fm-icon-text {
padding: 0 10px;
width: -webkit-max-content!important;
width: -moz-max-content!important;
width: max-content!important
}
.fm-icon-text span img {
margin: 0!important;
vertical-align: middle
}
.fm-search .fm-input {
box-sizing: border-box;
max-height: calc(var(--fm-icon-size)*2)
}
.fm-search .fm-input::-webkit-search-cancel-button,.fm-search .fm-input::-webkit-search-decoration,.fm-search .fm-input::-webkit-search-results-button,.fm-search .fm-input::-webkit-search-results-decoration {
display: none
}
.has-wow-floating-menu:has(.skiptranslate) {
top: 0!important
}
.has-wow-floating-menu .skiptranslate {
display: none!important
} .green-box{
background:#5B8F39;
cursor: pointer;
}
.orange-box{
background:#F7881F;
}
footer .footer-top .section-wrapper{
padding:40px 15px;
}
[class^='menu-sitemap']>ul>li{
font-size:.83rem;
color:#23B3DB;
float:left;
margin-right:10px;
margin-bottom:20px;
width:calc(33% - 10px);
}
[class^='menu-sitemap'] .sub-menu{
display: flex;
flex-direction: column;
}
[class^='menu-sitemap'] ul.sub-menu{
margin:0;
padding:0;
font-size:1rem;
color:#fff;
}
[class^='menu-sitemap'] ul.sub-menu li:before{
content:"-";
}
[class^='menu-sitemap'] ul.sub-menu li a{
padding-left:10px;
}
.menu-sitemap>li{
}
.clearboth{
clear:both;
}
.footer-content-box img{
max-width:100%;
height: auto;
}
.footer-top .row{
align-items: center;
}
#menu-sitemap {
align-items: flex-start;
}
.copyright{
float:right;
}
footer .footer-bottom .section-wrapper{
padding:10px 15px;
}
.page-banner,.testi-banner{
background-image:url(//brainx.com.hk/wp-content/themes/blankslate/img/page-banner.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
min-height:250px;
color:#fff;
}
.page-title,.page-title-desc{	
max-width:1170px;
width:100%;
margin: auto;
text-shadow: 0 2px 3px rgba(0,0,0,0.35);
}
.page-banner .page-title,.testi-banner .page-title,.page-title-desc{
color: #fff !important;
}
.page-banner .page-title{
padding-left: 50%;
}
.page-title-desc{
padding-left: 65%;
}
h3.title{
font-size:2.67rem;
color:#283897;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
}
.center-text{
display: block;
text-align: center;
margin-bottom:30px;
}
.icon-box{
text-align: center;
}
.icon-img{
margin: auto;
display: block;
}
.bg-page-banner{
background-size: cover;
background-position: center center;
min-height: 375px;
}
.half-style .row>div{
position: relative;
}
.half-style-img{
position: absolute;
width:50vw;
right:0;
top:0;
bottom:0;
margin-top:-60px;
margin-bottom:-60px;
background-size: cover;
background-position: center center;
}
.half-style-content {
padding: 0px 40px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 300px;
}
.bg-page-banner{
color:#fff;
}
.bg-page-banner *{
height: 100%;
}
.small-h1{
color:#fff!important;
font-size:1.56rem;
}
.small-h1 span{
color:#23B3DB!important;
}
.page-banner-content-box{
min-height: 255px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: justify;
}
.page-banner-content-box h3{
text-align: left;
}
.section-desc {
margin-top: -10px;
margin-bottom: 30px;
}
.icon-img{
margin-bottom:10px;
}
.skill-box,.testi-box{
position: relative;
background:#fff;
}
.testi-box{
cursor:pointer;
}
.skill-img,.testi-img{
position: relative;
width:100%;
height:290px;
opacity: .15;
transition: all .3s ease-in-out;
background-size: cover;
background-position: center center;
transform: scale(1);
transition: all .3s ease-in-out;
}
.skill-title,.testi-title{
position: absolute;
width:100%;
height:100%;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 0;
top: 0;
left:0;
text-align: center;
font-size:1.2rem;
font-weight: 700;
color:#283897;
transition: all .3s ease-in-out;
opacity: 1;
}
.testi-box:hover .testi-title{
opacity: 0;
}
.testi-box:hover .testi-img{
opacity: 1;
transform: scale(0.9);
}
.skill-title:hover{
background:#23B3DB;
opacity: .8;
color:#fff;
}
.skill-content-box{
width:200%;
height:100%;
overflow: hidden;
background:#23B3DB;
color:#fff;
position: absolute;
top:0;
bottom:0;
left:100%;
transition: all .3s ease-in-out;
visibility: hidden;
opacity: 0;	
z-index: 10;
transform: translateY(-30px);
}
.row >div:nth-child(4n+3) .skill-content-box,.row >div:nth-child(4n+4) .skill-content-box{
left:unset;
right:100%;
}
.skill-box.active .skill-title{
opacity: 0;
}
.skill-box.active .skill-img{
opacity: 1;	
transform: scale(0.9);
}
.skill-box.active .skill-content-box{
visibility: visible;
opacity: 1;	
transform: translateY(0px);
z-index: 1000;
}
.skill-content-box-wrapper{
overflow-y: auto;
max-height: 100%;
padding-right: 15px;
}
.skill-content-box{
padding:30px;
}
.skill-content-box h3{
margin-bottom:20px;
font-size:1.2rem;
font-weight:700;
color:#fff;
}
.skill-content-box .close-btn{
color:#fff;
position: absolute;
right:15px;
top:10px; 
font-size:30px;
cursor: pointer;
}
.bg-blue{
color:#fff;
background:#283897;
}
.bg-blue h1{
color:#fff;
}
.section-divide{
margin-top:60px;
margin-bottom:60px;
}
.step-content{
height:100%;
padding:40px;	
border-radius: 20px;
position: relative;
}
.step-section .row>div{
margin-bottom:30px;
}
.step-section .row:nth-child(odd) > div:nth-child(odd){
order: 2;
}
.step-section .section-wrapper{
position: relative;
}
.step-img{
width:100%;
height:100%;
background-size: cover;
background-position: center center;
border:1px solid #fff;
border-radius: 20px;
}
#step1 .step-content{border:5px solid #F9BE02;}
#step2 .step-content{border:5px solid #4cbbaa;}
#step3 .step-content{border:5px solid #51a4dc;}
#step_btn1{ background:#F9BE02;}
#step_btn2{ background:#4cbbaa;}
#step_btn3{ background:#51a4dc;}
#step1 .btn-blue{background:#F9BE02 !important; border-color:#F9BE02 !important; color:#fff;}
#step2 .btn-blue{background:#4cbbaa !important; border-color:#4cbbaa !important; color:#fff;}
#step3 .btn-blue{background:#51a4dc !important; border-color:#51a4dc !important; color:#fff;}
[id^="step"] img.alignright{
margin-bottom:0;
}
.icon-row{
position: absolute;
bottom:0;
right:0;
}
.step-box{
text-align: center;
color:#fff;
font-size:1.2rem;
font-weight: 700;
position: relative;	
display: flex;
flex-direction: column;
justify-content: center;
min-height: 270px;
overflow: hidden;
border:1px solid #fff;
border-radius: 20px;
padding-left:15px;
padding-right:15px;
cursor: pointer;
}
.step-box:hover{
opacity: .8; 
cursor: pointer;
}
.step-box h3{
font-size:4rem;
color:#fff;
margin-bottom:10px;	
line-height: 1em;
}
.news-corner{
width:80px;
height:80px;
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/news-corner.png);
background-position: bottom right;
background-repeat: no-repeat;
position: absolute;
bottom:-1px;
right:-1px;
display: block;	
transition: all .15s linear;
}
.news-corner:hover{
filter:brightness(130%);
}
.news-box{
height: 100%;
}
.program-content-box,.news-content-box{
height:calc(100% - 250px);
}
.testi-case{
background:#FBFBFB;
margin-bottom:2px;
}
.case-title{
position: relative;
background:rgba(0,0,0,0.05);
padding:10px 15px;
cursor: pointer;
transition: all .3s linear;
}
.case-title>span{
font-size:.8rem;
color:#666;
padding-left:5px;
transition: all .3s linear;
}
.case-title>span:before{
content:"- ";
transition: all .3s linear;
}
.case-title:hover,.case-title.active{
background:rgba(35,179,219,1);
color:#fff;
}
.case-title:hover >span,.case-title:hover >span:before,.case-title.active >span,.case-title.active >span:before{
color:#fff;
}
.case-title i {
position: absolute;
bottom: 0;
top: 0;
margin: auto;
right: 15px;
font-size: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
transition: all .3s linear;
}
.case-title.active i{
transform: rotate(180deg);
}
.case-content{
display: none;
padding:10px 15px;
}
.testi-cat{ display: none; height: auto !important; }
.wpcf7-not-valid-tip {
margin-top: -10px;
margin-bottom: 20px;
}
.contact-info{
padding:40px;
height:100%;
overflow: hidden;
padding-right: 80px;
}
.contact-img {
margin: -20px;
margin-bottom: 20px;
}
.company-image{
background-position: center;
background-size: cover;
width:100%;
height:100%;
}
.contact-form-box {
padding: 40px 10px 40px 80px;
}
.contact-form-wrapper{
margin-bottom:40px;
}
.whatsapp_pop{
position: fixed;
bottom:30px;
right:30px;
z-index: 10;
}
.mobile-banner{
display: none;
}
.footer-icon a{
background:#23B3DB;
border:1px solid #23B3DB;
border-radius: 50px;
color:#535252;
width:43px;
height:43px;
line-height: 40px;
font-size: 1.2rem;
text-align: center;
margin-right:10px;
transition: all .3s linear;
}
.footer-icon a:hover{
color:#fff;
}
.footer-icon{
display: flex;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450;
background: #46b450;
color: #fff;
margin: 0.5em 0;
}
.wpcf7 form.invalid .wpcf7-response-output{
border-color: #ffb900;
background: #ffb900;
color: #fff;
margin: 0.5em 0;
}
.langauge-menu{
position: absolute;
right:15px;	
padding: 5px 10px;
background:rgb(24, 141, 203);
border:1px solid rgb(24, 141, 203);
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
top:0;
color:#fff;
display: flex;
margin:0;
font-size:.85rem;
line-height: 1em;
}
.langauge-menu li{
border-right:1px solid rgba(255,255,255,.5);
}
.langauge-menu li:last-child{
border:0;
}
.langauge-menu li a{
padding-left:10px;
padding-right:10px;
line-height: 1em;
}
.mobile-lang{
display: none;
}
.wp-pagenavi{
margin:auto;
margin-top:30px;
display: table;
}
.category .wp-pagenavi{
margin-bottom:30px;
}
.wp-pagenavi a,.wp-pagenavi a:visited,.wp-pagenavi a:focus{  border:1px solid #23B3DB; background:#23B3DB; color:#fff; transition: all .3s linear; }
.wp-pagenavi a:hover,.wp-pagenavi a:active{
border:1px solid rgb(24, 141, 203); background:rgb(24, 141, 203); color:#fff;
}
.wp-pagenavi span{ border:1px solid #999 !important; background:#999; color:#fff; }
.wp-pagenavi a,.wp-pagenavi span{
padding:10px 15px;
border-radius: 5px;
}
.index-more-news{
margin:auto;
margin-top:30px;
display: table;
}
.right-download-list{
position: relative;
padding:30px;
background:#eee;
}
.right-download-list h3{
background: #535252;
color:#fff;
margin-left:-30px;
margin-right:-30px;
margin-top:-30px;
padding:15px 30px;
}
.download-list-main-box a,.download-list-main-box input,.download-list-right-box a,.download-list-right-box input{
display: table;
padding:15px 30px;
line-height: 1em !important;
border-radius:50px;
margin-top:20px;
}
.download-list-main-box{
border-bottom:1px solid #ddd;
padding-bottom:15px;
margin-bottom:15px;
}
.download-list-right-box{
border-bottom:1px solid #ddd;
padding-bottom:15px;
margin-bottom:15px;	
}
.download-list-main-box:last-child,.download-list-right-box:last-child{
border-bottom:0px;
}
input[type="button"].std-popup-trigger.std-popup-template-11,.std-form-wrap.std-template-11 .std-form-submit{
background-color: #23B3DB;
border-radius: 5px;
}
.download-list-right-box input[type="button"].std-popup-trigger.std-popup-template-11{
font-size: .85rem;
padding: 5px 20px;
margin-top: 5px;
}
.ebook-title{
background:#eee;
padding:10px 20px;
}
.weeks-20 img,.technology-carousel img{
max-height: 100px;
width:auto;
margin:auto;
margin-bottom:15px;
}
.weeks-20,.technology-carousel{
font-size:1.75rem;
font-weight: 900;
line-height: 1.5em;
}
.weeks-20 a,.technology-carousel a,.weeks-20 a:hover,.technology-carousel a:hover,.weeks-20 a:visited,.technology-carousel a:visited{
color:#333;
}
.weeks-20 span,.technology-carousel span{
line-height: 1.1;
margin-top:5px;
font-size: 1.6rem;	
height: 55px ;
display: flex;
align-items: center;
font-weight: bolder;
}
.weeks-20 .item,.technology-carousel .item{
padding:30px;
background:#fff;
border:0;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
margin:10px;
height: 220px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.call-for-action{
margin-top:30px;
}
.swiper-button-next,.swiper-button-prev{
color:#fff;
background:rgba(0,0,0,.35);
text-align: center;
width: 45px;
position: absolute;
border-radius: 50px;
z-index:9;
}
.swiper-button-next{
left:100%;
right:unset;
}
.swiper-button-prev{
right:100%;
left:unset;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size:1rem ;
font-weight: bold;
}
.btn{
padding:5px 50px;
line-height: 1.5;
}
.call-for-action a,.call-for-action a:visited,.call-for-action a:active{
color:#fff;
margin-left:5px;
margin-right:5px;
margin-bottom:15px;
}
.list-article-wrapper{
display: flex;
justify-content: center;
flex-direction: column;
}
.list-article-box{	
color:#7a7a7a;
}
.list-article-box h3{
font-size:1.75rem;
margin-bottom:20px;
line-height: 1.5;
font-family: 'Roboto Condensed', sans-serif;
}
.lr-section .section-wrapper>div:nth-of-type(2n) div{
order:2;
}
.lr-section .section-wrapper>div:nth-of-type(2n) div.list-article-wrapper{
order:1;
}
.lr-section .section-wrapper>.row{
margin-top:18px;
maring-bottom:18px;
}
.lr-section .row:last-child{
margin-bottom: 0 !important;
}
.lr-section.resources-list h3 ,.article-list h3{
font-size: 1.25rem;
margin-bottom: 10px;
font-weight: bold;
line-height: 27px;
}
.lr-section{
color:#7a7a7a;
}
.lr-section h5{
color:grey;
margin-bottom: 10px;
font-weight: bold;
}
.lr-section.resources-list .list-article-box p:last-child{
margin-bottom: 0;
}
.thumbnail-wrapper {
display: flex;
align-items: center;
}
.thumbnail-wrapper>p {
margin:0
}
.thumbnail-wrapper>img,.thumbnail-wrapper>p>img,.thumbnail-wrapper>p>a>img{
border-radius:10px !important;
border:0 !important;
width: 100%;
height: auto;
}
.news-thumbnail {
width: 100%;
aspect-ratio: 16 / 9; }
.news-thumbnail iframe {
width: 100%;
height: 100%;
border: 0;
}
.coop-logo-group {
text-align: center;
}
.coop-logo-group img {
display: inline-block;
width: auto;
max-height: 123px;
margin: 10px 30px;
}
.coop-logo-group img:nth-child(n+5){
max-height: 78px;	
margin: 10px 25px !important;
}
[lang="en-US"] .item span {
font-size: 1.3rem;
}
.testimonial .swiper-slide{
height: auto;
}
:root {
--outline-color1: #f7bf01;
--outline-color2: #4ebbab;
--outline-color3: #52a4dc;
}
.services-title{	
font-size:2.25rem;
text-align:left;
font-weight:600;
padding-left: unset;
color: #2f2f2f !important;
margin-bottom: 0px;
text-shadow: 
-2px -2px 0 var(--outline-color1),
-2px  0px 0 var(--outline-color1),
-2px  2px 0 var(--outline-color1),
0px -2px 0 var(--outline-color1),
0px  2px 0 var(--outline-color1),
2px -2px 0 var(--outline-color1),
2px  0px 0 var(--outline-color1),
2px  2px 0 var(--outline-color1);
}
[lang="en-US"] .services-title {
font-size: 1.5rem;
text-align: center;
}
.step-btn div:nth-child(2) .services-title{
text-shadow: 
-2px -2px 0 var(--outline-color2),
-2px  0px 0 var(--outline-color2),
-2px  2px 0 var(--outline-color2),
0px -2px 0 var(--outline-color2),
0px  2px 0 var(--outline-color2),
2px -2px 0 var(--outline-color2),
2px  0px 0 var(--outline-color2),
2px  2px 0 var(--outline-color2);
}
.step-btn div:nth-child(3) .services-title{
text-shadow: 
-2px -2px 0 var(--outline-color3),
-2px  0px 0 var(--outline-color3),
-2px  2px 0 var(--outline-color3),
0px -2px 0 var(--outline-color3),
0px  2px 0 var(--outline-color3),
2px -2px 0 var(--outline-color3),
2px  0px 0 var(--outline-color3),
2px  2px 0 var(--outline-color3);
}
.service-box{
position: relative;
padding:20px;
border:3px solid #f9be03;
border-radius: 20px;
background:#fff;
height: 100%;
}
.page-template-page-research .service-box{
display: flex;
align-items: center;
justify-content: center;
}
.service-box img{
margin-top:10px;
width: 100%;
margin-left:auto;
margin-right:auto;
}
.service-box.no-img{
padding:20px 0 30px;
}
.service-box-en.img-text img{
margin:auto;
}
.service-box.no-img li{
margin-top:.5rem;
margin-bottom:.5rem;
}
.service-box.no-img .services-title{
font-size: 1.75rem;
}
.service-box.no-img .service-li {
padding-left:44px;
}
.service-box.no-img h3{
margin-bottom:20px;
line-height: 1.25 !important;
}
.service-box.no-img .service-li p{
}
.service-box.no-img .service-li li{
line-height: 1.15;
margin-top:.5rem;
margin-bottom:.5rem;
}
.img-text {
padding-left:20px !important;
padding-right:20px !important;
}
.img-text img{
max-height:100px;
width:auto;
height:auto;
z-index: 9;
}
[lang="en-US"] .service-box.no-img .services-title{
font-size: 1.45rem;
}
[lang="en-US"] .page-template-page-school .service-box.no-img .services-title {
font-size: 1.75rem;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-family: "roboto", sans-serif;
}
[lang="en-US"] .page-template-page-school .service-box.no-img li{
margin-top:.5rem;
margin-bottom:.5rem;
font-size:1.15rem;
}
.service-box[onclick]{
cursor: pointer;
}
.step-btn {
margin-top: 0;
}
.step-btn div{
position: relative;
}
.step-btn div:nth-child(2) .service-box{
border-color:var(--outline-color2);
}
.step-btn div:nth-child(3) .service-box{
border-color:var(--outline-color3);
}
.step-btn div:after{
position: absolute;
bottom:0;
right:0;
width:85px;
height:84px;
content:"";
pointer-events: none;
}
.step-btn div:nth-child(1) .service-box:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/step-icon1.webp);
}
.step-btn div:nth-child(2) .service-box:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/step-icon2.webp);
}
.step-btn div:nth-child(3) .service-box:after{
background-image: url(//brainx.com.hk/wp-content/themes/blankslate/img/step-icon3.webp);
}
.service-li{
color: #545454;
font-size: 1.4rem;
font-weight: 700;
margin-top:20px;
}
.service-li ul{
padding-left:0;
margin-left: 25px;
margin-bottom: 0;
} 
.service-box.no-img .service-li ul{
padding-left:5px;
}
h2.accordion-header{
margin-bottom: 0;
}
.accordion-button{
font-weight: bold;
font-size:1.25rem;
color:#283897 !important;
}
.accordion-button:focus {
box-shadow: unset !important;
}
.accordion-button,.accordion-body{
padding:15px;
}
.nav.nav-tabs{
list-style: none;
justify-content: center;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
color: #283897;
border-color: #dee2e6 #dee2e6 #fff;
}
.nav-link{
color:#999;
font-size: 1.5rem;
font-weight: bold;
padding: 20px 30px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.nav-tabs .nav-link:not(.active):hover {
color: #283897;
border-color: transparent transparent #dee2e6;
}
.tab-pane .tab-wrapper{
padding:20px;
}
.flip-card {
perspective: 1000px;
cursor: pointer;
display: grid; grid-template-rows: 1fr; height:100%;
}
.flip-card-inner {
position: relative;
display: grid; transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card-front,
.flip-card-back {
grid-area: 1 / 1; backface-visibility: hidden;
padding: 20px;
display: flex;
flex-direction: column;
min-height: 100%;
}
.flip-card-front > div,
.flip-card-back > div {
flex: 1;
}
.flip-card-back {
transform: rotateY(-180deg);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(-180deg);
}	
.grey-box{
background:#e5e5e5;
padding:30px !important;
border:0;
border-radius: 10px;
}
.grey-box h3{
margin-bottom:10px;
}
[lang="zh-HK"] .moxoform-en{
display: none;
visibility: hidden;
}
[lang="en-US"] .moxoform-zh{
display: none;
visibility: hidden;
}
#SR7_2_1 .hesperiden.sr7-arrows.sr7-leftarrow:before ,#SR7_2_1 .hesperiden.sr7-arrows.sr7-rightarrow:before{
font-family: swiper-icons !important;
content: 'prev' !important;
}
#SR7_2_1 .hesperiden.sr7-arrows.sr7-rightarrow:before{
content: 'next' !important;
}
.tab-wrapper table td{
padding:30px;
align-items: center;
display: flex;
font-size: 1.5rem;
font-weight: bolder;
line-height: 1.5em;
}
.tab-wrapper table td img{
margin-bottom:0;
}
div.accordion-item:last-child {
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
.roboto-text{
font-family: 'Roboto', sans-serif;	
}
.grey-title-text,.grey-title-text h2,.grey-title-text h3{
color:#7a7a7a;	
font-family: 'Roboto', sans-serif;	
}
.grey-title-text h2,.grey-title-text h3{
font-weight: 900;
}
.team-profile-img{
margin-bottom:20px;
}
.team-content.grey-title-text h2,.team-content.grey-title-text h3{
font-weight: 700;
}
[lang="en-US"] .smaller-in-en{
font-size:1.75rem !important;
}
[lang="en-US"] .school-step .service-li{
padding-left:20px !important;
}
.resources-list{
overflow-x:hidden ;
}
.resources-list .bg-grey{
position: relative;
}
.resources-list .bg-grey:before,.resources-list .bg-grey:after{
content: "";
background-image:url(//brainx.com.hk/wp-content/themes/blankslate/img/bg-grey.png);
width: 100vw;
height: 100%;
position: absolute;
margin-top: -3rem;
margin-bottom: -3rem;
right: 100%;
}
.resources-list .bg-grey:after{
right: unset;
left:100%;
}
.resources-list .list-article-box{
margin-bottom:0 !important;
}
.page-template-page-mission .list-article-box p:last-child{
margin-bottom:0;
}
.page-template-page-resources-php .page-title{
margin-bottom:0;
}
[lang="en-US"] .page-template-page-mission .list-article-box h3{
font-size: 1.25rem;
}
.text-justify{
text-align: justify !important;	
}
.m-thumbnail,.fixed-scale-thumbnail{	
background-size:cover;
background-position: center center;
aspect-ratio: 16/10;
width:100%;
border: 0; 
border-radius: 10px;
}
@keyframes gentleBounce {
0%, 100% {
transform:  scale(1);
}
50% {
transform:  scale(1.05);
}
}
.tree-btn:hover img{
animation: gentleBounce 0.5s infinite;
transform-origin: center;
backface-visibility: hidden;
will-change: transform;
}
.category-list{
margin:auto;
padding:0;
display: flex;
justify-content: center;
}
.category-list li{
list-style: none;
margin-left:7px;
margin-right:7px;
}
.category-list li a{
padding:10px 30px;
border-radius: 50px;
border: 0px solid transparent;
background:#666;
color:#fff;
display: block;
}
.category-list li.current-cat a,.category-list li.current-cat-parent a{
background:#23b3db;
}
.category-list a:visited,.category-list a:hover,.category-list a:focus,.category-list a:active{
color:#fff !important;
}
.category-list-wrapper:before,.category-list-wrapper:after {
margin-top: -1.5rem !important;
margin-bottom: -1.5rem !important;
}
.category-jump-menu{
display: flex;
justify-content: center;
}
.category-jump-menu select {
padding: 10px 20px;
color: #fff;
background: #a2a1a1;
border: 0;
min-width: 275px;
} .backtop {
width: 50px;
height: 50px;
background: rgb(36, 55, 141);
color: #fff;
position: fixed;
bottom: 0px;
left: 15px;
z-index: 1000;
opacity: 0;
visibility:hidden;
transition: all .3s linear;
text-align: center;
line-height: 42px;
border: 1px solid transparent;
border-radius: 5px;
font-size: 1.25em;
cursor: pointer;
}
.backtop:before{
content:"\f077";
font-family: "fontawesome";
}
.backtop.active{
opacity: .8;
visibility: visible;
bottom:40px;
}
.milestone *,
.milestone *::before,
.milestone *::after {
padding: 0;
box-sizing: border-box;
}
.milestone {
--color: rgba(30, 30, 30);
display: grid;
align-content: center;
gap: 2rem;
padding: 0 2rem;
color: var(--color);
background: var(--bgColor);
}
.milestone ul {
--col-gap: 2rem;
--row-gap: 2rem;
--line-w: 0.25rem;
display: grid;
grid-template-columns: var(--line-w) 1fr;
grid-auto-columns: max-content;
column-gap: var(--col-gap);
list-style: none;
width: min(60rem, 90%);
margin-inline: auto;
} .milestone ul::before {
content: "";
grid-column: 1;
grid-row: 1 / span 50;
background: rgb(225, 225, 225);
border-radius: calc(var(--line-w) / 2);
}  .milestone ul li:not(:last-child) {
margin-bottom: var(--row-gap);
} .milestone ul li {
grid-column: 2;
--inlineP: 1.5rem;
margin-inline: var(--inlineP);
grid-row: span 2;
display: grid;
grid-template-rows: min-content min-content min-content;  
} .milestone ul li .m-title {
--dateH: 3rem; margin-inline: calc(var(--inlineP) * -1);
text-align: left;
background-color: var(--accent-color);  
font-size: 1.25rem;
font-weight: 700;
display: grid;
place-content: center;
position: relative;
border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
} .milestone ul li .m-title::before {
content: "";
width: var(--inlineP);
aspect-ratio: 1;
background: var(--accent-color);
background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
position: absolute;
top: 100%;
clip-path: polygon(0 0, 100% 0, 0 100%);
right: 0;
} .milestone ul li .m-title::after {
content: "";
position: absolute;
width: 2rem;
aspect-ratio: 1;
background: var(--bgColor);
border: 0.3rem solid var(--accent-color);
border-radius: 50%;
top: 50%;
transform: translate(50%, -50%);
right: calc(100% + var(--col-gap) + var(--line-w) / 2);
} .milestone ul li .m-title{  
position: relative;
padding-inline: 1.5rem;
transition: all .3s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.milestone ul li .m-title .date{
text-align: right;
display: inline-block;
float:right;
color:#fff;
padding-left:20px;
font-size: .75em !important;
vertical-align: bottom;
}
.milestone ul li.m-thumbnail {
box-shadow: 0 0 3px rgba(0,0,0,.15);
}
.milestone ul li h3{
overflow: hidden;
padding-block-start: .75rem;
padding-block-end: .75rem;
margin-bottom:0 !important;
line-height: 1.5rem;
font-weight: bold;
display: inline;
color: #fff !important;
text-align: justify;
margin:unset !important;
}
.milestone ul li .desc {
padding-block-end: 1.5rem;
background: #fafafa;
padding: 15px 20px 15px;
}
.milestone .m-thumbnail{
border-radius: 0 !important;
box-shadow: 0 3px 6px #eee;
}
.milestone ul li div:last-child {
border: 0;
border-bottom-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
box-shadow: 0 3px 6px #eee;
color:#7a7a7a;
}
.article-post-thumbnail{
display: block;
width:100%;
aspect-ratio: 16 / 9;
background-position: center center;
background-size: cover;
border: 0;
border-radius: 10px;
} .resources-list{
font-family:Roboto, sans-serif;
font-weight:400;
}
.category img.alignright,.wp-singular img.alignright {
margin-bottom: 30px;
}
.category img.alignleft,.wp-singular img.alignleft {
margin-bottom: 30px;
}
.resources-list h1,.resources-list h2{
clear:both;
display: block;
margin-bottom:2rem;
margin-top:3rem;
}@media (min-width: 992px) and (max-width: 1366px) { 
.section-wrapper {
max-width: 100%;
width: 1200px;
}
header nav ul li a {
padding: 5px 10px;
font-size: 0.76rem;
}
.csv-section-wrapper{
max-width: 100%;
width: 1200px;
}
.csv-pc-banner{
height: 350px !important;
min-height: 350px !important;
}
.csv img{
height: auto;
width: 200px;
}
.weeks-20 .item, .technology-carousel .item {
padding: 10px 10px;
height: 100%;
aspect-ratio: 1/1;
}
.weeks-20 span, .technology-carousel span{
font-size:1.5rem;
} 
.weeks-20 .item img, .technology-carousel .item img {
width:auto;
height:55%;
margin-bottom:5%;
margin-top:5%
}
.t-next, .t-prev {
margin-left: -15px;
margin-right: -15px;
}	
.swiper-button-next{
left: calc(100% - 45px);
right:unset;
}
.swiper-button-prev{
right: calc(100% - 45px);
left:unset;
}
}
@media (min-width: 40rem) {
.milestone ul {
grid-template-columns: 1fr var(--line-w) 1fr;
}
.milestone ul::before {
grid-column: 2;
}
.milestone ul li:nth-child(odd) {
grid-column: 1;
}
.milestone ul li:nth-child(even) {
grid-column: 3;
} .milestone ul li:nth-child(2) {
grid-row: 2/4;
}
.milestone ul li:nth-child(odd) .m-title::before {
clip-path: polygon(0 0, 100% 0, 100% 100%);
left: 0;
}
.milestone ul li:nth-child(odd) .m-title::after {
transform: translate(-50%, -50%);
left: calc(100% + var(--col-gap) + var(--line-w) / 2);
}
.milestone ul li:nth-child(odd) .m-title {
border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
}
}
@media (max-width: 991px) {
body{
width:100%;
overflow-x: hidden;
font-size:15px;
}
.header-wrapper,.footer-wrapper{
width: 100%;
padding: 0;
}
.section .section-wrapper, .footer-contact-form .section-wrapper ,.section-wrapper{
max-width:100%;
width:100%;
}
body.no-scroll {
overflow: hidden;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.mobile-menu-btn{
display: block;
height: 25px;
right: 20px;
margin: auto;
overflow: hidden;
position: absolute;
top: 18px;
width: 25px;
z-index: 1000;	
cursor:pointer;  
}
.mobile-menu-btn div {
background:#333;
height: 2px;
margin: auto;
transition: all 0.3s ease 0s;
width: 25px;
}
.mobile-menu-btn.active div {
background:#fff;
}
.mobile-menu-btn div:nth-of-type(1) {
position: absolute;
top: 3px;
}
.mobile-menu-btn div:nth-of-type(2) {
bottom: -50%;
opacity: 100;
position: absolute;
top: -50%;
}
.mobile-menu-btn div:nth-of-type(3) {
bottom: 3px;
position: absolute;
}
.mobile-menu-btn.active div:nth-of-type(1) {
position: absolute;
top: 10px;
transform: rotate(45deg);
}
.mobile-menu-btn.active div:nth-of-type(2) {
opacity: 0;
}
.mobile-menu-btn.active div:nth-of-type(3) {
bottom: 12px;
position: absolute;
transform: rotate(-45deg);
}
.mobile-menu-btn.active{
position: fixed;
top:18px;
z-index: 11;
}
.mask{
background:rgba(0,0,0,.8);
position: fixed;
width:100%;
height:100%;
z-index: 10;
display: none;
}	
.logo {
padding-left:0px;
padding-right:0px;
}
.logo img {
width: auto !important;
height: 40px !important;
display: block;
}
header .logo-slogun {
display: none;
}
.page-title{
font-size: 1.5em;
margin-bottom: 10px;
padding: 0 50px;
}
h2.title{
font-size: 1.25em;
margin-bottom: 10px;
} .half-style .section-wrapper{
padding:0;
}
.half-style-img {
position: relative;
width: 100%;
right: unset;
top: unset;
bottom: unset;
margin-top: unset;
margin-bottom: unset;
height: 300px;
margin-left: 0px;
margin-right: 0px;
}
.half-style-content{
padding: 30px 15px;
min-height: 0;
}
h1.section-title {
margin-bottom: 15px;
}
.skill-img{
height:180px;
}
.skill-content-box{
position: fixed !important;
left:15px !important;
top:30px !important;
right:15px !important;
bottom:30px !important;
margin: auto !important;
width: auto;
height:auto;
}
header nav {
font-size: .9rem;
}
header nav ul {
flex-direction: column;
}
header nav ul li a{
padding-top:8px;
padding-bottom:8px;
}
.menu-section-wrapper{
min-height: unset;
}
.menu-section,.menu-section.menu-savetop{
position: fixed;
z-index: 10;
top: 0;
left: 0;
right: unset;
height: 100%;
background:rgba(83,82,82,1);
visibility: hidden;
opacity: 0;
transition: all .3s ease-in-out;
transform:translateX(-100%);
width:50vw;
}
.menu-section.active,.menu-section.menu-savetop.active{
visibility: visible;
opacity: 1;
transform:translateX(0%);
}
header nav ul li:after{
display: none;
}
.menu-section .section-wrapper{
padding:0;
}
.social-btn {
display: block;
float: unset;
margin-top: 10px;
margin-left: 10px;
}
header nav ul li .sub-menu {
position: relative;
display: flex;
visibility: visible !important;
opacity: 1 !important;
background:rgba(0,0,0,0.2);
}
header nav .current-menu-ancestor:before, header nav .current-menu-parent:before, header nav>ul>li.current-menu-item:before,.category .resources-menu-btn:before,.single-post .resources-menu-btn:before{
display: none;
}
header nav ul li .sub-menu a:before{
content:"- ";
}
header nav[class^="menu-top-menu-zh"] ul li a{
padding-left:15px;
padding-right:15px;
}
[class^='menu-sitemap'] ul{
padding:0;
}
.header-slogun{
display: none;
}
.half-style .section-wrapper{
padding-top:0 !important;
}
.section-wrapper h3 {
font-size: 1.15rem;
}
.article-box .article-excerpt {
width: 65%;
padding: 15px;
}
.small-wrapper{ padding:0; }
.article-box {
height: 185px;
}
.article-box .article-excerpt a {
bottom: 15px;
left: 15px;
}
footer .footer-top .section-wrapper {
padding: 25px 15px;
}
.half-style {
overflow:hidden;
}
.step-box h3 {
font-size: 4rem !important;
}
.footer-icon{
margin-bottom:20px !important;
}
.langauge-menu {
display: none;
}
.mobile-lang{
display: block;
top: 20px;
right: 64px;
border-right: 1px solid #999;
padding-right: 15px;
position: absolute;
}
.number-box {
padding: 20px 5px;
}
.tree-section .section-wrapper>div{
padding-left:0;
padding-right:0;
}
.weeks-20 .item, .technology-carousel .item {
padding: 10px 5px;
height: 100%;
aspect-ratio: 1/1;
font-size:1.5rem;
}
.weeks-20 span, .technology-carousel span{
font-size:1.5rem;
}
[lang="en-US"] .weeks-20 span,[lang="en-US"] .technology-carousel span{
font-size:1.15rem;
}
.weeks-20 .item img, .technology-carousel .item img {
width:auto;
height:55%;
margin-bottom:5%;
margin-top:5%
}
.t-next, .t-prev {
margin-left: -15px;
margin-right: -15px;
}	
.swiper-button-next{
left: calc(100% - 45px);
right:unset;
}
.swiper-button-prev{
right: calc(100% - 45px);
left:unset;
}
.page-template-page-moxo .page-banner-content-box {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
}
.page-template-page-moxo .page-banner-content-box h1{
margin-bottom:30px;
}
.milestone{
padding-right:0 !important;
padding-left:15px !important;
}
.milestone ul li h3{
font-size: 1rem;
text-align: left;
}
.milestone ul {
--col-gap: 1.5rem;
--row-gap: 1.5rem;
}
.category-list {
justify-content: unset;
overflow-x: auto;
padding-bottom:10px;
}
.category-list li{
white-space: nowrap;
}
.category-jump-menu select {
width: 100%;
}  
.lr-section .section-wrapper>div:nth-of-type(2n) div{
order:1;
}
.smt-40,.smt-80{
scroll-margin-top:0px;
}
}
@media (max-width: 767px) {
.section-wrapper h3{
font-size:1.25rem;
}
.number-box h3.number {
font-size: 2.1rem;
}
.number-box .year {
font-size: 1.85rem;
}
.section .section-wrapper {
padding-top: 30px;
padding-bottom: 30px;
}
.section-wrapper h1.title, .page-title,h1.section-title{
font-size:1.4rem;
}
.section-wrapper h2 {
font-size: 1.3rem;
}
.small-wrapper h1, .small-wrapper h2, .small-wrapper h3, .small-wrapper h4, .small-wrapper h5, .small-wrapper h6{
text-align: initial;
}
#menu-sitemap{
padding-left:0;
}
.mobile-banner{
display: block;
background-size: cover;
background-position: center center ;
min-height:200px;
}
.mobile-banner .section-wrapper{
padding:0;
height: 100%;
}
.aboutus-banner-800 {
height: auto;
padding: 15px;
padding-top: 320px;
background-position: center top;
}
.pc-banner{
display: none;
} .page-banner .page-title, .testi-banner .page-title {
padding-left: 15px;
padding-right: 15px;
height: 200px;
padding-top: 0;
padding-bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;    
}
.contact-form-box{
padding: 20px;
padding-bottom:0;
}
.contact-info{
padding: 20px;
padding-top:0;
}
div[class^="menu-footer"]{
display: none;
}
.copyright {
width: 100%;
text-align: center;
}	
[class^='menu-sitemap']>ul>li {
width: calc(50% - 10px);
}
.whatsapp_pop {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 10;
}
.whatsapp_pop img{
width: 40px;
height: 40px;
}
.step-box{
display: none;
}
.step-content {
padding: 25px;
}
.step-content p img{
margin-bottom:20px !important;		
}
.step-section .row:nth-child(even) > div:nth-child(odd) {
order: 0;
}
.section-divide {
margin-top: 30px;
margin-bottom: 30px;
}
#grid-info > .elementor-widget-container > * {
margin-bottom: 15px; }
.article-box2, .article-box3, .article-box4{
height:350px;
}
.floating-menu{
display: block;
}
.csv{
text-align: right !important; padding-left: 65% !important;
padding-bottom: 5%;
padding-top: 9%;
padding-right: 2%;
}
.csv-m{
font-size: 0.75em!important;
}
.csv img{
height: auto;
width: 100px !important;
}
.csv-mobile-banner{
height: 155px !important;
min-height: 155px !important;
}
.swiper-button-next{
left:calc(100% - 45px);
right:unset;
}
.swiper-button-prev{
right:calc(100% - 45px);
left:unset;
}
.coop-logo-group img {
width: auto;
margin: auto;
display: table;
}
.coop-logo-group img:nth-child(n+5) {
width: auto;
margin: 20px auto 35px !important;
}
.swiper{
margin-left:-20px;
margin-right:-20px;
}
#index-banner .swiper{
margin-left:0px !important;
margin-right:0px !important;
width:100%;
}
.lr-section .section-wrapper>.row{
margin-top:10px;
maring-bottom:10px;
}
.step-content .alignright {
display: block !important;
clear: both !important;
margin: auto;
margin-bottom: 20px;
float: none;
}
.program-video iframe {
max-width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
.page-banner-content-box{
padding-left:0px;
padding-right:0px;
}
.page-banner-content-box h1{
font-size: 1.4rem;
padding-top: 170px;
text-align: center;
}
.nav-link{
font-size: 1rem;
padding: 10px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.nav.nav-tabs{
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
justify-content: left;
}
.tab-pane .tab-wrapper{
padding:0px;
padding-top:20px;
}
.accordion-button, .accordion-body {
padding: 10px;
}
html {
overflow-x: hidden;
}
.program-content-box, .news-content-box {
height: calc(100% - 190px);
}
.tab-wrapper table td{
flex-direction: column;
text-align: justify;
}
.tab-wrapper table td img{
margin:0;
margin-bottom:30px;
float: unset;
}
.weeks-20 .item, .technology-carousel .item {
padding: 10px 5px;
height: 100%;
aspect-ratio: 1/1;
font-size:1.5rem;
}
.weeks-20 span, .technology-carousel span{
font-size:1.5rem;
}
[lang="en-US"] .weeks-20 span,[lang="en-US"] .technology-carousel span{
font-size:1.15rem;
}
.weeks-20 .item img, .technology-carousel .item img {
width:auto;
height:55%;
margin-bottom:5%;
margin-top:5%
}
.section-wrapper h3.services-title{
font-size:2.25rem !important;
}
[lang="en-US"] .section-wrapper h3.services-title{
font-size:1.6rem !important;
}
.school-step{
min-height: 250px;
}
[lang="en-US"] .service-box.no-img.school-step .service-li{
padding-left: 10px !important;
padding-right:20px;
}
.school-step2{
min-height: 225px;
}
[lang="zh-HK"]  .section-wrapper h3.services-title.long-services-title{
font-size:1.75rem !important;
}
.tree-btn-section .small-wrapper{
padding-left:15px !important;
padding-right:15px !important;
}
.page-template-page-about .page-title-desc,.page-template-page-mission .page-title-desc{
padding: 150px 1rem 1rem;
}
.page-template-page-about .page-title-desc h1,.page-template-page-mission .page-title-desc h1{
text-align: center;
font-size: 1.4rem;
}
}