@font-face {font-family: SkodaNextRegular;src: url("./0ba36c.skoda-next-regular.ttf");}
@font-face {font-family: SkodaNextBold;src: url("./b73ac1.skoda-next-bold.ttf");}
@font-face {font-family: SkodaNextBlack;src: url("./949edb.skoda-next-black.ttf");}
* {box-sizing: border-box;}
body, html {margin: 0;padding: 0;overflow: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.wrapper {position: absolute;top: 0;right: 0;bottom: 0;left: 0;border: 0px solid #ccc;cursor: pointer;}
#container {position: relative;width: 100%;height: 100%;overflow: hidden;background-color: #fff;color: #fff;background-position: 50%;background-size: auto 100%;opacity: 1;}
#container:hover .cta {background-color: #2a9c26;}
.layer {top: 0;left: 0;width: 100%;height: 100%;transition: transform .4s ease-out;}
.dealer__logo, .layer {position: absolute;}
.dealer__logo--horizontal, .dealer__logo--vertical {background-repeat: no-repeat;background-position: 50%;background-size: contain;}
#container.animate-banner {opacity: 1;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.layer-bt {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;}
#layer-copy-1, #layer-copy-2, #layer-copy-3, #layer-icon-img-01, #layer-icon-img-02, #layer-icon-img-03, #layer-icon-img-04, #layer-icon-img-05, #layer-icon-txt-01, #layer-icon-txt-02, #layer-icon-txt-03, #layer-icon-txt-04, #layer-icon-txt-05, #layer-logo2-a, #layer-logo2-d, #layer-logo2-k, #layer-logo2-o, #layer-logo2-s, #layer-logo-finserv, #layer-logo-finserv2, #layer-logo-skoda {-webkit-animation: none;animation: none;opacity: 0;}
.animate-banner #layer-rectangle-top {-webkit-animation: key-rectangle-top-out .4s cubic-bezier(.6,.5,.4,.6) .1s,key-rectangle-top-in .4s cubic-bezier(.6,.5,.4,.6) 5.8s;animation: key-rectangle-top-out .4s cubic-bezier(.6,.5,.4,.6) .1s,key-rectangle-top-in .4s cubic-bezier(.6,.5,.4,.6) 5.8s;opacity: 1;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner #layer-rectangle-bottom {-webkit-animation: key-rectangle-bottom-out .4s cubic-bezier(.6,.5,.4,.6) .1s,key-rectangle-bottom-in .4s cubic-bezier(.6,.5,.4,.6) 5.8s;animation: key-rectangle-bottom-out .4s cubic-bezier(.6,.5,.4,.6) .1s,key-rectangle-bottom-in .4s cubic-bezier(.6,.5,.4,.6) 5.8s;opacity: 1;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner #layer-logo-skoda {-webkit-animation: fade-in .4s cubic-bezier(.6,.5,.4,.6) .3s;animation: fade-in .4s cubic-bezier(.6,.5,.4,.6) .3s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner #layer-dealer-logo {-webkit-animation: fade-in .9s cubic-bezier(.13,.245,.44,1) .8s;animation: fade-in .9s cubic-bezier(.13,.245,.44,1) .8s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner #layer-bttn {-webkit-animation: key-button-exp .9s cubic-bezier(.13,.245,.44,1) .8s;animation: key-button-exp .9s cubic-bezier(.13,.245,.44,1) .8s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner #layer-cta-copy {-webkit-animation: key-cta-copy-in .5s cubic-bezier(.13,.245,.44,1) 1.2s;animation: key-cta-copy-in .5s cubic-bezier(.13,.245,.44,1) 1.2s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner #layer-copy-1 {-webkit-animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .6s;animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .6s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner #layer-copy-2 {-webkit-animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .7s;animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .7s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner #layer-copy-3 {-webkit-animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .8s;animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .8s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner #layer-copy-4 {-webkit-animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .9s;animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .9s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
#container.animate-banner:hover #layer-cta-copy img {-webkit-animation: key-cta-copy-hover .5s cubic-bezier(.13,.245,.44,1);animation: key-cta-copy-hover .5s cubic-bezier(.13,.245,.44,1);opacity: 1;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner-last #layer-rectangle-top {-webkit-animation: key-rectangle-top-out .4s cubic-bezier(.6,.5,.4,.6) .1s;animation: key-rectangle-top-out .4s cubic-bezier(.6,.5,.4,.6) .1s;opacity: 1;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner-last #layer-rectangle-bottom {-webkit-animation: key-rectangle-bottom-out .4s cubic-bezier(.6,.5,.4,.6) .1s;animation: key-rectangle-bottom-out .4s cubic-bezier(.6,.5,.4,.6) .1s;opacity: 1;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner-last #layer-logo-skoda {-webkit-animation: fade-in .4s cubic-bezier(.6,.5,.4,.6) .3s;animation: fade-in .4s cubic-bezier(.6,.5,.4,.6) .3s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner-last #layer-dealer-logo {-webkit-animation: fade-in .9s cubic-bezier(.13,.245,.44,1) .8s;animation: fade-in .9s cubic-bezier(.13,.245,.44,1) .8s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner-last #layer-bttn {-webkit-animation: key-button-exp .9s cubic-bezier(.13,.245,.44,1) .8s;animation: key-button-exp .9s cubic-bezier(.13,.245,.44,1) .8s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner-last #layer-cta-copy {-webkit-animation: key-cta-copy-in .5s cubic-bezier(.13,.245,.44,1) 1.2s;animation: key-cta-copy-in .5s cubic-bezier(.13,.245,.44,1) 1.2s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner-last #layer-copy-1 {-webkit-animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .6s;animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .6s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner-last #layer-copy-2 {-webkit-animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .7s;animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .7s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner-last #layer-copy-3 {-webkit-animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .8s;animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .8s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.animate-banner-last #layer-copy-4 {-webkit-animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .9s;animation: key-copy-up-in .6s cubic-bezier(.13,.245,.44,1) .9s;opacity: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
#container.animate-banner-last:hover #layer-cta-copy img {-webkit-animation: key-cta-copy-hover .5s cubic-bezier(.13,.245,.44,1);animation: key-cta-copy-hover .5s cubic-bezier(.13,.245,.44,1);opacity: 1;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
@keyframes key-rectangle-top-out {0% {-webkit-transform: rotate(0deg) scale(1) translateY(0) translateX(0);transform: rotate(0deg) scale(1) translateY(0) translateX(0);opacity: 1;}
	to {-webkit-transform: rotate(18deg) scale(1) translateY(var(--facet-top-out-translateY)) translateX(var(--facet-top-out-translateX));transform: rotate(18deg) scale(1) translateY(var(--facet-top-out-translateY)) translateX(var(--facet-top-out-translateX));opacity: 1;}}
@keyframes key-rectangle-top-in {0% {-webkit-transform: rotate(18deg) scale(1) translateY(var(--facet-top-out-translateY)) translateX(var(--facet-top-out-translateX));transform: rotate(18deg) scale(1) translateY(var(--facet-top-out-translateY)) translateX(var(--facet-top-out-translateX));opacity: 1;}
	to {-webkit-transform: rotate(0deg) scale(1) translateY(0) translateX(0);transform: rotate(0deg) scale(1) translateY(0) translateX(0);opacity: 1;}}
@keyframes key-rectangle-bottom-out {0% {-webkit-transform: rotate(0deg) scale(1) translateY(0) translateX(0);transform: rotate(0deg) scale(1) translateY(0) translateX(0);opacity: 1;}
	to {-webkit-transform: rotate(0deg) scale(1) translateY(var(--facet-bottom-out-translateY)) translateX(var(--facet-bottom-out-translateX));transform: rotate(0deg) scale(1) translateY(var(--facet-bottom-out-translateY)) translateX(var(--facet-bottom-out-translateX));opacity: 1;}}
@keyframes key-rectangle-bottom-in {0% {-webkit-transform: rotate(-30deg) scale(1) translateY(var(--facet-bottom-out-translateY)) translateX(var(--facet-bottom-out-translateX));transform: rotate(-30deg) scale(1) translateY(var(--facet-bottom-out-translateY)) translateX(var(--facet-bottom-out-translateX));opacity: 1;}
	to {-webkit-transform: rotate(0deg) scale(1) translateY(0) translateX(0);transform: rotate(0deg) scale(1) translateY(0) translateX(0);opacity: 1;}}
@keyframes key-copy-in {0% {opacity: 0;}
	to {opacity: 1;}}
@keyframes key-copy-up {0% {-webkit-transform: translate3d(0,20px,.003px);transform: translate3d(0,20px,.003px);opacity: 0;}
	to {-webkit-transform: translateZ(.003px);transform: translateZ(.003px);opacity: 1;}}
@keyframes key-copy-down {0% {-webkit-transform: translate3d(0,-20px,.003px);transform: translate3d(0,-20px,.003px);opacity: 0;}
	to {-webkit-transform: translateZ(.003px);transform: translateZ(.003px);opacity: 1;}}
@keyframes key-copy-out-side {0% {-webkit-transform: translateZ(.003px);transform: translateZ(.003px);opacity: 1;}
	to {-webkit-transform: translate3d(-30px,0,.003px);transform: translate3d(-30px,0,.003px);opacity: 0;}}
@keyframes key-copy-out {0% {-webkit-transform: translateZ(.003px);transform: translateZ(.003px);opacity: 1;}
	to {-webkit-transform: translate3d(0,20px,.003px);transform: translate3d(0,20px,.003px);opacity: 0;}}
@keyframes key-copy-up-in {0% {-webkit-transform: translate3d(0,30px,.003px);transform: translate3d(0,30px,.003px);opacity: 0;}
	to {-webkit-transform: translateZ(.003px);transform: translateZ(.003px);opacity: 1;}}
@keyframes key-copy-up-out {0% {-webkit-transform: translateZ(.003px);transform: translateZ(.003px);opacity: 1;}
	to {-webkit-transform: translate3d(0,-30px,.003px);transform: translate3d(0,-30px,.003px);opacity: 0;}}
@keyframes key-anim-no {0% {opacity: 0;}
	to {opacity: 0;}}
@keyframes fade-in {0% {opacity: 0;}
	to {opacity: 1;}}
@keyframes fade-out {0% {opacity: 1;}
	to {opacity: 0;}}
@keyframes key-button-exp {0% {-webkit-transform: scale(.4);transform: scale(.4);opacity: 1;}
	20% {height: 34px;width: 34px;-webkit-transform: scale(1);transform: scale(1);opacity: 1;}
	24% {height: 34px;width: 30px;-webkit-transform: scale(1);transform: scale(1);opacity: 1;}
	to {-webkit-transform: scale(1);transform: scale(1);width: 116px;opacity: 1;}}
@keyframes key-cta-copy-in {0% {-webkit-transform: translate3d(0,10px,.003px);transform: translate3d(0,10px,.003px);opacity: 0;}
	to {-webkit-transform: translateZ(.003px);transform: translateZ(.003px);opacity: 1;}}
@keyframes key-cta-copy-hover {0% {-webkit-transform: translateZ(.003px);transform: translateZ(.003px);opacity: 1;}
	49% {-webkit-transform: translate3d(0,-10px,.003px);transform: translate3d(0,-10px,.003px);opacity: 0;}
	50% {-webkit-transform: translate3d(0,10px,.003px);transform: translate3d(0,10px,.003px);opacity: 0;}
	to {-webkit-transform: translateZ(.003px);transform: translateZ(.003px);opacity: 1;}}
:root {--main-width: 480px;--main-height: 300px;--cta-width: 116px;--cta-height: 34px;--cta-top: 234px;--cta-left: -162px;--facet-width: 960px;--facet-height: 600px;--facet-top-top: -400px;--facet-top-left: -100px;--facet-bottom-top: 200px;--facet-bottom-left: -100px;--facet-top-out-translateY: -350px;--facet-top-out-translateX: -100px;--facet-bottom-out-translateY: 200px;--facet-bottom-out-translateX: -200px;}
.wrapper {width: 480px;height: 300px;}
.plus {border-bottom: 12px solid #f06409;}
.dealer__logo--horizontal {right: 18px;bottom: 30px;width: 140px;height: 39px;background-position: 100% 100%;object-fit: contain;}
.button {height: var(--cta-height);width: var(--cta-height);background: #78faae;border: none;border-radius: var(--cta-height);cursor: pointer;display: flex;align-items: center;justify-content: center;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
#layer-bg {-webkit-animation: none;animation: none;top: 0;left: 0;opacity: 1;}
#layer-copy-1, #layer-copy-2, #layer-copy-3, #layer-copy-4, #layer-cta-copy, #layer-dealer-logo {-webkit-animation: none;animation: none;opacity: 0;}
#layer-rectangle-top {left: var(--facet-top-left);top: var(--facet-top-top);}
#layer-rectangle-bottom, #layer-rectangle-top {-webkit-animation: none;animation: none;width: var(--facet-width);height: var(--facet-height);background-color: #f06409;opacity: 1;}
#layer-rectangle-bottom {left: var(--facet-bottom-left);top: var(--facet-bottom-top);}
#layer-cta {top: var(--cta-top);left: var(--cta-left);opacity: 1;}