/*=================
===================
CSS for Baskerville Typeface Showcase website
Website: N/A
Author: Eliza Kuhn
Date: 2020
License: GNU Public License
===================
Table of Conents
===================
1.0 General Styles
2.0 Font Styles
3.0 Main Navigation
4.0 Content Styles
5.0 Grid
===================
=================*/
/*===============
1.0 General Styles
================*/
*  {
  margins: 0px; 
  padding: 0px;
  box-border;
  box-sizing;
  list-style-type: none;
} 

html, body{
  width: 100%;
  height: 100%;
  background-color: #d99d54;
}

/*===============
2.0 Font Styles
================*/
h1,h2,h3,h4,h5,h6,p,li,a,span,strong,em,caption,figure{
  font-family: baskerville-urw, serif;
  font-weight: 400;
  font-style: normal;
  color: #134454;
  line-height: 100%;
  margin: 0;
  padding:0;

}

h1{
  color:#ffffff;
  font-size: 276px;
  font-weight: regular;
}

h2{
  font-size: 30px;
  font-weight: regular;
 
}

h3{
  font-size: 650px;
  color: #ffffff;
  font-weight: regular;
  line-height: 500px;

}

h4{
  font-size: 700px;
  font-weight: regular;
}

h5{
  font-size: 170px;
  font-weight: regular;
}

h6{
  font-family: baskerville-urw, serif;
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  font-size: 70px;

}

p{
  font-size: 14px;
  font-weight: regular;
  line-height: 18px;
}

#anatomy-three{
  color: #ffffff;

}

#baskerville-bold{
  font-family: baskerville-urw, serif;
  font-weight: 700;
  font-style: normal;
  font-size: 170px;
  font-variant: small-caps;
  line-height: 10px;

}

#baskerville-regular-italic{
  font-weight: 400;
  font-style: italic;
  font-size: 130px;
  color: #ffffff;
  text-align: center;
  line-height: 100px;

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

.main-nav {
  position:fixed;
  z-index: 9999;
  top:0;
  background-color: transparent;
  width: 100%;
}


.main-nav ul {
  width:50%;
  margin:0 auto;
  padding: 20px;
  -webkit-columns: 5 50px; 
  -moz-columns: 5 50px; 
  columns: 5 50px; 
  background-color: transparent; 
}

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

.main-nav a {
  margin:0 auto;
  display: block;
  width:100px;
  height:30px;
  line-height:30px;
  background-color:#134454;
  text-decoration: none; 
  color:white;
  font-family: baskerville, serif;
  font-weight: 400;
  font-size: 15px; 
}

.main-nav a:hover {
  background-color: white;
  color: #134454;
}
.main-nav a:active {
  background-color:#d99d54;
  color: #134454;
}

/*===============
4.0 Content Styles
================*/
.big-title-one {
  text-align: right;
  font-family: baskerville-urw, serif;
  font-weight: regular;
  font-size: 200px;
  line-height: 80%; 
  letter-spacing: 5 em;
  margin-top:0px
}

.big-title-two {
  text-align: left;
  font-family: baskerville-urw, serif;
  font-weight: regular;
  font-size: 200px;
  line-height: 80%; 
  letter-spacing: 5 em;
  margins: 0 0;
}
.rotate90{
  display: inline-block;
  width: 300px;
  margin-left: -118px;
  margin-top: 100px;
  padding-right:200px;
  transform: rotate(90deg);

}

#intro-text{
  color: #ffffff;
  font-family: baskerville-urw, serif;
  font-weight: 800;
  font-style: normal;

}

#letter-q{
  font-size: 540px;
  color: #ffffff;
  line-height: 400px;

}

#letter-g{
  font-size: 490px;
  color: #134454;
  line-height: 0px;
}

#letter-r{
  font-size: 540px;
  line-height: 300px;
  color: #ffffff;

}

#numbers{
  font-size: 160px;

}

.white-color{
  color: #ffffff;

}

