/* General Settings */

html {line-height: 1em; }

body {	background-color:#E1DB84; 
	font-family: "Arial", Helvetica, sans-serif; }

img { opacity: 1; /* initial opacity */
transition: opacity 0.5s ease; /* transition effect */ }
img:hover { opacity: .5; /* final opacity */ }

p  {color:#000; text-align:left; font-size:12px; font-weight: bold; 
	padding: 0 0 0 0;}
p1 {color: red; text-align: center;font-size:14px; font-weight: bold; padding:0 0 0 5px;}
p2 {font-size:12px;  color:yellow ;}
p3 {font-size:12px;  color:#FFFFFF ;}
p4 {font-size:16px;  color:#FFFFFF ;}
h1{color:black; font-size:24px ;}
h2{color:black; font-size:20px ;}
h3{color:#FFFFFF; font-size:20px ;}

           /*-- 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; }



 /*-- Intro Picture and Video  --*/
.row-10 {width:99vw; display: block; position: relative; text-align: center; }
.row-11 {width:99%; max-width:1100px; display: inline-block; 
	margin: 5px 0 0 5px; padding: 5px 0 10px 0;; position: relative; background-color:black;}


.Inv1 { grid-area: Inv1;}
.Inv2 { grid-area: Inv2;}
.Inv3 { grid-area: Inv3;}
.Inv4 { grid-area: Inv4;}

.IntroContainer { display: grid; 
	grid-template-columns: 66% 33%;
    grid-template-areas: "Inv1 Inv2 " 
				"Inv1 Inv3"	
				"Inv4 Inv4";  }

.ibx1 { margin: 0; padding: 0; }
.ibx2 { margin:  0; padding: 0 ; }
.ibx3 { margin:  0; padding: 0 ;}
.ibx4 { margin: 0; padding: 0; display: inline-block; text-align:center;}



.Snv { display: block; font-size:12px; font-weight: bold; text-align:left;}

.Snv a { display: block; text-decoration: none;  padding:0 0 0 5px; color: black;}

.Snv a:hover {display: block; text-decoration: none; color: #E000FF;
	}  

#TopPic { position: relative; padding: 5px 0 0 0;
			width: 97%; height:auto;	display: inline-block }
#pPic { position: relative; padding:  0;
			width: 98%; height:auto;	display: inline-block }
#sPic { position: relative; padding: 5px 0 5px 0;
			width: 98%; height:auto;	display: inline-block }
#hPic { position: relative; padding: 5px 0 5px 0;
			width: 98%; height:auto;	display: inline-block }
#rPic { position: relative; padding: 5px 0 5px 0;
			width: 98%; height:auto;	display: inline-block }
#gPic { position: relative; padding: 5px 0 5px 0;
			width: 98%; height:auto;	display: inline-block }

.row-14 {width:99vw; display: block; position: relative; text-align: center; }
.row-15 {width:99%; max-width:1100px; display: inline-block; 
	margin: 5px 0 0 5px; padding: 5px 0 10px 0;; position: relative; background-color:black;}



video { width:90%; height:auto; display: inline-block; text-align:center;}

/*-- Outdoor Courses  --*/
.row-20 { width:99vw;  display: block;  position: relative; 
	text-align: center;}
.row-21 { width:99%; display: inline-block; position: relative; padding: 20px 0 15px 0;  text-align: center; background-color: Black; max-width:1100px; color: #FFFFFF; margin: 5px 0 0 5px;}

.Skl { grid-area: Skl; }
.Act { grid-area: Act; }
.Svl { grid-area: Svl; }
.Ger { grid-area: Ger; }

.Cnv {font-size: 16px; }
.Cnv a { display: inline-block; text-decoration: none;
	letter-spacing: .1em; color: #FFF; }

.Cnv a:hover { display: inline-block; outline: none; color: #FF0000 ; padding: 0; }

.TrainContainer { display: grid; grid-gap: 4px; position: relative;
	grid-template-columns: 23% 23% 23% 23% ;
    grid-template-areas: "Skl Skl Act Act "
	"Svl Svl Ger Ger " ;}

.tbx1 { margin: 0; padding: 10px 0 0 0 ; }
.tbx2 { margin: 0; padding: 10px 0 0 0 ; }
.tbx3 { margin: 0; padding: 10px 0 0 0 ; }
.tbx4 { margin: 0; padding: 10px 0 0 0 ; }

#Skl { position: relative; padding:6px 0 0 0;
			width: 90%;  height:auto;	display: inline-block }
#Act { position: relative; padding:6px 0 0 0;
			width: 90%;  height:auto;	display: inline-block }
#Svl { position: relative; padding:6px 0 0 0;
			width: 90%;  height:auto;	display: inline-block }
