@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* REV-11 VERSION */


/* ============STRUCTURE=============== */

* { box-sizing: border-box; }

body {
	font-family: 'Open Sans', sans-serif;
	color: #333;
	text-align: justify;
	text-justify: inter-word;
 	/*background-color:#81726A;*/
}
.wrapper {
  padding: 5px;
  max-width: 95%;
/*   max-width: 960px; */
  width: 95%;
/*   margin: 20px auto; */
  margin: 20px auto;
	background:#F4FEC1;
	border:3px solid #68534D;
	/* box-shadow: 5px 10px teal; */
	box-shadow: 5px 10px #D2D68D;

}

header {
  /* padding: 0 15px; */
	text-align:center;
	vertical-align: middle;
	line-height:20%;
	/* background:teal; */
	/* background-color;red; */
	}

.headline {font-size:300%;}

.columns {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 5px 0;
	}

.column {
	flex: 1;
	border: 1px solid gray;
	margin: 2px;
	padding: 10px;
	}

.column-noborder {flex: 1; margin:2px; padding:10px;}
.column:first-child {margin-left: 0;}
.column:last-child 	{margin-right: 0;}

footer {padding: 0 15px;}




/* ===========KJ formats============ */

.toCenter {text-align:center; vertical-align: middle;/* margin: auto; */ }

.center {							/* div class */
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 200px; */
  /* border: 3px solid green;  */
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


h4 {
	line-height: 80%;
	margin: 10px;
	padding: 0px;
	}
h2 {
	line-height: 80%;
	margin: 10px;
	padding: 0px;
	}
audio {
	width:90%;
	margin: auto;
	padding: 5%;
	/* height: 100px; */
	}

.div-bkgnd {
  	background-image: url("./img/cloud-black-white-burst_02_xp.gif") ;
  	background-repeat: repeat-y repeat-x;  
	}

	
.s200 	{font-size: 200%;}
.s300	{font-size: 300%;}
.bigbold	{font-weight: 999;}

.headline {
	font-family: 'arial', sans-serif;
	font-size:300%;
	line-height:50%;
	letter-spacing: .25em;
	transform: scale(1, 1.5)
/* word-wrap: break-word; */
}

line50 {line-height: .25em;	}

.rndImage	{ border-radius: 15px; }

.bg01	{ background: #D2D68D; 	}

.bg02	{ background: lime; } 
.break {
	background: black;
	width:96%;
	height: 20px;
	margin: 15px;
	border: 3px solid;
	border-radius: 8px;
	}

/*-------------------------Palletes moved to html header-----------------------------------------------*/

/* Palette#05	#734B5E	#BCBDC0nix>> #DDDDDD	#565857	#8A8D91	#F5D3C8  woodpecker*/
/* Palette#09	#F4FEC1	#D9F9A5	#D2D68D	#81726A	#68534D crossthread*/ 
/* Palette#11	#FE5D26	#F2C978	#FAEDCA	#C1DBB3	#7EBC89 */ 

/*.p01 { background-color: #FE5D26;}
.p02 { background-color: #F2C978;}
.p03 { background-color: #FAEDCA}
.p04 { background-color: #C1DBB3}
.p05 { background-color: #7EBC89}*/

.palgrid {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	align-items: center;
	grid-row:auto;
	}
.palgrid > div {height:100px; width:100px; 	text-align:center;	vertical-align: middle;	border: 3px solid #888;}

.grid3 {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	grid-row:auto;
	}

/* ---- ONLY ONE BREAKPOINT ---- */
						/* study - flex-basis*/
@media screen and (max-width: 980px) {
	.columns .column {
		flex-basis: 100%;
		margin: 0 0 5px 0;
		font-size: 160%;
	}
	h2 {font-size: 200%;} 
	iframe {width:640px; height:480px;}
	audio {	height: 50%; }
 	.responsive {width: 100%; height: auto;} 
	.s300 {font-size: 200%;}
} /*---end @media---*/