/*===========================================================
CSS for Showcase font website
Website: N/A
Author: Sydney Merryman
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
============================================================*/


/* 1.0 General Styles =======================================================================================*/

* {   
	margin: 0;   
	padding: 0;   
	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 ==========================================================================================*/

/* Changes main title font*/

h1, h2, h3, h4, h4, h5, h6, ul, li, p, a caption 
{
	font-family: rockwell-nova, sans-serif;
	text-align:left;
	font-weight: 400;
	line-height:110%; 
}

h1 /* Title Font */
{
	font-size: 250px;
}

h2 /* Big Letters */
{
	font-size: 1000px;
	
}

h3 /* Rotated Headers */
{
	font-size: 60px;
}

h4 /* Glyphs */
{
	font-size: 28px;
	font-weight: normal;
}

h5 /* Anatomy Caption */
{
	font-size: 15px;
	font-weight: normal;
	line-height: 25px;
}

h6 /* Anatomy Letters */
{
	font-size: 75px;
	font-weight: normal;
}

h7 /* Rockwell Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 20px;
	font-weight: 700;
}
h8 /* Rockwell Italic Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 20px;
	font-weight: 400;
	font-style: italic;
}
h9 /* Rockwell Italic Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 20px;
	font-weight: 700;
	font-style: italic;
}
h10 /* Rockwell Regular Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 20px;
	font-weight: 400;
}
h11 
{
	font-family: rockwell-nova, sans-serif;
	font-size: 20px;
	font-weight: 400;
}
h12 /* References */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 10px;
	font-weight: 200;
}


p, li, caption, ul, a, em, strong, span 
{
	font-size: 15px;
	line-height: 25px;
}
/* Responsive Layouts ================================================================================================================================================================================= */

@media only screen and (max-width: 1290px) 
{
/* ========================= Fonts for @media 1290px ========================== */

h1 /* Title Font */
{
	font-size: 200px;
}

h2 /* Big Letters */
{
	font-size: 950px;
}

h3 /* Rotated Headers */
{
	font-size: 40px;
}

h4 /* Glyphs */
{
	font-size: 24px;
	font-weight: normal;
}

h5 /* Anatomy Caption */
{
	font-size: 15px;
	font-weight: normal;
	line-height: 25px;
}

h6 /* Anatomy Letters */
{
	font-size: 75px;
	font-weight: normal;
}

h7 /* Rockwell Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 18px;
	font-weight: 700;
}
h8 /* Rockwell Italic Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 18px;
	font-weight: 400;
	font-style: italic;
}
h9 /* Rockwell Italic Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 18px;
	font-weight: 700;
	font-style: italic;
}
h10 /* Rockwell Regular Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 18px;
	font-weight: 400;
}
h11 
{
	font-family: rockwell-nova, sans-serif;
	font-size: 20px;
	font-weight: 400;
}
h12 /* References */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 10px;
	font-weight: 200;
}


p, li, caption, ul, a, em, strong, span 
{
	font-size: 15px;
	line-height: 25px;
}
}

/* =================== END @MEDIA QUERY (1290px) ======================== */


@media only screen and (max-width: 1090px) 
{
/* ========================= Fonts for @media 1090px ========================== */

h1 /* Title Font */
{
	font-size: 150px;
}

h2 /* Big Letters */
{
	font-size: 900px;
}

h3 /* Rotated Headers */
{
	font-size: 60px;
}

h4 /* Glyphs */
{
	font-size: 28px;
	font-weight: normal;
}

h5 /* Anatomy Caption */
{
	font-size: 15px;
	font-weight: normal;
	line-height: 25px;
}

h6 /* Anatomy Letters */
{
	font-size: 75px;
	font-weight: normal;
}

h7 /* Rockwell Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 16px;
	font-weight: 700;
}
h8 /* Rockwell Italic Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 16px;
	font-weight: 400;
	font-style: italic;
}
h9 /* Rockwell Italic Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 16px;
	font-weight: 700;
	font-style: italic;
}
h10 /* Rockwell Regular Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 16px;
	font-weight: 400;
}
h11 
{
	font-family: rockwell-nova, sans-serif;
	font-size: 20px;
	font-weight: 400;
}
h12 /* References */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 10px;
	font-weight: 200;
}


p, li, caption, ul, a, em, strong, span 
{
	font-size: 15px;
	line-height: 25px;
}
}

/* =================== END @MEDIA QUERY (1090px) ======================== */


@media only screen and (max-width: 880px) 
{
/* ========================= Fonts for @media 880px ========================== */

h1 /* Title Font */
{
	font-size: 100px;
}

h2 /* Big Letters */
{
	font-size: 850px;
}

h3 /* Rotated Headers */
{
	font-size: 60px;
}

h4 /* Glyphs */
{
	font-size: 20px;
	font-weight: normal;
}

h5 /* Anatomy Caption */
{
	font-size: 15px;
	font-weight: normal;
	line-height: 25px;
}

h6 /* Anatomy Letters */
{
	font-size: 75px;
	font-weight: normal;
}

h7 /* Rockwell Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 14px;
	font-weight: 700;
}
h8 /* Rockwell Italic Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
}
h9 /* Rockwell Italic Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
}
h10 /* Rockwell Regular Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 14px;
	font-weight: 400;
}
h11 
{
	font-family: rockwell-nova, sans-serif;
	font-size: 20px;
	font-weight: 400;
}
h12 /* References */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 10px;
	font-weight: 200;
}


p, li, caption, ul, a, em, strong, span 
{
	font-size: 12px;
	line-height: 18px;
}
}

/* =================== END @MEDIA QUERY (880px) ======================== */

