/* General Settings */

html {
    line-height: 1em;   }

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

p1 { color:#E5FB00; font-size:20px; text-align:left;}
p2 { color:#FFFFFF; font-size:13px; text-align:left; padding: 0 0 0 0;}
h1 { font-size: 22px;line-height:1.2em;}
          /*-- HEADER  --*/


.row-1 { width:99vw; display: block; position: relative; 
	text-align: center; }
.row-2 { width:99%; display:inline-block; margin: 5px 0 0 5px; 
	padding: 2px 0 10px 2px; position: relative; text-align: center;
	background: #3F4313 ; max-width:1100px;}

header { position: relative; display: block; margin: 5px 0 0 5px; 
	  text-align: center;}

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

.HeaderContainer { display: grid; grid-gap: 2px;  
	grid-template-columns: 24% 24% 45%;
    grid-template-areas: "Logo Social Nav"
	"TBG TBG Nav"; }

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

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

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

/*-- HEADER NAVIGATION --*/

.nv {float:right;}
.nv ul {display: block !important; margin: 0; width:180px;
	padding: 0; position: relative; }

.nv ul li { color: #fff; display: inline-block; position: relative; 
	padding: 0 0 0 8px; }

.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:99vw; display:block; margin: 5px 0 0 5px; 
	position: relative;  text-align: center;  }

.row-11 {width:99%; display: inline-block; padding: 0 0 10px 6px; 
	position: relative; color:white; background-color:#2F453B; 
	max-width:1100px; text-align: center;}


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

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


.Pic1 { grid-area: Pic1; }
.Pic2 { grid-area: Pic2; }
.Pic3 { grid-area: Pic3; }
.Pic4 { grid-area: Pic4; }
.Pic5 { grid-area: Pic5; }
.Pic6 { grid-area: Pic6; }
.NPl1 { grid-area: NPl1; }
.NPl2 { grid-area: NPl2; }
.NPl3 { grid-area: NPl3; }
.NPl4 { grid-area: NPl4; }
.NPl5 { grid-area: NPl5; }
.NPl6 { grid-area: NPl6; }

.NPContainer { display: grid; grid-gap: 1px; position: relative;
	grid-template-columns: 15% 15% 15% 15% 15% 15% ;
    grid-template-areas: 
	" Pic1 Pic1 Pic1 Pic2 Pic2 Pic2"
	" NPl1 NPl1 NPl1 NPl2 NPl2 NPl2"
	" Pic3 Pic3 Pic3 Pic4 Pic4 Pic4"
	" NPl3 NPl3 NPl3 NPl4 NPl4 NPl4"
	" Pic5 Pic5 Pic5 Pic6 Pic6 Pic6"
	" NPl5 NPl5 NPl5 NPl6 NPl6 NPl6" ; }

.fbx1 { margin: 0; padding: 10px 0 0 0 ; }
.fbx2 { margin: 0; padding: 10px 0 0 0 ; }
.fbx3 { margin: 0; padding: 10px 0 0 0 ; }
.fbx4 { margin: 0; padding: 10px 0 0 0 ; }
.fbx5 { margin: 0; padding: 10px 0 0 0 ; }
.fbx6 { margin: 0; padding: 10px 0 0 0 ; }
.fbx7 { margin: 0; padding: 10px 0 0 0 ; }
.fbx8 { margin: 0; padding: 10px 0 0 0 ; }
.fbx9 { margin: 0; padding: 10px 0 0 0 ; }
.fbxA { margin: 0; padding: 10px 0 0 0 ; }
.fbxB { margin: 0; padding: 10px 0 0 0 ; }
.fbxC { margin: 0; padding: 10px 0 0 0 ; }


#Np1 { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto; display:inline-block; }
#Np2 { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto; display:inline-block; }
#Np3 { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto; display:inline-block; }
#Np4 { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto; display:inline-block; }
#Np5 { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto; display:inline-block; }
#Np6 { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto; display:inline-block; }


.row-12 {width:99vw; display:block; margin: 5px 0 0 5px; 
	position: relative;  text-align: center;  }

.row-13 {width:98vw; display: inline-block; padding: 15px 0 0 20px; position: relative; line-height:1.6em; text-align:left; background-color:#2F453B; max-width:1100px;}
 



/* Horizontal Cell View */
@media (min-width: 600px){

            /*--  Header update  --*/ 
	
.nv ul { width: 240px; }	
#Logo {  padding: 10px 0 0 5px;	width: 130px; height:auto; }

#Social { padding: 6px 0 0 10px; width: 130px; height:auto;	}
	
	
.hbx3 { padding: 5px 0 0 0; margin: 0 0 0 10px;
  font-size: 26px;}	
.hbx4 { padding: 8px 0 0 20px; font-size: 14px; }	
.nv ul li {  padding: 0 0 0 10px; }
	
.Lnv {padding:0 0 0 15px;}
}


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


#Social {  width: 150px; height:auto;	}
	
.hbx4 { font-size: 16px; }	
.nv ul li {  padding: 0 0 0 12px; }	
	
	.Lnv {padding:0 0 0 20px;}
}	
	

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

p2 {  font-size:16px; }	
	            /*--  Header update  --*/ 
	
.nv ul { width: 240px; }	
	
#Logo { position: relative; padding: 0;
			width: 20vw; height:auto; max-width:180px;  }

#Social { position: relative; padding: 0;
			width: 20vw; height:auto;  max-width:200px;; }
	
.HeaderContainer { display: grid; grid-gap: 2px;  
	grid-template-columns: 24% 30% 40%;
    grid-template-areas: "Logo Social Nav"
	"Logo TBG Nav"; }	
	
.hbx3 { padding: 10px 0 0 0; margin: 0 0 0 10px;
  font-size: 28px;}	
.hbx4 { padding: 8px 0 0 20px; font-size: 16px; }
	
.nv ul li {  padding: 0 0 0 10px; font-weight: bold;}	

.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" ; }

.Lnv {padding:0 0 0 30px;}


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

/*  Desktop View  --*/


@media (min-width: 1040px){
	
h1 { font-size: 32px;}	
p { color:black; font-size:26px; text-align:left;}	
	
.nv ul { width: 240px; }	

.Lnv {padding:0 0 0 50px;}	

	

	
	
	
	
}