/*===========================================================
CSS for Typeface Showcase website
Website: N/A
Author: Dominic Zelli
Date: 2020
License: GNU Public License

----------------------Table of contents----------------------
1.0 General Styles
2.0 Font Styles
3.0 Main Navigation
4.0 Content Styles
5.0 Grid
6.0 Responsive Layouts
===========================================================*/


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

img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  display: block;
}

body {
  margin:0;
  padding:0;
}
.video {
  margin: 0;
  padding: 0;
}







/*====CONTAINERS====*/

.intro-container {
  background-color: white;
  padding:50px 0 50px 0;
}

.glyphs-container {
  background-color: black;
  padding:0px 0 50px 0;
  margin: 0px;
  width: 100%;
}

.usecases-container {
  background-color: white;
  padding:125px 0 50px 0;
}

.FAQ-container {
  background-color: black;
  padding: 25px 25px 25px 25px;
}

.features-container {
  background-color: white;
  padding:125px 0 50px 0;
}

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

h1 /*Title*/ {
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 200px; /*230px looked good, for once you figure everything else out*/
	line-height: 0;
}

h2 /*Title 2*/ {
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 85px;
	line-height: 1.25;
}

h3 /*Subhead*/ {
	font-family: neue-haas-grotesk-display,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 60px;
	line-height: 2;
}

h4 /*Glyphs*/ {
	font-family: neue-haas-grotesk-display,sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 39px;
	line-height: 5;
	letter-spacing: 50px;
  /*display: inline-block;*/
  word-wrap: break-word;
}

h5 /*Body Text*/ {
	font-family: neue-haas-grotesk-text,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 15px;
	line-height: 1.6;
}

h6 /*FAQ Text*/ {
	font-family: neue-haas-grotesk-display,sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 30px;
	line-height: 0;
}

p {
	word-wrap: break-word;
}


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

#main-nav {
  /* makes #main-nav stay fixed*/
  position:relative;
  /* makes #main-nav appear in front */
  z-index: 9999;
  /* makes #main-nav start at top of window*/
  background-color: transparent;
  width: 100%;
  height: 100%;
  bottom: 33px;
  right: 40px;
  padding: 0;
  text-align: left;
}

/* change design of the <li> within #main-nav */
#main-nav li {
  /*margin-top:31px;*/
  /* center align <a> to <li> */
  text-align: left; 
  /* remove bullet point from <li> */
  list-style-type: none; 
  
}

/* change design of the <a> within #main-nav */
#main-nav a {
  /* aligns the <a> to center of the parent element */
  margin:0 auto;
  /* display the <a> with specific height and width */
  display: block;
  width:100%;
  height:35px;
  /* vertically aligns text in button. line-height must be same as the button height */
  line-height:35px;
  
  
  background-color: transparent;
  /* remove underline */
  text-decoration: none; 
  color: black;
  /* change font family */
  font-family: Helvetica, arial, sans-serif;
  font-weight: 400;
  font-size: 25px; 
}
/* change style of <a> hover */
#main-nav a:hover {
  background-color: black;
  color: white;
}
/* change style of <a> click */
#main-nav a:active {
  background-color: black;
  color: white;
}

/* change style of div. not needed for the menu.*/
.container {
  width:100%;
  height: 100vh;
}

.container:nth-child(even) {
  background-color: grey;
}



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

.big-letters {
   display: flex;
}

/*================
5.0 Grid
================*/

.grid-container {
  margin: 0 auto;
  padding: 0;
  max-width: 1300px;
  display: grid;
  grid-gap: 10px 10px;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(100px, auto/*150px*/);
}

.grid-item {
  /*border: 1px solid red;*/
  color: black;
  font-size:2em;
  grid-column: span 1;
  text-align: left;
  padding: 0;
  overflow: hidden;
}


/*=======COORDINATES=======*/

/*===INTRO SECTION===*/

.intro-container .nav {
  grid-column-start: 1;
  grid-column-end: span 5;
  grid-row-start: 1;
  grid-row-end: span 2;
  overflow: hidden;
  margin-top: 60px;
  /*border: 2px solid red;*/
}

.intro-container .title {
  grid-column-start: 6;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: span 2;
  overflow: hidden;
}

.intro-container .subhead {
  grid-column-start: 6;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: span 3;
  overflow: hidden;
  margin-top: 140px;
}

.intro-container .year {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 4;
  grid-row-end: span 2;
  overflow: hidden;
}

