* {
	margin:0;
	padding:0;
}
html, body {
	height:100%;
	font-family:"Myriad Pro Regular", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
html,
body
{
	height:100%;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */
body
{
  overflow-x: hidden;
  background-color:black;
  height:100%;
}
#menu {
	background-image:url(../images/images/headerBackground_01.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	height:170px;
	position:fixed;
	top:0;
	z-index:1000;
	border-bottom:5px solid black;
	border-top:opx;
	margin:0 auto;
	
}
nav {
	width:100%;
	margin:0 auto;
	height:100%;
	position:fixed;
	z-index:2000;
}
nav ul {
	font-family: 'Philosopher', sans-serif;
	font-weight:bold;
	font-style:none;
	margin:98px auto 0 auto;
	height:50px;
	width:960px;
	
}
nav li {
	float:left;
	list-style:none;
	width:16.5%;

}
nav  li a {
	color:#3280b0;
	font-family: 'Martel Sans', sans-serif;
	font-size:1em;
	text-decoration: none;
	padding:2px;
	 letter-spacing: 1px;
	 text-shadow: 1px 1px .5px black;		 
}


nav  li a:hover {
	color:black;
}

#drawer-toggle { 
position: absolute; 
opacity: 0; 

}
#drawer-toggle { 
dispaly:none;
}
#drawer-toggle-label { 
dispaly:none;
}
#dis-None {
	display:none;
}
.logo {
	width:200px;
	height:96px;
	margin:0 auto;
	background-image:url(../images/pikesPeakLogo.png);
	background-repeat:no-repeat;
	background-size:contain;
	padding-bottom:20px;
	position:fixed;
	left:50%;
}

h1
{
  font-size: 20px;
  font-weight: normal;
  color: #2e6e80;
}

/**
  * important: keep position fixed, you can however use top:0 instead of bottom:0
  * if you want to make it stick to the top of the browser
  */
.scroll
{
  position: fixed;
  top:0;
  left: 0;
}

/**
  * z-index ordering of the different layers, do this for your layers,
  * also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
  */
.horizon
{
	height:100%;
	margin:auto;
  z-index: -1000;
  width: 3300px;
  background-image:url(../images/pikes%20peak.jpg);
  background-repeat:no-repeat;
  background-size:cover;
}
.horizon2
{
background-image:url(../gearBackground.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:100%;
	position:fixed;
}
.horizon3
{
background-image:url(../safetyBackground.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:100%;
	position:fixed;
}
.horizon4
{
background-image:url(../nightBackground.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:100%;
	position:fixed;
}
.middle
{
	height:100%;
  z-index: -100;
  width: 4000px;
  margin-top: 70px;
}

.front
{
  z-index: -50;
  width: 6500px;
}

.post {
	position:relative;
	z-index:100;
	width:40%;
	background-color:rgba(200,194,186,.96);
	padding:20px;
	display:inline-block;
	margin-bottom:30%;
	margin-top:200px;
	margin-left:50%;
}
.post p {
	line-height:1.5em;
	padding:10px 0;
	}
.post h2 {
	  font-size: 60px;
	color:#3280b0;
	text-shadow: 1px 1px 2px black;
	padding:0;
	margin:0;
}
.post ul {
	text-decoration:none;
}
.post li {
	list-style:none;
	line-height:1.5em;
}
.post img {
	width:100%;
}
footer {
		background-image:url(../images/images/headerBackground_01.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	position:fixed;
	bottom:0;
	border-bottom:0px;
	border-top:5px solid black;
	margin:0 auto;
	height:15%;
	z-index:2000;
}
footer ul {
	position: relative;
	float:left;
	text-decoration:none;
	background:rgba(255,234,92,.3);
	margin-left:20px;
	padding:10px 20px 0 20px;
	-webkit-animation: mymove 5s ; /* Chrome, Safari, Opera */
    animation: mymove 5s;
}
footer ul li {
	list-style:none;
}
footer ul li a {
	color:#3280b0;
	font-family: 'Martel Sans', sans-serif;
	font-size:.8em;
	text-decoration: none;
	padding:2px;
	letter-spacing: 1px;
}
footer li a:hover {
	color:black;
}
#stayPut {
	margin:0;
	margin-top: 150px;
	margin-bottom:170px;
	margin-left:40px;
	padding:15px;
	background-color:rgba(200,194,186,.6);
	padding-bottom:50px;
}
#stayPut li {
	padding-left:70px;
	font-size:1em;
}
#stayPut h3 {
	padding:20px;
}
#stayPut p {
	padding:10px 20px;
	line-height:1.5em;
}
.borderbox {
	border-bottom:5px solid black;
	padding:20px 0;
	background-color:rgba(200,194,186,.9);
	width:100%;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 20px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 20px;}
}
@media screen and (min-width: 769px) and (max-width: 959px) {
	.post h2 {
	  font-size: 50px;
}
.post p {
	font-size:.9em;
	padding:20px;
	}
	nav li {
	width:30%;
	margin:0;
	height:25px;
}
nav ul {
	padding-left:70px;
}
nav li a {
	text-decoration:underline;
}
}


