/* CASCODING STYLE SHEET for EPI MODEL page */
										/* beta */

img.thumb { 										
	max-width: 150px; 
	max-height: 150px; 
	margin: 10px;
	}



.group {
	border: 2px solid;
	border-radius: 10px;
	padding: 10px;
	width: 616px;
	text-align: center;
	}

grouphead	{ font-size: 30px; padding: 0px; font-style: italic; } 	/* too large? use a font? slightly clunky, but avoids having to declare fonts in every child */

/* instead of group head redefine H2 here DOTHISDOTHISDOTHIS   */

.model {
	border: 1px solid;
	border-radius: 5px;
	padding: 5px;
	width: 98%;	}

.modelflex {
	display: flex;
	flex-flow: row wrap;
	min-height: 170px;		/* I made this tag up.  It is required to prevent the image from floating below the flexbox. */
	}

.section {
	flex: 1 100%;
	}

.epimodelmore { order: 1; text-align: center; width: 18%; padding: 5px; font-family: Georgia,Serif; font-weight: bold; }		/* percent width vs. px padding is clunky - percent should be avoided? should use flex auto margins... */
.epimodelname    { order: 2; text-align: center; width: 55%; padding: 5px; font-size: 20px; }
.epimodelorder { order: 3; text-align: center; width: 18%;	 padding: 5px; font-family: Georgia,Serif; font-weight: bold; }
.epimodeldesc  { order: 4; text-align: left; width: 100%; padding-left: 10px; align-self: flex-end;  } 		/* align-self acts as vertical justification, in this case, to the bottom */
.epimodelpic  { width:170px; float: right;}	

/* 	----------------------------------------------------------------------------------------------------------------------------------------------------------	and here begins the mobile recording van */

@media screen and (max-width:640px) {

.group {
	padding: 5px;
	width: 94%;
	}

.model {
	width: 95%;
	display: flex;
 	flex-direction: column;   
	}

.modelflex {
	min-height: 10px;
 	display: ;
	flex-flow: ; 	
	}

.epimodelmore, .epimodelorder, .epimodeldesc { display: none; }

.epimodelname { order: 1; width: 100%; text-align: center; font-size: 25px; }	
.epimodelpic  { order: 2;  width: 100%; text-align: center; padding: 0px; float: none; }


	} /* end @media  */