/* resets */
html, body, div, span, h1, a, i, header, main {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
html, body {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}
body { line-height: 1; }
a { text-decoration: none; }
a:focus { outline: none; }

/* fonts */
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto-Light.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Regular'), local('Roboto-Regular'),url('fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: "icons";
    src: url("fonts/icons.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
[data-icon]:before {
    font-family: "icons" !important;
    content: attr(data-icon);
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: "icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-logo:before {
    content: "\64";
}
.icon-system:before {
    content: "\65";
    color: #335e5e;
}
.icon-settings:before {
    content: "\6a";
    color: #335e5e;
}

/* startup styles */
.container, header, main {
    width: 100%;
}
header, main, a {
    display: block;
    box-sizing: border-box;
}
.container {
    background-color: #f9f9f9;
    height: inherit;
    font-family: Roboto, Arial, sans-serif;
}
header {
    position: fixed;
    height: 140px;
    padding: 20px 120px;
    background-color: white;
    box-shadow: 0 6px 5px 0 rgba(0, 0, 0, 0.07);
}
header:after {
    content: "";
    display: table;
    clear: both;
}
main {
    position: fixed;
    padding: 35px 120px;
    top: 140px;
    height: calc(100% - 140px);
    overflow-x: hidden;
    overflow-y: auto;
}
h1 {
    display: inline-block;
    color: #898989;
    font-size: 18px;
    font-weight: 300;
    padding: 40px 0;
}
h1 span,
h1 b {
    color: #39393a;
    font-weight: bold;
}
h1 span {
    text-transform: uppercase;
}
main > div {
    display: inline-block;
    float: left;
    margin-bottom: 1%;
    background-color: #f3f3f3;
    width: 32%;
    height: 150px;
    text-align: center;
}
main > div:not(:nth-child(3n)) {
    margin-right: 1%;
}
main > div, a {
    border-radius: 2px;
}
a {
    background-color: white;
    color: #4a4a4a;
    height: inherit;
    padding: 32px 0;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.11);
}
a:hover, a:focus {
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
}
a:active {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
}
a > i {
    color: #45c5c3;
    font-size: 42px;
}
.icon-logo {
    display: inline-block;
    color: #ed1c24;
    float: right;
    margin-right: 2vw;
}
.icon-logo:before {
    font-size: 100px;
}