/*===================================
CSS for Showcase Font Website
Website:
Author: Nikki Vasil
Date: 2020 
Lisence: Public Lisence 
--------------------
Table of Contents 
--------------------
1. Begin Style Sheet
2. Style - INTRO 
3. Style - GLYPHS
4. Style - ANATOMY
5. Style - HISTORY
6. Style - IN-USE
7. Grid Styles - INTRO
8. Grid Styles - IMAGE COMPS
9. Grid Styles - GLYPHS
10. Grid Styles - ANATOMY
11. Grid Styles - HISTORY
12. Grid Styles - IN-USE
13. Responsive Layouts 768px - Fonts
14. Responsive Layouts 768px - Grids
15. Responsive Layouts 480px - Fonts
16. Responsive Layouts 480px - Grids 
======================================*/

	/* ========== 1. Begin Style Sheet ========== */

* { 
	margin: 0;
	padding: 0;
}

h2, h3, h4, h5, h6, p, ul, li, span, alt, em, strong
{
	font-family: bodoni-urw, serif;
	font-weight: 400;
	font-style: normal;
}

body {

	background-color: rgb(254, 232, 226);
}

h2 { 
	font-family: bodoni-urw, serif;
	font-weight: 700;
	font-style: normal;
	font-size: 80px;
}

h3 {
	font-family: bodoni-urw, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 50px;
	text-align: center;
}

h4 {
	font-family: bodoni-urw, serif;
	font-weight: 700;
	font-style: normal;
	font-size: 700px;
	margin-top: 10px;
	text-align: right;
}

h5 {
	font-family: bodoni-urw, serif;
	font-weight: 700;
	font-style: normal;
	font-size: 50px;
	text-align: left
}

	/* ========== 2. Style - INTRO ========== */

ul {
	list-style-type: none;
	text-decoration: none;
	color: black;
}

a:link, a:visited, a:hover, a:active {
  	text-decoration: none;
	font-family: bodoni-urw, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	display: block;
	width: 120px;
	height: 40px;
	text-align: center;
	line-height: 0px;
	margin: 20px;
}

a:link {
	color: #FEE8E2;
}

a:active {
	color: #FEE8E2;
}

a:visited {
  	color: #FEE8E2;
}

a:hover {
  	color: #C1272D;
	text-decoration: underline;
}

.main-navigation {
	position:fixed;
  	z-index: 9999;
  	background-color: black;
  	width: 150px;
  	height: 220px;
  	top: 15px;
  	right: 15px;
	display: block;
}

	/* ========== 3. Style - GLYPHS ========== */

.drop-cap-g {
	margin-right: 100px;
	margin-top: 30px;
}

.glyphs-numbers {
	font-family: bodoni-urw, serif;
	font-weight: 700;
	font-style: italic;
	font-size: 50px;
	text-align: right;
	margin-top: 50px;
	line-height: 55px;
}

.glyphs-alphabet {
	font-family: bodoni-urw, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 30px;
	text-align: right;
	margin-top: 50px;
	line-height: 55px;
}

.glyphs-symbols {
	font-family: bodoni-urw, serif;
	font-weight: 300;
	font-style: normal;
	font-size: 20px;
	text-alight: left;
	margin-top: 50px;
	line-height: 45px;
}

	/* ========== 4. Style - ANATOMY ========== */

.header-anatomy {
	margin-right: 0px;
	margin-top: 100px;
	text-align: right;
}

.drop-cap-a {
	text-align: left;
}

.typo-paragraph {
	margin-top: 0px;
	text-align: left;
	font-size: 13px;
}

.light {
	font-family: bodoni-urw, serif;
	font-weight: 300;
	font-style: normal;
}

.light-oblique {
	font-family: bodoni-urw, serif;
	font-weight: 300;
	font-style: italic;
}

.regular {
	font-family: bodoni-urw, serif;
	font-weight: 400;
	font-style: normal;
}

.regular-oblique {
	font-family: bodoni-urw, serif;
	font-weight: 400;
	font-style: italic;
}

.medium {
	font-family: bodoni-urw, serif;
	font-weight: 500;
	font-style: normal;
}

.medium-oblique {
	font-family: bodoni-urw, serif;
	font-weight: 500;
	font-style: italic;
}

.bold {
	font-family: bodoni-urw, serif;
	font-weight: 700;
	font-style: normal;
}

