/* Global */

html, body {
  height: 100%;
}
body {
  color: #333;
}

a {
  color: #2659ff;
  text-decoration: none;
}
a:hover {
  color: #000 !important;
}

/*********
 * FONTS
 *********/

@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?m3vl6g');
  src: url('../fonts/icomoon.eot?m3vl6g#iefix') format('embedded-opentype'),
       url('../fonts/icomoon.ttf?m3vl6g') format('truetype'),
       url('../fonts/icomoon.woff?m3vl6g') format('woff'),
       url('../fonts/icomoon.svg?m3vl6g#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ic-wrench:before {
  content: "\e900";
}
.ic-warning:before {
  content: "\e901";
}


/*******
 * MAIN
 *******/

.wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
  text-align: center;
}
.wrapper:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.35em;
}
.wrapper > .centered {
  display: inline-block;
  vertical-align: middle;
  padding: 0.2em;
}

.content {
  height: 80%;
  color: #fff;
  text-align: center;
  background-color: #2659ff;
}

.unknown a {
  color: #ff9c3a;
}
.unknown .content {
  color: #fff;
  background-color: #ff9c3a;
}

.content span {
  display: block;
  padding: 0.4em;
  color: #ccc;
  font-size: 3em;
  text-align: center;
  text-shadow: 1px 1px rgba(0,0,0,0.2);
}

.content h1 {
  display: inline-block;
  font-size: 1.6em;
  text-align: center;
  text-shadow: 1px 1px rgba(0,0,0,0.2);
}
.content h1 small {
  display: block;
  margin-top: 0.25em;
  line-height: 1;
  font-size: 0.5em;
  font-weight: normal;
  text-shadow: none;
}

/* -- Footer -- */

.footer {
  height: 20%;
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.footer .logo {
  float: left;
  height: 100%;
  overflow: hidden;
}
.footer .logo img {
  margin: 5%;
  height: 90%;
}

.footer .mentions {
  width: auto;
  overflow: hidden;
}
.footer .mentions p {
  margin: 0.4em 0;
  font-size: 80%;
}

@media only screen and (min-width:40.063em) {
  .content {
    height: 75%;
  }
  .content span.icon {
    display: inline-block;
    padding: 0;
    padding-right: 0.5em;
    font-size: 4em;
  }
  .content h1 {
    max-width: 80%;
    font-size: 2em;
    text-align: left;
  }
  .footer {
    height: 25%;
  }
}
@media only screen and (min-width:64.063em) {
  .content span.icon {
    padding-right: 1em;
  }
  .content h1 {
    max-width: 60%;
  }
}