/* Shared styles for every normal page (hand-written; loaded after the theme
   CSS, the vendored plugin subsets and before the page's own sheet). */

/* Portfolio grid (includes/portfolio-grid.php). On the live pages the
   theme's [projects] shortcode left a <div> open, so every row after the
   first was nested inside the first ".top-proj" row and the theme rule
   ".top-proj h2.big { display: none }" hid the empty heading of all of them.
   The rows are siblings now; the rule is restated for those grid rows (the
   single-row grid on /contact-us/ was never inside a .top-proj row). */
.vc_custom_1547063515084 .align-center > h2.big:empty {
	display: none;
}

/* Same nesting: each grid row was the last child of the row before, so
   ".wpb_text_column *:last-child { margin-bottom: 0 }" zeroed every row's
   35px WPBakery row margin on the pages where the grid sits in a text block.
   All 13 grid rows carry this class. Not the .special-proj rows: there the
   theme's "margin-bottom: -10px !important" won, except on the pages whose
   own CSS sets this class to 0 (digital marketing, urgent fix, support,
   about) -- their page sheets still do. */
.vc_custom_1547063515084:not(.special-proj) {
	margin-bottom: 0 !important;
}

/* The reverse on phones: Orbit gives stacked columns 50px below them up to
   600px. On the live pages no grid column was a :last-child (the next row
   followed it), so all 13 kept it; in the flat grid ".wpb_text_column
   :last-child" zeroed it on the pages where the grid sits in a text block. */
@media screen and (max-width: 600px) {
	.vc_row.vc_custom_1547063515084 > .vc_column_container {
		margin-bottom: 50px;
	}
}
@media screen and (max-width: 767px) {
	/* Same nesting: the next row sat inside each .special-proj row, so the
	   theme's -10px row margin never came between two rows where the
	   columns stack (up to 767px; up to 600px it would also have merged
	   with that 50px column margin into 40px). Side by side, from 768px,
	   the -10px matches the live spacing. */
	.vc_row.vc_custom_1547063515084.special-proj {
		margin-bottom: 0 !important;
	}
	/* ...where the -10px of the .special-proj rows that closed before the
	   content after the grid did apply: tools/domify.py puts that margin on
	   the .eko4-portfolio-tail as --np-mt-phone. */
	.eko4-portfolio-tail[style*="--np-mt-phone"] {
		margin-top: var(--np-mt-phone) !important;
	}
	.eko4-portfolio-tail[style*="--np-mb-phone"] {
		margin-bottom: var(--np-mb-phone) !important;
	}
}

/* Everything that followed a grid (client logos, "As featured on", the
   office map...) sat one row deeper per grid row -- 13 on most pages -- and
   every nested .vc_row added its -15px side margins: there the
   non-full-width rows were 390px wider than the container (the logo marquee
   ran edge to edge). The converter wraps that content in
   .eko4-portfolio-tail with the matching negative margins inline. */

/* Image slideshow -- replaces a Revolution Slider that only showed images
   (the "multi award winning" post): fade every data-delay ms, arrows. The
   box keeps the slider's design-grid proportions (padding-top). */
.eko4-slideshow {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 0;
}
.eko4-ss-slide {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 300ms ease;
}
.eko4-ss-slide.is-active {
	opacity: 1;
}
.eko4-ss-arrow {
	position: absolute;
	top: 50%;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: 2;
}
.eko4-ss-arrow:before {
	content: "";
	position: absolute;
	top: 15px;
	width: 18px;
	height: 18px;
	border-top: 3px solid #fff;
	border-left: 3px solid #fff;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
}
.eko4-ss-prev {
	left: 20px;
}
.eko4-ss-prev:before {
	left: 18px;
	transform: rotate(-45deg);
}
.eko4-ss-next {
	right: 20px;
}
.eko4-ss-next:before {
	right: 18px;
	transform: rotate(135deg);
}

