/* General Settings */

html {
    line-height: 1em;   }

body {
	background-color:#E1DB84;
	font-family: "Arial", Helvetica, sans-serif;
    font-size: 16px;
    margin: 0;
    color: #000; 
}


header { position: relative; display: block; margin: 5px 0 0 5px; width: 99%; background: #3F4313; height: 85px; text-align: center; }

.row-1 {width:410px; display: inline-block; margin: 0; padding: 0; position: relative; text-align:center;}

.Logo { grid-area: Logo; }
.Social { grid-area: Social; }
.TBG { grid-area: TBG; }
.Nav { grid-area: Nav; }

.HeaderContainer { display: grid; grid-gap: 5px;  
	grid-template-columns: 100px 100px 200px;
    grid-template-areas: "Logo Social Nav"
	"TBG TBG Nav"; }

.hbx1 { margin: 0; padding: 3px 0 0 5px ; }
.hbx2 { margin: 0; padding: 10px 0 0 0 ; }
.hbx3 { color: #fff; padding: 0; margin: 0 0 0 5px;
  font-size: 20px;}
.hbx4 { color: #fff; padding: 8px 0 0 5px ; margin: 0 0 0 0;
  font-size: 12px; line-height:1.6em; text-align:left; }

#Logo { position: relative; padding: 3px 0 0 0;
			width: 90px; height:auto;	display: inline-block }

#Social { position: relative; padding:6px 0 0 0;
			width: 90px; height:auto;	display: inline-block }

/*-- HEADER NAVIGATION --*/
.nv ul {display: block !important; margin: 0;
	width: 99%;	padding: 0 0 0 0; position: relative; }

.nv ul li { text-transform: uppercase;	color: #fff; display: inline-block; 
	osition: relative; padding: 0 0 0 4px; }


