/*
 * Colours:
 * #515151
 * #FFFFFF
 * #00B4FF
 * #EEEEEE #ccc
 */
/*
 * Fonts
 */
@font-face {
  font-family: 'fontello';
  src: url("font/fontello.eot");
  src: url("font/fontello.eot#iefix") format("embedded-opentype"), url("font/fontello.woff") format("woff"), url("font/fontello.ttf") format("truetype"), url("font/fontello.svg") format("svg");
  font-weight: normal;
  font-style: normal; }
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none; }

/*
 * Scaffolding and Basic Reset
 */
html {
  font-size: 16px; }

@media (min-width: 48em) {
  html {
    font-size: 20px; } }
body {
  margin: 0;
  font: 1rem/1.5 "PT Sans", sans-serif;
  color: #515151; }

a {
  color: #00b4ff;
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 .5rem;
  font-weight: normal;
  line-height: 1;
  color: #2a2a2a;
  letter-spacing: -.05em; }

h1 {
  font-size: 3rem; }

h2 {
  font-size: 2.5rem; }

h3 {
  font-size: 1.75rem; }

h4 {
  font-size: 1.25rem; }

p {
  margin: 0; }

p.ref {
  margin: 1rem; }

.pull-right {
  float: right !important;
  text-align: right !important; }

/*
 * Box Sizing Fix
 */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/*
 * Flexbox Related classes
 */
/*
 * Header
 */
header nav {
  width: 100%;
  height: 80px; }
  header nav ul {
    width: 100%;
    height: 80px;
    margin: 0;
    padding: 0;
    color: #fff;
    background-color: #515151;
    list-style: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row; }
    header nav ul li {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -moz-box-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 80px;
      line-height: 80px;
      text-align: center; }
      header nav ul li:first-child, header nav ul li:last-child {
        -webkit-box-flex: 0 0 50px;
        -webkit-flex: 0 0 50px;
        -moz-box-flex: 0 0 50px;
        -moz-flex: 0 0 50px;
        -ms-flex: 0 0 50px;
        flex: 0 0 50px; }

/*
 * Main Content
 */
main {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 10px; }

/*
 * Tab Bar
 */
.tab-bar {
  width: 100%;
  margin: 0;
  padding: 0; }
  .tab-bar .tab-link {
    display: inline-block;
    width: 25%;
    background-color: #eee;
    text-align: center;
    height: 80px;
    line-height: 80px; }
    .tab-bar .tab-link:not(:last-child) {
      border-right: 1px solid #ccc; }