html,body {height:100%; margin:0; font-family:sans-serif; font-weight:200;}

div#navbar {position:absolute; top:0; left:0; right:0; height:80px; background-color:rgba(39,39,39,0.9); z-index:10; transition:height .2s;}
div#navbar.active {position:fixed; animation:navSlidin 1s 1;}
@keyframes navSlidin { from {top:-60px;} to {top:0;} }
div#navbar div.content {height:100%; max-width:1600px; margin:0 auto; padding:0 3em;}
div#navbar div.content div.logo {display:inline-block; height:100%;}
div#navbar div.content div.logo img {height:100%; box-sizing:border-box; padding:1em 0; transition:padding .2s;}
div#navbar div.content div.menu {display:inline-block; height:100%; float:right; color:#FFF; text-transform:uppercase; position:relative;}
div#navbar div.content div.menu>div {user-select:none; cursor:pointer;}
div#navbar div.content div.menu div.link {height:100%; box-sizing:border-box; display:inline-flex; justify-content:center; align-items:center; padding-right:2rem; font-size:.7em; letter-spacing:.3em;}
div#navbar div.content div.menu div.link:hover {color:orange;}
div#navbar div.content div.menu div.handle {display:inline-block; display:none; width:27px; height:20px; position:absolute; right:0; top:50%; transform:translateY(-50%);}
div#navbar div.content div.menu div.handle div.bar {position:absolute; width:100%; height:3px; background-color:rgba(200,200,200,0.5); border-radius:30px;}
div#navbar div.content div.menu div.handle div.bar:nth-child(1) {top:0;}
div#navbar div.content div.menu div.handle div.bar:nth-child(2) {top:50%; transform:translateY(-50%);}
div#navbar div.content div.menu div.handle div.bar:nth-child(3) {bottom:0;}

div#container {margin-top:80px; transition:margin .2s;}
div#container {box-sizing:border-box; display:grid; grid-template-columns:auto auto auto; grid-gap:5px; /*padding:4px;*/ background-color:#FFF;}
div#container div.item {background-color:dodgerblue; background-color:rgba(0,0,0,0.25); position:relative; letter-spacing:.3em; color:#FFF; user-select:none;}
div#container div.head.item {text-align:center; grid-column:1/span 3; height:500px; font-size:2rem; text-transform:uppercase;}
div#container div.head.item {display:flex; justify-content:center; align-items:center;}
div#container div.head.item {background:url('np3.jpg') top no-repeat fixed; background-size:cover; box-shadow:inset 0px 0px 0px 9999px rgba(255,255,255,0.5);}
div#container div.grid.item {text-align:center; padding-top:67.5675675%;}
div#container div.grid.item a {position:absolute; height:100%; width:100%; top:0; left:0; display:flex; justify-content:center; align-items:center;}
div#container div.grid.item a {font-size:1.25rem; background-color:rgba(255,255,255,0.5); color:#FFF; text-decoration:none; opacity:0; transition:.5s;}
div#container div.grid.item a:hover {opacity:1;}
div#container div.grid.item a div.caption {position:relative; top:0;}
div#container div.grid.item a:hover div.caption {top:0; animation:capSlidin .75s 1;}
@keyframes capSlidin { from {top:.5em;} to {top:0;} }
div#container div.foot.item {text-align:left; grid-column:1/span 3; min-height:375px;}
div#container div.foot.item div.content {box-sizing:border-box; height:100%; max-width:1600px; margin:0 auto; padding:4em 6em; display:grid; grid-template-columns:33.333% 33.333% 33.333%; /*grid-column-gap:10px;*/}
div#container div.foot.item div.content div.col {display:inline-block; /*width:33.333%;*/ grid-column:1 span 3; background-color:rgba(0,128,0, 0.5); text-align:center;}
/*div#container div.foot.item div.content div.col div.logo {width:100%;}*/
/*div#container div.foot.item div.content div.col div.logo img {width:100%;}*/

/* Television (xl) */
@media screen and (min-width:1200px) {
}
/* Desktop (lg) */
@media screen and (max-width:1199px) {
	div#navbar {height:72px;}
	@keyframes navSlidin { from {top:-52px;} to {top:0;} }
	div#navbar div.content {padding:0 5em;}
	div#navbar div.content div.logo img {padding:.85em 0;}
	div#navbar div.content div.menu div.link {display:none;}
	div#navbar div.content div.menu div.handle {display:inline-block;}
	div#container {margin-top:72px;}
	/*div#container div.foot.item div.content div.col {width:33.333%;}*/
}
/* Laptop (md) */
@media screen and (max-width:991px) {
	div#navbar div.content {padding:0 3em;}
	div#container {grid-template-columns:auto auto;}
	div#container div.head,
	div#container div.foot {grid-column:1/span 2;}
	div#container div.foot.item div.content {padding:2em;}
	/*div#container div.foot.item div.content div.col {width:50%;}*/
}
/* Tablet (sm) */
@media screen and (max-width:767px) {
	div#navbar div.content {padding:0 2em;}
	div#container {grid-template-columns:auto;}
	div#container div.head,
	div#container div.foot {grid-column:1/span 1;}
	/*div#container div.foot.item div.content div.col {width:100%;}*/
}
/* Mobile (xs) */
@media screen and (max-width:575px) {
	div#navbar div.content {padding:0 1em;}
}
/* Mini Mobile (xxs) */
@media screen and (max-width:300px) {
}