/************************************************************************************/
/* Callback 
/************************************************************************************/
.callback {background: #f27bae; border-radius: 50% !important; bottom: 100px; cursor: move; height: 50px; position: fixed; right: 40px; width: 50px; z-index: 100; cursor:pointer;}
.callback .callback_link::before {background: rgba(0, 0, 0, 0) url(../phone.png) no-repeat scroll center center / 35px auto; content: ""; height: 50px; left: 0; position: absolute; top: 0; width: 50px; z-index: 11;}
.callback:hover {animation: 1.5s linear 0s normal none infinite running callback_anim;}
.callback:hover .callback_b, .callback:hover .callback_a {background-color: #f27bae; border-color: #f27bae;}
.callback .callback_block {height: 50px; position: absolute; width: 50px;}
.callback .callback_a {-webkit-animation: callback 3s linear 0s infinite; -moz-animation: callback 3s linear 0s infinite; animation: callback 3s linear 0s infinite; background-color: transparent; border: 2px solid #f27bae; border-radius: 100% !important; bottom: -25px; box-sizing: border-box; height: 100px; opacity: 0.01; position: absolute; right: -25px; width: 100px;}
.callback .callback_b {-webkit-animation: callback 1.5s linear 0s infinite; -moz-animation: callback 1.5s linear 0s infinite; animation: callback 1.5s linear 0s infinite; background-color: transparent; border: 2px solid #f27bae; border-radius: 100% !important; bottom: -25px; box-sizing: border-box; height: 100px; opacity: 0.01; position: absolute; right: -25px; width: 100px;}
@keyframes callback {
0% {opacity: 0.8; transform: rotate(0deg) scale(0.46) skew(1deg);}
10% {transform: rotate(0deg) scale(0.56) skew(1deg);}
100% {opacity: 0.01; transform: rotate(0deg) scale(1) skew(1deg);}
}
@-webkit-keyframes callback {
0% {opacity: 0.8; transform: rotate(0deg) scale(0.46) skew(1deg);}
10% {transform: rotate(0deg) scale(0.56) skew(1deg);}
100% {opacity: 0.01; transform: rotate(0deg) scale(1) skew(1deg);}
}
@-moz-keyframes callback {
0% {opacity: 0.8; transform: rotate(0deg) scale(0.46) skew(1deg);}
10% {transform: rotate(0deg) scale(0.56) skew(1deg);}
100% {opacity: 0.01; transform: rotate(0deg) scale(1) skew(1deg);}
}
@keyframes callback_anim {
0% {transform: scale3d(1, 1, 1);}
10%, 20% {transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);}
30%, 50%, 70%, 90% {transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);}
40%, 60%, 80% {transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);}
100% {transform: scale3d(1, 1, 1);}
}
@keyframes callback_anim {
0% {transform: scale3d(1, 1, 1);}
10%, 20% {transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);}
30%, 50%, 70%, 90% {transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);}
40%, 60%, 80% {transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);}
100% {transform: scale3d(1, 1, 1);}
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    /*padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    /*margin: auto;*/
    padding: 0;
    border: 10px solid #f27bae;
    /*width: 30%;*/
    max-width: 500px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    margin: 50px auto;
	border-radius: 20px;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: #f27bae;
    float: right;
    font-size: 28px;
    font-weight: bold;
	margin: 10px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}