@import url(http://fonts.googleapis.com/css?family=#{$base-font}:#{$light},#{$regular},#{$bold}); @import url(http://fonts.googleapis.com/css?family=#{$headers-font}:#{$light},#{$regular}); body { margin: 0; padding-top: 50px; -webkit-tap-highlight-color: rgba(0,0,0,0); -moz-tap-highlight-color: rgba(0,0,0,0); -ms-tap-highlight-color: rgba(0,0,0,0); -o-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; -webkit-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale; osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.004); -ms-text-shadow: 1px 1px 1px rgba(0,0,0,0.004); text-shadow: 1px 1px 1px rgba(0,0,0,0.004); text-rendering: optimizeSpeed!important; font-smooth: always; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } nav input, nav button { font-size: 16px; height: 28px; box-sizing: border-box; vertical-align: middle; line-height: 1; outline: none; } nav header { font-family: Monserrat, sans-serif; float: left; margin-left: 20px; font-size: 25px; color: #00329F; font-weight: bold; } nav input { width: 50%; box-sizing: border-box; max-width: 500px; color: #555; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } nav input:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); } nav button { background-color: #fff; color: #333; padding: 2px 10px; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid #ccc; border-radius: 4px; } nav button:hover { background-color: #e6e6e6; border-color: #adadad; } nav button:active { background-color: #d4d4d4; border-color: #8c8c8c; } nav { width: 100%; height: 50px; line-height: 50px; text-align: center; background-color: white; border-bottom: 1px solid #ccc; position: fixed; top: 0; z-index: 1; box-sizing: border-box; } @media (min-width: 1000px) { nav header { position: absolute; } } @media (max-width: 500px) { nav input { width: 70%; } nav header { display: none; } }