/*
Theme Name: Hinckley2025 Theme
Theme URI: http://miriamfrost.com
Author: Miriam Frost
Author URI: http://miriamfrost.com
Description: Custom
Version: 1.0.1
Tags:

*/

/* FONTS ====================================================== */
@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'enamelaCB';
	src: url('fonts/enamela-condensed-bold.woff') format('woff'); }
@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'enamelaCM';
	src: url('fonts/enamela-condensed-medium.woff') format('woff'); }
@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'enamela';
	src: url('fonts/enamela-condensed.woff') format('woff'); }

@font-face {
	/* medium 500+i, SemiBold 600+i */
	font-family: "Barlow Condensed", sans-serif;
	/* font-weight: 500; */
	font-style: normal; }


h1, h2, h3, h4, nav,
h6 span.button,
input[type="submit"],
#services .swiper-slide.first p,
.shiftnav-main-toggle-content,
.shiftnav-menu li,
#work .textbox a { font-family: "enamelaCB", Helvetica, sans-serif; }
/* #contact h4,
#contact p, */
#team h5 { font-family: "enamelaCM", Helvetica, sans-serif; }
/* #copyright,
#team .roles li { font-family: "enamela", Helvetica, sans-serif; } */

body,
#copyright,
#team .roles li,
#team .facts li,
#work .swiper-slide:not(.first) h3,
#work .swiper-slide.first h4,
#work .swiper-slide:not(.first) h4,
#work .swiper-slide:not(.first) .textbox a { font-family: 'Barlow Condensed', serif; }
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea { font-family: monospace; }
html { font-size: 16px; }


/* COLORS ===================================================== */
/* !---------------------------------- red */
#work .textbox a:hover,
#contact { background-color: #d71921; }
a,
.button,
#credits h1,
.modal h2,
#success h2,
#work .textbox a,
#work .swiper-slide.first h3 { color: #d71921; }

