/* Override some defaults */
html, body { background-color: #FFF; }

.content { padding-bottom: 200px; }

body#index .wrapper { background-color: #FFFFFF; }

.wrapper { margin-top: 20px; }

.container > footer p { text-align: center; /* center align it with the container */ }

footer { margin: 0px auto 20px auto; text-align: center; }

footer img { margin-bottom: 20px; }

.container { -webkit-border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px; min-width: 20px; }

/* Used for the default page width */
.subpage { max-width: 900px; }

/* Navbar */
.navbar { margin-bottom: 0; }
.navbar a.brand { text-shadow: none; color: #FFF; padding-top: 1px; padding-bottom: 1px; text-decoration: none; }
.navbar a.brand:hover { color: red; text-decoration: none; }

.navbar-inner { -moz-border-radius: 0; -o-border-radius: 0; -webkit-border-radius: 0; background-color: #444; background: #000000; border-radius: 0; border: 0; color: #fff; font-family: Helvetica; font-size: 10px; height: 20px; line-height: 10px; min-height: 20px; min-width: 10px; padding-bottom: 40px; padding-top: 20px; }

.brand { font-family: 'Open Sans', sans-serif; font-style: normal; font-size: 20px; font-weight: 100; line-height: 100%; letter-spacing: -1px; }

/* Page header tweaks */
.page-header { border-bottom: 1px solid #999; margin: 20px 0px 20px 30px; }

.page-header h1 { font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; font-weight: 200; font-size: 30px; line-height: 100%; letter-spacing: -1px; padding: 0; margin: 50px 0 5px 0px; }

.page-header h4 { padding-top: 20px; }

.page-header p { padding: 0; margin: 10px 0; }

.topbar .btn { border: 0; }

.front-header img { float: left; padding-right: 10px; width: 100px; }

/* ===== Element fixes ===== */
h1 { font-family: 'Open Sans', Helvetica, sans-serif; font-size: 25px; line-height: 35px; -webkit-font-smoothing: antialiased; letter-spacing: -1px; }

li { padding: 3px auto; }

a { color: black; cursor: pointer; text-decoration: underline; font-weight: 600; }
a:hover { color: red; }
a.author-link { color: #666; font-size: 18px; font-weight: 400; font-family: 'Gentium Basic', serif; }
a.author-link:hover { color: red; }
a.author-page-title { text-decoration: none; }
a.author-page-title h1 { margin-left: 30px; }

hr.divider { width: 50%; border-top: 2px solid #474747; }

/* ====== Divs and Ids ===== */
#author-page { font-family: 'Gentium Basic', serif; font-size: 18px; }
#author-page .project-image { max-width: 100%; border-radius: 50%; }
#author-page h4 { margin-top: 0; }
#author-page .role { font-size: 18px; font-weight: 200; }
#author-page a { color: #666; }
#author-page a:hover { color: red; }

.post { font-family: 'Gentium Basic', serif; list-style: none; text-align: center; padding: 80px 0px; }
.post a.post-title { height: 50px; line-height: 50px; text-align: center; padding-bottom: 30px; text-decoration: none; }
.post a.post-title:hover, .post a.post-title.more:hover { color: red; }
.post h3 { font-family: 'Open Sans', Helvetica, sans-serif; text-align: left; font-size: 2em; font-weight: 600; padding-top: 20px; }
.post h3.follow-author { text-align: center; font-size: 1.5em; }
.post a { color: #666; font-weight: 400; }
.post a.more { color: #888; font-weight: 600; }
.post a:hover, .post a.more:hover { color: red; }
.post p { text-align: left; font-size: 1.8em; }
.post p > img { max-width: 100%; }
.post .social-media { text-align: center; padding: 0px; }

.title { margin: 80px auto 25px 100px; font-size: 30px; font-family: Helvetica; font-weight: 200; letter-spacing: -1px; border-bottom: 1px thick #33666; }

.social-media { margin-top: 30px; }
.social-media a { padding: 0 20px 0 20px; color: #000; font-size: 30px; }
.social-media a:hover { text-decoration: none; color: red; }

.post-sm { padding-left: 0px; }
.post-sm a { padding-left: 0px; }

img.post-image { max-width: 300px; max-height: 300px; margin: 0px auto; border-radius: 50%; }

.follow-author { text-align: center; font-size: 1.5em; }

/* ===== Index Page ===== */
#index .post p.social-media { text-align: center; }
#index .projects { margin-bottom: 100px; }
#index .authors h3 { font-family: 'Open Sans', Helvetica, sans-serif; }
#index .hr { width: 50%; border-top: 2px solid #474747; }
#index .hr-alt { width: 50%; border-top: 2px solid #fff; margin-top: 40px; }
#index .banner { background-image: url(/assets/img/banner2.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 400px; color: #FFF; text-align: center; }
#index .banner .banner-title { padding-top: 100px; font-size: 8em; letter-spacing: -5px; font-family: 'Open Sans', sans-serif; font-weight: 800; text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999; }
#index .banner .banner-tagline { font-size: 4em; color: #FFF; }
#index h1 { font-size: 2em; margin: 10% 0 0 15px; }
#index h2 { font-size: 1.5em; margin: 0 0 0 15px; }
#index .posts { list-style: none; padding: 80px 0px; font-size: 2em; text-align: center; font-family: 'Open Sans', Helvetica, sans-serif; }
#index .posts p { text-align: left; }
#index .posts a { height: 50px; line-height: 50px; color: #666; font-weight: 400; text-decoration: none; }
#index .posts a.more { color: #888; font-weight: 600; }
#index .posts a:hover, #index .posts a.more:hover { color: red; }
#index .mc-field-group input { color: #000000; }
#index .card-image { border-radius: 50%; max-width: 100%; position: absolute; -webkit-filter: opacity(100%); -webkit-transition: -webkit-filter .25s; transition: -webkit-filter .25s; }
#index .img-container { position: relative; overflow: hidden; margin: 0px auto; padding-bottom: 60%; max-width: 60%; }
#index .img-container:hover { -webkit-filter: opacity(60%); }
#index .img-container a { padding: 0px; }
#index h1.section-header { text-align: center; margin-top: 50px; margin-bottom: 50px; }
#index a.author-name { text-align: center; text-decoration: none; font-family: 'Open Sans', Helvetica, sans-serif; color: #FFF; }
#index a.author-name h4 { padding: 10px 0; margin: 0; font-size: 1.3em; font-style: normal; font-weight: 300; letter-spacing: .06em; height: auto; }
#index a.author-name p { color: #666; margin: 0 0 60px 0; }
#index a.author-name:hover { color: red; }
#index .listen { text-align: right; }
#index #other-projects { background-color: #E5E5E5; }
#index #contact { margin-right: 0px; background-color: #111; color: #FFF; }
#index a.alt-link { color: #FFF; font-weight: 400; }
#index a.alt-link:hover { color: red; }
#index .made-with-love { margin: 50px 0px; text-align: center; }
#index .mailchimp-row { font-size: 1.5em; padding: 50px 0px; text-align: center; }
#index .about { font-family: 'Gentium Basic', serif; font-size: 1.5em; padding: 50px 0px; text-align: center; }
#index .site-authors { padding-bottom: 60px; }
#index .mc-field-group { padding-bottom: 20px; border-radius: 5px; }
#index #mce-error-response, #index #mce-success-response { display: none; }
#index .hidden-aria { position: absolute; left: -5000px; }
#index .mail-to { font-size: 1.5em; padding: 50px 0px; text-align: center; }
#index .alt-icon { color: #FFF; }
#index .alt-icon:hover { color: red; }

.inner-post-image { padding: 30px 0; }

/* Edit the subscribe form */
::-webkit-input-placeholder { text-align: center; }

:-moz-placeholder { /* Firefox 18- */ text-align: center; }

::-moz-placeholder { /* Firefox 19+ */ text-align: center; }

:-ms-input-placeholder { text-align: center; }

input[type="submit"] { background-color: #111; }
input[type="submit"]:hover { color: red; border-color: red; }

/* ===== Media Queries ===== */
@media (max-width: 767px) { .wrapper { margin-left: 0px; padding-left: 0px; padding-right: 0px; }
  .brand { text-align: center; }
  .text-box h4 { text-align: center; padding-top: 20px; }
  .text-box p { padding-top: 10px; }
  #author-page h1 { text-align: center; margin-top: 20px; }
  #author-page p { font-size: 1.2em; }
  #author-page .project-image { max-width: 200px; margin: 20px auto; }
  img.post-image { width: 75%; }
  .post p { font-size: 1.5em; }
  #index .banner .banner-title { text-align: center; font-size: 4em; }
  #index .posts { font-size: 1.3em; }
  #index .social-media { text-align: center; }
  #index .social-media a { padding: 0 20px 0 20px; }
  #index a.author-name h4 { height: 60px; overflow: hidden; }
  #index a.author-name p { font-size: 12px; height: 80px; margin-bottom: 0px; } }