.grey-block {
	display:inline-block;
	padding:0.25rem 0.625rem;
	letter-spacing: 0.15rem;
	background-color: #333;
	font-size: 0.8125rem;
	line-height:1.3rem;
	text-transform: uppercase;
	color:#fff;
}
.individual-box-heading {
	font-weight: 900;
	text-transform:uppercase;
	line-height:1.2em;
}
.logo {
	background: url('/assets/images/the-well-islington-colour.svg');
  	background-repeat: no-repeat;
  	background-size: auto;
}
.logo:hover {
	background: url('/assets/images/the-well-islington-white.svg');
  	background-repeat: no-repeat;
  	background-size: auto;
}
nav a.logo {
	padding:16px 33px;
}
nav.active a.logo {
	padding:14px 30px;
}
nav.active a.logo:hover {
	background: url('/assets/images/the-well-islington-black.svg');
  	background-repeat: no-repeat;
  	background-size: auto;
}
.square {
  position: relative;
}
.square .innersquare {
  width: 100%;
  height: 100%;
}
.square:after {
  content: "";
  display: block;
  padding-top: calc(100%);
}
.extreme-contrast {
  background-color: white;
  filter: grayscale(100%) contrast(2) brightness(2) blur(0.25px);
  mix-blend-mode: hard-light;
  -webkit-clip-path: rect(1% 99% 99% 1%);
          clip-path: rect(1% 99% 99% 1%);
  transition: all 0.2s ease-in-out;
}
.extreme-contrast:hover, .extreme-contrast:focus {
  mix-blend-mode: normal;
  filter: none;
}
.grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(4, 1fr);
  max-width: 100%;
}
.grid > * {
  padding: 10px;
  margin: 0;
}
figure,
img {
  transition: all 0.2s ease-in-out;
}

figure {
  background-color: white;
  mix-blend-mode: plus-darker;
}
figure.colour1 {
  background-color: #424555;
}
figure.colour2 {
  background-color: #de404c;
}
figure.colour3 {
  background-color: #f7a145;
}
figure.colour4 {
  background-color: #de404c;
}

.spot-grad img {
  cursor: pointer;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
	background-color:#000;
  filter: grayscale(100%) contrast(2) brightness(2) blur(0.5px);
  mix-blend-mode: hard-light;
  -webkit-clip-path: rect(1% 99% 99% 1%);
          clip-path: rect(1% 99% 99% 1%);
}


figure img:hover {
  filter: saturate(20%);
}
figure img:hover img {
  filter: saturate(20%);
}

.duotone-filters {
  height: 0;
  left: -9999em;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 0;
}

