/* POPUP CALLBACK */
.popup__callback *{
	box-sizing: border-box;
	font-family: "Roboto";
}

.popup__callback {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.popup__callback-top-img{
    height: 136px;
    width: 120px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    background-image: url(/img/img_support.svg);
    margin: 0 auto;
    background-size: 120px 136px;
    background-position: 50%;
    background-repeat: no-repeat;
    top: -68px;
}

.popup__callback.second-step .popup__callback-top-img{
	display: none;
}

.popup__callback__modal {
	position: relative;
	width:530px;
	border-radius:0;
	margin-left:-250px;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 50px;
  height: auto;
}

.popup__callback.second-step .popup__callback__modal {
	width: 342px;
	padding: 50px;
}

.popup__callback__modal-header {
	border-bottom:unset;
	padding:0px;
  height: 68px;
}

.popup__callback.second-step .popup__callback__modal-header{
	height:0px;
}

.popup__callback.second-step .popup__callback__modal-body{
	display: none!important;
}

.popup__callback__modal-body-main-text {
	text-align:center;
	font-size:24px;
	text-transform:none;
	color:#005aae;
	line-height:32px;
	font-weight:700;
	margin-top: 10px;
}

.popup__callback__modal-body-secondary-text {
	font-size:20px;
	line-height:30px;
	font-weight:300;
	color:#000000;
	text-align:center;
	margin-top: 10px;
}

.popup__callback__form{
	margin-top: 30px;
}

.popup__callback__modal-body-third-text{
    font-weight: 600;
    font-size: 24px;
    text-align: center;
}

.popup__callback__modal-body {
	padding:0;
	margin:auto;
	width:100%;
}

.popup__callback__form-row-group {
	border:none;
	border-radius:0;
	padding:0;
	max-width:300px;
}

.popup__callback__form-row-group{
	max-width:none;
}

.popup__callback__form-row-group .popup__callback__select select{
	width: 100%;
	background:#fff;
	height:36px;
	color:#898989;
	border:1px solid #909090;
	font-size: 14px;
	outline: none;
	padding-left: 10px;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance: none;
	background:url("/img/arrow_down.png") no-repeat calc(100% - 10px) center;
  padding-right: 23px;
}

.popup__callback__form-row-group .popup__callback__select select:focus{
	border-color: #005aae;
}

.popup__callback__form-row:nth-child(3) {
	margin-top:33px;
	margin-bottom:31px;
}

.popup__callback__form-row {
	padding-top:0;
	margin-bottom:20px;
}

.popup__callback-text-field {
	padding: 10px;
	font-size:14px;
	height:36px;
	color:#898989;
	border: 1px solid #909090;
	width: 100%;
}

.popup__callback-select-field{
    font-size: 12px;
    border: solid 1px #ebebeb;
    color: #525252;
    line-height: 30px;
    height: 30px;
}

.popup__callback-text-field_error{
  border-color: #e95849;
}

.js-phone-help-block, .js-name-help-block{
	color: #e95849;
	display: none;
	line-height: 1.3;
  position: absolute;
	width: 206px;
	font-size: 12px;
}

.popup__callback__modal{
	background-color: #fff;
}

.popup__callback__form-half-group{
	float: left;
	width: 50%;
}

.popup__callback__form-half-group_left{
	padding-right: 10px;
}

.popup__callback__form-half-group_right{
	padding-left: 10px;
}

.popup__callback__modal-close-button::before{
	content:"";
	background:url(/img/icons/ico_x.png);
	width:20px;
	height:20px;
	position:absolute;
	right: -40px;
	top: 0;
}

.popup__callback__modal-close-button{
	cursor: pointer;
}

.popup__callback .fa-times::before{
    right: -50px;
    top: -50px;
}

.popup__callback__form-row.buttons{
	height:112px;
}

.popup__callback__form-row-submit-button,
.popup__callback__form-row-cancel-button {
	width:206px;
	box-sizing: border-box;
	font-size: 20px;
}

.popup__callback__form-row-submit-button {
	float: right;
}

.popup__callback__modal-body-success-text .popup__callback__form-row-submit-button{
	float: none;
	display: block;
	margin: 0 auto;
	margin-top: 30px;
}

.popup__callback__form-row-cancel-button {
	float: left;
	color:#005aae;
	border:2px solid #005aae;
	background-color: #fff;
	box-shadow: none;
	box-sizing: border-box;
}

.popup__callback__form-row-cancel-button:hover{
	color:#fff;
	background-color: #005aae;
}

.popup__callback__modal-body-success-text {
	text-align:center;
	font-size:24px;
	text-transform:none;
	color:#005aae;
  font-weight: 700;
}

.popup__callback.second-step .popup__callback__modal-body-success-text {
	display: block!important;
}

.popup__callback__form-row-icon__user {
	font-size:28px;
	color:#777;
	height:28px;
	position:absolute;
	top:15px;
	right:20px;
	background:url(/img/icons/ico_name.svg) no-repeat;
	width:22px;
}

.popup__callback__form-row-icon__mail {
	font-size:28px;
	color:#777;
	height:28px;
	position:absolute;
	top:18px;
	right:20px;
	background:url(/img/icons/ico_mail.svg) no-repeat;
	width:22px;
}


@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -20px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

.animation-presents {
    background: url(/img/popup/ic_presents.png) no-repeat center;
    width: 224px;
    height: 110px;
    margin: auto;
}
.animation-present {
    background: url(/img/popup/ic_present_main.png) no-repeat center;
    width: 224px;
    height: 110px;
    margin: auto;
    position: relative;
    top: -110px;
     animation: bounce 1.7s infinite;
    animation-delay: 1.7s;
}

.label__input,
.popup__callback-label-field {
  font-size: 16px;
	font-weight: 400;
	margin-bottom: 10px;
	color: #000000;
	line-height: 1;
}

.error__name {
    font-size: 12px;
    line-height: 12px;
    margin-bottom: 5px;
}

.sidebar-calc .main-calc__row_type_bottom p {
    margin: auto;
}

.js-bottom-blocks{
	background-color: #1f5f91;
}

.clearfix:after{
	content: "";
    display: table;
    clear: both;
}

.callback-icon{
    height: 72px;
    width: 72px;
    display: block;
    background: url(/img/Ellipse_1_copy_2.png) no-repeat;
		background-position: center;
		background-size: contain;
    position: fixed;
    z-index: 1;
    left: 30px;
    bottom: 50px;
    border-bottom: 0;
}

.callback-icon img{
    width: 30px;
    display: block;
    z-index: 2;
    margin: 21px auto 0;
}

.callback-icon:hover img{
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.ripple-1{
	width: 60px;
    height: 60px;
    margin: -45px auto 0;
	color: #e2e2e2;
    -webkit-border-radius: 32px;
    border-radius: 32px;
    height: 60px;
    width: 60px;
    background-size: contain;


    animation: pulse-shadow-collection 1.7s linear;
    animation-delay: .1s;
    animation-iteration-count: infinite;

    -webkit-animation: pulse-shadow-collection 1.7s linear;
    -webkit-animation-delay: .1s;
    -webkit-animation-iteration-count: infinite;

    -moz-animation: unset;
}

.ripple-2{
	width: 60px;
    height: 60px;
    margin: -60px auto 0;
    color: #e2e2e2;
    -webkit-border-radius: 32px;
    border-radius: 32px;
    height: 60px;
    width: 60px;
    background-size: contain;


    animation: pulse-shadow-collection 1.7s linear .7s forwards;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;

    -webkit-animation: pulse-shadow-collection 1.7s linear .7s forwards;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;

    -moz-animation: unset;
}



.callback-icon .phone {

    display: block;

    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    top: 50%;
}

.popup-callback-from-wrap_active + .callback-icon:hover img{
    animation-iteration-count: 2;
}



@-webkit-keyframes pulse-shadow-collection {
    0% {
        -webkit-box-shadow: 0 0;
        box-shadow: 0 0;

        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    60% {
        -webkit-box-shadow: 0 0 5px 20px  rgba(239, 239, 239, 0.3);
        box-shadow: 0 0 5px 20px  rgba(239, 239, 239, 0.3);

        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
    }

    70%{
    	box-shadow: 0 0 0 0 rgba(239, 239, 239, 0.3);
        -webkit-box-shadow: 0 0 0 0 rgba(239, 239, 239, 0.3);

        opacity: 0;

        transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
    }

    100% {
        -webkit-box-shadow: 0 0;
        box-shadow: 0 0;

        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        transform: scale(1, 1);

    }
}

@keyframes pulse-shadow-collection {
    0% {
        -webkit-box-shadow: 0 0;
        box-shadow: 0 0;

        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    60% {
        -webkit-box-shadow: 0 0 5px 20px  rgba(239, 239, 239, 0.3);
        box-shadow: 0 0 5px 20px  rgba(239, 239, 239, 0.3);

        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
    }

    70%{
    	box-shadow: 0 0 0 0 rgba(239, 239, 239, 0.3);
        -webkit-box-shadow: 0 0 0 0 rgba(239, 239, 239, 0.3);

        opacity: 0;

        transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
    }

    100% {
        -webkit-box-shadow: 0 0;
        box-shadow: 0 0;

        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        transform: scale(1, 1);

    }
}


@-webkit-keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform:rotate(0) 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(0) scale(1) skew(1deg)
    }

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

@keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform:rotate(0) 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(0) scale(1) skew(1deg)
    }

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

.popup-callback-from-wrap {
    z-index: -1;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
}

.popup-callback-from-wrap_active{
    z-index: 323232323232;
    opacity: 1;
    position: fixed;
}


@keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }
    75% {
        transform: translate3d(0, 10px, 0);
    }
    90% {
        transform: translate3d(0, -5px, 0);
    }
    to {
        transform: translateZ(0);
    }
}