#baskerville-ultra-bold-oblique{
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  font-size: 100px;

}
/*===============
5.0 Grid
================*/
.grid-container {
  display: grid;
  max-width: 1200px;
  grid-gap:10px 10px;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(100px, 100px);
  margin: 10px 10px;

}

.grid-item {
  background-color:transparent;
  /*border: 1px solid black;*/
  color: transparent;
  font-size:2em;
  grid-column: span 1;
  text-align: left;
  padding: none;
  margins: 0px;

}
.header-line{
  border-left: 3px solid;
  color: #134454;
  height: 350px;
  position: absolute;
}

/*=========Motion Graphic=======*/
.motion-graphic{
  grid-column-start: 1;
  grid-column-end: span 5;
  grid-row-start: 1;
  grid-row-end: span 3;
  padding: 0px 0px;
  margins: 0px;
  
}

/*========= Title ========*/
.title{
  grid-column-start: 3;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: span 2;

}

.vl{
  border-left: 33px solid;
  color: #134454;
  height: 3450px;
  position: absolute;

}

.vl1{
  left: 25%;
  margin-left: -57.5px;
  top: 10px;
  height: 2400px;
  z-index: -1;
  
}

.hl{
  border-left: 33px solid;
  color: #134454;
  height: 1000px;
  position: absolute;
  transform: rotate(90deg);

}
.hl1{
  left: 59.5%;
  margin-left: 0px;
  top: 250px;

}
/*========= History ========*/

.history{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 5; 
  grid-row-end: span 1;
  transform: rotate(270deg);

}

.header-line-1{
  left: 6.5%;
  top: 950px;

}

.intro-text{
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 2; 
  padding: 120px 0px 0px 0px ;

}

.history-one{
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 4;
  padding: 120px 0px 0px 0px;

}

.history-two{
  grid-column-start: 5;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 4;
  padding: 120px 0px 0px 0px;

}

.history-three{
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 4;
  padding: 120px 0px 0px 0px;

}
/*========= Anatomy ========*/
.hl2{
  left:30%;
  margin-left: 30px;
  top: 1010px;
}
.letter-q{
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: span 5;
  text-align: center;

}

.anatomy-one{
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 9;
  grid-row-end: span 2;
  padding: 0px 70px 0px 40px;

}

.anatomy-two{
  grid-column-start: 4;
  grid-column-end: span 2;
  grid-row-start: 9;
  grid-row-end: span 2;
  padding: 0px 0px 0px 95px;
}
  

.letter-g{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 13;
  grid-row-end: span 4;
  padding: 0px 30px 0px 0px;

}
.header-line-2{
  left: 84%;
  top: 2040px;

}

.anatomy{
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 12;
  grid-row-end: span 1;
  transform: rotate(90deg);
  padding: 0px 0px 0px 120px;

}

.anatomy-three{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 16;
  grid-row-end: span 2;
  padding: 0px 30px 0px 0px;

}
.vl2{
  left: 63%;
  height: 1000px;
  top: 2980px;
  
}

.letter-r{
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 20;
  grid-row-end: span 4;
  padding: 30px 0px;

}

.hl3{
  left: 77%;
  top: 3500px;
  height: 550px;

}
/*========= Glyphs ========*/
.header-line-3{
  left: 6.5%;
  top: 3890px;
}
.glyphs{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 5; 
  grid-row-end: span 1;
  transform: rotate(270deg);
}
.letter-A{
  grid-column-start: 2;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: span 5;
  padding: 0px 0px 0px 65px;

}

.glyphs-one{
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 7;
  grid-row-end: span 2;
  padding: 0px 0px 0px 47px;
  
}

