@charset "UTF-8"; progress, sub, sup { vertical-align: baseline } @-webkit-keyframes bounce { 0%, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); animation-timing-function: cubic-bezier(.755, .05, .855, .06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1) } 70% { -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); animation-timing-function: cubic-bezier(.755, .05, .855, .06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05) } 80% { -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translateZ(0) scaleY(.95); transform: translateZ(0) scaleY(.95) } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02) } } @keyframes bounce { 0%, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); animation-timing-function: cubic-bezier(.755, .05, .855, .06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1) } 70% { -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); animation-timing-function: cubic-bezier(.755, .05, .855, .06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05) } 80% { -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translateZ(0) scaleY(.95); transform: translateZ(0) scaleY(.95) } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02) } } @-webkit-keyframes flash { 0%, 50%, to { opacity: 1 } 25%, 75% { opacity: 0 } } @keyframes flash { 0%, 50%, to { opacity: 1 } 25%, 75% { opacity: 0 } } @-webkit-keyframes pulse { 0%, to { -webkit-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } } @keyframes pulse { 0%, to { -webkit-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } } @-webkit-keyframes rubberBand { 0%, to { -webkit-transform: scaleX(1); transform: scaleX(1) } 30% { -webkit-transform: scale3d(1.25, .75, 1); transform: scale3d(1.25, .75, 1) } 40% { -webkit-transform: scale3d(.75, 1.25, 1); transform: scale3d(.75, 1.25, 1) } 50% { -webkit-transform: scale3d(1.15, .85, 1); transform: scale3d(1.15, .85, 1) } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1) } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1) } } @keyframes rubberBand { 0%, to { -webkit-transform: scaleX(1); transform: scaleX(1) } 30% { -webkit-transform: scale3d(1.25, .75, 1); transform: scale3d(1.25, .75, 1) } 40% { -webkit-transform: scale3d(.75, 1.25, 1); transform: scale3d(.75, 1.25, 1) } 50% { -webkit-transform: scale3d(1.15, .85, 1); transform: scale3d(1.15, .85, 1) } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1) } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1) } } @-webkit-keyframes shakeX { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } } @keyframes shakeX { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } } @-webkit-keyframes shakeY { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } } @keyframes shakeY { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } } @-webkit-keyframes headShake { 0%, 50% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } } @keyframes headShake { 0%, 50% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0); transform: rotate(0) } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0); transform: rotate(0) } } @-webkit-keyframes tada { 0%, to { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg); transform: scale3d(.9, .9, .9) rotate(-3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) } } @keyframes tada { 0%, to { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg); transform: scale3d(.9, .9, .9) rotate(-3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) } } @-webkit-keyframes wobble { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0) } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg) } } @keyframes wobble { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0) } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg) } } @-webkit-keyframes jello { 0%, 11.1%, to { -webkit-transform: translateZ(0); transform: translateZ(0) } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(.390625deg) skewY(.390625deg); transform: skewX(.390625deg) skewY(.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } @keyframes jello { 0%, 11.1%, to { -webkit-transform: translateZ(0); transform: translateZ(0) } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(.390625deg) skewY(.390625deg); transform: skewX(.390625deg) skewY(.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } @-webkit-keyframes heartBeat { 0%, 28%, 70% { -webkit-transform: scale(1); transform: scale(1) } 14%, 42% { -webkit-transform: scale(1.3); transform: scale(1.3) } } @keyframes heartBeat { 0%, 28%, 70% { -webkit-transform: scale(1); transform: scale(1) } 14%, 42% { -webkit-transform: scale(1.3); transform: scale(1.3) } } @-webkit-keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(.7); transform: translateY(-1200px) scale(.7); opacity: .7 } 80% { -webkit-transform: translateY(0) scale(.7); transform: translateY(0) scale(.7); opacity: .7 } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(.7); transform: translateY(-1200px) scale(.7); opacity: .7 } 80% { -webkit-transform: translateY(0) scale(.7); transform: translateY(0) scale(.7); opacity: .7 } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @-webkit-keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(.7); transform: translateX(-2000px) scale(.7); opacity: .7 } 80% { -webkit-transform: translateX(0) scale(.7); transform: translateX(0) scale(.7); opacity: .7 } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(.7); transform: translateX(-2000px) scale(.7); opacity: .7 } 80% { -webkit-transform: translateX(0) scale(.7); transform: translateX(0) scale(.7); opacity: .7 } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @-webkit-keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(.7); transform: translateX(2000px) scale(.7); opacity: .7 } 80% { -webkit-transform: translateX(0) scale(.7); transform: translateX(0) scale(.7); opacity: .7 } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(.7); transform: translateX(2000px) scale(.7); opacity: .7 } 80% { -webkit-transform: translateX(0) scale(.7); transform: translateX(0) scale(.7); opacity: .7 } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @-webkit-keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(.7); transform: translateY(1200px) scale(.7); opacity: .7 } 80% { -webkit-transform: translateY(0) scale(.7); transform: translateY(0) scale(.7); opacity: .7 } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(.7); transform: translateY(1200px) scale(.7); opacity: .7 } 80% { -webkit-transform: translateY(0) scale(.7); transform: translateY(0) scale(.7); opacity: .7 } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @-webkit-keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } 20% { -webkit-transform: translateY(0) scale(.7); transform: translateY(0) scale(.7); opacity: .7 } to { -webkit-transform: translateY(700px) scale(.7); transform: translateY(700px) scale(.7); opacity: .7 } } @keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } 20% { -webkit-transform: translateY(0) scale(.7); transform: translateY(0) scale(.7); opacity: .7 } to { -webkit-transform: translateY(700px) scale(.7); transform: translateY(700px) scale(.7); opacity: .7 } } @-webkit-keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } 20% { -webkit-transform: translateX(0) scale(.7); transform: translateX(0) scale(.7); opacity: .7 } to { -webkit-transform: translateX(-2000px) scale(.7); transform: translateX(-2000px) scale(.7); opacity: .7 } } @keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } 20% { -webkit-transform: translateX(0) scale(.7); transform: translateX(0) scale(.7); opacity: .7 } to { -webkit-transform: translateX(-2000px) scale(.7); transform: translateX(-2000px) scale(.7); opacity: .7 } } @-webkit-keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } 20% { -webkit-transform: translateX(0) scale(.7); transform: translateX(0) scale(.7); opacity: .7 } to { -webkit-transform: translateX(2000px) scale(.7); transform: translateX(2000px) scale(.7); opacity: .7 } } @keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } 20% { -webkit-transform: translateX(0) scale(.7); transform: translateX(0) scale(.7); opacity: .7 } to { -webkit-transform: translateX(2000px) scale(.7); transform: translateX(2000px) scale(.7); opacity: .7 } } @-webkit-keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } 20% { -webkit-transform: translateY(0) scale(.7); transform: translateY(0) scale(.7); opacity: .7 } to { -webkit-transform: translateY(-700px) scale(.7); transform: translateY(-700px) scale(.7); opacity: .7 } } @keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } 20% { -webkit-transform: translateY(0) scale(.7); transform: translateY(0) scale(.7); opacity: .7 } to { -webkit-transform: translateY(-700px) scale(.7); transform: translateY(-700px) scale(.7); opacity: .7 } } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97) } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97) } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(.9); transform: translate3d(0, 25px, 0) scaleY(.9) } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(.95); transform: translate3d(0, -10px, 0) scaleY(.95) } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(.985); transform: translate3d(0, 5px, 0) scaleY(.985) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(.9); transform: translate3d(0, 25px, 0) scaleY(.9) } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(.95); transform: translate3d(0, -10px, 0) scaleY(.95) } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(.985); transform: translate3d(0, 5px, 0) scaleY(.985) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3) } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1) } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(.98); transform: translate3d(-10px, 0, 0) scaleX(.98) } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(.995); transform: translate3d(5px, 0, 0) scaleX(.995) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3) } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1) } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(.98); transform: translate3d(-10px, 0, 0) scaleX(.98) } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(.995); transform: translate3d(5px, 0, 0) scaleX(.995) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1) } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(.98); transform: translate3d(10px, 0, 0) scaleX(.98) } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(.995); transform: translate3d(-5px, 0, 0) scaleX(.995) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1) } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(.98); transform: translate3d(10px, 0, 0) scaleX(.98) } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(.995); transform: translate3d(-5px, 0, 0) scaleX(.995) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5) } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(.9); transform: translate3d(0, -20px, 0) scaleY(.9) } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(.95); transform: translate3d(0, 10px, 0) scaleY(.95) } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(.985); transform: translate3d(0, -5px, 0) scaleY(.985) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5) } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(.9); transform: translate3d(0, -20px, 0) scaleY(.9) } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(.95); transform: translate3d(0, 10px, 0) scaleY(.95) } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(.985); transform: translate3d(0, -5px, 0) scaleY(.985) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(.985); transform: translate3d(0, 10px, 0) scaleY(.985) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(.9); transform: translate3d(0, -20px, 0) scaleY(.9) } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3) } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(.985); transform: translate3d(0, 10px, 0) scaleY(.985) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(.9); transform: translate3d(0, -20px, 0) scaleY(.9) } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3) } } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(.9); transform: translate3d(20px, 0, 0) scaleX(.9) } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2) } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(.9); transform: translate3d(20px, 0, 0) scaleX(.9) } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2) } } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(.9); transform: translate3d(-20px, 0, 0) scaleX(.9) } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2) } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(.9); transform: translate3d(-20px, 0, 0) scaleX(.9) } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2) } } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(.985); transform: translate3d(0, -10px, 0) scaleY(.985) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(.9); transform: translate3d(0, 20px, 0) scaleY(.9) } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3) } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(.985); transform: translate3d(0, -10px, 0) scaleY(.985) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(.9); transform: translate3d(0, 20px, 0) scaleY(.9) } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3) } } @-webkit-keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInTopLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInTopLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInTopRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInTopRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInBottomLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInBottomLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInBottomRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInBottomRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } @-webkit-keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } @keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } @keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } @keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } @keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } @-webkit-keyframes fadeOutTopLeft { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0) } } @keyframes fadeOutTopLeft { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0) } } @-webkit-keyframes fadeOutTopRight { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0) } } @keyframes fadeOutTopRight { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0) } } @-webkit-keyframes fadeOutBottomRight { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0) } } @keyframes fadeOutBottomRight { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0) } } @-webkit-keyframes fadeOutBottomLeft { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0) } } @keyframes fadeOutBottomLeft { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0) } } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0); transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @keyframes flip { 0% { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0); transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } @-webkit-keyframes lightSpeedInRight { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes lightSpeedInRight { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes lightSpeedInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0 } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1 } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes lightSpeedInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0 } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1 } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes lightSpeedOutRight { 0% { opacity: 1 } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } @keyframes lightSpeedOutRight { 0% { opacity: 1 } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } @-webkit-keyframes lightSpeedOutLeft { 0% { opacity: 1 } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0 } } @keyframes lightSpeedOutLeft { 0% { opacity: 1 } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0 } } @-webkit-keyframes rotateIn { 0% { -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateIn { 0% { -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInDownLeft { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInDownRight { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInUpLeft { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInUpRight { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @-webkit-keyframes rotateOut { 0% { opacity: 1 } to { -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } @keyframes rotateOut { 0% { opacity: 1 } to { -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } @-webkit-keyframes rotateOutDownLeft { 0% { opacity: 1 } to { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } @keyframes rotateOutDownLeft { 0% { opacity: 1 } to { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } @-webkit-keyframes rotateOutDownRight { 0% { opacity: 1 } to { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @keyframes rotateOutDownRight { 0% { opacity: 1 } to { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @-webkit-keyframes rotateOutUpLeft { 0% { opacity: 1 } to { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @keyframes rotateOutUpLeft { 0% { opacity: 1 } to { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @-webkit-keyframes rotateOutUpRight { 0% { opacity: 1 } to { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } @keyframes rotateOutUpRight { 0% { opacity: 1 } to { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } @-webkit-keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0 } } @keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0 } } @-webkit-keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(.1) rotate(30deg); transform: scale(.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(.1) rotate(30deg); transform: scale(.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg) } } @keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg) } } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 50% { opacity: 1 } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 50% { opacity: 1 } } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @-webkit-keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } to { opacity: 0 } } @keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } to { opacity: 0 } } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0) } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0) } } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0) } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0) } } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @-webkit-keyframes m_show { 0% { opacity: 0 } to { opacity: 1; -webkit-filter: none; filter: none } } @keyframes m_show { 0% { opacity: 0 } to { opacity: 1; -webkit-filter: none; filter: none } } @-webkit-keyframes m_hide { 0% { opacity: 1; -webkit-filter: none; filter: none } to { opacity: 0; display: none } } @keyframes m_hide { 0% { opacity: 1; -webkit-filter: none; filter: none } to { opacity: 0; display: none } } @-webkit-keyframes slide-in-top { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0 } to { opacity: 1 } } @keyframes slide-in-top { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0 } to { opacity: 1 } } @-webkit-keyframes nav-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0) } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } } @keyframes nav-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0) } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } } @-webkit-keyframes above-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes above-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-webkit-keyframes above-title-scale { 0% { opacity: 0; -webkit-transform: scale(.7); transform: scale(.7) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @keyframes above-title-scale { 0% { opacity: 0; -webkit-transform: scale(.7); transform: scale(.7) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } :root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1 } .animate__animated { -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both } .animate__animated.animate__infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animate__animated.animate__repeat-1 { -webkit-animation-iteration-count: var(--animate-repeat); animation-iteration-count: var(--animate-repeat) } .animate__animated.animate__repeat-2 { -webkit-animation-iteration-count: calc(var(--animate-repeat) *2); animation-iteration-count: calc(var(--animate-repeat) *2) } .animate__animated.animate__repeat-3 { -webkit-animation-iteration-count: calc(var(--animate-repeat) *3); animation-iteration-count: calc(var(--animate-repeat) *3) } .animate__animated.animate__delay-1s { -webkit-animation-delay: var(--animate-delay); animation-delay: var(--animate-delay) } .animate__animated.animate__delay-2s { -webkit-animation-delay: calc(var(--animate-delay) *2); animation-delay: calc(var(--animate-delay) *2) } .animate__animated.animate__delay-3s { -webkit-animation-delay: calc(var(--animate-delay) *3); animation-delay: calc(var(--animate-delay) *3) } .animate__animated.animate__delay-4s { -webkit-animation-delay: calc(var(--animate-delay) *4); animation-delay: calc(var(--animate-delay) *4) } .animate__animated.animate__delay-5s { -webkit-animation-delay: calc(var(--animate-delay) *5); animation-delay: calc(var(--animate-delay) *5) } .animate__animated.animate__faster { -webkit-animation-duration: calc(var(--animate-duration)/ 2); animation-duration: calc(var(--animate-duration)/ 2) } .animate__animated.animate__fast { -webkit-animation-duration: calc(var(--animate-duration) *.8); animation-duration: calc(var(--animate-duration) *.8) } .animate__animated.animate__slow { -webkit-animation-duration: calc(var(--animate-duration) *2); animation-duration: calc(var(--animate-duration) *2) } .animate__animated.animate__slower { -webkit-animation-duration: calc(var(--animate-duration) *3); animation-duration: calc(var(--animate-duration) *3) } .animate__bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom } .animate__flash { -webkit-animation-name: flash; animation-name: flash } .animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } .animate__rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand } .animate__shakeX { -webkit-animation-name: shakeX; animation-name: shakeX } .animate__shakeY { -webkit-animation-name: shakeY; animation-name: shakeY } .animate__headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake } .animate__swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } .animate__tada { -webkit-animation-name: tada; animation-name: tada } .animate__wobble { -webkit-animation-name: wobble; animation-name: wobble } .animate__jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center } .animate__heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: calc(var(--animate-duration) *1.3); animation-duration: calc(var(--animate-duration) *1.3); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } .animate__backInDown { -webkit-animation-name: backInDown; animation-name: backInDown } .animate__backInLeft { -webkit-animation-name: backInLeft; animation-name: backInLeft } .animate__backInRight { -webkit-animation-name: backInRight; animation-name: backInRight } .animate__backInUp { -webkit-animation-name: backInUp; animation-name: backInUp } .animate__backOutDown { -webkit-animation-name: backOutDown; animation-name: backOutDown } .animate__backOutLeft { -webkit-animation-name: backOutLeft; animation-name: backOutLeft } .animate__backOutRight { -webkit-animation-name: backOutRight; animation-name: backOutRight } .animate__backOutUp { -webkit-animation-name: backOutUp; animation-name: backOutUp } .animate__bounceIn { -webkit-animation-duration: calc(var(--animate-duration) *.75); animation-duration: calc(var(--animate-duration) *.75); -webkit-animation-name: bounceIn; animation-name: bounceIn } .animate__bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } .animate__bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } .animate__bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } .animate__bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp } .animate__bounceOut { -webkit-animation-duration: calc(var(--animate-duration) *.75); animation-duration: calc(var(--animate-duration) *.75); -webkit-animation-name: bounceOut; animation-name: bounceOut } .animate__bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown } .animate__bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft } .animate__bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight } .animate__bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp } .animate__fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } .animate__fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } .animate__fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig } .animate__fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } .animate__fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } .animate__fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } .animate__fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } .animate__fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } .animate__fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig } .animate__fadeInTopLeft { -webkit-animation-name: fadeInTopLeft; animation-name: fadeInTopLeft } .animate__fadeInTopRight { -webkit-animation-name: fadeInTopRight; animation-name: fadeInTopRight } .animate__fadeInBottomLeft { -webkit-animation-name: fadeInBottomLeft; animation-name: fadeInBottomLeft } .animate__fadeInBottomRight { -webkit-animation-name: fadeInBottomRight; animation-name: fadeInBottomRight } .animate__fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut } .animate__fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } .animate__fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } .animate__fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } .animate__fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } .animate__fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } .animate__fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } .animate__fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } .animate__fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } .animate__fadeOutTopLeft { -webkit-animation-name: fadeOutTopLeft; animation-name: fadeOutTopLeft } .animate__fadeOutTopRight { -webkit-animation-name: fadeOutTopRight; animation-name: fadeOutTopRight } .animate__fadeOutBottomRight { -webkit-animation-name: fadeOutBottomRight; animation-name: fadeOutBottomRight } .animate__fadeOutBottomLeft { -webkit-animation-name: fadeOutBottomLeft; animation-name: fadeOutBottomLeft } .animate__animated.animate__flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } .animate__flipInX, .animate__flipInY, .animate__flipOutX, .animate__flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX } .animate__flipInY, .animate__flipOutX, .animate__flipOutY { -webkit-animation-name: flipInY; animation-name: flipInY } .animate__flipOutX, .animate__flipOutY { -webkit-animation-duration: calc(var(--animate-duration) *.75); animation-duration: calc(var(--animate-duration) *.75); -webkit-animation-name: flipOutX; animation-name: flipOutX } .animate__flipOutY { -webkit-animation-name: flipOutY; animation-name: flipOutY } .animate__lightSpeedInLeft, .animate__lightSpeedInRight { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } .animate__lightSpeedInLeft { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft } .animate__lightSpeedOutLeft, .animate__lightSpeedOutRight { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } .animate__lightSpeedOutLeft { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft } .animate__rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-transform-origin: center; transform-origin: center } .animate__rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom } .animate__rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom } .animate__rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom } .animate__rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom } .animate__rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; -webkit-transform-origin: center; transform-origin: center } .animate__rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom } .animate__rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom } .animate__rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom } .animate__rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom } .animate__hinge { -webkit-animation-duration: calc(var(--animate-duration) *2); animation-duration: calc(var(--animate-duration) *2); -webkit-animation-name: hinge; animation-name: hinge; -webkit-transform-origin: top left; transform-origin: top left } .animate__jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox } .animate__rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } .animate__rollOut { -webkit-animation-name: rollOut; animation-name: rollOut } .animate__zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn } .animate__zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown } .animate__zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft } .animate__zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight } .animate__zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp } .animate__zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut } .animate__zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; -webkit-transform-origin: center bottom; transform-origin: center bottom } .animate__zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; -webkit-transform-origin: left center; transform-origin: left center } .animate__zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; -webkit-transform-origin: right center; transform-origin: right center } .animate__zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; -webkit-transform-origin: center bottom; transform-origin: center bottom } .animate__slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown } .animate__slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } .animate__slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight } .animate__slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp } .animate__slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown } .animate__slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft } .animate__slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight } .animate__slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } *, ::after, ::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: inherit } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit } a { color: inherit; text-decoration: inherit; overflow-wrap: break-word; -webkit-transition: color .3s; transition: color .3s } b, strong { font-weight: bolder } code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -webkit-font-feature-settings: normal; -moz-font-feature-settings: normal; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative } sub { bottom: -.25em } sup { top: -.5em } table { text-indent: 0; border-color: inherit; border-collapse: collapse; border-spacing: 0 } button, input, optgroup, select, textarea { font-family: inherit; -webkit-font-feature-settings: inherit; -moz-font-feature-settings: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; border: 0 } button, select { text-transform: none } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button; background-color: transparent; background-image: none } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } ::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } summary { display: list-item } .render blockquote p, blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, p, pre { margin: 0 } body, fieldset, menu, ol, ul { margin: 0; padding: 0 } dialog, legend { padding: 0 } menu, ol, ul { list-style: none } textarea { resize: vertical } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { opacity: 1; color: #9ca3af } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: #9ca3af } input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; color: #9ca3af } input::-ms-input-placeholder, textarea::-ms-input-placeholder { opacity: 1; color: #9ca3af } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af } [role=button], button { cursor: pointer } :disabled { cursor: default } audio, canvas, embed, iframe, img, object, svg, video { vertical-align: middle } img, video { max-width: 100%; height: auto; -webkit-transition: -webkit-transform .25s; transition: -webkit-transform .25s; transition: transform .25s; transition: transform .25s, -webkit-transform .25s; -o-object-fit: cover; object-fit: cover } [hidden] { display: none } html[data-color-scheme=light] { --text-color: rgb(76, 73, 72); --mask-color: rgba(255, 255, 255, 0.6); --button-text-color: rgb(255, 255, 255); --button-background-color: var(--theme); --button-hover-background-color: #79c6f8; --cd-background-color: #f6f8fa; --cd-border-color: #e3e8f7; --cd-data-background-color: #fff; --cd-data-num-text-color: #1f2d3d; --above-mask-color: rgba(0, 0, 0, 0.5); --above-title-color: rgb(255, 255, 255); --card-background-color: rgb(255, 255, 255); --h-color: #1f2d3d; --code-color: #ed2929; --code-background-color: rgba(27, 31, 35, 0.05); --blockquote-background-color: rgba(73, 177, 245, 0.1); --blockquote-font-color: #6a737d; --table-border-color: #e3e3e3; --code-toolbar-box-shadow: 0 5px 10px 0 rgba(187, 193, 197, 0.4); --code-loading-background-color: white; --img-filter: none; --cpy-border-color: rgba(235, 229, 248, 0.231372549); --cpy-background-color: rgba(240, 240, 240, 0.8); --cpy-text-color: #1f2d3d } html[data-color-scheme=dark] { --text-color: rgba(255, 255, 255, 0.7); --mask-color: rgba(0, 0, 0, 0.6); --button-text-color: rgba(255, 255, 255, 0.7); --button-background-color: var(--theme); --button-hover-background-color: #fff; --cd-background-color: #121212; --cd-border-color: #3d3d3f; --cd-data-background-color: #1b1c20; --cd-data-num-text-color: rgba(255, 255, 255, 0.9); --above-mask-color: rgba(0, 0, 0, 0.6); --above-title-color: rgba(255, 255, 255, 0.9); --card-background-color: rgba(40, 47, 62, 0.9); --h-color: rgba(255, 255, 255, 0.9); --code-color: #ed2929; --code-background-color: #584d4d; --blockquote-background-color: rgb(35, 35, 35); --blockquote-font-color: rgba(255, 255, 255, 0.7); --table-border-color: rgba(101, 101, 101, 0.7019607843); --code-toolbar-box-shadow: 0 5px 10px 0 rgba(28, 29, 29, 0.4); --code-loading-background-color: rgb(61, 57, 57); --img-filter: brightness(0.9) contrast(0.8); --cpy-border-color: rgba(33, 35, 37, 0.9); --cpy-background-color: rgba(33, 35, 37, 0.9); --cpy-text-color: rgba(255, 255, 255, 0.9) } body { font-family: "Butterfly Font", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-size: 14px; line-height: 2; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overflow-y: overlay; scroll-behavior: smooth; padding-bottom: env(safe-area-inset-bottom); background: var(--body-background); color: var(--text-color) } #Butterfly { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh } #Butterfly>.mask { position: fixed; display: none; z-index: 100; width: 100%; height: 100%; background-color: var(--mask-color); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transform-style: preserve-3d } #Butterfly>.mask.active { -webkit-animation: .6s m_show; animation: .6s m_show } #Butterfly>.mask.hide { -webkit-animation: .6s m_hide; animation: .6s m_hide } #Butterfly img[data-lazy-src]:not(.loaded, .error, .loading) { -webkit-filter: blur(50px) brightness(1); filter: blur(50px) brightness(1) } ::-webkit-scrollbar { height: 6px; width: 6px } ::-webkit-scrollbar-thumb { background: var(--theme); cursor: var(--cursor-pointer) } ::-webkit-scrollbar-track { background-color: transparent } ::-moz-selection { color: #fff; background-color: #00c4b6 } ::selection { color: #fff; background-color: #00c4b6 } .message-container { z-index: 10000; position: fixed; height: 0; overflow: visible; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; top: 12px; left: 0; right: 0 } .message-wrapper { margin: 0 0 8px; z-index: 0; -webkit-transform-origin: top center; transform-origin: top center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex } .button, .empty, .message-item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center } .message-item { padding: .3rem .8rem; border-radius: 3px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; overflow: hidden; max-width: 720px; color: #333639; background-color: #fff; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05) } .message-item svg { width: 20px; height: 20px; margin-right: 8px } .button, .empty { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center } .button, hr { position: relative } .button { border-radius: 10px; background-color: var(--theme); color: var(--button-text-color); -webkit-transition: -webkit-filter .35s, -webkit-transform .35s; transition: -webkit-filter .35s, -webkit-transform .35s; transition: filter .35s, transform .35s; transition: filter .35s, transform .35s, -webkit-filter .35s, -webkit-transform .35s } .button:active { -webkit-transform: scale(.96); transform: scale(.96) } .button:hover { -webkit-filter: hue-rotate(100deg); filter: hue-rotate(100deg) } hr { margin: 30px auto; border: 1px dashed var(--theme); width: calc(100% - 5px); height: 0; overflow: visible } .side-bar, .toc { overflow-y: auto } hr::before { font-family: "Font Awesome 6 Pro", serif; font-weight: 900; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; position: absolute; top: -10px; left: 5%; z-index: 1; color: var(--theme); content: "\f2dc"; font-size: 18px; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out } a:hover { color: var(--link-hover-color) } .empty { -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px 5px; color: #888; text-align: center } .empty-svg { width: 90px; height: 90px; margin-bottom: 20px; fill: currentColor } .side-bar { position: fixed; top: 0; right: -300px; z-index: 110; overflow-x: hidden; width: 300px; height: 100%; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; background-color: var(--cd-background-color); border-left: 1px solid var(--cd-border-color); border-radius: 12px 0 0 12px } .copy-right>div, .main .aside-category>.content>.link>span, .side-bar .bar-children--link, .side-bar .bar-item>.link, .side-bar>.site-data>.item>.num { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .header .nav-do .menu-item .fa-chevron-down, .side-bar>.avatar { -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s } .side-bar .bar-children--link, .side-bar .bar-item>.link, .side-bar>.site-data { background-color: var(--cd-data-background-color) } .side-bar.active { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } .side-bar>.avatar { display: block; height: 100px; width: 100px; border-radius: 50%; border: 5px solid #fff; -webkit-filter: none; filter: none; -o-object-fit: cover; object-fit: cover; margin: 20px auto } .side-bar>.site-data { display: table; table-layout: fixed; padding: 5px; border: 1px solid var(--cd-border-color); border-radius: 8px; margin: 0 auto; width: 90%; text-align: center } .side-bar>.site-data>.item { display: table-cell } .side-bar>.site-data>.item>.num { display: block; margin-top: -.32em; font-size: 1.4em; color: var(--cd-data-num-text-color) } .side-bar .bar { padding: 0 20px } .side-bar .bar-item { margin: 10px 0 } .side-bar .bar-item.active .bar-children { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex } .side-bar .bar-item.active .fa-chevron-left { -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } .side-bar .bar-item>.link { border-radius: 8px; border: 1px solid var(--cd-border-color); padding: 8px 28px; font-size: 1.2em; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: baseline; -moz-box-align: baseline; -ms-flex-align: baseline; align-items: baseline } .side-bar .bar-item>.link>.name { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 8px } .side-bar .bar-item>.link>i { -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out } .side-bar .bar-children { padding: 8px 6px 0; display: none; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row } .side-bar .bar-children--item { width: calc(50% - 8px); margin: 4px } .side-bar .bar-children--link { display: block; border-radius: 8px; border: 1px solid var(--cd-border-color); text-align: center; font-size: 1.1em; padding: 3px } .header .nav-do .link::after, .side-btn { opacity: 0; -webkit-transition: opacity .5s, -webkit-transform .5s; transition: opacity .5s, -webkit-transform .5s; transition: opacity .5s, transform .5s; transition: opacity .5s, transform .5s, -webkit-transform .5s } .side-btn { right: -48px; bottom: 40px; position: fixed; z-index: 80 } .side-btn.active { opacity: 1; -webkit-transform: translateX(-58px); transform: translateX(-58px) } .side-btn>.button { margin: .5rem 0; width: 35px; height: 35px; font-size: .9rem; -webkit-transition: .3s; transition: .3s } .header .nav { width: 100%; height: 60px; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 0 38px; font-size: 1.15rem; -webkit-animation: 1.2s nav-down; animation: 1.2s nav-down; z-index: 90; -webkit-transition: .5s; transition: .5s; will-change: opacity, transform; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: nowrap; flex-wrap: nowrap } .header .nav-title { -webkit-transition: color .5s; transition: color .5s; color: var(--nav-font-color) } .header .nav-title .link { font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, .15) } .header .nav.style { position: fixed; z-index: 91; top: -60px; background-color: var(--nav-active-background-color); -webkit-box-shadow: var(--nav-active-shadow); box-shadow: var(--nav-active-shadow); -webkit-transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out; transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out; transition: transform .2s ease-in-out, opacity .2s ease-in-out; transition: transform .2s ease-in-out, opacity .2s ease-in-out, -webkit-transform .2s ease-in-out } .header .nav.active { -webkit-transition: .5s; transition: .5s; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } .header .nav-do { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row } .header .nav-do .link { display: block; position: relative; height: 60px; text-shadow: 1px 1px 2px rgba(0, 0, 0, .3); font-size: .85em; line-height: 60px; text-align: center } .header .nav-do .link::after { position: absolute; left: 0; right: 0; bottom: 16px; content: ""; height: 3px; -webkit-transform: scaleX(.25); transform: scaleX(.25); background: var(--theme); border-radius: 2px 2px 0 0 } .header .nav-do, .header .nav-do .link:hover { color: var(--nav-font-color) } .header .nav-do .link:hover::after, .render a:hover:after { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } .header .nav-do .link:hover .fa-chevron-down { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .header .nav-do .link i { font-size: 1em } .header .nav-do, .header .nav-do .controls, .header .nav-do .menu { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center } .header .nav-do .controls .bars { display: none } .header .nav-do .menu-item { margin-left: 24px } .header .nav-do .menu-item:hover .menu-children { visibility: visible; opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1) } .header .nav-do .menu-children { position: absolute; opacity: 0; visibility: hidden; width: -webkit-max-content; width: -moz-max-content; width: max-content; border-radius: 5px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .15); box-shadow: 0 0 10px rgba(0, 0, 0, .15); background-color: var(--nav-dropdown-background-color); -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; transform-origin: top; -webkit-transition: opacity .2s ease-out, visibility .1s ease-out, -webkit-transform .3s ease-out; transition: opacity .2s ease-out, visibility .1s ease-out, -webkit-transform .3s ease-out; transition: transform .3s ease-out, opacity .2s ease-out, visibility .1s ease-out; transition: transform .3s ease-out, opacity .2s ease-out, visibility .1s ease-out, -webkit-transform .3s ease-out } .header .nav-do .menu-children--item { -webkit-transition: background-color .3s; transition: background-color .3s } .header .nav-do .menu-children--item:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px } .header .nav-do .menu-children--item:last-child { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px } .header .nav-do .menu-children--item:hover, .toc .is-active-link::before { background-color: var(--theme) } .header .nav-do .menu-children--link { display: block; padding: 8px 18px; font-size: .9rem; color: var(--nav-dropdown-font-color); width: 100% } .header .nav-do .menu-children--link:hover { color: var(--nav-dropdown-hover-font-color) } .header .nav:is(.style) .nav-do, .header .nav:is(.style) .nav-title { color: var(--nav-active-font-color) } .header .nav:is(.style) .nav-do .link, .header .nav:is(.style) .nav-title .link { text-shadow: none } .header .nav:is(.style) .nav-do .link:hover, .header .nav:is(.style) .nav-title .link:hover { color: var(--nav-active-hover-font-color) } .header, .header .above { position: relative; width: 100% } .header { min-height: 60px } .header .above { height: 500px; background-position: center center; background-size: cover; background-repeat: no-repeat; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: .35s; transition: .35s; background-blend-mode: multiply; background-color: var(--above-mask-color); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center } .header .above-info { width: 100%; position: absolute; padding: 0 10px; text-align: center } .header .above-title { font-size: 2.3em; text-shadow: 2px 2px 4px rgba(0, 0, 0, .15); line-height: 1.5; font-weight: 700; color: var(--above-title-color); -webkit-animation: 1s above-title-scale; animation: 1s above-title-scale } .header.dp .nav { background-color: var(--nav-active-background-color); -webkit-box-shadow: var(--nav-active-shadow); box-shadow: var(--nav-active-shadow) } .header.dp .nav .link { text-shadow: none; color: var(--nav-active-font-color) } .main .aside .card { padding: 16px 23px } .main .aside .card:not(:first-child) { margin-top: 15px } .main .aside .card>.title { font-size: 1rem; font-weight: 600; margin-bottom: 5px } .main .aside .card>.title>i { margin-right: 2px; font-size: 1.1rem } .main .aside-user { text-align: center } .main .aside-user>.avatar { width: 110px; height: 110px; border-radius: 70px; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; margin: 0 auto } .main .aside-user>.avatar:hover { -webkit-filter: brightness(1.2); filter: brightness(1.2); -webkit-transform: rotate(360deg); transform: rotate(360deg); cursor: var(--cursor-pointer) } .main .aside-user>.name { font-size: 1.5rem; margin: 6px 0 -5px } .main .aside-user>.data { display: table; margin: 14px 0 4px; table-layout: fixed; width: 100% } .main .aside-user>.data .item { display: table-cell } .main .aside-user>.data .headline { font-size: 1rem } .main .aside-user>.data .num { font-size: 1.4rem; color: var(--text-obs-color) } .main, .main .aside-user>a>.button { width: 95%; margin: 0 auto; padding: 5px 10px } .main .aside-user .social { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1; margin: 15px 0 0 } .main .aside-user .social>.link { font-size: 1.35em; margin: 0 8px; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s } .main .aside-user .social>.link:hover { -webkit-transform: scale(1.1); transform: scale(1.1) } .main .aside-notice>.title>i { color: #f60808 } .main .aside-category>.title>i { color: #108aec } .main .aside-category>.content>.link { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 3px 10px 3px 25px } .main .aside-category>.content>.link:hover { -webkit-filter: hue-rotate(38deg); filter: hue-rotate(38deg) } .main .aside-category>.content>.link:hover .name { -webkit-transform: translateX(5px); transform: translateX(5px) } .main .aside-category>.content>.link:before { position: absolute; top: 8px; left: 0; width: 14px; height: 14px; border: 4px solid var(--theme); border-radius: 50%; background: 0 0; content: ""; cursor: var(--cursor-pointer); -webkit-transition: border-color .3s, -webkit-box-shadow .25s; transition: border-color .3s, -webkit-box-shadow .25s; transition: border-color .3s, box-shadow .25s; transition: border-color .3s, box-shadow .25s, -webkit-box-shadow .25s } .main .aside-category>.content>.link>.name { width: 75%; margin-right: auto; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s } .main .aside-tags>.title>i { color: #cf9128 } .main .aside-tags>.content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap } .main .aside-tags>.content>.link { -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; padding: 0 4px } .main .aside-tags>.content>.link>.num { font-size: .7rem } .main .aside-tags>.content>.link:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px) } .main .aside-webInfo>.title>i { color: #30b786 } .main .aside-webInfo .content>.item { padding: 5px 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .main { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 1250px; padding: 28px 15px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row } .main .card { background-color: var(--card-background-color); border-radius: var(--card-border-radius); -webkit-box-shadow: var(--card-box-shadow); box-shadow: var(--card-box-shadow); -webkit-transition: -webkit-transform .25s, -webkit-box-shadow .25s; transition: -webkit-transform .25s, -webkit-box-shadow .25s; transition: transform .25s, box-shadow .25s; transition: transform .25s, box-shadow .25s, -webkit-transform .25s, -webkit-box-shadow .25s } .main .card:hover { -webkit-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09); box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09) } .main>.content { width: 100%; -ms-flex-item-align: start; align-self: flex-start; padding: 1.5rem; min-height: 500px } .main>.aside { width: 25%; -ms-flex-item-align: start; align-self: flex-start } .main.off-aside>.content { width: 100% } .main.aside-left { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -moz-box-orient: horizontal; -moz-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse } .main.aside-left>.content, .main.aside-right>.content { width: 74% } .main.aside-right { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row } .main:is(.aside-left) .aside { margin-right: 18px } .main:is(.aside-right) .aside { margin-left: 18px } .footer { text-align: center; padding: 1.5rem 1rem } .footer .halo { color: #2f55d4 } .footer .theme, .footer a:hover, .render a { color: var(--theme) } .footer .police { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center } .footer .police img { -webkit-transition: none; transition: none; margin-right: 5px; top: -2px } .main .aside { -ms-flex-item-align: auto; align-self: auto } .render { padding-bottom: 1.2rem; word-break: break-word; overflow-wrap: break-word } .render h1, .render h2, .render h3, .render h4, .render h5, .render h6 { color: var(--h-color); font-weight: 700; margin-bottom: 5px; position: relative } .render h1 { font-size: 1.5em } .render h2 { font-size: 1.4em } .render h3 { font-size: 1.3em } .render h4 { font-size: 1.2em } .render h5 { font-size: 1.1em } .render h6 { font-size: 1em } .render p { min-height: 30px; margin-bottom: 15px } .render a { position: relative; display: inline-block; font-weight: 400 } .render a:after { position: absolute; left: 0; right: 0; opacity: 0; content: ""; bottom: 5px; height: 1px; -webkit-transform: scaleX(.25); transform: scaleX(.25); background: var(--theme); -webkit-transition: opacity .5s, -webkit-transform .5s; transition: opacity .5s, -webkit-transform .5s; transition: opacity .5s, transform .5s; transition: opacity .5s, transform .5s, -webkit-transform .5s; width: 95%; margin: auto } .render ol, .render ul { margin: 10px 0; padding-left: 30px } .render ol>li, .render ul>li { line-height: 35px } .render ul>li { list-style: circle } .render ul>li::marker { color: var(--theme); font-weight: 600; font-size: 1.5em } .render ol>li { list-style: decimal } .render code:not([class]) { -webkit-user-select: all; -moz-user-select: all; user-select: all; background-color: var(--code-background-color); color: var(--code-color); display: inline-block; margin: 4px 6px; padding: 3px 7px; white-space: normal; text-indent: 0; vertical-align: baseline; word-break: break-word; border-radius: 4px; line-height: 1.3 } .render blockquote, .render span[data-fancybox=fancyBoxImg], .render table, .render video { margin-bottom: 15px } .render blockquote { padding: 10px 15px; border-left: 4px solid var(--theme); background-color: var(--blockquote-background-color); color: var(--blockquote-font-color); border-radius: 5px } .render img, .render video { border-radius: 5px } .render img { max-width: 100%; -webkit-filter: var(--img-filter); filter: var(--img-filter); cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; -webkit-transition: -webkit-transform .35s, -webkit-box-shadow .35s; transition: -webkit-transform .35s, -webkit-box-shadow .35s; transition: transform .35s, box-shadow .35s; transition: transform .35s, box-shadow .35s, -webkit-transform .35s, -webkit-box-shadow .35s } .render img:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 34px 20px -24px rgba(136, 161, 206, .3); box-shadow: 0 34px 20px -24px rgba(136, 161, 206, .3) } .render hr { margin: 15px 0 } .render table { width: 100%; display: table; empty-cells: show; border-radius: 4px !important } .render table tr>td, .render table tr>th { padding: 5px 10px !important; border-color: var(--table-border-color) !important; vertical-align: middle; border-style: solid; border-width: 1px } .render table tr>th { background-color: rgba(153, 169, 191, .1) !important } .render table tr>td, .render table tr>td>code:not([class]) { white-space: nowrap } .render ul[class*=task-list] li, .render ul[data-type*=taskList] li { margin-left: -16px; list-style: none } .render ul[class*=task-list] div, .render ul[class*=task-list] input, .render ul[class*=task-list] p, .render ul[class*=task-list]>label, .render ul[data-type*=taskList] div, .render ul[data-type*=taskList] input, .render ul[data-type*=taskList] p, .render ul[data-type*=taskList]>label { display: inline-block } .render ul[class*=task-list] label, .render ul[data-type*=taskList] label { position: relative; margin-right: 8px; top: 2.6px; display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .render ul[class*=task-list] label input, .render ul[data-type*=taskList] label input { position: absolute; opacity: 0; cursor: var(--cursor-pointer); height: 0; width: 0 } .render ul[class*=task-list] label input:checked~span, .render ul[data-type*=taskList] label input:checked~span { background-color: #32cd32; border-radius: 5px; -webkit-transition: .15s; transition: .15s } .render ul[class*=task-list] label input:checked~span:after, .render ul[data-type*=taskList] label input:checked~span:after { display: block } .render ul[class*=task-list] label span, .render ul[data-type*=taskList] label span { display: inline-block; position: relative; top: 0; left: 0; height: 16px; width: 16px; background-color: #ccc; border-radius: 5px; -webkit-transition: .15s; transition: .15s; cursor: var(--cursor-pointer) } .render ul[class*=task-list] label span:after, .render ul[data-type*=taskList] label span:after { content: ""; position: absolute; display: none; left: 5px; top: 3px; width: 6px; height: 8px; border: solid #fff; border-width: 0 .15em .15em 0; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .render.enable_h_icon h1:before, .render.enable_h_icon h2:before, .render.enable_h_icon h3:before, .render.enable_h_icon h4:before, .render.enable_h_icon h5:before, .render.enable_h_icon h6:before { font-family: "Font Awesome 6 Pro", serif; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; content: "\e3c2"; color: var(--theme); margin-right: 7px; font-size: .9em } .toc { max-height: 500px } .toc::-webkit-scrollbar { height: 2px; width: 2px } .toc-list { overflow: hidden; position: relative; margin: 0; padding-left: 10px } .toc-list li { list-style: none } .toc-link { color: currentColor; height: 100% } .toc-link::before { background-color: #eee; content: " "; display: inline-block; height: inherit; left: 0; margin-top: -1px; position: absolute; width: 2px } .toc .is-collapsible { max-height: 1000px; overflow: hidden; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out } .toc .is-collapsed { max-height: 0 } .toc .is-position-fixed { position: fixed !important; top: 0 } .toc .is-active-link { font-weight: 700; color: var(--theme) } .sticky { position: sticky; } .is-sticky { top: 20px; -webkit-transition: top .3s; transition: top .3s; } .side-btn .h5-toc { visibility: hidden; -webkit-transition: visibility .3s; transition: visibility .3s } .copy-right { margin: 25px 0; padding: 10px 16px; border: 1px solid var(--cpy-border-color); -webkit-transition: -webkit-box-shadow .2s, -webkit-transform .2s; transition: -webkit-box-shadow .2s, -webkit-transform .2s; transition: box-shadow .2s, transform .2s; transition: box-shadow .2s, transform .2s, -webkit-box-shadow .2s, -webkit-transform .2s; background-color: var(--cpy-background-color); border-radius: 8px; color: var(--cpy-text-color); position: relative } .copy-right>i.fa-copyright { position: absolute; font-size: 1.5em; color: var(--theme); right: 10px; top: 10px } .copy-right a { color: var(--theme) } @media (prefers-reduced-motion:reduce), print { .animate__animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important } .animate__animated[class*=Out] { opacity: 0 } } @media (max-width:768px) { .header .nav { padding: 0 16px } .header .nav-do .controls .link { padding: 0 2px; font-size: 1em } .header .nav-do .controls .link .name, .header .nav-do .menu { display: none } .header .nav-do .controls .bars { display: block; margin-left: 7px } .header .above-title { font-size: 1.85em } .main>.content { padding: 1.2rem .8rem } .main { padding: 18px 8px } .copy-right>div { font-size: .8rem } } @media (max-width:1100px) { #Butterfly .main { -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column } #Butterfly .main>.content { width: 100% } #Butterfly .main>.aside { width: 100%; margin: 20px 0 0 } .is-sticky .aside-toc { display: none; position: fixed; bottom: 133px; z-index: 200; max-width: 380px; max-height: calc(100% - 60px); width: calc(100% - 80px); -webkit-transition: -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; -webkit-transform-origin: right bottom; transform-origin: right bottom; right: 55px } .side-btn .h5-toc { visibility: visible } } @media (min-width:2000px) { .main { max-width: 60% } }