@charset "utf-8";
/* CSS Document */

/* --------------- Page Grid --------------- */
.container {
    display: grid;
    /* grid-gap: 10px; */
    grid-template-rows: auto 90px 350px 550px 40px;
    grid-template-columns: repeat(6, 1fr); /* Ignore error */
}
.contact-bar {grid-column: 1 / -1;}
.header {grid-column: 1 / -1;}
.header > div:nth-child(1) {margin-left: auto;}
.parallax {grid-column: 1 / -1;}
.left-img {grid-column: 1 / 4;}
.content {grid-column: 4 / -1;}
#contact-list {grid-column: 4 / -1;}
.footer {grid-column: 1 / -1;}

/* --------------- Media Queries --------------- */
/* Tablet Portrait: add hamburger menu */
@media only screen and (max-width: 768px) {
	.container {grid-template-rows: auto 90px 300px 400px 40px;}
	.container {
		grid-template-areas: 
			"c c c c c c"
			"h h h h h h"
			"p p p p p p"
			"i i i i i i"
			"f f f f f f"
	}
	.header, .parallax, .left-img, .content footer {
		grid-column: 1 / -1;
	}
	.content {
		grid-column: 1 / -1;
		z-index: 1;
		grid-area: i;
	}
	#contact-list {
		grid-column: 1 / -1;
		z-index: 1;
		grid-area: i;
		background: linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.2));
	}
	.left-img {
		grid-area: i;
	}
}