@font-face {
  font-family: 'Eurostile';
  src: url("eurostile.eot");
  src: url("eurostile.eot?#iefix") format("embedded-opentype"), url("eurostile.woff") format("woff"), url("eurostile.ttf") format("truetype"), url("eurostile.svg#eurostileregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Eurostile Bold';
  src: url("eurostile-bold.eot");
  src: local("☺"), url("eurostile-bold.woff") format("woff"), url("eurostile-bold.ttf") format("truetype"), url("eurostile-bold.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

body {
  font-family: "Eurostile", sans-serif;
  background: #171e24;
  margin: 0; }

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 5px 0; }

h2 {
  color: white;
  padding: 0;
  text-align: center;
  font-size: 20pt;
  line-height: 23pt; }

h3 {
  font-size: 28pt;
  line-height: 34pt; }

#container {
  width: 960px;
  margin: 0 auto;
  position: relative; }

#header {
  background: url(../img/header.png) top left no-repeat;
  height: 315px; }
  #header #brain {
    background: url(../img/brain.png) center center no-repeat;
    height: 299px;
    width: 542px;
    overflow: hidden;
    position: relative;
    top: 35px;
    left: 0;
    z-index: 100; }
    #header #brain #mouth-results {
      display: none; }
    #header #brain .eye-container {
      width: 70px;
      height: 70px;
      border-radius: 60px;
      float: left; }
    #header #brain .eye-container.one {
      position: absolute;
      top: 152px;
      left: 127px; }
    #header #brain .eye-container.two {
      position: absolute;
      top: 150px;
      right: 125px; }
  #header #slogan {
    width: 400px;
    height: 164px;
    background: url(../img/top-slogan.png) top left no-repeat;
    position: absolute;
    right: 20px;
    top: 130px; }

#debug-canvas {
  position: absolute;
  z-index: -1; }

.eye {
  border: 1px solid black;
  background: black;
  width: 22px;
  height: 22px;
  background: url(../img/pupil.png) center center no-repeat;
  border-radius: 60px;
  float: left;
  margin-top: 25px;
  margin-left: 25px;
  position: absolute;
  z-index: 101; }

#choppa {
  background: url(../img/helicopter.png) top left no-repeat;
  width: 180px;
  height: 150px;
  position: absolute;
  z-index: 1; }

.header-result {
  background: url(../img/header-result.png) top center no-repeat;
  height: 350px;
  display: none; }

#content {
  position: relative;
  z-index: 50;
  background: #212b33;
  padding: 20px; }
  #content #subtitle {
    background: url(../img/subtitle.png) center center no-repeat;
    height: 60px; }

#content-spacer {
  height: 830px; }

#result-content {
  display: none;
  text-align: center; }
  #result-content h1 {
    color: white;
    padding: 50px 0;
    font-size: 35pt;
    line-height: 40pt; }
  #result-content h2 {
    font-size: 25pt;
    line-height: 30pt;
    padding: 10px 0 40px 0; }
  #result-content #back-home {
    margin-right: 130px; }

#calculators {
  margin: 10px;
  padding: 20px;
  background: #939598; }
  #calculators .calculator {
    border-radius: 15px;
    background: #c6617b;
    position: relative;
    color: white;
    height: 170px;
    overflow: hidden;
    margin: 15px 0 25px; }
    #calculators .calculator .left {
      float: left;
      width: 35%;
      padding: 40px 0 60px;
      text-align: center; }
      #calculators .calculator .left h3 {
        padding: 0;
        line-height: 30pt; }
      #calculators .calculator .left h6 {
        margin: 0;
        padding: 3px 0;
        font-size: 14pt;
        line-height: 14pt; }
      #calculators .calculator .left .text-left {
        width: 28%;
        margin-right: 1%;
        text-align: right;
        float: left;
        font-size: 14px;
        line-height: 13px;
        padding-top: 7px; }
      #calculators .calculator .left .number {
        width: 40%;
        margin-right: 1%;
        text-align: center;
        float: left;
        font-size: 40pt;
        line-height: 40pt;
        font-family: "Eurostile Bold", sans-serif; }
      #calculators .calculator .left .percent {
        width: 25%;
        float: left;
        text-align: left;
        padding-top: 7px; }
    #calculators .calculator .left.blue {
      background: #034963; }
    #calculators .calculator .left.teal {
      background: #499eaa; }
    #calculators .calculator .left.grey {
      background: #6d6f71;
      padding: 25px 0 60px; }
    #calculators .calculator .form {
      float: left;
      width: 65%;
      padding: 20px 0; }
      #calculators .calculator .form .col {
        width: 40%;
        margin: 0 5%;
        float: left; }
      #calculators .calculator .form input[type=text] {
        display: block;
        padding: 5px 7px;
        width: 90%;
        border: 0;
        border-radius: 10px;
        font-size: 15pt;
        line-height: 15pt; }

.button {
  margin: 5px 0 15px 35px;
  background: #034963;
  padding: 25px;
  color: white;
  border-radius: 10px;
  border: 0;
  font-family: "Eurostile Bold";
  font-size: 22pt;
  line-height: 24pt;
  cursor: pointer; }

.button.small {
  margin: 15px 0 15px 10px;
  padding: 10px 25px;
  font-size: 18pt;
  line-height: 22pt; }

#cu-band {
  margin: 15px -20px 15px -20px;
  height: 135px;
  background: #034963; }
  #cu-band #logo {
    float: left;
    width: 400px;
    padding: 10px 0;
    text-align: center; }
    #cu-band #logo img {
      border: 0; }
  #cu-band #cu-phone {
    float: left;
    font-family: "Eurostile Bold";
    font-size: 28pt;
    line-height: 34pt;
    text-align: center;
    padding: 20px 0;
    width: 500px;
    color: white; }
    #cu-band #cu-phone a {
      color: white;
      text-decoration: none; }

#footer {
  color: #818284;
  font-size: 9pt; }

#footer p {
  padding: 0;
  margin: 0; }

.clear {
  clear: both; }