/* #------------------------------------------------------------------------ # CloudHost - September Joomla! template (for Joomla 2.5) # # Copyright (C) 2007-2013 Gavick.com. All Rights Reserved. # License: Copyrighted Commercial Software # Website: http://www.gavick.com # Support: support@gavick.com */ /* Menu */ .imageBg #gkLogo.cssLogo { margin-top: 8px; } #gkTopBar, #gkMenuWrap #gkTopBar { display: none; } .imageBg #gkTopBar{ display: block; } #gkMenuWrap #gkLogo.cssLogo { margin-top: 8px; } #gkMobileMenu { margin: 6px 0 4px 0!important; } #gkMenuWrap { min-height: 54px; } /* Containers */ .gkPage { padding: 0 15px!important; } #gkHeader { margin-bottom: 20px; } .grey-content #gkMainbody { margin: 0 auto; max-width: 300px; } #gkSidebar .box, #gkBottom1 .box, #gkBottom2 .box, #gkBottom3 .box, #gkBottom4 .box, #gkBottom5 .box, #gkBottom6 .box { clear: both!important; float: none!important; margin: 0 auto; max-width: 300px; width: 100%; } #gkBottom1 .box, #gkBottom2 .box, #gkBottom3 .box, #gkBottom4 .box, #gkBottom5 .box, #gkBottom6 .box { margin-bottom: 20px; } #gkSidebar > div { margin-top: 20px!important; padding-top: 25px!important; } #gkSidebar > div > .box { float: none; margin-top: 0!important; margin-bottom: 12px!important; width: 100%; } #gkSidebar > div > .box:nth-child(2n+1) { clear: both!important; } #gkSidebar > div > .box:nth-child(odd) { padding-right: 0px; } #gkSidebar > div > .box:nth-child(even) { padding-left: 0px; } .box.bigspaces { padding: 50px 0 0 0!important; } body .gkColumns.bigSpaces > div { border-left: 1px solid none; } /* limitation suffixes */ .box.notablet { display: block!important; } .box.nomobile { display: none!important; } .box.onlytablet { display: none!important; } .box.onlymobile { display: block!important; } .box.notablet.nomobile { display: none!important; } /* Fix for the user profile */ .profile dt { width: 100% !important; } /* Fix for the contact page */ .contact .contact-image { float: left !important; } .contact .contact-address { clear: both !important; padding-top: 20px !important; } .contact .contact-form input, .contact .contact-form textarea { width: 100% !important; } /* Fix for the search */ fieldset.word #search-searchword, fieldset.word .inputbox { width: 50%; } fieldset.phrases .ordering-box, fieldset.only input[type="checkbox"], fieldset.phrases input[type="radio"] { clear: both; } /* Fix for the register */ #member-registration dd { clear: both !important; display: block !important; } /* Fix for tables */ fieldset { box-sizing: border-box!important; max-width: 100%!important; width: 100%!important; overflow: hidden; } #gkMainbody table:before { content: "Scroll horizontally to view the whole table"; height: 14px; width: 100%; display: block; font-size: 10px; margin-top: -30px; margin-bottom: 10px; font-family: Arial, sans-serif; } #gkMainbody table { width: 540px!important; display: block!important; padding: 30px 0 20px 0; /* padding for the scrollbars and the top message */ overflow:scroll; -webkit-overflow-scrolling:touch; } #gkMainbody table tbody, #gkMainbody table thead, #gkMainbody table tfoot { width: 540px!important; display: table; } @media only screen and (max-width: 320px), only screen and (max-device-width: 320px) and (-moz-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (-o-max-device-pixel-ratio: 1.5/1), only screen and (max-device-width: 320px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (max-device-pixel-ratio: 1.5), only screen and (max-device-width: 640px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (min-device-pixel-ratio: 2) { #gkMainbody table { width: 260px!important; } } @media only screen and (max-width: 480px) and (orientation:landscape), only screen and (max-device-width: 480px) and (-moz-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (-o-max-device-pixel-ratio: 1.5/1) and (orientation:landscape), only screen and (max-device-width: 480px) and (-webkit-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 960px) and (-moz-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:landscape), only screen and (max-device-width: 960px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (min-device-pixel-ratio: 2) and (orientation:landscape) { #gkMainbody table { width: 420px!important; } } /* top/bottom modules */ .box.gkmod-1, .box.gkmod-2, .box.gkmod-3, .box.gkmod-4, .box.gkmod-more { float: left!important; } .box.gkmod-1, .box.gkmod-2, .box.gkmod-3, .box.gkmod-4, .box.gkmod-more { width: 100%!important; } .box.gkmod-more.gkmod-last-1:last-child, .box.gkmod-more.gkmod-last-2:last-child, .box.gkmod-more.gkmod-last-2:nth-last-child(2), #gkPageWrap .box.gkmod-more.gkmod-last-3:last-child, #gkPageWrap .box.gkmod-more.gkmod-last-3:nth-last-child(2), #gkPageWrap .box.gkmod-more.gkmod-last-3:nth-last-child(3) { width: 100%!important; } /* top/bottom modules */ body #gkPage .box { margin-bottom: 20px!important; } /* 3-column layout */ .gkCols3 .box.gkmod-more:nth-child(1n) { clear: both; } .gkCols3 .box.gkmod-1, .gkCols3 .box.gkmod-2, .gkCols3 .box.gkmod-3, .gkCols3 .box.gkmod-more, .gkCols3 .box.gkmod-more.gkmod-last-1:last-child, .gkCols3 .box.gkmod-more.gkmod-last-2:last-child, .gkCols3 .box.gkmod-more.gkmod-last-2:nth-last-child(2) { width: 100%!important; } /* 4-column layout */ body .gkCols4 .box.gkmod-more:nth-child(1n) { clear: both; } body .gkCols4 .box.gkmod-1, body .gkCols4 .box.gkmod-2, body .gkCols4 .box.gkmod-3, body .gkCols4 .box.gkmod-4, body .gkCols4 .box.gkmod-more, body .gkCols4 .box.gkmod-more.gkmod-last-1:last-child, body .gkCols4 .box.gkmod-more.gkmod-last-2:last-child, body .gkCols4 .box.gkmod-more.gkmod-last-2:nth-last-child(2), body .gkCols4 .box.gkmod-more.gkmod-last-3:last-child, body .gkCols4 .box.gkmod-more.gkmod-last-3:nth-last-child(2), body .gkCols4 .box.gkmod-more.gkmod-last-3:nth-last-child(3) { width: 100%!important; } /* 6-column layout */ body .gkCols6 .box.gkmod-more:nth-child(1n) { clear: both; } body .gkCols6 .box.gkmod-1, body .gkCols6 .box.gkmod-2, body .gkCols6 .box.gkmod-3, body .gkCols6 .box.gkmod-4, body .gkCols6 .box.gkmod-more, body .gkCols6 .box.gkmod-5, body .gkCols6 .box.gkmod-more, body .gkCols6 .box.gkmod-6, body .gkCols6 .box.gkmod-more, body .gkCols6 .box.gkmod-more.gkmod-last-1:last-child, body .gkCols6 .box.gkmod-more.gkmod-last-2:last-child, body .gkCols6 .box.gkmod-more.gkmod-last-2:nth-last-child(2), body .gkCols6 .box.gkmod-more.gkmod-last-3:last-child, body .gkCols6 .box.gkmod-more.gkmod-last-3:nth-last-child(2), body .gkCols6 .box.gkmod-more.gkmod-last-3:nth-last-child(3), body .gkCols6 .box.gkmod-more.gkmod-last-4:last-child, body .gkCols6 .box.gkmod-more.gkmod-last-4:nth-last-child(2), body .gkCols6 .box.gkmod-more.gkmod-last-4:nth-last-child(3), body .gkCols6 .box.gkmod-more.gkmod-last-4:nth-last-child(4), body .gkCols6 .box.gkmod-more.gkmod-last-5:last-child, body .gkCols6 .box.gkmod-more.gkmod-last-5:nth-last-child(2), body .gkCols6 .box.gkmod-more.gkmod-last-5:nth-last-child(3), body .gkCols6 .box.gkmod-more.gkmod-last-5:nth-last-child(4), body .gkCols6 .box.gkmod-more.gkmod-last-5:nth-last-child(5) { width: 100%!important; } /* article fix */ #gkContent article > time { display: none!important; } #gkContent article > time + header { padding-left: 0!important; } #gkContent article header li.itemDate, #gkContent article header li.item-date { display: block; } article header ul { margin: 0 0 10px; } /* NSP adjustments */ .nspArtPage .nspArt { border-top: 1px solid #eee!important; border-left: none!important; padding-bottom: 20px!important; padding-top: 20px!important; width: 100%!important; } .nspArtPage .nspArt:first-child { border-top: none!important; } /* other elements */ article header h1, .category header { line-height: 32px; padding: 18px 0 0px; } article header h1, .category header, article header h2 { font-size: 24px; } h1 { font-size: 28px; } h2, .componentheading, .category header h2 { font-size: 28px; } article header h2 { line-height: 32px; } h3 { font-size: 24px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 14px; } #gkSocialAPI { overflow: hidden; } .cols-2 .column-2, .cols-3 .column-3 { padding: 0!important; } .itemComments .itemCommentsList li img { float: left; margin-left: 0; margin-right: 10px; position: static; } .itemCommentsList li h3 { float: none; margin-top: 5px; } #gkMainbody .registration { width: 100%; } /* NSP */ .box.header .nspImageWrapper h4 { font-size: 14px!important; } .nspArts, .nspLinksWrap { clear: both; float: left!important; width: 100%!important; } .nspArt .nspImageWrapper { width: 100%; } /* Demo content */ .imageBg #gkHeader { background-image: url('../images/EkolyRU0xdo9.jpg'); } .gkColorPriceTable, .gkFrame, .gkDetails { margin: 0 auto; max-width: 300px; } .gkColorPriceTable { padding: 0 0 20px 0; } .gkPriceTable { margin: 0 auto; max-width: 300px; } .gkPriceTable > dl, .gkColorPriceTable > dl { margin: 0 0 20px 0!important; width: 100%!important; } .gkPriceTable { padding: 0 0 20px 0; } .gkPriceTable dd.gkImage img { width: 100%; } .gkTestimonials[data-extralinks="on"] > div > div { width: 100%; } .gkTestimonials > div > div > blockquote { font-size: 12px; line-height: 1.4; } .gkTestimonials > div > div > blockquote > strong { font-size: 12px; margin-top: 10px; } .gkColorPriceTable .gkLink a { font-size: 13px; height: 64px; line-height: 65px; width: 64px; } .gkColorPriceTable .gkLink { margin: 0 0 -42px 0; } .gkColorPriceTable > dl { margin: 0 0 40px 0!important; } .gkFrame .button { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 100%; width: 100%; } .gkFrame > h4, .gkFrame > p { margin-top: 10px; max-width: 100%; width: 100%; } .gkBigTitle { font-size: 26px; line-height: 36px; margin: 20px 0 12px 0; } .gkBigTitle + p { font-size: 12px; line-height: 20px; padding: 0 10px 10px; } .gkDomainSearch { margin: 0 auto; max-width: 300px; } .gkDomainSearch input[type="text"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 0 10px 0; } .gkDomainSearch input[type="button"] { float: right; } .gkDomainSearch div.gkBigSelect { margin: 0; } .gkFeatures h2 { margin: 24px 0; } .gkIcon span { font-size: 12px; top: -17px; } .gkIcon i { margin: 10px auto 50px auto; } #gkFooterNav li { float: none; } /* K2 fixes */ .itemBody.containsItemInfo, .itemOtherElements.containsItemInfo, .itemListView .itemBlock.containsItemInfo { margin-left: 0!important; } aside.itemAsideInfo { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 20px 0!important; position: static!important; width: 100%!important; } .itemCommentsList li > div > div > span { clear: both; display: block; } .itemCommentsList li > div { margin-left: 0!important; padding-left: 0!important; } .itemComments h3 { font-size: 20px; padding: 10px 0 0; } .items-row > div { margin-bottom: 30px; padding: 0!important; } article header h1, article header h2 { font-size: 24px!important; line-height: 1.2; } .genericView .itemView { padding: 0!important; width: 100%!important; } .itemAuthorDetails { clear: both; margin: 0!important; padding: 10px; } .itemAuthorData { padding: 0; } .itemAuthorData img { display: block; margin: 0 0 20px 0; } .itemAuthorBlock > .gkAvatar > img { margin: 12px!important; } .itemComments h3, .itemAuthorContent h3 { padding: 0 0 24px; } .itemComments p { clear: both; } .itemComments .itemCommentsList li span { font-size: 12px; margin: 0 12px 0 0; clear: both; float: left; } .itemComments .itemCommentsList li > img, .k2LatestCommentsBlock img, .itemAuthorBlock > .gkAvatar > img { margin: 10px 0; } .itemComments .itemCommentsList li { padding: 24px 0 12px 0; } #gkPopupLogin { margin-left: -150px; width: 300px; } .gkPopupWrap { padding: 15px; } .gkPopupWrap h3 { font-size: 24px; font-weight: 400; line-height: 24px; margin: 0 0 10px; } /* Subpages */ #gkHeader.gkNoMenu { padding-top: 50px; } .contact-form dl { float: left; width: 100%; } .support .gkIcon { margin: 0 0 10px; width: 50%; } .support small { width: 100%; } .hosting .features > div { margin: 0 0 3% 0; width: 100%; } #sbox-window { position: absolute; width: 30%; margin: 0 auto; padding: 1em; -webkit-border-radius: 0.35em; -moz-border-radius: 0.35em; border-radius: 0.35em; background-color: #fff; font-size: 1.4em; } #sbox-window[aria-hidden=true], #sbox-overlay[aria-hidden=true] { display: none; } #sbox-btn-close { position: absolute; width: 30px; height: 30px; right: 155px; top: -15px; background: url(../images/modal/closebox.png) no-repeat center; border: none; } /*Call button animated*/ .callback-bt { background: #019cde; border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 8px 10px rgba(19, 118, 191, 0.3); cursor: pointer; height: 68px; text-align: center; width: 68px; position: fixed; right: 2%; bottom: 3%; z-index: 999; transition: .3s; -webkit-animation: hoverWave linear 1s infinite; animation: hoverWave linear 1s infinite; } .callback-bt .text-call { height: 68px; width: 68px; border-radius: 50%; position: relative; overflow: hidden; } .callback-bt .text-call span { text-align: center; color: #5252ca; opacity: 0; font-size: 0; position: absolute; right: 12px; top: 27px; line-height: 18px; font-weight: 600; text-transform: uppercase; transition: opacity .3s linear; font-family: 'montserrat', Arial Black, Helvetica, sans-serif; } .callback-bt .text-call:hover span { opacity: 1; font-size: 11px; } .callback-bt:hover i { color: #fbc633; font-size: 40px; transition: .3s; } .callback-bt i { color: #fff; font-size: 34px; transition: .3s; line-height: 66px; transition: .5s ease-in-out; } @-webkit-keyframes hoverWave { 0% { box-shadow: 0 8px 10px rgba(19, 118, 191, 0.3), 0 0 0 0 rgba(19, 118, 191, 0.2), 0 0 0 0 rgba(19, 118, 191, 0.1); } 40% { box-shadow: 0 8px 10px rgba(19, 118, 191, 0.3), 0 0 0 15px rgba(19, 118, 191, 0.2), 0 0 0 0 rgba(19, 118, 191, 0.1); } 80% { box-shadow: 0 8px 10px rgba(19, 118, 191, 0.3), 0 0 0 30px rgba(19, 118, 191, 0.2), 0 0 0 26.7px rgba(19, 118, 191, 0.1); } 100% { box-shadow: 0 8px 10px rgba(19, 118, 191, 0.3), 0 0 0 30px rgba(19, 118, 191, 0.2), 0 0 0 40px rgba(19, 118, 191, 0.1); } } @keyframes hoverWave { 0% { box-shadow: 0 8px 10px rgba(19, 118, 191, 0.3), 0 0 0 0 rgba(19, 118, 191, 0.2), 0 0 0 0 rgba(19, 118, 191, 0.1); } 40% { box-shadow: 0 8px 10px rgba(19, 118, 191, 0.3), 0 0 0 15px rgba(19, 118, 191, 0.2), 0 0 0 0 rgba(19, 118, 191, 0.1); } 80% { box-shadow: 0 8px 10px rgba(19, 118, 191, 0.3), 0 0 0 30px rgba(19, 118, 191, 0.2), 0 0 0 26.7px rgba(19, 118, 191, 0.1); } 100% { box-shadow: 0 8px 10px rgba(19, 118, 191, 0.3), 0 0 0 30px rgba(19, 118, 191, 0.2), 0 0 0 40px rgba(19, 118, 191, 0.1); } } /* animations icon */ @keyframes shake { 0% { transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); } 10% { transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg); } 20% { transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg); } 30% { transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg); } 40% { transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg); } 50% { transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg); } 60% { transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg); } 70% { transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg); } 80% { transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg); } 90% { transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg); } 100% { transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); } } @-webkit-keyframes shake { 0% { transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); } 10% { transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg); } 20% { transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg); } 30% { transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg); } 40% { transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg); } 50% { transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg); } 60% { transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg); } 70% { transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg); } 80% { transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg); } 90% { transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg); } 100% { transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); } } .vivify { -webkit-animation-duration: .8s; -webkit-animation-fill-mode: both; animation-duration: .8s; animation-fill-mode: both; } .infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .pulsate { -webkit-animation-name: pulsate; animation-name: pulsate; transform-origin: center; } @-webkit-keyframes pulsate { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1); } 50% { transform: scale3d(0.8, 0.8, 0.8); } 100% { -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); transform: scale3d(1, 1, 1); } } @keyframes pulsate { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1); } 50% { transform: scale3d(0.8, 0.8, 0.8); } 100% { -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); transform: scale3d(1, 1, 1); } } .blink { -webkit-animation-name: blink; animation-name: blink; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes blink { 0% { opacity: 1; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 1; } } @keyframes blink { 0% { opacity: 1; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 1; } } .hitLeft { -webkit-animation-name: hitLeft; animation-name: hitLeft; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes hitLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transform: translateX(0); } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translateX(20px) rotate(4deg); } } @keyframes hitLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transform: translateX(0); } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translateX(20px) rotate(4deg); } } .hitRight { -webkit-animation-name: hitRight; animation-name: hitRight; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes hitRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transform: translateX(0); } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translateX(-20px) rotate(-4deg); } } @keyframes hitRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transform: translateX(0); } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translateX(-20px) rotate(-4deg); } } .shake { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } @keyframes shake { 10% { transform: translateX(-10px); } 20% { transform: translateX(10px); } 30% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 50% { transform: translateX(-10px); } 60% { transform: translateX(10px); } 70% { transform: translateX(-10px); } 80% { transform: translateX(10px); } 90% { transform: translateX(-10px); } } .ball { -webkit-animation-name: ball; animation-name: ball; -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes ball { 0% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: translate3d(0, 0, 0); } 20% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); transform: translate3d(0, -100px, 0); } 40% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); transform: translate3d(0, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); transform: translate3d(0, -30px, 0); } 75% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); transform: translate3d(0, 0, 0); } 85% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); transform: translate3d(0, -15px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0); } } @keyframes ball { 0% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: translate3d(0, 0, 0); } 20% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); transform: translate3d(0, -100px, 0); } 40% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); transform: translate3d(0, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); transform: translate3d(0, -30px, 0); } 75% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); transform: translate3d(0, 0, 0); } 85% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); transform: translate3d(0, -15px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0); } } .pullUp { -webkit-animation-name: pullUp; animation-name: pullUp; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes pullUp { 0% { transform: scale3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: scale3d(1, 0, 1); transform-origin: center bottom; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: scale3d(1, 1, 1); } } @keyframes pullUp { 0% { transform: scale3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: scale3d(1, 0, 1); transform-origin: center bottom; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: scale3d(1, 1, 1); } } .pullDown { -webkit-animation-name: pullDown; animation-name: pullDown; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes pullDown { 0% { transform: scale3d(0, 0, 0); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: scale3d(1, 0, 1); transform-origin: center top; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: scale3d(1, 1, 1); } } @keyframes pullDown { 0% { transform: scale3d(0, 0, 0); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: scale3d(1, 0, 1); transform-origin: center top; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: scale3d(1, 1, 1); } } .pullLeft { -webkit-animation-name: pullLeft; animation-name: pullLeft; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes pullLeft { 0% { transform: scale3d(0, 1, 1); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: scale3d(0, 1, 1); transform-origin: center left; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: scale3d(1, 1, 1); } } @keyframes pullLeft { 0% { transform: scale3d(0, 1, 1); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: scale3d(0, 1, 1); transform-origin: center left; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: scale3d(1, 1, 1); } } .pullRight { -webkit-animation-name: pullRight; animation-name: pullRight; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes pullRight { 0% { transform: scale3d(0, 1, 1); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: scale3d(0, 1, 1); transform-origin: center right; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: scale3d(1, 1, 1); } } @keyframes pullRight { 0% { transform: scale3d(0, 1, 1); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: scale3d(0, 1, 1); transform-origin: center right; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: scale3d(1, 1, 1); } } .jumpInLeft { -webkit-animation-name: jumpInLeft; animation-name: jumpInLeft; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes jumpInLeft { 0% { opacity: 0; transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); } 50% { opacity: 1; transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); } 70% { transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); } 90% { transform: scale3d(1, 1, 1) rotate(0deg); } } @keyframes jumpInLeft { 0% { opacity: 0; transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); } 50% { opacity: 1; transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); } 70% { transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); } 90% { transform: scale3d(1, 1, 1) rotate(0deg); } } .jumpInRight { -webkit-animation-name: jumpInRight; animation-name: jumpInRight; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes jumpInRight { 0% { opacity: 0; transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); } 50% { opacity: 1; transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); } 70% { transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); } 90% { transform: scale3d(1, 1, 1) rotate(0deg); } } @keyframes jumpInRight { 0% { opacity: 0; transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); } 50% { opacity: 1; transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); } 70% { transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); } 90% { transform: scale3d(1, 1, 1) rotate(0deg); } } .jumpOutRight { -webkit-animation-name: jumpOutRight; animation-name: jumpOutRight; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes jumpOutRight { 0% { transform: scale3d(1, 1, 1) rotate(0deg); } 30% { transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); } 70% { opacity: 1; transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); } 100% { opacity: 0; transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); } } @keyframes jumpOutRight { 0% { transform: scale3d(1, 1, 1) rotate(0deg); } 30% { transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); } 70% { opacity: 1; transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); } 100% { opacity: 0; transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); } } .jumpOutLeft { -webkit-animation-name: jumpOutLeft; animation-name: jumpOutLeft; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes jumpOutLeft { 0% { transform: scale3d(1, 1, 1) rotate(0deg); } 30% { transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); } 70% { opacity: 1; transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); } 100% { opacity: 0; transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); } } @keyframes jumpOutLeft { 0% { transform: scale3d(1, 1, 1) rotate(0deg); } 30% { transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); } 70% { opacity: 1; transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); } 100% { opacity: 0; transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); } } .rollInLeft { -webkit-animation-name: rollInLeft; animation-name: rollInLeft; -webkit-animation-duration: .9s; animation-duration: .9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes rollInLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateX(-400px) rotate(445deg); opacity: 0; } 30% { opacity: 1; } 50% { transform: translateX(20px) rotate(20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateX(0) rotate(0deg); } } @keyframes rollInLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateX(-400px) rotate(445deg); opacity: 0; } 30% { opacity: 1; } 50% { transform: translateX(20px) rotate(20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateX(0) rotate(0deg); } } .rollInRight { -webkit-animation-name: rollInRight; animation-name: rollInRight; -webkit-animation-duration: .9s; animation-duration: .9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes rollInRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateX(400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { transform: translateX(-20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateX(0) rotate(0deg); } } @keyframes rollInRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateX(400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { transform: translateX(-20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateX(0) rotate(0deg); } } .rollInTop { -webkit-animation-name: rollInTop; animation-name: rollInTop; -webkit-animation-duration: .9s; animation-duration: .9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes rollInTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(-400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { transform: translateY(20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateY(0) rotate(0deg); } } @keyframes rollInTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(-400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { transform: translateY(20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateY(0) rotate(0deg); } } .rollInBottom { -webkit-animation-name: rollInBottom; animation-name: rollInBottom; -webkit-animation-duration: .9s; animation-duration: .9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes rollInBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { transform: translateY(-20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateY(0) rotate(0deg); } } @keyframes rollInBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { transform: translateY(-20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateY(0) rotate(0deg); } } .rollOutLeft { -webkit-animation-name: rollOutLeft; animation-name: rollOutLeft; -webkit-animation-duration: .9s; animation-duration: .9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes rollOutLeft { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateX(0) rotate(0deg); } 40% { opacity: 1; transform: translateX(20px) rotate(-20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateX(-400px) rotate(-445deg); } } @keyframes rollOutLeft { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateX(0) rotate(0deg); } 40% { opacity: 1; transform: translateX(20px) rotate(-20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateX(-400px) rotate(-445deg); } } .rollOutRight { -webkit-animation-name: rollOutRight; animation-name: rollOutRight; -webkit-animation-duration: .9s; animation-duration: .9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes rollOutRight { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateX(0) rotate(0deg); } 40% { opacity: 1; transform: translateX(-20px) rotate(20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateX(400px) rotate(445deg); } } @keyframes rollOutRight { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateX(0) rotate(0deg); } 40% { opacity: 1; transform: translateX(-20px) rotate(20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateX(400px) rotate(445deg); } } .rollOutTop { -webkit-animation-name: rollOutTop; animation-name: rollOutTop; -webkit-animation-duration: .9s; animation-duration: .9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes rollOutTop { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateY(0) rotate(0deg); } 40% { opacity: 1; transform: translateY(20px) rotate(20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(-400px) rotate(445deg); } } @keyframes rollOutTop { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateY(0) rotate(0deg); } 40% { opacity: 1; transform: translateY(20px) rotate(20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(-400px) rotate(445deg); } } .rollOutBottom { -webkit-animation-name: rollOutBottom; animation-name: rollOutBottom; -webkit-animation-duration: .9s; animation-duration: .9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes rollOutBottom { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateY(0) rotate(0deg); } 40% { opacity: 1; transform: translateY(-20px) rotate(-20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(400px) rotate(-445deg); } } @keyframes rollOutBottom { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateY(0) rotate(0deg); } 40% { opacity: 1; transform: translateY(-20px) rotate(-20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(400px) rotate(-445deg); } } .popIn { -webkit-animation-name: popIn; animation-name: popIn; } @-webkit-keyframes popIn { 0% { transform: scale3d(0, 0, 0); opacity: 0; } 20% { opacity: 1; } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1); } } @keyframes popIn { 0% { transform: scale3d(0, 0, 0); opacity: 0; } 20% { opacity: 1; } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1); } } .popInLeft { -webkit-animation-name: popInLeft; animation-name: popInLeft; } @-webkit-keyframes popInLeft { 0% { opacity: 0; transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1); } 40% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1); } } @keyframes popInLeft { 0% { opacity: 0; transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1); } 40% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1); } } .popInRight { -webkit-animation-name: popInRight; animation-name: popInRight; } @-webkit-keyframes popInRight { 0% { transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1); } } @keyframes popInRight { 0% { transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1); } } .popInTop { -webkit-animation-name: popInTop; animation-name: popInTop; } @-webkit-keyframes popInTop { 0% { transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } @keyframes popInTop { 0% { transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .popInBottom { -webkit-animation-name: popInBottom; animation-name: popInBottom; } @-webkit-keyframes popInBottom { 0% { transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } @keyframes popInBottom { 0% { transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .popOut { -webkit-animation-name: popOut; animation-name: popOut; -webkit-animation-duration: .5s; animation-duration: .5s; } @-webkit-keyframes popOut { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.08, 1.08, 1.08); } 80% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes popOut { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.08, 1.08, 1.08); } 80% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(0.3, 0.3, 0.3); } } .popOutLeft { -webkit-animation-name: popOutLeft; animation-name: popOutLeft; -webkit-animation-duration: .5s; animation-duration: .5s; } @-webkit-keyframes popOutLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform-origin: left center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0); } } @keyframes popOutLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform-origin: left center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0); } } .popOutRight { -webkit-animation-name: popOutRight; animation-name: popOutRight; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: .5s; animation-duration: .5s; } @-webkit-keyframes popOutRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform-origin: right center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0); } } @keyframes popOutRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform-origin: right center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0); } } .popOutTop { -webkit-animation-name: popOutTop; animation-name: popOutTop; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: .5s; animation-duration: .5s; } @-webkit-keyframes popOutTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform-origin: top center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0); } } @keyframes popOutTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform-origin: top center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0); } } .popOutBottom { -webkit-animation-name: popOutBottom; animation-name: popOutBottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: .5s; animation-duration: .5s; } @-webkit-keyframes popOutBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform-origin: bottom center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0); } } @keyframes popOutBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform-origin: bottom center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0); } } .flip { -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flip { from { transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 50% { transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } to { transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); -webkit-animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); } } @keyframes flip { from { transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 50% { transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } to { transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); -webkit-animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); } } .flipInX { -webkit-animation-name: flipInX; animation-name: flipInX; -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes flipInX { from { opacity: 0; transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); } 50% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1); } to { transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); } } @media (min-width: 1200px) { .callback-bt { display: none; } }