html {
  box-sizing: border-box;
  font-size: 62.5%; 
  scroll-behavior: smooth; 
}

body {
  font-family: arail, helvetica, sans-serif;
  color: #333;
  font-weight: 300;
  line-height: 1.6; 
  background: black;
}

/*naviogation */

.topbar {
	padding-bottom: 20px;
	padding-left: 14px;
	position: fixed;
	display: inline-grid;
	grid-template-columns: .20fr .90fr .90fr;
	grid-template-areas:
		'open head title'; 
	grid-template-rows: repeat(1, 5vw);
	background-color: black;
	opacity: 0.75;
	height: 0px;
	width: 700px;
}

.header { /* this needs worked on */
	padding-top: 5px;
	padding-left: 0px;
	font-size: 35px;
	color: white;
	grid-area: head; /*here i named header as head so that I could arrange it in the grid above */
	
}

.title {
	padding-top: 5px;
	padding-bottom: 20px;
	font-size: 35px;
	color: white;
	grid-area: title;
}

.openNAV {
	padding-top: 11px; 
	padding-left: 10px;
	grid-area: open;
}

.openNAV:hover {
	background-color: white;
	opacity: 1;
}
/*
.Logo { /* still struggling to control images within divs i was attempting to have the logo increased when in hpver state
	width: 100px;
	height: 100px;
	border: 5px solid #5dbcd2;
	object-fit: cover;
} */


.sidenav {
	height: 100;
	width: 0;  /*change this in javascript */
	position: fixed; 
	z-index: 1; /*stay on top */
	top: 0;
	left: 0;
	background-color: #111;
	overflow-x: hidden; /*disable horizontal scroll */
	padding-top: 15px;
	transition: 0.3s;
}

/*navigation menu links */
.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-weight: 300;
	font-size: 15px;
	color: #818181;
	display: block;
	transition: 0.3;
}

.sidenav a:hover {
	color: #f1f1f1;
}

/* postion and style of close button */

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 0px;
}

.guide {
	background-color: #525151;
}

#main { /*for pushing content to the side */
	transition: margin-lift .3s;
	padding: 0px;
}
/* band name banner and menu  */

/* .headnav { */
	/* position: fixed; */
	/* display: grid; */
	/* grid-template-columns: 1fr, 1fr; */
	/* grid-template-areas: */
		/* "openNAV, bandname" */
/* } */


.navbar ul{
	display: inline;
}

/* section for thirty -------------------------------------   */

.thirty{
	padding-top: 70px;
	background: black;
}

.container {
  width: 100%; /*determins the size of the container in whxih the february gallery in held. 100% takes up full screen */ 
} 

.gallerythirty {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(2, 5vw);
  grid-gap: 1.5rem; 
  padding-bottom: 1.5rem;
}

.gallery__thirty {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
  border: 5px solid #fff081; /*adds the scrapbook colour to the element */
}

.gallery__item--thoughtsdoc {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 5;
}

.gallery__item--wdb1doc {
  grid-column-start: 7;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 5;
}

.gallery__item--thirtyinterview {
  grid-column-start: 13;
  grid-column-end: 16;
  grid-row-start: 1;
  grid-row-end: 3;
}

.gallery__item--thirtygal {
  grid-column-start: 13;
  grid-column-end: 16;
  grid-row-start: 4;
  grid-row-end: 5;
}

.gallery__item--febcover {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 7;
}

.gallery__item--NGU {
  grid-column-start: 7;
  grid-column-end: 10; /* puts the imgage or object right to the end of the grid */
  grid-row-start: 1;
  grid-row-end: 4;
}

.gallery__item--BeHere {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 7;
}

.gallery__item--LiveCasts { 
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 4;
}

.gallery__item--FebRadio {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 4;
  grid-row-end: 7;
}

.gallery__item--FebGal {
  grid-column-start: 13;
  grid-column-end: -1;
  grid-row-start: 4;
  grid-row-end: 6;
}

/* section for february -----------------------------------  */
.february{
	padding-top: 70px;
	background: black;
}