.nv a { display: inline-block; text-decoration: none;
	letter-spacing: .1em; color: #fff; }

.nv a:hover { display: inline-block; outline: none; color: #BB44E1 ; 
	font-weight: bold; padding: 0; border-bottom: 2px solid #BB44E1; }



 /*-- Forest Service Camping  --*/

.row-10 {width:99%; display:block; margin: 5px 0 0 5px; padding: 10px 0 0 0; 
	position: relative; color: #fff; text-align: center; background-color:#2F453B; }

.row-11 {width:98vw; display: block; padding: 0 0 10px 0; 
	position: relative; color:white;}

.Lnv {display:block; position: relative; text-align:left; font-size:12px; padding:0 0 0 15px;}
.Lnv a { text-decoration: none;	color: #fff; }
.Lnv a:hover { outline: none; color: #FDF400; padding: 0;
	border-bottom: 2px solid #FDF400; }
ul {list-style-type:none; margin: 0 0 0 -20px; line-height:1.2em;}

.dnv {display:block; position: relative; text-align:left; font-size:14px;}
.dnv a {color: #FCFB00; text-decoration: underline;}
.dnv a:hover { outline: none; color: #BB44E1;font-weight: bold; padding: 0;
	border-bottom: 2px solid #BB44E1; }

.Camps { grid-area: Camps; }
.Pic1 { grid-area: Pic1; }
.Pic2 { grid-area: Pic2; }
.Inst { grid-area: Inst; }


.FSContainer { display: grid; grid-gap: 2px; position: relative;
	grid-template-columns: 45vw 45vw  ;
    grid-template-areas: 
	"Camps Pic1 "
	"Camps Pic2 "
	"Camps Inst "	; }

.fbx1 { margin: 0; padding: 10px 0 0 0 ; display: block;}
.fbx2 { margin: 0; padding: 10px 0 0 0 ; }
.fbx3 { margin: 0; padding: 10px 0 0 0 ; }
.fbx4 { margin: 0; padding: 10px 0 0 0 ; }


#Npp { position: relative; padding: 10px 0 0 0;
			width: 40vw; height:auto;	display:block; }
#Fsp { position: relative; padding: 10px 0 0 0;
			width: 40vw; height:auto;	display:block; }

.row-14 {width:40vw; display:block; margin: 5px 0 0 5px; padding: 0 0 0 10px; 
	position: relative; color: #fff; text-align: center; background-color:#2F453B;}
.row-15 {width:99%; display:block; margin: 5px 0 0 5px; padding: 5px 0 5px 0; 
	position: relative; color: #fff; text-align: center; background-color:#2F453B;}

.row-16 {width:98vw; display: inline-block; padding: 15px 0 0 20px; position: relative; line-height:1.6em; text-align:left;}

p1 { color:#E5FB00; font-size:22px; text-align:left;}
p2 { color:#FFFFFF; font-size:16px; text-align:left; padding: 0 0 0 0;}
p3 { color:#FFFFFF; font-size:14px; text-align:left; margin: 0 0 0 0;}
h1 { font-size: 22px;line-height:1.2em;}




/*Tablet View */
@media (min-width: 820px){

	h1 { font-size: 28px;}
	
.row-1 {width:810px; display: inline-block; margin: 0; padding: 0; position: relative; text-align:center;}
	
header { position: relative; display: block; top: 5px;  height: 130px; }	


	
#Logo { position: relative; padding: 10px 0 0 5px;
			width: 140px; height:auto;	display: inline-block }

#Social { position: relative; padding: 6px 0 0 10px;
			width: 170px; height:auto;	display: inline-block }
	
.row-11 {width:810px; color:white; display: inline-block; padding: 10px 0 10px 0; position: relative; font-size: 20px;}
	
.HeaderContainer { display: grid; grid-gap: 10px; color: black; 
	grid-template-columns: 160px 200px 400px;
    grid-template-areas: "Logo Social Nav"
	"TBG TBG Nav"	;  }	
	
.hbx3 { color: #fff; padding: 0; margin: 0 0 0 10px;
  font-size: 30px;}	
.hbx4 { color: #fff; padding: 20px 0 0 100px ; margin: 0;
  font-size: 16px; line-height:1.6em; float:right;}	
.nv ul li {  padding: 0 0 0 12px; }	

.row-11 {width:810px; display: inline-block; padding: 0 0 10px 0; 
	position: relative; color:white; }

.Lnv {display:block; position: relative; }

.LearnContainer { display: grid; grid-gap: 5px; position: relative;
	grid-template-columns: 195px 195px 195px 195px ;
    grid-template-areas: 
	"Eqp Act Skl Svl" ; }

.lbx1 { margin: 0; padding: 10px 0 0 0 ; }
.lbx2 { margin: 0; padding: 10px 0 0 0 ; }
.lbx3 { margin: 0; padding: 10px 0 0 0 ; }
.lbx4 { margin: 0; padding: 10px 0 0 0 ; }

#Eqp { width: 180px; height:auto; }
#Act { width: 180px; height:auto; }
#Skl { width: 180px; height:auto; }
#Svl { width: 180px; height:auto; } 

.row-13 {width:700px; display: inline-block; padding: 15px 0 0 10px; position: relative; line-height:1.6em;}

p { color:black; font-size:22px; text-align:left;}
	
	
}

/*  Desktop View  --*/


@media (min-width: 1040px){
	
h1 { font-size: 32px;}	
	
	
header { position: relative; display: block; top: 5px; width: 99%; background: #3F4313  ; height: 150px; }	
	
.row-1 {width:1000px; display: inline-block; margin: 0; padding: 0; position: relative; text-align: left;}	
	
#Logo { position: relative; padding: 10px 0 0 50px;
			width: 200px; height:auto;	display: inline-block }

#Social { position: relative; padding:6px 0 0 100px;
			width: 220px; height:auto;	display: inline-block }
	
  .HeaderContainer { display: grid; grid-gap: 15px; color: black; 
	grid-template-columns: 220px 240px 600px;
    grid-template-areas: "Logo Social Nav"
	"TBG TBG Nav"	;  }	
	
.hbx3 { color: #fff; padding: 0 0 0 80px; margin: 0;
  font-size: 36px;}	
.hbx4 { font-size: 20px; line-height:1.6em; float:right;}	
	
.nv ul {width:380px; }	
.nv ul li {  padding: 0 0 0 12px; }	

.row-11 {width:1000px; padding: 20px 0 20px 0;}
	
#Eqp { width: 230px; height:auto; }
#Act { width: 230px; height:auto; }
#Skl { width: 230px; height:auto; }
#Svl { width: 230px; height:auto; }  
	
.LearnContainer { display: grid; grid-gap: 5px; position: relative;
	grid-template-columns: 250px 250px 250px 250px ;
    grid-template-areas: 
	"Eqp Act Skl Svl"	
	
.row-13 { width:900px; display: inline-block; padding: 15px 0 0 10px; position: relative; line-height: 1.6em; }
	
p { color:black; font-size:26px; text-align:left;}	
	
	
}