.bold-oblique {
	font-family: bodoni-urw, serif;
	font-weight: 700;
	font-style: italic;
}

.extrabold {
	font-family: bodoni-urw, serif;
	font-weight: 800;
	font-style: normal;
}

.extrabold-oblique {
	font-family: bodoni-urw, serif;
	font-weight: 800;
	font-style: italic;
}

.b-font-family {
	font-size: 200px;
	line-height: 250px;
	color: #C1272D;
}

	/* ========== 5. Style - HISTORY ========== */

.header-history {
	margin-right: 40px;
	margin-top: 60px;
}

.giambattista-bodoni {
	position: relative; 
	top: -30px; 
	right: 20px;
}

.history-paragraph {
	font-size: 13px;
}

	/* ========== 6. Style - IN-USE ========== */

.header-inuse {
	text-align: right;
	margin-right: 60px;
	margin-top: 35px;
}

.mock-up.2 {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
}


	/* ========== 7. Grid Styles - INTRO ========== */

.intro-video-container {
	width: 100%;
	background-color: black;
}

.grid-container {
	border: 0px solid black;
	max-width:1000px;
	margin:0 auto;
	padding:0;
	display: grid;
	grid-gap:10px 10px;
	grid-template-columns: repeat(8, 1fr);
	grid-auto-rows: minmax(100px, 100px);
}

.grid-item {
	border: 0px solid black;
	grid-column: span 1;
	overflow:hidden;
}

.title {
	grid-column-start: 3;
	grid-column-end: span 4;
	grid-row-start: 5;
	grid-row-end: span 5;
	overflow: hidden;
}

	/* ========== 8. Grid Styles - IMAGE COMPS ========== */

.image1 {
	grid-column-start: 6;
	grid-column-end: span 3;
	grid-row-start: 1;
	grid-row-end: span 5;
	overflow: hidden;
}

.image2 {
	grid-column-start: 2;
	grid-column-end: span 4;
	grid-row-start: 7;
	grid-row-end: span 7;
	overflow: hidden;
}

.image3 {
	grid-column-start: 4;
	grid-column-end: span 4;
	grid-row-start: 16;
	grid-row-end: span 3;
	overflow: hidden;
}

.ck-paragraph {
	grid-column-start: 2;
	grid-column-end: span 2;
	grid-row-start: 16;
	grid-row-end: span 3;
	overflow: hidden;
	text-align: right;
	font-size: 13px;
}

.image4 {
	grid-column-start: 3;
	grid-column-end: span 6;
	grid-row-start: 21;
	grid-row-end: span 8;
	overflow: hidden;
}

	/* ========== 9. Grid Styles - GLYPHS ========== */

.header-glyphs {
	grid-column-start: 4;
	grid-column-end: span 3;
	grid-row-start: 3;
	grid-row-end: span 2;
	overflow: hidden;
	text-align: right;
}

.drop-cap-g {
	grid-column-start: 1;
	grid-column-end: span 5;
	grid-row-start: 1;
	grid-row-end: span 7;
	overflow: hidden;
}

.numbers {
	grid-column-start: 4;
	grid-column-end: span 3;
	grid-row-start: 4;
	grid-row-end: span 5;
	overflow: hidden;
}

.alphabet {
	grid-column-start: 4;
	grid-column-end: span 3;
	grid-row-start: 5;
	grid-row-end: span 6;
	overflow: hidden;
}

.symbols {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 10;
	grid-row-end: span 4;
	overflow: hidden;
}

	/* ========== 10. Grid Styles - ANATOMY ========== */

.header-anatomy {
	grid-column-start: 3;
	grid-column-end: span 5;
	grid-row-start: 3;
	grid-row-end: span 3;
	overflow: hidden;
}

.drop-cap-a {
	grid-column-start: 1;
	grid-column-end: span 5;
	grid-row-start: 1;
	grid-row-end: span 7;
	overflow: hidden;
}

.video-mask1 {
  width: 100%;
  height: 100%;
  overflow:hidden;
  margin:0 auto;
}

.video1 {
  margin-left: -1px;
  margin-top: -1px;
}

.typography {
	grid-column-start: 1;
	grid-column-end: span 8;
	grid-row-start: 9;
	grid-row-end: span 8;
	overflow: hidden;
}

