/* 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;}
p2 {color:black; font-size:11px; text-align: left; line-height:0.8em;}
h1 {color:black; font-size:30px;}
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; }




 /*-- 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: "Cst1 Cst1 Cst3 Cst3"
				"Cst2 Cst2 Cst3 Cst3 "
				"Cst4 Cst4 Cst3 Cst3 ";  }

.Cst1 { grid-area: Cst1; }
.Cst2 { grid-area: Cst2; }
.Cst3 { grid-area: Cst3; }
.Cst4 { grid-area: Cst4; } 

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

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

.ShareContainer { display: grid;  position: relative;
	grid-template-columns: 16% 16% 16% 16% 16% 16%;
    grid-template-areas: 
	"Sr01 Sr01 Sr01 Sr02 Sr02 Sr02"
	"Sr03 Sr03 Sr03 Sr04 Sr04 Sr04" 
	"Sr05 Sr05 Sr05 Sr06 Sr06 Sr06"
	"Sr07 Sr07 Sr07 Sr08 Sr08 Sr08"  ; }

.sbx01 { padding: 10px 0 0 0 ; position:relative; display:block;}
.sbx02 { padding: 10px 0 0 0 ; position:relative; display:block;}
.sbx03 { padding: 10px 0 0 0 ; position:relative; display:block;}
.sbx04 { padding: 10px 0 0 0 ; position:relative; display:block;}
.sbx05 { padding: 10px 0 0 0 ; position:relative; display:block;}
.sbx06 { padding: 10px 0 0 0 ; position:relative; display:block;}
.sbx07 { padding: 10px 0 0 0 ; position:relative; display:block;}
.sbx08 { padding: 10px 0 0 0 ; position:relative; display:block;}

#Sr01 { width: 88%; height:auto; max-width:150px; }
#Sr02 { width: 88%; height:auto; max-width:150px; }
#Sr03 { width: 88%; height:auto; max-width:150px; }
#Sr04 { width: 88%; height:auto; max-width:150px; }
#Sr05 { width: 88%; height:auto; max-width:150px; }
#Sr06 { width: 88%; height:auto; max-width:150px; }
#Sr07 { width: 88%; height:auto; max-width:150px; }
#Sr08 { width: 88%; height:auto; max-width:150px; }


.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;}
p2 { font-size:12px; line-height:1.1em;}
	
.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" }
	
	.ShareContainer { display: grid;  position: relative;
	grid-template-columns: 16% 16% 16% 16% 16% 16%;
    grid-template-areas: 
	"Sr01 Sr01 Sr02 Sr02 Sr03 Sr03"
	"Sr05 Sr05 Sr04 Sr04 Sr06 Sr06" 	; }
	
}



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

p1 { font-size:16px; line-height:1.2em; }
p2 { font-size:13px; line-height:1.2em;}
	
#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" 
	"Ol13 Ol13 Ol14 Ol15 Ol16 Ol16"; }

.ShareContainer { display: grid;  position: relative;
	grid-template-columns: 24% 24% 24% 24% ;
    grid-template-areas: 
	"Sr01 Sr02 Sr03 Sr04 "
	"Sr01 Sr02 Sr03 Sr04 " 	; }
	
	
}





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

p1 { font-size:18px; line-height:1.3em; }
p2 { font-size:14px; 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; }	
p2 { font-size:16px; line-height:1.3em;}
	
#Logo { width: 60%; height: auto; position: relative; }


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


}