.hl4{
  left: 50%;
  margin-left: -20px;
  top: 4025px;
  height: 1275px;

}
.glyphs-two{
  grid-column-start: 5;
  grid-column-end: span 4;
  grid-row-start: 10;
  grid-row-end: span 4;

}
.glyphs-two > h5{
  line-height: 100%;
  

}
.glyphs-three{
  grid-column-start: 5;
  grid-column-end: span 2;
  grid-row-start: 15;
  grid-row-end: span 4;
  padding: 50px 0px;

}

.ampersand{
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 19;
  grid-row-end: span 8;
  z-index: -1;

}

.glyphs-four{
  grid-column-start: 1;
  grid-column-end: span 6;
  grid-row-start: 22;
  grid-row-end: span 2;
  padding: 0px 0px 0px 10px;

}
/*========= Fonts ========*/
.header-line-4{
  left: 96.5%;
  top: 7575px;
}

.fonts{
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 13;
  grid-row-end: span 1;
  transform: rotate(90deg);

}

.bold{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 1;
  text-align: right;
  padding: 0px 0px 0px 150px;

}

.baskerville-bold{
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 1;

}

.regular-italic{
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 12;
  grid-row-end: span 1;
  text-align: left;
  padding: 90px 0px 0px 30px;

}

.baskerville-regular-italic{
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 13;
  grid-row-end: span 1;
  z-index: -1;

}
.baskerville-regular{
  grid-column-start: 1;
  grid-column-end: span 5;
  grid-row-start: 14;
  grid-row-end: span 2;

}

.regular{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 15;
  grid-row-end: span 1;
  padding: 60px 0px 0px 0px; 

}

.baskerville-ultra-bold-oblique{
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 17;
  grid-row-end: span 1;

}

.ultra-bold-oblique{
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 17;
  grid-row-end: span 1;
  text-align: center;
  padding: 0px 10px 0px 150px;

}
/*========= In Use ========*/
.hl5{
  left: 35%;
  top: 8400px;
  height: 1000px;
}

.vl3{
  left: 65.5%;
  top: 8750px;
  height: 1100px;

}

.header-line-5{
  left: 15.5%;
  margin-left: 0px;
  top: 8780px;
  transform: rotate(90deg);
}

.in-use{
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: span 1;
  padding: 125px 0px;

}

.in-use-one{
  grid-column-start: 4;
  grid-column-end: span 2;
  grid-row-start: 7;
  grid-row-end: span 1;
  z-index: 9999;
 
}
.comp1{
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 6;
  grid-row-end: span 2,

}
.in-use-two{
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 10;
  grid-row-end: span 1;
  padding: 50px 0px;

}

.comp2{
  grid-column-start: 5;
  grid-column-end: span 2;
  grid-row-start: 15;
  grid-row-end: span 1;

}

.in-use-three{
  grid-column-start: 5;
  grid-column-end: span 1;
  grid-row-start: 19;
  grid-row-end: span 1;
  padding: 50px 10px 0px 0px;

}

.comp3{
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 23; 
  grid-row-end: span 1;

}

.in-use-four{
  grid-column-start: 5;
  grid-column-end: span 1;
  grid-row-start: 26;
  grid-row-end: span 1;
  padding: 90px 0px 0px 10px;

}

/*========References======*/
.hl6{
  left: 40%;
  top: 10975px;
  height: 1100px;

}

.vl4{
  left: 25%;
  margin-left: -58px;
  height: 500px;
  top: 11400px;

}

.reference-one{
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
  padding: 30px 0px 0px 70px;

}

.reference-two{
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  padding: 20px 0px 0px 70px;

}

.reference-three{
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 1;
  padding: 0px 0px 0px 70px;

}

/*============ 
Media Query Fonts 768px 
==============*/

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

h1{
  color:#ffffff;
  font-size: 150px;
  font-weight: regular;
}

h2{
  font-size: 20px;
  font-weight: regular;
 
}

h3{
  font-size: 550px;
  color: #ffffff;
  font-weight: regular;
  line-height: 500px;

}

h4{
  font-size: 600px;
  font-weight: regular;
}

h5{
  font-size: 100px;
  font-weight: regular;
}