.tiles {
 display: inline-block;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.tile {
  transition: all 2s ease-in-out;
}
.tile1 img {
  -webkit-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred1);
  -moz-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred1);
  -o-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred1);
  -ms-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred1);
  filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred1);
	transition: 2s filter, 2s -webkit-filter;
	transition-duration: 2s;
	transition-property: filter, -webkit-filter, mix-blend-mode;
}
.tile2 img {
  -webkit-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred2);
  -moz-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred2);
  -o-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred2);
  -ms-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred2);
  filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred2);
}
.tile3 img {
  -webkit-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred3);
  -moz-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred3);
  -o-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred3);
  -ms-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred3);
  filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred3);
}
.tile4 img {
  -webkit-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred4);
  -moz-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred4);
  -o-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred4);
  -ms-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred4);
  filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred4);
}
.tile5 img {
  -webkit-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred5);
  -moz-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred5);
  -o-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred5);
  -ms-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred5);
  filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred5);
}
.tile6 img {
  -webkit-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred6);
  -moz-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred6);
  -o-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred6);
  -ms-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred6);
  filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred6);
}
.tile7 img {
  -webkit-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred7);
  -moz-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred7);
  -o-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred7);
  -ms-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred7);
  filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred7);
}
.tile8 img {
  -webkit-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred8);
  -moz-filter: ucontrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred8);
  -o-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred8);
  -ms-filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred8);
  filter: contrast(2) brightness(2) blur(0.5px) url(#duotone_thewellred8);
}
.tile.blendmode {
  position: relative;
}
.tile.blendmode:before {
  background: #ED3EA4;
  content: "";
  color: #ffffff;
  height: 100%;
  left: 0;
  position: absolute;
  opacity: 0.3;
  right: 0;
  top: 0;
  width: 100%;
}
.tile.blendmode:after {
  content: "CSS Blendmode variation: Close enough, right? *shrug*";
  left: 0;
  padding: 20px;
  position: absolute;
  top: 0;
}
.tile1:hover img, .tile1:focus img, .tile2:hover img, .tile2:focus img, .tile3:hover img, .tile3:focus img, .tile4:hover img, .tile4:focus img, .tile5:hover img, .tile5:focus img, .tile6:hover img, .tile6:focus img, .tile7:hover img, .tile7:focus img, .tile8:hover img, .tile8:focus img {
  -webkit-filter: contrast(2) brightness(2) blur(0.5px) saturate(0%);
  filter: contrast(2) brightness(2) blur(0.5px) saturate(0%) opacity(30%) invert(100%);
  background-blend-mode:exclusion;
	mix-blend-mode: luminosity;
}
.tile1:hover > .w3-text-white h2,.tile2:hover > .w3-text-white h2,.tile3:hover > .w3-text-white h2,.tile4:hover > .w3-text-white h2,.tile5:hover > .w3-text-white h2,.tile6:hover > .w3-text-white h2,.tile7:hover > .w3-text-white h2,.tile8:hover > .w3-text-white h2 {
	color:#333;
	transition-duration: 0.5s; 
}
.tile1 .w3-text-white p,.tile2 .w3-text-white p,.tile3 .w3-text-white p,.tile4 .w3-text-white > p {
		display:inline-block;
	padding:0.25rem 0.625rem;
	letter-spacing: 0.15rem;
	background-color: #333;
	font-size: 0.8125rem;
	line-height:1.3rem;
	text-transform: uppercase;
	color:#fff;
}
.tile1:hover > .w3-text-white p,.tile2:hover > .w3-text-white p,.tile3:hover > .w3-text-white p,.tile4:hover > .w3-text-white > p, .tile5:hover > .w3-text-white p,.tile6:hover > .w3-text-white p,.tile7:hover > .w3-text-white p,.tile8:hover > .w3-text-white > p {
	background-color: #d14f42;
	transition-duration: 0.5s; 
}

.adjust{
	z-index: 3;
background: hsl(248, 17%, 66%);
mix-blend-mode: overlay;
}
.spot-grad {
	position: relative;
}
.spot-grad .centered {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
.spot-grad h2 {
	text-shadow:
    1px 1px 0 rgba(51,51,51,0.05),
    -1px 1px 0 rgba(51,51,51,0.05),
    -1px -1px 0 rgba(51,51,51,0.05),
    1px -1px 0 rgba(51,51,51,0.05);
}
.small-heading {
	display:inline-block; padding:0.25rem 0.625rem; letter-spacing: 0.15rem; background-color: #333; font-size: 0.8125rem; line-height:1.3rem; text-transform: uppercase; color:#fff;margin-bottom:0.5em;
}
.hero-heading {
	margin-top:1rem; margin-bottom: 0.9375rem; color: #fff; font-weight:900; font-size:2.7rem; text-transform: uppercase; line-height:1.1;
}
@media screen and (max-width: 949px) {	
	.hero-heading {
	font-size:1.5rem;
	}
	body {
		font-weight:400;
	}
	.w3-padding-large {
		padding: 4px 2px !important;
	}
	.w3-container {
		padding:0px;
	}
	.w3-padding {
		padding: 8px 8px !important;
	}
	.spot-grad h2 {
		font-size:24px;
	}
	.grey-block {
		font-size:0.7rem;
		padding:0.15rem 0.3rem;
	}
	.tile1 .w3-text-white p,.tile2 .w3-text-white p,.tile3 .w3-text-white p,.tile4 .w3-text-white > p,.tile5 .w3-text-white p,.tile6 .w3-text-white p,.tile7 .w3-text-white p,.tile8 .w3-text-white > p  {
		font-size:0.7rem;
		padding:0.15rem 0.3rem;
		line-height:1.3em;
	}
	h1,h2,h3,h4,h5,h6 {
		line-height:1.3em;
	}
}
#text-array {
	transform: skewY(-0.5deg);
  	animation-name: textArray;
  	animation-duration: 0.5s;
}
.small-heading span {
	transform: skewY(1deg);
  	animation-name: smallHeading;
  	animation-duration: 10s;
}
@keyframes textArray {
  0%   {transform: skewY(-0.5deg);}
  25%   {transform: skewY(-1deg);}
  50%  {transform: skewY(1deg);}
  75% {transform: skewY(-1deg);}
  100%   {transform: skewY(-0.5deg);}
}
@keyframes smallHeading {
  0%   {transform: skewY(0.5deg);}
  25%   {transform: skewY(1deg);}
  50%  {transform: skewY(-1deg);}
  75% {transform: skewY(1deg);}
  100%   {transform: skewY(0.5deg);}
}
.well {
	display:block;
	margin-left:auto;
	margin-right:auto;
	width:50px;
	margin-bottom:0.5em;
  	animation-name: well;
  	animation-duration: 1s;
}
@keyframes well {
  0%   {transform: scale(0.8);opacity: 0;}
  100%   {transform: scale(1);opacity: 1;}
}
.background-color{
z-index: -1;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-image: url("/assets/images/noise.png"), none;
background-position-x: 0%, 0%;
background-position-y: 0%, 0%;
background-size: auto, auto;
background-repeat: repeat, repeat;
background-attachment: scroll, scroll;
background-origin: padding-box, padding-box;
background-clip: border-box, border-box;
transform: skewY(-4deg);
}