.intro-container .history {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 5;
  grid-row-end: span 3;
  overflow: hidden;
}

.intro-container .text-one {
  grid-column-start: 6;
  grid-column-end: span 3;
  grid-row-start: 5;
  grid-row-end: span 6;
  overflow: hidden;
  padding-top: 40px;
}

.intro-container .text-two {
  grid-column-start: 7;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 5;
  overflow: hidden;
  padding-top: 25px;
}

.intro-container .text-three {
  grid-column-start: 8;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 5;
  overflow: hidden;
  padding-top: 25px;
}

.intro-container .blank {
  grid-column-start: 0;
  grid-column-end: span 8;
  grid-row-start: 9;
  grid-row-end: span 3;
  overflow: hidden;
}

/*===GLYPHS SECTION===*/

.glyphs-container .grid-item {
  /*border: 1px solid red;*/
  color: white;
  font-size:2em;
  grid-column: span 1;
  text-align: left;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.glyphs-container .subhead {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 1;
  overflow: hidden;
}

.glyphs-container .glyphs-row-1 {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 3;
  grid-row-end: span 10;
  overflow: hidden;
}

.glyphs-container .glyphs-row-2 {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 5;
  grid-row-end: span 2;
  overflow: hidden;
}

.glyphs-container .glyphs-row-3 {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 6;
  grid-row-end: span 2;
  overflow: hidden;
}

.glyphs-container .glyphs-row-4 {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 7;
  grid-row-end: span 2;
  overflow: hidden;
  }

.glyphs-container .glyphs-row-5 {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 8;
  grid-row-end: span 2;
  overflow: hidden;
  }

.glyphs-container .glyphs-row-6 {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 9;
  grid-row-end: span 2;
  overflow: hidden;
  }

.glyphs-container .glyphs-row-7 {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 10;
  grid-row-end: span 2;
  overflow: hidden;
  }
/*
.glyphs-container .glyphs-row-5 {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 8;
  grid-row-end: span 3;
  overflow: hidden;
  padding-bottom: 200px;
  } 
*/
.glyphs-container .blank {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 8;
  grid-row-end: span 2;
  overflow: hidden;
}



/*===USE CASES SECTION===*/

.usecases-container .subhead {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;
}

.usecases-container .caption {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: hidden;
  text-align: center;
}

.usecases-container .pic-one {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 3;
  grid-row-end: span 3;
  overflow: hidden;
}

.usecases-container .pic-two {
  grid-column-start: 6;
  grid-column-end: span 3;
  grid-row-start: 5;
  grid-row-end: span 6;
  overflow: hidden;
  padding-bottom: 130px;
  vertical-align: bottom;
}

.usecases-container .pic-three {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 7;
  grid-row-end: span 3;
  overflow: hidden;
  vertical-align: bottom;
}

/*===FAQ SECTION===*/

.FAQ-container .text-one {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: span 1;
  overflow: hidden;
}

.FAQ-container .rectangle-one {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: span 1;
  overflow: hidden;
  width: 418px;
  height: 90px;
  border: 0px;
  background-color: white;
  padding-top: 70px;
}

.FAQ-container .text-two {
  grid-column-start: 6;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: span 1;
  overflow: hidden;
  color: white;
}

.FAQ-container .rectangle-two {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 4;
  grid-row-end: span 2;
  overflow: hidden;
  width: 418px;
  height: 90px;
  border: 0px;
  background-color: white;
  padding-top: 70px;
}

.FAQ-container .text-three {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 4;
  grid-row-end: span 1;
  overflow: hidden;
}

.FAQ-container .text-four {
  grid-column-start: 6;
  grid-column-end: span 4;
  grid-row-start: 4;
  grid-row-end: span 1;
  overflow: hidden;
  color: white;
}

.FAQ-container .subtle {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 5;
  grid-row-end: span 5;
  overflow: hidden;
  align: left;
  margin-top: 70px;
}

.FAQ-container .blank {
  grid-column-start: 1;
  grid-column-end: span 12;
  grid-row-start: 10;
  grid-row-end: span 1;
  overflow: hidden;
}

/*===FEATURES SECTION===*/

.features-container .circle-one {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;
}

.features-container .reveal-box-one {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;
}

.features-container .circle-two {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  overflow: hidden;
}

.features-container .circle-three {
  grid-column-start: 5;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 1;
  overflow: hidden;
}

.features-container .circle-four {
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;
}

.features-container .subhead {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;
}

.features-container .text {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: span 3;
  overflow: hidden;
}

.features-container .anatomy-vid {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 3;
  grid-row-end: span 5;
  overflow: hidden;
  margin-top: 100px;
}

.features-container .blank {
  grid-column-start: 6;
  grid-column-end: span 3;
  grid-row-start: 8;
  grid-row-end: span 3;
  overflow: hidden;
}




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

@media only screen and (max-width: 1375px) {
.intro-container > .grid-container,
.glyphs-container > .grid-container,
.usecases-container > .grid-container,
.faq-container > .grid-container,
.features-container > .grid-container

{
  margin: 0 auto;
  margin-right: 100px;
  padding: 0;
  margin-left: 100px;
  max-width: 1300px;
  display: grid;
  grid-gap: 10px 10px;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(100px, auto);

    }

h1 {
	font-size: 113px;
	line-height: 0;
}

h2 {
	font-size: 47px;
	line-height: 1;
}


.intro-container .nav {
  grid-column-start: 1;
  grid-column-end: span 6;
  grid-row-start: 1;
  grid-row-end: span 3;
  overflow: hidden;
  margin-top: 30px;
}

.intro-container .text-one {
  grid-column-start: 4;
  grid-column-end: span 4;
  grid-row-start: 6;
  grid-row-end: span 8;
  overflow: hidden;
  padding-top: 40px;
}

.intro-container .subhead {
  grid-column-start: 6;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: span 3;
  overflow: hidden;
  margin-top: 85px;
}

.intro-container .history {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 4;
  grid-row-end: span 3;
  overflow: hidden;
  margin-top: 85px;
}

.glyphs-container .blank {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 10;
  grid-row-end: span 2;
  overflow: hidden;
}

.features-container .text {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 2;
  grid-row-end: span 3;
  overflow: hidden;
}

}


@media only screen and (max-width:768px) {
.intro-container > .grid-container,
.glyphs-container > .grid-container,
.usecases-container > .grid-container,
.faq-container > .grid-container,
.features-container > .grid-container
  {  
  margin: 0 auto;
  padding-right: 25px;
  padding-left: 25px;
  max-width: 768px;
  grid-gap: 10px 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(250px auto);

    }

.grid-item{
  /*border: 5px solid red;*/

}

    h1 {
      font-size: 77px;
    }

    h2 {
      font-size: 34px;
    }

    h3 {
      font-size: 50px;
    }

    h4 {
	font-size: 30px;
	line-height: 5;
	letter-spacing: 50px;
     }

    h5 {
	font-size: 15px;
	line-height: 1.6;

      
    h6 {
	/*font-family: neue-haas-grotesk-display,sans-serif;
	font-weight: 600;
	font-style: normal;*/
	font-size: 20px;
	line-height: 0;
       }

}
  
#main-nav {
  /* makes #main-nav stay fixed*/
  position:relative;
  /* makes #main-nav appear in front */
  z-index: 9999;
  /* makes #main-nav start at top of window*/
  background-color: transparent;
  width: 100%;
  height: 100%;
  bottom: 33px;
  right: 40px;
  padding: 0;
  text-align: left;
}

#main-nav a {
  font-size: 15px;
}


