.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(//mensaura.pt/wp-content/plugins/sentobar-toolkit/assets/css/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important; 
width: 100% !important;
} .nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white; 
filter:alpha(opacity=0); 
opacity:0;
} .nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; } .nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
} .nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
} .nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}.cssanimation, .cssanimation span {
animation-duration: 0.3s;
animation-fill-mode: both;
}
.cssanimation span { display: inline-block }
.infinite { animation-iteration-count: infinite !important } .hu__hu__ { animation: hu__hu__ 2s ease-in-out; animation-iteration-count: 1 }
@keyframes hu__hu__ {
50% { transform: translateY(30px) }
}
.leSnake span { animation: leSnake 1.5s ease-in-out; animation-iteration-count: 1 }
@keyframes leSnake {
from, to { transform: translateY(0px) }
50% { transform: translateY(30px) }
}
.lePeek span { animation-name: lePeek }
@keyframes lePeek {
25% {  transform: rotateX(30deg) translateY(10px) rotate(-13deg); }
50% { transform: translateY(-22px) rotate(3deg) scale(1.1);  }
}
.effect3d { animation-name: effect3d }
@keyframes effect3d {
to {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15)
}
}
.leRainDrop span { animation-name: leRainDrop; animation-iteration-count: 1; }
@keyframes leRainDrop {
0%, 25%, 55%, 75%, 87%, 97%, 100% { transform: scaleX(1.0) }
26%, 56%, 76% { transform: scaleX(1.3) scaleY(0.8) }
31%, 61%, 81% { transform: scaleX(0.8) scaleY(1.2) }
76%, 88% { transform: scaleX(1.2) }
98% { transform: scaleX(1.1) }
}
.pepe { animation-name: pepe; animation-iteration-count: infinite }
@keyframes pepe {
from, 33%, 66%, to { transform: rotate(4deg) }
16%, 50%, 83% { transform: rotate(-4deg) }
}
.leWaterWave span { animation: leWaterWave .2s linear 1 }
@keyframes leWaterWave {
50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) }
}
.lightning { animation-name: lightning }
@keyframes lightning {
from, 50%, to { opacity: 1 }
25%, 75% { opacity: 0 }
}
.leJoltZoom span { animation-name: leJoltZoom }
@keyframes leJoltZoom {
10% { font-size: 140% }
40% { font-size: 80% }
100% { font-size: 100% }
}
.typing {
width: 473px;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #7E2EA0;
animation: typing 2s steps(12, end), cursor .2s steps(12, end) infinite;
}
@keyframes typing {
from { width: 0 }
}
@keyframes cursor {
50% { border-color: transparent }
}
.electricity { animation-name: electricity; animation-iteration-count: infinite }
@keyframes electricity {
from, 37%, 67%, 85%, 93% { transform: translateY(30px) }
4%, 64%, 88% { transform: translateY(10px) }
8%, 24%, 32%, 44% { transform: translateY(5px) }
12%, 52%, 60%, 20% { transform: translateY(10px) }
16%, 40% { transform: translateY(5px) }
28%, 56% { transform: translateY(10px) }
48%, 72%, 80%, 96% { transform: translateY(30px) }
76%, to { transform: translateY(40px) }
}
.wipe {
width: 473px;
overflow: hidden;
margin: 0 auto;
display: inline-flex;
animation-name: wipe;
}
@keyframes wipe {
to { width: 0 }
}
.open {
width: 473px;
margin: 0 auto;
overflow: hidden;
display: inline-flex;
animation-name: open;
}
@keyframes open {
from { width: 0 }
}
.leMagnify span { animation-name: leMagnify }
@keyframes leMagnify {
50% {
transform: scale(1.8);
letter-spacing: 26px
}
}
.leBeat span { animation-name: leBeat; }
@keyframes leBeat {
14%, 42% { transform: scale(1.3) }
28%, 70% { transform: scale(1) }
} .leFadeIn span { animation-name: leFadeIn }
@keyframes leFadeIn {
from { opacity: 0 }
to { opacity: 1 }
}
.leFadeInLeft span { animation-name: leFadeInLeft }
@keyframes leFadeInLeft {
from {
opacity: 0;
transform: translateX(-60px);
}
to { opacity: 1 }
}
.leFadeInRight span { animation-name: leFadeInRight }
@keyframes leFadeInRight {
from {
opacity: 0;
transform: translateX(60px);
}
to { opacity: 1 }
}
.leFadeInTop span { animation-name: leFadeInTop }
@keyframes leFadeInTop {
from {
opacity: 0;
transform: translateY(-100%);
}
to { opacity: 1 }
}
.leFadeInBottom span { animation-name: leFadeInBottom }
@keyframes leFadeInBottom {
from {
opacity: 0;
transform: translateY(100%);
}
to { opacity: 1 }
} .leFadeOut span { animation-name: leFadeOut }
@keyframes leFadeOut {
to { opacity: 0 }
}
.leFadeOutLeft span { animation-name: leFadeOutLeft }
@keyframes leFadeOutLeft {
from { opacity: 1 }
to {
opacity: 0;
transform: translateX(-60px);
}
}
.leFadeOutRight span { animation-name: leFadeOutRight }
@keyframes leFadeOutRight {
from { opacity: 1 }
to {
opacity: 0;
transform: translateX(60px);
}
}
.leFadeOutTop span { animation-name: leFadeOutTop }
@keyframes leFadeOutTop {
from { opacity: 1 }
to {
opacity: 0;
transform: translateY(-100%);
}
}
.leFadeOutBottom span { animation-name: leFadeOutBottom }
@keyframes leFadeOutBottom {
from { opacity: 1 }
to {
opacity: 0;
transform: translateY(100%);
}
} .leMovingBackFromRight span { animation-name: leMovingBackFromRight; transform-origin: bottom }
@keyframes leMovingBackFromRight {
40% { transform: rotate(45deg) }
100% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0,.9,.7,1.45)
}
}
.leMovingBackFromLeft span { animation-name: leMovingBackFromLeft; transform-origin: bottom }
@keyframes leMovingBackFromLeft {
40% { transform: rotate(-45deg) }
100% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0,.9,.7,1.45)
}
} .leKickOutBehind span { animation-name: leKickOutFront; transform-origin: top }
@keyframes leKickOutFront {
40% { transform: rotate(45deg) }
100% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0,.9,.7,1.45)
}
}
.leKickOutFront span { animation-name: leKickOutBehind; transform-origin: top }
@keyframes leKickOutBehind {
40% { transform: rotate(-45deg) }
100% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0,.9,.7,1.45)
}
} .leSkateX span { animation-name: leScaleX; animation-iteration-count: 1 }
@keyframes leScaleX {
50% { transform: scaleX(0.4) }
}
.leSkateY span { animation-name: leSkateY; animation-iteration-count: 1 }
@keyframes leSkateY {
50% { transform: scaleY(0.4) }
}
.leSkateXY span { animation-name: leSkateXY; animation-iteration-count: 1; animation-duration: 1.5s; }
@keyframes leSkateXY {
25% { transform: scale3d(1, 0.4, 0) }
50% { transform: scale3d(0.4, 0.4, 1) }
75% { transform: scale3d(0.4, 1, 1) }
} .leScaleXIn span { animation-name: leScaleXIn }
@keyframes leScaleXIn {
from {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
50% { opacity: 1 }
}
.leScaleXOut span { animation-name: leScaleXOut }
@keyframes leScaleXOut {
to {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
from { opacity: 1 }
}
.leScaleYIn span { animation-name: leScaleYIn }
@keyframes leScaleYIn {
from {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
50% { opacity: 1 }
}
.leScaleYOut span { animation-name: leScaleYOut }
@keyframes leScaleYOut {
to {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
from { opacity: 1 }
} .leJump span { animation-name: leJump; animation-iteration-count: infinite }
@keyframes leJump {
to { transform: translateY(-20px) }
} .leAboundTop span { animation-name: leAboundTop }
@keyframes leAboundTop {
50% {
transform: translateY(-100px);
animation-timing-function: ease-in;
}
}
.leAboundBottom span { animation-name: leAboundBottom }
@keyframes leAboundBottom {
50% {
transform: translateY(100px);
animation-timing-function: ease-in;
}
}
.leAboundLeft span { animation-name: leAboundLeft }
@keyframes leAboundLeft {
50% {
transform: translateX(-100px);
animation-timing-function: ease-in
}
}
.leAboundRight span { animation-name: leAboundRight }
@keyframes leAboundRight {
50% {
transform: translateX(100px);
animation-timing-function: ease-in
}
} .leFlyInTop span { animation-name: leFlyInTop }
@keyframes leFlyInTop {
0% {
transform: translate(0px, -80px);
opacity: 0
}
50% {
transform: translate(10px, 50px);
animation-timing-function: ease-in-out
}
}
.leFlyInLeft span { animation-name: leFlyInLeft; animation-timing-function: ease-in-out }
@keyframes leFlyInLeft {
0% {
transform: translate(-40px, 0px);
opacity: 0;
}
50% { transform: translate(40px, 0px) }
}
.leFlyInRight span { animation-name: leFlyInRight; animation-timing-function: ease-in-out }
@keyframes leFlyInRight {
0% {
transform: translate(40px, 0px);
opacity: 0;
}
50% { transform: translate(-40px, 0px) }
}
.leFlyInBottom span { animation-name: leFlyInBottom }
@keyframes leFlyInBottom {
0% {
transform: translate(0px, 80px);
opacity: 0
}
50% {
transform: translate(10px, -50px);
animation-timing-function: ease-in-out
}
} .leFlyOutTop span { animation-name: leFlyOutTop }
@keyframes leFlyOutTop {
50% { transform: translate(0px, 50px) }
to {
transform: translate(0px, -100px);
opacity: 0;
}
}
.leFlyOutLeft span { animation-name: leFlyOutLeft; animation-timing-function: ease-in-out }
@keyframes leFlyOutLeft {
50% { transform: translate(40px, 0px) }
to {
transform: translate(-100px, 0px);
opacity: 0;
}
}
.leFlyOutRight span { animation-name: leFlyOutRight; animation-timing-function: ease-in-out }
@keyframes leFlyOutRight {
50% { transform: translate(-40px, 0px) }
to {
transform: translate(100px, 0px);
opacity: 0;
}
}
.leFlyOutBottom span { animation-name: leFlyOutBottom }
@keyframes leFlyOutBottom {
50% { transform: translate(0px, -40px) }
to {
transform: translate(0px, 100px);
opacity: 0;
}
} .leDoorCloseLeft span { animation-name: leDoorCloseLeft }
@keyframes leDoorCloseLeft {
from, to {
transform: perspective(400px);
transform-origin: left
}
from {
transform: rotateY(90deg);
opacity: 0;
}
to { opacity: 1 }
}
.leDoorOpenRight span { animation-name: leDoorOpenRight }
@keyframes leDoorOpenRight {
from, to {
transform: perspective(400px);
transform-origin: left
}
to {
transform: rotateY(90deg);
opacity: 0
}
}
.leDoorCloseRight span { animation-name: leDoorCloseRight }
@keyframes leDoorCloseRight {
from, to {
transform: perspective(400px);
transform-origin: right
}
from {
transform: rotateY(-90deg);
opacity: 0
}
to { opacity: 1 }
}
.leDoorOpenLeft span { animation-name: leDoorOpenLeft }
@keyframes leDoorOpenLeft {
from, to {
transform: perspective(400px);
transform-origin: right
}
to {
transform: rotateY(-90deg);
opacity: 0
}
} .leHangAndDropLeft span { animation-name: leHangAndDropLeft }
@keyframes leHangAndDropLeft {
from { transform-origin: left }
50% {
transform: rotate(100deg);
transform-origin: left
}
60% {
transform: rotate(90deg);
transform-origin: left
}
to {
transform: translateY(800px) rotate(70deg);
transform-origin: left
}
}
.leHangAndDropRight span { animation-name: leHangAndDropRight }
@keyframes leHangAndDropRight {
from { transform-origin: right }
50% {
transform: rotate(-100deg);
transform-origin: right;
}
60% {
transform: rotate(-90deg);
transform-origin: right;
}
to {
transform: translateY(800px) rotate(-70deg);
transform-origin: right;
}
} .leRencontre span { animation: leRencontre .4s; animation-iteration-count: 1 }
@keyframes leRencontre {
0%, 33%, 100% {
transform-origin: bottom;
animation-timing-function: cubic-bezier(.17,.67,.79,1.83)
}
33% { transform: translateY(-2px) rotate(-3deg) }
66% { transform: translateY(2px) rotate(3deg) }
}
.lePulseShake span { animation-name: lePulseShake; animation-iteration-count: 1 }
@keyframes lePulseShake {
90% { transform: scale(1) }
92% { transform: scale(1.2) }
96% { transform: scale(1, 1) }
98% { transform: scale(1.1) }
}
.leHorizontalShake span { animation-name: leHorizontalShake; animation-iteration-count: 1 }
@keyframes leHorizontalShake {
3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 3%, 92% { transform: translateX(5px) }
6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateX(3px) }
9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateX(-5px) }
}
.leVerticalShake span { animation-name: leVerticalShake; animation-iteration-count: 1 }
@keyframes leVerticalShake {
3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) }
6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) }
9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) }
}
.leMadMax span { animation-name: leMadMax; animation-iteration-count: 1 }
@keyframes leMadMax {
3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) scale(1.1) }
6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) scale(.8) }
9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) scale(1.1) }
}
.leHorizontalTremble span { animation-name: leHorizontalTremble; animation-iteration-count: 1 }
@keyframes leHorizontalTremble {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateX(5px) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateX(3px) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateX(-5px) }
}
.leVerticalTremble span { animation-name: leVerticalTremble; animation-iteration-count: 1 }
@keyframes leVerticalTremble {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) }
}
.leCrazyCool span { animation-name: leCrazyCool; animation-iteration-count: 1 }
@keyframes leCrazyCool {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) scale(1.1) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) scale(.8) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) scale(1.1) }
}
.leVibration span { animation: leVibration .1s linear 2 }
@keyframes leVibration {
50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) }
} .lePushReleaseFrom span { animation-name: lePushReleaseFrom }
@keyframes lePushReleaseFrom {
from {
transform: scale(3, 3);
opacity: 0;
}
50% { transform: scale(.5, .5) }
}
.lePushReleaseFromLeft span { animation-name: lePushReleaseFromLeft }
@keyframes lePushReleaseFromLeft {
from {
transform: translateX(-100%);
opacity: 0
}
30% { transform: translateX(100px) }
}
.lePushReleaseFromTop span { animation-name: lePushReleaseFromTop }
@keyframes lePushReleaseFromTop {
from {
transform: translateY(-100%);
opacity: 0;
}
30% { transform: translateY(100px) }
}
.lePushReleaseFromBottom span { animation-name: lePushReleaseFromBottom }
@keyframes lePushReleaseFromBottom {
from {
transform: translateY(100%);
opacity: 0;
}
30% { transform: translateY(-100px) }
}
.lePushReleaseTo span { animation-name: lePushReleaseTo }
@keyframes lePushReleaseTo {
30% { transform: scale(.5, .5) }
to {
transform: scale(5, 5);
opacity: 0;
}
}
.lePushReleaseToTop span { animation-name: lePushReleaseToTop }
@keyframes lePushReleaseToTop {
30% { transform: translateY(100px) }
to {
transform: translateY(-100%);
opacity: 0
}
}
.lePushReleaseToBottom span { animation-name: lePushReleaseToBottom }
@keyframes lePushReleaseToBottom {
30% { transform: translateY(-100px) }
to {
transform: translateY(100%);
opacity: 0
}
} .leFlipInTop span { animation-name: leFlipInTop }
@keyframes leFlipInTop {
from {
transform: perspective(600px);
opacity: 0
}
30% {
transform: perspective(600px) rotateX(180deg);
transform-origin: 0 0;
animation-timing-function: ease-out;
}
to { transform: perspective(600px) }
}
.leFlipOutTop span { animation-name: leFlipOutTop }
@keyframes leFlipOutTop {
to {
transform: perspective(600px);
opacity: 0
}
70% {
transform: perspective(600px) rotateX(180deg);
transform-origin: 0 0;
animation-timing-function: ease-out;
}
to { transform: perspective(600px) }
}
.leFlipInBottom span { animation-name: leFlipInBottom }
@keyframes leFlipInBottom {
from {
transform: perspective(600px);
opacity: 0
}
30% {
transform: perspective(600px) rotateX(180deg);
transform-origin: bottom;
animation-timing-function: ease-out;
}
to { transform: perspective(600px) }
}
.leFlipOutBottom span { animation-name: leFlipOutBottom }
@keyframes leFlipOutBottom {
to {
transform: perspective(600px);
opacity: 0
}
70% {
transform: perspective(600px) rotateX(180deg);
transform-origin: bottom;
animation-timing-function: ease-out;
}
to { transform: perspective(600px) }
} .leElevateLeft span { animation-name: leElevateLeft }
@keyframes leElevateLeft {
from {
transform: translateY(100%) rotate(-20deg);
transform-origin: right;
opacity: 0;
}
40% {
transform: rotate(20deg);
transform-origin: right;
}
65% {
transform: rotate(0deg);
transform-origin: right;
}
}
.leElevateRight span { animation-name: leElevateRight }
@keyframes leElevateRight {
from {
transform: translateY(100%) rotate(20deg);
transform-origin: left;
opacity: 0;
}
40% {
transform: rotate(-20deg);
transform-origin: left;
}
65% {
transform: rotate(0deg);
transform-origin: left;
}
} .leRollFromLeft span { animation-name: leRollFromLeft }
@keyframes leRollFromLeft {
from {
transform: translateX(-60px) perspective(600px) rotateY(180deg);
opacity: 0
}
}
.leRollFromRight span { animation-name: leRollFromRight }
@keyframes leRollFromRight {
from {
transform: translateX(60px) perspective(600px) rotateY(-180deg);
opacity: 0
}
}
.leRollFromTop span { animation-name: leRollFromTop }
@keyframes leRollFromTop {
from {
transform: translateY(-60px) perspective(600px) rotateX(180deg);
opacity: 0
}
}
.leRollFromBottom span { animation-name: leRollFromBottom }
@keyframes leRollFromBottom {
from {
transform: translateY(60px) perspective(600px) rotateX(-180deg);
opacity: 0
}
} .leRollToLeft span { animation-name: leRollToLeft }
@keyframes leRollToLeft {
to {
transform: translateX(-60px) perspective(600px) rotateY(180deg);
opacity: 0
}
}
.leRollToRight span { animation-name: leRollToRight }
@keyframes leRollToRight {
to {
transform: translateX(60px) perspective(600px) rotateY(-180deg);
opacity: 0
}
}
.leRollToTop span { animation-name: leRollToTop }
@keyframes leRollToTop {
to {
transform: translateY(-60px) perspective(600px) rotateX(180deg);
opacity: 0
}
}
.leRollToBottom span { animation-name: leRollToBottom }
@keyframes leRollToBottom {
to {
transform: translateY(60px) perspective(600px) rotateX(-180deg);
opacity: 0
}
} .leRotateSkateInRight span { animation-name: leRotateSkateInRight }
@keyframes leRotateSkateInRight {
from {
transform: scaleX(0.2) translateX(100px);
opacity: 0;
}
}
.leRotateSkateInLeft span { animation-name: leRotateSkateInLeft }
@keyframes leRotateSkateInLeft {
from {
transform: scaleX(0.2) translateX(-100px);
opacity: 0;
}
}
.leRotateSkateInTop span { animation-name: leRotateSkateInTop }
@keyframes leRotateSkateInTop {
from {
transform: scaleY(0.2) translateY(-100px);
opacity: 0;
}
}
.leRotateSkateInBottom span { animation-name: leRotateSkateInBottom }
@keyframes leRotateSkateInBottom {
from {
transform: scaleY(0.2) translateY(100px);
opacity: 0;
}
} .leRotateSkateOutRight span { animation-name: leRotateSkateOutRight }
@keyframes leRotateSkateOutRight {
to {
transform: scaleX(0.2) translateX(100px);
opacity: 0;
}
}
.leRotateSkateOutLeft span { animation-name: leRotateSkateOutLeft }
@keyframes leRotateSkateOutLeft {
to {
transform: scaleX(0.2) translateX(-100px);
opacity: 0;
}
}
.leRotateSkateOutTop span { animation-name: leRotateSkateOutTop }
@keyframes leRotateSkateOutTop {
to {
transform: scaleY(0.2) translateY(-100px);
opacity: 0;
}
}
.leRotateSkateOutBottom span { animation-name: leRotateSkateOutBottom }
@keyframes leRotateSkateOutBottom {
to {
transform: scaleY(0.2) translateY(100px);
opacity: 0;
}
} .leRotateXZoomIn span { animation-name: leRotateXZoomIn }
@keyframes leRotateXZoomIn {
from {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
opacity: 0
}
5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }
}
.leRotateXZoomOut span { animation-name: leRotateXZoomOut }
@keyframes leRotateXZoomOut {
95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }
to {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
opacity: 0
}
}
.leRotateYZoomIn span { animation-name: leRotateYZoomIn }
@keyframes leRotateYZoomIn {
from {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
opacity: 0
}
5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }
}
.leRotateYZoomOut span { animation-name: leRotateYZoomOut }
@keyframes leRotateYZoomOut {
95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }
to {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
opacity: 0;
}
} .leRotateIn span { animation-name: leRotateIn }
@keyframes leRotateIn {
from {
transform: rotate(-180deg);
opacity: 0;
}
to { opacity: 1 }
}
.leRotateOut span { animation-name: leRotateOut }
@keyframes leRotateOut {
from { opacity: 1 }
to {
transform: rotate(180deg);
opacity: 0;
}
}
.leRotateInLeft span { animation-name: leRotateInLeft }
@keyframes leRotateInLeft {
from {
transform: rotate(-180deg) translateX(150px);
opacity: 0;
}
to { opacity: 1 }
}
.leRotateOutLeft span { animation-name: leRotateOutLeft }
@keyframes leRotateOutLeft {
from { opacity: 1 }
to {
transform: rotate(180deg) translateX(150px);
opacity: 0;
}
}
.leRotateInRight span { animation-name: leRotateInRight }
@keyframes leRotateInRight {
from {
transform: rotate(-180deg) translateX(-150px);
opacity: 0;
}
to { opacity: 1 }
}
.leRotateOutRight span { animation-name: leRotateOutRight }
@keyframes leRotateOutRight {
from { opacity: 1 }
to {
transform: rotate(180deg) translateX(-150px);
opacity: 0;
}
} .leSpinInLeft span { animation-name: leSpinInLeft }
@keyframes leSpinInLeft {
from, to { transform-origin: left bottom }
from {
transform: rotate(90deg);
opacity: 0;
}
}
.leSpinInRight span { animation-name: leSpinInRight }
@keyframes leSpinInRight {
from, to { transform-origin: right bottom }
from {
transform: rotate(-90deg);
opacity: 0;
}
}
.leSpinOutLeft span { animation-name: leSpinOutLeft }
@keyframes leSpinOutLeft {
from, to { transform-origin: left bottom }
to {
transform: rotate(90deg);
opacity: 0;
}
}
.leSpinOutRight span { animation-name: leSpinOutRight }
@keyframes leSpinOutRight {
from, to { transform-origin: right bottom }
to {
transform: rotate(-90deg);
opacity: 0;
}
} .leBlurIn span { animation-name: leBlurIn }
@keyframes leBlurIn {
from {
transform: scaleX(0.2);
filter: blur(20px);
opacity: 0;
}
}
.leBlurInRight span { animation-name: leBlurInRight }
@keyframes leBlurInRight {
from {
transform: scaleX(0.2) translateX(100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurInLeft span { animation-name: leBlurInLeft }
@keyframes leBlurInLeft {
from {
transform: scaleX(0.2) translateX(-100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurInTop span { animation-name: leBlurInTop }
@keyframes leBlurInTop {
from {
transform: scaleY(0.2) translateY(-100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurInBottom span { animation-name: leBlurInBottom }
@keyframes leBlurInBottom {
from {
transform: scaleY(0.2) translateY(100px);
filter: blur(20px);
opacity: 0;
}
} .leBlurOut span { animation-name: leBlurOut }
@keyframes leBlurOut {
to {
transform: scaleX(0.2);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOutRight span { animation-name: leBlurOutRight }
@keyframes leBlurOutRight {
to {
transform: scaleX(0.2) translateX(100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOutLeft span { animation-name: leBlurOutLeft }
@keyframes leBlurOutLeft {
to {
transform: scaleX(0.2) translateX(-100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOutTop span { animation-name: leBlurOutTop }
@keyframes leBlurOutTop {
to {
transform: scaleY(0.2) translateY(-100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOutBottom span { animation-name: leBlurOutBottom }
@keyframes leBlurOutBottom {
to {
transform: scaleY(0.2) translateY(100px);
filter: blur(20px);
opacity: 0;
}
} .lePopUp span { animation-name: lePopUp }
@keyframes lePopUp {
50% { transform: scale(1.5) }
}
.lePopUpLeft span { animation-name: lePopUpLeft }
@keyframes lePopUpLeft {
50% {
transform: translateX(-50px) scale(1.5);
animation-timing-function: ease-in;
}
}
.lePopUpRight span { animation-name: lePopUpRight }
@keyframes lePopUpRight {
50% {
transform: translateX(50px) scale(1.5);
animation-timing-function: ease-in;
}
} .lePopOut span { animation-name: lePopOut }
@keyframes lePopOut {
50% { transform: scale(.5) }
}
.lePopOutLeft span { animation-name: lePopOutLeft }
@keyframes lePopOutLeft {
50% {
transform: translateX(-50px) scale(.5);
animation-timing-function: ease-in;
}
}
.lePopOutRight span { animation-name: lePopOutRight }
@keyframes lePopOutRight {
50% {
transform: translateX(50px) scale(.5);
animation-timing-function: ease-in;
}
} .leBounceFromTop span { animation-name: leBounceFromTop }
@keyframes leBounceFromTop {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: translate3d(0, 0, 0);
}
41%, 44% {
animation-timing-function: ease-in;
transform: translate3d(0, -80px, 0) scale3d(1, 1.2, 1);
}
70% {
animation-timing-function: ease-in;
transform: translate3d(0, -20px, 0);
}
90% { transform: translate3d(0, -4px, 0) }
}
.leBounceFromDown span { animation-name: leBounceFromDown }
@keyframes leBounceFromDown {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: translate3d(0, 0, 0);
}
41%, 44% {
animation-timing-function: ease-in;
transform: translate3d(0, 80px, 0) scale3d(1, 1.2, 1);
}
70% {
animation-timing-function: ease-in;
transform: translate3d(0, 20px, 0);
}
90% { transform: translate3d(0, 4px, 0) }
}
.leBounceY span { animation-name: leBounceY }
@keyframes leBounceY {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale3d(1, 1, 1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale3d(1, 2, 1);
}
70% {
animation-timing-function: ease-in;
transform: scale3d(1, 1.5, 1);
}
90% { transform: scale3d(1, 1.1, 1) }
}
.leBounceZoomIn span { animation-name: leBounceZoomIn }
@keyframes leBounceZoomIn {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale(1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale(1.7);
}
70% {
animation-timing-function: ease-in;
transform: scale(1.9);
}
90% { transform: scale(1.1) }
}
.leBounceZoomOut span { animation-name: leBounceZoomOut }
@keyframes leBounceZoomOut {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale(1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale(.5);
}
70% {
animation-timing-function: ease-in;
transform: scale(.7);
}
90% { transform: scale(.9) }
} .lePerspectiveOutTop span { animation-name: lePerspectiveOutTop; transform: perspective(500px); transform-style: preserve-3d }
@keyframes lePerspectiveOutTop {
50% { opacity: 1 }
to {
transform: perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);
opacity: 0;
}
}
.lePerspectiveOutBottom span { animation-name: lePerspectiveOutBottom; transform: perspective(500px); transform-style: preserve-3d }
@keyframes lePerspectiveOutBottom {
50% { opacity: 1 }
to {
transform: perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);
opacity: 0;
}
} .leZoomIn span { animation-name: leZoomIn }
@keyframes leZoomIn {
from {
transform: scale(10);
opacity: 0;
}
}
.leZoomInLeft span { animation-name: leZoomInLeft }
@keyframes leZoomInLeft {
from {
transform: scale(10) translateX(-150%);
opacity: 0;
}
}
.leZoomInRight span { animation-name: leZoomInRight }
@keyframes leZoomInRight {
from {
transform: scale(10) translateX(150%);
opacity: 0;
}
}
.leZoomInTop span { animation-name: LetterZoomInTop }
@keyframes LetterZoomInTop {
from {
transform: scale(10) translateY(-50%);
opacity: 0;
}
}
.leZoomInBottom span { animation-name: leZoomInBottom }
@keyframes leZoomInBottom {
from {
transform: scale(10) translateY(50%);
opacity: 0;
}
} .leZoomOut span { animation-name: leZoomOut }
@keyframes leZoomOut {
to {
transform: scale(10);
opacity: 0;
}
}
.leZoomOutLeft span { animation-name: leZoomOutLeft }
@keyframes leZoomOutLeft {
to {
transform: scale(10) translateX(-150%);
opacity: 0;
}
}
.leZoomOutRight span { animation-name: leZoomOutRight }
@keyframes leZoomOutRight {
to {
transform: scale(10) translateX(150%);
opacity: 0;
}
}
.leZoomOutTop span { animation-name: leZoomOutTop }
@keyframes leZoomOutTop {
to {
transform: scale(10) translateY(-50%);
opacity: 0;
}
}
.leZoomOutBottom span { animation-name: leZoomOutBottom }
@keyframes leZoomOutBottom {
to {
transform: scale(10) translateY(50%);
opacity: 0;
}
} .leDanceInTop span { animation-name: leDanceInTop; transform-origin: top }
@keyframes leDanceInTop {
from { opacity: 0 }
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
}
.leDanceInMiddle span { animation-name: leDanceInMiddle }
@keyframes leDanceInMiddle {
from { opacity: 0 }
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
}
.leDanceInBottom span { animation-name: leDanceInBottom; transform-origin: bottom }
@keyframes leDanceInBottom {
from { opacity: 0 }
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
} .leDanceOutTop span { animation-name: leDanceOutTop; transform-origin: top }
@keyframes leDanceOutTop {
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
to { opacity: 0 }
}
.leDanceOutMiddle span { animation-name: leDanceOutMiddle }
@keyframes leDanceOutMiddle {
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
to { opacity: 0 }
}
.leDanceOutBottom span { animation-name: leDanceOutBottom; transform-origin: bottom }
@keyframes leDanceOutBottom {
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
to { opacity: 0 }
} .oaoFadeIn span:nth-child(even) { animation-name: leoaoFadeInTop; animation-duration: .7s; animation-timing-function: ease-out; }
@keyframes leoaoFadeInTop {
from {
transform: translateY(-100px);
opacity: 0;
}
}
.oaoFadeIn span:nth-child(odd) { animation-name: leoaoFadeInBottom; animation-duration: .7s; animation-timing-function: ease-out;  }
@keyframes leoaoFadeInBottom {
from {
transform: translateY(100px);
opacity: 0;
}
}
.oaoFadeOut span:nth-child(even) { animation-name: leoaoFadeOutop; animation-duration: .7s; animation-timing-function: ease-in; }
@keyframes leoaoFadeOutop {
to {
transform: translateY(-100px);
opacity: 0;
}
}
.oaoFadeOut span:nth-child(odd) { animation-name: leoaoFadeOutBottom; animation-duration: .7s; animation-timing-function: ease-in;  }
@keyframes leoaoFadeOutBottom {
to {
transform: translateY(100%);
opacity: 0;
}
}
.oaoFlyIn span:nth-child(even) { animation-name: leoaoFlyInTop }
@keyframes leoaoFlyInTop {
0% {
transform: translateY(80px);
opacity: 0
}
50% {
transform: translateY(-50px);
animation-timing-function: ease-out
}
}
.oaoFlyIn span:nth-child(odd) { animation-name: leoaoFlyInBottom }
@keyframes leoaoFlyInBottom {
0% {
transform: translateY(-80px);
opacity: 0
}
50% {
transform: translateY(50px);
animation-timing-function: ease-out
}
}
.oaoFlyOut span:nth-child(even) { animation-name: leoaoFlyOutTop }
@keyframes leoaoFlyOutTop {
30% {
transform: translateY(80px);
animation-timing-function: ease-out
}
80% {
transform: translateY(-50px);
animation-timing-function: ease-out
}
to { opacity: 0 }
}
.oaoFlyOut span:nth-child(odd) { animation-name: leoaoFlyOutBottom }
@keyframes leoaoFlyOutBottom {
30% {
transform: translateY(-80px);
animation-timing-function: ease-out
}
80% {
transform: translateY(50px);
animation-timing-function: ease-out
}
to { opacity: 0 }
}
.oaoRotateIn span:nth-child(even) { animation-name: oaoRotateInTop }
@keyframes oaoRotateInTop {
from {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
.oaoRotateIn span:nth-child(odd) { animation-name: oaoRotateInBottom }
@keyframes oaoRotateInBottom {
from {
transform: translateY(100px) rotate(360deg);
opacity: 0;
}
}
.oaoRotateOut span:nth-child(even) { animation-name: oaoRotateOutTop }
@keyframes oaoRotateOutTop {
to {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
.oaoRotateOut span:nth-child(odd) { animation-name: oaoRotateOutBottom }
@keyframes oaoRotateOutBottom {
to {
transform: translateY(100px) rotate(360deg);
opacity: 0;
}
}
.oaoRotateXIn span:nth-child(even) { animation-name: oaoRotateXInTop }
@keyframes oaoRotateXInTop {
from {
transform: translateY(-100px) rotateX(360deg);
opacity: 0;
}
}
.oaoRotateXIn span:nth-child(odd) { animation-name: oaoRotateXInBottom }
@keyframes oaoRotateXInBottom {
from {
transform: translateY(100px) rotateX(360deg);
opacity: 0;
}
}
.oaoRotateXOut span:nth-child(even) { animation-name: oaoRotateXOutTop }
@keyframes oaoRotateXOutTop {
to {
transform: translateY(-100px) rotateX(360deg);
opacity: 0;
}
}
.oaoRotateXOut span:nth-child(odd) { animation-name: oaoRotateXOutBottom }
@keyframes oaoRotateXOutBottom {
to {
transform: translateY(100px) rotateX(360deg);
opacity: 0;
}
}
.oaoRotateYIn span:nth-child(even) { animation-name: oaoRotateYInTop }
@keyframes oaoRotateYInTop {
from {
transform: translateY(-100px) rotateY(360deg);
opacity: 0;
}
}
.oaoRotateYIn span:nth-child(odd) { animation-name: oaoRotateYInBottom }
@keyframes oaoRotateYInBottom {
from {
transform: translateY(100px) rotateY(360deg);
opacity: 0;
}
}
.oaoRotateYOut span:nth-child(even) { animation-name: oaoRotateYOutTop }
@keyframes oaoRotateYOutTop {
to {
transform: translateY(-100px) rotateY(360deg);
opacity: 0;
}
}
.oaoRotateYOut span:nth-child(odd) { animation-name: oaoRotateYOutBottom }
@keyframes oaoRotateYOutBottom {
to {
transform: translateY(100px) rotateY(360deg);
opacity: 0;
}
} .fadeIn { animation-name: fadeIn }
@keyframes fadeIn {
from { opacity: 0 }
to { opacity: 1 }
}
.cssanimation.fadeInLeft { animation-name: bfadeInLeft }
@keyframes bfadeInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to { opacity: 1 }
}
.cssanimation.fadeInRight { animation-name: bfadeInRight }
@keyframes bfadeInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to { opacity: 1 }
}
.cssanimation.fadeInTop { animation-name: bfadeInTop }
@keyframes bfadeInTop {
from {
opacity: 0;
transform: translateY(-50px);
}
to { opacity: 1 }
}
.cssanimation.fadeInBottom { animation-name: bfadeInBottom }
@keyframes bfadeInBottom {
from {
opacity: 0;
transform: translateY(50px);
}
to { opacity: 1 }
} .fadeOut { animation-name: fadeOut }
@keyframes fadeOut {
to { opacity: 0 }
}
.fadeOutLeft { animation-name: fadeOutLeft }
@keyframes fadeOutLeft {
from { opacity: 1 }
to {
opacity: 0;
transform: translateX(-100%);
}
}
.fadeOutRight { animation-name: fadeOutRight }
@keyframes fadeOutRight {
from { opacity: 1 }
to {
opacity: 0;
transform: translateX(100%);
}
}
.fadeOutTop { animation-name: fadeOutTop }
@keyframes fadeOutTop {
from { opacity: 1 }
to {
opacity: 0;
transform: translateY(-100%);
}
}
.fadeOutBottom { animation-name: fadeOutBottom }
@keyframes fadeOutBottom {
from { opacity: 1 }
to {
opacity: 0;
transform: translateY(100%);
}
} .moveFromLeft { animation-name: moveFromLeft }
@keyframes moveFromLeft {
from { transform: translateX(-300px) }
}
.moveFromRight { animation-name: moveFromRight }
@keyframes moveFromRight {
from { transform: translateX(300px) }
}
.moveFromTop { animation-name: moveFromTop }
@keyframes moveFromTop {
from { transform: translateY(-300px) }
}
.moveFromBottom { animation-name: moveFromBottom }
@keyframes moveFromBottom {
from { transform: translateY(300px) }
} .moveToLeft { animation-name: moveToLeft }
@keyframes moveToLeft {
to { transform: translateX(-800px) }
}
.moveToRight { animation-name: moveToRight }
@keyframes moveToRight {
to { transform: translateX(800px) }
}
.moveToTop { animation-name: moveToTop }
@keyframes moveToTop {
to { transform: translateY(-800px) }
}
.moveToBottom { animation-name: moveToBottom }
@keyframes moveToBottom {
to { transform: translateY(800px) }
} .doorCloseFromLeft { animation-name: doorCloseFromLeft }
@keyframes doorCloseFromLeft {
from {
transform: perspective(400px) rotateY(90deg);
transform-origin: left;
opacity: 0;
}
50%, to {
transform: perspective(400px) rotateY(0deg);
transform-origin: left;
opacity: 1;
}
}
.doorOpenFromRight { animation-name: doorOpenFromRight }
@keyframes doorOpenFromRight {
from {
transform: perspective(400px) rotateY(0deg);
transform-origin: left;
opacity: 1;
}
50%, to {
transform: perspective(400px) rotateY(90deg);
transform-origin: left;
opacity: 0;
}
}
.doorCloseFromRight { animation-name: doorCloseFromRight }
@keyframes doorCloseFromRight {
from {
transform: perspective(400px) rotateY(-90deg);
transform-origin: right;
opacity: 0;
}
50%, to {
transform: perspective(400px) rotateY(0deg);
transform-origin: right;
opacity: 1;
}
}
.doorOpenFromLeft { animation-name: doorOpenFromLeft }
@keyframes doorOpenFromLeft {
from {
transform: perspective(400px) rotateY(0deg);
transform-origin: right;
opacity: 1;
}
50%, to {
transform: perspective(400px) rotateY(-90deg);
transform-origin: right;
opacity: 0;
}
} .heartbeatSlow { animation-name: heartbeatSlow; animation-iteration-count: 3; animation-duration: .5s }
@keyframes heartbeatSlow {
35%, 65% { transform: scale(1.2) }
}
.heartbeatFast { animation-name: heartbeatFast; animation-iteration-count: infinite }
@keyframes heartbeatFast {
14%, 42% { transform: scale(1.3) }
28%, 70% { transform: scale(1) }
} .hangOnLeft { animation-name: hangOnLeft }
@keyframes hangOnLeft {
from { transform-origin: left; }
40% {
transform: rotate(100deg);
transform-origin: left;
}
55% {
transform: rotate(80deg);
transform-origin: left;
}
70% {
transform: rotate(95deg);
transform-origin: left;
}
85% {
transform: rotate(85deg);
transform-origin: left;
}
100% {
transform: rotate(90deg);
transform-origin: left;
}
}
.hangOnRight { animation-name: hangOnRight }
@keyframes hangOnRight {
from { transform-origin: right; }
40% {
transform: rotate(-100deg);
transform-origin: right;
}
55% {
transform: rotate(-80deg);
transform-origin: right;
}
70% {
transform: rotate(-95deg);
transform-origin: right;
}
85% {
transform: rotate(-85deg);
transform-origin: right;
}
100% {
transform: rotate(-90deg);
transform-origin: right;
}
} .hangAndDropLeft { animation-name: hangAndDropLeft }
@keyframes hangAndDropLeft {
from { transform-origin: left }
50% {
transform: rotate(100deg);
transform-origin: left;
}
60% {
transform: rotate(90deg);
transform-origin: left;
opacity: 1;
}
to {
transform: translateY(300px) rotate(70deg);
transform-origin: left;
opacity: 0;
}
}
.hangAndDropRight { animation-name: hangAndDropRight }
@keyframes hangAndDropRight {
from { transform-origin: right }
50% {
transform: rotate(-100deg);
transform-origin: right;
}
60% {
transform: rotate(-90deg);
transform-origin: right;
opacity: 1;
}
to {
transform: translateY(300px) rotate(-70deg);
transform-origin: right;
opacity: 0
}
} .pulseShake { animation-name: pulseShake; animation-iteration-count: infinite }
@keyframes pulseShake {
90% { transform: scale(1) }
92% { transform: scale(1.2) }
96% { transform: scale(1, 1) }
98% { transform: scale(1.1) }
}
.horizontalShake { animation-name: horizontalShake; animation-iteration-count: infinite }
@keyframes horizontalShake {
3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateX(5px) }
6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateX(3px) }
9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateX(-5px) }
}
.verticalShake { animation-name: verticalShake; animation-iteration-count: infinite }
@keyframes verticalShake {
3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) }
6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) }
9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) }
}
.madMax { animation-name: madMax; animation-iteration-count: infinite }
@keyframes madMax {
3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) scale(1.1) }
6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) scale(.8) }
9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) scale(1.1) }
}
.coolHorizontalShake { animation-name: coolHorizontalShake; animation-iteration-count: infinite }
@keyframes coolHorizontalShake {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateX(5px) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateX(3px) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateX(-5px) }
}
.coolVerticalShake { animation-name: coolVerticalShake; animation-iteration-count: infinite }
@keyframes coolVerticalShake {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) }
}
.quietMad { animation-name: quietMad; animation-iteration-count: infinite }
@keyframes quietMad {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) scale(1.1) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) scale(.8) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) scale(1.1) }
}
.vibration { animation: vibration .1s linear infinite }
@keyframes vibration {
50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) }
} .pushReleaseFrom { animation-name: pushReleaseFrom }
@keyframes pushReleaseFrom {
from {
transform: scale(3, 3);
opacity: 0;
}
30% { transform: scale(.5, .5) }
}
.pushReleaseFromLeft { animation-name: pushReleaseFromLeft }
@keyframes pushReleaseFromLeft {
from { transform: translateX(-100%); opacity: 0; }
30% { transform: translateX(100px); opacity: 1; }
}
.pushReleaseFromRight { animation-name: pushReleaseFromRight }
@keyframes pushReleaseFromRight {
from { transform: translateX(100%); opacity: 0; }
30% { transform: translateX(-100px); opacity: 1; }
}
.pushReleaseFromTop { animation-name: pushReleaseFromTop }
@keyframes pushReleaseFromTop {
from { transform: translateY(-100%); opacity: 0; }
30% { transform: translateY(100px); opacity: 1; }
}
.pushReleaseFromBottom { animation-name: pushReleaseFromBottom }
@keyframes pushReleaseFromBottom {
from { transform: translateY(100%); opacity: 0; }
30% { transform: translateY(-100px); opacity: 1; }
} .pushReleaseTo { animation-name: pushReleaseTo }
@keyframes pushReleaseTo {
30% { transform: scale(.5, .5) }
to {
transform: scale(5, 5);
opacity: 0;
}
}
.pushReleaseToLeft { animation-name: pushReleaseToLeft }
@keyframes pushReleaseToLeft {
30% { transform: translateX(100px) }
to {
transform: translateX(-100%);
opacity: 0;
}
}
.pushReleaseToRight { animation-name: pushReleaseToRight }
@keyframes pushReleaseToRight {
30% { transform: translateX(-100px) }
to {
transform: translateX(100%);
opacity: 0;
}
}
.pushReleaseToTop { animation-name: pushReleaseToTop }
@keyframes pushReleaseToTop {
30% { transform: translateY(100px) }
to {
transform: translateY(-100%);
opacity: 0;
}
}
.pushReleaseToBottom { animation-name: pushReleaseToBottom }
@keyframes pushReleaseToBottom {
30% { transform: translateY(-100px) }
to {
transform: translateY(100%);
opacity: 0;
}
} .flipX { animation-name: flipX }
@keyframes flipX {
from {
transform: perspective(600px) rotateX(-180deg);
opacity: 0;
}
to { transform: perspective(600px) rotateX(-360deg) }
}
.flipXZoomIn { animation-name: flipXZoomIn }
@keyframes flipXZoomIn {
from {
transform: perspective(600px) rotateX(0deg) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(600px) rotateX(-180deg) scale(1.8);
animation-timing-function: ease-out;
}
80% {
transform: perspective(600px) rotateX(-360deg) scale(.7);
animation-timing-function: ease-in;
}
to  { transform: scale(1) }
}
.flipXZoomOut { animation-name: flipXZoomOut }
@keyframes flipXZoomOut {
from {
transform: perspective(600px) rotateX(0deg) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(600px) rotateX(180deg) scale(1.8);
animation-timing-function: ease-out;
}
80% {
transform: perspective(600px) rotateX(360deg) scale(.7);
animation-timing-function: ease-in;
}
to  { transform: scale(1) }
} .flipY { animation-name: flipY }
@keyframes flipY {
from {
transform: perspective(600px) rotateY(180deg);
opacity: 0;
}
to { transform: perspective(600px) rotateY(360deg) }
}
.flipYZoomIn { animation-name: flipYZoomIn }
@keyframes flipYZoomIn {
from {
transform: perspective(600px) rotateY(0deg) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(600px) rotateY(180deg) scale(1.6);
animation-timing-function: ease-out;
}
80% {
transform: perspective(600px) rotateY(360deg) scale(.7);
animation-timing-function: ease-in;
}
to  { transform: scale(1) }
}
.flipYZoomOut { animation-name: flipYZoomOut }
@keyframes flipYZoomOut {
from {
transform: perspective(600px) rotateY(0deg) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(600px) rotateY(180deg) scale(.6);
animation-timing-function: ease-out;
}
80% {
transform: perspective(600px) rotateY(360deg) scale(1.8);
animation-timing-function: ease-in;
}
to  { transform: scale(1) }
} .skewLeft { animation-name: skewLeft }
@keyframes skewLeft {
70% { transform: skewX(40deg) }
}
.skewRight { animation-name: skewRight }
@keyframes skewRight {
70% { transform: skewX(-40deg) }
}
.skewInLeft { animation-name: skewInLeft }
@keyframes skewInLeft {
from {
opacity: 0;
transform: translateX(-250px) skewX(-40deg)
}
70% { transform: skewX(-30deg) }
}
.skewInRight { animation-name: skewInRight }
@keyframes skewInRight {
from {
opacity: 0;
transform: translateX(250px) skewX(40deg)
}
70% { transform: skewX(30deg) }
}
.skewOutLeft { animation-name: skewOutLeft }
@keyframes skewOutLeft {
20% { transform: skewX(40deg) }
to {
transform: translateX(-100%) skewX(40deg);
opacity: 0
}
}
.skewOutRight { animation-name: skewOutRight }
@keyframes skewOutRight {
20% { transform: skewX(-40deg) }
to {
transform: translateX(100%) skewX(-40deg);
opacity: 0
}
} .shockZoom { animation-name: shockZoom }
@keyframes shockZoom {
from { transform: matrix(5, 0, 0, 5, 0, 0) }
35% { transform: matrix(2, 0, 0, 2, 0, 0) }
43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}
.shockInLeft { animation-name: shockInLeft }
@keyframes shockInLeft {
from { transform: matrix(1, 0, 0, 1, -800, 0) }
35% { transform: matrix(1, 0, 0, 1, 50, 0) }
43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}
.shockInRight { animation-name: shockInRight }
@keyframes shockInRight {
from { transform: matrix(1, 0, 0, 1, 800, 0) }
35% { transform: matrix(1, 0, 0, 1, -50, 0) }
43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}
.shockInTop { animation-name: shockInTop }
@keyframes shockInTop {
from { transform: matrix(1, 0, 0, 1, 0, -400) }
35% { transform: matrix(1, 0, 0, 1, 0, 50) }
43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}
.shockInBottom { animation-name: shockInBottom }
@keyframes shockInBottom {
from { transform: matrix(1, 0, 0, 1, 0, 400) }
35% { transform: matrix(1, 0, 0, 1, 0, -50) }
43% { transform: matrix(1, 0, 0, 1, 0, 0) }
} .pullRelease { animation-name: pullRelease }
@keyframes pullRelease {
15% { transform: scale(1.8) }
}
.pushRelease { animation-name: pushRelease }
@keyframes pushRelease {
15% { transform: scale(.5) }
} .swingInLeft { animation-name: swingInLeft }
@keyframes swingInLeft {
from {
transform: matrix(3, 0, 0, 3, -800, 0);
animation-timing-function: ease-out;
}
50% { transform: matrix(1.3, 0, 0, 1.3, 20, 0) }
}
.swingInRight { animation-name: swingInRight }
@keyframes swingInRight {
from {
transform: matrix(3, 0, 0, 3, 800, 0);
animation-timing-function: ease-out;
}
50% { transform: matrix(1.3, 0, 0, 1.3, -20, 0) }
}
.swingInTop { animation-name: swingInTop }
@keyframes swingInTop {
from {
transform: matrix(3, 0, 0, 3, 0, -800);
animation-timing-function: ease-out;
}
50% { transform: matrix(1.3, 0, 0, 1.3, 0, 20) }
}
.swingInBottom { animation-name: swingInBottom }
@keyframes swingInBottom {
from {
transform: matrix(3, 0, 0, 3, 0, 800);
animation-timing-function: ease-out;
}
50% { transform: matrix(1.3, 0, 0, 1.3, 0, -20) }
} .elevateLeft { animation-name: elevateLeft }
@keyframes elevateLeft {
from {
transform: translateY(100%) rotate(-20deg);
transform-origin: right;
}
40% {
transform: rotate(20deg);
transform-origin: right;
}
65% {
transform: rotate(0deg);
transform-origin: right;
}
}
.elevateRight { animation-name: elevateRight }
@keyframes elevateRight {
from {
transform: translateY(100%) rotate(20deg);
transform-origin: left;
}
40% {
transform: rotate(-20deg);
transform-origin: left;
}
65% {
transform: rotate(0deg);
transform-origin: left;
}
} .rollFromLeft { animation-name: rollFromLeft }
@keyframes rollFromLeft {
from {
transform: translateX(-100%) perspective(600px) rotateY(180deg);
opacity: 0
}
to {
transform: translateX(0) perspective(600px) rotateY(0deg);
opacity: 1
}
}
.rollFromRight { animation-name: rollFromRight }
@keyframes rollFromRight {
from {
transform: translateX(100%) perspective(600px) rotateY(-180deg);
opacity: 0
}
to {
transform: translateX(0) perspective(600px) rotateY(0deg);
opacity: 1
}
}
.rollFromTop { animation-name: rollFromTop }
@keyframes rollFromTop {
from {
transform: translateY(-100%) perspective(600px) rotateY(180deg);
opacity: 0
}
to {
transform: translateY(0) perspective(600px) rotateY(0deg);
opacity: 1
}
}
.rollFromBottom { animation-name: rollFromBottom }
@keyframes rollFromBottom {
from {
transform: translateY(100%) perspective(600px) rotateY(-180deg);
opacity: 0
}
to {
transform: translateY(0) perspective(600px) rotateY(0deg);
opacity: 1
}
} .rollToLeft { animation-name: rollToLeft }
@keyframes rollToLeft {
from {
transform: translateX(0) perspective(600px) rotateY(0deg);
opacity: 1
}
to {
transform: translateX(-100%) perspective(600px) rotateY(180deg);
opacity: 0
}
}
.rollToRight { animation-name: rollToRight }
@keyframes rollToRight {
from {
transform: translateX(0) perspective(600px) rotateY(0deg);
opacity: 1
}
to {
transform: translateX(100%) perspective(600px) rotateY(-180deg);
opacity: 0
}
}
.rollToTop { animation-name: rollToTop }
@keyframes rollToTop {
from {
transform: translateY(0) perspective(600px) rotateX(0deg);
opacity: 1
}
to {
transform: translateY(-100%) perspective(600px) rotateX(180deg);
opacity: 0
}
}
.rollToBottom { animation-name: rollToBottom }
@keyframes rollToBottom {
to {
transform: translateY(0) perspective(600px) rotateX(0deg);
opacity: 1
}
to {
transform: translateY(100%) perspective(600px) rotateX(-180deg);
opacity: 0
}
} .rotate { animation-name: rotate; animation-timing-function: ease-in-out }
@keyframes rotate {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
.rotateX { animation-name: rotateX }
@keyframes rotateX {
from { transform: perspective(600px) rotateX(0deg) }
to { transform: perspective(600px) rotateX(90deg) }
}
.rotateXIn { animation-name: rotateXIn }
@keyframes rotateXIn {
from {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
opacity: 0;
}
5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }
}
.rotateXOut { animation-name: rotateXOut }
@keyframes rotateXOut {
95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }
to {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
opacity: 0;
}
}
.rotateY { animation-name: rotateY }
@keyframes rotateY {
from { transform: perspective(600px) rotateY(0deg) }
to { transform: perspective(600px) rotateY(90deg) }
}
.rotateYIn { animation-name: rotateYIn }
@keyframes rotateYIn {
from {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
opacity: 0;
}
5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }
}
.rotateYOut { animation-name: rotateYOut }
@keyframes rotateYOut {
95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }
to {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
opacity: 0;
}
} .rotateInLeft { animation-name: rotateInLeft }
@keyframes rotateInLeft {
from {
opacity: 0;
transform: translateX(-100%) rotate(0deg)
}
to { transform: translateX(0px) rotate(360deg) }
}
.rotateInRight { animation-name: rotateInRight }
@keyframes rotateInRight {
from {
opacity: 0;
transform: translateX(100%) rotate(0deg)
}
to { transform: translateX(0px) rotate(-360deg) }
}
.rotateInTop { animation-name: rotateInTop }
@keyframes rotateInTop {
from {
opacity: 0;
transform: translateY(-400%) rotate(0deg)
}
to { transform: translateX(0px) rotate(360deg) }
}
.rotateInBottom { animation-name: rotateInBottom }
@keyframes rotateInBottom {
from {
opacity: 0;
transform: translateY(400%) rotate(0deg)
}
to { transform: translateX(0px) rotate(360deg) }
} .rotateOutLeft { animation-name: rotateOutLeft }
@keyframes rotateOutLeft {
from { transform: translateX(0px) rotate(360deg) }
to {
transform: translateX(-800px) rotate(0deg);
opacity: 0
}
}
.rotateOutRight { animation-name: rotateOutRight }
@keyframes rotateOutRight {
from { transform: translateX(0px) rotate(-360deg) }
to {
transform: translateX(800px) rotate(0deg);
opacity: 0
}
}
.rotateOutTop { animation-name: rotateOutTop }
@keyframes rotateOutTop {
from { transform: translateX(0px) rotate(360deg) }
to {
transform: translateY(-800px) rotate(0deg);
opacity: 0
}
}
.rotateOutBottom { animation-name: rotateOutBottom }
@keyframes rotateOutBottom {
from { transform: translateX(0px) rotate(360deg) }
to {
transform: translateY(800px) rotate(0deg);
opacity: 0
}
} .spinToLeft { animation-name: spinToLeft }
@keyframes spinToLeft {
from, to { transform-origin: left bottom }
from {
transform: rotate(90deg);
opacity: 0;
}
}
.spinToRight { animation-name: spinToRight }
@keyframes spinToRight {
from, to { transform-origin: right bottom }
from {
transform: rotate(-90deg);
opacity: 0;
}
}
.spinToTop { animation-name: spinToTop }
@keyframes spinToTop {
from, to { transform-origin: left bottom }
from {
transform: rotate(-90deg);
opacity: 0;
}
}
.spinToBottom { animation-name: spinToBottom }
@keyframes spinToBottom {
from, to { transform-origin: right bottom }
from {
transform: rotate(90deg);
opacity: 0;
}
} .spinFromLeft { animation-name: spinFromLeft }
@keyframes spinFromLeft {
from, to { transform-origin: left bottom }
to {
transform: rotate(90deg);
opacity: 0;
}
}
.spinFromRight { animation-name: spinFromRight }
@keyframes spinFromRight {
from, to { transform-origin: right bottom }
to {
transform: rotate(-90deg);
opacity: 0;
}
}
.spinFromTop { animation-name: spinFromTop }
@keyframes spinFromTop {
from, to { transform-origin: left bottom }
to {
transform: rotate(-90deg);
opacity: 0;
}
}
.spinFromBottom { animation-name: spinFromBottom }
@keyframes spinFromBottom {
from, to { transform-origin: right bottom }
to {
transform: rotate(90deg);
opacity: 0;
}
} .cssanimation.blurIn { animation-name: blurIn }
@keyframes blurIn {
from {
filter: blur(20px);
opacity: 0;
}
}
.cssanimation.blurInLeft { animation-name: blurInLeft }
@keyframes blurInLeft {
from {
transform: translateX(50px);
filter: blur(20px);
opacity: 0;
}
}
.cssanimation.blurInRight { animation-name: blurInRight }
@keyframes blurInRight {
from {
transform: translateX(-50px);
filter: blur(20px);
opacity: 0;
}
}
.cssanimation.blurInTop { animation-name: blurInTop }
@keyframes blurInTop {
from {
transform: translateY(50px);
filter: blur(20px);
opacity: 0;
}
}
.cssanimation.blurInBottom { animation-name: blurInBottom }
@keyframes blurInBottom {
from {
transform: translateY(-50px);
filter: blur(20px);
opacity: 0;
}
} .blurOut { animation-name: blurOut }
@keyframes blurOut {
85%, to { filter: blur(20px) }
to { opacity: 0 }
}
.blurOutLeft { animation-name: blurOutLeft }
@keyframes blurOutLeft {
85%, to {
filter: blur(20px);
transform: translateX(100%);
}
to { opacity: 0 }
}
.blurOutRight { animation-name: blurOutRight }
@keyframes blurOutRight {
85%, to {
filter: blur(20px);
transform: translateX(-100%);
}
to { opacity: 0 }
}
.blurOutTop { animation-name: blurOutTop }
@keyframes blurOutTop {
85%, to {
filter: blur(20px);
transform: translateY(100%);
}
to { opacity: 0 }
}
.blurOutBottom { animation-name: blurOutBottom }
@keyframes blurOutBottom {
85%, to {
filter: blur(20px);
transform: translateY(-100%);
}
to { opacity: 0 }
} .bounceFromTop { animation-name: bounceFromTop }
@keyframes bounceFromTop {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: translate3d(0, 0, 0);
}
41%, 44% {
animation-timing-function: ease-in;
transform: translate3d(0, -80px, 0) scale3d(1, 1.6, 1);
}
70% {
animation-timing-function: ease-in;
transform: translate3d(0, -20px, 0);
}
90% { transform: translate3d(0, -4px, 0) }
}
.bounceFromDown { animation-name: bounceFromDown }
@keyframes bounceFromDown {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: translate3d(0, 0, 0);
}
41%, 44% {
animation-timing-function: ease-in;
transform: translate3d(0, 80px, 0) scale3d(1, 1.2, 1);
}
70% {
animation-timing-function: ease-in;
transform: translate3d(0, 20px, 0);
}
90% { transform: translate3d(0, 4px, 0) }
}
.bounceX { animation-name: bounceX }
@keyframes bounceX {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale3d(1, 1, 1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale3d(1.8, 1, 1);
}
70% {
animation-timing-function: ease-in;
transform: scale3d(1.5, 1, 1);
}
90% { transform: scale3d(1.1, 1, 1) }
}
.bounceY { animation-name: bounceY }
@keyframes bounceY {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale3d(1, 1, 1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale3d(1, 2, 1);
}
70% {
animation-timing-function: ease-in;
transform: scale3d(1, 1.5, 1);
}
90% { transform: scale3d(1, 1.1, 1) }
}
.bounceZoomIn { animation-name: bounceZoomIn }
@keyframes bounceZoomIn {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale(1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale(1.5);
}
70% {
animation-timing-function: ease-in;
transform: scale(1.3);
}
90% { transform: scale(1.1) }
}
.bounceZoomOut { animation-name: bounceZoomOut }
@keyframes bounceZoomOut {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale(1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale(.3);
}
70% {
animation-timing-function: ease-in;
transform: scale(.5);
}
90% { transform: scale(.9) }
} .bounceInTop { animation-name: bounceInTop }
@keyframes bounceInTop {
0% { transform: translate3d(0, -300%, 0) }
58% { transform: translate3d(0, 27px, 0) }
73% { transform: translate3d(0, -12px, 0) }
88% { transform: translate3d(0, 7px, 0) }
}
.bounceInBottom { animation-name: bounceInBottom }
@keyframes bounceInBottom {
0% { transform: translate3d(0, 300%, 0) }
58% { transform: translate3d(0, -27px, 0) }
73% { transform: translate3d(0, 12px, 0) }
88% { transform: translate3d(0, -8px, 0) }
}
.bounceInLeft { animation-name: bounceInLeft }
@keyframes bounceInLeft {
0% { transform: translate3d(-300%, 0, 0) }
58% { transform: translate3d(27px, 0, 0) }
73% { transform: translate3d(-12px, 0, 0) }
88% { transform: translate3d(8px, 0, 0) }
}
.bounceInRight { animation-name: bounceInRight }
@keyframes bounceInRight {
0% { transform: translate3d(300%, 0, 0) }
58% { transform: translate3d(-27px, 0, 0) }
73% { transform: translate3d(12px, 0, 0) }
88% { transform: translate3d(-8px, 0, 0) }
} .bounceOutTop { animation-name: bounceOutTop }
@keyframes bounceOutTop {
18%, 33%, 48% { opacity: 1}
18% { transform: translate3d(0, 27px, 0) }
33% { transform: translate3d(0, -12px, 0) }
48% { transform: translate3d(0, 8px, 0) }
100% {
opacity: 0;
transform: translate3d(0, -300%, 0)
}
}
.bounceOutBottom { animation-name: bounceOutBottom }
@keyframes bounceOutBottom {
18%, 33%, 48% { opacity: 1}
18% { transform: translate3d(0, -27px, 0) }
33% { transform: translate3d(0, 12px, 0) }
48% { transform: translate3d(0, -8px, 0) }
100% {
opacity: 0;
transform: translate3d(0, 300%, 0)
}
}
.bounceOutLeft { animation-name: bounceOutLeft }
@keyframes bounceOutLeft {
18%, 33%, 48% { opacity: 1}
18% { transform: translate3d(27px, 0, 0) }
33% { transform: translate3d(-12px, 0, 0) }
48% { transform: translate3d(8px, 0, 0) }
100% {
opacity: 0;
transform: translate3d(-300%, 0, 0)
}
}
.bounceOutRight { animation-name: bounceOutRight }
@keyframes bounceOutRight {
18%, 33%, 48% { opacity: 1}
18% { transform: translate3d(-27px, 0, 0) }
33% { transform: translate3d(12px, 0, 0) }
48% { transform: translate3d(-8px, 0, 0) }
100% {
opacity: 0;
transform: translate3d(300%, 0, 0)
}
} .perspectiveToTop { animation-name: perspectiveToTop; transform: perspective(500px); transform-style: preserve-3d }
@keyframes perspectiveToTop {
50% { opacity: 1 }
to {
transform: perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);
opacity: 0;
}
}
.perspectiveToBottom { animation-name: perspectiveToBottom; transform: perspective(500px); transform-style: preserve-3d }
@keyframes perspectiveToBottom {
50% { opacity: 1 }
to {
transform: perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);
opacity: 0;
}
} .zoomIn { animation-name: zoomIn }
@keyframes zoomIn {
from {
transform: scale(10);
opacity: 0;
}
}
.zoomInLeft { animation-name: zoomInLeft }
@keyframes zoomInLeft {
from {
transform: scale(10) translateX(-50%);
opacity: 0;
}
}
.zoomInRight { animation-name: zoomInRight }
@keyframes zoomInRight {
from {
transform: scale(10) translateX(50%);
opacity: 0;
}
}
.zoomInTop { animation-name: zoomInTop }
@keyframes zoomInTop {
from {
transform: scale(10) translateY(-50%);
opacity: 0;
}
}
.zoomInBottom { animation-name: zoomInBottom }
@keyframes zoomInBottom {
from {
transform: scale(10) translateY(50%);
opacity: 0;
}
} .zoomOut { animation-name: zoomOut }
@keyframes zoomOut {
to {
transform: scale(10);
opacity: 0;
}
}
.zoomOutLeft { animation-name: zoomOutLeft }
@keyframes zoomOutLeft {
to {
transform: scale(10) translateX(-50%);
opacity: 0;
}
}
.zoomOutRight { animation-name: zoomOutRight }
@keyframes zoomOutRight {
to {
transform: scale(10) translateX(50%);
opacity: 0;
}
}
.zoomOutTop { animation-name: zoomOutTop }
@keyframes zoomOutTop {
to {
transform: scale(10) translateY(-50%);
opacity: 0;
}
}
.zoomOutBottom { animation-name: zoomOutBottom }
@keyframes zoomOutBottom {
to {
transform: scale(10) translateY(50%);
opacity: 0;
}
} .danceTop { animation-name: danceTop; transform-origin: top }
@keyframes danceTop {
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
}
.danceMiddle { animation-name: danceMiddle }
@keyframes danceMiddle {
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
}
.danceBottom { animation-name: danceBottom; transform-origin: bottom }
@keyframes danceBottom {
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
}.vbox-overlay *, .vbox-overlay *:before, .vbox-overlay *:after{
-webkit-backface-visibility: hidden;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.vbox-overlay{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1040;
-webkit-transform:translateZ(1000px);
transform: translateZ(1000px);
transform-style: preserve-3d;
} .vbox-title{
width: 100%;
height: 40px;
float: left;
text-align: center;
line-height: 28px;
font-size: 12px;
padding: 6px 40px;
overflow: hidden;
position: fixed;
display: none;
left: 0;
z-index: 1050;
}
.vbox-close{
cursor: pointer;
position: fixed;
top: -1px;
right: 0;
width: 50px;
height: 40px;
padding: 6px;
display: block;
background-position:10px center;
overflow: hidden;
font-size: 24px;
line-height: 1;
text-align: center;
z-index: 1050;
}
.vbox-num{
cursor: pointer;
position: fixed;
left: 0;
height: 40px;
display: block;
overflow: hidden;
line-height: 28px;
font-size: 12px;
padding: 6px 10px;
display: none;
z-index: 1050;
} .vbox-next, .vbox-prev{
position: fixed;
top: 50%;
margin-top: -15px;
overflow: hidden;
cursor: pointer;
display: block;
width: 45px;
height: 45px;
z-index: 1050;
}
.vbox-next span, .vbox-prev span{
position: relative;
width: 20px;
height: 20px;
border: 2px solid transparent;
border-top-color: #B6B6B6;
border-right-color: #B6B6B6;
text-indent: -100px;
position: absolute;
top: 8px;
display: block;
}
.vbox-prev{
left: 15px;
}
.vbox-next{
right: 15px;
}
.vbox-prev span{
left: 10px;
-ms-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.vbox-next span{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: 10px;
} .vbox-inline{
width: 420px;
height: 315px;
height: 70vh;
padding: 10px;
background: #fff;
margin: 0 auto;
overflow: auto;
text-align: left;
} .venoframe{
max-width: 100%;
width: 100%;
border: none;
width: 100%;
height: 260px;
height: 70vh;
}
.venoframe.vbvid{
height: 260px;
}
@media (min-width: 768px) {
.venoframe, .vbox-inline{
width: 90%;
height: 360px;
height: 70vh;
}
.venoframe.vbvid{
width: 640px;
height: 360px;
}
}
@media (min-width: 992px) {
.venoframe, .vbox-inline{
max-width: 1200px;
width: 80%;
height: 540px;
height: 70vh;
}
.venoframe.vbvid{
width: 960px;
height: 540px;
}
} .vbox-open{
overflow: hidden;
}
.vbox-container{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
z-index: 20;
max-height: 100%;
}
.vbox-content{
text-align: center;
float: left;
width: 100%;
position: relative;
overflow: hidden;
padding: 20px 10px;
}
.vbox-container img{
max-width: 100%;
height: auto;
}
.figlio{
box-shadow: 0 0 12px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
max-width: 100%;
text-align: initial;
}
img.figlio{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.vbox-content.swipe-left{
margin-left: -200px !important;
}
.vbox-content.swipe-right{
margin-left: 200px !important;
}
.animated{
webkit-transition: margin 300ms ease-out;
transition: margin 300ms ease-out;
}
.animate-in{
opacity: 1;
}
.animate-out{
opacity: 0;
} .sk-double-bounce,.sk-rotating-plane{width:40px;height:40px;margin:40px auto}.sk-rotating-plane{background-color:#333;-webkit-animation:sk-rotatePlane 1.2s infinite ease-in-out;animation:sk-rotatePlane 1.2s infinite ease-in-out}@-webkit-keyframes sk-rotatePlane{0%{-webkit-transform:perspective(120px) rotateX(0) rotateY(0);transform:perspective(120px) rotateX(0) rotateY(0)}50%{-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0);transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}@keyframes sk-rotatePlane{0%{-webkit-transform:perspective(120px) rotateX(0) rotateY(0);transform:perspective(120px) rotateX(0) rotateY(0)}50%{-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0);transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-double-bounce{position:relative}.sk-double-bounce .sk-child{width:100%;height:100%;border-radius:50%;background-color:#333;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:sk-doubleBounce 2s infinite ease-in-out;animation:sk-doubleBounce 2s infinite ease-in-out}.sk-chasing-dots .sk-child,.sk-spinner-pulse,.sk-three-bounce .sk-child{background-color:#333;border-radius:100%}.sk-double-bounce .sk-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes sk-doubleBounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-doubleBounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}.sk-wave{margin:40px auto;width:50px;height:40px;text-align:center;font-size:10px}.sk-wave .sk-rect{background-color:#333;height:100%;width:6px;display:inline-block;-webkit-animation:sk-waveStretchDelay 1.2s infinite ease-in-out;animation:sk-waveStretchDelay 1.2s infinite ease-in-out}.sk-wave .sk-rect1{-webkit-animation-delay:-1.2s;animation-delay:-1.2s}.sk-wave .sk-rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-wave .sk-rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-wave .sk-rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-wave .sk-rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-waveStretchDelay{0%,100%,40%{-webkit-transform:scaleY(.4);transform:scaleY(.4)}20%{-webkit-transform:scaleY(1);transform:scaleY(1)}}@keyframes sk-waveStretchDelay{0%,100%,40%{-webkit-transform:scaleY(.4);transform:scaleY(.4)}20%{-webkit-transform:scaleY(1);transform:scaleY(1)}}.sk-wandering-cubes{margin:40px auto;width:40px;height:40px;position:relative}.sk-wandering-cubes .sk-cube{background-color:#333;width:10px;height:10px;position:absolute;top:0;left:0;-webkit-animation:sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;animation:sk-wanderingCube 1.8s ease-in-out -1.8s infinite both}.sk-chasing-dots,.sk-spinner-pulse{width:40px;height:40px;margin:40px auto}.sk-wandering-cubes .sk-cube2{-webkit-animation-delay:-.9s;animation-delay:-.9s}@-webkit-keyframes sk-wanderingCube{0%{-webkit-transform:rotate(0);transform:rotate(0)}25%{-webkit-transform:translateX(30px) rotate(-90deg) scale(.5);transform:translateX(30px) rotate(-90deg) scale(.5)}50%{-webkit-transform:translateX(30px) translateY(30px) rotate(-179deg);transform:translateX(30px) translateY(30px) rotate(-179deg)}50.1%{-webkit-transform:translateX(30px) translateY(30px) rotate(-180deg);transform:translateX(30px) translateY(30px) rotate(-180deg)}75%{-webkit-transform:translateX(0) translateY(30px) rotate(-270deg) scale(.5);transform:translateX(0) translateY(30px) rotate(-270deg) scale(.5)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes sk-wanderingCube{0%{-webkit-transform:rotate(0);transform:rotate(0)}25%{-webkit-transform:translateX(30px) rotate(-90deg) scale(.5);transform:translateX(30px) rotate(-90deg) scale(.5)}50%{-webkit-transform:translateX(30px) translateY(30px) rotate(-179deg);transform:translateX(30px) translateY(30px) rotate(-179deg)}50.1%{-webkit-transform:translateX(30px) translateY(30px) rotate(-180deg);transform:translateX(30px) translateY(30px) rotate(-180deg)}75%{-webkit-transform:translateX(0) translateY(30px) rotate(-270deg) scale(.5);transform:translateX(0) translateY(30px) rotate(-270deg) scale(.5)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}.sk-spinner-pulse{-webkit-animation:sk-pulseScaleOut 1s infinite ease-in-out;animation:sk-pulseScaleOut 1s infinite ease-in-out}@-webkit-keyframes sk-pulseScaleOut{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes sk-pulseScaleOut{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.sk-chasing-dots{position:relative;text-align:center;-webkit-animation:sk-chasingDotsRotate 2s infinite linear;animation:sk-chasingDotsRotate 2s infinite linear}.sk-chasing-dots .sk-child{width:60%;height:60%;display:inline-block;position:absolute;top:0;-webkit-animation:sk-chasingDotsBounce 2s infinite ease-in-out;animation:sk-chasingDotsBounce 2s infinite ease-in-out}.sk-chasing-dots .sk-dot2{top:auto;bottom:0;-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes sk-chasingDotsRotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes sk-chasingDotsRotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes sk-chasingDotsBounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-chasingDotsBounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}.sk-three-bounce{margin:40px auto;width:80px;text-align:center}.sk-three-bounce .sk-child{width:20px;height:20px;display:inline-block;-webkit-animation:sk-three-bounce 1.4s ease-in-out 0s infinite both;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both}.sk-circle .sk-child:before,.sk-fading-circle .sk-circle:before{display:block;border-radius:100%;content:'';background-color:#333}.sk-three-bounce .sk-bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.sk-three-bounce .sk-bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-three-bounce{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-three-bounce{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.sk-circle{margin:40px auto;width:40px;height:40px;position:relative}.sk-circle .sk-child{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle .sk-child:before{margin:0 auto;width:15%;height:15%;-webkit-animation:sk-circleBounceDelay 1.2s infinite ease-in-out both;animation:sk-circleBounceDelay 1.2s infinite ease-in-out both}.sk-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleBounceDelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-circleBounceDelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.sk-cube-grid{width:40px;height:40px;margin:40px auto}.sk-cube-grid .sk-cube{width:33.33%;height:33.33%;background-color:#333;float:left;-webkit-animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube1{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube2{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube3{-webkit-animation-delay:.4s;animation-delay:.4s}.sk-cube-grid .sk-cube4{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube5{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube6{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube7{-webkit-animation-delay:0ms;animation-delay:0ms}.sk-cube-grid .sk-cube8{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube9{-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes sk-cubeGridScaleDelay{0%,100%,70%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}@keyframes sk-cubeGridScaleDelay{0%,100%,70%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}.sk-fading-circle{margin:40px auto;width:40px;height:40px;position:relative}.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle:before{margin:0 auto;width:15%;height:15%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,100%,39%{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,100%,39%{opacity:0}40%{opacity:1}}.sk-folding-cube{margin:40px auto;width:40px;height:40px;position:relative;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.sk-folding-cube .sk-cube{float:left;width:50%;height:50%;position:relative;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.sk-folding-cube .sk-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#333;-webkit-animation:sk-foldCubeAngle 2.4s infinite linear both;animation:sk-foldCubeAngle 2.4s infinite linear both;-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}.sk-folding-cube .sk-cube2{-webkit-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotateZ(90deg)}.sk-folding-cube .sk-cube3{-webkit-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotateZ(180deg)}.sk-folding-cube .sk-cube4{-webkit-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotateZ(270deg)}.sk-folding-cube .sk-cube2:before{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-folding-cube .sk-cube3:before{-webkit-animation-delay:.6s;animation-delay:.6s}.sk-folding-cube .sk-cube4:before{-webkit-animation-delay:.9s;animation-delay:.9s}@-webkit-keyframes sk-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0);transform:perspective(140px) rotateX(0);opacity:1}100%,90%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes sk-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0);transform:perspective(140px) rotateX(0);opacity:1}100%,90%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}.section-heading h2{
font-size: 40px;
font-weight: 500;
line-height: 44px;
color: #222;
}
.section-heading p{
margin-bottom: 0;
} a,
a:hover{
transition: all 0.2s ease-in-out;
} .service-item{
display: block;
position: relative;
overflow: hidden;
z-index: 1;
}
.service-item:before{
background-color: rgba(17,17, 17, 0.5);
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.service-item img{
display: block;
transition: all 0.8s ease-in-out;
width: 100%;
}
.service-item:hover img{
-webkit-filter: blur(4px); filter: blur(4px);
transition: all 0.2s ease-in-out;
}
.service-item .post-info{
width: 100%;
height: auto;
display: block;
position: absolute;
left: 0;
bottom: 0;
padding: 25px 30px;
z-index: 10;
}
.service-item .post-info p{
font-weight: normal;
margin: 0;
}
.service-item .post-info a{
color: #fff;
font-size: 13px;
margin-top: 10px;
}
.service-item .post-info a:hover{
color: #fff;
text-decoration: underline;
opacity: 1;
} .service-box-2{
display: block;
text-align: center;
}
.service-box-2 .service-icon{
background-color: #fff;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
color: #222;
margin: 0 auto;
}
.service-box-2 img{
max-width: 100%;
margin-bottom: 15px;
}
.service-box-2 img:hover{
transition: all 0.2s ease-in-out;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.service-box-2 h4{
margin: 0 0 5px;
font-size: 22px;
font-weight: 700;
letter-spacing: 0;
color: #303133;
}
.service-box-2 p{
font-size: 14px;
font-weight: normal;
margin: 0;
line-height: 22px;
}
.service-box-2 a{
font-size: 12px;
text-transform: uppercase;
color: #555;
margin-top: 10px;
}
.service-box-2 a:hover{
color: #9e8a78;
text-decoration: none;
} .service-box-3{
position: relative;
padding: 60px 20px;
z-index: 1;
transition: all 0.3s ease-in-out;
border: 1px solid #ddd;
}
.service-box-3 h4{
margin: 0 0 5px;
padding: 0;
}
.service-box-3 p{
font-weight: normal;
margin: 0 0 10px;
font-size: 14px;
}
.service-box-3 a{
font-size: 12px;
font-weight: 400;
}
.service-box-3 a:hover{
color: #9e8a78;
text-decoration: underline;
}
.service-box-3:hover h4,
.service-box-3:hover a{
color: #fff;
transition: all 0.3s ease-in-out;
}
.service-box-3:hover p{
color: #ddd;
font-weight: 400;
transition: all 0.3s ease-in-out;
}
.service-box-3 .hover-img{
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease-in-out;
}
.service-box-3 .hover-img:before{
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
content: '';
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.service-box-3:hover .hover-img{
opacity: 1;
visibility: visible;
} .wt-callout{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.wt-callout h2{
margin-bottom: 10px;
}
.wt-callout.wt-callout-align-center{
flex-direction: column;
}
.wt-callout.wt-callout-align-center .wt-callout-left{
margin-bottom: 20px;
}
.wt-callout.wt-callout-align-center .wt-callout-right,
.wt-callout.wt-callout-align-center .wt-callout-left{
text-align: center;
padding: 0;
}
.wt-callout.box_center{
justify-content: center;
}
.wt-callout.box_center .wt-callout-left{
flex: inherit;
}
.wt-callout .wt-callout-left{
flex: 1;
}
.wt-callout .wt-callout-right{
width: auto;
padding-left: 60px;
}
.wt-callout.box_center .wt-callout-right{
padding-left: 30px;
}
.wt-callout.wt-callout-align-left .wt-callout-right{
order: -1;
padding-right: 60px;
padding-left: 0
}
.wt-callout-desc{
font-weight: normal;
margin: 0;
}
.wt-callout-btn{
background-color: #9e8a78;
display: flex;
align-items: center;
font-size: 14px;
color: #fff;
padding: 15px 30px;
border-radius: 2px;
font-weight: 600;
font-family: 'Open Sans', serif;
}
.wt-callout-btn:hover{
color: #fff;
opacity: 0.8;
}
.wt-callout-btn .wt-callout-icon-align-left{
order: -1;
}
@media (max-width: 750px) {
.wt-callout{
display: block;
}
.wt-callout.box_center{
text-align: center;
}
.wt-callout .wt-callout-right{
padding-left: 0;
margin-top: 20px;
}
.wt-callout.wt-callout-align-left .wt-callout-right{
padding: 0;
}
.wt-callout-btn{
display: inline-block;
}
.section-heading p br,
.section-heading h2 br{
display: none!important;
}
} .grid-gallery {
max-width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
.grid-gallery li {
display: block;
float: left;
padding: 5px;
width: 33.33%;
opacity: 0;
}
.grid-gallery li a{
transition: all 0.2s ease-in-out;
}
.grid-gallery li a:hover{
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition: all 0.2s ease-in-out;
}
.grid-gallery.column-2 li{
width: 50%;
}
.grid-gallery.column-4 li{
width: 25%;
}
.grid-gallery.column-1 li{
width: 100%;
}
.grid-gallery li.shown,
.no-js .grid-gallery li,
.no-cssanimations .grid-gallery li {
opacity: 1;
}
.grid-gallery li a,
.grid-gallery li img {
outline: none;
border: none;
display: block;
width: 100%;
} .grid-gallery.effect-1 li.animate {
-webkit-animation: fadeIn 0.65s ease forwards;
animation: fadeIn 0.65s ease forwards;
}
@-webkit-keyframes fadeIn {
0% { }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { }
100% { opacity: 1; }
} .grid-gallery.effect-2 li.animate {
-webkit-transform: translateY(200px);
transform: translateY(200px);
-webkit-animation: moveUp 0.65s ease forwards;
animation: moveUp 0.65s ease forwards;
}
@-webkit-keyframes moveUp {
0% { }
100% { -webkit-transform: translateY(0); opacity: 1; }
}
@keyframes moveUp {
0% { }
100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
} .grid-gallery.effect-3 li.animate {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-animation: scaleUp 0.65s ease-in-out forwards;
animation: scaleUp 0.65s ease-in-out forwards;
}
@-webkit-keyframes scaleUp {
0% { }
100% { -webkit-transform: scale(1); opacity: 1; }
}
@keyframes scaleUp {
0% { }
100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
} .grid-gallery.effect-4 {
-webkit-perspective: 1300px;
perspective: 1300px;
}
.grid-gallery.effect-4 li.animate {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
transform: translateZ(400px) translateY(300px) rotateX(-90deg);
-webkit-animation: fallPerspective .8s ease-in-out forwards;
animation: fallPerspective .8s ease-in-out forwards;
}
@-webkit-keyframes fallPerspective {
0% { }
100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
@keyframes fallPerspective {
0% { }
100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
} .grid-gallery.effect-5 {
-webkit-perspective: 1300px;
perspective: 1300px;
}
.grid-gallery.effect-5 li.animate {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50% -300px;
transform-origin: 50% 50% -300px;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
-webkit-animation: fly .8s ease-in-out forwards;
animation: fly .8s ease-in-out forwards;
}
@-webkit-keyframes fly {
0% { }
100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}
@keyframes fly {
0% { }
100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
} .grid-gallery.effect-6 {
-webkit-perspective: 1300px;
perspective: 1300px;
}
.grid-gallery.effect-6 li.animate {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: rotateX(-80deg);
transform: rotateX(-80deg);
-webkit-animation: flip .8s ease-in-out forwards;
animation: flip .8s ease-in-out forwards;
}
@-webkit-keyframes flip {
0% { }
100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}
@keyframes flip {
0% { }
100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
} .grid-gallery.effect-7 {
-webkit-perspective: 1300px;
perspective: 1300px;
}
.grid-gallery.effect-7 li.animate {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: helix .8s ease-in-out forwards;
animation: helix .8s ease-in-out forwards;
}
@-webkit-keyframes helix {
0% { }
100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}
@keyframes helix {
0% { }
100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
} .grid-gallery.effect-8 {
-webkit-perspective: 1300px;
perspective: 1300px;
}
.grid-gallery.effect-8 li.animate {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: scale(0.4);
transform: scale(0.4);
-webkit-animation: popUp .8s ease-in forwards;
animation: popUp .8s ease-in forwards;
}
@-webkit-keyframes popUp {
0% { }
70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
100% { -webkit-transform: scale(1); opacity: 1; }
}
@keyframes popUp {
0% { }
70% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@media screen and (max-width: 900px) {
.grid-gallery li {
width: 50%;
}
}
@media screen and (max-width: 400px) {
.grid-gallery li {
width: 100%;
}
} .counter-box h3{
font-weight: 800;
font-size: 32px;
margin-bottom: 5px;
}
.counter-box h4{
font-size: 16px;
text-transform: uppercase;
}
.counter-box i{
color: #fff;
font-size: 35px;
margin-bottom: 10px;
} .team-members{
text-align: center;
}
.team-box{
position: relative;
overflow: hidden;
}
.team-box img{
width: 100%;
transition: all 0.3s ease-in-out;
}
.team-box:hover img{
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition: all 0.2s ease-in-out;
}
.team-box:hover .team-info{
bottom: 0;
visibility: visible;
opacity: 1;
}
.team-info{
background-color: rgba(158, 138, 120, 0.8);
padding: 20px 10px;
width: 100%;
height: auto;
display: block;
opacity: 0;
position: absolute;
left: 0;
bottom: -100px;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
.team-info h4{
margin-bottom: 0;
color: #fff;
font-family: 'Playfair Display', serif;
font-size: 22px;
letter-spacing: 0;
}
.team-info p{
margin: 0;
}
.team-social{
list-style: none;
margin: 5px 0 0;
padding: 0;
}
.team-social li{
display: inline-block;
}
.team-social li a{
background-color: #fff;
color: #555;
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
margin: 0 5px;
font-size: 10px;
border-radius: 2px;
}
.team-social li a:hover{
color: #fff;
box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.15);
} .review-box{
padding: 30px;
}
.review-box h4{
font-family: 'Open Sans', serif;
font-size: 16px;
font-weight: 400;
}
.review-box p{
font-size: 24px;
font-family: 'Playfair Display', serif;
line-height: 1.4;
font-weight: 600;
letter-spacing: -0.2px;
} .ratings{
display: block;
margin: 0 -3px 0!important;
}
.ratings li{
display: inline-block;
color: #777;
font-size: 12px;
}
.ratings.star-5 li{
color: #FED701;
}
.ratings.star-4 li:nth-child(-n+4){
color: #FED701;
}
.ratings.star-3 li:nth-child(-n+3){
color: #FED701;
}
.ratings.star-2 li:nth-child(-n+2){
color: #FED701;
}
.ratings.star-1 li:nth-child(-n+1){
color: #FED701;
}
.nav-center .owl-nav{}
.nav-bottom .owl-nav div,
.nav-center .owl-nav div{
background-color: #fafafa;
width: 40px;
height: 40px;
line-height: 38px;
border: 1px solid #eee;
position: absolute;
left: -40px;
top: calc(50% - 20px);
text-align: center;
font-size: 10px;
color: #777;
}
.nav-center .owl-nav div.owl-next{
left: auto;
right: -40px;
}
.nav-bottom .owl-nav div{
top: auto;
bottom: -60px;
left: 0;
}
.nav-bottom .owl-nav div.owl-next{
right: auto;
left: 50px;
}
@media all and (max-width: 992px) {
.nav-center .owl-nav div.owl-next{
right: 0;
}
.nav-center .owl-nav div{
left: 0;
}
}
.testi-carousel .owl-dots{
width: 100%;
height: auto;
position: absolute;
left: 0;
bottom: -20px;
text-align: center;
}
.testi-carousel .owl-dots div{
background-color: #ddd;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
margin: 0 2px;
transition: all 0.3s linear;
transform: scale(0.8);
}
.testi-carousel .owl-dots div.active{
background-color: #fff;
transition: all 0.3s linear;
transform: scale(1);
}
.review-box .client-info{
position: relative;
padding-left: 100px;
padding-top: 20px;
min-height: 80px;
}
.review-box .client-info img{
width: 80px!important;
height: 80px;
border-radius: 50%;
position: absolute;
left: 0;
bottom: 0;
}
.review-box.center .client-info{
padding-left: 0;
}
.review-box.center .client-info img{
position: inherit;
margin: 0 auto;
margin-bottom: 15px;
} .sponsor-list{}
.sponsor-list .sponsor-box{
padding: 5px;
cursor: pointer;
}
.sponsor-box img{
opacity: 0.6;
transition: all 0.2s ease-in-out;
width: 100%;
}
.sponsor-box:hover img{
opacity: 1;
} .sponsor-carousel.nav-center .owl-nav div{
background-color: transparent;
border: none;
color: #555;
font-size: 16px;
} .wt-list{
list-style: none;
padding: 0;
margin: 0;
}
.wt-list .list-item{
position: relative;
padding-left: 75px;
}
.wt-list .list-item .list-icon{
border-style: solid;
width: 60px;
height: 60px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
text-align: center;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
transition: all 0.2s ease-in-out;
}
.wt-list .list-item .list-icon i,
.wt-list .list-item .list-icon span{
width: 100%;
display: block;
text-align: center;
}
.wt-list .list-item h4{
margin-bottom: 0;
}
.wt-list .list-item p{
margin: 0;
font-weight: normal;
} .wpcf7{
max-width: 100%!important;
}
.wt-cf7-form{}
.wt-cf7-form .wpcf7 .wpcf7-response-output{
margin-top: 40px;
}
.wt-cf7-form form p{
margin: 0!important;
text-align: center;
}
.cf7-col-row{
margin: 0 -10px;
display: block;
margin-bottom: 0;
}
.cf7-col-row .cf7-col{
float: left;
width: 50%;
padding: 0 10px;
}
.wt-cf7-form .wpcf7-form label{
color: #555;
font-size: 12px;
}
.wt-cf7-form .wpcf7-form .wpcf7-form-control-wrap input{
border: 1px solid #ddd;
padding: 12px .75rem;
}
.wt-cf7-form .wpcf7-form .wpcf7-form-control-wrap input:focus{
outline: none;
box-shadow: none;
border: 1px solid #9e8a78;
}
.wt-cf7-form .wpcf7-form .wpcf7-form-control-wrap .wpcf7-textarea{}
.wt-cf7-form .wpcf7-form .wpcf7-form-control-wrap .wpcf7-textarea:focus{
outline: none;
box-shadow: none;
border: 1px solid #9e8a78;
}
.wt-cf7-form .wpcf7-form-control{
margin-top: 0;
}
.wpcf7 select:not([size]):not([multiple]), select.form-control:not([size]):not([multiple]) {
height: 50px!important;
}
.wpcf7 select:not([size]):not([multiple]):focus, select.form-control:not([size]):not([multiple]):focus{
outline: none;
box-shadow: none;
}
.wt-cf7-form span.wpcf7-list-item {
display: inline-block;
margin: 5px 15px 0 0;
}
.wt-cf7-form .nice-select.wpcf7-form-control{
height: 50px;
display: block;
width: 100%;
}
.wt-cf7-form .nice-select.wpcf7-form-control span{
line-height: 48px;
}
.wt-cf7-form .nice-select.wpcf7-form-control .list{
width: 100%;
}
.wt-cf7-form .wpcf7 input[type="submit"]{
color: #fff;
background-color: #9e8a78;
font-family: 'Playfair Display', serif;
display: inline-block;
width: auto;
border: none;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
}
.wt-cf7-form .wpcf7 input[type="submit"]:focus,
.wt-cf7-form .wpcf7 input[type="submit"]:hover{
background-color: #897666;
color: #fff;
}
.wt-cf7-form .wpcf7 input[type="submit"]:focus{
border: none;
outline: 0;
box-shadow: none;
}
.wt-cf7-form .wpcf7-form-control.wpcf7-submit{
margin-bottom: 0!important;
}
@media all and (max-width: 767px) {
.cf7-col-row{
margin: 0;
}
.cf7-col-row .cf7-col{
float: none;
width: 100%;
padding: 0;
margin-bottom: 15px;
}
} .wt-branding{}
.wt-branding .site-title{
font-family: 'Playfair Display', serif;
font-weight: 800;
color: #9e8a78;
font-size: 24px;
}
.wt-branding .site-description{
text-transform: uppercase;
font-size: 16px;
} .wt-menu-wrap{
position: relative;
}
.wt-menu{
list-style: none;
margin: 0;
padding: 0;
}
.wt-menu li{
display: inline-block;
}
.wt-menu li a{
display: inline-block;
padding: 10px 15px;
font-size: 13px;
font-family: 'Playfair Display', serif;
font-weight: 600;
text-transform: uppercase;
color: #555;
}
.wt-menu li.current_page_item a,
.wt-menu li a:hover{
color: #111;
}
@media all and (max-width: 767px) {
.wt-menu {
display: none;
}
.wt-menu-wrap .slicknav_btn{
margin: 6px 5px 15px;
}
} .display-table{
width: 100%;
height: 100%;
display: table;
}
.table-cell{
display: table-cell;
vertical-align: middle;
}
.slider-text {
width: 100%;
}
.slider-text h1{
font-size: 40px;
text-transform: uppercase;
font-family: 'Playfair Display', serif;
font-weight: 900;
color: #fff;
line-height: 45px;
}
.nivo-caption a{
display: inline-block!important;
}
.slider-text p {
margin-bottom: 15px;
}
.slider-text .slider-btn{
padding: 15px 20px;
background-color: #9e8a78;
color: #fff;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
border: 1px solid #9e8a78;
border-radius: 3px;
}
.slider-text .slider-btn:hover{
opacity: 0.8;
}
.slider-wrapper {
position: relative;
}
.nivo-caption {
height: 100%;
opacity: 1;
background: transparent;
overflow: visible;
} .nivo-directionNav a {
font-size: 13px;
background-color: rgba(255,255,255,0);
border: 1px solid #b7b7b7;
width: 40px;
height: 40px;
text-align: center;
line-height: 38px;
color: #fff!important;
top: calc(50% - 20px);
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.nivo-directionNav a.nivo-prevNav {
left: 25px;
}
.nivo-directionNav a.nivo-nextNav {
right: 25px;
}
.slider-wrapper:hover .nivo-directionNav a.nivo-prevNav {
left: 15px;
opacity: 0.7;
}
.slider-wrapper:hover .nivo-directionNav a.nivo-nextNav {
right: 15px;
opacity: 0.7;
}
.nivo-directionNav a:hover{
opacity: 1!important;
} .nivo-controlNav {
padding: 0;
position: absolute;
z-index: 12;
bottom: 30px;
width: 100%;
}
.nivo-controlNav a {
background-color: transparent;
width: 12px;
height: 12px;
border: 2px solid rgba(255,255,255,0.5);
border-radius: 50%;
display: inline-block;
font-size: 0;
cursor: pointer;
margin: 0 5px;
transition: all 0.3s ease-in-out;
line-height: 12px;
}
.nivo-controlNav a.active {
background-color: #9e8a78;
border: 2px solid #9e8a78;
} .nivo-controlNav.nivo-thumbs-enabled{}
.nivo-controlNav.nivo-thumbs-enabled a {
width: 80px;
height: 80px;
border: none;
border-radius: 3px;
overflow: hidden;
opacity: 0.7;
}
.nivo-controlNav.nivo-thumbs-enabled a img{
width: 100%;
}
.nivo-controlNav.nivo-thumbs-enabled a.active{
opacity: 1;
border: none;
background-color: transparent;
}
@media (max-width: 992px) {
.nivo-caption .slider-text h1 {
font-size: 28px;
line-height: 36px;
}
.section-heading{
margin-bottom: 40px!important;
}
}
@media all and (max-width: 767px) {
.nivo-caption .slider-text h1 {
font-size: 18px;
line-height: 22px;
margin-bottom: 5px;
text-align: center!important;
}
.nivo-caption .slider-text .btn-group-left,
.nivo-caption .slider-text .btn-group-right,
.nivo-caption .slider-text .btn-group-center{
display: none;
}
.elementor-text-editor br,
p br{
display: none!important;
}
.slider-wrapper .nivo-controlNav,
.slider-text p{
display: none!important;
}
.nivo-directionNav a{
width: 30px;
height: 30px;
line-height: 28px;
font-size: 12px;
}
} .btn-align-left a{
margin-right: 10px;
}
.btn-align-center a{
margin: 0 5px;
}
.btn-align-right a{
margin-left: 10px;
}
.sentobar-btn{
background-color: #9e8a78;
display: inline-block;
padding: 15px 25px;
font-weight: 700;
border-radius: 3px;
font-size: 12px;
color: #fff;
transition: all 0.3s ease-in-out;
}
.sentobar-btn:hover{
color: #fff;
text-decoration: none;
transition: all 0.3s ease-in-out;
opacity: 0.8;
} .sentobar-video.embed-responsive{
border: 1px solid #ddd;
padding: 5px;
} .sentobar-spacing {
display: block;
height: auto;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
outline: none !important;
} .sentobar-notice {
padding: 15px;
background-color: #fafafa;
border-left: 6px solid #7f7f84;
margin-bottom: 10px;
-webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}
.sentobar-notice.notice-sm {
padding: 10px;
font-size: 80%;
}
.sentobar-notice.notice-lg {
padding: 35px;
font-size: large;
}
.sentobar-notice.notice-success {
border-color: #80D651;
}
.sentobar-notice.notice-success > strong {
color: #80D651;
}
.sentobar-notice.notice-info {
border-color: #45ABCD;
}
.sentobar-notice.notice-info > strong {
color: #45ABCD;
}
.sentobar-notice.notice-warning {
border-color: #FEAF20;
}
.sentobar-notice.notice-warning > strong {
color: #FEAF20;
}
.sentobar-notice.notice-danger {
border-color: #d73814;
}
.sentobar-notice.notice-danger > strong {
color: #d73814;
} .accordion {
width: 100%;
max-width: 1080px;
height: 250px;
overflow: hidden;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%;
height: 250px;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
}
.accordion ul li div {
display: block;
overflow: hidden;
width: 100%;
}
.accordion ul li div a {
display: block;
height: 250px;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
color: #fff;
text-decoration: none;
font-family: 'Roboto', sans-serif;
transition: all 200ms ease;
}
.accordion ul li div a * {
opacity: 0;
margin: 0;
width: 100%;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.accordion ul li div a h2 {
font-family: Unna,sans-serif;
text-overflow: clip;
font-size: 18px;
color: #fff;
text-transform: uppercase;
margin-bottom: 2px;
top: 160px;
}
.accordion ul li div a p {
top: 160px;
font-size: 13.5px;
}
.accordion ul:hover li {
width: 8%;
}
.accordion ul:hover li:hover {
width: 60%;
}
.accordion ul:hover li:hover a {
background: rgba(0, 0, 0, 0.4);
}
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
@media screen and (max-width: 600px) {
body {
margin: 0;
}
.accordion {
height: auto;
}
.accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
} .elementor-section.half-bg{
position: relative;
z-index: 1;
}
.elementor-section.half-bg:before {
width: 50%;
height: 100%;
background-color: #fff;
content: "";
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.elementor-section.half-bg.bg-right:before{ left: auto; right: 0; }
.elementor-section.half-bg.dark:before{ background-color: #111; }
.elementor-section.half-bg.grey:before{ background-color: #ddd; }
@media (max-width: 992px) {
.elementor-section.half-bg:before{ display: none; }
.wt-list .list-item p br{
display: none;
}
}
@media (max-width: 591px) {
.sponsor-list .col-sm-3{
flex: 0 0 50%;
max-width: 50%;
}
} .social-share {
display: block;
margin: 0;
}
.social-share span{
margin-right: 10px;
}
.social-share a{
color: #555;
font-size: 14px;
margin-right: 10px;
}
.social-share a:hover{
color: #333;
} .wt-social-icons{
display: block;
margin: 0!important;
}
.wt-social-icons.left{
text-align: left;
}
.wt-social-icons.left li:not(:last-of-type){
margin-right: 20px;
}
.wt-social-icons.center{
text-align: center;
}
.wt-social-icons.center li{
margin: 0 10px;
}
.wt-social-icons.right{
text-align: right;
}
.wt-social-icons.right li:not(:first-of-type){
margin-left: 20px;
}
.wt-social-icons li{
display: inline-block;
}
.wt-social-icons li a{
color: #ddd;
font-size: 12px;
}
.wt-social-icons li a:hover{
color: #fff;
opacity: 0.7;
}
.widget ul.wt-social-icons li a{
color: #999;
}
.widget ul.wt-social-icons li a:hover{
color: #313335;
opacity: 1;
} .subscribe_form {
display: block;
text-align: center;
padding: 5px 0;
}
.subscribe_form input.input{
display: block;
background-color: #333;
color: #fff;
border: none;
font-size: 12px;
line-height: 50px;
padding: 0 10px;
float: left;
border-radius: 0;
width: 70%;
transition: all 0.5s ease-in-out;
}
.subscribe_form input.input:focus{
color: #fff;
}
.subscribe_form .submit{
background-color: #9e8a78;
color: #fff;
font-family: "Open Sans", serif;
font-size: 10px;
font-weight: 600;
line-height: 50px;
display: inline-block;
padding: 0 10px;
float: left;
width: 30%;
border-radius: 0;
letter-spacing: 1;
transition: all 0.5s ease-in-out;
}
.subscribe_form .submit:hover{
background-color: #897666;
transition: all 0.5s ease-in-out;
}
.subscribe_form input::-webkit-input-placeholder{
color: #ddd !important;
}
.subscribe_form input:-moz-placeholder{ color: #ddd !important;
}
.subscribe_form input::-moz-placeholder{ color: #ddd !important;
}
.subscribe_form input:-ms-input-placeholder{
color: #ddd !important;
}
.mc4wp-form-submitted .mc4wp-error{
margin-top: 50px;
}
.mc4wp-form-submitted .mc4wp-error p{
color: #ddd;
}
.mc4wp-form-submitted .mc4wp-error p a{
color: #ddd;
} .wt-pricing-box{
background-color: #fcf9f7;
padding: 50px;
display: block;
text-align: center;
}
.wt-pricing-box .pricing-icon{
display: block;
text-align: center;
margin: 0 0 25px;
}
.wt-pricing-box .pricing-icon img{
width: 50px;
height: 50px;
margin: 0 auto;
}
.wt-pricing-box .pricing-icon i{
font-size: 50px;
color: #9e8a78;
}
.wt-pricing-box .pricing-title{
position: relative;
padding-bottom: 30px;
margin-bottom: 30px;
}
.wt-pricing-box .pricing-title:before{
background-color: #dddddd;
content: "";
display: block;
width: 50px;
height: 1px;
position: absolute;
left: 50%;
margin-left: -25px;
bottom: 0;
}
.wt-pricing-box .pricing-title h3{
font-size: 28px;
line-height: 1.1;
font-family: 'Playfair Display', sans-serif;
font-weight: 500;
color: #313335;
letter-spacing: 1px;
margin: 0;
}
.wt-pricing-box .pricing-title h4{
font-family: 'Playfair Display', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.1;
color: #313335;
margin: 10px 0 0;
}
.wt-pricing-box .desc{
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #777;
}
.wt-pricing-box .price-btn{
background-color: #938a78;
display: inline-block;
padding: 10px 25px;
color: #fff;
font-size: 14px;
font-weight: 600;
font-family: "Open Sans", sans-serif;
margin-top: 30px;
}
.wt-pricing-box .price-btn:hover{
opacity: 0.9;
} .widget-about{}
.widget-about .widget-brand{
display: block;
margin-bottom: 20px;
}
.widget-about-info{
display: block;
color: #999;
font-size: 15px;
font-family: "Open Sans", serif;
line-height: 1.73;
letter-spacing: .2px;
}
.widget-about-info span{
font-family: 'Open Sans', serif;
font-size: 13px;
color: #fff;
letter-spacing: 2px;
font-weight: 500;
text-transform: uppercase;
display: block;
}
.widget .widget-about-info span{
color: #313335;
}
.widget-about .wt-social-icons{
margin-top: 20px!important;
}
.widget-about .wt-social-icons li{
padding: 0;
}
.widget-about .wt-social-icons li:before{
display: none;
} .vbox-content {
height: 100vh;
}
.vbox-container img {
height: 100%;
} .el-blog-posts{
margin-top: -15px;
margin-bottom: -15px;
}
.archive .el-blog-posts .blog-post,
.blog .el-blog-posts .blog-post,
.search .el-blog-posts .blog-post{
padding: 15px;
}
.el-blog-posts .entry_thumb {
position: relative;
overflow: hidden;
}
.el-blog-posts .entry_thumb-link img {
vertical-align: bottom;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.el-blog-posts .entry_thumb-link::before {
content: "";
display: block;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 1;
}
.el-blog-posts .entry_thumb:hover .entry_thumb-link::before {
opacity: 1;
visibility: visible;
}
.el-blog-posts .entry_thumb:hover .entry_thumb-link img {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.el-blog-posts .entry_text {
padding: 30px 25px;
background-color: #fcf9f7;
}
.el-blog-posts .entry_title {
font-size: 28px;
line-height: 34px;
font-weight: 400;
margin-top: 0;
margin-bottom: 25px;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.el-blog-posts .entry_title a {
color: #222222;
text-decoration: none;
}
.el-blog-posts .entry_title a:hover,
.el-blog-posts .entry_title a:focus {
color: #938a78;
}
.el-blog-posts .entry_meta a,
.el-blog-posts .entry_date {
font-family: "Open Sans", sans-serif;
font-size: 12px;
line-height: 14px;
margin-bottom: 15px;
font-weight: 400;
color: #777;
}
.el-blog-posts .entry_date a {
margin-bottom: 0;
}
.el-blog-posts .entry-excerpt .page-links{
padding-bottom: 0;
}
.el-blog-posts .entry_meta {
font-family: "Open Sans", sans-serif;
font-size: 16px;
margin-bottom: 0;
margin-top: 25px;
}
.el-blog-posts .entry_meta a {
color: #777;
text-decoration: none;
}
.el-blog-posts .entry_meta a:hover{
color: #222;
}
.el-blog-posts .entry_meta-links a::after {
content: ", ";
}
.el-blog-posts .entry_meta-links a:last-child::after {
display: none;
}