@media screen and (max-width: 768px) {
* {
	margin:0;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box; 
	box-sizing: border-box;  
	-webkit-transition: .25s ease-in-out; 
	-moz-transition: .25s ease-in-out; 
	-o-transition: .25s ease-in-out; 
	transition: .25s ease-in-out; 
	-webkit-text-size-adjust: none;
}

.hide {
		display:none;
	}
footer {
		height:115px;
		margin:0;
		position:relative;
	}
footer a {
	font-size:.7em;
	
}
footer ul {
	margin:0;
	background-color:transparent;
}
footer li {
	width:100;
}
.post {
	width:100%;
	margin-left:0;
	padding:0;
}
.post p {
	line-height:1.5em;
	font-size:.8em;
	padding:20px;
}
.post h2 {
	  font-size: 40px;
	color:#3280b0;
	text-shadow: 1px 1px 2px black;
	padding:0;
	margin:20px 0 0 20px;
}
.post ul {
	text-decoration:none;
}
.post li {
	list-style:none;
	line-height:1.5em;
	font-size:.8em;
	padding:5px 0 5px 20px;
}
.post h3 {
	padding:20px;
}
.post img {
	width:90%;
	
}
.center {
	text-align:center;
	padding-bottom:20px;
}
//nav

#drawer-toggle { 
position: absolute; 
opacity: 0; 
z-index:2000;
}

#drawer-toggle-label { 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
left:2%;
height:70px; 
width: 70px; 
display: block; 
position: fixed; 
z-index: 2; 
font-size: 45px; /* used for font-awesome icon */
padding: 28px 10px 0 10px;
color:black;
z-index:2000;
} 

/* mixes our font awesome icon with an area for it*/ 

#drawer-toggle-label:before { 
content: ''; 
display: block; 
position: absolute; 
left: 13px; 
top: 0px; 
} 



/* drawer menu pane - note the 300px width and the -300px left position */ 

#drawer { 
position: fixed; 
top: 0; 
left:-250px; 
height: 100%; 
width: 250px; 
background-color:rgba(255,255,255,1.0); 
overflow-x: hidden; 
padding: 20px; 
-webkit-overflow-scrolling: touch; 
z-index:2000;
margin:0;
/*allows us to have smooth phone-like scrolling*/
} 

/* actual page content pane */ 

#page-content {
	position:relative; 
	z-index:0;
margin-left: 0px;
padding-bottom: 100px;
width: 100%; 
height:calc(100% - 100px); 
/*overflow-x:hiden;*/
/*overflow-y:scroll; */
-webkit-overflow-scrolling: touch;
background-image:url(images/background_02.jpg);  
}

/* checked styles (menu open state) 
If this is checked, then this style is affected. These are adjacent sibling combinations*/ 

#drawer-toggle:checked ~ #drawer-toggle-label { 
height: 100%; 
width: calc(100% - 250px); 
background:rgba(200, 194, 186, 0.9);
top:0; 
} 

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header { 
left: 250px;
width: 100%; 
} 

#drawer-toggle:checked ~ #drawer { 
left: 0px;

} 

#drawer-toggle:checked ~ #page-content { 
margin-left: 300px; 
}

/* Menu item styles */ 

#drawer ul { 
list-style-type:none; 
}
#drawer li {
	background-color:rgba(254,254,254,0);
	width:100%;
	}

#drawer ul a { 
display:block; 
padding:10px; 
color:#3280b0; 
text-decoration:none;
 text-shadow: none; 
} 

#drawer ul a:hover { 
color:black; 
}
.logo {
	left:30%;
	z-index:99999;
}
#menu {
	height:105px;
}
#stayPut {
	margin-left:0;
	margin-top:100px;
	margin-bottom:0;
	padding-bottom:170px;
	padding-left:20px;
}
#stayPut li {
	padding-left:70px;
	font-size:.8em;
	
}
#stayPut h3 {
	padding:20px;
}
#dis-None {
	display:block;
}
.horizon
{
background-image:url(../background.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:100%;
	position:fixed;
}
.horizon2
{
background-image:url(../gearBackgroundSM.jpg);
}
.horizon3
{
background-image:url(../safetyBackgroundSM.jpg);
	
}
.horizon4
{
background-image:url(../nightBackgroundSM.jpg);
	
}

.middle
{
display:none;
}

.front
{
 display:none;
}

}


