html, body, div, h1, h2, h3, h4, h5, p, ul, li, header, footer, nav{
  margin: 0;
  padding: 0;
}

a { text-decoration: none;}
@font-face {
	font-family: 'LeagueGothicRegular';
	src: url('../fonts/League_Gothic-webfont.eot');
	src: local('☺'), url('../fonts/League_Gothic-webfont.woff') format('woff'), url('../fonts/League_Gothic-webfont.ttf') format('truetype'), url('../fonts/League_Gothic-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}          
          
body { font-family: Georgia, Times, serif; text-rendering: optimizeLegibility }

a { color: #00874D; -webkit-transition: color 0.1s linear; }

/*********************
 * @group Header
 *********************/
.header {
  background-color: #871400;
  color: #fff;
  -webkit-box-shadow: 3px 3px 3px #ccc;
  -moz-box-shadow: 3px 3px 3px #ccc;
}

.header .content {
  padding: .5em;
  text-align: center;
}

h1 {
  font-family: 'LeagueGothicRegular', Helvetica, Arial, sans-serif;   
  font-size: 96px;
  line-height: 96px;
  text-shadow: -1px 1px 2px #777;
}

h1 a{ 
  color: #fff;
}

.subtitle {
  font-size: 20px;
  font-style: italic;
  text-transform: lowercase;
  text-shadow: -1px 1px 2px #777;
}

.content {
  margin: 0 auto;
  max-width: 61.75em; /* 988px / 16px */
}

/*********************
 * Main
 *********************/
#main {
  margin-left: 12%;
  overflow: hidden;
}

/* nav */

nav ul {
  list-style-type: none;
  overflow: hidden;
}

nav li {
  float: left;
  padding: 1em 1em 0em 1em;
  text-align: center;
  width: 25%;
}

nav a {
  border: 3px solid #ccc;
  border-left: 0;
  border-right: 0;
  color: rgba(55,55,55,.7);
  display: block;
  padding: .4em 0;
  text-decoration: none;
}

#main a:hover, footer a:hover {
  color: #871400;
}

.col {
  float: left;
  padding: 1em;
  width: 25%;
}

.col img {
  max-width: 100%;
  -webkit-box-shadow: 2px 2px 2px #ccc;
}

/********************
 * footer
 *******************/

footer {
  clear: both;
  color: #fff;
  text-align: center;
}

footer p {
  background-color: #871400;
  font-size: 90%;
  padding: .2em 0;

  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

footer a {
  color: rgba(255,255,255,.6);
}

footer a:hover {
  color: rgba(255,255,255,.8);
}

@media (min-width: 1200px) {
  .content {
        font-size: 1.0625em; /* 17px / 16px */
  }
}

@media (max-width: 800px) {
  #main {
    margin-left: 0;
  }
  .content {
        font-size: .75 em; /* 12px / 16px */
        margin: 0;
        width: 100%;
  }

  footer p { 
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
  }
}

@media (max-width: 480px) {
  nav li, .col {
    float: none;
    padding: 0;
    width: 100%;
  }

  nav a {
    border-bottom: 0;
  }

  #main {
    font-size: .75 em; /* 12px / 16px */
    margin-left: 0;
    padding: 0 .5em;
  }

  footer {
    margin-top: 10px;
  }

}