.block-newsletter__newsletter__wrapper:before,
.block-newsletter__newsletter__wrapper:after {
    -webkit-transition       : all 1s ease-out;
    -o-transition            : all 1s ease-out;
    transition               : all 1s ease-out;

    -webkit-transform-origin : center;

    -ms-transform-origin     : center;

    transform-origin         : center;
}

.block-newsletter__newsletter__wrapper:before {
    top               : 50%;
    -webkit-transform : rotate(0) translate3d(0, -50%, 0);
    transform         : rotate(0) translate3d(0, -50%, 0);
    left              : 0;
}

.block-newsletter__newsletter__wrapper:after {
    right             : 0;
    -webkit-transform : rotate(0) translate3d(0, 50%, 0);
    transform         : rotate(0) translate3d(0, 50%, 0);
    bottom            : 50%;
}

.block-newsletter__newsletter.active .block-newsletter__newsletter__wrapper:before {
    /*left : 100%;*/
    -webkit-animation : chevronLeftOpenInput 1.2s ease-in-out forwards;
    animation         : chevronLeftOpenInput 1.2s ease-in-out forwards;
}

.block-newsletter__newsletter.active .block-newsletter__newsletter__wrapper:after {
    -webkit-animation : chevronRightOpenInput 1.2s ease-in-out forwards;
    animation         : chevronRightOpenInput 1.2s ease-in-out forwards;
    /*right : 100%;*/
}

.block-newsletter__newsletter.active .block-newsletter__input-sub {
    -webkit-animation : openInput 1.21s ease-in-out forwards;
    animation         : openInput 1.21s ease-in-out forwards;
}

@-webkit-keyframes chevronLeftOpenInput {
    0% {
        top               : 50%;
        left              : 0;
        -webkit-transform : rotate(0) translate3d(0, -50%, 0);
        transform         : rotate(0) translate3d(0, -50%, 0);
    }
    50% {
        top               : 50%;
        left              : calc(50% - 10px);
        -webkit-transform : rotate(0) translate3d(-50%, -50%, 0);
        transform         : rotate(0) translate3d(-50%, -50%, 0);
    }

    70% {
        top               : 0;
        left              : 50%;
        -webkit-transform : rotate(90deg) translate3d(-50%, 55%, 0);
        transform         : rotate(90deg) translate3d(-50%, 55%, 0);
    }
    100% {
        top               : 0;
        left              : 50%;
        -webkit-transform : rotate(90deg) translate3d(calc(-50% - 20px), 55%, 0);
        transform         : rotate(90deg) translate3d(calc(-50% - 20px), 55%, 0);
    }
}

@keyframes chevronLeftOpenInput {
    0% {
        top               : 50%;
        left              : 0;
        -webkit-transform : rotate(0) translate3d(0, -50%, 0);
        transform         : rotate(0) translate3d(0, -50%, 0);
    }
    50% {
        top               : 50%;
        left              : calc(50% - 10px);
        -webkit-transform : rotate(0) translate3d(-50%, -50%, 0);
        transform         : rotate(0) translate3d(-50%, -50%, 0);
    }

    70% {
        top               : 0;
        left              : 50%;
        -webkit-transform : rotate(90deg) translate3d(-50%, 55%, 0);
        transform         : rotate(90deg) translate3d(-50%, 55%, 0);
    }
    100% {
        top               : 0;
        left              : 50%;
        -webkit-transform : rotate(90deg) translate3d(calc(-50% - 20px), 55%, 0);
        transform         : rotate(90deg) translate3d(calc(-50% - 20px), 55%, 0);
    }
}

@-webkit-keyframes chevronRightOpenInput {
    0% {
        bottom            : 50%;
        right             : 0;
        -webkit-transform : rotate(0) translate3d(0, 50%, 0);
        transform         : rotate(0) translate3d(0, 50%, 0);
    }
    50% {
        bottom            : 50%;
        right             : calc(50% - 10px);
        -webkit-transform : rotate(0) translate3d(50%, 50%, 0);
        transform         : rotate(0) translate3d(50%, 50%, 0);
    }

    70% {
        -webkit-transform : rotate(90deg) translate3d(50%, -55%, 0);
        transform         : rotate(90deg) translate3d(50%, -55%, 0);
        right             : 50%;
        bottom            : 0;
    }
    100% {
        -webkit-transform : rotate(90deg) translate3d(calc(50% + 20px), -55%, 0);
        transform         : rotate(90deg) translate3d(calc(50% + 20px), -55%, 0);
        right             : 50%;
        bottom            : 0;
    }
}

@keyframes chevronRightOpenInput {
    0% {
        bottom            : 50%;
        right             : 0;
        -webkit-transform : rotate(0) translate3d(0, 50%, 0);
        transform         : rotate(0) translate3d(0, 50%, 0);
    }
    50% {
        bottom            : 50%;
        right             : calc(50% - 10px);
        -webkit-transform : rotate(0) translate3d(50%, 50%, 0);
        transform         : rotate(0) translate3d(50%, 50%, 0);
    }

    70% {
        -webkit-transform : rotate(90deg) translate3d(50%, -55%, 0);
        transform         : rotate(90deg) translate3d(50%, -55%, 0);
        right             : 50%;
        bottom            : 0;
    }
    100% {
        -webkit-transform : rotate(90deg) translate3d(calc(50% + 20px), -55%, 0);
        transform         : rotate(90deg) translate3d(calc(50% + 20px), -55%, 0);
        right             : 50%;
        bottom            : 0;
    }
}

@-webkit-keyframes openInput {
    0% {
        opacity : 0;
        width   : auto;
        height  : 0;
    }

    70% {
        opacity : 1;
        width   : auto;
        height  : 0;
    }
    100% {
        opacity : 1;
        width   : auto;
        height  : 40px;
    }
}

@keyframes openInput {
    0% {
        opacity : 0;
        width   : auto;
        height  : 0;
    }

    70% {
        opacity : 1;
        width   : auto;
        height  : 0;
    }
    100% {
        opacity : 1;
        width   : auto;
        height  : 40px;
    }
}

.block-newsletter__input-bg {
    -webkit-transition : all .5s ease-out 0.5s;
    -o-transition      : all .5s ease-out 0.5s;
    transition         : all .5s ease-out 0.5s;
}

.block-newsletter__newsletter.active .block-newsletter__input-bg {
    width : calc(100% + 62px);
}