﻿.newsletter-popup-container{
    position:fixed;
    top:0;
    left:~"calc(50% - 475px)";
    width: 950px;
    height:1px;
    padding: 0;
    z-index:99999999;

    .newsletter-popup{

        position:absolute;
        top:200px;
        right:0;
        width:292px;
        background:@pv-color-blue;
        box-shadow: rgba(0,0,0,.3) 0 0 15px 2px;
        z-index:99999999;
        padding:0;

        img {
            margin:15px 0;
        }

        fieldset{
            padding:0 22px 22px !important;
            box-sizing:border-box;

            p.error{
                color:@pv-color-red;
                text-transform:uppercase;
                font-size:13px;
            }

            input{
                width:100%;
                margin-bottom:10px;

                &.inactive{
                    color:#808080;
                }
            }

            .note{
                color:@pv-color-yellow;
                text-transform:uppercase;
                font-size:13px;
                display:inline-block;
                margin-bottom:10px;
                width:100%;
                text-align:center;
            }

            .btn-rood-fluid-wrapper{
                width:100%;

                .btn-rood{
                    width:100%;
                    margin-bottom:0;
                }

                &::after{
                    bottom: 6px;
                }
            }

        }

        a.close.red {
            position:absolute;
            top:23px;
            right:25px;

            &::after{
                color:#fff;
            }
        }

        &.complete{
            padding:22px; 
            font-weight:bold;
            color:#fff;
            font-size:20px;
        }
    }
}

@media(max-width: 979px)
{
    .newsletter-popup-container{
        position:fixed;
        left:0;
        bottom:0;
        top:auto;
        z-index: 99999;
        width:100%;
        height:308px;

        .newsletter-popup{
            position:absolute;
            left:0;
            top:0;
            right:auto;
            width:100%;

            img{
                margin:13px auto;
            }

            fieldset{

                input{
                    &:nth-of-type(1):not(.btn-rood) {
                        width:35%;
                        margin-right:5px;
                    }
                    &:nth-of-type(2){
                        width:60%;
                    }       
                }

                p.note{
                    width:100%;
                    text-align:center;
                }

                .btn-rood-fluid-wrapper{
                    .btn-rood{
                        width:auto;
                        float:right;
                    }
                }
            }

            &.complete{
                
            }
        }

        &.complete{
            height:66px; 
            font-weight:bold;
            color:#fff;
            font-size:20px;
        }
    }
}