html {background: #f5f7f8}
html body {text-align: center; padding: 36px 0 0; height: auto; background: #fff linear-gradient(to bottom, #eff1f2FF 0%,#eff1f288 6%,#eff1f255 12%,#eff1f211 25%,#eff1f200 100%);}
body {min-height: 100vh; display: flex; flex-direction: column}
h1 {text-align: center; font-size: 72px; line-height: 140px; background: #fff; color: #eee; width: 220px; height: 140px; margin: 0 auto 16px; box-shadow: 0 1px 2px rgba(50, 56, 59, 0.1), 1px 1px 4px rgba(50, 56, 59, 0.2);} 
h2 {font-size: 30px; line-height: 34px}
p {font-size: 16px; line-height: 24px; margin-top: 24px; color: #666}
.cont {max-width: 1200px; margin: 0 auto 56px; vertical-align: bottom; padding: 0 3%; flex-grow: 10}
.cont > div {min-width: 320px; display: inline-block; text-align: left; padding: 0 32px}
img {width: 360px; max-width: 100%; margin-bottom: 0}
.break {margin-bottom: 100px}
.brand { font-size: 32px; color: #444; white-space:nowrap; display: inline-block; margin-top: 16px}
.brand:hover, .brand:focus { color: #222;}
.brand:before {background: #66c640; }
.brand i {font-size: 28px; color: #66c640; /*position: relative; top: 1px;*/ margin: 0 4px;}
.brand .dom {font-size: 18px; color: #bbb; margin: 0 2px;}
footer {color: #bbb; border-top: 1px solid #eee; padding: 16px; background: #f5f7f8}
footer a {color: #bbb;}
footer a:hover, footer a:focus { color: #aaa;}
footer a:before {background: #aaa; }

@media screen and (min-width: 768px){
  h1 { width: 320px; height: 200px; line-height: 200px; margin: 16px auto 48px;} 
  h2 {font-size: 36px; line-height: 42px}
  img {width: 400px; margin-bottom: 48px}
  p { font-size: 18px; line-height: 28px; margin-top: 24px;}
  .cont {margin-bottom: 128px;}
  br {display: none}
}