.intro-container .nav {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 3;
  overflow: hidden;
  margin-bottom: 0px;
  /*border: 2px solid red;*/
}

.intro-container .title {
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 2;
  overflow: hidden;
}

.intro-container .subhead {
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 2;
  overflow: hidden;
  margin-top: 60px;
}

.intro-container .year {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 4;
  grid-row-end: span 2;
  overflow: hidden;
}

.intro-container .history {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 4;
  grid-row-end: span 3;
  overflow: hidden;
  margin-top: 60px;
}

.intro-container .text-one {
  grid-column-start: 2;
  grid-column-end: span 3;
  grid-row-start: 6;
  grid-row-end: span 8;
  overflow: hidden;
  padding-top: 40px;
}

.glyphs-container .subhead {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: span 1;
  overflow: hidden;
}

.glyphs-container .glyphs-row-1 {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 3;
  grid-row-end: span 2;
  overflow: hidden;
}

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

.glyphs-container .glyphs-row-3 {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 5;
  grid-row-end: span 2;
  overflow: hidden;
}

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

.glyphs-container .glyphs-row-5 {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 7;
  grid-row-end: span 2;
  overflow: hidden;
  }

.glyphs-container .glyphs-row-6 {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 8;
  grid-row-end: span 2;
  overflow: hidden;
  }