.typo-paragraph {
	grid-column-start: 5;
	grid-column-end: span 3;
	grid-row-start: 15;
	grid-row-end: span 1;
	overflow: hidden;
}

.urw-font-family {
	grid-column-start: 2;
	grid-column-end: span 3;
	grid-row-start: 16;
	grid-row-end: span 7;
	overflow: hidden;
	text-align: right;
	line-height: 50px;
	font-size: 21px;
}

.b-font-family {
	grid-column-start: 5;
	grid-column-end: span 2;
	grid-row-start: 21;
	grid-row-end: span 15;
	overflow: hidden;
	text-align: left;
}

	/* ========== 11. Grid Styles - HISTORY ========== */

.header-history {
	grid-column-start: 5;
	grid-column-end: span 4;
	grid-row-start: 6;
	grid-row-end: span 2;
	overflow: hidden;
	text-align: center;
}

.drop-cap-h {
	grid-column-start: 1;
	grid-column-end: span 5;
	grid-row-start: 4;
	grid-row-end: span 7;
	overflow: hidden;
}

.giambattista-bodoni {
	grid-column-start: 2;
	grid-column-end: span 4;
	grid-row-start: 12;
	grid-row-end: span 3;
	overflow: hidden;
}

.gb-anatomy {
	grid-column-start: 6;
	grid-column-end: span 4;
	grid-row-start: 15;
	grid-row-end: span 3;
	overflow: hidden;
}

.history-paragraph {
	grid-column-start: 6;
	grid-column-end: span 3;
	grid-row-start: 18;
	grid-row-end: span 13;
	overflow: hidden;
}

	/* ========== 12. Grid Styles - IN-USE ========== */

.header-inuse {
	grid-column-start: 4;
	grid-column-end: span 3;
	grid-row-start: 3;
	grid-row-end: span 2;
	overflow: hidden;
}

.drop-cap-i {
	grid-column-start: 2;
	grid-column-end: span 3;
	grid-row-start: 1;
	grid-row-end: span 7;
	overflow: hidden;
}

.mock-up-1 {
	grid-column-start: 1;
	grid-column-end: span 8;
	grid-row-start: 8;
	grid-row-end: span 6;
	overflow: hidden;
}

.mock-up-2 {
	grid-column-start: 1;
	grid-column-end: span 9;
	grid-row-start: 18;
	grid-row-end: span 6;
	overflow: hidden;
}

.mock-up-3 {
	grid-column-start: 3;
	grid-column-end: span 6;
	grid-row-start: 28;
	grid-row-end: span 11;
	overflow: hidden;
}

.video-mask2 {
  width: 100%;
  height: 100%;
  overflow:hidden;
  margin:0 auto;
}

.video2 {
  margin-left: -1px;
  margin-top: -1px;
  
}

#media-size-warning {
	position:fixed;
	z-index:999999;
	background-color:rgb(254, 232, 226);
	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;
}
#media-text-warning a {
	color:grey; 
	font-family: bodoni-urw, serif; 
	font-size: 23px; 
	font-weight: bold; 
	width:auto;
	height:auto;
	margin:0;
	text-align:left;
}

	/* ========== 13. RESPONSIVE LAYOUTS 768px - Fonts ========== */

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

h2 {
	font-size: 70px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 490px;
}

#media-size-warning {
	display:block;
	
}

a:link, a:visited, a:hover, a:active {
	font-size: 15px;
	display: block;
	width: 65px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	margin: 20px;
}

.main-navigation {
	position:fixed;
  	z-index: 9999;
  	background-color: black;
  	width: 100px;
  	height: 180px;
	display: block;
}

.glyphs-numbers {
	font-size: 40px;
}

.glyphs-alphabet {
	font-size: 30px;
}

.glyphs-symbols {
	font-size: 25px;
}

.header-anatomy {
	margin-right: 0px;
	margin-top: 100px;
	text-align: right;
}

.drop-cap-a {
	margin-right: 100px;
	margin-top: 30px;
}

.urw-font-family {
	font-size: 16px;
}

.drop-cap-h {
	margin-right: 70px;
}


}


	/* ========== 14. RESPONSIVE LAYOUTS - Grids ========== */