h6{
  font-family: baskerville-urw, serif;
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  font-size: 50px;

}

p{
  font-size: 14px;
  font-weight: regular;
  line-height: 18px;
}

#anatomy-three{
  color: #ffffff;

}

#baskerville-bold{
  font-family: baskerville-urw, serif;
  font-weight: 700;
  font-style: normal;
  font-size: 100px;
  font-variant: small-caps;
  line-height: 10px;

}

#baskerville-regular-italic{
  font-weight: 400;
  font-style: italic;
  font-size: 100px;
  color: #ffffff;
  text-align: center;
  line-height: 100px;

}
.big-title-one {
  text-align: right;
  font-family: baskerville-urw, serif;
  font-weight: regular;
  font-size: 150px;
  line-height: 80%; 
  letter-spacing: 5 em;
  margin-top:0px
}

.big-title-two {
  text-align: left;
  font-family: baskerville-urw, serif;
  font-weight: regular;
  font-size: 150px;
  line-height: 80%; 
  letter-spacing: 5 em;
  margins: 0 0;
}
.rotate90{
  display: inline-block;
  width: 300px;
  margin-left: -118px;
  margin-top: 100px;
  padding-right:200px;
  transform: rotate(90deg);

}

#intro-text{
  color: #ffffff;
  font-family: baskerville-urw, serif;
  font-weight: 800;
  font-style: normal;

}

#letter-q{
  font-size: 200px;
  color: #ffffff;
  line-height: 400px;

}

#letter-g{
  font-size: 250px;
  color: #134454;
  line-height: 0px;
}

#letter-r{
  font-size: 400px;
  line-height: 300px;
  color: #ffffff;

}

#numbers{
  font-size: 100px;

}

.white-color{
  color: #ffffff;

}

#baskerville-ultra-bold-oblique{
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  font-size: 70px;

}
}
/*=========== 
Media Query Grid 768px 
=============*/

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

.main-nav {
  position:fixed;
  z-index: 9999;
  top:0;
  background-color: transparent;
  width: 100%;
}


.main-nav ul {
  width:50%;
  margin:0 auto;
  padding: 20px;
  -webkit-columns: 5 50px; 
  -moz-columns: 5 50px; 
  columns: 5 50px; 
  background-color: transparent; 
}

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

.main-nav a {
  margin:0 auto;
  display: block;
  width:65px;
  height:30px;
  line-height:30px;
  background-color:#134454;
  text-decoration: none; 
  color:white;
  font-family: baskerville, serif;
  font-weight: 400;
  font-size: 15px; 
}

.main-nav a:hover {
  background-color: white;
  color: #134454;
}
.main-nav a:active {
  background-color:#d99d54;
  color: #134454;
}


.grid-container {
  display: grid;
  max-width: 1200px;
  grid-gap:10px 10px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(100px, 100px);
  margin: 10px 10px;

}

.grid-item {
  background-color:transparent;
  /*border: 1px solid black;*/
  color: transparent;
  font-size:2em;
  grid-column: span 1;
  text-align: left;
  padding: none;
  margins: 0px;

}
.header-line{
  border-left: 3px solid;
  color: #134454;
  height: 230px;
  position: absolute;
}

/*=========Motion Graphic=======*/
.motion-graphic{
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 3;
  padding: 0px 0px;
  margins: 0px;
  
}

/*========= Title ========*/
.title{
  grid-column-start: 3;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: span 2;

}

.vl{
  border-left: 25px solid;
  color: #134454;
  height: 3450px;
  position: absolute;

}

.vl1{
  left: 10%;
  margin-left: -57.5px;
  top: 10px;
  height: 2000px;
  z-index: -1;
  
}

.hl{
  border-left: 25px solid;
  color: #134454;
  height: 1000px;
  position: absolute;
  transform: rotate(90deg);

}
.hl1{
  left: 59.5%;
  margin-left: 0px;
  top: 250px;

}
/*========= History ========*/