/* !------------------------------------- red */
button:hover,
.error { color: #831a00; }
/* !--------------------------------- yellow */
nav li a:hover,
nav a.active,
.socials a:hover,
#work .textbox a:hover { color: #e9dd00; }
.blog nav li a:hover,
.blog nav a.active,
.shiftnav-menu a:hover{
	color: #e9dd00 !important; }
/* !----------------------------------- black */
h1 a,
.downloads a,
nav { color: #000; }
#sidebar label,
#commentform label { color: #888; }
.formwrap#screeningform p,
#services .swiper-slide.first p em, /* stars */
#services .swiper-slide.first h2 a,
#work .swiper-slide.first h2 a,
#work .swiper-slide.first h4,
#work .swiper-slide.first p { color: #000 !important; }
body { background-color: #000000cc; }
label,
#copyright p { color: #808080; }
/* !----------------------------------- white */
#contact h4,
#intro p,
nav li a,
#services .swiper-slide.first p,
.shiftnav-menu a,
.socials a,
#team .caption,
#work .textbox,
#work .textbox a:hover { color: #fff; }
#work .textbox a { background-color: #fff; }
#services .swiper-slide.first h2 a,
#work .swiper-slide.first h2 a { background-color: transparent; }

/* FONT WEIGHT / SIZE / LINE HEIGHT / TEXT STYLE ============== */
/* !----------------------------- font-weight */


#contact p,
#copyright,
.close,
nav,
.pagelink,
.pagination,
#services .swiper-slide.first p,
.shiftnav-main-toggle-content,
.shiftnav-menu li,
#work .textbox a,
h1, h2, h3, h4, h5, h6,
#services .swiper-slide li,
#team li { font-weight: normal; }

#work .swiper-slide:not(.first) h3 { font-weight: 700; }
/* !------------------------------ font-style */
cite { font-style: italic; }
address { font-style: normal; }
/* !------------------------------- font-size */
#contact h2,
#services .swiper-slide.first h2 a,
#work .swiper-slide.first h2 a { font-size: 170px; }

#intro h2 { font-size: 133px; }

#team h2 { font-size: 140px; }
caption, .dates h2,
.crew h1 { font-size: 48px; }
.alert h3 { font-size: 30px; }
.slide h1,
.modal h2 { font-size: 38px; }
h6 span.button { font-size: 34px; }
header h1 { font-size: 24px; }
#team h5 {
	line-height:clamp(24px, 2.6cqw, 26px);
	font-size: clamp(24px, 2.6cqw, 26px); }

#contact h4,
#services .textbox h3,
#services .swiper-slide.first p,
#work .textbox h3,
#work .textbox a {font-size: 22px; }
#intro .copy p,
#work .textbox h4 {font-size: 20px; }
#work .swiper-slide.first h3 { font-size: 26px; }
input,
#contact p,
#work .swiper-slide.first p { font-size: 16px; }
nav li { font-size: clamp(16px, 1.2cqw, 20px); }
#team .facts li { font-size: clamp(11px, 1.5cqw, 20px); }
#team .roles li { font-size: clamp(16px, 1.7cqw, 20px); }

#services .swiper-slide li { font-size: 18px; }
/* !----------------------------- line-height */
/*#services .swiper-slide.first h2,
#work .swiper-slide.first h2 { line-height: 159px; }*/
#intro h2 { line-height: 122px; }
#services .swiper-slide.first h2,
#work .swiper-slide.first h2 { line-height: 39px; }
#services .swiper-slide li { line-height: 17px; }
#team .roles li { line-height: 1.3em; }
#team .facts li { line-height: clamp(.9em, 1em, 1.3em); }
#team h2 { line-height: 1.14em; }
.slide h1 { line-height: 38px; }
#work .textbox h3,
h6 span.button { line-height: 26px; }
#about p,
#work .textbox a { line-height: 24px; }
/* !------------------------------------- etc */
#about strong,
#contact p,
h2, h3, h4, h5, h6,
nav a,
#team .caption { text-transform: uppercase; }
#work .swiper-slide.first h4,
#team .facts li { text-transform: none; }
a,
a:focus,
a:active,
a:visited { text-decoration: none; }

ul { list-style: none; }

/* GENERAL LAYOUT STUFF ======================================= */
html, body {
	width: 100%;
	height: 100%;
	scroll-behavior: smooth; }
html, body, header, footer, section, article,
h1, h2, h3, h4, h5, h6, div, form, ul {
	margin: 0; padding: 0; }

header,
footer { width: 100%; }
footer { overflow: hidden; }

#wrap {
	height: 100%;
	margin: 0 auto; }

section {
	height: 100vh;
	width: 100%;
	margin: 0 auto; }
.sectionwrap {
	height: 100%;
	margin: auto; }

.colwrap,
.flexwrap {
	display: flex;
	padding: 0 10px;
	justify-content: space-around; }
img { vertical-align: middle; }
/* iframe {
	margin: 1% auto;
	width: 100%;
	height: 100%; } */



/* HEADER ===================================================== */
header {
	position: relative;
	overflow: hidden;
	z-index: 10; }
header h1 {
	float: left;
	width: 329px;
	height: 120px;
	margin: 0;
	text-indent: -999px;
	background-size: cover;
	background-image: url('img/logo-h1.png'); }
h1 a {
	display: block;
	height: 100%; }
nav {
	float: right;
	margin: 7px 10px 5px 0; }
nav li {
	float: left;
	letter-spacing: .03em; }
nav a {
	padding: 0 5px;
	scroll-behavior: smooth; }
nav li:after {
	color: #d71921;
	content: '\2605';
	margin: 0 .2em; }
nav li:last-child:after { content: ""; }



/* FOOTER ===================================================== */
footer {
	text-align: center; }
.home footer { margin-top: 10px; }
.page.services footer,
.page.work footer { margin-top: 60px; }
.socials a,
.socials svg {
	width: 40px;
	height: 40px; }
.socials a { display: inline-block; }
#copyright {
	margin: 10px 0 4px 0;
	font-size: 11px;
	text-align: center; }
#copyright p { margin-top: -6px; }



/* HOME & SINGLE PAGES: COMMON ================================ */
.home section {
	position: relative;
	border-bottom: 1px solid #000;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5); }
/* .home section#home,
.home section#intro { height: 50vh; } going full height 251118mfj */

article {
	height: 100%;
	background-repeat: no-repeat; }

#contact article,
#intro article,
#services .swiper-slide.first,
#team article,
#work .swiper-slide.first .textboxwrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center; }
#team article {justify-content: space-between; }

/* a little breathing room */
#intro, #work, #services, #team, #contact { margin-top: 60px; }



/* INTRO  ===================================================== */
#intro article {
	position: relative;
	background-blend-mode: overlay;
	background-size: cover !important; }

#intro .textwrap {
	width: 85%;
	/*container-type: inline-size; */}