#Ger { position: relative; padding:6px 0 0 0;
			width: 90%;  height:auto;	display: inline-block }



/*-- Blog Posts  --*/

.OtrContainer { display: grid; grid-gap: 1px; color: black; text-align:center; 
	  grid-template-columns: 32% 32% 16% 16% ; font-size:8px;
	  grid-template-areas: "OC1 OC1 OC2 OC2"
						"OC1 OC1 OC2 OC2"
		  				"OC1 OC1 OC2 OC2"; }
.Obx1 { padding: 0; margin: 5px 0 5px 5px; background-color:#F0A1FB;}
.Obx2 { padding: 0; margin: 0;}

.OC1 { grid-area: OC1; padding: 0 0 0 10px;}
.OC2 { grid-area: OC2; padding: 0 0 0 10px;}

.row-25 {width:99vw; display: block;  
	position: relative; text-align:center;}
.row-26 {width:99%; display:inline-block; padding: 5px 0 5px 5px; 
	background-color:black;	position: relative; text-align:center; 
	max-width:1100px; margin:5px 0 0 5px;}
.col-25 {width:65%; display: inline-block;  background-color:#F0A1FB;
	position: relative; text-align:center; padding: 0;}
.col-26 {width:33%; display: inline-block;  
	position: relative; text-align:center;}

.BlogContainer { display: grid; grid-gap: 2px; color: black; text-align:center; 
	  grid-template-columns: 24% 24% 24% 24% ; font-size:8px;
	  grid-template-areas: "BC1 BC1 BC2 BC2"
						"BC3 BC3 BC4 BC4"
		  				"BC5 BC5 BC5 BC5"; }

.bbx1 { padding: 0; margin: 0; font-size: 14px;}
.bbx2 { padding: 0; margin: 0; font-size: 14px;}
.bbx3 { padding: 10px 0 0 0 ; margin: 0; font-size: 13px;}
.bbx4 { padding: 10px 0 0 0 ; margin: 0; font-size: 13px;}

#Prod { position: relative; padding:2px 0 0 0;	width: 90%; 
	max-width:500px; height:auto; display: inline-block }
#TstRev { position: relative; padding:2px 0 0 0;	width: 90%; 
	max-width:500px; height:auto; display: inline-block }
#Hike { position: relative; padding:2px 0 0 0;	width: 90%; 
	max-width:500px; height:auto; display: inline-block }
#New { position: relative; padding:2px 0 0 0;	width: 90%; 
	max-width:500px; height:auto; display: inline-block }

.row-27 {width:70%; display: inline-block; position: relative; 
	color:black; padding: 5px 0 0 10px;	 text-align: left;}

label {  display: block;  font: 1rem 'Fira Sans', sans-serif; }
input,label {  margin: 0.4rem 0; }

.BC1 { grid-area: BC1; }
.BC2 { grid-area: BC2; }
.BC3 { grid-area: BC3; }
.BC4 { grid-area: BC4; }
.BC5 { grid-area: BC5; }

.LinkContainer { display: grid; grid-gap: 1px;  
	  grid-template-columns: 48% 48% ;
	  grid-template-areas: "LC1 LC1 "
						"LC2 LC2 " 
		  				"LC3 LC3 "; }

.LC1 { grid-area: LC1; }
.LC2 { grid-area: LC2; }
.LC3 { grid-area: LC3; }

.Lbx1 { padding: 0 ; margin: 0; }
.Lbx2 { padding: 0 ; margin: 0; }
.Lbx3 { padding: 0 ; margin: 0; }


