/*==============================================================================================================================================================================================
CSS for Showcase font website
Website: NA
Author: Ashlyn Sterling
Date: October 2020
Licence: GNU Public Licence

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

1 General Styles
2 Font Syles
3 Main Navigation
4 Content
5 Grid

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

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

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

body {

	background-color: #5b9ca2;  
}

/*============================================================================================================================================================================================
2 Font Style
============================================================================================================================================================================================*/

.intro-video {

	margin:0; padding:0;
	margin: 5px;
}



.intro {
 
	text-align: Center;
	font-family: gill-sans-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 150px;
	line-height: 80%; 
	color: #f5f1d8;
	letter-spacing: -5px;
	margin: 5px;

}

h2 {
	font-family: gill-sans-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 80%; 
	letter-spacing: 0px;
	color: #5b9ca2;
	font-size: 50px;
}

.overview-section {
  	grid-column-start: 10;
	grid-column-end: span 5;
	grid-row-start: 2;
	grid-row-end: span 4;
	margin: 5px;
}

h3 {
	grid-column-start: 10;
	grid-column-end: span 2;
	grid-row-start: 8;
	grid-row-end: span 2;

	font-family: gill-sans-nova, sans-serif;
	font-weight: 400;
	color: #d5544f;
	font-size: 35px;	
}

h4 {

	text-align: center;
	font-family: gill-sans-nova, sans-serif;
	font-weight: 400;
	color: #f5f1d8;
	font-size: 30px;

}

.header-cream {
	color: #f5f1d8;
}

/*============================================================================================================================================================================================
3 Navigation
============================================================================================================================================================================================*/

nav {
 	list-style-type: none;
	font-size: 15px;
	position: fixed;
	top-margin: 0;
	width: 100%;
	text-align: Center;
	background-color: #f5f1d8;
	
} 


li {
	text-decoration: none;
	list-style-type: none;
	display: inline-block;
	margin: 5px 0 5px 0;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: gill-sans-nova, sans-serif;
	font-weight: 400;
	font-size: 35px;
}

a {
	color:#5b9ca2;
	text-decoration:none;
}

a:hover {
	color: #d5544f;
}

/*============================================================================================================================================================================================
4 Content
============================================================================================================================================================================================*/


p {
	text-align: left;
	font-family: gill-sans-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 24px; 
	letter-spacing: -.01em;
	color: #5b9ca2;
	line-height: 22pt;
}

.intro-section {
  	grid-column-start: 1;
	grid-column-end: span 12;
	grid-row-start: 3;
	grid-row-end: span 5;
}


.background-header {
	grid-column-start: 1;
	grid-column-end: span 6;
	grid-row-start: 1;
	grid-row-end: span 2;
	padding-top: 150px;
	margin: 5px;
}


.background-container {
  background-color: #f5f1d8;
  
}

.background-section {
	grid-column-start: 4;
	grid-column-end: span 6;
	grid-row-start: 1;
	grid-row-end: span 1;
}

.background-text {

  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 3;
  grid-row-end: span 6;
	margin: 5px;

}


.overview-section {
	grid-column-start: 10;
	grid-column-end: span 3;
	grid-row-start: 3;
	grid-row-end: span 3;
}






.glyphs-header {
	grid-column-start: 1;
	grid-column-end: span 6;
	grid-row-start: 1;
	grid-row-end: span 2;
	padding-top: 150px;
}

.glyphs-container {

	background-color: #5b9ca2;
}

.glyphs-section {
	grid-column-start: 4;
	grid-column-end: span 6;
	grid-row-start: 1;
	grid-row-end: span 1;
}

.glyph-text {

  	grid-column-start: 3;
  	grid-column-end: span 6;
  	grid-row-start: 3;
 	grid-row-end: span 4;

}






.exclamation-point {
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 50px;

}

.at-sign {
	grid-column-start: 2;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.pound {
	grid-column-start: 3;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.dollar-sign {
	grid-column-start: 4;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.percent {
	grid-column-start: 5;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.carrot {
	grid-column-start: 6;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.ampersand {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.star {
	grid-column-start: 8;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.parentheses-left {
	grid-column-start: 9;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.parentheses-right {
	grid-column-start: 10;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.underscore {
	grid-column-start: 11;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.plus {
	grid-column-start: 12;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 50px;
}




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

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

.three {
	grid-column-start: 3;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.four {
	grid-column-start: 4;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.five {
	grid-column-start: 5;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.six {
	grid-column-start: 6;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.seven {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.eight {
	grid-column-start: 8;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.nine {
	grid-column-start: 9;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.zero {
	grid-column-start: 10;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 50px;
}

.hyphen {

	grid-column-start: 11;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 50px;

}

.equal-sign {

	grid-column-start: 12;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 50px;

}











.Q {
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.W {
	grid-column-start: 2;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.E {
	grid-column-start: 3;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.R {
	grid-column-start: 4;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.T {
	grid-column-start: 5;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.Y {
	grid-column-start: 6;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.U {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.I {
	grid-column-start: 8;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.O {
	grid-column-start: 9;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.P {
	grid-column-start: 10;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.curly-brack {

	grid-column-start: 11;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;

}

.brack {

	grid-column-start: 12;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;

}







.A {
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.S {
	grid-column-start: 2;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.D {
	grid-column-start: 3;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.F {
	grid-column-start: 4;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.G {
	grid-column-start: 5;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.H {
	grid-column-start: 6;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.J {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.K {
	grid-column-start: 8;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.L {
	grid-column-start: 9;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}







.Z {
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 7;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.X {
	grid-column-start: 2;
	grid-column-end: span 1;
	grid-row-start: 7;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.C {
	grid-column-start: 3;
	grid-column-end: span 1;
	grid-row-start: 7;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.V {
	grid-column-start: 4;
	grid-column-end: span 1;
	grid-row-start: 7;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.B {
	grid-column-start: 5;
	grid-column-end: span 1;
	grid-row-start: 7;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.N {
	grid-column-start: 6;
	grid-column-end: span 1;
	grid-row-start: 7;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}

.M {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 7;
  	grid-row-end: span 1;
	padding-top: 50px;
	letter-spacing: 5px;
}








.anatomy-container {

	background-color: #f5f1d8;
}

.anatomy-section {
	grid-column-start: 4;
	grid-column-end: span 6;
	grid-row-start: 1;
	grid-row-end: span 1;

}

.anatomy-header {

	grid-column-start: 1;
	grid-column-end: span 6;
	grid-row-start: 1;
	grid-row-end: span 2;
	padding-top: 150px;
	margin: 10px;

}


.anatomy-container {

	background-color: #f5f1d8;
}

.anatomy-section {
	grid-column-start: 4;
	grid-column-end: span 6;
	grid-row-start: 1;
	grid-row-end: span 1;
}



.all-caps {

	grid-column-start: 1;
	grid-column-end: span 12;
	grid-row-start: 2;
	grid-row-end: span 4;
}







.detail {

	grid-column-start: 1;
	grid-column-end: span 12;
	grid-row-start: 2;
	grid-row-end: span 6;
}

.lower-case {

	grid-column-start: 1;
	grid-column-end: span 12;
	grid-row-start: 2;
	grid-row-end: span 4;
	padding-top: 55px;
}












.example-container {

	background-color: #f5f1d8;

}


.uses-header {
	grid-column-start: 1;
	grid-column-end: span 6;
	grid-row-start: 1;
	grid-row-end: span 2;
	padding-top: 150px;
	margin: 10px;
}


.anatomy-line-container {

	background-color: #f5f1d8;

}


.anatomy-detail-container {
	margin:50; padding:50;
	background-color: #5b9ca2;

}



.video-color {


	background-color: #f5f1d8;
}

.anatomy-video-container {

	background-color: #f5f1d8;
		/*===== border:1px solid red; ====*/
	margin-left:0px; padding:0px;


	


}




.anatomy-video {

	margin:0px; padding:0px;
	background-color: #f5f1d8;

	grid-column-start: 1;
	grid-column-end: span 12;
	grid-row-start: 3;
	grid-row-end: span 5;

}








.uses-container {

	background-color: #f5f1d8;

}





.uses-text {

  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 3;
  grid-row-end: span 2;
	margin: 10px;

}


.uses-logo{

	grid-column-start: 1;
	grid-column-end: span 6;
	grid-row-start: 1;
	grid-row-end: span 5;
	margin: 5px;

}


.uses-book {

	grid-column-start: 7;
	grid-column-end: span 6;
	grid-row-start: 1;
	grid-row-end: span 5;
	margin: 5px;


}

.uses-sign {

	grid-column-start: 1;
	grid-column-end: span 12;
	grid-row-start: 6;
	grid-row-end: span 4;
	margin: 5px;


}














/*============================================================================================================================================================================================
5 Grid
============================================================================================================================================================================================*/


.grid-container {
  max-width:1500px;
  margin: 0 auto;
	/*===== border: 1px solid red; ====*/
  padding:0;
  display:grid;
  grid-gap:15px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 150px;
}

.grid-item {
	/*===== border: 1px solid grey;  ====*/
  grid-coloumn: span 1;
  overflow:hidden;
}





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


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

.grid-container


    {
      grid-template-columns: repeat(10, 1fr);
      grid-auto-rows: minmax(75px, auto);
	padding: 20px 20px 20px 20px;
    }


   /* =======================
     Coordinates for 
     Type Grid Elements @media 768px
    ======================= */
li {	font-weight: 400;
	font-size: 19px;
	margin: 5px 0 5px 0;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;

}

h2 {

	font-weight: 400;
	font-size: 30px;
}

h3 {

	font-weight: 400;
	font-size: 20px;
}

p {

	font-weight: 400;
	font-size: 18px;
	line-height: 19pt;
}

h4 {

	font-weight: 400;
	font-size: 10px;

}


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





.intro-section {
  	grid-column-start: 1;
	grid-column-end: span 12;
	grid-row-start: 3;
	grid-row-end: span 4;
}


   /* =======================
     Coordinates for 
     Background Grid Elements @media 768px
    ======================= */


    .background-container .background-header {
      grid-column-start: 1;
      grid-column-end: span 5;
      grid-row-start: 1;
      grid-row-end: 2;
	padding-top: 15px;
	padding-bottom: 10px;
      overflow: hidden;

    }


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


    .background-container .overview-section {
      grid-column-start: 8;
      grid-column-end: span 3;
      grid-row-start: 2;
      grid-row-end: 3;
      overflow: hidden;
    }


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


    .glyphs-container .glyphs-header {
      grid-column-start: 1;
      grid-column-end: span 5;
      grid-row-start: 1;
      grid-row-end: 2;
	padding-top: 15px;
	padding-bottom: 10px;
      overflow: hidden;
    }


    .glyphs-container .exclamation-point {
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 2;
  	grid-row-end: span 1;
	padding-top: 30px;

    }


    .at-sign {
	grid-column-start: 2;
	grid-column-end: span 1;
	grid-row-start: 2;
  	grid-row-end: span 1;
	padding-top: 30px;

    }



    .pound {
	grid-column-start: 3;
	grid-column-end: span 1;
	grid-row-start: 2;
  	grid-row-end: span 1;
	padding-top: 30px;

     }




    .dollar-sign {
	grid-column-start: 4;
	grid-column-end: span 1;
	grid-row-start: 2;
  	grid-row-end: span 1;
	padding-top: 30px;

    }

    .percent {
	grid-column-start: 5;
	grid-column-end: span 1;
	grid-row-start: 2;
  	grid-row-end: span 1;
	padding-top: 30px;

    }

    .carrot {
	grid-column-start: 6;
	grid-column-end: span 1;
	grid-row-start: 2;
  	grid-row-end: span 1;
	padding-top: 30px;

    }


.ampersand {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 2;
  	grid-row-end: span 1;
	padding-top: 30px;

   }

.star {
	grid-column-start: 8;
	grid-column-end: span 1;
	grid-row-start: 2;
  	grid-row-end: span 1;
	padding-top: 30px;

   }

   .parentheses-left {
	grid-column-start: 9;
	grid-column-end: span 1;
	grid-row-start: 2;
  	grid-row-end: span 1;
	padding-top: 30px;

   }

   .parentheses-right {
	grid-column-start: 10;
	grid-column-end: span 1;
	grid-row-start: 2;
  	grid-row-end: span 1;
	padding-top: 30px;

   }

.underscore {
	grid-column-start: 11;
	grid-column-end: span 1;
	grid-row-start: 2;
  	grid-row-end: span 1;
	padding-top: 30px;

}

.plus {
	grid-column-start: 12;
	grid-column-end: span 1;
	grid-row-start: 2;
  	grid-row-end: span 1;
	padding-top: 30px;

}


.hyphen {

	grid-column-start: 11;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 30px;

}

.equal-sign {

	grid-column-start: 12;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 30px;

}





.one {
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 30px;
}

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

.three {
	grid-column-start: 3;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 30px;
}

.four {
	grid-column-start: 4;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 30px;
}

.five {
	grid-column-start: 5;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 30px;
}

.six {
	grid-column-start: 6;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 30px;
}

.seven {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 30px;
}

.eight {
	grid-column-start: 8;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 30px;
}

.nine {
	grid-column-start: 9;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 30px;
}

.zero {
	grid-column-start: 10;
	grid-column-end: span 1;
	grid-row-start: 3;
  	grid-row-end: span 1;
	padding-top: 30px;
}




.Q {
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;

}

.W {
	grid-column-start: 2;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}	

.E {
	grid-column-start: 3;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.R {
	grid-column-start: 4;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.T {
	grid-column-start: 5;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.Y {
	grid-column-start: 6;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.U {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.I {
	grid-column-start: 8;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.O {
	grid-column-start: 9;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.P {
	grid-column-start: 10;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.curly-brack {

	grid-column-start: 11;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;

}

.brack {

	grid-column-start: 12;
	grid-column-end: span 1;
	grid-row-start: 4;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;

}




.A {
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.S {
	grid-column-start: 2;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.D {
	grid-column-start: 3;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.F {
	grid-column-start: 4;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.G {
	grid-column-start: 5;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.H {
	grid-column-start: 6;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.J {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.K {
	grid-column-start: 8;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.L {
	grid-column-start: 9;
	grid-column-end: span 1;
	grid-row-start: 5;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}







.Z {
	grid-column-start: 1;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.X {
	grid-column-start: 2;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.C {
	grid-column-start: 3;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.V {
	grid-column-start: 4;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.B {
	grid-column-start: 5;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.N {
	grid-column-start: 6;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}

.M {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 6;
  	grid-row-end: span 1;
	padding-top: 30px;
	letter-spacing: 2px;
}



   /* =======================
     Coordinates for 
     Anatomy Grid Elements @media 768px
    ======================= */


    .anatomy-container .anatomy-header {
      grid-column-start: 1;
      grid-column-end: span 5;
      grid-row-start: 1;
      grid-row-end: 2;
      overflow: hidden;
	padding-top: 15px;
	padding-bottom: 10px;

    }

.all-caps {

	grid-column-start: 1;
	grid-column-end: span 10;
	grid-row-start: 1;
	grid-row-end: span 2;
}



.detail {

	grid-column-start: 1;
	grid-column-end: span 10;
	grid-row-start: 1;
	grid-row-end: span 1;
}



.anatomy-video {

	grid-column-start: 1;
	grid-column-end: span 12;
	grid-row-start: 1;
	grid-row-end: span 1;

}



   /* =======================
     Coordinates for 
     Anatomy Grid Elements @media 768px
    ======================= */

.uses-header{

      grid-column-start: 1;
      grid-column-end: span 5;
      grid-row-start: 1;
      grid-row-end: 2;
      overflow: hidden;
	padding-top: 15px;
	padding-bottom: 10px;

}

.uses-text {

  grid-column-start: 1;
  grid-column-end: span 10;
  grid-row-start: 2;
  grid-row-end: span 2;

}


.uses-logo{
	background-color: #5B9CA2;
	grid-column-start: 1;
	grid-column-end: span 5;
	grid-row-start: 2;
	grid-row-end: 1;
}

.uses-container .uses-book {
	background-color: #5B9CA2;
	grid-column-start: 6;
	grid-column-end: span 6;
	grid-row-start: 1;
	grid-row-end: 2;

}

.uses-sign {
	grid-column-start: 1;
	grid-column-end: span 11;
	grid-row-start: 2;
	grid-row-end: auto;


}





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


}

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


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

.grid-container


    {
      grid-template-columns: repeat(10, 1fr);
      grid-auto-rows: minmax(50px, auto);
	padding: 20px 20px 20px 20px;
    }



   /* =======================
     Coordinates for 
     Type Grid Elements @media 460px
    ======================= */
li {	font-weight: 400;
	font-size: 16px;
	margin: 5px 0 5px 0;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 00px;
	padding-bottom: 0px;

}

h2 {

	font-weight: 400;
	font-size: 20px;
}

h3 {

	font-weight: 400;
	font-size: 15px;
}

p {

	font-weight: 400;
	font-size: 15px;
	line-height: 16pt;
}

h4 {

	font-weight: 400;
	font-size: 6px;

}




   /* =======================
     Coordinates for 
     Background Grid Elements @media 460px
    ======================= */


    .background-container .background-header {
      grid-column-start: 1;
      grid-column-end: span 5;
      grid-row-start: 1;
      grid-row-end: 1;
      overflow: hidden;
	padding: 0 0 0 0;
    }


    .background-container .background-text {
      grid-column-start: 1;
      grid-column-end: span 10;
      grid-row-start: 3;
      grid-row-end: auto;
      overflow: hidden;
    }


    .background-container .overview-section {
      grid-column-start: 1;
      grid-column-end: span 4;
      grid-row-start: 2;
      grid-row-end: 3;
      overflow: hidden;

    }





.uses-text {

  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 3;
  grid-row-end: span 2;
	margin: 10px;

}



   /* =======================
     Coordinates for 
     Uses Grid Elements @media 460px
    ======================= */


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




   /* =======================
     Coordinates for 
     Uses Grid Elements @media 460px
    ======================= */
.uses-header {

      grid-column-start: 1;
      grid-column-end: span 5;
      grid-row-start: 1;
      grid-row-end: 1;
      overflow: hidden;
	padding: 0 0 0 0;

}


.uses-text {

	grid-column-start: 1;
	grid-column-end: span 10;
	grid-row-start: 2;
	grid-row-end: span 5;
	margin: 5px;
}

.uses-logo{

	grid-column-start: 1;
	grid-column-end: span 5;
	grid-row-start: 1;
	grid-row-end: auto;
}



.uses-book {

	grid-column-start: 6;
	grid-column-end: span 5;
	grid-row-start: 1;
	grid-row-end: 2;

}


.uses-sign {

	grid-column-start: 1;
	grid-column-end: span 10;
	grid-row-start: 3;
	grid-row-end: auto;
}






}