@font-face { font-family: 'PT Sans'; src: url("https://fonts.googleapis.com/css?family=PT+Sans:700&subset=latin,latin-ext"); } [hidden] { display: none; } .visually-hidden { position: absolute; clip: rect(0, 0, 0, 0); } /*div.awesomplete { display: inline-block; position: relative; }*/ /*div.awesomplete > input { display: block; }*/ div.awesomplete > ul { position: absolute; left: 0; z-index: 1; min-width: 100%; box-sizing: border-box; list-style: none; padding: 0; border-radius: .3em; margin: .2em 0 0; background: hsla(0, 0%, 100%, .9); background: linear-gradient(to bottom right, white, hsla(0, 0%, 100%, .8)); border: 1px solid rgba(0, 0, 0, .3); box-shadow: .05em .2em .6em rgba(0, 0, 0, .2); text-shadow: none; margin-left: 2%; margin-top: 7%; } div.awesomplete > ul[hidden], div.awesomplete > ul:empty { display: none; } @supports (transform: scale(0)) { div.awesomplete > ul { transition: .3s cubic-bezier(.4, .2, .5, 1.4); transform-origin: 1.43em -.43em; } div.awesomplete > ul[hidden], div.awesomplete > ul:empty { opacity: 0; transform: scale(0); display: block; transition-timing-function: ease; } } /* Pointer */ div.awesomplete > ul:before { content: ""; position: absolute; top: -.43em; left: 1em; width: 0; height: 0; padding: .4em; background: white; border: inherit; border-right: 0; border-bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } div.awesomplete > ul > li { position: relative; padding: .2em .5em; cursor: pointer; } div.awesomplete > ul > li:hover { background: hsl(200, 40%, 80%); color: black; } div.awesomplete > ul > li[aria-selected="true"] { background: hsl(205, 40%, 40%); color: white; } div.awesomplete mark { background: hsl(65, 100%, 50%); } div.awesomplete li:hover mark { background: hsl(68, 100%, 41%); } div.awesomplete li[aria-selected="true"] mark { background: hsl(86, 100%, 21%); color: inherit; } .talk-h1 { font-family: PT Sans; font-size: 100px; text-align: center; } .splash-h1 { font-size: 2.5vw; text-align: center; color: black; } .result { font-family: PT Sans; font-size: 35px; text-align: center; margin-left: 2%; margin-top: 2%; } .talk-input { border-bottom-width: medium; border-left: none; border-right: none; border-top: none; margin-left: 2.5%; margin-right: 2.5%; font-size: 4vw; padding: inherit; background-color: #FFFFFF; color: #636363; float: left; height: 5%; } body { background-color: #FFFFFF; font-family: "PT Sans" } .talk-h2 { font-family: PT Sans; font-size: 72px; text-align: center; } .talk-h3 { font-family: PT Sans; font-size: 40px; text-align: center; } p { font-family: PT Sans; font-size: 1.5vw; color: #636363; margin-left: 5%; } .talk-li { color: #FE6363; font-size: 1.8vw; list-style-type: none; font-family: PT Sans; } span { color: #FE6363; } .submit { border: 0.5px solid #FE6363; -webkit-box-shadow: #A7A8A8 1px 1px 1px; -moz-box-shadow: #A7A8A8 1px 1px 1px; box-shadow: #A7A8A8 1px 1px 1px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; font-size: 3vw; font-family: PT Sans; padding: 4%; text-decoration: none; display: inline-block; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); font-weight: bold; color: #FFFFFF; background-color: #FE6363; background-image: -webkit-gradient(linear, left top, left bottom, from(#FE6363), to(#D45353)); background-image: -webkit-linear-gradient(top, #FE6363, #D45353); background-image: -moz-linear-gradient(top, #FE6363, #D45353); background-image: -ms-linear-gradient(top, #FE6363, #D45353); background-image: -o-linear-gradient(top, #FE6363, #D45353); background-image: linear-gradient(to bottom, #FE6363, #D45353); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FE6363, endColorstr=#D45353); float: right; margin: 0 0 0 1em; } .submit:hover { border: 1px solid #FE6363; background-color: #FE6363; background-image: -webkit-gradient(linear, left top, left bottom, from(#FE6363), to(#FE6363)); background-image: -webkit-linear-gradient(top, #FE6363, #FE6363); background-image: -moz-linear-gradient(top, #FE6363, #FE6363); background-image: -ms-linear-gradient(top, #FE6363, #FE6363); background-image: -o-linear-gradient(top, #FE6363, #FE6363); background-image: linear-gradient(to bottom, #FE6363, #FE6363); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FE6363, endColorstr=#FE6363); } img { width: 60%; height: auto; display: block; margin: 0 auto; } #wrapper { display: table; width: 100%; } #row { display: table-row; } #col1, #col2 { display: table-cell; } #col1{ overflow:hidden; width:95%; } #col1 input{ width:95%; } #lastdialogs{ margin 0 auto; }