.section-easter {
    position: relative;
    min-height: calc(100vh - 5rem);
    background-image: url("/wwwroot/images/DiscountEvents/Easter/easter-event-bg.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: #fff;
    overflow: hidden;
    background-size: cover;
}

@media only screen and (max-width:1920px) {
    .section-easter {
        background-image: url("/wwwroot/images/DiscountEvents/Easter/easter-event-bg_1920.png");
    }
}

@media only screen and (max-width:1440px) {
    .section-easter {
        background-image: url("/wwwroot/images/DiscountEvents/Easter/easter-event-bg_1440.png");
    }
}

@media only screen and (max-width:1366px) {
    .section-easter {
        background-image: url("/wwwroot/images/DiscountEvents/Easter/easter-event-bg_1200.png");
        background-size: contain;
    }
}

@media only screen and (max-width:1024px) {
    .section-easter {
        background-image: url("/wwwroot/images/DiscountEvents/Easter/easter-event-bg_1024.png");
    }
}

@media screen and (max-width:980px) {
    .section-easter {
        background-image: url("/wwwroot/images/DiscountEvents/Easter/easter-event-bg_980.png");
    }
}

@media only screen and (max-width:768px) {
    .section-easter {
        background-image: none;
    }
}

.section-easter__logo {
    position: absolute;
    top: 6rem;
    left: 50%;
    width: 100%;
    box-sizing: border-box;
    padding: 0 2rem;
    text-align: center;
    transform: translateX(-50%);
    z-index: 1;
}

@media only screen and (max-width:768px) {
    .section-easter__logo {
        top: 3rem;
    }
}

.section-easter__logo > img {
    display: inline-block;
    width: 50%;
    min-width: 20rem;
    margin-bottom: 3rem;
}

@media only screen and (max-width:768px) {
    .section-easter__logo > img {
        margin-bottom: 1.5rem;
    }
}

.section-easter__logo > h1 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 4rem;
    color: #434343;
    text-align: center;
}

@media only screen and (max-width:768px) {
    .section-easter__logo > h1 {
        font-size: 3rem;
    }
}

.section-easter__logo > p {
    display: inline-block;
    margin: 0;
    font-size: 3rem;
    color: #434343;
    text-align: center;
}

@media only screen and (max-width:768px) {
    .section-easter__logo > p {
        font-size: 1.8rem;
    }
}

.egg {
    position: absolute;
    bottom: 6rem;
    left: 50%;
    width: 256.35px;
    height: 300px;
    transform: translateX(-50%) rotate(0) scale(1,1);
    transition: all .25s  ;
    z-index: 2;
}

@media only screen and (max-width:768px) {
    .egg {
        bottom: 0;
        transform: translateX(-50%) scale(.8,.8);
    }
}

.egg:hover {
    transform: translateX(-50%) rotate(0) scale(1.1,1.1);
    cursor: pointer;
}

@media only screen and (max-width:768px) {
    .egg:hover {
        transform: translateX(-50%) rotate(0) scale(.8,.8);
    }
}

.egg__top {
    position: absolute;
    top: .5rem;
    left: 50%;
    display: block;
    width: 99%;
    transform: translate(-50%,0%) rotateZ(0);
    z-index: 1;
}

.egg__bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: 100%;
    transform: translateX(-50%);
    z-index: 2;
}

.egg__voucher {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 50rem;
    height: 20rem;
    background-color: #91dc5a;
    text-align: center;
    transform: translate(-50%,-50%) scale(0,0);
    z-index: 1;
    border: .3rem solid var(--discount-color);
}

@media only screen and (max-width:768px) {
    .egg__voucher {
        width: 33rem;
        height: 17rem;
    }
}

@media only screen and (max-width:320px) {
    .egg__voucher {
        width: 28rem;
        height: 17rem;
    }
}

.egg__voucher span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 80%;
    min-width: 20rem;
    font-size: 2.7rem;
    color: #333;
    transform: translate(-50%,-50%);
}

@media only screen and (max-width:768px) {
    .egg__voucher span {
        width: 70%;
        font-size: 2rem;
    }
}

.egg__voucher span strong {
    text-transform: uppercase;
}

.egg__voucher span small {
    font-size: 14px;
}

.egg--open {
    animation: shake 1s forwards;
    transform: translateX(-50%) rotate(0) scale(1.1,1.1);
}

