/* General Settings */

html {    line-height: 1em;   }

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

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

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

           /*-- 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;
	max-width:1100px; background: #3F4313 ;}

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



 /*-- Links to Resources  --*/

.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:#1A1141; max-width:1100px;}

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


.Ocn { grid-area: Ocn; }
.Riv { grid-area: Riv; }
.Wlk { grid-area: Wlk; }
.Htl { grid-area: Htl; }
.Car { grid-area: Car; }
.Adv { grid-area: Adv; }
.Air { grid-area: Air; }
.Trn { grid-area: Trn; }
.Rod { grid-area: Rod; }
.Bus { grid-area: Bus; }
.Mot { grid-area: Mot; }
.Ste { grid-area: Ste; }

.LinkContainer { display: grid; grid-gap: 2px; position: relative;
	grid-template-columns: 16% 16% 16% 16% 16% 16%;
    grid-template-areas: 
	" Ocn Ocn Ocn Riv Riv Riv "
	" Wlk Wlk Wlk Htl Htl Htl " 
	" Car Car Car Adv Adv Adv " 
	" Air Air Air Trn Trn Trn " 
	" Rod Rod Rod Bus Bus Bus "
	" Mot Mot Mot Ste Ste Ste "; }

.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 ; }
.tbx5 { margin: 0; padding: 10px 0 0 0 ; }
.tbx6 { margin: 0; padding: 10px 0 0 0 ; }
.tbx7 { margin: 0; padding: 10px 0 0 0 ; }
.tbx8 { margin: 0; padding: 10px 0 0 0 ; }
.tbx9 { margin: 0; padding: 10px 0 0 0 ; }
.tbxA { margin: 0; padding: 10px 0 0 0 ; }
.tbxB { margin: 0; padding: 10px 0 0 0 ; }
.tbxC { margin: 0; padding: 10px 0 0 0 ; }



#Ocn { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto;	display: inline-block; }
#Riv { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto;	display: inline-block; }
#Wlk { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto;	display: inline-block; }
#Htl { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto;	display: inline-block; }
#Car{ position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto;	display: inline-block; }
#Adv { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto;	display: inline-block; }
#Air { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto;	display: inline-block; }
#Trn{ position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto;	display: inline-block; }
#Rod { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto;	display: inline-block; }
#Bus { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto;	display: inline-block; }
#Mot { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto;	display: inline-block; }
#Ste { position: relative; padding: 10px 0 0 0;
			width: 90%; height:auto;	display: inline-block; }

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

.row-21 {width:99%; display: inline-block; padding: 0 0 10px 0; 
	position: relative; color:white; background-color:#1A1141; max-width:1100px;}

.Env {display:block; position: relative;}
.Env a { text-decoration: none;	color: #fff; }
.Env a:hover { outline: none; color: #BB44E1;font-weight: bold; padding: 0;
	border-bottom: 2px solid #BB44E1; }
#Ethn { position: relative; padding: 10px 0 0 0;
			width: 97%; height:auto;	display: inline-block; }
#Mrch { position: relative; padding: 10px 0 0 0;
			width: 97%; height:auto;	display: inline-block; }

.Me { grid-area: Me; }
.Prd { grid-area: Prd; }

.EthanContainer { display: grid; grid-gap: 2px; position: relative;
	grid-template-columns: 24% 24% 24% 24%;
    grid-template-areas: 
	    " Me Me Prd Prd "
		" Me Me Prd Prd " }
		
.ebx1 { margin: 0; padding: 10px 0 0 0 ; }
.ebx2 { margin: 0; padding: 10px 0 0 0 ; }

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

.row-31 {width:85%; display: inline-block; padding: 15px 0 0 10px; position: relative; line-height:1.6em; text-align:left; max-width:1000px;}





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

.LinkContainer { display: grid; grid-gap: 2px; font-size: 16px; position: relative;
	grid-template-columns: 16% 16% 16% 16% 16% 16%;
    grid-template-areas: 
	" Ocn Ocn Riv Riv Wlk Wlk"
	" Htl Htl Car Car Adv Adv" 
	" Air Air Trn Trn Rod Rod"
	" Ste Ste Mot Mot Bus Bus"; }	
	



}


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


#Social {  width: 150px; height:auto;	}
	
.hbx4 { font-size: 16px; }	
.nv ul li {  padding: 0 0 0 12px; }
	
	
.HeaderContainer { display: grid; grid-gap: 5px;  
	grid-template-columns: 24vw 24vw 45vw;
    grid-template-areas: "Logo Social Nav"
	"TBG TBG Nav"; }
	
#Logo { position: relative; padding: 0;
			width: 22vw; max-width:150px; height:auto; display: inline-block; }

#Social { position: relative; padding: 0;
			width: 22vw; max-width:180px; height:auto; display: inline-block; }	
.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; }	

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

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

	h1 { font-size: 26px;}
	
.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"; }	
	
.ibx2 { color: red; margin: 5px 0 0 0; padding: 2px 0 0 0 ; font-weight: bold;
	  font-size: 12px; text-align:left;}
	
.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;}
	
p { color:black; font-size:22px; }
	
}

/*  Desktop View  --*/


@media (min-width: 1240px){
	
h1 { font-size: 32px;}	
	
	            /*--  Header update  --*/ 
	
.nv ul { width: 240px; }
	


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