.history{
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 7; 
  grid-row-end: span 1;
  transform: rotate(90deg);
  padding: 0px 0px 350px 200px;
  
}

.header-line-1{
  left: 97%;
  top: 950px;

}

.intro-text{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 2; 
  padding: 0px 0px 0px 50px ;

}

.history-one{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 2;
  padding: 0px 0px 0px 50px;

}

.history-two{
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 2;
  padding: 0px 50px 0px 0px;

}

.history-three{
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 6;
  grid-row-end: span 2;
  padding: 40px 50px 0px 0px;

}
/*========= Anatomy ========*/
.hl2{
  left:30%;
  margin-left: 30px;
  top: 1010px;
}
.letter-q{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 3;
  text-align: center;
  padding: 0px 0px 0px 150px;

}

.anatomy-one{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  padding: 10px 0px 0px 50px;

}

.anatomy-two{
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: span 1;
  padding: 10px 50px 0px 0px;
}
  

.letter-g{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 9;
  grid-row-end: span 4;
  padding: 0px 30px 0px 0px;

}
.header-line-2{
  left: 79.5%;
  top: 1989px;

}

.anatomy{
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 8;
  grid-row-end: span 1;
  transform: rotate(90deg);
  padding: 0px 0px 0px 160px;

}

.anatomy-three{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 10;
  grid-row-end: span 2;
  padding: 70px 30px 0px 0px;

}
.vl2{
  left: 55%;
  height: 1000px;
  top: 2900px;
  
}

.letter-r{
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 18;
  grid-row-end: span 4;
  padding: 20px 0px 0px 50px;

}

.hl3{
  left: 77%;
  top: 3400px;
  height: 550px;

}
/*========= Glyphs ========*/
.header-line-3{
  left: 5.75%;
  top: 3825px;
}
.glyphs{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1; 
  grid-row-end: span 1;
  transform: rotate(270deg);
  padding: 0px 0px 0px 70px;
}
.letter-A{
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 5;
  padding: 0px 0px 0px 150px;

}

.glyphs-one{
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 6;
  grid-row-end: span 2;
  padding: 20px 0px 0px 80px;
  
}

.hl4{
  left: 50%;
  margin-left: -20px;
  top: 3830px;
  height: 1275px;

}
.glyphs-two{
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 4;
  padding: 0px 0px 0px 650px;

}
.glyphs-two > h5{
  line-height: 100%;
  

}
.glyphs-three{
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 11;
  grid-row-end: span 4;
  padding: 0px 0px 0px 300px;

}

.ampersand{
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 13;
  grid-row-end: span 1;
  z-index: -1;

}

.glyphs-four{
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 16;
  grid-row-end: span 1;
  padding: 0px 0px 0px 0px;

}
/*========= Fonts ========*/
.header-line-4{
  left: 96.5%;
  top: 6150px;
}

.fonts{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 1;
  transform: rotate(90deg);
  padding: 0px 0px 600px 250px;

}

.bold{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
  padding: 0px 0px 0px 25px;

}

.baskerville-bold{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 1;
  padding: 0px 0px 0px 250px;

}

.regular-italic{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 8;
  grid-row-end: span 1;
  padding: 80px 0px 0px 400px;

}

.baskerville-regular-italic{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 9;
  grid-row-end: span 1;
  z-index: -1;
  padding: 0px 0px 0px 0px;

}
.baskerville-regular{
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 10;
  grid-row-end: span 2;

}

.regular{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 10;
  grid-row-end: span 1;
  padding: 90px 0px 0px 0px; 

}

.baskerville-ultra-bold-oblique{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 8;
  grid-row-end: span 1;
  padding: 120px 0px 0px 650px;
  z-index: -1;

}

.ultra-bold-oblique{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start:12;
  grid-row-end: span 1;
  text-align: left;
  padding: 10px 0px 0px 325px;

}
/*========= In Use ========*/
.hl5{
  left: 35%;
  top: 6650px;
  height: 1000px;
}

