Popup Modal https://yadi.sk/i/_E0srbWOyq8XF

modal.css

* {
    outline: none;
}

.padding {
    padding: 10px;
}

.modal-show {
    overflow: hidden !important;
    position: relative;
    right: 8px;
}

.margin-t-b {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.margin-l {
    margin-left: 0 !important;
}

.loader, .modal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAeSURBVHjaYmRgYNBmIAIwMRAJRhVSRyEAAAD//wMAVdAAP0SGoHgAAAAASUVORK5CYII=');
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
    left: 0;
    top: 0;
}

.loader {
    z-index: 200001;
}

.modal {
    z-index: 200001;
    overflow: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000;
    text-align: justify;
}

.modal .modal-top {
    top: 50%;
}

.modal .modal-left {
    left: 50%;
}

.modal-block {
    position: relative;
    width: 600px;
    background: #FFF;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.35);
    border: 1px solid #3A87AD;
}

.modal-block .icon-close {
    position: absolute;
    right: 0;
    margin: 15px 20px;
    z-index: 1000;
}

.modal-block .title {
    background: #4D83C0;
    text-align: center;
    line-height: 1.3;
    text-shadow: 1px 1px 0 #3A87AD;
    border-bottom: 1px solid #3A87AD;
    padding: 15px 100px 0;
    font-size: 18px;
    color: #FFF;
}

.modal.error .title {
    background: #FF0000;
    text-shadow: 1px 1px 0 #E30000;
    border-bottom: 1px solid #E30000;
}

.modal.error .modal-block {
    border: 1px solid #E30000;
}

.modal.complete .title {
    background: #5BB75B;
    text-shadow: 1px 1px 0 #50A150;
    border-bottom: 1px solid #50A150;
}

.modal.complete .modal-block {
    border: 1px solid #50A150;
}

.icon-close {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAlCAYAAABPsblCAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAE2SURBVHjanNPNSkNBDAXg01sYkC60m6Ir9xYURNcuWxHf/wnyHHHRpKRz8zNjIKs2HzOTc8HMkNoD2GCuFgAPAACBHgH8APiYwBYAnzJ3UOgI4Fd6BFNEZ15grvY6iPXI0V5tFPMRB8qwGAkgD9umSAL12ClFCqjHYqSA+jfJtxlAPfJVYg4UbSePRgctxXZizEBLueIME2gUiTGB3icQD3tTaA/gewKx2BnAvX2jHf5Xu5Fkj5dCRMTycc5UIyImogtERMzMPIm1mzkLTWBtNSPQDLZCrlfTHsBWiB6khzLMRbRv1p+c7C5F+hxlJ0uRKJAeZh92hRTJbh4EYOvOBFDLruZGw4HcnJRYB4UrLjEDpTkpMYHayIpTzAugm5MKU0g7QzxM2w49yY+Xj7Ao879nIsLfAI7+/zeB1j7HAAAAAElFTkSuQmCC') no-repeat;
    width: 20px;
    height: 19px;
    background-position: 0 0;
    cursor: pointer;
}

.icon-close:hover {
    background-position: 0 -19px;
}

.modal p {
    font-weight: normal;
    width: auto;
}

.modal .content {
    background: #ffffff repeat;
    width: auto;
    overflow: hidden;
    margin: 0;
    box-shadow: none;
}

@media screen and (max-width: 540px) {
    .modal-block {
        width: 380px;
    }

    .modal-block .title {
        padding: 0 50px;
        line-height: 39px;
    }
}

@media screen and (max-width: 405px) {
    .modal-block {
        width: 300px;
    }

    .modal-block .title {
        padding: 0;
    }
}

/* KMA Call Back */
#kmacb {
    position: fixed;
    *visibility: hidden;
    background-color: transparent;
    width: 260px;
    height: 160px;
    z-index: 200000 !important;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-transition: visibility .5s;
    -moz-transition: visibility .5s;
    -o-transition: visibility .5s;
    transition: visibility .5s;
    right: 15px;
    bottom: 15px;
}

@media screen and (max-width: 980px) {
    #kmacb {
        display: none;
    }
}

#kmacb a {
    text-decoration: none;
}