@media only screen and (max-width: 768px) {
	.intro-container > .grid-container,
	.glyphs-container > .grid-container,
	.anatomy-container > .grid-container,
	.history-container > .grid-container,
	.in-use-container > .grid-container,

    {
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: minmax(100px, auto);
}

.intro-video-container {
	width: 100%;
	background-color: black;
}

.title {
	grid-column-start: 3;
	grid-column-end: span 4;
	grid-row-start: 3;
	grid-row-end: span 3;
	overflow: hidden;
}

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

.image2 {
	grid-column-start: 2;
	grid-column-end: span 4;
	grid-row-start: 6;
	grid-row-end: span 7;
	overflow: hidden;
}

.image3 {
	grid-column-start: 4;
	grid-column-end: span 4;
	grid-row-start: 12;
	grid-row-end: span 3;
	overflow: hidden;
	width: 343.431px;
	height: 224.9322px;
}

.ck-paragraph {
	grid-column-start: 2;
	grid-column-end: span 2;
	grid-row-start: 12;
	grid-row-end: span 3;
	overflow: hidden;
	text-align: right;
	font-size: 12px;
}

.image4 {
	grid-column-start: 2;
	grid-column-end: span 6;
	grid-row-start: 15;
	grid-row-end: span 5;
	overflow: hidden;
}

.header-glyphs {
	grid-column-start: 4;
	grid-column-end: span 3;
	grid-row-start: 3;
	grid-row-end: span 2;
	overflow: hidden;
	text-align: right;
	margin-top: 80px;
}

.drop-cap-g {
	grid-column-start: 1;
	grid-column-end: span 5;
	grid-row-start: 2;
	grid-row-end: span 7;
	overflow: hidden;
}

.numbers {
	grid-column-start: 4;
	grid-column-end: span 3;
	grid-row-start: 4;
	grid-row-end: span 5;
	overflow: hidden;
}

.alphabet {
	grid-column-start: 4;
	grid-column-end: span 3;
	grid-row-start: 5;
	grid-row-end: span 6;
	overflow: hidden;
}

.symbols {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 10;
	grid-row-end: span 4;
	overflow: hidden;
}

.header-anatomy {
	grid-column-start: 3;
	grid-column-end: span 5;
	grid-row-start: 4;
	grid-row-end: span 3;
	overflow: hidden;
	text-align: right;
	margin-right: 30px;
}

.drop-cap-a {
	grid-column-start: 1;
	grid-column-end: span 5;
	grid-row-start: 2;
	grid-row-end: span 6;
	overflow: hidden;
}

.typography {
	grid-column-start: 1;
	grid-column-end: span 8;
	grid-row-start: 6;
	grid-row-end: span 8;
	overflow: hidden;
}

.typo-paragraph {
	grid-column-start: 5;
	grid-column-end: span 2;
	grid-row-start: 13;
	grid-row-end: span 3;
	overflow: hidden;
}

.b-font-family {
	grid-row-start: 20;
	grid-row-end: span 13;
	overflow: hidden;
}

.header-history {
	grid-column-start: 4;
	grid-column-end: span 5;
	grid-row-start: 4;
	grid-row-end: span 2;
	overflow: hidden;
	text-align: center;
}

.drop-cap-h {
	grid-column-start: 1;
	grid-column-end: span 5;
	grid-row-start: 3;
	grid-row-end: span 5;
	overflow: hidden;
}

.giambattista-bodoni {
	grid-column-start: 1;
	grid-column-end: span 5;
	grid-row-start: 9;
	grid-row-end: span 3;
	overflow: hidden;
	margin-left: 30px;
}

.gb-anatomy {
	grid-column-start: 4;
	grid-column-end: span 4;
	grid-row-start: 12;
	grid-row-end: span 3;
	overflow: hidden;
}

.history-paragraph {
	grid-column-start: 4;
	grid-column-end: span 4;
	grid-row-start: 15;
	grid-row-end: span 13;
	overflow: hidden;
	margin-right: 25px;
}

.header-inuse {
	grid-column-start: 4;
	grid-column-end: span 4;
	grid-row-start: 3;
	grid-row-end: span 2;
	overflow: hidden;
	text-align: left;
	margin-left: 50px;
}

.drop-cap-i {
	grid-column-start: 2;
	grid-column-end: span 3;
	grid-row-start: 1;
	grid-row-end: span 7;
	overflow: hidden;
}

.mock-up-1 {
	grid-column-start: 1;
	grid-column-end: span 8;
	grid-row-start: 6;
	grid-row-end: span 6;
	overflow: hidden;
	margin-left: 10px;
}

.mock-up-2 {
	grid-column-start: 1;
	grid-column-end: span 9;
	grid-row-start: 13;
	grid-row-end: span 6;
	overflow: hidden;
}

.mock-up-3 {
	grid-column-start: 2;
	grid-column-end: span 6;
	grid-row-start: 19;
	grid-row-end: span 7;
	overflow: hidden;
	margin-left: 20px;
}

.rwd-break {
	display: none;
}


	/* ========== 15. RESPONSIVE LAYOUTS 480px - Fonts ========== */

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

h2 {
	font-size: 40px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 250px;
}

a:link, a:visited, a:hover, a:active {
	font-size: 15px;
	display: block;
	width: 65px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	margin: 20px;
}

.main-navigation {
	position:fixed;
  	z-index: 9999;
  	background-color: black;
  	width: 100px;
  	height: 180px;
	display: block;
}

.glyphs-numbers {
	font-size: 30px;
	line-height: 40px;
}

.glyphs-alphabet {
	font-size: 20px;
	line-height: 40px;
}

.glyphs-symbols {
	font-size: 12px;
	line-height: 40px;
}


.header-anatomy {
	margin-right: 0px;
	margin-top: 100px;
	text-align: right;
}

.urw-font-family {
	font-size: 16px;
}

.drop-cap-h {
	margin-right: 70px;
}

}

	/* ========== 16. RESPONSIVE LAYOUTS 480px - Grids ========== */

