body {
	background-color: #000;
	overflow-y: scroll;
	font-family: 'Arial',sans-serif;
	font-size: 1em;
	line-height: 1.6em;
	color: #000;
}

h1 {
	font-family: "program-narrow", sans-serif;
	font-size: 1em;
	font-weight: 900;
	font-style: italic;
	margin: 0;
	padding: 0;
	line-height: 70px;
}

h2 {
	font-family: "program-narrow", sans-serif;
	font-size: 3.2em;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.025em;
	line-height: 0.85em;
	margin: 0 0 10px 0;
	padding: 0;
	text-transform: uppercase;
}

h3, label {
	font-family: "program-narrow", sans-serif;
	font-size: 1.8em;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.05em;
	line-height: 1.1em;
	margin: 0 0 10px 0;
	padding: 0;
	text-transform: uppercase;
}

a {
	color: #41a3ff;
	text-decoration: none;
}

a:hover {
	color: #f15a22;
}

.site-container {
	width: 100%;
	text-align: center;
}

.content-block {
	padding-bottom: 70px;
	text-align: center;
}

.nav-button {
	font-family: "program-narrow", sans-serif;
	font-weight: 500;
	font-size: 2.2em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	display: inline-block;
	height: 65px;
	width: 270px;
	border-radius: 5px;
	line-height: 1.8em;
	text-decoration: none;
	box-sizing: border-box;
	border: 2px solid #2d2a26;
	color: #2d2a26;
	position:relative;
	z-index:10;
}

.nav-button:hover {
	border: 2px solid #f15a22;
	color: #fff;
	background-color: #f15a22;
}

/* HEADER */

