#online {
 position:fixed;
 right:5px;
 top:40%;
 transform:translateY(-50%);
 font-family:Arial,Helvetica,sans-serif;
 z-index:9999
}
#online * {
 box-sizing:border-box;
 font-size:12px;
 line-height:1.1
}
.online-list {
 padding:0;
 border:1px solid #EEE;
 background-color:#FFF;
 max-width:78px;
 border-radius:4px;
 margin:0;
 position:relative
}
.whatsapp-icon {
 display:inline-block;
 background:url(../images/whatsapp.webp) no-repeat; 
 width:28px;
 height:28px;
 transform:scale(.8);background-position: left center;
background-size: cover;
}

.skype-icon {
 display:inline-block;
 background:url(../images/skype.webp) no-repeat; 
 width:28px;
 height:28px;
 transform:scale(.8);background-position: left center;
background-size: cover;
}

.email-icon {
 display:inline-block;
 background:url(../images/e-mail.webp) no-repeat; 
 width:28px;
 height:28px;
 transform:scale(.8);background-position: left center;
background-size: cover;
}


.wechat-icon {
 display:inline-block;
 background:url(../images/wechat.webp) no-repeat; 
 width:28px;
 height:28px;
 transform:scale(.8);background-position: left center;
background-size: cover;
}

.qq-icon {
 display:inline-block;
 background:url(../images/qq.webp) no-repeat; 
 width:28px;
 height:28px;
 transform:scale(.8);background-position: left center;
background-size: cover;
}

.tra-icon {
 display:inline-block;
 background:url(../images/tra.webp) no-repeat; 
 width:28px;
 height:28px;
 transform:scale(.8);background-position: left center;
background-size: cover;
}
.vk-icon {
 display:inline-block;
 background:url(../images/VKontakte.webp) no-repeat; 
 width:28px;
 height:28px;
 transform:scale(.8);background-position: left center;
background-size: cover;
}


.online-list>li {
 width:100%;
 border-top:1px solid #EEE;
 list-style:none;
 text-align:center;
 padding:10px 0 4px; position:relative;
 transition:all .2s ease-in-out
}
.online-itemcont {
 position:absolute;
 top:0px;
 right:100%;
 background-color:#FFF;
 border:1px solid #EEE;
 border-radius:4px 0px 0px 4px;
 visibility:hidden;
 opacity:0;
 transition:top .2s,opacity .2s;
 overflow-y:auto
}
.online-list>li:hover .online-itemcont {
 top:0;
 opacity:1;
 visibility:visible
}
.online-itemcont a {
 display:flex;
 align-items:center;
 border-bottom:1px solid #EEE;
 color:#555;
 text-decoration:none;
 padding:2px 4px;
 text-align:left;
 width:180px;
 text-transform:capitalize
}
.online-itemcont>div {
 border-bottom:1px solid #EEE;
 padding-bottom:10px
}
.online-itemcont>div:last-of-type {
 border:0
}
.online-itemcont>div a {
 border:0
}
.online-wechat-img img {
 display:block;
 margin:0 auto
}
.online-itemcont p {

 text-overflow:ellipsis;width:100%;float:left;
}



.online-itemcont a:last-child {
 border:0
}
.online-itemcont a i {
 transform:scale(.7);float:left; padding-right:30px;
}
.online-itemcont a span {
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 flex:1
}

.online-list>li .online-itemico p {
margin: 0;
transform: scale(.9);
text-transform: capitalize;
}
.online-list>li .online-itemico {
 color:#555;
 text-decoration:none;
 display:block; cursor:pointer;
 padding:0 2px
}


.online-list>li:hover,
.online-list>li:hover+li {
 border-color:transparent
}
.online-list>li:first-child {
 border-radius:4px 4px 0 0;
 border:0
}
.online-list>li:last-child {
 border-radius:0 0 4px 4px
}
.wechatrt{width:100%;float:left;}
.we-1{width:100%;float:left;}
.wechatrt img{max-width:100%;height:100px;}
@media (max-width:768px) {
 #online {
  display:none
 }
}