@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,700italic,400italic,300italic);
@import url(http://fonts.googleapis.com/css?family=Neuton:700,400italic);

* { border-radius: 0 !important;}

pre {font-family:monospace; white-space:pre; font-size: 6px; margin: 0;}

h1, h2, h3, h4, h5 {font-family: 'Roboto', sans-serif;}
.page-header h1,
.content-header h2 { margin: 0;}
.content-header h2 { color: #00b5ad; margin: 1em 0; padding: 0.5em 0; font-size: 1.6em; line-height: 1.4; border-top: 1px solid #00b5ad; border-bottom: 1px solid #00b5ad;}
h1 { font-size: 1.6em; letter-spacing: 0.75px; line-height: 1.2;}
h2 { font-size: 1.2em; text-transform: uppercase;}

.lead p,
p.italic-slab,
p.bold-slab { font-family: 'Neuton', serif; font-weight: 400 !important; font-style: italic; line-height: 1.2;}
p.bold-slab,
.lead a { font-weight: 700 !important; font-style: normal !important;}
.bold-sans { font-family: 'Roboto', sans-serif; font-size: 1.5em;}
.lead a { color: #fff !important; text-decoration: underline !important;}

p.normal-copy { font-family: 'Roboto', sans-serif; font-size: 0.85em; font-style: normal; font-weight: 300 !important; line-height: 1.3;}

.red { color: #ff5e81 !important}

a:hover,
a:focus { text-decoration: none;}

body { font-family: 'Roboto', sans-serif; color:#595653; background: #595653;}

div#primary-content { overflow:auto; overflow-x: hidden; background:#fff; padding: 0 0.5em;}

.page-header,
.lead,
.form-lead { background: #ff5e81; color: #fff;}
.form-lead { margin: -1.5em 0 0; padding: 0 3.4em 1em !important; font-size: 1.2em;}
#answer { margin: 0.5em 0; padding: 2em; background: #efefef;}
#answer h2 { margin-bottom: 1em;}

#usermenu {position:absolute; top:10px; right:20px;}

.alerts {margin-top:1em;}
#masthead { text-align: center;}
#masthead .content { margin-top: 3em;}
#tagline {display: block; padding: 0.25em 0; margin: 1em 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff; font-size: 0.75em; color: #fff;}
#tagline span { margin-left: 15px;}

#branding img {max-height: 4em; margin: 0 auto;}

#primary-navigation { text-align: center; margin: 2em 0 1em;}
body.mvc-controller-index #primary-navigation { display: none;}
.navigation { padding: 0;}
#primary-navigation li { display: inline-block; margin-bottom: 1em; padding: 0 0.65em;}
#primary-navigation li a { display: block; padding: 0 3px; font-size: 1em; font-weight: 700; text-align: right; text-transform: uppercase; font-style: italic;}
#primary-navigation li a:link,
#primary-navigation li a:visited { color: #fff;}
#primary-navigation li a:hover,
#primary-navigation li a:focus { color: #00b5ad;}

#jumbo-links {background:#ff5e81; list-style-type:none; padding:2%; margin:0.5em 0 0; overflow:auto;}

#jumbo-links a {color:#fff; display:block; padding:1.5em; border-bottom: 0.3em solid #fff;}
#jumbo-links li#j-ask a { border-bottom: none;}

#jumbo-links strong {display:block; text-indent:-9999em; padding-top:4em;}

#jumbo-links li a { position: relative; background-size: auto 3em !important; background-repeat: no-repeat !important; background-position: center 15px !important;}

#jumbo-links li a span { display: block; margin-bottom: 0.5em;}
#jumbo-links li a span.span-wrap { position: absolute; width: 100%; left: 0; bottom: 0.25em; margin: 2em 0 0; text-align: center; font-size: 1em; line-height: 1em; text-transform: uppercase; font-style: italic;}

#jumbo-links li:nth-child(1) a { background: url(/img/love-bars.png); border-right-color: #fff; border-bottom-color: #fff;}
#jumbo-links li:nth-child(2) a { background: url(/img/learn-bars.png);}
#jumbo-links li:nth-child(3) a { background: url(/img/act-bars.png);}
#jumbo-links li:nth-child(4) a { background: url(/img/ask-bars.png); margin: -0.3em 0 0 -0.3em; border-left-color: #fff; border-top-color: #fff;}

.insta-feed { padding: 0.5em 0; background: #fff; overflow:auto;}
.insta-feed img { display: block; float: left; width: 25%; padding: 0.15em;}

body.mvc-controller-index #banner { display: none;}

.well { background: url(/img/graphics/form-bg.jpg) no-repeat center; background-size: cover;}
.well .col-lg-offset-12.col-lg-12 { margin-left: 0;}
.form-group label { text-align: left !important; max-width: 100%;}

.entity-list,
.entity-text { margin: 0.5em 0; padding: 0;}
.entity-text { margin-top: 1em;}
.entity-list .col-sm-6 { padding: 0 1em;}

.thumb { margin-bottom: 2em; padding: 0 2em;}
.thumb img { max-width: 100%; height: auto;}

#footer { margin: 2em 0; text-align: center; color: #a3a29d;}

#footer .hashtag { margin-bottom: 20px;}
#footer .hashtag a { font-size: 1.5em; padding-bottom: 10px; border-bottom: 1px solid #a3a29d;}
.foot-section { font-size: 0.8em; margin-top: 10px;}

#footer #ginger span { display: block; max-width: 185px; margin: 0 auto;}
#footer #ginger a span { margin-bottom: 7px; padding-bottom: 10px; border-bottom: 1px solid #a3a29d;}

#footer .logos,
#footer .logos div { margin: 1em 0 0.5em;}
#footer .logos img { width: auto; max-width: 100%; max-height: 50px; }

#redhead { padding-top: 10px !important; border-top: 1px solid #a3a29d;}

.media {margin-bottom:1em; padding-bottom:1em; border-bottom:1px solid #ccc;}

#pledge-form  input[type=radio]{ display:none;}

.btn-pledge { display: inline-block; margin-bottom: 0.5em; padding: 0.5em 3em 0.5em 1em; font-size: 0.8em; background: url(/img/graphics/arrow.png); background-size: 100% 100% !important; outline: none !important; border:none !important; color: #fff !important; text-transform: uppercase; letter-spacing: 0.075em; box-shadow: none !important;}
.btn-pledge:hover { background: url(/img/graphics/arrow-hover.png);}

.lte-ie8 #pledge-form  input[type=radio]{ display:block; position: absolute; top: 0; left: 0;}

input[type=radio] + div>img{ cursor:pointer; width:100%; height: auto; border:5px solid transparent;
    -webkit-transition: border-color .1s linear;
    -moz-transition: -color .1s linear;
    transition: border-color .1s linear;
}
input[type=radio]:checked + div>img{ border-color: #00b5ad;}
#pledge-form label.radio {float: left; width: 48%; margin: 0; padding: 1em 0;}
#pledge-form label.radio:first-child { margin-right: 4%;}
div.decals p.caption { text-transform: uppercase; font-size: 0.75em; color: #fff; text-align: center;}

/* body.mvc-controller-love #pledge-form .well .form-group:nth-child(8) .col-lg-12:last-child { position: relative; width: calc( 100% - 4em ); margin: 0 2em; padding: 0 1em; background: #595653; overflow: auto !important;} */

body.mvc-controller-love .lead { margin-top: -1.2em;}
body.mvc-controller-love .lead span { display: none;}

textarea { max-height: 200px; resize: none;}

button#submit { background: #ff5e81; border: none; box-shadow: 0 0 3px #999;}
button#submit:hover { background: #00b5ad;}

.panel-heading { padding: 0;}
.panel-heading h2 { margin: 0;}
.panel-heading h2 a { display: block; padding: 15px;}

#form-collapse { margin-top: 0.5em;}

.list-group a.list-group-item { margin-bottom: 0.5em; padding: 2em; background: #e6e6e5; box-shadow: none; border: 0;}
h3.list-group-item-heading { font-size: 1.25em; font-weight: 300;}
h3.list-group-item-heading { color: #595653; font-weight: 400;}
a.list-group-item p,
.list-group-item-text { color: #797471;}
.list-group a.list-group-item:hover { background: #dedddd;}
.list-group a.list-group-item:hover p.list-group-item-text,
.list-group a.list-group-item:hover p { color: #00b5ad;}

.list-group a:hover,
.list-group a:focus { }

a.dont-forget { display: block; text-align: center; font-size: 1.5em; padding: 1em 0.5em; font-weight: 700; text-transform: uppercase; font-style: italic;}
a.dont-forget.view-more { margin-bottom: 0.5em;}

/* a.dont-forget.view-more:after { content: url('/img/heart-flipped.png'); margin-left: 0.25em;} */

ul#pledges { padding: 0; text-align: justify;}
ul#pledges li { list-style-type: none; display: inline; font-size: 0.75em; padding-right: 0.1em;}
ul#pledges li:nth-child(2n+2) { color: #aaa;}
ul#pledges li span.pledge-who { text-transform: uppercase;}

#pledge-counter p { font-size: 1.5em; text-transform: uppercase; font-style: italic; font-weight: 700; color: #00b5ad;}
#pledge-counter p span { text-decoration: underline;}

.pagination { margin-left: 0.5%;}

@media (min-width: 768px) {
    
    body.mvc-controller-index #primary-navigation { display: block;}
    h2 { font-size: 1.8em;}
    h1 { font-size: 1.9em;}
    #primary-navigation { margin: 3em 0 2em;}
    html, body, .wrapper {height:100%;}
    #branding { height: 34px;}
    div#primary-content {min-height:100%;}
    #masthead>.inner {position:fixed; width:124.99999999px; top:1em;}
    #primary-navigation li { display: block; margin-bottom: 1em;  padding: 0;}
    #primary-navigation li a { font-size: 1.5em;}
    #tagline span { margin-left: 0;}
    #jumbo-links { margin-top: 0;}
    #jumbo-links a { padding:20%; border: 0.3em solid transparent; min-height:250px;}
    #jumbo-links li {width:50%; float:left; margin:0; padding:0;}
    #jumbo-links li a { background-position: center !important;}
    #jumbo-links li a span.span-wrap { bottom: 1.5em;}
    #banner { width: 100%; height: 321px; background-size: cover !important;}
    body.mvc-controller-learn #banner,
    body.mvc-controller-authentication #banner,
    body.mvc-controller-how #banner { background: url(/img/graphics/banner1.jpg) no-repeat center;}
    body.mvc-controller-love #banner { background: url(/img/graphics/banner2.jpg) no-repeat center;}
    body.mvc-controller-act #banner { background: url(/img/graphics/banner3.jpg) no-repeat center;}
    body.mvc-controller-ask #banner { background: url(/img/graphics/banner4.jpg) no-repeat center;}
    .thumb { padding: 0 0.5em;}
    .well{ padding:1em 3em;}
    .text-warning{ padding: 1em 4em;}
    body.mvc-controller-love .lead { margin-top: 0;}
    body.mvc-controller-love .lead span { display: block;}
    #footer .logos img { max-width: 130px;}
    
}
@media (min-width: 992px) { #answer { padding: 2em 4em;} .list-group a.list-group-item { padding: 2em 4em;} body.mvc-controller-love .pagination{float:left;} .pagination,#pledge-counter{margin:2em 4em;} #pledge-counter { display: inline-block; float: right;} .entity-text { padding: 0 4em;} .page-header{padding:2.5em 4em 1.5em;} .lead{padding:0 3.4em 1em;} .form-lead { padding: 0 4em 1em;} #masthead>.inner { margin-left: -1em;} #footer { margin: 0; text-align: left;} #footer div { padding: 0;} #footer .row { width: 190px; margin-left: 0;} #footer>.inner { position:fixed; bottom:4em;} #jumbo-links li a span { display: none; bottom: auto !important;} #jumbo-links li a:hover span, #jumbo-links li a:focus span { display: block;} ul#pledges li { font-size: 0.9em;}
    #jumbo-links li:nth-child(1) a { background: url(/img/love.png);}
    #jumbo-links li:nth-child(2) a { background: url(/img/learn.png);}
    #jumbo-links li:nth-child(3) a { background: url(/img/act.png);}
    #jumbo-links li:nth-child(4) a { background: url(/img/ask.png);}
    #jumbo-links li:nth-child(1) a:hover,
    #jumbo-links li:nth-child(1) a:focus { background: url(/img/love-bars.png);}
    #jumbo-links li:nth-child(2) a:hover,
    #jumbo-links li:nth-child(2) a:focus { background: url(/img/learn-bars.png);}
    #jumbo-links li:nth-child(3) a:hover,
    #jumbo-links li:nth-child(3) a:focus { background: url(/img/act-bars.png);}
    #jumbo-links li:nth-child(4) a:hover,
    #jumbo-links li:nth-child(4) a:focus { background: url(/img/ask-bars.png);}
}
@media (min-width: 1200px) { #masthead>.inner { width:150px;} #jumbo-links { padding: 5% 10%;}}
@media (max-height:672px) { #masthead>.inner, #footer>.inner {position:static; width:auto;}}