/* General Settings */

html {
    line-height: 1em;   }

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

p {color:white; text-align: left; line-height: 1.2em; font-size:14px; }
p1 {color: white; text-align: center; font-size:13px;}
p2 {color:white; font-size:16px; text-align: left;}
p3 {font-size:18px;	color: red;  text-align: left; with:95%; line-height: 1.5em; }
h1 {color:white; font-size:24px;}
h2 {color: darkred;font-size:21px; text-align:center;}
h3 {color:black; font-size:26px;}



/*--  HEADER  --*/


header { width:99vw; position: relative; display:block;  
	text-align: center; margin: 5px 0 0 5px;}
.row-1 {width:99%;  display: inline-block;  position: relative; 
	text-align: center; background:#898951; max-width:1100px; 
	padding: 5px 0 10px 0 ;}

.HeaderContainer { display: grid; grid-gap: 1px;
	grid-template-columns: 6% 12% 12% 16% 16% 15% 15% 6%;
    grid-template-areas: "Logo Logo Soc Soc Soc Nav Nav Nav"
				"Bk2 How How How How How How Bk1"	;  }

.Logo { grid-area: Logo; }
.Soc { grid-area: Soc; }
.How { grid-area: How; }
.STD { grid-area: STD; }
.Nav { grid-area: Nav; } 
.Bk1 { grid-area: Bk1; }
.Bk2 { grid-area: Bk2; }

.hbx1 { margin: 0; padding: 3px 0 0 5px ;  }
.hbx2 { margin: 0; padding: 10px 0 0 0 ; }
.hbx3 { margin: 0 0 0 0; padding: 0;   }
.hbx4 { margin: 0 0 0 10px; padding: 0;   }
.hbx5 { text-align: left; padding: 8px 0 0 5px ; word-spacing:1.0ch;}

#Logo { width: 80%; height: auto; position: relative; }
#social { width: 75%; height:auto; position: relative; }

.nv ul {display: block !important; margin: 0; width:85%;
		padding: 0 0 0 0; position: relative; }

.nv ul li {  text-transform: uppercase;	color: #fff; display: inline-block; 
	position: relative; padding: 0 0 0 0;  line-height:1.2em; }

.nv a {	font-size: 13px; display: inline-block;;
	 text-decoration: none;	color: #fff; }

.nv a:hover { display: inline-block;outline: none; color: #BB44E1 ;
	border-bottom: 2px solid #BB44E1; padding: 0; }



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

.Ec1 { grid-area: Ec1; }
.Ec2 { grid-area: Ec2; }
.Ec3 { grid-area: Ec3; }
.Ec4 { grid-area: Ec4; }
.Ec5 { grid-area: Ec5; }
.Ec6 { grid-area: Ec6; }

.EarthContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 48% 48%;
    grid-template-areas: "Ec1 Ec2" 
					"Ec3 Ec3"
					"Ec4 Ec6" ;}

.ebx1 { text-align:Center; padding: 2px 10px 0 10px ;}
.ebx2 { padding: 10px 0 0 0 ;}
.ebx3 { padding: 0 0 0 10px; text-align:Center ;}
.ebx4 { padding: 8px 0 0 10px ; margin: 0 0 0 0 ;}


#Garden { position: relative; width: 90%; height:auto; display: block; }

p {color:white; text-align: left; line-height: 1.2em; font-size:14px; }
p1 {font-size:14px;	color: #000;  text-align: left; with:95%;}
p2 {color:white; font-size:16px; text-align: left;}
p3 {font-size:18px;	color: red;  text-align: left; with:95%; line-height: 1.5em; }
h1 {color:white; font-size:24px;}
h2 {color:white; font-size:26px;}
h3 {color:black; font-size:26px;}

.row-20 {width:99vw; display:block; margin: 10px 0 0 5px; 
	position: relative; text-align: center;}
.row-21 {width:98%; display: inline-block; padding: 0 0 5px 5px; 
	text-align: left; position: relative; background-color:#C1FFE5; max-width:1100px;}


.Dnv {text-align:left; line-height:1.4em; font-size:14px; }

.Dnv a { display:block;  text-decoration: none;
	letter-spacing: .1em; color: #fff; }

.Dnv a:hover { display:block;
	outline: none; color: #BB44E1 ; font-weight: bold;
	 padding: 0;  }

.row-30 {width:99vw; display:block; margin: 5px 0 0 5px; padding: 0; position: relative; text-align: center;}
.row-31 {width:99%; display: inline-block; padding: 5px 5px 5px 5px; position: relative; text-align: center; background-color:#C1FFE5; max-width:1100px;}
.col-31 {width:65%; display:inline-block; margin: 10px 0 0 5px; 
	position: relative; text-align: left;}

.row-40 {width:99vw; display:block; margin: 5px 0 0 5px; padding: 0; position: relative;text-align: center;}
.row-41 {width:99%; display: inline-block; padding: 5px 5px 5px 5px; position: relative;  background-color:#C1FFE5; max-width:1100px;}

#How { position: relative; padding: 0;
			width: 98%; height:auto; display: block; }



		/* Horizontal Cell View */
@media (min-width: 600px){

p { line-height: 1.2em; font-size:15px; }
p1 { font-size:14px;}
	
.nv a {	font-size: 14px; display: inline-block;
	 text-decoration: none;	color: #fff; }

	
.EarthContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 48% 48%;
    grid-template-areas: "Ec1 Ec2" 
					"Ec3 Ec2"
					"Ec4 Ec6" ;}
.ebx2 { padding: 25px 0 0 0 ;}
	
.col-31 {width:60%; display:inline-block; margin: 10px 0 0 5px; 
	position: relative; text-align: left;}
}



/* Vertical Tablet View */
@media (min-width: 700px){
	
p { line-height: 1.3em; font-size:16px; }
p1 { font-size:16px; line-height:1.2em; }

#social { width: 65%; height:auto; }
	
.Dnv {text-align:left; line-height:1.4em; font-size:16px; }
#Garden { position: relative; width: 80%; height:auto; display: block; }

	
}



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

p1 { font-size:18px; line-height:1.3em; }
#social { width: 50%; height:auto; }
#Logo { width: 70%; height: auto; position: relative; }
	
	.nv ul li {  text-transform: uppercase;	color: #fff; display: inline-block; 
	position: relative; padding: 0 0 0 0;  line-height:1.4em; }
	.nv a {	font-size: 16px; display: inline-block; 
	text-decoration: none;	color: #fff; }
	
	.HeaderContainer { display: grid; grid-gap: 1px;
	grid-template-columns: 10% 10% 10% 18% 18% 11% 11% 11%;
    	grid-template-areas: "Logo Logo Soc Soc Soc Nav Nav Nav"
				"Logo Logo How How How How Bk1 Bk1"	;  }	
  }	
	


/*  Desktop View  --*/
@media (min-width: 1240px){
	
.nv a {	font-size: 17px; display: inline-block;
	 text-decoration: none;	color: #fff; }
	
p1 {  font-size:20px; line-height:1.4em; }	
#Logo { width: 60%; height: auto; position: relative; }

	


.Dnv ul { width:40px; font-size:20px; line-height: 1.4em;}


}