/* CSS Document */

/*** === MEDIA QUERIES === ***/


/*** === FONTS + VARIABLES === ***/

@font-face {
    font-family: "Gotham"; 
    src: url("../fontz/GothamRnd-Light.woff") format('woff');
	font-weight: 200;
	font-style: normal;
	}

@font-face {
    font-family: "Gotham";
    src: url("../fontz/GothamRnd-Book.woff") format('woff');
	font-weight: 400;
	font-style: normal;
	}

	@font-face {
		font-family: "Gotham";
		src: url("../fontz/GothamRnd-BookItal.woff") format('woff');
		font-weight: 400;
		font-style: italic;
		}

@font-face {
    font-family: "Gotham";
    src: url("../fontz/GothamRnd-Medium.woff") format('woff');
	font-weight: 600;
	font-style: normal;
	}

@font-face {
    font-family: "Gotham";
    src: url("../fontz/GothamRnd-Bold.woff") format('woff');
	font-weight: 800;
	font-style: normal;
	}

	@font-face {
		font-family: "Gotham";
		src: url("../fontz/GothamRnd-BoldItal.woff") format('woff');
		font-weight: 800;
		font-style: italic;
		}

:root {
	--cenceOLIVE: rgba(65,70,43,1);
		--cenceOLIVEalpha: rgba(65,70,43,0);
	--cenceGREEN: rgba(167,189,176,1);
	--cenceGRAY: rgba(148,148,148,1);
		--cenceGRAY-OLIVE: rgba(87,91,77,1);
	--cenceGRAYmatchGREEN: rgba(189,189,189,1);
	--cenceDkGRAY: rgba(112,112,112,1);
	--cencePINK: rgba(244,183,172,1);
		--cencePINKalpha: rgba(244,183,172,.5);
	--cenceORANGE: rgba(239,77,35,1);
	}

/*** === ELEMENTS === ***/

html {
	font-size: 100%;
 	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100%;
	margin: 0;
	position: relative;
	background-color: var(--cenceOLIVE);
}

html:before {
  content: '';
  position: fixed;
  width: 100%;
  height: 999px;
  top: -999px;
  background-color: blue;
}

body {
	height: 100%;
	margin: 0;
	/*background: var(--cenceOLIVE) url("../identity/BGhex.png") center/47px repeat fixed;*/
	animation: SplashBAG 1s;
}	

header {
	margin: 0rem auto 0rem auto;
	text-align: center;
	width: auto;
	height: 16rem;
	position: sticky;
 	position: -webkit-sticky;
	top: 0rem;
	background: linear-gradient(180deg, var(--cenceOLIVE) 70%, var(--cenceOLIVEalpha) 100%);
	z-index: 100;
}

	.splashHeader {
		margin: 25vh auto 100vh auto;
	}

		.badgeLogo {
			height: 8rem;
			margin: 1rem auto 0rem auto;
			transition: height 2s;
			animation: OpacityFadeIn 2s 0s both;
			transform: translateZ(0);				
			backface-visibility: hidden;
		}

			#splashLogo {
				height: 50vh;
				animation: OpacityFadeIn 4s 0s both;
			}
	
			#splashTag {
				height: 10vh;
				transition: opacity 4s 0s;
				animation: OpacityFadeIn 4s 2s both;
			}

nav {
    font: normal 400 1.5rem "Gotham", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	margin: 0rem auto 2rem auto;
	text-align: center;
	width: auto;
	height: auto;
	color: rgba(255,255,255,0.6);
	animation: OpacityFadeIn 2s 1s both;
}	

		#splashNav {
			opacity: 0;
			transition: opacity 4s 2s;
		}

	.NavTag {
		text-align: center;
			position: absolute;
			left: 0;
			right: 0;
		opacity: 0;
		transition: opacity 3s;
	}

		.ghost {opacity: 0;}

		#work:hover + #SERVICES {
			opacity: .2;
			transition: opacity 1s;
		}

		#shop:hover + #GOOD {
			opacity: .2;
			transition: opacity 1s;
		}

main {
	width: auto;
	margin-bottom: 12rem;
	font: normal 400 1rem "Gotham", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: var(--cencePINK);
}

		main img {
			display: block;
			margin: auto;
		}

	.stage {
		width: 60%;
		max-width: 600px;
		margin: 1rem auto 0 auto;
		position: relative;
	}



.TextPanel {
	margin: 6rem 5vw 28rem 5vw;
}

.LASER .TextPanel {color: var(--cenceORANGE);}

	.TextNug {
		margin-bottom: 14rem;
	}

		.Definition {
			margin-left: 5vw;
			color: white;
			opacity: .6;
		}

			.Definition p, .Definition i, .Definition p b {
				font-size: .8rem;
			}

		.graphicScroll {
			width: 80vw;
			max-width: 20rem;	
			margin-top: 14rem;
		}
		.NugGraphic {
			margin: 0 auto 2rem auto;
		}
			#graphicConductor {
				width: 60vw;
			}
			#graphicMission {
				height: 6rem;
			}
			#graphicLASER {
				height: 3rem;
				transition: transform .4s;
			}
				#graphicLASER:hover, #graphicLASER:focus {
					transform: rotate(-12deg);
				}
			#graphicLASERserv {
				width: 60vw;
				transition: transform .4s;
			}

		.senseRow {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: nowrap;
			align-items: flex-start;
			margin: 1rem 0 0rem 0;
		}
	
			.senseIcon {
				display: flex;
				margin: 0rem 0.5rem 0rem 0.5rem;
				background-color: aqua;
				width: 5rem;
				height: 5rem;
			}

				.senseIcon img {
					width: 100%;
					height: auto;
					opacity: 0;
					margin: auto;
					transition: opacity 1.4s;
				}

