@charset "utf-8";
/* CSS Document */
/*  */
.warning {
	display: none;
}
html {
	margin: 0;
	padding: 0;
}

body {
	box-sizing: border-box;
	margin: 0;
}
main {
	width: 990px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #F1F1F2;
	margin-left: auto;
	margin-right: auto;
}
h1  {
	font-size: 52px;
	font-family: 'Kameron', Times, serif;
	font-weight: bolder;
}
h2 {
	text-align: center;
}
a {
	font-family: Arial, Helvetica, sans-serif;
}
img {
	padding-top: 10px;
	padding-bottom: 10px;
}
.arrow {
	display: inline-grid;
}
.grid-item {
	display: grid;
} 
.red-text {
    color: rgba(255,0,0,1.00);
}
.blue-text {
    color: rgba(0,0,255,1.00);
}

.vert-text {
	writing-mode: horizontal-bt;
	writing-mode: vertical-rl;
	transform: rotate(-180deg);
	text-align: center;

}
/* Top of Page "Exposure Adjustment Chart" */

header {
	width: 990px;
	text-align: center;
	background-color: #D0D2D3;
	border: thin solid black;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10px;
	box-sizing: border-box;
}
/* Instruction Section */
.instructions {
	width: 990px;
	background-color: #F1F1F2;
	border-bottom: thin solid black;
	border-left: thin solid black;
	border-right: thin solid black;
	margin-top: 0;
	margin-bottom: 0;
	box-sizing: border-box;
}
.instruct1 {
	padding: 5px 20px 5px 20px;
}
.instruct2 {
	width: 80%;
	background-color: #E6E7E8;
	border: thin solid black;
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 20px 5px 20px;
}
.instruct3 {
	text-align: center;
	padding: 5px 20px 5px 20px;
}
/* Chart Section */
.charts {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-flow: column;
	margin: auto;
	padding-top: 0;
	padding-bottom: 0px;
	padding-left: 0;
	padding-right: 0;
	column-gap: 0;
}
/* Chart 1 section Aperture Chart */


.chart1 {
	display: inline-grid;
	margin: 0;
	border-bottom: thin solid black;
	border-left: thin solid black;
	border-right: thin solid black;
    background-color: #E6E7E8;
	max-width: 330px;
	padding-bottom: 20px;
}
/* New Example Grid Generic Components */

/* New Example Grid Generic Components END*/
/* New Aperture Example Grid */
.example {
	display: grid;
	font-size: 1em;
	grid-template-columns: 2fr 1fr;
	padding-left: 5px;
	padding-right: 5px;
}
.example-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	grid-template-rows: repeat(21, .5rem);
}
.black-bracket-top {
	display: inline-grid;
/*	width: 40px;
	height: 20px; */
	border-top: thin solid black;
	border-left: thin solid black;
	grid-column-start: 3;
	grid-column-end: 7;
	grid-row-start: 2;
	grid-row-end: 3;
}
.black-grid-text {
	font-weight: bold;
	display: inline-grid;
	width: auto;
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 4;
	grid-row-end: 7;
}
.black-bracket-bottom {
	display: inline-grid;
	border-bottom: thin solid black;
	border-left: thin solid black;
	grid-column-start: 3;
	grid-column-end: 7;
	grid-row-start: 7;
	grid-row-end: 11;
}
.red-bracket-top {
	display: inline-grid;
	border-top: thin solid red;
	border-left: thin solid red;
	grid-column-start: 5;
	grid-column-end: 7;
	grid-row-start: 6;
	grid-row-end: 7;
	margin: 0;
	padding: 0;
}
.red-grid-text {
	font-weight: bold;
	display: inline-grid;
	width: auto;
	color: red;
	grid-column-start: 4;
	grid-column-end: 8;
	grid-row-start: 8;
	grid-row-end: 11;
	margin: 0;
	padding: 0;
}
.red-bracket-bottom {
	display: inline-grid;
/*	width: 40px;
	height: 20px; */
	border-bottom: thin solid red;
	border-left: thin solid red;
	grid-column-start: 5;
	grid-column-end: 7;
	grid-row-start: 11;
	grid-row-end: 15;
	margin: 0;
	padding: 0;
}
.bracket-example-values  {
	margin-bottom: -1px;
    margin-top: -1px;
    font-weight: bold;
    display: grid;
	width: auto;
	height: 8rem;
	grid-column-start: 8;
	grid-column-end: 12;
	grid-row-start: 1;
	grid-row-end: 12;
}
.black-grid-example-values  {
	font-size: 1rem;
	margin: 0;
	padding: 0;
}
.red-grid-example-values  {
	color: red;
	font-size: 1rem;
	margin: 0;
	padding-bottom: .1rem;
}
.blue-grid-example-values {
	color: blue;
	font-size: 1rem;
	margin: 0;
	padding: 0;
}
.blue-bracket-top {
	display: inline-grid;
	border-top: thin solid blue;
	border-right: thin solid blue;
	grid-column-start: 12;
	grid-column-end: 16;
	grid-row-start: 4;
	grid-row-end: 5;
}
.blue-grid-text {
	font-weight: bold;
	display: inline-grid;
	width: auto;
	height: 1em;
	font-size: normal;
	color: blue;
	grid-column-start: 13;
	grid-column-end: 18;
	grid-row-start: 5;
	grid-row-end: 9;
}
.blue-bracket-bottom {
	display: inline-grid;
	border-bottom: thin solid blue;
	border-right: thin solid blue;
	grid-column-start: 12;
	grid-column-end: 16;
	grid-row-start: 8;
	grid-row-end: 13;
}

