.christmas-event {
    display: flex;
    position: relative;
    background-color: #95080d;
    padding: 90px 0;
    margin: 0 -20px;
    min-height: calc(100vh - 50px);
    overflow: hidden;
    background-image: url('/Plugins/Feedmark.Plugin.Core.ConfigurationManager/Content/img/12-days-of-christmas/christmas-top.png');
    background-repeat: repeat-x;
    background-position: top center;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
}

    .christmas-event::after {
        display: block;
        content: '';
        background-image: url('/Plugins/Feedmark.Plugin.Core.ConfigurationManager/Content/img/12-days-of-christmas/snow.png');
        background-repeat: repeat-x;
        background-position: bottom center;
        height: 70px;
        width: 100%;
        position: absolute;
        bottom: 0;
    }

.snowflake {
    position: absolute;
    color: #fff;
    font-size: 10px;
    pointer-events: none;
}

.christmas-event .event-information {
    display: block;
    font-size: 16px;
    line-height: 1.8;
    color: #fff;
}

    .christmas-event .event-information.form-submit-message {
        font-size: 16px;
    }

        .christmas-event .event-information.form-submit-message .footer-upper {
            display: none;
        }


        .christmas-event .event-information.form-submit-message .bold-large {
            font-size: 1.2em;
            line-height: 1.8;
            font-weight: bold;
            margin: 20px auto;
        }

        .christmas-event .event-information.form-submit-message p {
            margin-bottom: 10px;
        }

            .christmas-event .event-information.form-submit-message p > .nowrap {
                font-style: normal;
                white-space: nowrap;
            }

        .christmas-event .event-information.form-submit-message .social-icons {
            font-size: 1.2rem;
            line-height: 1.4;
        }

            .christmas-event .event-information.form-submit-message .social-icons a {
                font-size: 1rem;
                text-decoration: none;
                margin: 0 10px;
                color: #0077b5;
            }

        .christmas-event .event-information.form-submit-message .good-luck {
            font-size: 1.6em;
            font-weight: bold;
            margin-top: 10px;
        }


.christmas-event .christmas-event-wrapper {
    width: 100%;
    overflow: hidden;
}

.christmas-event .form-logo {
    padding: 10px 0 10px;
    max-width: 180px;
    margin: 0 auto;
}

.christmas-event .form-title {
    font-family: "Avenir Black";
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 900;
    text-align: center;
    color: #ffffff;
}

.christmas-event .form-input-wrapper {
    display: flex;
    position: relative;
    flex-direction: row;
    margin: 0 auto;
    flex-wrap: nowrap;
    align-content: center;
    align-items: flex-start;
    justify-content: center;
    max-width: 1000px;
    margin-top: -10px;
}

.christmas-event .form-input-wrapper {
    margin-top: -30px;
    align-content: center;
    align-items: center;
    gap: 20px;
}

.christmas-event .form-input-icon {
    width: 60px;
    transform: scaleX(1);
    z-index: 2;
    user-select: none;
}

    .christmas-event .form-input-icon.icon-left {
        transform: scaleX(-1);
    }

    .christmas-event .form-input-icon.icon-right {
        /* margin-left: -20px; */
    }

    .christmas-event .form-input-icon img {
        min-width: 60px;
    }

.christmas-event .form-input-group {
    display: flex;
    flex-direction: column;
    z-index: 1;
    max-width: 520px;
    font-size: 1rem;
    margin: 1.3rem -1.6rem;
    flex: 1 1 auto !important;
    flex-wrap: nowrap;
    overflow: hidden;
}

    .christmas-event .form-input-group .styled-input-group {
        border: none;
        padding: 0.5rem 1.6rem;
        height: unset;
    }

        .christmas-event .form-input-group .styled-input-group:first-child {
        }

        .christmas-event .form-input-group .styled-input-group .styled-input-group-wrapper {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            width: 100%;
            overflow: hidden;
            /* gap: 0.8rem; */
            justify-content: center;
        }

        .christmas-event .form-input-group .styled-input-group input {
            border: none;
            color: #ffffff;
            text-align: center;
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit;
            flex: 1;
            width: unset;
            border-bottom: solid 2px #fff;
            padding: 2px;
        }

        .christmas-event .form-input-group .styled-input-group:first-child input {
            max-width: 100%;
        }

        .christmas-event .form-input-group .styled-input-group input:focus {
            border-color: #fff;
            color: #cba0a0;
        }

        .christmas-event .form-input-group .styled-input-group input::placeholder {
            color: #ffffff;
        }

            .christmas-event .form-input-group .styled-input-group input::placeholder:focus {
                color: #cba0a0;
            }

        .christmas-event .form-input-group .styled-input-group input:not(.not-empty) {
            /* font-size: 2.2rem; */
        }

        .christmas-event .form-input-group .styled-input-group .btn {
            border: none;
            color: #292625;
            margin: 10px auto 0;
            padding: 0;
            width: 0px;
            height: unset;
            background: #fff;
            font-size: inherit;
            font-weight: 600;
            line-height: inherit;
            flex-shrink: 0;
            text-transform: none;
            transition: width 350ms ease;
            text-align: center;
        }

            .christmas-event .form-input-group .styled-input-group .btn::after {
                display: none;
            }

        .christmas-event .form-input-group .styled-input-group input.not-empty + .btn {
            width: 90px;
        }

    .christmas-event .form-input-group span {
        color: #ffffff;
        text-align: center;
        padding: 0 20px;
    }

.christmas-event .event-picture-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 110px;
}

