/* Animation */ @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Main */ * { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } html, body { width: 100%; height: 100%; } body { background: #eee; color: #777777; font-family: montserratlight, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.000em; line-height: 1.000em; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } ::-moz-selection { background: rgba(0, 0, 0, .3); } ::selection { background: rgba(0, 0, 0, .3); } h1, h2 { color: #555; font-family: montserratbold, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 3.000em; font-style: normal; font-weight: normal; letter-spacing: 1px; margin: 0 0 0.438em 0; text-transform: uppercase; } a { color: #555; text-decoration: none; } a:hover, a:focus { color: #767676; } /* Main */ .main { display: table; height: 100%; width: 100%; } .main-container { animation: fadein 1s; display: table-cell; vertical-align: middle; padding: 3.000em 4% 3.000em 12%; text-align: center; } .main p { margin: 0 0 1.875em 0; line-height: 1.625em; } /* Navigation */ #navigation { background: #555; display: table; height: 100%; position: fixed; table-layout: fixed; text-align: center; } #navigation span { display: table-row; } #navigation a { display: table-cell; fill: #eee; padding: 1.000em; vertical-align: middle; } #navigation a:hover, #navigation a:focus { fill: #fff; } /* Buttons */ .button { background: #555; border-radius: 0.375em; color: #eee; cursor: pointer; display: inline-block; font-family: montserratregular, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.000em; margin: 0 0.313em 0 0.313em; padding: 0.938em; text-transform: uppercase; } .button:hover, .button:focus { background: #767676; color: #eee; } /* Responsive Design */ @media (min-width: 0px) { html { font-size: 84%; } } @media (min-width: 100px) { html { font-size: 86%; } } @media (min-width: 200px) { html { font-size: 88%; } } @media (min-width: 300px) { html { font-size: 90%; } } @media (min-width: 400px) { html { font-size: 92%; } } @media (min-width: 500px) { html { font-size: 94%; } } @media (min-width: 600px) { html { font-size: 96%; } } @media (max-width: 600px) { #navigation { height: auto; width: 100%; } #navigation span{ display: table-cell; } #navigation a { display: inline-block; } .main-container { padding: 8.125em 4% 3.000em 4%; } } @media (min-width: 700px) { html { font-size: 98%; } } @media (min-width: 800px) { html { font-size: 100%; } } @media (min-width: 900px) { html { font-size: 102%; } } @media (min-width: 1000px) { html { font-size: 104%; } } @media (min-width: 1100px) { html { font-size: 106%; } } @media (min-width: 1200px) { html { font-size: 108%; } } @media (min-width: 1300px) { html { font-size: 110%; } } @media (min-width: 1400px) { html { font-size: 112%; } } @media (min-width: 1500px) { html { font-size: 114%; } } @media (min-width: 1600px) { html { font-size: 116%; } } @media (min-width: 1700px) { html { font-size: 118%; } } @media (min-width: 1800px) { html { font-size: 120%; } } @media (min-width: 1900px) { html { font-size: 122%; } } @media (min-width: 2000px) { html { font-size: 124%; } } @media (min-width: 2100px) { html { font-size: 126%; } } @media (min-width: 2200px) { html { font-size: 128%; } } @media (min-width: 2300px) { html { font-size: 130%; } } @media (min-width: 2400px) { html { font-size: 132%; } } @media (min-width: 2500px) { html { font-size: 134%; } } @media (min-width: 2600px) { html { font-size: 136%; } } @media (min-width: 2700px) { html { font-size: 138%; } } @media (min-width: 2800px) { html { font-size: 140%; } } @media (min-width: 2900px) { html { font-size: 142%; } } @media (min-width: 3000px) { html { font-size: 144%; } } @media (min-width: 3100px) { html { font-size: 146%; } } @media (min-width: 3200px) { html { font-size: 148%; } } @media (min-width: 3300px) { html { font-size: 150%; } } @media (min-width: 3400px) { html { font-size: 152%; } } @media (min-width: 3500px) { html { font-size: 154%; } } @media (min-width: 3600px) { html { font-size: 156%; } } @media (min-width: 3700px) { html { font-size: 158%; } } @media (min-width: 3800px) { html { font-size: 160%; } } @media (min-width: 3900px) { html { font-size: 162%; } } @media (min-width: 4000px) { html { font-size: 164%; } } @media (min-width: 4100px) { html { font-size: 166%; } } @media (min-width: 4200px) { html { font-size: 168%; } } @media (min-width: 4300px) { html { font-size: 170%; } } @media (min-width: 4400px) { html { font-size: 172%; } } @media (min-width: 4500px) { html { font-size: 174%; } } @media (min-width: 4600px) { html { font-size: 176%; } } @media (min-width: 4700px) { html { font-size: 178%; } } @media (min-width: 4800px) { html { font-size: 180%; } } @media (min-width: 4900px) { html { font-size: 182%; } } @media (min-width: 5000px) { html { font-size: 184% } } @media (min-width: 5100px) { html { font-size: 186%; } }