.vl3{
  left: 65.5%;
  top: 7000px;
  height: 1100px;

}

.header-line-5{
  left: 15.5%;
  margin-left: 0px;
  top: 7100px;
  transform: rotate(90deg);
}

.in-use{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  padding: 30px 0px 0px 250px;

}

.in-use-one{
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 5;
  grid-row-end: span 1;
  z-index: 9999;
  padding: 0px 0px 0px 0px;
 
}
.comp1{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 2,

}
.in-use-two{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 9;
  grid-row-end: span 1;
  padding: 0px 80px 0px 0px;

}

.comp2{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 13;
  grid-row-end: span 1;
  padding: 0px 0px 0px 0px;

}

.in-use-three{
  grid-column-start: 2;
  grid-column-end: span 3;
  grid-row-start: 16;
  grid-row-end: span 1;
  padding: 35px 0px 0px 10px;

}

.comp3{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 18; 
  grid-row-end: span 1;
  padding: 0px 0px 0px 0px;
  

}

.in-use-four{
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 21;
  grid-row-end: span 1;
  padding: 50px 0px 0px 10px;

}

/*========References======*/
.hl6{
  left: 5%;
  top: 8600px;
  height: 1500px;

}

.vl4{
  left: 10%;
  margin-left: -58px;
  height: 700px;
  top: 9200px;

}

.reference-one{
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: span 1;
  padding: 30px 0px 0px 0px;

}

.reference-two{
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: span 1;
  padding: 20px 0px 0px 0px;

}

.reference-three{
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 5;
  grid-row-end: span 1;
  padding: 0px 0px 0px 0px;

}
}
/*=========== 
Media Query Fonts 480px 
=============*/
@media only screen and (max-width: 480px) {

h1{
  color:#ffffff;
  font-size: 70px;
  font-weight: regular;
}

h2{
  font-size: 20px;
  font-weight: regular;
 
}

h3{
  font-size: 400px;
  color: #ffffff;
  font-weight: regular;
  line-height: 500px;

}

h4{
  font-size: 400px;
  font-weight: regular;
}

h5{
  font-size: 70px;
  font-weight: regular;
}

h6{
  font-family: baskerville-urw, serif;
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  font-size: 40px;

}

p{
  font-size: 18px;
  font-weight: regular;
  line-height: 20px;
}

#anatomy-three{
  color: #ffffff;

}

#baskerville-bold{
  font-family: baskerville-urw, serif;
  font-weight: 700;
  font-style: normal;
  font-size: 70px;
  font-variant: small-caps;
  line-height: 10px;

}

#baskerville-regular-italic{
  font-weight: 400;
  font-style: italic;
  font-size: 50px;
  color: #ffffff;
  line-height: 100px;

}
.big-title-one {
  text-align: right;
  font-family: baskerville-urw, serif;
  font-weight: regular;
  font-size: 70px;
  line-height: 80%; 
  letter-spacing: 5 em;
  margin-top:0px
}

.big-title-two {
  text-align: left;
  font-family: baskerville-urw, serif;
  font-weight: regular;
  font-size: 70px;
  line-height: 80%; 
  letter-spacing: 5 em;
  margins: 0 0;
}
.rotate90{
  display: inline-block;
  width: 300px;
  margin-left: -118px;
  margin-top: 100px;
  padding-right:200px;
  transform: rotate(90deg);

}

#intro-text{
  color: #ffffff;
  font-family: baskerville-urw, serif;
  font-weight: 800;
  font-style: normal;
  font-size: 20px;
  line-height: 22px;

}

#letter-q{
  font-size: 300px;
  color: #ffffff;
  line-height: 400px;

}

#letter-g{
  font-size: 300px;
  color: #134454;
  line-height: 0px;
}

#letter-r{
  font-size: 250px;
  line-height: 300px;
  color: #ffffff;

}