.glyphs-container .glyphs-row-7 {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 9;
  grid-row-end: span 2;
  overflow: hidden;
  }

.glyphs-container .blank {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 9;
  grid-row-end: span 2;
  overflow: hidden;
}

.usecases-container .subhead {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;
}

.usecases-container .caption {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: span 0;
  overflow: hidden;
  text-align: center;
}

.usecases-container .pic-one {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: hidden;
  display: block;
}

.usecases-container .pic-two {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 4;
  grid-row-end: span 5;
  overflow: hidden;
  padding: 0;
  padding-bottom: 0;
  display: block;
}

.usecases-container .pic-three {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 9;
  grid-row-end: span 3;
  overflow: hidden;
  padding: 0;
  display: block;
}

.FAQ-container .text-one {
  grid-column-start: 2;
  grid-column-end: span 6;
  grid-row-start: 2;
  grid-row-end: span 1;
  overflow: hidden;
}

.FAQ-container .rectangle-one {
  grid-column-start: 2;
  grid-column-end: span 6;
  grid-row-start: 2;
  grid-row-end: span 1;
  overflow: hidden;
  width: 100%;
  height: 80px;
  border: 0px;
  background-color: white;
  padding-top: 70px;
}

.FAQ-container .text-two {
  grid-column-start: 2;
  grid-column-end: span 6;
  grid-row-start: 3;
  grid-row-end: span 1;
  overflow: hidden;
  color: white;
}

.FAQ-container .rectangle-two {
  grid-column-start: 2;
  grid-column-end: span 6;
  grid-row-start: 4;
  grid-row-end: span 1;
  overflow: hidden;
  width: 100%;
  height: 80px;
  border: 0px;
  background-color: white;
  padding-top: 70px;
}

.FAQ-container .text-three {
  grid-column-start: 2;
  grid-column-end: span 6;
  grid-row-start: 4;
  grid-row-end: span 1;
  overflow: hidden;
}

.FAQ-container .text-four {
  grid-column-start: 2;
  grid-column-end: span 6;
  grid-row-start: 5;
  grid-row-end: span 1;
  overflow: hidden;
  color: white;
}

.FAQ-container .subtle {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 6;
  grid-row-end: span 4;
  overflow: hidden;
  align: left;
}

.FAQ-container .blank {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 10;
  grid-row-end: span 1;
  overflow: hidden;
}

.features-container .text {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 2;
  grid-row-end: span 3;
  overflow: hidden;
}


}

@media only screen and (max-width:480px) {
.intro-container > .grid-container,
.glyphs-container > .grid-container,
.usecases-container > .grid-container,
.faq-container > .grid-container,
.features-container > .grid-container
    {
  margin: 0 auto;
  padding-right: 25px;
  padding-left: 25px;
  min-width: 0px;
  max-width: 768px;
  grid-gap: 10px 10px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(0px, auto);
    }

.usecases-container > .grid-container {
  grid-gap: 0;
  margin: 0;
}

.grid-item{
  /*border: 5px solid red;*/
}

    h1 {
      font-size: 138px;
      text-align: center;
    }

    h2 {
      font-size: 60px;
      text-align: center;
    }

    h3 {
      font-size: 50px;
    }
    h4 {
	font-size: 30px;
	line-height: 5;
	letter-spacing: 8px;
        text-align: center;
     }

    h5 {
	font-size: 15px;
	line-height: 1.6;
}






#main-nav {
  /* makes #main-nav stay fixed*/
  position:relative;
  /* makes #main-nav appear in front */
  z-index: 9999;
  /* makes #main-nav start at top of window*/
  background-color: transparent;
  width: 100%;
  height: 100%;
  bottom: 33px;
  right: 40px;
  padding: 0;
  text-align: left;
}

/* change design of the <li> within #main-nav */
#main-nav li {
  /*margin-top:31px;*/
  /* center align <a> to <li> */
  text-align: left; 
  /* remove bullet point from <li> */
  list-style-type: none; 
  
}