@media only screen and (max-width: 768px) 
{
/* ========================= Fonts for @media 768px ========================== */

h1 /* Title Font */
{
	font-size: 150px;
}

h2 /* Big Letters */
{
	font-size: 10px;
}

h3 /* Rotated Headers */
{
	font-size: 60px;
}

h4 /* Glyphs */
{
	font-size: 24px;
	font-weight: normal;
}

h5 /* Anatomy Caption */
{
	font-size: 12px;
	font-weight: normal;
	line-height: 25px;
}

h6 /* Anatomy Letters */
{
	font-size: 75px;
	font-weight: normal;
}

h7 /* Rockwell Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 12px;
	font-weight: 700;
}
h8 /* Rockwell Italic Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
}
h9 /* Rockwell Italic Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
}
h10 /* Rockwell Regular Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 25px;
	font-weight: 400;
}
h11 
{
	font-family: rockwell-nova, sans-serif;
	font-size: 20px;
	font-weight: 400;
}
h12 /* References */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 10px;
	font-weight: 200;
}


p, li, caption, ul, a, em, strong, span 
{
	font-size: 14px;
	line-height: 25px;
}
}

/* =================== END @MEDIA QUERY (760PX) ======================== */

@media only screen and (max-width: 510px) 
{
/* ========================= Fonts for @media 550px ========================== */


h1 /* Title Font */
{
	font-size: 150px;
}

h2 /* Big Letters */
{
	font-size: 10px;
}

h3 /* Rotated Headers */
{
	font-size: 60px;
}

h4 /* Glyphs */
{
	font-size: 20px;
	font-weight: normal;
}

h5 /* Anatomy Caption */
{
	font-size: 10px;
	font-weight: normal;
	line-height: 25px;
}

h6 /* Anatomy Letters */
{
	font-size: 75px;
	font-weight: normal;
}

h7 /* Rockwell Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 12px;
	font-weight: 700;
}
h8 /* Rockwell Italic Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
}
h9 /* Rockwell Italic Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
}
h10 /* Rockwell Regular Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 25px;
	font-weight: 400;
}
h11 
{
	font-family: rockwell-nova, sans-serif;
	font-size: 20px;
	font-weight: 400;
}
h12 /* References */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 10px;
	font-weight: 200;
}


p, li, caption, ul, a, em, strong, span 
{
	font-size: 14px;
	line-height: 25px;
}
}
/* =================== END @MEDIA QUERY (510PX) ======================== */


@media only screen and (max-width: 360px) 
{
/* ======================= Fonts for @media 360px ======================= */

h1 /* Title Font */
{
	font-size: 150px;
}

h2 /* Big Letters */
{
	font-size: 10px;
}

h3 /* Rotated Headers */
{
	font-size: 60px;
}

h4 /* Glyphs */
{
	font-size: 20px;
	font-weight: normal;
}

h5 /* Anatomy Caption */
{
	font-size: 10px;
	font-weight: normal;
	line-height: 25px;
}

h6 /* Anatomy Letters */
{
	font-size: 75px;
	font-weight: normal;
}

h7 /* Rockwell Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 12px;
	font-weight: 700;
}
h8 /* Rockwell Italic Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
}
h9 /* Rockwell Italic Bold Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
}
h10 /* Rockwell Regular Label */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 25px;
	font-weight: 400;
}
h11 
{
	font-family: rockwell-nova, sans-serif;
	font-size: 20px;
	font-weight: 400;
}
h12 /* References */
{
	font-family: rockwell-nova, sans-serif;
	font-size: 10px;
	font-weight: 200;
}


p, li, caption, ul, a, em, strong, span 
{
	font-size: 14px;
	line-height: 25px;
}
}

/* ==================== END @MEDIA QUERY (360PX)===================== */

.glyph-regular
{
	font-family: rockwell-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.glyph-bold > h4
{
	font-family: rockwell-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.glyph-italic
{
	font-family: rockwell-nova, sans-serif;
	font-weight: 400;
	font-style: italic;
}

.glyph-bold-italic > h4
{
	font-family: rockwell-nova, sans-serif;
	font-weight: 700;
	font-style: italic;
}

/* 3.0 Main Navigation ==================================================================================================================================================================================*/

/* makes #main-nav stay fixed, appear in front, and start at top of window */

#main-nav 
{
	position:fixed;
	z-index: 9999;
	top:0;
	background-color: white;
	width: 100%;
}
/* change design of the <ul> within #main-nav, width full width of parent element, add padding, and add columns */

#main-nav ul 
{
	width:50%;
	margin:0 auto;
	padding: 20px;
	-webkit-columns: 4 50px; 
	-moz-columns: 4 50px; 
	columns: 4 50px; 
	background-color: white; 
}
/* remove bullet point from <li> and aligns text to center */

#main-nav li 
{
	text-align: center;
	list-style-type: none;
}


/* formats and aligns text */

#main-nav a 
{
	margin:0 auto;
	display: block;
	width:80px;
	height:30px;
	line-height:30px;
  	background-color:white;
	text-decoration: none;
	color:black;
	font-family: rockwell-nova, sans-serif;
	font-weight: 400;
	font-size: 15px;
}

/* change style of <a> hover */

#main-nav a:hover
{
	color: #00FFFF;
}

/* 5.0 Grids ==================================================================================================================================================================================*/

.grid-container 
{
 	border: 0px solid black;
 	max-width:3000px;
 	margin:0 auto;
 	padding:0;
 	display: grid;
 	grid-gap:10px 10px;
 	grid-template-columns: repeat(7, 1fr);
 	grid-auto-rows: minmax(100px, auto);
}

.grid-item 
{
 	border: 0px solid grey;
 	grid-column: span 1;
 	overflow:hidden;
}

.title-ro
{
 	padding-top: 65px;
	grid-column-start: 3;
 	grid-column-end: span 7;
 	grid-row-start: 1;
 	grid-row-end: span 2;
}
.title-ck
{
	padding-top: 290px;
	padding-left: 135px;
 	grid-column-start: 3;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 2;
}
.title-we
{
	padding-top: 500px;
	padding-left: 100px;
 	grid-column-start: 4;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 2;
}
.title-ll
{
	padding-top: 700px;
	padding-left: 122px;
 	grid-column-start: 5;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 2;
}
.video
{
	padding-top: 680px;
	padding-bottom: 200px;
	grid-column-start: 1;
 	grid-column-end: span 7;
 	grid-row-start: 2;
 	grid-row-end: span 3;
}

.title-regular
{
	padding-top: 370px;
 	grid-column-start: 2;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 2;
}
.title-bold
{
	padding-top: 570px;
	padding-left: 100px;
 	grid-column-start: 2;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 2;
}
.title-italic
{
	padding-top: 470px;
	padding-left: 50px;
 	grid-column-start: 2;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 2;
}
.title-bold-italic
{
	padding-top: 670px;
	padding-left: 150px;
	padding-bottom: 200px;
 	grid-column-start: 2;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 2;
}
.a-letter
{
	direction: rtl;
	grid-column-start: 1;
	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	clip-path: inset(0% 0% 0% 0%);
	text-align: left;
	color: #00FFFF;	
}


/*-----------------------------------------------------------------------------------------------------------*/

.glyph-header
{
 	padding-top: 100px;
	grid-column-start: 6;
 	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 3;
}

.glyph-header-rotate
{
	display: inline-block;
 	width: 300px;
 	margin-left: 2px;
 	margin-top: 130px;
 	padding-right:200px;	
	transform: rotate(90deg);
	text-decoration: underline;
}

.glyph-regular
{
 	padding-top: 100px;
	grid-column-start: 2;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}

.glyph-bold
{
	padding-top: 750px;
 	grid-column-start: 2;
	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.b-letter
{
 	padding-top: 570px;
	grid-column-start: 6;
	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	clip-path: inset(0 0% 0 0);
	text-align: left;
	color: #00FFFF;
}
.glyph-italic
{
 	padding-top: 400px;
	grid-column-start: 4;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.glyph-bold-italic
{
	padding-top: 1050px;
 	grid-column-start: 4;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 3;
}

/*------------------------------------------------------------------------------------------------------------*/
.anatomy-header
{
	padding-top: 170px;
	grid-column-start: 2;
	grid-column-end: span 1;
	grid-row-start: 1;
	grid-row-end: span 1;
}

.anatomy-header-rotate
{
 	display: inline-block;
 	width: 270px;
 	margin-left: -100px;
 	margin-top: 20px;
 	padding-right:200px;	
	transform: rotate(270deg);
	text-decoration: underline;
}

.anatomy-text-one
{
	padding-top: 100px;
 	grid-column-start: 4;
 	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.anatomy-text-two
{
	padding-top: 440px;
	padding-bottom: 500px;
 	grid-column-start: 5;
 	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.anatomy-image1
{
 	padding-top: 820px;
 	grid-column-start: 4;
 	grid-column-end: span 4;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	width:100%;
}
.anatomy-image2
{
 	padding-top: 1180px;
 	grid-column-start: 4;
 	grid-column-end: span 4;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	width:100%;
}


.a-small-caption
{
	padding-top: 1060px;
	padding-left: 80px;
 	grid-column-start: 4;
 	grid-column-end: span 5;
 	grid-row-start: 1;
 	grid-row-end: span 3;
	z-index:9999;
}

.l-small-caption
{
	padding-top: 1060px;
	padding-left: 120px;
 	grid-column-start: 5;
 	grid-column-end: span 5;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	z-index:9999;
}

.t-small-caption
{
	padding-top: 1060px;
	padding-left: 170px;
 	grid-column-start: 6;
 	grid-column-end: span 6;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	z-index:9999;
}


.j-small-caption
{
	padding-top: 1480px;
 	padding-left: 80px;
 	grid-column-start: 4;
 	grid-column-end: span 5;
 	grid-row-start: 1;
 	grid-row-end: span 3;
	z-index:9999;
}

.y-small-caption
{
	padding-top: 1480px;
 	padding-left: 120px;
 	grid-column-start: 5;
 	grid-column-end: span 5;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	z-index:9999;
}

.q-small-caption
{
	padding-top: 1480px;
 	padding-left: 170px;
 	grid-column-start: 6;
 	grid-column-end: span 6;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	z-index:9999;
}

.r-letter
{
	padding-top: 270px;
direction: rtl;
	grid-column-start: 1;
	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 3;
	clip-path: inset(0% 0% 0% 0%);
	text-align: left;
	color: #00FFFF;	
}
/*------------------------------------------------------------------------------------------------------------*/
.in-use-header
{
	padding-top: 100px;
 	grid-column-start: 6;
 	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 3;
}

.in-use-header-rotate
{
	display: inline-block;
 	width: 300px;
 	margin-left: -118px;
 	margin-top: 130px;
 	padding-right:200px;	
	transform: rotate(90deg);
	text-decoration: underline;
}

.image-one
{
	padding-top: 100px;
 	grid-column-start: 2;
 	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 4;
}

.image-two
{
 	padding-top: 15px;
	grid-column-start: 4;
 	grid-column-end: span 2;
 	grid-row-start: 5;
 	grid-row-end: span 1;
}

.image-three
{
 	padding-top: 430px;
	grid-column-start: 2;
 	grid-column-end: span 2;
 	grid-row-start: 5;
 	grid-row-end: span 1;
}
.l-letter
{
 	grid-column-start: 5;
	grid-column-end: span 3;
 	grid-row-start: 5;
 	grid-row-end: span 2;
	transform: rotate(270deg);
	z-index: 9999;
	color: #00FFFF; 
}
/*------------------------------------------------------------------------------------------------------------*/
.background-header
{
 	padding-top: 200px;
	grid-column-start: 2;
 	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 3;
}

.background-header-rotate
{
	display: inline-block;
 	width: 270px;
 	margin-left: -100px;
 	margin-top: 80px;
 	padding-right:200px;	
	transform: rotate(270deg);
	text-decoration: underline;
}

.image-four
{
 	padding-top: 100px;
	grid-column-start: 3;
 	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 4;
}
.background-text-one
{
	padding-top: 700px;
 	grid-column-start: 5;
 	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 3;
}

.background-text-two
{
 	padding-top: 1070px;
	grid-column-start: 3;
 	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 3;
}

.n-letter
{
	padding-top: 850 px;
	direction: rtl;
	grid-column-start: 1;
	grid-column-end: span 2;
 	grid-row-start: 2;
 	grid-row-end: span 2;
	clip-path: inset(0% 0% 0% 0%);
	text-align: left;
	color: #00FFFF;	
}
.references
{
	grid-column-start: 3;
 	grid-column-end: span 7;
 	grid-row-start: 7;
 	grid-row-end: span 3;
}
.references-websites
{
	padding-top: 20px;
	grid-column-start: 3;
 	grid-column-end: span 7;
 	grid-row-start: 7;
 	grid-row-end: span 3;
}

/* ======================= Responsive Layouts ======================= */

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

 .grid-container 
{
 	border: 0px solid black;
 	max-width:3000px;
 	margin:0 auto;
 	padding:0;
 	display: grid;
 	grid-gap:10px 10px;
 	grid-template-columns: repeat(3, 1fr);
 	grid-auto-rows: minmax(100px, auto);
}

.grid-item
{
 	border: 0px solid grey;
 	grid-column: span 1;
	overflow: visible;

}
/* =======================
     Coordinates for 
     Intro Grid Elements @media 768px
    ======================= */

.title-ro
{
 	padding-top: 118px;
	padding-left: 100px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-ck
{
	padding-top: 250px;
	padding-left: 230px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-we
{
	padding-top:380px;
	padding-left: 255px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-ll
{
	padding-top: 510px;
	padding-left: 400px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.video
{
	padding-top: 800px;
	padding-bottom: 200px;
	grid-column-start: 1;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 3;
	width: 85%;
}

.title-regular
{
	padding-top: 670px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	color: white;
}
.title-bold
{
	padding-top: 670px;
	padding-left: 1px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	color: white;
}
.title-italic
{
	padding-top: 670px;
	padding-left: 1px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	color: white;
}
.title-bold-italic
{
	padding-top: 670px;
	padding-left: 1px;
	padding-bottom: 200px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	color: white;
}
.a-letter
{
	direction: rtl;
	grid-column-start: 3;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	clip-path: inset(0% 0% 0% 0%);
	text-align: left;
	color: #00FFFF;
	overflow: hidden;
	padding-right: 300px;	
}

/* ======================= Coordinates for Glyphs Grid Elements @768px ======================= */

  .glyph-header
{
	grid-column-start: 3;
      grid-column-end: span 1;
      grid-row-start: 1;
      grid-row-end: span 1;
}

.glyph-header-rotate
{
	grid-column-start: 3;
      grid-column-end: span 1;
      grid-row-start: 1;
      grid-row-end: span 1;
}

.glyph-regular
{
 padding-left: 70px;
grid-column-start: 1;
      grid-column-end: span 2;
      grid-row-start: 1;
      grid-row-end: span 1;
}

.glyph-bold
{
padding-left: 70px;
	grid-column-start: 1;
      grid-column-end: span 2;
      grid-row-start: 1;
      grid-row-end: span 1;
}
.b-letter
{
 	padding-top: 1500px;
grid-column-start: 3;
      grid-column-end: span 1;
      grid-row-start: 1;
      grid-row-end: span 1;
	color: white;
}
.glyph-italic
{
padding-left: 70px;
 grid-column-start: 1;
      grid-column-end: span 2;
      grid-row-start: 1;
      grid-row-end: span 1;
}
.glyph-bold-italic
{
padding-left: 70px;
	grid-column-start: 1;
      grid-column-end: span 2;
      grid-row-start: 1;
      grid-row-end: span 1;
}
  
/* ======================= Coordinates for Anatomy Grid Elements @768px ======================= */
 .anatomy-header
{
	padding-top: 110px;
	padding-left:80px;
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 1;
	grid-row-end: span 1;
}

.anatomy-header-rotate
{
 	display: inline-block;
 	width: 270px;
 	margin-left: -100px;
 	margin-top: 20px;
 	padding-right:200px;	
	transform: rotate(270deg);
	text-decoration: underline;
}
.r-letter
{
	padding-top: 270px;
direction: rtl;
	grid-column-start: 1;
	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 3;
	clip-path: inset(0% 0% 0% 0%);
	text-align: left;
	color: white;	
}

.anatomy-text-one
{
	padding-top: 30px;
	padding-right:50px;
	margin-right: 100px;
 	grid-column-start: 2;
 	grid-column-end: span 4;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.anatomy-text-two
{
	padding-top: 430px;
	padding-left:1px;
	margin-left: 80px;
	margin-right: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 5;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.anatomy-image1
{
	padding-top: 700px;
 	grid-column-start: 1;
 	grid-column-end: span 3;
	margin-left: 80px;
 	grid-row-start: 1;
 	grid-row-end: span 3;
	width:80%;
}


.a-small-caption
{
	padding-top: 890px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 2;
}

.l-small-caption
{
	padding-top: 890px;
	margin-left: 100px;
	padding-left: 200px;
 	grid-column-start: 1;
 	grid-column-end: span 4;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	z-index:9999;
}

.t-small-caption
{
	padding-top: 890px;
	margin-left: 100px;
	padding-left: 400px;
 	grid-column-start: 1;
 	grid-column-end: span 4;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	z-index:9999;
}
.anatomy-image2
{
 	padding-top: 970px;
 	grid-column-start: 1;
 	grid-column-end: span 3;
	margin-left: 80px;
 	grid-row-start: 1;
 	grid-row-end: span 3;
	width:80%;
}

.j-small-caption
{
	padding-top: 1150px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 2;
}

.y-small-caption
{
	padding-top: 1150px;
	margin-left: 100px;
	padding-left: 200px;
 	grid-column-start: 1;
 	grid-column-end: span 4;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	z-index:9999;
}

.q-small-caption
{
	padding-top: 1150px;
	margin-left: 100px;
	padding-left: 400px;
 	grid-column-start: 1;
 	grid-column-end: span 4;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	z-index:9999;
}
/* ======================= Coordinates for In Use Grid Elements @768px ======================= */
.in-use-header
{
	padding-left: 100px;
	padding-top: 100px;
 	grid-column-start: 3;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}

.in-use-header-rotate
{
	display: inline-block;
 	width: 300px;
 	margin-left: -118px;
 	margin-top: 130px;
 	padding-right:200px;	
	transform: rotate(90deg);
	text-decoration: underline;
}

.image-one
{
	padding-top: 120px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}

.image-two
{
 	padding-top: 420px;
	padding-left: 400px;
	grid-column-start: 1;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 95%;
}

.image-three
{
 	padding-top: 710px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}
.l-letter
{
 	padding-top: 5px;
	grid-column-start: 1;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	transform: rotate(270deg);
	z-index: 9999;
	color: white; 
}
/* ======================= Coordinates for Background Grid Elements @768px ======================= */
/
.background-header
{
 	padding-top: 300px;
	
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 2;
 	grid-row-end: span 1;
}

.background-header-rotate
{
	display: inline-block;
 	width: 270px;
 	margin-left: -750px;
 	margin-top: 300px;
 	padding-right:200px;	
	transform: rotate(270deg);
	text-decoration: underline;
}

.image-four
{
 	padding-top: 310px;
	padding-left: 250px;
	grid-column-start: 1;
 	grid-column-end: span 2;
 	grid-row-start: 1;
 	grid-row-end: span 1
	width:80%;
}
.background-text-one
{
	padding-top: 700px;
	padding-right: 100px;
 	grid-column-start: 2;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}

.background-text-two
{
 	padding-top: 1100px;
	padding-right: 100px;
	grid-column-start: 2;
 	grid-column-end: span 3;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}

.n-letter
{
	direction: rtl;
	grid-column-start: 1;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	clip-path: inset(0% 0% 0% 0%);
	text-align: left;
	color: #00FFFF;	
}
.references
{
	padding-left: 100;
	grid-column-start: 1;
 	grid-column-end: span 3;
 	grid-row-start: 7;
 	grid-row-end: span 1;
}
.references-websites
{
	padding-top: 20px;
	padding-left: 100;
	grid-column-start: 1;
 	grid-column-end: span 3;
 	grid-row-start: 7;
 	grid-row-end: span 1;
}

}

/* END @MEDIA QUERY (760PX) */

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

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

 .grid-container 
{
 	border: 0px solid black;
 	max-width:3000px;
 	margin:0 auto;
 	padding:0;
 	display: grid;
 	grid-gap:10px 10px;
 	grid-template-columns: repeat(1, 1fr);
 	grid-auto-rows: minmax(100px, 100px);
}

.grid-item
{
 	border: 0px solid grey;
 	grid-column: span 1;
	overflow: visible;

}
/* =======================
     Coordinates for 
     Intro Grid Elements @media 506px
    ======================= */

.title-ro
{
 	padding-top: 118px;
	padding-left: 100px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-ck
{
	padding-top: 250px;
	padding-left: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-we
{
	padding-top:380px;
	padding-left: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-ll
{
	padding-top: 510px;
	padding-left: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.video
{
	padding-top: 800px;
	padding-bottom: 200px;
	padding-left: 80px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 100%;
}

.a-letter
{
	direction: rtl;
	grid-column-start: 3;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	clip-path: inset(0% 0% 0% 0%);
	text-align: left;
	color: #00FFFF;
	overflow: hidden;
	padding-right: 300px;	
}

/* ======================= Coordinates for Glyphs Grid Elements @506px ======================= */

  .glyph-header
{
grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
padding-left: 100;
}

.glyph-header-rotate
{
 	margin-left: 30px;
 	margin-top: -330px;
 	padding-right: 200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}

.glyph-regular
{
	margin-left: 20px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 10;
      grid-row-end: span 1;
}


.b-letter
{
 	padding-top: 1500px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 10;
      grid-row-end: span 1;
	color: white;
}
.glyph-italic
{
	margin-left: 20px;
	margin-top: 80px;
 	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
}
.glyph-bold
{
	margin-left: 20px;
	margin-top: 10 px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
}
.glyph-bold-italic
{
margin-left: 20px;
	 margin-top: 1 px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
}
  
/* ======================= Coordinates for Anatomy Grid Elements @506px ======================= */
 .anatomy-header
{
	padding-top: 10px;
padding-left:80px;
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 12;
	grid-row-end: span 12;
}

.anatomy-header-rotate
{
 	display: inline-block;
 	width: 270px;
 	margin-left: -60px;
 	margin-top: 1px;
 	padding-right:200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}
.r-letter
{
	padding-top: 270px;
direction: rtl;
	grid-column-start: 1;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	clip-path: inset(0% 0% 0% 0%);
	text-align: left;
	color: white;	
}

.anatomy-text-one
{
	padding-top: 40px;
	padding-left:50px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 13;
 	grid-row-end: span 13;
}
.anatomy-text-two
{
	padding-top: 420px;
	padding-left:30px;
	padding-bottom: 500px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 13;
 	grid-row-end: span 13;
}


.a-small-caption
{
	padding-top: 1030px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	z-index:9999;
}

.l-small-caption
{
	padding-top: 1030px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	z-index:9999;
}

.t-small-caption
{
	padding-top: 1030px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	z-index:9999;
}

.j-small-caption
{
	padding-top: 1480px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	z-index:9999;
}

.y-small-caption
{
	padding-top: 1480px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	z-index:9999;
}

.q-small-caption
{
	padding-top: 1480px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	z-index:9999;
}
.anatomy-image1
{
	margin-top: 50px;
	margin-left: -20px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 13;
 	grid-row-end: span 13;
	width:100%;
}
.anatomy-image2
{
	margin-left: -20px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 20;
 	grid-row-end: span 20;
	width:100%;
}
/* ======================= Coordinates for In Use Grid Elements @506px ======================= */
.in-use-header
{
	padding-top: 10px;
	padding-left:80px;
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 1;
	grid-row-end: span 1;
}

.in-use-header-rotate
{
	display: inline-block;
 	width: 300px;
 	margin-left: -50px;
 	margin-top: 1px;
 	padding-right:200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}

.image-one
{
	padding-top: 120px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}

.image-two
{
 	padding-top: 480px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}

.image-three
{
 	padding-top: 850px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}
.l-letter
{
 	padding-top: 5px;
	grid-column-start: 1;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	transform: rotate(270deg);
	z-index: 9999;
	color: white; 
}

/* ======================= Coordinates for Background Grid Elements @506px ======================= */
/
.background-header
{
 	padding-top: 100px;
	
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 12;
 	grid-row-end: span 12;
}

.background-header-rotate
{
	display: inline-block;
 	width: 270px;
 	margin-left: -490px;
 	margin-top: 1000px;
 	padding-right:1px;	
	transform: rotate(360deg);
	text-decoration: underline;
}

.image-four
{
 	padding-top: 400px;
	padding-left: 50px;
	padding-right: 70px;
	grid-column-start: 1;
 	grid-column-end: span 2;
 	grid-row-start: 10;
 	grid-row-end: span 10
	width:40%;
}
.background-text-one
{
	padding-top: 800px;
	padding-left: 50px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 12;
 	grid-row-end: span 12;
}

.background-text-two
{
 	padding-top: 1300px;
	padding-left: 50px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 12;
 	grid-row-end: span 12;
}

.n-letter
{
	direction: rtl;
	grid-column-start: 1;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	clip-path: inset(0% 0% 0% 0%);
	text-align: left;
	color: white;	
}
.references
{
	padding-left: 100;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 35;
 	grid-row-end: span 0;
}
.references-websites
{
	padding-top: 20px;
	padding-left: 100;
	grid-column-start: 1;
 	grid-column-end: span 3;
 	grid-row-start: 35;
 	grid-row-end: span 1;
}

}

/* END @MEDIA QUERY (506PX) */



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

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

 .grid-container 
{
 	border: 0px solid black;
 	max-width:3000px;
 	margin:0 auto;
 	padding:0;
 	display: grid;
 	grid-gap:10px 10px;
 	grid-template-columns: repeat(1, 1fr);
 	grid-auto-rows: minmax(100px, 100px);
}

.grid-item
{
 	border: 0px solid grey;
 	grid-column: span 1;
	overflow: visible;

}
/* =======================
     Coordinates for 
     Intro Grid Elements @media 506px
    ======================= */

.title-ro
{
 	padding-top: 118px;
	padding-left: 100px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-ck
{
	padding-top: 250px;
	padding-left: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-we
{
	padding-top:380px;
	padding-left: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-ll
{
	padding-top: 510px;
	padding-left: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.video
{
	padding-top: 750px;
	padding-bottom: 200px;
	padding-left: 80px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 150%;
}

.a-letter
{
	direction: rtl;
	grid-column-start: 3;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	clip-path: inset(0% 0% 0% 0%);
	text-align: left;
	color: #00FFFF;
	overflow: hidden;
	padding-right: 300px;	
}

/* ======================= Coordinates for Glyphs Grid Elements @710px ======================= */

  .glyph-header
{
grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
padding-left: 100;
}

.glyph-header-rotate
{
 	margin-left: 30px;
 	margin-top: -330px;
 	padding-right: 200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}

.glyph-regular
{
	margin-left: 20px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 10;
      grid-row-end: span 1;
}


.b-letter
{
 	padding-top: 1500px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 10;
      grid-row-end: span 1;
	color: white;
}
.glyph-italic
{
	margin-left: 20px;
	margin-top: 80px;
 	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
}
.glyph-bold
{
	margin-left: 20px;
	margin-top: 10 px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
}
.glyph-bold-italic
{
margin-left: 20px;
	 margin-top: 1 px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
}
  
/* ======================= Coordinates for Anatomy Grid Elements @710px ======================= */
 .anatomy-header
{
	padding-top: 10px;
padding-left:80px;
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 12;
	grid-row-end: span 12;
}

.anatomy-header-rotate
{
 	display: inline-block;
 	width: 270px;
 	margin-left: -60px;
 	margin-top: 1px;
 	padding-right:200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}
.r-letter
{
	padding-top: 270px;
direction: rtl;
	grid-column-start: 1;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	clip-path: inset(0% 0% 0% 0%);
	text-align: left;
	color: white;	
}

.anatomy-text-one
{
	padding-top: 40px;
	padding-left:50px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 13;
 	grid-row-end: span 13;
}
.anatomy-text-two
{
	padding-top: 420px;
	padding-left:30px;
	padding-bottom: 500px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 13;
 	grid-row-end: span 13;
}


.a-small-caption
{
	padding-top: 1030px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 2;
	z-index:9999;
}

.l-small-caption
{
	padding-top: 1030px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	z-index:9999;
}

.t-small-caption
{
	padding-top: 1030px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	z-index:9999;
}

.j-small-caption
{
	padding-top: 1480px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	z-index:9999;
}

.y-small-caption
{
	padding-top: 1480px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	z-index:9999;
}

.q-small-caption
{
	padding-top: 1480px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	z-index:9999;
}
.anatomy-image1
{
	margin-top: 50px;
	margin-left: -20px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 13;
 	grid-row-end: span 13;
	width:100%;
}
.anatomy-image2
{
	margin-top: 50px;
	margin-left: -20px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 13;
 	grid-row-end: span 13;
	width:100%;
}
/* ======================= Coordinates for In Use Grid Elements @710px ======================= */
.in-use-header
{
	padding-top: 10px;
	padding-left:80px;
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 1;
	grid-row-end: span 1;
}

.in-use-header-rotate
{
	display: inline-block;
 	width: 300px;
 	margin-left: -50px;
 	margin-top: 1px;
 	padding-right:200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}

.image-one
{
	padding-top: 120px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}

.image-two
{
 	padding-top: 480px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}

.image-three
{
 	padding-top: 850px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}
.l-letter
{
 	padding-top: 5px;
	grid-column-start: 1;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	transform: rotate(270deg);
	z-index: 9999;
	color: white; 
}

/* ======================= Coordinates for Background Grid Elements @710px ======================= */
/
.background-header
{
 	padding-top: 100px;
	
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 12;
 	grid-row-end: span 12;
}

.background-header-rotate
{
	display: inline-block;
 	width: 270px;
 	margin-left: -490px;
 	margin-top: 1000px;
 	padding-right:1px;	
	transform: rotate(360deg);
	text-decoration: underline;
}

.image-four
{
 	padding-top: 400px;
	padding-left: 50px;
	padding-right: 70px;
	grid-column-start: 1;
 	grid-column-end: span 2;
 	grid-row-start: 10;
 	grid-row-end: span 10
	width:40%;
}
.background-text-one
{
	padding-top: 1000px;
	padding-left: 50px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 12;
 	grid-row-end: span 12;
}

.background-text-two
{
 	padding-top: 1500px;
	padding-left: 50px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 12;
 	grid-row-end: span 12;
}

.references
{
	padding-left: 100;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 35;
 	grid-row-end: span 0;
}
.references-websites
{
	padding-top: 20px;
	padding-left: 100;
	grid-column-start: 1;
 	grid-column-end: span 3;
 	grid-row-start: 35;
 	grid-row-end: span 1;
}

}

/* END @MEDIA QUERY (710PX) */
/* ============================================================================================================================================================================================================================================================================*/


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

 .grid-container 
{
 	border: 0px solid black;
 	max-width:3000px;
 	margin:0 auto;
 	padding:0;
 	display: grid;
 	grid-gap:10px 10px;
 	grid-template-columns: repeat(1, 1fr);
 	grid-auto-rows: minmax(100px, 100px);
}

.grid-item
{
 	border: 0px solid grey;
 	grid-column: span 1;
	overflow: visible;

}
/* =======================
     Coordinates for 
     Intro Grid Elements @media 510px
    ======================= */

.title-ro
{
 	padding-top: 118px;
	padding-left: 100px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-ck
{
	padding-top: 250px;
	padding-left: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-we
{
	padding-top:380px;
	padding-left: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-ll
{
	padding-top: 510px;
	padding-left: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.video
{
	padding-top: 750px;
	padding-bottom: 200px;
	margin-left: -80px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 130%;
}

/* ======================= Coordinates for Glyphs Grid Elements @510px ======================= */

  .glyph-header
{
grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
padding-left: 100;
}

.glyph-header-rotate
{
 	margin-left: 30px;
 	margin-top: -330px;
 	padding-right: 200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}

.glyph-regular
{
	margin-left: 20px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 10;
      grid-row-end: span 1;
}



.glyph-italic
{
	margin-left: 20px;
	margin-top: 80px;
 	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
}
.glyph-bold
{
	margin-left: 20px;
	margin-top: 10 px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
}
.glyph-bold-italic
{
margin-left: 20px;
	 margin-top: 1 px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
}
  
/* ======================= Coordinates for Anatomy Grid Elements @510px ======================= */
 .anatomy-header
{
	padding-top: 10px;
	padding-left:80px;
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 12;
	grid-row-end: span 12;
}

.anatomy-header-rotate
{
 	display: inline-block;
 	width: 270px;
 	margin-left: -60px;
 	margin-top: 1px;
 	padding-right:200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}


.anatomy-text-one
{
	padding-top: 40px;
	padding-left:50px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 13;
 	grid-row-end: span 13;
}
.anatomy-text-two
{
	padding-top: 500px;
	padding-left:30px;
	padding-bottom: 500px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 14;
 	grid-row-end: span 14;
}

.anatomy-image1
{
	margin-top: 500px;
	margin-left: -20px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 14;
 	grid-row-end: span 14;
	width:100%;
}
.anatomy-image2
{
	margin-top:350px;
	margin-left: -20px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 16;
 	grid-row-end: span 16;
	width:100%;
}
/* ======================= Coordinates for In Use Grid Elements @510px ======================= */
.in-use-header
{
	padding-top: 1px;
	padding-left:80px;
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 1;
	grid-row-end: span 1;
}

.in-use-header-rotate
{
	display: inline-block;
 	width: 300px;
 	margin-left: -50px;
 	margin-top: 1px;
 	padding-right:200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}

.image-one
{
	padding-top: 120px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}

.image-two
{
 	padding-top: 480px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}

.image-three
{
 	padding-top: 850px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}
.l-letter
{
 	padding-top: 5px;
	grid-column-start: 1;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	transform: rotate(270deg);
	z-index: 9999;
	color: white; 
}

/* ======================= Coordinates for Background Grid Elements @510px ======================= */
/
 .background-header
{
	padding-top: 100px;
	padding-left:80px;
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 12;
	grid-row-end: span 12;
}

.background-header-rotate
{
 	display: inline-block;
 	width: 270px;
 	margin-left: 30px;
 	margin-top: 1050px;
 	padding-right:200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}



.image-four
{
 	padding-top: 400px;
	padding-left: 50px;
	padding-right: 70px;
	grid-column-start: 1;
 	grid-column-end: span 2;
 	grid-row-start: 10;
 	grid-row-end: span 10
	width:40%;
}
.background-text-one
{
	padding-top: 800px;
	padding-left: 50px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 12;
 	grid-row-end: span 12;
}

.background-text-two
{
 	padding-top: 1300px;
	padding-left: 50px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 14;
 	grid-row-end: span 14;
}

.references
{
	padding-left: 100;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 37;
 	grid-row-end: span 0;
}
.references-websites
{
	padding-top: 20px;
	padding-left: 100;
	grid-column-start: 1;
 	grid-column-end: span 3;
 	grid-row-start: 37;
 	grid-row-end: span 1;
}

}

/* END @MEDIA QUERY (510PX) */


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

@media only screen and (max-width: 360px) 
{
 .grid-container 
{
 	border: 0px solid black;
 	max-width:3000px;
 	margin:0 auto;
 	padding:0;
 	display: grid;
 	grid-gap:10px 10px;
 	grid-template-columns: repeat(1, 1fr);
 	grid-auto-rows: minmax(100px, 100px);
}

.grid-item
{
 	border: 0px solid grey;
 	grid-column: span 1;
	overflow: visible;

}
/* =======================
     Coordinates for 
     Intro Grid Elements @media 510px
    ======================= */

.title-ro
{
 	padding-top: 118px;
	padding-left: 100px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-ck
{
	padding-top: 250px;
	padding-left: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-we
{
	padding-top:380px;
	padding-left: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.title-ll
{
	padding-top: 510px;
	padding-left: 100px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
}
.video
{
	padding-top: 750px;
	padding-bottom: 200px;
	margin-left: -80px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 130%;
}

/* ======================= Coordinates for Glyphs Grid Elements @510px ======================= */

  .glyph-header
{
grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
padding-left: 100;
}

.glyph-header-rotate
{
 	margin-left: 30px;
 	margin-top: -330px;
 	padding-right: 200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}

.glyph-regular
{
	margin-left: 20px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 10;
      grid-row-end: span 1;
}



.glyph-italic
{
	margin-left: 20px;
	margin-top: 80px;
 	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
}
.glyph-bold
{
	margin-left: 20px;
	margin-top: 10 px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
}
.glyph-bold-italic
{
margin-left: 20px;
	 margin-top: 1 px;
	grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 9;
      grid-row-end: span 1;
}
  
/* ======================= Coordinates for Anatomy Grid Elements @510px ======================= */
 .anatomy-header
{
	padding-top: 10px;
	padding-left:80px;
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 12;
	grid-row-end: span 12;
}

.anatomy-header-rotate
{
 	display: inline-block;
 	width: 270px;
 	margin-left: -60px;
 	margin-top: 1px;
 	padding-right:200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}
.r-letter
{
	padding-top: 270px;
	direction: rtl;
	grid-column-start: 1;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	clip-path: inset(0% 0% 0% 0%);
	text-align: left;
	color: white;	
}

.anatomy-text-one
{
	padding-top: 40px;
	padding-left:50px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 13;
 	grid-row-end: span 13;
}
.anatomy-text-two
{
	padding-top: 500px;
	padding-left:30px;
	padding-bottom: 500px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 14;
 	grid-row-end: span 14;
}

.anatomy-image1
{
	margin-top: 400px;
	margin-left: -20px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 14;
 	grid-row-end: span 14;
	width:100%;
}
.anatomy-image2
{
	margin-top:250px;
	margin-left: -20px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 16;
 	grid-row-end: span 16;
	width:100%;
}
/* ======================= Coordinates for In Use Grid Elements @510px ======================= */
.in-use-header
{
	padding-top: 1px;
	padding-left:80px;
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 1;
	grid-row-end: span 1;
}

.in-use-header-rotate
{
	display: inline-block;
 	width: 300px;
 	margin-left: -50px;
 	margin-top: 1px;
 	padding-right:200px;	
	transform: rotate(360deg);
	text-decoration: underline;
}

.image-one
{
	padding-top: 120px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}

.image-two
{
 	padding-top: 480px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}

.image-three
{
 	padding-top: 850px;
	padding-left: 80px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	width: 80%;
}
.l-letter
{
 	padding-top: 5px;
	grid-column-start: 1;
	grid-column-end: span 1;
 	grid-row-start: 1;
 	grid-row-end: span 1;
	transform: rotate(270deg);
	z-index: 9999;
	color: white; 
}

/* ======================= Coordinates for Background Grid Elements @510px ======================= */
/
.background-header
{
 	padding-top: 100px;
	
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 12;
 	grid-row-end: span 12;
}

.background-header-rotate
{
	display: inline-block;
 	width: 270px;
 	margin-left: -490px;
 	margin-top: 1000px;
 	padding-right:1px;	
	transform: rotate(360deg);
	text-decoration: underline;
}

.image-four
{
 	padding-top: 400px;
	padding-left: 50px;
	padding-right: 70px;
	grid-column-start: 1;
 	grid-column-end: span 2;
 	grid-row-start: 10;
 	grid-row-end: span 10
	width:40%;
}
.background-text-one
{
	padding-top: 800px;
	padding-left: 50px;
 	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 12;
 	grid-row-end: span 12;
}

.background-text-two
{
 	padding-top: 1300px;
	padding-left: 50px;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 14;
 	grid-row-end: span 14;
}

.references
{
	padding-left: 100;
	grid-column-start: 1;
 	grid-column-end: span 1;
 	grid-row-start: 37;
 	grid-row-end: span 0;
}
.references-websites
{
	padding-top: 20px;
	padding-left: 100;
	grid-column-start: 1;
 	grid-column-end: span 3;
 	grid-row-start: 37;
 	grid-row-end: span 1;
}

}