#intro h2 {
	text-align: center; }
	/*float: left; */
	/*font-size: 19cqw;
	line-height: 19cqw;
	/*shape-margin: 10px;
	shape-outside: polygon(0% 0%, 100% 0%, 100% 50%, 48% 50%, 48% 100%, 0% 100%);*/ 
	/* 251118mfj shape margin not worth it probably, taking text across. */
	/* shape-outside to make paragraph text flow around h2, very cool */
	/* nb that if the copy changes, this will have to change too. might be a way to js that.
	/* https://sqlpey.com/css/responsive-text-sizing-container-dimensions/ */

#intro .copy {
	width: 89ch;
	margin: 0 auto; }
#intro p { margin-right: 20px; }


#intro article div {
	/* position: absolute;
	width: 79%;
	z-index: 3; */}
#home video,
#intro video {
	object-fit: cover;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	aspect-ratio: 295/166;
	z-index: 2;
	vertical-align: middle; }



/* TEXT BLOCKS: FADE-IN ANIMATIONS ============================ */
@keyframes fade-in-normal {
	0% { opacity: 0; }
	100% { opacity: 1;} }
.fade-in-normal { animation: fade-in-normal 3s ease 0s 1 normal none; }

@keyframes fade-in-top-normal {
	0% { transform: translateY(-50px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; } }
.fade-in-top-normal { animation: fade-in-top-normal 2s ease 0s 1 normal none; }



/* WORK & SERVICES COMMON ===================================== */
#work h2 a,
#services h2 a { /* link activates when page is below 680px */
	cursor: default;
	pointer-events: none; }


/* WORK ======================================================= */
#work {
	position: relative;
	padding: 0; }

#work .swiper-slide.first article {
	width: 100%;
	height: 100%; }

#work .swiper-slide.first .textboxwrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.6); }
#work .swiper-slide.first .textboxwrap .textbox {
	width: 39%;
	text-align: left;
	background-color: transparent; }

#work .swiper-slide.first h3 { margin-top: 16px; }
#work .swiper-slide.first p { margin-top: 3px; }

.grid {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap; }

.grid article {
	height: 50%;
	flex-basis: 50%; }

/* https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has#12198561 heck yeah */
/* if there's only one on last slide */
.grid article:first-child:nth-last-child(1) {
/* -or- li:only-child { */
	width: 50%;
	margin-top: 25%;
	margin-left: 25%; }

/* if there are two items on the last slide */
.grid article:first-child:nth-last-child(2),
.grid article:first-child:nth-last-child(2) ~ .grid article { /* #1 */
	margin-top: 25%; }
.grid article:first-child:nth-last-child(2) + article { /* #2 */
	margin-top: 25%; }

/* if there are three items */
.grid:has(article:first-child:nth-last-child(3)) {
	flex-direction: row; }
.grid article:first-child:nth-last-child(3) ~ article:last-child { 
	margin-left: 25%; }


.grid article,
.single-work article {
	position: relative;
	overflow: hidden; }

.grid .textboxwrap,
.single-work article .textboxwrap {
	position: absolute;
	z-index: 1;
	bottom: 40px;
	right: -25px;
	padding-left: 17px;
	width: auto;
	min-width: 300px;
	filter: drop-shadow(10px 13px 3px rgba(0,0,0,0.3)); }

.grid .textboxwrap:before,
.single-work article .textboxwrap:before { /* dark red chevron edge */
	content: "";
	position: absolute;
	width: 55px;
	height: 100%;
	/* was dark red chev edge but now is inner mask for bright red so hard edge of transparent doesnt show */
	/* left: -5px; */
	/* background: #7a171a; */
	/*clip-path: polygon(20% 80%, 30% 100%, 10% 100%, 0% 80%, 30% 0%, 50% 0);*/
	left: 1px;
	background: #00000070;
	clip-path: polygon(30% 100%, 40% 100%, 10% 100%, 0% 80%, 30% 0%, 30% 70%); }

.grid .textboxwrap:after,
.single-work article .textboxwrap:after { /* bright red chevron edge */
	content: "";
	position: absolute;
	width: 55px;
	height: 100%;
	top: 0;
	/* left: 6px; */
	left: -3px;
	background: #d71921;
	clip-path: polygon(20% 80%, 30% 100%, 10% 100%, 0% 80%, 30% 0%, 50% 0); }

#work .grid img.mobile { display: none; }
#work .textbox {
	display: flex;
	padding: 9px 40px 6px 17px;
	justify-content: flex-end;
	background-color: #00000070; }