.Bnv {font-size: 10px; }
.Bnv a { display: inline-block; text-decoration: none;
	letter-spacing: .1em; color: #FFF; }

.Bnv a:hover { display: inline-block; outline: none; color: #FF0000 ; padding: 0; }




.res { display: block; text-decoration: none; font-size:12px;
	 color: black; font-weight: bold; text-align:left;}

.res a {display: block; text-decoration: none; color: black;
	padding:0 0 0 5px;}

.res a:hover { display:block; outline: none; color: #E000FF ;  }






/*-- Our Comunity  --*/

.row-30 { width:99vw; display: block; position: relative;
	text-align: center; }

.row-31 { width:99%; display: inline-block; position: relative; color: #FFF;
	 padding: 0 0 10px 0; text-align: center; background-color: Black; 
	max-width:1100px; margin: 5px 0 0 5px; }

.row-33 { width:99%; display: inline-block; position: relative; color: #FFF;
	 padding: 0 0 10px 0; text-align: center; background-color: Black; 
	max-width:1100px;}

.BePart { grid-area: BePart; }
.SignUp { grid-area: SignUp; }
.Partner { grid-area: Partner; }
.Daja { grid-area: Daja; }

.ComunityContainer { text-align: center;
    display: grid; grid-gap: 10px; grid-template-columns: 45% 45%;
    grid-template-areas: "BePart Daja"
		"SignUp Daja"	
		"Partner Daja"	; }

.Cbx1 { color: #fff;  margin: 0; font-size: 16px; padding: 10px 0 0 0  }
.Cbx2 { margin: 0;  }
.Cbx3 { color: #fff; padding: 10px; margin: 0 0 0 10px; font-size: 20px; 
	line-height: 2em;}
.Cbx4 { margin: 0; font-size: 12px; line-height: 2em; color: red; }

#Daja { position: relative; padding: 2px 5px 0 0;
	width: 90%; height:auto; max-width:230px; display: inline-block;}




/*-- Our Story  --*/

.row-35 { width:99vw;  display: block; position: relative; 
	text-align: center; font-size: 20px; color: #FFF ; }

.row-36 { width:99%; margin: 5px 0 0 5px; display: inline-block; 
	position: relative; padding: 15px 0 15px 0; background-color: Black; 
	text-align: center; font-size: 20px; color: #FFF ; max-width:1100px;}

.row-37 { width:98%; display: block; position: relative; padding: 15px 0 0 0; 
	text-align: center; }

.row-38 { width:90%; margin: 0 0 0 5px; display: inline-block; 
	position: relative; padding: 10px 0 0 0; font-size: 12px; 
	text-align: center;}

.row-39 { width:90%; margin: 12px 0 0 5px; display: inline-block; 
	position: relative; padding: 10px 0 auto 0; font-size: 12px; 
	text-align: center; } 

#Hiker01 { position: relative; padding: 0; text-align: center;
			width: 92%; height:auto;	display: inline-block; }
.Story1 {font-size: 12px; text-align: left; }
.Story2 {font-size: 12px; text-align: left; }



/*-- Have Fun  --*/


.row-40 { width:99vw; display: block; position: relative; 
	  text-align: center; }

.row-41 { width:98%; font-size: 22px; color: #FFF ; display: inline-block; 
	position: relative; text-align: center; margin: 5px 0 0 5px; 
	background-color: Black; max-width:1100px; padding:10px 0 10px 5px;}

.Fun {grid-area: Fun; }
.Wrds { grid-area: Wrds; }
.Us { grid-area: Us; }
.Cook { grid-area: Cook; }
.Con1 { grid-area: Con1; }
.Con2 { grid-area: Con2; }
.Con3 { grid-area: Con3; }


 .FunContainer { display: grid; grid-gap: 1px; position: relative;
	  grid-template-columns: 24% 24% 24% 12% 12%;
    grid-template-areas: "Fun Fun Fun Fun Funb"	
				"Us Us Us Con1 Con2"
				"Us Us Us Con3 Con3"
				"Wrds Wrds Wrds Cook Cook"; }

.fbx1 { font-size: 12px; line-height: 1.5em;  } 
.fbx2 { padding: 5px 5px 0 0; text-align: left;}
.fbx3 { padding: 2px; text-align: left; }
.fbx4 { padding: 2px;}
.fbx5 { padding: 2px;}
.fbx6 { padding: 2px;}
.fbx7 { padding: 2px; text-align: center;}

#Cookie { position: relative; padding: 0; text-align: center;
			width: 70%; height:auto; max-width:145px;	display: inline-block; }
#FB { position: relative; padding: 10px 5px 0 0 ; max-width:75px;
			width: 85%; height:auto; display: inline-block; }
#Inst { position: relative; padding: 10px 5px 0 0 ; max-width:75px;
			width: 85%; height:auto; display: inline-block; }
#You { position: relative; padding: 10px 5px 0 0 ; max-width:75px;
			width: 95%; height:auto; display: inline-block; }



		/* 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; }	
	
            /*--  Intro update  --*/
	

	
	


