@charset "utf-8";
/* css/plugins.css */
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,
font,
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 {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
outline: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
blockquote {
quotes: none;
}
blockquote:before,
blockquote:after {
content: '';
content: none;
}
ul,
ol {
margin: 0px;
}
ul li,
ol li {
margin: 0px;
}
img {
vertical-align: middle;
max-width: 100%;
}
iframe {
max-width: 100%;
}
del {
text-decoration: line-through;
}
a,
i {
border: none;
}
a:hover {
text-decoration: none;
}
table {
width: 100%;
max-width: 100%;
text-align: left;
border-collapse: collapse;
border-spacing: 0px;
margin-bottom: 15px;
color: #999;
border: 1px solid #eee;
}
table tr {
border: 1px solid #eee;
}
table th {
vertical-align: top;
color: #333;
background: none;
font-size: 16px;
font-weight: normal;
padding: 15px 10px;
border: 1px solid #eee;
}
table td {
vertical-align: top;
padding: 10px;
border: 1px solid #eee;
}
code,
pre {
padding: 10px;
padding-bottom: 0;
border-left: 3px solid #6FBF71;
border-bottom: 1px solid transparent;
background: #f7f7f7;
overflow-x: scroll;
}
pre {
display: block;
word-break: break-all;
word-wrap: break-word;
}
pre code {
white-space: pre-wrap;
}
.space10 {
width: 100%;
float: left;
clear: both;
margin-bottom: 10px;
}
.space20 {
width: 100%;
float: left;
clear: both;
margin-bottom: 20px;
}
.space30 {
width: 100%;
float: left;
clear: both;
margin-bottom: 30px;
}
.space40 {
width: 100%;
float: left;
clear: both;
margin-bottom: 40px;
}
.space50 {
width: 100%;
float: left;
clear: both;
margin-bottom: 50px;
}
.space60 {
width: 100%;
float: left;
clear: both;
margin-bottom: 60px;
}
.space70 {
width: 100%;
float: left;
clear: both;
margin-bottom: 70px;
}
.space80 {
width: 100%;
float: left;
clear: both;
margin-bottom: 80px;
}
.space90 {
width: 100%;
float: left;
clear: both;
margin-bottom: 90px;
}
.space100 {
width: 100%;
float: left;
clear: both;
margin-bottom: 100px;
}
.space200 {
width: 100%;
float: left;
clear: both;
margin-bottom: 200px;
}
.space300 {
width: 100%;
float: left;
clear: both;
margin-bottom: 300px;
}
.space400 {
width: 100%;
float: left;
clear: both;
margin-bottom: 400px;
}
.space500 {
width: 100%;
float: left;
clear: both;
margin-bottom: 500px;
}
.space1000 {
width: 100%;
float: left;
clear: both;
margin-bottom: 1000px;
}
textarea {
border-radius: 0;
font-size: 13px;
resize: vertical;
font-family: "Space Grotesk", system-ui, sans-serif;
letter-spacing: 1.2px !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
line-height: 1.4;
padding: 10px!important;
width: 100%;
border: 1px solid #eee;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
border-radius: 0;
font-size: 13px;
min-width: auto;
letter-spacing: 1.4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
font-family: "Space Grotesk", system-ui, sans-serif;
line-height: 1.6;
padding: 10px!important;
height: 44px;
vertical-align: middle;
border: 1px solid #eee;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: #ccc;
background: #eee;
}
input[type="submit"] {
padding: 13px 15px;
height: 40px;
line-height: 1;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.5px;
border: none;
cursor: pointer;
color: #FFF;
background: #777;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
input[type="submit"]:hover {
background: #444;
}
select {
padding: 8px;
border: 2px solid #eee;
}
input[type="button"] {
cursor: pointer;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.mfp-bg,
.mfp-wrap {
position: fixed;
left: 0;
top: 0;
}
.mfp-bg,
.mfp-container,
.mfp-wrap {
height: 100%;
width: 100%;
}
.mfp-arrow:after,
.mfp-arrow:before,
.mfp-container:before,
.mfp-figure:after {
content: '';
}
.mfp-bg {
z-index: 1042;
overflow: hidden;
background: #0b0b0b;
opacity: .8;
}
.mfp-wrap {
z-index: 1043;
outline: 0!important;
-webkit-backface-visibility: hidden;
}
.mfp-container {
text-align: center;
position: absolute;
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box;
}
.mfp-container:before {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.mfp-align-top .mfp-container:before {
display: none;
}
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045;
}
.mfp-ajax-holder .mfp-content,
.mfp-inline-holder .mfp-content {
width: 100%;
cursor: auto;
}
.mfp-ajax-cur {
cursor: progress;
}
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out;
}
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
cursor: auto;
}
.mfp-arrow,
.mfp-close,
.mfp-counter,
.mfp-preloader {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.mfp-loading.mfp-figure {
display: none;
}
.mfp-hide {
display: none!important;
}
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -.8em;
left: 8px;
right: 8px;
z-index: 1044;
}
.mfp-preloader a {
color: #CCC;
}
.mfp-close,
.mfp-preloader a:hover {
color: #FFF;
}
.mfp-s-error .mfp-content,
.mfp-s-ready .mfp-preloader {
display: none;
}
button.mfp-arrow,
button.mfp-close {
overflow: visible;
cursor: pointer;
background: 0 0;
border: 0;
-webkit-appearance: none;
display: block;
outline: 0;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation;
}
.mfp-figure:after,
.mfp-iframe-scaler iframe {
box-shadow: 0 0 8px rgba(0,0,0,.6);
position: absolute;
left: 0;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: .65;
padding: 0 0 18px 10px;
font-style: normal;
font-size: 28px;
font-family: Arial,Baskerville,monospace;
}
.mfp-close:focus,
.mfp-close:hover {
opacity: 1;
}
.mfp-close:active {
top: 1px;
}
.mfp-close-btn-in .mfp-close {
color: #333;
}
.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close {
color: #FFF;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%;
}
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
font-size: 12px;
line-height: 18px;
white-space: nowrap;
}
.mfp-figure,
img.mfp-img {
line-height: 0;
}
.mfp-arrow {
position: absolute;
opacity: .65;
margin: -55px 0 0;
top: 50%;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active {
margin-top: -54px;
}
.mfp-arrow:focus,
.mfp-arrow:hover {
opacity: 1;
}
.mfp-arrow:after,
.mfp-arrow:before {
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: inset transparent;
}
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px;
}
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: .7;
}
.mfp-arrow-left {
left: 0;
}
.mfp-arrow-left:after {
border-right: 17px solid #FFF;
margin-left: 31px;
}
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3F3F3F;
}
.mfp-arrow-right {
right: 0;
}
.mfp-arrow-right:after {
border-left: 17px solid #FFF;
margin-left: 39px;
}
.mfp-arrow-right:before {
border-left: 27px solid #3F3F3F;
}
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px;
}
.mfp-image-holder .mfp-content,
img.mfp-img {
max-width: 100%;
}
.mfp-iframe-holder .mfp-close {
top: -40px;
}
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
display: block;
top: 0;
width: 100%;
height: 100%;
background: #000;
}
.mfp-figure:after,
img.mfp-img {
width: auto;
height: auto;
display: block;
}
img.mfp-img {
box-sizing: border-box;
padding: 40px 0;
margin: 0 auto;
}
.mfp-figure:after {
top: 40px;
bottom: 40px;
right: 0;
z-index: -1;
background: #444;
}
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px;
}
.mfp-figure figure {
margin: 0;
}
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto;
}
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
word-wrap: break-word;
padding-right: 36px;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer;
}
@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0;
}
.mfp-img-mobile img.mfp-img {
padding: 0;
}
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0;
}
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px;
}
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0,0,0,.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
box-sizing: border-box;
}
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0;
}
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px;
}
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0,0,0,.6);
position: fixed;
text-align: center;
padding: 0;
}
}
@media all and (max-width:900px){
.mfp-arrow {
-webkit-transform: scale(.75);
transform: scale(.75);
}
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0;
}
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.mfp-container {
padding-left: 6px;
padding-right: 6px;
}
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.infinite {
animation-iteration-count: infinite;
}
.animated.hinge {
animation-duration: 2s;
}
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
animation-duration: .75s;
}
@keyframes bounce {
from,
20%,
53%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
}
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
}
@keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
.flash {
animation-name: flash;
}
@keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
.pulse {
animation-name: pulse;
}
@keyframes rubberBand {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, .95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
.rubberBand {
animation-name: rubberBand;
}
@keyframes shake {
from,
to {
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
transform: translate3d(10px, 0, 0);
}
}
.shake {
animation-name: shake;
}
@keyframes headShake {
0% {
transform: translateX(0);
}
6.5% {
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
transform: translateX(5px) rotateY(7deg);
}
31.5% {
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
transform: translateX(2px) rotateY(3deg);
}
50% {
transform: translateX(0);
}
}
.headShake {
animation-timing-function: ease-in-out;
animation-name: headShake;
}
@keyframes swing {
20% {
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
transform: rotate3d(0, 0, 1, -5deg);
}
to {
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
transform-origin: top center;
animation-name: swing;
}
@keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%,
20% {
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
.tada {
animation-name: tada;
}
@keyframes wobble {
from {
transform: none;
}
15% {
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
transform: none;
}
}
.wobble {
animation-name: wobble;
}
@keyframes jello {
from,
11.1%,
to {
transform: none;
}
22.2% {
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.jello {
animation-name: jello;
transform-origin: center;
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
animation-name: bounceIn;
}
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
}
}
.bounceInDown {
animation-name: bounceInDown;
}
@keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
to {
transform: none;
}
}
.bounceInLeft {
animation-name: bounceInLeft;
}
@keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: none;
}
}
.bounceInRight {
animation-name: bounceInRight;
}
@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
animation-name: bounceInUp;
}
@keyframes bounceOut {
20% {
transform: scale3d(.9, .9, .9);
}
50%,
55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
}
.bounceOut {
animation-name: bounceOut;
}
@keyframes bounceOutDown {
20% {
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.bounceOutDown {
animation-name: bounceOutDown;
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
.bounceOutLeft {
animation-name: bounceOutLeft;
}
@keyframes bounceOutRight {
20% {
opacity: 1;
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
.bounceOutRight {
animation-name: bounceOutRight;
}
@keyframes bounceOutUp {
20% {
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
.bounceOutUp {
animation-name: bounceOutUp;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDownBig {
from {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInDownBig {
animation-name: fadeInDownBig;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInLeftBig {
animation-name: fadeInLeftBig;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRightBig {
from {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInRightBig {
animation-name: fadeInRightBig;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUpBig {
from {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUpBig {
animation-name: fadeInUpBig;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
.fadeOutDown {
animation-name: fadeOutDown;
}
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.fadeOutDownBig {
animation-name: fadeOutDownBig;
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
}
.fadeOutLeft {
animation-name: fadeOutLeft;
}
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
.fadeOutLeftBig {
animation-name: fadeOutLeftBig;
}
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
}
.fadeOutRight {
animation-name: fadeOutRight;
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
.fadeOutRightBig {
animation-name: fadeOutRightBig;
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
animation-name: fadeOutUp;
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
.fadeOutUpBig {
animation-name: fadeOutUpBig;
}
@keyframes flip {
from {
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) scale3d(.95, .95, .95);
animation-timing-function: ease-in;
}
to {
transform: perspective(400px);
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
animation-name: flip;
}
@keyframes flipInX {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: flipInX;
}
@keyframes flipInY {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: flipInY;
}
@keyframes flipOutX {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@keyframes flipOutY {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: flipOutY;
}
@keyframes lightSpeedIn {
from {
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
transform: skewX(20deg);
opacity: 1;
}
80% {
transform: skewX(-5deg);
opacity: 1;
}
to {
transform: none;
opacity: 1;
}
}
.lightSpeedIn {
animation-name: lightSpeedIn;
animation-timing-function: ease-out;
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.lightSpeedOut {
animation-name: lightSpeedOut;
animation-timing-function: ease-in;
}
@keyframes rotateIn {
from {
transform-origin: center;
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
transform-origin: center;
transform: none;
opacity: 1;
}
}
.rotateIn {
animation-name: rotateIn;
}
@keyframes rotateInDownLeft {
from {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
transform-origin: left bottom;
transform: none;
opacity: 1;
}
}
.rotateInDownLeft {
animation-name: rotateInDownLeft;
}
@keyframes rotateInDownRight {
from {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform-origin: right bottom;
transform: none;
opacity: 1;
}
}
.rotateInDownRight {
animation-name: rotateInDownRight;
}
@keyframes rotateInUpLeft {
from {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform-origin: left bottom;
transform: none;
opacity: 1;
}
}
.rotateInUpLeft {
animation-name: rotateInUpLeft;
}
@keyframes rotateInUpRight {
from {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
transform-origin: right bottom;
transform: none;
opacity: 1;
}
}
.rotateInUpRight {
animation-name: rotateInUpRight;
}
@keyframes rotateOut {
from {
transform-origin: center;
opacity: 1;
}
to {
transform-origin: center;
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.rotateOut {
animation-name: rotateOut;
}
@keyframes rotateOutDownLeft {
from {
transform-origin: left bottom;
opacity: 1;
}
to {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.rotateOutDownLeft {
animation-name: rotateOutDownLeft;
}
@keyframes rotateOutDownRight {
from {
transform-origin: right bottom;
opacity: 1;
}
to {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutDownRight {
animation-name: rotateOutDownRight;
}
@keyframes rotateOutUpLeft {
from {
transform-origin: left bottom;
opacity: 1;
}
to {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutUpLeft {
animation-name: rotateOutUpLeft;
}
@keyframes rotateOutUpRight {
from {
transform-origin: right bottom;
opacity: 1;
}
to {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.rotateOutUpRight {
animation-name: rotateOutUpRight;
}
@keyframes hinge {
0% {
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%,
60% {
transform: rotate3d(0, 0, 1, 80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40%,
80% {
transform: rotate3d(0, 0, 1, 60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.hinge {
animation-name: hinge;
}
@keyframes jackInTheBox {
from {
opacity: 0;
transform: scale(0.1) rotate(30deg);
transform-origin: center bottom;
}
50% {
transform: rotate(-10deg);
}
70% {
transform: rotate(3deg);
}
to {
opacity: 1;
transform: scale(1);
}
}
.jackInTheBox {
animation-name: jackInTheBox;
}
@keyframes rollIn {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
transform: none;
}
}
.rollIn {
animation-name: rollIn;
}
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.rollOut {
animation-name: rollOut;
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
animation-name: zoomIn;
}
@keyframes zoomInDown {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInDown {
animation-name: zoomInDown;
}
@keyframes zoomInLeft {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInLeft {
animation-name: zoomInLeft;
}
@keyframes zoomInRight {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInRight {
animation-name: zoomInRight;
}
@keyframes zoomInUp {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInUp {
animation-name: zoomInUp;
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.zoomOut {
animation-name: zoomOut;
}
@keyframes zoomOutDown {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomOutDown {
animation-name: zoomOutDown;
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
transform: scale(.1) translate3d(-2000px, 0, 0);
transform-origin: left center;
}
}
.zoomOutLeft {
animation-name: zoomOutLeft;
}
@keyframes zoomOutRight {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
transform: scale(.1) translate3d(2000px, 0, 0);
transform-origin: right center;
}
}
.zoomOutRight {
animation-name: zoomOutRight;
}
@keyframes zoomOutUp {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomOutUp {
animation-name: zoomOutUp;
}
@keyframes slideInDown {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
animation-name: slideInDown;
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
animation-name: slideInLeft;
}
@keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
animation-name: slideInRight;
}
@keyframes slideInUp {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
animation-name: slideInUp;
}
@keyframes slideOutDown {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
animation-name: slideOutDown;
}
@keyframes slideOutLeft {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
animation-name: slideOutLeft;
}
@keyframes slideOutRight {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
animation-name: slideOutRight;
}
@keyframes slideOutUp {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
animation-name: slideOutUp;
}
body {
-webkit-backface-visibility: hidden;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes flash {
0%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@-moz-keyframes flash {
0%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@-o-keyframes flash {
0%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@keyframes flash {
0%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
-moz-animation-name: flash;
-o-animation-name: flash;
animation-name: flash;
}
@-webkit-keyframes shake {
0%,
100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(10px);
}
}
@-moz-keyframes shake {
0%,
100% {
-moz-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-moz-transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
-moz-transform: translateX(10px);
}
}
@-o-keyframes shake {
0%,
100% {
-o-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-o-transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
-o-transform: translateX(10px);
}
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
transform: translateX(10px);
}
}
.shake {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
}
}
@-moz-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-moz-transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
}
}
@-o-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-o-transform: translateY(0);
}
40% {
-o-transform: translateY(-30px);
}
60% {
-o-transform: translateY(-15px);
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.bounce {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scale(1);
}
10%,
20% {
-webkit-transform: scale(0.9) rotate(-3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale(1.1) rotate(3deg);
}
40%,
60%,
80% {
-webkit-transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
}
}
@-moz-keyframes tada {
0% {
-moz-transform: scale(1);
}
10%,
20% {
-moz-transform: scale(0.9) rotate(-3deg);
}
30%,
50%,
70%,
90% {
-moz-transform: scale(1.1) rotate(3deg);
}
40%,
60%,
80% {
-moz-transform: scale(1.1) rotate(-3deg);
}
100% {
-moz-transform: scale(1) rotate(0);
}
}
@-o-keyframes tada {
0% {
-o-transform: scale(1);
}
10%,
20% {
-o-transform: scale(0.9) rotate(-3deg);
}
30%,
50%,
70%,
90% {
-o-transform: scale(1.1) rotate(3deg);
}
40%,
60%,
80% {
-o-transform: scale(1.1) rotate(-3deg);
}
100% {
-o-transform: scale(1) rotate(0);
}
}
@keyframes tada {
0% {
transform: scale(1);
}
10%,
20% {
transform: scale(0.9) rotate(-3deg);
}
30%,
50%,
70%,
90% {
transform: scale(1.1) rotate(3deg);
}
40%,
60%,
80% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
.tada {
-webkit-animation-name: tada;
-moz-animation-name: tada;
-o-animation-name: tada;
animation-name: tada;
}
@-webkit-keyframes swing {
20%,
40%,
60%,
80%,
100% {
-webkit-transform-origin: top center;
}
20% {
-webkit-transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes swing {
20% {
-moz-transform: rotate(15deg);
}
40% {
-moz-transform: rotate(-10deg);
}
60% {
-moz-transform: rotate(5deg);
}
80% {
-moz-transform: rotate(-5deg);
}
100% {
-moz-transform: rotate(0deg);
}
}
@-o-keyframes swing {
20% {
-o-transform: rotate(15deg);
}
40% {
-o-transform: rotate(-10deg);
}
60% {
-o-transform: rotate(5deg);
}
80% {
-o-transform: rotate(-5deg);
}
100% {
-o-transform: rotate(0deg);
}
}
@keyframes swing {
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
.swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes wobble {
0% {
-webkit-transform: translateX(0%);
}
15% {
-webkit-transform: translateX(-25%) rotate(-5deg);
}
30% {
-webkit-transform: translateX(20%) rotate(3deg);
}
45% {
-webkit-transform: translateX(-15%) rotate(-3deg);
}
60% {
-webkit-transform: translateX(10%) rotate(2deg);
}
75% {
-webkit-transform: translateX(-5%) rotate(-1deg);
}
100% {
-webkit-transform: translateX(0%);
}
}
@-moz-keyframes wobble {
0% {
-moz-transform: translateX(0%);
}
15% {
-moz-transform: translateX(-25%) rotate(-5deg);
}
30% {
-moz-transform: translateX(20%) rotate(3deg);
}
45% {
-moz-transform: translateX(-15%) rotate(-3deg);
}
60% {
-moz-transform: translateX(10%) rotate(2deg);
}
75% {
-moz-transform: translateX(-5%) rotate(-1deg);
}
100% {
-moz-transform: translateX(0%);
}
}
@-o-keyframes wobble {
0% {
-o-transform: translateX(0%);
}
15% {
-o-transform: translateX(-25%) rotate(-5deg);
}
30% {
-o-transform: translateX(20%) rotate(3deg);
}
45% {
-o-transform: translateX(-15%) rotate(-3deg);
}
60% {
-o-transform: translateX(10%) rotate(2deg);
}
75% {
-o-transform: translateX(-5%) rotate(-1deg);
}
100% {
-o-transform: translateX(0%);
}
}
@keyframes wobble {
0% {
transform: translateX(0%);
}
15% {
transform: translateX(-25%) rotate(-5deg);
}
30% {
transform: translateX(20%) rotate(3deg);
}
45% {
transform: translateX(-15%) rotate(-3deg);
}
60% {
transform: translateX(10%) rotate(2deg);
}
75% {
transform: translateX(-5%) rotate(-1deg);
}
100% {
transform: translateX(0%);
}
}
.wobble {
-webkit-animation-name: wobble;
-moz-animation-name: wobble;
-o-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
}
50% {
-moz-transform: scale(1.1);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes pulse {
0% {
-o-transform: scale(1);
}
50% {
-o-transform: scale(1.1);
}
100% {
-o-transform: scale(1);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.pulse {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) rotateY(0);
-webkit-animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-webkit-animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) scale(1);
-webkit-animation-timing-function: ease-in;
}
}
@-moz-keyframes flip {
0% {
-moz-transform: perspective(400px) rotateY(0);
-moz-animation-timing-function: ease-out;
}
40% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-moz-animation-timing-function: ease-out;
}
50% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-moz-animation-timing-function: ease-in;
}
80% {
-moz-transform: perspective(400px) rotateY(360deg) scale(.95);
-moz-animation-timing-function: ease-in;
}
100% {
-moz-transform: perspective(400px) scale(1);
-moz-animation-timing-function: ease-in;
}
}
@-o-keyframes flip {
0% {
-o-transform: perspective(400px) rotateY(0);
-o-animation-timing-function: ease-out;
}
40% {
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-o-animation-timing-function: ease-out;
}
50% {
-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-o-animation-timing-function: ease-in;
}
80% {
-o-transform: perspective(400px) rotateY(360deg) scale(.95);
-o-animation-timing-function: ease-in;
}
100% {
-o-transform: perspective(400px) scale(1);
-o-animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
transform: perspective(400px) rotateY(0);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) rotateY(360deg) scale(.95);
animation-timing-function: ease-in;
}
100% {
transform: perspective(400px) scale(1);
animation-timing-function: ease-in;
}
}
.flip {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flip;
-moz-backface-visibility: visible !important;
-moz-animation-name: flip;
-o-backface-visibility: visible !important;
-o-animation-name: flip;
backface-visibility: visible !important;
animation-name: flip;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotateX(-10deg);
}
70% {
-moz-transform: perspective(400px) rotateX(10deg);
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-o-keyframes flipInX {
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-o-transform: perspective(400px) rotateX(-10deg);
}
70% {
-o-transform: perspective(400px) rotateX(10deg);
}
100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@-moz-keyframes flipOutX {
0% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@-o-keyframes flipOutX {
0% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@keyframes flipOutX {
0% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-moz-animation-name: flipOutX;
-moz-backface-visibility: visible !important;
-o-animation-name: flipOutX;
-o-backface-visibility: visible !important;
animation-name: flipOutX;
backface-visibility: visible !important;
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInY {
0% {
-moz-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotateY(-10deg);
}
70% {
-moz-transform: perspective(400px) rotateY(10deg);
}
100% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@-o-keyframes flipInY {
0% {
-o-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-o-transform: perspective(400px) rotateY(-10deg);
}
70% {
-o-transform: perspective(400px) rotateY(10deg);
}
100% {
-o-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@keyframes flipInY {
0% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateY(-10deg);
}
70% {
transform: perspective(400px) rotateY(10deg);
}
100% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInY;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInY;
-o-backface-visibility: visible !important;
-o-animation-name: flipInY;
backface-visibility: visible !important;
animation-name: flipInY;
}
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@-moz-keyframes flipOutY {
0% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-moz-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@-o-keyframes flipOutY {
0% {
-o-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-o-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@keyframes flipOutY {
0% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipOutY;
-o-backface-visibility: visible !important;
-o-animation-name: flipOutY;
backface-visibility: visible !important;
animation-name: flipOutY;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeft {
0% {
opacity: 0;
-o-transform: translateX(-20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInRight {
0% {
opacity: 0;
-o-transform: translateX(20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-o-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUpBig {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInUpBig {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
transform: translateY(2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
-moz-animation-name: fadeInUpBig;
-o-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDownBig {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDownBig {
0% {
opacity: 0;
-o-transform: translateY(-2000px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
transform: translateY(-2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
-moz-animation-name: fadeInDownBig;
-o-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeftBig {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeftBig {
0% {
opacity: 0;
-o-transform: translateX(-2000px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
-moz-animation-name: fadeInLeftBig;
-o-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRightBig {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInRightBig {
0% {
opacity: 0;
-o-transform: translateX(2000px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
-moz-animation-name: fadeInRightBig;
-o-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-o-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
@-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
}
}
@-moz-keyframes fadeOutDown {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(20px);
}
}
@-o-keyframes fadeOutDown {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(20px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
-moz-animation-name: fadeOutDown;
-o-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
}
@-moz-keyframes fadeOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-20px);
}
}
@-o-keyframes fadeOutLeft {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
-moz-animation-name: fadeOutLeft;
-o-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
}
}
@-moz-keyframes fadeOutRight {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(20px);
}
}
@-o-keyframes fadeOutRight {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(20px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
-moz-animation-name: fadeOutRight;
-o-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@-moz-keyframes fadeOutUpBig {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
@-o-keyframes fadeOutUpBig {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-2000px);
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
-moz-animation-name: fadeOutUpBig;
-o-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}
@-moz-keyframes fadeOutDownBig {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(2000px);
}
}
@-o-keyframes fadeOutDownBig {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(2000px);
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
-moz-animation-name: fadeOutDownBig;
-o-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@-moz-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
}
@-o-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(-2000px);
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
-moz-animation-name: fadeOutLeftBig;
-o-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
}
@-moz-keyframes fadeOutRightBig {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(2000px);
}
}
@-o-keyframes fadeOutRightBig {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(2000px);
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
-moz-animation-name: fadeOutRightBig;
-o-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz-transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.3);
}
50% {
opacity: 1;
-o-transform: scale(1.05);
}
70% {
-o-transform: scale(.9);
}
100% {
-o-transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes bounceInUp {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
60% {
opacity: 1;
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes bounceInDown {
0% {
opacity: 0;
-o-transform: translateY(-2000px);
}
60% {
opacity: 1;
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(30px);
}
80% {
-moz-transform: translateX(-10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-o-keyframes bounceInLeft {
0% {
opacity: 0;
-o-transform: translateX(-2000px);
}
60% {
opacity: 1;
-o-transform: translateX(30px);
}
80% {
-o-transform: translateX(-10px);
}
100% {
-o-transform: translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
-moz-animation-name: bounceInLeft;
-o-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(-30px);
}
80% {
-moz-transform: translateX(10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-o-keyframes bounceInRight {
0% {
opacity: 0;
-o-transform: translateX(2000px);
}
60% {
opacity: 1;
-o-transform: translateX(-30px);
}
80% {
-o-transform: translateX(10px);
}
100% {
-o-transform: translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
-o-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceOut {
0% {
-webkit-transform: scale(1);
}
25% {
-webkit-transform: scale(.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(.3);
}
}
@-moz-keyframes bounceOut {
0% {
-moz-transform: scale(1);
}
25% {
-moz-transform: scale(.95);
}
50% {
opacity: 1;
-moz-transform: scale(1.1);
}
100% {
opacity: 0;
-moz-transform: scale(.3);
}
}
@-o-keyframes bounceOut {
0% {
-o-transform: scale(1);
}
25% {
-o-transform: scale(.95);
}
50% {
opacity: 1;
-o-transform: scale(1.1);
}
100% {
opacity: 0;
-o-transform: scale(.3);
}
}
@keyframes bounceOut {
0% {
transform: scale(1);
}
25% {
transform: scale(.95);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(.3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
-moz-animation-name: bounceOut;
-o-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
@-o-keyframes bounceOutUp {
0% {
-o-transform: translateY(0);
}
20% {
opacity: 1;
-o-transform: translateY(20px);
}
100% {
opacity: 0;
-o-transform: translateY(-2000px);
}
}
@keyframes bounceOutUp {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
-moz-animation-name: bounceOutUp;
-o-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}
@-moz-keyframes bounceOutDown {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(-20px);
}
100% {
opacity: 0;
-moz-transform: translateY(2000px);
}
}
@-o-keyframes bounceOutDown {
0% {
-o-transform: translateY(0);
}
20% {
opacity: 1;
-o-transform: translateY(-20px);
}
100% {
opacity: 0;
-o-transform: translateY(2000px);
}
}
@keyframes bounceOutDown {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
-moz-animation-name: bounceOutDown;
-o-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@-moz-keyframes bounceOutLeft {
0% {
-moz-transform: translateX(0);
}
20% {
opacity: 1;
-moz-transform: translateX(20px);
}
100% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
}
@-o-keyframes bounceOutLeft {
0% {
-o-transform: translateX(0);
}
20% {
opacity: 1;
-o-transform: translateX(20px);
}
100% {
opacity: 0;
-o-transform: translateX(-2000px);
}
}
@keyframes bounceOutLeft {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(20px);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
-moz-animation-name: bounceOutLeft;
-o-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
}
@-moz-keyframes bounceOutRight {
0% {
-moz-transform: translateX(0);
}
20% {
opacity: 1;
-moz-transform: translateX(-20px);
}
100% {
opacity: 0;
-moz-transform: translateX(2000px);
}
}
@-o-keyframes bounceOutRight {
0% {
-o-transform: translateX(0);
}
20% {
opacity: 1;
-o-transform: translateX(-20px);
}
100% {
opacity: 0;
-o-transform: translateX(2000px);
}
}
@keyframes bounceOutRight {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(-20px);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
-moz-animation-name: bounceOutRight;
-o-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateIn {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg);
opacity: 0;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateIn {
0% {
-o-transform-origin: center center;
-o-transform: rotate(-200deg);
opacity: 0;
}
100% {
-o-transform-origin: center center;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateIn {
0% {
transform-origin: center center;
transform: rotate(-200deg);
opacity: 0;
}
100% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
-moz-animation-name: rotateIn;
-o-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInUpLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateInUpLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
-moz-animation-name: rotateInUpLeft;
-o-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateInDownLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
-moz-animation-name: rotateInDownLeft;
-o-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInUpRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateInUpRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
0% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
-moz-animation-name: rotateInUpRight;
-o-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateInDownRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
0% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
-moz-animation-name: rotateInDownRight;
-o-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(200deg);
opacity: 0;
}
}
@-moz-keyframes rotateOut {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(200deg);
opacity: 0;
}
}
@-o-keyframes rotateOut {
0% {
-o-transform-origin: center center;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: center center;
-o-transform: rotate(200deg);
opacity: 0;
}
}
@keyframes rotateOut {
0% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: center center;
transform: rotate(200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
-moz-animation-name: rotateOut;
-o-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutUpLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
}
@-o-keyframes rotateOutUpLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
-moz-animation-name: rotateOutUpLeft;
-o-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
}
@-o-keyframes rotateOutDownLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
-moz-animation-name: rotateOutDownLeft;
-o-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutUpRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
}
@-o-keyframes rotateOutUpRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
-moz-animation-name: rotateOutUpRight;
-o-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
}
@-o-keyframes rotateOutDownRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
-moz-animation-name: rotateOutDownRight;
-o-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform: rotate(0);
-webkit-transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
}
20%,
60% {
-webkit-transform: rotate(80deg);
-webkit-transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
}
40% {
-webkit-transform: rotate(60deg);
-webkit-transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
}
80% {
-webkit-transform: rotate(60deg) translateY(0);
opacity: 1;
-webkit-transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translateY(700px);
opacity: 0;
}
}
@-moz-keyframes hinge {
0% {
-moz-transform: rotate(0);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
20%,
60% {
-moz-transform: rotate(80deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
40% {
-moz-transform: rotate(60deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
80% {
-moz-transform: rotate(60deg) translateY(0);
opacity: 1;
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform: translateY(700px);
opacity: 0;
}
}
@-o-keyframes hinge {
0% {
-o-transform: rotate(0);
-o-transform-origin: top left;
-o-animation-timing-function: ease-in-out;
}
20%,
60% {
-o-transform: rotate(80deg);
-o-transform-origin: top left;
-o-animation-timing-function: ease-in-out;
}
40% {
-o-transform: rotate(60deg);
-o-transform-origin: top left;
-o-animation-timing-function: ease-in-out;
}
80% {
-o-transform: rotate(60deg) translateY(0);
opacity: 1;
-o-transform-origin: top left;
-o-animation-timing-function: ease-in-out;
}
100% {
-o-transform: translateY(700px);
opacity: 0;
}
}
@keyframes hinge {
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%,
60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg) translateY(0);
opacity: 1;
transform-origin: top left;
animation-timing-function: ease-in-out;
}
100% {
transform: translateY(700px);
opacity: 0;
}
}
.hinge {
-webkit-animation-name: hinge;
-moz-animation-name: hinge;
-o-animation-name: hinge;
animation-name: hinge;
}
@-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
}
}
@-moz-keyframes rollIn {
0% {
opacity: 0;
-moz-transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-moz-transform: translateX(0px) rotate(0deg);
}
}
@-o-keyframes rollIn {
0% {
opacity: 0;
-o-transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-o-transform: translateX(0px) rotate(0deg);
}
}
@keyframes rollIn {
0% {
opacity: 0;
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
}
.rollIn {
-webkit-animation-name: rollIn;
-moz-animation-name: rollIn;
-o-animation-name: rollIn;
animation-name: rollIn;
}
@-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
}
}
@-moz-keyframes rollOut {
0% {
opacity: 1;
-moz-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-moz-transform: translateX(100%) rotate(120deg);
}
}
@-o-keyframes rollOut {
0% {
opacity: 1;
-o-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-o-transform: translateX(100%) rotate(120deg);
}
}
@keyframes rollOut {
0% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
transform: translateX(100%) rotate(120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
-moz-animation-name: rollOut;
-o-animation-name: rollOut;
animation-name: rollOut;
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-webkit-transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
@-moz-keyframes lightSpeedIn {
0% {
-moz-transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-moz-transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-moz-transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-moz-transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
@-o-keyframes lightSpeedIn {
0% {
-o-transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-o-transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-o-transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-o-transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
@keyframes lightSpeedIn {
0% {
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
-moz-animation-name: lightSpeedIn;
-o-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
.animated.lightSpeedIn {
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}
@-webkit-keyframes lightSpeedOut {
0% {
-webkit-transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
@-moz-keyframes lightSpeedOut {
0% {
-moz-transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-moz-transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
@-o-keyframes lightSpeedOut {
0% {
-o-transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-o-transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
0% {
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
-moz-animation-name: lightSpeedOut;
-o-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
.animated.lightSpeedOut {
-webkit-animation-duration: 0.25s;
-moz-animation-duration: 0.25s;
-o-animation-duration: 0.25s;
animation-duration: 0.25s;
}
@-webkit-keyframes wiggle {
0% {
-webkit-transform: skewX(9deg);
}
10% {
-webkit-transform: skewX(-8deg);
}
20% {
-webkit-transform: skewX(7deg);
}
30% {
-webkit-transform: skewX(-6deg);
}
40% {
-webkit-transform: skewX(5deg);
}
50% {
-webkit-transform: skewX(-4deg);
}
60% {
-webkit-transform: skewX(3deg);
}
70% {
-webkit-transform: skewX(-2deg);
}
80% {
-webkit-transform: skewX(1deg);
}
90% {
-webkit-transform: skewX(0deg);
}
100% {
-webkit-transform: skewX(0deg);
}
}
@-moz-keyframes wiggle {
0% {
-moz-transform: skewX(9deg);
}
10% {
-moz-transform: skewX(-8deg);
}
20% {
-moz-transform: skewX(7deg);
}
30% {
-moz-transform: skewX(-6deg);
}
40% {
-moz-transform: skewX(5deg);
}
50% {
-moz-transform: skewX(-4deg);
}
60% {
-moz-transform: skewX(3deg);
}
70% {
-moz-transform: skewX(-2deg);
}
80% {
-moz-transform: skewX(1deg);
}
90% {
-moz-transform: skewX(0deg);
}
100% {
-moz-transform: skewX(0deg);
}
}
@-o-keyframes wiggle {
0% {
-o-transform: skewX(9deg);
}
10% {
-o-transform: skewX(-8deg);
}
20% {
-o-transform: skewX(7deg);
}
30% {
-o-transform: skewX(-6deg);
}
40% {
-o-transform: skewX(5deg);
}
50% {
-o-transform: skewX(-4deg);
}
60% {
-o-transform: skewX(3deg);
}
70% {
-o-transform: skewX(-2deg);
}
80% {
-o-transform: skewX(1deg);
}
90% {
-o-transform: skewX(0deg);
}
100% {
-o-transform: skewX(0deg);
}
}
@keyframes wiggle {
0% {
transform: skewX(9deg);
}
10% {
transform: skewX(-8deg);
}
20% {
transform: skewX(7deg);
}
30% {
transform: skewX(-6deg);
}
40% {
transform: skewX(5deg);
}
50% {
transform: skewX(-4deg);
}
60% {
transform: skewX(3deg);
}
70% {
transform: skewX(-2deg);
}
80% {
transform: skewX(1deg);
}
90% {
transform: skewX(0deg);
}
100% {
transform: skewX(0deg);
}
}
.wiggle {
-webkit-animation-name: wiggle;
-moz-animation-name: wiggle;
-o-animation-name: wiggle;
animation-name: wiggle;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
.animated.wiggle {
-webkit-animation-duration: 0.75s;
-moz-animation-duration: 0.75s;
-o-animation-duration: 0.75s;
animation-duration: 0.75s;
}
@font-face {
font-family: 'ytpregular';
src: url('ytp-regular.eot');
}
@font-face {
font-family: 'ytpregular';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA5sABEAAAAAFCAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABgAAAABwAAAAcZ9iuNUdERUYAAAGcAAAAHQAAACAAdAAET1MvMgAAAbwAAABJAAAAYHUMUrFjbWFwAAACCAAAAKkAAAGKn5XycWN2dCAAAAK0AAAANgAAADYNLQohZnBnbQAAAuwAAAGxAAACZVO0L6dnYXNwAAAEoAAAAAgAAAAIAAAAEGdseWYAAASoAAAGVQAAB4jz86dSaGVhZAAACwAAAAAzAAAANgbKONpoaGVhAAALNAAAACAAAAAkESQLXGhtdHgAAAtUAAAAVAAAARxOmwVwbG9jYQAAC6gAAAAjAAAAkFoEXRRtYXhwAAALzAAAACAAAAAgAWoB625hbWUAAAvsAAAA+wAAAeok3Eb+cG9zdAAADOgAAADAAAABN99tv1lwcmVwAAANqAAAALkAAAFY3I6ikndlYmYAAA5kAAAABgAAAAbHMlGnAAAAAQAAAADMPaLPAAAAAM3Nk7QAAAAAzc13sXjaY2BkYGDgA2IJBhBgYmAEQjcgZgHzGAAHTAB5AAAAeNpjYGbZwDiBgZWBhdWY5SwDA8MsCM10liGNKQ3IB0rBASMDEgj1DvdjcGDgfcDAlvYPqJJVldEZpoZVkuUZkFJgYAQAUUULewAAAHjaY2BgYGaAYBkGRgYQaAHyGMF8FoYMIC3GIAAUYQOyeBkUGKIYqhgWKHAp6CvEP2D4/x+sAyTuyJAIFGeAizP+//r/8f/D//f+n/HA8oHo/WcKblDzsQBGoOkwSUYmIMGErgDiRLyAhZWNnYOTi5uHl49fQFBIWERUTFxCUkpaRhYiLyevoKikrKKqpq6hqaWto6unb2BoZGxiambOQF1gQZYuAIQnH4IAAAAAAAAAAAABegEnAHEAswC9AOAA5QD+ARcBIwBdAHIBtgBcAGAAZgByAI8AogErAbIAUwBEBREAAHjaXVG7TltBEN0NDwOBxNggOdoUs5mQxnuhBQnE1Y1iZDuF5QhpN3KRi3EBH0CBRA3arxmgoaRImwYhF0h8Qj4hEjNriKI0Ozuzc86ZM0vKkap36WvPU+ckkMLdBs02/U5ItbMA96Tr642MtIMHWmxm9Mp1+/4LBpvRlDtqAOU9bykPGU07gVq0p/7R/AqG+/wf8zsYtDTT9NQ6CekhBOabcUuD7xnNussP+oLV4WIwMKSYpuIuP6ZS/rc052rLsLWR0byDMxH5yTRAU2ttBJr+1CHV83EUS5DLprE2mJiy/iQTwYXJdFVTtcz42sFdsrPoYIMqzYEH2MNWeQweDg8mFNK3JMosDRH2YqvECBGTHAo55dzJ/qRA+UgSxrxJSjvjhrUGxpHXwKA2T7P/PJtNbW8dwvhZHMF3vxlLOvjIhtoYEWI7YimACURCRlX5hhrPvSwG5FL7z0CUgOXxj3+dCLTu2EQ8l7V1DjFWCHp+29zyy4q7VrnOi0J3b6pqqNIpzftezr7HA54eC8NBY8Gbz/v+SoH6PCyuNGgOBEN6N3r/orXqiKu8Fz6yJ9O/sVoAAAAAAQAB//8AD3jaTZVrbBxXFcfvufNe72Nmdx77tmfHO2N76117784OTr154YAbR7RQuUQhttoSuXZKFQVKKYqgiFJAgkpIkVClIn8opSomjXY3VHHTFldEIYpay1hR+ID4Bha27FoIEQGpd8Idu4lY7c6eOfee//2f3+zeizAaQwif4iYRgwRUbgGqjLYFNvVxtcVzfxltM5iGqMUEaS5ItwU+vTPahiBPFFMpmoo5hnv8XnjFn+Um7/xmjF1GCLHoPf+fgsUVEYcSKIcGkYbaWYxKLZ3bgGa50qpACQ0NeyYoYILaDTqpurUK2FZBUYlJY8ukEc0egLpbo+kY8O/BQcx2dvwP2Fh6/Q+Gl19fyroubHmer7rpjHllPZ/NKB+tp2/4/TzxSx0zo/74uUY29vJZOEHIfng4lzz7cjyXzn/jJwqCwCOLdj2iPSP3F/hUAHF3v+Cviee5DIqhJDLRACLoPGpHECq1M7Sd5iDZ/W6zQW8mu9Ecql7SI6xYaiOpnxCydwPNWqWJ/tSSjY1mqtqU5ZYNpWal2pJiGy0XSi1bVuKX1Fyh1GuMoJYeUeJvy/GEVbTpfTOjHJRVzUim0tlcwekbKD1QrgR5M97OV8nIyMjQsKPUEKWGNEVFFBwqEs/yHMEVFMM1PIc4FhiWQVxHcxjD0zzXEkgbmHe5G1eA9T955453xd+B9tbpi6vj10+fvj6+evH0Fju7vPDU5szVY8euzmw+tXABv7kEov/v33WOv+v/C8LG9M2xD19/EquzCyuHVuY6R25Obz35+odw4NDKwuzWHAK86q9x21wKYYQkjFeZ3M5f/TUmw6Qo12P+38Wf0zEZpVABlVANfQu1owHXXMD1AdIyQhvNgeou2b1LAuhAkVwyExRps/ppAE230qrTX1MrEVXil5W4qlm9thMAMpR2MtVHAbXMnBJvZ8oVGjdZ5XK6u6cwNExqdNJ9dnm4D+8eIeYeM7hH0b3H9bcQuczdeH75ef+TxTveO/5tuDK2Mrs5d+HmzQtzm7MrbP6ZqxMrrz2+vf34aysTV5+5iN9YhMi51W93Tiz5/wFp+ujy/MntGXx+dfrjqflrO788Ob989MaMP716+Nr8FOpCjbvnw032BUrm82gKfQc10SJaAwwZGINHEUrksaEndI3XCppBavWaU7Nrda/u7QfPsnmBF1ReK4NjCxbkgVRJdW/MdmiyjHkhCgKvGkrNq+uGngPLUDXVioJTcGxONWguENOIYmkq1lQqaDu2q1AqKi6qRh6CN0uqhlkn1WIwt1Z3FTqH6lt2kWLkqZpQ2F1H4D3X1CzFUkCp1R8EVaeKGr3mgXpyd3OKZTcgioMi3qImqA2FaFSYrkHd7BYESnSMdqAx1HNgg/6pG0Bo95RAGehqoNAuaRHR90wGdXyJtkAJ1DxSDVQCfS8ocui+EohqagNjFroniyLAOYbBgvSQxuXxiUSCGQXReJBnjafhbf6xBs8P9ZclLLJdTJfdL3bLRsgd50Nf52P7JIWjInYqFuZhUGErucF0Qj/zNJtPGArDz7EYFi0chvSpw8C/mJRgRVLfgrEf7RvowhyjJ3JPfPlX/h8N/6fZryX7bh/pJsPj4QLX9Ra89NL3QQkljmOqnognU6HcxKkoI/JsaJ8cDcfCqZAMC2cfFeSoHu+WFEmWzIQqx8PVmCThSFqPKqLIsgxJx0QYZt1iocjgfrPbjIoiltkXxzxTlE5FVTL1zb7YmTOSzXGiEBU0ZgHzXexjd9HklDtTc2P7iR4/Wmqk/jGhfZXjZW1bYFVp3y01G+ocrh/K9VST3+05OUsaEnAYGKZRfWIpDQaXT2Ej2/vCl1S5nNe7jHq5eCAlM7rOpFx8PP1Zf/NzCUdkpXjUhHmdfdi/Xv31D6WccPAIDjNMmPnBzC+ErAipZzPf++LkQyGRhTDEpCNkbmLpz8892zmE3+8swq1YODIqf2Z7lO8RdJHn7RS8kpY6r0qhAg7xXIHnhViu+zBDbhcx16UOfGVgaGkoXe6LhwS+h7NgSa+vR7ESZvPyq6VUqN+SC0ZSTPm3oETGoxGIh/p60w3naIyJ/Gywf9CMnnAemR3524hT5DErxOwBhR55COMw3e+u0T0tOEsR0JMx+NBHftD/AJ+D/f7v/TW+9t+P+Bo9e/7vNYz+By6FsKkAAAB42mNgZGBgYGRwbI8IWhzPb/OVQZ6DAQTOni3fCKP/+/x7yrOBNRTI5WBgAokCAG3mDbAAeNpjYGRgYFX9t5eBgeftf5//WTwbGIAiKMAdAJycBph42mN6w+DCwcDAAMIsZ8D0HhBNLIap52D478fBwHQRyvbBpZ7nLYMtKeZjt5OJhxT1TKsYGFhDETTjcSAG0gyPoRgozigIpL0hNEiOBcgFAEBoNC142mNgYNCBwjoccALDBEY9RhsgPIMMmZcRhHtIhkcA9pQspAAAAQAAAEcBVAALAAAAAAACAAEAAgAWAAABAACTAAAAAHjalZCxTgJBFEXPApJoYYgF9VZUSIAFTdDCnmiIgsTKsASQuGiCu0YaCr4OfomKOzsTCHRmMzPn3blz38sCFyzJ4uXOgbKWZY+8KssZLqk7zkp9cJyjSOT4jD9WjvPSt46vKHoFx2txyfGGqnfPO18kyohSGjBjJPqRFmqPmWolWkZ9o0uHZ/EkfTNgTo0KVX017ujRps+TyDqvT7xW9U/UV1Vz9ZryrQn8o8QOL1JsdVA/5IwZpv7f/YsKTW50O1PqpzKNZyw1UnKov2c9dbkD7c1/zdhXFSrNdIz3HbuaJFH1KM9CZyDN3N3SoiFupfP66mbOYAd8k0EGAHjabc05TwJhHITxZ0BBBc/P4IkI7y4sh0dBsosHKiqHeLUiiTE0FH56Xdl/6TS/ZIoZUszzM+ad/3IOSilNmm122GWPfQ4ocEiRI0qUcXj4VKgSUKNOgybHnHDKGSER7Xjjgkuu6HDNDbd0ueOeB3r0GTDkkRFPPPPCK29a0KIyympJy1pRTnmtak3r2tCmtjLjz+/ph5edfU2cc2Fiy/3px4Xpmb5ZMatmYNbMutkwm2Yr0W8nBnOj+OcXVDk0PnjaRc67DoJAEAVQFuT9fqsJCSZ2+w12QkNjrCCx9w+sbSy19DsGK/9Ob3RZujk3k7nzZp8bsbvSkXXoR8Yew9gavN9QNHSUHTFch4oMfuoV0uqGNL4nv25emq3yHzzADwVcwOsFHMCtBWzAWQlYgJ0ImIA1rRmAeRbQAWM6vQD04A9GgXglRBo4Kh+19gJGYDgzBqOnZALGO8kUTLaSGZhWkjmYrSULMA8kS7CYi5ZgKTlQxr/W1F5aAAAAAAFRp8cxAAA=) format('woff'),
url('ytp-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.mb_YTPlayer :focus {
outline: 0;
}
.mb_YTPlayer {
display: block;
transform: translateZ(0);
transform-style: preserve-3d;
perspective: 1000;
backface-visibility: hidden;
transform: translate3d(0,0,0);
animation-timing-function: linear;
box-sizing: border-box;
}
.mb_YTPlayer.fullscreen {
display: block!important;
position: fixed!important;
width: 100%!important;
height: 100%!important;
top: 0!important;
left: 0!important;
margin: 0!important;
border: none !important;
}
.mb_YTPlayer.fullscreen .mbYTP_wrapper {
opacity: 1 !important;
}
.mbYTP_wrapper iframe {
max-width: 4000px !important;
}
.inline_YTPlayer {
margin-bottom: 20px;
vertical-align: top;
position: relative;
left: 0;
overflow: hidden;
border-radius: 4px;
-moz-box-shadow: 0 0 5px rgba(0,0,0,.7);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.7);
box-shadow: 0 0 5px rgba(0,0,0,.7);
background: rgba(0,0,0,.5);
}
.inline_YTPlayer img {
border: none!important;
-moz-transform: none!important;
-webkit-transform: none!important;
-o-transform: none!important;
transform: none!important;
margin: 0!important;
padding: 0!important;
}
.mb_YTPBar .ytpicon {
font-size: 20px;
font-family: 'ytpregular';
}
.mb_YTPBar .mb_YTPUrl.ytpicon {
font-size: 30px;
}
.mb_YTPBar {
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
display: block;
width: 100%;
height: 10px;
padding: 5px;
background: #333;
position: fixed;
bottom: 0;
left: 0;
-moz-box-sizing: padding-box;
-webkit-box-sizing: border-box;
text-align: left;
z-index: 1000;
font: 14px/16px sans-serif;
color: white;
opacity: .1;
}
.mb_YTPBar.visible,
.mb_YTPBar:hover {
opacity: 1;
}
.mb_YTPBar .buttonBar {
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
background: transparent;
font: 12px/14px Calibri;
position: absolute;
top: -30px;
left: 0;
padding: 5px;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.mb_YTPBar:hover .buttonBar {
background: rgba(0,0,0,0.4);
}
.mb_YTPBar span {
display: inline-block;
font: 16px/20px Calibri, sans-serif;
position: relative;
width: 30px;
height: 25px;
vertical-align: middle;
}
.mb_YTPBar span.mb_YTPTime {
width: 130px;
}
.mb_YTPBar span.mb_YTPUrl,
.mb_YTPBar span.mb_OnlyYT {
position: absolute;
width: auto;
display: block;
top: 6px;
right: 10px;
cursor: pointer;
}
.mb_YTPBar span.mb_YTPUrl img {
width: 60px;
}
.mb_YTPBar span.mb_OnlyYT {
left: 185px;
right: auto;
}
.mb_YTPBar span.mb_OnlyYT img {
width: 25px;
}
.mb_YTPBar span.mb_YTPUrl a {
color: white;
}
.mb_YTPPlaypause,
.mb_YTPlayer .mb_YTPPlaypause img {
cursor: pointer;
}
.mb_YTPMuteUnmute {
cursor: pointer;
}
.mb_YTPProgress {
height: 10px;
width: 100%;
background: #222;
bottom: 0;
left: 0;
}
.mb_YTPLoaded {
height: 10px;
width: 0;
background: #444;
left: 0;
}
.mb_YTPseekbar {
height: 10px;
width: 0;
background: #fff;
bottom: 0;
left: 0;
box-shadow: rgba(82, 82, 82, 0.47) 1px 1px 3px;
}
.YTPOverlay {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform-style: "flat";
box-sizing: border-box;
}
.YTPOverlay.raster {
background: url("../images/raster.png");
}
.YTPOverlay.raster.retina {
background: url("../images/raster@2x.png");
}
.YTPOverlay.raster-dot {
background: url("../images/raster_dot.png");
}
.YTPOverlay.raster-dot.retina {
background: url("../images/raster_dot@2x.png");
}
espacio {
margin: 0px;
}
/* css/colors.css */
.grax_tm_settings .colors li a.blue{background-color: #4169e1;}
.grax_tm_settings .colors li a.green{background-color: #66B95C;}
.grax_tm_settings .colors li a.brown{background-color: #ff9800;}
.grax_tm_settings .colors li a.pink{background-color: #ff5e94;}
.grax_tm_settings .colors li a.orange{background-color: #fa5b0f;}
.grax_tm_settings .colors li a.black{background-color: #333;}
.grax_tm_settings .colors li a.white{background-color: #e5e5e5;}
.grax_tm_settings .colors li a.purple{background-color: #9200ee;}
.grax_tm_settings .colors li a.sky{background-color: #00D4BD;}
.grax_tm_settings .colors li a.cadetBlue{background-color: #5e9e9f;}
.grax_tm_settings .colors li a.crimson{background-color: #2fac66;}
.grax_tm_settings .colors li a.olive{background-color: #666d41;}
.grax_tm_settings .colors li a.red{background-color: #2fac66;}
.grax_tm_all_wrap[data-color="blue"] .grax_tm_topbar .menu ul li.current a{color: #4169e1;}
.grax_tm_all_wrap[data-color="blue"] .grax_tm_topbar .menu ul li a:hover{color: #4169e1;}
.grax_tm_all_wrap[data-color="blue"] .grax_tm_title_holder span{color: #4169e1;}
.grax_tm_all_wrap[data-color="blue"] .grax_tm_button a{background-color: #4169e1;border-color:#4169e1;}
.grax_tm_all_wrap[data-color="blue"] .grax_tm_news .news_list ul li .details .title a:hover{color: #4169e1;}
.grax_tm_all_wrap[data-color="blue"] .grax_tm_news .news_list ul li .details .date a:hover{color: #4169e1;}
.grax_tm_all_wrap[data-color="blue"] .cursor-inner.cursor-hover{background-color: #4169e1;}
.grax_tm_all_wrap[data-color="blue"] .cursor-outer{border-color: #4169e1;}
.grax_tm_all_wrap[data-color="blue"] .cursor-inner{background-color: #4169e1;}
.grax_tm_all_wrap[data-color="blue"] .progress_inner .background .bar_in{background: #4169e1;}
.grax_tm_all_wrap[data-color="green"] .grax_tm_topbar .menu ul li.current a{color: #66B95C;}
.grax_tm_all_wrap[data-color="green"] .grax_tm_topbar .menu ul li a:hover{color: #66B95C;}
.grax_tm_all_wrap[data-color="green"] .grax_tm_title_holder span{color: #66B95C;}
.grax_tm_all_wrap[data-color="green"] .grax_tm_button a{background-color: #66B95C;border-color:#66B95C;}
.grax_tm_all_wrap[data-color="green"] .grax_tm_news .news_list ul li .details .title a:hover{color: #66B95C;}
.grax_tm_all_wrap[data-color="green"] .grax_tm_news .news_list ul li .details .date a:hover{color: #66B95C;}
.grax_tm_all_wrap[data-color="green"] .cursor-inner.cursor-hover{background-color: #66B95C;}
.grax_tm_all_wrap[data-color="green"] .cursor-outer{border-color: #66B95C;}
.grax_tm_all_wrap[data-color="green"] .cursor-inner{background-color: #66B95C;}
.grax_tm_all_wrap[data-color="green"] .progress_inner .background .bar_in{background: #66B95C;}
.grax_tm_all_wrap[data-color="brown"] .grax_tm_topbar .menu ul li.current a{color: #ff9800;}
.grax_tm_all_wrap[data-color="brown"] .grax_tm_topbar .menu ul li a:hover{color: #ff9800;}
.grax_tm_all_wrap[data-color="brown"] .grax_tm_title_holder span{color: #ff9800;}
.grax_tm_all_wrap[data-color="brown"] .grax_tm_button a{background-color: #ff9800;border-color:#ff9800;}
.grax_tm_all_wrap[data-color="brown"] .grax_tm_news .news_list ul li .details .title a:hover{color: #ff9800;}
.grax_tm_all_wrap[data-color="brown"] .grax_tm_news .news_list ul li .details .date a:hover{color: #ff9800;}
.grax_tm_all_wrap[data-color="brown"] .cursor-inner.cursor-hover{background-color: #ff9800;}
.grax_tm_all_wrap[data-color="brown"] .cursor-outer{border-color: #ff9800;}
.grax_tm_all_wrap[data-color="brown"] .cursor-inner{background-color: #ff9800;}
.grax_tm_all_wrap[data-color="brown"] .progress_inner .background .bar_in{background: #ff9800;}
.grax_tm_all_wrap[data-color="pink"] .grax_tm_topbar .menu ul li.current a{color: #ff5e94;}
.grax_tm_all_wrap[data-color="pink"] .grax_tm_topbar .menu ul li a:hover{color: #ff5e94;}
.grax_tm_all_wrap[data-color="pink"] .grax_tm_title_holder span{color: #ff5e94;}
.grax_tm_all_wrap[data-color="pink"] .grax_tm_button a{background-color: #ff5e94;border-color:#ff5e94;}
.grax_tm_all_wrap[data-color="pink"] .grax_tm_news .news_list ul li .details .title a:hover{color: #ff5e94;}
.grax_tm_all_wrap[data-color="pink"] .grax_tm_news .news_list ul li .details .date a:hover{color: #ff5e94;}
.grax_tm_all_wrap[data-color="pink"] .cursor-inner.cursor-hover{background-color: #ff5e94;}
.grax_tm_all_wrap[data-color="pink"] .cursor-outer{border-color: #ff5e94;}
.grax_tm_all_wrap[data-color="pink"] .cursor-inner{background-color: #ff5e94;}
.grax_tm_all_wrap[data-color="pink"] .progress_inner .background .bar_in{background: #ff5e94;}
.grax_tm_all_wrap[data-color="orange"] .grax_tm_topbar .menu ul li.current a{color: #fa5b0f;}
.grax_tm_all_wrap[data-color="orange"] .grax_tm_topbar .menu ul li a:hover{color: #fa5b0f;}
.grax_tm_all_wrap[data-color="orange"] .grax_tm_title_holder span{color: #fa5b0f;}
.grax_tm_all_wrap[data-color="orange"] .grax_tm_button a{background-color: #fa5b0f;border-color:#fa5b0f;}
.grax_tm_all_wrap[data-color="orange"] .grax_tm_news .news_list ul li .details .title a:hover{color: #fa5b0f;}
.grax_tm_all_wrap[data-color="orange"] .grax_tm_news .news_list ul li .details .date a:hover{color: #fa5b0f;}
.grax_tm_all_wrap[data-color="orange"] .cursor-inner.cursor-hover{background-color: #fa5b0f;}
.grax_tm_all_wrap[data-color="orange"] .cursor-outer{border-color: #fa5b0f;}
.grax_tm_all_wrap[data-color="orange"] .cursor-inner{background-color: #fa5b0f;}
.grax_tm_all_wrap[data-color="orange"] .progress_inner .background .bar_in{background: #fa5b0f;}
.grax_tm_all_wrap[data-color="black"] .grax_tm_topbar .menu ul li.current a{color: #000;}
.grax_tm_all_wrap[data-color="black"] .grax_tm_topbar .menu ul li a:hover{color: #000;}
.grax_tm_all_wrap[data-color="black"] .grax_tm_title_holder span{color: #000;}
.grax_tm_all_wrap[data-color="black"] .grax_tm_button a{background-color: #000;border-color:#000;}
.grax_tm_all_wrap[data-color="black"] .grax_tm_news .news_list ul li .details .title a:hover{color: #000;}
.grax_tm_all_wrap[data-color="black"] .grax_tm_news .news_list ul li .details .date a:hover{color: #000;}
.grax_tm_all_wrap[data-color="black"] .cursor-inner.cursor-hover{background-color: #000;}
.grax_tm_all_wrap[data-color="black"] .cursor-outer{border-color: #000;}
.grax_tm_all_wrap[data-color="black"] .cursor-inner{background-color: #000;}
.grax_tm_all_wrap[data-color="black"] .progress_inner .background .bar_in{background: #000;}
.grax_tm_all_wrap[data-color="white"] .grax_tm_topbar .menu ul li.current a{color: #fff;}
.grax_tm_all_wrap[data-color="white"] .grax_tm_topbar .menu ul li a:hover{color: #fff;}
.grax_tm_all_wrap[data-color="white"] .grax_tm_title_holder span{color: #fff;}
.grax_tm_all_wrap[data-color="white"] .grax_tm_button a{background-color: #fff;border-color:#fff;color: #000;}
.grax_tm_all_wrap[data-color="white"] .grax_tm_news .news_list ul li .details .title a:hover{color: #fff;}
.grax_tm_all_wrap[data-color="white"] .grax_tm_news .news_list ul li .details .date a:hover{color: #fff;}
.grax_tm_all_wrap[data-color="white"] .cursor-inner.cursor-hover{background-color: #fff;}
.grax_tm_all_wrap[data-color="white"] .cursor-outer{border-color: #fff;}
.grax_tm_all_wrap[data-color="white"] .cursor-inner{background-color: #fff;}
.grax_tm_all_wrap[data-color="white"] .progress_inner .background .bar_in{background: #fff;}
.grax_tm_all_wrap[data-color="purple"] .grax_tm_topbar .menu ul li.current a{color: #9200ee;}
.grax_tm_all_wrap[data-color="purple"] .grax_tm_topbar .menu ul li a:hover{color: #9200ee;}
.grax_tm_all_wrap[data-color="purple"] .grax_tm_title_holder span{color: #9200ee;}
.grax_tm_all_wrap[data-color="purple"] .grax_tm_button a{background-color: #9200ee;border-color:#9200ee;}
.grax_tm_all_wrap[data-color="purple"] .grax_tm_news .news_list ul li .details .title a:hover{color: #9200ee;}
.grax_tm_all_wrap[data-color="purple"] .grax_tm_news .news_list ul li .details .date a:hover{color: #9200ee;}
.grax_tm_all_wrap[data-color="purple"] .cursor-inner.cursor-hover{background-color: #9200ee;}
.grax_tm_all_wrap[data-color="purple"] .cursor-outer{border-color: #9200ee;}
.grax_tm_all_wrap[data-color="purple"] .cursor-inner{background-color: #9200ee;}
.grax_tm_all_wrap[data-color="purple"] .progress_inner .background .bar_in{background: #9200ee;}
.grax_tm_all_wrap[data-color="sky"] .grax_tm_topbar .menu ul li.current a{color: #00D4BD;}
.grax_tm_all_wrap[data-color="sky"] .grax_tm_topbar .menu ul li a:hover{color: #00D4BD;}
.grax_tm_all_wrap[data-color="sky"] .grax_tm_title_holder span{color: #00D4BD;}
.grax_tm_all_wrap[data-color="sky"] .grax_tm_button a{background-color: #00D4BD;border-color:#00D4BD;}
.grax_tm_all_wrap[data-color="sky"] .grax_tm_news .news_list ul li .details .title a:hover{color: #00D4BD;}
.grax_tm_all_wrap[data-color="sky"] .grax_tm_news .news_list ul li .details .date a:hover{color: #00D4BD;}
.grax_tm_all_wrap[data-color="sky"] .cursor-inner.cursor-hover{background-color: #00D4BD;}
.grax_tm_all_wrap[data-color="sky"] .cursor-outer{border-color: #00D4BD;}
.grax_tm_all_wrap[data-color="sky"] .cursor-inner{background-color: #00D4BD;}
.grax_tm_all_wrap[data-color="sky"] .progress_inner .background .bar_in{background: #00D4BD;}
.grax_tm_all_wrap[data-color="cadetBlue"] .grax_tm_topbar .menu ul li.current a{color: #5e9e9f;}
.grax_tm_all_wrap[data-color="cadetBlue"] .grax_tm_topbar .menu ul li a:hover{color: #5e9e9f;}
.grax_tm_all_wrap[data-color="cadetBlue"] .grax_tm_title_holder span{color: #5e9e9f;}
.grax_tm_all_wrap[data-color="cadetBlue"] .grax_tm_button a{background-color: #5e9e9f;border-color:#5e9e9f;}
.grax_tm_all_wrap[data-color="cadetBlue"] .grax_tm_news .news_list ul li .details .title a:hover{color: #5e9e9f;}
.grax_tm_all_wrap[data-color="cadetBlue"] .grax_tm_news .news_list ul li .details .date a:hover{color: #5e9e9f;}
.grax_tm_all_wrap[data-color="cadetBlue"] .cursor-inner.cursor-hover{background-color: #5e9e9f;}
.grax_tm_all_wrap[data-color="cadetBlue"] .cursor-outer{border-color: #5e9e9f;}
.grax_tm_all_wrap[data-color="cadetBlue"] .cursor-inner{background-color: #5e9e9f;}
.grax_tm_all_wrap[data-color="cadetBlue"] .progress_inner .background .bar_in{background: #5e9e9f;}
.grax_tm_all_wrap[data-color="olive"] .grax_tm_topbar .menu ul li.current a{color: #666d41;}
.grax_tm_all_wrap[data-color="olive"] .grax_tm_topbar .menu ul li a:hover{color: #666d41;}
.grax_tm_all_wrap[data-color="olive"] .grax_tm_title_holder span{color: #666d41;}
.grax_tm_all_wrap[data-color="olive"] .grax_tm_button a{background-color: #666d41;border-color:#666d41;}
.grax_tm_all_wrap[data-color="olive"] .grax_tm_news .news_list ul li .details .title a:hover{color: #666d41;}
.grax_tm_all_wrap[data-color="olive"] .grax_tm_news .news_list ul li .details .date a:hover{color: #666d41;}
.grax_tm_all_wrap[data-color="olive"] .cursor-inner.cursor-hover{background-color: #666d41;}
.grax_tm_all_wrap[data-color="olive"] .cursor-outer{border-color: #666d41;}
.grax_tm_all_wrap[data-color="olive"] .cursor-inner{background-color: #666d41;}
.grax_tm_all_wrap[data-color="olive"] .progress_inner .background .bar_in{background: #666d41;}
.grax_tm_all_wrap[data-color="crimson"] .grax_tm_topbar .menu ul li.current a{color: #2fac66;}
.grax_tm_all_wrap[data-color="crimson"] .grax_tm_topbar .menu ul li a:hover{color: #2fac66;}
.grax_tm_all_wrap[data-color="crimson"] .grax_tm_title_holder span{color: #2fac66;}
.grax_tm_all_wrap[data-color="crimson"] .grax_tm_button a{background-color: #2fac66;border-color:#2fac66;}
.grax_tm_all_wrap[data-color="crimson"] .grax_tm_news .news_list ul li .details .title a:hover{color: #2fac66;}
.grax_tm_all_wrap[data-color="crimson"] .grax_tm_news .news_list ul li .details .date a:hover{color: #2fac66;}
.grax_tm_all_wrap[data-color="crimson"] .cursor-inner.cursor-hover{background-color: #2fac66;}
.grax_tm_all_wrap[data-color="crimson"] .cursor-outer{border-color: #2fac66;}
.grax_tm_all_wrap[data-color="crimson"] .cursor-inner{background-color: #2fac66;}
.grax_tm_all_wrap[data-color="crimson"] .progress_inner .background .bar_in{background: #2fac66;}
.grax_tm_all_wrap[data-color="red"] .grax_tm_topbar .menu ul li.current a{color: #2fac66;}
.grax_tm_all_wrap[data-color="red"] .grax_tm_topbar .menu ul li a:hover{color: #2fac66;}
.grax_tm_all_wrap[data-color="red"] .grax_tm_title_holder span{color: #2fac66;}
.grax_tm_all_wrap[data-color="red"] .grax_tm_button a{background-color: #2fac66;border-color:#2fac66;}
.grax_tm_all_wrap[data-color="red"] .grax_tm_news .news_list ul li .details .title a:hover{color: #2fac66;}
.grax_tm_all_wrap[data-color="red"] .grax_tm_news .news_list ul li .details .date a:hover{color: #2fac66;}
.grax_tm_all_wrap[data-color="red"] .cursor-inner.cursor-hover{background-color: #2fac66;}
.grax_tm_all_wrap[data-color="red"] .cursor-outer{border-color: #2fac66;}
.grax_tm_all_wrap[data-color="red"] .cursor-inner{background-color: #2fac66;}
.grax_tm_all_wrap[data-color="red"] .progress_inner .background .bar_in{background: #2fac66;}
/* css/darkMode.css */
body.dark{
background-color: #000;
color: #bbb;
}
body.dark ::-webkit-input-placeholder {
color: #fff;
}
body.dark :-moz-placeholder {
color: #fff;
opacity:  1;
}
body.dark ::-moz-placeholder {
color: #fff;
opacity:  1;
}
body.dark :-ms-input-placeholder {
color: #fff;
}
body.dark ::-ms-input-placeholder {
color: #fff;
}
body.dark ::placeholder {
color: #fff;
}
body.dark h3{
color: #fff;
}
body.dark .grax_tm_topbar .logo .dark{display: none;}
body.dark .grax_tm_topbar .logo .light{display: block;}
body.dark .grax_tm_topbar.animate{
background-color: #000;
box-shadow: 0px 0px 10px rgb(255 255 255 / 10%);
}
body.dark .grax_tm_topbar .menu ul li a{
color: #fff;
}
body.dark .grax_tm_about{
background-color: transparent;
}
body.dark .grax_tm_about .right .list ul li span{
color: #fff;
}
body.dark .grax_tm_about .right .list ul li .svg{
color: #fff;
}
body.dark .grax_tm_button a:hover{
color: #fff;
}
body.dark .grax_tm_about .left .main{
box-shadow: none;
}
body.dark .grax_tm_portfolio{
background-color: #111;
}
body.dark .overlay_effect:after{
background-color: #111;
}
body.dark .grax_tm_portfolio .overlay{
background-color: #111;
}
body.dark .grax_tm_news{
background-color: #111;
}
body.dark .grax_tm_news .news_list ul li .details .title a{
color: #fff;
}
body.dark .grax_tm_news .news_list ul li .details .date{
color: #bbb;
}
body.dark .grax_tm_news .news_list ul li .details .date a{
color: #bbb;
}
body.dark .grax_tm_modalbox_news .details .title{
color: #000;
}
body.dark .grax_tm_modalbox_news .description p{
color: #767676;
}
body.dark .grax_tm_contact .fields ul li input{
border: 1px solid rgba(255,255,255,.2);
background-color: transparent;
color: #fff;
}
body.dark .grax_tm_contact .fields .last textarea{
border: 1px solid rgba(255,255,255,.2);
background-color: transparent;
color: #fff;
}
body.dark .grax_tm_contact .info_list ul li span{
color: #fff;
}
body.dark .grax_tm_contact .info_list ul li .svg{
color: #fff;
}
body.dark .grax_tm_contact .info_list ul li a:hover{
color: #fff !important;
}
body.dark .grax_tm_copyright{
background-color: #111;
padding-top: 95px;
}
body.dark .my_wave{
display: none;
}
body.dark .progress_inner .background{
background: rgba(255,255,255,.09);
}
body.dark .progress_inner > span{
color: #fff;
}
/* css/style.css */
:root {
--neexo-display: "Space Grotesk", system-ui, sans-serif;
}
html {
overflow-x: hidden;
padding: 0px;
margin: 0px;
}
body {
font-family: "Mulish";
font-size: 15px;
line-height: 30px;
letter-spacing: 1px;
word-wrap: break-word;
font-weight: 400;
background-color: #fff;
color: #767676;
}
svg {
fill: currentcolor;
width: 15px;
height: 15px;
}
img.svg {
width: 15px;
height: 15px;
}
::-webkit-input-placeholder {
color: #6f6f6f;
}
:-moz-placeholder {
color: #6f6f6f;
opacity: 1;
}
::-moz-placeholder {
color: #6f6f6f;
opacity: 1;
}
:-ms-input-placeholder {
color: #6f6f6f;
}
::-ms-input-placeholder {
color: #6f6f6f;
}
::placeholder {
color: #6f6f6f;
}
.container {
max-width: 1200px;
width: 100%;
margin-left: auto;
margin-right: auto;
height: auto;
padding: 0px 40px;
position: relative;
clear: both;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
line-height: 1.4;
font-family: var(--neexo-display);
color: #000;
}
h1 {
font-size: 45px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 24px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 16px;
}
.grax_tm_all_wrap {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative;
}
.grax_tm_all_wrap,
.grax_tm_all_wrap * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grax_tm_section {
width: 100%;
height: auto;
clear: both;
float: left;
}
#preloader {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100%;
z-index: 99999;
display: flex;
}
#preloader:before,
#preloader:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
z-index: -1;
background-color: #fff;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
#preloader:after {
left: auto;
right: 0;
}
#preloader .loader_line {
margin: auto;
width: 1px;
height: 250px;
position: relative;
overflow: hidden;
-webkit-transition: all 0.8s ease 0s;
-o-transition: all 0.8s ease 0s;
transition: all 0.8s ease 0s;
}
.loader_line:before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 0%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #000;
-webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
-o-animation: lineheight 1000ms ease-in-out 0s forwards;
animation: lineheight 1000ms ease-in-out 0s forwards;
}
.loader_line:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
background-color: #C8C8C8;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-animation: lineround 1200ms linear 0s infinite;
-o-animation: lineround 1200ms linear 0s infinite;
animation: lineround 1200ms linear 0s infinite;
animation-delay: 2000ms;
}
@keyframes lineheight{
0% {
height: 0%;
}
100% {
height: 100%;
}
}
@keyframes lineround{
0% {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(200%);
-ms-transform: translateY(200%);
-o-transform: translateY(200%);
transform: translateY(200%);
}
}
.preloaded .loader_line:after {
opacity: 0;
}
.preloaded  .loader_line {
opacity: 0;
height: 100%!important;
}
.preloaded:before,
.preloaded:after {
-webkit-animation: preloadedzero 300ms ease-in-out 500ms forwards;
-o-animation: preloadedzero 300ms ease-in-out 500ms forwards;
animation: preloadedzero 300ms ease-in-out 500ms forwards;
}
@keyframes preloadedzero{
0% {
width: 50%;
}
100% {
width: 0%;
}
}
.grax_tm_topbar {
left: 0px;
right: 0px;
position: fixed;
z-index: 10;
padding: 30px 0px;
transform: translateY(-101%);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_topbar.opened {
transform: translateY(0);
}
.grax_tm_topbar.animate {
background-color: #fff;
padding: 25px 0px;
box-shadow: 0px 0px 10px rgba(0,0,0,.1);
}
.grax_tm_topbar .topbar_inner {
width: 100%;
height: auto;
clear: both;
display: flex;
align-items: center;
justify-content: space-between;
}
.grax_tm_topbar .logo .dark {
display: none;
}
.grax_tm_topbar.animate .logo .dark {
display: block;
}
.grax_tm_topbar.animate .logo .light {
display: none;
}
.grax_tm_topbar .logo img {
max-width: 100px;
}
.grax_tm_topbar .logo a {
display: inline-block;
}
.grax_tm_topbar .menu ul {
margin: 0px;
list-style-type: none;
}
.grax_tm_topbar .menu ul li {
margin: 0px 30px 0px 0px;
display: inline-block;
}
.grax_tm_topbar .menu ul li:last-child {
margin-right: 0px;
}
.grax_tm_topbar .menu ul li a {
text-decoration: none;
color: #fff;
font-family: var(--neexo-display);
font-weight: 500;
font-size: 15px;
letter-spacing: .4px;
transition: all .3s ease;
}
.grax_tm_topbar .menu ul li.current a {
color: #e54b4b;
}
.grax_tm_topbar .menu ul li a:hover {
color: #e54b4b;
}
.grax_tm_topbar.animate .menu ul li a {
color: #000;
}
.grax_tm_mobile_menu {
width: 100%;
height: auto;
position: fixed;
top: 0px;
left: 0px;
display: none;
z-index: 10;
}
.grax_tm_mobile_menu .topbar_inner {
width: 100%;
height: auto;
float: left;
clear: both;
background-color: #fff;
padding: 20px 0px;
border-bottom: 1px solid rgba(0,0,0,.2);
}
.grax_tm_mobile_menu .topbar_in {
width: 100%;
height: auto;
clear: both;
float: left;
display: flex;
align-items: center;
justify-content: space-between;
}
.my_trigger .hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.my_trigger .hamburger-box {
width: 30px;
height: 18px;
display: inline-block;
position: relative;
}
.my_trigger .hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.my_trigger .hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 30px;
height: 2px;
background-color: #333333;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.my_trigger .hamburger-inner::before,
.my_trigger .hamburger-inner::after {
content: "";
display: block;
}
.my_trigger .hamburger-inner::before {
top: -8px;
}
.my_trigger .hamburger-inner::after {
bottom: -10px;
}
.my_trigger .hamburger--collapse-r .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.my_trigger .hamburger--collapse-r .hamburger-inner::after {
top: -16px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.my_trigger .hamburger--collapse-r .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner::before {
top: 0;
transform: rotate(90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.my_trigger .hamburger {
padding: 0px;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.my_trigger .hamburger-box {
display: block;
}
.my_trigger .hamburger .hamburger-inner::before,
.my_trigger .hamburger .hamburger-inner::after,
.my_trigger .hamburger .hamburger-inner {
background-color: #000;
width: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_mobile_menu .dropdown {
width: 100%;
height: auto;
clear: both;
float: left;
background-color: #fff;
border-bottom: 1px solid rgba(0,0,0,.2);
display: none;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner {
width: 100%;
height: auto;
clear: both;
float: left;
padding: 25px 0px;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul {
margin: 0px;
list-style-type: none;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul li {
margin: 0px;
float: left;
width: 100%;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul li a {
text-decoration: none;
color: #000;
display: inline-block;
padding: 4px 0px;
font-family: var(--neexo-display);
font-weight: 500;
letter-spacing: .4px;
}
.grax_tm_mobile_menu .logo img {
max-width: 70px;
}
.grax_tm_hero {
width: 100%;
height: 100vh;
clear: both;
float: left;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 100%);
overflow: hidden;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_hero.creative {
clip-path: none;
}
.grax_tm_hero.creative.shape {
clip-path: none;
}
.grax_tm_hero.shape {
clip-path: polygon(0 0, 100% 0, 100% 83%, 25% 100%, 0 83%);
}
.grax_tm_hero .bg {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.grax_tm_hero .bg .image {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.grax_tm_hero .bg .overlay {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
background-color: rgba(0,0,0,.2);
}
.grax_tm_hero .content {
width: 100%;
height: 100%;
float: left;
position: relative;
z-index: 2;
}
.grax_tm_hero .container {
height: 100%;
}
.grax_tm_hero .details {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
}
.grax_tm_hero .name {
font-size: 72px;
font-weight: 700;
color: #fff;
margin-bottom: 11px;
}
.grax_tm_hero .details[data-animation="toTop"] .fn_animation .character {
top: 15px;
}
.grax_tm_hero .details[data-animation="toTop"] .fn_animation .character.opened {
top: 0px;
}
.grax_tm_hero .details[data-animation="toRight"] .fn_animation .character {
right: 15px;
}
.grax_tm_hero .details[data-animation="toRight"] .fn_animation .character.opened {
right: 0px;
}
.grax_tm_hero .details[data-animation="scale"] .fn_animation .character {
opacity: 1;
visibility: visible;
transform: scale(0);
}
.grax_tm_hero .details[data-animation="scale"] .fn_animation .character.opened {
transform: scale(1);
}
.grax_tm_hero .details[data-animation="rotate"] .fn_animation .character {
transform: rotate(30deg);
}
.grax_tm_hero .details[data-animation="rotate"] .fn_animation .character.opened {
transform: rotate(0);
}
.fn_animation {
opacity: 0;
}
.fn_animation.ready {
opacity: 1;
}
.fn_animation .character {
display: inline-block;
position: relative;
opacity: 0;
visibility: hidden;
transform: translateZ(0);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.fn_animation .character.opened {
opacity: 1;
visibility: visible;
}
.fn_animation.job .character {
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.grax_tm_hero .job {
color: #ddd;
letter-spacing: 1.5px;
font-family: var(--neexo-display);
font-size: 17px;
font-weight: 500;
margin-bottom: 40px;
max-width: 400px;
font-style: italic;
}
.grax_tm_down {
position: absolute;
z-index: 7;
bottom: 5%;
display: none;
}
.grax_tm_down.opened {
display: block;
}
.grax_tm_down[data-position="left"] {
left: 0px;
}
.grax_tm_down[data-position="right"] {
right: 0px;
}
.grax_tm_down[data-position="center"] {
left: 50%;
transform: translateX(-50%);
}
.grax_tm_down .line_wrapper {
position: absolute;
width: 1px;
height: 100%;
left: 0;
right: 0;
margin: 0px auto;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
visibility: visible;
-webkit-transition: all .7s;
-moz-transition: all .7s;
-ms-transition: all .7s;
-o-transition: all .7s;
transition: all .7s;
}
.grax_tm_down .line_wrapper {
width: 1px;
height: 50px;
background: none;
display: block;
}
.grax_tm_down .line_wrapper:before {
content: "";
background-color: #000;
width: 1px;
height: 50%;
display: block;
top: 0;
-webkit-animation: scroll-down 2s ease-in-out infinite;
-ms-animation: scroll-down 2s ease-in-out infinite;
animation: scroll-down 2s ease-in-out infinite;
}
@-webkit-keyframes scroll-down {
0% {
height: 0;
}
50% {
height: 100%;
}
70% {
height: 100%;
transform: scaleY(0.5);
transform-origin: bottom;
}
100% {
height: 100%;
transform: scaleY(0);
transform-origin: bottom;
}
}
.grax_tm_down[data-skin="light"] .line_wrapper:before {
background-color: #fff;
}
.grax_tm_about {
width: 100%;
height: auto;
clear: both;
float: left;
background-color: #fff;
margin-bottom: 150px;
padding-top: 150px;
}
.grax_tm_about .about_inner {
width: 100%;
height: auto;
clear: both;
display: flex;
align-items: center;
}
.grax_tm_about .left {
width: 40%;
padding-right: 50px;
}
.grax_tm_about .left .image {
position: relative;
}
.grax_tm_about .left .image img {
opacity: 0;
min-width: 100%;
}
.grax_tm_about .left .main {
position: absolute !important;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 5px;
box-shadow: 0px 0px 40px rgb(0 0 0 / 20%);
}
.grax_tm_about .right {
width: 60%;
padding-left: 50px;
}
.grax_tm_about .right .text {
width: 100%;
float: left;
padding-top: 27px;
padding-bottom: 28px;
}
.grax_tm_about .right .list {
width: 100%;
float: left;
margin-bottom: 27px;
}
.grax_tm_about .right .list ul {
margin: 0px 0px 0px -20px;
list-style-type: none;
}
.grax_tm_about .right .list ul li {
margin: 0px 0px 13px 0px;
float: left;
width: 50%;
position: relative;
padding-left: 20px;
}
.grax_tm_about .right .list ul li .list_inner {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative;
padding-left: 30px;
}
.grax_tm_about .right .list ul li span {
font-family: var(--neexo-display);
font-weight: 600;
color: #000;
font-style: italic;
}
.grax_tm_about .right .list ul li .svg {
width: 15px;
height: 15px;
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
color: #000;
margin-top: -1px;
}
.grax_tm_button {
width: 100%;
height: auto;
clear: both;
float: left;
}
.grax_tm_button a {
text-decoration: none;
color: #fff;
display: inline-block;
background-color: #e54b4b;
border: 2px solid #e54b4b;
padding: 10px 40px;
border-radius: 5px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_button a:hover {
background-color: transparent !important;
color: #000;
}
.grax_tm_progress_part {
width: 100%;
height: auto;
clear: both;
float: left;
padding: 135px 0px 140px 0px;
}
.grax_tm_progress_part .part_inner {
width: 100%;
height: auto;
clear: both;
display: flex;
}
.grax_tm_progress_part .left {
width: 50%;
padding-right: 50px;
}
.grax_tm_progress_part .left h2,
.grax_tm_progress_part .left h3 {
font-size: 30px;
font-weight: 600;
margin-bottom: 27px;
color: #30ac66;
}
.grax_tm_progress_part .right {
width: 50%;
padding-left: 50px;
}
.kioto_progress {
width: 100%;
height: auto;
clear: both;
float: left;
}
.progress_inner {
width: 100%;
margin-bottom: 27px;
}
.progress_inner:last-child {
margin-bottom: 0px;
}
.progress_inner > span {
margin: 0px 0px 7px 0px;
width: 100%;
display: block;
text-align: left;
font-family: var(--neexo-display);
font-weight: 500;
color: #000;
}
.progress_inner span.number {
float: right;
}
.progress_inner .background {
background: rgba(0,0,0,.09);
width: 100%;
min-width: 100%;
position: relative;
height: 8px;
border-radius: 5px;
}
.progress_inner .background .bar_in {
height: 100%;
background: #e54b4b;
width: 0px;
overflow: hidden;
border-radius: 5px;
}
.progress_inner .background .bar {
width: 0px;
height: 100%;
}
.progress_inner .background .bar.open {
-webkit-animation: wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);
-moz-animation: wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);
animation: wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);
width: 100%;
}
@-webkit-keyframes wow {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@-moz-keyframes wow {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@keyframes wow {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.grax_tm_title_holder {
width: 100%;
height: auto;
clear: both;
float: left;
}
.grax_tm_title_holder span {
color: #e54b4b;
}
.grax_tm_title_holder h2,
.grax_tm_title_holder h3 {
font-size: 30px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 10px;
}
.grax_tm_portfolio {
width: 100%;
height: auto;
clear: both;
float: left;
padding: 140px 0px 100px 0px;
background-color: #f9f9f9;
}
.grax_tm_portfolio .portfolio_list {
width: 100%;
height: auto;
clear: both;
float: left;
padding-top: 90px;
}
.grax_tm_portfolio ul {
margin: 0px 0px 0px -50px;
list-style-type: none;
}
.grax_tm_portfolio ul li {
margin: 0px 0px 50px 0px;
float: left;
width: 33.3333%;
padding-left: 50px;
}
.grax_tm_portfolio ul li .list_inner {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative;
border-radius: 5px;
overflow: hidden;
}
.grax_tm_portfolio .image {
position: relative;
}
.grax_tm_portfolio .image img {
min-width: 100%;
opacity: 0;
}
.grax_tm_portfolio .image .main {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 5px;
}
.grax_tm_portfolio .overlay {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
background-color: #f9f9f9;
border-radius: 5px;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_portfolio ul li .list_inner:hover .overlay {
opacity: 0.7;
visibility: visible;
}
.grax_tm_portfolio .details {
position: absolute;
bottom: 20px;
left: 30px;
z-index: 2;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_portfolio ul li .list_inner:hover .details {
opacity: 1;
visibility: visible;
bottom: 30px;
}
.grax_tm_portfolio .details span {
font-family: var(--neexo-display);
}
.grax_tm_portfolio .details h3 {
font-size: 18px;
font-weight: 600;
}
.grax_tm_full_link {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 4;
}
.overlay_effect {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 3;
border-radius: 5px;
}
.overlay_effect:after {
position: absolute;
content: "";
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #f9f9f9;
z-index: 1;
}
.overlay_effect:before {
position: absolute;
content: "";
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.my_waypoint.load .overlay_effect:before {
z-index: 2;
background-color: #000;
animation: anim 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.my_waypoint.load .overlay_effect:after {
animation: anim2 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
@keyframes anim{
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
@keyframes anim2{
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.grax_tm_talk {
width: 100%;
height: auto;
clear: both;
float: left;
padding: 102px 20px 105px 20px;
position: relative;
}
.grax_tm_talk:before {
position: absolute;
content: "";
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-image: url(..//img/patterns/inspiration-geometry.png);
background-repeat: repeat;
opacity: 1;
z-index: 2;
}
.grax_tm_talk:after {
position: absolute;
content: "";
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #000;
z-index: 1;
}
.grax_tm_talk .talk_inner {
width: 100%;
height: auto;
clear: both;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 3;
}
.grax_tm_talk .text {
padding-right: 20px;
}
.grax_tm_talk .text h2,
.grax_tm_talk .text h3 {
font-size: 30px;
font-weight: 600;
color: #fff;
}
.grax_tm_talk .text h2 span,
.grax_tm_talk .text h3 span {
position: relative;
}
.grax_tm_talk .text h2 span:before,
.grax_tm_talk .text h3 span:before {
position: absolute;
content: "";
width: 20px;
height: 4px;
background-color: #fff;
bottom: 11px;
left: 100%;
opacity: 1;
animation: myAnim 0.9s infinite;
-moz-animation: myAnim 0.9s infinite;
-webkit-animation: myAnim 0.9s infinite;
}
@keyframes myAnim{
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes myAnim{
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes myAnim{
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.grax_tm_talk .text p {
font-family: var(--neexo-display);
}
.grax_tm_talk .button a {
color: #fff;
text-decoration: none;
font-family: var(--neexo-display);
font-weight: 600;
position: relative;
display: inline-block;
}
.grax_tm_talk .button a:before {
content: '';
width: 100%;
height: 2px;
position: absolute;
left: auto;
right: 0;
bottom: 0;
background: rgba(255,255,255,.2);
}
.grax_tm_talk .button a:after {
content: '';
width: 0;
height: 1px;
position: absolute;
left: auto;
right: 0;
bottom: 0;
transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
background: currentColor;
}
.grax_tm_talk .button a:hover:after {
width: 100%;
left: 0;
right: auto;
}
.grax_tm_news {
width: 100%;
height: auto;
clear: both;
float: left;
background-color: #f9f9f9;
padding: 140px 0px 90px 0px;
}
.grax_tm_news .news_list {
width: 100%;
height: auto;
clear: both;
float: left;
padding-top: 90px;
}
.grax_tm_news .news_list ul {
margin: 0px 0px 0px -50px;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.grax_tm_news .news_list ul li {
margin: 0px 0px 50px 0px;
float: left;
width: 33.3333%;
padding-left: 50px;
}
.grax_tm_news .news_list ul li .list_inner {
width: 100%;
height: 100%;
clear: both;
float: left;
position: relative;
}
.grax_tm_news .news_list ul li .image {
position: relative;
overflow: hidden;
}
.grax_tm_news .news_list ul li .image img {
min-width: 100%;
opacity: 0;
}
.grax_tm_news .news_list ul li .image .main {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transform: scale(1) translateZ(0);
border-radius: 5px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_news .news_list ul li .list_inner .image:hover .main {
transform: scale(1.1) rotate(3deg);
}
.grax_tm_news .news_list ul li .details {
width: 100%;
float: left;
padding-right: 15px;
padding-top: 32px;
}
.grax_tm_news .news_list ul li .details .title {
margin-bottom: 10px;
}
.grax_tm_news .news_list ul li .details .title a {
text-decoration: none;
color: #000;
font-size: 18px;
font-weight: 600;
display: inline-block;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_news .news_list ul li .details .title a:hover {
color: #e54b4b;
}
.grax_tm_news .news_list ul li .details .date {
text-transform: uppercase;
font-family: var(--neexo-display);
font-size: 12px;
color: #767676;
font-style: italic;
}
.grax_tm_news .news_list ul li .details .date a {
text-decoration: none;
color: #767676;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_news .news_list ul li .details .date a:hover {
color: #e54b4b;
}
.grax_tm_news .news_list ul li .details .date span {
position: relative;
margin-left: 11px;
}
.grax_tm_news .news_list ul li .details .date span:before {
position: absolute;
content: "";
margin-top: 1px;
top: 50%;
transform: translateY(-50%) rotate(15deg);
right: 100%;
background-color: #939393;
width: 1px;
height: 9px;
margin-right: 7px;
}
.grax_tm_news .description {
opacity: 0;
visibility: hidden;
position: absolute;
z-index: -11;
display: none;
}
body.modal {
overflow-y: hidden;
}
.grax_tm_modalbox_news {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 100vh;
z-index: 15;
background-color: rgba(0,0,0,.8);
opacity: 0;
visibility: hidden;
transition: all .3s ease;
}
.grax_tm_modalbox_news.opened {
opacity: 1;
visibility: visible;
}
.grax_tm_modalbox_news .container {
height: 100vh;
}
.grax_tm_modalbox_news .box_inner {
position: absolute;
top: 70px;
bottom: 70px;
width: 1200px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
z-index: 1;
opacity: 0;
visibility: hidden;
margin-top: -20px;
transition: all .3s ease;
transition-delay: .3s;
}
.grax_tm_modalbox_news.opened .box_inner {
opacity: 1;
visibility: visible;
margin-top: 0px;
}
.grax_tm_modalbox_news .close {
position: fixed;
left: 100%;
top: 0px;
margin-left: 40px;
z-index: 111111;
}
.grax_tm_modalbox_news .close a {
text-decoration: none;
color: #fff;
}
.grax_tm_modalbox_news .close .svg {
width: 50px;
height: 50px;
}
.grax_tm_modalbox_news .description_wrap {
position: relative;
width: 100%;
height: 100%;
float: left;
overflow: hidden;
padding: 50px;
}
.grax_tm_modalbox_news .details {
width: 100%;
float: left;
margin-bottom: 30px;
}
.grax_tm_modalbox_news .description {
width: 100%;
float: left;
}
.grax_tm_modalbox_news .description p {
margin-bottom: 15px;
}
.grax_tm_modalbox_news .description blockquote {
font-style: italic;
color: #000;
border-left: 2px solid #e54b4b;
padding-left: 20px;
margin-bottom: 15px;
}
.grax_tm_modalbox_news .description_wrap .image {
position: relative;
max-height: 450px;
z-index: -1;
margin-bottom: 40px;
}
.grax_tm_modalbox_news .description_wrap .image img {
min-width: 100%;
}
.grax_tm_modalbox_news .description_wrap .image .main {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 5px;
}
.grax_tm_modalbox_news .details .title {
font-weight: 600;
margin-bottom: 5px;
}
.grax_tm_modalbox_news .date {
text-transform: uppercase;
font-family: var(--neexo-display);
font-size: 12px;
color: #767676;
font-style: italic;
}
.grax_tm_modalbox_news .date a {
text-decoration: none;
color: #767676;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_modalbox_news .date a:hover {
color: #e54b4b;
}
.grax_tm_modalbox_news .date span {
position: relative;
margin-left: 11px;
}
.grax_tm_modalbox_news .date span:before {
position: absolute;
content: "";
margin-top: 0px;
top: 50%;
transform: translateY(-50%) rotate(15deg);
right: 100%;
background-color: #939393;
width: 1px;
height: 9px;
margin-right: 7px;
}
.grax_tm_modalbox_news .share {
width: 100%;
height: auto;
clear: both;
display: flex;
align-items: center;
}
.grax_tm_modalbox_news .share span {
font-family: var(--neexo-display);
color: #000;
font-weight: 600;
display: inline-block;
padding-right: 20px;
}
.grax_tm_modalbox_news .share ul {
margin: 0px;
list-style-type: none;
}
.grax_tm_modalbox_news .share ul li {
margin: 0px 10px 0px 0px;
display: inline-block;
}
.grax_tm_modalbox_news .share ul li a {
text-decoration: none;
color: #000;
}
.grax_tm_contact {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative;
margin-bottom: 110px;
padding-top: 140px;
}
.grax_tm_contact .contact_inner {
width: 100%;
height: auto;
clear: both;
display: flex;
padding-top: 77px;
}
.grax_tm_contact .left {
width: 50%;
}
.grax_tm_contact .left .text {
width: 100%;
float: left;
margin-bottom: 40px;
}
.grax_tm_contact .info_list {
width: 100%;
height: auto;
clear: both;
float: left;
}
.grax_tm_contact .info_list ul {
margin: 0px;
list-style-type: none;
}
.grax_tm_contact .info_list li {
margin: 0px 0px 18px 0px;
float: left;
width: 100%;
position: relative;
}
.grax_tm_contact .info_list ul li .list_inner {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative;
padding-left: 27px;
}
.grax_tm_contact .info_list ul li span.first {
min-width: 100px;
display: inline-block;
}
.grax_tm_contact .info_list ul li span.second {
font-weight: 400 !important;
color: inherit !important;
}
.grax_tm_contact .info_list ul li span {
font-family: var(--neexo-display);
font-weight: 600;
color: #000;
}
.grax_tm_contact .info_list ul li a {
text-decoration: none;
color: inherit !important;
transition: all .3s ease;
display: inline-block;
position: relative;
}
.grax_tm_contact .info_list ul li a:hover {
color: #000;
}
.grax_tm_contact .info_list ul li a:after {
content: '';
width: 0;
height: 1px;
position: absolute;
left: auto;
right: 0;
bottom: 0;
transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
background: currentColor;
}
.grax_tm_contact .info_list ul li a:hover:after {
width: 100%;
left: 0;
right: auto;
}
.grax_tm_contact .info_list ul li a:hover {
color: #000 !important;
}
.grax_tm_contact .info_list ul li .svg {
width: 15px;
height: 15px;
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
color: #000;
margin-top: -1px;
}
.grax_tm_contact .right {
width: 50%;
padding-left: 50px;
}
.grax_tm_contact .fields {
width: 100%;
height: auto;
clear: both;
float: left;
}
.grax_tm_contact .fields .first {
width: 100%;
float: left;
}
.grax_tm_contact .fields ul {
margin: 0px;
list-style-type: none;
}
.grax_tm_contact .fields ul li {
width: 100%;
margin: 0px 0px 30px 0px;
float: left;
}
.grax_tm_contact .fields ul li input {
width: 100%;
border: 1px solid rgba(0,0,0,.2);
background-color: #fff;
border-radius: 5px;
}
.grax_tm_contact .fields ul li input:focus {
outline: none;
border: 1px solid rgba(0,0,0,.5);
}
.grax_tm_contact .fields .last textarea {
width: 100%;
border: 1px solid rgba(0,0,0,.2);
height: 120px;
resize: none;
margin-bottom: 20px;
background-color: #fff;
border-radius: 5px;
}
.grax_tm_contact .fields .last textarea:focus {
outline: none;
border: 1px solid rgba(0,0,0,.5);
}
.grax_tm_contact .empty_notice {
color: #F52225;
margin-bottom: 7px;
display: none;
text-align: left;
font-weight: 500;
}
.grax_tm_contact .contact_error {
color: #F52225;
text-align: left;
font-weight: 500;
}
.grax_tm_contact .returnmessage {
color: #3A00FF;
margin-bottom: 7px;
text-align: left;
font-weight: 500;
}
.grax_tm_contact .grax_tm_button a {
display: block;
text-align: center;
}
.grax_tm_copyright {
width: 100%;
height: auto;
clear: both;
float: left;
background-color: #000;
padding: 130px 0px 100px 0px;
position: relative;
}
.grax_tm_copyright .copyright_inner {
width: 100%;
height: auto;
clear: both;
display: flex;
align-items: center;
justify-content: space-between;
}
.grax_tm_copyright .logo img {
max-width: 100px;
}
.grax_tm_copyright .social ul {
margin: 0px;
list-style-type: none;
}
.grax_tm_copyright .social ul li {
margin: 0px 25px 0px 0px;
display: inline-block;
}
.grax_tm_copyright .social ul li:last {
margin-right: 0px;
}
.grax_tm_copyright .social ul li a {
text-decoration: none;
color: #fff;
}
.grax_tm_copyright .social .svg {
width: 17px;
height: 17px;
}
.grax_tm_copyright .copy p {
text-transform: uppercase;
color: #fff;
font-family: var(--neexo-display);
font-weight: 500;
font-size: 14px;
}
.grax_tm_copyright .copy a {
text-decoration: none;
color: #fff;
}
.my_wave {
position: absolute;
top: 0;
left: 0px;
width: 100%;
}
.my_wave svg {
overflow: hidden;
vertical-align: middle;
height: 180px;
width: 100%;
fill: #fff;
}
.mouse-cursor {
position: fixed;
left: 0;
top: 0;
pointer-events: none;
border-radius: 50%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
visibility: hidden;
}
.cursor-inner {
margin-left: -3px;
margin-top: -3px;
width: 6px;
height: 6px;
z-index: 50;
background-color: #000;
-webkit-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
}
.cursor-inner.cursor-hover {
margin-left: -40px;
margin-top: -40px;
width: 80px;
height: 80px;
background-color: #000;
opacity: .3;
}
.cursor-outer {
margin-left: -15px;
margin-top: -15px;
width: 30px;
height: 30px;
border: 2px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 50;
opacity: .5;
-webkit-transition: all .08s ease-out;
transition: all .08s ease-out;
}
.cursor-outer.cursor-hover {
opacity: 0;
}
.grax_tm_all_wrap[data-magic-cursor="hide"] .mouse-cursor {
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
z-index: -1111;
}
.grax_tm_hero .particle_wrapper {
position: relative;
float: left;
width: 100%;
height: 100%;
}
#particles-js {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
.grax_tm_hero .glitch_wrap {
position: relative;
width: 100%;
height: 100%;
float: left;
overflow: hidden;
}
.glitch {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("..//img/slider/2.jpg");
background-size: cover;
-webkit-background-size: cover;
background-position: center;
z-index: -1 !important;
opacity: 1;
transform: scale(1);
}
.glitch:before {
content: "";
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.grax_tm_hero .ripple {
width: 100%;
height: 100%;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url(..//img/slider/2.jpg);
}
.grax_tm_hero .ripple:before {
position: absolute;
content: "";
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: rgba(0,0,0,.3);
z-index: 1;
}
.container.water {
visibility: hidden;
}
.my_shape {
position: absolute;
width: 100%;
left: 0px;
bottom: -11px;
z-index: 5;
}
.my_shape .svg {
width: 100%;
height: 100%;
}
.grax_tm_down.shape {
bottom: 20%;
}
.my_shape svg {
width: 100%;
height: 100%;
color: #fff;
}
.progressbar {
position: fixed;
height: 100px;
width: 1px;
bottom: 25px;
right: -25px;
background-color: rgba(0,0,0,.08);
z-index: 10;
transition: all .3s ease;
}
.progressbar.animate {
right: 25px;
}
.progressbar .line {
position: absolute;
width: 1px;
height: auto;
background-color: rgba(0,0,0,.4);
}
.progressbar .text {
position: absolute;
top: -77%;
left: 0px;
font-family: var(--neexo-display);
font-size: 13px;
transform: rotateZ(90deg);
text-transform: uppercase;
transform-origin: left;
white-space: nowrap;
}
.progressbar a {
text-decoration: none;
color: #000;
}
.grax_tm_settings {
position: fixed;
z-index: 20;
top: 20%;
right: -200px;
width: 200px;
background-color: rgba(0,0,0,1.00);
padding: 40px 20px 33px 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_settings.opened {
right: 0px;
}
.grax_tm_settings .wrapper {
width: 100%;
height: auto;
clear: both;
float: left;
}
.grax_tm_settings .icon {
position: absolute;
top: 0px;
right: 100%;
background-color: #000;
padding: 12px 12px 4px 12px;
}
.grax_tm_settings .icon .svg {
color: #fff;
width: 25px;
height: 25px;
animation: fa-spin 2s infinite linear;
}
.grax_tm_settings .link {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.grax_tm_settings .title {
color: #fff;
font-family: "Montserrat";
font-weight: 600;
position: relative;
display: inline-block;
}
.grax_tm_settings .title:before {
position: absolute;
content: "";
width: 100%;
height: 1px;
background-color: rgba(255,255,255,.2);
left: 0px;
bottom: 0px;
}
.grax_tm_settings .colors {
margin: 0px 0px 22px 0px;
list-style-type: none;
padding-top: 32px;
}
.grax_tm_settings .colors li {
margin: 0px;
display: inline-block;
}
.grax_tm_settings .colors li a {
text-decoration: none;
display: inline-block;
width: 30px;
height: 30px;
border-radius: 100%;
}
.grax_tm_settings .direction {
list-style-type: none;
margin: 0px 0px 20px 0px;
}
.grax_tm_settings .direction li {
margin: 0px 20px 0px 0px;
display: inline-block;
}
.grax_tm_settings .direction li a {
opacity: .4;
text-decoration: none;
color: #fff;
}
.grax_tm_settings .direction li a.active {
opacity: 1;
}
.grax_tm_settings .direction li .svg {
width: 25px;
height: 25px;
}
.grax_tm_settings .colors li.bl {
display: inline-block;
}
.grax_tm_settings .colors li.wh {
display: none;
}
body.dark .grax_tm_settings .colors li.bl,
.grax_tm_settings.changed .colors li.bl {
display: none;
}
body.dark .grax_tm_settings .colors li.wh,
.grax_tm_settings.changed .colors li.wh {
display: inline-block;
}
body.dark .grax_tm_settings,
.grax_tm_settings.changed {
background-color: #fff;
}
body.dark .grax_tm_settings .icon,
.grax_tm_settings.changed .icon {
background-color: #fff;
}
body.dark .grax_tm_settings .icon .svg,
.grax_tm_settings.changed .icon .svg {
color: #000;
}
body.dark .grax_tm_settings .title,
.grax_tm_settings.changed .title {
color: #000;
}
body.dark .grax_tm_settings .title:before,
.grax_tm_settings.changed .title:before {
background-color: rgba(0,0,0,.5);
}
body.dark .grax_tm_settings .direction li a,
.grax_tm_settings.changed .direction li a {
color: #000;
}
body.dark .grax_tm_settings .cursor li:nth-child(1) a,
.grax_tm_settings.changed .cursor li:nth-child(1) a {
border-color: #000;
}
body.dark .grax_tm_settings .cursor li:nth-child(1) a:before,
.grax_tm_settings.changed .cursor li:nth-child(1) a:before {
background-color: #000;
}
body.dark .grax_tm_settings .cursor li .svg,
.grax_tm_settings.changed .cursor li .svg {
color: #000;
}
.grax_tm_settings .cursor {
margin: 0px;
list-style-type: none;
padding-top: 15px;
}
.grax_tm_settings .cursor li {
margin: 0px 20px 0px 0px;
display: inline-block;
}
.grax_tm_settings .cursor li a {
text-decoration: none;
color: #fff;
opacity: .4;
font-weight: 600;
}
.grax_tm_settings .cursor li a.showme {
opacity: 1;
}
.grax_tm_settings .cursor li:nth-child(1) a {
width: 30px;
height: 30px;
border-radius: 100%;
border: 2px solid #fff;
position: relative;
display: inline-block;
}
.grax_tm_settings .cursor li:nth-child(1) a:before {
position: absolute;
content: "";
width: 4px;
height: 4px;
border-radius: 100%;
background-color: #fff;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
.grax_tm_settings .cursor li .svg {
width: 25px;
height: 25px;
color: #fff;
}
.grax_tm_settings .cursor li:nth-child(2) {
position: relative;
top: -2px;
}
.grax_tm_settings .effect {
margin: 0px;
list-style-type: none;
padding-top: 15px;
padding-bottom: 25px;
}
.grax_tm_settings .effect li {
margin: 0px 0px 5px 0px;
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 100%;
background-color: #fff;
opacity: .4;
}
.grax_tm_settings .effect li a {
text-decoration: none;
color: #000;
font-size: 13px;
font-weight: 600;
font-family: "Montserrat";
display: block;
position: relative;
top: 2px;
}
.grax_tm_settings .effect li.selected {
background-color: #fff;
opacity: 1;
}
.grax_tm_intro_hero {
width: 100%;
height: 100vh;
float: left;
clear: both;
position: relative;
margin-bottom: 150px;
}
.grax_tm_intro_hero:before {
position: absolute;
content: "";
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-image: url(..//img/patterns/light-honeycomb.png);
background-repeat: repeat;
opacity: .4;
z-index: 2;
}
.grax_tm_intro_hero:after {
position: absolute;
content: "";
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #000;
z-index: 1;
}
.grax_tm_intro_hero .content {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 100%;
padding: 0px 20px;
text-align: center;
}
.grax_tm_intro_hero .content .name {
font-size: 50px;
font-weight: 800;
color: #fff;
text-transform: uppercase;
letter-spacing: 10px;
margin-bottom: 20px;
}
.grax_tm_intro_hero .content p {
color: #fff;
font-size: 20px;
letter-spacing: 2px;
font-family: var(--neexo-display);
font-weight: 500;
}
.grax_tm_intro_hero .grax_tm_down {
left: 50%;
transform: translateX(-50%);
bottom: 5.5%;
}
.grax_tm_intro_hero .fn_animation .character {
top: 15px;
}
.grax_tm_intro_hero .fn_animation .character.opened {
top: 0px;
}
.grax_tm_intro_content {
width: 100%;
height: auto;
clear: both;
float: left;
}
.grax_tm_intro_content .title_holder {
width: 100%;
height: auto;
clear: both;
float: left;
text-align: center;
}
.grax_tm_intro_content .title_holder h3 {
font-size: 30px;
font-weight: 800;
color: #000;
text-transform: uppercase;
letter-spacing: 10px;
}
.grax_tm_intro_content .demo_list {
width: 100%;
height: auto;
clear: both;
float: left;
padding-top: 100px;
margin-bottom: 70px;
}
.grax_tm_intro_content .demo_list ul {
margin: 0px 0px 0px -50px;
list-style-type: none;
}
.grax_tm_intro_content .demo_list ul li {
margin: 0px 0px 50px 0px;
float: left;
width: 50%;
padding-left: 50px;
position: relative;
}
.grax_tm_intro_content .demo_list ul li .list_inner {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative;
text-align: center;
transition: all .3s ease;
top: 0px;
transform: translateZ(0);
}
.grax_tm_intro_content .demo_list ul li .list_inner:hover {
top: -10px;
}
.grax_tm_intro_content .demo_list ul li .list_inner h3 {
font-size: 20px;
font-weight: 600;
padding-top: 20px;
}
.grax_tm_intro_content .demo_list ul li:last-child img {
filter: blur(5px);
}
.grax_tm_intro_fixed_price .pricing-info,
.grax_tm_intro_fixed_price .anim {
text-decoration: none;
color: #fff;
font-family: "Montserrat";
background-color: #e54b4b;
position: fixed;
font-size: 22px;
text-align: center;
z-index: 5;
border-radius: 100%;
height: 70px;
width: 70px;
line-height: 70px;
display: inline-block;
bottom: 80px;
right: 50px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
@-webkit-keyframes myAnimPrice {
0% {
-webkit-transform: scale(.1);
transform: scale(.1);
opacity: 0;
}
50% {
opacity: .3;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
@keyframes myAnimPrice {
0% {
-webkit-transform: scale(.1);
transform: scale(.1);
opacity: 0;
}
50% {
opacity: .3;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
.grax_tm_intro_fixed_price .anim:nth-child(1) {
-webkit-animation: myAnimPrice 2s infinite;
animation: myAnimPrice 2s infinite;
}
.grax_tm_intro_fixed_price .anim:nth-child(2) {
-webkit-animation: myAnimPrice 2s infinite .3s;
animation: myAnimPrice 2s infinite .3s;
}
.grax_tm_intro_fixed_price .anim:nth-child(3) {
-webkit-animation: myAnimPrice 2s infinite .6s;
animation: myAnimPrice 2s infinite .6s;
}
@media (max-width: 1400px) {
.grax_tm_modalbox_news .box_inner {
width: 900px;
}
}
@media (max-width: 1200px) {
.grax_tm_modalbox_news .box_inner {
width: 100%;
top: 0px;
bottom: 0px;
}
.grax_tm_modalbox_news .close {
position: absolute;
top: 20px;
left: auto;
right: 20px;
margin-left: 0px;
}
.grax_tm_modalbox_news .close .svg {
color: #777;
width: 25px;
height: 25px;
}
}
@media (max-width: 1040px) {
#preloader {
display: none;
}
.mouse-cursor {
display: none;
}
.cursor-inner {
display: none;
}
.cursor-inner.cursor-hover {
display: none;
}
.cursor-outer {
display: none;
}
.container {
padding: 0px 20px;
}
.grax_tm_topbar {
display: none;
}
.grax_tm_mobile_menu {
display: block;
}
.grax_tm_hero .name {
font-size: 55px;
}
.grax_tm_about .about_inner {
display: block;
}
.grax_tm_about .left {
padding-right: 0px;
width: 100%;
margin-bottom: 40px;
}
.grax_tm_about .right {
padding-left: 0px;
width: 100%;
}
.grax_tm_portfolio ul {
margin-left: -20px;
}
.grax_tm_portfolio ul li {
padding-left: 20px;
margin-bottom: 20px;
}
.grax_tm_news .news_list ul {
margin-left: -30px;
}
.grax_tm_news .news_list ul li {
padding-left: 30px;
margin-bottom: 30px;
}
}
@media (max-width: 768px) {
.grax_tm_title_holder h2,
.grax_tm_title_holder h3 {
letter-spacing: 5px;
}
.grax_tm_hero .name {
font-size: 45px;
margin-bottom: 5px;
}
.grax_tm_hero .job {
font-size: 17px;
}
.grax_tm_about .right .list ul {
margin: 0px;
}
.grax_tm_about .right .list ul li {
width: 100%;
padding-left: 0px;
}
.grax_tm_portfolio ul li {
width: 50%;
}
.grax_tm_progress_part .part_inner {
display: block;
}
.grax_tm_progress_part .left {
width: 100%;
padding-right: 0px;
float: left;
margin-bottom: 20px;
}
.grax_tm_progress_part .right {
width: 100%;
padding-left: 0px;
}
.grax_tm_talk .talk_inner {
display: block;
}
.grax_tm_talk .text {
padding-right: 0px;
margin-bottom: 30px;
}
.grax_tm_news .news_list ul li {
width: 50%;
}
.grax_tm_news .news_list ul li .details .date span {
margin-left: 0px;
}
.grax_tm_news .news_list ul li .details .date span:before {
display: none;
}
.grax_tm_contact .contact_inner {
display: block;
}
.grax_tm_contact .left {
width: 100%;
margin-bottom: 20px;
float: left;
}
.grax_tm_contact .right {
width: 100%;
padding-left: 0px;
}
.grax_tm_copyright .copyright_inner {
display: block;
}
.grax_tm_copyright .logo {
margin-bottom: 17px;
}
.grax_tm_copyright .social {
margin-bottom: 10px;
}
.grax_tm_modalbox_news .details .title {
font-size: 25px;
}
.grax_tm_modalbox_news .description_wrap {
padding: 20px;
}
.grax_tm_intro_fixed_price {
display: none;
}
.grax_tm_intro_content .title_holder h3 {
letter-spacing: 4px;
}
.grax_tm_intro_content .demo_list ul {
margin: 0px;
}
.grax_tm_intro_content .demo_list ul li {
width: 100%;
padding-left: 0px;
}
}
@media (max-width: 480px) {
.grax_tm_hero .name {
font-size: 30px;
}
.grax_tm_hero .job {
font-size: 15px;
}
.grax_tm_portfolio ul {
margin: 0px;
}
.grax_tm_portfolio ul li {
width: 100%;
padding-left: 0px;
}
.grax_tm_news .news_list ul {
margin: 0px;
}
.grax_tm_news .news_list ul li {
width: 100%;
padding-left: 0px;
}
}
productos {
}
.whiteLabel {
color: white;
}
.grax_tm_portfolio ul li .list_inner a.popup-youtube {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 1 / 1;
z-index: 3;
display: block;
}
.grax_tm_portfolio ul li .list_inner a.popup-youtube:after {
position: absolute;
content: "";
top: 50%;
left: 50%;
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
border-radius: 50%;
background-color: rgba(0, 0, 0, .55);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 54% 50%;
background-size: 30px 30px;
opacity: 0;
-webkit-transition: all .3s ease;
transition: all .3s ease;
z-index: 4;
}
.grax_tm_portfolio ul li .list_inner:hover a.popup-youtube:after {
opacity: 1;
}
@media (hover: none) {
.grax_tm_portfolio ul li .list_inner a.popup-youtube:after {
opacity: 1;
}
.grax_tm_portfolio .overlay {
opacity: .25;
visibility: visible;
}
}
.grax_tm_hero .bg .hero_video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
-webkit-transition: opacity 1.2s ease;
transition: opacity 1.2s ease;
pointer-events: none;
}
.grax_tm_hero .bg .hero_video.is_playing {
opacity: 1;
}
.grax_tm_hero .bg .overlay {
background-color: rgba(0, 0, 0, .45);
}
.grax_tm_hero .hero_cta {
margin-top: 32px;
}
.grax_tm_hero .hero_btn {
display: inline-block;
padding: 15px 34px;
border: 2px solid rgba(255, 255, 255, .85);
border-radius: 4px;
color: #fff;
font-family: var(--neexo-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_hero .hero_btn:hover {
background-color: #fff;
color: #000;
}
@media (max-width: 768px) {
.grax_tm_hero .hero_cta {
margin-top: 24px;
}
.grax_tm_hero .hero_btn {
padding: 13px 24px;
font-size: 11px;
letter-spacing: 1px;
}
}
@media (prefers-reduced-motion: reduce) {
.grax_tm_hero .bg .hero_video {
display: none;
}
}
.grax_tm_featured {
width: 100%;
height: auto;
}
.grax_tm_featured .featured_inner {
width: 100%;
display: flex;
align-items: flex-start;
gap: 60px;
}
.grax_tm_featured .featured_text {
flex: 1 1 0;
min-width: 0;
}
.grax_tm_featured .featured_media {
flex: 1 1 0;
min-width: 0;
}
.grax_tm_featured .featured_label {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #30ac66;
margin-bottom: 14px;
}
.grax_tm_featured .featured_text h3 {
font-size: 30px;
font-weight: 600;
margin-bottom: 22px;
line-height: 1.3;
}
.grax_tm_featured .featured_text p {
margin-bottom: 18px;
}
.grax_tm_featured .featured_points {
margin: 26px 0 34px;
padding: 0;
list-style: none;
}
.grax_tm_featured .featured_points li {
position: relative;
padding-left: 26px;
margin-bottom: 11px;
}
.grax_tm_featured .featured_points li:before {
position: absolute;
content: "";
left: 0;
top: 10px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #30ac66;
}
.grax_tm_featured .featured_cta a,
.grax_tm_workshops .workshops_cta a {
display: inline-block;
padding: 15px 34px;
background-color: #30ac66;
border-radius: 4px;
color: #fff;
font-family: var(--neexo-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_featured .featured_cta a:hover,
.grax_tm_workshops .workshops_cta a:hover {
opacity: .82;
}
.grax_tm_featured .featured_media > img {
width: 100%;
height: auto;
border-radius: 5px;
display: block;
}
.grax_tm_featured .featured_thumbs {
display: flex;
gap: 20px;
margin-top: 20px;
}
.grax_tm_featured .featured_thumbs img {
width: calc(50% - 10px);
height: auto;
border-radius: 5px;
display: block;
}
.grax_tm_workshops {
width: 100%;
height: auto;
}
.grax_tm_workshops .workshops_intro {
width: 100%;
max-width: 780px;
margin: 0 0 50px;
text-align: left;
}
.grax_tm_workshops .workshops_list ul {
width: calc(100% + 30px);
margin: 0 0 0 -30px;
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.grax_tm_workshops .workshops_list ul li {
margin: 0 0 30px 0;
padding-left: 30px;
width: 25%;
}
.grax_tm_workshops .workshops_list .list_inner {
height: 100%;
padding: 34px 28px;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_workshops .workshops_list .list_inner:hover {
border-color: #30ac66;
transform: translateY(-4px);
}
.grax_tm_workshops .workshops_list h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 8px;
}
.grax_tm_workshops .workshop_claim {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #30ac66;
margin-bottom: 16px;
}
.grax_tm_workshops .workshops_list p {
font-size: 15px;
margin: 0;
}
.grax_tm_workshops .workshops_cta {
margin-top: 26px;
text-align: left;
}
@media (max-width: 1040px) {
.grax_tm_workshops .workshops_list ul li {
width: 50%;
}
}
@media (max-width: 768px) {
.grax_tm_featured .featured_inner {
flex-direction: column;
gap: 40px;
}
.grax_tm_featured .featured_text h3 {
font-size: 24px;
}
}
@media (max-width: 480px) {
.grax_tm_workshops .workshops_list ul li {
width: 100%;
}
.grax_tm_featured .featured_thumbs {
gap: 12px;
}
.grax_tm_featured .featured_thumbs img {
width: calc(50% - 6px);
}
}
.grax_tm_hero .hero_logo {
margin-bottom: 26px;
}
.grax_tm_hero .hero_logo img {
width: 320px;
max-width: 72vw;
height: auto;
display: block;
}
.grax_tm_hero .hero_claim {
font-family: var(--neexo-display);
font-size: 38px;
font-weight: 500;
line-height: 1.25;
color: #fff;
margin-bottom: 0;
max-width: 620px;
}
@media (max-width: 1040px) {
.grax_tm_hero .hero_logo img {
width: 260px;
}
.grax_tm_hero .hero_claim {
font-size: 32px;
}
}
@media (max-width: 768px) {
.grax_tm_hero .hero_logo {
margin-bottom: 18px;
}
.grax_tm_hero .hero_logo img {
width: 190px;
}
.grax_tm_hero .hero_claim {
font-size: 24px;
}
}
@media (max-width: 480px) {
.grax_tm_hero .hero_logo {
margin-bottom: 16px;
}
.grax_tm_hero .hero_logo img {
width: 150px;
}
.grax_tm_hero .hero_claim {
font-size: 20px;
}
}
.grax_tm_hero .hero_btn {
white-space: nowrap;
}
.grax_tm_featured .featured_inner.reverse .featured_media {
order: -1;
}
.grax_tm_featured .featured_video {
position: relative;
display: block;
border-radius: 5px;
overflow: hidden;
}
.grax_tm_featured .featured_video img {
width: 100%;
height: auto;
display: block;
-webkit-transition: transform .5s ease;
transition: transform .5s ease;
}
.grax_tm_featured .featured_video:hover img {
transform: scale(1.04);
}
.grax_tm_featured .featured_video:after {
position: absolute;
content: "";
top: 50%;
left: 50%;
width: 72px;
height: 72px;
margin: -36px 0 0 -36px;
border-radius: 50%;
background-color: rgba(0, 0, 0, .55);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 56% 50%;
background-size: 32px 32px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.grax_tm_featured .featured_video:hover:after {
background-color: #30ac66;
}
@media (max-width: 768px) {
.grax_tm_featured .featured_inner.reverse .featured_media {
order: 2;
}
.grax_tm_featured .featured_video:after {
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
background-size: 26px 26px;
}
}
.grax_tm_featured .featured_inner {
padding-top: 90px;
}
.next_project .featured_inner {
padding-top: 140px;
}
@media (max-width: 768px) {
.grax_tm_featured .featured_inner {
padding-top: 55px;
}
.next_project .featured_inner {
padding-top: 80px;
}
}
.grax_tm_portfolio ul li .list_inner:after {
position: absolute;
content: "";
left: 0;
right: 0;
bottom: 0;
height: 60%;
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, 0) 100%);
z-index: 1;
pointer-events: none;
}
.grax_tm_portfolio .details {
opacity: 1;
visibility: visible;
right: 30px;
}
.grax_tm_portfolio .details span {
display: block;
margin-bottom: 5px;
color: #fff;
font-family: var(--neexo-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
opacity: .9;
}
.grax_tm_portfolio .details h3 {
color: #fff;
font-size: 19px;
line-height: 1.3;
}
.grax_tm_portfolio .overlay {
background-color: #000;
}
.grax_tm_portfolio ul li .list_inner:hover .overlay {
opacity: .4;
visibility: visible;
}
@media (hover: none) {
.grax_tm_portfolio .overlay {
opacity: .12;
visibility: visible;
}
}
.progress_inner span.number,
.progress_inner .background {
display: none;
}
.progress_inner {
position: relative;
width: 100%;
margin-bottom: 16px;
padding-left: 26px;
}
.progress_inner:before {
position: absolute;
content: "";
left: 0;
top: 11px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #30ac66;
}
.progress_inner > span {
margin: 0;
font-family: var(--neexo-display);
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
.progress_inner .label {
font-family: var(--neexo-display);
}
@media (max-width: 480px) {
.progress_inner {
padding-left: 22px;
margin-bottom: 14px;
}
.progress_inner > span {
font-size: 15px;
}
.progress_inner:before {
top: 9px;
width: 7px;
height: 7px;
}
}
.grax_tm_featured .featured_more {
max-height: 0;
overflow: hidden;
opacity: 0;
-webkit-transition: max-height .45s ease, opacity .35s ease;
transition: max-height .45s ease, opacity .35s ease;
}
.grax_tm_featured .featured_more.opened {
opacity: 1;
}
.grax_tm_featured .featured_more .featured_points {
margin-bottom: 0;
}
.grax_tm_featured .featured_more_btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
padding: 14px 0;
border: 0;
background: none;
cursor: pointer;
color: #30ac66;
font-family: var(--neexo-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.grax_tm_featured .featured_more_btn:hover {
opacity: .7;
}
.grax_tm_featured .featured_more_btn:after {
content: "";
width: 9px;
height: 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-top: -4px;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.grax_tm_featured .featured_more_btn.opened:after {
transform: rotate(-135deg);
margin-top: 2px;
}
.grax_tm_featured .featured_cta {
margin-top: 30px;
}
@media (prefers-reduced-motion: reduce) {
.grax_tm_featured .featured_more {
-webkit-transition: none;
transition: none;
}
}
.grax_tm_progress_part .part_title {
width: 100%;
font-size: 30px;
font-weight: 600;
margin-bottom: 27px;
color: #30ac66;
}
@media (max-width: 480px) {
.grax_tm_progress_part .part_title {
font-size: 26px;
margin-bottom: 20px;
}
}
.lang_switch {
display: none;
white-space: nowrap;
}
.grax_tm_topbar .menu ul li.lang_switch a,
.grax_tm_mobile_menu .topbar_right .lang_switch a {
display: inline-block;
padding: 2px 0;
font-family: var(--neexo-display);
font-size: 11px;
font-weight: 400;
letter-spacing: 2px;
text-decoration: none;
border-bottom: 1px solid transparent;
-webkit-transition: color .25s ease, border-color .25s ease;
transition: color .25s ease, border-color .25s ease;
}
.lang_switch .lang_sep {
display: inline-block;
margin: 0 7px;
font-size: 11px;
}
.grax_tm_topbar .menu ul li.lang_switch a.active,
.grax_tm_mobile_menu .topbar_right .lang_switch a.active {
color: #30ac66 !important;
border-bottom-color: #30ac66;
}
html[data-has-en] .grax_tm_topbar .menu ul li.lang_switch {
display: inline-block;
margin-left: 14px;
}
.grax_tm_topbar .menu ul li.lang_switch a,
.grax_tm_topbar .menu ul li.lang_switch .lang_sep {
color: rgba(255, 255, 255, .6);
}
.grax_tm_topbar .menu ul li.lang_switch a:hover {
color: #fff;
}
.grax_tm_topbar.animate .menu ul li.lang_switch a,
.grax_tm_topbar.animate .menu ul li.lang_switch .lang_sep {
color: rgba(0, 0, 0, .45);
}
.grax_tm_topbar.animate .menu ul li.lang_switch a:hover {
color: #000;
}
.grax_tm_mobile_menu .topbar_right {
display: flex;
align-items: center;
gap: 18px;
}
html[data-has-en] .grax_tm_mobile_menu .topbar_right .lang_switch {
display: inline-block;
}
.grax_tm_mobile_menu .topbar_right .lang_switch a,
.grax_tm_mobile_menu .topbar_right .lang_switch .lang_sep {
color: rgba(0, 0, 0, .45);
}