website/_includes/_css/index.css

406 lines
5.2 KiB
CSS
Raw Normal View History

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