#kmacb .kmacb-img-circle {
    width: 80px;
    height: 80px;
    background: #5aaade center center no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAA8CAMAAADIULPRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABs1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAAAPKcAvAAAAj3RSTlMATksXN+N4FifeiTABxPV+DCj9xy2kSQnl1y8iwA13/qruG/yN5hx6ZGq8WPAm9CmU+lAYtVQLTb1jBDGzhQW6q09EHhLqDhP52a4CYM/yD8o5bgPYHxH4nsapQge4V4ZzPAjtJMzCOBCvnzZVpyHzQ4Ta36xBuetRmI6jBoPxYXvTLHXvmYvbgJfWvoc0GTlTyOIAAAABYktHRACIBR1IAAAACXBIWXMAAAsSAAALEgHS3X78AAAB8UlEQVRIx43W91cTQRAH8AWResRwQCAGjKGEmkRQQDkMVhIQC4QWCMUAErtYqEoNCqLsv8yDl3e7e3uzk+9vd/d58+Z2Zy8hBE5O7hWSXfIopVfzC7KhhfQyRcUlKNVKaSaOa07ElunUTHmF2lZSLkUuFa2q5i11X1dYDxVTUwvbGxbrvQlbH7WmDlzcesk2QNYlUdroB2yTbOubAdsiW9oK2DYb267Z24Au22DI3mq3ZNvRCTRx+46Mu6BV6+65a7X34K3rNfpEe58oEjb6+XdsI8o4HzCqP1RbYnB1HyGWcPYxQp88NalvALGRqGkHsRYCrIWhZ4gd9pp2GKv73KQvuhH6kp27V1jZEdbuKEJjY+wI+RE7zsahFGthiLXQjNAJRicRqrUyO6WpbYhRRwSpG2d2GqEz3Dh61DThYHTWMja1c/MLr5NsGxa507Mk0sLli7tvVlKZ67dcB+9E+j6Yue/+EL5Yro8cdSQE+ukze1Te9aWlkf8urAo0+ZXC+dYr2O8KSssE+kNF18TdVdF1cQ2mVFYc8ZAXlvqGWHZTUXXLsvEK2meZAyMK0u2flrJO0DbJZ+GXvdzZtRnU2J7P5tds/wCY68O0lR6lAEo0z+8d5ib/HIN/Fi4TCZzEo2m6/vf033+SRQbOwv6Y4vk50nYdHuLvx/IAAAAASUVORK5CYII=');
    position: absolute;
    top: 40px;
    left: 40px;
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: .8;
    -webkit-animation: kmacb-circle-img-anim 1s infinite ease-in-out;
    -moz-animation: kmacb-circle-img-anim 1s infinite ease-in-out;
    -ms-animation: kmacb-circle-img-anim 1s infinite ease-in-out;
    -o-animation: kmacb-circle-img-anim 1s infinite ease-in-out;
    animation: kmacb-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

#kmacb .kmacb-circle-fill {
    opacity: .24;
    -webkit-animation: kmacb-circle-fill-anim 2.3s infinite ease-in-out !important;
    -moz-animation: kmacb-circle-fill-anim 2.3s infinite ease-in-out !important;
    -ms-animation: kmacb-circle-fill-anim 2.3s infinite ease-in-out !important;
    -o-animation: kmacb-circle-fill-anim 2.3s infinite ease-in-out !important;
    animation: kmacb-circle-fill-anim 2.3s infinite ease-in-out !important;
    background: #5aaade repeat;
    width: 110px;
    height: 110px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 100%;
    border: 2px solid transparent;
}

#kmacb .kmacb-circle {
    opacity: .35;
    -webkit-animation: kmacb-circle-anim 2.2s infinite ease-in-out !important;
    -moz-animation: kmacb-circle-anim 2.2s infinite ease-in-out !important;
    -ms-animation: kmacb-circle-anim 2.2s infinite ease-in-out !important;
    -o-animation: kmacb-circle-anim 2.2s infinite ease-in-out !important;
    animation: kmacb-circle-anim 2.2s infinite ease-in-out !important;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: transparent;
    border-radius: 100%;
    border: 2px solid #5aaade;
}

