
.menu-item{ overflow:hidden;  border-radius: 100%;width: 68px; height: 68px; margin-top:1px;  margin-left: -34px; position: absolute; color: white; text-align: center; line-height: 70px;-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);-webkit-transition: -webkit-transform ease-out 200ms;transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms;transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;}
.menu-item:before{content:''; position:absolute; border-color:#3e9dd7;}
.menu-item span{width:100%; text-align:center; color:#fff; position:absolute; bottom:7px; left:0; font-size:8px; line-height:normal; letter-spacing:1px;}
.menu-open-button { background:#006fb4 url(../images/phonepro/chat-smartphones.svg) no-repeat center; background-size: 34px auto;  border-radius: 100%;width: 70px; height: 70px;  margin-left: -35px; position: absolute; color: white; text-align: center; line-height: 70px; transition:.2s; cursor:pointer; }
.menu-item.viber-item{background:#3e9dd7 url(../images/phonepro/viber.png) no-repeat center; background-size:100% auto; }
.menu-item.viber-item:before{border-right:7px solid #3e9dd7; border-top:7px solid transparent; border-bottom:7px solid transparent; left:-6px; top:50%; margin-top:-7px;}
.menu-item.skype-item{background:url(../images/phonepro/skype.png) no-repeat center; background-size:100% auto; }
.menu-item.skype-item:before{border-top:7px solid #3e9dd7; border-left:7px solid transparent; border-right:7px solid transparent; bottom:-6px; left:50%; margin-left:-7px;}
.menu-item.zalo-item{background:url(../images/phonepro/zalo.png) no-repeat center; background-size:100% auto; }
.menu-item.zalo-item:before{border-left:7px solid #3e9dd7; border-top:7px solid transparent; border-bottom:7px solid transparent; right:-6px; top:50%; margin-top:-7px;}
.menu-open {display: none;}
.wrap-menu-support{width:100%; position:relative; float:left; }
.menu-support { transition:.3s; bottom:-200px; opacity:0; visibility:hidden; z-index:100; position: absolute; right: 8%;margin-left: -190px; padding-top: 20px; padding-left: 190px; width: 380px; height: 250px; box-sizing: border-box; font-size: 20px; text-align: left;}
.menu-item:hover {color: #e91e63;}
.menu-support.show{position:fixed; top:initial;  bottom:-145px; opacity:1; visibility:initial; }
.menu-item:nth-child(3) {-webkit-transition-duration: 180ms; transition-duration: 180ms;}
.menu-item:nth-child(4) {-webkit-transition-duration: 180ms; transition-duration: 180ms;}
.menu-item:nth-child(5) { -webkit-transition-duration: 180ms;  transition-duration: 180ms;}
.menu-open-button { z-index: 5; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transition-duration: 400ms; transition-duration: 400ms;  cursor: pointer;}
.menu-open-button:hover { -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0); transform: scale(1.2, 1.2) translate3d(0, 0, 0);}
.menu-open:checked + .menu-open-button {width:50px; height:50px; margin:10px 0 0 -25px; background:#006fb4 url(../images/phonepro/close.svg) no-repeat center; background-size: 17px auto}
.menu-open:checked ~ .menu-item { opacity:1; z-index:3; overflow:initial;  box-shadow: 0 2px 5px rgba(0,0,0,.2);-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);}
.menu-open:checked ~ .menu-item:nth-child(3) {-webkit-transition-duration: 180ms;transition-duration: 180ms;-webkit-transform: translate3d(-85px, 2px, 0);transform: translate3d(-85px, 2px, 0);}
.menu-open:checked ~ .menu-item:nth-child(4) {-webkit-transition-duration: 280ms;transition-duration: 280ms;-webkit-transform: translate3d(0.08361px, -82px, 0);transform: translate3d(0.08361px, -82px, 0);}
.menu-open:checked ~ .menu-item:nth-child(5) {-webkit-transition-duration: 380ms;transition-duration: 380ms;-webkit-transform: translate3d(85px, 2px, 0);transform: translate3d(85px, 2px, 0);}
.panel-is-open .menu-item,.panel-is-open .menu-open-button{opacity:0; visibility:hidden;}
.close-panel-support{ background:#006fb4 url(close.svg) no-repeat center; background-size: 17px auto; width:50px; height:50px; border-radius:50%; position:absolute; top:30px; left:50%; margin-left:-25px; z-index:5; display:block; transition:.3s; opacity:0; visibility:hidden;}
.close-panel-support:hover{-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);transform: scale(1.2, 1.2) translate3d(0, 0, 0);}
.panel-is-open .close-panel-support{opacity:1; visibility:initial;}
.panel-support{width: 48px; height:48px; padding:15px; margin-left:-24px; position:absolute; top:31px; left:50%; background:#3e9cd6; z-index:2; border-radius:50%; transition:.3s; line-height:normal; overflow:hidden;}
.panel-support .wrap-img{width:100%; float:left; margin:10px 0; border:5px solid #fff;}
.panel-support .wrap-img img.qr{width:100%; float:left;}
.panel-support .wrap-img .slider-note{width:270px; height:493px; position:absolute; right:-270px; bottom:-90px; padding:2px 5px; visibility:hidden; opacity:0; transition:.3s; }
.panel-support .wrap-img .slider-note.zalo{left:-270px;}
.panel-support .wrap-img:hover .slider-note{right:-300px; visibility:initial; opacity:1;}
.panel-support .wrap-img:hover .slider-note.zalo{left:-300px;}
.panel-support .wrap-img .slider-note:after{content:''; width:100%; height:100%; border-radius:40px; z-index:1; box-shadow: 10px 10px 40px rgba(0,0,0,.2); display:block; }
.panel-support .wrap-img .slider-note:before{content:''; width:100%; height:100%; background:url(flat-wireframes-mobile.png) no-repeat 0 0; background-size:100% auto; position:absolute; top:0; left:0; z-index:2;}
.panel-support .wrap-img .slider-note img{width:240px; height:auto; position:absolute; top:50px; left:15px; z-index:5; border:1px solid rgba(0,0,0,.07) }
.panel-support span{color:#fff; font-size:12px; text-align:center; line-height:normal; display:block;}
.panel-support span b{font-size:15px; letter-spacing:1px; display:block;}
.panel-support.show{width: 180px; height:270px; margin-left:-90px; top:-265px; left:50%; border-radius:8px;  box-shadow: 0 1px 15px rgba(0,0,0,.25); overflow:initial; }
.panel-support.show:before{content:''; border-top:10px solid #3e9cd6; border-left:10px solid transparent; border-right:10px solid transparent; position:absolute; bottom:-10px; left:50%; margin-left:-10px;}
.circle-shadow {background:none; width: 70px; height: 70px; border-radius: 50%; animation: ripple 0.7s linear infinite; z-index:1; position:absolute; top:20px; left:50%; margin-left:-35px; transition:.2s; }
.circle-shadow.selected,.panel-is-open .circle-shadow{width:50px; height:50px; margin:10px 0 0 -25px;}
@keyframes ripple {0% {box-shadow: 0 0 0 0 rgba(0, 111, 180, 0.1),0 0 0 1em rgba(0, 111, 180, 0.1),0 0 0 3em rgba(0, 111, 180, 0.1),0 0 0 5em rgba(0, 111, 180, 0.1);}100% {box-shadow: 0 0 0 1em rgba(0, 111, 180, 0.1),0 0 0 3em rgba(0, 111, 180, 0.1),0 0 0 5em rgba(0, 111, 180, 0.1),0 0 0 8em rgba(0, 111, 180, 0);}}
@media (max-width:767px) {
    .panel-support .wrap-img .slider-note{display:none!important;}
}

.menu-support input[type="checkbox"], input[type="radio"] {
    border: none;
    display: none;
}









