.newsletter-popup {
    @extend %text-opacity-hiden;
    @extend %flex-item-center;
    justify-content: center;
    @include position(fixed, 0, 0, 0, 0, 99999);
    @include transition(all .4s);

    &.active {
        @extend %text-opacity-show;
    }

    .newsletter-overlay {
        background: rgba(#fff, .95);
        cursor: pointer;
        @include position(absolute, 0, 0, 0, 0);
    }

    .close-popup {
        display: inline-flex;
        font-size: rem(24px);
        color: $disable_color;
        line-height: 1;
        cursor: pointer;
        @include position(absolute, 20px, 20px);
    }

    .newsletter-content {
        &-wrapper {
            @extend %flex-item-center;
            max-width: rem(980px);
            min-height: rem(300px);
            max-height: rem(400px);
            width: 100%;
            margin-left: rem(15px);
            margin-right: rem(15px);
            background: $light_scheme;
            position: relative;
            overflow: hidden;
            @include border-radius(5px);
            @include box-shadow(0px 15px 30px 0 rgba(141, 141, 141, 0.2));

        }

        &-image {
            @include flex(38.14433%);
        }

        &-info {
            flex: 1;
            text-align: center;
            padding-left: rem(60px);
            padding-right: rem(60px);

            &.newsl-btn-small {
                input[type="button"],
                input[type="submit"] {
                    min-height: rem(30px);
                }
            }

            &.newsl-btn-medium {
                input[type="button"],
                input[type="submit"] {
                    min-height: rem(40px);
                }
            }

            &.newsl-btn-large {
                input[type="button"],
                input[type="submit"] {
                    min-height: rem(50px);
                }
            }

            form {
                .mc4wp-form-fields {
                    @extend %flex;
                }

                input[type="text"],
                input[type="search"],
                input[type="email"] {
                    @include flex(100%);
                    margin-bottom: rem(20px);
                }

                input[type="button"],
                input[type="submit"] {
                    margin: auto;
                    min-width: rem(135px);
                }
            }
        }
    }
}

@media (max-width: $screen-lg) {
    .newsletter-popup {
        .newsletter-content {
            &-image {
                @include flex(45%);
            }

            &-info {
                padding-left: rem(30px);
                padding-right: rem(30px);
            }
        }
    }
}

@media (max-width: $screen-md) {
    .newsletter-popup {
        .newsletter-content {
            .close-popup {
                top: 10px;
                right: 10px;
            }

            &-image {
                display: none !important;
            }

            &-info {
                padding-left: rem(15px);
                padding-right: rem(15px);
            }
        }
    }
}