/* General Settings */

html {line-height: 1em;   }

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

p1 {color: white; text-align: center; font-size:12px;}
p2 {font-size:16px;	line-height:1.2em; color: #000; text-align: left;}
p3 {text-align: center; Font-size: 16px;}
h1 {font-size:22px; line-height:2em; 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: 2px;
	grid-template-columns: 18% 20% 20% 20% 20%;
    grid-template-areas: "Logo Soc Soc Nav Nav"
	"STD STD STD STD STD"	;  }

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

.hbx1 { margin: 0; padding: 3px 0 0 5px ;  }
.hbx2 { margin: 0; padding: 10px 0 0 0 ; }
.hbx3 { padding: 0; margin: 0 0 0 10px;  }
.hbx4 { text-align: left; }

#Logo { width: 80%; height: auto; position: relative; max-width:100px;}

#social { width: 75%; height:auto; position: relative; max-width:150px;}

.row-2 { width:99%; display: inline-block;  
	padding: 0 0 0 0; text-align: center; position: relative; }

.row-3 {width:99%; display: inline-block; padding: 10px 0 0 0; 
	text-align: center; position: relative;}

.Cc { font-size:20px; padding:10px 0 0 0; font-weight: bold; color:red;}



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

.nv a {	font-size: 11px; 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; }


 
/*-- Introduction --*/ 

.row-10 {position: relative; width: 99vw; display: block; 
	margin: 5px 5px 5px 5px ; text-align: center; }

.row-11 {position: relative; width: 99%; display: inline-block; 
	margin:5px 5px 5px 5px; text-align: center; 
	max-width: 1100px; background:#898951; }

.row-12 {position: relative; width: 99%; display: inline-block; 
	padding:10px 0 0 0 ; text-align: center; background:#C4C49A; 
	margin:5px 5px 5px 5px;}

.IntroContainer { display: grid; grid-gap: 1px;
	grid-template-columns: 24% 24% 24% 24%;
    grid-template-areas: "In1 In1 In5 In5 "
		" In2 In2 In2 In2 "	
		" In3 In3 In3 In3 "
		" In4 In4 In4 In4 ";  }

.In1 { grid-area: In1; }
.In2 { grid-area: In2; }
.In3 { grid-area: In3; }
.In4 { grid-area: In4; }
.In5 { grid-area: In5; }

.ibx1 { margin: 5px 5px 10px 10px ; padding: 0 ;  text-align: left;}
.ibx2 { margin: 5px 5px 10px 10px ; padding: 0 ;  text-align: left;}
.ibx3 { margin: 5px 5px 10px 10px ; padding: 0 ;  text-align: left;}
.ibx4 { margin: 5px 5px 10px 10px ; padding: 0 ;  text-align: left;}
.ibx5 { margin: 5px 5px 0px 5px ; padding: 0 ; }


#inflation {width: 90%; height: auto;}




/*-- Survive the Day Content --*/

.row-20 {position: relative; width: 99vw; display: block; text-align: center;
	margin: 5px 5px 5px 5px ;  }

.row-21 {position: relative; width: 99%; display: inline-block; 
	margin:5px 5px 5px 5px; text-align: center; 
	max-width: 1100px; background:#898951; }

.row-22 {position: relative; width: 99%; display: inline-block; 
	padding:10px 0 0 0 ; text-align: center; background:#C4C49A; 
	margin:5px 5px 5px 5px;}

.SurviveContainer { display: grid; grid-gap: 1px;
	grid-template-columns: 24% 24% 24% 24%;
    grid-template-areas: "Sn1 Sn1 Sn2 Sn2 "
		" Sn3 Sn3 Sn4 Sn4 "	
		" Sn5 Sn5 Sn6 Sn6 " 
		" Sn7 Sn7 Sn8 Sn8 ";  }

.Sn1 { grid-area: Sn1; }
.Sn2 { grid-area: Sn2; }
.Sn3 { grid-area: Sn3; }
.Sn4 { grid-area: Sn4; }
.Sn5 { grid-area: Sn5; }
.Sn6 { grid-area: Sn6; }
.Sn7 { grid-area: Sn7; }
.Sn8 { grid-area: Sn8; }

.sbx2 { margin: 0; padding: 0 ; }
.sbx2 { margin: 0; padding: 0 ; }
.sbx3 { margin: 0; padding: 0 ; }
.sbx4 { margin: 0; padding: 0 ; }
.sbx5 { margin: 0; padding: 0 ; }
.sbx6 { margin: 0; padding: 0 ; }
.sbx7 { margin: 0; padding: 0 ; }
.sbx8 { margin: 0; padding: 0 ; }


.sv { text-align:left;} 
.sv a { color: red; display:block !important; font-size: 18px; 
	text-align: left; line-height:1em; margin: 5px 0 0 5px; 
	text-decoration: none;}


#s1 {width: 95%; height: auto;}
#s1:hover { opacity: .6;}
#s2 {width: 95%; height: auto;}
#s2:hover { opacity: .6;}
#s3 {width: 95%; height: auto;}
#s3:hover { opacity: .6;}
#s4 {width: 95%; height: auto;}
#s4:hover { opacity: .6;}
#s5 {width: 95%; height: auto;}
#s5:hover { opacity: .6;}
#s6 {width: 95%; height: auto;}
#s6:hover { opacity: .6;}
#s7 {width: 95%; height: auto;}
#s7:hover { opacity: .6;}
#s8 {width: 95%; height: auto;}
#s8:hover { opacity: .6;}





/*-- Blog Posts  --*/

.row-30 {width:99vw; display:block; margin: 5px 0 0 5px; 
	position: relative;  text-align:center;}

.row-31 {width:99%; display:inline-block; margin: 5px 0 10px 0; padding: 0; 
	position: relative; background:#898951; max-width:1100px;}

.row-32 {width:99%; display:inline-block; margin: 5px 0 10px 0; padding: 0; 
	position: relative; background:#E9CFF9; }

.row-33 {width:80%; display: inline-block; position: relative; color:black; padding: 5px 0 0 10px; max-width:300px;}

.Bn1 { grid-area: Bn1; }
.Bn2 { grid-area: Bn2; }
.Bn3 { grid-area: Bn3; }
.Bn4 { grid-area: Bn4; }

.BlogContainer { display: grid; grid-gap: 1px; color: black; letter-spacing: .1em; font-weight: bold; padding:0 0 0 10px;
	  grid-template-columns: 24% 24% 24% 24% ;
	  grid-template-areas: " Bn1 Bn1 Bn2 Bn2 "
						" Bn3 Bn3 Bn4 Bn4 "; }

.bbx1 { padding: 5px 0 10px 0 ; margin: 0; font-size: 14px;}
.bbx2 { padding: 5px 0 10px 0 ; margin: 0; font-size: 14px;}
.bbx3 { padding: 5px 0 10px 0 ; margin: 0; font-size: 14px;}
.bbx4 { padding: 5px 0 10px 0 ; margin: 0; font-size: 14px;}

#Slutn { position: relative; padding:2px 0 0 0;	width: 85%; 
	max-width:400px; height:auto; display: inline-block }
#Slutn:hover { opacity: .6;}
#Meal { position: relative; padding:2px 0 0 0;	width: 85%; 
	max-width:400px; height:auto; display: inline-block }
#Meal:hover { opacity: .6;}
#Bus { position: relative; padding:2px 0 0 0;	width: 85%; 
	max-width:400px; height:auto; display: inline-block }
#Bus:hover { opacity: .6;}
#New { position: relative; padding:2px 0 0 0;	width: 85%; 
	max-width:400px; height:auto; display: inline-block }
#New:hover { opacity: .6;}


label {
  display: block;
  font:
    1rem 'Fira Sans',
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

.row-40 {width:99vw; display:block; margin: 5px 0 0 5px; 
	position: relative;  text-align:center;}

.row-41 {width:99%; display:inline-block; margin: 5px 0 10px 0; padding: 0; 
	position: relative; background:#898951; max-width:1100px;}

.row-42 {width:99%; display:inline-block; margin: 5px 0 10px 0; padding: 0; 
	position: relative; background:#86F1BD; }

/*-- Have Fun  --*/


.Fun {grid-area: Fun; }
.Wrds { grid-area: Wrds; }
.Us { grid-area: Us; }
.Cook { grid-area: Cook; }
.Con1 { grid-area: Con1; }
.Con2 { grid-area: Con2; }
.Con3 { grid-area: Con3; }


 .FunContainer { display: grid; grid-gap: 1px; position: relative;
	  grid-template-columns: 24% 24% 24% 12% 12%;
    grid-template-areas: "Fun Fun Fun Fun Funb"	
				"Us Us Us Con1 Con2"
				"Us Us Us Con3 Con3"
				"Wrds Wrds Wrds Cook Cook"; }

.fbx1 { font-size: 12px; line-height: 1.5em;  } 
.fbx2 { padding: 5px 5px 0 0; text-align: left;}
.fbx3 { padding: 2px; text-align: left; }
.fbx4 { padding: 2px;}
.fbx5 { padding: 2px;}
.fbx6 { padding: 2px;}
.fbx7 { padding: 2px; text-align: center;}

#Cookie { position: relative; padding: 0; text-align: center;
			width: 70%; height:auto; max-width:145px;	display: inline-block; }
#FB { position: relative; padding: 10px 5px 0 0 ; max-width:75px;
			width: 85%; height:auto; display: inline-block; }
#Inst { position: relative; padding: 10px 5px 0 0 ; max-width:75px;
			width: 85%; height:auto; display: inline-block; }
#You { position: relative; padding: 10px 5px 0 0 ; max-width:75px;
			width: 95%; height:auto; display: inline-block; }






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


	
	.SurviveContainer { display: grid; grid-gap: 1px;
	grid-template-columns: 24% 24% 24% 24%;
    grid-template-areas: "Sn1 Sn2 Sn3 Sn4 "
		" Sn1 Sn2 Sn3 Sn4 "	
		" Sn5 Sn6 Sn7 Sn8 " 
		" Sn5 Sn6 Sn7 Sn8 ";  }
	
.BlogContainer { display: grid; grid-gap: 1px; color: black; letter-spacing: .1em; font-weight: bold; padding:0 0 0 10px;
	  grid-template-columns: 24% 24% 24% 24% ;
	  grid-template-areas: " Bn1 Bn2 Bn3 Bn4 "
						" Bn1 Bn2 Bn3 Bn4 "; }

}

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

.IntroContainer { display: grid; grid-gap: 1px;
	grid-template-columns: 24% 24% 24% 24%;
    grid-template-areas: "In1 In1 In5 In5 "
		" In2 In2 In5 In5 "
		" In3 In3 In3 In3 "
		" In4 In4 In4 In4 ";  }
}

/*  Horizontal tablet View  */
@media (min-width: 830px){
	
.IntroContainer { display: grid; grid-gap: 1px;
	grid-template-columns: 24% 24% 24% 24%;
    grid-template-areas: "In1 In1 In5 In5 "
		" In2 In2 In5 In5 "	
		" In3 In3 In5 In5 ";  }

	
} 


/*Desktop View*/
@media (min-width: 1240px){
	

	



  }