.christmas-event .event-picture {
    background-size: cover;
    background-position: center;
    width: 20%;
    margin: 0 -2.955%;
    user-select: none;
}


.christmas-event .event-picture-wrapper .event-picture {
    filter: grayscale(0%) brightness(100%);
    transition: all 250ms ease-in;
}

    .christmas-event .event-picture-wrapper .event-picture:first-child {
        margin-left: 0 !important;
    }

    .christmas-event .event-picture-wrapper .event-picture:last-child {
        margin-right: 0 !important;
    }

    .christmas-event .event-picture-wrapper .event-picture img,
    .christmas-event .event-picture-wrapper .event-picture svg > img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: cover;
    }

    .christmas-event .event-picture-wrapper .event-picture.picture-size-1 {
        width: 16%;
        z-index: 1;
    }

    .christmas-event .event-picture-wrapper .event-picture.picture-size-2 {
        width: 21%;
        z-index: 2;
    }

    .christmas-event .event-picture-wrapper .event-picture.picture-size-3 {
        width: 26%;
        z-index: 3;
    }


.christmas-event .event-picture-wrapper:hover .event-picture {
    filter: grayscale(50%) brightness(90%);
    width: 20%;
    margin: 0 -2.955%;
}

    .christmas-event .event-picture-wrapper:hover .event-picture:hover {
        filter: grayscale(0%) brightness(100%);
        z-index: 10;
        width: 24%;
    }

@media all and (min-width: 480px) {
    .christmas-event .christmas-event-wrapper {
        width: 100%;
        overflow: hidden;
        padding: 0;
    }

    .christmas-event .event-information.form-submit-message {
        font-size: 16px;
        padding: 8px 50px;
    }

        .christmas-event .event-information.form-submit-message .bold-large {
            font-size: 1.5em;
        }

    .christmas-event .form-title {
        font-size: 2rem;
    }

    .christmas-event .form-input-icon {
        width: 100px;
    }

    .christmas-event .form-input-group {
        margin: 1.3rem -2.4rem;
    }

        .christmas-event .form-input-group .styled-input-group {
            font-size: 1.4rem;
            padding: 0.5rem 2.4rem;
        }

            .christmas-event .form-input-group .styled-input-group:first-child {
                margin-top: 1.4rem;
            }

            .christmas-event .form-input-group .styled-input-group .styled-input-group-wrapper {
                flex-direction: row;
                flex-wrap: nowrap;
                padding: 0;
                gap: 20px;
            }

            .christmas-event .form-input-group .styled-input-group:first-child input {
                max-width: calc(50% - 10px);
            }

            .christmas-event .form-input-group .styled-input-group .btn {
                border: none;
                margin: 0;
                padding: 0;
                width: calc(100% - 130px);
                height: unset;
                font-size: inherit;
                font-weight: inherit;
                line-height: inherit;
                flex-shrink: 0;
                text-transform: none;
                transition: width 350ms ease;
            }

        .christmas-event .form-input-group span {
            font-size: 10px;
        }

    .christmas-event .event-picture-wrapper {
        min-height: 200px;
    }
}

@media all and (min-width: 768px) {
    .christmas-event .form-title {
        font-size: 2.6rem;
    }

    .christmas-event .form-input-group .styled-input-group {
        font-size: 1.4rem;
    }

    .christmas-event .form-input-group span {
        font-size: 12px;
    }

    .christmas-event .event-picture-wrapper {
        min-height: 280px;
    }
}

@media (min-width: 1000px) {
    .christmas-event {
        min-height: 100vh;
        padding: 0;
    }

        .christmas-event .christmas-event-wrapper {
            padding: 120px 20px 0;
        }

        .christmas-event .form-title {
            font-size: 2.8rem;
            line-height: 1;
        }

        .christmas-event .form-logo {
            padding: 10px 0 10px;
            max-width: 260px;
        }

        .christmas-event .form-input-wrapper {
            margin-top: -10px;
            align-content: flex-start;
            align-items: flex-start;
        }

        .christmas-event .form-input-icon {
            width: 30%;
            max-width: 160px;
        }

            .christmas-event .form-input-icon.icon-left {
                margin-right: -60px;
            }

            .christmas-event .form-input-icon.icon-right {
                margin-left: -60px;
            }

        .christmas-event .form-input-group {
            margin: 1.3rem -0.6rem;
        }

            .christmas-event .form-input-group .styled-input-group {
                padding: 0.5rem 4rem;
                font-size: 1.4rem;
                font-weight: 600;
                gap: 0.8rem;
                border-top: solid 2px #fff;
                border-bottom: solid 2px #fff;
            }

                .christmas-event .form-input-group .styled-input-group:first-child {
                    margin-top: 3.125rem;
                    border-bottom: none;
                }

                .christmas-event .form-input-group .styled-input-group input {
                    border: none;
                }

            .christmas-event .form-input-group span {
                text-decoration: underline;
                padding: 1rem 2.6rem;
            }

        .christmas-event .event-picture-wrapper {
            min-height: 280px;
        }
}


@media all and (min-width: 1280px) {
    .christmas-event {
        min-height: 100vh;
    }

        .christmas-event .form-input-wrapper {
            margin-top: -10px;
        }

        .christmas-event .form-title {
            font-size: 4rem;
        }

        .christmas-event .form-logo {
            padding: 10px 0 10px;
            max-width: 260px;
        }

        .christmas-event .event-picture-wrapper {
            min-height: 280px;
        }
}


.terms {
    padding-bottom: 120px;
    display: block !important;
    flex-direction: column;
    color: white;
    font-size: 11pt;
}

    .terms p {
        padding: 10px;
    }