.senseIcon:hover img {opacity: .8;}

	#see {background: url("../identity/senseSee.png") no-repeat center/contain;}
	#hear {background: url("../identity/senseHear.png") no-repeat center/contain;}
	#feel {background: url("../identity/senseFeel.png") no-repeat center/contain;}
	#smell {background: url("../identity/senseSmell.png") no-repeat center/contain;}
	#taste {background: url("../identity/senseTaste.png") no-repeat center/contain;}

.PortfoPanel {
	position: relative;
}

	.PortfoPanel h2 {
		margin: 0 0 0 5vw;
		color: var(--cenceGRAY);
		opacity: 1;
	}
	.PortfoPanel h2::after {
		content:"DESIGN";
		opacity: .2;
	}

	.PortfoStripe {
		height: 28rem;
		width: 95vw;
		margin: 0 0 25vh 5vw;
		right: 0;
		background-color: var(--cenceGRAY);
		display: flex;
		align-items: center;
		overflow: scroll;
		border-radius: 1rem 0 0 7rem;
		border-top: .4rem solid var(--cenceGRAY-OLIVE);
		border-left: .4rem solid var(--cenceGRAY-OLIVE);
		border-bottom: .4rem solid var(--cenceGRAY-OLIVE);
		z-index: 100;
		opacity: .2;
		transition: opacity 3s;
	}
	.PortfoStripe:hover {
		opacity: 1;
		transition: opacity 1s;
	}

		.PortfoStripe h3 {
			color: var(--cencePINK);
			opacity: 1;
		}

			.ScrollArrow {
				height: 100%;
				margin: 0 3rem 0 3rem;
			}

		.Project {
			height: 90%;
			display: flex;
			margin: 0 9rem 0 3rem;
		}


/* .ProjectLightBox {
	display: flex;
	flex-direction: column;
	background-color: aqua;
	gap: 1rem;
	overflow: scroll;
	height: 100%;
	width: 18rem;
}*/
 
			.Project img {
				margin: 0 0 0 1rem;
				height: 100%;
				border-radius: .3rem;
			}

			.ProjectDesc {
				width: 14rem;
				max-height: 100%;
				overflow: scroll;
				align-self: flex-end;
			}

			.Project h3 {
				margin-bottom: 0;
				text-align: right;
				color: var(--cenceOLIVE);
				opacity: 1;
			}

			.Project p {
				font-size: .8rem;
				color: var(--cenceOLIVE);
				text-align: right;	
			}

		.StartScroll {
			margin: 0 3rem 0 3rem;
		}

.foot {
	position: absolute;
	bottom: 1rem;
	left: 0;
	width: 100%;
	height: auto;
	text-align: center;
}
	
	#Envelope {height: 2rem;}
	
/*** === CHARACTERS === ***/

h1 {
    font: normal 200 3rem "Gotham", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: var(--cencePINK);
	opacity: .6;
	text-align: center;
	letter-spacing: normal;
	margin-bottom: 4rem;
	transition: all 1s;
}

	h1:hover {
		color: white;
		letter-spacing: 0.1rem;
	}

h2 {
    font: normal 600 1.5rem "Gotham", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-align: left;
	margin-top: 0rem;
	color: white;
	opacity: .6;
	letter-spacing: 2vw;
}
	
h3 {
    font: normal 800 1.2rem "Gotham", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: white;
	opacity: .6;
	text-align: center;
}

	h3 i {
		font: italic 800 1.2rem "Gotham", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	}

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.tightLine {margin-bottom: -1rem;}	

b {font: bold 1rem "Gotham", "Helvetica Neue", Helvetica, Arial, "sans-serif"}
i {font: italic "Gotham", "Helvetica Neue", Helvetica, Arial, "sans-serif"}

.pinky {color: var(--cencePINK);}
.orangey {color: var(--cenceORANGE);}



a {
	text-decoration: none;
	color: var(--cencePINK);
	fill: var(--cencePINK);
	transition: color .7s, fill .7s;
}	
	a:hover, a:focus {
		color: var(--cenceORANGE);
		fill: var(--cenceORANGE);
	}

.LASER a {
	color: var(--cenceORANGE);
	fill: var(--cenceORANGE);
}
	.LASER a:hover, .LASER a:focus {
		color: var(--cencePINK);
		fill: var(--cencePINK);
	}
	

ul {
	list-style: disc;
	padding-left: 6vw;
}

	li {
		margin-bottom: .5rem;
	}

	ul i {
		margin-left: 2rem;
		color: white;	
		opacity: .6;	
	}






/*** === ANIMATIONS === ***/

@keyframes SplashBG {
	from {background-color: white;}
	to {background-color: var(--cenceOLIVE);}
}	

@keyframes OpacityFadeIn {
	from {filter: opacity(0%);}
	to {filter: opacity(100%);}
}	

@keyframes SplashAnimRz {
	0% {filter: opacity(0%); transform:translateX(-100%);}
	50% {filter: opacity(10%);}
	100% {filter: opacity(100%);}
}	

@keyframes SplashAnimLz {
	0% {filter: opacity(0%); transform:translateX(100%);}
	50% {filter: opacity(10%);}
	100% {filter: opacity(100%);}
}