@charset "utf-8";
/* CSS Reset
-------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, strong, small, dl, dt, dd, ol, ul, li, fieldset, form, input, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; font-size: 100%; }
img, fieldset, button { border: 0; }
article, aside, figcaption, figure, video, audio, footer, header, hgroup, menu, nav, section { display: block; }
body, input, button, textarea, select, table { line-height: 1.67; font-size: 16px; color: #555; font-family: Helvetica, Arial, sans-serif, "微軟正黑體";}
ol, ul { list-style: none; }
a { text-decoration: none; color: #555; transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; }
a:hover, a:focus, a:active { text-decoration: underline; color: #555; }
img { vertical-align: middle; }
button, label { cursor: pointer; }
button::-moz-focus-inner, input::-moz-focus-inner {
padding:0;
border:0;
}
table { border-collapse: collapse; border-spacing: 0; }
caption, legend { width: 0; height: 0; font-size: 0; line-height: 0; text-indent: -9999px; visibility: hidden; }
/* Reserved Class
-------------------------------------------------------------- */
.blind { width: 1px; height: 1px; font-size: 0; line-height: 0; position: absolute; top: 0; left: -1000%; overflow: hidden; }
.show { display: block; }
.hide { display: none; }
.fL { float: left; }
.fR { float: right; }
.clearFix { zoom: 1; }
.clearFix:after { clear: both; display: block; content: ''; }
.sprSet { background: url(../images/spr_set.png) no-repeat; text-indent: -9999px; display: block; }
/* Styles
-------------------------------------------------------------- */
html, body { width: 100%; height: 100%; }
body { background: #000; }
#wrap { min-width: 1260px; margin: 0 auto; position: relative; }
.innerWrap { width: 1260px; margin: 0 auto; position: relative; }
#header { width: 100%; position: absolute; left: 0; top: 24px; z-index: 10; }
#header .logo { position: absolute; left: 30px; top: 0; z-index: 10; }
#header .logo h1 { margin: 0 48px 0 0; float: left; }
#header .logo h1 a { width: 190px; height: 90px; background-position: 0 0; }
#header .aside { position: absolute; right: 18px; top: 21px; z-index: 10; }
#header .aside .list li { margin: 0 3px 0 0; float: left; }
#header .aside .list li a { height: 44px; }
#header .aside .list a.btnStart { width: 178px; background-position: -1322px -21px; }
#header .aside .list a.btnHome { width: 30px; background-position: -1222px -21px; }
#header .aside .list a.btnFacebook { width: 30px; background-position: -1255px -21px; }
#header .aside .list a.btnTwitter { width: 30px; background-position: -1289px -21px; }
#header .aside .list li.scale a { transition: all .2s ease-in-out; }
#header .aside .list li.scale a:hover { transform: scale(1.2); }
#container { overflow: hidden; }
.section { width: 100%; height: 1080px; position: relative; }


.swiper-container {
        width: 100%;
        height: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.slide { background-repeat:no-repeat; background-position: center center;}
.slide1 { background-image:url(../images/slide1.jpg)}
.slide2 { background-image:url(../images/slide2.jpg)}
.slide3 { background-image:url(../images/slide3.jpg)}
.slide4 { background-image:url(../images/slide4.jpg)}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next,
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    background-image: none;
    opacity: .75;
    display: block;
	background-image:none;
}
.swiper-button-next {
    right: 35px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}
.swiper-button-prev {
    left: 215px;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    background: rgba(255,255,255,.5);
    opacity: 1;
    box-shadow: 0 0 20px #000;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 20px;
}

.youtube { position:absolute; top:374px; left:755px; border:solid 5px #fff; box-shadow: 0 0 10px #000;}

#container .video video, #container .video img { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
.no-video .video .bg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.no-video #section0 .bg { background: url(../images/bg_media_poster0.jpg) 50% 0 no-repeat; }
.no-video #section1 .bg { background: url(../images/bg_media_poster1.jpg) 50% 0 no-repeat; }
.no-video #section2 .bg { background: url(../images/bg_media_poster2.jpg) 50% 0 no-repeat; }
#container .video .img { display: none; }
.section .inner { position: absolute; left: 50%; top: 50%; margin: -262px 0 0 -630px; }
.obj { text-indent: -9999px; position: absolute; visibility: hidden; z-index: 9; }
#section0 .obj1 { width: 1260px; height: 660px; background: url(../images/img_section0_obj1.png) no-repeat; left: 0; top: 0; }
#section0 .obj2 { width: 1260px; height: 660px; background: url(../images/img_section0_obj2.png) no-repeat; left: 0; top: 0; }
#section0 .more {filter: brightness(70%); width: 174px; height: 56px; background: url(../images/more.png) no-repeat; left: 650px; top: 440px; transition: all ease .3s; /*animation: downBul 1.5s infinite ease-in-out;*/ }
#section0 .more:hover  { filter: brightness(110%);}
#section0 .more a { display:block; height:100%; text-indent:-9999em; }
.mask { position:absolute;}

#section1 .more {filter: brightness(90%); width: 284px; height: 107px;  left: 1250px; top: 604px; transition: all ease .3s; /*animation: downBul 1.5s infinite ease-in-out;*/ }
#section1 .more.more_1_1 {background: url(../images/more_1_1.png) no-repeat;}
#section1 .more.more_1_2 {background: url(../images/more_1_2.png) no-repeat;}
#section1 .more.more_1_3 {background: url(../images/more_1_3.png) no-repeat;}
#section1 .more:hover  { filter: brightness(110%);}
#section1 .more a { display:block; height:100%; text-indent:-9999em; }

#section2  { background: url(../images/bg_media_poster2.jpg) no-repeat; }
#section2 .more {filter: brightness(70%); width: 182px; height: 74px; background: url(../images/more_2.png) no-repeat; left: 1340px; top: 800px; transition: all ease .3s; /*animation: downBul 1.5s infinite ease-in-out;*/ }
#section2 .more:hover  { filter: brightness(110%);}
#section2 .more a { display:block; height:100%; text-indent:-9999em; }

@keyframes downBul { 0% {
transform: translateY(0);
}
50% {
transform: translateY(15px);
}
100% {
transform: translateY(0);
}
}
#section1 .obj1 { width: 1424px; height: 887px; background: url(../images/img_section1_obj1.png) no-repeat; left: -163px; top: -176px; }
#section1 .obj2 { width: 1260px; height: 524px; background: url(../images/img_section1_obj2.png) no-repeat; left: 0; top: 0; }
#section1 .btnItem { width: 196px; height: 44px; left: 186px; top: 329px; z-index: 50; }
#section1 .btnNotice { width: 134px; height: 37px; left: 138px; top: 430px; z-index: 50; }
#layerItem { width: 439px; height: 421px; background: url(../images/img_layer_item.jpg) no-repeat; position: absolute; left: 386px; top: 45px; z-index: 90; }
#section2 .obj1 { width: 1260px; height: 524px; background: url(../images/img_section2_obj1.png) no-repeat; left: 0; top: -186px; }
#section2 .obj2 { width: 1260px; height: 524px; background: url(../images/img_section2_obj2.png) no-repeat; left: 0; top: -186px; }
.nav { position: absolute; right: 50px; top: 50%; margin: -83px 0 0 0; z-index: 10; }
.nav li { margin: 0 0 13px 0; }
.nav a { width: 115px; height: 41px; }
.nav .menu0 a { background-position: 0 -145px; }
.nav .menu1 a { background-position: 0 -199px; }
.nav .menu2 a { background-position: 0 -250px; }
.nav .menu0 a.on { background-position: -147px -145px; }
.nav .menu1 a.on { background-position: -147px -199px; }
.nav .menu2 a.on { background-position: -147px -250px; }
button.btnTrigger { width: 118px; height: 234px; position: absolute; top: 50%; margin-top: -157px; z-index: 10; outline: none; display: none; }
button.btnTrigger.prev { background-position: 0 -486px; left: 50px; }
button.btnTrigger.next { background-position: -135px -486px; right: 50px; }
.footer { width: 455px; height: 36px; background: url(../images/img_footer.png) no-repeat; text-indent: -9999px; position: absolute; left: 50%; bottom: 40px; margin-left: -227px; z-index: 10; }
iframe[name="google_conversion_frame"] { width: 1px; height: 1px; font-size: 0; line-height: 0; position: absolute; top: 0; left: -1000%; overflow: hidden; }
.btnA { background: url(../images/space.gif); text-indent: -9999px; position: absolute; }
.commonLayer { position: fixed; left: 50%; top: 50%; z-index: 1000; display: none; }
.commonLayer .btnClose { width: 80px; height: 80px; background: none; text-indent: -9999px; display: block; outline: none; position: absolute; right: 0; top: 0; }
.commonLayerHover { position: absolute; }
.commonLayerHover span { width: 40px; height: 40px; background: url(../images/space.gif); position: absolute; left: 0; top: 0; z-index: 10; cursor: pointer; display: block; }
.commonLayerHover img { display: none; position: absolute; }
.overlay { width: 100%; height: 100%; background: #000; opacity: 0.6; filter: alpha(opacity=60); position: fixed; left: 0; top: 0; z-index: 900; display: none; }
.overlayTop { width: 100%; height: 100%; background: #000; position: fixed; left: 0; top: 0; z-index: 999999; }
.pt-perspective { position: relative; width: 100%; height: 100%; -webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; }
.pt-page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
.pt-page-current, .pt-page-current .obj, .no-js .pt-page { visibility: visible; z-index: 1; }
.no-js body { overflow: auto; }
.pt-page-ontop { z-index: 999; }
.pt-page-moveToLeft { -webkit-animation: moveToLeft 1s ease both; animation: moveToLeft 1s ease both }
.pt-page-moveFromLeft { -webkit-animation: moveFromLeft 1s ease both; animation: moveFromLeft 1s ease both }
.pt-page-moveToRight { -webkit-animation: moveToRight 1s ease both; animation: moveToRight 1s ease both }
.pt-page-moveFromRight { -webkit-animation: moveFromRight 1s ease both; animation: moveFromRight 1s ease both }
.pt-page-moveToTop { -webkit-animation: moveToTop 1s ease both; animation: moveToTop 1s ease both }
.pt-page-moveFromTop { -webkit-animation: moveFromTop 1s ease both; animation: moveFromTop 1s ease both }
.pt-page-moveToBottom { -webkit-animation: moveToBottom 1s ease both; animation: moveToBottom 1s ease both }
.pt-page-moveFromBottom { -webkit-animation: moveFromBottom 1s ease both; animation: moveFromBottom 1s ease both }
.pt-page-fade { -webkit-animation: fade 1s ease both; animation: fade 1s ease both }
.pt-page-moveToLeftFade { -webkit-animation: moveToLeftFade 1s ease both; animation: moveToLeftFade 1s ease both }
.pt-page-moveFromLeftFade { -webkit-animation: moveFromLeftFade 1s ease both; animation: moveFromLeftFade 1s ease both }
.pt-page-moveToRightFade { -webkit-animation: moveToRightFade 1s ease both; animation: moveToRightFade 1s ease both }
.pt-page-moveFromRightFade { -webkit-animation: moveFromRightFade 1s ease both; animation: moveFromRightFade 1s ease both }
.pt-page-moveToTopFade { -webkit-animation: moveToTopFade 1s ease both; animation: moveToTopFade 1s ease both }
.pt-page-moveFromTopFade { -webkit-animation: moveFromTopFade 1s ease both; animation: moveFromTopFade 1s ease both }
.pt-page-moveToBottomFade { -webkit-animation: moveToBottomFade 1s ease both; animation: moveToBottomFade 1s ease both }
.pt-page-moveFromBottomFade { -webkit-animation: moveFromBottomFade 1s ease both; animation: moveFromBottomFade 1s ease both }
.pt-page-moveToLeftEasing { -webkit-animation: moveToLeft 1s ease-in-out both; animation: moveToLeft 1s ease-in-out both }
.pt-page-moveToRightEasing { -webkit-animation: moveToRight 1s ease-in-out both; animation: moveToRight 1s ease-in-out both }
.pt-page-moveToTopEasing { -webkit-animation: moveToTop 1s ease-in-out both; animation: moveToTop 1s ease-in-out both }
.pt-page-moveToBottomEasing { -webkit-animation: moveToBottom 1s ease-in-out both; animation: moveToBottom 1s ease-in-out both }
@-webkit-keyframes moveToLeft { to {
-webkit-transform:translateX(-100%)
}
}
@keyframes moveToLeft { to {
-webkit-transform:translateX(-100%);
transform:translateX(-100%)
}
}
@-webkit-keyframes moveFromLeft { from {
-webkit-transform:translateX(-100%)
}
}
@keyframes moveFromLeft { from {
-webkit-transform:translateX(-100%);
transform:translateX(-100%)
}
}
@-webkit-keyframes moveToRight { to {
-webkit-transform:translateX(100%)
}
}
@keyframes moveToRight { to {
-webkit-transform:translateX(100%);
transform:translateX(100%)
}
}
@-webkit-keyframes moveFromRight { from {
-webkit-transform:translateX(100%)
}
}
@keyframes moveFromRight { from {
-webkit-transform:translateX(100%);
transform:translateX(100%)
}
}
@-webkit-keyframes moveToTop { to {
-webkit-transform:translateY(-100%)
}
}
@keyframes moveToTop { to {
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
}
@-webkit-keyframes moveFromTop { from {
-webkit-transform:translateY(-100%)
}
}
@keyframes moveFromTop { from {
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
}
@-webkit-keyframes moveToBottom { to {
-webkit-transform:translateY(100%)
}
}
@keyframes moveToBottom { to {
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
}
@-webkit-keyframes moveFromBottom { from {
-webkit-transform:translateY(100%)
}
}
@keyframes moveFromBottom { from {
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
}
@-webkit-keyframes fade { to {
opacity:.3
}
}
@keyframes fade { to {
opacity:.3
}
}
@-webkit-keyframes moveToLeftFade { to {
opacity:.3;
-webkit-transform:translateX(-100%)
}
}
@keyframes moveToLeftFade { to {
opacity:.3;
-webkit-transform:translateX(-100%);
transform:translateX(-100%)
}
}
@-webkit-keyframes moveFromLeftFade { from {
opacity:.3;
-webkit-transform:translateX(-100%)
}
}
@keyframes moveFromLeftFade { from {
opacity:.3;
-webkit-transform:translateX(-100%);
transform:translateX(-100%)
}
}
@-webkit-keyframes moveToRightFade { to {
opacity:.3;
-webkit-transform:translateX(100%)
}
}
@keyframes moveToRightFade { to {
opacity:.3;
-webkit-transform:translateX(100%);
transform:translateX(100%)
}
}
@-webkit-keyframes moveFromRightFade { from {
opacity:.3;
-webkit-transform:translateX(100%)
}
}
@keyframes moveFromRightFade { from {
opacity:.3;
-webkit-transform:translateX(100%);
transform:translateX(100%)
}
}
@-webkit-keyframes moveToTopFade { to {
opacity:.3;
-webkit-transform:translateY(-100%)
}
}
@keyframes moveToTopFade { to {
opacity:.3;
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
}
@-webkit-keyframes moveFromTopFade { from {
opacity:.3;
-webkit-transform:translateY(-100%)
}
}
@keyframes moveFromTopFade { from {
opacity:.3;
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
}
@-webkit-keyframes moveToBottomFade { to {
opacity:.3;
-webkit-transform:translateY(100%)
}
}
@keyframes moveToBottomFade { to {
opacity:.3;
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
}
@-webkit-keyframes moveFromBottomFade { from {
opacity:.3;
-webkit-transform:translateY(100%)
}
}
@keyframes moveFromBottomFade { from {
opacity:.3;
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
}
.pt-page-scaleDown { -webkit-animation: scaleDown 1s ease both; animation: scaleDown 1s ease both }
.pt-page-scaleUp { -webkit-animation: scaleUp 1s ease both; animation: scaleUp 1s ease both }
.pt-page-scaleUpDown { -webkit-animation: scaleUpDown .5s ease both; animation: scaleUpDown .5s ease both }
.pt-page-scaleDownUp { -webkit-animation: scaleDownUp .5s ease both; animation: scaleDownUp .5s ease both }
.pt-page-scaleDownCenter { -webkit-animation: scaleDownCenter .4s ease-in both; animation: scaleDownCenter .4s ease-in both }
.pt-page-scaleUpCenter { -webkit-animation: scaleUpCenter .4s ease-out both; animation: scaleUpCenter .4s ease-out both }
@-webkit-keyframes scaleDown { to {
opacity:0;
-webkit-transform:scale(.8)
}
}
@keyframes scaleDown { to {
opacity:0;
-webkit-transform:scale(.8);
transform:scale(.8)
}
}
@-webkit-keyframes scaleUp { from {
opacity:0;
-webkit-transform:scale(.8)
}
}
@keyframes scaleUp { from {
opacity:0;
-webkit-transform:scale(.8);
transform:scale(.8)
}
}
@-webkit-keyframes scaleUpDown { from {
opacity:0;
-webkit-transform:scale(1.2)
}
}
@keyframes scaleUpDown { from {
opacity:0;
-webkit-transform:scale(1.2);
transform:scale(1.2)
}
}
@-webkit-keyframes scaleDownUp { to {
opacity:0;
-webkit-transform:scale(1.2)
}
}
@keyframes scaleDownUp { to {
opacity:0;
-webkit-transform:scale(1.2);
transform:scale(1.2)
}
}
@-webkit-keyframes scaleDownCenter { to {
opacity:0;
-webkit-transform:scale(.7)
}
}
@keyframes scaleDownCenter { to {
opacity:0;
-webkit-transform:scale(.7);
transform:scale(.7)
}
}
@-webkit-keyframes scaleUpCenter { from {
opacity:0;
-webkit-transform:scale(.7)
}
}
@keyframes scaleUpCenter { from {
opacity:0;
-webkit-transform:scale(.7);
transform:scale(.7)
}
}
.pt-page-rotateRightSideFirst { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateRightSideFirst .8s both ease-in; animation: rotateRightSideFirst .8s both ease-in }
.pt-page-rotateLeftSideFirst { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateLeftSideFirst .8s both ease-in; animation: rotateLeftSideFirst .8s both ease-in }
.pt-page-rotateTopSideFirst { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateTopSideFirst .8s both ease-in; animation: rotateTopSideFirst .8s both ease-in }
.pt-page-rotateBottomSideFirst { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateBottomSideFirst .8s both ease-in; animation: rotateBottomSideFirst .8s both ease-in }
.pt-page-flipOutRight { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipOutRight .5s both ease-in; animation: flipOutRight .5s both ease-in }
.pt-page-flipInLeft { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipInLeft .5s both ease-out; animation: flipInLeft .5s both ease-out }
.pt-page-flipOutLeft { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipOutLeft .5s both ease-in; animation: flipOutLeft .5s both ease-in }
.pt-page-flipInRight { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipInRight .5s both ease-out; animation: flipInRight .5s both ease-out }
.pt-page-flipOutTop { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipOutTop .5s both ease-in; animation: flipOutTop .5s both ease-in }
.pt-page-flipInBottom { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipInBottom .5s both ease-out; animation: flipInBottom .5s both ease-out }
.pt-page-flipOutBottom { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipOutBottom .5s both ease-in; animation: flipOutBottom .5s both ease-in }
.pt-page-flipInTop { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipInTop .5s both ease-out; animation: flipInTop .5s both ease-out }
.pt-page-rotateFall { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: rotateFall 1s both ease-in; animation: rotateFall 1s both ease-in }
.pt-page-rotateOutNewspaper { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: rotateOutNewspaper .5s both ease-in; animation: rotateOutNewspaper .5s both ease-in }
.pt-page-rotateInNewspaper { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: rotateInNewspaper .5s both ease-out; animation: rotateInNewspaper .5s both ease-out }
.pt-page-rotatePushLeft { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotatePushLeft .8s both ease; animation: rotatePushLeft .8s both ease }
.pt-page-rotatePushRight { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotatePushRight .8s both ease; animation: rotatePushRight .8s both ease }
.pt-page-rotatePushTop { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotatePushTop .8s both ease; animation: rotatePushTop .8s both ease }
.pt-page-rotatePushBottom { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotatePushBottom .8s both ease; animation: rotatePushBottom .8s both ease }
.pt-page-rotatePullRight { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotatePullRight .5s both ease; animation: rotatePullRight .5s both ease }
.pt-page-rotatePullLeft { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotatePullLeft .5s both ease; animation: rotatePullLeft .5s both ease }
.pt-page-rotatePullTop { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotatePullTop .5s both ease; animation: rotatePullTop .5s both ease }
.pt-page-rotatePullBottom { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotatePullBottom .5s both ease; animation: rotatePullBottom .5s both ease }
.pt-page-rotateFoldRight { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateFoldRight 1s both ease; animation: rotateFoldRight 1s both ease }
.pt-page-rotateFoldLeft { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateFoldLeft 1s both ease; animation: rotateFoldLeft 1s both ease }
.pt-page-rotateFoldTop { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateFoldTop 1s both ease; animation: rotateFoldTop 1s both ease }
.pt-page-rotateFoldBottom { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateFoldBottom 1s both ease; animation: rotateFoldBottom 1s both ease }
.pt-page-rotateUnfoldLeft { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateUnfoldLeft 1s both ease; animation: rotateUnfoldLeft 1s both ease }
.pt-page-rotateUnfoldRight { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateUnfoldRight 1s both ease; animation: rotateUnfoldRight 1s both ease }
.pt-page-rotateUnfoldTop { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateUnfoldTop 1s both ease; animation: rotateUnfoldTop 1s both ease }
.pt-page-rotateUnfoldBottom { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateUnfoldBottom 1s both ease; animation: rotateUnfoldBottom 1s both ease }
.pt-page-rotateRoomLeftOut { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateRoomLeftOut .8s both ease; animation: rotateRoomLeftOut .8s both ease }
.pt-page-rotateRoomLeftIn { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateRoomLeftIn .8s both ease; animation: rotateRoomLeftIn .8s both ease }
.pt-page-rotateRoomRightOut { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateRoomRightOut .8s both ease; animation: rotateRoomRightOut .8s both ease }
.pt-page-rotateRoomRightIn { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateRoomRightIn .8s both ease; animation: rotateRoomRightIn .8s both ease }
.pt-page-rotateRoomTopOut { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateRoomTopOut .8s both ease; animation: rotateRoomTopOut .8s both ease }
.pt-page-rotateRoomTopIn { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateRoomTopIn .8s both ease; animation: rotateRoomTopIn .8s both ease }
.pt-page-rotateRoomBottomOut { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateRoomBottomOut .8s both ease; animation: rotateRoomBottomOut .8s both ease }
.pt-page-rotateRoomBottomIn { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateRoomBottomIn .8s both ease; animation: rotateRoomBottomIn .8s both ease }
.pt-page-rotateCubeLeftOut { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateCubeLeftOut 1s both ease-in; animation: rotateCubeLeftOut 1s both ease-in }
.pt-page-rotateCubeLeftIn { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateCubeLeftIn 1s both ease-in; animation: rotateCubeLeftIn 1s both ease-in }
.pt-page-rotateCubeRightOut { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateCubeRightOut 1s both ease-in; animation: rotateCubeRightOut 1s both ease-in }
.pt-page-rotateCubeRightIn { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateCubeRightIn 1s both ease-in; animation: rotateCubeRightIn 1s both ease-in }
.pt-page-rotateCubeTopOut { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateCubeTopOut 1s both ease-in; animation: rotateCubeTopOut 1s both ease-in }
.pt-page-rotateCubeTopIn { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateCubeTopIn 1s both ease-in; animation: rotateCubeTopIn 1s both ease-in }
.pt-page-rotateCubeBottomOut { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateCubeBottomOut 1s both ease-in; animation: rotateCubeBottomOut 1s both ease-in }
.pt-page-rotateCubeBottomIn { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateCubeBottomIn 1s both ease-in; animation: rotateCubeBottomIn 1s both ease-in }
.pt-page-rotateCarouselLeftOut { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateCarouselLeftOut .8s both ease; animation: rotateCarouselLeftOut .8s both ease }
.pt-page-rotateCarouselLeftIn { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateCarouselLeftIn .8s both ease; animation: rotateCarouselLeftIn .8s both ease }
.pt-page-rotateCarouselRightOut { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateCarouselRightOut .8s both ease; animation: rotateCarouselRightOut .8s both ease }
.pt-page-rotateCarouselRightIn { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateCarouselRightIn .8s both ease; animation: rotateCarouselRightIn .8s both ease }
.pt-page-rotateCarouselTopOut { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateCarouselTopOut .8s both ease; animation: rotateCarouselTopOut .8s both ease }
.pt-page-rotateCarouselTopIn { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateCarouselTopIn .8s both ease; animation: rotateCarouselTopIn .8s both ease }
.pt-page-rotateCarouselBottomOut { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateCarouselBottomOut .8s both ease; animation: rotateCarouselBottomOut .8s both ease }
.pt-page-rotateCarouselBottomIn { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateCarouselBottomIn .8s both ease; animation: rotateCarouselBottomIn .8s both ease }
.pt-page-rotateSidesOut { -webkit-transform-origin: -50% 50%; transform-origin: -50% 50%; -webkit-animation: rotateSidesOut .5s both ease-in; animation: rotateSidesOut .5s both ease-in }
.pt-page-rotateSidesIn { -webkit-transform-origin: 150% 50%; transform-origin: 150% 50%; -webkit-animation: rotateSidesIn .5s both ease-out; animation: rotateSidesIn .5s both ease-out }
.pt-page-rotateSlideOut { -webkit-animation: rotateSlideOut 1s both ease; animation: rotateSlideOut 1s both ease }
.pt-page-rotateSlideIn { -webkit-animation: rotateSlideIn 1s both ease; animation: rotateSlideIn 1s both ease }
@-webkit-keyframes rotateRightSideFirst { 40% {
-webkit-transform:rotateY(15deg);
opacity:.8;
-webkit-animation-timing-function:ease-out
}
100% {
-webkit-transform:scale(.8) translateZ(-200px);
opacity:0
}
}
@keyframes rotateRightSideFirst { 40% {
-webkit-transform:rotateY(15deg);
transform:rotateY(15deg);
opacity:.8;
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
100% {
-webkit-transform:scale(.8) translateZ(-200px);
transform:scale(.8) translateZ(-200px);
opacity:0
}
}
@-webkit-keyframes rotateLeftSideFirst { 40% {
-webkit-transform:rotateY(-15deg);
opacity:.8;
-webkit-animation-timing-function:ease-out
}
100% {
-webkit-transform:scale(.8) translateZ(-200px);
opacity:0
}
}
@keyframes rotateLeftSideFirst { 40% {
-webkit-transform:rotateY(-15deg);
transform:rotateY(-15deg);
opacity:.8;
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
100% {
-webkit-transform:scale(.8) translateZ(-200px);
transform:scale(.8) translateZ(-200px);
opacity:0
}
}
@-webkit-keyframes rotateTopSideFirst { 40% {
-webkit-transform:rotateX(15deg);
opacity:.8;
-webkit-animation-timing-function:ease-out
}
100% {
-webkit-transform:scale(.8) translateZ(-200px);
opacity:0
}
}
@keyframes rotateTopSideFirst { 40% {
-webkit-transform:rotateX(15deg);
transform:rotateX(15deg);
opacity:.8;
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
100% {
-webkit-transform:scale(.8) translateZ(-200px);
transform:scale(.8) translateZ(-200px);
opacity:0
}
}
@-webkit-keyframes rotateBottomSideFirst { 40% {
-webkit-transform:rotateX(-15deg);
opacity:.8;
-webkit-animation-timing-function:ease-out
}
100% {
-webkit-transform:scale(.8) translateZ(-200px);
opacity:0
}
}
@keyframes rotateBottomSideFirst { 40% {
-webkit-transform:rotateX(-15deg);
transform:rotateX(-15deg);
opacity:.8;
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
100% {
-webkit-transform:scale(.8) translateZ(-200px);
transform:scale(.8) translateZ(-200px);
opacity:0
}
}
@-webkit-keyframes flipOutRight { to {
-webkit-transform:translateZ(-1000px) rotateY(90deg);
opacity:.2
}
}
@keyframes flipOutRight { to {
-webkit-transform:translateZ(-1000px) rotateY(90deg);
transform:translateZ(-1000px) rotateY(90deg);
opacity:.2
}
}
@-webkit-keyframes flipInLeft { from {
-webkit-transform:translateZ(-1000px) rotateY(-90deg);
opacity:.2
}
}
@keyframes flipInLeft { from {
-webkit-transform:translateZ(-1000px) rotateY(-90deg);
transform:translateZ(-1000px) rotateY(-90deg);
opacity:.2
}
}
@-webkit-keyframes flipOutLeft { to {
-webkit-transform:translateZ(-1000px) rotateY(-90deg);
opacity:.2
}
}
@keyframes flipOutLeft { to {
-webkit-transform:translateZ(-1000px) rotateY(-90deg);
transform:translateZ(-1000px) rotateY(-90deg);
opacity:.2
}
}
@-webkit-keyframes flipInRight { from {
-webkit-transform:translateZ(-1000px) rotateY(90deg);
opacity:.2
}
}
@keyframes flipInRight { from {
-webkit-transform:translateZ(-1000px) rotateY(90deg);
transform:translateZ(-1000px) rotateY(90deg);
opacity:.2
}
}
@-webkit-keyframes flipOutTop { to {
-webkit-transform:translateZ(-1000px) rotateX(90deg);
opacity:.2
}
}
@keyframes flipOutTop { to {
-webkit-transform:translateZ(-1000px) rotateX(90deg);
transform:translateZ(-1000px) rotateX(90deg);
opacity:.2
}
}
@-webkit-keyframes flipInBottom { from {
-webkit-transform:translateZ(-1000px) rotateX(-90deg);
opacity:.2
}
}
@keyframes flipInBottom { from {
-webkit-transform:translateZ(-1000px) rotateX(-90deg);
transform:translateZ(-1000px) rotateX(-90deg);
opacity:.2
}
}
@-webkit-keyframes flipOutBottom { to {
-webkit-transform:translateZ(-1000px) rotateX(-90deg);
opacity:.2
}
}
@keyframes flipOutBottom { to {
-webkit-transform:translateZ(-1000px) rotateX(-90deg);
transform:translateZ(-1000px) rotateX(-90deg);
opacity:.2
}
}
@-webkit-keyframes flipInTop { from {
-webkit-transform:translateZ(-1000px) rotateX(90deg);
opacity:.2
}
}
@keyframes flipInTop { from {
-webkit-transform:translateZ(-1000px) rotateX(90deg);
transform:translateZ(-1000px) rotateX(90deg);
opacity:.2
}
}
@-webkit-keyframes rotateFall { 0% {
-webkit-transform:rotateZ(0)
}
20% {
-webkit-transform:rotateZ(10deg);
-webkit-animation-timing-function:ease-out
}
40% {
-webkit-transform:rotateZ(17deg)
}
60% {
-webkit-transform:rotateZ(16deg)
}
100% {
-webkit-transform:translateY(100%) rotateZ(17deg)
}
}
@keyframes rotateFall { 0% {
-webkit-transform:rotateZ(0);
transform:rotateZ(0)
}
20% {
-webkit-transform:rotateZ(10deg);
transform:rotateZ(10deg);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
40% {
-webkit-transform:rotateZ(17deg);
transform:rotateZ(17deg)
}
60% {
-webkit-transform:rotateZ(16deg);
transform:rotateZ(16deg)
}
100% {
-webkit-transform:translateY(100%) rotateZ(17deg);
transform:translateY(100%) rotateZ(17deg)
}
}
@-webkit-keyframes rotateOutNewspaper { to {
-webkit-transform:translateZ(-3000px) rotateZ(360deg);
opacity:0
}
}
@keyframes rotateOutNewspaper { to {
-webkit-transform:translateZ(-3000px) rotateZ(360deg);
transform:translateZ(-3000px) rotateZ(360deg);
opacity:0
}
}
@-webkit-keyframes rotateInNewspaper { from {
-webkit-transform:translateZ(-3000px) rotateZ(-360deg);
opacity:0
}
}
@keyframes rotateInNewspaper { from {
-webkit-transform:translateZ(-3000px) rotateZ(-360deg);
transform:translateZ(-3000px) rotateZ(-360deg);
opacity:0
}
}
@-webkit-keyframes rotatePushLeft { to {
opacity:0;
-webkit-transform:rotateY(90deg)
}
}
@keyframes rotatePushLeft { to {
opacity:0;
-webkit-transform:rotateY(90deg);
transform:rotateY(90deg)
}
}
@-webkit-keyframes rotatePushRight { to {
opacity:0;
-webkit-transform:rotateY(-90deg)
}
}
@keyframes rotatePushRight { to {
opacity:0;
-webkit-transform:rotateY(-90deg);
transform:rotateY(-90deg)
}
}
@-webkit-keyframes rotatePushTop { to {
opacity:0;
-webkit-transform:rotateX(-90deg)
}
}
@keyframes rotatePushTop { to {
opacity:0;
-webkit-transform:rotateX(-90deg);
transform:rotateX(-90deg)
}
}
@-webkit-keyframes rotatePushBottom { to {
opacity:0;
-webkit-transform:rotateX(90deg)
}
}
@keyframes rotatePushBottom { to {
opacity:0;
-webkit-transform:rotateX(90deg);
transform:rotateX(90deg)
}
}
@-webkit-keyframes rotatePullRight { from {
opacity:0;
-webkit-transform:rotateY(-90deg)
}
}
@keyframes rotatePullRight { from {
opacity:0;
-webkit-transform:rotateY(-90deg);
transform:rotateY(-90deg)
}
}
@-webkit-keyframes rotatePullLeft { from {
opacity:0;
-webkit-transform:rotateY(90deg)
}
}
@keyframes rotatePullLeft { from {
opacity:0;
-webkit-transform:rotateY(90deg);
transform:rotateY(90deg)
}
}
@-webkit-keyframes rotatePullTop { from {
opacity:0;
-webkit-transform:rotateX(-90deg)
}
}
@keyframes rotatePullTop { from {
opacity:0;
-webkit-transform:rotateX(-90deg);
transform:rotateX(-90deg)
}
}
@-webkit-keyframes rotatePullBottom { from {
opacity:0;
-webkit-transform:rotateX(90deg)
}
}
@keyframes rotatePullBottom { from {
opacity:0;
-webkit-transform:rotateX(90deg);
transform:rotateX(90deg)
}
}
@-webkit-keyframes rotateFoldRight { to {
opacity:0;
-webkit-transform:translateX(100%) rotateY(90deg)
}
}
@keyframes rotateFoldRight { to {
opacity:0;
-webkit-transform:translateX(100%) rotateY(90deg);
transform:translateX(100%) rotateY(90deg)
}
}
@-webkit-keyframes rotateFoldLeft { to {
opacity:0;
-webkit-transform:translateX(-100%) rotateY(-90deg)
}
}
@keyframes rotateFoldLeft { to {
opacity:0;
-webkit-transform:translateX(-100%) rotateY(-90deg);
transform:translateX(-100%) rotateY(-90deg)
}
}
@-webkit-keyframes rotateFoldTop { to {
opacity:0;
-webkit-transform:translateY(-100%) rotateX(90deg)
}
}
@keyframes rotateFoldTop { to {
opacity:0;
-webkit-transform:translateY(-100%) rotateX(90deg);
transform:translateY(-100%) rotateX(90deg)
}
}
@-webkit-keyframes rotateFoldBottom { to {
opacity:0;
-webkit-transform:translateY(100%) rotateX(-90deg)
}
}
@keyframes rotateFoldBottom { to {
opacity:0;
-webkit-transform:translateY(100%) rotateX(-90deg);
transform:translateY(100%) rotateX(-90deg)
}
}
@-webkit-keyframes rotateUnfoldLeft { from {
opacity:0;
-webkit-transform:translateX(-100%) rotateY(-90deg)
}
}
@keyframes rotateUnfoldLeft { from {
opacity:0;
-webkit-transform:translateX(-100%) rotateY(-90deg);
transform:translateX(-100%) rotateY(-90deg)
}
}
@-webkit-keyframes rotateUnfoldRight { from {
opacity:0;
-webkit-transform:translateX(100%) rotateY(90deg)
}
}
@keyframes rotateUnfoldRight { from {
opacity:0;
-webkit-transform:translateX(100%) rotateY(90deg);
transform:translateX(100%) rotateY(90deg)
}
}
@-webkit-keyframes rotateUnfoldTop { from {
opacity:0;
-webkit-transform:translateY(-100%) rotateX(90deg)
}
}
@keyframes rotateUnfoldTop { from {
opacity:0;
-webkit-transform:translateY(-100%) rotateX(90deg);
transform:translateY(-100%) rotateX(90deg)
}
}
@-webkit-keyframes rotateUnfoldBottom { from {
opacity:0;
-webkit-transform:translateY(100%) rotateX(-90deg)
}
}
@keyframes rotateUnfoldBottom { from {
opacity:0;
-webkit-transform:translateY(100%) rotateX(-90deg);
transform:translateY(100%) rotateX(-90deg)
}
}
@-webkit-keyframes rotateRoomLeftOut { to {
opacity:.3;
-webkit-transform:translateX(-100%) rotateY(90deg)
}
}
@keyframes rotateRoomLeftOut { to {
opacity:.3;
-webkit-transform:translateX(-100%) rotateY(90deg);
transform:translateX(-100%) rotateY(90deg)
}
}
@-webkit-keyframes rotateRoomLeftIn { from {
opacity:.3;
-webkit-transform:translateX(100%) rotateY(-90deg)
}
}
@keyframes rotateRoomLeftIn { from {
opacity:.3;
-webkit-transform:translateX(100%) rotateY(-90deg);
transform:translateX(100%) rotateY(-90deg)
}
}
@-webkit-keyframes rotateRoomRightOut { to {
opacity:.3;
-webkit-transform:translateX(100%) rotateY(-90deg)
}
}
@keyframes rotateRoomRightOut { to {
opacity:.3;
-webkit-transform:translateX(100%) rotateY(-90deg);
transform:translateX(100%) rotateY(-90deg)
}
}
@-webkit-keyframes rotateRoomRightIn { from {
opacity:.3;
-webkit-transform:translateX(-100%) rotateY(90deg)
}
}
@keyframes rotateRoomRightIn { from {
opacity:.3;
-webkit-transform:translateX(-100%) rotateY(90deg);
transform:translateX(-100%) rotateY(90deg)
}
}
@-webkit-keyframes rotateRoomTopOut { to {
opacity:.3;
-webkit-transform:translateY(-100%) rotateX(-90deg)
}
}
@keyframes rotateRoomTopOut { to {
opacity:.3;
-webkit-transform:translateY(-100%) rotateX(-90deg);
transform:translateY(-100%) rotateX(-90deg)
}
}
@-webkit-keyframes rotateRoomTopIn { from {
opacity:.3;
-webkit-transform:translateY(100%) rotateX(90deg)
}
}
@keyframes rotateRoomTopIn { from {
opacity:.3;
-webkit-transform:translateY(100%) rotateX(90deg);
transform:translateY(100%) rotateX(90deg)
}
}
@-webkit-keyframes rotateRoomBottomOut { to {
opacity:.3;
-webkit-transform:translateY(100%) rotateX(90deg)
}
}
@keyframes rotateRoomBottomOut { to {
opacity:.3;
-webkit-transform:translateY(100%) rotateX(90deg);
transform:translateY(100%) rotateX(90deg)
}
}
@-webkit-keyframes rotateRoomBottomIn { from {
opacity:.3;
-webkit-transform:translateY(-100%) rotateX(-90deg)
}
}
@keyframes rotateRoomBottomIn { from {
opacity:.3;
-webkit-transform:translateY(-100%) rotateX(-90deg);
transform:translateY(-100%) rotateX(-90deg)
}
}
@-webkit-keyframes rotateCubeLeftOut { 50% {
-webkit-animation-timing-function:ease-out;
-webkit-transform:translateX(-50%) translateZ(-200px) rotateY(-45deg)
}
100% {
opacity:.3;
-webkit-transform:translateX(-100%) rotateY(-90deg)
}
}
@keyframes rotateCubeLeftOut { 50% {
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
-webkit-transform:translateX(-50%) translateZ(-200px) rotateY(-45deg);
transform:translateX(-50%) translateZ(-200px) rotateY(-45deg)
}
100% {
opacity:.3;
-webkit-transform:translateX(-100%) rotateY(-90deg);
transform:translateX(-100%) rotateY(-90deg)
}
}
@-webkit-keyframes rotateCubeLeftIn { 0% {
opacity:.3;
-webkit-transform:translateX(100%) rotateY(90deg)
}
50% {
-webkit-animation-timing-function:ease-out;
-webkit-transform:translateX(50%) translateZ(-200px) rotateY(45deg)
}
}
@keyframes rotateCubeLeftIn { 0% {
opacity:.3;
-webkit-transform:translateX(100%) rotateY(90deg);
transform:translateX(100%) rotateY(90deg)
}
50% {
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
-webkit-transform:translateX(50%) translateZ(-200px) rotateY(45deg);
transform:translateX(50%) translateZ(-200px) rotateY(45deg)
}
}
@-webkit-keyframes rotateCubeRightOut { 50% {
-webkit-animation-timing-function:ease-out;
-webkit-transform:translateX(50%) translateZ(-200px) rotateY(45deg)
}
100% {
opacity:.3;
-webkit-transform:translateX(100%) rotateY(90deg)
}
}
@keyframes rotateCubeRightOut { 50% {
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
-webkit-transform:translateX(50%) translateZ(-200px) rotateY(45deg);
transform:translateX(50%) translateZ(-200px) rotateY(45deg)
}
100% {
opacity:.3;
-webkit-transform:translateX(100%) rotateY(90deg);
transform:translateX(100%) rotateY(90deg)
}
}
@-webkit-keyframes rotateCubeRightIn { 0% {
opacity:.3;
-webkit-transform:translateX(-100%) rotateY(-90deg)
}
50% {
-webkit-animation-timing-function:ease-out;
-webkit-transform:translateX(-50%) translateZ(-200px) rotateY(-45deg)
}
}
@keyframes rotateCubeRightIn { 0% {
opacity:.3;
-webkit-transform:translateX(-100%) rotateY(-90deg);
transform:translateX(-100%) rotateY(-90deg)
}
50% {
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
-webkit-transform:translateX(-50%) translateZ(-200px) rotateY(-45deg);
transform:translateX(-50%) translateZ(-200px) rotateY(-45deg)
}
}
@-webkit-keyframes rotateCubeTopOut { 50% {
-webkit-animation-timing-function:ease-out;
-webkit-transform:translateY(-50%) translateZ(-200px) rotateX(45deg)
}
100% {
opacity:.3;
-webkit-transform:translateY(-100%) rotateX(90deg)
}
}
@keyframes rotateCubeTopOut { 50% {
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
-webkit-transform:translateY(-50%) translateZ(-200px) rotateX(45deg);
transform:translateY(-50%) translateZ(-200px) rotateX(45deg)
}
100% {
opacity:.3;
-webkit-transform:translateY(-100%) rotateX(90deg);
transform:translateY(-100%) rotateX(90deg)
}
}
@-webkit-keyframes rotateCubeTopIn { 0% {
opacity:.3;
-webkit-transform:translateY(100%) rotateX(-90deg)
}
50% {
-webkit-animation-timing-function:ease-out;
-webkit-transform:translateY(50%) translateZ(-200px) rotateX(-45deg)
}
}
@keyframes rotateCubeTopIn { 0% {
opacity:.3;
-webkit-transform:translateY(100%) rotateX(-90deg);
transform:translateY(100%) rotateX(-90deg)
}
50% {
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
-webkit-transform:translateY(50%) translateZ(-200px) rotateX(-45deg);
transform:translateY(50%) translateZ(-200px) rotateX(-45deg)
}
}
@-webkit-keyframes rotateCubeBottomOut { 50% {
-webkit-animation-timing-function:ease-out;
-webkit-transform:translateY(50%) translateZ(-200px) rotateX(-45deg)
}
100% {
opacity:.3;
-webkit-transform:translateY(100%) rotateX(-90deg)
}
}
@keyframes rotateCubeBottomOut { 50% {
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
-webkit-transform:translateY(50%) translateZ(-200px) rotateX(-45deg);
transform:translateY(50%) translateZ(-200px) rotateX(-45deg)
}
100% {
opacity:.3;
-webkit-transform:translateY(100%) rotateX(-90deg);
transform:translateY(100%) rotateX(-90deg)
}
}
@-webkit-keyframes rotateCubeBottomIn { 0% {
opacity:.3;
-webkit-transform:translateY(-100%) rotateX(90deg)
}
50% {
-webkit-animation-timing-function:ease-out;
-webkit-transform:translateY(-50%) translateZ(-200px) rotateX(45deg)
}
}
@keyframes rotateCubeBottomIn { 0% {
opacity:.3;
-webkit-transform:translateY(-100%) rotateX(90deg);
transform:translateY(-100%) rotateX(90deg)
}
50% {
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
-webkit-transform:translateY(-50%) translateZ(-200px) rotateX(45deg);
transform:translateY(-50%) translateZ(-200px) rotateX(45deg)
}
}
@-webkit-keyframes rotateCarouselLeftOut { to {
opacity:.3;
-webkit-transform:translateX(-150%) scale(.4) rotateY(-65deg)
}
}
@keyframes rotateCarouselLeftOut { to {
opacity:.3;
-webkit-transform:translateX(-150%) scale(.4) rotateY(-65deg);
transform:translateX(-150%) scale(.4) rotateY(-65deg)
}
}
@-webkit-keyframes rotateCarouselLeftIn { from {
opacity:.3;
-webkit-transform:translateX(200%) scale(.4) rotateY(65deg)
}
}
@keyframes rotateCarouselLeftIn { from {
opacity:.3;
-webkit-transform:translateX(200%) scale(.4) rotateY(65deg);
transform:translateX(200%) scale(.4) rotateY(65deg)
}
}
@-webkit-keyframes rotateCarouselRightOut { to {
opacity:.3;
-webkit-transform:translateX(200%) scale(.4) rotateY(65deg)
}
}
@keyframes rotateCarouselRightOut { to {
opacity:.3;
-webkit-transform:translateX(200%) scale(.4) rotateY(65deg);
transform:translateX(200%) scale(.4) rotateY(65deg)
}
}
@-webkit-keyframes rotateCarouselRightIn { from {
opacity:.3;
-webkit-transform:translateX(-200%) scale(.4) rotateY(-65deg)
}
}
@keyframes rotateCarouselRightIn { from {
opacity:.3;
-webkit-transform:translateX(-200%) scale(.4) rotateY(-65deg);
transform:translateX(-200%) scale(.4) rotateY(-65deg)
}
}
@-webkit-keyframes rotateCarouselTopOut { to {
opacity:.3;
-webkit-transform:translateY(-200%) scale(.4) rotateX(65deg)
}
}
@keyframes rotateCarouselTopOut { to {
opacity:.3;
-webkit-transform:translateY(-200%) scale(.4) rotateX(65deg);
transform:translateY(-200%) scale(.4) rotateX(65deg)
}
}
@-webkit-keyframes rotateCarouselTopIn { from {
opacity:.3;
-webkit-transform:translateY(200%) scale(.4) rotateX(-65deg)
}
}
@keyframes rotateCarouselTopIn { from {
opacity:.3;
-webkit-transform:translateY(200%) scale(.4) rotateX(-65deg);
transform:translateY(200%) scale(.4) rotateX(-65deg)
}
}
@-webkit-keyframes rotateCarouselBottomOut { to {
opacity:.3;
-webkit-transform:translateY(200%) scale(.4) rotateX(-65deg)
}
}
@keyframes rotateCarouselBottomOut { to {
opacity:.3;
-webkit-transform:translateY(200%) scale(.4) rotateX(-65deg);
transform:translateY(200%) scale(.4) rotateX(-65deg)
}
}
@-webkit-keyframes rotateCarouselBottomIn { from {
opacity:.3;
-webkit-transform:translateY(-200%) scale(.4) rotateX(65deg)
}
}
@keyframes rotateCarouselBottomIn { from {
opacity:.3;
-webkit-transform:translateY(-200%) scale(.4) rotateX(65deg);
transform:translateY(-200%) scale(.4) rotateX(65deg)
}
}
@-webkit-keyframes rotateSidesOut { to {
opacity:0;
-webkit-transform:translateZ(-500px) rotateY(90deg)
}
}
@keyframes rotateSidesOut { to {
opacity:0;
-webkit-transform:translateZ(-500px) rotateY(90deg);
transform:translateZ(-500px) rotateY(90deg)
}
}
@-webkit-keyframes rotateSidesIn { from {
opacity:0;
-webkit-transform:translateZ(-500px) rotateY(-90deg)
}
}
@keyframes rotateSidesIn { from {
opacity:0;
-webkit-transform:translateZ(-500px) rotateY(-90deg);
transform:translateZ(-500px) rotateY(-90deg)
}
}
@-webkit-keyframes rotateSlideOut { 25% {
opacity:.5;
-webkit-transform:translateZ(-500px)
}
100%, 75% {
opacity:.5;
-webkit-transform:translateZ(-500px) translateX(-200%)
}
}
@keyframes rotateSlideOut { 25% {
opacity:.5;
-webkit-transform:translateZ(-500px);
transform:translateZ(-500px)
}
100%, 75% {
opacity:.5;
-webkit-transform:translateZ(-500px) translateX(-200%);
transform:translateZ(-500px) translateX(-200%)
}
}
@-webkit-keyframes rotateSlideIn { 0%, 25% {
opacity:.5;
-webkit-transform:translateZ(-500px) translateX(200%)
}
75% {
opacity:.5;
-webkit-transform:translateZ(-500px)
}
100% {
opacity:1;
-webkit-transform:translateZ(0) translateX(0)
}
}
@keyframes rotateSlideIn { 0%, 25% {
opacity:.5;
-webkit-transform:translateZ(-500px) translateX(200%);
transform:translateZ(-500px) translateX(200%)
}
75% {
opacity:.5;
-webkit-transform:translateZ(-500px);
transform:translateZ(-500px)
}
100% {
opacity:1;
-webkit-transform:translateZ(0) translateX(0);
transform:translateZ(0) translateX(0)
}
}
.pt-page-delay100 { -webkit-animation-delay: .1s; animation-delay: .1s }
.pt-page-delay180 { -webkit-animation-delay: .18s; animation-delay: .18s }
.pt-page-delay200 { -webkit-animation-delay: .2s; animation-delay: .2s }
.pt-page-delay300 {/*-webkit-animation-delay:.3s;animation-delay:.3s*/ }
.pt-page-delay400 { -webkit-animation-delay: .4s; animation-delay: .4s }
.pt-page-delay500 { -webkit-animation-delay: .5s; animation-delay: .5s }
.pt-page-delay700 { -webkit-animation-delay: 1s; animation-delay: 1s }
.pt-page-delay1000 { -webkit-animation-delay: 1s; animation-delay: 1s }