.container {
  width: 100%; /*determins the size of the container in whxih the february gallery in held. 100% takes up full screen */ 
} 

.galleryfeb {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(2, 5vw);
  grid-gap: 1.5rem; 
  padding-bottom: 1.5rem;
}

.gallery__imgfeb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
  border: 5px solid #5dbcd2; /*adds the scrapbook colour to the element */
}

.gallery__item--febcover {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 7;
}

.gallery__item--NGU {
  grid-column-start: 7;
  grid-column-end: 10; /* puts the imgage or object right to the end of the grid */
  grid-row-start: 1;
  grid-row-end: 4;
}

.gallery__item--BeHere {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 7;
}

.gallery__item--LiveCasts { 
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 4;
}

.gallery__item--FebRadio {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 4;
  grid-row-end: 7;
}

.gallery__item--FebGal {
  grid-column-start: 13;
  grid-column-end: -1;
  grid-row-start: 4;
  grid-row-end: 6;
}
/* in between section 1 and 2 -----------------------------------------*/

.EDH_EDO {
	padding-top: 0rem;
	background: black;
}
.container {
	width: 100%;
}

.galleryEDH_GDO {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(2, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__imgEDH_GDO{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
  /* border: 10px solid white; /*adds the scrapbook colour to the element */ 
}

.gallery__item--GDOcover {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid grey;
}

.gallery__item--EDHcover {
  grid-column-start: 7;
  grid-column-end: 10; /* puts the imgage or object right to the end of the grid */
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid white;
}

.gallery__item--A801cover {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  border: 5px solid white;
  width: 92%;
}

.gallery__item--blindcover {
  grid-column-start: 3;
  grid-column-end: 5; /* puts the imgage or object right to the end of the grid */
  grid-row-start: 1;
  grid-row-end: 3;
  border: 5px solid white;
  width: 92%;
}

.gallery__item--GDOslide {
  grid-column-start: 13;
  grid-column-end: -1; /* puts the imgage or object right to the end of the grid */
  grid-row-start: 1;
  grid-row-end: 2;
  border: 5px solid grey;
  width: 92%;
}

.gallery__item--GDOvideo {
  grid-column-start: 13;
  grid-column-end: -1; /* puts the imgage or object right to the end of the grid */
  grid-row-start: 2;
  grid-row-end: 4;
  border: 5px solid grey;
  width: 92%;
}



/* start of wdb 2 section ---------------- */

.Wdb2{
	padding-top: 1.5rem;
	background: black;
}

.container {
  width: 100%; /*determins the size of the container in whxih the february gallery in held. 100% takes up full screen */ 
} 

.gallerywdb2 {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(2, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__imgwdb2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
  border: 5px solid #800002; /*adds the scrapbook colour to the element */
}

.gallery__item--wdb2cover {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 7;
}

.gallery__item--Who {
  grid-column-start: 7;
  grid-column-end: 10; /* puts the imgage or object right to the end of the grid */
  grid-row-start: 1;
  grid-row-end: 4;
}

.gallery__item--Killit {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 7;
}

.gallery__item--Shuff { 
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 4;
  grid-row-end: 7;
}

.gallery__item--Stir_radio {
  grid-column-start: 13;
  grid-column-end: -1;
  grid-row-start: 4;
  grid-row-end: 7;
}

.gallery__item--wdb2_delux_gal {
  grid-column-start: 13;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: 4;
}

.gallery__item--North_Star {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 4;
}

/* .gallery__item--6 { */
  /* grid-column-start: 10; */
  /* grid-column-end: -1; */
  /* grid-row-start: 4; */
  /* grid-row-end: 8; */
/* } */

/*end of wdb2 section --------------------------------- */



/* weird decibels 1 section ---------------------------------- */

.Wdb1{
	padding-top: 1.5rem;
	background: black;
}

.container {
  width: 100%; /*determins the size of the container in whxih the february gallery in held. 100% takes up full screen */ 
} 

.gallerywdb1 {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(1, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__imgwdb1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
  border: 5px solid #2b2b2b; /*adds the scrapbook colour to the element */
}

.gallery__item--wdb1 {
  grid-column-start: 7;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 7;
}

.gallery__item--Speak {
  grid-column-start: 1;
  grid-column-end: 4; /* puts the imgage or object right to the end of the grid */
  grid-row-start: 1;
  grid-row-end: 4;
}

.gallery__item--Wonder {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 7;
}

.gallery__item--Joker{ 
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 4;
}

.gallery__item--wdb1_gal_cov { 
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 4;
  grid-row-end: 7;
}

.gallery__item--wdb1_oran { 
  grid-column-start: 13;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: 3;
}

/* extra wdb1 content 7th aug 2020 */

.Extra_wdb1 {
	padding-top: 1.5rem;
	background: black;
}

.container {
	width: 100%;
}

.galleryExtra_wdb1 {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(2, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__imgwdb1_extra {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
  border: 5px solid #2b2b2b; /*adds the scrapbook colour to the element */
}

.gallery__item--Joke_FH {   /*there is an issue that the modal is not responding */
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

.gallery__item--speak_FH {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
}

.gallery__item--wdb1vid1{
  grid-column-start: 5;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 3;
}

.gallery__item--wdb1vid1 img{
	-webkit-filter: grayscale(100%); /* safari 6.0 - 9.0 */ 
	filter: grayscale(100%);
}


/* in between quiet act and weird decibels 1 -------------------*/

.Bootleg {
	padding-top: 1.5rem;
	background: black;
}
.container {
	width: 100%;
}

.galleryBootleg {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(2, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__imgBootleg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

.gallery__item--Soldcover {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid #e9b825;
}

.gallery__item--Bootleg2cover {
  grid-column-start: 7;
  grid-column-end: 10; 
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid #afafaf;
}

.gallery__item--Bootleg1cover {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid #afafaf;
}

.gallery__item--Easycover {
  width: 92%;
  grid-column-start: 5;
  grid-column-end: 7; 
  grid-row-start: 1;
  grid-row-end: 3;
  border: 5px solid #4d5469;
}

/* quiet act section ------------------------------- */

.Qact{
	padding-top: 1.5rem;
	background: black;
}

.container {
  width: 100%; /*determins the size of the container in whxih the february gallery in held. 100% takes up full screen */ 
} 

.galleryQact {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(1, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__imgQact {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

.gallery__item--Qactcover {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 7;
  border: 5px solid #495036;
}

.gallery__item--Livelodge {
  grid-column-start: 7;
  grid-column-end: 10; 
  grid-row-start: 1;
  grid-row-end: 3;
  border: 5px solid #4e5432;
}

.gallery__item--QA_Gal {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 3;
   border: 5px solid #4e5432;
}


/* .gallery__item--# { */
  /* grid-column-start: 1; */
  /* grid-column-end: 4; */
  /* grid-row-start: 4; */
  /* grid-row-end: 7; */
/* } */

/* riot act section ------------------------------------- */

.Ract{
	padding-top: 1.5rem;
	background: black;
}

.container {
  width: 100%; /*determins the size of the container in whxih the february gallery in held. 100% takes up full screen */ 
} 

.galleryRact {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(1, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__imgRact {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

.gallery__item--Ractcover {
  grid-column-start: 7;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 7;
  border: 5px solid #c98b87;
}

.gallery__item--Ract_Cavern {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 4;
  grid-row-end: 6;
  border: 5px solid #c98b87;
}

.gallery__item--Ract_gal {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid #c98b87;
}

.gallery__item--RactHerald {
  grid-column-start: 1;
  grid-column-end: 4; 
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid #c98b87;
  cursor: pointer;
  transition: 0.1s;
}
/* this is for the modal effect */
.modal-open:hover {opacity: 0.7;}
								/* code for the modals --------------------------------------- */
.modal{
	display: none; /*hidden by default */
	position: fixed;
	z-index: 1;	/* brings it two levels up */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	color: white;
	overflow: auto; /*enable scroll if needed */ 
}

.modal-content{
	background: white;
	margin-top: 50px;
	/* width: 100%; */
	/* height: 100%; */
	margin-left: auto;
	margin-right: auto;
	padding: 8px 24px;
	border-radius: 4px;
}

.modal-content img {
	height: 100%;
	width: 100%;
	object-fit: contain; 
}

.modal-header{
	font-weight: 500;
	padding: 10px 0;
	font-size: 26px;
	background: purple;
	z-index: 5;
}

.modal-header .modal-close{
	float: right;
	font-size: 20px;
	background: #efefef;
	border: 0;
	outline: 0;
	padding: 5px 8px;
	border-radius: 50%;
}
/*add a close button at a later date */ 
.modal-footer{
	padding: 15px 0;
}

.modal-footer .modal-close{
	padding: 8px 16px;
	font-size: 14px;
	border: none;
	outline: none;
	border-radius: 4px;
	color: #1a73e8;
}

.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: white;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.close:hover,
.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

/*
.gallery__item--# {
  grid-column-start: 1;
  grid-column-end: 4; 
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid #;
}

/* one more solo section  ---------------------------- */
.OMS{
	padding-top: 1.5rem;
	background: black;
}

.container {
  width: 100%; /*determins the size of the container in whxih the february gallery in held. 100% takes up full screen */ 
} 

.galleryOMS {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(1, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__imgOMS {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

.gallery__item--OMScover {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 7;
  border: 5px solid #d2af78;
}

.gallery__item--OMSHerald {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 1;
  grid-row-end: 3;
  border: 5px solid #d2af78;
  cursor: pointer;
  transition: 0.1s;
}

/* .gallery__item--OMSHerald:hover {opacity: 0.7;} */



/* coldhome street section------------------------- */
.Cold{
	padding-top: 1.5rem;
	background: black;
}

.container {
  width: 100%; /*determins the size of the container in whxih the february gallery in held. 100% takes up full screen */ 
} 

.galleryCold {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(1, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__imgCold {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

.gallery__item--Coldcover {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 7;
  border: 5px solid #93bfbb;
}

.gallery__item--Cold_Gallery {
  grid-column-start: 7;
  grid-column-end: 11;
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid #93bfbb;
}

.gallery__item--Cold_Gallery2 {
  grid-column-start: 11;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid #93bfbb;
}
/* Firkin outburst section ------------------------ */
.Firkin{
	padding-top: 1.5rem;
	background: black;
}

.container {
  width: 100%; /*determins the size of the container in whxih the february gallery in held. 100% takes up full screen */ 
} 

.galleryFirkin {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(1, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__imgFirkin {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

.gallery__item--Firkincover {
  grid-column-start: 7;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 7;
  border: 5px solid #413027;
}

.gallery__item--Fir_gallery {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 6;
  border: 5px solid #413027;
}


/* Whapper Stormer section ------------------- */

.Whapper{
	padding: 1.5rem 0rem 1.5rem 0rem;
	background: black;
}

.container {
  width: 100%; /*determins the size of the container in whxih the february gallery in held. 100% takes up full screen */ 
} 

.galleryWhapper {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(1, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__imgWhapper {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

.gallery__item--Whappercover {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 7;
  border: 5px solid #4e5c69;
}

.gallery__item--RainVid {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid #4e5c69;
}

.gallery__item--WhapperSlide {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 7;
  border: 5px solid #4e5c69;
}

.gallery__item--martel1 {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 4;
  grid-row-end: 7;
  border: 5px solid #4e5c69;
}

.gallery__item--martel2 {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid #4e5c69;
}

.gallery__item--whap_gal {
  grid-column-start: 13;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: 4;
  border: 5px solid #4e5c69;
}

/* smaller screen adaption  */

@media screen and (max-width: 600px) {
	.header{
	display: none;
	}
}

@media only screen and (max-width: 700px){
	.modal-content {
		width: 100%;
	}
}

/* colour codes

whapper #4e5c69
firkin #413027
coldhome #24373c
oms #d2af78
ra #4a4041
qa #495036
wdb1 black
wdb2 red