@media (max-width: 420px) and (min-width: 320px){
    .christmas-decoration{
        /*width: 260px !important;*/
        height: 260px !important;
        right: 30px !important;
        bottom: 40px !important;
    }

    .christmas-decoration .image{
        /*width: 260px !important;*/
        height: 260px !important;
    }
}

@media (max-height: 400px){
    .christmas-decoration{
        height: calc(100vh - 80px) !important;
        bottom: 40px !important;
        top: 40px !important;
    }

    .christmas-decoration .image{
        height: 100% !important;
    }
}

.christmas-decoration{
    /*width: 500px;*/
    /*width: 336px;*/
    height: 336px;
    position: fixed;
    right: 55px;
    bottom: 42px;

    border-radius: 3px;
    box-shadow: 0px 15px 27px 0 #000000;
    border: solid 1px #eef2f8;
    z-index: 9999;

    animation: 1s ease-in-out alternate showChristmasDecoration;
}

.christmas-decoration .image{
    /*width: 500px;*/
    /*width: 336px;*/
    height: 336px;
    overflow: hidden;
    background: #eef2f8;
}

.christmas-decoration img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.christmas-decoration button{
    position: absolute;
    top: -28px;
    right: -28px;
    width: 56px;
    height: 56px;
    padding: 21px 21px 22px;
    box-shadow: 0px 15px 27px 0 #000000;
    border: solid 1px #eef2f8;
    background-color: #ffffff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.christmas-decoration button i{
    font-size: 16px;
    color: #585858;
}

@keyframes showChristmasDecoration {
    from {
        transform: translateX(calc(100vw - 100%));
    }
    to {
        transform: translateX(0);
    }
}