.floating-menu-btn {
	display: block;
	position: fixed;
	z-index: 100;
	right: 35px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	cursor: pointer;
}
.floating-menu-btn .floating-menu-toggle .bar {
	width: 22px;
	margin: 0 0 4px 0;
}
.mobile-menu-toggle .bar,
.floating-menu-toggle .bar {
	display: block;
	will-change: transform, opacity;
	width: 32px;
	height: 2px;
	margin: 0 0 6px 0;
	background: #fff;
	opacity: 1;
	-webkit-transform: translate(0) rotate(0deg);
	-moz-transform: translate(0) rotate(0deg);
	-ms-transform: translate(0) rotate(0deg);
	-o-transform: translate(0) rotate(0deg);
	transform: translate(0) rotate(0deg);
	-webkit-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
.floating-menu-btn .floating-menu-toggle {
	display: block;
	width: 22px;
	right: auto;
	left: 50%;
	margin-top: -6px;
	margin-left: -11px;
	cursor: pointer;
}

.floating-menu-btn .floating-menu-toggle .bar {
	width: 22px;
	margin: 0 0 4px 0;
}

.floating-menu-btn .floating-menu-toggle .bar:last-child {
	margin-bottom: 0;
}

.floating-menu-btn.expanded .floating-menu-toggle {
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.floating-menu-btn.expanded .floating-menu-toggle .bar:nth-child(1) {
	-webkit-transform: translate(-9px, 3px) rotate(-45deg) scale(0.5, 1);
	-moz-transform: translate(-9px, 3px) rotate(-45deg) scale(0.5, 1);
	-ms-transform: translate(-9px, 3px) rotate(-45deg) scale(0.5, 1);
	-o-transform: translate(-9px, 3px) rotate(-45deg) scale(0.5, 1);
	transform: translate(-9px, 3px) rotate(-45deg) scale(0.5, 1);
}

.floating-menu-btn.expanded .floating-menu-toggle .bar:nth-child(3) {
	-webkit-transform: translate(-9px, -3px) rotate(45deg) scale(0.5, 1);
	-moz-transform: translate(-9px, -3px) rotate(45deg) scale(0.5, 1);
	-ms-transform: translate(-9px, -3px) rotate(45deg) scale(0.5, 1);
	-o-transform: translate(-9px, -3px) rotate(45deg) scale(0.5, 1);
	transform: translate(-9px, -3px) rotate(45deg) scale(0.5, 1);
}
.inline-footer {
	display: inline-block;
	padding-right:0.5em;
	height:1.1em;
}
.inline-footer-span {
	display: inline-block;
	height:1.1em;
}

@media screen and (max-width: 799px) {
	.floating-menu-btn {
		right: 15px;
	}
}