/* #Site Styles
================================================== */
body {
  background: #FFF; }

span.green {
  color: #69914a; }

/* #Page Styles
================================================== */
#page-container {
  width: 100%; }

.container {
  max-width: 1100px;
  padding: 20px 10px;
  margin: 0 auto; }

.half-left {
  width: 47%;
  padding: 0 1.5%;
  float: left; }

.half-right {
  width: 47%;
  padding: 0 1.5%;
  float: right; }

.half-centered {
  width: 47%;
  padding: 0 1.5%;
  margin: 0 auto; }

.quarter {
  width: 22%;
  padding: 0 1.5%;
  float: left; }

/*
 * Header
 */
#page-container > header {
  color: #FFF;
  background: #33363B;
  border-bottom: 1px solid #E4E4DF; }
  #page-container > header h1 {
    font-size: 1.2em;
    color: #FFF;
    margin: 0;
    line-height: 1.2em; }
  #page-container > header .half-right {
    text-align: right; }

/*
 * Feature
 */
#feature {
  background: #f0f0ed url("../img/header_bg.png") repeat-x bottom;
  border-bottom: 1px solid #E4E4DF; }
  #feature h1 {
    margin-top: 0.18em;
    font-weight: 400;
    font-size: 4em;
    line-height: 1.2em;
    letter-spacing: 1px; }
  #feature p {
    font-size: 1.3em; }
  #feature img {
    max-width: 100%; }
  #feature .container {
    padding: 40px 10px; }

/*
 * Badges
 */
#badges {
  text-align: center;
  background: #F0F0ED;
  border-bottom: 1px solid #E4E4DF;
  position: relative;
  padding: 0 1.5%; }
  #badges .container {
    padding: 10px 0;
    position: relative;
    height: 150px; }
  #badges #badge-summary-screen,
  #badges #badge-summary-mobile {
    line-height: 22px; }
  #badges h2 {
    margin: 10px 0; }
  #badges img {
    vertical-align: top;
    z-index: 1;
    padding: 0 5px;
    padding-top: 30px;
    height: 80px;
    width: 80px;
    -webkit-transition: all 0.15s ease-in-out; }
    #badges img:hover {
      padding-top: 0;
      cursor: pointer; }

#badge-summary-mobile {
  display: none; }

/*
 * Overview
 */
#overview {
  background: white;
  border-bottom: 1px solid #E4E4DF; }

/*
 * Scoial
 */
#social {
  text-align: center; }
  #social img {
    max-width: 100%;
    padding-top: 40px; }
  #social #social-btns {
    margin-top: 20px; }
    #social #social-btns div, #social #social-btns iframe {
      vertical-align: top;
      *display: inline; }
    #social #social-btns .fb-like {
      margin-right: 15px; }

/*
 * Author
 */
#author {
  background: white;
  position: relative;
  z-index: 999; }

#cover {
  text-align: center; }
  #cover img {
    width: 300px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6); }

section h2 {
  font-size: 1.6em;
  font-weight: bold; }
section p {
  text-align: justify; }

/*
 * Footer
 */
#page-container footer {
  background: #F0F0ED;
  border-top: 1px solid #E4E4DF; }
  #page-container footer h3 {
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase; }
  #page-container footer p {
    font-size: 0.9em;
    color: #999;
    margin: 0 0 10px 0; }

/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
  #feature h1 {
    font-size: 3em; }
  #feature p {
    font-size: 1em; }

  #badges img {
    padding-top: 38px;
    height: 60px;
    width: 60px; }
    #badges img:hover {
      padding-top: 15px; }

  a.btn,
  a:visited.btn {
    display: block;
    float: left;
    clear: both;
    margin: 10px 0; } }
/* Tablet Portrait size to standard 960 (devices and browsers) */
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
  .half-left {
    width: 94%;
    padding: 0 3%;
    float: none; }

  .half-right {
    width: 94%;
    padding: 0 3%;
    float: none; }

  .quarter {
    width: 44%;
    padding: 0 3%;
    float: left; }

  #feature .half-left {
    width: 47%;
    padding: 0 1.5%;
    float: left; }
  #feature .half-right {
    width: 47%;
    padding: 0 1.5%;
    float: right; }

  #social img {
    padding-top: 0; }

  a.btn,
  a:visited.btn {
    display: inline-block;
    float: none;
    margin: 10px 10px 10px 0; }

  #badges .container {
    height: auto; }
  #badges img {
    padding-top: 0;
    height: 60px;
    width: 60px; }
    #badges img:hover {
      padding-top: 0; } }
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (max-width: 665px) {
  #feature .container {
    padding: 20px 10px; }
  #feature a.btn,
  #feature a:visited.btn {
    margin: 0 10px 10px 0; }
  #feature h1 {
    font-size: 2em;
    font-weight: bold;
    margin-top: 0; }
  #feature .hidden {
    display: none; }
  #feature img {
    max-width: 200px; } }
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
  #feature {
    text-align: center; }
    #feature .half-left,
    #feature .half-right {
      width: 94%;
      padding: 0 3%;
      float: none; }
    #feature p {
      font-size: 1em; }
    #feature .hidden {
      display: none; }
    #feature img {
      max-width: 75%; }
    #feature .half-right {
      margin-bottom: 20px; }
    #feature a.btn,
    #feature a:visited.btn {
      margin: 0 5px 0px 5px; }

  #badge-summary-screen {
    display: none; }

  #badge-summary-mobile {
    display: block; } }
@media only screen and (max-width: 400px) {
  #feature h1 {
    font-size: 1.6em; }

  #badges h2 {
    font-size: 1.8em; }
  #badges img {
    padding: 5px; }
    #badges img:hover {
      padding: 5px; } }
/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */
/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }

.row:after,
.clearfix:after {
  clear: both; }

.row,
.clearfix {
  zoom: 1; }

/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }