/*=============================
==============================
CSS for Showcase font website
Website: N/A
Author: Alex Arthur
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
===============================
============================*/

/*============================
	1. General styles
=============================*/

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style-type: none;
}

body {
	background-color:#090932;
}

/*===================
	text styles
====================*/

H1 {
	color:#C1272D;

	font-family: gill-sans-nova, sans-serif;

	font-weight: 900;

	font-style: normal;

	font-size: 130px;

}


h2, h3, h4 {
	color:#C1272D;
	
	font-family: gill-sans-nova, sans-serif;

	font-weight: 700;

	font-style: normal;
	
	font-size: 50px;
}

H5 {
	color:#FFFFFF;
	
	font-family: gill-sans-nova, sans-serif;

	font-weight: 400;

	font-style: normal;
	
	font-size: 35px;
}	


p, li, nav {
	color:#FFFFFF;
	
	font-family: gill-sans-nova, sans-serif;

	font-weight: 400;

	font-style: normal;
}

/*=========================
	navbar
=========================*/
#navbar {
  position:fixed;
  z-index: 9999;
  top:0;
  background-color: #090932;
  width: 100%;
}

ul {
  width: 50%;
  margin: 0 auto;
  padding: 20px;
  -webkit-columns: 4 50px;
  -moz-columns: 44 50px;
  background-color: none;
}

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

li a {
  margin: 0 auto;
  display: block;
  width: 95px;
  height: 30px;
  line-height: 30px;
  background-color: #090932;
  text-decoration: none;
  color: white;
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  font-size: 15px  
}

li a:hover {
  background-color: #C1272D;
}


/*======================
	grid
=====================*/

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

.grid-item {
  border: 1px solid white; 
  grid-coloumn: span 1;
  overflow:hidden;
}