.header {
	background-color: #ffd64f;
	background: linear-gradient(0deg, #ffe9a8, #ffd64f);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	padding:40px 0 50px;
}

.logo {
	width: 400px;
	height: 520px;
	margin: 0 auto 40px;
	border-radius: 15px;
	box-sizing: border-box;
	border-bottom: 2px solid #f89838;
	box-shadow: 0px 5px 50px rgba(241, 90, 34, 0.25);
	overflow: hidden;
	/* animation: 2s ease-in-out 0s 1 normal logo-glow; */
}

.logo img {
	padding-top: 45px;
	width: 320px;
	/* height: 415px; */
}

.service-links, .service-links a {
	font-family: "program-narrow", sans-serif;
	font-size: 1.75em;
	font-weight: 400;
	font-style: normal;
	line-height: 1.2em;
	margin-bottom: 50px;
	color: #f15a22;
	text-decoration: none;
	overflow: hidden;
}

.service-links a:hover {
	color: #000;
}

.action-links a {
	margin: 0 10px 10px 10px;
}

.estimate {
	border: 2px solid #000;
	color: #fff;
	background-color: #000;
}

.estimate.on-dark {
	border: none;
	color: #000;
	background-color: #f15a22;
}

.estimate.on-dark:hover {
	background-color: #fff;
}

/* MINI-HEADER */

.header-mini .logo {
	width: 200px;
	height: 260px;
	margin: 0 auto 40px;
	padding: 0;
	border-radius: 8px;
	border-bottom: 2px solid #f89838;
	box-shadow: 0px 5px 50px rgba(241, 90, 34, 0.25);
	overflow: hidden;
}

.header-mini .logo img {
	padding-top: 20px;
	width: 165px;
}

.logo a {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.logo a:hover {
	background-color: rgba(255, 255, 255, 0.25);
}

/* HIGHLIGHTS */

.highlights-container {
	width: 100%;
	text-align: center;
	background-color: #2d2a26;
	position: relative;
	color: #fff;
}
	
.highlight-block {
	max-width: 1600px;
	margin: 0 auto 60px auto;
}
	
.highlight-block img {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	position:relative;
	z-index:0;
}

.highlights-container h2, .highlights-container h3, .highlight-block p {
	position:relative;
	z-index:10;
	text-shadow:0px 0px 20px #2d2a26;
}

.highlight-block p {
	width: 90%;
	text-align: center;
	margin: 0 auto 20px;
	color: #cacac9;
	box-sizing:border-box;
}
	
.highlight-block .learn-more {
	max-width: 90%;
	margin: 0 auto;
}
	
.highlight-block .learn-more h3 {
	display: inline-block;
}
	
.highlight-block .nav-button {
	margin:0 20px;
	border: 2px solid #99968a;
	color: #fff;
}

.highlight-block .nav-button:hover {
	border: 2px solid #f15a22;
}

/* COMPLIMENT CARDS */

.compliment-cards {
	width: 100%;
	text-align: center;
	background-color: #000;
	color: #fff;
	position: relative;
}

.compliment-cards-container {
	max-width: 1600px;
	margin: 40px auto 0 auto;
	text-align: center;
	display: flex;
	justify-content: center;
	/* flex-wrap: wrap; */
}

.card {
	display: inline-block;
	max-width: 350px;
	height: 450px;
	color: #fff;
	margin: 0 10px 20px;
	background-color: #b3b0a7;
	background: linear-gradient(0deg, #b3b0a7, #99968a), linear-gradient(0deg, #00deff, #00deff, #41a3ff);
	background-size: 100% 450px;
	background-position-y: 0px, 450px;
	background-repeat: no-repeat;
	text-align: center;
	overflow: hidden;
	border-radius: 5px;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.card .content {
	height: 450px;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.card .details {
	width: 100%;
	height: 100%;
	padding: 20px;
	background-color: #fff;
	color: #000;
	box-sizing: border-box;
	text-align: left;
}

.card .icon {
	/* height: 225px;
	width: 225px; */
	width: 60%;
	margin: 70px 0 20px;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

#ccc .card * {
	animation-play-state: paused;
}

#ccc .card:hover * {
	animation-play-state: running;
}

#mag-mask {
	fill: #99968a;
	transition-duration: .25s;
}

.card:hover #mag-mask {
	fill: #41a3ff;
}

.card:hover {
	background-position-y: -450px, 0px;
}

.card:hover .content {
	height: 230px;
}

.card:hover .content .icon {
	width: 35%;
	/* width: 144px; */
	margin: 15px 0 0;
}

/* TESTIMONIALS */

.clients {
	width: 100%;
	text-align: center;
	background-color: #2d2a26;
	background: linear-gradient(0deg, #2d2a26, #423d33);
	color: #fff;
	position: relative;
}
	
.testimonials-container {
	max-width: 1600px;
	margin: 40px auto 100px auto;
}
	
.testimonial {
	max-width: 1000px;
	padding: 25px 40px 25px 40px;
	background: linear-gradient(0deg, #b3b0a7, #99968a);
	color: #000;
	text-align: center;
	position: relative;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0px 5px 50px rgba(0,0,0,.5);
}
	
.testimonial .quote {
	text-align: left;
	color: #000;
}
	
.testimonial.left {
	margin: 0 auto 30px 10px;
	background-color: #b3b0a7;
	background: linear-gradient(0deg, #b3b0a7, #99968a);
}
	
.testimonial.right {
	margin: 0 10px 30px auto;
	background-color: #d9d8d3;
	background: linear-gradient(0deg, #d9d8d3, #cccbc5);
}
	
.testimonial svg {
	width: 50px;
	height: 50px;
	position: absolute;
	bottom: -50px;
}
	
.testimonial.left svg {
	left: 80px;
	fill: #b3b0a7;
}
	
.testimonial.right svg {
	right: 80px;
	fill: #d9d8d3;
}

.testimonial .quote::before, .testimonial .quote::after {
	content: '"';
	font-family: "program-narrow", sans-serif;
	font-size: 3em;
	font-weight: 500;
	position: absolute;
	color: inherit;
}
	
.testimonial .quote::before {
	top: 25px;
	left: 15px;
}
	
.testimonial .quote::after {
	bottom: 0px;
	right: 15px;
}

/* CLIENT LIST */

.clients .arrow-divider-line + h2 {
	margin-top: 50px;
}

.clients p {
	width: 90%;
	text-align: center;
	margin: 0 auto 20px;
	color: #cacac9;
	box-sizing:border-box;
}

.clients-list-container {
	max-width: 1600px;
	margin: 30px auto 0 auto;
	text-align: center;
	perspective: 800px;
	perspective-origin: 50% 50%;
}

.clients-list {
	list-style: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
	line-height: 3px;
}

.clients-list li {
	display: inline-block;
	width: 190px;
	height: 190px;
	background-color: rgba(0, 0, 0, 0.25);
	margin: 5px;
	border-radius: 3px;
	text-align: center;
	animation: 48s linear 0s infinite normal tile-highlight;
}

.clients-list li img {
	width: 188px;
	height: 188px;
	margin: 0px auto;
	display: block;
}
	
.clients-list li:nth-child(2) {
	animation-delay: 3s;
}

.clients-list li:nth-child(3) {
	animation-delay: 6s;
}

.clients-list li:nth-child(4) {
	animation-delay: 9s;
}

.clients-list li:nth-child(5) {
	animation-delay: 12s;
}

.clients-list li:nth-child(6) {
	animation-delay: 15s;
}

.clients-list li:nth-child(7) {
	animation-delay: 18s;
}

.clients-list li:nth-child(8) {
	animation-delay: 21s;
}

.clients-list li:nth-child(9) {
	animation-delay: 24s;
}

.clients-list li:nth-child(10) {
	animation-delay: 27s;
}

.clients-list li:nth-child(11) {
	animation-delay: 30s;
}

.clients-list li:nth-child(12) {
	animation-delay: 33s;
}

.clients-list li:nth-child(13) {
	animation-delay: 36s;
}

.clients-list li:nth-child(14) {
	animation-delay: 39s;
}

.clients-list li:nth-child(15) {
	animation-delay: 42s;
}

.clients-list li:nth-child(16) {
	animation-delay: 45s;
}
	
/* CONTACT FORM */

.contact {
	width: 100%;
	text-align: center;
	background-color: #ffd64f;
	background: linear-gradient(0deg, #ffe9a8, #ffd64f);
	position: relative;
	background-repeat: no-repeat;
	color: #2d2a26;
}

.contact .inner {
	max-width: 1600px;
	margin: 40px auto 0 auto;
	padding: 60px 20px 40px;
	text-align: left;
	background-color: #fff;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0px 5px 50px rgba(241, 90, 34, 0.25);
	color: #000;
}

form {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

form .row {
	margin-bottom:20px;
}

label, input, select, textarea {
	display: inline-flex;
}

label {
	margin: 7px 20px 0 0;
	width: 240px;
	vertical-align:top;
}

input, select {
	height: 40px;
	width: 570px;
	padding: 0 10px;
	border: 2px solid #99968a;
	border-radius: 5px;
	box-sizing: border-box;
	background-color: #fdfdfd;
}

textarea {
	min-height: 240px;
	width: 570px;
	padding: 10px;
	border: 2px solid #99968a;
	border-radius: 5px;
	resize: vertical;
	box-sizing: border-box;
	background-color: #fdfdfd;
}

input:focus, select:focus, textarea:focus {
	border-color: #f15a22;
	background-color: #fff;
}

button.submit {
	border: 2px solid #f15a22;
	color: #fff;
	background-color: #f15a22;
}

button.submit:hover {
	border: 2px solid #000;
	color: #fff;
	background-color: #000;
}

.g-recaptcha {
    display: inline-block;
}

/* SUBMIT */

.form-errors {
	max-width: 1600px;
	margin: 40px auto 0;
	padding: 20px 10px 25px 10px;
	background-color: #a00;
	background: linear-gradient(0deg, #800, #a00);
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0px 5px 50px rgba(241, 90, 34, 0.25);
	color: #fff;
}

.form-errors ul {
	text-align: left;
}

/* MESSAGE */
	
.message {
	width: 100%;
	text-align: center;
	position: relative;
	padding-top:40px;
	background-color: #ffd64f;
	background: linear-gradient(0deg, #ffe9a8, #ffd64f);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.message .inner {
	max-width: 1600px;
	margin: 40px auto 0;
	padding: 60px 20px 40px;
	background-color: #fff;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0px 5px 50px rgba(241, 90, 34, 0.25);
	color: #000;
}

.message p {
	text-align: left;
	max-width: 800px;
	margin: 20px auto;
}

.message .nav-button {
	margin-top:40px;
}

/* SHOWCASE */

.showcase {
	text-align: center;
}

.showcase nav.sticky-menu {
	background-color: #423d33;
	margin: 0;
	position: sticky;
	top: 0px;
	text-align: center;
	box-sizing: border-box;
	padding: 20px 0 0;
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.25);
	z-index: 20;
}

nav.sticky-menu .nav-button {
	color: #fff;
	margin: 0 10px 20px;
}

.nav-button.light {
	border: 2px solid #99968a;
}

.nav-button.light:hover {
	border: 2px solid #f15a22;
}

.showcase .content-block {
	color: #fff;
	padding-bottom: 0px;
}

.showcase a.offset {
	position: relative;
	top: -105px;
}

/* SHOWCASE */

.section {
	margin: 0 auto;
	box-sizing: border-box;
	width: 100%;
	max-width: 1600px;
	color: #fff;
	border-radius: 0 0 5px 5px;
	overflow:hidden;
}

.section .leader {
	width: 100%;
}

.section .bumper {
	margin-top: 40px;
}

.section .content {
	padding: 0 20px 40px;
	background: linear-gradient(0deg, #423d33, #000);
}

.section .content h2 {
	position: relative;
	z-index: 10;
}

.section .content p {
	color: #cacac9;
	text-align: left;
}

.section .content p.center {
	text-align: center;
}

.section .details {
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	text-align: center;
	flex-direction: row;
	align-items: center;
}

.section .details.flipped {
	flex-direction: row-reverse;
}

.section .details .column {
	margin: 0 10px;
	max-width: 40%;
	display: inline-block;
	box-sizing: border-box;
}

.section .details .column img {
	width: 100%;
	height: auto;
}

.section .details .column.copy {
	text-align: left;
}

.column.copy div p {
	margin: 0 0 10px;
}

.section .seller {
	border: 2px solid #f15a22;
	max-width: 1600px;
	margin: 0 auto 70px;
	border-radius: 5px;
	background-color: #000;
	background: linear-gradient(0deg, #000, #3c1709);
	box-sizing: border-box;
	padding: 80px 20px;
	color: #fff;
}

.render-header {
	height: 390px;
	background-clip: padding-box;
	background-position: center 0px;
	background-repeat: no-repeat;
}

/* WORK SAMPLES */

.work-samples {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 60px;
}

.work-samples div {
	width: 240px;
	height: 240px;
	background-color:#888;
	margin: 5px;
	box-sizing: border-box;
	overflow: hidden;
}

.work-samples div a {
	display: block;
	width: 240px;
	height: 240px;
}


.work-samples div a img {
	transition-duration: 0.125s;
	transition-timing-function: cubic-bezier(.15, .75, .75, 1);
}

.work-samples div a:hover img {
	transform: scale(1.1);
}

/* FOOTER */

.footer {
	width: 100%;
	height: 150px;
	color: #fff;
	background-color: #000;
	padding-top: 20px;
	box-sizing: border-box;
	text-align: center;
}

.footer h3 {
	margin-bottom: 2px;
}

.footer p {
	margin: 0;
}

.footer a {
	color: #d4d2c8;
}

.footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.footer .icon-mastodon {
	height: 1.4em;
	width: auto;
	margin-right: 0.25em;
    position: relative;
    top: 0.3em;
}

.footer .icon-mastodon .d {
	fill: #d4d2c8;
}

.footer a:hover .icon-mastodon .d {
	fill: #fff;
}

/* DIVIDERS */

.arrow-divider {
	width: 100%;
	height: 50px;
	margin-bottom: 70px;
	display: flex;
	justify-content: center;
}

.arrow-divider-line {
	width: 100%;
	max-width: 1600px;
	height: 50px;
	margin: 70px auto;
	display: flex;
	position:relative;
	z-index:10;
}

.arrow-divider .center, .arrow-divider-line .center {
	width: 110px;
}

.arrow-divider .side, .arrow-divider-line .side {
	flex-grow: 2;
}

.arrow-divider.black svg {
	fill: #000;
}

.arrow-divider.brown svg {
	fill: #2d2a26;
}

.arrow-divider.tan svg {
	fill: #423d33;
}

.arrow-divider.gold svg {
	fill: #ffd64f;
}

.arrow-divider.light-gold svg {
	fill: #ffe9a8;
}

.arrow-divider-line svg {
	fill: none;
	stroke: rgba(255, 255, 255, 0.125);
	stroke-width: 2px;
}

.arrow-divider-line .side {
	flex-grow: 2;
	box-sizing: border-box;
	border-top: 2px solid rgba(255, 255, 255, 0.125);
}

/* EXTRAS */

.bold {
	font-weight: bold;
}

.blue {
	color: #41a3ff;
}

.orange {
	color: #f15a22;
}

.white {
	color: #fff;
}

.gray {
	color: #d4d2c8;
}

.clear {
	clear: both;
}

iframe {
	margin: 0;
}

.narrow-format-inline, .narrow-format-block {
	display: none;
}

/* EFFECTS */

.fade {
	opacity: 1;
	transform: translate(0px, 0px);
	transition-property: opacity, transform;
	transition-duration: 1s;
	transition-timing-function: cubic-bezier(0, .65, .35, 1);
	position: relative;
	z-index: 0;
}

.fade-in {
	opacity: 0;
	transform: translate(0px, 100px);
	transition-duration: 0s;
}

/* RESPONSIVE */

@media screen and (max-width: 1200px) {

	.content-block {
		box-sizing: border-box;
		padding-left: 20px;
		padding-right: 20px;
	}

	.logo {
		width: 200px;
		height: 260px;
		border-radius: 7px;
		margin-bottom: 20px;
	}

	.logo img {
		padding-top: 22px;
    	width: 160px;
	}

	.service-links {
		font-size: 1.25em;
		margin-bottom: 25px;
	}

	.header nav .nav-button {
		display: block;
		margin: 0 auto 10px;
	}

	.highlights-container {
		padding-bottom: 20px;
	}

	.highlight-block img {
		margin: 0 auto 60px;
	}

	.highlight-block .learn-more {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}

	.highlight-block .learn-more h3 {
		display: block;
	}

	.highlight-block .nav-button {
		margin: 0 auto;
	}

	.compliment-cards-container {
		display: block;
	}

	.card {
		display: block;
		max-width: 90%;
		height: auto;
		transition-delay: 0s !important;
		background-position-y: -450px, 0px;
		margin: 0 auto 20px;
	}

	#ccc .card * {
		animation-play-state: running;
	}

	.card #mag-mask {
		fill: #41a3ff;
	}
	
	.card .content {
		height: 230px;
	}

	.card .content h2 {
		font-size: 2.75em;
	}
	
	.card .content .icon, .card:hover .content .icon {
		height: 144px;
		width: 144px;
		margin: 15px 0 0;
	}

	.testimonial.left, .testimonial.right {
		margin: 0 auto 70px auto;
	}

	.clients-list li {
		width: 150px;
		height: 150px;
	}

	.clients-list li img {
		width: 148px;
		height: 148px;
	}

	form {
		width: 90%;
	}

	label {
		display: block;
		width: 100%;
		text-align: left;
		margin-bottom: 10px;
	}

	input, textarea, select {
		display: block;
		width: 100%;
	}

	.showcase nav.sticky-menu {
		position: relative;
	}

	.showcase .section {
		padding: 0 20px;
	}

	.section .details {
		padding: 20px 0;
		border-bottom: 1px solid #423d33;
		display: block;
	}

	.section .details .column {
		width: 100%;
		max-width: 100%;
		display: block;
		margin: 0;
	}

	.section .details .column img {
		width: 90%;
		margin: 0 auto;
	}

	.work-samples div, .work-samples div a, .work-samples div img {
		width: 130px;
		height: 130px;
	}

	.column.copy div {
		top: auto;
		transform: translateY(0%);
	}

	.arrow-divider {
		margin-bottom: 50px;
	}

	.wide-format {
		display: none;
	}

	.narrow-format-inline {
		display: inline-block;
	}

	.narrow-format-block {
		display: block;
	}

}

@media screen and (max-width: 400px) {

	.g-recaptcha {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

}