.green-grid-example-values {
	color: rgba(0,127,0,1.00);
	font-size: 1rem;
	margin: 0;
	padding: 0;
}
.green-bracket-top {
	display: inline-grid;
	border-top: thin solid rgba(0,127,0,1.00);
	border-right: thin solid rgba(0,127,0,1.00);
	grid-column-start: 12;
	grid-column-end: 14;
	grid-row-start: 9;
	grid-row-end: 9;
}
.green-grid-text {
	font-weight: bold;
	display: inline-grid;
	width: auto;
	height: 1em;
	font-size: normal;
	color: rgba(0,127,0,1.00);
	grid-column-start: 12;
	grid-column-end: 16;
	grid-row-start: 10;
	grid-row-end: 12;
}
.green-bracket-bottom {
	display: inline-grid;
	border-bottom: thin solid rgba(0,127,0,1.00);
	border-right: thin solid rgba(0,127,0,1.00);
	grid-column-start: 12;
	grid-column-end: 14;
	grid-row-start: 13;
	grid-row-end: 18;
}

.grid-right-text {
	display: inline-grid;
	width: 100%;
}

/* New Aperture Example Grid END */
.ap-example {
	display: grid;
	grid-template-columns: 50% 50%;
	padding-left: 10px;
	padding-right: 10px;
}
.ap-example img {
	display: inline-grid;
}
.ap-stops {
    display: grid;
    margin-left: auto;
    margin-right: auto;
	justify-content: center;
	grid-template-columns: 40px 60px auto;
	grid-template-rows: repeat(37, 1rem);
}
.common-stops {

	display: inline-grid;
	background-color: white;
	border-top: thin solid purple;
	border-left: thin solid purple;
	border-bottom: thin solid purple;
	border-right: thin solid purple;
	grid-column: 1 / 3;
	grid-row: 12 / 32;
	font-size: .9rem;
	font-weight: bold;
	color: purple;
	letter-spacing: 1.2px;
	
}
.stops {
    display: inline-grid;
    margin-left: auto;
    margin-right: auto;
	justify-content: center;
	grid-column: 2 / 2;
	grid-row: 1 / 37;
	padding-right: 10px;

}
.chart1 .arrow {
	display: inline-grid;
	grid-column: 4 / 4;
	grid-row: 1 / 37;
	padding-left: 10px;
}
.stops p {
	margin-bottom: -1px;
    margin-top: -1px;
    font-weight: bold;
    display: grid;
}


