/*
 * Globals
 */

/* Links */
a, a:focus, a:hover { color: #888; }

/* Custom default button */
.btn-default, .btn-default:hover, .btn-default:focus { color: #333; text-shadow: none; background-color: #ccc; border: 1px solid #aaa; }


/*
 * Base structure
 */

html, body { height: 100%; background-color: #fff; }

body { color: #444; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.2); }

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper { display: table; width: 100%; height: 100%; min-height: 100%; }
.site-wrapper-inner { display: table-cell; vertical-align: top; }
.cover-container { margin-right: auto; margin-left: auto; }

/* Padding for spacing */
.inner { padding: 30px; }

/*
 * Header
 */
.masthead-brand { height:100px; width:auto; margin-top: 10px; margin-bottom: 10px; }

.masthead-nav { margin-top:3em; }

.masthead-nav > li { display: inline-block; text-transform: uppercase; }
.masthead-nav > li + li { margin-left: 20px; }
.masthead-nav > li > a { padding-right: 0; padding-left: 0; border-bottom: 1px solid transparent; color: #222; color: rgba(0,0,0,.75); font-weight: normal; font-size: 16px; }
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus { background-color: transparent; border-bottom-color: rgba(0,0,0,.25); }
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus { color: #222; border-bottom-color: #222; }


/**
 * Typography edits
 */

 h1, h2, h3, h4 { font-weight:normal; }
 h1 { font-size:3em; margin-bottom:0.75em; padding:10px 0; color:#000; }

 /*
   Icons
  */
  .social { margin-top:4em; }
  .social-icon { position:relative; height:50px; width:auto; display:inline-block; margin:0 0.5em; }

/*
 * Cover
 */

.cover {
  padding: 0 20px;
}
.cover .btn-lg {
  padding: 10px 20px;
  font-weight: normal;
}


/*
 * Affix and center
 */

@media (min-width: 300px) {
    img.center-block { width:280px; height:auto; }
}

@media (min-width:400) and (max-width: 600px) {
    img.center-block { margin-top:0; width:450px; height:auto; }
}

@media (min-width: 768px) {
  .masthead-brand { float: left; }
  .masthead-nav { float: right; }
  .masthead { position: relative; top: 0; }
  .mastfoot { position: fixed; bottom: 0; color:#555;  }
  .site-wrapper-inner { vertical-align: middle; }
  .masthead,
  .mastfoot,
  .cover-container { width: 100%; }
  img.center-block { width:600px; height:auto; }
}

@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 700px;
  }
  img.center-block { margin-top:0; width:600px; height:auto; }
}