/*========================================================================================
==========================================================================================
CSS for Neue Haas Grotesk Showcase site
Website: N/A
Author: Jake Gesick
Date: 2020
License: GNU Public License
-------------------------------
Table of Contents
-------------------------------
1. General Styles
2. Font Styles
3. Main Navigation
4. Content styles
5. Grid
==========================================================================================
========================================================================================*/

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

*{
	Margin: 0;
	Padding: 0;
	Box-sizing: Border-box;
}

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

Li, a {
	text-decoration: none;
	list-decoration: none;
}

/*========================================================================================
		Font Styles
========================================================================================*/

H1, h2, h3, h4, h5, h6, ul, li, p {
	font-family: neue-haas-grotesk-display, neue-haas-grotesk-text, sans-serif;
	font-style: normal
}

h1{
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 700;
	font-style: normal;
	Font-size: 260px;
	width: 3000px;
	margin-left: -1370px;
	margin-top: 1320px;
}

H2{
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 200;
	font-style: normal;
	Font-size: 214px;
	margin-top: -10px;
}

H3{
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 100;
	font-style: normal;
	Font-size: 260px;
	margin-top: -50px;
}

H4{
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 600;
	font-style: normal;
	Font-size: 220px;
}

H5{
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 200;
	font-style: normal;
	Font-size: 60px;
	margin-top: 50px;
}

Li{
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 100;
	font-style: normal;
	Font-size: 40px;
}

P{
	font-family: neue-haas-grotesk-text, sans-serif;
	font-weight: 400;
	font-style: normal;
	Font-size: 23px;
}

/*========================================================================================
		Main Nav
========================================================================================*/

#main-nav ul {
  width: 100%;
  -webkit-columns: 4 50px; 
  -moz-columns: 4 50px; 
  columns: 4 50px; 
}

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

#main-nav a {
  Margin:0 auto;
  display: block;
  width:20px;
  height:50px;
  line-height:50px;
  Background-color:none;
  text-decoration: none; 
  Color:black;
}

#main-nav a:hover {
  background-color: none;
  color: #FFD700;
}

#main-nav a:active {
  color: black;
}



/*========================================================================================
		Content Styles
========================================================================================*/

#name {
  Transform:rotate(90deg);  
}

#typeface {
  Transform:rotate(90deg);  
}

#show {
  Transform:rotate(90deg);  
}

#glyphs {
  Transform:rotate(90deg);  
}

#anatomy {
  Transform:rotate(90deg);  
}

#history {
  Transform:rotate(90deg);  
}

#in-use {
  Transform:rotate(90deg);  
}

#designer {
  Transform:rotate(90deg);  
}

#face {
  Transform:rotate(90deg);  
}

.button {
  Transform:rotate(90deg); 
}

.yellow {
  background-color:#FFD700;
}

.glyphs {
  Text-align: center;
}

#media-size-warning {
	position:fixed;
	z-index:999999;
	background-color:white;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	left:0;
	top:0;
	display:none;
}

#media-text-warning {
	display: block;
	width:300px;
	margin:0 auto;
	height:200px;
	margin-top:100px;
	color:black;
	font-size:23px;
	font-weight:bold;
}

  
/*========================================================================================
		Grid
========================================================================================*/
.video-one {
  grid-column-start: 1;
  grid-column-end: span 12;
  grid-row-start: 1;
  grid-row-end: span 25;
  overflow: hidden;
}
.video-three {
height: 4075px;
Width: 1918px;
Overflow: hidden;
Margin:-3px;
Margin-left: -50px;
}

