fc837d961b
- 在 iconfont.css 中添加了新的朋友图标 (\e84d) -优化了瞬间功能的加载和显示逻辑 - 更新了 CDN链接为更快的镜像源 - 修复了一些小的前端问题，如百度统计和 Google Analytics 的加载顺序
10272 lines
181 KiB
CSS
10272 lines
181 KiB
CSS
/*头像效果-start*/
|
||
|
||
html {
|
||
font-family: sans-serif;
|
||
-ms-text-size-adjust: 100%;
|
||
-webkit-text-size-adjust: 100%
|
||
}
|
||
|
||
body {
|
||
margin: 0
|
||
}
|
||
|
||
a:before {
|
||
border-radius: 25px;
|
||
content: '';
|
||
position: absolute;
|
||
inset: 2px;
|
||
background: #ffffff00;
|
||
}
|
||
|
||
.ih-item.circle.effect {
|
||
margin: 0 auto;
|
||
-webkit-perspective: 900px;
|
||
-moz-perspective: 900px;
|
||
perspective: 900px;
|
||
}
|
||
|
||
.ih-item.circle.effect .img {
|
||
z-index: 11;
|
||
-webkit-transition: all 0.5s ease-in-out;
|
||
-moz-transition: all 0.5s ease-in-out;
|
||
transition: all 0.5s ease-in-out;
|
||
}
|
||
|
||
.ih-item.circle.effect .info {
|
||
-webkit-transform-style: preserve-3d;
|
||
-moz-transform-style: preserve-3d;
|
||
-ms-transform-style: preserve-3d;
|
||
-o-transform-style: preserve-3d;
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
.ih-item.circle.effect .info .info-back {
|
||
opacity: 1;
|
||
border-radius: 50%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #333333;
|
||
}
|
||
|
||
.ih-item.circle.effect .info h2 {
|
||
color: #fff;
|
||
position: relative;
|
||
font-size: 18px;
|
||
margin: 0 auto;
|
||
padding-top: 40px;
|
||
height: 35px;
|
||
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.ih-item.circle.effect .info p {
|
||
color: #bbb;
|
||
padding: 0px 0px 0px 0px;
|
||
font-style: italic;
|
||
padding-left: 0px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.ih-item.circle.effect.bottom_to_top .img {
|
||
-webkit-transform-origin: 50% 0;
|
||
-moz-transform-origin: 50% 0;
|
||
-ms-transform-origin: 50% 0;
|
||
-o-transform-origin: 50% 0;
|
||
transform-origin: 50% 0;
|
||
}
|
||
|
||
.ih-item.circle.effect.bottom_to_top a:hover .img {
|
||
-webkit-transform: rotate3d(1, 0, 0, 180deg);
|
||
-moz-transform: rotate3d(1, 0, 0, 180deg);
|
||
-ms-transform: rotate3d(1, 0, 0, 180deg);
|
||
-o-transform: rotate3d(1, 0, 0, 180deg);
|
||
transform: rotate3d(1, 0, 0, 180deg);
|
||
}
|
||
|
||
.ih-item.circle.effect.top_to_bottom .img {
|
||
-webkit-transform-origin: 50% 100%;
|
||
-moz-transform-origin: 50% 100%;
|
||
-ms-transform-origin: 50% 100%;
|
||
-o-transform-origin: 50% 100%;
|
||
transform-origin: 50% 100%;
|
||
}
|
||
|
||
.ih-item.circle.effect.top_to_bottom a:hover .img {
|
||
-webkit-transform: rotate3d(1, 0, 0, -180deg);
|
||
-moz-transform: rotate3d(1, 0, 0, -180deg);
|
||
-ms-transform: rotate3d(1, 0, 0, -180deg);
|
||
-o-transform: rotate3d(1, 0, 0, -180deg);
|
||
transform: rotate3d(1, 0, 0, -180deg);
|
||
}
|
||
|
||
.ih-item.circle.effect.left_to_right .img {
|
||
-webkit-transform-origin: 100% 50%;
|
||
-moz-transform-origin: 100% 50%;
|
||
-ms-transform-origin: 100% 50%;
|
||
-o-transform-origin: 100% 50%;
|
||
transform-origin: 100% 50%;
|
||
}
|
||
|
||
.ih-item.circle.effect.left_to_right a:hover .img {
|
||
-webkit-transform: rotate3d(0, 1, 0, 180deg);
|
||
-moz-transform: rotate3d(0, 1, 0, 180deg);
|
||
-ms-transform: rotate3d(0, 1, 0, 180deg);
|
||
-o-transform: rotate3d(0, 1, 0, 180deg);
|
||
transform: rotate3d(0, 1, 0, 180deg);
|
||
}
|
||
|
||
.ih-item.circle.effect.right_to_left .img {
|
||
-webkit-transform-origin: 0% 50%;
|
||
-moz-transform-origin: 0% 50%;
|
||
-ms-transform-origin: 0% 50%;
|
||
-o-transform-origin: 0% 50%;
|
||
transform-origin: 0% 50%;
|
||
}
|
||
|
||
.ih-item.circle.effect.right_to_left a:hover .img {
|
||
-webkit-transform: rotate3d(0, 1, 0, -180deg);
|
||
-moz-transform: rotate3d(0, 1, 0, -180deg);
|
||
-ms-transform: rotate3d(0, 1, 0, -180deg);
|
||
-o-transform: rotate3d(0, 1, 0, -180deg);
|
||
transform: rotate3d(0, 1, 0, -180deg);
|
||
}
|
||
|
||
.ih-item a {
|
||
color: #333;
|
||
}
|
||
|
||
.ih-item a:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.ih-item img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.ih-item.circle {
|
||
position: relative;
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.ih-item.circle .img {
|
||
position: relative;
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.ih-item.circle .img:before {
|
||
position: absolute;
|
||
display: block;
|
||
content: '';
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
-webkit-transition: all 0.35s ease-in-out;
|
||
-moz-transition: all 0.35s ease-in-out;
|
||
transition: all 0.35s ease-in-out;
|
||
}
|
||
|
||
.ih-item.circle .img img {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.ih-item.circle .info {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
-webkit-backface-visibility: hidden;
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
@media all and (max-width: 780px) {
|
||
.ih-item.circle .img {
|
||
position: relative;
|
||
width: 100px;
|
||
height: 100px;
|
||
/*margin-top: 20px;*/
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.ih-item.circle {
|
||
position: relative;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.ih-item.circle .info .info-back h2 {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.panel-title {
|
||
margin-bottom: 0.1em !important;
|
||
font-size: 2em !important;
|
||
}
|
||
|
||
.panel-subtitle {
|
||
font-size: 1em !important;
|
||
}
|
||
}
|
||
|
||
/**************抖动效果******************/
|
||
.profilepic {
|
||
text-align: center;
|
||
display: block;
|
||
-webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0px 2px 20px 3px rgba(0, 0, 0, 0.25);
|
||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0px 2px 20px 3px rgba(0, 0, 0, 0.25);
|
||
border-radius: 300px;
|
||
width: 128px;
|
||
height: 128px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: #88acdb;
|
||
transition: all 0.2s ease-in;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: horizontal;
|
||
-webkit-box-pack: center;
|
||
-webkit-box-align: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.animated {
|
||
-webkit-animation-fill-mode: both;
|
||
-moz-animation-fill-mode: both;
|
||
-ms-animation-fill-mode: both;
|
||
-o-animation-fill-mode: both;
|
||
animation-fill-mode: both;
|
||
-webkit-animation-duration: 1s;
|
||
-moz-animation-duration: 1s;
|
||
-ms-animation-duration: 1s;
|
||
-o-animation-duration: 1s;
|
||
animation-duration: 1s;
|
||
}
|
||
|
||
.animated.hinge {
|
||
-webkit-animation-duration: 1s;
|
||
-moz-animation-duration: 1s;
|
||
-ms-animation-duration: 1s;
|
||
-o-animation-duration: 1s;
|
||
animation-duration: 1s;
|
||
}
|
||
|
||
@-webkit-keyframes flash {
|
||
|
||
0%,
|
||
50%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
|
||
25%,
|
||
75% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes flash {
|
||
|
||
0%,
|
||
50%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
|
||
25%,
|
||
75% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes flash {
|
||
|
||
0%,
|
||
50%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
|
||
25%,
|
||
75% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.flash {
|
||
-webkit-animation-name: flash;
|
||
-moz-animation-name: flash;
|
||
-o-animation-name: flash;
|
||
animation-name: flash;
|
||
}
|
||
|
||
@-webkit-keyframes shake {
|
||
|
||
0%,
|
||
100% {
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
-webkit-transform: translateX(-10px);
|
||
}
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
-webkit-transform: translateX(10px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes shake {
|
||
|
||
0%,
|
||
100% {
|
||
-moz-transform: translateX(0);
|
||
}
|
||
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
-moz-transform: translateX(-10px);
|
||
}
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
-moz-transform: translateX(10px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes shake {
|
||
|
||
0%,
|
||
100% {
|
||
-o-transform: translateX(0);
|
||
}
|
||
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
-o-transform: translateX(-10px);
|
||
}
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
-o-transform: translateX(10px);
|
||
}
|
||
}
|
||
|
||
.shake {
|
||
-webkit-animation-name: shake;
|
||
-moz-animation-name: shake;
|
||
-o-animation-name: shake;
|
||
animation-name: shake;
|
||
}
|
||
|
||
@-webkit-keyframes bounce {
|
||
|
||
0%,
|
||
20%,
|
||
50%,
|
||
80%,
|
||
100% {
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
|
||
40% {
|
||
-webkit-transform: translateY(-30px);
|
||
}
|
||
|
||
60% {
|
||
-webkit-transform: translateY(-15px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounce {
|
||
|
||
0%,
|
||
20%,
|
||
50%,
|
||
80%,
|
||
100% {
|
||
-moz-transform: translateY(0);
|
||
}
|
||
|
||
40% {
|
||
-moz-transform: translateY(-30px);
|
||
}
|
||
|
||
60% {
|
||
-moz-transform: translateY(-15px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounce {
|
||
|
||
0%,
|
||
20%,
|
||
50%,
|
||
80%,
|
||
100% {
|
||
-o-transform: translateY(0);
|
||
}
|
||
|
||
40% {
|
||
-o-transform: translateY(-30px);
|
||
}
|
||
|
||
60% {
|
||
-o-transform: translateY(-15px);
|
||
}
|
||
}
|
||
|
||
.bounce {
|
||
-webkit-animation-name: bounce;
|
||
-moz-animation-name: bounce;
|
||
-o-animation-name: bounce;
|
||
animation-name: bounce;
|
||
}
|
||
|
||
@-webkit-keyframes tada {
|
||
0% {
|
||
-webkit-transform: scale(1);
|
||
}
|
||
|
||
10%,
|
||
20% {
|
||
-webkit-transform: scale(0.9) rotate(-3deg);
|
||
}
|
||
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
-webkit-transform: scale(1.1) rotate(3deg);
|
||
}
|
||
|
||
40%,
|
||
60%,
|
||
80% {
|
||
-webkit-transform: scale(1.1) rotate(-3deg);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: scale(1) rotate(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes tada {
|
||
0% {
|
||
-moz-transform: scale(1);
|
||
}
|
||
|
||
10%,
|
||
20% {
|
||
-moz-transform: scale(0.9) rotate(-3deg);
|
||
}
|
||
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
-moz-transform: scale(1.1) rotate(3deg);
|
||
}
|
||
|
||
40%,
|
||
60%,
|
||
80% {
|
||
-moz-transform: scale(1.1) rotate(-3deg);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: scale(1) rotate(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes tada {
|
||
0% {
|
||
-o-transform: scale(1);
|
||
}
|
||
|
||
10%,
|
||
20% {
|
||
-o-transform: scale(0.9) rotate(-3deg);
|
||
}
|
||
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
-o-transform: scale(1.1) rotate(3deg);
|
||
}
|
||
|
||
40%,
|
||
60%,
|
||
80% {
|
||
-o-transform: scale(1.1) rotate(-3deg);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: scale(1) rotate(0);
|
||
}
|
||
}
|
||
|
||
.tada {
|
||
-webkit-animation-name: tada;
|
||
-moz-animation-name: tada;
|
||
-o-animation-name: tada;
|
||
animation-name: tada;
|
||
}
|
||
|
||
@-webkit-keyframes swing {
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80%,
|
||
100% {
|
||
-webkit-transform-origin: top center;
|
||
}
|
||
|
||
20% {
|
||
-webkit-transform: rotate(15deg);
|
||
}
|
||
|
||
40% {
|
||
-webkit-transform: rotate(-10deg);
|
||
}
|
||
|
||
60% {
|
||
-webkit-transform: rotate(5deg);
|
||
}
|
||
|
||
80% {
|
||
-webkit-transform: rotate(-5deg);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes swing {
|
||
20% {
|
||
-moz-transform: rotate(15deg);
|
||
}
|
||
|
||
40% {
|
||
-moz-transform: rotate(-10deg);
|
||
}
|
||
|
||
60% {
|
||
-moz-transform: rotate(5deg);
|
||
}
|
||
|
||
80% {
|
||
-moz-transform: rotate(-5deg);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes swing {
|
||
20% {
|
||
-o-transform: rotate(15deg);
|
||
}
|
||
|
||
40% {
|
||
-o-transform: rotate(-10deg);
|
||
}
|
||
|
||
60% {
|
||
-o-transform: rotate(5deg);
|
||
}
|
||
|
||
80% {
|
||
-o-transform: rotate(-5deg);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: rotate(0deg);
|
||
}
|
||
}
|
||
|
||
.swing {
|
||
-webkit-transform-origin: top center;
|
||
-moz-transform-origin: top center;
|
||
-o-transform-origin: top center;
|
||
transform-origin: top center;
|
||
-webkit-animation-name: swing;
|
||
-moz-animation-name: swing;
|
||
-o-animation-name: swing;
|
||
animation-name: swing;
|
||
}
|
||
|
||
@-webkit-keyframes wobble {
|
||
0% {
|
||
-webkit-transform: translateX(0%);
|
||
}
|
||
|
||
15% {
|
||
-webkit-transform: translateX(-25%) rotate(-5deg);
|
||
}
|
||
|
||
30% {
|
||
-webkit-transform: translateX(20%) rotate(3deg);
|
||
}
|
||
|
||
45% {
|
||
-webkit-transform: translateX(-15%) rotate(-3deg);
|
||
}
|
||
|
||
60% {
|
||
-webkit-transform: translateX(10%) rotate(2deg);
|
||
}
|
||
|
||
75% {
|
||
-webkit-transform: translateX(-5%) rotate(-1deg);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: translateX(0%);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes wobble {
|
||
0% {
|
||
-moz-transform: translateX(0%);
|
||
}
|
||
|
||
15% {
|
||
-moz-transform: translateX(-25%) rotate(-5deg);
|
||
}
|
||
|
||
30% {
|
||
-moz-transform: translateX(20%) rotate(3deg);
|
||
}
|
||
|
||
45% {
|
||
-moz-transform: translateX(-15%) rotate(-3deg);
|
||
}
|
||
|
||
60% {
|
||
-moz-transform: translateX(10%) rotate(2deg);
|
||
}
|
||
|
||
75% {
|
||
-moz-transform: translateX(-5%) rotate(-1deg);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: translateX(0%);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes wobble {
|
||
0% {
|
||
-o-transform: translateX(0%);
|
||
}
|
||
|
||
15% {
|
||
-o-transform: translateX(-25%) rotate(-5deg);
|
||
}
|
||
|
||
30% {
|
||
-o-transform: translateX(20%) rotate(3deg);
|
||
}
|
||
|
||
45% {
|
||
-o-transform: translateX(-15%) rotate(-3deg);
|
||
}
|
||
|
||
60% {
|
||
-o-transform: translateX(10%) rotate(2deg);
|
||
}
|
||
|
||
75% {
|
||
-o-transform: translateX(-5%) rotate(-1deg);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: translateX(0%);
|
||
}
|
||
}
|
||
|
||
.wobble {
|
||
-webkit-animation-name: wobble;
|
||
-moz-animation-name: wobble;
|
||
-o-animation-name: wobble;
|
||
animation-name: wobble;
|
||
}
|
||
|
||
@-webkit-keyframes pulse {
|
||
0% {
|
||
-webkit-transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
-webkit-transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes pulse {
|
||
0% {
|
||
-moz-transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
-moz-transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes pulse {
|
||
0% {
|
||
-o-transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
-o-transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.pulse {
|
||
-webkit-animation-name: pulse;
|
||
-moz-animation-name: pulse;
|
||
-o-animation-name: pulse;
|
||
animation-name: pulse;
|
||
}
|
||
|
||
@-webkit-keyframes flip {
|
||
0% {
|
||
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
||
-webkit-animation-timing-function: ease-out;
|
||
}
|
||
|
||
40% {
|
||
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
||
-webkit-animation-timing-function: ease-out;
|
||
}
|
||
|
||
50% {
|
||
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
||
-webkit-animation-timing-function: ease-in;
|
||
}
|
||
|
||
80% {
|
||
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
||
-webkit-animation-timing-function: ease-in;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
||
-webkit-animation-timing-function: ease-in;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes flip {
|
||
0% {
|
||
-moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
||
-moz-animation-timing-function: ease-out;
|
||
}
|
||
|
||
40% {
|
||
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
||
-moz-animation-timing-function: ease-out;
|
||
}
|
||
|
||
50% {
|
||
-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
||
-moz-animation-timing-function: ease-in;
|
||
}
|
||
|
||
80% {
|
||
-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
||
-moz-animation-timing-function: ease-in;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
||
-moz-animation-timing-function: ease-in;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes flip {
|
||
0% {
|
||
-o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
||
-o-animation-timing-function: ease-out;
|
||
}
|
||
|
||
40% {
|
||
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
||
-o-animation-timing-function: ease-out;
|
||
}
|
||
|
||
50% {
|
||
-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
||
-o-animation-timing-function: ease-in;
|
||
}
|
||
|
||
80% {
|
||
-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
||
-o-animation-timing-function: ease-in;
|
||
}
|
||
|
||
100% {
|
||
-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
||
-o-animation-timing-function: ease-in;
|
||
}
|
||
}
|
||
|
||
.animated.flip {
|
||
-webkit-backface-visibility: visible !important;
|
||
-webkit-animation-name: flip;
|
||
-moz-backface-visibility: visible !important;
|
||
-moz-animation-name: flip;
|
||
-o-backface-visibility: visible !important;
|
||
-o-animation-name: flip;
|
||
backface-visibility: visible !important;
|
||
animation-name: flip;
|
||
}
|
||
|
||
@-webkit-keyframes flipInX {
|
||
0% {
|
||
-webkit-transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
-webkit-transform: perspective(400px) rotateX(-10deg);
|
||
}
|
||
|
||
70% {
|
||
-webkit-transform: perspective(400px) rotateX(10deg);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes flipInX {
|
||
0% {
|
||
-moz-transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
-moz-transform: perspective(400px) rotateX(-10deg);
|
||
}
|
||
|
||
70% {
|
||
-moz-transform: perspective(400px) rotateX(10deg);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes flipInX {
|
||
0% {
|
||
-o-transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
-o-transform: perspective(400px) rotateX(-10deg);
|
||
}
|
||
|
||
70% {
|
||
-o-transform: perspective(400px) rotateX(10deg);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.flipInX {
|
||
-webkit-backface-visibility: visible !important;
|
||
-webkit-animation-name: flipInX;
|
||
-moz-backface-visibility: visible !important;
|
||
-moz-animation-name: flipInX;
|
||
-o-backface-visibility: visible !important;
|
||
-o-animation-name: flipInX;
|
||
backface-visibility: visible !important;
|
||
animation-name: flipInX;
|
||
}
|
||
|
||
@-webkit-keyframes flipOutX {
|
||
0% {
|
||
-webkit-transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes flipOutX {
|
||
0% {
|
||
-moz-transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes flipOutX {
|
||
0% {
|
||
-o-transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-o-transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.flipOutX {
|
||
-webkit-animation-name: flipOutX;
|
||
-webkit-backface-visibility: visible !important;
|
||
-moz-animation-name: flipOutX;
|
||
-moz-backface-visibility: visible !important;
|
||
-o-animation-name: flipOutX;
|
||
-o-backface-visibility: visible !important;
|
||
animation-name: flipOutX;
|
||
backface-visibility: visible !important;
|
||
}
|
||
|
||
@-webkit-keyframes flipInY {
|
||
0% {
|
||
-webkit-transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
-webkit-transform: perspective(400px) rotateY(-10deg);
|
||
}
|
||
|
||
70% {
|
||
-webkit-transform: perspective(400px) rotateY(10deg);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes flipInY {
|
||
0% {
|
||
-moz-transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
-moz-transform: perspective(400px) rotateY(-10deg);
|
||
}
|
||
|
||
70% {
|
||
-moz-transform: perspective(400px) rotateY(10deg);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes flipInY {
|
||
0% {
|
||
-o-transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
-o-transform: perspective(400px) rotateY(-10deg);
|
||
}
|
||
|
||
70% {
|
||
-o-transform: perspective(400px) rotateY(10deg);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.flipInY {
|
||
-webkit-backface-visibility: visible !important;
|
||
-webkit-animation-name: flipInY;
|
||
-moz-backface-visibility: visible !important;
|
||
-moz-animation-name: flipInY;
|
||
-o-backface-visibility: visible !important;
|
||
-o-animation-name: flipInY;
|
||
backface-visibility: visible !important;
|
||
animation-name: flipInY;
|
||
}
|
||
|
||
@-webkit-keyframes flipOutY {
|
||
0% {
|
||
-webkit-transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes flipOutY {
|
||
0% {
|
||
-moz-transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes flipOutY {
|
||
0% {
|
||
-o-transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-o-transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.flipOutY {
|
||
-webkit-backface-visibility: visible !important;
|
||
-webkit-animation-name: flipOutY;
|
||
-moz-backface-visibility: visible !important;
|
||
-moz-animation-name: flipOutY;
|
||
-o-backface-visibility: visible !important;
|
||
-o-animation-name: flipOutY;
|
||
backface-visibility: visible !important;
|
||
animation-name: flipOutY;
|
||
}
|
||
|
||
@-webkit-keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.fadeIn {
|
||
-webkit-animation-name: fadeIn;
|
||
-moz-animation-name: fadeIn;
|
||
-o-animation-name: fadeIn;
|
||
animation-name: fadeIn;
|
||
}
|
||
|
||
@-webkit-keyframes fadeInUp {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInUp {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-moz-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInUp {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-o-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.fadeInUp {
|
||
-webkit-animation-name: fadeInUp;
|
||
-moz-animation-name: fadeInUp;
|
||
-o-animation-name: fadeInUp;
|
||
animation-name: fadeInUp;
|
||
}
|
||
|
||
@-webkit-keyframes fadeInDown {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInDown {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-moz-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInDown {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-o-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.fadeInDown {
|
||
-webkit-animation-name: fadeInDown;
|
||
-moz-animation-name: fadeInDown;
|
||
-o-animation-name: fadeInDown;
|
||
animation-name: fadeInDown;
|
||
}
|
||
|
||
@-webkit-keyframes fadeInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-o-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.fadeInLeft {
|
||
-webkit-animation-name: fadeInLeft;
|
||
-moz-animation-name: fadeInLeft;
|
||
-o-animation-name: fadeInLeft;
|
||
animation-name: fadeInLeft;
|
||
}
|
||
|
||
@-webkit-keyframes fadeInRight {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInRight {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInRight {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-o-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.fadeInRight {
|
||
-webkit-animation-name: fadeInRight;
|
||
-moz-animation-name: fadeInRight;
|
||
-o-animation-name: fadeInRight;
|
||
animation-name: fadeInRight;
|
||
}
|
||
|
||
@-webkit-keyframes fadeInUpBig {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInUpBig {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-moz-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInUpBig {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateY(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-o-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.fadeInUpBig {
|
||
-webkit-animation-name: fadeInUpBig;
|
||
-moz-animation-name: fadeInUpBig;
|
||
-o-animation-name: fadeInUpBig;
|
||
animation-name: fadeInUpBig;
|
||
}
|
||
|
||
@-webkit-keyframes fadeInDownBig {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInDownBig {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-moz-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInDownBig {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-o-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.fadeInDownBig {
|
||
-webkit-animation-name: fadeInDownBig;
|
||
-moz-animation-name: fadeInDownBig;
|
||
-o-animation-name: fadeInDownBig;
|
||
animation-name: fadeInDownBig;
|
||
}
|
||
|
||
@-webkit-keyframes fadeInLeftBig {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInLeftBig {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInLeftBig {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-o-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.fadeInLeftBig {
|
||
-webkit-animation-name: fadeInLeftBig;
|
||
-moz-animation-name: fadeInLeftBig;
|
||
-o-animation-name: fadeInLeftBig;
|
||
animation-name: fadeInLeftBig;
|
||
}
|
||
|
||
@-webkit-keyframes fadeInRightBig {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInRightBig {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInRightBig {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-o-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.fadeInRightBig {
|
||
-webkit-animation-name: fadeInRightBig;
|
||
-moz-animation-name: fadeInRightBig;
|
||
-o-animation-name: fadeInRightBig;
|
||
animation-name: fadeInRightBig;
|
||
}
|
||
|
||
@-webkit-keyframes fadeOut {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOut {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOut {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.fadeOut {
|
||
-webkit-animation-name: fadeOut;
|
||
-moz-animation-name: fadeOut;
|
||
-o-animation-name: fadeOut;
|
||
animation-name: fadeOut;
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutUp {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(-20px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutUp {
|
||
0% {
|
||
opacity: 1;
|
||
-moz-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(-20px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutUp {
|
||
0% {
|
||
opacity: 1;
|
||
-o-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateY(-20px);
|
||
}
|
||
}
|
||
|
||
.fadeOutUp {
|
||
-webkit-animation-name: fadeOutUp;
|
||
-moz-animation-name: fadeOutUp;
|
||
-o-animation-name: fadeOutUp;
|
||
animation-name: fadeOutUp;
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutDown {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(20px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutDown {
|
||
0% {
|
||
opacity: 1;
|
||
-moz-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(20px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutDown {
|
||
0% {
|
||
opacity: 1;
|
||
-o-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateY(20px);
|
||
}
|
||
}
|
||
|
||
.fadeOutDown {
|
||
-webkit-animation-name: fadeOutDown;
|
||
-moz-animation-name: fadeOutDown;
|
||
-o-animation-name: fadeOutDown;
|
||
animation-name: fadeOutDown;
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutLeft {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(-20px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutLeft {
|
||
0% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(-20px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutLeft {
|
||
0% {
|
||
opacity: 1;
|
||
-o-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateX(-20px);
|
||
}
|
||
}
|
||
|
||
.fadeOutLeft {
|
||
-webkit-animation-name: fadeOutLeft;
|
||
-moz-animation-name: fadeOutLeft;
|
||
-o-animation-name: fadeOutLeft;
|
||
animation-name: fadeOutLeft;
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutRight {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(20px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutRight {
|
||
0% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(20px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutRight {
|
||
0% {
|
||
opacity: 1;
|
||
-o-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateX(20px);
|
||
}
|
||
}
|
||
|
||
.fadeOutRight {
|
||
-webkit-animation-name: fadeOutRight;
|
||
-moz-animation-name: fadeOutRight;
|
||
-o-animation-name: fadeOutRight;
|
||
animation-name: fadeOutRight;
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutUpBig {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutUpBig {
|
||
0% {
|
||
opacity: 1;
|
||
-moz-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutUpBig {
|
||
0% {
|
||
opacity: 1;
|
||
-o-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
.fadeOutUpBig {
|
||
-webkit-animation-name: fadeOutUpBig;
|
||
-moz-animation-name: fadeOutUpBig;
|
||
-o-animation-name: fadeOutUpBig;
|
||
animation-name: fadeOutUpBig;
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutDownBig {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutDownBig {
|
||
0% {
|
||
opacity: 1;
|
||
-moz-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutDownBig {
|
||
0% {
|
||
opacity: 1;
|
||
-o-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
.fadeOutDownBig {
|
||
-webkit-animation-name: fadeOutDownBig;
|
||
-moz-animation-name: fadeOutDownBig;
|
||
-o-animation-name: fadeOutDownBig;
|
||
animation-name: fadeOutDownBig;
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutLeftBig {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutLeftBig {
|
||
0% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutLeftBig {
|
||
0% {
|
||
opacity: 1;
|
||
-o-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
.fadeOutLeftBig {
|
||
-webkit-animation-name: fadeOutLeftBig;
|
||
-moz-animation-name: fadeOutLeftBig;
|
||
-o-animation-name: fadeOutLeftBig;
|
||
animation-name: fadeOutLeftBig;
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutRightBig {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutRightBig {
|
||
0% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutRightBig {
|
||
0% {
|
||
opacity: 1;
|
||
-o-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
.fadeOutRightBig {
|
||
-webkit-animation-name: fadeOutRightBig;
|
||
-moz-animation-name: fadeOutRightBig;
|
||
-o-animation-name: fadeOutRightBig;
|
||
animation-name: fadeOutRightBig;
|
||
}
|
||
|
||
@-webkit-keyframes slideInDown {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes slideInDown {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes slideInDown {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.slideInDown {
|
||
-webkit-animation-name: slideInDown;
|
||
-moz-animation-name: slideInDown;
|
||
-o-animation-name: slideInDown;
|
||
animation-name: slideInDown;
|
||
}
|
||
|
||
@-webkit-keyframes slideInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes slideInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes slideInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.slideInLeft {
|
||
-webkit-animation-name: slideInLeft;
|
||
-moz-animation-name: slideInLeft;
|
||
-o-animation-name: slideInLeft;
|
||
animation-name: slideInLeft;
|
||
}
|
||
|
||
@-webkit-keyframes slideInRight {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes slideInRight {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes slideInRight {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.slideInRight {
|
||
-webkit-animation-name: slideInRight;
|
||
-moz-animation-name: slideInRight;
|
||
-o-animation-name: slideInRight;
|
||
animation-name: slideInRight;
|
||
}
|
||
|
||
@-webkit-keyframes slideOutUp {
|
||
0% {
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes slideOutUp {
|
||
0% {
|
||
-moz-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes slideOutUp {
|
||
0% {
|
||
-o-transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
.slideOutUp {
|
||
-webkit-animation-name: slideOutUp;
|
||
-moz-animation-name: slideOutUp;
|
||
-o-animation-name: slideOutUp;
|
||
animation-name: slideOutUp;
|
||
}
|
||
|
||
@-webkit-keyframes slideOutLeft {
|
||
0% {
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes slideOutLeft {
|
||
0% {
|
||
-moz-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes slideOutLeft {
|
||
0% {
|
||
-o-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
.slideOutLeft {
|
||
-webkit-animation-name: slideOutLeft;
|
||
-moz-animation-name: slideOutLeft;
|
||
-o-animation-name: slideOutLeft;
|
||
animation-name: slideOutLeft;
|
||
}
|
||
|
||
@-webkit-keyframes slideOutRight {
|
||
0% {
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes slideOutRight {
|
||
0% {
|
||
-moz-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes slideOutRight {
|
||
0% {
|
||
-o-transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
.slideOutRight {
|
||
-webkit-animation-name: slideOutRight;
|
||
-moz-animation-name: slideOutRight;
|
||
-o-animation-name: slideOutRight;
|
||
animation-name: slideOutRight;
|
||
}
|
||
|
||
@-webkit-keyframes bounceIn {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: scale(0.3);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
-webkit-transform: scale(1.05);
|
||
}
|
||
|
||
70% {
|
||
-webkit-transform: scale(0.9);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceIn {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: scale(0.3);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
-moz-transform: scale(1.05);
|
||
}
|
||
|
||
70% {
|
||
-moz-transform: scale(0.9);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceIn {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: scale(0.3);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
-o-transform: scale(1.05);
|
||
}
|
||
|
||
70% {
|
||
-o-transform: scale(0.9);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.bounceIn {
|
||
-webkit-animation-name: bounceIn;
|
||
-moz-animation-name: bounceIn;
|
||
-o-animation-name: bounceIn;
|
||
animation-name: bounceIn;
|
||
}
|
||
|
||
@-webkit-keyframes bounceInUp {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(-30px);
|
||
}
|
||
|
||
80% {
|
||
-webkit-transform: translateY(10px);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceInUp {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-moz-transform: translateY(-30px);
|
||
}
|
||
|
||
80% {
|
||
-moz-transform: translateY(10px);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceInUp {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateY(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-o-transform: translateY(-30px);
|
||
}
|
||
|
||
80% {
|
||
-o-transform: translateY(10px);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.bounceInUp {
|
||
-webkit-animation-name: bounceInUp;
|
||
-moz-animation-name: bounceInUp;
|
||
-o-animation-name: bounceInUp;
|
||
animation-name: bounceInUp;
|
||
}
|
||
|
||
@-webkit-keyframes bounceInDown {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(30px);
|
||
}
|
||
|
||
80% {
|
||
-webkit-transform: translateY(-10px);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceInDown {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-moz-transform: translateY(30px);
|
||
}
|
||
|
||
80% {
|
||
-moz-transform: translateY(-10px);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceInDown {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateY(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-o-transform: translateY(30px);
|
||
}
|
||
|
||
80% {
|
||
-o-transform: translateY(-10px);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.bounceInDown {
|
||
-webkit-animation-name: bounceInDown;
|
||
-moz-animation-name: bounceInDown;
|
||
-o-animation-name: bounceInDown;
|
||
animation-name: bounceInDown;
|
||
}
|
||
|
||
@-webkit-keyframes bounceInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(30px);
|
||
}
|
||
|
||
80% {
|
||
-webkit-transform: translateX(-10px);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(30px);
|
||
}
|
||
|
||
80% {
|
||
-moz-transform: translateX(-10px);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateX(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-o-transform: translateX(30px);
|
||
}
|
||
|
||
80% {
|
||
-o-transform: translateX(-10px);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.bounceInLeft {
|
||
-webkit-animation-name: bounceInLeft;
|
||
-moz-animation-name: bounceInLeft;
|
||
-o-animation-name: bounceInLeft;
|
||
animation-name: bounceInLeft;
|
||
}
|
||
|
||
@-webkit-keyframes bounceInRight {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(-30px);
|
||
}
|
||
|
||
80% {
|
||
-webkit-transform: translateX(10px);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceInRight {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(-30px);
|
||
}
|
||
|
||
80% {
|
||
-moz-transform: translateX(10px);
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceInRight {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateX(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-o-transform: translateX(-30px);
|
||
}
|
||
|
||
80% {
|
||
-o-transform: translateX(10px);
|
||
}
|
||
|
||
100% {
|
||
-o-transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.bounceInRight {
|
||
-webkit-animation-name: bounceInRight;
|
||
-moz-animation-name: bounceInRight;
|
||
-o-animation-name: bounceInRight;
|
||
animation-name: bounceInRight;
|
||
}
|
||
|
||
@-webkit-keyframes bounceOut {
|
||
0% {
|
||
-webkit-transform: scale(1);
|
||
}
|
||
|
||
25% {
|
||
-webkit-transform: scale(0.95);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
-webkit-transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: scale(0.3);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceOut {
|
||
0% {
|
||
-moz-transform: scale(1);
|
||
}
|
||
|
||
25% {
|
||
-moz-transform: scale(0.95);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
-moz-transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: scale(0.3);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceOut {
|
||
0% {
|
||
-o-transform: scale(1);
|
||
}
|
||
|
||
25% {
|
||
-o-transform: scale(0.95);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
-o-transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: scale(0.3);
|
||
}
|
||
}
|
||
|
||
.bounceOut {
|
||
-webkit-animation-name: bounceOut;
|
||
-moz-animation-name: bounceOut;
|
||
-o-animation-name: bounceOut;
|
||
animation-name: bounceOut;
|
||
}
|
||
|
||
@-webkit-keyframes bounceOutUp {
|
||
0% {
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceOutUp {
|
||
0% {
|
||
-moz-transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
-moz-transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceOutUp {
|
||
0% {
|
||
-o-transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
-o-transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
.bounceOutUp {
|
||
-webkit-animation-name: bounceOutUp;
|
||
-moz-animation-name: bounceOutUp;
|
||
-o-animation-name: bounceOutUp;
|
||
animation-name: bounceOutUp;
|
||
}
|
||
|
||
@-webkit-keyframes bounceOutDown {
|
||
0% {
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceOutDown {
|
||
0% {
|
||
-moz-transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
-moz-transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceOutDown {
|
||
0% {
|
||
-o-transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
-o-transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
.bounceOutDown {
|
||
-webkit-animation-name: bounceOutDown;
|
||
-moz-animation-name: bounceOutDown;
|
||
-o-animation-name: bounceOutDown;
|
||
animation-name: bounceOutDown;
|
||
}
|
||
|
||
@-webkit-keyframes bounceOutLeft {
|
||
0% {
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceOutLeft {
|
||
0% {
|
||
-moz-transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceOutLeft {
|
||
0% {
|
||
-o-transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
-o-transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
.bounceOutLeft {
|
||
-webkit-animation-name: bounceOutLeft;
|
||
-moz-animation-name: bounceOutLeft;
|
||
-o-animation-name: bounceOutLeft;
|
||
animation-name: bounceOutLeft;
|
||
}
|
||
|
||
@-webkit-keyframes bounceOutRight {
|
||
0% {
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceOutRight {
|
||
0% {
|
||
-moz-transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceOutRight {
|
||
0% {
|
||
-o-transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
-o-transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
.bounceOutRight {
|
||
-webkit-animation-name: bounceOutRight;
|
||
-moz-animation-name: bounceOutRight;
|
||
-o-animation-name: bounceOutRight;
|
||
animation-name: bounceOutRight;
|
||
}
|
||
|
||
@-webkit-keyframes rotateIn {
|
||
0% {
|
||
-webkit-transform-origin: center center;
|
||
-webkit-transform: rotate(-200deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: center center;
|
||
-webkit-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateIn {
|
||
0% {
|
||
-moz-transform-origin: center center;
|
||
-moz-transform: rotate(-200deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform-origin: center center;
|
||
-moz-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateIn {
|
||
0% {
|
||
-o-transform-origin: center center;
|
||
-o-transform: rotate(-200deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-o-transform-origin: center center;
|
||
-o-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.rotateIn {
|
||
-webkit-animation-name: rotateIn;
|
||
-moz-animation-name: rotateIn;
|
||
-o-animation-name: rotateIn;
|
||
animation-name: rotateIn;
|
||
}
|
||
|
||
@-webkit-keyframes rotateInUpLeft {
|
||
0% {
|
||
-webkit-transform-origin: left bottom;
|
||
-webkit-transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: left bottom;
|
||
-webkit-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateInUpLeft {
|
||
0% {
|
||
-moz-transform-origin: left bottom;
|
||
-moz-transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform-origin: left bottom;
|
||
-moz-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateInUpLeft {
|
||
0% {
|
||
-o-transform-origin: left bottom;
|
||
-o-transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-o-transform-origin: left bottom;
|
||
-o-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.rotateInUpLeft {
|
||
-webkit-animation-name: rotateInUpLeft;
|
||
-moz-animation-name: rotateInUpLeft;
|
||
-o-animation-name: rotateInUpLeft;
|
||
animation-name: rotateInUpLeft;
|
||
}
|
||
|
||
@-webkit-keyframes rotateInDownLeft {
|
||
0% {
|
||
-webkit-transform-origin: left bottom;
|
||
-webkit-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: left bottom;
|
||
-webkit-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateInDownLeft {
|
||
0% {
|
||
-moz-transform-origin: left bottom;
|
||
-moz-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform-origin: left bottom;
|
||
-moz-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateInDownLeft {
|
||
0% {
|
||
-o-transform-origin: left bottom;
|
||
-o-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-o-transform-origin: left bottom;
|
||
-o-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.rotateInDownLeft {
|
||
-webkit-animation-name: rotateInDownLeft;
|
||
-moz-animation-name: rotateInDownLeft;
|
||
-o-animation-name: rotateInDownLeft;
|
||
animation-name: rotateInDownLeft;
|
||
}
|
||
|
||
@-webkit-keyframes rotateInUpRight {
|
||
0% {
|
||
-webkit-transform-origin: right bottom;
|
||
-webkit-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: right bottom;
|
||
-webkit-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateInUpRight {
|
||
0% {
|
||
-moz-transform-origin: right bottom;
|
||
-moz-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform-origin: right bottom;
|
||
-moz-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateInUpRight {
|
||
0% {
|
||
-o-transform-origin: right bottom;
|
||
-o-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-o-transform-origin: right bottom;
|
||
-o-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.rotateInUpRight {
|
||
-webkit-animation-name: rotateInUpRight;
|
||
-moz-animation-name: rotateInUpRight;
|
||
-o-animation-name: rotateInUpRight;
|
||
animation-name: rotateInUpRight;
|
||
}
|
||
|
||
@-webkit-keyframes rotateInDownRight {
|
||
0% {
|
||
-webkit-transform-origin: right bottom;
|
||
-webkit-transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: right bottom;
|
||
-webkit-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateInDownRight {
|
||
0% {
|
||
-moz-transform-origin: right bottom;
|
||
-moz-transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform-origin: right bottom;
|
||
-moz-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateInDownRight {
|
||
0% {
|
||
-o-transform-origin: right bottom;
|
||
-o-transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-o-transform-origin: right bottom;
|
||
-o-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.rotateInDownRight {
|
||
-webkit-animation-name: rotateInDownRight;
|
||
-moz-animation-name: rotateInDownRight;
|
||
-o-animation-name: rotateInDownRight;
|
||
animation-name: rotateInDownRight;
|
||
}
|
||
|
||
@-webkit-keyframes rotateOut {
|
||
0% {
|
||
-webkit-transform-origin: center center;
|
||
-webkit-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: center center;
|
||
-webkit-transform: rotate(200deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateOut {
|
||
0% {
|
||
-moz-transform-origin: center center;
|
||
-moz-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform-origin: center center;
|
||
-moz-transform: rotate(200deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateOut {
|
||
0% {
|
||
-o-transform-origin: center center;
|
||
-o-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-o-transform-origin: center center;
|
||
-o-transform: rotate(200deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.rotateOut {
|
||
-webkit-animation-name: rotateOut;
|
||
-moz-animation-name: rotateOut;
|
||
-o-animation-name: rotateOut;
|
||
animation-name: rotateOut;
|
||
}
|
||
|
||
@-webkit-keyframes rotateOutUpLeft {
|
||
0% {
|
||
-webkit-transform-origin: left bottom;
|
||
-webkit-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: left bottom;
|
||
-webkit-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateOutUpLeft {
|
||
0% {
|
||
-moz-transform-origin: left bottom;
|
||
-moz-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform-origin: left bottom;
|
||
-moz-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateOutUpLeft {
|
||
0% {
|
||
-o-transform-origin: left bottom;
|
||
-o-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-o-transform-origin: left bottom;
|
||
-o-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.rotateOutUpLeft {
|
||
-webkit-animation-name: rotateOutUpLeft;
|
||
-moz-animation-name: rotateOutUpLeft;
|
||
-o-animation-name: rotateOutUpLeft;
|
||
animation-name: rotateOutUpLeft;
|
||
}
|
||
|
||
@-webkit-keyframes rotateOutDownLeft {
|
||
0% {
|
||
-webkit-transform-origin: left bottom;
|
||
-webkit-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: left bottom;
|
||
-webkit-transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateOutDownLeft {
|
||
0% {
|
||
-moz-transform-origin: left bottom;
|
||
-moz-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform-origin: left bottom;
|
||
-moz-transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateOutDownLeft {
|
||
0% {
|
||
-o-transform-origin: left bottom;
|
||
-o-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-o-transform-origin: left bottom;
|
||
-o-transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.rotateOutDownLeft {
|
||
-webkit-animation-name: rotateOutDownLeft;
|
||
-moz-animation-name: rotateOutDownLeft;
|
||
-o-animation-name: rotateOutDownLeft;
|
||
animation-name: rotateOutDownLeft;
|
||
}
|
||
|
||
@-webkit-keyframes rotateOutUpRight {
|
||
0% {
|
||
-webkit-transform-origin: right bottom;
|
||
-webkit-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: right bottom;
|
||
-webkit-transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateOutUpRight {
|
||
0% {
|
||
-moz-transform-origin: right bottom;
|
||
-moz-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform-origin: right bottom;
|
||
-moz-transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateOutUpRight {
|
||
0% {
|
||
-o-transform-origin: right bottom;
|
||
-o-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-o-transform-origin: right bottom;
|
||
-o-transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.rotateOutUpRight {
|
||
-webkit-animation-name: rotateOutUpRight;
|
||
-moz-animation-name: rotateOutUpRight;
|
||
-o-animation-name: rotateOutUpRight;
|
||
animation-name: rotateOutUpRight;
|
||
}
|
||
|
||
@-webkit-keyframes rotateOutDownRight {
|
||
0% {
|
||
-webkit-transform-origin: right bottom;
|
||
-webkit-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: right bottom;
|
||
-webkit-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateOutDownRight {
|
||
0% {
|
||
-moz-transform-origin: right bottom;
|
||
-moz-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform-origin: right bottom;
|
||
-moz-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateOutDownRight {
|
||
0% {
|
||
-o-transform-origin: right bottom;
|
||
-o-transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-o-transform-origin: right bottom;
|
||
-o-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.rotateOutDownRight {
|
||
-webkit-animation-name: rotateOutDownRight;
|
||
-moz-animation-name: rotateOutDownRight;
|
||
-o-animation-name: rotateOutDownRight;
|
||
animation-name: rotateOutDownRight;
|
||
}
|
||
|
||
@-webkit-keyframes lightSpeedIn {
|
||
0% {
|
||
-webkit-transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
60% {
|
||
-webkit-transform: translateX(-20%) skewX(30deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
80% {
|
||
-webkit-transform: translateX(0%) skewX(-15deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes lightSpeedIn {
|
||
0% {
|
||
-moz-transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
60% {
|
||
-moz-transform: translateX(-20%) skewX(30deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
80% {
|
||
-moz-transform: translateX(0%) skewX(-15deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes lightSpeedIn {
|
||
0% {
|
||
-o-transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
60% {
|
||
-o-transform: translateX(-20%) skewX(30deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
80% {
|
||
-o-transform: translateX(0%) skewX(-15deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-o-transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.lightSpeedIn {
|
||
-webkit-animation-name: lightSpeedIn;
|
||
-moz-animation-name: lightSpeedIn;
|
||
-o-animation-name: lightSpeedIn;
|
||
animation-name: lightSpeedIn;
|
||
-webkit-animation-timing-function: ease-out;
|
||
-moz-animation-timing-function: ease-out;
|
||
-o-animation-timing-function: ease-out;
|
||
animation-timing-function: ease-out;
|
||
}
|
||
|
||
@-webkit-keyframes lightSpeedOut {
|
||
0% {
|
||
-webkit-transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes lightSpeedOut {
|
||
0% {
|
||
-moz-transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes lightSpeedOut {
|
||
0% {
|
||
-o-transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-o-transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.lightSpeedOut {
|
||
-webkit-animation-name: lightSpeedOut;
|
||
-moz-animation-name: lightSpeedOut;
|
||
-o-animation-name: lightSpeedOut;
|
||
animation-name: lightSpeedOut;
|
||
-webkit-animation-timing-function: ease-in;
|
||
-moz-animation-timing-function: ease-in;
|
||
-o-animation-timing-function: ease-in;
|
||
animation-timing-function: ease-in;
|
||
}
|
||
|
||
@-webkit-keyframes hinge {
|
||
0% {
|
||
-webkit-transform: rotate(0);
|
||
-webkit-transform-origin: top left;
|
||
-webkit-animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
20%,
|
||
60% {
|
||
-webkit-transform: rotate(80deg);
|
||
-webkit-transform-origin: top left;
|
||
-webkit-animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
40% {
|
||
-webkit-transform: rotate(60deg);
|
||
-webkit-transform-origin: top left;
|
||
-webkit-animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
80% {
|
||
-webkit-transform: rotate(60deg) translateY(0);
|
||
opacity: 1;
|
||
-webkit-transform-origin: top left;
|
||
-webkit-animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: translateY(700px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes hinge {
|
||
0% {
|
||
-moz-transform: rotate(0);
|
||
-moz-transform-origin: top left;
|
||
-moz-animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
20%,
|
||
60% {
|
||
-moz-transform: rotate(80deg);
|
||
-moz-transform-origin: top left;
|
||
-moz-animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
40% {
|
||
-moz-transform: rotate(60deg);
|
||
-moz-transform-origin: top left;
|
||
-moz-animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
80% {
|
||
-moz-transform: rotate(60deg) translateY(0);
|
||
opacity: 1;
|
||
-moz-transform-origin: top left;
|
||
-moz-animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
100% {
|
||
-moz-transform: translateY(700px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes hinge {
|
||
0% {
|
||
-o-transform: rotate(0);
|
||
-o-transform-origin: top left;
|
||
-o-animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
20%,
|
||
60% {
|
||
-o-transform: rotate(80deg);
|
||
-o-transform-origin: top left;
|
||
-o-animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
40% {
|
||
-o-transform: rotate(60deg);
|
||
-o-transform-origin: top left;
|
||
-o-animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
80% {
|
||
-o-transform: rotate(60deg) translateY(0);
|
||
opacity: 1;
|
||
-o-transform-origin: top left;
|
||
-o-animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
100% {
|
||
-o-transform: translateY(700px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.hinge {
|
||
-webkit-animation-name: hinge;
|
||
-moz-animation-name: hinge;
|
||
-o-animation-name: hinge;
|
||
animation-name: hinge;
|
||
}
|
||
|
||
@-webkit-keyframes rollIn {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(-100%) rotate(-120deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(0px) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rollIn {
|
||
0% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(-100%) rotate(-120deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(0px) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rollIn {
|
||
0% {
|
||
opacity: 0;
|
||
-o-transform: translateX(-100%) rotate(-120deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-o-transform: translateX(0px) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
.rollIn {
|
||
-webkit-animation-name: rollIn;
|
||
-moz-animation-name: rollIn;
|
||
-o-animation-name: rollIn;
|
||
animation-name: rollIn;
|
||
}
|
||
|
||
@-webkit-keyframes rollOut {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(0px) rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform: translateX(100%) rotate(120deg);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rollOut {
|
||
0% {
|
||
opacity: 1;
|
||
-moz-transform: translateX(0px) rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-moz-transform: translateX(100%) rotate(120deg);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rollOut {
|
||
0% {
|
||
opacity: 1;
|
||
-o-transform: translateX(0px) rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-o-transform: translateX(100%) rotate(120deg);
|
||
}
|
||
}
|
||
|
||
.rollOut {
|
||
-webkit-animation-name: rollOut;
|
||
-moz-animation-name: rollOut;
|
||
-o-animation-name: rollOut;
|
||
animation-name: rollOut;
|
||
}
|
||
|
||
@-moz-keyframes flash {
|
||
|
||
0%,
|
||
50%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
|
||
25%,
|
||
75% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes flash {
|
||
|
||
0%,
|
||
50%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
|
||
25%,
|
||
75% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes flash {
|
||
|
||
0%,
|
||
50%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
|
||
25%,
|
||
75% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes flash {
|
||
|
||
0%,
|
||
50%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
|
||
25%,
|
||
75% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes shake {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
transform: translateX(-10px);
|
||
}
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
transform: translateX(10px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes shake {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
transform: translateX(-10px);
|
||
}
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
transform: translateX(10px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes shake {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
transform: translateX(-10px);
|
||
}
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
transform: translateX(10px);
|
||
}
|
||
}
|
||
|
||
@keyframes shake {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
transform: translateX(-10px);
|
||
}
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
transform: translateX(10px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounce {
|
||
|
||
0%,
|
||
20%,
|
||
50%,
|
||
80%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
40% {
|
||
transform: translateY(-30px);
|
||
}
|
||
|
||
60% {
|
||
transform: translateY(-15px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes bounce {
|
||
|
||
0%,
|
||
20%,
|
||
50%,
|
||
80%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
40% {
|
||
transform: translateY(-30px);
|
||
}
|
||
|
||
60% {
|
||
transform: translateY(-15px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounce {
|
||
|
||
0%,
|
||
20%,
|
||
50%,
|
||
80%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
40% {
|
||
transform: translateY(-30px);
|
||
}
|
||
|
||
60% {
|
||
transform: translateY(-15px);
|
||
}
|
||
}
|
||
|
||
@keyframes bounce {
|
||
|
||
0%,
|
||
20%,
|
||
50%,
|
||
80%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
40% {
|
||
transform: translateY(-30px);
|
||
}
|
||
|
||
60% {
|
||
transform: translateY(-15px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes tada {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
10%,
|
||
20% {
|
||
transform: scale(0.9) rotate(-3deg);
|
||
}
|
||
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
transform: scale(1.1) rotate(3deg);
|
||
}
|
||
|
||
40%,
|
||
60%,
|
||
80% {
|
||
transform: scale(1.1) rotate(-3deg);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1) rotate(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes tada {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
10%,
|
||
20% {
|
||
transform: scale(0.9) rotate(-3deg);
|
||
}
|
||
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
transform: scale(1.1) rotate(3deg);
|
||
}
|
||
|
||
40%,
|
||
60%,
|
||
80% {
|
||
transform: scale(1.1) rotate(-3deg);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1) rotate(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes tada {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
10%,
|
||
20% {
|
||
transform: scale(0.9) rotate(-3deg);
|
||
}
|
||
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
transform: scale(1.1) rotate(3deg);
|
||
}
|
||
|
||
40%,
|
||
60%,
|
||
80% {
|
||
transform: scale(1.1) rotate(-3deg);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1) rotate(0);
|
||
}
|
||
}
|
||
|
||
@keyframes tada {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
10%,
|
||
20% {
|
||
transform: scale(0.9) rotate(-3deg);
|
||
}
|
||
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
transform: scale(1.1) rotate(3deg);
|
||
}
|
||
|
||
40%,
|
||
60%,
|
||
80% {
|
||
transform: scale(1.1) rotate(-3deg);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1) rotate(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes swing {
|
||
20% {
|
||
transform: rotate(15deg);
|
||
}
|
||
|
||
40% {
|
||
transform: rotate(-10deg);
|
||
}
|
||
|
||
60% {
|
||
transform: rotate(5deg);
|
||
}
|
||
|
||
80% {
|
||
transform: rotate(-5deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes swing {
|
||
20% {
|
||
transform: rotate(15deg);
|
||
}
|
||
|
||
40% {
|
||
transform: rotate(-10deg);
|
||
}
|
||
|
||
60% {
|
||
transform: rotate(5deg);
|
||
}
|
||
|
||
80% {
|
||
transform: rotate(-5deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes swing {
|
||
20% {
|
||
transform: rotate(15deg);
|
||
}
|
||
|
||
40% {
|
||
transform: rotate(-10deg);
|
||
}
|
||
|
||
60% {
|
||
transform: rotate(5deg);
|
||
}
|
||
|
||
80% {
|
||
transform: rotate(-5deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@keyframes swing {
|
||
20% {
|
||
transform: rotate(15deg);
|
||
}
|
||
|
||
40% {
|
||
transform: rotate(-10deg);
|
||
}
|
||
|
||
60% {
|
||
transform: rotate(5deg);
|
||
}
|
||
|
||
80% {
|
||
transform: rotate(-5deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes wobble {
|
||
0% {
|
||
transform: translateX(0%);
|
||
}
|
||
|
||
15% {
|
||
transform: translateX(-25%) rotate(-5deg);
|
||
}
|
||
|
||
30% {
|
||
transform: translateX(20%) rotate(3deg);
|
||
}
|
||
|
||
45% {
|
||
transform: translateX(-15%) rotate(-3deg);
|
||
}
|
||
|
||
60% {
|
||
transform: translateX(10%) rotate(2deg);
|
||
}
|
||
|
||
75% {
|
||
transform: translateX(-5%) rotate(-1deg);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0%);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes wobble {
|
||
0% {
|
||
transform: translateX(0%);
|
||
}
|
||
|
||
15% {
|
||
transform: translateX(-25%) rotate(-5deg);
|
||
}
|
||
|
||
30% {
|
||
transform: translateX(20%) rotate(3deg);
|
||
}
|
||
|
||
45% {
|
||
transform: translateX(-15%) rotate(-3deg);
|
||
}
|
||
|
||
60% {
|
||
transform: translateX(10%) rotate(2deg);
|
||
}
|
||
|
||
75% {
|
||
transform: translateX(-5%) rotate(-1deg);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0%);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes wobble {
|
||
0% {
|
||
transform: translateX(0%);
|
||
}
|
||
|
||
15% {
|
||
transform: translateX(-25%) rotate(-5deg);
|
||
}
|
||
|
||
30% {
|
||
transform: translateX(20%) rotate(3deg);
|
||
}
|
||
|
||
45% {
|
||
transform: translateX(-15%) rotate(-3deg);
|
||
}
|
||
|
||
60% {
|
||
transform: translateX(10%) rotate(2deg);
|
||
}
|
||
|
||
75% {
|
||
transform: translateX(-5%) rotate(-1deg);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0%);
|
||
}
|
||
}
|
||
|
||
@keyframes wobble {
|
||
0% {
|
||
transform: translateX(0%);
|
||
}
|
||
|
||
15% {
|
||
transform: translateX(-25%) rotate(-5deg);
|
||
}
|
||
|
||
30% {
|
||
transform: translateX(20%) rotate(3deg);
|
||
}
|
||
|
||
45% {
|
||
transform: translateX(-15%) rotate(-3deg);
|
||
}
|
||
|
||
60% {
|
||
transform: translateX(10%) rotate(2deg);
|
||
}
|
||
|
||
75% {
|
||
transform: translateX(-5%) rotate(-1deg);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0%);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes pulse {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes pulse {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes pulse {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes flip {
|
||
0% {
|
||
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
||
animation-timing-function: ease-out;
|
||
}
|
||
|
||
40% {
|
||
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
||
animation-timing-function: ease-out;
|
||
}
|
||
|
||
50% {
|
||
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
||
animation-timing-function: ease-in;
|
||
}
|
||
|
||
80% {
|
||
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
||
animation-timing-function: ease-in;
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
||
animation-timing-function: ease-in;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes flip {
|
||
0% {
|
||
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
||
animation-timing-function: ease-out;
|
||
}
|
||
|
||
40% {
|
||
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
||
animation-timing-function: ease-out;
|
||
}
|
||
|
||
50% {
|
||
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
||
animation-timing-function: ease-in;
|
||
}
|
||
|
||
80% {
|
||
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
||
animation-timing-function: ease-in;
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
||
animation-timing-function: ease-in;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes flip {
|
||
0% {
|
||
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
||
animation-timing-function: ease-out;
|
||
}
|
||
|
||
40% {
|
||
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
||
animation-timing-function: ease-out;
|
||
}
|
||
|
||
50% {
|
||
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
||
animation-timing-function: ease-in;
|
||
}
|
||
|
||
80% {
|
||
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
||
animation-timing-function: ease-in;
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
||
animation-timing-function: ease-in;
|
||
}
|
||
}
|
||
|
||
@keyframes flip {
|
||
0% {
|
||
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
||
animation-timing-function: ease-out;
|
||
}
|
||
|
||
40% {
|
||
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
||
animation-timing-function: ease-out;
|
||
}
|
||
|
||
50% {
|
||
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
||
animation-timing-function: ease-in;
|
||
}
|
||
|
||
80% {
|
||
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
||
animation-timing-function: ease-in;
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
||
animation-timing-function: ease-in;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes flipInX {
|
||
0% {
|
||
transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
transform: perspective(400px) rotateX(-10deg);
|
||
}
|
||
|
||
70% {
|
||
transform: perspective(400px) rotateX(10deg);
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes flipInX {
|
||
0% {
|
||
transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
transform: perspective(400px) rotateX(-10deg);
|
||
}
|
||
|
||
70% {
|
||
transform: perspective(400px) rotateX(10deg);
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes flipInX {
|
||
0% {
|
||
transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
transform: perspective(400px) rotateX(-10deg);
|
||
}
|
||
|
||
70% {
|
||
transform: perspective(400px) rotateX(10deg);
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes flipInX {
|
||
0% {
|
||
transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
transform: perspective(400px) rotateX(-10deg);
|
||
}
|
||
|
||
70% {
|
||
transform: perspective(400px) rotateX(10deg);
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes flipOutX {
|
||
0% {
|
||
transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes flipOutX {
|
||
0% {
|
||
transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes flipOutX {
|
||
0% {
|
||
transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes flipOutX {
|
||
0% {
|
||
transform: perspective(400px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateX(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes flipInY {
|
||
0% {
|
||
transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
transform: perspective(400px) rotateY(-10deg);
|
||
}
|
||
|
||
70% {
|
||
transform: perspective(400px) rotateY(10deg);
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes flipInY {
|
||
0% {
|
||
transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
transform: perspective(400px) rotateY(-10deg);
|
||
}
|
||
|
||
70% {
|
||
transform: perspective(400px) rotateY(10deg);
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes flipInY {
|
||
0% {
|
||
transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
transform: perspective(400px) rotateY(-10deg);
|
||
}
|
||
|
||
70% {
|
||
transform: perspective(400px) rotateY(10deg);
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes flipInY {
|
||
0% {
|
||
transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
40% {
|
||
transform: perspective(400px) rotateY(-10deg);
|
||
}
|
||
|
||
70% {
|
||
transform: perspective(400px) rotateY(10deg);
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes flipOutY {
|
||
0% {
|
||
transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes flipOutY {
|
||
0% {
|
||
transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes flipOutY {
|
||
0% {
|
||
transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes flipOutY {
|
||
0% {
|
||
transform: perspective(400px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: perspective(400px) rotateY(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInUp {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeInUp {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInUp {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeInRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInUpBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeInUpBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInUpBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInUpBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInDownBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeInDownBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInDownBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInDownBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInLeftBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeInLeftBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInLeftBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInLeftBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeInRightBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeInRightBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeInRightBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInRightBig {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOut {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeOut {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOut {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes fadeOut {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutUp {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutUp {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutUp {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeOutUp {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutDown {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutDown {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutDown {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeOutDown {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutLeft {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutLeft {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutLeft {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeOutLeft {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutRight {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutRight {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutRight {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeOutRight {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutUpBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutUpBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutUpBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeOutUpBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutDownBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutDownBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutDownBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeOutDownBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutLeftBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutLeftBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutLeftBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeOutLeftBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes fadeOutRightBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeOutRightBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes fadeOutRightBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeOutRightBig {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes slideInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes slideInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes slideInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes slideInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes slideInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes slideInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes slideInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes slideInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes slideInRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes slideInRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes slideInRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes slideInRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes slideOutUp {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes slideOutUp {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes slideOutUp {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@keyframes slideOutUp {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes slideOutLeft {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes slideOutLeft {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes slideOutLeft {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@keyframes slideOutLeft {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes slideOutRight {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes slideOutRight {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes slideOutRight {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@keyframes slideOutRight {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: scale(0.3);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
70% {
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes bounceIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: scale(0.3);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
70% {
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: scale(0.3);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
70% {
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes bounceIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: scale(0.3);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
70% {
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceInUp {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateY(-30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes bounceInUp {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateY(-30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceInUp {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateY(-30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes bounceInUp {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateY(-30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateY(30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateY(-10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes bounceInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateY(30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateY(-10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateY(30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateY(-10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes bounceInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateY(30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateY(-10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateX(30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateX(-10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes bounceInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateX(30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateX(-10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateX(30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateX(-10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes bounceInLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateX(30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateX(-10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceInRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateX(-30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateX(10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes bounceInRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateX(-30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateX(10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceInRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateX(-30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateX(10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes bounceInRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translateX(-30px);
|
||
}
|
||
|
||
80% {
|
||
transform: translateX(10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceOut {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
25% {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: scale(0.3);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes bounceOut {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
25% {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: scale(0.3);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceOut {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
25% {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: scale(0.3);
|
||
}
|
||
}
|
||
|
||
@keyframes bounceOut {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
25% {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: scale(0.3);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceOutUp {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes bounceOutUp {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceOutUp {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@keyframes bounceOutUp {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceOutDown {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes bounceOutDown {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceOutDown {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
@keyframes bounceOutDown {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateY(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceOutLeft {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes bounceOutLeft {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceOutLeft {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@keyframes bounceOutLeft {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(-2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes bounceOutRight {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes bounceOutRight {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes bounceOutRight {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@keyframes bounceOutRight {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateX(-20px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(2000px);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateIn {
|
||
0% {
|
||
transform-origin: center center;
|
||
transform: rotate(-200deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: center center;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rotateIn {
|
||
0% {
|
||
transform-origin: center center;
|
||
transform: rotate(-200deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: center center;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateIn {
|
||
0% {
|
||
transform-origin: center center;
|
||
transform: rotate(-200deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: center center;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes rotateIn {
|
||
0% {
|
||
transform-origin: center center;
|
||
transform: rotate(-200deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: center center;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateInUpLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rotateInUpLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateInUpLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes rotateInUpLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateInDownLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rotateInDownLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateInDownLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes rotateInDownLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateInUpRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rotateInUpRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateInUpRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes rotateInUpRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateInDownRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rotateInDownRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateInDownRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes rotateInDownRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateOut {
|
||
0% {
|
||
transform-origin: center center;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: center center;
|
||
transform: rotate(200deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rotateOut {
|
||
0% {
|
||
transform-origin: center center;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: center center;
|
||
transform: rotate(200deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateOut {
|
||
0% {
|
||
transform-origin: center center;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: center center;
|
||
transform: rotate(200deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes rotateOut {
|
||
0% {
|
||
transform-origin: center center;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: center center;
|
||
transform: rotate(200deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateOutUpLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-transform-origin: left bottom;
|
||
-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rotateOutUpLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-transform-origin: left bottom;
|
||
-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateOutUpLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-transform-origin: left bottom;
|
||
-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes rotateOutUpLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
-transform-origin: left bottom;
|
||
-transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateOutDownLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rotateOutDownLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateOutDownLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes rotateOutDownLeft {
|
||
0% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: left bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateOutUpRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rotateOutUpRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateOutUpRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes rotateOutUpRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rotateOutDownRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rotateOutDownRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rotateOutDownRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes rotateOutDownRight {
|
||
0% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform-origin: right bottom;
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes lightSpeedIn {
|
||
0% {
|
||
transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
60% {
|
||
transform: translateX(-20%) skewX(30deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
80% {
|
||
transform: translateX(0%) skewX(-15deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes lightSpeedIn {
|
||
0% {
|
||
transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
60% {
|
||
transform: translateX(-20%) skewX(30deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
80% {
|
||
transform: translateX(0%) skewX(-15deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes lightSpeedIn {
|
||
0% {
|
||
transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
60% {
|
||
transform: translateX(-20%) skewX(30deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
80% {
|
||
transform: translateX(0%) skewX(-15deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes lightSpeedIn {
|
||
0% {
|
||
transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
60% {
|
||
transform: translateX(-20%) skewX(30deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
80% {
|
||
transform: translateX(0%) skewX(-15deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes lightSpeedOut {
|
||
0% {
|
||
transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes lightSpeedOut {
|
||
0% {
|
||
transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes lightSpeedOut {
|
||
0% {
|
||
transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes lightSpeedOut {
|
||
0% {
|
||
transform: translateX(0%) skewX(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(100%) skewX(-30deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes hinge {
|
||
0% {
|
||
transform: rotate(0);
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
20%,
|
||
60% {
|
||
transform: rotate(80deg);
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
40% {
|
||
transform: rotate(60deg);
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
80% {
|
||
transform: rotate(60deg) translateY(0);
|
||
opacity: 1;
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(700px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes hinge {
|
||
0% {
|
||
transform: rotate(0);
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
20%,
|
||
60% {
|
||
transform: rotate(80deg);
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
40% {
|
||
transform: rotate(60deg);
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
80% {
|
||
transform: rotate(60deg) translateY(0);
|
||
opacity: 1;
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(700px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes hinge {
|
||
0% {
|
||
transform: rotate(0);
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
20%,
|
||
60% {
|
||
transform: rotate(80deg);
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
40% {
|
||
transform: rotate(60deg);
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
80% {
|
||
transform: rotate(60deg) translateY(0);
|
||
opacity: 1;
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(700px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes hinge {
|
||
0% {
|
||
transform: rotate(0);
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
20%,
|
||
60% {
|
||
transform: rotate(80deg);
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
40% {
|
||
transform: rotate(60deg);
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
80% {
|
||
transform: rotate(60deg) translateY(0);
|
||
opacity: 1;
|
||
transform-origin: top left;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(700px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rollIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-100%) rotate(-120deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0px) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rollIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-100%) rotate(-120deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0px) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rollIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-100%) rotate(-120deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0px) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@keyframes rollIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-100%) rotate(-120deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0px) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes rollOut {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0px) rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(100%) rotate(120deg);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rollOut {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0px) rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(100%) rotate(120deg);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes rollOut {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0px) rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(100%) rotate(120deg);
|
||
}
|
||
}
|
||
|
||
@keyframes rollOut {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateX(0px) rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateX(100%) rotate(120deg);
|
||
}
|
||
}
|
||
|
||
.article-entry pre,
|
||
.article-entry .highlight {
|
||
background: #2d2d2d;
|
||
/*margin: 0 article-padding * -1*/
|
||
padding: 15px 20px;
|
||
border-style: solid;
|
||
border-color: #ddd;
|
||
border-width: 1px 0;
|
||
overflow: auto;
|
||
color: #ccc;
|
||
line-height: 22.400000000000002px;
|
||
}
|
||
|
||
.article-entry .highlight .gutter pre,
|
||
.article-entry .gist .gist-file .gist-data .line-numbers {
|
||
color: #666;
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.article-entry pre,
|
||
.article-entry code {
|
||
font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;
|
||
}
|
||
|
||
.article-entry code {
|
||
background: #eee;
|
||
text-shadow: 0 1px #fff;
|
||
padding: 0 0.3em;
|
||
}
|
||
|
||
.article-entry pre code {
|
||
background: none;
|
||
text-shadow: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.article-entry .highlight pre {
|
||
border: none;
|
||
margin: 10;
|
||
padding: 0;
|
||
}
|
||
|
||
.article-entry .highlight table {
|
||
margin: 0;
|
||
width: auto;
|
||
}
|
||
|
||
.article-entry .highlight td {
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.article-entry .highlight figcaption {
|
||
font-size: 0.85em;
|
||
color: #999;
|
||
line-height: 1em;
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
.article-entry .highlight figcaption a {
|
||
float: right;
|
||
}
|
||
|
||
.article-entry .highlight .gutter pre {
|
||
text-align: right;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.article-entry .highlight .line {
|
||
height: 22.400000000000002px;
|
||
}
|
||
|
||
.article-entry .gist {
|
||
margin: 0 -20px;
|
||
border-style: solid;
|
||
border-color: #ddd;
|
||
border-width: 1px 0;
|
||
background: #2d2d2d;
|
||
padding: 15px 20px 15px 0;
|
||
}
|
||
|
||
.article-entry .gist .gist-file {
|
||
border: none;
|
||
font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;
|
||
margin: 0;
|
||
}
|
||
|
||
.article-entry .gist .gist-file .gist-data {
|
||
background: none;
|
||
border: none;
|
||
}
|
||
|
||
.article-entry .gist .gist-file .gist-data .line-numbers {
|
||
background: none;
|
||
border: none;
|
||
padding: 0 20px 0 0;
|
||
}
|
||
|
||
.article-entry .gist .gist-file .gist-data .line-data {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.article-entry .gist .gist-file .highlight {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
}
|
||
|
||
.article-entry .gist .gist-file .gist-meta {
|
||
background: #2d2d2d;
|
||
color: #999;
|
||
font: 0.85em "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
text-shadow: 0 0;
|
||
padding: 0;
|
||
margin-top: 1em;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.article-entry .gist .gist-file .gist-meta a {
|
||
color: #258fb8;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.article-entry .gist .gist-file .gist-meta a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
pre .comment,
|
||
pre .title {
|
||
color: #999;
|
||
}
|
||
|
||
pre .variable,
|
||
pre .attribute,
|
||
pre .tag,
|
||
pre .regexp,
|
||
pre .ruby .constant,
|
||
pre .xml .tag .title,
|
||
pre .xml .pi,
|
||
pre .xml .doctype,
|
||
pre .html .doctype,
|
||
pre .css .id,
|
||
pre .css .class,
|
||
pre .css .pseudo {
|
||
color: #f2777a;
|
||
}
|
||
|
||
pre .number,
|
||
pre .preprocessor,
|
||
pre .built_in,
|
||
pre .literal,
|
||
pre .params,
|
||
pre .constant {
|
||
color: #f99157;
|
||
}
|
||
|
||
pre .class,
|
||
pre .ruby .class .title,
|
||
pre .css .rules .attribute {
|
||
color: #9c9;
|
||
}
|
||
|
||
pre .string,
|
||
pre .value,
|
||
pre .inheritance,
|
||
pre .header,
|
||
pre .ruby .symbol,
|
||
pre .xml .cdata {
|
||
color: #9c9;
|
||
}
|
||
|
||
pre .css .hexcolor {
|
||
color: #6cc;
|
||
}
|
||
|
||
pre .function,
|
||
pre .python .decorator,
|
||
pre .python .title,
|
||
pre .ruby .function .title,
|
||
pre .ruby .title .keyword,
|
||
pre .perl .sub,
|
||
pre .javascript .title,
|
||
pre .coffeescript .title {
|
||
color: #69c;
|
||
}
|
||
|
||
pre .keyword,
|
||
pre .javascript .function {
|
||
color: #c9c;
|
||
}
|
||
|
||
html,
|
||
body,
|
||
div,
|
||
span,
|
||
applet,
|
||
object,
|
||
iframe,
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6,
|
||
p,
|
||
blockquote,
|
||
pre,
|
||
a,
|
||
abbr,
|
||
acronym,
|
||
address,
|
||
big,
|
||
cite,
|
||
code,
|
||
del,
|
||
dfn,
|
||
em,
|
||
img,
|
||
ins,
|
||
kbd,
|
||
q,
|
||
s,
|
||
samp,
|
||
small,
|
||
strike,
|
||
strong,
|
||
sub,
|
||
sup,
|
||
tt,
|
||
var,
|
||
b,
|
||
u,
|
||
i,
|
||
center,
|
||
dl,
|
||
dt,
|
||
dd,
|
||
ol,
|
||
ul,
|
||
li,
|
||
fieldset,
|
||
form,
|
||
label,
|
||
legend,
|
||
table,
|
||
caption,
|
||
tbody,
|
||
tfoot,
|
||
thead,
|
||
tr,
|
||
th,
|
||
td,
|
||
article,
|
||
aside,
|
||
canvas,
|
||
details,
|
||
embed,
|
||
figure,
|
||
figcaption,
|
||
footer,
|
||
header,
|
||
hgroup,
|
||
menu,
|
||
nav,
|
||
output,
|
||
ruby,
|
||
section,
|
||
summary,
|
||
time,
|
||
mark,
|
||
audio,
|
||
video {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
font-size: 100%;
|
||
font: inherit;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
/* HTML5 display-role reset for older browsers */
|
||
article,
|
||
aside,
|
||
details,
|
||
figcaption,
|
||
figure,
|
||
footer,
|
||
header,
|
||
hgroup,
|
||
menu,
|
||
nav,
|
||
section {
|
||
display: block;
|
||
}
|
||
|
||
body {
|
||
line-height: 1;
|
||
}
|
||
|
||
ol,
|
||
ul {
|
||
list-style: none;
|
||
}
|
||
|
||
blockquote,
|
||
q {
|
||
quotes: none;
|
||
}
|
||
|
||
blockquote:before,
|
||
blockquote:after {
|
||
content: '';
|
||
content: none;
|
||
}
|
||
|
||
q:before,
|
||
q:after {
|
||
content: '';
|
||
content: none;
|
||
}
|
||
|
||
figure table {
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
width: 100%;
|
||
table-layout: fixed;
|
||
text-align: left;
|
||
border-width: 0px;
|
||
margin: auto;
|
||
}
|
||
|
||
figure th,
|
||
figure td {
|
||
padding: 0px;
|
||
}
|
||
|
||
body {
|
||
width: 100%;
|
||
*zoom: 1;
|
||
}
|
||
|
||
body:before,
|
||
body:after {
|
||
content: "";
|
||
display: table;
|
||
}
|
||
|
||
body:after {
|
||
clear: both;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
height: 100%;
|
||
}
|
||
|
||
html {
|
||
height: 100%;
|
||
max-height: 100%;
|
||
}
|
||
|
||
body {
|
||
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
||
font-size: 1em;
|
||
color: #666;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
::selection {
|
||
background: rgba(37, 104, 163, 0.2);
|
||
}
|
||
|
||
::-moz-selection {
|
||
background: rgba(37, 104, 163, 0.2);
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: white;
|
||
}
|
||
|
||
a:hover {
|
||
color: white;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5 {
|
||
margin-top: 1em;
|
||
margin-bottom: 0.5em;
|
||
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
||
font-weight: lighter;
|
||
color: #333;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
h1 {
|
||
margin-top: 0;
|
||
font-size: 2.5em;
|
||
line-height: 1.2em;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2em;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.6em;
|
||
}
|
||
|
||
h4 {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
h4 {
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
h5 {
|
||
font-size: 1em;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 1.3em;
|
||
line-height: 1.7em;
|
||
}
|
||
|
||
strong {
|
||
font-weight: bold;
|
||
}
|
||
|
||
em {
|
||
font-style: italic;
|
||
}
|
||
|
||
blockquote {
|
||
padding: 10px 20px;
|
||
margin: 0 0 20px;
|
||
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
||
font-weight: lighter;
|
||
font-size: 1em;
|
||
border-left: 3px solid #4e97d8;
|
||
}
|
||
|
||
blockquote p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
ol,
|
||
ul {
|
||
margin: 0 0 1.3em 2.5em;
|
||
}
|
||
|
||
ol li,
|
||
ul li {
|
||
margin: 0 0 0.2em 0;
|
||
line-height: 1.6em;
|
||
}
|
||
|
||
ol ol,
|
||
ol ul,
|
||
ul ol,
|
||
ul ul {
|
||
margin: 0.1em 0 0.2em 2em;
|
||
}
|
||
|
||
ol {
|
||
list-style-type: decimal;
|
||
}
|
||
|
||
ul {
|
||
list-style-type: disc;
|
||
}
|
||
|
||
code {
|
||
padding: 0.1em 0.4em;
|
||
background: #e8f2fb;
|
||
border: 1px solid #c9e1f6;
|
||
border-radius: 3px;
|
||
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
||
font-size: 0.9em;
|
||
vertical-align: bottom;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
pre {
|
||
margin-bottom: 1.3em;
|
||
padding: 1em 2.5%;
|
||
background: #e8f2fb;
|
||
border: 1px solid #c9e1f6;
|
||
border-radius: 3px;
|
||
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
||
font-size: 0.9em;
|
||
font-weight: normal;
|
||
line-height: 1.7em;
|
||
overflow: scroll;
|
||
}
|
||
|
||
pre code {
|
||
padding: 0;
|
||
background: none;
|
||
border: none;
|
||
word-wrap: normal;
|
||
}
|
||
|
||
table {
|
||
color: #333;
|
||
font-size: 0.9em;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
border-spacing: 0;
|
||
border: 2px solid #4e97d8;
|
||
width: 90%;
|
||
margin: 50px auto;
|
||
}
|
||
|
||
thead tr:first-child {
|
||
background-color: #4e97d8;
|
||
color: #f8f8f8;
|
||
border: none;
|
||
}
|
||
|
||
th {
|
||
font-weight: bold;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: 0 8px 0 8px;
|
||
}
|
||
|
||
thead tr:last-child th {
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
|
||
tbody tr:last-child td {
|
||
border: none;
|
||
}
|
||
|
||
tbody td {
|
||
border-bottom: 1px solid #ddd;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.date,
|
||
.time,
|
||
.author,
|
||
.tags {
|
||
font-size: 0.8em;
|
||
color: #c7c7c7;
|
||
}
|
||
|
||
.date a,
|
||
.time a,
|
||
.author a,
|
||
.tags a {
|
||
color: #666;
|
||
}
|
||
|
||
.date a:hover,
|
||
.time a:hover,
|
||
.author a:hover,
|
||
.tags a:hover {
|
||
color: #4e97d8;
|
||
}
|
||
|
||
.excerpt {
|
||
margin: 0;
|
||
font-size: 0.9em;
|
||
color: #999;
|
||
}
|
||
|
||
.intro {
|
||
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
||
font-size: 1.2em;
|
||
font-weight: lighter;
|
||
color: #999;
|
||
}
|
||
|
||
.block-heading {
|
||
display: inline;
|
||
float: left;
|
||
width: 940px;
|
||
margin: 0 10px;
|
||
position: relative;
|
||
bottom: -15px;
|
||
font-size: 0.8em;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.label {
|
||
position: relative;
|
||
display: inline-block;
|
||
padding: 8px 18px 9px 18px;
|
||
background: #4e97d8;
|
||
border-radius: 3px;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.container {
|
||
position: relative;
|
||
z-index: 500;
|
||
width: 940px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.content-wrapper {
|
||
z-index: 800;
|
||
width: 70%;
|
||
margin-left: 30%;
|
||
}
|
||
|
||
.content-wrapper__inner {
|
||
margin: 0 10%;
|
||
padding: 50px 0;
|
||
}
|
||
|
||
.footer {
|
||
display: block;
|
||
padding: 2em 0 0 0;
|
||
border-top: 2px solid #ddd;
|
||
font-size: 0.7em;
|
||
color: #b3b3b3;
|
||
}
|
||
|
||
.footer__copyright {
|
||
display: block;
|
||
margin-bottom: 0.7em;
|
||
}
|
||
|
||
.footer__copyright a {
|
||
color: #a6a6a6;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.footer__copyright a:hover {
|
||
color: #4e97d8;
|
||
}
|
||
|
||
.avatar,
|
||
.logo {
|
||
border-radius: 50%;
|
||
border: 3px solid #fff;
|
||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
hr {
|
||
border: none;
|
||
}
|
||
|
||
.section-title__divider {
|
||
width: 30%;
|
||
margin: 2.2em 0 2.1em 0;
|
||
border-top: 1px solid #ddd;
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
.panel {
|
||
display: table;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.panel__vertical {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.panel-title {
|
||
font-family: 'Old English Text MT', 'EngraversOldEnglishBT-Bold', 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
margin: 0 0 5px 0;
|
||
font-size: 2.5em;
|
||
color: #fff;
|
||
}
|
||
|
||
.panel-subtitle {
|
||
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
||
font-size: 1.2em;
|
||
font-weight: lighter;
|
||
letter-spacing: 3px;
|
||
color: #ccc;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.iUp {
|
||
opacity: 0;
|
||
-webkit-transform: translate3d(0, 80px, 0);
|
||
-moz-transform: translate3d(0, 80px, 0);
|
||
-ms-transform: translate3d(0, 80px, 0);
|
||
-o-transform: translate3d(0, 80px, 0);
|
||
transform: translate3d(0, 80px, 0);
|
||
-webkit-transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
|
||
-moz-transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
|
||
transition: all 2s cubic-bezier(0.19, 1, 0.22, 1)
|
||
}
|
||
|
||
.iUp.up {
|
||
opacity: 1;
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
-moz-transform: translate3d(0, 0, 0);
|
||
-ms-transform: translate3d(0, 0, 0);
|
||
-o-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0)
|
||
}
|
||
|
||
.panel-cover {
|
||
display: block;
|
||
position: fixed;
|
||
z-index: 900;
|
||
width: 100%;
|
||
max-width: none;
|
||
height: 100%;
|
||
background: center center no-repeat #666;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
-moz-transform: translate3d(0, 0, 0);
|
||
-ms-transform: translate3d(0, 0, 0);
|
||
-o-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
-webkit-transition: width 0.6s ease;
|
||
-moz-transition: width 0.6s ease;
|
||
transition: width 0.6s ease
|
||
}
|
||
|
||
.panel-cover--collapsed {
|
||
width: 30%
|
||
}
|
||
|
||
.panel-cover--collapsed .iUp {
|
||
-webkit-transition: all 0 cubic-bezier(0.19, 1, 0.22, 1);
|
||
-moz-transition: all 0 cubic-bezier(0.19, 1, 0.22, 1);
|
||
transition: all 0 cubic-bezier(0.19, 1, 0.22, 1)
|
||
}
|
||
|
||
.panel-cover--overlay {
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: #000;
|
||
z-index: 1;
|
||
-moz-opacity: .55;
|
||
opacity: .55;
|
||
}
|
||
|
||
.panel-cover__logo {
|
||
margin-bottom: 0.2em;
|
||
|
||
}
|
||
|
||
.panel-cover__description {
|
||
margin: 0 30px;
|
||
}
|
||
|
||
.panel-cover__divider {
|
||
width: 50%;
|
||
margin: 20px auto;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.14);
|
||
}
|
||
|
||
.panel-cover__divider--secondary {
|
||
width: 15%;
|
||
}
|
||
|
||
.panel-main {
|
||
display: table;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.panel-main__inner {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
position: relative;
|
||
z-index: 800;
|
||
padding: 0 60px;
|
||
}
|
||
|
||
.panel-main__content {
|
||
max-width: 620px;
|
||
margin: 0px auto;
|
||
}
|
||
|
||
.panel-main__content--fixed {
|
||
width: 480px;
|
||
transition: width 1s;
|
||
-webkit-transition: width 1s;
|
||
/* Safari */
|
||
}
|
||
|
||
.panel-inverted {
|
||
font-weight: 100;
|
||
text-align: center;
|
||
color: #fff;
|
||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.panel-inverted a {
|
||
color: #fff;
|
||
}
|
||
|
||
.cover-navigation {
|
||
margin-top: 42px;
|
||
}
|
||
|
||
.cover-navigation--social {
|
||
margin-left: 30px;
|
||
}
|
||
|
||
.btn,
|
||
.navigation__item a {
|
||
padding: 10px 20px;
|
||
border: 1px solid #4e97d8;
|
||
border-radius: 20px;
|
||
font-size: 0.9em;
|
||
font-weight: bold;
|
||
letter-spacing: 1px;
|
||
text-shadow: none;
|
||
color: #4e97d8;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.btn:hover,
|
||
.navigation__item a:hover {
|
||
color: #4e97d8;
|
||
border-color: #4e97d8;
|
||
}
|
||
|
||
.btn-border-small {
|
||
border: 1px solid #4e97d8;
|
||
border-radius: 20px;
|
||
padding: 6px 8px;
|
||
font-size: 0.8em;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.btn-secondary {
|
||
border-color: #5ba4e5;
|
||
color: #5ba4e5;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
color: #217fd2;
|
||
border-color: #217fd2;
|
||
}
|
||
|
||
.btn-tertiary {
|
||
border-color: #999;
|
||
color: #999;
|
||
}
|
||
|
||
.btn-tertiary:hover {
|
||
color: #737373;
|
||
border-color: #737373;
|
||
}
|
||
|
||
.btn-large {
|
||
padding: 10px 24px;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.btn-small {
|
||
padding: 8px 12px;
|
||
font-size: 0.7em;
|
||
}
|
||
|
||
.btn-mobile-menu {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 9999;
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 35px;
|
||
background: rgba(51, 51, 51, 0.98);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
text-align: center;
|
||
}
|
||
|
||
.btn-mobile-menu__icon,
|
||
.btn-mobile-close__icon {
|
||
position: relative;
|
||
top: 10px;
|
||
color: #fff;
|
||
}
|
||
|
||
nav {
|
||
display: inline-block;
|
||
position: relative;
|
||
}
|
||
|
||
.navigation {
|
||
display: inline-block;
|
||
/*float: left;*/
|
||
position: relative;
|
||
margin: 0;
|
||
list-style-type: none;
|
||
}
|
||
|
||
.navigation__item {
|
||
display: inline-block;
|
||
margin: 5px 1px 0 0;
|
||
line-height: 1em;
|
||
}
|
||
|
||
.navigation__item a {
|
||
display: block;
|
||
position: relative;
|
||
border-color: #fff;
|
||
color: #fff;
|
||
opacity: 0.8;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.navigation__item a:hover {
|
||
color: #fff;
|
||
border-color: #fff;
|
||
opacity: 1;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.navigation--social a {
|
||
border: 0px;
|
||
padding: 6px 8px 6px 9px;
|
||
}
|
||
|
||
.navigation--social a .label {
|
||
display: none;
|
||
}
|
||
|
||
.navigation--social a .icon {
|
||
display: block;
|
||
font-size: 1.7em;
|
||
}
|
||
|
||
.pagination {
|
||
display: block;
|
||
margin: 0 0 4em 0;
|
||
}
|
||
|
||
.pagination__page-number {
|
||
margin: 0;
|
||
font-size: 0.8em;
|
||
color: #999;
|
||
}
|
||
|
||
.pagination__newer {
|
||
margin-right: 1em;
|
||
}
|
||
|
||
.pagination__older {
|
||
margin-left: 1em;
|
||
}
|
||
|
||
j {
|
||
font-family: 'entypo';
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.social {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.icon-social {
|
||
font-family: 'entypo-social';
|
||
font-size: 22px;
|
||
display: block;
|
||
position: relative;
|
||
}
|
||
|
||
*:focus {
|
||
outline: none;
|
||
}
|
||
|
||
@media all and (max-width: 1100px) {
|
||
/*
|
||
.panel-cover__logo {
|
||
width: 70px;
|
||
}
|
||
|
||
.panel-title {
|
||
font-size: 2em;
|
||
}
|
||
|
||
.panel-subtitle {
|
||
font-size: 1em;
|
||
}
|
||
|
||
.panel-cover__description {
|
||
margin: 0 10px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.navigation--social {
|
||
margin-top: 5px;
|
||
margin-left: 0;
|
||
}
|
||
*/
|
||
}
|
||
|
||
@media all and (max-width: 960px) {
|
||
/*
|
||
.btn-mobile-menu {
|
||
display: block;
|
||
}
|
||
|
||
.panel-main {
|
||
display: table;
|
||
position: relative;
|
||
}
|
||
|
||
.panel-cover--collapsed {
|
||
width: 100%;
|
||
max-width: none;
|
||
}
|
||
|
||
.panel-main__inner {
|
||
display: table-cell;
|
||
padding: 60px 10%;
|
||
}
|
||
|
||
.panel-cover__description {
|
||
display: block;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.panel-cover__divider--secondary {
|
||
display: none;
|
||
}
|
||
|
||
.panel-cover {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-position: center center;
|
||
}
|
||
|
||
.panel-cover.panel-cover--collapsed {
|
||
display: block;
|
||
position: relative;
|
||
height: auto;
|
||
padding: 0;
|
||
background-position: center center;
|
||
}
|
||
|
||
.panel-cover.panel-cover--collapsed .panel-main__inner {
|
||
display: block;
|
||
padding: 70px 0 30px 0;
|
||
}
|
||
|
||
.panel-cover.panel-cover--collapsed .panel-cover__logo {
|
||
width: 60px;
|
||
border-width: 2px;
|
||
}
|
||
|
||
.panel-cover.panel-cover--collapsed .panel-cover__description {
|
||
display: none;
|
||
}
|
||
|
||
.panel-cover.panel-cover--collapsed .panel-cover__divider {
|
||
display: none;
|
||
margin: 1em auto;
|
||
}
|
||
|
||
.navigation-wrapper {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
padding: 20px 0;
|
||
background: rgba(51, 51, 51, 0.98);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
.navigation-wrapper.visible {
|
||
display: block;
|
||
}
|
||
|
||
.cover-navigation {
|
||
display: block;
|
||
position: relative;
|
||
float: left;
|
||
clear: left;
|
||
width: 100%;
|
||
}
|
||
|
||
.cover-navigation .navigation {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
.cover-navigation .navigation li {
|
||
width: 80%;
|
||
margin-bottom: 0.4em;
|
||
}
|
||
|
||
.cover-navigation.navigation--social {
|
||
padding-top: 5px;
|
||
}
|
||
|
||
.cover-navigation.navigation--social .navigation li {
|
||
display: inline-block;
|
||
width: 20%;
|
||
}
|
||
|
||
.content-wrapper {
|
||
width: 80%;
|
||
max-width: none;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.content-wrapper__inner {
|
||
margin-right: 0;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.navigation__item {
|
||
width: 100%;
|
||
margin: 0 0 0.4em 0;
|
||
}
|
||
*/
|
||
}
|
||
|
||
@media all and (max-width: 510px) {
|
||
.navigation {
|
||
line-height: 50px;
|
||
}
|
||
|
||
}
|
||
|
||
@media all and (max-width: 340px) {
|
||
.panel-main__inner {
|
||
padding: 0 5%;
|
||
}
|
||
|
||
.panel-title {
|
||
margin-bottom: 0.1em;
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
.panel-subtitle {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.btn,
|
||
.navigation__item a {
|
||
display: block;
|
||
margin-bottom: 0.4em;
|
||
}
|
||
}
|
||
|
||
/***************************************************************************************/
|
||
.remark {
|
||
position: sticky;
|
||
z-index: 900;
|
||
bottom: 0;
|
||
text-align: center;
|
||
color: #fff;
|
||
opacity: .60 !important;
|
||
padding-bottom: 3px;
|
||
background-color: black;
|
||
}
|
||
|
||
.power {
|
||
display: inline-block;
|
||
color: #fff !important;
|
||
letter-spacing: 0;
|
||
font-size: 10px;
|
||
line-height: 30px;
|
||
margin: 0 auto;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.beian {
|
||
position: absolute;
|
||
z-index: 900;
|
||
bottom: 0;
|
||
right: 5px;
|
||
text-align: center;
|
||
color: #fff;
|
||
opacity: .25 !important;
|
||
padding-bottom: 3px;
|
||
letter-spacing: -3px;
|
||
font-size: 0;
|
||
}
|
||
|
||
.gwab,
|
||
.icp {
|
||
display: inline-block;
|
||
color: #fff !important;
|
||
letter-spacing: 0;
|
||
font-size: 10px;
|
||
line-height: 16px;
|
||
margin: 0;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.gwab {
|
||
background: url(/images/bj/1.jpg) no-repeat;
|
||
background-size: 12px 12px;
|
||
background-position: 3px 2px;
|
||
padding-left: 18px;
|
||
}
|
||
|
||
@-webkit-keyframes btnGroups {
|
||
0% {
|
||
-webkit-transform: scale(1.2, 0.8);
|
||
}
|
||
|
||
1% {
|
||
-webkit-transform: scale(1.18, 0.82);
|
||
}
|
||
|
||
2% {
|
||
-webkit-transform: scale(1.16, 0.84);
|
||
}
|
||
|
||
3% {
|
||
-webkit-transform: scale(1.13, 0.87);
|
||
}
|
||
|
||
4% {
|
||
-webkit-transform: scale(1.1, 0.9);
|
||
}
|
||
|
||
5% {
|
||
-webkit-transform: scale(1.07, 0.93);
|
||
}
|
||
|
||
6% {
|
||
-webkit-transform: scale(1.04, 0.96);
|
||
}
|
||
|
||
7% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
8% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
9% {
|
||
-webkit-transform: scale(0.97, 1.03);
|
||
}
|
||
|
||
10% {
|
||
-webkit-transform: scale(0.95, 1.05);
|
||
}
|
||
|
||
11% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
12% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
13% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
14% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
15% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
16% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
17% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
18% {
|
||
-webkit-transform: scale(0.95, 1.05);
|
||
}
|
||
|
||
19% {
|
||
-webkit-transform: scale(0.96, 1.04);
|
||
}
|
||
|
||
20% {
|
||
-webkit-transform: scale(0.98, 1.02);
|
||
}
|
||
|
||
21% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
22% {
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
|
||
23% {
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
|
||
24% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
25% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
26% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
27% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
28% {
|
||
-webkit-transform: scale(1.03, 0.97);
|
||
}
|
||
|
||
29% {
|
||
-webkit-transform: scale(1.03, 0.97);
|
||
}
|
||
|
||
30% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
31% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
32% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
33% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
34% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
35% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
36% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
37% {
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
|
||
38% {
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
|
||
39% {
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
|
||
40% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
41% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
42% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
43% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
44% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
45% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
46% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
47% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
48% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
49% {
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes btnGroups {
|
||
0% {
|
||
-webkit-transform: scale(1.2, 0.8);
|
||
-moz-transform: scale(1.2, 0.8);
|
||
-ms-transform: scale(1.2, 0.8);
|
||
transform: scale(1.2, 0.8);
|
||
}
|
||
|
||
1% {
|
||
-webkit-transform: scale(1.18, 0.82);
|
||
-moz-transform: scale(1.18, 0.82);
|
||
-ms-transform: scale(1.18, 0.82);
|
||
transform: scale(1.18, 0.82);
|
||
}
|
||
|
||
2% {
|
||
-webkit-transform: scale(1.16, 0.84);
|
||
-moz-transform: scale(1.16, 0.84);
|
||
-ms-transform: scale(1.16, 0.84);
|
||
transform: scale(1.16, 0.84);
|
||
}
|
||
|
||
3% {
|
||
-webkit-transform: scale(1.13, 0.87);
|
||
-moz-transform: scale(1.13, 0.87);
|
||
-ms-transform: scale(1.13, 0.87);
|
||
transform: scale(1.13, 0.87);
|
||
}
|
||
|
||
4% {
|
||
-webkit-transform: scale(1.1, 0.9);
|
||
-moz-transform: scale(1.1, 0.9);
|
||
-ms-transform: scale(1.1, 0.9);
|
||
transform: scale(1.1, 0.9);
|
||
}
|
||
|
||
5% {
|
||
-webkit-transform: scale(1.07, 0.93);
|
||
-moz-transform: scale(1.07, 0.93);
|
||
-ms-transform: scale(1.07, 0.93);
|
||
transform: scale(1.07, 0.93);
|
||
}
|
||
|
||
6% {
|
||
-webkit-transform: scale(1.04, 0.96);
|
||
-moz-transform: scale(1.04, 0.96);
|
||
-ms-transform: scale(1.04, 0.96);
|
||
transform: scale(1.04, 0.96);
|
||
}
|
||
|
||
7% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
8% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
9% {
|
||
-webkit-transform: scale(0.97, 1.03);
|
||
-moz-transform: scale(0.97, 1.03);
|
||
-ms-transform: scale(0.97, 1.03);
|
||
transform: scale(0.97, 1.03);
|
||
}
|
||
|
||
10% {
|
||
-webkit-transform: scale(0.95, 1.05);
|
||
-moz-transform: scale(0.95, 1.05);
|
||
-ms-transform: scale(0.95, 1.05);
|
||
transform: scale(0.95, 1.05);
|
||
}
|
||
|
||
11% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
-moz-transform: scale(0.94, 1.06);
|
||
-ms-transform: scale(0.94, 1.06);
|
||
transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
12% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
13% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
14% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
15% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
16% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
-moz-transform: scale(0.94, 1.06);
|
||
-ms-transform: scale(0.94, 1.06);
|
||
transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
17% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
-moz-transform: scale(0.94, 1.06);
|
||
-ms-transform: scale(0.94, 1.06);
|
||
transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
18% {
|
||
-webkit-transform: scale(0.95, 1.05);
|
||
-moz-transform: scale(0.95, 1.05);
|
||
-ms-transform: scale(0.95, 1.05);
|
||
transform: scale(0.95, 1.05);
|
||
}
|
||
|
||
19% {
|
||
-webkit-transform: scale(0.96, 1.04);
|
||
-moz-transform: scale(0.96, 1.04);
|
||
-ms-transform: scale(0.96, 1.04);
|
||
transform: scale(0.96, 1.04);
|
||
}
|
||
|
||
20% {
|
||
-webkit-transform: scale(0.98, 1.02);
|
||
-moz-transform: scale(0.98, 1.02);
|
||
-ms-transform: scale(0.98, 1.02);
|
||
transform: scale(0.98, 1.02);
|
||
}
|
||
|
||
21% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
22% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
23% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
24% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
25% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
26% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
27% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
28% {
|
||
-webkit-transform: scale(1.03, 0.97);
|
||
-moz-transform: scale(1.03, 0.97);
|
||
-ms-transform: scale(1.03, 0.97);
|
||
transform: scale(1.03, 0.97);
|
||
}
|
||
|
||
29% {
|
||
-webkit-transform: scale(1.03, 0.97);
|
||
-moz-transform: scale(1.03, 0.97);
|
||
-ms-transform: scale(1.03, 0.97);
|
||
transform: scale(1.03, 0.97);
|
||
}
|
||
|
||
30% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
31% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
32% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
33% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
34% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
35% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
36% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
37% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
38% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
39% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
40% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
41% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
42% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
43% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
44% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
45% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
46% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
47% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
48% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
49% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes btnGroups {
|
||
0% {
|
||
-webkit-transform: scale(1.2, 0.8);
|
||
-moz-transform: scale(1.2, 0.8);
|
||
-ms-transform: scale(1.2, 0.8);
|
||
transform: scale(1.2, 0.8);
|
||
}
|
||
|
||
1% {
|
||
-webkit-transform: scale(1.18, 0.82);
|
||
-moz-transform: scale(1.18, 0.82);
|
||
-ms-transform: scale(1.18, 0.82);
|
||
transform: scale(1.18, 0.82);
|
||
}
|
||
|
||
2% {
|
||
-webkit-transform: scale(1.16, 0.84);
|
||
-moz-transform: scale(1.16, 0.84);
|
||
-ms-transform: scale(1.16, 0.84);
|
||
transform: scale(1.16, 0.84);
|
||
}
|
||
|
||
3% {
|
||
-webkit-transform: scale(1.13, 0.87);
|
||
-moz-transform: scale(1.13, 0.87);
|
||
-ms-transform: scale(1.13, 0.87);
|
||
transform: scale(1.13, 0.87);
|
||
}
|
||
|
||
4% {
|
||
-webkit-transform: scale(1.1, 0.9);
|
||
-moz-transform: scale(1.1, 0.9);
|
||
-ms-transform: scale(1.1, 0.9);
|
||
transform: scale(1.1, 0.9);
|
||
}
|
||
|
||
5% {
|
||
-webkit-transform: scale(1.07, 0.93);
|
||
-moz-transform: scale(1.07, 0.93);
|
||
-ms-transform: scale(1.07, 0.93);
|
||
transform: scale(1.07, 0.93);
|
||
}
|
||
|
||
6% {
|
||
-webkit-transform: scale(1.04, 0.96);
|
||
-moz-transform: scale(1.04, 0.96);
|
||
-ms-transform: scale(1.04, 0.96);
|
||
transform: scale(1.04, 0.96);
|
||
}
|
||
|
||
7% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
8% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
9% {
|
||
-webkit-transform: scale(0.97, 1.03);
|
||
-moz-transform: scale(0.97, 1.03);
|
||
-ms-transform: scale(0.97, 1.03);
|
||
transform: scale(0.97, 1.03);
|
||
}
|
||
|
||
10% {
|
||
-webkit-transform: scale(0.95, 1.05);
|
||
-moz-transform: scale(0.95, 1.05);
|
||
-ms-transform: scale(0.95, 1.05);
|
||
transform: scale(0.95, 1.05);
|
||
}
|
||
|
||
11% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
-moz-transform: scale(0.94, 1.06);
|
||
-ms-transform: scale(0.94, 1.06);
|
||
transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
12% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
13% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
14% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
15% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
16% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
-moz-transform: scale(0.94, 1.06);
|
||
-ms-transform: scale(0.94, 1.06);
|
||
transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
17% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
-moz-transform: scale(0.94, 1.06);
|
||
-ms-transform: scale(0.94, 1.06);
|
||
transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
18% {
|
||
-webkit-transform: scale(0.95, 1.05);
|
||
-moz-transform: scale(0.95, 1.05);
|
||
-ms-transform: scale(0.95, 1.05);
|
||
transform: scale(0.95, 1.05);
|
||
}
|
||
|
||
19% {
|
||
-webkit-transform: scale(0.96, 1.04);
|
||
-moz-transform: scale(0.96, 1.04);
|
||
-ms-transform: scale(0.96, 1.04);
|
||
transform: scale(0.96, 1.04);
|
||
}
|
||
|
||
20% {
|
||
-webkit-transform: scale(0.98, 1.02);
|
||
-moz-transform: scale(0.98, 1.02);
|
||
-ms-transform: scale(0.98, 1.02);
|
||
transform: scale(0.98, 1.02);
|
||
}
|
||
|
||
21% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
22% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
23% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
24% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
25% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
26% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
27% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
28% {
|
||
-webkit-transform: scale(1.03, 0.97);
|
||
-moz-transform: scale(1.03, 0.97);
|
||
-ms-transform: scale(1.03, 0.97);
|
||
transform: scale(1.03, 0.97);
|
||
}
|
||
|
||
29% {
|
||
-webkit-transform: scale(1.03, 0.97);
|
||
-moz-transform: scale(1.03, 0.97);
|
||
-ms-transform: scale(1.03, 0.97);
|
||
transform: scale(1.03, 0.97);
|
||
}
|
||
|
||
30% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
31% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
32% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
33% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
34% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
35% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
36% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
37% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
38% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
39% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
40% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
41% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
42% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
43% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
44% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
45% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
46% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
47% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
48% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
49% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes btnGroups {
|
||
0% {
|
||
-webkit-transform: scale(1.2, 0.8);
|
||
-moz-transform: scale(1.2, 0.8);
|
||
-ms-transform: scale(1.2, 0.8);
|
||
transform: scale(1.2, 0.8);
|
||
}
|
||
|
||
1% {
|
||
-webkit-transform: scale(1.18, 0.82);
|
||
-moz-transform: scale(1.18, 0.82);
|
||
-ms-transform: scale(1.18, 0.82);
|
||
transform: scale(1.18, 0.82);
|
||
}
|
||
|
||
2% {
|
||
-webkit-transform: scale(1.16, 0.84);
|
||
-moz-transform: scale(1.16, 0.84);
|
||
-ms-transform: scale(1.16, 0.84);
|
||
transform: scale(1.16, 0.84);
|
||
}
|
||
|
||
3% {
|
||
-webkit-transform: scale(1.13, 0.87);
|
||
-moz-transform: scale(1.13, 0.87);
|
||
-ms-transform: scale(1.13, 0.87);
|
||
transform: scale(1.13, 0.87);
|
||
}
|
||
|
||
4% {
|
||
-webkit-transform: scale(1.1, 0.9);
|
||
-moz-transform: scale(1.1, 0.9);
|
||
-ms-transform: scale(1.1, 0.9);
|
||
transform: scale(1.1, 0.9);
|
||
}
|
||
|
||
5% {
|
||
-webkit-transform: scale(1.07, 0.93);
|
||
-moz-transform: scale(1.07, 0.93);
|
||
-ms-transform: scale(1.07, 0.93);
|
||
transform: scale(1.07, 0.93);
|
||
}
|
||
|
||
6% {
|
||
-webkit-transform: scale(1.04, 0.96);
|
||
-moz-transform: scale(1.04, 0.96);
|
||
-ms-transform: scale(1.04, 0.96);
|
||
transform: scale(1.04, 0.96);
|
||
}
|
||
|
||
7% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
8% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
9% {
|
||
-webkit-transform: scale(0.97, 1.03);
|
||
-moz-transform: scale(0.97, 1.03);
|
||
-ms-transform: scale(0.97, 1.03);
|
||
transform: scale(0.97, 1.03);
|
||
}
|
||
|
||
10% {
|
||
-webkit-transform: scale(0.95, 1.05);
|
||
-moz-transform: scale(0.95, 1.05);
|
||
-ms-transform: scale(0.95, 1.05);
|
||
transform: scale(0.95, 1.05);
|
||
}
|
||
|
||
11% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
-moz-transform: scale(0.94, 1.06);
|
||
-ms-transform: scale(0.94, 1.06);
|
||
transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
12% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
13% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
14% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
15% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
16% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
-moz-transform: scale(0.94, 1.06);
|
||
-ms-transform: scale(0.94, 1.06);
|
||
transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
17% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
-moz-transform: scale(0.94, 1.06);
|
||
-ms-transform: scale(0.94, 1.06);
|
||
transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
18% {
|
||
-webkit-transform: scale(0.95, 1.05);
|
||
-moz-transform: scale(0.95, 1.05);
|
||
-ms-transform: scale(0.95, 1.05);
|
||
transform: scale(0.95, 1.05);
|
||
}
|
||
|
||
19% {
|
||
-webkit-transform: scale(0.96, 1.04);
|
||
-moz-transform: scale(0.96, 1.04);
|
||
-ms-transform: scale(0.96, 1.04);
|
||
transform: scale(0.96, 1.04);
|
||
}
|
||
|
||
20% {
|
||
-webkit-transform: scale(0.98, 1.02);
|
||
-moz-transform: scale(0.98, 1.02);
|
||
-ms-transform: scale(0.98, 1.02);
|
||
transform: scale(0.98, 1.02);
|
||
}
|
||
|
||
21% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
22% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
23% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
24% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
25% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
26% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
27% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
28% {
|
||
-webkit-transform: scale(1.03, 0.97);
|
||
-moz-transform: scale(1.03, 0.97);
|
||
-ms-transform: scale(1.03, 0.97);
|
||
transform: scale(1.03, 0.97);
|
||
}
|
||
|
||
29% {
|
||
-webkit-transform: scale(1.03, 0.97);
|
||
-moz-transform: scale(1.03, 0.97);
|
||
-ms-transform: scale(1.03, 0.97);
|
||
transform: scale(1.03, 0.97);
|
||
}
|
||
|
||
30% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
31% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
32% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
33% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
34% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
35% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
36% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
37% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
38% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
39% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
40% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
41% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
42% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
43% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
44% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
45% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
46% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
47% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
48% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
49% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
|
||
@keyframes btnGroups {
|
||
0% {
|
||
-webkit-transform: scale(1.2, 0.8);
|
||
-moz-transform: scale(1.2, 0.8);
|
||
-ms-transform: scale(1.2, 0.8);
|
||
transform: scale(1.2, 0.8);
|
||
}
|
||
|
||
1% {
|
||
-webkit-transform: scale(1.18, 0.82);
|
||
-moz-transform: scale(1.18, 0.82);
|
||
-ms-transform: scale(1.18, 0.82);
|
||
transform: scale(1.18, 0.82);
|
||
}
|
||
|
||
2% {
|
||
-webkit-transform: scale(1.16, 0.84);
|
||
-moz-transform: scale(1.16, 0.84);
|
||
-ms-transform: scale(1.16, 0.84);
|
||
transform: scale(1.16, 0.84);
|
||
}
|
||
|
||
3% {
|
||
-webkit-transform: scale(1.13, 0.87);
|
||
-moz-transform: scale(1.13, 0.87);
|
||
-ms-transform: scale(1.13, 0.87);
|
||
transform: scale(1.13, 0.87);
|
||
}
|
||
|
||
4% {
|
||
-webkit-transform: scale(1.1, 0.9);
|
||
-moz-transform: scale(1.1, 0.9);
|
||
-ms-transform: scale(1.1, 0.9);
|
||
transform: scale(1.1, 0.9);
|
||
}
|
||
|
||
5% {
|
||
-webkit-transform: scale(1.07, 0.93);
|
||
-moz-transform: scale(1.07, 0.93);
|
||
-ms-transform: scale(1.07, 0.93);
|
||
transform: scale(1.07, 0.93);
|
||
}
|
||
|
||
6% {
|
||
-webkit-transform: scale(1.04, 0.96);
|
||
-moz-transform: scale(1.04, 0.96);
|
||
-ms-transform: scale(1.04, 0.96);
|
||
transform: scale(1.04, 0.96);
|
||
}
|
||
|
||
7% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
8% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
9% {
|
||
-webkit-transform: scale(0.97, 1.03);
|
||
-moz-transform: scale(0.97, 1.03);
|
||
-ms-transform: scale(0.97, 1.03);
|
||
transform: scale(0.97, 1.03);
|
||
}
|
||
|
||
10% {
|
||
-webkit-transform: scale(0.95, 1.05);
|
||
-moz-transform: scale(0.95, 1.05);
|
||
-ms-transform: scale(0.95, 1.05);
|
||
transform: scale(0.95, 1.05);
|
||
}
|
||
|
||
11% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
-moz-transform: scale(0.94, 1.06);
|
||
-ms-transform: scale(0.94, 1.06);
|
||
transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
12% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
13% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
14% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
15% {
|
||
-webkit-transform: scale(0.93, 1.07);
|
||
-moz-transform: scale(0.93, 1.07);
|
||
-ms-transform: scale(0.93, 1.07);
|
||
transform: scale(0.93, 1.07);
|
||
}
|
||
|
||
16% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
-moz-transform: scale(0.94, 1.06);
|
||
-ms-transform: scale(0.94, 1.06);
|
||
transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
17% {
|
||
-webkit-transform: scale(0.94, 1.06);
|
||
-moz-transform: scale(0.94, 1.06);
|
||
-ms-transform: scale(0.94, 1.06);
|
||
transform: scale(0.94, 1.06);
|
||
}
|
||
|
||
18% {
|
||
-webkit-transform: scale(0.95, 1.05);
|
||
-moz-transform: scale(0.95, 1.05);
|
||
-ms-transform: scale(0.95, 1.05);
|
||
transform: scale(0.95, 1.05);
|
||
}
|
||
|
||
19% {
|
||
-webkit-transform: scale(0.96, 1.04);
|
||
-moz-transform: scale(0.96, 1.04);
|
||
-ms-transform: scale(0.96, 1.04);
|
||
transform: scale(0.96, 1.04);
|
||
}
|
||
|
||
20% {
|
||
-webkit-transform: scale(0.98, 1.02);
|
||
-moz-transform: scale(0.98, 1.02);
|
||
-ms-transform: scale(0.98, 1.02);
|
||
transform: scale(0.98, 1.02);
|
||
}
|
||
|
||
21% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
22% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
23% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
24% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
25% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
26% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
27% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
28% {
|
||
-webkit-transform: scale(1.03, 0.97);
|
||
-moz-transform: scale(1.03, 0.97);
|
||
-ms-transform: scale(1.03, 0.97);
|
||
transform: scale(1.03, 0.97);
|
||
}
|
||
|
||
29% {
|
||
-webkit-transform: scale(1.03, 0.97);
|
||
-moz-transform: scale(1.03, 0.97);
|
||
-ms-transform: scale(1.03, 0.97);
|
||
transform: scale(1.03, 0.97);
|
||
}
|
||
|
||
30% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
31% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
32% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
33% {
|
||
-webkit-transform: scale(1.02, 0.98);
|
||
-moz-transform: scale(1.02, 0.98);
|
||
-ms-transform: scale(1.02, 0.98);
|
||
transform: scale(1.02, 0.98);
|
||
}
|
||
|
||
34% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
35% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
36% {
|
||
-webkit-transform: scale(1.01, 0.99);
|
||
-moz-transform: scale(1.01, 0.99);
|
||
-ms-transform: scale(1.01, 0.99);
|
||
transform: scale(1.01, 0.99);
|
||
}
|
||
|
||
37% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
38% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
39% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
40% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
41% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
42% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
43% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
44% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
45% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
46% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
47% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
48% {
|
||
-webkit-transform: scale(0.99, 1.01);
|
||
-moz-transform: scale(0.99, 1.01);
|
||
-ms-transform: scale(0.99, 1.01);
|
||
transform: scale(0.99, 1.01);
|
||
}
|
||
|
||
49% {
|
||
-webkit-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
|
||
/*弹窗美化*/
|
||
/*.iziToast:after {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.iziToast {
|
||
border-radius: 5px !important;
|
||
}
|
||
*/
|
||
.iziToast-message.slideIn {
|
||
margin-top: 5px !important;
|
||
}
|
||
|
||
|
||
/* 模拟iPhone 16容器样式 */
|
||
.iphone-simulator {
|
||
position: fixed;
|
||
top: 50%;
|
||
right: 1%;
|
||
transform: translate(-50%, -50%) scale(1);
|
||
width: 393px; /* iPhone 16 Pro 宽度 */
|
||
height: 852px; /* iPhone 16 Pro 高度 */
|
||
border-radius: 47px; /* 真机圆角 */
|
||
box-shadow: 0 0 0 12px #1a1a1a, /* 边框模拟 */
|
||
0 0 0 14px #000, /* 外阴影 */
|
||
0 40px 80px rgba(0,0,0,0.4); /* 真实阴影 */
|
||
background: #000;
|
||
overflow: hidden;
|
||
z-index: 9999;
|
||
}
|
||
/* 模拟灵动岛 */
|
||
.dynamic-island {
|
||
position: absolute;
|
||
top: 12px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 126px;
|
||
height: 37px;
|
||
background: #000;
|
||
border-radius: 20px;
|
||
z-index: 10001;
|
||
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
|
||
}
|
||
|
||
.dynamic-island.expand {
|
||
width: 200px;
|
||
height: 60px;
|
||
border-radius: 30px;
|
||
}
|
||
|
||
.dynamic-island .content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.dynamic-island.expand .content {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 左上角返回按钮（带箭头图标） */
|
||
.back-btn {
|
||
position: absolute;
|
||
top: 15px;
|
||
left: 20px;
|
||
width: 40px;
|
||
height: 40px;
|
||
background: rgba(255,255,255,0.1);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
z-index: 10002;
|
||
transition: background 0.2s;
|
||
}
|
||
.back-btn:hover {
|
||
background: rgba(255,255,255,0.2);
|
||
}
|
||
.back-btn::before {
|
||
content: '←';
|
||
color: #258fb8;
|
||
font-size: 24px;
|
||
}
|
||
|
||
/* 内部浏览器视图容器 */
|
||
.browser-view {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 50px; /* 避让灵动岛 */
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
/* 移动端隐藏 */
|
||
@media screen and (max-width: 768px) {
|
||
.iphone-simulator, .overlay {
|
||
display: none !important;
|
||
}
|
||
}
|
||
/*
|
||
* CSS（骨架屏 + 淡入动画）
|
||
* 点击链接 → 显示模拟器 → 动态加载网页 → 加载完成前显示骨架屏 → 加载完成后淡入网页
|
||
*/
|
||
.iphone-simulator .browser-view iframe {
|
||
opacity: 0;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
.iphone-simulator .browser-view.loaded iframe {
|
||
opacity: 1;
|
||
}
|
||
|
||
.skeleton {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||
background-size: 200% 100%;
|
||
animation: shimmer 1.5s infinite;
|
||
z-index: 1000;
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% { background-position: -200% 0; }
|
||
100% { background-position: 200% 0; }
|
||
}
|
||
|
||
/* MacBook风格的关闭按钮 */
|
||
.close-btn {
|
||
position: absolute;
|
||
top: 25px;
|
||
right: 20px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 50%;
|
||
background: #ff5f56;
|
||
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
|
||
cursor: pointer;
|
||
z-index: 10000;
|
||
}
|
||
|
||
/* 遮罩层 */
|
||
.overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: none;
|
||
z-index: 9998;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.iphone-simulator {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 769px) {
|
||
.iphone-simulator {
|
||
display: block;
|
||
}
|
||
} |