@import 'https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic';

.cb-opacity {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#000;
    opacity:0.5;
    display:none;
    z-index:999998;
}

.cb-dialog {
    box-sizing:border-box;
    background:url(/callback/img/bg-white.jpg) no-repeat;
    height:362px;
    width:848px;
    position:fixed;
    top:50%;
    left:50%;
    margin-left:-407px;
    margin-top:-201px;
    z-index:999999;
    padding:40px 40px 0 340px;
    color:#000;
    font-family:'Roboto', sans-serif;
    display:none;
    line-height:1.5;
    border:5px #d2d2d2 solid;
    overflow:hidden;

    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
}

.cb-bezbaby-dialog {
    /*
    тут можно вставить другую фоновую картинку, например
    но лучше оставить все как есть
    */
}

.cb-dialog-hdr {
    font-size:28px;
    line-height:1.3;
    margin-bottom:25px;
}

.cb-form-control {
    box-sizing:border-box;
    width:200px;
    height:35px;
    font-family:'Roboto', sans-serif;
    padding:0 15px;
    border:1px #d2d2d2 solid;
    font-size:16px;
    outline:none;
    margin-right:10px;
    margin-bottom:3px;
    line-height:35px;
}

.cb-red-button {
    box-sizing:border-box;
    text-align:center;
    background:#f00;
    border:1px #f00 solid;
    width:153px;
    height:35px;
    line-height:35px;
    font-size:16px;
    color:#fff;
    cursor:pointer;
    outline:none;
    margin-bottom:3px;
}
.cb-red-button:hover {
    background:#900;
    border:1px #900 solid;
}
.cb-red-button:disabled {
    background:#aaa;
}
.cb-red-button:disabled:hover {
    background:#aaa;
}

.cb-grey-button {
    box-sizing:border-box;
    text-align:center;
    background:#aaa;
    border:1px #aaa solid;
    width:153px;
    height:35px;
    line-height:35px;
    font-size:16px;
    color:#fff;
    cursor:pointer;
    outline:none;
    margin-bottom:3px;
}
.cb-grey-button:hover {
    background:#777;
    border:1px #777 solid;
}

.cb-closer {
    font-size:40px;
    line-height:40px;
    color:#aaa;
    position:absolute;
    top:5px;
    right:15px;
    cursor:pointer;
}
.cb-closer:hover {
    color:#777;
}

.cb-dialog .form-content p:first-of-type {
    margin-top:10px;
}

.cb-dialog .form-content {
    display:block;
}

.cb-dialog.sent .form-content {
    display:none;
}

.cb-dialog.fail .form-content {
    display:none;
}

.cb-dialog.sending .form-content {
    display:none;
}

.cb-dialog .sent-ok {
    display:none;
}

.cb-dialog.sent .sent-ok {
    display:block;
}

.cb-dialog.fail .sent-ok {
    display:none;
}

.cb-dialog.sending .sent-ok {
    display:none;
}

.cb-dialog .fail {
    display:none;
}

.cb-dialog.sent .fail {
    display:none;
}

.cb-dialog.fail .fail {
    display:block;
}

.cb-dialog.sending .fail {
    display:none;
}

.cb-dialog .sending {
    display:none;
}

.cb-dialog.sent .sending {
    display:none;
}

.cb-dialog.fail .sending {
    display:none;
}

.cb-dialog.sending .sending {
    display:block;
}

.callback-ip {
    position:fixed;
    bottom:50px;
    right:50px;
}

.cbh-phone {
    position:fixed;
    visibility:hidden;
    background-color:transparent;
    width:200px;
    height:200px;
    cursor:pointer;
    z-index:999997;
    -webkit-backface-visibility:hidden;
    -webkit-transform:translateZ(0);
    -webkit-transition:visibility .5s;
    -moz-transition:visibility .5s;
    -o-transition:visibility .5s;
    transition:visibility .5s
}

.cbh-phone.cbh-show {
    visibility:visible
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity:0;
        -webkit-transform:translate3d(100%, 0, 0);
        transform:translate3d(100%, 0, 0)
    }

    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none
    }

}

@keyframes fadeInRight {
    0% {
        opacity:0;
        -webkit-transform:translate3d(100%, 0, 0);
        -ms-transform:translate3d(100%, 0, 0);
        transform:translate3d(100%, 0, 0)
    }

    100% {
        opacity:1;
        -webkit-transform:none;
        -ms-transform:none;
        transform:none
    }

}

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity:0;
        -webkit-transform:translate3d(2000px, 0, 0);
        transform:translate3d(2000px, 0, 0)
    }

    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none
    }

}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity:1
    }

    100% {
        opacity:0;
        -webkit-transform:translate3d(100%, 0, 0);
        transform:translate3d(100%, 0, 0)
    }

}