/* Chart 2 section Shutter Speed Chart */
.chart2 {
	display: inline-grid;
	margin: 0;
	border-bottom: thin solid black;
	background-color: #D0D2D3;
    max-width: 330px;
}
.shutter-example {
	display: grid;
	grid-template-columns: 50% 50%;
	padding-left: 10px;
	padding-right: 10px;
}
.shutter-example img {
	display: inline-grid;
}
.shutter-speed {
    display: grid;
    margin-left: auto;
    margin-right: auto;
	justify-content: center;
	grid-template-columns: 40px 70px auto;
	grid-template-rows: repeat(37, 1rem);
}
.common-speeds {

	display: inline-grid;
	background-color: white;
	border-top: thin solid purple;
	border-left: thin solid purple;
	border-bottom: thin solid purple;
	border-right: thin solid purple;
	grid-column: 1 / 3;
	grid-row: 19 / 38;
	letter-spacing: -.2px;
	font-size: .9rem;
	font-weight: bold;
	color: purple;

}
.speeds {
	display: inline-grid;
    margin-left: auto;
    margin-right: auto;
	justify-content: center;
	grid-column: 2 / 2;
	grid-row: 1 / 37;

}
.chart2 .arrow {
	display: inline-grid;
	grid-column: 4 / 4;
	grid-row: 1 / 37;
	padding-left: 20px;
}
.speeds p {
	margin-bottom: -1px;
    margin-top: -1px;
    font-weight: bold;
    display: grid;
}

/* Chart 3 section ISO Chart */
.chart3 {
	display: inline-grid;
	margin: 0;
	border-bottom: thin solid black;
	border-left: thin solid black;
	border-right: thin solid black;
	background-color: #E6E7E8;
    max-width: 330px;
}
.iso-example {
	display: grid;
	grid-template-columns: 50% 50%;
	padding-left: 10px;
	padding-right: 10px;
}
.iso-example img {
	display: inline-grid;
}
.iso-stops {
	display: grid;
    margin-left: auto;
    margin-right: auto;
	justify-content: center;
	grid-template-columns: auto auto auto;
	grid-template-rows: repeat(37, 1rem);
}
.common-iso {
	width: 60px;
	display: inline-grid;
	grid-column: 1 / 1;

}
.iso {
	display: inline-grid;
    margin-left: auto;
    margin-right: auto;
	justify-content: center;
	grid-column: 2 / 2;
	grid-row: 1 / 35;
	padding-right: 20px;

}
.iso-stops p {
    margin-bottom: -1px;
    margin-top: -1px;
    font-weight: bold;
    display: grid;
}
.chart3 .arrow {
	display: inline-grid;
	grid-column: 3 / 3;
	grid-row: 1 / 37;

}
/* Note Section */
.note{
	display: flex;
	border-bottom: thin solid black;
	border-left: thin solid black;
	border-right: thin solid black;	
	margin-bottom: 100px;
	padding: 5px 20px 5px 20px;
}
.note-right {
	padding-left: 5px;
}

/* @media section */
@media screen and (min-width: 330px) and (max-width: 899px) {
/*	body {
		width: 100%;
		align-content: center;
		margin-left: auto;
		margin-right: auto;
		
	}  */
	header {
		width: auto;

	}
	h1 {
		width: auto;
	}
	main {
		width: auto;
		border: thin solid black;
	}
	.instructions {
		width: auto;
		border: none;
	}
	a, .instruct1, .instruct3 {
		font-size: 1.5em;
		border: none;
	}
	.instruct2 {
		font-size: 1.5em;
		
	}
		
	.charts {
	width: auto;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: repeat(3, auto);
	
	}
	.chart1, .chart2, .chart3 {
		width: auto;
		display: block;
		border: thin solid black;
		margin-left: auto;
		margin-right: auto;
		
	}
	.note {
		width: auto;
		display: block;
		border: none;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
		
	}
}
@media screen and (max-width: 329px) {
	header, main {
		display:none;
	}
	.warning {
	display: block;
}
}