.gill-sans {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: hide;
  border-top-style: solid white;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.navbar {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}
/*=====================================
	Characteristics container
========================================*/

.characteristics-container .title {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: hide;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}


.grid-item .hello {
  grid-column-start: 2;
  grid-column-end: span 6;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text1 {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text2 {
  grid-column-start: 6;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .g {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: span 2;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text3 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 6;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line1 {
  grid-column-start: 4;
  grid-column-end: span 3;
  grid-row-start: 4;
  grid-row-end: span 4;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .o {
  grid-column-start: 5;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: span 2;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .video0 {
  margin-right: -3px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text4 {
  grid-column-start: 7;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line2 {
  grid-column-start: 2;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: span 4;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .q {
  grid-column-start: 2;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: span 2;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text5 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text6 {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line3 {
  grid-column-start: 5;
  grid-column-end: span 3;
  grid-row-start: 4;
  grid-row-end: span 4;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}
.grid-item .d {
  grid-column-start: 5;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .video1 {
  margin-top: -3px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text7 {
  grid-column-start: 5;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text8 {
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line4 {
  grid-column-start: 2;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: span 4;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}
.grid-item .f {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .video2 {
  margin-top: -3px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text9 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line5 {
  grid-column-start: 5;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: span 4;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}
.grid-item .a {
  grid-column-start: 6;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text10 {
  grid-column-start: 6;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text11 {
  grid-column-start: 7;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line6 {
  grid-column-start: 3;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: span 4;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-container .a,
.grid-container .o,
.grid-container .g {
  padding-bottom: 50px;
}
/*=====================================
	glyphs container
========================================*/

.glyphs-container .title {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 2;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.glyphs-container .glyphs1 {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: span 5;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.glyphs-container .glyphs2 {
  grid-column-start: 4;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: span 5;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.glyphs-container .glyphs3 {
  grid-column-start: 7;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: span 5;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}
/*=====================================
	background container
========================================*/
.background-container .title {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 2;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.background-container .eric-gill {
  grid-column-start: 1;
  grid-column-end: span 5;
  grid-row-start: 1;
  grid-row-end: span 4;
  overflow: hidden;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-container .hello-world,
.grid-container .bbc {
  padding-bottom: 50px
}
.background-container .text12 {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 5;
  grid-row-end: span 5;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.background-container .text13 {
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 5;
  grid-row-end: span 5;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}
.background-container .line7 {
  grid-column-start: 7;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: span 6;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}
.background-container .hello-world {
  grid-column-start: 4;
  grid-column-end: span 5;
  grid-row-start: 2;
  grid-row-end: span 4;
  overflow: hidden;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.background-container .text14 {
  grid-column-start: 4;
  grid-column-end: span 2;
  grid-row-start: 6;
  grid-row-end: span 2;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.background-container .text15 {
  grid-column-start: 6;
  grid-column-end: span 2;
  grid-row-start: 6;
  grid-row-end: span 2;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.background-container .line8 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: span 6;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.background-container .bbc {
  grid-column-start: 1;
  grid-column-end: span 5;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: hidden;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.background-container .text16 {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: span 3;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.background-container .text17 {
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: span 3;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}
/*=====================================
	in use container
========================================*/
.inuse-container .title {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 2;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none

}

.inuse-container .toy-story {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: span 2;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.inuse-container .line9 {
  grid-column-start: 5;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: span 4;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.inuse-container .tommy {
  grid-column-start: 5;
  grid-column-end: span 4;
  grid-row-start: 8;
  grid-row-end: span 2;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.inuse-container .line10 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 8;
  grid-row-end: span 4;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}
.inuse-container .keep-calm {
  grid-column-start: 1;
  grid-column-end: span 5;
  grid-row-start: 13;
  grid-row-end: span 5;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.inuse-container .nav2 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

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

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


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


h2, h3, h4 {
	
	font-size: 45px;
}

H5 {
	
	font-size: 40px;
}	


p, li, nav {
	font-size: 17px;
}

/*=========================
	navbar @media 768
=========================*/
#navbar {
  position:fixed;
  z-index: 9999;
  top:0;
  background-color: #090932;
  width: 100%;
}

ul {
  width: 50%;
  margin: 0 auto;
  padding: 20px;
  -webkit-columns: 4 50px;
  -moz-columns: 44 50px;
  background-color: none;
}

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

li a {
  margin: 0 auto;
  display: block;
  width: 95px;
  height: 30px;
  line-height: 30px;
  background-color: #090932;
  text-decoration: none;
  color: white;
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  font-size: 15px  
}

li a:hover {
  background-color: #C1272D;
}

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

.title {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: solid white;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.navbar {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 1;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.characteristics-container .title {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}


.grid-item .hello {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text1 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text2 {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .g {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text3 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line1 {
  display: none;
}

.grid-item .o {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text4 {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

 .grid-item .line2 {
  display: none;
} 

.grid-item .q {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text5 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text6 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line3 {
  display: none;
}

.grid-item .d {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .video1 {
  margin-top: -3px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text7 {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text8 {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line4 {
  display: none;
}
.grid-item .f {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .video2 {
  margin-top: -3px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text9 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line5 {
  display: none;
}
.grid-item .a {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text10 {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text11 {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line6 {
  display: none;
}
.glyphs-container .title {
  grid-column-start: 1;
  grid-column-end: span 8;
  grid-row-start: 2;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

/* ====================
    glyphs @media 768 
======================== */

.glyphs-container .title {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.glyphs-container .glyphs1 {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.glyphs-container .glyphs2 {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 7;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.glyphs-container .glyphs3 {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 5;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

/* ========================
   background @media 768
========================= */
.background-container .gill-sans {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-container .title,
.grid-container .eric-gill,
.grid-container .text12,
.grid-container .text13,
.grid-container .bbc,
.grid-container .text16,
.grid-container .text17 {
  padding-left: 50px;
}

.background-container .eric-gill {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: auto;
  overflow: hidden;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.background-container .responsive {
  width: 100%;
  height: auto;
}

.background-container .text12 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.background-container .text13 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: auto
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}
.background-container .line7 {
  display: none;
}
.background-container .hello-world {
  grid-column-start: 2;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: auto;
  overflow: hidden;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.background-container .text14 {
  grid-column-start: 2;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.background-container .text15 {
  grid-column-start: 2;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-container .hello-world,
.grid-container .text14,
.grid-container .text15 {
  padding-right: 50px;
}

.background-container .line8 {
  display: none;
}

.background-container .bbc {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hidden;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.background-container .text16 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.background-container .text17 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 4;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

/* ========================
   In Use @media 768px
========================= */
.inuse-container .title {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: Auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none

}

.inuse-container .toy-story {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.inuse-container .line9 {
  display: none;
}

.inuse-container .tommy {
  grid-column-start: 2;
  grid-column-end: span 4;
  grid-row-start: 8;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.inuse-container .line10 {
  display: none;
}
.inuse-container .keep-calm {
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-start: 13;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.inuse-container .nav2 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-container .toy-story,
.grid-container .keep-calm {
  padding-left: 10px;
}

.grid-container .tommy {
  padding-right: 20px; 
}
}

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

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


h2, h3, h4 {
	
	font-size: 35px;
}

H5 {
	
	font-size: 40px;
}	


p, li, nav {
	font-size: 18px;
}

/*=========================
	navbar @media 600
=========================*/
#navbar {
  position:fixed;
  z-index: 9999;
  top:0;
  background-color: #090932;
  width: 100%;
}

ul {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  -webkit-columns: 4 50px;
  -moz-columns: 44 50px;
  background-color: none;
}

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

li a {
  margin: 0 auto;
  display: block;
  width: 95px;
  height: 30px;
  line-height: 30px;
  background-color: #090932;
  text-decoration: none;
  color: white;
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  font-size: 15px  
}

li a:hover {
  background-color: #C1272D;
}

/* =======================
     Coordinates for 
     Characteristics Grid Elements @media 600px
    ======================= */

.title {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: solid white;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.navbar {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.characteristics-container .title {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}


.grid-item .hello {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text1 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text2 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .g {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text3 {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line1 {
  display: none;
}

.grid-item .o {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text4 {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

 .grid-item .line2 {
  display: none;
} 

.grid-item .q {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text5 {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text6 {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line3 {
  display: none;
}

.grid-item .d {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .video1 {
  margin-top: -3px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text7 {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text8 {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line4 {
  display: none;
}
.grid-item .f {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .video2 {
  margin-top: -3px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text9 {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line5 {
  display: none;
}
.grid-item .a {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.grid-item .text10 {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .text11 {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-item .line6 {
  display: none;
}

/* ====================
    glyphs @media 600
======================== */

.glyphs-container .title {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.glyphs-container .glyphs1 {
  Grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.glyphs-container .glyphs2 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 7;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.glyphs-container .glyphs3 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 5;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-container .glyphs1,
.grid-container .glyphs2,
.grid-container .glyphs3 {
  Padding-left: 25px;
  Padding-right: 25px;
}

/* ========================
   background @media 600
========================= */
.background-container .gill-sans {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-container .title,
.grid-container .eric-gill,
.grid-container .text12,
.grid-container .text13,
.grid-container .bbc,
.grid-container .text16,
.grid-container .text17 {
  padding-left: 25px;
  Padding-right: 25px;
}

.background-container .eric-gill {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: auto;
  overflow: hidden;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.background-container .responsive {
  width: 100%;
  height: auto;
}

.background-container .text12 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.background-container .text13 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: auto
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}
.background-container .line7 {
  display: none;
}
.background-container .hello-world {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: auto;
  overflow: hidden;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.background-container .text14 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.background-container .text15 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-container .hello-world,
.grid-container .text14,
.grid-container .text15 {
  padding-right: 25px;
  Padding-left: 25px;
}

.background-container .line8 {
  display: none;
}

.background-container .bbc {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hidden;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid white;
  border-left-style: none
}

.background-container .text16 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 3;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.background-container .text17 {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 4;
  grid-row-end: auto;
  overflow: hidden;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

/* ========================
   In Use @media 600px
========================= */
.inuse-container .title {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: Auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none

}

.inuse-container .toy-story {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.inuse-container .line9 {
  display: none;
}

.inuse-container .tommy {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 4;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.inuse-container .line10 {
  display: none;
}
.inuse-container .keep-calm {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 6;
  grid-row-end: auto;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.inuse-container .nav2 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
  overflow: hide;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none
}

.grid-container .toy-story,
.grid-container .keep-calm {
  padding-left: 10px;
}

.grid-container .tommy {
  padding-right: 20px; 
}
}