/*
Theme Name: BZ 2022
Author: BZ
Author URI: www.thisisbz.com
Version: 1.0, 2022
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

* {scrollbar-width: thin; scrollbar-color: rgba(255,105,180,1) #444;}

::-webkit-scrollbar {width: 1vw;height: 1vh;}

::-webkit-scrollbar-track {background-color: #444; border: 1px solid #000; min-height: 5px !important;}

::-webkit-scrollbar-thumb {background-color: rgba(255,105,180,1);}


/* Setup
_________________________________________________ */

html, body{height: 100%; width: 100%; background: rgba(255,105,180,1);}

body {background: #fff;text-rendering: optimizelegibility; line-height: 1.625; color: #000; word-wrap: break-word; font-size: 62.5%; overflow: visible;opacity: 0;transition: opacity 3s;}

.wrapper {width: 100%;}

.clearer, .clearer00, .clearer10, .clearer20, .clearer30, .clearer40, .clearer50, .clearer60, .clearer70, .clearer80, .clearer90, .clearer100
{clear: both; height: 1px; width: 100% !important; background-color: inherit; height: 0px;}
.clearer10 {height: 1vw;} .clearer20 {height: 2vw;} .clearer30 {height: 3vw;} .clearer40 {height: 4vw;} .clearer50 {height: 5vw;}
.clearer60 {height: 6vw;} .clearer70 {height: 7vw;} .clearer80 {height: 8vw;} .clearer90 {height: 9vw;} .clearer100 {height: 10vw;}

.clearergrey {background-color: rgb(68,68,68)}

.video-container{width: 100vw;height: 100vh;}

.video-container iframe {position: absolute;top: 50%;left: 50%;width: 100vw;height: 100vh;transform: translate(-50%, -50%);}

	@media (min-aspect-ratio: 16/9) {.video-container iframe {height: 56.25vw;}}
	@media (max-aspect-ratio: 16/9) {.video-container iframe {width: 177.78vh;}}

.video-wrapper {position: relative;padding-bottom: calc(var(--aspect-ratio, .5625) * 100%); height: 0;}
	.video-wrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}


/* Fonts and Text
_________________________________________________ */

p, a, li, h1, h2, h3, h4, h5, h6, label, button,.nf-error .nf-error-msg {
	font-family: 'Merriweather', Georgia, Garamond, Times New Roman, serif;
	font-size: 1.1vw;
	line-height: 180%;
	font-weight: 100;
	color: #fff;
}

p, li {margin: 0 0 2vw 0;}

p strong, b, p strong {font-weight: 900;}
body.csr p strong, body.accessibility p strong, body.privacy p strong {color: rgba(255,105,180,1);}

.small p, p.small {font-size: 0.9vw;}