#kmacb:hover .kmacb-img-circle, #kmacb:hover .kmacb-circle-fill {
    background-color: #72d582;
}

#kmacb:hover .kmacb-circle {
    border-color: #72d582;
}

#kmacb:hover .kmacb-img-circle {
    -webkit-animation: kmacb-circle-img-anim-hover 1s infinite ease-in-out;
    -moz-animation: kmacb-circle-img-anim-hover 1s infinite ease-in-out;
    -ms-animation: kmacb-circle-img-anim-hover 1s infinite ease-in-out;
    -o-animation: kmacb-circle-img-anim-hover 1s infinite ease-in-out;
    animation: kmacb-circle-img-anim-hover 1s infinite ease-in-out;
}

@-moz-keyframes kmacb-circle-anim {
    0% {
        -moz-transform: rotate(0deg) scale(0.5) skew(1deg);
        opacity: .1;
        -moz-opacity: .1;
        -webkit-opacity: .1;
        -o-opacity: .1
    }
    30% {
        -moz-transform: rotate(0deg) scale(.7) skew(1deg);
        opacity: .5;
        -moz-opacity: .5;
        -webkit-opacity: .5;
        -o-opacity: .5
    }
    100% {
        -moz-transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .6;
        -moz-opacity: .6;
        -webkit-opacity: .6;
        -o-opacity: .1
    }
}

@-webkit-keyframes kmacb-circle-anim {
    0% {
        -webkit-transform: rotate(0deg) scale(0.5) skew(1deg);
        -webkit-opacity: .1
    }
    30% {
        -webkit-transform: rotate(0deg) scale(.7) skew(1deg);
        -webkit-opacity: .5
    }
    100% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        -webkit-opacity: .1
    }
}

@-o-keyframes kmacb-circle-anim {
    0% {
        -o-transform: rotate(0deg) kscale(0.5) skew(1deg);
        -o-opacity: .1
    }
    30% {
        -o-transform: rotate(0deg) scale(.7) skew(1deg);
        -o-opacity: .5
    }
    100% {
        -o-transform: rotate(0deg) scale(1) skew(1deg);
        -o-opacity: .1
    }
}

@keyframes kmacb-circle-anim {
    0% {
        transform: rotate(0deg) scale(0.5) skew(1deg);
        opacity: .1
    }
    30% {
        transform: rotate(0deg) scale(.7) skew(1deg);
        opacity: .5
    }
    100% {
        transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .1
    }
}

@-moz-keyframes kmacb-circle-fill-anim {
    0% {
        -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }
    50% {
        -moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);
        opacity: .2
    }
    100% {
        -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }
}

@-webkit-keyframes kmacb-circle-fill-anim {
    0% {
        -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }
    50% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .2
    }
    100% {
        -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }
}

@-o-keyframes kmacb-circle-fill-anim {
    0% {
        -o-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }
    50% {
        -o-transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .2
    }
    100% {
        -o-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }
}

@keyframes kmacb-circle-fill-anim {
    0% {
        transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }
    50% {
        transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .2
    }
    100% {
        transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .2
    }
}

@keyframes kmacb-circle-img-anim {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
}

@-moz-keyframes kmacb-circle-img-anim {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    10% {
        -moz-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        -moz-transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        -moz-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        -moz-transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        -moz-transform: rotate(0deg) scale(1) skew(1deg)
    }
    100% {
        -moz-transform: rotate(0deg) scale(1) skew(1deg)
    }
}

@-webkit-keyframes kmacb-circle-img-anim {
    0% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg)
    }
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg)
    }
    100% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg)
    }
}

@-o-keyframes kmacb-circle-img-anim {
    0% {
        -o-transform: rotate(0deg) scale(1) skew(1deg)
    }
    10% {
        -o-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        -o-transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        -o-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        -o-transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        -o-transform: rotate(0deg) scale(1) skew(1deg)
    }
    100% {
        -o-transform: rotate(0deg) scale(1) skew(1deg)
    }
}