@keyframes fadeOutRight {
    0% {
        opacity:1
    }

    100% {
        opacity:0;
        -webkit-transform:translate3d(100%, 0, 0);
        -ms-transform:translate3d(100%, 0, 0);
        transform:translate3d(100%, 0, 0)
    }

}

.fadeOutRight {
    -webkit-animation-name:fadeOutRight;
    animation-name:fadeOutRight
}

.cbh-phone.cbh-static {
    opacity:.6
}

.cbh-phone:hover {
    opacity:1
}

.cbh-ph-circle {
    width:160px;
    height:160px;
    top:20px;
    left:20px;
    position:absolute;
    background-color:transparent;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    border:2px solid rgba(30, 30, 30, .4);
    opacity:.1;
    -webkit-animation:cbh-circle-anim 1.2s infinite ease-in-out;
    -moz-animation:cbh-circle-anim 1.2s infinite ease-in-out;
    -ms-animation:cbh-circle-anim 1.2s infinite ease-in-out;
    -o-animation:cbh-circle-anim 1.2s infinite ease-in-out;
    animation:cbh-circle-anim 1.2s infinite ease-in-out;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s
}

.cbh-phone.cbh-active .cbh-ph-circle {
    -webkit-animation:cbh-circle-anim 1.1s infinite ease-in-out !important;
    -moz-animation:cbh-circle-anim 1.1s infinite ease-in-out !important;
    -ms-animation:cbh-circle-anim 1.1s infinite ease-in-out !important;
    -o-animation:cbh-circle-anim 1.1s infinite ease-in-out !important;
    animation:cbh-circle-anim 1.1s infinite ease-in-out !important
}

.cbh-phone.cbh-static .cbh-ph-circle {
    -webkit-animation:cbh-circle-anim 2.2s infinite ease-in-out !important;
    -moz-animation:cbh-circle-anim 2.2s infinite ease-in-out !important;
    -ms-animation:cbh-circle-anim 2.2s infinite ease-in-out !important;
    -o-animation:cbh-circle-anim 2.2s infinite ease-in-out !important;
    animation:cbh-circle-anim 2.2s infinite ease-in-out !important
}

.cbh-phone:hover .cbh-ph-circle {
    border-color:rgba(0, 175, 242, 1);
    opacity:.5
}

.cbh-phone.cbh-green:hover .cbh-ph-circle {
    border-color:rgba(117, 235, 80, 1);
    opacity:.5
}

.cbh-phone.cbh-green .cbh-ph-circle {
    border-color:rgb(193, 119, 129);
    opacity:.5
}

.cbh-phone.cbh-gray:hover .cbh-ph-circle {
    border-color:rgba(204, 204, 204, 1);
    opacity:.5
}

.cbh-phone.cbh-gray .cbh-ph-circle {
    border-color:rgba(117, 235, 80, 1);
    opacity:.5
}

.cbh-ph-circle-fill {
    width:100px;
    height:100px;
    top:50px;
    left:50px;
    position:absolute;
    background-color:#000;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    border:2px solid transparent;
    opacity:.1;
    -webkit-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out;
    -moz-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out;
    -ms-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out;
    -o-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out;
    animation:cbh-circle-fill-anim 2.3s infinite ease-in-out;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s
}

.cbh-phone.cbh-active .cbh-ph-circle-fill {
    -webkit-animation:cbh-circle-fill-anim 1.7s infinite ease-in-out !important;
    -moz-animation:cbh-circle-fill-anim 1.7s infinite ease-in-out !important;
    -ms-animation:cbh-circle-fill-anim 1.7s infinite ease-in-out !important;
    -o-animation:cbh-circle-fill-anim 1.7s infinite ease-in-out !important;
    animation:cbh-circle-fill-anim 1.7s infinite ease-in-out !important
}

.cbh-phone.cbh-static .cbh-ph-circle-fill {
    -webkit-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out !important;
    -moz-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out !important;
    -ms-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out !important;
    -o-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out !important;
    animation:cbh-circle-fill-anim 2.3s infinite ease-in-out !important;
    opacity:0 !important
}

.cbh-phone:hover .cbh-ph-circle-fill {
    background-color:rgba(0, 175, 242, .5);
    opacity:.75 !important
}

.cbh-phone.cbh-green:hover .cbh-ph-circle-fill {
    background-color:rgba(117, 235, 80, .5);
    opacity:.75 !important
}