.grid .buttonwrap,
.single-work article .buttonwrap {
	margin-top: -4px;
	filter: drop-shadow(2px 2px 2px #000000); }
.grid .buttonwrap a,
.single-work article .buttonwrap a {
	position: relative;
	display: inline-block;
	height: 1.1em;
	margin: 10% 20px 2% 36px;
	padding: 1px 7px 4px 7px;
	clip-path: polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));	transform: skewX(-20deg); }



/* SLIDE LAYOUTS - SERVICES =================================== */
#services { padding: 0; }
#services .swiper-slide.first {
	width: 100%;
	height: 100%;
	text-align: center;
	background-blend-mode: overlay;
	background-size: cover !important; }

#services .swiper-slide.first p { margin: 10px auto; }
#services .swiper-slide.first p em {
	margin: 0 6px;
	font-style: normal; }
#services .first a {
	color: #000;
	cursor: default; }

#services .swiper-slide:not(.first) {
	position: relative;
	display: flex; /* vertically center text boxes */
	align-items: center; }
#services .swiper-slide:not(.first) .textwrap {
	/* width: 60%; */
	margin: 25% 20%;
	padding: 30px 40px;
	border-left: 10px solid #d71921;
	background-color: rgba(255,255,255,.8); }

#services .swiper-slide h3 {
	font-size: 34px;
	line-height: 26px; }
#services .swiper-slide p {
	width: 85%;
	margin: 35px 0;
	font-size: 20px; }
#services .swiper-slide ul {
	padding: 0;
	columns: 2;
	list-style: none; }
#services .swiper-slide li {
	margin: 0 16px 15px 1.35em; }
#services .swiper-slide li:before { /* star bullet */
	content: '\2605';
	color: #d71921;
	margin: 0 .3em 0 -1.35em; }

#services h6 { text-align: center; }
#services h6 .button { /* book now! button */
	display: inline-block;
	margin: 10px auto 5px auto;
	padding: 4px 10px 9px;
	border: 1px solid #000;
	border-radius: 8px;
	background: #ffffff9c;
	cursor: pointer; }

#services .swiper-slide iframe {
	display: block;
	max-width: 100%;
	margin: auto; }
#services h6+iframe { margin-top: 12px; }

#services .buttonwrap { /* video play */
	margin-top: 20px;
	text-align: center; }

/* TEAM ======================================================= */
#team {
	padding: 0;
	text-align: center;
	background: #fff; }
.teamrow { display: flex; }

#team .person {
	position: relative;
	display: flex;
	justify-content: space-between; }

#team .person img {
	width: 100%; }

.person .caption {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	bottom: 0;
	left: 0;
	z-index: 2;
	background-size: cover;
	background-color: #d71921;
	background-blend-mode: multiply; }

.person h5 { margin-bottom: 6px; }
.person ul.roles:after {
	content: '\2605';
	display: block;
	margin: 5px 0 4px 0; }
.person .facts li { margin: 0 20px 8px; }
.person .facts li:last-child { margin-bottom: 0; }

.person:hover img { /* filter: unset; */
	background-blend-mode: overlay; }
.person:hover .caption {
	display: flex;
	flex-direction: column;
	justify-content: center; }



/* CONTACT ==================================================== */
/* .wp-singular header { display: none; } */
#contact { min-height: 70vh; }

#contact img { /* logo */
	width: 383px;
	height: 133px; }
#contact article {
	width: 80%;
	height: 87%;
	margin: 0 auto;
	text-align: center; }

#contact .office {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: 30px; }
#contact iframe {
	width: 420px;
	height: 220px;
	margin: 0 20px 0 0; }
#contact .office div { text-align: left; }
#contact p { margin: 0; }




/* SLIDE NAVIGATION =================================================== */
.swiper-button-next,
.swiper-button-next2,
.swiper-button-prev,
.swiper-button-prev2 {
	width: 32px;
	height: 32px;
	margin-top: 7px;
	background: 0 0 url("img/arrow-plain.png") no-repeat !important;
	filter: drop-shadow(1px 3px 0px rgba(255, 255, 255, 0.7)); }
.swiper-button-prev,
.swiper-button-prev2 { rotate: 180deg; }


