/*magic.css*/ .magictime { -webkit-animation-duration:1s; -moz-animation-duration:1s; -ms-animation-duration:1s; -o-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -ms-animation-fill-mode:both; -o-animation-fill-mode:both; animation-fill-mode:both; } .magic { -webkit-animation-name:magic; -moz-animation-name:magic; -ms-animation-name:magic; -o-animation-name:magic; animation-name:magic; } @-moz-keyframes magic { 0% { opacity: 1; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; -webkit-transform: scale(0.5, 0.5) rotate(60deg); -moz-transform: scale(0.5, 0.5) rotate(60deg); -ms-transform: scale(0.5, 0.5) rotate(60deg); -o-transform: scale(0.5, 0.5) rotate(60deg); transform: scale(0.5, 0.5) rotate(60deg); } } @-webkit-keyframes magic { 0% { opacity: 1; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; -webkit-transform: scale(0.5, 0.5) rotate(60deg); -moz-transform: scale(0.5, 0.5) rotate(60deg); -ms-transform: scale(0.5, 0.5) rotate(60deg); -o-transform: scale(0.5, 0.5) rotate(60deg); transform: scale(0.5, 0.5) rotate(60deg); } } @-o-keyframes magic { 0% { opacity: 1; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; -webkit-transform: scale(0.5, 0.5) rotate(60deg); -moz-transform: scale(0.5, 0.5) rotate(60deg); -ms-transform: scale(0.5, 0.5) rotate(60deg); -o-transform: scale(0.5, 0.5) rotate(60deg); transform: scale(0.5, 0.5) rotate(60deg); } } @-ms-keyframes magic { 0% { opacity: 1; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; -webkit-transform: scale(0.5, 0.5) rotate(60deg); -moz-transform: scale(0.5, 0.5) rotate(60deg); -ms-transform: scale(0.5, 0.5) rotate(60deg); -o-transform: scale(0.5, 0.5) rotate(60deg); transform: scale(0.5, 0.5) rotate(60deg); } } @keyframes magic { 0% { opacity: 1; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; -webkit-transform: scale(0.5, 0.5) rotate(60deg); -moz-transform: scale(0.5, 0.5) rotate(60deg); -ms-transform: scale(0.5, 0.5) rotate(60deg); -o-transform: scale(0.5, 0.5) rotate(60deg); transform: scale(0.5, 0.5) rotate(60deg); } } .puffIn { -webkit-animation-name:puffIn; -moz-animation-name:puffIn; -ms-animation-name:puffIn; -o-animation-name:puffIn; animation-name:puffIn; } @-moz-keyframes puffIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); } 100% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } }@-webkit-keyframes puffIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); } 100% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } }@-o-keyframes puffIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); } 100% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } }@-ms-keyframes puffIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); } 100% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } }@keyframes puffIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); } 100% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } } .puffOut { -webkit-animation-name:puffOut; -moz-animation-name:puffOut; -ms-animation-name:puffOut; -o-animation-name:puffOut; animation-name:puffOut; } @-moz-keyframes puffOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); -webkit-filter:blur(2px); } }@-webkit-keyframes puffOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); -webkit-filter:blur(2px); } }@-o-keyframes puffOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); -webkit-filter:blur(2px); } }@-ms-keyframes puffOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); -webkit-filter:blur(2px); } }@keyframes puffOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); -webkit-filter:blur(2px); } }.swap { -webkit-animation-name:swap; -moz-animation-name:swap; -ms-animation-name:swap; -o-animation-name:swap; animation-name:swap; } @-moz-keyframes swap { 0% { opacity:0; -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; -webkit-transform:scale(0.5,0.5) translate(-70px,0px); -moz-transform:scale(0.5,0.5) translate(-70px,0px); -ms-transform:scale(0.5,0.5) translate(-70px,0px); -o-transform:scale(0.5,0.5) translate(-70px,0px); transform:scale(0.5,0.5) translate(-70px,0px); } 100% { opacity:1; -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; -webkit-transform:scale(1,1) translate(0px,0px); -moz-transform:scale(1,1) translate(0px,0px); -ms-transform:scale(1,1) translate(0px,0px); -o-transform:scale(1,1) translate(0px,0px); transform:scale(1,1) translate(0px,0px); } }@-webkit-keyframes swap { 0% { opacity:0; -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; -webkit-transform:scale(0.5,0.5) translate(-70px,0px); -moz-transform:scale(0.5,0.5) translate(-70px,0px); -ms-transform:scale(0.5,0.5) translate(-70px,0px); -o-transform:scale(0.5,0.5) translate(-70px,0px); transform:scale(0.5,0.5) translate(-70px,0px); } 100% { opacity:1; -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; -webkit-transform:scale(1,1) translate(0px,0px); -moz-transform:scale(1,1) translate(0px,0px); -ms-transform:scale(1,1) translate(0px,0px); -o-transform:scale(1,1) translate(0px,0px); transform:scale(1,1) translate(0px,0px); } }@-o-keyframes swap { 0% { opacity:0; -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; -webkit-transform:scale(0.5,0.5) translate(-70px,0px); -moz-transform:scale(0.5,0.5) translate(-70px,0px); -ms-transform:scale(0.5,0.5) translate(-70px,0px); -o-transform:scale(0.5,0.5) translate(-70px,0px); transform:scale(0.5,0.5) translate(-70px,0px); } 100% { opacity:1; -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; -webkit-transform:scale(1,1) translate(0px,0px); -moz-transform:scale(1,1) translate(0px,0px); -ms-transform:scale(1,1) translate(0px,0px); -o-transform:scale(1,1) translate(0px,0px); transform:scale(1,1) translate(0px,0px); } }@-ms-keyframes swap { 0% { opacity:0; -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; -webkit-transform:scale(0.5,0.5) translate(-70px,0px); -moz-transform:scale(0.5,0.5) translate(-70px,0px); -ms-transform:scale(0.5,0.5) translate(-70px,0px); -o-transform:scale(0.5,0.5) translate(-70px,0px); transform:scale(0.5,0.5) translate(-70px,0px); } 100% { opacity:1; -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; -webkit-transform:scale(1,1) translate(0px,0px); -moz-transform:scale(1,1) translate(0px,0px); -ms-transform:scale(1,1) translate(0px,0px); -o-transform:scale(1,1) translate(0px,0px); transform:scale(1,1) translate(0px,0px); } }@keyframes swap { 0% { opacity:0; -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; -webkit-transform:scale(0.5,0.5) translate(-70px,0px); -moz-transform:scale(0.5,0.5) translate(-70px,0px); -ms-transform:scale(0.5,0.5) translate(-70px,0px); -o-transform:scale(0.5,0.5) translate(-70px,0px); transform:scale(0.5,0.5) translate(-70px,0px); } 100% { opacity:1; -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; -webkit-transform:scale(1,1) translate(0px,0px); -moz-transform:scale(1,1) translate(0px,0px); -ms-transform:scale(1,1) translate(0px,0px); -o-transform:scale(1,1) translate(0px,0px); transform:scale(1,1) translate(0px,0px); } }.twisterInDown { -webkit-animation-name:twisterInDown; -moz-animation-name:twisterInDown; -ms-animation-name:twisterInDown; -o-animation-name:twisterInDown; animation-name:twisterInDown; } @-moz-keyframes twisterInDown { 0% { opacity:0; -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; -webkit-transform:scale(2,2) rotate(60deg) translateY(-100%); -moz-transform:scale(2,2) rotate(60deg) translateY(-100%); -ms-transform:scale(2,2) rotate(60deg) translateY(-100%); -o-transform:scale(2,2) rotate(60deg) translateY(-100%); transform:scale(2,2) rotate(60deg) translateY(-100%); } 100% { opacity:1; -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; -webkit-transform:scale(1,1) rotate(0deg) translateY(0%); -moz-transform:scale(1,1) rotate(0deg) translateY(0%); -ms-transform:scale(1,1) rotate(0deg) translateY(0%); -o-transform:scale(1,1) rotate(0deg) translateY(0%); transform:scale(1,1) rotate(0deg) translateY(0%); } }@-webkit-keyframes twisterInDown { 0% { opacity:0; -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; -webkit-transform:scale(2,2) rotate(60deg) translateY(-100%); -moz-transform:scale(2,2) rotate(60deg) translateY(-100%); -ms-transform:scale(2,2) rotate(60deg) translateY(-100%); -o-transform:scale(2,2) rotate(60deg) translateY(-100%); transform:scale(2,2) rotate(60deg) translateY(-100%); } 100% { opacity:1; -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; -webkit-transform:scale(1,1) rotate(0deg) translateY(0%); -moz-transform:scale(1,1) rotate(0deg) translateY(0%); -ms-transform:scale(1,1) rotate(0deg) translateY(0%); -o-transform:scale(1,1) rotate(0deg) translateY(0%); transform:scale(1,1) rotate(0deg) translateY(0%); } }@-o-keyframes twisterInDown { 0% { opacity:0; -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; -webkit-transform:scale(2,2) rotate(60deg) translateY(-100%); -moz-transform:scale(2,2) rotate(60deg) translateY(-100%); -ms-transform:scale(2,2) rotate(60deg) translateY(-100%); -o-transform:scale(2,2) rotate(60deg) translateY(-100%); transform:scale(2,2) rotate(60deg) translateY(-100%); } 100% { opacity:1; -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; -webkit-transform:scale(1,1) rotate(0deg) translateY(0%); -moz-transform:scale(1,1) rotate(0deg) translateY(0%); -ms-transform:scale(1,1) rotate(0deg) translateY(0%); -o-transform:scale(1,1) rotate(0deg) translateY(0%); transform:scale(1,1) rotate(0deg) translateY(0%); } }@-ms-keyframes twisterInDown { 0% { opacity:0; -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; -webkit-transform:scale(2,2) rotate(60deg) translateY(-100%); -moz-transform:scale(2,2) rotate(60deg) translateY(-100%); -ms-transform:scale(2,2) rotate(60deg) translateY(-100%); -o-transform:scale(2,2) rotate(60deg) translateY(-100%); transform:scale(2,2) rotate(60deg) translateY(-100%); } 100% { opacity:1; -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; -webkit-transform:scale(1,1) rotate(0deg) translateY(0%); -moz-transform:scale(1,1) rotate(0deg) translateY(0%); -ms-transform:scale(1,1) rotate(0deg) translateY(0%); -o-transform:scale(1,1) rotate(0deg) translateY(0%); transform:scale(1,1) rotate(0deg) translateY(0%); } }@keyframes twisterInDown { 0% { opacity:0; -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; -webkit-transform:scale(2,2) rotate(60deg) translateY(-100%); -moz-transform:scale(2,2) rotate(60deg) translateY(-100%); -ms-transform:scale(2,2) rotate(60deg) translateY(-100%); -o-transform:scale(2,2) rotate(60deg) translateY(-100%); transform:scale(2,2) rotate(60deg) translateY(-100%); } 100% { opacity:1; -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; -webkit-transform:scale(1,1) rotate(0deg) translateY(0%); -moz-transform:scale(1,1) rotate(0deg) translateY(0%); -ms-transform:scale(1,1) rotate(0deg) translateY(0%); -o-transform:scale(1,1) rotate(0deg) translateY(0%); transform:scale(1,1) rotate(0deg) translateY(0%); } }.vanishOut { -webkit-animation-name:vanishOut; -moz-animation-name:vanishOut; -ms-animation-name:vanishOut; -o-animation-name:vanishOut; animation-name:vanishOut; } @-moz-keyframes vanishOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); -webkit-filter:blur(20px); } }@-webkit-keyframes vanishOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); -webkit-filter:blur(20px); } }@-o-keyframes vanishOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); -webkit-filter:blur(20px); } }@-ms-keyframes vanishOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); -webkit-filter:blur(20px); } }@keyframes vanishOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); -webkit-filter:blur(20px); } }.swashIn { -webkit-animation-name:swashIn; -moz-animation-name:swashIn; -ms-animation-name:swashIn; -o-animation-name:swashIn; animation-name:swashIn; } @-moz-keyframes swashIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0.7,0.7); -moz-transform:scale(0.7,0.7); -ms-transform:scale(0.7,0.7); -o-transform:scale(0.7,0.7); transform:scale(0.7,0.7); } 100% { -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } }@-webkit-keyframes swashIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0.7,0.7); -moz-transform:scale(0.7,0.7); -ms-transform:scale(0.7,0.7); -o-transform:scale(0.7,0.7); transform:scale(0.7,0.7); } 100% { -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } }@-o-keyframes swashIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0.7,0.7); -moz-transform:scale(0.7,0.7); -ms-transform:scale(0.7,0.7); -o-transform:scale(0.7,0.7); transform:scale(0.7,0.7); } 100% { -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } }@-ms-keyframes swashIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0.7,0.7); -moz-transform:scale(0.7,0.7); -ms-transform:scale(0.7,0.7); -o-transform:scale(0.7,0.7); transform:scale(0.7,0.7); } 100% { -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } }@keyframes swashIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0.7,0.7); -moz-transform:scale(0.7,0.7); -ms-transform:scale(0.7,0.7); -o-transform:scale(0.7,0.7); transform:scale(0.7,0.7); } 100% { -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } }.openUpLeftOut { -webkit-animation-name:openUpLeftOut; -moz-animation-name:openUpLeftOut; -ms-animation-name:openUpLeftOut; -o-animation-name:openUpLeftOut; animation-name:openUpLeftOut; } @-moz-keyframes openUpLeftOut { 0% { opacity:1; -webkit-transform-origin:top left; -moz-transform-origin:top left; -ms-transform-origin:top left; -o-transform-origin:top left; transform-origin:top left; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-animation-timing-function:ease-out; -moz-animation-timing-function:ease-out; -ms-animation-timing-function:ease-out; -o-animation-timing-function:ease-out; animation-timing-function:ease-out; } 100% { opacity:0; -webkit-transform-origin:top left; -moz-transform-origin:top left; -ms-transform-origin:top left; -o-transform-origin:top left; transform-origin:top left; -webkit-transform:rotate(110deg); -moz-transform:rotate(110deg); -ms-transform:rotate(110deg); -o-transform:rotate(110deg); transform:rotate(110deg); -webkit-animation-timing-function:ease-in-o; -moz-animation-timing-function:ease-in-o; -ms-animation-timing-function:ease-in-o; -o-animation-timing-function:ease-in-o; animation-timing-function:ease-in-o; } }@-webkit-keyframes openUpLeftOut { 0% { opacity:1; -webkit-transform-origin:top left; -moz-transform-origin:top left; -ms-transform-origin:top left; -o-transform-origin:top left; transform-origin:top left; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-animation-timing-function:ease-out; -moz-animation-timing-function:ease-out; -ms-animation-timing-function:ease-out; -o-animation-timing-function:ease-out; animation-timing-function:ease-out; } 100% { opacity:0; -webkit-transform-origin:top left; -moz-transform-origin:top left; -ms-transform-origin:top left; -o-transform-origin:top left; transform-origin:top left; -webkit-transform:rotate(110deg); -moz-transform:rotate(110deg); -ms-transform:rotate(110deg); -o-transform:rotate(110deg); transform:rotate(110deg); -webkit-animation-timing-function:ease-in-o; -moz-animation-timing-function:ease-in-o; -ms-animation-timing-function:ease-in-o; -o-animation-timing-function:ease-in-o; animation-timing-function:ease-in-o; } }@-o-keyframes openUpLeftOut { 0% { opacity:1; -webkit-transform-origin:top left; -moz-transform-origin:top left; -ms-transform-origin:top left; -o-transform-origin:top left; transform-origin:top left; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-animation-timing-function:ease-out; -moz-animation-timing-function:ease-out; -ms-animation-timing-function:ease-out; -o-animation-timing-function:ease-out; animation-timing-function:ease-out; } 100% { opacity:0; -webkit-transform-origin:top left; -moz-transform-origin:top left; -ms-transform-origin:top left; -o-transform-origin:top left; transform-origin:top left; -webkit-transform:rotate(110deg); -moz-transform:rotate(110deg); -ms-transform:rotate(110deg); -o-transform:rotate(110deg); transform:rotate(110deg); -webkit-animation-timing-function:ease-in-o; -moz-animation-timing-function:ease-in-o; -ms-animation-timing-function:ease-in-o; -o-animation-timing-function:ease-in-o; animation-timing-function:ease-in-o; } }@-ms-keyframes openUpLeftOut { 0% { opacity:1; -webkit-transform-origin:top left; -moz-transform-origin:top left; -ms-transform-origin:top left; -o-transform-origin:top left; transform-origin:top left; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-animation-timing-function:ease-out; -moz-animation-timing-function:ease-out; -ms-animation-timing-function:ease-out; -o-animation-timing-function:ease-out; animation-timing-function:ease-out; } 100% { opacity:0; -webkit-transform-origin:top left; -moz-transform-origin:top left; -ms-transform-origin:top left; -o-transform-origin:top left; transform-origin:top left; -webkit-transform:rotate(110deg); -moz-transform:rotate(110deg); -ms-transform:rotate(110deg); -o-transform:rotate(110deg); transform:rotate(110deg); -webkit-animation-timing-function:ease-in-o; -moz-animation-timing-function:ease-in-o; -ms-animation-timing-function:ease-in-o; -o-animation-timing-function:ease-in-o; animation-timing-function:ease-in-o; } }@keyframes openUpLeftOut { 0% { opacity:1; -webkit-transform-origin:top left; -moz-transform-origin:top left; -ms-transform-origin:top left; -o-transform-origin:top left; transform-origin:top left; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-animation-timing-function:ease-out; -moz-animation-timing-function:ease-out; -ms-animation-timing-function:ease-out; -o-animation-timing-function:ease-out; animation-timing-function:ease-out; } 100% { opacity:0; -webkit-transform-origin:top left; -moz-transform-origin:top left; -ms-transform-origin:top left; -o-transform-origin:top left; transform-origin:top left; -webkit-transform:rotate(110deg); -moz-transform:rotate(110deg); -ms-transform:rotate(110deg); -o-transform:rotate(110deg); transform:rotate(110deg); -webkit-animation-timing-function:ease-in-o; -moz-animation-timing-function:ease-in-o; -ms-animation-timing-function:ease-in-o; -o-animation-timing-function:ease-in-o; animation-timing-function:ease-in-o; } }.foolishIn { -webkit-animation-name:foolishIn; -moz-animation-name:foolishIn; -ms-animation-name:foolishIn; -o-animation-name:foolishIn; animation-name:foolishIn; } @-moz-keyframes foolishIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0,0) rotate(360deg); -moz-transform:scale(0,0) rotate(360deg); -ms-transform:scale(0,0) rotate(360deg); -o-transform:scale(0,0) rotate(360deg); transform:scale(0,0) rotate(360deg); } 100% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1) rotate(0deg); -moz-transform:scale(1,1) rotate(0deg); -ms-transform:scale(1,1) rotate(0deg); -o-transform:scale(1,1) rotate(0deg); transform:scale(1,1) rotate(0deg); } }@-webkit-keyframes foolishIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0,0) rotate(360deg); -moz-transform:scale(0,0) rotate(360deg); -ms-transform:scale(0,0) rotate(360deg); -o-transform:scale(0,0) rotate(360deg); transform:scale(0,0) rotate(360deg); } 100% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1) rotate(0deg); -moz-transform:scale(1,1) rotate(0deg); -ms-transform:scale(1,1) rotate(0deg); -o-transform:scale(1,1) rotate(0deg); transform:scale(1,1) rotate(0deg); } }@-o-keyframes foolishIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0,0) rotate(360deg); -moz-transform:scale(0,0) rotate(360deg); -ms-transform:scale(0,0) rotate(360deg); -o-transform:scale(0,0) rotate(360deg); transform:scale(0,0) rotate(360deg); } 100% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1) rotate(0deg); -moz-transform:scale(1,1) rotate(0deg); -ms-transform:scale(1,1) rotate(0deg); -o-transform:scale(1,1) rotate(0deg); transform:scale(1,1) rotate(0deg); } }@-ms-keyframes foolishIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0,0) rotate(360deg); -moz-transform:scale(0,0) rotate(360deg); -ms-transform:scale(0,0) rotate(360deg); -o-transform:scale(0,0) rotate(360deg); transform:scale(0,0) rotate(360deg); } 100% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1) rotate(0deg); -moz-transform:scale(1,1) rotate(0deg); -ms-transform:scale(1,1) rotate(0deg); -o-transform:scale(1,1) rotate(0deg); transform:scale(1,1) rotate(0deg); } }@keyframes foolishIn { 0% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0,0) rotate(360deg); -moz-transform:scale(0,0) rotate(360deg); -ms-transform:scale(0,0) rotate(360deg); -o-transform:scale(0,0) rotate(360deg); transform:scale(0,0) rotate(360deg); } 100% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1) rotate(0deg); -moz-transform:scale(1,1) rotate(0deg); -ms-transform:scale(1,1) rotate(0deg); -o-transform:scale(1,1) rotate(0deg); transform:scale(1,1) rotate(0deg); } }.foolishOut { -webkit-animation-name:foolishOut; -moz-animation-name:foolishOut; -ms-animation-name:foolishOut; -o-animation-name:foolishOut; animation-name:foolishOut; } @-moz-keyframes foolishOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1) rotate(360deg); -moz-transform:scale(1,1) rotate(360deg); -ms-transform:scale(1,1) rotate(360deg); -o-transform:scale(1,1) rotate(360deg); transform:scale(1,1) rotate(360deg); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0,0) rotate(0deg); -moz-transform:scale(0,0) rotate(0deg); -ms-transform:scale(0,0) rotate(0deg); -o-transform:scale(0,0) rotate(0deg); transform:scale(0,0) rotate(0deg); } }@-webkit-keyframes foolishOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1) rotate(360deg); -moz-transform:scale(1,1) rotate(360deg); -ms-transform:scale(1,1) rotate(360deg); -o-transform:scale(1,1) rotate(360deg); transform:scale(1,1) rotate(360deg); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0,0) rotate(0deg); -moz-transform:scale(0,0) rotate(0deg); -ms-transform:scale(0,0) rotate(0deg); -o-transform:scale(0,0) rotate(0deg); transform:scale(0,0) rotate(0deg); } }@-o-keyframes foolishOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1) rotate(360deg); -moz-transform:scale(1,1) rotate(360deg); -ms-transform:scale(1,1) rotate(360deg); -o-transform:scale(1,1) rotate(360deg); transform:scale(1,1) rotate(360deg); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0,0) rotate(0deg); -moz-transform:scale(0,0) rotate(0deg); -ms-transform:scale(0,0) rotate(0deg); -o-transform:scale(0,0) rotate(0deg); transform:scale(0,0) rotate(0deg); } }@-ms-keyframes foolishOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1) rotate(360deg); -moz-transform:scale(1,1) rotate(360deg); -ms-transform:scale(1,1) rotate(360deg); -o-transform:scale(1,1) rotate(360deg); transform:scale(1,1) rotate(360deg); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0,0) rotate(0deg); -moz-transform:scale(0,0) rotate(0deg); -ms-transform:scale(0,0) rotate(0deg); -o-transform:scale(0,0) rotate(0deg); transform:scale(0,0) rotate(0deg); } }@keyframes foolishOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1) rotate(360deg); -moz-transform:scale(1,1) rotate(360deg); -ms-transform:scale(1,1) rotate(360deg); -o-transform:scale(1,1) rotate(360deg); transform:scale(1,1) rotate(360deg); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0,0) rotate(0deg); -moz-transform:scale(0,0) rotate(0deg); -ms-transform:scale(0,0) rotate(0deg); -o-transform:scale(0,0) rotate(0deg); transform:scale(0,0) rotate(0deg); } }.swashOut { -webkit-animation-name:swashOut; -moz-animation-name:swashOut; -ms-animation-name:swashOut; -o-animation-name:swashOut; animation-name:swashOut; } @-moz-keyframes swashOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0.7,0.7); -moz-transform:scale(0.7,0.7); -ms-transform:scale(0.7,0.7); -o-transform:scale(0.7,0.7); transform:scale(0.7,0.7); } }@-webkit-keyframes swashOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0.7,0.7); -moz-transform:scale(0.7,0.7); -ms-transform:scale(0.7,0.7); -o-transform:scale(0.7,0.7); transform:scale(0.7,0.7); } }@-o-keyframes swashOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0.7,0.7); -moz-transform:scale(0.7,0.7); -ms-transform:scale(0.7,0.7); -o-transform:scale(0.7,0.7); transform:scale(0.7,0.7); } }@-ms-keyframes swashOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0.7,0.7); -moz-transform:scale(0.7,0.7); -ms-transform:scale(0.7,0.7); -o-transform:scale(0.7,0.7); transform:scale(0.7,0.7); } }@keyframes swashOut { 0% { opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 100% { opacity:0; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0.7,0.7); -moz-transform:scale(0.7,0.7); -ms-transform:scale(0.7,0.7); -o-transform:scale(0.7,0.7); transform:scale(0.7,0.7); } }/*nivo-slider.css*/ .nivoSlider { position:relative; width:100%; height:auto; overflow:hidden; } .nivoSlider img { position:absolute; top:0px; left:0px; max-width:none; } .nivo-main-image { display:block !important; position:relative !important; width:100% !important; } .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; background:white; filter:alpha(opacity=0); opacity:0; } .nivo-slice { display:block; position:absolute; z-index:5; height:100%; top:0; } .nivo-box { display:block; position:absolute; z-index:5; overflow:hidden; } .nivo-box img { display:block; } .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; width:100%; z-index:8; padding:5px 10px; opacity:0.8; overflow:hidden; display:none; -moz-opacity:0.8; filter:alpha(opacity=8); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } .nivo-controlNav { text-align:center; padding:15px 0; display:none; } .nivo-controlNav a { cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } .theme-default .nivoSlider { position:relative; } .theme-default .nivoSlider img { position:absolute; top:0px; left:0px; display:none; } .theme-default .nivoSlider a { border:0; display:block; } .theme-default .nivo-controlNav { text-align:center; } .theme-default .nivo-controlNav a { display:inline-block; width:22px; height:22px; background:url(../images/bullets.png) no-repeat; text-indent:-9999px; border:0; margin:0 2px; } .theme-default .nivo-controlNav a.active { background-position:0 -22px; } .theme-default .nivo-directionNav a { display:block; width:30px; height:30px; background:url(../images/arrows.png) no-repeat; text-indent:-9999px; border:0; opacity:0; -webkit-transition:all 200ms ease-in-out; -moz-transition:all 200ms ease-in-out; -o-transition:all 200ms ease-in-out; transition:all 200ms ease-in-out; } .theme-default:hover .nivo-directionNav a { opacity:1; } .theme-default a.nivo-nextNav { background-position:-30px 0; right:15px; } .theme-default a.nivo-prevNav { left:15px; } .theme-default .nivo-caption { font-family:Helvetica,Arial,sans-serif; } .theme-default .nivo-caption a { color:#fff; border-bottom:1px dotted #fff; } .theme-default .nivo-caption a:hover { color:#fff; } .theme-default .nivo-controlNav { position:relative; z-index:1000; padding:0px; } .theme-default .nivo-controlNav.nivo-thumbs-enabled { width:100%; } .theme-default .nivo-controlNav.nivo-thumbs-enabled a { width:auto; height:auto; background:none; margin-bottom:5px; } .theme-default .nivo-controlNav.nivo-thumbs-enabled img { display:block; width:120px; height:auto; } /*common*/ a.gallery { display:inline-block; position:relative; width:160px; padding-top:100px; } a.gallery strong { display:block; } a.gallery img { display:block; position:absolute; top:0; left:0; padding:2px; background:linear-gradient(#fff,#ccc); width:160px; box-shadow:0 2px 4px rgba(0,0,0,.5); transition:.6s cubic-bezier(0.860,0.000,0.070,1.000); } a.gallery:hover img { width:70px; } a.gallery:hover img:nth-child(1) { transform:translate(0px,0px); -webkit-transform:translate(0px,0px); -moz-transform:translate(0px,0px); } a.gallery:hover img:nth-child(3) { transform:translate(0px,54px); -webkit-transform:translate(0px,54px); -moz-transform:translate(0px,54px); } a.gallery:hover img:nth-child(2) { transform:translate(70px,0px); -webkit-transform:translate(70px,0px); -moz-transform:translate(70px,0px); } a.gallery:hover img:nth-child(4) { transform:translate(70px,54px); -webkit-transform:translate(70px,54px); -moz-transform:translate(70px,54px); } .lazy,banner-lazy { background:url(../images/loading.gif) no-repeat center; } #allmap { width:100%; height:250px; overflow:hidden; } .pointer { cursor:pointer } #photos_box { width:330px; height:68px; border:0; margin-left:auto; margin-right:auto; } #photos_box div.photos_prev { cursor:pointer; width:32px; height:100%; float:left; background:transparent url(../images/prev-horizontal.png) no-repeat scroll 0 center; border:0; } #photos_box div.photos_prev.moveup { background-position:-32px center; } #photos_box div.photos_prev.unable { background-position:-96px center; cursor:default; } #photos_box div.photos_containers { width:266px; height:100%; float:left; border:0; overflow:hidden; } #photos_box div.photos_next { cursor:pointer; width:32px; height:100%; float:left; background:transparent url(../images/next-horizontal.png) no-repeat scroll 0 center; border:0; } #photos_box div.photos_next.moveup { background-position:-32px center; } #photos_box div.photos_next.unable { background-position:-96px center; cursor:default; } #photos_box div.photos_containers #photos_list { margin:0; position:relative; height:68px; width:auto; } #photos_box div.photos_containers #photos_list li { margin-left:5px; float:left; width:63px; } #photos_box div.photos_containers #photos_list li:first-child { margin-left:0; } #photos_list li.pic_sel { background:url(../images/pic_selected.png) no-repeat scroll 0 0; } #photos_list li a img { margin:8px 2px 2px 2px; } #photos_list li { width:62px; height:68px; } #photos_list li img { width:90%; } #message { position:fixed; z-index:5000; width:100%; text-align:center; background-color:#000000; height:100%; left:0; top:0; bottom:0; right:0; opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); vertical-align:middle; } .photos_animate { position:fixed; height:100%; z-index:3000; background-color:#000000; left:0; top:0; bottom:0; right:0; text-align:center; } .photos_animate_in { -webkit-animation-name:photos_animate_in; -moz-animation-name:photos_animate_in; -ms-animation-name:photos_animate_in; -o-animation-name:photos_animate_in; animation-name:photos_animate_in; } @keyframes photos_animate_in { 0% { opacity:0; } 100% { opacity:1; } }@-moz-keyframes photos_animate_in { 0% { opacity:0; } 100% { opacity:1; } }@-webkit-keyframes photos_animate_in { 0% { opacity:0; } 100% { opacity:1; } }.photos_animate_leave { -webkit-animation-name:photos_animate_leave; -moz-animation-name:photos_animate_leave; -ms-animation-name:photos_animate_leave; -o-animation-name:photos_animate_leave; animation-name:photos_animate_leave; } @keyframes photos_animate_leave { 0% { opacity:1; } 100% { opacity:0; } }@-moz-keyframes photos_animate_leave { 0% { opacity:1; } 100% { opacity:0; } }@-webkit-keyframes photos_animate_leave { 0% { opacity:1; } 100% { opacity:0; } }.photos_animate_top { position:fixed; width:100%; z-index:9005; bottom:0px; height:40px; line-height:40px; background-color:#cfcfcf; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .animate_close { width:40%; display:inline-block; text-align:center; background:url(../images/animate_close.png) no-repeat center; height:40px; line-height:40px; } .animate_prev { width:30%; display:inline-block; text-align:center; background:url(../images/animate_prev.png) no-repeat center; height:40px; line-height:40px; } .animate_next { width:30%; display:inline-block; text-align:center; background:url(../images/animate_next.png) no-repeat center; height:40px; line-height:40px; } #message>div { position:relative; width:30%; margin:auto; top:30%; } .float { background:#e1e1e1; border:1px solid #ccc; width:90px; padding:0 5px 5px; *padding:3px 5px 5px; text-align:right; position:fixed; _position:absolute; _right:0; _bottom:1000px; right:0; bottom:60%; _padding:0 0 0 12px; z-index:999999999; } .nerng { font-family:"宋体"; color:#747474; font-size:12px; text-align:center; } .nerng span { background:#fff; display:block; text-align:center; padding:5px 0; width:90px; } .nerng span img { width:80px; height:80px; } .foaltaa a { display:block; } .product_info { padding:0 10px; } .product_info dl { width:100%; clear:both; overflow:hidden; margin:10px 0; } .product_info dl dt { float:left; display:inline; } #qyt_main_frame .product_info dl dt img { border:1px solid #e0e0e0; padding:2px; } .product_info dl dd { margin-left:96px; color:#666666; } .product_info dl dd .p1 { font-size:14px; font-weight:bold; margin-bottom:5px; } .product_info dl dd .p2 { color:#808080; margin-bottom:5px; } .product_info dl dd .p3 span { display:inline-block; color:#ff0000; } @media screen and (min-width:1200px) { #photos_box { width:330px; } #photos_box div.photos_containers { width:266px; } }@media screen and (min-width:980px) and (max-width:1200px) { #photos_box { width:330px; } #photos_box div.photos_containers { width:256px; } }@media screen and (min-width:768px) and (max-width:979px) { #photos_box { width:330px; } #photos_box div.photos_containers { width:256px; } }@media screen and (max-width:767px) { .float { display:none; } #photos_box { width:398px; } #photos_box div.photos_containers { width:334px; } }@media screen and (max-width:480px) { #photos_box { width:262px; } #photos_box div.photos_containers { width:198px; } }@media screen and (max-width:380px) { #photos_box { width:262px; } #photos_box div.photos_containers { width:198px; } }.view { float:left; overflow:hidden; position:relative; text-align:center; cursor:default; background:#fff; } .view .mask,.view .content { width:100%; height:100%; position:absolute; overflow:hidden; top:0; left:0; } .view img { display:block; position:relative; } .view h2 { text-transform:uppercase; color:#fff; text-align:center; position:relative; font-size:10px; padding:10px; background:rgba(0,0,0,0.8); margin:20px 0 0 0; } .view a.info { display:inline-block; text-decoration:none; padding:7px 14px; background:#000; color:#fff; text-transform:uppercase; -webkit-box-shadow:0 0 1px #000; -moz-box-shadow:0 0 1px #000; box-shadow:0 0 1px #000; } .view a.info:hover { -webkit-box-shadow:0 0 5px #000; -moz-box-shadow:0 0 5px #000; box-shadow:0 0 5px #000; } .view-sixth img { -webkit-transition:all 0.4s ease-in-out 0.5s; -moz-transition:all 0.4s ease-in-out 0.5s; -o-transition:all 0.4s ease-in-out 0.5s; -ms-transition:all 0.4s ease-in-out 0.5s; transition:all 0.4s ease-in-out 0.5s; } .view-sixth .mask { background-color:rgba(146,96,91,0.5); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; -webkit-transition:all 0.3s ease-in 0.4s; -moz-transition:all 0.3s ease-in 0.4s; -o-transition:all 0.3s ease-in 0.4s; -ms-transition:all 0.3s ease-in 0.4s; transition:all 0.3s ease-in 0.4s; } .view-sixth h2 { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; border-bottom:1px solid rgba(0,0,0,0.3); background:transparent; -webkit-transform:scale(10); -moz-transform:scale(10); -o-transform:scale(10); -ms-transform:scale(10); transform:scale(10); -webkit-transition:all 0.3s ease-in-out 0.1s; -moz-transition:all 0.3s ease-in-out 0.1s; -o-transition:all 0.3s ease-in-out 0.1s; -ms-transition:all 0.3s ease-in-out 0.1s; transition:all 0.3s ease-in-out 0.1s; } .view-sixth a.info { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -o-transform:translateY(100px); -ms-transform:translateY(100px); transform:translateY(100px); -webkit-transition:all 0.3s ease-in-out 0.1s; -moz-transition:all 0.3s ease-in-out 0.1s; -o-transition:all 0.3s ease-in-out 0.1s; -ms-transition:all 0.3s ease-in-out 0.1s; transition:all 0.3s ease-in-out 0.1s; } .view-sixth:hover .mask { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; -webkit-transition-delay:0s; -moz-transition-delay:0s; -o-transition-delay:0s; -ms-transition-delay:0s; transition-delay:0s; } .view-sixth:hover img { -webkit-transition-delay:0s; -moz-transition-delay:0s; -o-transition-delay:0s; -ms-transition-delay:0s; transition-delay:0s; } .view-sixth:hover h2 { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); -webkit-transition-delay:0.1s; -moz-transition-delay:0.1s; -o-transition-delay:0.1s; -ms-transition-delay:0.1s; transition-delay:0.1s; width:100%; } .view-sixth:hover a.info { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -o-transform:translateY(0px); -ms-transform:translateY(0px); transform:translateY(0px); -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; -o-transition-delay:0.3s; -ms-transition-delay:0.3s; transition-delay:0.3s; line-height:20px; } .view-content { color:#fff; font-size:14px; font-weight:900; } .design_all .mask { cursor:pointer; } .ui-dialog{ z-index:1000000!important; } .modal-body{ overflow:auto; } .slideDownRetourn { -webkit-animation-name: slideDownRetourn; -moz-animation-name: slideDownRetourn; -ms-animation-name: slideDownRetourn; -o-animation-name: slideDownRetourn; animation-name: slideDownRetourn; } @-moz-keyframes slideDownRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes slideDownRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-o-keyframes slideDownRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-ms-keyframes slideDownRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @keyframes slideDownRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } .slideLeftRetourn { -webkit-animation-name: slideLeftRetourn; -moz-animation-name: slideLeftRetourn; -ms-animation-name: slideLeftRetourn; -o-animation-name: slideLeftRetourn; animation-name: slideLeftRetourn; } @-moz-keyframes slideLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slideLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes slideLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-ms-keyframes slideLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @keyframes slideLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } .slideUpRetourn { -webkit-animation-name: slideUpRetourn; -moz-animation-name: slideUpRetourn; -ms-animation-name: slideUpRetourn; -o-animation-name: slideUpRetourn; animation-name: slideUpRetourn; } @-moz-keyframes slideUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes slideUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-o-keyframes slideUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-ms-keyframes slideUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @keyframes slideUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } .phone-menu0 ul, .phone-menu1 ul{ margin:0; } .phone-menu0{ height:54px; border-top:1px solid #1d1d1d; border-bottom:1px solid #000; position:fixed; bottom:0; width:100%; display:none; padding:0; margin:100px 0 0 0;z-index: 9999; background-image: -webkit-gradient(linear, center top, center bottom, from(#474747), to(#2f2f2f)); background-image: -webkit-linear-gradient(top, #474747, #2f2f2f); background-image: -moz-linear-gradient(top, #474747, #2f2f2f); background-image: -o-linear-gradient(top, #474747, #2f2f2f); background-image: -ms-linear-gradient(top, #474747, #2f2f2f); background-image: linear-gradient(to bottom, #474747, #2f2f2f); background: #474747; background: -moz-linear-gradient(top, #474747 0%, #2f2f2f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#474747), color-stop(100%,#2f2f2f)); background: -webkit-linear-gradient(top, #474747 0%,#2f2f2f 100%); background: -o-linear-gradient(top, #474747 0%,#2f2f2f 100%); background: -ms-linear-gradient(top, #474747 0%,#2f2f2f 100%); background: linear-gradient(to bottom, #474747 0%,#2f2f2f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#2f2f2f',GradientType=0 ); } .phone-menu0 li{ width:25%; text-align:center; float:left; list-style:none; } .phone-menu0 li:hover,.phone-menu li.active{ background-color:#333;} .phone-menu0 li a{ color:#FFF; font-size:12px; text-decoration:none;} .phone-menu0 li i{ background:url(../images/phone-menu0.png) no-repeat; background-size:25px; margin:6px auto 2px; display:block; width:25px; height:25px; float:none;} .phone-menu0 li i.icon1{ background-position:0 0;} .phone-menu0 li i.icon2{ background-position:0 -25px;} .phone-menu0 li i.icon3{ background-position:0 -50px;} .phone-menu0 li i.icon4{ background-position:0 -75px;} .phone-menu1{ height:54px; border-top:1px solid #f2f2f2; border-bottom:1px solid #ccc; position:fixed; bottom:0; width:100%; display:none;padding:0; margin:0;z-index: 9999; background-image: -webkit-gradient(linear, center top, center bottom, from(white), to(#d4d4d4)); background-image: -webkit-linear-gradient(top, white, #d4d4d4); background-image: -moz-linear-gradient(top, white, #d4d4d4); background-image: -o-linear-gradient(top, white, #d4d4d4); background-image: -ms-linear-gradient(top, white, #d4d4d4); background-image: linear-gradient(to bottom, white, #d4d4d4); background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #d4d4d4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d4d4d4)); background: -webkit-linear-gradient(top, #ffffff 0%,#d4d4d4 100%); background: -o-linear-gradient(top, #ffffff 0%,#d4d4d4 100%); background: -ms-linear-gradient(top, #ffffff 0%,#d4d4d4 100%); background: linear-gradient(to bottom, #ffffff 0%,#d4d4d4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d4d4d4',GradientType=0 ); } .phone-menu1 li{ width:25%; text-align:center; float:left; list-style:none; } .phone-menu1 li:hover,.phone-menu li.active{ background-color:#d4d4d4;} .phone-menu1 li a{ color:#666; font-size:12px; text-decoration:none;} .phone-menu1 li i{ background:url(../images/phone-menu1.png) no-repeat; background-size:25px; margin:6px auto 2px; display:block; width:25px; height:25px;float:none;} .phone-menu1 li i.icon1{ background-position:0 0;} .phone-menu1 li i.icon2{ background-position:0 -25px;} .phone-menu1 li i.icon3{ background-position:0 -50px;} .phone-menu1 li i.icon4{ background-position:0 -75px;} @media screen and (max-width: 600px) { .phone-menu0,.phone-menu1{ display:block;} }