@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700&subset=latin-ext");html{font-size:1rem;font-family:IBM Plex Sans,sans-serif}body{background:#fdfdfd;position:relative}.ie_safari{display:none}@media screen\0{.demo__intro__wrapper{max-width:100%;margin-top:100px}.ie_safari{display:block}.chat,.demo__bg,header{display:none!important}}@media screen\9{.demo__intro__wrapper{max-width:100%;margin-top:100px}.ie_safari{display:block}.chat,.demo__bg,header{display:none!important}}h1{font-size:5rem;font-weight:700;min-width:50%;position:relative;margin-bottom:1.5rem;padding-bottom:1.5rem}h1:after,h1:before{content:"";position:absolute;bottom:0;left:0;display:block;width:100%;background:#6b68fc;transition:all 1s cubic-bezier(.25,.46,.45,.94)}h1:after{height:1px;bottom:3px;max-width:0}h1:before{height:7px;max-width:0}h1.fadeInLeft{opacity:1}h1.fadeInLeft:after{max-width:100%}h1.fadeInLeft:before{max-width:50%}p{font-size:1.125rem;line-height:1.525;color:#5670a1;margin-bottom:10px}p svg{display:inline-block;max-width:20px}p a{font-weight:700}p.note{font-size:1rem}h2,h3{font-size:1.425rem;line-height:1.525;color:#5670a1;-ms-flex-direction:column;flex-direction:column}h2,h2 span,h3,h3 span{display:-ms-flexbox;display:flex}h2 span,h3 span{-ms-flex-align:center;align-items:center;margin-bottom:.75rem}h2 span .g-emoji,h3 span .g-emoji{margin-right:10px}h2 span .g-emoji-left,h3 span .g-emoji-left{margin-left:10px}strong{font-weight:700}:active,:focus{outline:none}*,:after,:before{margin:0;padding:0;font:inherit;box-sizing:border-box;border:0}article,figure,footer,header,main,nav,section{display:block}img{max-width:100%}.btn,button{cursor:pointer;background:transparent}a{text-decoration:none;color:inherit}.chat{background:#fff}.header{position:fixed;-ms-flex-pack:center;justify-content:center;width:100%;top:0;left:0;z-index:10;border-bottom:1px solid #ecedf0;background:#fff}.header,.header__items{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.header__items{-ms-flex-pack:end;justify-content:flex-end;width:90%}.header .btn{padding:6px 15px;margin:10px 0 10px 10px!important}.btn{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;position:relative;overflow:hidden;cursor:pointer;padding:5px 10px;border-radius:.25rem;font-size:1rem;color:#5670a1}.btn--ico svg{margin-right:0!important}.btn--alert circle,.btn--alert path,.btn--alert rect{fill:#e67676!important}.btn span:after{content:"";position:absolute;top:50px;left:200px;width:230px;height:230px;border-radius:200px;background:rgba(107,104,252,.2);pointer-events:none}.btn circle,.btn path,.btn rect,.btn span,.btn span:after{transition:all .5s cubic-bezier(.87,-.41,.19,1)}.btn span,.btn svg{position:relative;z-index:2}.btn svg{width:24px;max-height:30px;margin-right:10px}.btn svg circle,.btn svg path,.btn svg rect{fill:#a7b4cc}.btn.big{min-height:52px;transition:all .5s cubic-bezier(.87,-.41,.19,1);background:#2622e5;padding:10px;max-width:230px;white-space:nowrap;-ms-flex-pack:center;justify-content:center}.btn.big span{color:#fff!important;z-index:1;padding-right:20px}.btn.big span:after{content:"";z-index:-1;top:50px;left:165px;width:280px;background:#6b68fc}.btn.big svg{z-index:4;position:relative;margin:0 20px;min-width:24px}.btn.big path,.btn.big rect{fill:#fff!important}.btn.active,.btn:hover{box-shadow:5px 5px 10px 0 rgba(86,112,161,.5);color:#6b68fc}.btn.active span:after,.btn:hover span:after{transform:translateX(-260px) translateY(-150px)}.btn.active svg *,.btn:hover svg *{fill:#6b68fc}.flex{display:-ms-flexbox;display:flex}.flex--col{-ms-flex-direction:column;flex-direction:column}.flex--list{margin:.75rem 0;display:block!important}.flex--center{-ms-flex-align:center;align-items:center}.notice svg circle,.notice svg path{fill:#6b68fc}@keyframes a{0%{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:scaleX(1.5) translate3d(-100px,0,0)}40%{opacity:1;animation-timing-function:ease-in-out;transform:scaleX(1.2) translateZ(0)}65%{transform:scaleX(1) translate3d(-20px,0,0)}to{opacity:1;animation-timing-function:ease-in-out;transform:scaleX(1) translateZ(0)}}@keyframes b{0%{transform:scale3d(0,0,0)}20%{opacity:1}40%{animation-timing-function:cubic-bezier(.47,0,.745,.715);transform:scale3d(1.08,1.08,1.08)}60%{animation-timing-function:ease-in-out;transform:scaleX(1)}80%{animation-timing-function:ease-in-out;transform:scale3d(1.03,1.03,1.03)}to{opacity:1;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scaleX(1)}}.demo{position:relative;width:90%;max-width:1600px;margin:0 auto}.demo__bg{width:50%;padding-left:50px;opacity:1}.demo__bg .line,.demo__bg .square,.demo__bg line,.demo__bg path{animation-duration:.8s;animation-fill-mode:forwards;opacity:0}.demo__bg line,.demo__bg path{transition:opacity 2s cubic-bezier(.87,-.41,.19,1);transition-delay:.5s}.demo__bg.you_can_use_own_animations_and_transitions .line{animation-name:a}.demo__bg.you_can_use_own_animations_and_transitions .square{animation-name:b}.demo__bg.you_can_use_own_animations_and_transitions line,.demo__bg.you_can_use_own_animations_and_transitions path{opacity:1}.demo__intro{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;min-height:100vh;color:#6b68fc;position:relative}.demo__intro p{margin-bottom:1.5rem}.demo__intro__wrapper{position:relative;z-index:2;transition:all .5s cubic-bezier(.87,-.41,.19,1);opacity:1;max-width:50%}.demo__info{text-align:center;margin:0 auto 20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#6b68fc;color:#fff;padding:10px;border-radius:.25rem}.demo__info svg{width:20px;margin-left:10px}.demo__info svg circle,.demo__info svg path,.demo__info svg rect{fill:#fff}.chat{border:1px solid #ecedf0;box-shadow:5px 5px 10px 0 #ecedf0;margin:50px auto;border-radius:.25rem;max-width:1600px;transition:all .5s cubic-bezier(.87,-.41,.19,1);opacity:1}.chat .btn span:after{width:500px}.chat__top{border-bottom:1px solid #ecedf0;padding:1rem 1.5rem;width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;box-shadow:5px 5px 10px 0 rgba(236,237,240,.1);background:#6b68fc;color:#fff;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.chat__top,.chat__top__left{-ms-flex-align:center;align-items:center}.chat__top__left svg{margin-right:20px}.chat__top .flex svg{margin:0 20px}.chat__top__right{-ms-flex-align:center;align-items:center}.chat__top__right svg{margin-left:20px}.chat__top p{margin-bottom:0;color:#fff}.chat__top p svg{margin-left:10px}.chat__top svg{width:20px}.chat__top svg circle,.chat__top svg path,.chat__top svg rect{fill:#fff}.chat__body{-ms-flex-pack:justify;justify-content:space-between}.chat__body,.chat__input{display:-ms-flexbox;display:flex}.chat__input{width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;padding:0 1.5rem 1.5rem}.chat__input .break{width:150px;border:none;opacity:0}.chat__input .btn svg{min-width:25px}.chat__input .break,.chat__input .btn{margin:10px;width:calc(20% - 20px);border:1px solid #ecedf0}.chat__input .break:hover,.chat__input .btn:hover{border-color:rgba(107,104,252,.2)}.chat__input .break span,.chat__input .btn span{font-weight:400!important}.chat__input .break span :after,.chat__input .btn span :after{width:300px}.chat__sidebar{width:30%;padding:1.5rem;border-left:1px solid #ecedf0}.chat__person,.chat__person__wrapper{-ms-flex-align:center;align-items:center}.chat__person img{margin-bottom:15px;max-width:calc(50% - 10px)}.chat__person p{color:#6b68fc;margin-bottom:0}.chat__person span{font-size:12px;color:#5670a1}.chat__person span:after{content:"";width:300px}.chat__person ul{margin-top:30px;margin-bottom:10px}.chat__person ul li{margin-bottom:15px}.chat__person p,.chat__person span,.chat__person ul{width:100%;text-align:center}.chat__person .btn{text-align:initial}.chat__person .btn span{width:auto}.chat__messages{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}.chat__messages--reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.chat__messages__wrapper{padding:3rem;width:100%;height:50vh;height:520px;overflow:auto;overflow-x:hidden}.chat__messages span{white-space:nowrap}.chat__break{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin:10px 0 20px;width:100%}.chat__break:nth-child(3){display:none}.chat__break span{color:#ecedf0;font-size:12px;padding:0 20px}.chat__break span.secondary{color:#6b68fc}.chat__break--blue{margin-top:40px}.chat__break--blue span{color:#6b68fc}.chat__break--button .demo__info{white-space:nowrap;margin:0 20px;transition:all .5s cubic-bezier(.87,-.41,.19,1);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.chat__break--button .demo__info pre{margin-left:5px}.chat__break--button .demo__info:hover{box-shadow:5px 5px 10px 0 rgba(86,112,161,.5)}.chat__break--button:after,.chat__break--button:before{background:#ecedf0!important}.chat__break:after,.chat__break:before{content:" ";width:100%;height:1px;background:#ecedf0;display:block}.chat__message{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;margin-bottom:10px;animation-duration:.8s;animation-fill-mode:forwards}.chat__message.dummy,.chat__message:first-child,.chat__message:nth-child(2){display:none}.chat__message:nth-child(3n),.chat__message:nth-child(5n),.chat__message:nth-child(7n){-ms-flex-pack:end;justify-content:flex-end}.chat__message .emoji{display:none}.chat__message.color0 .emoji0{display:inline}.chat__message.color0 .chat__bubble{background:#00ce6a;color:#fff}.chat__message.color1 .emoji1{display:inline}.chat__message.color1 .chat__bubble{background:#557ee5;color:#fff}.chat__message.color2 .emoji2{display:inline}.chat__message.color2 .chat__bubble{background:#fff4e2;color:#e6a43c}.chat__message.color3 .emoji3{display:inline}.chat__message.color3 .chat__bubble{background:#e1ecfe;color:#2f53b4}.chat__message.color4 .emoji4{display:inline}.chat__message.color4 .chat__bubble{background:#ffcaca;color:red}.chat__message.color5 .emoji5{display:inline}.chat__message.color5 .chat__bubble{background:#ffcaca;color:#00a250}.chat__bubble{padding:1.5rem;border-radius:1rem}.chat span{font-weight:700}.chat__media{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}.chat__media img{max-width:calc(30% - 5px);margin-bottom:15px;box-shadow:5px 5px 10px 0 rgba(86,112,161,.5)}@media screen and (max-width:1450px){.chat__input .btn{width:calc(33% - 20px)}}@media screen and (max-width:991px){.chat__top{-ms-flex-pack:center;justify-content:center}.chat__top__left,.chat__top__right{display:none!important}.chat__input .btn{width:calc(50% - 20px)}.demo__bg{display:none}.demo__intro__wrapper{max-width:100%}}@media screen and (max-width:767px){.chat__top svg{display:none!important}.chat__messages__wrapper{padding:1.5rem}.chat__bubble{width:100%}.chat__sidebar{display:none}}@media screen and (max-width:540px){.chat__input{padding:0}.chat__input .btn{width:calc(50% - 10px);margin:5px;-ms-flex-pack:center;justify-content:center}.chat__input .btn svg{display:none}}@media screen and (max-width:340px){.chat__input .btn span{font-size:.9rem}}