/*==========================================================================
GLOBAL
========================================================================== */

html, body{height:100%; width: 100%;} 
body {margin:0; padding:0; position: relative; font-size: 0.938em; color:#333333; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;}

p {line-height: 1.6em; margin: 0 0 15px; font-weight: 400;}
hr {border: 0; border-top: 1px solid #CCCCCC; display: block; height: 1px; margin:0; padding: 0; clear:both;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin:1.25em 0;line-height:1.25em;font-weight:700;font-family:'Open Sans Condensed', 'Arial Narrow', Helvetica, Arial, sans-serif;text-transform:uppercase;}
h1,.h1{font-size:2.645em;letter-spacing:.75px;}
h2,.h2 {font-size:1.935em;letter-spacing:.75px;} 
h3,.h3 {font-size:1.613em;letter-spacing:.04em;}
h4,.h4 {font-size:1.419em; letter-spacing:.04em;} 
h5,.h5 {font-size:1.226em; letter-spacing:.04em;} 
h6,.h6 {font-size:1.143em; letter-spacing:.04em;}

a{text-decoration: none; word-wrap: break-word; color: inherit;}
a.button{text-decoration: none; color: #fff; word-wrap: break-word;}
a:hover{text-decoration: underline;}

.sans {font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
.serif {font-family: 'Merriweather', georgia, serif; }
.condensed {font-family: 'Open Sans Condensed', 'Arial Narrow', Helvetica, Arial, sans-serif; letter-spacing: .75px;}

.extrabold{font-weight: 800;}
.bold{font-weight: 700;}
.normal {font-weight: 400;}
.thin {font-weight:300;}
.center {text-align: center;}
.italic {font-style: italic;}
.large {font-size:1.067em}
.xlarge {font-size:1.133em}
.small {font-size: 0.933em}
.tiny {font-size: 0.867em}
.uppercase {text-transform: uppercase; letter-spacing: .04em;}
.lowercase {text-transform: none;}

.white {color:#fff;}
.black {color:#000;}
.brightred {color:#AD1515;}
.red {color:#961111;}

.gray {color:#666;}
.lightgray {color:#CCC;}
.darkgray {color:#333;}

::selection {background: #961111; color:#fff;}
::-moz-selection {background: #961111; color:#fff;}

.pull-left {float:left;}
.pull-right {float:right;}
.centered {text-align: center;}
.clearfix:after { content: ""; display: table; clear: both;}

.container{position: relative;}

.wrap{width: 100%; padding: 60px 0 80px; position: relative;}
.wrap:after { content: ""; display: table; clear: both;}


/*==========================================================================
HEADER & SLIDER
========================================================================== */


#sequence { margin: 0 auto; position: relative; left: 0; bottom: 0; width: 100%; z-index: 0; overflow-x: hidden; background: #222;}
#sequence > .sequence-canvas > li { position: absolute; width: 100%; height: 100%; z-index: 1; margin: 0 !important; padding: 0 !important; top: 0; }
#sequence > .sequence-canvas { height: 100%; width: 100%; margin: 0 !important; padding: 0 !important;}
#sequence li {list-style: none;}

.slide-wrap {opacity:0; position: relative; height: 100%;}

.animate-in  .slide-wrap{opacity:1;-webkit-transition-duration:2s;-moz-transition-duration:2s;-o-transition-duration:2s;-ms-transition-duration:2s;transition-duration:2s;}
.animate-out .slide-wrap{opacity:0;-webkit-transition-duration:2s;-moz-transition-duration:2s;-o-transition-duration:2s;-ms-transition-duration:2s;transition-duration:2s;}

.lt-ie9 .slide-wrap{ display: none;}
.lt-ie9 .animate-in  .slide-wrap{ display: inherit; transition:none; -ms-transition-duration: 2s; }   
.lt-ie9 .animate-out .slide-wrap{ display: none; transition:none; -ms-transition-duration: 2s; }

.slide-bg {
	width:100%; 
	height:100%; 
	-webkit-background-size: cover;   
	-moz-background-size: cover;   
	-o-background-size: cover;    
	background-size: cover;  
	margin: 0;
	padding: 0;
	z-index: -9;
}

.bg-shootin {background: url(../img/bg-shootin.jpg) no-repeat center center; background-size: cover;}

.bg-sex {background: url(../img/bg-tents.jpg) no-repeat center center; background-size: cover;}

.bg-sign {background: url(../img/bg-sign.jpg) no-repeat center center; background-size: cover;}

.bg-springwater1 {background: url(../img/bg-springwater.jpg) no-repeat center center; background-size: cover;}

.bg-springwater2 {background: url(../img/bg-springwater1.jpg) no-repeat center center; background-size: cover;}

.bg-springwater3 {background: url(../img/bg-springwater2.jpg) no-repeat center center; background-size: cover;}

.bg-forgotten1 {background: url(../img/bg-forgotten-1.jpg) no-repeat center center; background-size: cover;}

.bg-forgotten2 {background: url(../img/bg-forgotten-2.jpg) no-repeat center center; background-size: cover;}



/* ---- HEADER  ---- */

.header-wrap {z-index: 99; position: relative; padding-bottom: 50px;}
.photo-description {
	color: #fff;
	text-shadow: 0 0 20px rgba(0, 0, 0, .5);
	text-transform: uppercase;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 25px auto;
	font-size: 1.133em;
}
.can-do-better {
	font-size: 8.5em;
	text-align: center;
	font-weight: 700;
	text-shadow: 0 0 20px rgba(0, 0, 0, .5);
	line-height: 1em;
	color: #fff;
	margin: 40px 0 70px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
ul.header-buttons{list-style-type:none;padding-bottom:30px;text-align:center;padding:0;}
ul.header-buttons li {display: inline-block; margin: 10px;}


/*==========================================================================
HOMEPAGE (The Rest)
========================================================================== */

.read-more {position: absolute; bottom:0; right:0; padding:5px 10px; background:#961111; color: #fff; display: block; border: 1px #961111 solid; cursor: pointer; }
.read-more:hover {text-decoration: none; background:none; border: 1px #fff solid; }
.read-more.show {display: none;}

.list-item-wrap {margin-top: 30px;}
.list-item {color: #fff; position: relative; padding-left: 40px; margin-bottom: 25px;}
.list-item span {position: absolute; left:0; font-size: 20px; color:#AD1515; font-weight: 700; }

.crime-safety-photos img {margin-top: 25px; }
.btn-crime {margin-top: 25px; text-transform: uppercase; position: relative; display: block; padding: 15px !important;}

.i-pdf {background: url(../img/icons.png) no-repeat transparent 0 -40px; width: 32px; height: 40px; float: left;}
.i-news {background: url(../img/icons.png) no-repeat transparent -32px 0; width: 38px; height: 40px; float: left;}

.takeaction-buttons .btn {margin:50px 20px 20px;}

.news-wrap {margin-top: 30px;}
.news-item {padding-left: 55px;}
.news-item p {font-size: 1.1em; font-weight: 700; margin-bottom: 0; }

ul.getinvloved-buttons {list-style-type: none; padding: 8px 0 0; float: right;}
ul.getinvloved-buttons li {display: inline-block; margin: 10px;}

.submit-story {max-height:0; overflow: hidden; transition: height 2s;}
.submit-story.show {max-height:1000px; transition: max-height 2s;}

/*==========================================================================
FOOTER
========================================================================== */

footer {clear: both; margin:0; padding-top: 45px; position: relative;}

.logo-footer {font-size: 40px; line-height:40px; text-transform: uppercase; text-align: center; color:#fff; margin-top: 15px; float: left;}
.i-envelope {background: url(../img/icons.png) no-repeat transparent -74px -2px; width: 44px; height: 27px; float: left; margin-top: -2px; display: block;}


/*==========================================================================
BUTTONS & FORMS
========================================================================== */

.btn {
	font-size:14px; 
	border: none;
	padding: 7px 22px 7px; 
	cursor: pointer; 
	display: inline-block; 
	position: relative; 
	font-weight: 700; 
	text-transform: uppercase; 
	letter-spacing: .05em; 
	box-shadow:  0 1px 4px rgba(0,0,0,.4); 
}
.btn:hover {text-decoration: none;}

.btn-lg {font-size:16px; padding: 14px 34px;} 

.btn-black {background: #000; color: #fff; border: 1px solid #000;}
.btn-black:hover {color: #fff; border: 1px solid #FFF; }

.btn-red {background: #961111; color: #fff; border: 1px solid #961111;}
.btn-red:hover {color: #fff; border: 1px solid #FFF; }

.btn-white {background: #FFF; color: #000; border: 1px solid #fff;}
.btn-white:hover {color: #000; border: 1px solid #000; }

select, textarea, input{
    color: #555555;
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: box-shadow 0.1s linear 0s;
    padding: 6px;
    margin-right:10px;
}

select:focus, textarea:focus, input:focus {
	-webkit-box-shadow: inset 0 0 5px #848484;
	-moz-box-shadow: inset 0 0 5px #848484;
	border-color: #848484;
	box-shadow: inset 0 0 5px #848484;
	outline: 0;
	outline: thin dotted \9;
}

input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:focus { 
	-webkit-box-shadow: inset 0 0 5px #961111; 
	-moz-box-shadow: inset 0 0 5px #961111; 
	border-color: #961111; 
	box-shadow: inset 0 0 5px #961111;
}

/*==========================================================================
COMMENT GENERATOR
========================================================================== */

.header-comment {background: #000; padding: 20px 0;}
.header-subject {float:right;}

.stage {width: 100%; padding: 75px 0; margin-bottom: 50px; color: #565759;}
.stage h1 { margin-top: 0; }

.comment-box, .input-box {background: #666666; padding:30px; margin-top: 30px; }
.comment-box p, .input-box p {color:#fff; font-size: .925em; }
.submit-box {background:#888888; padding:35px; text-align: center;}
.comment-box select, .comment-box textarea, .comment-box input, .input-box select, .input-box textarea, .input-box input{width: 100%;}
.pba-logo img{width: auto;}

input#city {width: 90% }
input#zip {width: 100px }
textarea {width: 100%;}


/*==========================================================================
MEDIA QUERRIES 
========================================================================== */

@media screen and (max-width:1200px){ 

	img {width: 100%;}
	.can-do-better { font-size: 7em; margin: 40px 0 70px; }

}

@media screen and (max-width:991px){ 
	
	h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {margin:2em 0 1em;}
	.wrap {padding: 25px 0;}
	.logo-footer {float: none;}
	ul.getinvloved-buttons {float: none;}
	.takeaction-buttons .btn {margin:15px 15px;}
	.header-subject {float: none; text-align: center;}

 }

@media screen and (max-width:500px){ 
	
	h1,.h1 {font-size: 2em;} 
	h2,.h2 {font-size:1.75em;} 
	h3,.h3 {font-size:1.5em;}
	h4,.h4 {font-size:1.3em;} 
	h5,.h5 {font-size:1.2em;} 
	h6,.h6 {font-size:1.1em;}
	.can-do-better { font-size: 3em; margin: 45px 0 20px; }
	.btn-lg {font-size:14px; padding: 10px} 
	.header-buttons {margin: 0}
	ul.header-buttons li {margin: 5px;}


 }