@media (max-width: 1024px) and (min-width: 401px) and (orientation: portrait){
	div.inner_page {
		width: 95%;
	}

	body {
		font-size: 32pt;
	}

	div.content_section_text p::first-letter,div.content::first-letter {
		font-size: 37pt;
	}

	/* https://css-tricks.com/responsive-data-tables/ */

	/*
	 * Force table to not be like tables anymore
	 */
	table, thead, tbody, th, td, tr {
		display: block;
	}

	/*
	 * Hide table headers (but not display: none;, for accessibility)
	 */
	thead tr {
		position: absolute;
		top: -9999%;
		left: -9999%;
	}

	td {
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 50%;
	}

	td::before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
}

/* iframe */
@media (width: 400px) and (height: 250px) {
	div.inner_page {
		width: 95%;
	}

	body {
		font-size: 11pt;
	}

	div.content_section_text p::first-letter,div.content::first-letter {
		font-size: 15pt;
	}

	/*
	 * Force table to not be like tables anymore
	 */
	table, thead, tbody, th, td, tr {
		display: block;
	}

	/*
	 * Hide table headers (but not display: none;, for accessibility)
	 */
	thead tr {
		position: absolute;
		top: -9999%;
		left: -9999%;
	}

	td {
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 50%;
	}

	td::before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
}

@media (max-width: 400px) and (orientation: portrait){
	div.inner_page {
		width: 100%;
		margin: 0;
	}

	body {
		font-size: 24pt;
	}
}
@media only screen and (orientation: landscape)
	  and (min-width: 992px)
	  and (max-width: 1199px) {
	    body { font-size: 14pt; }
        }
	@media only screen and (orientation: landscape)
	  and (min-width: 768px)
	  and (max-width: 991px) {
            body { font-size: 14pt; }
        }
	@media only screen and (orientation: landscape)
	  and (min-width: 480px)
	  and (max-width: 767px) {
            body { font-size: 11pt; }
        }
	@media only screen and (orientation: landscape)
	  and (max-width: 479px) {
            body { font-size: 8pt; }
        }
	@media only screen and (orientation: landscape)
	  and (min-device-width : 375px)
	  and (max-device-width : 667px) {
            body { font-size: 9.5pt; }
        }

/* https://css-tricks.com/responsive-data-tables/ */
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
/*@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {*/
@media (max-width: 1024px) and (min-width: 401px) {
	div.inner_page {
		width: 95%;
	}

	body {
		font-size: 32pt;
	}

	div.content_section_text p::first-letter,div.content::first-letter {
		font-size: 37pt;
	}

	/*
	 * Force table to not be like tables anymore
	 */
	table, thead, tbody, th, td, tr {
		display: block;
	}

	/*
	 * Hide table headers (but not display: none;, for accessibility)
	 */
	thead tr {
		position: absolute;
		top: -9999%;
		left: -9999%;
	}

	tbody tr {
		border-top: 5px solid var(--gray-color);
		border-bottom: 5px solid var(--gray-color);
	}

	td {
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 50%;
	}

	td::before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
}