/* General Settings */

html {
    line-height: 1em;   }

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

p1 {color: white; text-align: center; font-size:13px;}
h2 {color: darkred;font-size:21px; text-align:center;}

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


 /*-- Energy  --*/

p {color:black; text-align: left; font-size:11px; line-height:1.0em; width:95%}
p1 {font-size:13px;	line-height:1.5em; color: #000; font-weight: bold; 
	text-align: center;}
p2 {color:black; font-size:15px; text-align: left;}
h1 {color:black; font-size:30px;}

.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 15px 10px 5px; 
	position: relative; background-color:#C1FFE5; max-width:1100px;}

.EarthContainer { display: grid; grid-gap: 2px;
	grid-template-columns: 48% 48%;
    grid-template-areas: "Cr1 Cr2"
				"Cr3 Cr2"
				"Cr4 Cr4";  }

.Cr1 { grid-area: Cr1; }
.Cr2 { grid-area: Cr2; }
.Cr3 { grid-area: Cr3; }
.Cr4 { grid-area: Cr4; }
 
.ebx1 { margin: 0; padding: 0px 0px 0px 10px ; }
.ebx2 { margin: 0; padding: 0 ; }
.ebx3 { margin: 0; padding: 0px 0px 0px 10px ; }
.ebx4 { margin: 0; padding: 0px 0px 0px 10px ; }


#Egy { position: relative; padding: 0 0 0 0;
			width: 90%; height:auto; }

.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 20px 10px 10px; 
	position: relative;background-color:#C1FFE5; max-width:1100px;}

/*-- Links  --*/

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

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


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

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



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

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

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

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




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

p1 { font-size:14px;}
	
.nv a {	font-size: 14px; display: inline-block;
	 text-decoration: none;	color: #fff; }
	
.LinkContainer { display: grid;  position: relative;
	grid-template-columns: 16% 16% 16% 16% 16% 16%;
    grid-template-areas: 
	"Ol01 Ol01 Ol02 Ol02 Ol06 Ol06"
	"Ol03 Ol03 Ol04 Ol04 Ol06 Ol06"
	"Ol05 Ol05 Ol07 Ol07 Ol09 Ol09" 
	"Ol10 Ol10 Ol11 Ol11 Ol08 Ol08"
	"Ol13 Ol13 Ol14 Ol14 Ol12 Ol12" }

}

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

p { font-size:13px; line-height:1.2em; width:95%}
p1 { font-size:16px; line-height:1.2em; }

#social { width: 65%; height:auto; }	

.EarthContainer { display: grid; grid-gap: 2px;
	grid-template-columns: 58% 38%;
    grid-template-areas: "Cr1 Cr2"
				"Cr3 Cr2"
				"Cr4 Cr4";  }	
	
	
.LinkContainer { display: grid;  position: relative;
	grid-template-columns: 12% 12% 24% 24% 12% 12%;
    grid-template-areas: 
	"Ol01 Ol01 Ol02 Ol03 Ol04 Ol04"
	"Ol06 Ol06 Ol05 Ol07 Ol08 Ol08"	
	"Ol06 Ol06 Ol09 Ol11 Ol12 Ol12"
	"Ol06 Ol06 Ol10 Ol11 Ol12 Ol12"  ;}

}

/* 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){
	
p { font-size:15px; line-height:1.3em; width:95%}
p1 {  font-size:20px; line-height:1.4em; }
	
.nv a {	font-size: 17px; display: inline-block;
	 text-decoration: none;	color: #fff; }
	
#Logo { width: 60%; height: auto; position: relative; }
	           
.Dnv ul { width:40px; font-size:20px; line-height: 1.4em;}


}