.bounceInUp {
    animation-name: bounceInUp;
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both
}

.callback-icon{
	display: none;
}

@media (min-width: 414px) and (max-width: 767px){
    .popup__callback__modal,
    .popup__callback.second-step .popup__callback__modal{
        width:calc(70% - 20px);
        margin: 0 auto;
        padding: 20px;
    }
}

@media (max-width: 450px){
    .popup__callback__modal,
    .popup__callback.second-step .popup__callback__modal{
        width:calc(100% - 20px);
        margin: 0 auto;
        padding: 20px;
    }
}
@media (max-width: 767px){
	.callback-icon{
		left:15px;
		bottom: 15px;
	}



	.popup__callback__modal-header{
	 height:0;
	}

	.popup__callback-top-img{
	 display: none;
	}

	.popup__callback__modal-close-button::before{
		background:url(/img/icons/ico_x.svg) no-repeat center;
		background-size: contain;
		width:10px;
		height:10px;
		position:absolute;
		right: 10px;
		top: 10px;
	}

	.popup__callback__modal-body-main-text{
		line-height: 26px;
	}

	.popup__callback__form-row{
		margin-bottom: 15px;
	}

	.popup__callback__form-half-group{
		float: none;
		width: 100%;
	}

	.popup__callback__form-half-group_left,
	.popup__callback__form-half-group_right{
		padding: 0;
	}

	.popup__callback__form-half-group_right{
		margin-top: 15px;
	}

	.intl-tel-input{
		width: 100%;
	}

	.js-phone-help-block, .js-name-help-block{
		position: relative;
		width: 100%;
	}

	.popup__callback__form-row-submit-button,
	.popup__callback__form-row-cancel-button {
		float: none;
		width: 100%;
		max-width: 260px;
		margin: 0 auto;
		display: block;
	}

	.popup__callback__form-row-submit-button{
		margin-bottom: 20px;
	}
}

@media (max-height: 540px) {
	.popup__callback__modal{
		height: 100vh;
		overflow-y: scroll;
	}
}

.body_n-scroll{
	overflow: hidden;
}