/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

CSS for Franklin Gothic Showcase site
Website: Franklin Gothic
Author: Riley May
Date: 2020
License: GNU Public License

- - - - - - - - - - - - - - - - - - 
Table of Contents
- - - - - - - - - - - - - - - - - -

1.0 General Styles
2.0 Font Styles
3.0 Main Navigation
4.0 Content Styles
5.0 Grid
6.0 Responsive Layout

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*= = = = = = = = = = = = = = = = = = = = = = = = 

1.0 General Styles

= = = = = = = = = = = = = = = = = = = = = = = =*/

*
	{
		margin: 5 px;
		padding: 5 px;
		box-sizing: border-box;
	}

Html, body
	{
		width: 100%;
		height: 100%;
	}

Li, a
	{
		text-decoration: none; //removes underline
		list-style-type: none; //removes bullet point
	}

/* = = = = = = = = = = = = = = = = = = = = = = = = 

2.0 Font Styles

= = = = = = = = = = = = = = = = = = = = = = = = */

h1
	{
		Font-family: Franklin-gothic-urw, sans-serif;
		Font-weight: 900;
		font-size: 200px;
		Font-style: normal;
		line-height: 160px;
	}

h2
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 700;
		font-size: 150px;
		Font-style: normal;
	}

h3
	{
		Font-family: franklin-gothic-urw, sans-serif:
		Font-weight: 500;
		font-size: 50px;
		Font-style: normal;
	}

P
	{
		font-family: Franklin-gothic-urw, sans-serif;
		Font-weight: 400;
		Font-style: normal;
		Text-align: left;
	}

#background
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 700;
		font-size: 150px;
		Font-style: normal;
		text-align: left;
		color: #70D6FF;
	}

#in-use
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 700;
		font-size: 150px;
		Font-style: normal;
		text-align: right;
		color: #70D6FF;
	}

#abcde
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 500;
		font-size: 60px;
		Font-style: normal;
		text-align: right;
		border-bottom: 12px solid #70D6FF;
	}
#fghijk
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 500;
		font-size: 60px;
		Font-style: normal;
		text-align: right;
		border-bottom: 12px solid #70D6FF;
	}
#lmno
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 500;
		font-size: 60px;
		Font-style: normal;
		text-align: right;
		border-bottom: 12px solid #70D6FF;
	}

#pqrst
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 500;
		font-size: 60px;
		Font-style: normal;
		text-align: right;
		border-bottom: 12px solid #70D6FF;
	}

#uvwxyz
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 500;
		font-size: 60px;
		Font-style: normal;
		text-align: right;
		border-bottom: 12px solid #70D6FF;
	}

#glyphs
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 700;
		font-size: 150px;
		Font-style: normal;
		text-align: left;
		color: #70D6FF;
	}

#glyph-numbers
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 500;
		font-size: 80px;
		Font-style: normal;
		text-align: left;
		border-bottom: 12px solid #70D6FF;
	}

#numbers
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 400;
		font-size: 150px;
		Font-style: normal;
		text-align: left;
		letter-spacing: 15px;
	}

#numbers2
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 400;
		font-size: 150px;
		Font-style: normal;
		text-align: left;
		letter-spacing: 15px;
	}

#characters
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 500;
		font-size: 80px;
		Font-style: normal;
		text-align: right;
		border-bottom: 12px solid #70D6FF;
	}

#glyphs2
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 400;
		font-size: 70px;
		Font-style: normal;
		text-align: right;
	}

#glyphs3
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 400;
		font-size: 70px;
		Font-style: normal;
		text-align: right;
	}

#anatomy
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 700;
		font-size: 150px;
		Font-style: normal;
		text-align: right;
		color: #70D6FF;
	}

#g
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 700;
		font-size: 700px;
		Font-style: normal;
		text-align: center;
	}

#p6
	{
		font-family: Franklin-gothic-urw, sans-serif;
		Font-weight: 400;
		Font-style: normal;
		Text-align: left;
	}

#a
	{
		Font-family: franklin-gothic-urw, sans-serif;
		Font-weight: 700;
		font-size: 700px;
		Font-style: normal;
		text-align: center;
	}

.p6
	{
		border-bottom: 12px solid #70D6FF;
		line-height: 110%;
	}

.p7
	{
		border-bottom: 12px solid #70D6FF;
		line-height: 110%;
	}

#sources
	{
		font-family: Franklin-gothic-urw, sans-serif;
		Font-weight: 600;
		Font-style: normal;
		Text-align: left;
	}

/*= = = = = = = = = = = = = = = = = = = = = = = = 

3.0 Main Navigation Styles

= = = = = = = = = = = = = = = = = = = = = = = =*/
		
A
	{
		text-decoration:none;
		color:black;
	}

a.b-background,
a.b-in-use,
a.b-glyphs,
A.b-anatomy
	{
		display: block;
		border-bottom: 12px solid #70D6FF;
		width: 800px;
		height: 60px;
		text-align: right;
		line-height: 30px;
		font-family: Franklin-gothic-urw;
		font-weight: bold;
		margin: 30px;
		font-size: 50px;
	}

a.b-backtotop
	{
		display: block;
		border-bottom: 12px solid #70D6FF;
		width: 300px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		font-family: Franklin-gothic-urw;
		font-weight: bold;
		margin: 30px;
	}

a.b-background:hover,
a.b-in-use:hover,
a.b-glyphs:hover,
a.b-anatomy:hover,
a.b-backtotop:hover

	{
		background-color: #70D6FF;
		color: white;
	}