#numbers{
  font-size: 45px;

}

.white-color{
  color: #ffffff;

}

#baskerville-ultra-bold-oblique{
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  font-size: 50px;

}

.reference{
  font-size: 15px;
}
}

/*============
 Media Query Grid 480px 
==============*/
@media only screen and (max-width: 480px){
.main-nav {
  position:absolute;
  z-index: 9999;
  top:0;
  background-color: transparent;
  width: 100%;
}


.main-nav ul {
  width:100%;
  margin:0 -10px;
  padding:0px;
  -webkit-columns: 5 20px; 
  -moz-columns: 5 20px; 
  columns: 5 20px; 
  background-color: transparent; 
}

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

.main-nav a {
  margin:0 0;
  display: block;
  width:70px;
  height:30px;
  line-height:30px;
  background-color:#134454;
  text-decoration: none; 
  color:white;
  font-family: baskerville, serif;
  font-weight: 400;
  font-size: 15px; 
}

.main-nav a:hover {
  background-color: white;
  color: #134454;
}
.main-nav a:active {
  background-color:#d99d54;
  color: #134454;
}

.grid-container {
  display: grid;
  max-width: 1200px;
  grid-gap:10px 10px;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: minmax(50px, 100px);
  margin: 10px 10px;

}

.grid-item {
  background-color:transparent;
  /*border: 1px solid black;*/
  color: transparent;
  font-size:2em;
  grid-column: span 1;
  text-align: left;
  padding: none;
  margins: 0px;

}
.header-line{
  border-left: 3px solid;
  color: #134454;
  height: 128px;
  position: absolute;
}

/*=========Motion Graphic=======*/
.motion-graphic{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
  padding: 40px 70px 0px 20px;
  margins: 0px;

}

/*========= Title ========*/
.title{
  grid-column-start: 3;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: span 2;

}

.vl{
  border-left: 10px solid;
  color: #134454;
  height: 3450px;
  position: absolute;
  z-index: -1;

}

.vl1{
  left: 23%;
  margin-left: -57.5px;
  top: 0px;
  height: 2400px;
  z-index: -1;
  margin-top: -30px;
  
}

.hl{
  border-left: 10px solid;
  color: #134454;
  height: 1000px;
  position: absolute;
  transform: rotate(90deg);
  z-index: -1;

}
.hl1{
  left: 59.5%;
  margin-left: 0px;
  top: 250px;

}
/*========= History ========*/

.history{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 6; 
  grid-row-end: span 1;
  transform: rotate(90deg);
  padding: 0px 0px 375px 0px;

}

.header-line-1{ 
  left: 92%;
  top: 730px;

}

.intro-text{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 1; 
  padding: 70px 50px 0px 50px ;

}

.history-one{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 2;
  padding: 0px 50px 0px 50px;

}

.history-two{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 9;
  grid-row-end: span 2;
  padding: 35px 50px 0px 50px;

}

.history-three{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 13;
  grid-row-end: span 1;
  padding: 45px 50px 0px 50px;

}
/*========= Anatomy ========*/
.hl2{
  left:30%;
  margin-left: 30px;
  top: 1650px;
}
.anatomy{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  transform: rotate(90deg);
  padding: 0px 0px 375px 0px;
  z-index: -1;

}

.header-line-2{
  left: 93%;
  top: 2620px;

}
.letter-q{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
  padding: 0px 70px 0px 20px;
  z-index: -1;

}

.anatomy-one{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 2;
  padding: 10px 50px;

}

.anatomy-two{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 6;
  grid-row-end: span 2;
  padding: 20px 50px;
}
  

.letter-g{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 9;
  grid-row-end: span 1;
  padding: 0px 50px 0px 70px;

}

.anatomy-three{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 11;
  grid-row-end: span 1;
  padding: 0px 50px;

}

.vl2{
  left: 93%;
  height: 1000px;
  top: 3200px;
  
}

.letter-r{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 14;
  grid-row-end: span 1;
  padding: 30px 50px 0px 70px;

}

.hl3{
  left: 90%;
  top: 3350px;
  height: 550px;

}

/*========= Glyphs ========*/
.header-line-3{
  left: 8%;
  top: 4225px;
}
.glyphs{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1; 
  grid-row-end: span 1;
  transform: rotate(270deg);
  padding: 0px 0px 1210px 540px;
   
}

.letter-A{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 3;
  padding: 0px 50px 150px;

}

.glyphs-one{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 7;
  grid-row-end: span 1;
  padding: 90px 25px 0px;
  
}

.hl4{
  left: 50%;
  margin-left: -20px;
  top: 4375px;
  height: 500px;

}
.glyphs-two{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 7;
  grid-row-end: span 4;
  padding: 0px 0px 625px 0px;

}
.glyphs-two > h5{
  line-height: 100%; 
}

.glyphs-three{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 11;
  grid-row-end: span 4;
  padding: 70px 50px 0px 90px;

}

.ampersand{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 14;
  grid-row-end: span 4;
  z-index: -1;
  padding: 0px 1000px 0px 0px;
  margin-left:-70px;

}

.glyphs-four{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 16;
  grid-row-end: span 2;
  padding: 0px 0px;

}
/*========= Fonts ========*/
.header-line-4{
  left: 93%;
  top: 5615px;
}

.fonts{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
  transform: rotate(90deg);
  padding: 0px 0px 320px 0px;

}

.bold{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
  text-align: left;
  padding: 0px 0px 0px 0px;

}

.baskerville-bold{
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 1;
  padding: 0px 0px 100px 0px;

}

.regular-italic{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  text-align: left;
  padding: 70px 0px 0px 200px;

}

.baskerville-regular-italic{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  z-index: -1;
  padding: 70px 50px 0px 70px;

}
.baskerville-regular{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 2;
  padding: 90px 0px 0px;
  margin-left: -50px;

}

.regular{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 6;
  grid-row-end: span 1;
  padding: 70px 0px 0px 0px; 

}

.baskerville-ultra-bold-oblique{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 6;
  grid-row-end: span 1;
  padding: 0px 0px 290px 0px;

}

.ultra-bold-oblique{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 8;
  grid-row-end: span 1;
  text-align: center;
  padding: 0px 10px 0px 125px;

}
/*========= In Use ========*/
.hl5{
  left: 35%;
  top: 6200px;
  height: 1000px;
}

.vl3{
  left: 93%;
  top: 6550px;
  height: 1100px;

}

.header-line-5{
  left: 15.5%;
  margin-left: 0px;
  top: 6710px;
  transform: rotate(90deg);
}

.in-use{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
  padding: 40px 0px 0px 130px;

}

.in-use-one{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  z-index: 9999;
  padding: 0px 50px;
 
}
.comp1{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 6;
  grid-row-end: span 2,
  padding: 0px 50px 0x 50px;
  width: 70%;
  margin-left:50px;


}
.in-use-two{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 9;
  grid-row-end: span 1;
  padding: 50px 50px;

}

.comp2{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 11;
  grid-row-end: span 1;
  padding: 0px 50px;

}

.in-use-three{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 14;
  grid-row-end: span 1;
  padding: 50px 50px;

}

.comp3{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 16; 
  grid-row-end: span 1;
  padding: 0px 50px;

}

.in-use-four{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 19;
  grid-row-end: span 1;
  padding: 50px 50px;

}

/*========References======*/
.hl6{
  left: 40%;
  top: 8400px;
  height: 500px;

}

.vl4{
  left: 17%;
  margin-left: -58px;
  height: 500px;
  top: 8575px;

}

.reference-one{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 2;
  padding: 30px 25px 0px;

}

.reference-two{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 2;
  padding: 20px 25px 0px ;

}

.reference-three{
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 2;
  padding: 0px 25px 0px;

}
}