html,html>*,body,body>*{margin:0;padding:0;box-sizing:border-box;font-size:1em}*{box-sizing:border-box}body{background:#efefef}.transit{transition-duration:.3s;-webkit-transition-duration:.3s;-moz-transition-duration:.3s}.selected{background:yellow;color:#000;text-shadow:none}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}::selection{background:yellow;color:#000;text-shadow:none}::-webkit-selection{background:yellow;color:#000;text-shadow:none}::-moz-selection{background:yellow;color:#000;text-shadow:none}h1{font-size:2.2em}h1,h2,h3{display:block;margin:0 auto;text-align:center;font-family:'Roboto Slab',serif;font-weight:700;color:#000;letter-spacing:1.5px}h1#hp-logo{display:block;margin:0 auto;padding:26px 0 20px 0;position:relative;width:100%;max-width:100%}h1#hp-logo svg{position:relative;display:block;margin:0 auto;width:100%;height:20%;max-width:300px;transition-duration:.3s;-webkit-transition-duration:.3s;-moz-transition-duration:.3s}h2{margin-bottom:30px}#bot-container{position:absolute;width:100%;height:100%;top:0;left:0}#bot-main{position:relative;margin:0 auto;padding:0;width:100%;height:100%;display:table;text-align:center}#bot-inner{position:relative;display:table-cell;width:100%;margin:0 auto;box-sizing:border-box;vertical-align:middle}#bot-content{width:100%;max-width:600px;position:relative;display:block;margin:0 auto;padding:0 20px;text-align:left}#hp-input-wrap{position:relative;width:100%;display:table-cell;margin:0;padding:0;vertical-align:top}#dictation{background:#fafafa;width:100%;border-radius:0 0 0 0;height:20px;float:left;min-height:86px;box-sizing:border-box;text-align:left;margin:0 auto;display:block;font-family:'Roboto Slab',serif;font-weight:700;font-size:30px;font-style:normal;font-variant:normal;line-height:1.1em;vertical-align:center;color:#000;padding:25px 20px 25px 20px;border:1px solid rgba(102,102,102,0.3);resize:vertical;overflow:hidden;-webkit-appearance:none;white-space:pre-wrap;word-break:break-word !important;cursor:pointer;resize:none;-webkit-tap-highlight-color:rgba(0,0,0,0);transition-duration:.3s;-webkit-transition-duration:.3s;-moz-transition-duration:.3s}.bot-input-active #dictation,.recording #dictation{cursor:auto}#dictation:focus{outline:none}#dictation::-webkit-input-placeholder{color:#666 !important}#dictation:-moz-placeholder{color:#666 !important}#dictation::-moz-placeholder{color:#666 !important}#dictation:-ms-input-placeholder{color:#666 !important}#dictation::-webkit-resizer{display:none}#dictation::-moz-resizer{display:none}#response{width:100%;text-align:center;position:relative;margin:20px auto 20px auto;display:block;font-family:'Roboto Slab',serif;font-weight:400;font-size:24px;font-style:normal;font-variant:normal;font-weight:500;line-height:26.4px;vertical-align:center}#response span.answer{position:relative;display:block;padding:20px;color:#636363;padding:20px 20px;margin:0 auto 20px auto;background:#fff;border-radius:0}#databox{font-family:'Roboto Slab',serif;font-weight:400;font-size:20px;width:100%;color:#636363;position:relative;margin:20px auto 0 auto;display:block}#databox img{display:block;max-width:100%;padding:10px;height:auto}.dataset img:first-child:before{content:attr(alt)}.dataset img:first-child[alt]{visibility:visible}.dataset{background:#fff;margin:0 auto 20px auto;border-bottom:2px solid rgba(102,102,102,0.3);padding:10px 10px 20px 10px;border-radius:0;animation:fadein 2.5s;-moz-animation:fadein 2.5s;-webkit-animation:fadein 2.5s;-o-animation:fadein 2.5s;-moz-animation-delay:1s;-webkit-animation-delay:1s;animation-delay:1s}.dataset imagesource{display:none}.dataset:last-child{border-bottom:none}#hpform{display:table;width:100%;margin:0 auto;padding:0;border:none;white-space:nowrap}.hp-btn-wrap{position:relative;display:table-cell;width:20%;left:-1px;min-width:86px;margin:0;padding:0;vertical-align:top}.btn-main{position:relative;display:block;min-width:86px;height:86px;margin:0 auto;padding:0;overflow:hidden;-webkit-appearance:none;outline:none;padding:0 !important;border:1px solid rgba(0,0,0,0.2);border-style:inset;white-space:nowrap;line-height:0;align-items:flex-start;background-clip:border-box;background-origin:border-box;border-radius:0 0 0 0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);transition-duration:.3s;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;background:#e50852}.btn-main>*{position:absolute;display:block;top:0;left:0}.bot-input-active .btn-main{background:rgba(0,108,230,0.99)}.recording .btn-main{background:#f80000}.ready .btn-main{background:#2ddb00}.bot-loading .btn-main{background:#fde800}.recording .btn-cover{display:block;width:100%;height:80px;background:transparent;background:rgba(250,250,250,0);z-index:201;cursor:pointer;opacity:0}.btn-inner{display:block;width:100%;height:86px;padding:0;margin:0;transition-duration:.3s;-webkit-transition-duration:.3s;-moz-transition-duration:.3s}.hp-btn{position:absolute;display:block;background:url(../assets/hairless-pony-logo-white.png) center center;background-size:90%;width:100%;max-width:300px;padding-bottom:100%;cursor:pointer;opacity:1;transition-duration:.3s;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ready .hp-btn,.bot-input-active .hp-btn,.recording .hp-btn,.recording .hp-btn,.bot-loading .hp-btn{opacity:0}.bot-input-active .hp-btn,.ready .hp-btn{display:none}.bot-form-btn{display:block;width:10px;height:10px;overflow:hidden;padding:0;margin:0 0 0 -1000px;position:absolute}.submit-btn,.record-btn{text-align:center;position:absolute;margin:0 auto;display:block;background:transparent;border:none;height:86px;line-height:86px;top:0;width:0;cursor:default;font-weight:400;letter-spacing:2px;font-size:52px;color:#fff;font-family:'Arial',serif;z-index:100;overflow:hidden;-moz-transform-origin:center;transform-origin:center;-webkit-transform-origin:center;transition:background-color .5s ease;z-index:97;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);animation:fadein 2.5s;-moz-animation:fadein 2.5s;-webkit-animation:fadein 2.5s;-o-animation:fadein 2.5s;-moz-animation-delay:1s;-webkit-animation-delay:1s;animation-delay:1s}.submit-btn:focus,.record-btn:focus{outline:none}.submit-btn:hover span,.record-btn:hover span{font-size:70px}.submit-btn span,.record-btn span{width:100%;position:relative;display:block;transition:all .5s ease;-webkit-transition:all .5s ease;-moz-transform-origin:center;transform-origin:center;-webkit-transform-origin:center;z-index:99}.bot-loading .submit-btn,.bot-loading .record-btn{width:100%;cursor:default;opacity:0}.recording .record-btn{width:100%;cursor:pointer}.recording .record-btn span{font-size:36px;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ready .record-btn{width:100%;cursor:pointer}.bot-input-active .submit-btn{width:100%;cursor:pointer}.bot-input-active .submit-btn span{font-size:36px}.loader{position:relative;width:100%;left:0;top:0;position:absolute;display:block}.spinner{display:none;position:absolute;left:0;top:0;width:100%;height:86px;margin:0 auto;background-color:rgba(0,0,0,0.16);border-radius:50%;z-index:98;-webkit-animation:sk-scaleout 1.6s infinite ease-in-out;animation:sk-scaleout 1.6s infinite ease-in-out}.recording .spinner{display:block}@-webkit-keyframes sk-scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}@keyframes sk-scaleout{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes rotate{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg)}}.lmd{border-radius:50%;padding:6px;border:2px solid transparent;-webkit-animation:rotate linear 4s infinite;animation:rotate linear 4s infinite}.ld{height:100%}.spinfrag{position:absolute;top:0;left:50%;width:66px;height:66px;overflow:hidden;margin:9px 0 0 -33px;display:none;z-index:101}.bot-loading .spinfrag{display:block}.spinfrag .cent{border-radius:50%;background:rgba(255,150,0,0.6);width:12px;height:12px;position:absolute;display:block;margin:-6px auto 0 -6px;top:50%;left:50%;-webkit-animation:sk-scaleout 1s infinite ease-in-out;animation:sk-scaleout 1s infinite ease-in-out}.spinfrag div{height:100%}.spinfrag,.spinfrag div{border-radius:50%;padding:6px;border:2px solid transparent;-webkit-animation:rotate linear 4s infinite;animation:rotate linear 4s infinite;border-top-color:rgba(255,150,0,0.6);border-bottom-color:rgba(255,150,0,0.3)}.fadesin{animation:fadein 2.5s;-moz-animation:fadein 2.5s;-webkit-animation:fadein 2.5s;-o-animation:fadein 2.5s;-moz-animation-delay:1s;-webkit-animation-delay:1s;animation-delay:1s}@media only screen and (max-width:600px){#dictation{padding:16px 10px 16px 10px;font-size:16px;min-height:52px}.btn-main{max-height:52px}.btn-inner{top:-17px}}