@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Ranchers&display=swap'); */


/* MySmellyFarts */
/* fart-style.css  -- do not put comment inside comment*/
/* --- NO NESTED COMMENTS!! --- */
/* with one break point, width 980 thru 1023 still goes (partially) to 2 columns. */
/* I believe that the issue is the size of the graphics and iframes inside the columns */
/* palette#15	#FF595E	#FFCA3A	#8AC926	#1982C4	#6A4C93 */

.ctest1	{background-color: red;}
.ctest2	{background-color: skyblue;}



/* 	*{box-sizing: border-box;}    not sure whuffo */

/* =========================== PAGE STRUCTURE ========================== */
body {
	font-family: 'Open Sans', sans-serif;
	color: #333;
	text-align: justify;
	text-justify: inter-word;
	/*background-color: #6a4c93;*/
	/*background-color: #7ebc89;*/
	/*background-color: red;*/
}
.wrapper {									/*crossthread, InGodWeTrust, (html's)*/
	padding: 5px;   						/* 5px */
	max-width: 95%;
/*   max-width: 960px; */
	width: 95%;
	margin: 20px auto;
	/*background: #ffca3a;*/
	background: #faedca;
	border:3px solid #ff595e;
	box-shadow: 5px 10px #1982c4;
	border-radius: 25px;
}

header {		/*01-start.php, blog-isolate, crossthread, InGodWeTrust,*/ 
  /* padding: 0 15px; */
	text-align:center;
	vertical-align: middle;
	/* line-height:50%; */
	margin: 5px;
	padding: 1px;
	background:#f2c078; 
/* background: #8ac926; */
	border-radius: 15px;
  	background-image: url("../img/cloud-black-white-burst_02_xp.gif") ;
  	background-repeat: repeat-y repeat-x; 
	word-wrap: break-word;
	text-shadow: 2px 2px 2px #666;
	}

footer {padding: 0 15px;}					/*01-start, foot, crossthread, InGodWeTrust(rev11),*/ 

p	{line-height: 110%;}

text {line-height: 120%;}

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

/* =========================== END PAGE STRUCTURE ========================== */


/* ==================== align & center ====================== */ 

.toCenter {	text-align:center;	vertical-align: middle;}

/* .bottom { position: relative;   ~* 	 position: absolute; *~    	bottom: -7em;    	}  ??? alignment*/


	
/* ==================== unordered lists ====================== */ 
ul.noBull { list-style-type: none;} /* Remove bullets */

ul { list-style-type: none; margin: 8px; float:left; }		/*see also  class=.img-link*/

.ul2 {
	list-style-type: none;
	display: block;			/*display: flex; (reverts to single column)*/
	columns: 2;
	column-gap:1px;
	column-rule-style: double;
	margin-right: 8px;
	/*margin:auto;*/
	/*column-width: 10vw;*/
	align-items: center;
	-webkit-columns: 2;
	-moz-columns: 2;
}

