m@charset "UTF-8";
/* CSS Document */
.grid-containernav {
  	display: grid;
	grid-template-columns: repeat(12,minmax(0, 1fr));
  	gap: 8px;
  	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.grid-containernav > div {
	vertical-align: text-top;
	padding:  0px 0px 0px 0px;

}

.grid-container {
  	display: grid;
	grid-template-columns: repeat(12,minmax(0, 1fr));
  	gap: 8px;
  	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.grid-container > div {
	vertical-align: text-top;
	padding:  0px 24px 0px 24px;

}


/* For desktop: */
.col-1 {grid-column-end: span 1;}
.col-2 {grid-column-end: span 2;}
.col-3 {grid-column-end: span 3;}
.col-4 {grid-column-end: span 4;}
.col-5 {grid-column-end: span 5;}
.col-6 {grid-column-end: span 6;}
.col-7 {grid-column-end: span 7;}
.col-8 {grid-column-end: span 8;}
.col-9 {grid-column-end: span 9;}
.col-10 {grid-column-end: span 10;}
.col-11 {grid-column-end: span 11;}
.col-12 {grid-column-end: span 12;}

.col-12-sectionsplit {grid-column-end: span 12; height:16px; background-color: #f8f8f8;}
.col-12-spacer {grid-column-end: span 12; height:24px; }
.col-6-spacer {grid-column-end: span 6; height:24px; }
.col-4-centre {grid-column-end: span 4; text-align: center; align-content: center; justify-content: center; align-items: center; }
.col-4-centreb {grid-column-end: span 4; text-align: center; align-content: center; justify-content: center; align-items: center; display: flex;}
.col-3-span3 {grid-area: 1 / 1 /span 3 / span 3}

#ProjectBody{padding: 24px 24px 0px 24px;}

#AboutPhoto {
	background-image: url("../images/about_photo.jpg");
	background-repeat: no-repeat ;
	background-position: top left;
	background-size: contain;
	min-height: 600px;}

#MeMoUsability {
	background-image: url("../images/MeMoUsability.png");
	background-repeat: no-repeat ;
	background-position: top left;
	background-size: contain;
	min-height: 300px;}

#MeMoUsability2 {
	background-image: url("../images/MeMoUsability2.png");
	background-repeat: no-repeat ;
	background-position: top left;
	background-size: contain;
	min-height: 300px;}

#imgMeMoMockups {
	background-image: url("../images/MeMoMockups.png");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	min-height: 400px;}

#imgMeMoWorkshop1 {
	background-image: url("../images/MeMoWorkshopDay1.png");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	min-height: 400px;}

#imgMeMoWorkshop2 {
	background-image: url("../images/MeMoWorkshopDay2.png");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	min-height: 400px;}




#imgMeMoWorkshop3 {
	background-image: url("../images/MeMoWorkshopDay3.png");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	min-height: 400px;}

#imgMeMoIA {
	background-image: url("../images/MeMoIA.png");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	padding: 56px 0px 0px 0px;
	min-height: 400px;}

#imgMeMoCrazy {
	background-image: url("../images/MeMoCrazy.jpg");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	padding: 56px 0px 0px 0px;
	min-height: 300px;}

#imgMeMoHiFi {
	background-image: url("../images/MeMoHiFiPrototype.png");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	padding: 56px 0px 0px 0px;
	min-height: 400px;}

#BurgeryHiFi {
	background-image: url("../images/Burgery_Hi-Fi.png");
	background-repeat: no-repeat ;
	background-position: top left;
	background-size: contain;
	min-height: 300px;}

#BurgeryWireframes {
	background-image: url("../images/Burgery_Wireframes.png");
	background-color: #e5e5e5;
	background-repeat: no-repeat ;
	background-position: top left;
	background-size: contain;
	min-height: 300px;}

#BurgeryChanges {
	background-image: url("../images/BurgeryChanges.png");
	
	background-repeat: no-repeat ;
	background-position: top left;
	background-size: contain;
	min-height: 300px;}

#BurgerySummary {
	background-image: url("../images/BurgerySummary.png");
	background-color: #000000;
	background-repeat: no-repeat ;
	background-position: center;

	background-size: contain;
	min-height: 600px;
}

#CallistoSummary {
	background-image: url("../images/CallistoSummary.png");
	background-color: #dbbed4;
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	min-height: 600px;
}

#EIHLSummary {
	background-image: url("../images/EIHLSummary.png");
	background-color: #FFFFFF;
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	min-height: 600px;
}

#MeMoSummary {
	background-image: url("../images/MeMoSummary.png");
	background-color: #ffdf89;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	min-height: 400px;
	width: 100%;
	}


#CallistoWireframes {
	background-image: url("../images/Callisto_Wireframes.png");
	background-color: #e5e5e5;
	background-repeat: no-repeat ;
	background-position: top left;
	background-size: contain;
	min-height: 300px;}

#CallistoHiFi {
	background-image: url("../images/Callisto_HiFi.png");
	background-repeat: no-repeat ;
	background-position: top left;
	background-size: contain;
	min-height: 300px;}

#CallistoHiFiMock {
	background-image: url("../images/Callisto_HiFiMock.png");
	background-repeat: no-repeat ;
	background-position: top center;
	background-size: contain;
	min-height: 800px;}

#GoogleCert {
	background-image: url("../images/google-ux-design-professional-certificate.1.png");
	background-repeat: no-repeat ;
	background-position: top left;
	background-size: contain;
	min-height: 100px;}

@media only screen and (max-width: 1100px) {
  /* For mobile phones: */
  [class*="col-"] {grid-column-end: span 12;}

}


#LHB-Logo {
	background-image: url("../images/Play-LHB-Logo.jpg");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	padding: 56px 0px 0px 0px;
	min-height: 200px;}

#LHB-A {
	background-image: url("../images/Play-LHB-A.jpg");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	padding: 0px 0px 0px 0px;
	min-height: 300px;}

#LHB-B {
	background-image: url("../images/Play-LHB-B.jpg");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	padding: 0px 0px 0px 0px;
	min-height: 300px;}

#LHB-C {
	background-image: url("../images/Play-LHB-C.jpg");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	padding: 0px 0px 0px 0px;
	min-height: 300px;}

#Visual-A {
	background-image: url("../images/Play-VisualA.jpg");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	padding: 0px 0px 0px 0px;
	min-height: 400px;}

#Visual-B {
	background-image: url("../images/Play-VisualB.jpg");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	padding: 0px 0px 0px 0px;
	min-height: 400px;}

#Visual-C {
	background-image: url("../images/Play-VisualC.jpg");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	padding: 0px 0px 0px 0px;
	min-height: 400px;}

#Visual-D {
	background-image: url("../images/Play-VisualD.jpg");
	background-repeat: no-repeat ;
	background-position: center;
	background-size: contain;
	padding: 0px 0px 0px 0px;
	min-height: 400px;}

/* The navbar container */
.topnav {
 	overflow: hidden;
  	background-color: #ffffff;
	width: 100%;
	padding: 0px 48px 0px 24px;
	position: fixed;
	top: 0px;
	left: 0px;
	border-bottom: 1px solid #f8f8f8;
	   
}

/* Navbar links */


.topnav a {
  float: left;
  display: block;
  color: #000000;
  text-align: left;
  padding: 22px 16px 16px 16px;
  text-decoration: none;

}
/* Links - change color on hover */
.topnav a:hover {
  background-color: #f8f8f8;
  color: black;
}

.topnav a.active {

 color: #C8C8C8;
}

.topnav a.active:hover {
	background-color: #ffffff;

}
.topnav a.mainlogo:hover {

	background-color: #ffffff;
}

.topnav a.mainlogo {
	color: #000;
	font-weight: normal;
	float: left;
	display: block;
	letter-spacing: 4px;
	font-family: 'raleway', sans-serif; 
	font-size: 1.4em;
	background-color: #ffffff;
	padding: 16px 16px 16px 16px;
}
.topnav a.mainlogoimg {
padding: 0px 0px 16px 0px;
}

.topnav a.mainlogoimg:hover {

	background-color: #ffffff;
}


/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 1100 pixels wide, hide all links, except for the first one ("Christine Simpson Design"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1100px) {
	.grid-containernav {display:block}
	.topnav a.mainlogo {display: block;font-size: 1.2em; padding:18px 0px 0px 24px;}
	.topnav a.mainlogoimg {display: block;padding:0px 0px 0px 24px;}
	.topnav a {display: none;}
	.topnav{padding: 0px 48px 0px 0px;}
  .topnav a.icon {
    display: block;
	float: right;
  }
}

@media screen and (max-width: 600px) {
	.topnav a {display: none;}
	.topnav{padding: 0px 4px 4px 0px;}
	.topnav a.mainlogo {display: block; font-size: 0.8em; padding:24px 0px 0px 0px;}
	.topnav a.mainlogoimg {display: block; padding:8px 24px 0px 24px;}
  .topnav a.icon {
   float: right;
   display: block;

  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1100px) {
  .topnav.responsive{position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
	float: right;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
	
	.topnav.responsive a.mainlogo {display: block; font-size: 0.8em; padding:24px 0px 0px 0px;}
	.topnav.responsive a.mainlogoimg {display: block; padding:8px 24px 0px 24px;}

}
	 


.logo a {
	
	float: left;
  	display: block;
  	color: #000000;
  	text-align: left;
  	padding: 16px 16px ;
  	text-decoration: none;
	
}





header {
	width: 100%;
	height: 48px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #2C9AB7;
}



.projquestion {
padding: 160px 160px 00px 0px;	
color: #ffffff;
font-weight:900;
font-size: 1.6em;
max-width: 65%;
}

.projtag {
padding: 16px 0px 64px 0px;	
font-weight: 200;
max-width: 40%;
}

#eihl {
background-color: #d4d4d4;	
background-image: url("../images/EIHLHeader.png");
background-repeat: no-repeat ;
background-position: bottom right;
	
	background-size: contain;
}


#burgery {
background-color: #92d3d8;	
background-image: url(../images/BurgeryHeader.png);
background-repeat: no-repeat ;
background-position: bottom right;
	
	background-size: contain;
}

#burgery2 {
background-color: #92d3d8;	
background-image: url("../images/BurgeryHeader2.png");
background-repeat: no-repeat ;
background-position: bottom right;
	
	background-size: contain;
}

#memo {
background-color: #ffdf89;	
background-image: url("../images/MeMoHeader2.png");
	background-repeat: no-repeat ;
background-position: bottom right;

	background-size: contain;
}

#callisto {
background-color: #dbbed4;	
background-image: url("../images/CallistoHeader.png");
	background-repeat: no-repeat ;
		background-position: bottom right;
	background-size: contain;
}

#callistomain {
background-color: #dbbed4;	
background-image: url("../images/CallistoHeaderMain2.png");
	background-repeat: no-repeat ;
		background-position: bottom right;
	background-size: contain;
}

#eihlmain {
background-color: #d4d4d4;	
background-image: url("../images/EIHLHeader.png");
	background-repeat: no-repeat ;
		background-position: bottom right;
	background-size: contain;
}


.footer {
  background-color: #f8f8f8;
  text-align: center;
  padding: 16px 24px 16px 24px;}