/* THIS IS THE MASTER CSS FOR BLOGS  all column-counts*/
/*color palette to the html header*/

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


/* ================= DOCUMENT 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;   THIS SHOULD BE APPLIED AT HTML HEAD-STYLE*/
	border:3px solid #68534D;
	box-shadow: 5px 10px #D2D68D;
	}

header {
	/* padding: 0 15px; */
	text-align:center;
	vertical-align: middle;
	line-height:20%;
	/* background:teal; */
	/* background-color;red; */
	}
footer {padding: 0 15px;}
.credits {padding: 0 15px; font-size:.65em;}

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

/*===================== grids =======================*/
.grid2 {
	display:grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	grid-row:auto;
	}
.grid3 {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	grid-row:auto;
	}

/* ====================== ALIGNING ================= */

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

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


/* ====================== IMAGE ================= */
img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

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

.rndImage	{ border-radius: 15px; }

/* ====================== IMAGE ================= */

audio {
	width:90%;
	margin: auto;
	padding: 5%;
	/* height: 100px; */
	}


/* ====================== TEXT ================= */
.jtxt {text-align: justify; text-justify: inter-word; font-size:1em;}

h2 	{line-height: 80%; margin: 10px; padding: 0px;}
h4	{line-height: 80%; margin: 10px; padding: 0px;}

.s150 {font-size: 150%;}
.s200 {font-size: 200%;}
.s300 {font-size: 300%;}
.bigbold	{font-weight: 999;}
.maxbold	{font-weight: 999;}  /*better name*/

.headline2 {font-size:300%;}
.headline {
	font-family: 'arial', sans-serif;
	font-size:300%;
	line-height:50%;
	font-weight: 999;
	/*font-decoration:underline;*/
	/*letter-spacing: .25em;*/
	/*transform: scale(1, 1.5)*/
	/* word-wrap: break-word; */
	}
.col-head {
	/*font-family: 'arial', sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	font-size:1.25em;
	/*letter-spacing: .25em;*/
	/*transform: scale(1, 1.5);*/
	transform: scale(1, 1);
	font-weight:999;
	/*text-decoration:underline;*/
	}
/*.bord {border: 5px solid #888; border-radius: 8px; box-shadow: 4px 5px #339; margin:auto;}*/
.dblshad	{text-shadow: 2px 2px #bbb, 3px 3px #000;}
.glowShad	{text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;} /*Text-shadow with a red and blue neon glow:*/
.hardShad	{text-shadow: 1px 1px #999, -2px -2px #999;}
/*.narrow 	{line-height: 1;}*/
.shad		{text-shadow: -1px 3px #888;}
.uline		{text-decoration: underline;} 

.lh50 {line-height: .25em;	}
/*line spacers vv  use <p />   */
.brk	{background-image: url("./img/1x1pip.gif") ;}
.brk2	{height:15px;}

/* ====================== DIV ================= */

.bg01	{ background: #D2D68D; 	}
.bg02	{ background: lime; } 

.break {				/*major section break apply to blank div*/
	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;}




/* ---- 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%;}

	.killcol {width:1px; height:1px}
	div.killcol {height:1px; width:1px; display: none;	text-align:center;	vertical-align: middle;	border: 0px; border-color:transparent;} /*collapse div on mobile*/

	/*.palgrid > div.killcol {height:1px; width:1px; 	text-align:center;	vertical-align: middle;	border: 0px; border-color:transparent;}*/ /*collapse div on mobile*/
} /*---end @media---*/