@keyframes shake_phone {
0%{-webkit-transform:rotate(0deg) scale(1);-moz-transform:rotate(0deg) scale(1);-o-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}
25%{-webkit-transform:rotate(5deg) scale(1.2);-moz-transform:rotate(5deg) scale(1.2);-o-transform:rotate(5deg) scale(1.2);transform:rotate(5deg) scale(1.2)}
50%{-webkit-transform:rotate(-10deg) scale(1);-moz-transform:rotate(-10deg) scale(1);-o-transform:rotate(-10deg) scale(1);transform:rotate(-10deg) scale(1)}
75%{-webkit-transform:rotate(8deg) scale(1.2);-moz-transform:rotate(8deg) scale(1.2);-o-transform:rotate(8deg) scale(1.2);transform:rotate(8deg) scale(1.2)}
100%{-webkit-transform:rotate(0deg) scale(1);-moz-transform:rotate(0deg) scale(1);-o-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}
}
.phone__box[state="open"]{width:350px;height:130px;background:#fff;background-size:50px;border-radius:4px;padding:10px;padding-left:60px;border:2px solid #3369e8}
.phone__box{position:fixed;right:8px;bottom:10px;width:70px;height:70px;cursor:pointer;z-index:100;border-radius:0 50% 50% 0;-webkit-transition:all 250ms;-moz-transition:all 250ms;-o-transition:all 250ms;transition:all 250ms}
.phone__box__content{position:absolute;width:calc(100% - 100px);right:14px;top:50%;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%);font-size:15px;opacity:0}
.phone__box__content input{margin-top:12px;width:calc(100% - 90px);padding:10px 6px;text-align:center}
.phone__box .phone__box__icon{background:#3369e8;position:absolute;top:50%;left:0;width:70px;height:70px;border-radius:50%;transform:translate(0,-50%);-webkit-transition:all 250ms;-moz-transition:all 250ms;-o-transition:all 250ms;transition:all 250ms;overflow:hidden}
.phone__box .phone__box__icon::after{animation-name:shake_phone;animation-duration:1s;background:url(../../assets/icons/phone_popup/phone.png) center no-repeat #3369e8;background-size:50px;content:"";position:absolute;width:100%;height:100%;top:0;left:0;-webkit-transition:all 250ms;-moz-transition:all 250ms;-o-transition:all 250ms;transition:all 250ms}
.phone__box[state="open"] .phone__box__icon{left:-66px;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);top:-2px;z-index:1;width:130px;height:130px;border-radius:50%}
.phone__box[state="open"] .phone__box__icon::after{opacity:0}
.phone__box__content span{font-size:13px;display:block}
.phone__box__photo{border:1px solid #c3c3c3;position:absolute;left:0;width:100%;height:100%;top:0}
.phone__box--button{display:inline-block;background:#3369e8;color:#fff;padding:16px 5px;position:relative;top:0;width:80px;text-align:center;margin-left:10px}
.phone__box__photo1{background:url(../../assets/team/phone1.jpeg) top center}
.phone__box__photo2{background:url(../../assets/team/phone2.jpeg) top center}
.phone__box__photo3{background:url(../../assets/team/phone3.jpeg) top center}
.phone__box__photo4{background:url(../../assets/team/phone4.jpeg) top center}
.phone__box__photo5{background:url(../../assets/team/phone5.jpeg) top center}
.phone__box__photo6{background:url(../../assets/team/phone6.jpeg) top center}
.phone__box__photo7{background:url(../../assets/team/phone7.jpeg) top center}
.phone__box__photo8{background:url(../../assets/team/phone8.jpeg) top center}
.phone__box__content input::placeholder{font-size:12px}
input.phone__box--input.errorField{border:1px solid #f60000;color:#f10000}
.phone__box--info>span{font-size:13px;position:absolute;top:50%;left:0;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%);line-height:20px}
.phone__box .phone__box--info{position:absolute;display:none;left:0;top:2px;background:#fff;width:100%;height:100%;z-index:1;color:#000;text-align:center}
.phone__box.phone__box-inf .phone__box--info{display:block}
.phone__box--closebox{width:100%;height:70px;position:absolute;right:0;top:-30px;display:none}
.phone__box[state="open"] .phone__box--closebox{display:block;background:url(../../assets/icons/phone_popup/close.svg) right 5px bottom 16px no-repeat;background-size:19px;    position: relative;
    z-index: 10;}
@media only screen and (max-width: 450px) {
.phone__box[state="open"] .phone__box__icon{top:-60px;left:50%;transform:translate(-50%,0);-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0);width:110px;height:110px;box-shadow:0 0 10px}
.phone__box[state="open"]{width:calc(100% - 20px);height:180px}
.phone__box__content{width:calc(100% - 30px);margin-top:24px}
.phone__box[state="open"] .phone__box__content span{max-width:230px;margin:auto;text-align:center;margin-bottom:10px;line-height:18px}
.phone__box[state="open"] .phone__box--info>span{max-width:100%;top:40%}
.phone__box[state="open"] .phone__box--closebox{background:url(../../assets/icons/phone_popup/close.svg) right 5px bottom no-repeat;background-size:32px}
}