/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,button,input,select,textarea {color: #222;}
html {font-size: 1em;line-height: 1.4;}
::-moz-selection {background: #f20c1a; text-shadow: none; color: #fff;}
::selection {background: #f20c1a; text-shadow: none; color: #fff;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
audio,canvas,img,video {vertical-align: middle;}
fieldset {border: 0;margin: 0;padding: 0;}
textarea {resize: vertical;}
a {color: #9e2f15; text-decoration: none; }
h1, h2, h3 {font-family: "Montserrat", Helvetica, Arial, sans-serif;  text-transform: uppercase;}

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proximanova-regular-webfont-webfont.eot');
    src: url('../fonts/proximanova-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova-regular-webfont-webfont.woff') format('woff'),
         url('../fonts/proximanova-regular-webfont-webfont.ttf') format('truetype'),
         url('../fonts/proximanova-regular-webfont-webfont.svg#ProximaNova') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

  .browsehappy {margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;}

/* ==========================================================================
   Main styles
   ========================================================================== */

html, body {height: 100%;}
body {font-family: "Proxima Nova", Helvetica, Arial, sans-serif; background: url(../images/bg.jpg) no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover; }

#wrapper {min-height: 100%;}
.container {margin: 0 auto;}
.push {overflow:auto; padding-bottom: 52px;}

/* --- / Header / --- */

header {position: absolute; width: 100%; background: url(../images/bg-header.png) repeat; z-index: 99; border-bottom: 3px solid #d8451b;}
#logo img {width: 100%;}

/* --- / Navigation / --- */

#navigation ul {margin: 0; padding: 0;}
#navigation ul li {list-style: none; float: left;}
#navigation ul li a {font-family: "Oswald", Helvetica, Arial, sans-serif; text-transform: uppercase; color: #fff;}
#navigation ul li.donate a {background-color: #ff1919; padding: 5px; display: none;}
#navigation ul li.active a {color: #fdd000;}

/* --- / Banner / --- */

.bxslider {margin: 0; padding: 0;}
#layerslider {width: 100%; height: 590px;}
#layerslider .ls-layer {max-width: 100%; width: 100%;}
#innerbanner {background: url(../images/banner.jpg) no-repeat; height: 500px; width: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#innerbanner h1 {position: absolute; font-family: "Oswald", Helvetica, Arial, sans-serif; margin: 280px 0 0 0;background-color: #e01e26; color: #fff; text-transform: uppercase; padding: 10px 50px 10px 20px; line-height: 1; font-weight: 400; font-size: 30px;}

/* --- / Content / --- */

#welcome .container {text-align: center;}
#donate, #content {background-color: #f9f8f3;}
#donate .container {background: url(../images/bg-volunteer.png) no-repeat center right; text-align: left;}

.pp {margin: 0 0 40px 0;}
.financials {background-color: #f9f8f3; padding: 20px;}
.financials h4 {line-height: 1; margin: 0 0 10px 0;}
.financials ul {margin: 0; padding: 0;}
.financials ul li {list-style: none;}
.financials ul li a {color: #ff1919; font-size: 13px;}

/* --- / Gallery / --- */

.gallery, .services {margin: 0; padding: 0;}
.gallery li, .services li {list-style: none; text-align: center;}
.services img {margin: 0 0 10px 0;}
.services h4 {line-height: 1; margin: 0 0 10px 0;}

#content {text-align: center;}
#map {width: 100%; height: 500px;}

/* --- / Contact / --- */

address {font-style: normal; font-size: 13px;}
adresss span {font-style: italic;}
address p {margin: 0 0 5px 0;}

.column-one .form-group label {margin: 0 0 10px 0;}
.column-one .form-group input, .column-one .form-group textarea {border: 1px solid #ccc; margin: 0 0 15px 0;}

.btn {background-color: #e01e26; font-family: "Oswald", Helvetica, Arial, sans-serif; color: #fff; text-transform: uppercase;}
.submit {background-color: #e01e26; font-family: "Oswald", Helvetica, Arial, sans-serif; color: #fff; text-transform: uppercase; border: none;}

/* --- / Footer / --- */

footer {position: relative; width: 100%; background-color: #000; color: #fff;margin-top: -52px; height: 52px; padding: 30px 0 0 0;}
footer a {color: #fff;}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clear:before, .clear:after {content: " "; display: table;}
.clear:after {clear: both;}
.clear {*zoom: 1;}

/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */


@media only screen and (min-width: 768px) { /* target=768px wide */
	.container {width: 720px;}
	header {padding: 20px 0;}
	.column-one {width: 65%; padding: 0 0 40px 0;}
	.column-two {width: 30%;}
	.column-three {width: 27.5%; padding: 0 20px;}
	.column-wide {padding: 0 0 40px 0;}
	.left {float: left;}
	.right {float: right;}
	#logo {width: 30%;}
	#navigation {width: 65%; padding: 15px 0 0 0;}
	#navigation ul li {margin: 0 10px 0 0;}
	#navigation ul li a {font-size: 14px;}
	#navigation ul li.donate {margin-right: 0;} 
	#donate .container, #content {padding: 40px 0;}
	#donate .column-half {width: 50%;}
	#welcome {padding: 40px 0 80px 0;}
	#welcome .btn {font-size: 24px; padding: 12px 67px;}
	#donate .btn, .submit {font-size: 19px; padding: 12px 35px;}
	.column-one .row .left {float: left;}
	.column-one .row .right {float: right;}
	.column-one .row .form-group {width: 48%;}
	.column-one .form-group input, .column-one .form-group textarea {width: 100%;}
	.slide1 .ls-s2 {width: 293px; margin-left: 15%; margin-top: 16%;}
	.slide1 .ls-s3 {margin-left: 47%; margin-top: 86%;}
	.gallery li, .services li {float: left; width: 32%; margin: 0 14px 0 0;}
	.gallery li a {font-size: .9em;}
	.gallery li img {width: 100%; margin: 0 0 10px 0;}
	.gallery li:nth-child(2n+0) {margin-right: 14px;}
	.gallery li:nth-child(3n+0) {margin-right: 0;}
	.gallery li:nth-child(4n+0) {margin-right: 14px;}
	.services li {float: left; width: 30%; margin: 0 34px 0 0;}
	.services li img {width: 100%;}
	.services li:nth-child(2n+0) {margin-right: 34px;}
	.services li:nth-child(3n+0) {margin-right: 0;}
	.services li:nth-child(4n+0) {margin-right: 34px;}
}

@media only screen and (min-width:1024px ) { /* target=Desktop */
	.container {width:960px;}
	.column-three {width: 29%; padding: 0 20px;}
	#navigation {width: 65%; padding: 20px 0 0 0;}
	#navigation ul li {margin: 0 18px 0 0;}
	#navigation ul li a {font-size: 16px;}	
	.gallery li {width: 24%; margin: 0 10px 0 0; text-align: center;}
	.gallery li:nth-child(2n+0) {margin-right: 10px;}
	.gallery li:nth-child(3n+0) {margin-right: 10px;}
	.gallery li:nth-child(4n+0) {margin-right: 0;}
	.services li {float: left; width: 30%; margin: 0 44px 0 0;}
	.services li img {width: 100%;}
	.services li:nth-child(2n+0) {margin-right: 44px;}
	.services li:nth-child(3n+0) {margin-right: 0;}
	.services li:nth-child(4n+0) {margin-right: 44px;}
	#welcome .btn {padding: 6px 37px;}
	#donate .btn, .submit {padding: 6px 17px;}
}

@media only screen and (max-width: 768px) { /* target= mobile 480 wide */ 
	.container {width:440px;}
	header {padding: 20px 0;}
	#logo {width: 50%; margin: 0 auto 15px auto;}
	.column-one {padding: 0 0 20px 0;}
	.column-three {width: 100%; padding: 0 20px;}
	.column-wide {padding: 0 0 20px 0;}
	#navigation {width: 90%; margin: 0 auto;}
	#navigation ul li {margin: 0 16px 0 0;}
	#navigation ul li:last-child {margin-right: 0;}
	#navigation ul li a {font-size: 13px; font-weight: normal;}
	#navigation ul li.donate a {background-color: none; padding: 0;}
	#donate .container {background: none; text-align: center;}
	#donate .column-half {width: 100%;}
	#donate .container, #content {padding: 20px 0;}
	#welcome {padding: 20px 0 40px 0;}
	.gallery li img {width: 100%;}
	.services li img {width: 100%;}
	.column-one .row .form-group {width: 100%;}
	.column-one .form-group input, .column-one .form-group textarea {width: 100%;}
}

@media only screen and (max-width: 479px) { /* target= mobile ~300 wide */
	.container {width:290px;}
	#logo {width: 70%; margin: 0 auto 10px auto;}
	#navigation {width: 73%; margin: 0 auto;}
	#navigation ul li a {font-size: 14px;}
	#navigation ul li {margin: 0 12px 0 0;}
	#navigation ul li:nth-child(3n+0) {margin-right: 0;}
}


/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}