new-gulp-project/htdocs/css/style.css

New Gulp development project

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{font-family:Roboto,sans-serif;font-size:16px;overflow-x:hidden;color:#222}body{display:flex;height:100vh;flex-flow:column nowrap;align-items:center}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[type=submit]:active,[type=submit]:focus,a:active,a:focus,button:active,button:focus,input:active,input:focus,textarea:active,textarea:focus{outline:0}img{max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}[class*='--wrapper']{width:100%;max-width:1200px;padding:0 20px}.button-up{position:fixed;right:15px;bottom:-50px;width:35px;height:38px;cursor:pointer;transition:all .3s;opacity:.7;border:none;border-radius:3px;background:#ff4500}.button-up::before{position:absolute;top:50%;left:50%;margin-top:-6px;margin-left:-8px;content:'';border:8px solid transparent;border-top:none;border-bottom:12px solid #fff}.button-up:hover{opacity:1}.button-up--show{bottom:15px}.content{margin-bottom:130px}.footer{width:100%;margin-top:auto;text-align:center;color:#eee;background:#222}.footer__inner{font-size:12px;margin:0 auto;padding:12px 0}.header{margin-bottom:50px;padding:0}.header__banner{display:flex;overflow:hidden;justify-content:center;align-items:center}.header__banner--small{max-height:250px}.header__img{min-width:450px}@media (min-width:740px){.header__img{min-width:900px}}.home{fill:#eee}.html5{width:120px;height:120px;margin-top:20px}.logo{padding:5px;text-decoration:none;color:#222}.menu{position:sticky;z-index:1;top:0;width:100%;min-height:45px}.menu__inner{display:flex;margin:0 auto;align-items:center}.menu__logo{margin-right:auto}.menu__item{font-size:15px;padding:0 20px;text-decoration:none;text-transform:uppercase;color:#222}@media (max-width:739px){.menu__inner{position:absolute;right:0;left:0;overflow-y:hidden;height:45px;padding:0;transition:height .3s;background:linear-gradient(orangered 45px,rgba(0,0,0,.8) 45px);flex-flow:row wrap;align-content:flex-start}.menu__inner--open{height:100vh;animation:overflow 0s .3s forwards}.menu__logo{color:#eee}.menu__link{margin-top:4px;margin-right:8px;transition:opacity .3s}.menu__link:hover{opacity:.7}.menu__home{width:30px;height:30px}.menu__button{position:relative;width:25px;height:16px;margin-right:20px;padding:0;cursor:pointer;transition:opacity .3s;border:none;border-top:2px solid #eee;border-bottom:2px solid #eee;background-color:transparent}.menu__button:hover{opacity:.7}.menu__button::after,.menu__button::before{position:absolute;top:50%;left:0;width:100%;height:2px;margin-top:-1px;content:'';transition:transform .3s;background-color:#eee}.menu__button--close{border:none}.menu__button--close::before{transform:rotate(45deg)}.menu__button--close::after{transform:rotate(-45deg)}.menu__item{display:flex;height:45px;align-items:center}.menu__item:not(.menu__item--active){width:100%;border-top:1px solid #d2d2d2;background:#eee}.menu__item:not(.menu__item--active):hover{color:#eee;border-top-color:#222;background:#222}.menu__item--active{margin-right:auto;margin-left:15px;padding:0 5px;color:#eee;background:0 0;order:-1}}@media (min-width:740px){.menu{min-height:auto;transition:transform .3s;background:#eee;box-shadow:0 10px 5px -10px #bbb}.menu--hide{transform:translateY(-100%)}.menu__inner{max-width:1240px;padding-right:15px;padding-left:15px;justify-content:flex-end}.menu__button,.menu__link{display:none}.menu__item{margin:8px 0 8px 10px;padding:5px;transition:opacity .3s}.menu__item:hover{opacity:.7}.menu__item--active{position:relative}.menu__item--active::before{position:absolute;bottom:2px;left:0;display:block;width:100%;height:1px;content:'';background:linear-gradient(to right,transparent,#ff4500 50%,transparent)}}@keyframes overflow{100%{overflow-y:auto}}