/* --------------------------------------------------------------------- */
/* Primary Styles
/* Author: Angelo Simeoni
/* --------------------------------------------------------------------- */

body {
  color: #F0E7E7;
  background: #100707;
  font-size: 16px;
  line-height: 1.5;
  font-family: "droid-sans-1","droid-sans-2",sans-serif;
}

h1 {
  color: #F2861B;
  font-size: 60px;
  line-height: 1.2;
  font-weight: normal;
  font-family: "league-gothic-1","league-gothic-2",sans-serif;
  text-shadow: 0 1px 0 #C95909, 
               0 2px 0 #C05000,
               0 3px 0 #B94909,
               0 4px 0 #b04000,
               0 5px 0 #A93909,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

h2 {
  color: #F2511B;
  font-size: 48px;
  line-height: 1.0;
  font-weight: normal;
  margin-bottom: 0.5em;
  font-family: "league-gothic-1","league-gothic-2",sans-serif;
  text-shadow: 0 1px 0 #C92909, 
               0 2px 0 #C02000,
               0 3px 0 #B91909,
               0 4px 0 #b01000,
               0 5px 0 #A90909,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

p {
  margin: 0 0 24px 0;
}

a {
  color: #C7C730;
  text-decoration: none;
}

header {
  padding: 48px;
  overflow: hidden;
  background: #302727;
}

header h1 {
  float: left;
}

header h1 a {
  color: #F2861B;
}

header h1 a strong {
  color: #4A3F35;
  font-weight: normal;
  text-shadow: 0 1px 0 #333, 
               0 2px 0 #292929,
               0 3px 0 #222,
               0 4px 0 #191919,
               0 5px 0 #111,
               0 6px 1px rgba(0,0,0,.1),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25)
}

nav {
  overflow: hidden;
}

nav ul li {
  float: left;
}

nav ul li a {
  float: left;
  padding: 0.5em 1em;
  margin: 1em 1em 1em 0px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

header nav {
  float: right;
}

header nav ul li a {
  background: #211B1B;
  text-transform: uppercase;
}

header nav ul li a:hover {
  background: #040303;
}

section {
  padding: 48px;
  overflow: hidden;
  background: #201717;
  zoom: 1;
}

section nav ul li a {
  background: #110B0B;
}

section nav ul li a:hover {
  background: #030202;
}

section article {
  width: 30%;
  float: left;
  padding: 0 1.666%;
}

section article:nth-child(3n-2) {
  clear: left;
  padding: 0 3.333% 0 0;
}

.index section article:first-child img {
  margin: 0;
}

.index section article:first-child p {
  padding: 24px;
  background: #100707;
}  

section article:nth-child(3n) {
  padding: 0 0 0 3.333%;
}

section article img {
  display: block;
  max-width: 100%;
  margin: 0 0 24px 0;
}

footer {
  color: #4A3F35;
  background: #100707;
  text-align: center;
  padding: 48px;
}

footer p {
  margin: 0;
}

/* --------------------------------------------------------------------- */
/* Work
/* --------------------------------------------------------------------- */

.work section {
  padding: 48px 48px 8px 48px;
}

.work section article {
  margin: 0 0 24px 0;
}

.work section article img {
  margin: 0;
}

/* --------------------------------------------------------------------- */
/* FOUT
/* --------------------------------------------------------------------- */

.js h1,
.js h2,
.js nav,
.js article,
.js p {
	visibility: hidden;
}

/* --------------------------------------------------------------------- */
/* Media Queries
/* --------------------------------------------------------------------- */

@media screen and (max-width: 1100px) {

  header {
    padding: 0px;
  }

  header h1 {
    float: none;
    padding: 24px 24px 0 24px;
  }

  header nav {
    float: none;
    margin: 0;
    padding: 0 24px;
  }

  section {
    padding: 24px 24px 0 24px;
  }

  footer {
    padding: 24px 24px 0 24px;
  }

  section article {
    padding: 0;
    float: none;
    width: auto;
  }

  section article:nth-child(3n) {
    padding: 0;
  }

}

@media screen and (max-width: 480px) {

  h1 {
    text-align: center;
  }

  h2 {
    font-size: 36px;
    line-height: 1.333;
    font-weight: normal;
    margin-bottom: 0.666em;
  }

  header nav {
    margin: 0;
    padding-bottom: .5em;
  }

  header nav li {
    float: none;
  }

  header nav li a {
    float: none;
    display: block;
    margin-right: 0;
  }

}