.grid-container {
  display: grid;
  grid-gap:10px 10px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

.grid-fix {
  display: grid;
  grid-gap:10px 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

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

.main-nav .one {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 10;
  overflow: hidden;
}

.main-nav .two {
  grid-column-start: 1;
  grid-column-end: span 12;
  grid-row-start: 1;
  grid-row-end: span 27;
  overflow: hidden;
}

.main-nav .three {
  grid-column-start: 7;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 20;
  overflow: visible;
}

.main-nav .four {
  grid-column-start: 4;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 20;
  overflow: visible;
}

.nav .one {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 3;
  overflow: visible;
}

.nav .two {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 3;
  overflow: visible;
}

.nav .three {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 3;
  overflow: visible;
}

.nav .four {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 7;
  grid-row-end: span 3;
  overflow: visible;
}

.g-glyphs .one {
  grid-column-start: 11;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 3;
  overflow: visible;
}

.g-glyphs .two {
  grid-column-start: 11;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 3;
  overflow: visible;
}

.g-glyphs .four {
  grid-column-start: 4;
  grid-column-end: span 6;
  grid-row-start: 4;
  grid-row-end: span 2;
  overflow: hidden;
}

.g-glyphs .three {
  grid-column-start: 4;
  grid-column-end: span 6;
  grid-row-start: 7;
  grid-row-end: span 4;
  overflow: hidden;
  text-align: center;
}

.g-anatomy .one {
  grid-column-start: 11;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 9;
  overflow: visible;
  text-align: center;
}
.g-anatomy .four {
  grid-column-start: 11;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 8;
  overflow: visible;
}

.g-anatomy .two {
  grid-column-start: 1;
  grid-column-end: span 10;
  grid-row-start: 3;
  grid-row-end: span 9;
  overflow: hidden;
}

.g-anatomy .three {
  grid-column-start: 1;
  grid-column-end: span 12;
  grid-row-start: 10;
  grid-row-end: span 15;
  overflow: hidden;
}

.g-history .one {
  grid-column-start: 11;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: span 7;
  overflow: visible;
}

.g-history .two {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 6;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .three {
  grid-column-start: 4;
  grid-column-end: span 6;
  grid-row-start: 6;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .four {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 10;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .five {
  grid-column-start: 3;
  grid-column-end: span 4;
  grid-row-start: 10;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .six {
  grid-column-start: 7;
  grid-column-end: span 4;
  grid-row-start: 14;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .seven {
  grid-column-start: 3;
  grid-column-end: span 4;
  grid-row-start: 18;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .eight {
  grid-column-start: 7;
  grid-column-end: span 4;
  grid-row-start: 22;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .nine {
  grid-column-start: 11;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 7;
  overflow: visible;
}

.g-use .one {
  grid-column-start: 11;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 5;
  overflow: visible;
  text-align: center;
}

.g-use .two {
  grid-column-start: 4;
  grid-column-end: span 6;
  grid-row-start: 5;
  grid-row-end: span 2;
  overflow: hidden;
}

.g-use .three {
  grid-column-start: 3;
  grid-column-end: span 8;
  grid-row-start: 7;
  grid-row-end: span 7;
  overflow: hidden;
}

.g-use .four {
  grid-column-start: 3;
  grid-column-end: span 8;
  grid-row-start: 14;
  grid-row-end: span 7;
  overflow: hidden;
}

.g-use .five {
  grid-column-start: 3;
  grid-column-end: span 8;
  grid-row-start: 22;
  grid-row-end: span 7;
  overflow: hidden;
}

.g-use .six {
  grid-column-start: 11;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 5;
  overflow: visible;
}

/*========================================================================================
		Responsive layout
========================================================================================*/

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

    h4 {
      font-size: 100px;
    }

    h5 {
      font-size: 39px;
    }

    p {
      font-size: 15px;
    }
    #media-size-warning {
	    display: block;
    }
}

@media only screen and (max-width: 768px) {
.grid-container {
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: minmax(100px, auto);
    }

.video-one {
  grid-column-start: 1;
  grid-column-end: span 6;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;

}

.video-three {
  height: auto;
  Width: 768px;
  Overflow: hidden;
  Margin:-3px;
  Margin-left: -25px;
}

.main-nav .two {
  grid-column-start: 1;
  grid-column-end: span 6;
  grid-row-start: 1;
  grid-row-end: span 10;
  overflow: hidden;
}

.g-glyphs .one {
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 3;
  overflow: Hidden;
}

.g-glyphs .two {
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 3;
  overflow: hidden;
  Width: 30px;
  Height: 400px;
}

.g-glyphs .four {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 4;
  grid-row-end: span 2;
  overflow: hidden;
}

.g-glyphs .three {
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 7;
  grid-row-end: span 4;
  overflow: hidden;
  text-align: center;
}

.g-anatomy .one {
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 8;
  overflow: Hidden;
  text-align: center;
}

.g-anatomy .four {
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 5;
  overflow: hidden;
  Width: 30px;
}

.g-anatomy .two {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 3;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-anatomy .three {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 6;
  grid-row-end: span 1;
  overflow: hidden;
}

.g-history .one {
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 6;
  overflow: Hidden;
}

.g-history .nine {
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 4;
  overflow: visible;
  Width: 30px;
}

.g-history .two {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .three {
  grid-column-start: 3;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .four {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .five {
  grid-column-start: 3;
  grid-column-end: span 3;
  grid-row-start: 5;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .six {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 7;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .seven {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 10;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .eight {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 12;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-use .one {
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 4;
  overflow: Hidden;
  text-align: center;
}

.g-use .six {
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 3;
  overflow: hidden;
  Width: 30px;
}

.g-use .two {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: hidden;
}

.g-use .three {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 4;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-use .four {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 7;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-use .five {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 10;
  grid-row-end: span 3;
  overflow: hidden;
}

.nav .one {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 3;
  overflow: visible;
}

.nav .two {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 3;
  overflow: visible;
}

.nav .three {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 3;
  overflow: visible;
}

.nav .four {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 7;
  grid-row-end: span 3;
  overflow: visible;
}

}

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

    h4 {
      font-size: 75px;
    }

    h5 {
      font-size: 21px;
    }

    p {
      font-size: 16px;
    }
    Li {
      font-size: 21px;
    }
}

@media only screen and (max-width: 360px) {
.grid-container {
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: minmax(100px, auto);
    }

.video-one {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;

}

.video-three {
  height: 790px;
  Width: 100%;
  Overflow: hidden;
  Margin: -1px;
}

.main-nav .two {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;
}

.main-nav .one {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;
}

.g-glyphs .one {
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 3;
  overflow: Hidden;
}

.g-glyphs .two {
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 3;
  overflow: hidden;
  Width: 30px;
  Height: 250px;
}

.g-glyphs .four {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: span 2;
  overflow: hidden;
}

.g-glyphs .three {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 5;
  grid-row-end: span 3;
  overflow: hidden;
  text-align: center;
}

.g-anatomy .one {
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 8;
  overflow: Hidden;
  text-align: center;
}

.g-anatomy .four {
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 3;
  overflow: hidden;
  Width: 30px;
}

.g-anatomy .two {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 4;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-anatomy .three {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 6;
  grid-row-end: span 1;
  overflow: hidden;
}

.g-history .one {
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 6;
  overflow: Hidden;
}

.g-history .nine {
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 3;
  overflow: visible;
  Width: 30px;
  Height: 250px;
}

.g-history .two {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: visible;
  Margin-left: -70px;
}

.g-history .three {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .four {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 7;
  grid-row-end: span 3;
  overflow: visible;
Margin-left: -70px;
}

.g-history .five {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 8;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .six {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 12;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .seven {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 16;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-history .eight {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 20;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-use .one {
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 4;
  overflow: Hidden;
  text-align: center;
}

.g-use .six {
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 3;
  overflow: hidden;
  Width: 30px;
  Height: 200px;
}

.g-use .two {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: hidden;
}

.g-use .three {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 5;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-use .four {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 7;
  grid-row-end: span 3;
  overflow: hidden;
}

.g-use .five {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 9;
  grid-row-end: span 3;
  overflow: hidden;
}

.nav .one {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 3;
  overflow: visible;
}

.nav .two {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: visible;
}

.nav .three {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 2;
  overflow: visible;
}

.nav .four {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 2;
  overflow: visible;
}

}