p.quote {font-weight: 100 !important; padding: 1vw 0; color: #999;}
	p.quote:before {content: "\201c" !important; color: #999 !important; display: inline !important; }
	p.quote:after {content: "\201d" !important; color: #999 !important; display: inline !important; }

p.disclaimer {color: rgba(255,105,180,1); border: 1px solid rgba(255,105,180,1); display: inline-block; padding: 0.5vw 1vw !important}

#relblogposts p {background: rgba(255,105,180,1) !important; display: inline; padding: 0.5vw 2vw; float: left; clear: both; margin-bottom: 3vw;}

.single p {width: 70%;}

#intro aside div p:first-of-type,
#casestudies p:first-of-type,
.single p:first-of-type
{width: 100%; font-size: 1.6vw; font-weight: 400; line-height: 180%;}

p.sotw, p.fotw {font-size: 1vw !important;
	background: rgba(255,105,180,1) !important;
	padding: 1vw;
	display: inline-block;
	/* float: left; */
	margin-bottom: 1vw;}

#casestudies aside p:first-of-type,
.single p:first-of-type
{color: rgba(255,105,180,1) !important}

footer p {font-size: 0.7vw; line-height: 190%;}

footer p, footer h3, footer h4  {margin: 0 !important;}

h1 {background: rgba(255,105,180,1); display: inline; line-height: 140% !important; font-weight: 900; font-size: 4vw}

h1::after {content: ""; clear: both; display: table;}

h2 {font-size: 3.5vw; font-weight: 100; width: 100%; line-height: 90%; display: block; margin-bottom: 3vw; color: rgba(255,105,180,1);}
	.content blockquote h2 {background: rgba(255,105,180,1) !important;display: inline !important;line-height:140%;color:#fff;}

h3 {font-size: 2vw; font-weight: 400; margin-bottom: 2vw; letter-spacing: 0 !important;}
	#banner h3 {width: 50%; margin-bottom: 5vw; margin-left: 10%; margin-top: 5vw;}
	.cta h3 {padding: 0vw 1vw;}

	h3.cp {color: rgba(255,105,180,1) !important; font-size: 1.5vw !important; display: block !important; margin: 0 !important;}

h4, h4 a {font-size: 1.4vw; margin-bottom: 1vw; color: rgba(255,105,180,1); font-weight: 100 !important; line-height: 120% !important;}
	#relblogposts h4, #relblogposts h4 a {font-size: 1vw !important; text-align: center !important;padding: 0 0.5vw;}

	h4 strong {font-weight: 300;}


h5 {font-size: 1vw; margin-bottom: 1vw;}

.grey {color: #999 !important;}
.pink, a.pink {color: rgba(255,105,180,1) !important;}

	aside.sotw p.grey, aside.fotw p.grey,
	aside.sotw p.pink, aside.fotw p.pink
	{margin-bottom: 0 !important;}

.white {color: #fff !important;}
.pinkbg {background: rgba(255,105,180,1) !important;}

.nomargin {margin: 0 !important;}
.alignright {text-align: right;}
.light {font-weight: 100 !important;}
.heavy {font-weight: 600 !important;}
.center {text-align: center !important;}

/* Links
_________________________________________________ */

a {margin: 0;}

a, a.btn {text-decoration: none !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;}

.single p a, .single li a, .textimage a {border-bottom: 1px dotted #fff !important;}

/* Lists
_________________________________________________ */

ul {list-style-type: none;} li {list-style-type: none; margin: 0 1vw 0 0;}
.story li, main.text li {list-style-position: outside !important; list-style-type: disc !important; margin-left: 20px !important;}

/* Slices
_________________________________________________ */

.bottomslice {clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 90%);}
.topslice {clip-path: polygon(100% 0%, 0% 5%, 0% 100%, 100% 100%); padding: 5vw 15%;}

/* Marquee
_________________________________________________ */




/* Positionals
_________________________________________________ */

main {width: 100%; z-index: 2; margin-top: 100vh; position: relative;}
	main.textonly {margin-top: 0 !important;}

.left60 {width: 60%; float: left; }
.right30 {width: 30%; float: right; }
.margintopminus7pc {margin-top: -7% !important}
.paddingtopplus7pc {padding-top: 7% !important;}


.story {width: 100%; float: left; clear: both;}

.standard {width: 70%;  clear: both; float: left; padding: 5vw 15%; position: relative; background: rgb(68,68,68);}
	.standardblack {background: #000 !important;}
	.standardgreyalt {background: #2b2b2b !important;}

#relblogposts.standard {padding: 4vw 15% 1vw 15%; margin-top: -3vw; background: #2b2b2b; }

.standard aside {width: 70%; float: left; padding: 5% 0% 5% 0;}
	main #casestudies aside {padding: 0% 0% 5% 0;}

	.standard aside:nth-of-type(2) {width: 25%; float: left; padding: 5% 0% 5% 0;}

	aside.asidescroll {width: 100%; overflow-x: auto; display: flex; flex-wrap: nowrap; margin-bottom: 2vw; padding: 5% 0 !important; }
			#relblogposts aside.asidescroll {padding: 0 !important;}

			aside.asidescroll180 {transform: rotate(180deg) scaleX(-1);}
				aside.asidescroll180::-webkit-scrollbar-track,
				aside.asidescroll180::-webkit-scrollbar-thumb
				{border-radius: 20px;}

		aside.asidescroll section {margin-right: 5%; position: relative; min-width: 30%;}
			aside.asidescroll180 section {transform: rotate(0deg) scaleY(-1);}
			#relblogposts aside.asidescroll section {width: 15%; min-width: 15%; margin-bottom: 2vw;}

			#services_overview aside.asidescroll section,
			#blog aside.asidescroll section, #case_studies aside section
			{width: 25%; min-width: 25%;}

			aside.sotw section, aside.fotw section {max-width: 30%;}
				aside.sotw, aside.fotw {margin-bottom: 0 !important}

			aside.asidescroll section img {width: 100%; clip-path: polygon(0 0, 100% 0%, 100% 95%, 0% 100%);}

	#intro.standard aside div, #intro.standardfw aside div
	{column-count: 2; column-gap: 4vw; margin-bottom: 2vw}

		#intro.standard aside div.onecol {column-count: 1 !important;}

	body.headlines #intro.standard aside div,
	main.textonly #intro.standard aside div
	{column-count: 1 !important;}

.standardfw {width: 100%;  clear: both; float: left; position: relative; background: rgb(68,68,68);}

.standardfw aside {width: 70%; float: left; padding: 15% 0% 5% 0;}


 /* Icons
 _________________________________________________ */

img.icon {width: 3vw !important; height: 3vw !important; display: inline-block; vertical-align: middle; margin: 1vw 1vw 1vw 0;}
img.introicon {position: absolute; top: 40%; right: 15%; opacity: 1; width: 10%; height: auto;}

svg {height: 3vw; width: 3vw; vertical-align: middle; }
button svg {display: inline-block;margin-top: -0.2vw; width: 1.2vw; height: 1.2vw; }

#steps section svg,
#services_overview svg
{margin-bottom: 1vw !important;}

#steps section button svg {margin-bottom: 0 !important;}

/* Sidebar Notes
_________________________________________________ */

.sidebar ul li {padding: 0.2vw 0.5vw; margin-bottom: 0.5vw; font-size: 0.8vw !important; border-radius: 3px; margin-right: 0.5vw; display: inline-block; border: 1px solid rgba(255,255,255,0.3) !important; color: #999;}

/* Sliced images
_________________________________________________ */

img.sliced, .slicedimage img
{height: auto; width: 100% !important; z-index: 100; top: 0; position: relative; margin-bottom: 1vw; clip-path: polygon(0 0, 100% 0%, 100% 95%, 0% 100%); margin-bottom: 1vw;}

/* Menu
_________________________________________________ */

.flex-center {display: flex; align-items: center; justify-content: center;}

.outer-menu {position: relative; z-index: 1;}
.outer-menu .checkbox-toggle {position: absolute; top: 0;right: 0;z-index: 2; cursor: pointer;width: 5vw;height: 5vw;opacity: 0;margin: 0 !important;}
.outer-menu .checkbox-toggle:checked + .hamburger > div {transform: rotate(135deg);}
	.outer-menu .checkbox-toggle:checked + .hamburger > div:before,.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
    top: 0;transform: rotate(90deg);}
	.outer-menu .checkbox-toggle:checked + .hamburger > div:after {opacity: 0;}

	.outer-menu .checkbox-toggle:checked ~ .menu {pointer-events: auto; visibility: visible;}
		.outer-menu .checkbox-toggle:checked ~ .menu > div {transform: scale(1);transition-duration: 0.75s;}
			.outer-menu .checkbox-toggle:checked ~ .menu > div > div {opacity: 1;transition: opacity 0.4s ease 0.4s;}

	.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {transform: rotate(225deg);}

.outer-menu .hamburger {position: absolute;z-index: 1;width: 3vw;height: 3vw;padding: 0;cursor: pointer;transition: box-shadow 0.4s ease;-webkit-backface-visibility: hidden;backface-visibility: hidden;display: flex;align-items: center;justify-content: center;background: rgba(255,105,180,0.5);padding: 0.5vw; top: 1vw; right: 1vw; }

	.outer-menu .hamburger > div {position: relative;flex: none;width: 60%;height: 2px;background: #ffffff;transition: all 0.4s ease;display: flex;align-items: center;justify-content: center;}
	.outer-menu .hamburger > div:before, .outer-menu .hamburger > div:after {
    content: '';position: absolute;z-index: 1;top: -10px;left: 0;width: 100%;height: 2px;background: inherit;transition: all 0.4s ease;}
	.outer-menu .hamburger > div:after {top: 10px;}

.outer-menu .menu {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;visibility: hidden;overflow: hidden;-webkit-backface-visibility: hidden;backface-visibility: hidden;outline: 1px solid transparent;display: flex;align-items: center;justify-content: center;}
	.outer-menu .menu > div {width: 300vw;height: 300vw;color: #ffffff;background: rgba(255,105,180,1);border-radius: 50%;transition: all 0.4s ease;flex: none;transform: scale(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;overflow: hidden;display: flex;align-items: center; justify-content: center;}
	.outer-menu .menu > div > div {max-width: 90vw;max-height: 100vh;opacity: 0;transition: opacity 0.4s ease;width: 40%;float: left;position: relative;}
		.outer-menu .menu > div > div:nth-of-type(2) {left: 0;}

		.outer-menu .menu > div > div > ul > li {margin: 0 0 1.5vw 0;}
			.outer-menu .menu > div > div > ul > li > a {position: relative;display: inline;cursor: pointer;transition: color 0.4s ease;font-weight: 900 !important;font-size: 4vw !important;line-height: 50% !important; border-bottom: none !important;}

			.outer-menu .menu > div > div > ul > li.contact {margin-bottom: 1vw;}
				.outer-menu .menu > div > div > ul > li.contact > a {font-size: 2vw !important; text-transform: revert !important; font-weight: 300 !important;}

/* Forms etc
_________________________________________________ */

button,
.nf-form-content button,
.nf-form-content input[type=button],
.nf-form-content input[type=submit]
{background: rgba(255,105,180,0.5) !important;border: none !important;display: inline-block !important;padding: 0.5vw 1vw !important;border-radius: 5px !important;margin-right: 1vw !important;}

.menu button {
background: none !important;
border: 1px solid #fff !important;
}

button.mrgbt {margin-bottom: 1vw !important;}

#banner.services button {margin-top: 3vw;}

label {font-weight: 300; padding-bottom: 1vw; display: inline-block !important;}

input[type=text],
select,
.nf-form-content input:not([type=button]),
.nf-form-content .ninja-forms-field,
.nf-form-content .list-select-wrap .nf-field-element>div,
textarea,
.nf-form-content textarea
{border-radius: 20px !important; border: none !important; border-collapse: collapse !important; height: 4vw; padding: 0 2vw !important;-webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}

textarea,
.nf-form-content textarea.ninja-forms-field
{height: 10vw !important; padding: 2vw !important;}

/* Contact form override */

.nf-form-content {float: left; width: 100% !important}
.nf-form-fields-required, .ninja-forms-req-symbol, .nf-error-field-errors, .nf-pass.field-wrap .nf-field-element:after
{display: none !important;}

.nf-error.field-wrap .nf-field-element:after, .nf-error .nf-error-msg
{background: none !important; color: rgba(255,105,180,1) !important; line-height: revert !important; font-size: 140% !important;}

.nf-form-content input[type=button]:hover, .nf-form-content input[type=submit]:hover, .nf-form-content input[type=button]
{color: #fff !important; font-family: 'Merriweather', Georgia, Garamond, Times New Roman, serif;}


/* Header
_________________________________________________ */

header {position: fixed; top: 0; left: 0; z-index: 110;}

header .logo img {height: 5vw; width: auto;}
header > .wrapper > div {position: fixed; top: 1vw; left: 1vw; z-index: 110;}
header > .wrapper > div:nth-of-type(2) {position: fixed; top: 0; right: 0; z-index: 110;}

/* Banner
_________________________________________________ */

#banner {clear: both; float: left; padding: 0 5%; z-index: 1; height: 80vh; position: fixed; overflow: hidden; top: 0; width: 100%; padding-top: 20vh; background-size: cover; background-position: center;}

	#banner.services {background-position: right;}
	body.home-page #banner {padding: 0; height: 100vh; padding-top: 0; background-position: left;}

#banner::before {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(#111, transparent) 0em 0/0.5em 0.5em space; -webkit-mask: var(--mask); mask: var(--mask); content: ""; z-index: 20;}

.mousecontainer {display: flex; align-items: center; justify-content: center; position: absolute; bottom: 20px; left: 50%; transform: translate(-50%, 0); z-index: 30;}
	.field {display: flex; align-items: center; justify-content: space-around; width: 300px; }
	.scroll {width: 60px; height: 60px; /* border: 2px solid #fff; border-radius: 50%; */ position: relative; animation: down 1.5s infinite;-webkit-animation: down 1.5s infinite;}
	.scroll::before {content: "";position: absolute; top: 15px; left: 18px; width: 18px; height: 18px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);}

		 @keyframes down {0% {transform: translate(0);} 20% {transform: translateY(15px);} 40% {transform: translate(0);}}
		 @-webkit-keyframes down {0% {transform: translate(0);} 20% {transform: translateY(15px);} 40% {transform: translate(0);}}

#banner aside {display: block; width: 40%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; margin-left: 9%;}
	#banner aside.desktop {width: 40%; margin-left: 50%;}
	#banner aside.mobile {margin-left: 10%;}

/* Home Page Case Study Slider
_________________________________________________ */

.info {position: absolute; top: 0; right: 0; z-index: 9999999; margin: 1.5rem;}

.cd-slider {position: relative; width: 100%; height: 100vh; overflow: hidden; z-index: 2000;}

.cd-slider.ie9 nav div span {display: none;}

.cd-slider ul li {position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; transition: visibility 0s .6s;}
	.cd-slider ul li::before {content: ''; position: absolute; top: 50%; left: 50%; border-radius: 100%; width: 135vh; height: 135vh; border: solid rgba(255,255,255,0.2); border-width: 0; transform: translate(-50%, -50%); pointer-events: none; transition: border-width .4s .6s;}

.content {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: 50% 100%; background-size: auto 100%; background-repeat: no-repeat; /*mix-blend-mode: lighten;*/ opacity: 0; transform: scale(1.2); transition: opacity .4s .6s, transform .4s .6s;}
	.content blockquote {position: absolute; bottom: 5%; left: 15%; z-index: 2; max-width: 35%;}


.cd-slider li.current_slide {visibility: visible;}
.cd-slider li.current_slide::before {border-width: 16rem;}
.cd-slider li.current_slide .content {opacity: 1;transform: scale(1);}

nav div {position: absolute;top: 50%;left: 4%;width: 5rem;height: 5rem;margin-top: -2.5rem;list-style: none;}
nav div:last-of-type {left: auto;right: 4%;}

.prev, .next {position: relative;z-index: 100;width: 100%;height: 100%;display: block;border-radius: 100%;transition: box-shadow .3s;}
.prev::before, .prev::after, .next::before, .next::after {
	content: '';position: absolute;left: 43%;background: #fff;width: .4rem;min-width: 3px;border-radius: 3px;height: 34%;}
	.prev::before {transform: rotate(45deg);top: 24%;}
	.prev::after {transform: rotate(-45deg);bottom: 24%;}

.next::before, .next::after {left: auto;right: 43%;}
	.next::before {transform: rotate(-45deg);top: 24%;}
	.next::after {transform: rotate(45deg);bottom: 24%;}

.prev:hover, .next:hover {box-shadow: 0 0 0 1rem rgba(0, 0, 0, 0.15);}

nav > div > span {position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-radius: 100%;z-index: 5;pointer-events: none;will-change: width, height;transform: translate(-50%, -50%);transition: width .6s, height .6s;}

/* Counter
_________________________________________________ */

.counter_wrapper {z-index: 102; position: relative; display: flex; float: left; margin-bottom: 3vw; text-align: left; color: #999 !important;}
.counter {	font-family: 'Merriweather', Georgia, Garamond, Times New Roman, serif; font-size: 4vw; font-weight: 100; line-height: 100%;}

/* Steps
_________________________________________________ */

#steps {z-index: 104; position: relative; padding-bottom: 10%;}
	#steps section {
		/* width: calc(25% - 4vw);margin-right: 3%;float: left;border: 1px solid rgba(255,105,180,0.7) !important;padding: 2vw;border-radius: 20px; */
		width: 28%;
		margin-right: 3%;
		float: left;
	}

		#steps section:nth-of-type(2) {/* margin-top: 6vw; width: calc(35% - 4vw);*/}
			#steps section:nth-of-type(3) {/* margin-top: 3vw; width: calc(30% - 4vw);*/ }

	#steps section.wide {width: 39% !important; margin-top: 0 !important; float: left;}
		#steps section.wide:nth-of-type(2) {float: right; margin-right: 0 !important}

/* Blog
_________________________________________________ */

#blog { margin-top: -8vw; padding-top: 10vw; z-index: 101;}

#bloghome aside {width: 100% !important;}
	#bloghome aside section {margin-bottom: 3vw; float: left; width: 100%;}
		#bloghome aside section div {float: left; width: 25%;}
			#bloghome aside section div:nth-of-type(even) {width: calc(70% - 5vw); margin-left: 4vw;}

.credits {float: left; width: 100%;}
	.credits img, #sotw h5 img, #fotw h5 img {display: inline-block; vertical-align: middle; height: 3vw; width: auto;}

main.blogpage br {content: '.'; display: inline-block; width: 100%;}

/* Thing of the week
_________________________________________________ */

.totw_caption {background: rgba(255,105,180,1);
	padding: 0.5vw 1.5vw;
	border-radius: 20px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;}

#totw aside {width: 100% !important;}
	#totw aside section {margin-bottom: 3vw;
		float: left;
		width: calc(45% - 3vw);
		border: 1px solid rgba(255,105,180,1) !important;
		border-radius: 20px;
		}

		#totw aside section p {margin: 0 !important;}

		.indent {padding: 2vw;}

		#totw aside section:nth-of-type(odd) {clear: both;}
		#totw aside section:nth-of-type(even) {float: right;}

	#totw aside section img {width: 100%; height: auto;}


.credits {float: left; width: 100%;}
	.credits img, #sotw h5 img, #fotw h5 img {display: inline-block; vertical-align: middle; height: 3vw; width: auto;}

main.blogpage br {content: '.'; display: inline-block; width: 100%;}


/* Case Studies
_________________________________________________ */


main.casestudies #casestudies {background: rgb(68,68,68);;
	width: 70%;
	clear: both;
	float: left;
	padding: 3vw 15% 2vw 15%;
	position: relative;
	padding-top: 10vw;
	z-index: 101;
	clip-path: polygon(100% 0%, 0% 5%, 0% 100%, 100% 100%);
}


.blockquote-wrapper {width: 100%;}
.blockquote {position: relative; margin: 80px auto; align-self: center; width: 100%;}
.blockquote h3 {position: relative; border: 2px solid rgba(255,105,180,1); border-radius:20px; padding: 25px;}

.blockquote h3:after {content:""; position: absolute; border: 2px solid rgba(255,105,180,1); border-radius: 0 50px 0 0; width: 60px; height: 60px; bottom: -62px; left: 50px; border-bottom: none; border-left: none; z-index: 3;}

.blockquote h3:before {content:""; position: absolute; width: 80px; border: 6px solid rgb(68,68,68); bottom: -3px; left: 50px; z-index: 2;}

.blockquote h4 {position: relative; color: #ccc; font-weight: 100; margin: 0; padding-top: 15px; z-index: 1; margin-left: 150px; padding-left: 12px; font-size: 1vw;}
	.blockquote h4:first-letter {margin-left:-12px;}

/* Case Study and Blog Controls
_________________________________________________ */

.prevandnext {width: 100%; margin: 2vw 0; padding-bottom: 4vw; float: left;}
	.prevandnext img {height: 5vw;
		width: auto;
		clip-path: polygon(0 0, 100% 0%, 100% 95%, 0% 100%);
		vertical-align: middle;
		margin-right: 0.5vw;}

.prevandnext span {width: 100%; clear: both;}
	.prevandnext span.left {float: left;}
	.prevandnext span.right {float: right; text-align: right;}

	.prevandnext a {font-size: 2vw !important;
		color: rgba(255,105,180,1) !important;}



/* About
_________________________________________________ */

#otw {float: left;}

#sotw, #fotw {float: left; width: 40%}
	#fotw {float: right; }

#sotw h5, #fotw h5, #bzlove h5 {background: rgba(255,105,180,1); display: inline-block; padding: 0.2vw 0.5vw; color: #fff; padding: 0.5vw 2vw; clear: both; margin-bottom: 1vw;}

#otw img {width: 100%; height: auto;}

#bzlove {width: 100%; float: left; padding-bottom: 3vh;}

#bzlove > div {width: 15%; float: left; margin-right: 1vw;}
	#bzlove img {width: 100%; float: left; border-radius: 50%; display: inline-block; vertical-align: middle; margin: 1vw 1vw 1vw 0;}
	#bzlove p {text-align: center; color: #999; font-size: 0.9vw;}


.crossfade > figure {animation: imageAnimation 48s linear infinite 0s; backface-visibility: hidden; background-size: cover; background-position: center center; color: transparent; height: 100%; left: 0px; opacity: 0; position: absolute; top: 0px; width: 100%; z-index: 0;}

.crossfade > figure:nth-child(1) {background-image: url('/wp-content/themes/BZ2022/img/banner/chester.jpg');}
.crossfade > figure:nth-child(2) {animation-delay: 6s; background-image: url('/wp-content/themes/BZ2022/img/banner/manchester.jpg');}
.crossfade > figure:nth-child(3) {animation-delay: 12s; background-image: url('/wp-content/themes/BZ2022/img/banner/leeds.jpg');}
.crossfade > figure:nth-child(4) {animation-delay: 18s;background-image: url('/wp-content/themes/BZ2022/img/banner/chester2.jpg');}
.crossfade > figure:nth-child(5) {animation-delay: 24s; background-image: url('/wp-content/themes/BZ2022/img/banner/manchester2.jpg');}
.crossfade > figure:nth-child(6) {animation-delay: 30s; background-image: url('/wp-content/themes/BZ2022/img/banner/leeds2.jpg');}
.crossfade > figure:nth-child(7) {animation-delay: 36s;background-image: url('/wp-content/themes/BZ2022/img/banner/chester3.jpg');}
.crossfade > figure:nth-child(8) {animation-delay: 42s;background-image: url('/wp-content/themes/BZ2022/img/banner/manchester3.jpg');}
.crossfade > figure:nth-child(9) {animation-delay: 48s;background-image: url('/wp-content/themes/BZ2022/img/banner/leeds3.jpg');}

@keyframes imageAnimation {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
	  }
	  8% {
		animation-timing-function: ease-out;
		opacity: 1;
	  }
	  17% {
		opacity: 1
	  }
	  25% {
		opacity: 0
	  }
	  100% {
		opacity: 0
	  }
	}

/* Related blog posts
_________________________________________________ */

#relblogposts {float: left;}


/* Sector Pages
_________________________________________________ */

main.sectors {width: 100%; float: left;}

#sector_gallery {float: left;}

#sector_gallery section {float: left !important; width: 32% !important; margin: 0 8% 5% 0 !important; position: relative;}

	#sector_gallery section:nth-of-type(odd) {clear: both;}
	#sector_gallery section img {width: 100%; height: auto; max-width: 300px !important;}

#sector_gallery h4 {font-weight: 400 !important;}
	#sector_gallery h4.light {font-weight: 100 !important;}


/* Footer
_________________________________________________ */

footer {z-index: 100; position: relative; width: 100%; clear: both; float: left; background: rgb(68,68,68); padding-top: 3vw; margin-top: -1vw;}
	body.casestudies footer, body.services footer, body.about footer {background: #2b2b2b;}

footer .cta {background: #000; position: relative; z-index: 300; margin: -4vw 0 3vw 0; float: left; background: rgba(255,105,180,1); display: inline;}

footer .footer {background: #000; width: 70%; padding: 2vw 15% 0 15%; position: relative; z-index: 200; float: left;}

footer .terms {width: 100%; border-top: 0.2px solid #FF69B4; clear: both; float: left; margin-top: 2vw; padding: 1vw 0 3vw 0;}


.typecontainer {width: 80%;}

.cursor {
  display: inline-block;
  background-color: #fff;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}
.cursor.typing {
  animation: none;
}
@keyframes blink {
  0%  { background-color: #ccc; }
  49% { background-color: #ccc; }
  50% { background-color: transparent; }
  99% { background-color: transparent; }
  100%  { background-color: #ccc; }
}


/* Client Promo */

.cp_videos {display: flex;flex-wrap: wrap;}

.cp_videos > div {flex: 1; max-width: 28%; min-width: 28%; margin-right: 3%;}

.cp_videos p {font-size: 0.8vw !important;}

.cp_videos iframe {width: 100%;}

.cp_videos img {width: 100%; height: auto;}

.cp_arrow {
  margin: 8% 0;
}
.cp_bounce {
  -webkit-animation: cp_bounce 2s infinite;
  animation: cp_bounce 2s infinite;
}
@-webkit-keyframes cp_bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
	transform: translateY(0);
  }
  40% {
	transform: translateY(-30px);
  }
  60% {
	transform: translateY(-15px);
  }
}
@keyframes cp_bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
	transform: translateY(0);
  }
  40% {
	transform: translateY(-30px);
  }
  60% {
	transform: translateY(-15px);
  }
}


/* Mobile
_________________________________________________ */

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

.outer-menu .checkbox-toggle, .outer-menu .hamburger {width: 10vw !important; height: 10vw !important;}
.outer-menu .menu > div > div > ul > li > a {font-size: 8vw !important;}
.outer-menu .menu > div > div > ul > li {margin: 0 0 2.5vw 0;}
.outer-menu .menu > div > div > ul > li.contact > a {font-size: 3vw !important;}

.content blockquote {max-width: 100%;}

header .logo img {height: 12vw;}

p, a, li, h1, h2, h3, h4, h5, h6, label, button, #intro p, #intro aside div p:first-of-type,
.single p:first-of-type,
.nf-error .nf-error-msg,
.prevandnext a,
#casestudies p:first-of-type
{line-height: 6vw !important; font-size: 3vw !important;}

.single p {width: 100%;}

h1 {font-size: 8vw !important; line-height: 12vw !important;}
h2 {font-size: 6vw !important; font-weight: 600 !important;}
h3, #steps section h3 {font-size: 4.5vw !important; font-weight: 600;}
h4 {font-size: 3vw !important;}

#relblogposts h4, #relblogposts h4 a {
	font-size: 2.5vw !important;
	text-align: revert !important;
	padding: 0 !important;
line-height: 100% !important;}

#services_overview {padding-bottom: 5vw !important;}


.bottomslice {clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 98%);}
.topslice {clip-path: polygon(100% 0%, 0% 2%, 0% 100%, 100% 100%);}


.blogtopslice {clip-path: polygon(100% 0%, 0% 2%, 0% 100%, 100% 100%);}

svg {width: 4vw !important; height: 4vw !important;}

#banner {background-position: left !important;}
#banner.single, #banner.contact {background-position: center !important;}

body.classic-motor-cars #banner {background-position: right !important;}
body.darwin-escapes #banner {background-position: center !important;}

#banner aside {width: 65% !important;}

.rocket {display: none;}

.standardblack, .standard {padding: 5vw 15% 0 15%;}
	.standardblacknop {padding: 0 !important;}
	.standard1vwtop {padding: 1vw 15% 0 15% !important;}
.standard aside, .standardblack aside, .standardfw aside, .standardfwblack aside
{width: 90%; padding: 25% 5% 15% 5%;}

.standard aside div, .standardblack aside div, .standardfw aside div, .standardfwblack aside div
{column-count: 1 !important;}

#case_studies aside.asidescroll div:nth-of-type(2) {display: none;}

aside.asidescroll {width: 100% !important;}

aside.asidescroll section {min-width: 60% !important;}

img.icon {width: 6vw !important; height: 6vw !important; margin: 1vw 1vw 4vw 0;}
#intro img.introicon {display: none;}

.counter_wrapper {float: left; text-align: left; padding: 3vw 0 5vw 0;}

.sidebar ul li {font-size: 2.3vw !important; text-align: center; margin-right: 1vw !important; padding: 0.5vw 1vw !important;}

.credits img {height: 10vw;}

#steps {padding-bottom: 15%; padding-top: 15% !important; margin-top: -15% !important;}
#steps section, #steps section.wide {width: 100% !important;float: revert; }

#steps section.wide:nth-of-type(2) {float: revert !important; margin-top: 2vw !important;}

#relblogposts {margin-top: -5% !important; padding-top: 15% !important;}

.counter {color: #fff;font-size: 6vw;}

#bloghome aside section div {width: 60%; float: left; clear: both;}
	#bloghome aside section div:nth-of-type(even) {width: 100% !important; margin-left: 0; padding-bottom: 2vw; border-bottom: 1px solid rgba(255,105,180,1);}

#sotw, #fotw, #sector_gallery section, #totw aside section
{width: 100% !important;}

#totw aside section:nth-of-type(even) {float: left;}

#bzlove > div {width: 45%;margin-right: 1vw;}


button, .nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] {padding: 1vw 2vw !important}

textarea,
.nf-form-content textarea.ninja-forms-field
{height: 30vw !important;}



footer .left60, footer .right30 {width: 100% !important; float: left; text-align: left;}

footer .cta {width: 100%;text-align: center;}

footer h3 {font-size: 3vw !important;}
footer h4 {font-size: 2vw !important;}
footer p {text-align: left !important;}

footer .footer_info img.social {margin: 2vw 4vw 2vw 0; width: 6vw;}

footer .terms a {line-height: 100% !important;}

}