img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} /*# sourceURL=wp-img-auto-sizes-contain-inline-css */ :root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-color]){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}} /*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */ /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} /*# sourceURL=/wp-includes/css/classic-themes.min.css */ :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} /*# sourceURL=global-styles-inline-css */ [data-accordion] [data-content] {overflow: hidden; max-height: 0;} [data-accordion] {line-height: auto;} [data-control], [data-content] > * {padding: 5px;} [data-content] [data-accordion] {border: 0; padding: 0;} [data-accordion] [data-control] {position: relative;} [data-accordion] > [data-control]:after {content: ""; position: absolute; right: 10px; top: 0; bottom: 0; color: #444; width: 24px; background: url('/wp-content/plugins/sp-faq/assets/images/down.png') center center no-repeat; background-size: 50%;} [data-accordion].open > [data-control]:after {-webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg);} .faq-title{cursor:pointer; padding:15px 30px 15px 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .faq-title h4{margin:0px !important; font-size:20px !important; line-height:22px !important; padding: 0 !important;} .faq-accordion .faq-main{border:1px solid #d9d9d9; margin-bottom:15px; background:#f4f4f4; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;} .faq-accordion .faq-main.open{background:#fff;} .faq-accordion .faq-main.open h4{color:#333}/* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /*! * animate.css -http://daneden.me/animate * Version - 3.7.0 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2018 Daniel Eden */ @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -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); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -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); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -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); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -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); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -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); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -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); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -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); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -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); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -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); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -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); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -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); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -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); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -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); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -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); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -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); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -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); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.fast { -webkit-animation-duration: 800ms; animation-duration: 800ms; } .animated.faster { -webkit-animation-duration: 500ms; animation-duration: 500ms; } .animated.slow { -webkit-animation-duration: 2s; animation-duration: 2s; } @media (prefers-reduced-motion) { .animated { -webkit-animation: unset !important; animation: unset !important; -webkit-transition: none !important; transition: none !important; } }@media(min-width:768px) and (min-width:1600px) { .booster_packege_tabs ul li { padding: 25px 4px; width: 15.9%; } } @media(max-width:765px) { .eo-fav-champs-line-block img { width: 50px; height: 50px; } .record__content { width: 100%; border-radius: 48px; background: var(--3, #EB5C29); max-width: 100%; padding: 25px; margin-right: 4%; } section.service__section { padding: 0px; margin: 40px 0px; } } .banner-img img { width: auto; } .eo-fav-line-block { width: 24.9%; border-right: 1px solid #ebebeb; } .team-logo img { vertical-align: middle; height: 160px; width: 160px; margin: 20px auto; padding: 0 0 0 0px; } .team__battle .team-logo { height: 170px; width: 210px; } .team__battle { width: auto; } .order-target-arrows span { margin: -13px; } .banner-page-img img { display: none; float: right; padding-bottom: 40px; height: 295px; } @media only screen and (max-width: 1930px) { .col-product:nth-child(odd) { width: 45.6vw; margin-top: 0.2vw; } .col-product:nth-child(even) { width: 42vw; } } .booster_packege_tabs>ul>li:before { content: ''; position: absolute; width: 0px; top: 50%; left: 100%; transform: translateY(-50%); } .tier-name { padding: 10px 0; } #server_rate, #platform_rate { padding: 10px 0; } .ui-widget.ui-widget-content { margin: 15px 0; } .product-desc { text-shadow: 1px 1px 1px #505050; } .product-name { font: 2vw "League"; margin-bottom: 10px; text-shadow: 1px 2px 2px #4c4c4c; } @media only screen and (max-width: 1930px) { .product-desc { font-size: 23px; } } .product-text { top: 52%; } .current-img-league-boost, .tier-img, .current-img { animation: none; } #foxLeagueL { display: none; } .container_leftImg { width: auto; height: auto; margin: 20px 0 40px; } .product-calc-item { margin-bottom: 1rem; } /* Per-win / per-game: align the top row (rank tier + wins ring) columns with the bottom row (LP card + server card) which uses 41% width. .bcc-single's content-driven `width: auto` would let the wide rank tier SVG and the ring wind up at different widths — pushing their centers off the 25%/75% line that the LP/Server cards below sit on. Forcing 41% on the top row too keeps every card's center aligned. */ .product-type-val_per_win .placement_match_box > .product-calc-item, .product-type-val_per_game .placement_match_box > .product-calc-item, .product-type-val_coaching .placement_match_box > .product-calc-item { width: 41%; flex: 0 0 41%; max-width: 41%; } @media only screen and (max-width:959px) { .product-calc-item { margin-bottom: 2rem; } /* Stack columns on mobile (override the desktop 41% top-row rule). */ .product-type-val_per_win .placement_match_box > .product-calc-item, .product-type-val_per_game .placement_match_box > .product-calc-item, .product-type-val_coaching .placement_match_box > .product-calc-item { width: 100%; flex: 0 0 100%; max-width: 100%; } .serverselect { margin-bottom: 2rem; } } /* === Valorant Coaching: Coaching Focus chip styling ======================= Mirror of the LoL coaching chip styling in eloboostleague/ebl-main.css. The Coaching Focus card uses .cv-group radio buttons rendered inside a bottom-row card. boosting/main.css ships heavy legacy styles for that widget (avenirnextcyr-bold, font-weight 900, .box > span { width: 75%; padding-right: 5px }, .box { text-align: right; box-shadow: 0 0 5px ... }) that don't fit the new card design — labels overflow the chip and the font weight is much heavier than the server region chips next to it. Scoped to val_coaching so other product types keep their existing look. */ .product-type-val_coaching .rt-coach-card .cv-group { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; width: 100% !important; margin: 0 !important; } .product-type-val_coaching .rt-coach-card .cv-group label { width: auto !important; margin: 0 !important; display: block !important; } .product-type-val_coaching .rt-coach-card .cv-group .box { height: auto !important; min-height: 60px !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; background: #f6fafd !important; border: 1.5px solid #e4ecf3 !important; border-radius: 4px !important; box-shadow: none !important; box-sizing: border-box !important; cursor: pointer !important; padding: 8px 6px !important; font-family: 'League', Montserrat, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .04em !important; color: #4a5a6e !important; text-align: center !important; text-transform: none !important; transition: transform .18s cubic-bezier(.16, 1, .3, 1), background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important; } .product-type-val_coaching .rt-coach-card .cv-group .box:hover { background: rgba(2, 131, 202, .08) !important; border-color: #0283ca !important; color: #0283ca !important; transform: translateY(-2px) scale(1.04) !important; box-shadow: 0 6px 16px rgba(2, 131, 202, .18) !important; } .product-type-val_coaching .rt-coach-card .cv-group input[type=radio]:checked + .box { background: #0283ca !important; border-color: #0283ca !important; color: #fff !important; box-shadow: none !important; transform: translateY(-2px) !important; } .product-type-val_coaching .rt-coach-card .cv-group .box > img:first-child { width: 30px !important; height: 30px !important; flex-shrink: 0 !important; filter: invert(50%) sepia(100%) saturate(2000%) hue-rotate(0deg) brightness(100%) contrast(100%) !important; transition: filter .18s ease !important; } .product-type-val_coaching .rt-coach-card .cv-group input[type=radio]:checked + .box > img:first-child { filter: brightness(0) invert(1) !important; } .product-type-val_coaching .rt-coach-card .cv-group .box > span:last-child { width: 100% !important; max-width: 100% !important; padding: 0 !important; color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: 1.2 !important; text-align: center !important; text-transform: none !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; white-space: normal !important; } .product-type-val_coaching .rt-coach-card .rt-coach-sub-label { font-family: 'League', Montserrat, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .055em !important; text-transform: uppercase !important; color: #8a98a8 !important; margin: 0 0 .5rem !important; text-align: left !important; } .product-type-val_coaching .rt-coach-card .cv-group-container { margin: 0 !important; } .product-type-val_coaching .rt-coach-card .cv-group-container + .cv-group-container { margin-top: .9rem !important; } .product-type-val_coaching .rt-coach-card .cv-header { text-align: left !important; background: transparent !important; border: 0 !important; padding: 0 !important; } @media (max-width: 767px) { .product-type-val_coaching .rt-coach-card .cv-group { grid-template-columns: repeat(2, 1fr) !important; } } .eo-fav-champs-line-block img { width: 110px; height: 110px; filter: invert(59%) sepia(39%) saturate(4744%) hue-rotate(338deg) brightness(100%) contrast(103%); } .eo-fav-line-block:nth-child(4) { border-right: 0; } .category_name { font: 22px"League"; text-transform: uppercase; font-weight: normal; margin-top: 20px; } .eo-fav-champs-line-block { width: 180px !important; margin: 0 auto; } .choosen_text { margin: 40px auto; font-size: 20px; } .booster_champion { text-align: center; width: 80%; max-width: 1000px; } .wins-number span { color: #0281c8; font: bold 332px "AvenirNextCyr-Medium"; letter-spacing: -15px; position: relative; left: 0px; top: -75px; text-align: left; } .product-calc-item .amount_of_wins { display: flex; padding: 30px 40px 0; align-items: center; width: 100%; } .product-calc-item .amount_of_wins_dtl { flex: 0; } @media only screen and (min-width:1401px){ .page-id-3988 .product-calc-item, .page-id-3989 .product-calc-item, .page-id-3985 .product-calc-item { margin-bottom: 0rem; } } @media only screen and (max-width: 767px) { .eo-fav-line-block { width: 50%; border-right: 0px solid #ebebeb; } .product-calc-item .amount_of_wins { padding: 5px 10px 0; } .product-calc-item .amount_of_wins_dtl { padding-top: 0px; } .product-calc-item:nth-child(3) .wins-number span { color: #0281c8; font: bold 250px "AvenirNextCyr-Medium"; letter-spacing: -15px; position: relative; left: 0px; top: 0px; text-align: left; } .product-calc-item:nth-child(3) { margin-bottom:3rem; } } .col-product img { filter: brightness(0.7); } .banner-img { width: 43vw; } .banner-text { width: 65%; } .eo-title-block { margin-bottom: 40px; } .current-img-league-boost, .tier-img, .current-img { height: 230px; width: 230px; } .arrow-page-down { filter: hue-rotate(338deg); } .ed_server_values .selector_1 { margin-top: 20px; } .tier-selector-current, .tier-selector-desired { height: auto !important; min-height: 380px; } .tier-selector-current svg { filter: hue-rotate(225deg); } .tier-selector-desired svg { filter: hue-rotate(45deg); } @media only screen and (max-width: 1100px) { .product-calc-item { margin-bottom: 2rem; } .tier-selector-current svg { display:none; } .tier-selector-desired svg { display:none; } } .team-logo__cg::before { margin: -10px -35px; } .home .banner { background: none } .bbg { animation:slide 3s ease-in-out infinite alternate; background-image: linear-gradient(290deg, #fff 25%, #004e85fc 25%); bottom: 0px; left: -5%; position: absolute; right: 5%; top:0; z-index: -1; overflow: hidden; max-width: 109%; } .bbg2 { animation-direction:alternate-reverse; animation-duration: 6s; opacity: 0.5; } .bbg3 { animation-duration: 6s; opacity: 0.5; } @keyframes slide { 0% { transform: translateX(-5%); } 100% { transform: translateX(5%); } } @media only screen and (min-width: 1530px){ .banner-container { max-width: 1800px; padding: 0 60px; margin: 0 auto; height: 53vw; } } @media only screen and (min-width: 1930px){ .banner-container { max-width: 1800px; padding: 0 60px; margin: 0 auto; height: 43vw; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } } .banner-text h1 { margin-top: 0vw; } .banner-img img { display: block; aspect-ratio: auto 710 / 608; width: 41vw; max-width: 800px; filter: drop-shadow(2px 2px 4px black); } .banner-img { width: 40vw; } /* ═══════════════════════════════════════════════════════════════════════════ MAGNETIC-SNAP PRODUCT MENU (.booster_packege_tabs) ─────────────────────────────────────────────────────────────────────────── Card menu redesign for the WP nav menu on every product page. Mirror of the block in eloboostleague/ebl-main.css — same selectors, same values — so the magnetic-snap layout renders consistently across all three game themes. Per-menu-item background-image rules (where they exist on the theme) supply the icon; this block handles positioning and animation. If Val menu items don't have per-item icons yet, the orange pane still renders cleanly (just no icon graphic inside). ═══════════════════════════════════════════════════════════════════════════ */ /* UL container — top padding 0 so the menu card row aligns with the top of the YOUR ORDER sidebar card on the right (matches the EBL change shipped in PR #190). max-width dropped on Val: the menu now stretches to fill the full width of .lft-section (the left product column), instead of being capped at 1320px and centred — so the cards always reach the right edge of the column regardless of viewport width. */ .booster_packege_tabs ul { display: flex !important; gap: 8px !important; width: 100% !important; max-width: none !important; margin: 0 0 22px !important; padding: 0 0 22px !important; overflow-x: auto !important; flex-wrap: nowrap !important; justify-content: flex-start !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } .booster_packege_tabs ul::-webkit-scrollbar { height: 6px; } .booster_packege_tabs ul::-webkit-scrollbar-thumb { background: #ff8b00; border-radius: 3px; } .booster_packege_tabs ul li { /* max-width dropped: cards now grow to fill the .lft-section width evenly via flex: 1 1 0. min-width still keeps each card readable on smaller viewports before the mobile media query kicks in. */ flex: 1 1 0 !important; max-width: none !important; min-width: 140px !important; width: auto !important; height: 90px !important; margin: 0 !important; padding: 0 !important; border-radius: 10px !important; overflow: hidden !important; position: relative !important; cursor: pointer !important; background: #0364a8 !important; list-style: none !important; display: block !important; box-shadow: 0 5px 6px rgba(3, 55, 92, 0.28), 0 6px 18px -4px rgba(3, 55, 92, 0.18) !important; opacity: 0; transform: translateY(10px); animation: bpt-drop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.05) forwards; transition: box-shadow 0.4s ease, transform 0.4s ease !important; } .booster_packege_tabs ul li:nth-child(1) { animation-delay: 0.05s; } .booster_packege_tabs ul li:nth-child(2) { animation-delay: 0.10s; } .booster_packege_tabs ul li:nth-child(3) { animation-delay: 0.15s; } .booster_packege_tabs ul li:nth-child(4) { animation-delay: 0.20s; } .booster_packege_tabs ul li:nth-child(5) { animation-delay: 0.25s; } .booster_packege_tabs ul li:nth-child(6) { animation-delay: 0.30s; } .booster_packege_tabs ul li:nth-child(7) { animation-delay: 0.35s; } @keyframes bpt-drop { to { opacity: 1; transform: translateY(0); } } .booster_packege_tabs ul li:hover { /* Card stays at rest on hover — Val has no icon pane shipped yet, so the spin + seam-glow from the EBL/OWB variation don't apply here. Tighter shadow gives a small "armed" cue. */ box-shadow: 0 2px 4px rgba(3, 55, 92, 0.35), 0 6px 14px -3px rgba(3, 55, 92, 0.55) !important; } .booster_packege_tabs .current-menu-item, .booster_packege_tabs .current-menu-ancestor, .booster_packege_tabs .active_pakage_tab { background: #0364a8 !important; box-shadow: 0 2px 4px rgba(3, 55, 92, 0.4), 0 6px 14px -3px rgba(3, 55, 92, 0.55) !important; transform: translateY(0) !important; } /* === Orange icon pane TEMPORARILY REMOVED on Val (2026-05) ===================== The orange ::before chevron pane + ::after shadow band were carrying the per-menu-item icons on EBL / OWB. Val doesn't have those icon images shipped yet, so the orange pane was rendering as an empty colour block on every product page. Restoring the pre-icon "old design" until icon assets are ready: - ::before hidden (was the orange chevron pane) - ::after hidden (was the dark shadow band behind it) - link inset 0 0 0 0 (full card) and centered, instead of reserving 70px on the right for the icon pane When the Val icon set ships, revert this block to the previous version in git (see file history before 2026-05-21). ============================================================================ */ .booster_packege_tabs ul li > a { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; /* Old design centers the label across the full card width since there is no icon pane on the right anymore. */ justify-content: center !important; width: auto !important; margin: 0 !important; padding: 0 14px !important; z-index: 4 !important; color: #fff !important; font-family: League, Montserrat, sans-serif !important; font-weight: 500 !important; font-size: 20px !important; line-height: 1.1 !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; text-align: center !important; text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important; overflow-wrap: anywhere !important; word-break: normal !important; white-space: normal !important; /* Spin-pulse: label stays put on hover (no scale, no letter-spacing change) — the card lift carries the hover state. No transitions needed on the label. */ } /* Orange icon pane + its shadow band — hidden while icons are unavailable. Overriding the parent theme's :last-child rule too so the suppression is uniform across every menu item. */ .booster_packege_tabs ul li::before, .booster_packege_tabs ul li:last-child::before, .booster_packege_tabs ul li::after { display: none !important; content: none !important; } /* Mobile (≤980px): stack the menu as a 2-per-row wrap instead of a horizontal scroller (a horizontal scroll affordance is invisible on touch — users can't tell more items exist off-screen). Mirrors the EBL changes from PR #188 and #190. */ @media only screen and (max-width: 980px) { .booster_packege_tabs ul { flex-wrap: wrap !important; overflow-x: visible !important; justify-content: center !important; gap: 10px !important; padding: 14px 8px 18px !important; } .booster_packege_tabs ul li { flex: 0 0 calc(50% - 10px) !important; min-width: 0 !important; max-width: none !important; height: 78px !important; } .booster_packege_tabs ul li > a { /* Orange icon pane removed (see desktop rules above) — link covers the full card and label centres across the whole width. */ inset: 0 !important; /* clamp() so single-word labels fit on one line at 360–767px without overflow-wrap: anywhere breaking them per-character on devices with slightly wider font metrics. */ font-size: clamp(13px, 4vw, 18px) !important; padding: 0 12px !important; line-height: 1.1 !important; } }/** * Navigation — Single-bar layout (rank-tracker style) * Full-width white bar: logos | centered links | right icons * Animated gradient top edge, bottom-line hover effects * Full-width background, content contained to max-width 1800px * Mobile: hamburger → absolute dropdown drawer at 620px */ /* ── Variables (scoped to nav) ── */ .eb-nav { --accent: #0f1624; --accent-dk: #1e40af; --accent-lt: rgba(37, 99, 235, .05); --accent-glow: rgba(37, 99, 235, .12); --neon: #2563eb; --neon2: #7c3aed; --neon3: #f43f5e; --border: #d4d7dd; --border-lt: #e8eaee; --bg: #eef0f4; --card: #fff; --nav-dark: #0a0e1a; --txt: #060c19; --txt2: #555d6e; --txt3: #0c1424; --green: #16a34a; --red: #ef4444; } /* ── Nav bar ── */ .eb-nav { width: 100% !important; display: flex !important; align-items: center !important; background: var(--card) !important; height: 65px !important; padding: 0 max(1.2rem, calc((100% - 1700px) / 2)) !important; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 24px rgba(0,0,0,.07) !important; position: relative !important; z-index: 100 !important; border-bottom: 1px solid var(--border-lt) !important; box-sizing: border-box !important; border-radius: 0 !important; margin: 0 !important; max-width: none !important; } .eb-nav::after { display: none !important; } /* Kill any legacy wrapper styling */ .eb-nav .container, .eb-nav .header-wrap { all: unset !important; display: contents !important; } /* ═══════════════════════════════════ LEFT: Game logos ═══════════════════════════════════ */ .nav-left { display: flex; align-items: center; gap: 10px; padding-right: 18px; margin-right: 10px; height: 100%; flex-shrink: 0; border-right: 1px solid var(--border); position: relative; z-index: 2; } .nav-left .logo-item { width: 48px; height: 48px; border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); border: 1.5px solid var(--border-lt); background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.05); clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%); text-decoration: none; overflow: visible; } .nav-left .logo-item:hover { transform: translateY(-3px) scale(1.1); border-color: var(--accent); box-shadow: 0 6px 16px rgba(37,99,235,.12), 0 2px 6px rgba(0,0,0,.06); z-index: 10; background: var(--accent-lt); } .nav-left .logo-item:active { transform: translateY(0) scale(1); } .nav-left .logo-item img { width: 50px; height: 50px; object-fit: cover; position: relative; z-index: 1; } /* Tooltip */ .nav-left .logo-item .logo-label { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); font-family: 'avenirnextcyr-medium', 'Roboto', system-ui, sans-serif; font-size: 10px; font-weight: 700; color: #fff; background: var(--nav-dark); border: 1px solid rgba(0,0,0,.15); padding: 5px 10px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: all .2s; pointer-events: none; z-index: 200; box-shadow: 0 4px 16px rgba(0,0,0,.15); letter-spacing: .06em; text-transform: uppercase; } .nav-left .logo-item .logo-label::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--nav-dark); } .nav-left .logo-item:hover .logo-label { opacity: 1; transform: translateX(-50%) translateY(0); } /* ═══════════════════════════════════ CENTER: WordPress menu links ═══════════════════════════════════ */ .nav-center { display: flex; align-items: center; gap: 0; flex: 1 1 0; min-width: 0; height: 100%; justify-content: center; overflow: visible; position: relative; z-index: 2; } /* WordPress menu reset */ .nav-center .header-menu { all: unset !important; display: contents !important; } .nav-center .menu { all: unset !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; height: 100% !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .nav-center .menu > li { all: unset !important; display: inline-flex !important; height: 100% !important; list-style: none !important; position: relative !important; } /* Kill WP's ::before bullets */ .nav-center .menu > li::before { content: none !important; display: none !important; } /* ── Menu link styling ── */ .nav-center .menu > li > a { all: unset !important; font-family: avenirnextcyr-bold !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: #191a1d !important; padding: 0 1rem !important; height: 100% !important; display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; cursor: pointer !important; transition: all .2s !important; position: relative !important; text-decoration: none !important; box-sizing: border-box !important; } /* FA icon inside menu link */ .nav-center .menu > li > a i.fas, .nav-center .menu > li > a i.far { font-size: 14px !important; opacity: .5 !important; transition: .2s !important; flex-shrink: 0 !important; color: #0364a9 !important; } /* Accent bottom line on hover */ .nav-center .menu > li > a::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 20% !important; right: 20% !important; height: 2.5px !important; background: var(--accent) !important; border-radius: 1px !important; transform: scaleX(0) !important; transition: transform .25s cubic-bezier(.16,1,.3,1) !important; box-shadow: 0 0 6px var(--accent-glow) !important; } .nav-center .menu > li > a:hover { color: var(--txt) !important; background: var(--bg) !important; } .nav-center .menu > li > a:hover::after { transform: scaleX(1) !important; } .nav-center .menu > li > a:hover i.fas, .nav-center .menu > li > a:hover i.far { opacity: .7 !important; color: var(--accent) !important; } /* Active link */ .nav-center .menu > li.current-menu-item > a, .nav-center .menu > li.current_page_item > a { color: var(--accent) !important; } .nav-center .menu > li.current-menu-item > a::after, .nav-center .menu > li.current_page_item > a::after { transform: scaleX(1) !important; } .nav-center .menu > li.current-menu-item > a i.fas, .nav-center .menu > li.current_page_item > a i.fas { opacity: .8 !important; color: var(--accent) !important; } /* ── HOT badge (added via JS to .hot-item) ── */ .nav-center .menu > li.hot-item > a { overflow: visible !important; padding-right: 1.2rem !important; } .nav-center .menu > li.hot-item > a .hot-badge { position: absolute; top: 3px; right: -4px; font-family: 'Roboto', monospace; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; color: #fff; line-height: 1; padding: 3.5px 7px; border-radius: 4px; background: linear-gradient(135deg, #ff2d00, #ff6b00, #ffaa00, #ff6b00, #ff2d00); background-size: 400% 100%; animation: hotShift 2s ease infinite; box-shadow: 0 0 12px rgba(255,69,0,.5), 0 0 24px rgba(255,106,0,.2), 0 3px 6px rgba(0,0,0,.2); z-index: 5; text-shadow: 0 1px 2px rgba(0,0,0,.3); pointer-events: none; } /* Fire glow */ .nav-center .menu > li.hot-item > a .hot-badge::before { content: ''; position: absolute; inset: -3px; border-radius: 7px; background: linear-gradient(135deg, #ff2d00, #ff8c00, #ffaa00); background-size: 200% 100%; filter: blur(8px); opacity: 0; z-index: -1; animation: fireGlow 1s ease-in-out infinite alternate; } /* Ember particles */ .nav-center .menu > li.hot-item > a .hot-badge::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fbbf24; bottom: 100%; left: 50%; box-shadow: -6px 2px 0 1px #ff6b00, 8px -2px 0 1px #fbbf24, -2px -6px 0 0 #ff8c00, 5px 4px 0 1px #ff4500, 10px -4px 0 0 #fbbf24, -8px -3px 0 1px #ff6b00, 3px -8px 0 0 #ffaa00; animation: embers 1.6s ease-in-out infinite; pointer-events: none; } @keyframes hotShift { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } @keyframes fireGlow { 0% { opacity: .2; filter: blur(6px); } 100% { opacity: .6; filter: blur(10px); } } @keyframes embers { 0% { transform: translateY(0) scale(1); opacity: .9; } 40% { transform: translateY(-12px) scale(.7); opacity: .5; } 100% { transform: translateY(-22px) scale(0); opacity: 0; } } /* ── Submenu dropdown ── */ .nav-center .menu > li > ul { all: unset !important; display: none !important; position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; background: var(--card) !important; border: 1px solid var(--border-lt) !important; border-radius: 8px !important; padding: 6px !important; min-width: 210px !important; box-shadow: 0 8px 30px rgba(0,0,0,.1), 0 0 0 1px var(--accent-glow) !important; z-index: 200 !important; list-style: none !important; flex-direction: column !important; } .nav-center .menu > li:hover > ul { display: flex !important; } .nav-center .menu > li > ul > li { all: unset !important; display: flex !important; list-style: none !important; } .nav-center .menu > li > ul > li::before { content: none !important; display: none !important; } .nav-center .menu > li > ul > li > a { all: unset !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 10px 12px !important; border-radius: 6px !important; font-family: avenirnextcyr-bold !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--txt2) !important; text-decoration: none !important; transition: .15s !important; cursor: pointer !important; width: 100% !important; box-sizing: border-box !important; text-align: center !important; } /* FA icons in submenu */ .nav-center .menu > li > ul > li > a i.fas, .nav-center .menu > li > ul > li > a i.far { font-size: 13px !important; opacity: .5 !important; color: #0364a9 !important; flex-shrink: 0 !important; } .nav-center .menu > li > ul > li > a:hover { background: var(--bg) !important; color: var(--txt) !important; } .nav-center .menu > li > ul > li > a:hover i.fas, .nav-center .menu > li > ul > li > a:hover i.far { opacity: .7 !important; color: var(--accent) !important; } /* ═══════════════════════════════════ RIGHT: Icons + Login/Logout ═══════════════════════════════════ */ .nav-right { display: flex; align-items: center; gap: 8px; padding-left: 14px; margin-left: 10px; height: 100%; flex-shrink: 0; border-left: 1px solid var(--border); position: relative; z-index: 2; } .nav-icon-btn { width: 44px; height: 44px; border-radius: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--txt3); background: var(--card); border: 1.5px solid var(--border-lt); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 3px 8px rgba(0,0,0,.04); transition: all .25s cubic-bezier(.16,1,.3,1); position: relative; text-decoration: none; } .nav-icon-btn svg { width: 20px; height: 20px; } .nav-icon-btn:hover { background: var(--accent-lt); color: var(--accent); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(37,99,235,.12), 0 0 0 3px var(--accent-glow); } .nav-icon-btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,.06); } /* Login button */ .nav-login-btn { font-family: 'avenirnextcyr-bold', 'Roboto', system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: #fff; text-decoration: none; background: #054978; border: none; border-radius: 9px; height: 44px; padding: 0 24px; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(5,73,120,.3); white-space: nowrap; display: flex; align-items: center; justify-content: center; } .nav-login-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(5,73,120,.45), 0 0 0 2px rgba(5,73,120,.2); background: #043a5e; color: #fff; } .nav-login-btn:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(37,99,235,.3); } /* Shimmer */ .nav-login-btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.25) 50%, transparent 80%); transform: skewX(-20deg); transition: left .5s; pointer-events: none; } .nav-login-btn:hover::after { left: 150%; } /* Logout link */ .nav-logout { font-family: 'avenirnextcyr-bold', 'Roboto', system-ui, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--txt2); text-decoration: none; padding: 0 1.1rem; height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 9px; transition: all .25s cubic-bezier(.16,1,.3,1); white-space: nowrap; background: var(--card); border: 1.5px solid var(--border-lt); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 3px 8px rgba(0,0,0,.04); } .nav-logout svg { width: 17px; height: 17px; opacity: .4; flex-shrink: 0; transition: .2s; } .nav-logout:hover { color: var(--red); border-color: var(--red); background: rgba(239,68,68,.03); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(239,68,68,.1), 0 0 0 3px rgba(239,68,68,.08); } .nav-logout:hover svg { opacity: .8; color: var(--red); } /* ═══════════════════════════════════ HAMBURGER (mobile only) ═══════════════════════════════════ */ .eb-nav .hamburger { display: none; height: 46px; border-radius: 6px; background: var(--bg); border: 1.5px solid var(--border-lt); cursor: pointer; align-items: center; justify-content: center; color: var(--txt3); transition: .15s; flex: 1 1 0; min-width: 48px; padding: 0; margin-left: 6px; clip-path: polygon(4% 0, 100% 0, 100% 96%, 96% 100%, 0 100%, 0 4%); } .eb-nav .hamburger:hover { background: var(--accent-lt); color: var(--accent); border-color: var(--accent-glow); } .eb-nav .hamburger:active { background: rgba(37,99,235,.08); } .eb-nav .hamburger svg { width: 24px; height: 24px; } /* ═══════════════════════════════════ MOBILE DRAWER ═══════════════════════════════════ */ .mobile-drawer { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border: 1px solid var(--border-lt); border-top: none; box-shadow: 0 12px 30px rgba(0,0,0,.1); max-height: 0; overflow-y: auto; transition: max-height .35s cubic-bezier(.16,1,.3,1); z-index: 200; } .mobile-drawer.open { max-height: 80vh; } /* WP menu in drawer */ .mobile-drawer .header-menu { all: unset !important; display: block !important; } .mobile-drawer .menu { all: unset !important; display: flex !important; flex-direction: column !important; padding: .5rem !important; gap: 1px !important; list-style: none !important; margin: 0 !important; } .mobile-drawer .menu li { all: unset !important; display: flex !important; flex-wrap: wrap !important; list-style: none !important; } .mobile-drawer .menu li::before { content: none !important; display: none !important; } .mobile-drawer .menu li a { all: unset !important; font-family: 'avenirnextcyr-medium', 'Roboto', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--txt2) !important; text-decoration: none !important; padding: 12px 14px !important; border-radius: 6px !important; display: flex !important; align-items: center !important; gap: 10px !important; transition: .15s !important; cursor: pointer !important; width: 100% !important; box-sizing: border-box !important; } .mobile-drawer .menu li a i.fas { font-size: 14px !important; opacity: .35 !important; flex-shrink: 0 !important; } .mobile-drawer .menu li a:active, .mobile-drawer .menu li a:hover { background: var(--bg) !important; color: var(--txt) !important; } .mobile-drawer .menu li.current-menu-item > a, .mobile-drawer .menu li.current_page_item > a { color: var(--accent) !important; background: var(--accent-lt) !important; } .mobile-drawer .menu li.current-menu-item > a i.fas { opacity: .8 !important; color: var(--accent) !important; } /* HOT badge in drawer */ .mobile-drawer .menu li.hot-item > a .hot-badge { font-family: 'Roboto', monospace; font-size: 8px; font-weight: 700; background: linear-gradient(135deg, #f43f5e, #ff6b00); color: #fff; padding: 2px 6px; border-radius: 3px; margin-left: auto; } /* Drawer bottom row */ .drawer-bottom { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--border-lt); } .drawer-bottom .nav-icon-btn { width: 44px; height: 44px; } .drawer-bottom .nav-logout { margin-left: auto; } /* ═══════════════════════════════════ RESPONSIVE ═══════════════════════════════════ */ @media (max-width: 1200px) { .nav-center .menu > li > a { font-size: 13px !important; padding: 0 .65rem !important; } .nav-logout { font-size: 12px; padding: 0 .7rem; } } @media (max-width: 1050px) { .eb-nav { height: 56px !important; } .nav-center .menu > li > a { font-size: 12px !important; padding: 0 .5rem !important; letter-spacing: .04em !important; gap: 5px !important; } .nav-center .menu > li > a i.fas { font-size: 12px !important; } .nav-left .logo-item { width: 40px; height: 40px; } .nav-left .logo-item img { width: 28px; height: 28px; } .nav-icon-btn { width: 38px; height: 38px; } .nav-icon-btn svg { width: 17px; height: 17px; } .nav-logout { font-size: 11px; padding: 0 .5rem; height: 38px; gap: 4px; } .nav-logout svg { width: 14px; height: 14px; } .nav-login-btn { height: 38px; font-size: 11px; padding: 0 16px; } .hot-badge { font-size: 7px !important; padding: 2.5px 5px !important; } } @media (max-width: 900px) { .nav-center .menu > li > a i.fas { display: none !important; } .nav-center .menu > li > a { padding: 0 .4rem !important; font-size: 11px !important; gap: 3px !important; } } @media (max-width: 780px) { .nav-center .menu > li > a { font-size: 10.5px !important; padding: 0 .3rem !important; letter-spacing: .02em !important; } .nav-logout { display: none; } .nav-right { gap: 4px; padding-left: 8px; margin-left: 4px; } } @media (max-width: 620px) { .eb-nav { height: 54px !important; padding: 0 .6rem !important; } .nav-center, .nav-right { display: none !important; } .eb-nav .hamburger { display: flex; } .mobile-drawer { display: flex; } .nav-left { border-right: none; padding-right: 6px; margin-right: 0; } .nav-left .logo-item { width: 38px; height: 38px; } .nav-left .logo-item img { width: 26px; height: 26px; } } @media (max-width: 400px) { .nav-left .logo-item:nth-child(3) { display: none; } } /* ── Hide old header elements ── */ .eb-nav .header-logos, .eb-nav .wrap-menu > .burger, .eb-nav .log-link, .eb-nav .push-button, .eb-nav #profile-settings-button { display: none !important; } /* ═══════════════════════════════════ LOGIN FORM — Order-preview card style ═══════════════════════════════════ */ .head-frm-bnr { float: none !important; position: relative !important; max-width: none !important; width: 100% !important; padding: 0 max(1.2rem, calc((100% - 1700px) / 2)) !important; box-sizing: border-box !important; display: flex !important; justify-content: flex-end !important; z-index: 99 !important; pointer-events: none !important; } .form-login-signup { position: absolute !important; top: 5px !important; right: max(1.2rem, calc((100% - 1700px) / 2)) !important; max-width: 380px !important; width: 100% !important; z-index: 99 !important; margin: 0 !important; padding: 0 !important; pointer-events: auto !important; animation: lf-slideIn .3s ease both !important; } @keyframes lf-slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } .form-login-signup .arrow { display: none !important; } /* Card shell */ .form-login-signup .login-signup-form { float: none !important; width: 100% !important; background: #fff !important; border: 1px solid var(--border-lt, #e8eaee) !important; border-radius: 10px !important; box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.1), 0 20px 48px rgba(5,73,120,.12) !important; overflow: hidden !important; } /* Tab header */ .form-login-signup .tab-group { background: none !important; float: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; list-style: none !important; border-bottom: 1px solid var(--border-lt, #e8eaee) !important; background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(255,255,255,.9), rgba(37,99,235,.03)) !important; } .form-login-signup .tab-group li { list-style: none !important; } .form-login-signup .tab-group li a, .form-login-signup .tab-group .active a { display: block !important; width: 100% !important; padding: 1.1rem 1.6rem !important; background: transparent !important; border: none !important; border-bottom: none !important; font-family: 'avenirnextcyr-bold', 'Roboto', system-ui, sans-serif !important; font-size: 18px !important; font-weight: 500 !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: #0a0f1a !important; text-decoration: none !important; text-align: left !important; float: none !important; box-sizing: border-box !important; cursor: default !important; } /* Form fields section */ .form-login-signup .frm-fld-section { background: #fff !important; float: none !important; width: 100% !important; border: none !important; padding: 0 !important; } .form-login-signup .field-wrap { float: none !important; width: 100% !important; padding: 1rem 1.6rem !important; border-bottom: 1px solid var(--border-lt, #e8eaee) !important; text-align: left !important; box-sizing: border-box !important; } .form-login-signup .field-wrap:last-child { border-bottom: none !important; } .form-login-signup label { font-family: 'avenirnextcyr-bold', 'Roboto', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: #555d6e !important; padding-bottom: 8px !important; display: block !important; } .form-login-signup input[type="text"], .form-login-signup input[type="password"], .form-login-signup input[type="email"] { width: 100% !important; height: 44px !important; padding: 0 14px !important; font-family: 'avenirnextcyr-medium', system-ui, sans-serif !important; font-size: 14px !important; color: #0a0f1a !important; background: #f8f9fb !important; border: 1.5px solid #e8eaee !important; border-radius: 8px !important; outline: none !important; transition: border-color .2s, box-shadow .2s !important; box-sizing: border-box !important; display: block !important; } .form-login-signup input:focus { border-color: #0364a9 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(3,100,169,.1) !important; } /* reCAPTCHA injects a hidden