/* #CSS3 Keyframes ================================================== */ @-webkit-keyframes fadeIn { to { opacity: 1; } } @-moz-keyframes fadeIn { to { opacity: 1; } } @keyframes fadeIn { to { opacity: 1; } } @-webkit-keyframes moveUp { to { -webkit-transform: translateY(0); opacity: 1; } } @-moz-keyframes moveUp { to { -moz-transform: translateY(0); opacity: 1; } } @keyframes moveUp { to { transform: translateY(0); opacity: 1; } } @-webkit-keyframes scaleUp { to { -webkit-transform: scale(1); opacity: 1; } } @-moz-keyframes scaleUp { to { -moz-transform: scale(1); opacity: 1; } } @keyframes scaleUp { to { transform: scale(1); opacity: 1; } } @-webkit-keyframes fallPerspective { 100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } } @-moz-keyframes fallPerspective { 100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } } @keyframes fallPerspective { 100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } } @-webkit-keyframes fly { 100% { -webkit-transform: rotateX(0deg); opacity: 1; } } @-moz-keyframes fly { 100% { -moz-transform: rotateX(0deg); opacity: 1; } } @keyframes fly { 100% { transform: rotateX(0deg); opacity: 1; } } @-webkit-keyframes flip { 100% { -webkit-transform: rotateX(0deg); opacity: 1; } } @-moz-keyframes flip { 100% { -moz-transform: rotateX(0deg); opacity: 1; } } @keyframes flip { 100% { transform: rotateX(0deg); opacity: 1; } } @-webkit-keyframes helix { 100% { -webkit-transform: rotateY(0deg); opacity: 1; } } @-moz-keyframes helix { 100% { -moz-transform: rotateY(0deg); opacity: 1; } } @keyframes helix { 100% { transform: rotateY(0deg); opacity: 1; } } @-webkit-keyframes popUp { 70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform: scale(1); opacity: 1; } } @-moz-keyframes popUp { 70% { -moz-transform: scale(1.1); opacity: .8; -moz-animation-timing-function: ease-out; } 100% { -moz-transform: scale(1); opacity: 1; } } @keyframes popUp { 70% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; } 100% { transform: scale(1); opacity: 1; } } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); opacity: 1; } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); opacity: 1; } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); opacity: 1; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); opacity: 1; } } @-webkit-keyframes flipX { 0% {-webkit-transform: perspective(400px) rotateX(90deg);opacity: 0;} 100% {-webkit-transform: perspective(400px) rotateX(0deg);opacity: 1;} } @-moz-keyframes flipX { 0% {-moz-transform: perspective(400px) rotateX(90deg);opacity: 0;} 100% {-moz-transform: perspective(400px) rotateX(0deg);opacity: 1;} } @-o-keyframes flipX { 0% {-o-transform: perspective(400px) rotateX(90deg);opacity: 0;} 100% {-o-transform: perspective(400px) rotateX(0deg);opacity: 1;} } @keyframes flipX { 0% {transform: perspective(400px) rotateX(90deg);opacity: 0;} 100% {transform: perspective(400px) rotateX(0deg);opacity: 1;} } @-webkit-keyframes flipY { 0% {-webkit-transform: perspective(400px) rotateY(90deg);opacity: 0;} 100% {-webkit-transform: perspective(400px) rotateY(0deg);opacity: 1;} } @-moz-keyframes flipY { 0% {-moz-transform: perspective(400px) rotateY(90deg);opacity: 0;} 100% {-moz-transform: perspective(400px) rotateY(0deg);opacity: 1;} } @-o-keyframes flipY { 0% {-o-transform: perspective(400px) rotateY(90deg);opacity: 0;} 100% {-o-transform: perspective(400px) rotateY(0deg);opacity: 1;} } @keyframes flipY { 0% {transform: perspective(400px) rotateY(90deg);opacity: 0;} 100% {transform: perspective(400px) rotateY(0deg);opacity: 1;} } @-webkit-keyframes shake { 0%, 50%, 100% {-webkit-transform: translateX(0);} 25% {-webkit-transform: translateX(-100px);} 75% {-webkit-transform: translateX(100px);} } @-moz-keyframes shake { 0%, 50%, 100% {-moz-transform: translateX(0);} 25% {-moz-transform: translateX(-100px);} 75% {-moz-transform: translateX(100px);} } @-o-keyframes shake { 0%, 50%, 100% {-o-transform: translateX(0);} 25% {-o-transform: translateX(-100px);} 75% {-o-transform: translateX(100px);} } @keyframes shake { 0%, 50%, 100% {transform: translateX(0);} 25% {transform: translateX(-100px);} 75% {transform: translateX(100px);} } /* -------------------------------------------- LOAD IN ANIMATIONS -------------------------------------------- */ .nova-animation { -webkit-perspective: 600px; -moz-perspective: 600px; perspective: 600px; opacity: 0; position: relative; } html.no-js .nova-animation, .mobile-browser .nova-animation, .apple-mobile-browser .nova-animation, .nova-animation[data-animation="none"] { opacity: 1!important; left: auto!important; right: auto!important; bottom: auto!important; -webkit-transform: scale(1)!important; -o-transform: scale(1)!important; -moz-transform: scale(1)!important; transform: scale(1)!important; } .nova-animation[data-animation="grow"] { opacity: 0; -webkit-transform: scale(0.4); -o-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); -webkit-transform-origin: 50% 50%; -webkit-transition: all 0.6s cubic-bezier(0.15, 0.85, 0.35, 1.25); -moz-transition: all 0.6s cubic-bezier(0.15, 0.85, 0.35, 1.25); -o-transition: all 0.6s cubic-bezier(0.15, 0.85, 0.35, 1.25); transition: all 0.6s cubic-bezier(0.15, 0.85, 0.35, 1.25); } .nova-animation[data-animation="grow"].nova-animate { opacity: 1; -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .nova-animation[data-animation="pop-up"].nova-animate { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); -webkit-animation: popUp 0.4s ease-in-out forwards; -moz-animation: popUp 0.4s ease-in-out forwards; animation: popUp 0.4s ease-in-out forwards; } .nova-animation[data-animation="flip"].nova-animate { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotateX(-80deg); -moz-transform: rotateX(-80deg); transform: rotateX(-80deg); -webkit-animation: flip .8s ease-in-out forwards; -moz-animation: flip .8s ease-in-out forwards; animation: flip .8s ease-in-out forwards; } .nova-animation[data-animation="helix"].nova-animate { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-animation: helix .8s ease-in-out forwards; -moz-animation: helix .8s ease-in-out forwards; animation: helix .8s ease-in-out forwards; } .nova-animation[data-animation="move-up"].nova-animate { -webkit-transform: translateY(200px); -moz-transform: translateY(200px); transform: translateY(200px); -webkit-animation: moveUp 0.65s ease forwards; -moz-animation: moveUp 0.65s ease forwards; animation: moveUp 0.65s ease forwards; } .nova-animation[data-animation="spin"].nova-animate { -webkit-animation: spin 0.65s ease forwards; -moz-animation: spin 0.65s ease forwards; animation: spin 0.65s ease forwards; } .nova-animation[data-animation="flip-x"].nova-animate { -webkit-backface-visibility: visible; -moz-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-animation: flipX 0.65s ease forwards; -moz-animation: flipX 0.65s ease forwards; animation: flipX 0.65s ease forwards; } .nova-animation[data-animation="flip-y"].nova-animate { -webkit-backface-visibility: visible; -moz-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-animation: flipY 0.65s ease forwards; -moz-animation: flipY 0.65s ease forwards; animation: flipY 0.65s ease forwards; } .nova-animation[data-animation="fade-from-left"] { left: -70px; } .nova-animation[data-animation="fade-from-right"] { right: -70px; } .nova-animation[data-animation="fade-from-bottom"] { bottom: -120px; } .nova-animation[data-animation="fade-from-left"], .nova-animation[data-animation="fade-from-right"] { margin: 0 auto; } .browser-ie .nova-animation[data-animation="pop-up"].nova-animate, .browser-ie .nova-animation[data-animation="flip"].nova-animate, .browser-ie .nova-animation[data-animation="helix"].nova-animate, .browser-ie .nova-animation[data-animation="fly"].nova-animate, .browser-ie .nova-animation[data-animation="move-up"].nova-animate, .browser-ie .nova-animation[data-animation="spin"].nova-animate, .browser-ie .nova-animation[data-animation="flip-x"].nova-animate, .browser-ie .nova-animation[data-animation="flip-y"].nova-animate { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }