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


* 
{
Box-sizing: border-box;
padding:0;
}

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

Body{
Overflow-x: hidden;
}

h2, p
{
Margin: 0 auto;
}

Li, a
{
Text-decoration: none;
List-style-type: none;
}

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


H1{
Line-height: 80%;
Margin:0;
Padding: 0;
}

P, h1, h2, h3
{
font-family: adobe-garamond-pro, serif;
font-weight: 400;
font-style: normal;
}

H1{
Font-size:1200px;
font-family: adobe-garamond-pro, serif;
font-weight: 700;
font-style: normal;
}

H2, H3, .a-one, .a-two
{
font-family: adobe-garamond-pro, serif;
font-weight: 600;
font-style: normal;
}

.navigation{
font-family: adobe-garamond-pro, serif;
font-weight: 700;
font-style: italic;
}

.large-letter
{
font-family: adobe-garamond-pro, serif;
font-weight: 700;
font-style: normal;
}

.navigation
{
font-family: adobe-garamond-pro, serif;
font-weight: 600;
font-style: italic;
}

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


.navigation
{
Text-color: grey;
}

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


.grid-container {
  /*border: 1px solid black;*/
  max-width:1000px;
  Max-height: auto;
  margin:0 auto;
  Padding: 20px;
  display: grid;
  grid-gap:10px 10px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 100px;
}


.grid-item {
  /*border: 1px solid grey;*/
  grid-column: span 1;
  Grid-row: span 1;
  Overflow: hidden;
}

.intro-container {
  Padding: 0;
  Margin:0 auto;
  Margin-top: -63px;
  /*Border: 1px solid black;*/
  max-width: 1000px;
  Max-height: 1000px;
  
}

.history-container {
  Padding: 0;
  Margin:0 auto;
  /*Border: 1px solid black;*/
}


.history-section {
  Padding: 0;
  Margin:0 auto;
  /*Border: 1px solid black;*/
}

.color-container{
  Padding: 0;
  Margin:0 auto;
  /*Border: 1px solid black;*/
  background-Color: #4b9159;
  Overflow: visible;
}

.color-section {
  Padding: 0;
  Margin:0 auto;
}

.anatomy-container {
  Padding: 0;
  Margin:0 auto;
  /*Border: 1px solid black;*/
}

.anatomy-section{
  Padding: 0;
  Margin:0 auto;
  /*Border: 1px solid black;*/
}

.glyphs-container{
  Padding: 0;
  Margin:0 auto;
  /*Border: 1px solid black;*/
}

.glyphs-section{
  Padding: 0;
  Margin:0 auto;
  /*Border: 1px solid black;*/
}

.uses-container{
  Padding: 0;
  Margin:0 auto;
  /*Border: 1px solid black;*/
}

.uses-section{
  Padding: 0;
  Margin:0 auto;
  /*Border: 1px solid black;*/
}
/*=======================

Individual grid elements

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

.large-letter{
  grid-column-start: 1;
  grid-column-end: span 12;
  grid-row-start: 1;
  grid-row-end: span 12;
  Border: none;
  Color: #378952;

}

.title{
  grid-column-start: 7;
  grid-column-end: span 2;
  grid-row-start: 5;
  grid-row-end: span 1;
  Padding-left: 13px;
  align: bottom;
}

.navigation{
  grid-column-start: 9;
  grid-column-end: span 2;
  grid-row-start: 6;
  grid-row-end: span 2;
  Padding: 30px;
  position: relative;
  Left: 1px;
}

a {
  /* remove the underline */
  text-decoration: none;
  /* change the font color */
  color: white;
  Font-size: 20px;
  
}

.history-title{
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 1;
  
}

.paragraph-one{
  grid-column-start: 3;
  grid-column-end: span 5;
  grid-row-start: 2;
  grid-row-end: span 3;
  Margin: 0 auto;
  Line-height: 25px;
}

.paragraph-two{
  grid-column-start: 5;
  grid-column-end: span 5;
  grid-row-start: 5;
  grid-row-end: span 3;
  Line-height: 25px;
}

.a-one {
Position: absolute;
Font-size: 1400px;
top: 500px;
right: -500px;
Max-height: 100%
max-Width: 100%;
Width: 1000px;
Text-align: center;
Overflow-x: hidden;
}

.a-two {
Position: absolute;
Font-size: 1400px;
top: 800px;
Left: -400px;
Width: 1000px;
Text-align: center;
Overflow-x: hidden;
}

.letter-video{
  grid-column-start: 6;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 6;
}
.masked-image
{
  Position: absolute;
  Top: 2115px;
  right: 500px;
  Overflow: visible;
  
}


.paragraph-three{
  grid-column-start: 7;
  grid-column-end: span 5;
  grid-row-start: 7;
  grid-row-end: span 3;
  Padding-top: 40px;
  Line-height: 25px;
}

.anatomy-header{
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 1;
}

.anatomy-image{
  grid-column-start: 1;
  grid-column-end: span 12;
  grid-row-start: 4;
  grid-row-end: span 5;
}

.anatomy{
Height: 178px;
Width: auto;
}

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

.paragraph-four{
  grid-column-start: 1;
  grid-column-end: span 5;
  grid-row-start: 7;
  grid-row-end: span 3;
  Line-height: 25px;
}

.alphabet{
  grid-column-start: 7;
  grid-column-end: span 5;
  grid-row-start: 7;
  grid-row-end: span 4;
  Font-size: 31px;
  Line-height: 45px;
}

.f-letter{
  grid-column-start: 11;
  grid-column-end: span 9;
  grid-row-start: 1;
  grid-row-end: span 13;
  Overflow: visible;

}

.f-mask{

}

.uses-header{
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 1;
}

.paragraph-five{
  grid-column-start: 1;
  grid-column-end: span 5;
  grid-row-start: 3;
  grid-row-end: span 3;
  Line-height: 25px;
}

.w-letter{
  grid-column-start: 4;
  grid-column-end: span 10;
  grid-row-start: 1;
  grid-row-end: span 10;
  Overflow: visible;
}


.example-one{
  grid-column-start: 8;
  grid-column-end: span 4;
  grid-row-start: 11;
  grid-row-end: span 4;
}

.garamond-close{
Max-height: 100%;
Max-width: 100%;
}

.example-two{
  grid-column-start: 1;
  grid-column-end: span 5;
  grid-row-start: 6;
  grid-row-end: span 5;
}

.garamond-book-design{
Max-height: 100%;
Max-width: 100%;
}

.example-three{
  grid-column-start: 6;
  grid-column-end: span 4;
  grid-row-start: 7;
  grid-row-end: span 2;
}

.abercrombie-fitch-logo{
Max-height: 100%;
Max-width: 100%;
}

.example-four{
  grid-column-start: 1;
  grid-column-end: span 5;
  grid-row-start: 12;
  grid-row-end: span 2;
}


.references-header{
  grid-column-start: 8;
  grid-column-end: span 2;
  grid-row-start: 14;
  grid-row-end: span 1;
}

.references{
  grid-column-start: 8;
  grid-column-end: span 6;
  grid-row-start: 15;
  grid-row-end: span 3;
  Line-height: 30px;
  Font-size: 13px;
}


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

 Responsive Layouts 920px

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


@media only screen and (max-width: 920px) {
  .intro-container > .grid-container,
  .history-container > .grid-container,
  .color-container > .grid-container,
  .anatomy-container > .grid-container,
  .glyphs-container > .grid-container,
  .uses-container > .grid-container
    {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: minmax(100px, auto);
    }

 /* =======================
     Fonts for @media 920px
    ======================= */





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

.intro-container .large-letter {
     grid-column-start: 1;
      grid-column-end: span 2;
      grid-row-start: 1;
      grid-row-end: auto;
      
}

h1 {
      position: absolute;
      left:50%;
      transform: translateX(-50%);
      overflow:visible;
      /* border: 1px solid red; */
}

.intro-container .title {
      grid-column-start: 2;
      grid-column-end: span 1;
      grid-row-start: 5;
      grid-row-end: auto;
      padding-left: 40px;
      
}

.intro-container .navigation{
      grid-column-start: 2;
      grid-column-end: span 1;
      grid-row-start: 6;
      grid-row-end: auto;
      left: 200px; 
}

 /* =======================
     Coordinates for 
     History Grid Elements @media 920px
    ======================= */

.history-container .history-title {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 3;
      grid-row-end: auto;
      Padding-left: 20px;      

}

.history-container .paragraph-one {
 grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 4;
      grid-row-end: auto;
      Padding-left: 20px;      

}

.history-container .paragraph-two {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 5;
      grid-row-end: auto;
      Padding-left: 20px;      

}

.history-container .a-two {

Visibility: hidden;

}

 /* =======================
     Coordinates for 
     History Color Grid Elements @media 920px
    ======================= */


.color-container .letter-video {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 2;
      grid-row-end: span 1;

      Display: none;

}


.color-container .masked-image {
      Position: fixed;
      
      
      /* Visibility: hidden; */
}


.color-container .paragraph-three {
      grid-column-start: 2;
      grid-column-end: span 1;
      grid-row-start: 2;
      grid-row-end: auto;
      Padding-right: 30px;
      Padding-top: 100px;
      Padding-bottom:50px;
}

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


.anatomy-container .anatomy-header {
      Padding-left: 20px;
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 2;
      grid-row-end: auto;
      Padding-top: 100px;

}

.anatomy-container .anatomy-video {
      Padding-left: 20px;
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 3;
      grid-row-end: auto;

}
 /* =======================
     Coordinates for 
     Glyphs Grid Elements @media 920px
    ======================= */

.glyphs-container .glyphs-header {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 3;
      grid-row-end: auto;
      Padding-left: 20px;

}

.glyphs-container .paragraph-four {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 4;
      grid-row-end: auto;
      Padding-left: 20px;
      Padding-right: 30px;

}

.glyphs-container .alphabet {
      grid-column-start: 2;
      grid-column-end: span 1;
      grid-row-start: 4;
      grid-row-end: auto;

}

.glyphs-container .f-letter {
  grid-column-start: 2;
  grid-column-end: span 8;
  grid-row-start: 1;
  grid-row-end: span 5;
  Overflow: visible;
  Padding-left: 175px;
  Z-index: -1;
}


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

.uses-container .uses-header {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 1;
      grid-row-end: auto;
      Padding-top: 100px;
      Padding-left: 20px;

}

.uses-container .paragraph-five {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 2;
      grid-row-end: auto;
      Padding-top: 100px;
      Padding-left: 20px;
      Padding-bottom: 50px;

}

.uses-container .w-letter {
      grid-column-start: 1;
      grid-column-end: span 2;
      grid-row-start: 3;
      grid-row-end: auto;
      Z-index: -1;

}


.uses-container .example-one {
      grid-column-start: 1;
      grid-column-end: span 2;
      grid-row-start: 3;
      grid-row-end: auto;
      Padding-top: 300px;

}

.uses-container .example-two {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 4;
      grid-row-end: auto;
      Padding-top: -200px;
      Padding-bottom: 60px;

}

.uses-container .example-three {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 5;
      grid-row-end: auto;
      Padding-bottom: 60px;

}

.uses-container .example-four {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 6;
      grid-row-end: auto;
      Padding-bottom: 60px;

}


.uses-container .references-header {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 7;
      grid-row-end: auto;


}


.uses-container .references {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 7;
      grid-row-end: auto;
      Padding-top: 80px;
      Padding-bottom: 50px;

}

}

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

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

 Responsive Layouts 700px

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




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

 Responsive Layouts 500px

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


@media only screen and (max-width: 500px) {
  .intro-container > .grid-container,
  .history-container > .grid-container,
  .color-container > .grid-container,
  .anatomy-container > .grid-container,
  .glyphs-container > .grid-container,
  .uses-container > .grid-container
    {
      grid-template-columns: repeat(1, 1fr);
      grid-auto-rows: minmax(100px, auto);
    }


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

.intro-container .large-letter {
     grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 1;
      grid-row-end: auto;
      
}

h1 {
      position: absolute;
      left:50%;
      transform: translateX(-50%);
      overflow:visible;
      /* border: 1px solid red; */
}

.intro-container .title {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 5;
      grid-row-end: auto;
      padding-left: 277px;
      
}

.intro-container .navigation{
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 6;
      grid-row-end: auto;
      left: 277px;
        
}

a{

Color: black;

}

/* =======================
     Coordinates for 
     History Grid Elements @media 500px
    ======================= */

.history-container .history-title {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 3;
      grid-row-end: auto;
      Padding-left: 20px;
         

}

.history-container .paragraph-one {
 grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 4;
      grid-row-end: auto;
      Padding-left: 20px;      
      Padding-right: 30px;   
}

.history-container .paragraph-two {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 5;
      grid-row-end: auto;
      Padding-left: 20px;      
      Padding-right: 30px;
      Padding-bottom: 50px;
      Padding-top: 30px;   
}



.history-container .a-one {

Visibility: hidden;

}


/* =======================
     Coordinates for 
     History Color Grid Elements @media 500px
    ======================= */


.color-container .letter-video {

      Visibility: hidden;

}


.color-container .masked-image {
 Visibility: hidden;

}


.color-container .paragraph-three {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 1;
      grid-row-end: auto;
      Padding-right: 30px;
      Padding-left: 20px;
      Padding-top: 50px;
}


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


.anatomy-container .anatomy-header {
      Padding-left: 20px;
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 2;
      grid-row-end: auto;
      Padding-top: 100px;

}

.anatomy-container .anatomy-video {
      Padding-left: 20px;
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 3;
      grid-row-end: auto;

}





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


.glyphs-container .glyphs-header {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 1;
      grid-row-end: auto;
      Padding-left: 20px;

}

.glyphs-container .paragraph-four {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 2;
      grid-row-end: auto;
      Padding-left: 20px;
      Padding-right: 30px;

}

.glyphs-container .alphabet {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 3;
      grid-row-end: auto;
      Padding-top: 30px;
      Padding-left: 20px;


}

.glyphs-container .f-letter {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 5;
  Overflow: visible;
  Padding-left: 175px;
  Z-index: -1;
  display: none;
}

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

.uses-container .uses-header {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 1;
      grid-row-end: auto;
      Padding-top: 100px;
      Padding-left: 20px;
      Padding-right: 30px;

}

.uses-container .paragraph-five {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 2;
      grid-row-end: auto;
      Padding-top: 50px;
      Padding-left: 20px;
      Padding-right: 30px;
      Padding-bottom: 50px;

}

.uses-container .w-letter {
      grid-column-start: 1;
      grid-column-end: span 2;
      grid-row-start: 3;
      grid-row-end: auto;
      Z-index: -1;

}

.uses-container .references-header {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 7;
      grid-row-end: auto;
      Padding-left: 20px;
      Padding-right: 30px;
}

.uses-container .references {
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 7;
      grid-row-end: auto;
      Padding-top: 80px;
      Padding-bottom: 50px;
      Padding-left: 20px;
      Padding-right: 30px;
}

}