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

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  text-align: justify;
  text-justify: inter-word;
 background-color:#81726A;
}

/* Palette#09	#F4FEC1	#D9F9A5	#D2D68D	#81726A	#68534D */

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

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

.toCenter {
	text-align:center;
	vertical-align: middle;
	/* margin: 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; */
	}

mediadiv {
  	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;
	}



/* responsive		moved below to @media680 */








/* Palette#09	#F4FEC1	#D9F9A5	#D2D68D	#81726A	#68534D */



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






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