/* Utilities */
.gallery-container {
	grid-gap: 0.5rem;
}

.about-banner-container .l-heading, 
.digital-banner-container .l-heading, 
.traditional-banner-container .l-heading  {
	font-size: 3rem;
}

.about-banner-container .m-heading, 
.digital-banner-container .m-heading {
	font-size: 1.5rem;
}

.traditional-banner-container .m-heading {
	font-size: 1.5rem;
	padding: 0 0.5rem;
}


.about-banner-container .s-heading, 
.digital-banner-container .s-heading, 
.traditional-banner-container .s-heading {
	font-size: 1rem;
}

.gallery-container,
.gallery {
	grid-template-columns: repeat(2, 1fr);
}

.container {
	margin: 0;
}

.thumb-comment {
	display: flex;
	flex-direction: columns;
	justify-content: center;
	align-items: center;
	align-self: center;
}

.thumb {
	display: none;
}

.gallery-comment p {
	font-size: 1rem;
}


/* Navigation */
nav {
	position: static;
}

#navbar {
	flex-direction: column;
	/* border-bottom: none; */	/* When we figure out menu, we change this back to none */
	background: var(--nav-bg-color);
	overflow: hidden;	/* To prevent scollbar */
}

#navbar .title {
	align-self: center;
}

#navbar ul li a {
	color: var(--fg-color);
	padding: 0.75rem;
	margin: 0 0.25rem;
	text-decoration: none;
}

#navbar .title-social {
	justify-content: center;
	align-self: center;
}

#navbar .title-social .nav-social {
	display: none;
}

#navbar .nav-social-mobile {
	display: flex;
	align-self: center;
	align-items: center;
	list-style: none;
	z-index: 2;
	margin-top: -0.4rem;
	margin-bottom: 0.5rem;
	border-top: none;
}


#navbar .nav-social-mobile li a {
	font-size: 0.5rem;
	padding: 0.3rem 0.5rem 0.3rem 0.5rem;
}

#navbar .nav-social-mobile li a:hover {
	background: var(--fg-color);
	color: var(--nav-bg-color);
	padding: 1.2rem 0.75rem 0.5rem 0.75rem;
	border-radius: 5px;
}

/*
#navbar .nav-hamburger {
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
	padding: 0.25rem 100vw;
	z-index: 2;
	background: var(--nav-bg-color);
	border-top: var(--fg-color) solid 1px; 
	border-bottom: var(--fg-color) solid 1px; 	
}

#navbar .nav-hamburger a {
	color: var(--fg-color);
	padding: 0.25rem 0.5rem;
	margin: 0 1rem;
	text-decoration: none;
}

#navbar .nav-hamburger a:hover {
	background: var(--fg-color);
	color: var(--nav-bg-color);
	border-radius: 5px;
	
}
*/

#navbar2 {
	visibility: hidden;
}

#navbar2 .nav-options {
	display: none;
}


#navbar3 {
	z-index: 2;
	/* padding: 1.5rem; */
	border-bottom: none;
	overflow: hidden;	/* To prevent scollbar */
}

#navbar3 .nav-options {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	list-style: none;
	z-index: 2;
	background: var(--nav-bg-color);
	/*visibility: hidden;*/		/* Hamburger */
	border-top: none;
}

#navbar3 .nav-options li a {
	color: var(--fg-color);
	padding: 0.25rem 0.5rem;
	margin: 0 1rem;
	text-decoration: none;
}

#navbar3 .nav-options li a:hover {
	background: var(--fg-color);
	color: var(--nav-bg-color);
	border-radius: 5px;
}

#navbar3 .nav-options li a.current, 
#navbar3 .nav-options li ul li a.current {
	background: var(--nav-select-color);
	color: var(--nav-bg-color);
}

#navbar3 .nav-options > li {
	padding: 0.75rem 100vw;
	margin: 0 1rem;
	border-bottom: var(--fg-color) dotted 1px; 
}

#navbar3 .nav-options > li:last-child {
	border-bottom: var(--fg-color) solid 1px; 
}

#navbar3 .nav-options {
	/* move links up to the top */
}


/* Dropdowns */
#navbar3 > ul li ul { 
	visibility: hidden;
	display: flex;
	flex-direction: column;
	background-color: var(--nav-bg-color); 
	list-style: none;
	position: absolute; 
	z-index: 6; 
}