@media only screen and (max-width: 480px) {
	.intro-container > .grid-container,
	.glyphs-container > .grid-container,
	.anatomy-container > .grid-container,
	.history-container > .grid-container,
	.in-use-container > .grid-container,

    {
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: minmax(100px, auto);
}

.intro-video-container {
	width: 100%;
	background-color: black;
}

.main-navigation {
  	 position: fixed;
 	 z-index: 9999;
	 right: 0;
	 top: 0;
 	 background-color: black;
	 width: 100%;
	 height: 70px;
}


.main-navigation ul {
 	 width:90%;
 	 margin:0 auto;
 	 padding: 25px;
 	 -webkit-columns: 4 70px; 
 	 -moz-columns: 4 70px; 
 	 columns: 4 70px; 
 	 background-color: black; 
}

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

.main-navigation a {
	 margin:0 auto;
  	 width: 100%;
  	 height: 35px;
  	 line-height: 20px;
 	 background-color: black;
 	 text-decoration: none; 
 	 font-size: 13px; 
}

.main-navigation a:active {
  	color: #FEE8E2;
}

.main-navigation a:link {
	color: #FEE8E2;
}

.main-navigation a:visited {
  	color: #FEE8E2;
}

.main-navigation a:hover {
  	color: #C1272D;
	text-decoration: underline;
}

.square1 { 
	grid-column-start: 1;
	grid-column-end: span 2;
	grid-row-start: 1;
	grid-row-end: span 4;
	overflow: hidden;
	width: 100%;
	height: 210px;
	background-color: black;
}

.square2 { 
	grid-column-start: 1;
	grid-column-end: span 2;
	grid-row-start: 1;
	grid-row-end: span 4;
	overflow: hidden;
	width: 100%;
	height: 210px;
	background-color: black;
}

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

.image1 {
	grid-column-start: 3;
	grid-column-end: span 4;
	grid-row-start: 1;
	grid-row-end: span 4;
	overflow: hidden;
	margin-top: 100px;
}

.image2 {
	grid-column-start: 2;
	grid-column-end: span 6;
	grid-row-start: 6;
	grid-row-end: span 7;
	overflow: hidden;
}

.image3 {
	grid-column-start: 2;
	grid-column-end: span 6;
	grid-row-start: 11;
	grid-row-end: span 3;
	margin-top: 30px;
	overflow: hidden;
	width: 100%;
}

.ck-paragraph {
	grid-column-start: 2;
	grid-column-end: span 6;
	grid-row-start: 13;
	grid-row-end: span 3;
	overflow: hidden;
	text-align: left;
	font-size: 12px;
}

.image4 {
	grid-column-start: 2;
	grid-column-end: span 6;
	grid-row-start: 15;
	grid-row-end: span 3;
	overflow: hidden;
	margin-top: 60px;
}

.header-glyphs {
	grid-column-start: 5;
	grid-column-end: span 3;
	grid-row-start: 3;
	grid-row-end: span 2;
	text-align: right;
	margin-top: 10px;
}

.drop-cap-g {
	grid-column-start: 1;
	grid-column-end: span 5;
	grid-row-start: 2;
	grid-row-end: span 7;
	margin-right: 25px;
}

.numbers {
	grid-column-start: 5;
	grid-column-end: span 3;
	grid-row-start: 3;
	grid-row-end: span 5;
	overflow: hidden;
	margin-top: 30px;
}

.alphabet {
	grid-column-start: 5;
	grid-column-end: span 3;
	grid-row-start: 4;
	grid-row-end: span 6;
	overflow: hidden;
}

.symbols {
	grid-column-start: 7;
	grid-column-end: span 1;
	grid-row-start: 7;
	grid-row-end: span 4;
	overflow: hidden;
	text-align: right;
	margin-top: 70px;
}

.header-anatomy {
	grid-column-start: 4;
	grid-column-end: span 5;
	grid-row-start: 3;
	grid-row-end: span 3;
	overflow: hidden;
	margin-right: 25px;
	margin-top: 70px;
}

.drop-cap-a {
	grid-column-start: 1;
	grid-column-end: span 6;
	grid-row-start: 2;
	grid-row-end: span 5;
	overflow: hidden;
	margin-left: 20px;
	margin-right: 80px;
}

.typography {
	grid-column-start: 1;
	grid-column-end: span 8;
	grid-row-start: 6;
	grid-row-end: span 8;
	overflow: hidden;
}

.typo-paragraph {
	grid-column-start: 2;
	grid-column-end: span 6;
	grid-row-start: 9;
	grid-row-end: span 3;
	overflow: hidden;
}

.urw-font-family {
	grid-column-start: 2;
	grid-column-end: span 6;
	grid-row-start: 11;
	grid-row-end: span 7;
	overflow: hidden;
	text-align: center;
}

.b-font-family {
	grid-column-start: 4;
	grid-column-end: span 6;
	grid-row-start: 16;
	grid-column-end: span 3;
	grid-row-end: span 10;
	overflow: hidden;
	font-size: 160px;
	line-height: 200px;
}

.header-history {
	grid-column-start: 4;
	grid-column-end: span 6;
	grid-row-start: 2;
	grid-row-end: span 2;
	overflow: hidden;
	margin-top: 120px;
	margin-left: 50px;
	margin-right: 30px;
}

.drop-cap-h {
	grid-column-start: 1;
	grid-column-end: span 6;
	grid-row-start: 2;
	grid-row-end: span 5;
	overflow: hidden;
}

.giambattista-bodoni {
	grid-column-start: 1;
	grid-column-end: span 9;
	grid-row-start: 5;
	grid-row-end: span 3;
	overflow: hidden;
	padding: 10px;
	margin-left: 38px;
}

.gb-anatomy {
	grid-column-start: 2;
	grid-column-end: span 6;
	grid-row-start: 19;
	grid-row-end: span 4;
	overflow: hidden;
	margin-top: 65px;
}

.history-paragraph {
	grid-column-start: 1;
	grid-column-end: span 8;
	grid-row-start: 7;
	grid-row-end: span 13;
	overflow: hidden;
	margin-left: 30px;
}

.header-inuse {
	grid-column-start: 3;
	grid-column-end: span 6;
	grid-row-start: 1;
	grid-row-end: span 2;
	overflow: hidden;
	text-align: left;
	margin-left: 70px;
	margin-top: 90px;
}

.drop-cap-i {
	grid-column-start: 2;
	grid-column-end: span 3;
	grid-row-start: 1;
	grid-row-end: span 7;
	overflow: hidden;
}

.mock-up-1 {
	grid-column-start: 1;
	grid-column-end: span 8;
	grid-row-start: 4;
	grid-row-end: span 5;
	overflow: hidden;
	margin-left: 10px;
}

.mock-up-2 {
	grid-column-start: 1;
	grid-column-end: span 9;
	grid-row-start: 8;
	grid-row-end: span 5;
	overflow: hidden;
}

.mock-up-3 {
	grid-column-start: 2;
	grid-column-end: span 6;
	grid-row-start: 11;
	grid-row-end: span 4;
	overflow: hidden;
	margin-left: 15px;
	margin-top: 45px;
}

.video-mask2 {
	background-color: black;
	width: 100%;
}