/* SLIDE NAVIGATION, BUT MAKE IT FANCEY-FANCE ============================= */
@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-moz-transform: translateX(0);
		transform: translateX(0); }
	40% {
		-moz-transform: translateX(-30px);
		transform: translateX(-30px); }
	60% {
		-moz-transform: translateX(-15px);
		transform: translateX(-15px); }
}
@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateX(0);
		transform: translateX(0); }
	40% { -webkit-transform: translateX(-30px);
		transform: translateX(-30px); }
	60% { -webkit-transform: translateX(-15px);
		transform: translateX(-15px); }
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-webkit-transform: translateX(0);
		transform: translateY(0); }
	40% { -moz-transform: translateX(-30px);
		-ms-transform: translateX(-30px);
		-webkit-transform: translateX(-30px);
		transform: translateX(-30px); }
	60% { -moz-transform: translateX(-15px);
		-ms-transform: translateX(-15px);
		-webkit-transform: translateX(-15px);
		transform: translateX(-15px); }
}

@-moz-keyframes fadeybounce {
	0% { -moz-transform: translateX(-15px); opacity: 0.5; }
	100% { -moz-transform: translateX(0); opacity: 1; }
}
@-webkit-keyframes fadeybounce {
	0% { -webkit-transform: translateX(-15px); opacity: 0.5; }
	100% { -webkit-transform: translateX(0); opacity: 1; }
}
keyframes fadeybounce {
	0% { transform: translateX(-15px); opacity: 0.5; }
	100% { transform: translateX(0); opacity: 1; }
}

.bounce {
	-moz-animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite; }

.fadeybounce {
	-moz-animation: fadeybounce 1.5s infinite alternate ease-in-out;
	-webkit-animation: fadeybounce 1.5s infinite alternate ease-in-out;
	animation: fadeybounce 1.5s infinite alternate ease-in-out; }



/* SINGLE PAGES: MISCELLANY =================================== */
	/* edge-cases + mobile */
.single-work #wrap,
.single-service #wrap { height: 90vh; }
.single-team #wrap { height: 70vh; }

.page.services #wrap,
.page.work #wrap,
.single-work #wrap { margin-top: -140px; }
.single-team #wrap { margin-top: 0; }

.page.services h1,
.page.team h1,
.page.work h1,
.single-work h1 { background-image: url('img/logo-white.png'); }

.page.services nav li:after,
.page.team nav li:after,
.page.work nav li:after,
.single-work nav li:after { /*color: #000; */}

.page.services nav li a,
.page.team nav li a,
.page.work nav li a,
.single-work nav li a,
.single-service nav li a { text-shadow: 1px 1px 5px rgba(98, 98, 98, 0.88); }

.page.services section,
.page.team section,
.page.work section,
.single-work section { margin-top: 0 !important; }

.single section,
.single article { height: 100%; }

/* .single-work article { height: 92% !important; } */
.single-work #work .textbox h3 { font-size: 30px; }
.single-work #work .textbox h4 { font-size: 24px; }
.single-work #work article .buttonwrap { margin-top: 0 !important; }
.single-work #work article .textboxwrap { bottom: 110px; }

.single-service #wrap { margin-top: 0; }
.single-service #services { margin-top: 0; }
.single-service article {
	/* height: 92% !important; */
	 /* border: 1px solid transparent;*/ }

.single-service footer,
.single-team footer,
.single-work footer {
	position: absolute;
	bottom: 0;
	opacity: .5; }
.single-service .socials svg,
.single-team .socials svg,
.single-work .socials svg {
	width: 30px;
	height: 30px; }
.single-service footer #copyright,
.single-team footer #copyright,
.single-work footer #copyright {
	color: #fff; }

.page.services #servicesSlider,
.page.work #workSlider { height: calc(100vh - 160px) !important; }

.page.services #services,
.page.work #work { height: 90vh; }

.page.services #services .first a { cursor: pointer; }

.page.team h2 { margin-bottom: 18px; }

.single-team #team {
	margin-top: 0;
	display: flex;
	align-items: center; /* vertical */
	background-color: unset; }
.single-team #team .person {
	width: 90%;
	margin: 40px auto 0;
	justify-content: left;
	background-color: #fff; }
.single-team #team .person h2 {
	margin: 90px 0 20px;
	font-size: 40px; }
.single-team #team .person img { width: 70%; }
.single-team #team .person .textbox { width: 30%; }
.single-team #team .person .roles li { font-size: 20px; text-transform: uppercase; }
.single-team #team .person ul.roles:after { margin: 10px 0 10px 0; }

.page.services footer,
.page.work footer,
.page.team footer { color: #fff; }


/* MODALS ===================================================== */
.show { display: block; }
.hide { display: none; }
.modal {
	position: fixed !important;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	background: rgba(0,0,0,0.8);
	transition: opacity 400ms ease-in; }
.modal li {
	float: left;
	width: 45%; }
.modal p {
	clear: both;
	margin: 4px auto;
	width: 80%; }
button.close {
	position: absolute;
	top: 3%;
	right: -12px;
	width: 24px;
	box-shadow: 1px 1px 3px #000;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-indent: -6px;
	font-size: 32px;
	font-weight: bold;
	line-height: 25px;
	border: 0px solid;
	border-radius: 12px;
	background: #606061; }
button.close:hover { background: #d71921; }

div[id^="contactform"].modal button.close {
	top: -2%;
	right: -1%;
	z-index: 10; }


/* FORMS ====================================================== */
/* !--------------------------------- generic */
.formwrap {
	box-sizing: border-box;
	position: relative;
	top: 10%;
	left: 5%;
	width: 63%;
	height: 60%;
	margin: auto 12%;
	background-color: #fff;
	padding: 30px 40px;
	border-left: 10px solid #d71921; }
.page.services .formwrap { top: 18%; } /* clear the header */

.formwrap h2,
.formwrap h3,
form {
	width: 70%;
	margin: 0 auto;
	overflow: hidden; }
.formwrap h3 { line-height: 34px !important; }
label {
	display: block;
	margin: 0 0 2px 6px; }
form p,
.modal form p {
	width: 100% !important;
	margin-bottom: 40px !important; }
form p:last-child,
.modal form p:last-of-type { /* has the buttons */
	margin-top: -30px !important;
	text-align: right; }
/* !------------------------------ validation */
span.wpcf7-not-valid-tip {
	float: left;
	font-size: 15px;
	padding: 0 1px; }
div.wpcf7-validation-errors {
	border: 0; }
span.wpcf7-form-control-wrap { position: static; }
div.wpcf7-response-output[role="alert"] { }
label.error { clear: both; }
label span.req { padding-left: 5px; }
p.help {
	clear: both;
	margin: 0 0 0 6px !important;
	text-align: left !important;
	font-style: italic;
	font-size: 11px !important; }
.alert {
	width: 100%;
	margin: 36px 18px 10px !important; }
.alert h3 { width: auto; }
.alert p {
	width: 85% !important;
	margin: 0 !important;
	font-weight: bold;
	text-align: left !important; }
/* !---------------------------------- inputs */
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
	margin-left: 0;
	padding: 4px 5px 5px;
	width: 96%;
	border: 1px solid #444444;
	font-size: 16px;
	background: #f7f7f7;
	box-shadow: inset 4px 4px 9px -4px rgba(73, 73, 73, 0.6) !important; }
input[type="text"],
input[type="email"],
input[type="url"] {
	float: left;
	width: 84%; }
input[type="number"] { width: 18%; }

.row.wide3 select,
.row.wide3 input[type="number"] { width: 89%; }

input[type="tel"],
input[type="date"] { width: 28%; }
select {
	width: 20%;
	margin-top: 4px; }
input[type="text"].wpcf7-free-text { /* text after a radio */
	float: none;
	width: 73.5%;
	padding: 0 5px 1px 5px; }
/* !--------------------------------- buttons */
input[type="submit"] {
	display: inline-block;
	float: right;
	margin-right: 7px;``
	padding: 3px 11px 4px;
	font-size: 20px;
	line-height: 20px;
	text-transform: uppercase;
	border-radius: 4px;
	border-width: 1px;
	-webkit-appearance: none; }
input[type="submit"] {
	color: #d71921;
	background-color: #e8e8e8; }
input[type="submit"]:hover {
	color: #fff;
	background-color: #d71921; }
/* !-------------------------------- success */
form.sent .row { display: none; }
div.wpcf7-mail-sent-ok { border: 2px transparent !important; }


/* 404 ======================================================== */
.error404 .col {
	width: 49%;
	height: 100%; }
.error404 section {
	width: 100%;
	height: 90%;
	padding: 27px; }
.error404 section h3 a {
	color: #da006a;
	font-size: 42px;
	line-height: 38px; }





/* ******************************************************************** */
/* RESPONSIVE  */


/* 680 MAX ====================================*/
	/* shiftnav breakpoint and sliders go to pages */
@media screen and (max-width: 680px) {
	
	.home section#home { height: 420px !important; }
	.home section#intro { height: 480px !important; }
	.home section#team,
	.home section#contact { height: auto !important; }
	.home section#contact { min-height: unset !important; }

	.home #workSlider,
	.home section#work,
	.home section#work .unswiped .swiper-slide.first { height: 520px !important; }

	.home #servicesSlider,
	.home section#services,
	.home section#services .unswiped .swiper-slide.first { height: 420px !important; }

	.home section#services,
	.home section#work,
	.home section#team,
	.home section#contact { margin-top: 80px; }

	#work .swiper-slide.first h2,
	#work .swiper-slide.first h2 a,
	#services .swiper-slide.first h2,
	#services .swiper-slide.first h2 a,
	#team h2,
	#contact h2 {
		font-size: 120px !important;
		line-height: 120px !important;
	text-box-edge: cap alphabetic;
	text-box-trim: trim-both; }
	#team h2,
	#contact h2 { margin: 60px 0 !important; }


	/* team & contact sections */
	#team .teamrow {
		flex-wrap: wrap;
		row-gap: 2px;
		justify-content: center; }
	#team h2+.teamrow { flex-wrap: wrap-reverse; } /* stack prettily if uneven # */
	#team .person {
		margin: 0 12px;
		flex-basis: 26%; }
	.person ul.roles:after { margin: 0; } /* star, these are cramped */
	#contact .office { /* breaks shortly below 680 */
		flex-direction: row-reverse;
		align-items: center; }
	#contact .office div {
		margin-bottom: 16px;
		text-align: center; }


	/* hide work & services stuff that goes elsewhere */
	.home section#services .swiper-slide:not(.first),
	.home section#work .swiper-slide:not(.first),
	.swiper-button-next,
	.swiper-button-prev,
	.swiper-button-next2,
	.swiper-button-prev2 {
		display: none !important;
		opacity: 0 !important; }

	.home #services .swiper-slide.first p a {
	cursor: default; /* disable these, they're only for standalone */
	pointer-events: none; }


	/* work & services first slides -------------------------- */
	/* resize listener adds class at breakpoint */
	.unswiped { overflow: visible !important; }
	.unswiped .swiper-wrapper {
		display: unset !important;
		box-sizing: border-box; }

	.page.work #workSlider.unswiped,
	.page.services #servicesSlider.unswiped,
	#servicesSlider.unswiped .swiper-slide:not(.first) {
		height: unset !important;
		max-height: unset !important; }

	#workSlider.unswiped .swiper-slide,
	#servicesSlider.unswiped .swiper-slide {
		opacity: 1;
		visibility: visible;
		margin-right: 0 !important;
		box-sizing: border-box; }

	#services .swiper-slide.first,
	#work .swiper-slide.first { margin: 0 !important; }

	#services .swiper-slide.first .textwrap,
	#work .swiper-slide.first .textwrap { padding: 12% 0; }

	#work .swiper-slide.first .textboxwrap .textbox { width: 80%; }

	#work h2 a,
	#services h2 a {
		cursor: pointer;
		pointer-events: auto; /* activate these links */
		color: #000 !important;
		background-color: transparent !important; }
	#services h2 a:hover,
	#work h2 a:hover { color: #d71921; }
	
	.home h2 a span { /* let's make an arrow */
		display: inline-block;
		width: 50px;
		height: 50px;
		margin: 4% 0 4% 20px;
		filter: drop-shadow(1px 3px 0px rgba(255, 255, 255, 0.7)); }
	.home h2 a span:after {
		display: block;
		width: 100%;
		height: 100%;
		content: '' !important;
		background-color: rgb(0, 0, 0);
		clip-path: polygon(0 20%, 0 0, 100% 40%, 100% 60%, 0 100%, 0% 80%, 80% 50%); }
	.home h2 a span:hover:after {
		background-color: rgba(255, 255, 255,.6); }


	/* modal contact windows */
	.formwrap {
		width: 85%;
		height: 69%;
		margin: auto 2%; }

	/* work & services stand-alone versions */
	.page.services,
	.page.work { background-color: #000000cc; }
	
	.page.services section,
	.page.work section { margin-top: -120px !important; }


	.page.work section#work .unswiped .swiper-slide.first,
	.page.services section#services .unswiped .swiper-slide.first {
		height: 520px !important;
		margin-bottom: 40px !important; }

	#services .swiper-slide:not(.first) {
		height: unset !important;
		margin: 0 0 70px 0 !important;
		background-size: contain !important;
		border-top: 1px solid #000000cc; /* keeps the background img */ }
	#services .swiper-slide:not(.first) .textwrap {
		margin: 240px 0 0 0;
		background-color: rgba(255,255,255,1); }


	#work .unswiped .swiper-slide:not(.first) { height: unset !important; }
	#work .unswiped .grid { display: block !important; }
	#work .unswiped .grid article {
		height: 420px;
		margin-bottom: 40px;
		/* border-top: 1px solid #000; */
		/* background-size: contain !important; */ }
	
	/* last slide doesn't divide by 4 */
	.grid article:first-child:nth-last-child(1) {
		width: 100%; }
	.grid article:first-child:nth-last-child(1),
	.grid article:first-child:nth-last-child(2),
	.grid article:first-child:nth-last-child(2) ~ .grid article,
	.grid article:first-child:nth-last-child(2) + article {
		margin-top: unset; }
	.grid article:first-child:nth-last-child(1),
	.grid article:first-child:nth-last-child(3) ~ article:last-child { 
		margin-left: unset; }
}



