@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}body{background:url(../images/clouds.jpg) no-repeat center center fixed;background-size:cover}.example-chat{font-family:"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;box-shadow:0 10px 100px rgba(0,0,0,.4);background-color:rgba(255,255,255,.7);font-size:18px;line-height:22px;color:#666;overflow:visible;position:fixed;top:60%;left:50%;z-index:100;padding:0;margin-left:-200px;margin-top:-250px;width:400px;height:500px;-webkit-animation:fadeInUp 1s;animation:fadeInUp 1s}.example-chat .example-chat-logo{opacity:.9;width:140px;height:140px;position:absolute;top:-160px;left:50%;z-index:2;margin-left:-70px}.example-chat .example-chat-toolbar{padding:10px;color:rgba(255,255,255,.8);background:rgba(41,128,185,.9)}.example-chat .example-chat-toolbar>h2{margin:0;padding:0;text-align:center;font-weight:400;text-transform:uppercase;font-size:12px;line-height:20px;letter-spacing:1px}.example-chat input{background:0 0;border:none;box-sizing:border-box;padding:0 10px;height:30px;font-size:18px;width:100%;font-weight:400;outline:0}.example-chat input::-webkit-input-placeholder{color:rgba(255,255,255,.5);font-weight:lighter}.example-chat input::-moz-placeholder{color:rgba(255,255,255,.5);font-weight:lighter}.example-chat input:-ms-input-placeholder{color:rgba(255,255,255,.5);font-weight:lighter}.example-chat input::placeholder{color:rgba(255,255,255,.5);font-weight:lighter}.example-chat .example-chat-username-field{background:rgba(52,152,219,.7);padding:10px;position:relative}.example-chat .example-chat-username-field .example-chat-avatar{position:absolute;top:10px;left:10px;z-index:1;width:40px;height:40px;border-radius:200px;background:#3498db;text-align:center;line-height:40px;font-size:20px;color:#217dbb}.example-chat .example-chat-username-field label{text-transform:uppercase;line-height:32px;font-size:14px;color:#FFF;position:absolute;top:10px;left:20px;z-index:1}.example-chat .example-chat-username-field input{padding-left:50px;color:#FFF;height:40px;font-size:20px}.example-chat ul{list-style:none;margin:0;padding:20px;overflow:auto;position:absolute;top:100px;left:0;right:0;bottom:80px;z-index:1}.example-chat ul li{margin-bottom:10px;line-height:24px;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.example-chat ul li:last-child{margin:0}.example-chat ul .example-chat-username{margin-right:10px}.example-chat footer{background-color:rgba(255,255,255,.7);position:absolute;bottom:0;left:0;right:0;z-index:1;display:block;padding:10px}.example-chat footer .icon-chat{color:rgba(52,73,94,.2);position:absolute;top:15px;left:10px;z-index:1;font-size:30px}.example-chat footer input{background:0 0;border:none;height:40px;color:#34495e;padding-left:40px}.example-chat footer input::-webkit-input-placeholder{color:rgba(52,73,94,.4)}.example-chat footer input::-moz-placeholder{color:rgba(52,73,94,.4)}.example-chat footer input:-ms-input-placeholder{color:rgba(52,73,94,.4)}.example-chat footer input::placeholder{color:rgba(52,73,94,.4)}