.ibx2 {  padding: 2px 0 0 0 ;  font-size: 14px;}

	
.Pnv a { max-width:110px; }	
.Snv ul { max-width:110px; line-height: 1.3em;}
	
	       /*--  Skils Training update  --*/
.row-20 { font-size:20px; }	
	
	
.TrainContainer { display: grid; grid-gap: 4px; position: relative;
	grid-template-columns: 23% 23% 23% 23% ;
    grid-template-areas: "Skl Act Svl Ger "
	"Skl Act Svl Ger " ;}
	
	
	       /*--  Blog update  --*/
.bbx1 { font-size: 16px;}
.bbx2 { font-size: 16px;}
.bbx3 { font-size: 16px;}
.bbx4 { font-size: 16px;}
.Bnv {font-size: 12px; }	

		       /*--  Comunity update  --*/
	
 	
	
 	
	/*--  Story update  --*/
	
.Story1 {font-size: 14px; text-align: left; }
.Story2 {font-size: 14px; text-align: left; }


/*-- Fun update  --*/
	
.row-41 {font-size: 26px;   padding: 10px 0 10px 15px; }
.Us {font-size: 14px; width: 95%;}	
.fbx1 {  font-size: 14px; } 	
}

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


#Social {  width: 150px; height:auto;	}
	
.hbx4 { font-size: 16px; }	
.nv ul li {  padding: 0 0 0 12px; }	
	
            /*--  Intro update  --*/



	       /*--  Skils Training update  --*/
.row-20 { font-size:20px;}	

	
.TrainContainer { display: grid; grid-gap: 4px; position: relative;
	grid-template-columns: 23% 23% 23% 23% ;
    grid-template-areas: "Skl Skl Act Act "
	"Svl Svl Ger Ger " ;}
	

	       /*--  Blog update  --*/

.res {  font-size:14px; text-height:1.5em;}
.res a {padding:0 0 0 10px;}
.Bnv {font-size: 14px; }	
	
		   /*--  Comunity update  --*/
	
 	
	       /*--  Story update  --*/
	

          /*-- Fun update  --*/
}
  

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

	
	h2 {font-size: 26px;}
	p{font-size:16px;}
	p1{font-size:16px;}
	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;}	
	
	            /*--  Intro update  --*/

.ibx2 { color: red; margin: 5px 0 0 0; padding: 2px 0 0 0 ; font-weight: bold;
	  font-size: 12px; text-align:left;}	
	


	
		       /*--  Skils Training update  --*/

.row-20 { font-size:22px;}
	
.TrainContainer { display: grid; grid-gap: 4px; position: relative;
	grid-template-columns: 24% 24% 24% 24% ;
    grid-template-areas: "Skl Act Svl Ger "
	"Skl Act Svl Ger " ;}
	
	
			       /*--  Blog update  --*/
	


.Bnv {font-size: 16px; }	
.res { line-height: 1.5em; padding:10px 0 0 0 ;}
.res ul li { padding: 2px 0 0 10px; }
	
		
	
}

	
/*  Desktop View  --*/
@media (min-width: 1240px){
	
	            /*--  Header update  --*/ 
	
	

.nv ul { width: 240px; }	
	

	
	            /*--  Intro update  --*/

	
		       /*--  Skils Training update  --*/


	
			       /*--  Blog update  --*/
.bbx1 { font-size: 18px;}
.bbx2 { font-size: 18px;}
.bbx3 { font-size: 18px;}
.bbx4 { font-size: 18px;}	

	
}