@import '/templates/finbiz/css/animate.min.css';
@import '/templates/finbiz/css/unicons.css';
@import '/templates/finbiz/css/fontawesome-5.css';
@import '/media/plg_system_jtaldef/index/css/0b766b79bfa94a01e3c287fd991cd821.css?85e73b51495cbdd00b196a0017447ade';
@import '/media/plg_system_jtaldef/index/css/6ec27528ab710f989720f6a9e8c82e29.css?937891681c8635712428378a27fbcfc2';
     * { box-sizing: border-box; } html { margin: 0; padding: 0; font-size: 10px; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "DM Sans", sans-serif; color: #5D666F; font-weight: 400; position: relative; font-size: 16px; line-height: 26px; } body::before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; opacity: 0.05; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, address, p, pre, blockquote, menu, ol, ul, table, hr { margin: 0; margin-bottom: 20px; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { word-break: break-word; font-family: "Red Hat Display", sans-serif; line-height: 1.4074; color: #1C2539; } h1, .h1 { font-size: 60px; line-height: 91px; font-weight: 900; } h2, .h2 { font-size: 48px; line-height: 1.23; } h3, .h3 { font-size: 36px; line-height: 54px; } h4, .h4 { font-size: 30px; line-height: 1.25; } h5, .h5 { font-size: 24px; line-height: 1.24; } h6, .h6 { font-size: 20px; line-height: 1.25; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a { color: inherit; } .bg-color-tertiary h1, .bg-color-tertiary h2, .bg-color-tertiary h3, .bg-color-tertiary h4, .bg-color-tertiary h5, .bg-color-tertiary h6, .bg-color-tertiary .h1, .bg-color-tertiary .h2, .bg-color-tertiary .h3, .bg-color-tertiary .h4, .bg-color-tertiary .h5, .bg-color-tertiary .h6 { color: #fff; } .bg-color-tertiary p { color: #6c7279; } .bg-color-tertiary a { color: #6c7279; } @media only screen and (min-width: 768px) and (max-width: 991px) { h1, .h1 { font-size: 38px; } h2, .h2 { font-size: 32px; } h3, .h3 { font-size: 28px; } h4, .h4 { font-size: 24px; } h5, .h5 { font-size: 18px; } } @media only screen and (max-width: 767px) { h1, .h1 { font-size: 34px; } h2, .h2 { font-size: 28px; } h3, .h3 { font-size: 24px; } h4, .h4 { font-size: 20px; } h5, .h5 { font-size: 20px; } } h1, .h1, h2, .h2, h3, .h3 { font-weight: 700; } h4, .h4, h5, .h5 { font-weight: 700; } h6, .h6 { font-weight: 700; } p { margin: 0; } ul, ol { padding-left: 18px; } ul { list-style: square; margin-bottom: 30px; padding-left: 20px; } ul.liststyle.bullet li { font-size: 18px; line-height: 30px; color: #5D666F; position: relative; padding-left: 30px; } @media only screen and (max-width: 767px) { ul.liststyle.bullet li { padding-left: 19px; } } ul.liststyle.bullet li::before { position: absolute; content: ""; width: 6px; height: 6px; border-radius: 100%; background: #5D666F; left: 0; top: 10px; } ul.liststyle.bullet li + li { margin-top: 8px; } ul li { font-size: 16px; line-height: 26px; color: #5D666F; list-style: none; } ul li a { text-decoration: none; color: var(--color-gray); } ul li a:hover { color: var(--maincolor); } ul ul { margin-bottom: 0; } ol { margin-bottom: 30px; } ol li { font-size: 16px; line-height: 26px; color: #5D666F; margin-top: 10px; margin-bottom: 10px; } ol li a { color: var(--color-heading); text-decoration: none; } ol li a:hover { color: var(--maincolor); } ol ul { padding-left: 30px; } @media only screen and (max-width: 1199px) { h1 { font-size: 64px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { h1 { font-size: 54px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { h1 { font-size: 40px; line-height: 56px; } } @media only screen and (max-width: 767px) { h1 { font-size: 30px; line-height: 45px; } } @media only screen and (max-width: 575px) { h1 { font-size: 28px; line-height: 36px; } } @media only screen and (max-width: 479px) { h1 { font-size: 26px; line-height: 30px; } } @media only screen and (max-width: 1199px) { h2 { font-size: 54px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { h2 { font-size: 44px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { h2 { font-size: 36px; line-height: 56px; } } @media only screen and (max-width: 767px) { h2 { font-size: 30px; line-height: 45px; } } @media only screen and (max-width: 575px) { h2 { font-size: 26px; line-height: 36px; } } @media only screen and (max-width: 479px) { h2 { font-size: 24px; line-height: 30px; } } @media only screen and (max-width: 1199px) { h3 { font-size: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { h3 { font-size: 36px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { h3 { font-size: 30px; line-height: 56px; } } @media only screen and (max-width: 767px) { h3 { font-size: 30px; line-height: 45px; } } @media only screen and (max-width: 575px) { h3 { font-size: 24px; line-height: 36px; } } @media only screen and (max-width: 479px) { h3 { font-size: 22px; line-height: 30px; } } @media (min-width: 1200px) { .fs-70 {font-size: 70px;} } .sppb-btn.active, .sppb-btn:active { background-image: inherit !important; } .sppb-btn.focus, .sppb-btn:active:focus, .sppb-btn:active:hover, .sppb-btn:focus, .sppb-btn:hover { outline: 0; } .sppb-btn.circle { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .sppb-btn.active, .sppb-btn:active { outline: 0; -webkit-box-shadow: inherit; box-shadow: inherit; } .sppb-optin-form .sppb-btn i:first-child {display: none;} form.sppb-optin-form.submit-button-inside .button-wrap { top: 50% !important; transform: translatey(-50%); } #sp-footer { font-size: inherit; position: relative; z-index: 2; } #sp-footer #sp-footer2 { text-align: inherit; } .sp-scroll-up { background: var(--maincolor); } .sppb-addon-optin-forms .sppb-optin-form-details-wrap:not(:empty) { padding: 0; } .z-index3 {z-index: 3 !important;} .z-index2 {z-index: 2 !important;} .z-index0 {z-index: 0 !important;} .sppb-media-heading { margin: 0; } .sppb-progress { margin-bottom: 0px; } .sppb-carousel-extended-outer-stage { -webkit-perspective: inherit; perspective: inherit; } .animated-number-position-left .sppb-addon-content, .animated-number-position-right .sppb-addon-content, .sppb-addon-clients .sppb-carousel-extended-outer-stage { align-items: center; } .sppb-person-name { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sp-slider img { height: auto !important; width: auto !important; } .sppb-addon-clients .sppb-carousel-extended-item { padding: 0; } @media (max-width: 768px) { .sppb-addon-clients img {margin-bottom: 20px;} } body .sppb-btn, body .sppb-sp-slider-button .sp-slider-btn-text, .login .btn, .registration form > div .btn { padding: 17px 30px; min-width: max-content; font-size: 16px; line-height: 21px; font-weight: 700; border-radius: 15px; transition: 0.3s; border: none; color: #fff; } body .sppb-btn.sppb-btn-primary, body .sppb-sp-slider-button .sp-slider-btn-text, .login .btn, .registration form > div .btn-primary { background: var(--maincolor); } body .sppb-btn.sppb-btn-primary:hover, body .sppb-sp-slider-button .sp-slider-btn-text:hover, .login .btn:hover, .registration form > div .btn-primary:hover { background: var(--maincolor-alta); color: #1C2539; } body .sppb-btn.sppb-btn-secondary { background: var(--maincolor-alta); color: #1C2539; } body .sppb-btn.sppb-btn-secondary:hover { background-color: var(--maincolor); } .sppb-btn span, body .sppb-sp-slider-button .sp-slider-btn-text span { position: relative; z-index: 3; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } body .sppb-btn.sppb-btn-default { background-color: #f2f2f2; color: #6f6f6f; } body .sppb-btn.sppb-btn-default:after { background-color: var(--maincolor); } body .sppb-btn:hover, body .sppb-sp-slider-button .sp-slider-btn-text:hover, .login .btn:hover, .registration form > div .btn:hover { color: #fff; } body .btn-white .sppb-btn { background: #fff; color: var(--maincolor); } body .btn-white .sppb-btn:hover { background: var(--maincolor); color: #fff; } .sppb-btn i, a.d-block em, .sppb-sp-slider-button .sp-slider-btn-text i { } .full-width-image .sppb-addon-single-image-container {width: 100%; display: block;} .full-width-image .sppb-addon-single-image-container img {width: 100%;} .sppb-progress { border-radius: 45px; } .social-icon-right a i {color: inherit !important;} .sppb-addon-clients .sppb-carousel-extended-item img { margin: auto; text-align: center; display: block; } .sppb-person-image img {width: 100%;} @media(max-width: 768px) { .sppb-addon-clients a {display: block;} .sppb-addon-clients a img {margin-left: auto; margin-right: auto;} } .f-weight-400 { font-weight: 400; } .sp-slider div[class^="sppb-col"] {position: static;} .sppb-icon .sppb-icon-container > i { width: auto !important; height: auto !important; line-height: inherit !important; } .sppb-text-left.animated-number-position-bottom .sppb-addon-content, .sppb-text-left.animated-number-position-left .sppb-addon-content { align-items: center; } .sppb-carousel-extended-list .sppb-carousel-extended-outer-stage { height: auto !important; } body .sppb-addon-optin-forms { padding: 0px; } .sppb-addon-table-main td { color: inherit; font-size: inherit; } .com-finder .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { display: flex; align-items: center; } .com-finder .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) span { margin-right: 5px; } .center-section > .sppb-container-inner > .sppb-row, .center-section > .sppb-row-container > .sppb-row, .center-section > .sppb-row { justify-content: center; } .even-section > .sppb-row-container > .sppb-row, .even-section > .sppb-row { justify-content: space-between !important; } .right-section > .sppb-row-container > .sppb-row, .right-section > .sppb-row { justify-content: flex-end !important; } #sp-main-body .sppb-section .sppb-container-inner, #sp-main-body .sppb-section div[class^="sppb-col-"], #sp-main-body .sppb-section .sppb-column, #sp-main-body .sppb-section .sppb-column-addons, #sp-main-body .sppb-section .sppb-row-container, #sp-footer .sppb-section .sppb-container-inner, #sp-footer .sppb-section div[class^="sppb-col-"], #sp-footer .sppb-section .sppb-column, #sp-footer .sppb-section .sppb-column-addons, #sp-footer .sppb-section .sppb-row-container {position: static;} .relative-section .sppb-container-inner, .relative-section div[class^="sppb-col-"], .relative-section .sppb-column, .relative-section .sppb-column-addons {position: static;} .nowraprow > .sppb-container-inner > .sppb-row {flex-wrap: nowrap;} #sp-top { position: relative; z-index: 999; } #sp-top > .row { -ms-flex-align: center !important; align-items: center !important; } #sp-top > .container > .container-inner > .row { -ms-flex-align: center !important; align-items: center !important; } #sp-header > .row { -ms-flex-align: center !important; align-items: center !important; } #sp-header > .container > .container-inner > .row { -ms-flex-align: center !important; align-items: center !important; } #sp-logo-section > .row { -ms-flex-align: center !important; align-items: center !important; } #sp-logo-section > .container > .container-inner > .row { -ms-flex-align: center !important; align-items: center !important; } #sp-footer, #sp-bottom { background: inherit; } .sppb-carousel-extended-description { font-size: inherit; color: inherit; line-height: inherit; } .sppb-ajaxt-contact-form i:first-child {display: none;} .sppb-addon-text-block .sppb-addon-content br:first-child, .sppb-optin-form-details br:first-child, .sppb-addon-feature .sppb-addon-text br:first-child, .sppb-addon-pie-progress .sppb-addon-text br:first-child {display: none !important;} @media (max-width: 1400px) { .sppb-addon-articles .sppb-col-sm-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media (max-width: 1200px) { .sppb-addon-articles .sppb-col-sm-4 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media (max-width: 992px) { .sppb-addon-articles .sppb-col-sm-4, .sppb-addon-articles .sppb-col-sm-3, .sppb-addon-articles .sppb-col-sm-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media (max-width: 768px) { .sppb-addon-articles .sppb-col-sm-4, .sppb-addon-articles .sppb-col-sm-3, .sppb-addon-articles .sppb-col-sm-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .width-auto .sppb-column-addons {width: auto;} .translatex-15 {transform: translatex(15px);} #sp-header { height: 50px; box-shadow: none; } #sp-header.header-sticky { -webkit-transition: visibility 500ms ease, -webkit-transform 500ms ease; transition: visibility 500ms ease, -webkit-transform 500ms ease; transition: transform 500ms ease, visibility 500ms ease; transition: transform 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease; backdrop-filter: blur(9px); box-shadow: 0px 7px 18px #1810100d; } #sp-header .logo { height: auto; padding: 36px 0; display: block; max-width: max-content; } #sp-header .logo img { height: auto; } #sp-header .sp-megamenu-parent { float: none; } .sp-megamenu-parent > li { margin: 0; } .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent > li:last-child > a { padding: 48px 0; display: block; color: rgb(0, 0, 0); font-size: 16px; font-weight: 500; position: relative; transition: 0.3s; min-width: max-content; line-height: 26px; } .sp-megamenu-parent > li+li > a { margin-left: 48px; } .sp-megamenu-parent > li > a:before { position: absolute; content: ""; left: 0; bottom: 50px; height: 2px; width: 0%; border-radius: 1px; background: var(--maincolor); transition: 0.3s; } .sp-megamenu-parent > li > a:hover:before { width: 100%; } body.ltr .sp-megamenu-parent > li.sp-has-child > a::after, body.ltr .sp-megamenu-parent > li.sp-has-child > span::after { content: "\f078" !important; position: absolute !important; top: 51%; font-family: "Font Awesome 5 Pro" !important; right: -18px; transform: translateY(-50%); transition: 0.3s; } body.ltr .sp-megamenu-parent > li.sp-has-child > a:hover::after, body.ltr .sp-megamenu-parent > li.sp-has-child > span:hover:after { color: var(--maincolor); transform: translateY(-50%) rotate(180deg); } @media (max-width: 1400px) { .sp-megamenu-parent > li+li > a { margin-left: 30px; } body.ltr .sp-megamenu-parent > li.sp-has-child > a::after, body.ltr .sp-megamenu-parent > li.sp-has-child > span::after { display: none; } } @media (max-width: 1200px) { .sp-megamenu-parent > li+li > a { margin-left: 15px; } } #sp-header.header-sticky .sp-megamenu-parent > li > a:before { display: none; } .sp-megamenu-parent > li.active > a:hover, .sp-megamenu-parent > li:hover > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a, .sp-megamenu-parent > li.active:hover > a, .sp-megamenu-parent > li.active > a { color: var(--maincolor); } .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { padding: 0; border-radius: 0 0 10px 10px; background-color: #fff; border-left: 1px solid #ffffff14; border-bottom: 1px solid #ffffff14; border-right: 1px solid #ffffff14; border-top: 4px solid var(--maincolor); box-shadow: 0 36px 35px rgba(0, 0, 0, 0.08); } .sp-megamenu-parent .sp-dropdown li.sp-menu-item { padding: 0 15px; } .sp-megamenu-parent .sp-dropdown li.sp-menu-item:not(:last-child) { border-bottom: 1px solid #C4C4C426; } .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge), .sp-megamenu-parent .sp-mega-group > li > a { display: block; color: #1C2539; font-size: 16px; font-weight: 500; position: relative; transition: 0.3s; padding: 12px 0; line-height: 26px; } .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover, .sp-megamenu-parent .sp-mega-group > li > a:hover { color: var(--maincolor); } .sp-megamenu-parent .sp-dropdown.sp-dropdown-mega .sp-dropdown-inner { padding: 10px 15px; } .sp-megamenu-parent .sp-mega-group > li > .sp-group-title { text-transform: none; color: #1C2539; font-size: 16px; font-weight: 500; position: relative; transition: 0.3s; padding: 20px 15px 0 15px; font-size: 20px; margin-bottom: 10px; } .sp-megamenu-parent .sp-dropdown.sp-dropdown-mega li.sp-menu-item:not(:last-child) { border-bottom: 0; } .sp-megamenu-parent .sp-dropdown.sp-dropdown-mega li.sp-menu-item > a, .sp-megamenu-parent .sp-mega-group > li > a { padding: 8px 0; font-size: 16px; font-weight: 500; text-transform: none; margin: 0; } #offcanvas-toggler { display: inline-flex; align-items: center; line-height: 1; font-size: 20px; position: relative; z-index: 22; height: auto; } .burger-icon > span { background-color: var(--maincolor); } #sp-header.header-sticky .burger-icon > span { background-color: var(--maincolor); } .offcanvas-active .burger-icon > span, #modal-menu-toggler.active .burger-icon > span { background-color: #fff; } .offcanvas-menu .offcanvas-inner ul.menu li.active a { color: #fff !important; } .close-offcanvas { z-index: 99; } @media (max-width: 992px) { .offcanvas-menu { background-color: var(--maincolor); color: #fff; } .offcanvas-menu .offcanvas-inner a { color: #fff; } .offcanvas-menu .offcanvas-inner a:hover, .offcanvas-menu .offcanvas-inner a:focus, .offcanvas-menu .offcanvas-inner a:active { color: #fff; } .offcanvas-menu .p-3 { padding: 0 !important; } .offcanvas-menu .offcanvas-inner .sp-module ul > li a, .offcanvas-menu .offcanvas-inner .sp-module ul > li span, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler, .offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a, .offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li a:focus, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:focus { color: #fff; } .offcanvas-menu .logo {display: none;} .offcanvas-menu .offcanvas-inner { padding: 50px 25px; } .offcanvas-menu .offcanvas-inner ul.menu > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > span { opacity: 1; } } @media (min-width: 992px) { .offcanvas-menu .offcanvas-inner { padding: 0; } .offcanvas-menu .offcanvas-inner > .d-flex {display: none !important;} .offcanvas-menu .offcanvas-inner .sp-module:not(:last-child) { margin-bottom: 0px; } .burger-icon > span { margin: 3px 0; transition: .3s; float: right; width: 100%: -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background-color: #1C2539; } .burger-icon { width: 35px; } .burger-icon > span:nth-child(1) { width: calc(100% - 5px); height: 2px; } .burger-icon > span:nth-child(2) { width: 100%; height: 2px; } .burger-icon > span:nth-child(3) { width: calc(100% - 8px); height: 2px; } .burger-icon:hover > span {width: 100%;} #sp-header.header-sticky .burger-icon > span { background-color: #1a2428; } body.ltr #offcanvas-toggler.offcanvas-toggler-right { float: right; margin-left: 0px; } #offcanvas-toggler { position: absolute; right: 10px; top: 50%; transform: translatey(-50%); display: inline-block; height: auto; cursor: pointer; background: var(--maincolor-alta); height: 55px; width: 55px; padding: 17px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 21px; font-weight: 700; border-radius: 15px; transition: 0.3s; } #offcanvas-toggler:hover { background: var(--maincolor); } #offcanvas-toggler:hover .burger-icon > span { background: #fff; } .offcanvas-menu { background-color: transparent; } .offcanvas-menu .p-3 { padding: 0 !important; } .offcanvas-menu .logo {display: none;} .offcanvas-menu .menu {display: none !important;} .offcanvas-active .burger-icon > span, #modal-menu-toggler.active .burger-icon > span { background-color: var(--maincolor); } body.ltr.offcanvs-position-right .offcanvas-menu { right: -400px; } body.rtl.offcanvs-position-right .offcanvas-menu { left: -400px; } .offcanvas-menu { width: 400px; } .offcanvas-menu .fa, .offcanvas-menu .fab, .offcanvas-menu .far, .offcanvas-menu .fas { color: inherit; } } #sp-title { position: relative; overflow: hidden; } #sp-title .sp-module { height: 100%; position: absolute; width: 100%; } #sp-title .sp-module .sp-module-content, #sp-title .sp-module .sp-module-content .mod-sppagebuilder, #sp-title .sp-module .sp-module-content .mod-sppagebuilder .page-content, #sp-title .sp-module .sp-module-content .mod-sppagebuilder .page-content .sppb-section, #sp-title .sp-module .sp-module-content .mod-sppagebuilder .page-content .sppb-section > .sppb-container-inner, #sp-title .sp-module .sp-module-content .mod-sppagebuilder .page-content .sppb-section > .sppb-container-inner > .sppb-row > div, #sp-title .sp-module .sp-module-content .mod-sppagebuilder .page-content .sppb-section > .sppb-container-inner > .sppb-row > div > .sppb-column, #sp-title .sp-module .sp-module-content .mod-sppagebuilder .page-content .sppb-section > .sppb-container-inner > .sppb-row > div > .sppb-column > .sppb-column-addons {height: 100%; position: static !important;} #sp-title .sppb-row-container, #sp-title .sppb-row-column, #sp-title .sppb-column, #sp-title .sppb-column-addons {position: static !important;} .sp-page-title { position: relative; background-size: cover; background-position: center; padding: 153px 0 153px; } @media (max-width: 768px) { .sp-page-title { padding: 61px 0 67px; } } .sp-page-title .container { display: flex; gap: 25px; flex-direction: column; } @media (min-width: 768px) { .sp-page-title .container { justify-content: space-between; align-items: center; flex-direction: row; } } .sp-page-title .sp-page-title-heading { font-size: 60px; line-height: 91px; font-weight: 700; margin: 0; position: relative; z-index: 9; } @media (max-width: 992px) { .sp-page-title .sp-page-title-heading { font-size: 40px; } } @media (max-width: 768px) { .sp-page-title .sp-page-title-heading { font-size: 35px; } } .sp-page-title .breadcrumb { margin: 0; position: relative; z-index: 9; align-items: center; padding: 12px 30px; background: #fff; border-radius: 31px; box-shadow: 0px 9px 18px rgba(24, 16, 16, 0.05); } .sp-page-title .breadcrumb > li {margin: 0;} .sp-page-title .breadcrumb > li.float-start { display: none; } .sp-page-title .breadcrumb > li > a { font-weight: 700; font-size: 16px; line-height: 26px; text-transform: capitalize; color: #5D666F; } .breadcrumb-item + .breadcrumb-item { padding-left: 10px; } .breadcrumb-item + .breadcrumb-item::before { padding-right: 10px; } .sp-page-title .breadcrumb > li + li::before { font-size: 16px; text-transform: capitalize; color: var(--maincolor); float: none; } .sp-page-title .breadcrumb > li > a:hover {color: var(--maincolor);} .sp-page-title .breadcrumb > .active span { color: #1C2539; font-weight: 700; font-size: 16px; } #sp-header.header-sticky ~ section#sp-main-body { padding-top: 0; } .com-content #sp-main-body, .com-j2store #sp-main-body, .com-tags #sp-main-body, .com-spsimpleportfolio #sp-main-body, .com-search #sp-main-body, .com-finder #sp-main-body, .com-hikashop #sp-main-body, .com-users #sp-main-body { padding: 120px 0 120px; } .com-hikashop #sp-main-body, .com-content:not(.view-article) #sp-main-body {padding-bottom: 90px;} .com-spsimpleportfolio #sp-main-body { z-index: 2; position: relative; } .com-content #sp-header.header-sticky ~ section#sp-main-body, .com-j2store #sp-header.header-sticky ~ section#sp-main-body, .com-tags #sp-header.header-sticky ~ section#sp-main-body, .com-spsimpleportfolio #sp-header.header-sticky ~ section#sp-main-body, .com-search #sp-header.header-sticky ~ section#sp-main-body, .com-finder #sp-header.header-sticky ~ section#sp-main-body, .com-hikashop #sp-header.header-sticky ~ section#sp-main-body, .com-users #sp-header.header-sticky ~ section#sp-main-body { padding-top: 120px; } .com-spsimpleportfolio.view-item #sp-main-body, .com-spsimpleportfolio.view-item #sp-header.header-sticky ~ section#sp-main-body {padding: 0;} .sidebar-class .sppb-row-container {width: 100% !important; } .sidebar-class.com-sppagebuilder #sp-main-body {margin: 0 auto;} @media (min-width: 768px) { .sidebar-class.com-sppagebuilder #sp-main-body {max-width: 750px;} } @media (min-width: 992px) { .sidebar-class.com-sppagebuilder #sp-main-body {max-width: 970px;} } @media (min-width: 1200px) { .sidebar-class.com-sppagebuilder #sp-main-body {max-width: 1170px;} } .com-sppagebuilder #sp-right, .com-sppagebuilder #sp-left { padding-top: 50px; padding-bottom: 120px; position: relative; } #sp-left .sp-module, #sp-right .sp-module { border: 0px solid #f3f3f3; padding: 0; border-radius: 0px; } #sp-left .sp-module ul > li, #sp-right .sp-module ul > li { display: block; border-bottom: 0px solid #f3f3f3; } .category-module li, .categories-module li, .archive-module li, .latestnews li, .newsflash-horiz li, .mostread li, .form-links li, .list-striped li { padding: 0; } @media (min-width: 1200px) { .header-two-header-top::after { position: absolute; left: -5%; content: ""; top: 0; width: 40%; height: 100%; background: var(--maincolor); z-index: -1; transform: skew(-20deg); } } @media (max-width: 1200px) { .banner-three-banner-four-banner-five::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; background: #fff; opacity: 0.6; z-index: 1; } } .rts-business-case-s-2 .sppb-addon-title {display: block;} body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > a::after, .sppb-testimonial-carousel-rating::before, .sppb-testimonial-carousel-rating::after, .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler::after, .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent.menu-parent-open > a > .menu-toggler::after, .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent.menu-parent-open > .menu-separator > .menu-toggler::after, .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent li.menu-parent .menu-toggler::after { font-family: "Font Awesome 5 Pro"; } .login .col-lg-4, .registration .form-validate { padding: 50px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; background: #fceae8; } @media (min-width: 992px) { .login .col-lg-4 { flex: 0 0 auto; width: 66.66666667%; } } @media (min-width: 1200px) { .login .col-lg-4 { flex: 0 0 auto; width: 50%; } } .login-description, .registration legend { font-size: 20px; font-weight: 400; margin-bottom: 25px; color: #002633; line-height: 1.2; } .registration fieldset:last-of-type {margin-top: 40px;} .registration .spacer {display: none;} .login .form-control, .registration .form-control { padding: 12px 20px; outline: none; resize: none; border-radius: 3px; font-size: 16px; font-weight: 300; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border: none; padding: 13px 20px 13px 20px; background: #fff; } .input-group-text, .login .password-group button.input-password-toggle, .registration button.input-password-toggle { display: flex; align-items: center; padding: 0; text-align: center; white-space: nowrap; border: none; width: 50px; height: 50px; background: #002633; line-height: 50px; font-size: 20px; text-align: center; color: #ffffff; border-radius: 5px 0px 0px 5px !important; -webkit-border-radius: 5px 0px 0px 5px !important; -moz-border-radius: 5px 0px 0px 5px !important; -ms-border-radius: 5px 0px 0px 5px !important; -o-border-radius: 5px 0px 0px 5px !important; justify-content: center; } .login .password-group button.input-password-toggle, .registration button.input-password-toggle { border-radius: 0px 5px 5px 0px !important; -webkit-border-radius: 0px 5px 5px 0px !important; -moz-border-radius: 0px 5px 5px 0px !important; -ms-border-radius: 0px 5px 5px 0px !important; -o-border-radius: 0px 5px 5px 0px !important; } .registration .input-group-text .btn-secondary { background: transparent; border: none; border-radius: 0px 5px 5px 0px !important; -webkit-border-radius: 0px 5px 5px 0px !important; -moz-border-radius: 0px 5px 5px 0px !important; -ms-border-radius: 0px 5px 5px 0px !important; -o-border-radius: 0px 5px 5px 0px !important; } .login .list-group { flex-direction: row; justify-content: space-between; } .login .list-group-item { position: relative; display: block; padding: 0; color: var(--maincolor); background-color: transparent; border: none; } .sp-simpleportfolio .sp-simpleportfolio-filter { text-align: center; margin-bottom: 50px; } .sp-simpleportfolio .sp-simpleportfolio-filter > ul > li { float: left; display: block; margin: 0 10px; } .sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a { background: #FFFFFF; color: #1C2539; padding: 12px 28px; border: 1px solid #EDEFF3; box-shadow: 0px 9px 18px rgba(24, 16, 16, 0.05); border-radius: 15px; display: inline-block; font-size: 16px; font-weight: 700; } .sp-simpleportfolio .sp-simpleportfolio-filter > ul > li.active > a { background: var(--maincolor); color: #fff; } .rts-product-one { padding: 35px 35px 33px 35px; border: 1px solid #EDEFF3; border-radius: 15px; } .rts-product-one .thumbnail-area { position: relative; overflow: hidden; border-radius: 19px; } .rts-product-one .thumbnail-area::before { position: absolute; content: ""; height: 100%; width: 133%; background: linear-gradient(180deg, #5a00005a 0%, var(--maincolor)8c 100%); left: 0; top: 0; transform: rotate(-54deg) translateY(-144%); transition: 0.5s; z-index: 0; } .rts-product-one .thumbnail-area::after { position: absolute; content: ""; height: 100%; width: 133%; background: linear-gradient(180deg, rgba(223, 10, 10, 0.55) 0%, rgba(90, 0, 0, 0.352) 100%); left: 0; top: 0; transform: rotate(-45deg) translateY(126%); transition: 0.5s; z-index: 0; } .rts-product-one .thumbnail-area img { width: 100%; } .rts-product-one .thumbnail-area a.rts-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); z-index: 5; border-radius: 50% !important; line-height: 7px; display: block; padding: 20px; } .rts-product-one .product-contact-wrapper { padding: 30px 0 0 0; } .rts-product-one .product-contact-wrapper span { margin-bottom: 15px; } .rts-product-one .product-contact-wrapper .title { margin-bottom: 8px; transition: 0.3s; } .rts-product-one .thumbnail-area:hover::before { transform: rotate(-54deg) translateY(-117%); } .rts-product-one:hover .thumbnail-area a.rts-btn { transform: translate(-50%, -50%) scale(1); } .rts-product-one .thumbnail-area:hover::after { transform: rotate(-53deg) translateY(34%); } .sp-simpleportfolio-items {overflow: visible;} .case-study-area .item { position: relative; overflow: hidden; background: #fff; border-radius: 15px; box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04); } .case-study-area .item .item-image { padding: 25px; overflow: hidden; } .case-study-area .item .item-image img { width: 100%; } .case-study-area .item .item-content { padding: 0 25px 25px 25px; } .case-study-area .item .item-content h6 { color: #999; font-size: 14px; margin-bottom: 15px; font-weight: 400; } .case-study-area .item .item-content .text-heding3 { color: #1c2539; font-family: "Red Hat Display", Sans-serif; font-size: 22px; font-weight: 700; } .case-study-area .item .item-content p { font-size: 16px; font-weight: 400; line-height: 30px; } .case-study-area .item .read-more { background: #fff; border-top: 1px solid #f1f1f1; padding: 16px 20px; display: block; transition: all 0.3s ease 0s; font-size: 14px; font-weight: 700; position: relative; z-index: 2; color: #999; } .case-study-area .item .read-more::before { content: ""; position: absolute; background-color: #040404; width: 100%; height: 0; transition: all 0.3s ease 0s; left: 0; top: 0; z-index: -1; } .case-study-area .item .read-more span { float: right; } .case-study-area .item:hover .read-more { color: #fff; } .case-study-area .item:hover .read-more::before { background-color: var(--maincolor); height: 100%; bottom: 0; } .portfolio-area.style-3 .portfolio-wrapper2 { position: relative; z-index: 1; transition: all 0.4s; } .portfolio-area.style-3 .portfolio-wrapper2 .img-fluid { position: relative; transition: all 0.3s; border-radius: 20px; } .portfolio-area.style-3 .portfolio-wrapper2 .img-fluid::before { content: ""; position: absolute; background-color: var(--maincolor); opacity: 0.8; width: 100%; height: 0; top: 0; border-radius: 20px; transition: all 0.4s; } .portfolio-area.style-3 .portfolio-wrapper2 .img-fluid img { width: 100%; border-radius: 20px; } .portfolio-area.style-3 .portfolio-wrapper2 .img-fluid .portfolio-content { position: absolute; color: #fff; font-size: 16px; font-weight: 700; line-height: 1; padding: 15px 30px; border: 2px solid rgba(255, 255, 255, 0.1); display: inline-block; z-index: 2; left: 50%; top: 50%; transition: all 0.4s; transform: translate(-50%, -50%) scale(0); } .portfolio-area.style-3 .portfolio-wrapper2 .img-fluid .portfolio-content a { font-size: 14px; left: 39%; bottom: 55%; padding: 2px 15px; transition: all 0.4s ease-out 0s; } .portfolio-area.style-3 .portfolio-wrapper2 .portfolio-text { padding: 18px 0 0; } .portfolio-area.style-3 .portfolio-wrapper2 .portfolio-text .text .p-category { margin-bottom: 10px; color: #040404; font-size: 14px; } .portfolio-area.style-3 .portfolio-wrapper2 .portfolio-text .text .p-title { color: #040404; font-size: 22px; font-weight: 700; transition: all 0.4s; } .portfolio-area.style-3 .portfolio-wrapper2:hover .img-fluid::before { height: 100%; bottom: 0; } .portfolio-area.style-3 .portfolio-wrapper2:hover .img-fluid .portfolio-content { transform: translate(-50%, -50%) scale(1); } .portfolio-area.style-3 .portfolio-wrapper2:hover .portfolio-text .p-title a { text-decoration: underline !important; } .portfolio-area.style-4 .item { transition: all 0.4s; position: relative; border-radius: 20px; overflow: hidden; } .portfolio-area.style-4 .item::before { content: ""; position: absolute; background: var(--maincolor); opacity: 0.9; width: 100%; height: 0; left: 0; bottom: 0; z-index: 1; transition: all 0.3s ease 0s; clip-path: polygon(0% -65%, 0% 100%, 99% 100%); border-radius: 20px; } .portfolio-area.style-4 .item .portfolio-wrapper { position: relative; } .portfolio-area.style-4 .item .img-fluid img { width: 100%; } .portfolio-area.style-4 .item .portfolio-wrapper .single-portfolio { position: absolute; bottom: 10%; left: 8%; transform: scale(0); transition: all 0.4s; z-index: 1; } .portfolio-area.style-4 .item .portfolio-wrapper .single-portfolio span { color: #fff; font-size: 14px; font-weight: 400; } .portfolio-area.style-4 .item .portfolio-wrapper .single-portfolio .portfolio-title { font-size: 22px; font-weight: 700; } .portfolio-area.style-4 .item .portfolio-wrapper .pf-btn { background-color: #fff; color: #000; width: 50px; height: 50px; line-height: 50px; text-align: center; display: block; border-radius: 50%; position: absolute; bottom: 12%; right: 7%; transform: scale(0); transition: all 0.4s; z-index: 1; } .portfolio-area.style-4 .item:hover::before { height: 100%; } .portfolio-area.style-4 .item:hover .portfolio-wrapper .single-portfolio { transform: scale(1); } .portfolio-area.style-4 .item:hover .portfolio-wrapper .pf-btn { transform: scale(1); } .portfolio-area.style-5 .item { position: relative; border-radius: 20px; overflow: hidden; } .portfolio-area.style-5 .item::before { content: ""; position: absolute; background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.70196) 0%, rgba(0, 0, 0, 0) 100%); width: 100%; height: 100%; transition: all 0.4s ease 0s; left: 0; bottom: 0; z-index: 1; border-radius: 20px; } .portfolio-area.style-5 .item::after { content: ""; position: absolute; background-color: var(--maincolor); opacity: 0.902; clip-path: polygon(100% 0, 100% 100%, 45.5% 100%, 0% 55%, 0 0); width: 100%; height: 0; transition: all 0.4s ease 0s; left: 0; top: 0; border-radius: 20px; z-index: 1; } .portfolio-area.style-5 .item .portfolio-wrapper .img-fluid img { width: 100%; } .portfolio-area.style-5 .item .portfolio-wrapper .single-portfolio { position: absolute; bottom: 10%; left: 15%; transform: scale(1); transition: all 0.4s; z-index: 9; } .portfolio-area.style-5 .item .portfolio-wrapper .single-portfolio span { color: #fff; font-size: 14px; font-weight: 400; } .portfolio-area.style-5 .item .portfolio-wrapper .single-portfolio .portfolio-title { font-size: 22px; font-weight: 700; } .portfolio-area.style-5 .item .portfolio-wrapper .pf-btn { background-color: #fff; color: #000; width: 50px; height: 50px; line-height: 50px; text-align: center; display: block; border-radius: 50%; position: absolute; bottom: 16%; left: 15%; transform: scale(0); transition: all 0.4s; z-index: 9; } .portfolio-area.style-5 .item:hover::before { background: #1c2539; opacity: 0.902; clip-path: polygon(0 54.6%, 0% 100%, 45.5% 100%); } .portfolio-area.style-5 .item:hover::after { visibility: visible; height: 100%; } .portfolio-area.style-5 .item:hover .portfolio-wrapper .single-portfolio { top: 8%; bottom: unset; } .portfolio-area.style-5 .item:hover .portfolio-wrapper .pf-btn { transform: scale(1); } .article-list .article, .sppb-addon-articles .sppb-addon-article { padding: 0; border: 0; position: relative; transition: all 0.3s ease-out; overflow: visible; border: 1px solid #E6E9F0; margin-bottom: 50px; border-radius: 0px; } .blog-grid .article-list .article { border-radius: 15px; overflow: hidden; } .article-list .article:after, .sppb-addon-articles .sppb-addon-article:after { } .article-list .article .article-intro-image, .article-list .article .article-featured-video, .article-list .article .article-featured-audio, .article-list .article .article-feature-gallery, .sppb-addon-articles .sppb-addon-article .sppb-article-img-wrap, .sppb-articles-carousel-img { margin: 0; border-bottom: 0px solid #f5f5f5; overflow: hidden; position: relative; display: block; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; border-radius: 0px; width: 100%; border: 1px solid transparent; } .articles-leading .article .article-intro-image, .articles-leading .article .article-featured-video, .articles-leading .article .article-featured-audio, .articles-leading .article .article-feature-gallery { } .article-list .article .article-intro-image:after, .article-list .article .article-featured-video:after, .article-list .article .article-featured-audio:after, .article-list .article .article-feature-gallery:after, .sppb-addon-articles .sppb-addon-article .sppb-article-img-wrap:after, .sppb-articles-carousel-img:after { } .article-list .article:hover .article-intro-image:after, .article-list .article:hover .article-featured-video:after, .article-list .article:hover .article-featured-audio:after, .article-list .article:hover .article-feature-gallery:after, .sppb-addon-articles .sppb-addon-article:hover .sppb-article-img-wrap:after, .sppb-articles-carousel-column:hover .sppb-articles-carousel-img:after { } .article-list .article .article-intro-image img, .article-list .article .article-featured-video img, .article-list .article .article-featured-audio img, .article-list .article .article-feature-gallery img, .sppb-addon-articles .sppb-addon-article .sppb-article-img-wrap img, .sppb-articles-carousel-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0px; display: block; transition: 0.3s; } .article-list .article:hover .article-intro-image img, .article-list .article:hover .article-featured-video img, .article-list .article:hover .article-featured-audio img, .article-list .article:hover .article-feature-gallery img, .sppb-addon-articles .sppb-addon-article:hover .sppb-article-img-wrap img, .sppb-articles-carousel-column:hover .sppb-articles-carousel-img img { transform: scale(1.2); } .article-intro-image > a, .sppb-addon-articles .sppb-addon-article .sppb-article-img-wrap {height: 100%;} .blog-list .article-intro-image > a {width: 100%;} .article-body, .sppb-article-info-wrap, .sppb-articles-carousel-content { display: flex; flex-direction: column; align-items: flex-start; position: relative; box-shadow: none; background: transparent; margin: 0; padding: 50px; } .blog-grid .article-body { padding: 70px 30px 30px; } @media (max-width: 768px) { .article-body, .sppb-article-info-wrap, .sppb-articles-carousel-content { padding: 30px; } .blog-grid .article-body { padding: 70px 30px 30px; } } .article-list .article .article-header, .sppb-article-info-wrap h3, .sppb-articles-carousel-link {order: 2;} .article-list .article .article-header h2, .sppb-article-info-wrap h3, .sppb-articles-carousel-link { font-size: 36px; line-height: 54px; color: #1C2539; transition: 0.3s; margin-bottom: 16px; font-weight: 700; } .blog-grid .article-list .article .article-header h2 { line-height: 32px; font-size: 24px; } @media (max-width: 768px) { .article-list .article .article-header h2, .sppb-article-info-wrap h3 { font-size: 20px; } } .article-list .article .article-header h2 a, .sppb-article-info-wrap h3 a { color: inherit; transition: all 500ms ease; display: block; } .article-list .article .article-header h2 a:hover, .sppb-article-info-wrap h3 a:hover { color: var(--maincolor); } .article-list .article .article-info, .sppb-addon-articles .sppb-article-meta { order: 1; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 30px; margin-bottom: 15px; width: 100%; } .blog-grid .article-list .article .article-info { position: absolute; display: flex; align-items: center; justify-content: center; padding: 7px 30px; top: -1px; background: #1C2539; width: 100%; left: 0; } .article-info > span, .sppb-addon-articles .sppb-article-meta > span, .sppb-articles-carousel-meta-category a, .sppb-articles-carousel-meta-date { font-size: 16px; line-height: 26px; color: #5D666F; font-weight: 400; display: flex; align-items: center; margin: 0; } .blog-grid .article-info > span { color: #fff; } .article-info > span a, .sppb-addon-articles .sppb-article-meta > span a {color: inherit;} .article-info > span a:hover {color: var(--maincolor);} .article-info > span + span::before, .sppb-addon-articles .sppb-article-meta > span + span:before { padding: 0; margin: 0; } .article-info > span:before, .sppb-addon-articles .sppb-article-meta > span:before { color: var(--maincolor); -webkit-transition: all 500ms ease; transition: all 500ms ease; margin: 0; margin-right: 10px !important; font-family: "Font Awesome 5 Pro"; font-weight: 400; } .blog-grid .article-info > span:before {color: #fff;} .article-info > span.createdby:before, .sppb-article-meta > span.sppb-meta-author:before {content: "\f2bd";} .article-info > span.published:before, .sppb-article-meta > span.sppb-meta-date:before {content: "\f017";} .article-info > span.category-name:before, .sppb-article-meta > span.sppb-meta-category:before {content: "\f02c";} .article-info > span.hits:before {content: ;} .article-introtext, .sppb-article-introtext { order: 3; font-size: 16px; line-height: 26px; margin: 0 0 40px; } .article-introtext p {margin-bottom: 0;} .article-list .article .readmore, .sppb-readmore { order: 4; } .article-list .article .readmore { font-size: inherit; width: 100%; } .article-list .article .readmore a, .sppb-readmore { padding: 17px 30px; min-width: max-content; font-size: 16px; line-height: 21px; font-weight: 700; border-radius: 15px; transition: 0.3s; background: var(--maincolor); color: #fff; display: inline-block; } .article-list .article .readmore a:hover, .sppb-readmore:hover { background: var(--maincolor-alta); color: #1C2539; } ul.pagination { display: flex; justify-content: space-between; margin-top: 30px; padding: 0; } .page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .page-item:last-child .page-link { border-top-right-radius: 0; border-bottom-right-radius: 0; } .page-link, .disabled > .page-link, .page-link.disabled, .pagination > li > a, .pagination > li > span { padding: 0; font-weight: 500; height: 50px; width: 52px; line-height: 50px !important; display: inline-block; position: relative; margin-right: 15px; text-align: center; color: var(--tg-gray-four); font-size: 20px; border: 1px solid #E0E0E0; border-radius: 3px !important; background: transparent; font-family: var(--tg-heading-font-family); } .page-item.active .page-link, .page-link:hover { background: var(--maincolor) !important; border-color: var(--maincolor); color: #fff !important; } .pagination-counter {margin-top: 40px;} .article-details .sppb-row-container {padding: 0; max-width: 100%;} .article-details { position: relative; display: flex; flex-direction: column; flex-flow: wrap; border-radius: 15px; padding: 50px; border: 1px solid #E6E9F0; overflow: hidden; } .article-details > *:not(.article-full-image) { order: 4; width: 100%; } .article-details .article-header { order: 3; } .article-details .article-info { order: 2; margin-bottom: 15px; gap: 30px; } .article-details .article-can-edit { position: relative; margin-bottom: 0px; } .article-details .article-header h1, .article-details .article-header h2 { font-size: 36px; line-height: 54px; margin-bottom: 20px; } @media (max-width: 768px) { .article-details .article-header h1, .article-details .article-header h2 { font-size: 26px; line-height: 30px; } } .article-details .article-full-image { position: relative; display: block; order: 1; margin: -50px -50px 50px; } @media (max-width: 768px) { .article-details { padding: 30px; } .article-details .article-info { gap: 10px; } .article-details .article-full-image { margin: -30px -30px 30px; } } .article-details .article-full-image img { border-radius: 0; display: block; margin: 0 55px 0 0; width: 126%; } .article-details .article-ratings-social-share { border-top: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-top: 0; border-bottom: 0; margin: 0; align-items: center; order: 6; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; margin: 40px 0 0 !important; border-top: 0px solid #ece9e0; } .tags { list-style: none; padding: 0; margin: 0 !important; border: none; justify-content: center; display: block; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; border-top: 0; padding: 0; border-bottom: 0; order: 5; margin: 40px 0 0 !important; border-top: 0px solid #ece9e0; } @media (max-width: 768px) { .tags, .article-details .article-ratings-social-share { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; display: block !important; margin-top: 40px !important; margin-bottom: 0px !important; } .article-social-share { float: none; } } .tags:before { content: "Tags: "; font-size: 18px; line-height: 1.25; font-family: "Red Hat Display", sans-serif; font-weight: 700; color: #1C2539; } .tags > li { margin: 0; } .tags > li a { padding: 8px 12px; background: #F6F6F6; font-size: 14px; font-weight: 500; border-radius: 5px; color: #1C2539; transition: 0.3s; line-height: normal; border: none; } .tags > li a:hover { background: var(--maincolor); color: #fff; transform: translateY(-2px) scale(1.02); } .tags > li {margin-left: 10px;} .article-social-share .social-share-icon:before { content: "Share: "; font-size: 18px; line-height: 1.25; font-family: "Red Hat Display", sans-serif; font-weight: 700; color: #1C2539; } .article-social-share .social-share-icon ul { display: inline-block; } .article-social-share .social-share-icon ul li { margin: 0; margin-left: 10px; } .article-social-share .social-share-icon ul li:not(:last-child) { margin-right: 0px; } .article-social-share .social-share-icon ul li a { position: relative; height: 40px; width: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; color: #1C2539; background-color: #F6F6F6; font-size: 14px; border-radius: 50%; overflow: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; border: none; } .article-social-share .social-share-icon ul li a:hover { color: #fff; transform: scale(1.2); background-color: var(--maincolor); } .article-details .article-author-information { padding: 0; text-align: left; border: 0; margin: 0; border: 0; border-radius: 0; margin-bottom: 0; order: 7; margin-top: 44px; display: flex; align-items: center; padding: 40px 0; border-top: 1px solid #E6E9F0; border-bottom: 1px solid #E6E9F0; } .article-details .article-author-information > .d-flex { justify-content: center; display: flex; align-items: flex-start; } .article-details .article-author-information > .d-flex .flex-shrink-0 img { width: 115px; flex: 0 0 auto; margin-right: 30px; } .article-details .article-author-information h5 { margin-bottom: 10px; font-size: 24px; line-height: 1.24; } .article-details .article-author-information .author-bio { margin-bottom: 0 !important; } .author-website {color: #002633; margin-left: 4px; margin-top: 15px !important;} .author-website a, .author-website a:hover {color: var(--maincolor);} #article-comments { border-top: 0px solid #f5f5f5; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; order: 9; width: 100%; margin-top: 50px; padding-top: 0px; } .article-details ul.pagination { display: flex; justify-content: space-between; margin-top: 0px; padding: 0; } .article-details .page-link, .article-details .page-link:hover { background: transparent; padding: 0; border: none; margin-right: 0; font-weight: 600; color: var(--maincolor) !important; } .article-details .pagenavigation { order: 6; width: 100%; margin-top: 30px; padding: 0px; border-top: 0; } .article-details .pagenavigation .pagination { justify-content: space-between; } .article-details .pagenavigation .btn { font-size: 22px; line-height: 37px; -webkit-transition: all 500ms ease; transition: all 500ms ease; color: var(--thirdcolor); font-weight: 700; letter-spacing: -0.04em; font-family: 'Merriweather', serif; background-color: #f2f2f2; padding: 12px 20px; border-radius: 10px; border: none; } .article-details .pagenavigation .btn:hover { color: #fff; background-color: var(--maincolor); } .article-details .pagenavigation .btn span[class^="icon-"] { font-family: "Font Awesome 5 Free" !important; font-weight: 900; font-size: 18px; } @keyframes jump-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jump-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jump-3 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slide-one { 0% { -webkit-transform: translate3d(-60px, 0, 0); transform: translate3d(-60px, 0, 0); } 25% { -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } 50% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } 100% { -webkit-transform: translate3d(-60px, 0, 0); transform: translate3d(-60px, 0, 0); } } @keyframes slide-one1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0px, 0, 0); } 25% { -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } 50% { -webkit-transform: translate3d(-60px, 0, 0); transform: translate3d(-60px, 0, 0); } 75% { -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slide-two { 0% { -webkit-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0); } 25% { -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } 50% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } 100% { -webkit-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0); } } @keyframes slide-two1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } 50% { -webkit-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0); } 75% { -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-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); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-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); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-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); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-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); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 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: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 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: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 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: none; transform: none; } 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); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-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); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-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: none; transform: none; } } @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: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-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: none; transform: none; } } @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: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-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: none; transform: none; } } @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: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-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); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-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); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-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); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-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); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-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); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-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); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-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: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-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); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-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); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-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); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-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); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-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); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-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); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-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); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-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); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) 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); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) 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); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-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); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-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); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-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; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-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; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-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); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @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); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-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; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-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: none; transform: none; 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: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-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: none; transform: none; 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: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-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: none; transform: none; 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: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-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: none; transform: none; 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: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-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: none; transform: none; 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: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-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; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-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; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-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; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-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; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-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; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-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; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @-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: none; transform: none; } } @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: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-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); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-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; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-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); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-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); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-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); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-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); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-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; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-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); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-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; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-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; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-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); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-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); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-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); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-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); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-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); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-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); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @keyframes jump-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jump-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes rotateIt { to { transform: rotate(-360deg); } } @keyframes rotateIt2 { to { transform: rotate(360deg); } } @keyframes animate-floting { 0% { transform: translateX(50%); } 50% { transform: translateX(-40%); } 100% { transform: translateX(40%); } } @keyframes animate-floting-2 { 0% { transform: translateX(-50%); } 50% { transform: translateX(40%); } 100% { transform: translateX(-40%); } } .floting-line { animation: animate-floting 15s linear infinite; } .floting-line:hover { animation-play-state: paused; } .floting-line-2 { animation: animate-floting-2 15s linear infinite; } .floting-line-2:hover { animation-play-state: paused; } @keyframes waves { 0% { -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } 50% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } 100% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } @keyframes customOne { 0% { -webkit-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); opacity: 1; } 100% { -webkit-transform: translateY(-50%) scale(1.3); transform: translateY(-50%) scale(1.3); opacity: 0; } } @keyframes liveAuction { 0% { background: #fff; } 100% { background: var(--color-danger); } } @keyframes jump-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jump-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes rotateIt { to { transform: rotate(-360deg); } } @keyframes rotateIt2 { to { transform: rotate(360deg); } } @keyframes animate-floting { 0% { transform: translateX(50%); } 50% { transform: translateX(-40%); } 100% { transform: translateX(40%); } } @keyframes animate-floting-2 { 0% { transform: translateX(-50%); } 50% { transform: translateX(40%); } 100% { transform: translateX(-40%); } } @keyframes floating { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(30px); transform: translateX(30px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes rotate-45 { 0% { transform: rotate(0deg); } 50% { transform: rotate(45deg) scale(0.8); } 100% { transform: rotate(0deg) scale(1.1); } } @media (min-width: 320px) {.contained-row .sppb-container-inner {max-width: 400px;width: 100%; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px;}} @media (min-width: 576px) {.contained-row .sppb-container-inner {max-width: 540px;width: 100%; margin-right: auto; margin-left: auto;}} @media (min-width: 768px) {.contained-row .sppb-container-inner {max-width: 720px;width: 100%; margin-right: auto; margin-left: auto;}} @media (min-width: 992px) {.contained-row .sppb-container-inner {max-width: 960px;width: 100%; margin-right: auto; margin-left: auto;}} @media (min-width: 1200px) {.contained-row .sppb-container-inner {max-width: 1140px;width: 100%; margin-right: auto; margin-left: auto;}} .sp-megamenu-wrapper, #sp-header > .container > .container-inner > .row > div:not(#sp-logo) > .sp-column, #sp-header > .row > div:not(#sp-logo) > .sp-column {display: block !important;} #sp-header .sp-module { margin-left: 0px !important; } @media (min-width: 1400px) {.contained-row .sppb-container-inner {max-width: 1320px;width: 100%; margin-right: auto; margin-left: auto;}} @media (min-width: 1400px) {.contained-section {max-width: 1320px;width: 100%; margin-right: auto; margin-left: auto;}} #sp-main-body .sppb-section .sppb-row-container .sppb-row .sppb-row-column, #sp-footer .sppb-section .sppb-row-container .sppb-row .sppb-row-column { position: static; } #sp-header .sppb-section > .sppb-row-container {padding: 0;} :root { --maincolor-alta: #d4d4d4; --secondcolor:#111D5E; --thirdcolor:#90FF03; --color-gray: #f6f6f6; --color-gray-2: #f5f8fa; --color-light-heading: #181c32; --color-light-body: #65676b; --color-border-white: #00000024; --color-success: #3EB75E; --color-danger: #FF0003; --color-warning: #FF8F3C; --color-info: #1BA2DB; --color-facebook: #3B5997; --color-twitter: #1BA1F2; --color-youtube: #ED4141; --color-linkedin: #0077B5; --color-pinterest: #E60022; --color-instagram: #C231A1; --color-vimeo: #00ADEF; --color-twitch: #6441A3; --color-discord: #7289da; } .text-secondary {color: var(--secondcolor) !important;}