/* 602 MAX ====================================*/
@media all and (max-width: 602px) {
	.formwrap {/* modal contact windows */
		width: 92%;
		height: 80%;
		margin: auto 0;
		padding: 30px 0; }
}
/* 520 MAX ====================================*/
@media all and (max-width: 520px) {
	header h1,
	#contact img {
		width: 275px;
		height: 100px; }
	#services #services-intro h2,
	#services #services-intro h2 a,
	#services .swiper-slide.first h2 a { font-size: 90px !important; }

	.home section#home {
	height: 260px !important;
	margin-bottom: 70px; }

	.page.work section#work .unswiped .swiper-slide.first {
		margin-bottom: 70px !important; }

	#work .unswiped .grid article {
	height: 420px;
	border-top: 1px solid #000;
	background-position: top !important; }

	#work .grid article .textboxwrap {
		position: unset;
		margin: 270px 0 0 6%; }

	#work .grid article .textbox { flex-direction: column; }
	#work .grid article .buttonwrap a {
		margin: 10px 0 6px 0 !important; }
	
	#contact article { width: 90% !important; }
	#contact h2 { margin: 30px 0; }
	#contact .office {
		align-items: center;
		flex-direction: column-reverse; }
	#contact iframe {
		width: 390px;
		margin: 20px 0 0 0; }
	
	.formwrap h2, .formwrap h3, form { width: 90%; }