@keyframes kmacb-circle-img-anim-hover {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-35deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(35deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-35deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(35deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
}

@-moz-keyframes kmacb-circle-img-anim-hover {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-35deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(35deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-35deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(35deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
}

@-webkit-keyframes kmacb-circle-img-anim-hover {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-35deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(35deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-35deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(35deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
}

@-o-keyframes kmacb-circle-img-anim-hover {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-35deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(35deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-35deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(35deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
}

#kmacb-form .modal-block {
    border: none;
    box-shadow: none;
    font-family: Arial;
    border-radius: 10px;
    overflow: hidden;
    color: #222222;
    line-height: 1.5 !important;
    width: 440px;
}

#kmacb-form .modal-block .title {
    background: transparent;
    text-shadow: none;
    color: #222222;
    font-weight: bold;
    font-size: 22px;
    border-bottom: none;
    text-transform: none;
}

#kmacb-form .modal-block .icon-close {
    margin: 20px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAlCAYAAABPsblCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJBQUUwNEY0RDJGQTExRTRCOTcxRkUwREM4QjIzQjUyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJBQUUwNEY1RDJGQTExRTRCOTcxRkUwREM4QjIzQjUyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkFBRTA0RjJEMkZBMTFFNEI5NzFGRTBEQzhCMjNCNTIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkFBRTA0RjNEMkZBMTFFNEI5NzFGRTBEQzhCMjNCNTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4O6hRpAAABc0lEQVR42qSWTUvEMBCGm1HsqggWpURs9eLZg9701/sXFtaju3oopZfCguAX1ElNINtNJjPrwNum+XiYZt6GwjAMmY0CpTJZAOrUNUxo1APqXgADO/8RVTrQmR24YMIcRNv2uQMtUK+2nYL5EBMvqGfwJswZsBBk4e8RBxaFhEAx2B4FMaFM+ZUKbsct6tq2v1AHMUgso1BmJCQFMmP5pO8wVk1glnidsgYwffKUsgZwfZLyGTAhSZ+BAELCnI/u8OGSAYn57M1ltET9CCB+Zt+oVeYdbMfZbvG3zgP9K/bNpaqqkdn3/awoik/u4q7rjsqyfDeb7fZoTAshHwjLhZBx/ZazObAJZMOQigsLQfxXY8FikNC3FoVRkNjXvwVr2/aEglDn0cYkrfWaGk+dkErSD1SJQ/2xaoKgxKQ1gOuTFAwEEBIGkkwo2HhC5nnOgfgxTAowG0F1XQ8CSBAGAv9kHGerpmmudviHNOtuzP1XgAEAeVu1MBSM7t8AAAAASUVORK5CYII=')
}

#kmacb-form .modal-block .padding {
    padding: 20px 40px 40px;;
}

#kmacb-form .modal-block p {
    font-size: 16px;
    text-align: left;
    line-height: 1.5;
}

#kmacb-form .modal-block .bold {
    font-weight: bold;
}

#kmacb-form form {
    margin: 10px 0;
    text-align: center;
    width: 100%;
    height: auto;
    background: none;
    position: static;
    padding: 0;
    border: none;
}

#kmacb-form form input[type=text] {
    height: 36px;
    line-height: 36px;
    color: #222222;
    border: 1px solid #aaa;
    padding: 0 10px;
    width: 200px;
    display: inline-block;
    text-indent: 0;
    margin-bottom: 10px;
    border-radius: 3px;
    background: #FFFFFF;
    font-size: 14px;
    font-style: normal;
    box-shadow: none;
}

#kmacb-form form ::-webkit-input-placeholder {
    color: #888;
}

#kmacb-form form ::-moz-placeholder {
    color: #888;
}

#kmacb-form form :-moz-placeholder {
    color: #888;
}

#kmacb-form form :-ms-input-placeholder {
    color: #888;
}

#kmacb-form form input[name=name] {
    padding-right: 10px;
}

#kmacb-form form input[type=submit] {
    position: static;
    cursor: pointer;
    border: none;
    background: #c4191c;
    color: #FFFFFF;
    font-size: 16px;
    padding: 0 10px;
    color: #FFF;
    text-transform: uppercase;
    line-height: 38px;
    height: 38px;
    vertical-align: top;
    margin: 0;
    display: inline-block;
    text-indent: 0;
    text-align: center !important;
    border-radius: 3px;
    font-style: normal;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    width: auto;
    opacity: 1;
}