a.b-background:active,
a.b-in-use:active,
a.b-glyphs:active,
a.b-anatomy:active,
a.b-backtotop:active

	{
		background-color: white;
	}

/*= = = = = = = = = = = = = = = = = = = = = = = = 

4.0 Content Styles

= = = = = = = = = = = = = = = = = = = = = = = =*/

#video1
	{
		preload: auto;
		loop: loop;
		muted: muted;
		display: block;
	}

#photo1
	{
		width: 100%;
		height: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	} 

#photo3
	{
		width: 400px;
		height: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

#photo4
	{
		width: 400px;
		height: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

#photo5
	{
		width: 500px;
		height: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

/*= = = = = = = = = = = = = = = = = = = = = = = = 

5.0 Grid Styles

= = = = = = = = = = = = = = = = = = = = = = = =*/

.grid-container
	{
		border: none;
  		max-width:1200px;
  		margin:0 auto;
  		padding:0;
  		display: grid;
  		grid-gap:10px 10px;
  		grid-template-columns: repeat(8, 1fr);
  		grid-auto-rows: 150px;
	}

.grid-item
	{
		background-color: none;
		color: black;
		font-size: 2em;
		grid-column: span 1;
		text-align: left;
		padding: 0 0;
		overflow: hidden;
	}

	/* = = = = = = = = = = = = = = = = = = = = = =

	VIDEO

	= = = = = = = = = = = = = = = = = = = = = = */
	.video 
		{
  			grid-column-start: 1;
 			grid-column-end: span 7;
  			grid-row-start: 1;
 			grid-row-end: span 5;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	HEADER - FRANKLIN GOTHIC

	= = = = = = = = = = = = = = = = = = = = = = */
	.one 
		{
  			grid-column-start: 1;
 			grid-column-end: span 7;
  			grid-row-start: 5;
 			grid-row-end: span 5;
  			overflow: hide;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	MAIN NAVIGATION

	= = = = = = = = = = = = = = = = = = = = = = */
	.two
		{
			grid-column-start: 3;
			grid-column-end: span 7;
			grid-row-start: 9;
			grid-row-end: span 3;
			overflow: hidden; 
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	HEADER - BACKGROUND

	= = = = = = = = = = = = = = = = = = = = = = */
	.three
		{
			grid-column-start: 1;
 			grid-column-end: span 6;
  			grid-row-start: 13;
 			grid-row-end: span 2;
  			overflow: hidden;	
		}		

	/* = = = = = = = = = = = = = = = = = = = = = =

	P - 1

	= = = = = = = = = = = = = = = = = = = = = = */
	.four
		{
			grid-column-start: 5;
			grid-column-end: span 4;
			grid-row-start: 16;
			grid-row-end: span 4;
			overflow: hidden;
		}
	/* = = = = = = = = = = = = = = = = = = = = = =

	P - 2

	= = = = = = = = = = = = = = = = = = = = = = */
	.five
		{
			grid-column-start: 1;
			grid-column-end: span 4;
			grid-row-start: 20;
			grid-row-end: span 5;
			overflow: hidden;
		}
	/* = = = = = = = = = = = = = = = = = = = = = =

	P - 3

	= = = = = = = = = = = = = = = = = = = = = = */
	.six
		{
			grid-column-start: 5;
			grid-column-end: span 4;
			grid-row-start: 24;
			grid-row-end: span 5;
			overflow: hidden;
		}
	
	/* = = = = = = = = = = = = = = = = = = = = = =

	P - 4

	= = = = = = = = = = = = = = = = = = = = = = */
	.seven
		{
			grid-column-start: 1;
			grid-column-end: span 4;
			grid-row-start: 29;
			grid-row-end: span 4;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	P - 5

	= = = = = = = = = = = = = = = = = = = = = = */
	.eight
		{
			grid-column-start: 5;
			grid-column-end: span 4;
			grid-row-start: 33;
			grid-row-end: span 4;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	HEADER - IN USE

	= = = = = = = = = = = = = = = = = = = = = = */
	.nine
		{
			grid-column-start: 6;
			grid-column-end: span 3;
			grid-row-start: 37;
			grid-row-end: span 2;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	CHARACTERS - ABCDE
	
	= = = = = = = = = = = = = = = = = = = = = = */
	.ten
		{
			grid-column-start: 3;
			grid-column-end: span 5;
			grid-row-start: 39;
			grid-row-end: span 1;
			overflow: hidden;
		}
	
	/* = = = = = = = = = = = = = = = = = = = = = =

	CHARACTERS - FGHIJK

	= = = = = = = = = = = = = = = = = = = = = = */
	.eleven
		{
			grid-column-start: 2;
			grid-column-end: span 5;
			grid-row-start: 40;
			grid-row-end: span 1;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	CHARACTERS - LMNO

	= = = = = = = = = = = = = = = = = = = = = = */
	.twelve
		{
			grid-column-start: 1;
			grid-column-end: span 4;
			grid-row-start: 41;
			grid-row-end: span 1;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	CHARACTERS - PQRST

	= = = = = = = = = = = = = = = = = = = = = = */
	.thirteen
		{
			grid-column-start: 2;
			grid-column-end: span 5;
			grid-row-start: 42;
			grid-row-end: span 1;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	CHARACTERS - UVWXYZ

	= = = = = = = = = = = = = = = = = = = = = = */
	.fourteen
		{
			grid-column-start: 3;
			grid-column-end: span 5;
			grid-row-start: 43;
			grid-row-end: span 1;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	HEADER - GLYPHS

	= = = = = = = = = = = = = = = = = = = = = = */
	.fifteen
		{
			grid-column-start: 1;
			grid-column-end: span 3;
			grid-row-start: 45;
			grid-row-end: span 2;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	SUBHEADER - NUMBERS

	= = = = = = = = = = = = = = = = = = = = = = */
	.sixteen
		{
			grid-column-start: 1;
			grid-column-end: span 3;
			grid-row-start: 47;
			grid-row-end: span 2;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	CHARACTERS - 12345

	= = = = = = = = = = = = = = = = = = = = = = */
	.seventeen
		{
			grid-column-start: 1;
			grid-column-end: span 5;
			grid-row-start: 47;
			grid-row-end: span 3;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	CHARACTERS - 67890

	= = = = = = = = = = = = = = = = = = = = = = */
	.eighteen
		{
			grid-column-start: 1;
			grid-column-end: span 5;
			grid-row-start: 48;
			grid-row-end: span 3;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	SUBHEADER - CHARACTERS

	= = = = = = = = = = = = = = = = = = = = = = */
	.nineteen
		{
			grid-column-start: 6;
			grid-column-end: span 3;
			grid-row-start: 51;
			grid-row-end: span 2;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	CHARACTERS - `~!@#$%^&*()-_=+

	= = = = = = = = = = = = = = = = = = = = = = */
	.twenty
		{
			grid-column-start: 3;
			grid-column-end: span 6;
			grid-row-start: 52;
			grid-row-end: span 3;
			overflow: hidden;
		}	

	/* = = = = = = = = = = = = = = = = = = = = = =

	CHARACTERS - []{}\|;:'",.<>/?

	= = = = = = = = = = = = = = = = = = = = = = */
	.twenty-one
		{
			grid-column-start: 3;
			grid-column-end: span 6;
			grid-row-start: 53;
			grid-row-end: span 3;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	HEADER - ANATOMY

	= = = = = = = = = = = = = = = = = = = = = = */
	.twenty-two
		{
			grid-column-start: 5;
			grid-column-end: span 5;
			grid-row-start: 55;
			grid-row-end: span 2;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	SUBHEADER - G

	= = = = = = = = = = = = = = = = = = = = = = */
	.g
		{
			grid-column-start: 1;
			grid-column-end: span 3;
			grid-row-start: 52;
			grid-row-end: span 10;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	P - 6

	= = = = = = = = = = = = = = = = = = = = = = */
	.p6
		{
			grid-column-start: 4;
			grid-column-end: span 5;
			grid-row-start: 58;
			grid-row-end: span 1;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	SUBHEADER - A

	= = = = = = = = = = = = = = = = = = = = = = */
	.a
		{
			grid-column-start: 6;
			grid-column-end: span 3;
			grid-row-start: 55;
			grid-row-end: span 10;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	P - 7

	= = = = = = = = = = = = = = = = = = = = = = */
	.p7
		{
			grid-column-start: 1;
			grid-column-end: span 5;
			grid-row-start: 62;
			grid-row-end: span 20px;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	BACK TO TOP BUTTON

	= = = = = = = = = = = = = = = = = = = = = = */
	.twenty-three
		{
			grid-column-start: 4;
			grid-column-end: span 3;
			grid-row-start: 65;
			grid-row-end: span 1;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	SUBHEADER - SOURCES

	= = = = = = = = = = = = = = = = = = = = = = */
	.twenty-four
		{
			grid-column-start: 1;
			grid-column-end: span 2;
			grid-row-start: 66;
			grid-row-end: span 1;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	P - SOURCES LINK

	= = = = = = = = = = = = = = = = = = = = = = */
	.twenty-five
		{
			grid-column-start: 1;
			grid-column-end: span 7;
			grid-row-start: 67;
			grid-row-end: span 1;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	PHOTO1

	= = = = = = = = = = = = = = = = = = = = = = */
	.photo1
		{
			grid-column-start: 1;
			grid-column-end: span 4;
			grid-row-start: 16;
			grid-row-end: span 3;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	PHOTO2

	= = = = = = = = = = = = = = = = = = = = = = */
	.photo2
		{
			grid-column-start: 5;
			grid-column-end: span 4;
			grid-row-start: 20;
			grid-row-end: span 4;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	PHOTO3

	= = = = = = = = = = = = = = = = = = = = = = */
	.photo3
		{
			grid-column-start: 1;
			grid-column-end: span 4;
			grid-row-start: 25;
			grid-row-end: span 4;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	PHOTO4

	= = = = = = = = = = = = = = = = = = = = = = */
	.photo4
		{
			grid-column-start: 5;
			grid-column-end: span 4;
			grid-row-start: 29;
			grid-row-end: span 4;
			overflow: hidden;
		}

	/* = = = = = = = = = = = = = = = = = = = = = =

	PHOTO5

	= = = = = = = = = = = = = = = = = = = = = = */
	.photo5
		{
			grid-column-start: 1;
			grid-column-end: span 4;
			grid-row-start: 34;
			grid-row-end: span 4;
			overflow: hidden;
		}

/*= = = = = = = = = = = = = = = = = = = = = = = = 

6.0 Responsive Layouts

= = = = = = = = = = = = = = = = = = = = = = = =*/

	/*= = = = = = = = = = START MEDIA QUERY (768PX) = = = = = = = = = =*/

@media only screen and (max-width: 768px) {
	.grid-container
		{
  			margin:0 auto;
  			padding:0 auto;
  			display: grid;
  			grid-template-columns: repeat (4, 1fr) ;
  			grid-auto-rows: auto;
		}

		/*= = = = = = = = = = = = = = = = = = = = = = = = 

		Coordinates for Grid Elements 768px

		= = = = = = = = = = = = = = = = = = = = = = = =*/

			/* = = = = = = = = = = = = = = = = = = = = = =

			VIDEO

			= = = = = = = = = = = = = = = = = = = = = = */
			.video 
				{
  					grid-column-start: 1;
 					grid-column-end: span 24;
  					grid-row-start: 1;
 					grid-row-end: auto;
  					overflow: hide;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			HEADER - FRANKLIN GOTHIC

			= = = = = = = = = = = = = = = = = = = = = = */
			.one 
				{
  					grid-column-start: 1;
 					grid-column-end: span 12;
  					grid-row-start: 5;
 					grid-row-end: auto;
  					overflow: hide;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			MAIN NAVIGATION

			= = = = = = = = = = = = = = = = = = = = = = */
			.two
				{
					grid-column-start: 2;
					grid-column-end: span 18;
					grid-row-start: 9;
					grid-row-end: auto;
					overflow: hidden; 
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			HEADER - BACKGROUND

			= = = = = = = = = = = = = = = = = = = = = = */
			.three
				{
					grid-column-start: 1;
 					grid-column-end: span 8;
  					grid-row-start: 13;
 					grid-row-end: span 2;
  					overflow: hidden;	
				}		

			/* = = = = = = = = = = = = = = = = = = = = = =

			P - 1

			= = = = = = = = = = = = = = = = = = = = = = */
			.four
				{
					grid-column-start: 5;
					grid-column-end: span 16;
					grid-row-start: 15;
					grid-row-end: auto;
					overflow: hidden;
				}
			/* = = = = = = = = = = = = = = = = = = = = = =

			P - 2

			= = = = = = = = = = = = = = = = = = = = = = */
			.five
				{
					grid-column-start: 1;
					grid-column-end: span 5;
					grid-row-start: 19;
					grid-row-end: auto;
					overflow: hidden;
				}
			/* = = = = = = = = = = = = = = = = = = = = = =

			P - 3

			= = = = = = = = = = = = = = = = = = = = = = */
			.six
				{
					grid-column-start: 5;
					grid-column-end: span 16;
					grid-row-start: 24;
					grid-row-end: auto;
					overflow: hidden;
				}
	
			/* = = = = = = = = = = = = = = = = = = = = = =

			P - 4

			= = = = = = = = = = = = = = = = = = = = = = */
			.seven
				{
					grid-column-start: 1;
					grid-column-end: span 5;
					grid-row-start: 29;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			P - 5

			= = = = = = = = = = = = = = = = = = = = = = */
			.eight
				{
					grid-column-start: 5;
					grid-column-end: span 16;
					grid-row-start: 33;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			HEADER - IN USE

			= = = = = = = = = = = = = = = = = = = = = = */
			.nine
				{
					grid-column-start: 3;
					grid-column-end: span 20;
					grid-row-start: 37;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - ABCDE
	
			= = = = = = = = = = = = = = = = = = = = = = */
			.ten
				{
					grid-column-start: 3;
					grid-column-end: span 16;
					grid-row-start: 39;
					grid-row-end: auto;
					overflow: hidden;
				}
	
			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - FGHIJK
		
			= = = = = = = = = = = = = = = = = = = = = = */
			.eleven
				{
					grid-column-start: 2;
					grid-column-end: span 8;
					grid-row-start: 40;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =
	
			CHARACTERS - LMNO
		
			= = = = = = = = = = = = = = = = = = = = = = */
			.twelve
				{
					grid-column-start: 1;
					grid-column-end: span 6;
					grid-row-start: 41;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - PQRST

			= = = = = = = = = = = = = = = = = = = = = = */
			.thirteen
				{
					grid-column-start: 2;
					grid-column-end: span 8;
					grid-row-start: 42;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - UVWXYZ

			= = = = = = = = = = = = = = = = = = = = = = */
			.fourteen
				{
					grid-column-start: 3;
					grid-column-end: span 16;
					grid-row-start: 43;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			HEADER - GLYPHS

			= = = = = = = = = = = = = = = = = = = = = = */
			.fifteen
				{
					grid-column-start: 1;
					grid-column-end: span 4;
					grid-row-start: 45;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			SUBHEADER - NUMBERS
	
			= = = = = = = = = = = = = = = = = = = = = = */
			.sixteen
				{
					grid-column-start: 1;
					grid-column-end: span 8;
					grid-row-start: 47;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - 12345

			= = = = = = = = = = = = = = = = = = = = = = */
			.seventeen
				{
					grid-column-start: 1;
					grid-column-end: span 12;
					grid-row-start: 48;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - 67890

			= = = = = = = = = = = = = = = = = = = = = = */
			.eighteen
				{
					grid-column-start: 1;
					grid-column-end: span 12;
					grid-row-start: 49;
					grid-row-end: auto;
					overflow: hidden;
				}
		
			/* = = = = = = = = = = = = = = = = = = = = = =

			SUBHEADER - CHARACTERS

			= = = = = = = = = = = = = = = = = = = = = = */
			.nineteen
				{
					grid-column-start: 3;
					grid-column-end: span 20;
					grid-row-start: 51;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - `~!@#$%^&*()-_=+

			= = = = = = = = = = = = = = = = = = = = = = */
			.twenty
				{
					grid-column-start: 2;
					grid-column-end: span 20;
					grid-row-start: 52;
					grid-row-end: auto;
					overflow: hidden;
				}	

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - []{}\|;:'",.<>/?

			= = = = = = = = = = = = = = = = = = = = = = */
			.twenty-one
				{
					grid-column-start: 2;
					grid-column-end: span 20;
					grid-row-start: 53;
					grid-row-end: auto;
					overflow: hidden;
				}
	
			/* = = = = = = = = = = = = = = = = = = = = = =

			HEADER - ANATOMY

			= = = = = = = = = = = = = = = = = = = = = = */
			.twenty-two
				{
					grid-column-start: 4;
					grid-column-end: span 20;
					grid-row-start: 55;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			SUBHEADER - G
	
			= = = = = = = = = = = = = = = = = = = = = = */
			.g
				{
					grid-column-start: 1;
					grid-column-end: span 4;
					grid-row-start: 53;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =
	
			P - 6

			= = = = = = = = = = = = = = = = = = = = = = */
			.p6
				{
					grid-column-start: 5;
					grid-column-end: span 20;
					grid-row-start: 58;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			SUBHEADER - A

			= = = = = = = = = = = = = = = = = = = = = = */
			.a
				{
					grid-column-start: 6;
					grid-column-end: span 16;
					grid-row-start: 57;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			P - 7

			= = = = = = = = = = = = = = = = = = = = = = */
			.p7
				{
					grid-column-start: 1;
					grid-column-end: span 5;
					grid-row-start: 62;
					grid-row-end: auto;
					overflow: hidden;
				}
	
			/* = = = = = = = = = = = = = = = = = = = = = =

			BACK TO TOP BUTTON

			= = = = = = = = = = = = = = = = = = = = = = */
			.twenty-three
				{
					grid-column-start: 4;
					grid-column-end: span 6;
					grid-row-start: 65;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			SUBHEADER - SOURCES

			= = = = = = = = = = = = = = = = = = = = = = */
			.twenty-four
				{
					grid-column-start: 1;
					grid-column-end: span 2;
					grid-row-start: 66;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			P - SOURCES LINK

			= = = = = = = = = = = = = = = = = = = = = = */
			.twenty-five
				{
					grid-column-start: 1;
					grid-column-end: span 16;
					grid-row-start: 67;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			PHOTO1

			= = = = = = = = = = = = = = = = = = = = = = */
			.photo1
				{
					grid-column-start: 1;
					grid-column-end: span 4;
					grid-row-start: 15;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			PHOTO2

			= = = = = = = = = = = = = = = = = = = = = = */
			.photo2
				{
					grid-column-start: 6;
					grid-column-end: span 16;
					grid-row-start: 19;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			PHOTO3

			= = = = = = = = = = = = = = = = = = = = = = */
			.photo3
				{
					grid-column-start: 1;
					grid-column-end: span 4;
					grid-row-start: 24;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			PHOTO4

			= = = = = = = = = = = = = = = = = = = = = = */
			.photo4
				{
					grid-column-start: 6;
					grid-column-end: span 16;
					grid-row-start: 29;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			PHOTO5

			= = = = = = = = = = = = = = = = = = = = = = */
			.photo5
				{
					grid-column-start: 1;
					grid-column-end: span 4;
					grid-row-start: 33;
					grid-row-end: auto;
					overflow: hidden;
				}

	/*= = = = = = = = = = = = = = = = = = = = = = = = 

	Fonts for @media 768px

	= = = = = = = = = = = = = = = = = = = = = = = =*/

	h1
		{
			Font-family: Franklin-gothic-urw, sans-serif;
			Font-weight: 900;
			font-size: 120px;
			Font-style: normal;
			line-height: 110px;
		}

	h2
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 80px;
			Font-style: normal;
		}

	h3
		{
			Font-family: franklin-gothic-urw, sans-serif:
			Font-weight: 500;
			font-size: 50px;
			Font-style: normal;
		}

	P
		{
			font-family: Franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			font-size: 22px;
			Font-style: normal;
			Text-align: left;
		}	

	#background
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 100px;
			Font-style: normal;
			text-align: left;
			color: #70D6FF;
		}

	#in-use
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 100px;
			Font-style: normal;
			text-align: right;
			color: #70D6FF;
		}

	#abcde
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 45px;
			Font-style: normal;
			text-align: right;
			border-bottom: 10px solid #70D6FF;
		}
	#fghijk
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 45px;
			Font-style: normal;
			text-align: right;
			border-bottom: 10px solid #70D6FF;
		}
	#lmno
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 45px;
			Font-style: normal;
			text-align: right;
			border-bottom: 10px solid #70D6FF;
		}

	#pqrst
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 45px;
			Font-style: normal;
			text-align: right;
			border-bottom: 10px solid #70D6FF;
		}

	#uvwxyz
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 45px;
			Font-style: normal;
			text-align: right;
			border-bottom: 10px solid #70D6FF;
		}

	#glyphs
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 100px;
			Font-style: normal;
			text-align: left;
			color: #70D6FF;
		}

	#glyph-numbers
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 80px;
			Font-style: normal;
			text-align: left;
			border-bottom: 12px solid #70D6FF;
		}

	#numbers
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			font-size: 120px;
			Font-style: normal;
			text-align: left;
			letter-spacing: 15px;
		}

	#numbers2
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			font-size: 120px;
			Font-style: normal;
			text-align: left;
			letter-spacing: 15px;
		}

	#characters
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 80px;
			Font-style: normal;
			text-align: right;
			border-bottom: 12px solid #70D6FF;
		}

	#glyphs2
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			font-size: 50px;
			Font-style: normal;
			text-align: right;
		}

	#glyphs3
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			font-size: 50px;
			Font-style: normal;
			text-align: right;
		}

	#anatomy
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 100px;
			Font-style: normal;
			text-align: right;
			color: #70D6FF;
		}

	#g
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 500px;
			Font-style: normal;
			text-align: center;
		}

	#p6
		{
			font-family: Franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			Font-style: normal;
			Text-align: left;
		}

	#a
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 500px;
			Font-style: normal;
			text-align: center;
		}

	.p6
		{
			border-bottom: 12px solid #70D6FF;
			line-height: 110%;
		}

	.p7
		{
			border-bottom: 12px solid #70D6FF;
			line-height: 110%;
		}

	#sources
		{
			font-family: Franklin-gothic-urw, sans-serif;
			Font-weight: 600;
			Font-style: normal;
			Text-align: left;
		}

	/*= = = = = = = = = = = = = = = = = = = = = = = = 

	Main Nav Style for @media 768px

	= = = = = = = = = = = = = = = = = = = = = = = =*/

		a.b-background,
		a.b-in-use,
		a.b-glyphs,
		a.b-anatomy
			{
				width: 100%;
				height: 100%;
				text-align: right;
				line-height: 65px;
				margin: auto 0;
			}

		a.b-backtotop
			{
				display: block;
				border-bottom: 12px solid #70D6FF;
				width: 300px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				font-family: Franklin-gothic-urw;
				font-weight: bold;
				margin: 30px;
			}

	/*= = = = = = = = = = = = = = = = = = = = = = = = 

	Content Style for @media 768px

	= = = = = = = = = = = = = = = = = = = = = = = =*/
	
		#photo1
			{
				left: 0px;
				width: 100%;
				height: 100%;
				display: block;
				margin: 1px;
			} 

		#photo2
			{
				right: 0px;
				width: 100%;
				height: 100%;
				display: block;
				margin: 1px;
			} 

		#photo3
			{
				left: 0px;
				width: 100%;
				height: 100%;
				display: block;
				margin-left: auto;
				margin-right: auto;
			}

		#photo4
			{
				right: 0px;
				width: 100%;
				height: 100%;
				display: block;
				margin-left: auto;
				margin-right: auto;
			}

		#photo5
			{
				left: 0px;
				width: 100%;
				height: 100%;
				display: block;
				margin-left: auto;
				margin-right: auto;
			}

	} /*= = = = = = = = = = END MEDIA QUERY (768PX) = = = = = = = = = =*/

	/*= = = = = = = = = = START MEDIA QUERY (502PX) = = = = = = = = = =*/

@media only screen and (max-width: 502px) {
	.grid-container
		{
  			margin:0 auto;
  			padding:0 auto;
  			display: grid;
  			grid-template-columns: repeat(2, 1fr);
  			grid-auto-rows: auto;
		}

		/*= = = = = = = = = = = = = = = = = = = = = = = = 

		Coordinates for Grid Elements 600px

		= = = = = = = = = = = = = = = = = = = = = = = =*/

			/* = = = = = = = = = = = = = = = = = = = = = =

			VIDEO

			= = = = = = = = = = = = = = = = = = = = = = */
			.video 
				{
  					grid-column-start: 1;
 					grid-column-end: span 36;
  					grid-row-start: 1;
 					grid-row-end: auto;
  					overflow: hide;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			HEADER - FRANKLIN GOTHIC

			= = = = = = = = = = = = = = = = = = = = = = */
			.one 
				{
  					grid-column-start: 1;
 					grid-column-end: span 32;
  					grid-row-start: 5;
 					grid-row-end: auto;
  					overflow: hide;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			MAIN NAVIGATION

			= = = = = = = = = = = = = = = = = = = = = = */
			.two
				{
					grid-column-start: 1;
					grid-column-end: span 32;
					grid-row-start: 9;
					grid-row-end: auto;
					overflow: hidden; 
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			HEADER - BACKGROUND

			= = = = = = = = = = = = = = = = = = = = = = */
			.three
				{
					grid-column-start: 2;
 					grid-column-end: span 32;
  					grid-row-start: 13;
 					grid-row-end: auto;
  					overflow: hidden;	
				}		

			/* = = = = = = = = = = = = = = = = = = = = = =

			P - 1

			= = = = = = = = = = = = = = = = = = = = = = */
			.four
				{
					grid-column-start: 2;
					grid-column-end: span 34;
					grid-row-start: 14;
					grid-row-end: auto;
					overflow: hidden;
				}
			/* = = = = = = = = = = = = = = = = = = = = = =

			P - 2

			= = = = = = = = = = = = = = = = = = = = = = */
			.five
				{
					grid-column-start: 2;
					grid-column-end: span 34;
					grid-row-start: 19;
					grid-row-end: auto;
					overflow: hidden;
				}
			/* = = = = = = = = = = = = = = = = = = = = = =

			P - 3

			= = = = = = = = = = = = = = = = = = = = = = */
			.six
				{
					grid-column-start: 2;
					grid-column-end: span 34;
					grid-row-start: 24;
					grid-row-end: auto;
					overflow: hidden;
				}
	
			/* = = = = = = = = = = = = = = = = = = = = = =

			P - 4

			= = = = = = = = = = = = = = = = = = = = = = */
			.seven
				{
					grid-column-start: 2;
					grid-column-end: span 34;
					grid-row-start: 30;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			P - 5

			= = = = = = = = = = = = = = = = = = = = = = */
			.eight
				{
					grid-column-start: 2;
					grid-column-end: span 34;
					grid-row-start: 35;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			HEADER - IN USE

			= = = = = = = = = = = = = = = = = = = = = = */
			.nine
				{
					grid-column-start: 2;
					grid-column-end: span 20;
					grid-row-start: 39;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - ABCDE
	
			= = = = = = = = = = = = = = = = = = = = = = */
			.ten
				{
					grid-column-start: 2;
					grid-column-end: span 32;
					grid-row-start: 40;
					grid-row-end: auto;
					overflow: hidden;
				}
	
			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - FGHIJK
		
			= = = = = = = = = = = = = = = = = = = = = = */
			.eleven
				{
					grid-column-start: 4;
					grid-column-end: span 32;
					grid-row-start: 41;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =
	
			CHARACTERS - LMNO
		
			= = = = = = = = = = = = = = = = = = = = = = */
			.twelve
				{
					grid-column-start: 6;
					grid-column-end: span 32;
					grid-row-start: 42;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - PQRST

			= = = = = = = = = = = = = = = = = = = = = = */
			.thirteen
				{
					grid-column-start: 4;
					grid-column-end: span 32;
					grid-row-start: 43;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - UVWXYZ

			= = = = = = = = = = = = = = = = = = = = = = */
			.fourteen
				{
					grid-column-start: 2;
					grid-column-end: span 32;
					grid-row-start: 44;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			HEADER - GLYPHS

			= = = = = = = = = = = = = = = = = = = = = = */
			.fifteen
				{
					grid-column-start: 2;
					grid-column-end: span 20;
					grid-row-start: 46;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			SUBHEADER - NUMBERS
	
			= = = = = = = = = = = = = = = = = = = = = = */
			.sixteen
				{
					grid-column-start: 2;
					grid-column-end: span 24;
					grid-row-start: 47;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - 12345

			= = = = = = = = = = = = = = = = = = = = = = */
			.seventeen
				{
					grid-column-start: 2;
					grid-column-end: span 34;
					grid-row-start: 48;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - 67890

			= = = = = = = = = = = = = = = = = = = = = = */
			.eighteen
				{
					grid-column-start: 2;
					grid-column-end: span 34;
					grid-row-start: 49;
					grid-row-end: auto;
					overflow: hidden;
				}
		
			/* = = = = = = = = = = = = = = = = = = = = = =

			SUBHEADER - CHARACTERS

			= = = = = = = = = = = = = = = = = = = = = = */
			.nineteen
				{
					grid-column-start: 2;
					grid-column-end: span 24;
					grid-row-start: 51;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - `~!@#$%^&*()-_=+

			= = = = = = = = = = = = = = = = = = = = = = */
			.twenty
				{
					grid-column-start: 2;
					grid-column-end: span 36;
					grid-row-start: 52;
					grid-row-end: auto;
					overflow: hidden;
				}	

			/* = = = = = = = = = = = = = = = = = = = = = =

			CHARACTERS - []{}\|;:'",.<>/?

			= = = = = = = = = = = = = = = = = = = = = = */
			.twenty-one
				{
					grid-column-start: 2;
					grid-column-end: span 28;
					grid-row-start: 53;
					grid-row-end: auto;
					overflow: hidden;
				}
	
			/* = = = = = = = = = = = = = = = = = = = = = =

			HEADER - ANATOMY

			= = = = = = = = = = = = = = = = = = = = = = */
			.twenty-two
				{
					grid-column-start: 2;
					grid-column-end: span 24;
					grid-row-start: 55;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			SUBHEADER - G
	
			= = = = = = = = = = = = = = = = = = = = = = */
			.g
				{
					grid-column-start: 1;
					grid-column-end: span 20;
					grid-row-start: 54;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =
	
			P - 6

			= = = = = = = = = = = = = = = = = = = = = = */
			.p6
				{
					grid-column-start: 2;
					grid-column-end: span 32;
					grid-row-start: 58;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			SUBHEADER - A

			= = = = = = = = = = = = = = = = = = = = = = */
			.a
				{
					grid-column-start: 1;
					grid-column-end: span 20;
					grid-row-start: 57;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			P - 7

			= = = = = = = = = = = = = = = = = = = = = = */
			.p7
				{
					grid-column-start: 2;
					grid-column-end: span 32;
					grid-row-start: 61;
					grid-row-end: auto;
					overflow: hidden;
				}
	
			/* = = = = = = = = = = = = = = = = = = = = = =

			BACK TO TOP BUTTON

			= = = = = = = = = = = = = = = = = = = = = = */
			.twenty-three
				{
					grid-column-start: 6;
					grid-column-end: span 24;
					grid-row-start: 64;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			SUBHEADER - SOURCES

			= = = = = = = = = = = = = = = = = = = = = = */
			.twenty-four
				{
					grid-column-start: 2;
					grid-column-end: span 14;
					grid-row-start: 66;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			P - SOURCES LINK

			= = = = = = = = = = = = = = = = = = = = = = */
			.twenty-five
				{
					grid-column-start: 2;
					grid-column-end: span 34;
					grid-row-start: 67;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			PHOTO1

			= = = = = = = = = = = = = = = = = = = = = = */
			.photo1
				{
					grid-column-start: 1;
					grid-column-end: span 34;
					grid-row-start: 16;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			PHOTO2

			= = = = = = = = = = = = = = = = = = = = = = */
			.photo2
				{
					grid-column-start: 1;
					grid-column-end: span 34;
					grid-row-start: 22;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			PHOTO3

			= = = = = = = = = = = = = = = = = = = = = = */
			.photo3
				{
					grid-column-start: 1;
					grid-column-end: span 34;
					grid-row-start: 27;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			PHOTO4

			= = = = = = = = = = = = = = = = = = = = = = */
			.photo4
				{
					grid-column-start: 1;
					grid-column-end: span 34;
					grid-row-start: 32;
					grid-row-end: auto;
					overflow: hidden;
				}

			/* = = = = = = = = = = = = = = = = = = = = = =

			PHOTO5

			= = = = = = = = = = = = = = = = = = = = = = */
			.photo5
				{
					grid-column-start: 1;
					grid-column-end: span 34;
					grid-row-start: 37;
					grid-row-end: auto;
					overflow: hidden;
				}

	/*= = = = = = = = = = = = = = = = = = = = = = = = 

	Fonts for @media 600px

	= = = = = = = = = = = = = = = = = = = = = = = =*/

	h1
		{
			Font-family: Franklin-gothic-urw, sans-serif;
			Font-weight: 900;
			font-size: 100px;
			Font-style: normal;
			line-height: 110px;
		}

	h2
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 80px;
			Font-style: normal;
		}

	h3
		{
			Font-family: franklin-gothic-urw, sans-serif:
			Font-weight: 500;
			font-size: 50px;
			Font-style: normal;
		}

	p
		{
			font-family: Franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			font-size: 20px;
			Font-style: normal;
			Text-align: left;
		}	

	#background
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 70px;
			Font-style: normal;
			text-align: left;
			color: #70D6FF;
		}

	#in-use
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 70px;
			Font-style: normal;
			text-align: left;
			color: #70D6FF;
		}

	#abcde
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 45px;
			Font-style: normal;
			text-align: left;
			border-bottom: 10px solid #70D6FF;
		}
	#fghijk
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 45px;
			Font-style: normal;
			text-align: left;
			border-bottom: 10px solid #70D6FF;
		}
	#lmno
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 45px;
			Font-style: normal;
			text-align: left;
			border-bottom: 10px solid #70D6FF;
		}

	#pqrst
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 45px;
			Font-style: normal;
			text-align: left;
			border-bottom: 10px solid #70D6FF;
		}

	#uvwxyz
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 45px;
			Font-style: normal;
			text-align: left;
			border-bottom: 10px solid #70D6FF;
		}

	#glyphs
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 70px;
			Font-style: normal;
			text-align: left;
			color: #70D6FF;
		}

	#glyph-numbers
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 60px;
			Font-style: normal;
			text-align: left;
			border-bottom: 12px solid #70D6FF;
		}

	#numbers
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			font-size: 80px;
			Font-style: normal;
			text-align: left;
			letter-spacing: 15px;
		}

	#numbers2
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			font-size: 80px;
			Font-style: normal;
			text-align: left;
			letter-spacing: 15px;
		}

	#characters
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 500;
			font-size: 60px;
			Font-style: normal;
			text-align: left;
			border-bottom: 12px solid #70D6FF;
		}

	#glyphs2
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			font-size: 40px;
			Font-style: normal;
			text-align: left;
		}

	#glyphs3
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			font-size: 40px;
			Font-style: normal;
			text-align: left;
		}

	#anatomy
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 70px;
			Font-style: normal;
			text-align: left;
			color: #70D6FF;
		}

	#g
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 300px;
			Font-style: normal;
			text-align: center;
		}

	#p6
		{
			font-family: Franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			Font-style: normal;
			Text-align: left;
		}

	#a
		{
			Font-family: franklin-gothic-urw, sans-serif;
			Font-weight: 700;
			font-size: 300px;
			Font-style: normal;
			text-align: center;
		}

	.p6
		{
			border-bottom: 12px solid #70D6FF;
			line-height: 110%;
		}

	.p7
		{
			border-bottom: 12px solid #70D6FF;
			line-height: 110%;
		}

	#sources
		{
			font-family: Franklin-gothic-urw, sans-serif;
			Font-weight: 600;
			Font-style: normal;
			Text-align: left;
		}

	#twenty-five
		{
			font-family: Franklin-gothic-urw, sans-serif;
			Font-weight: 400;
			font-size: 15px;
			Font-style: normal;
			Text-align: left;
		}

	/*= = = = = = = = = = = = = = = = = = = = = = = = 

	Main Nav Style for @media 600px

	= = = = = = = = = = = = = = = = = = = = = = = =*/

		a.b-background,
		a.b-in-use,
		a.b-glyphs,
		a.b-anatomy
			{
				width: 100%;
				height: 100%;
				text-align: left;
				line-height: 65px;
				margin: auto 0;
			}

		a.b-backtotop
			{
				display: block;
				border-bottom: 12px solid #70D6FF;
				width: 300px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				font-family: Franklin-gothic-urw;
				font-weight: bold;
				margin: 30px;
			}

	/*= = = = = = = = = = = = = = = = = = = = = = = = 

	Content Style for @media 600px

	= = = = = = = = = = = = = = = = = = = = = = = =*/
	
		#photo1
			{
				left: 0px;
				width: 450px;
				height: 100%;
				display: block;
				margin: 1px;
			} 

		#photo2
			{
				right: 0px;
				width: 450px;
				height: 100%;
				display: block;
				margin: 1px;
			} 

		#photo3
			{
				left: 0px;
				width: 400px;
				height: 100%;
				display: block;
				margin-left: auto;
				margin-right: auto;
			}

		#photo4
			{
				right: 0px;
				width: 375px;
				height: 100%;
				display: block;
				margin-left: auto;
				margin-right: auto;
			}

		#photo5
			{
				left: 0px;
				width: 400px;
				height: 100%;
				display: block;
				margin-left: auto;
				margin-right: auto;
			}

	} /*= = = = = = = = = = END MEDIA QUERY (600PX) = = = = = = = = = =*/