/* General Settings */

html { line-height: 1em;   }

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

h1 {color:white; font-size:24px; text-align:center; line-height: 1.3em;}
h2 {color:yellow; font-size:20px; text-align:center; line-height: 1.3em;}
p1 {color:white; font-size:12px; text-align:left; line-height:1.3em;}
p2 {color:white; font-size:12px; text-align:left; line-height:1.3em;} 
p3 {font-size:22px; font-weight:500; } 
p {color:#FFF500; font-size:14px; text-align:left;}

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


 /*-- Content  --*/

.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; background-color:black; max-width:1100px; }
.col-10 {width:48%; display: inline-block; margin: 5px 0 0 5px; position: relative; 
	text-align: center; }
.col-11 {width:48%; display: inline-block; padding: 0 0 10px 0; 
	position: relative; }

.Dc1 { grid-area: Dc1; }
.Dc2 { grid-area: Dc2; }
.Dc3 { grid-area: Dc3; }
.Dc4 { grid-area: Dc4; }
.Dc5 { grid-area: Dc5; }

.FishContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 48% 48%;
    grid-template-areas: "Dc1 Dc2" 
			"Dc3 Dc3"
			"Dc4 Dc4"
			"Dc5 Dc5"; }

.dbx1 { margin: 0; padding: 0 0 0 10px ; text-align:left;}
.dbx2 { margin: 0; padding: 20px 0 0 10px ; }
.dbx3 { margin: 0; padding: 5px 0 0 10px; text-align:left;}
.dbx4 { margin: 0; padding: 5px 0 0 10px; text-align:left;}
.dbx5 { margin: 0; padding: 5px 0 0 10px; text-align:left;}

.bnv  { display: inline-block;  text-align: center;}
.bnv a { display: inline-block;  text-decoration: none;
	letter-spacing: .1em; color: #57FFF7; border-bottom: 1px solid #57FFF7;}
.bnv a:hover { display: inline-block; outline: none; color: #AB27F8 ; 
	font-weight: bold; padding: 0; border-bottom: 2px solid #AB27F8; }

#Pic0 { position: relative; padding: 0;
			width: 98%; height:auto; display: block; }
#Pic1 { position: relative; padding: 0;
			width: 98%; height:auto; display: block; }
#Pic1:hover { opacity:0.5; }
#Pic2 { position: relative; padding: 0;
			width: 98%; height:auto; display: block; }
#Pic2:hover { opacity:0.5; }
#Pic3 { position: relative; padding: 0;
			width: 98%; height:auto; display: block; }
#Pic3:hover { opacity:0.5; }
#Pic4 { position: relative; padding: 0;
			width: 98%; height:auto; display: block; }
#Pic4:hover { opacity:0.5; }



.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; line-height: 1.3em; background-color:black; 
	max-width:1100px; text-align:left;}

.Rc1 { grid-area: Rc1; }
.Rc2 { grid-area: Rc2; }
.Rc3 { grid-area: Rc3; }
.Rc4 { grid-area: Rc4; }

.ResourceContainer { display: grid; grid-gap: 1px; 
	grid-template-columns: 24% 24% 24% 24%;
    grid-template-areas: "Rc1 Rc1 Rc2 Rc2" 
						"Rc3 Rc3 Rc4 Rc4"; }

.rbx1 { margin: 0; padding: 15px 0 0 10px; text-align:left;}
.rbx2 { margin: 0; padding: 15px 0 0 10px; text-align:left;}
.rbx3 { margin: 0; padding: 15px 0 0 10px; text-align:left;}
.rbx4 { margin: 0; padding: 15px 0 0 10px; text-align:left;}

.snv a { display:inline-block;  text-decoration: none; text-align:left;
	letter-spacing: .1em; color: #FFF500;}

.snv a:hover { display:inline-block; outline: none; color: #D6B2EB ; 
	text-align:left; padding: 0; 
	border-bottom: 2px solid #D6B2EB; }

.row-30 {width:99vw; display: block; margin: 5px 0 0 5px; 
	position: relative; text-align: center; }
.row-31 {width:99%; display: inline-block; padding: 0 0 10px 10px; position: relative; line-height: 1.3em; background-color:black; 
	max-width:1100px; text-align:left;}

.Ac1 { grid-area: Ac1; }
.Ac2 { grid-area: Ac2; }
.Ac3 { grid-area: Ac3; }

.AppContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 48% 48%;
    grid-template-areas: "Ac1 Ac2" 
	"Ac1 Ac2"; }

.abx1 { margin: 0; padding: 10px 0 0 25px; text-align:left;}
.abx2 { margin: 0; padding: 10px 0 0 25px ; text-align:left;}
.abx3 { padding:0; margin: 10px 0 0 25px;  text-align:left;}


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

p1 {font-size:16px; }
p {font-size:18px; }

}

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


#Social {  width: 150px; height:auto;	}
	
.hbx4 { font-size: 16px; }	
.nv ul li {  padding: 0 0 0 12px; }
	
h1 {color:white; font-size:34px;}
.dbx1 { margin: 0; padding:20px 0 0 10px ; text-align:left;}
.dbx2 { margin: 0; padding: 5px 0 0 10px ; }	
	
}



/* 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;}
	
.FishContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 48% 48%;
    grid-template-areas: "Dc1 Dc2" 
			"Dc3 Dc2"
			"Dc4 Dc4"
			"Dc5 Dc5"; }
.ResourceContainer { display: grid; grid-gap: 1px; 
	grid-template-columns: 24% 24% 24% 24%;
    grid-template-areas: "Rc1 Rc2 Rc3 Rc4" 
						"Rc1 Rc2 Rc3 Rc4"; }	
	
p1 {font-size:18px; }
p {font-size:20px; }

}


/*  Desktop View  --*/
@media (min-width: 1240px){
	
	            /*--  Header update  --*/ 
	
.nv ul { width: 240px; }
.dbx2 { margin: 0; padding: 50px 0 0 10px ; }	
.FishContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 48% 48%;
    grid-template-areas: "Dc1 Dc2" 
			"Dc3 Dc2"
			"Dc4 Dc2"
			"Dc5 Dc5"; }

p1 {font-size:16px; }
p {font-size:22px; }


}