#navbar3 > ul li ul li {
	padding: 1rem 0.5rem;
	width: 15rem;
	border-top: var(--fg-color) solid 1px; 
	border-left: var(--fg-color) solid 1px; 
	border-right: var(--fg-color) solid 1px; 
}

#navbar3 > ul li ul li:last-child {
	border-bottom: var(--fg-color) solid 1px; 
}
 
 
#navbar3 > ul li ul li a { 
	text-decoration: none;  
	color: var(--fg-color); 
}

/* Showcase */
#showcase {
	background: #333 url('../images/HomeNav/ClawMachineLanding.jpg') no-repeat center center/cover;
	height: 60vh;
	color: #fff;
	/*margin-top: -15.35rem;*/		/*Hamburger*/
}

#showcase .showcase-content {
	
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	align-items: center;
	height: 60vh;
	padding: 0 2rem;
	/* Overlay */
	position: absolute;
	/*top: 110px;*/			/* Hamburger */
	/*top: 315px;*/			/* Five Tabs */
	top: 363px;			/* Six Tabs */
	/*top: 413px;*/			/* Seven Tabs */
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.6);
}

#showcase .showcase-content a {
	text-decoration: none;
}

#showcase .showcase-content img {
	margin-top: 1rem;
	width: 90%;
}

#home-gallery .home-gallery-container {
	grid-template-columns: repeat(2, 1fr);
}



/* About */
#about-section .about-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.about-content-item:nth-child(1)  {
	margin-top: 0;
}

#about-section .about-content img{
	display: block;
	width: 80%;
	margin: 0 auto;
}

#about-section .about-content p {
	font-size: 1rem;
}



/* Digital Art */



/* Traditional Art */



/* Character Design */
#characterdesign-gallery {
	display: none;
}

#characterdesign-gallery-mobile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}




/* Collaterals */
.banners-gallery-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
}



/* Java Cup */
#javacup-section .javacup-content {
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1rem;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.javacup-content-item:nth-child(1)  {
	grid-column: 1 / span 2;
}



/* New Challenger */
#newchallenger-section .newchallenger-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#ncapparel-gallery {
	display: none;
}

#ncapparel-gallery-mobile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}



/* Pearly Whites */
#pearlywhites-section .pearlywhites-content {
	display: flex
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}



/* Roll Call */
.rollcall-content-item-screen {
	display: none;
}

.rollcall-content-item-mobile {
	display: block;
}

#rollcall-section .rollcall-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.rollcall-content-item-img {
	margin-top: 4rem;
}



/* Self-Made Empire */
#selfmade-section .selfmade-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.selfmadebroc-gallery-container {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 1rem;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.selfmade-gallery-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1rem;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.selfmade-gallery-item:last-child {
	grid-column: 1 / span 2;
}



/* LITE Logo */
#litelogo-gallery {
	display: none;
}

#litelogo-gallery-mobile {
	display: block;
	margin-top: -6rem;
}

#litelogo-gallery-mobile .litelogo-gallery-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-content: center;
	align-items: center;
	text-align: center;
}



/* Publications */
#shinobi-gallery .shinobi-gallery-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1rem;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-bottom: 3rem;
}

#shinobi-gallery .shinobi-gallery-container img {
	width: 120%;
}

.shinobi-content-item {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 1rem;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-bottom: 3rem;
}

#shinobi-samples-gallery .gallery {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 1rem;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#shinobi-samples-gallery {
	margin-top: -4rem;
}

#healthehood-gallery .healthehood-gallery-container {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 1rem;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#healthehood-samples-gallery {
	margin-top: -7rem;
}

#healthehood-gallery .healthehood-gallery-container img {
	width: 70%;
}



/* Contact */
#contact-section .contact-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#contact-questions {
	margin-bottom: 1rem;
}

.form-wrap .form-group {
	width: 70vw
}




/* Footer */
#main-footer .footer-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	text-align: center;
	margin-top: -1rem;
}



#main-footer .footer-content .footer-content-item img {
	max-width: 250px;
}



#main-footer .footer-content .footer-content-item img {
	width: 80%;
}


#main-footer .footer-content .footer-social ul {
	margin-top: 1rem;
}


#main-footer .footer-content .footer-credits ul {
	margin-top: 1rem;
	margin-bottom: 2rem;
}


@media (max-width: 375px) {
	
	#navbar3 > ul li ul li {
		padding: 0.7rem 0.2rem;
		width: 14rem;
	}
	
}