/* General Settings */

html {
    line-height: 1em;   }

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



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


 /*-- Outdoor Skills Cources  --*/

.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 0; 
	position: relative; color:white; background-color:#075208; max-width:1100px;}

.Atl { grid-area: Atl; }
.PioPic { grid-area: PioPic; }
.Vdo { grid-area: Vdo; }
.Ppic { grid-area: Ppic; }


.FireContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 52% 44%;
    grid-template-areas: "Atl PioPic" 
	"Vdo Ppic"; }

.fbx1 { margin: 0 0 0 0; padding: 0 0 0 15px ; text-align:left; font-size:16px;}
.fbx2 { margin: 5px 0 0 0; padding: 2px 0 0 0 ; }
.fbx3 { padding: 10px 0 0 15px; margin: 0; color:white;  font-size:16px; 
	text-align:left;}
.fbx4 { padding: 10px 0 0 0 ; margin: 10px 0 0 0; color:white; text-align:left }


h1 {color:white; font-size:30px;}
p {color:yellow;}

#PioPic { position: relative; padding: 0;
			width: 96%; height:auto; display: block; }
#Ppic { position: relative; padding: 0;
			width: 96%; height:auto; display: block; }

.Inv {color:white; font-size:14px; line-height: 1.5em;}
.Inv a { display: inline-block; text-decoration: none;
	letter-spacing: .1em; color: #fff; }
.Inv a:hover { display: inline-block;
	outline: none; color: yellow ; font-weight: bold;
	 padding: 0; border-bottom: 2px solid #E1DB84; }

.row-13 {width:99vw; display: inline-block; margin: 5px 0 0 5px; padding: 0; position: relative; text-align: center; }
.row-14 {width:95%; display: block; padding: 0 0 10px 10px; font-size:16px; background-color:#332222;
	position: relative; color:black; text-align:left; line-height:1.2em;}

.DiscContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 82% 10%;
    grid-template-areas: "Dis Lrn" 
		"Dis Lrn"; }
	
.Dis { grid-area: Dis; }
.Lrn { grid-area: Lrn; }	
	
.fbx5 { margin: 0 0 0 5px; padding: 0 0 0 5px ; text-align:left; font-size:16px;}
.fbx6 { margin: 5px 0 0 0; padding: 2px 0 0 0 ; }	
	
	


<!-- --- Header ; site navigation --- -->
		
<div class="row-1">	
<div class="row-2">
<header>	
<div class="HeaderContainer">
	
  <div class="hbx1 Logo">
	  <img id="Logo" src="images/Logo.png" alt="TBG Logo"/>
	  <br> 
  </div>
	
  <div class="hbx2 Social">
	  <img id="Social" src="images/Social.png" alt="Social Icons"/>
	  <br> 
  </div>
	
  <div class="hbx3 TBG">Tactical Bush Gear<br> 
  </div>
	
	<div class="hbx4 Nav">
	<div class="nv">
	  <ul>
         <li><a href="../../index.html">HOME</a></li>
         <li><a href="../Adventure/Adventure.html">ADVENTURE</a></li>
         <li><a href="../Products/Products.html">PRODUCTS</a></li>
		 <li><a href="../Links/Links.html">LINKS</a></li>
		 <li><a href="../About/About.html">ABOUT US</a></li>
		 <li><a href="../Press/Press.html">PRESS REL.</a></li>
       </ul>
	</div>
	</div>

</div>
</header>
</div>
</div>