.ul2 img { width: 200px;
	height:auto;
    /*display: block;*/
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
.ul2 li	{column-gap:0;}
.ul2 a	{column-gap:0;}

/*========== END unordered lists ==========*/ 


/* ============================ audios ====================== */ 

audio {	width:90%; margin: auto; padding: 5%; /* height: 100px; */ }
/*button {background-color: rgba(255, 99, 71, 0.0;)*/

.songdiv1 {background-color: blue; border: 4px dotted blue; border-radius: 15px; background-color:#8AC926;}
.songdiv2 {background-color:teal; border-radius: 15px; }

	/*formerly .mediadiv*/
	/*background-image: url("../img/cloud-black-white-burst_02_xp.gif") ;*/
	/*background: url('./bgimg/cloud-black-white-burst_02_xp.gif'), #6DB3F2;*/
	/*background-image: url("cloud-black-white-burst_02_xp.gif");*/
  	/*background-repeat: repeat-y repeat-x;*/  
	/*background-color: blue;*/

/*=========================== iframes ===========================*/
/* 	iframe CONTENT does not inherit CSS from parent. Is considered as a New Document
	only the iframe-element itself is styled by the parent */

/*iframe { width: 100%; height: 800px; }*/

iframe#ifrm-audio {
	width:100%; height:1300px;
	/*width:100%; height:100vh;*/
	/*width:repeat(1, 1fr);*/
	background-color: tan;
	/*margin:1em 0;*/
	/*margin:auto*/;
	text-align:center;
	vertical-align: middle;
    /* border:2px solid #00f; */
	border:4px black; /*test*/
	}   
.ifrmdiv {
	width:100%;
	/*width=1fr;*/
	/*height:auto;*/
}

/*==========videos.php=============*/
.vid-grid {
	display: grid;
	/*grid-template-columns: repeat(3, 1fr);		orig*/
	grid-column:auto;
	grid-template-columns: 1fr;			/* = 1 columns */
	/*grid-template-rows: repeat(3, 150px);*/
	grid-column-gap: 10px;
	grid-row-gap: 15px;
}

.vid-grid > div > iframe {
	height: 600px;
	width: auto;
}
/*========== END videos.php=============*/


/*====GRID #01 =====    1of2 grid definers see next section */
.mygrid > div {
	/* videos.php */
	border-radius: 5px;
	padding: 10px;
	background-color: transparent;
	}

/*responsive*/
.mygrid {
	/* videos.php */
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	}

.mygrid3 {
	/* videos.php */
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	}


.card1 {grid-column:1; grid-row:1;}	/*responsive   header.php */
.card2 {grid-column:2; grid-row:1;}	/*responsive   header.php */

.gridContainer {
	/* user file not found */
	display: grid;
	grid-gap: 1rem;
	grid-template-columns:  repeat(5, 150px);
	grid-template-rows: repeat(5, 100px);
	align-items: center;
	}


/*========================   v   NEW GRID   v   ========================*/
/*========================   v   NEW GRID   v   ========================*/
/*========================   v   NEW GRID   v   ========================*/

.grid-container {
	/*fruitplay-03a.html, ms-fruit.html,  source= pd-gridplay-01a.html*/
	display: grid;
	/*grid-template-columns: repeat(3, 1fr);		orig*/
	grid-template-columns: 150px 1fr 80px;			/* = 3 columns */
	grid-template-rows: repeat(3, 150px);
	grid-column-gap: 10px;
	grid-row-gap: 15px;
}


/*-----------grid-container2  user file not found-----------*/
.grid-container2 {
	/* user file not found */
	display: grid;
	/*grid-template-columns: 50% 1fr 80px;*/
	/*grid-template-columns: 1fr 1fr;*/					/* = 2 columns - works*/
	grid-template-columns: 1fr;							/* = 2 columns - works*/
	/*grid-template-columns: 300px 1fr 80px;*/
	/*grid-template-rows: repeat(2, 225px);*/
	grid-auto-rows: 250px;
	grid-column-gap: 5px;
	grid-row-gap: 5px;
/*	border: red 4px solid;
	background-color: yellow;*/
 	border-width: 0;	/*remove border attempt*/
}	/*see also .video-titles > img{     above*/

.grid-container2 > div {
	width: 95%;
	border-radius: 5px;
	padding: 10px;
	/*background-color: rgb(207,232,220);    overrides g06 colors*/
	border: 2px solid rgb(79,185,227);
}

.grid-container2 > div > img{
	width: 99%;
	height: auto;
	border-radius: 5px;
	padding: 10px;
	background-color: rgb(207,232,220);
	border: 2px solid rgb(79,185,227);
}
/*----------- END grid-container2  user file not found-----------*/



/* ============COLORS============== */

.g00 { background-color: White;}
.g01 { background-color: LemonChiffon;}
.g02 { background-color: PaleVioletRed;}
.g03 { background-color: Orange;}
.g04 { background-color: Moccasin;}
.g05 { background-color: orangered;}
.g06 { background-color: gold;}
.g07 { background-color: plum;}
.g08 { background-color: YellowGreen;}
.g09 { background-color: LightSteelBlue;}
.g10 { background-color: BurlyWood;}

.cwhite { background-color: white; } 
.csky { background-color: skyblue; } 
.cperu { background-color: peru; }    
.cred { background-color: red; } 
.clime { background-color: lime;}
.cpurple { background-color: purple;}
.ctan { background-color: tan; }
.cvio { background-color: violet; }
.cgray { background-color: #ccc; }
.cPRT { background-color: #fd4; }

/*palettes for blogs are to be placed in html header styles*/
.pal01 {background-color; }
.pal02 {border:3px solid #ff595e; }
.pal03 {box-shadow: 5px 10px #1982c4; }
.pal04 { }
.pal05 { }
	
	


/*========== fonts ==========*/
/*.arch {font-family:archivo;}*/
/*.archivo-one {
  font-family: "Archivo", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}*/

/*.ranchers-regular {
  font-family: "Ranchers", serif;
  font-weight: 400;
  font-style: normal;
}*/

/*========== font formatting ==========*/
.s75 	{ font-size: 75%; }
.s150 { font-size: 150%; }
.s200 { font-size: 200%; }
.s300 { font-size: 300%; }
.s400 { font-size: 400%; }

.bigbold { font-weight: bold; }
.bld	{ font-weight: bold; }
.lh10	{line-height:10%;}
.lh25	{line-height:25%;}
.lh50	{line-height:50%;}

.t00 { color: White;}
.t01 { color: LemonChiffon;}
.t02 { color: PaleVioletRed;}
.t03 { color: Orange;}
.t04 { color: Moccasin;}
.t05 { color: orangered;}
.t06 { color: gold;}
.t07 { color: plum;}
.t08 { color: YellowGreen;}
.t09 { color: LightSteelBlue;}
.t10 { color: BurlyWood;}

.twhite	{ color: white; } 
.tperu	{ color: peru; }    
.tred	{ color: red; } 
.tgreen { color: green; } 
.tdkgreen { color: darkgreen; } 
.tlime	{ color: lime;}
.tpurple { color: purple;}
.ttan	{ color: tan; }
.tvio	{ color: violet; }
.tgray	{ color: #ccc; }
.tPRT	{ color: #fd4; }



/* responsive		moved below to @media680 */

.textflex5  { font-size: calc(.5vw + .5vh); } 	/* You can adjust this value according to your preference */
.textflex7  { font-size: calc(.7vw + .7vh); }	/* You can adjust this value according to your preference */
.textflex10 { font-size: calc(1vw + 1vh); }		/* You can adjust this value according to your preference */
.textflex11 { font-size: calc(1.1vw + 1.1vh); }	/* You can adjust this value according to your preference */
.textflex12 { font-size: calc(1.2vw + 1.2vh); }	/* You can adjust this value according to your preference */
.textflex15 { font-size: calc(1.5vw + 1.5vh); }	/* You can adjust this value according to your preference */
.textflex20 { font-size: calc(2vw + 2vh); }		/* You can adjust this value according to your preference */
.wvt1		{font-size: 1vw;}

.txt65	{font-size: 55%;}
.tshad 	{text-shadow: 3px 3px 3px #666;}
.dbltshad {text-shadow: 2px 2px #bbb, 3px 3px #000;}
.t150	{font-size:1.5em; line-height:1.5em;}
.t200	{font-size:2em; line-height:2em; }
.credits {font-size:.25em;}

.headline {		/*PlainBrownPackage, BeyondRepair, CocaCola, crossthread, InGodWeTrust,*/
	font-size:200%;
	line-height:50%;
	padding: 25px;
/* word-wrap: break-word; */
}

.thinBR {					/*user not found*/
	line-height: 150%;
	margin: 2px;
	padding: 0px;
}

.tShadow {					/*user not found*/
	text-shadow: 3px 3px #888;
	text-align: center;
	text-justify: inter-word;
	}



/* ============FRILLS============== */
/*img {
  border: 3px solid #aaa;
}*/

.img-link {							/*used mostly on 'ul' for persona(s)*/
/*	border: 5px solid red;  	no effect*/
 	/*border: 5px solid #888;*/ 
	border-radius: 8px;
	box-shadow: 5px 5px #555;
	width: 90%;    					/*70% orig*/
	height: auto;
}
.img-link2 {						/*used mostly on 'ul' for persona(s)*/
/*	border: 5px solid red;  	no effect*/
 	/*border: 5px solid #888; */
	border-radius: 8px;
	box-shadow: 2px 3px #339;
	width: 90%;    					/*70% orig*/
	height: auto;
}
.site-link {
	/*user not found*/
	border: 2px solid #888; 
	border-radius: 8px; 
	box-shadow: 2px 3px #888; 
	width: 90%; 
	height: auto;
}


/*----------- videos.php ------------------------------------*/
.btn {
	/*border: transparent;*/
	box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.5);
	transition: 0.1s all;
	}

.btnr {
	box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.5);
	transition: 0.1s all;
	}

.btnbg {background-color:transparent; border-width:0;}

.btn:hover {background-color:yellow;}
.btnr:hover {background-color:#F66;}

	/* Adding transformation when the button is active */
.btn:active {
	transform: scale(1.05);
	/* Scaling button to 0.95 to its original size */
	box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.5);
	/* Lowering the shadow */
	/*transform: translateY(2px);*/
	}
/*-----------------------------------------------*/



/*========== images ==========*/

.pixfit {width: 50%;   height: auto;   object-fit: cover;  }	/*header01.php*/
.w99 {width: 99%;   height: auto;   object-fit: cover;  } 		/*shrink div to image, ergo no centering in div*/ /*blogs*/
.rndImage	{border-radius: 15px;}  							/*wont' work on svg's*/ /*foot, header  -also in many CSS files*/

div.item {						/*tracking-chart, nee:ourOnlyHome*/
    vertical-align: top;
    display: inline-block;
    text-align: center;
}
.caption {display: block;}		/*div container for svg*/

#robo	{max-width:250px;}	 	/*footer.php -fukiheart.jpg*/

.topic {	padding: 15px 5px 15px 5px;   						/* user not found    5px */
	max-width: 95%;
/*   max-width: 960px; */
	width: 95%;
	margin: 20px auto;
	background: #ffca3a;
	border:3px solid #ff595e;
	box-shadow: 5px 10px #1982c4;
	border-radius: 25px;
}

.content {									/* "content" found in 86 files */
	/*   padding: 0 18px; */				/* orig	top+bottom   left+right */
	padding: 0 10px; 						/* 		top+bottom   left+right */
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	background-color: #f1f1f1;
	z-index:5;								/* test */
}


.bg1 {										/*user not found*/
	background-color:tan;
	background-image: url("../img/cloud-black-white-burst_02_xp.gif");
		padding: 5px;   					/* 5px */
	max-width: 92%;
/*   max-width: 960px; */
	width: 95%;
	margin: 10px auto;
	padding: 3%;
	border:3px solid #ff595e;
	box-shadow: 5px 10px #1982c4;
	border-radius: 25px;
	padding: 5px;   						/* 5px */
}

.bg2 {										/*user not found*/
	background-color: #faedca;
	width: 85%;
	margin: 10px auto;
	padding: 3%;
	border:2px solid #555;
	box-shadow: 5px 10px #555;
	border-radius: 25px;
}


/*======================= columns ===========================*/
.columns {
  display: flex;					/* study */
  flex-flow: row wrap;				/* study */
  justify-content: center;
  margin: 5px 0;
	border: 0px;			/*turn off borders attempt */
	border-width:0;		/*turn off borders attempt */
}

.column {
  flex: 1;
  /* border: 1px solid gray;   a diagnostic */
  margin: 2px;
  padding: 6px;
	line-height:100%;
	border: 0px;			/*turn off borders attempt */
	border-width:0;		/*turn off borders attempt */
}
/*.column:first-child {
  margin-left: 0;
}
.column:last-child {
  margin-right: 0;
}
*/
/*======================= END columns ===========================*/








/*===================thumbnailL,R,C - NOT USED WITH MSFarts =====================*/
/*.thumbnailL { 
	top:-50px; 
	left:-35px; 
	display:block; 
	z-index:999; 
	cursor: zoom-in; 
	-webkit-transition-property: all; 
	-webkit-transition-duration: 0.2s; 
	-webkit-transition-timing-function: ease; 
} */

/*change the number below to scale to the appropriate size*/ 
/*.thumbnailL:hover { 
	transform: scale(1.1) translate(50px);
	font-size: 150%;
	font-weight: 500;
} */

/*.thumbnailC { 
/ *   top:-50px; 
left:-35px; 
display:block;   * / 
z-index:999; 
cursor: zoom-in; 
-webkit-transition-property: all; 
-webkit-transition-duration: 0.2s; 
-webkit-transition-timing-function: ease; 
} */

/*change the number below to scale to the appropriate size*/ 
/*.thumbnailC:hover { 
transform: scale(1.1);
	font-size: 150%;
	font-weight: 500;
}  */

/*.thumbnailR { 
top:-50px; 
left:-35px; 
display:block; 
z-index:999; 
cursor: zoom-in; 
-webkit-transition-property: all; 
-webkit-transition-duration: 0.2s; 
-webkit-transition-timing-function: ease; 
} */

/*change the number below to scale to the appropriate size*/ 
/*.thumbnailR:hover { 
	transform: scale(1.1) translate(-50px);
	font-size: 150%;
	font-weight: 500;
}  */

/*========== div formatting ==========*/
.divfit {width: fit-content;}  		/*fit div to contents*/
.divInDivA {	
	/*background-color:#4dff4d;*/
	background-color:transparent;
	width:98%;
	text-align:center;
	padding:7px;
}
.divInDivB {
	/*background-color:#33cc33;*/
	/*width:80%;*/
	text-align:center;
	padding:2px;
	margin:0 auto
}

.j-left	{display:flex; justify-content:start;}  /*moves entire div left, does not justify text*/
.t-left {display:flex; text-align:left;}
.j-left2	{display:flex; flex-direction:column; align-items:center; text-align:left; } /*like!*/

.wid50 {width:50%}

/*============around the edges ==========*/

.ol1 {border: 3px solid BurlyWood;}
.mapar {margin:auto;}
.marg	{margin:auto;}

.ma {	margin:auto;
	display: inline-block;
	width: fit-content;
}

.addr { width:50%;}
.rnddiv {border-radius: 15px;}
.bord {border: 3px solid #888; border-radius: 8px; box-shadow: 2px 3px #339; 	/*margin:auto;*/ }
.b0 {border-width: 0;}
.pad8	{padding:8px;}


/*div.sticky {   			original from gridplay
	position: -webkit-sticky;
	position: sticky; 
	bottom: 0;
	background-color: gray;
	border: 2px solid yellow;
	padding: 0px;					//all sides
	font-size: 16px;
	border-radius: 6px;
	width: 50%;
	margin: auto;
	text-align: center;
	}*/

div.sticky {
	position: -webkit-sticky;
	position: sticky; 
	bottom: 0;
	background-color: #ccc;
	border: 2px solid yellow;
	padding: 8px;					/*all sides*/
	/*font-size: 1.5em;*/
	border-radius: 6px;
	width: 75%;
	margin: auto;
	text-align: center;
	}
#sticky {
  background-color: orange;
  width: 100px;
  height: 100px;
  position: sticky;
  bottom: 0px;
}
.warn1	{font-size:1em; color:yellow; font-weight:bold;}
.warn2	{font-size:2em; color:yellow; font-weight:bold;}
.warn3	{display:block}



/* ---- ONLY ONE BREAKPOINT ---- */
						/* study - flex-basis*/
@media screen and (max-width: 980px) {
	.columns .column {
		flex-basis: 100%;
		margin: 0 0 5px 0;
		/*font-size: 150%;*/
	}
	h2 {font-size: 200%;} 
	.s300 {font-size: 230%;}
	iframe {width:95%; height:480px;}
	audio {height: 50%;}
 	.responsive {width: 100%; height: auto;} 
	.hov01 {font-weight: 900;}
	.wvt1		{font-size: 2vw;}
	.mygrid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	}
	.card1 {grid-column:1; grid-row:1;}
	.card2 {grid-column:1; grid-row:2;}
	.addr { width:90%;}

} 	/*================ end@media980*/