/* 480 MAX ====================================*/
@media all and (max-width: 480px) {
	header h1,
	#contact img {
	width: 195px;
	height: 70px; }

	#work .grid article .textboxwrap { margin-top: 200px; }

	.home section {
		height: auto !important;
		padding-left: 0;
		padding-right: 0; }
	
	.home section#home { 
		height: 218px !important;
		margin-bottom: 40px; }

	#contact h2,
	#services .swiper-slide.first h2,
	#services .swiper-slide.first h2 a,
	#services #services-intro h2,
	#services #services-intro h2 a,
	#services .swiper-slide.first h2 a,
	#team h2,
	#work .swiper-slide.first h2,
	#work .swiper-slide.first h2 a {
		font-size: 80px !important;
		line-height: 80px !important; }

	.home h2 a span { /* arrows */
		width: 40px;
		height: 40px; }

	.home section#intro  { height: 525px !important; }
	#intro h2 {
		float: none;
		margin: 40px 0 20px 0;
		font-size: 70px;
		line-height: 64px;
		shape-outside: unset; }
	#intro .textwrap { width: 85% !important; }

	#work .unswiped .grid article {
		height: auto;
		margin-bottom: 50px; }
	#work .grid img.mobile {
		display: block;
		width: 100%; }
	#work .grid article .textboxwrap {
		margin-top: -40px; }

	#team .teamrow {
		flex-wrap: wrap;
		row-gap: 3px;
		order: 2; /* put below h2 */
		justify-content: space-evenly;
		/* 1 per row */
		justify-content: left;
		margin-bottom: 3px; }
	#team .person {
		flex-basis: 49%;
		/* 1 per row */
		flex-basis: 62%;
	    margin-left: 2px; }
	
	#team .person .caption { /* 1 per row */
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 80%;
		left: 80%;
		background-image: none !important; }
	#copyright { margin: 0; }
	
@media all and (max-width: 410px) {
	#contact iframe {
	width: 90%; }
}