/* change design of the <a> within #main-nav */
#main-nav a {
  /* aligns the <a> to center of the parent element */
  margin:0 auto;
  /* display the <a> with specific height and width */
  display: block;
  width:100%;
  height:35px;
  /* vertically aligns text in button. line-height must be same as the button height */
  line-height:35px;
  
  
  background-color: transparent;
  /* remove underline */
  text-decoration: none; 
  color: black;
  /* change font family */
  font-family: Helvetica, arial, sans-serif;
  font-weight: 400;
  font-size: 25px; 
}
/* change style of <a> hover */
#main-nav a:hover {
  background-color: black;
  color: white;
}
/* change style of <a> click */
#main-nav a:active {
  background-color: black;
  color: white;
}

/* change style of div. not needed for the menu.*/
.container {
  width:100%;
  height: 100vh;
}

.container:nth-child(even) {
  background-color: grey;
}

#main-nav ul {
  /* width full width of parent element. */
  width:100%;
  margin:0 auto;
 
  /* add padding 
  padding: 20px;*/
  
  /* add columns. You need all three lines. */
  
  -webkit-columns: 4 33%; 
  -moz-columns: 4 33%; 
  columns: 4 33%;
  
  background-color: transparent; 
  vertical-align: center;
}

#main-nav a {
  font-size: 25px;
}

.intro-container .nav {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: span 1;
  overflow: hidden;
  /*border: 2px solid red;*/
}

.intro-container .title {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 2;
  overflow: hidden;
}

.intro-container .subhead {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 2;
  overflow: hidden;
  margin-top: 105px;
}

.intro-container .year {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: span 2;
  overflow: hidden;
}

.intro-container .history {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: span 3;
  overflow: hidden;
  margin-top: 110px;
}

.intro-container .text-one {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 6;
  grid-row-end: span 7;
  overflow: hidden;
  padding-top: 40px;
}

.intro-container .blank {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 13;
  grid-row-end: span 1;
  overflow: hidden;
}

.glyphs-container .subhead {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;
}

.glyphs-container .glyphs-row-1 {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: span 10;
  overflow: hidden;
}

.glyphs-container .blank {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: span 3;
  overflow: hidden;
}

.usecases-container .subhead {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;
}

.usecases-container .pic-one {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: auto;
  grid-row-end: auto;
  padding-top: 0;
  overflow: hidden;
  grid-gap: 10px 10px;
}

.usecases-container .pic-two {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: auto;
  grid-row-end: auto;
  overflow: hidden;
  padding-top: 0px;
  grid-gap: 10px 10px;
}

.usecases-container .pic-three {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 6;
  grid-row-end: auto;
  overflow: hidden;
  grid-gap: 10px 10px;
}

.usecases-container .caption {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 8;
  grid-row-end: span 1;
  overflow: hidden;
}


.FAQ-container .text-one {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 2;
  grid-row-end: span 1;
  overflow: hidden;
  text-align: center;
}

.FAQ-container .rectangle-one {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 2;
  grid-row-end: span 3;
  overflow: hidden;
  width: 100%;
  height: 80px;
  border: 0px;
  background-color: white;
  /*padding-top: 70px;*/
}

.FAQ-container .text-two {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 3;
  grid-row-end: span 1;
  overflow: hidden;
  text-align: center;
}

.FAQ-container .rectangle-two {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 4;
  grid-row-end: span 2;
  overflow: hidden;
  width: 100%;
  height: 80px;
  border: 0px;
  background-color: white;
  padding-top: 70px;
}

.FAQ-container .text-three {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 4;
  grid-row-end: span 1;
  overflow: hidden;
  text-align: center;
}

.FAQ-container .text-four {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 5;
  grid-row-end: span 1;
  overflow: hidden;
  color: white;
  text-align: center;
}

.FAQ-container .subtle {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 5;
  grid-row-end: span 3;
  overflow: hidden;
  align: left;
  margin-top: 183px;
}

.FAQ-container .blank {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 8;
  grid-row-end: span 1;
  overflow: hidden;
}

.features-container .subhead {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hidden;
}

.features-container .text {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 4;
  overflow: hidden;
}

.features-container .anatomy-vid {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 5;
  grid-row-end: span 5;
  overflow: hidden;
  margin-top: 100px;
}

.features-container .blank {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 10;
  grid-row-end: span 6;
  overflow: hidden;
}


}

.nav {

/* width: 100%; */
background-color: transparent;
  
}

/*===Coordinates for Intro Grid Elements @media 786px===*/


/*=====END OF @MEDIA QUERY (786PX)====*/









/*=====END OF @MEDIA QUERY (480PX)====*/

/*=====END OF RESPONSIVE LAYOUTS====*/