/* Map screenshots (eko4_np_map_picture() in np-core.php) in the boxes the
   live Google maps filled: at its own size, centred like the map was on
   the office (the boxes of the Manchester maps run 5000px past both sides
   of the page, centred on it). The grey is the live map's before its tiles
   came in. The contact map image is only the part below the page top. */
.eko4-map {
	position: relative;
	overflow: hidden;
	background-color: #e5e3df;
}
.eko4-map picture,
.eko4-map .eko4-map-img {
	display: block;
	width: 100%;
	height: 100%;
}
.eko4-map .eko4-map-img {
	max-width: none;
	object-fit: none;
	object-position: 50% 50%;
}
.eko4-map-bottom .eko4-map-img {
	object-position: 50% 100%;
}
/* The live map's attribution, bottom right (only the office map showed it:
   the corners of the 10000px-wide Manchester maps were off the page). */
.eko4-map-credit {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 6px;
	background-color: rgba(245, 245, 245, 0.7);
	color: #000;
	font: 10px/14px Roboto, Arial, sans-serif;
	white-space: nowrap;
}

/* /contact-us/: on the live page the partner logos (everything after the
   one-row grid) sat inside the grid's row -- the [projects] nesting -- so
   that row's 40px bottom margin came after them. Flattened, they follow the
   row and the 40px showed as a gap above "Our partners"; it goes back below.
   (Page CSS sets it with !important; .vc_row raises the specificity.) */
.page-template-template-contact-form-ext .vc_row.vc_custom_1442588301411 {
	margin-bottom: 0 !important;
}
.page-template-template-contact-form-ext .vc_custom_1442588301411 + .eko4-portfolio-tail {
	margin-bottom: 40px;
}

/* /contact-us/ form: its answer (includes/forms.php, js/forms.js). The dark
   overlay has a fixed height and the map section clips below it, so the
   answer takes no room: an error sits in the 40px gap between the heading
   and the fields (the same at every width), the confirmation replaces the
   fields. Empty until the form is sent. */
#big-contact-form {
	position: relative;
}
.eko4-form-answer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	width: -webkit-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 2px;
	padding: 1px 10px;
	box-sizing: border-box;
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
}
.eko4-form-answer:empty {
	display: none;
}
.eko4-form-answer.is-error {
	background-color: #eb3136;
}
#big-contact-form.is-sent > :not(.eko4-form-answer) {
	visibility: hidden;
}
#big-contact-form.is-sent .eko4-form-answer {
	top: 0;
	bottom: 0;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	width: auto;
	margin: 0;
	font-size: 20px;
	line-height: 1.5;
}

/* /contact-us/ footer. The theme fixed it at 590px: room for the 120px
   "latest tweets" band above the main footer. The band is gone (dead
   Twitter feed), which left 120px of empty footer under the copyright; below
   1200px the main footer was taller than 590px even on the live site and
   overflowed the grey box. 1200px+: 590px minus the band, exactly the grey
   the live page showed below it. Narrower, the footer fits its content (the
   theme's style.css does the same for the other pages' footers). */
.page-template-template-contact-form-ext #footer {
	height: 470px;
}
@media (max-width: 1199px) {
	.page-template-template-contact-form-ext #footer {
		height: auto;
	}
}
/* Footer corner ribbon: below 768px the theme makes it 10% of the
   footer's height, and the footer (height: auto there) lost the dead
   "Tweets by" timeline line, 42px: 10% of the footer as it was. */
@media (max-width: 767px) {
	#footer .footer-ribbon {
		height: calc(10% + 4.2px);
	}
	/* /contact-us/ also lost the tweets band: 252px in all */
	.page-template-template-contact-form-ext #footer .footer-ribbon {
		height: calc(10% + 25.2px);
	}
}

/* The corner ribbon is 35% of the footer's height: as tall as it was in
   the 590px footer (the theme's 10% below 768px is unchanged). */
@media (min-width: 768px) {
	.page-template-template-contact-form-ext #footer .footer-ribbon {
		height: 206.5px;
	}
}