/* General Settings */

html {  line-height: 1em;   }

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


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



 /*-- Links to Resources  --*/
h1 { font-size: 20px; text-align:center;}

.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 5px; 
	background-color:#1A1141; position: relative; color:white; 
	max-width:1100px; text-align: center;}


.Lnv { position: relative;}
.Lnv a { text-decoration: none;	 }
.Lnv a:hover { outline: none; padding: 0; }

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

.Ol01 { grid-area: Ol01; }
.Ol02 { grid-area: Ol02; }
.Ol03 { grid-area: Ol03; }
.Ol04 { grid-area: Ol04; }
.Ol05 { grid-area: Ol05; }
.Ol06 { grid-area: Ol06; }
.Ol07 { grid-area: Ol07; }
.Ol08 { grid-area: Ol08; }
.Ol09 { grid-area: Ol09; }
.Ol10 { grid-area: Ol10; }
.Ol11 { grid-area: Ol11; }
.Ol12 { grid-area: Ol12; }
.Ol13 { grid-area: Ol13; }
.Ol14 { grid-area: Ol14; }
.Ol15 { grid-area: Ol15; }


.LinkContainer { display: grid;  position: relative;
	grid-template-columns: 16% 16% 16% 16% 16% 16%;
    grid-template-areas: 
	"Ol01 Ol01 Ol02 Ol02 Ol03 Ol03"
	"Ol04 Ol04 Ol05 Ol05 Ol06 Ol06" 
	"Ol07 Ol07 Ol08 Ol08 Ol09 Ol09"
	"Ol10 Ol10 Ol11 Ol11 Ol12 Ol12"
	"Ol13 Ol13 Ol14 Ol14 Ol15 Ol15" 
		; }

.lbx01 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx02 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx03 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx04 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx05 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx06 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx07 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx08 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx09 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx10 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx11 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx12 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx13 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx14 { padding: 10px 0 0 0 ; position:relative; display:block;}
.lbx15 { padding: 10px 0 0 0 ; position:relative; display:block;}



#Ol01 { width: 88%; height:auto; max-width:150px; }
#Ol02 { width: 88%; height:auto; max-width:150px; }
#Ol03 { width: 88%; height:auto; max-width:150px; }
#Ol04 { width: 88%; height:auto; max-width:150px; }
#Ol05 { width: 88%; height:auto; max-width:150px; }
#Ol06 { width: 88%; height:auto; max-width:150px; }
#Ol07 { width: 88%; height:auto; max-width:150px; }
#Ol08 { width: 88%; height:auto; max-width:150px; }
#Ol09 { width: 88%; height:auto; max-width:150px; }
#Ol10 { width: 88%; height:auto; max-width:150px; }
#Ol11 { width: 88%; height:auto; max-width:150px; }
#Ol12 { width: 88%; height:auto; max-width:150px; }
#Ol13 { width: 88%; height:auto; max-width:150px; }
#Ol14 { width: 88%; height:auto; max-width:150px; }
#Ol15 { width: 88%; height:auto; max-width:150px; }


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

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

.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 5px; 
	background-color:#1A1141; position: relative; color:white; 
	max-width:1100px; text-align: center;}

.Ot01 { grid-area: Ot01; }
.Ot02 { grid-area: Ot02; }
.Ot03 { grid-area: Ot03; }
.Ot04 { grid-area: Ot04; }
.Ot05 { grid-area: Ot05; }
.Ot06 { grid-area: Ot06; }
.Ot07 { grid-area: Ot07; }
.Ot08 { grid-area: Ot08; }
.Ot09 { grid-area: Ot09; }
.Ot10 { grid-area: Ot10; }
.Ot11 { grid-area: Ot11; }
.Ot12 { grid-area: Ot12; }
.Ot13 { grid-area: Ot13; }
.Ot14 { grid-area: Ot14; }
.Ot15 { grid-area: Ot15; }


.ThirdContainer { display: grid;  position: relative;
	grid-template-columns: 16% 16% 16% 16% 16% 16%;
    grid-template-areas: 
	"Ot01 Ot01 Ot02 Ot02 Ot03 Ot03"
	"Ot04 Ot04 Ot05 Ot05 Ot06 Ot06" 
	"Ot07 Ot07 Ot08 Ot08 Ot09 Ot09"
	"Ot10 Ot10 Ot11 Ot11 Ot12 Ot12"
	"Ot13 Ot13 Ot14 Ot14 Ot15 Ot15" 
		; }

.tbx01 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx02 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx03 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx04 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx05 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx06 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx07 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx08 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx09 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx10 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx11 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx12 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx13 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx14 { padding: 10px 0 0 0 ; position:relative; display:block;}
.tbx15 { padding: 10px 0 0 0 ; position:relative; display:block;}



#Ot01 { width: 88%; height:auto; max-width:150px; }
#Ot02 { width: 88%; height:auto; max-width:150px; }
#Ot03 { width: 88%; height:auto; max-width:150px; }
#Ot04 { width: 88%; height:auto; max-width:150px; }
#Ot05 { width: 88%; height:auto; max-width:150px; }
#Ot06 { width: 88%; height:auto; max-width:150px; }
#Ot07 { width: 88%; height:auto; max-width:150px; }
#Ot08 { width: 88%; height:auto; max-width:150px; }
#Ot09 { width: 88%; height:auto; max-width:150px; }
#Ot10 { width: 88%; height:auto; max-width:150px; }
#Ot11 { width: 88%; height:auto; max-width:150px; }
#Ot12 { width: 88%; height:auto; max-width:150px; }
#Ot13 { width: 88%; height:auto; max-width:150px; }
#Ot14 { width: 88%; height:auto; max-width:150px; }
#Ot15 { width: 88%; height:auto; max-width:150px; }


		/* 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; }
	
h1 { font-size: 24px; text-align:center;}
p1 {font-size:22px; color:white;}	
	
	
.LinkContainer { display: grid; grid-gap: 2px; position: relative;
	grid-template-columns: 16% 17% 16% 17% 17% 16%;
    grid-template-areas: 
	"Ol01 Ol02 Ol03 Ol04 Ol05 Ol06"
	"Ol07 Ol08 Ol09 Ol10 Ol11 Ol12" 
	"Ol13 Ol14 Ol15 Ol16 Ol17 Ol18"  ; }	
	
.ThirdContainer { display: grid; grid-gap: 2px; position: relative;
	grid-template-columns: 16% 17% 16% 17% 17% 16%;
    grid-template-areas: 
	"Ot01 Ot02 Ot03 Ot04 Ot05 Ot06"
	"Ot07 Ot08 Ot09 Ot10 Ot11 Ot12" 
	"Ot13 Ot14 Ot15 Ot16 Ot17 Ot18"  ; }
	



}


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


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



}

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

	
	            /*--  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;}	
	
.hbx3 { margin: 5px 0 0 10px; font-size: 30px;}	
.hbx4 { padding: 20px 0 0 100px ; font-size: 16px; line-height:1.6em; }	
.nv ul li {  padding: 0 0 0 12px; }	


	
}

/*  Desktop View  --*/


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

.nv ul { width: 340px; }
.hbx3 { margin: 10px 0 0 10px; font-size: 30px;}

	
}