@media only screen and (max-width:768px) {
    .egg--open {
        animation: shakeMobile 1s forwards;
        transform: translateX(-50%) rotate(0) scale(.8,.8);
    }
}

.egg--open:hover {
    cursor: default;
}

.egg--open .egg__top {
    animation: TopAnim .5s forwards;
    animation-delay: 1s;
    z-index: 3;
}

.egg--open .egg__voucher {
    animation: VoucherAnim 2.2s forwards;
}

@media only screen and (max-width:768px) {
    .egg--open .egg__voucher {
        animation: VoucherMobileAnim 2.2s forwards;
    }
}

header .menu > li:first-child {
    position: relative;
    padding-right: 2.5rem;
}

    header .menu > li:first-child > .easter-egg {
        position: absolute;
        top: 50%;
        right: 0;
        width: 2rem;
        transform: translateY(-50%);
    }

        header .menu > li:first-child > .easter-egg > img {
            display: block;
            width: 100%;
        }

.how-it-works__row:nth-child(2) {
    position: relative;
}

    .how-it-works__row:nth-child(2) .easter-egg {
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 4.5rem;
    }

        .how-it-works__row:nth-child(2) .easter-egg:hover {
            background-color: #fff !important;
        }

        .how-it-works__row:nth-child(2) .easter-egg > img {
            display: block;
            width: 100%;
        }

.academy__container {
    position: relative;
}

    .academy__container .easter-egg {
        position: absolute;
        bottom: 1rem;
        left: 20%;
        width: 4rem;
    }

        .academy__container .easter-egg > img {
            display: block;
            width: 100%;
        }

.small-banner-transparent .container {
    position: relative;
}

    .small-banner-transparent .container .easter-egg {
        position: absolute;
        right: 22%;
        bottom: 87%;
        width: 4rem;
    }

        .small-banner-transparent .container .easter-egg > img {
            width: 100%;
        }

.easter-egg {
    display: none !important;
    transform: scale(1,1);
    transition: all .3s  ;
}

    .easter-egg:hover {
        transform: scale(1.1,1.1);
    }

@keyframes shake {
    0% {
        transform: translateX(-50%) rotate(0) scale(1.1,1.1);
    }

    10% {
        transform: translateX(-50%) rotate(10deg) scale(1.1,1.1);
    }

    20% {
        transform: translateX(-50%) rotate(-10deg) scale(1.1,1.1);
    }

    30% {
        transform: translateX(-50%) rotate(0) scale(1.1,1.1);
    }

    50% {
        transform: translateX(-50%) rotate(5deg) scale(1.1,1.1);
    }

    70% {
        transform: translateX(-50%) rotate(-5deg) scale(1.1,1.1);
    }

    100% {
        transform: translateX(-50%) rotate(0) scale(1.1,1.1);
    }
}

@keyframes shakeMobile {
    0% {
        transform: translateX(-50%) rotate(0) scale(.8,.8);
    }

    10% {
        transform: translateX(-50%) rotate(10deg) scale(.8,.8);
    }

    20% {
        transform: translateX(-50%) rotate(-10deg) scale(.8,.8);
    }

    30% {
        transform: translateX(-50%) rotate(0) scale(.8,.8);
    }

    50% {
        transform: translateX(-50%) rotate(5deg) scale(.8,.8);
    }

    70% {
        transform: translateX(-50%) rotate(-5deg) scale(.8,.8);
    }

    100% {
        transform: translateX(-50%) rotate(0) scale(.8,.8);
    }
}

@keyframes TopAnim {
    0% {
        transform: translate(-50%,0%) rotateZ(0);
    }

    100% {
        transform: translate(50%,60%) rotateZ(180deg);
    }
}

@keyframes VoucherAnim {
    0% {
        transform: translate(-50%,-50%) scale(0,0);
    }

    60% {
        transform: translate(-50%,-50%) scale(0,0);
    }

    100% {
        transform: translate(-50%,-26rem) scale(1,1);
    }
}

@keyframes VoucherMobileAnim {
    0% {
        transform: translate(-50%,-50%) scale(0,0);
    }

    60% {
        transform: translate(-50%,-50%) scale(0,0);
    }

    100% {
        transform: translate(-50%,-24rem) scale(1,1);
    }
}