#kmacb-form form input[type=submit]:hover {
    background: #DD070B;
    text-decoration: none;
}


#kma_a{
	background: rgba(255, 255, 255, 0.7) none repeat scroll 0% 0%;
	padding: 10px 20px;
	border-radius: 10px;
	border: 4px solid rgba(207, 133, 133, 0.74);
	text-align: center;
}

#kma_a_t{
	color: #000;
	font-size: 14px;
	font-family: '__Proxima Nova_5', Arial, Helvetica, sans-serif;
}
#kma_a_img{
	display: block;
	height: 70px;
	text-align: center;
	margin: 0px auto;
}

modal.js

$(function () {
    function TemplateRefresh() {
        ModalRefresh();
    }

    $(window).resize(function () {
        TemplateRefresh();
    });
    TemplateRefresh();

    /* -----------------------------------------------------------------------------------------
     * Modal Refresh
     */
    function ModalRefresh() {
        if ($('.modal').is(':visible')) {
            var modalBlock = $('.modal:visible .modal-block'),
                width = parseInt(modalBlock.width()),
                height = parseInt(modalBlock.height());
            if ($(window).height() > height + 20) {
                modalBlock.addClass('modal-top').removeClass('margin-t-b').css('margin-top', -1 * (height / 2));
            }
            else {
                modalBlock.addClass('margin-t-b').removeClass('modal-top');
            }
            if ($(window).width() > width) {
                modalBlock.addClass('modal-left').removeClass('margin-l').css('margin-left', -1 * (width / 2));
            }
            else {
                modalBlock.addClass('margin-l').removeClass('modal-left');
            }
        }
    }


    /* -----------------------------------------------------------------------------------------
     * Modal Show
     */
    $(document).on('click', 'a[modal],button[modal]', function(){
        var modalWindow = $('div#' + $(this).attr('modal'));
        if (modalWindow.length){
            modalWindow.fadeIn('fast');
            $('body').addClass('modal-show');
            ModalRefresh();
            return false; 
        }
    });


    /* -----------------------------------------------------------------------------------------
     * Modal Hide
     */
    function ModalHide() {
        $('.modal:visible').fadeOut('fast', function(){
            $('body').removeClass('modal-show');
        });
    }

    $(document)
        .on('click', '.icon-close, .modal', function (event) {
            if (event.target != this)
                return false;
            else
                ModalHide();
        })
        .on('keydown', function (key) {
            if (key.keyCode == 27)
                ModalHide();
        })
        .on('click', '.modal > *', function (event) {
            event.stopPropagation();
            return true;
        })
        .on('submit', '#kmacb-form form', function () {
            var name = $('#kmacb-form form input[name=name]').val(),
                phone = $('#kmacb-form form input[name=phone]').val();
            $('form:first input[name=name]').val(name);
            $('form:first input[name=phone]').val(phone);
            $('form:first').submit();
            $('form:first input[name=name]').val('');
            $('form:first input[name=phone]').val('');
			return false;
        });


	try {

		setTimeout(
			function start_kmacb() {
                $('body').append('<div id="kmacb-form" class="modal kmacb-form kmacb-form2"> <div class="modal-block"> <div class="title"><a class="icon-close"></a>Понравилось это предложение?<div class="kmacb-form-rectangle"></div></div> <div class="content"> <div class="padding"> <p>Мы расскажем Вам все об этом товаре, предложим наилучшие условия и ознакомим с подходящими акционными предложениями!</p> <form method="POST" action="/success.php"> <input type="text" name="name" value="" placeholder="Ваше имя" /> <input type="text" name="phone" value="" placeholder="Ваш номер телефона" /> <input type="submit" value="ПЕРЕЗВОНИТЬ МНЕ" /> <input type="hidden" name="s1" class="price_field_s1" value="999" /> </form> <p class="kmacb-form-clock">Оператор перезвонит Вам через 15-30 минут</p> </div> </div> </div> </div>');
			},
			500
		);
	}
	catch (e) {}
});