/* General Settings */

html {
    line-height: 1em;   }

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

p {color:black; text-align: left;}
p1 {color: white; text-align: center; font-size:13px;}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:18px;}
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; }


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



 /*-- Rising Costs  --*/

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

.CostContainer { display: grid; grid-gap: 2px;
	grid-template-columns: 24% 24% 24% 24% ;
    grid-template-areas: "Wrds Wrds Wrds Dol"
				"Wrds Wrds Wrds Dol ";  }


.Dol { grid-area: Dol; }

.Wrds { grid-area: Wrds; } 

.cbx1 { margin: 0; padding: 3px 0 0 5px ;  }
.cbx2 { margin: 0; padding: 10px 0 0 20px ; text-align:left;}


#Dol { 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 10px 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 Ol08 Ol08 Ol08"
	"Ol09 Ol09 Ol09 Ol10 Ol10 Ol10" 
	"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;}

.row-50 {width:99vw; display:block; margin: 5px 0 0 5px; 
	position: relative;text-align:center;}
.row-51 {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;}
h1 {color:black; font-size:20px;}
	
.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 Ol03 Ol03"
	"Ol04 Ol04 Ol05 Ol05 Ol06 Ol06" 
	"Ol07 Ol07 Ol08 Ol08 Ol09 Ol09"
	"Ol10 Ol10 Ol11 Ol11 Ol12 Ol12" ;}
	
}


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

p1 { font-size:16px; line-height:1.2em; }
h1 {color:black; font-size:22px;}
#social { width: 65%; height:auto; }

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


	
	
}





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

p1 { font-size:18px; line-height:1.3em; }
h1 {color:black; font-size:28px;}
#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){
	
	            /*--  Header update  --*/ 
.nv a {	font-size: 17px; display: inline-block;
	 text-decoration: none;	color: #fff; }
	
p1 {  font-size:20px; line-height:1.4em; }	
h1 {color:black; font-size:30px;}
#Logo { width: 60%; height: auto; position: relative; }




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


}