@charset "utf-8";
/* CSS Document */
body {
		font-family: 'Muli','Verdana', sans-serif;
		margin: 20px 0 0 0;
		padding: 0;
	}
	
	/* Hamburger Menu */
	
	#menuToggle {
		display: block;
		position: relative;
		top: 0px;
		left: 5px;
		z-index: 999;
		-webkit-user-select: none;
		user-select: none;
	}
	
	#menuToggle input {
		display: block;
		width: 40px;
		height: 32px;
		position: absolute;
		top: -7px;
		left: -5px;
		cursor: pointer;
		opacity: 0; /* hide this */
		z-index: 2; /* and place it over the hamburger */
		-webkit-touch-callout: none;
	}
	
	#menuToggle span {
		display: block;
		width: 33px;
		height: 4px;
		margin-bottom: 5px;
		position: relative;
		background: #cdcdcd;
		border-radius: 3px;
		z-index: 1;
		transform-origin: 4px 0px;
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			opacity 0.55s ease;
	}
	
	#menuToggle span:first-child {
		transform-origin: 0% 0%;
	}
	
	#menuToggle span:nth-last-child(2) {
		transform-origin: 0% 100%;
	}
	
	#menuToggle input:checked ~ span {
		opacity: 1;
		transform: rotate(45deg) translate(-2px, -1px);
		background: #cdcdcd;
	}
	
	#menuToggle input:checked ~ span:nth-last-child(3) {
		opacity: 0;
		transform: rotate(0deg) scale(0.2, 0.2);
	}
	
	#menuToggle input:checked ~ span:nth-last-child(2) {
		transform: rotate(-45deg) translate(0, -1px);
	}
	
	#menu {
		position: fixed;
		width: 230px;
		margin: -100px 0 0 -95px;
		padding: 50px 0 0 70px;
		padding-top: 125px;
		background: rgb(255, 255 ,255);
		list-style-type: none;
		-webkit-font-smoothing: antialiased;
  		/* to stop flickering of text in safari */
		transform-origin: 0% 0%;
		transform: translate(-100%, 0);
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);	
	}
	
	#menu li {
		border-bottom: solid 1px #e8e8e8;
		border-right: solid 1px #e8e8e8;
		padding: 5px 0 5px 10px;
		font-family: 'Muli','Verdana', sans-serif;
		font-size: 16px;
		font-weight: 300;
		text-transform: uppercase;
		transition: all .3s;
	}
	
	#menu li:hover {
		background: #f3f3f3;
		transition: all .3s;
	}
	
	#menu a	{
		color: #999;
		display: block;
		padding-left: 5px;
	}
	
	#menu a:hover {
		color: #222;
		text-decoration: none;
	}

	#menu a:focus {
		color: #222;
		text-decoration: none;
	}

	#menu a:active {
		color: #222;
		text-decoration: none;
	}


	#menuToggle input:checked ~ ul {
		transform: none;
	}

	nav {
		z-index: 999;
		position: fixed;
	}
	
	/* page styles */
	.header-logo {		
		text-align: center;		
	}
	
	.header-logo img {
		width: 220px;
		max-width: 100%;
		transition: all 0.3s;		
	}
	
	.socials {
		text-align: right;
	}
	
	.socials ul {
		list-style: none;
		padding: 0;
		margin: 0 20px 0 0;
	}
	
	.socials li {
		display: inline-block;
		margin: 0;
		padding: 0;
	}
	
	.socials img {		
		width: 28px
	}
	
	.panels {
		margin-top: 50px;	
	}
	
	.panel {
		transition: all .3s;
	}
	
	.panel-full {
		display: block;
		background: #e8e8e8;
		opacity: .9;
		position: absolute;
		transition: all .6s;
		z-index: 3;
	}

	.top-banner {
		margin-top: 150px;
	}
	
	.banner-hooverhead {
		background-image:url(/images/recycled-computer-sculpture.jpg); 		
		height: 900px;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.banner-txt {
		text-align: center;
		margin-top: 18%;
	}
	
	.banner-txt h2 {
		color: #fff;
		font-size: 8vw;
		text-transform: uppercase;
		text-shadow: 0 0 10px #000;
	}
	
	.banner-txt h3 {
		color: #fff;
		font-size: 2vw;
		text-transform: uppercase;
		text-shadow: 0 0 5px #000;
	}
	
	.header-lg {
		background: #fff;
	}
	
	header {
		width: 100%;
		height: 200px;
		overflow: hidden;
		padding-top: 20px;		
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;		
		background-color: #fff;
		transition: height 0.3s;
		box-shadow: 0 0 20px #000;
	}
	
	header.smaller {
		height: 125px;
		padding-bottom: 20px;
	}
	
	header.smaller .header-logo img {
		width: 130px;
		transition: all 0.3s;
	}
	
	.box-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	
	.box-txt {
		align-self: center;
		text-align: center;
		background: #fff;	
		height: inherit;
	}
	
	.box-img {		
		padding-left: 0;
		padding-right: 0;		
	}
	
	.box-img img {
		max-width: 100%;
	}
	
	.flex-container {
		width: 100%;
		padding: 0;
		margin: 0;
		list-style: none;
		justify-content: center;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		z-index: 0;
  
	}

	.photos {
		margin-top: 200px;
		border: solid 5px #fff;
	}

	.photos li {
		width: 33.333%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		border: solid 5px #fff;		
	}

	.secondary {
		margin-top: 170px;		
	}

	.jewelry {
		margin-top: 220px;
		margin-bottom: 75px;
	}

	.sculpture {
		margin-top: 210px;
	}

	.copypage {
		margin-top: 250px;
		min-height:900px;
	}



	.flex-item {
		padding:0;
		width: 50%;
		height: auto;		
		margin-top: 0;
		text-align: center;
		align-self: center;
	}
	
	.flex-item img {
		max-width: 100%;
	}
	
	.flex-item p {
		max-width: 70%;
		margin: 10px auto 0 auto;
		color: #777;	
	}
	
	.flex-item h2 {
		text-transform: uppercase;
		font-size: 3vw;
		margin: 0;
	}
	
	.flex-item h3 {
		margin:0;
		padding:0;
		font-size: 1.2vw;
	}
		
	.fancy-link {
		color: #999;
		display: inline-block;
		margin-top: 15px;		
		border-bottom: 1px solid #999;
		transition: all .3s;
	}
	
	.fancy-link:hover {
		color: #111;
		text-decoration: none;
		transition: all .3s;
	}
	
	.fancy-link:active {
		text-decoration: none;			
	}
	
	.fancy-link:focus {
		text-decoration: none;			
	}
	
	.fancy-link:hover.fancy-link:after  {
		background-color: #222;
		transition: all .3s;
	}
	
	.fancy-link:after {
		content: '';
		display: block;
		clear: both;
		height: 11px;
		width: 11px;
		position: relative;
		bottom: -6px;
		left: 50%;
		margin-left: -5px;
		background-color: #fff;
		border: 1px solid #999;
		border-radius: 20px;
		transition: all .3s;
	}
	
	.fancy-link-light {
		color: #fff;
		display: inline-block;
		margin-top: 15px;		
		border-bottom: 2px solid #fff;
		transition: all .3s;
		font-size: 1.4vw;		
		text-shadow: 0 0 5px #000;
	}
	
	.fancy-link-light:hover {
		color: #999;
		text-decoration: none;
		transition: all .3s;
	}
	
	.fancy-link-light:active {
		text-decoration: none;			
	}
	
	.fancy-link-light:focus {
		text-decoration: none;			
	}
	
	.fancy-link-light:hover.fancy-link-light:after  {
		background-color: #777;
		transition: all .3s;
	}
	
	.fancy-link-light:after {
		content: '';
		display: block;
		clear: both;
		height: 15px;
		width: 15px;
		position: relative;
		bottom: -8px;
		left: 50%;
		margin-left: -5px;
		background-color: #222;
		border: 1px solid #fff;
		border-radius: 20px;
		transition: all .3s;
	}

	.gform {
		width: 100%;		
	}
	
	.modal-header {
		border-bottom: none;
		padding: 5px 15px 0 5px;		
	}
	
	.modal-body {
		padding-top: 5px;
	}
	
	footer {
		padding: 85px 0;
		background: #000;
		text-align: center;
		color: #fff;
	}

	.legal {
		font-size: 12px;
		letter-spacing: .5em;
	}
	
	
	@media screen and (max-width: 1024px) {
		.banner-hooverhead {			 		
			height: 600px;
			background-image: url(/images/hooverhead-1024.jpg);
			background-size: auto;
			background-position: top;
		}
		
		.photos {
			margin-top: 200px;
		}
	}
	
	
	@media screen and (max-width: 768px) {
		
		header {
			height: 250px;
		}
		
		header.smaller {
			height: 120px;
		}
		
		header.smaller .header-logo img {
			width: 110px;
			position: relative;
			top: 5px;
			
		}
		
		header .header-logo img {			
			position: relative;
			top: 30px;
			
		}
		
		.banner-hooverhead {			 		
			height: 400px;
			background-image: url(/images/hooverhead-800b.jpg);
			background-size: auto;
			background-position: top;
		}
	
		.banner-txt {			
			margin-top: 0;
			position: relative;
			top: 150px;
		}
		
		.banner-txt h2 {			
			font-size: 10vw;		
		}

		.banner-txt h3 {			
			font-size: 4vw;			
		}
		
		.flex-item p {
			max-width: 90%;					
		}
	
		.flex-item h2 {
			text-transform: uppercase;
			font-size: 7vw;	
			margin-top: 85px;
		}
		
		.jewelry h2 {
			
			margin-top: 111px;
		}
	
		.flex-item h3 {			
			font-size: 4vw;
		}
		
		.fancy-link-light {			
			font-size: 4vw;
		}		
		
		.socials {
			position: absolute;
			top: 20px;
			right: -20px;
		}
		
		.top-banner {			
			margin-top: 230px;
		}
		
		.flex-item {
			width: 100%;			
		}
		
		.photos {
			margin-top: 250px;
		}
		
		.photos li {
			width: 100%;	
		}
		
		.secondary {
			margin-top: 230px;
		}
		
		.copypage {
			margin-top: 250px;
		}
		
		.jewelry {
			margin-top: 260px;
			margin-bottom: 75px;
		}
		
		.sculpture {
			margin-top: 260px;
		}
		
		.film-txt, .jewelry-txt, .photo-txt, .art-txt {
			height: 300px;
		}
		
		.jewelry-txt {
			order:3;
		}
		
		.jewelry-img {
			order: 4;
		}
		
		.legal {
		font-size: 14px;
		letter-spacing: .2em;
		}
		
		.order-1 {
			order:1;
		}
		.order-2 {
			order:2;
		}
		.order-3 {
			order:3;
		}
		.order-4 {
			order:4;
		}
		.order-5 {
			order:5;
		}
		.order-6 {
			order:6;
		}
		.order-7 {
			order:7;
		}
		.order-8 {
			order:8;
		}
		.order-9 {
			order:9;
		}
		.order-10 {
			order:10;
		}
		
	}

	#fakeloader-overlay { display: none !important; }