.cbh-phone.cbh-green .cbh-ph-circle-fill {
    background-color:#a7a7a7;
    opacity:.75 !important
}

.cbh-phone.cbh-gray:hover .cbh-ph-circle-fill {
    background-color:rgba(204, 204, 204, .5);
    opacity:.75 !important
}

.cbh-phone.cbh-gray .cbh-ph-circle-fill {
    background-color:rgba(117, 235, 80, .5);
    opacity:.75 !important
}

.cbh-ph-img-circle {
    width:60px;
    height:60px;
    top:70px;
    left:70px;
    position:absolute;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==);
    background-color:rgba(30, 30, 30, .1);
    background-position:center center;
    background-repeat:no-repeat;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    border:2px solid transparent;
    opacity:.7;
    -webkit-animation:cbh-circle-img-anim 1s infinite ease-in-out;
    -moz-animation:cbh-circle-img-anim 1s infinite ease-in-out;
    -ms-animation:cbh-circle-img-anim 1s infinite ease-in-out;
    -o-animation:cbh-circle-img-anim 1s infinite ease-in-out;
    animation:cbh-circle-img-anim 1s infinite ease-in-out
}

.cbh-phone.cbh-active .cbh-ph-img-circle {
    -webkit-animation:cbh-circle-img-anim 1s infinite ease-in-out !important;
    -moz-animation:cbh-circle-img-anim 1s infinite ease-in-out !important;
    -ms-animation:cbh-circle-img-anim 1s infinite ease-in-out !important;
    -o-animation:cbh-circle-img-anim 1s infinite ease-in-out !important;
    animation:cbh-circle-img-anim 1s infinite ease-in-out !important
}

.cbh-phone.cbh-static .cbh-ph-img-circle {
    -webkit-animation:cbh-circle-img-anim 0s infinite ease-in-out !important;
    -moz-animation:cbh-circle-img-anim 0s infinite ease-in-out !important;
    -ms-animation:cbh-circle-img-anim 0s infinite ease-in-out !important;
    -o-animation:cbh-circle-img-anim 0s infinite ease-in-out !important;
    animation:cbh-circle-img-anim 0s infinite ease-in-out !important
}

.cbh-phone:hover .cbh-ph-img-circle {
    background-color:rgba(0, 175, 242, 1)
}

.cbh-phone.cbh-green:hover .cbh-ph-img-circle {
    background-color:rgba(117, 235, 80, 1)
}

.cbh-phone.cbh-green .cbh-ph-img-circle {
    background-color:rgb(208, 0, 0);
}

.cbh-phone.cbh-gray:hover .cbh-ph-img-circle {
    background-color:rgba(204, 204, 204, 1)
}

.cbh-phone.cbh-gray .cbh-ph-img-circle {
    background-color:rgba(117, 235, 80, 1)
}

@-moz-keyframes cbh-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 cbh-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 cbh-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 cbh-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 cbh-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 cbh-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 cbh-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 cbh-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 cbh-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)
    }

    100%, 50% {
        transform:rotate(0deg) scale(1) skew(1deg)
    }

}

@-moz-keyframes cbh-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)
    }

    100%, 50% {
        -moz-transform:rotate(0deg) scale(1) skew(1deg)
    }

}

@-webkit-keyframes cbh-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)
    }

    100%, 50% {
        -webkit-transform:rotate(0deg) scale(1) skew(1deg)
    }

}

@-o-keyframes cbh-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)
    }

    100%, 50% {
        -o-transform:rotate(0deg) scale(1) skew(1deg)
    }

}



@media (max-width:767px) {

    .cb-dialog {
        box-sizing:border-box;
        background:#fff;
        height:90%;
        width:90%;
        position:fixed;
        top:5%;
        left:5%;
        margin:0 !important;
        z-index:999999;
        padding:20px;
        color:#000;
        font-family:'Roboto', sans-serif;
        display:none;
        line-height:1.5;
        border:5px #d2d2d2 solid;
        overflow:hidden;

        -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
        box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
    }


    .callback-ip {
        position:fixed;
        bottom:30px;
        left:15px;
    }

    .cbh-phone {
        width:50px;
        height:50px;
    }

    .cbh-ph-circle {
        width:80px;
        height:80px;
        top:10px;
        left:10px;
    }

    .cbh-ph-circle-fill {
        width:50px;
        height:50px;
        top:25px;
        left:25px;
    }

    .cbh-ph-img-circle {
        width:30px;
        height:30px;
        top:35px;
        left:35px;
    }


}