/*
Theme Name: GemmaMay Theme
Theme URI: n/a
Author: Lisa Kew
Author URI: https://kew-creative.com
Description: Theme for GemmaMay.com
Version: 1.0
License: no license, use a theme from https://wordpress.org/themes/ instead.
License URI: n/a
Tags: n/a
Text Domain: gemmamaytheme
*/

@font-face {
	font-family:'Inter';
	font-style:normal;
	src: url(fonts/Inter-VariableFont_opsz,wght.ttf) format('TrueType');
}
@font-face {
	font-family:'Inter';
	font-style:italic;
	src: url(fonts/Inter-Italic-VariableFont_opsz,wght.ttf) format('TrueType');
}
@font-face {
	font-family:'Josefin Sans';
	font-style:normal;
	src: url(fonts/JosefinSans-VariableFont_wght.ttf) format('TrueType');
}




/* generic things */

html,body,h1,h2,h3,h4,h5,h6,p,ul,li,form{
	padding:0;
	margin:0;
}
*{
	box-sizing:border-box;
}
html {
	font-size:16px; /* for rem base */
	scroll-behavior: smooth;
	/* note: this replaces the javascript version, which is not accessible due to the 'return false' setting. */
}
html,#nav{
	scrollbar-width: thin;
}
.screen-reader-text,
.skip-link,
.site-nav li.icon a span{
	position:fixed;
	top:-4000rem;
	left:-4000rem;
}
.skip-link:focus,
#toggle a:focus span.skip-link{
	top:2rem;
	left:2rem;
	background:black;
	color:white;
	padding:.5rem 1rem;
	border:2px dotted white;
	text-decoration:none;
	text-transform:uppercase;
	font-size:100%;
	z-index:10000;
}
.admin-bar .skip-link:focus,
#toggle a:focus span.skip-link{
	top:4rem;
}
iframe,
img{
	max-width:100%;
}
img.attachment-thumbnail,
img.attachment-large{
	height:auto !important;
}

/* colours */

html{
	/* scrollbar-color: purple pink; */
}
#masthead{
	background:pink;
}
.colour0{
	background:#FFFFFF;
}
.colour1{
	background:#FFF7F5;
}
.colour2{
	background:#EBCDC2;
}
.colour3{
	background:#BC8463;
}
.colour4{
	background:#95858F;
}
.colour5{
	background:#FF0249;
}
.colour6{
	background:#1C1C25;
	color:#FFF7F5;
}
.colour6 h2{
	color:#FF0249;
}
#colophon{
	background:#1C1C25;
}
.fadeblock.colour0 .textside{
	background:linear-gradient(to right, #FFFFFF 0%, #FFFFFF 85% ,transparent 100%);
}
.fadeblock.colour1 .textside{
	background:linear-gradient(to right, #FFF7F5 0%, #FFF7F5 85% ,transparent 100%);
}
.fadeblock.colour2 .textside{
	background:linear-gradient(to right, #EBCDC2 0%, #EBCDC2 85% ,transparent 100%);
}
.fadeblock.colour3 .textside{
	background:linear-gradient(to right, #BC8463 0%, #BC8463 85% ,transparent 100%);
}
.fadeblock.colour4 .textside{
	background:linear-gradient(to right, #95858F 0%, #95858F 85% ,transparent 100%);
}
.fadeblock.colour5 .textside{
	background:linear-gradient(to right, #FF0249 0%, #FF0249 85% ,transparent 100%);
}
.fadeblock.colour6 .textside{
	background:linear-gradient(to right, #1C1C25 0%, #1C1C25 85% ,transparent 100%);
}
.fadeblock.imgleft.colour0 .textside{
	background:linear-gradient(to left, #FFFFFF 0%, #FFFFFF 85% ,transparent 100%);
}
.fadeblock.imgleft.colour1 .textside{
	background:linear-gradient(to left, #FFF7F5 0%, #FFF7F5 85% ,transparent 100%);
}
.fadeblock.imgleft.colour2 .textside{
	background:linear-gradient(to left, #EBCDC2 0%, #EBCDC2 85% ,transparent 100%);
}
.fadeblock.imgleft.colour3 .textside{
	background:linear-gradient(to left, #BC8463 0%, #BC8463 85% ,transparent 100%);
}
.fadeblock.imgleft.colour4 .textside{
	background:linear-gradient(to left, #95858F 0%, #95858F 85% ,transparent 100%);
}
.fadeblock.imgleft.colour5 .textside{
	background:linear-gradient(to left, #FF0249 0%, #FF0249 85% ,transparent 100%);
}
.fadeblock.imgleft.colour6 .textside{
	background:linear-gradient(to left, #1C1C25 0%, #1C1C25 85% ,transparent 100%);
}



.navbar{
	position:relative;
}
.navbar:before{
	content:"";
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	width:clamp(4.6875rem,8vw,9.25rem);
	height:71%;
	background-image:url(img/deco-masthead.svg);
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:left bottom;
	background-size:contain;
}
#nav{
	z-index:1000;
}
.scrolled #nav{
	background-color:rgba(28,28,37,.95);
}

#masthead,
.page-header,
#colophon{
	color:#FFF7F5;
}
.page-header{
	background-color:#1C1C25;
}
.page-header.hasimage{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.page-header h1{
	background-size:0 0;
}
.single.single-case_study .page-header p.posttype,
.type-case_study p.posttype,
.post-content h2,
.accented,
.role{
	color:#FF0249;
}
.single.single-post .page-header p.posttype,
.type-post p.posttype{
	color:#BC8463;
}
.navbar{
	border-color:#FF0249;
}
.quotebox:before,
.quotebox:after{
	content:"";
	display:block;
	width:56.1%;
	height:1px;
	background:#FF0249;
	margin:0 auto;
}
.footnotes .inner{
	border-color:#EBCDC2;
}

/* deco arrows... */

.decoframe{
	position:relative;
}
.decoframe:after{
	content:"";
	display:block;
	position:absolute;
	top:max(2rem,4.25vw);
	right:max(calc(26vw - 8rem),clamp(1.5rem,8vw,9.25rem));
	height:clamp(1.75rem,2.4vw,2.4rem);
	width:clamp(1.75rem,2.4vw,2.4rem);
	background-image:url(img/arrow-deco-ff0249.svg);
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	transition:transform 1s ease-in-out 0s;
}
.decoframe.moveit:after{
	transform:rotate(360deg);
}
.decoframe.colour3:after,
.decoframe.colour4:after,
.decoframe.colour5:after{
	background-image:url(img/arrow-deco-fff7f5.svg);
}



/* links */

a{
	color:inherit;
	text-decoration:none;
}
.site-nav li a{
	position:relative;
}
.site-nav li a:after{
	content:"";
	display:block;
	width:0;
	height:2px;
	position:absolute;
	bottom:-.6em;
	left:0;
	background:#FF0249;
	transition:all .3s ease-in-out 0s;
}
.site-nav li a:focus:after,
.site-nav li a:hover:after,
.site-nav li a:active:after,
.site-nav li.current_page_item a:after{
	width:100%;
}
.site-nav li.linkedin a{
	background-image:url(img/linked-in-ffffff.svg);
}
p.contactinfo a.linkedin{
	background-image:url(img/linked-in-1c1c25.svg);
}
.site-nav li.linkedin a:focus,
.site-nav li.linkedin a:hover,
p.contactinfo a.linkedin:focus,
p.contactinfo a.linkedin:hover{
	background-image:url(img/linked-in-ff0249.svg);
}
.site-nav li.linkedin a:after{
	display:none;
}
.impactfilters ul li a:before{
	content:"";
	display:inline-block;
	width:1.56em;
	height:1.56em;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:right bottom;
	background-size:contain;
	vertical-align:middle;
	margin-right:.28em;
	transition:transform .5s ease-in-out 0s;
}
.impactfilters ul li.current a:before,
.impactfilters ul li a:hover:before{
	transform:rotate(90deg);
}
.impactfilters ul li.case-studies a:before{
	background-image:url(img/arrow-ff0249.svg);
}
.impactfilters ul li.insight a:before{
	background-image:url(img/arrow-bc8463.svg);
}
.impactfilters ul li.all a:before{
	background-image:url(img/arrow-95858f.svg);
}
.page-header p a,
.page-content p a,
.page-content li a{
	color:#FF0249;
}
.page-header p a:focus,
.page-header p a:hover,
.page-header p a:active{
	color:#FFF7F5;
}
.page-content p a:focus,
.page-content li a:focus,
.page-content p a:hover,
.page-content li a:hover,
.page-content p a:active,
.page-content li a:active{
	color:#1C1C25;
}
.page-content p.contactinfo a{
	color:#1C1C25;
}
.page-content p.contactinfo a:focus,
.page-content p.contactinfo a:hover,
.page-content p.contactinfo a:active{
	color:#FF0249;
}

.buttons a{
	display:inline-block;
	padding:.6em 1.8233em .3em .5em;
	border-width:1px;
	border-style:solid;
	margin-right:1.33em;
	margin-bottom:1.33em;
	position:relative;
}
.buttons a:last-child{
	margin-right:revert;
	margin-bottom:0;
}
.buttons a:after{
	content:"";
	display:inline-block;
	width:.8233em;
	height:100%;
	position:absolute;
	top:0;
	right:.5em;
	background-image:url(img/arrow-ff0249.svg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}
/* button colours */
/* 

	default: on #FFF7F5 and #EBCDC2 and #FFFFFF background:
	black text / red arrow / red border
	mouseover: black text / black arrow / black border

	on page-headers + black background:
	white text / red arrow / red border
	mouseover: white text / white arrow / white border
	
	on red background:
	black text / black arrow / black border
	mouseover: white text / white arrow / white border
	
	Impact page:
	Case studies: 	black text / red arrow / red border
	Insight posts:	black text / #BC8463 arrow / #BC8463 border
	mouseover:	black text / black arrow / black border
	
*/

/* default + case studies */
.buttons a{
	color:#1C1C25;
	border-color:#FF0249;
}

/* on page-header + 'black' background */
.page-header .buttons a,
.colour6 .buttons a{
	color:#FFF7F5;
}

/* on red background and on #95858F background*/
.colour4 .buttons a,
.colour5 .buttons a{
	border-color:#1C1C25;
}
.colour4 .buttons a:after,
.colour5 .buttons a:after{
	background-image:url(img/arrow-1c1c25.svg);
}

/* on Insight previews */
.type-post .buttons a{
	border-color:#BC8463;
}
.type-post .buttons a:after{
	background-image:url(img/arrow-bc8463.svg);
}

/* default - applies to buttons on light colours, including IMPACT page */
.buttons a:focus,
.buttons a:hover,
.buttons a:active{
	border-color:#1C1C25;
}
.buttons a:focus:after,
.buttons a:hover:after,
.buttons a:active:after{
	background-image:url(img/arrow-1c1c25.svg);
}

/* on page-header / dark background */
/* and on red background */
.page-header .buttons a:focus,
.page-header .buttons a:hover,
.page-header .buttons a:active,
.colour4 .buttons a:focus,
.colour4 .buttons a:hover,
.colour4 .buttons a:active,
.colour5 .buttons a:focus,
.colour5 .buttons a:hover,
.colour5 .buttons a:active,
.colour6 .buttons a:focus,
.colour6 .buttons a:hover,
.colour6 .buttons a:active{
	color:#FFF7F5;
	border-color:#FFF7F5;
}
.page-header .buttons a:focus:after,
.page-header .buttons a:hover:after,
.page-header .buttons a:active:after,
.colour4 .buttons a:focus:after,
.colour4 .buttons a:hover:after,
.colour4 .buttons a:active:after,
.colour5 .buttons a:focus:after,
.colour5 .buttons a:hover:after,
.colour5 .buttons a:active:after,
.colour6 .buttons a:focus:after,
.colour6 .buttons a:hover:after,
.colour6 .buttons a:active:after{
	background-image:url(img/arrow-ffffff.svg);
}






.buttons a span{
	position:relative;
	transition:top .2s ease-in-out 0s;
}
.buttons a:hover span{
	top:1px;
}

.backlink a{
	display:inline-block;
}
.backlink a:after{
	content:"";
	display:inline-block;
	width:1.25em;
	height:1.25em;
	background-image:url(img/arrow-95858f.svg);
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:right bottom;
	background-size:contain;
	vertical-align:middle;
	margin-left:.28em;
	position:relative;
	top:-.2em;
	transition:transform .5s ease-in-out 0s;
}
.backlink a:focus:after,
.backlink a:hover:after{
	transform:rotate(-90deg);
}





/* fonts */

body{
	font-family:"Inter",sans-serif;
}
h1.page-title,
h1.site-title,
p.site-title,
.navbar ul,
.buttons,
input[type=submit],
.backlink{
	font-family:"Josefin Sans", sans-serif;
	font-weight:300;
	text-transform:uppercase;
}
.backlink{
	font-weight:400;
}

h1.site-title,
p.site-title{
	font-size:3.5rem;
	line-height:1;
	margin-bottom:0;
}
h1.page-title{
	font-size:5rem;
	font-size:clamp(2.5rem,4.15vw,5rem);
	font-weight:300;
	line-height:1.125;
	min-height:2.125em;
	margin-bottom:.8625em;
}
h1.page-title.smaller{
	font-size:calc(clamp(2.5rem,4.15vw,5rem) / 2);
}
h1.entry-title{
	font-size:clamp(1.375rem,2.5vw,2.5rem);
	font-weight:800;
	line-height:1.325;
	margin-bottom:1em;
}
h2{
	font-size:clamp(1.375rem,2.5vw,2.5rem);
	font-weight:800;
	line-height:1.3;
	margin-bottom:.5em;
}
h2 .role{
	font-style:italic;
}
.bioblock h2{
	margin-bottom:1.4em;
}
.post-content h2{
	font-size:1.25rem;
	font-size:clamp(1.125rem,1.25vw,1.25rem);
	font-weight:800;
	line-height:1.3;
	margin-top:2.5em;
	margin-bottom:.8em;
}
.testimonials h2{
	text-align:center;
	margin-bottom:1em;
}
h3{
	font-size:1.375rem;
	font-size:clamp(1.125rem,1.375vw,1.375rem);
	font-weight:800;
	line-height:1.5;
	padding-top:1.2em;
	margin-bottom:1em;
}
p,ul,ol{
	font-size:1.25rem;
	font-size:clamp(1rem,1.25vw,1.25rem);
	font-weight:300;
	line-height:1.5;
	margin-bottom:1em;
}
.single .page-header p.posttype{
	font-size:clamp(1.125rem,1.375vw,1.375rem);
	font-weight:800;
}
.preview-inside p.posttype{
	font-size:1.125rem;
	font-weight:800;
	margin-bottom:.5em;
}
.post-content p,
.post-content ul,
.post-content ol{
	font-size:clamp(.9375rem,1.5vw,1rem);
	line-height:1.62;
	margin-bottom:.9em;
}
.footnotes p,
.footnotes ul,
.footnotes ol{
	font-size:.9375rem;
}
.navbar ul{
	font-size:1.125rem;
	font-size:clamp(.875rem,1vw,1.125rem);
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:.02em;
	margin-bottom:0;
}
.impactfilters h3,
.impactfilters ul{
	font-size:clamp(1.125rem,1.375vw,1.375rem);
	font-weight:800;
	line-height:1.5;
	margin-bottom:0;
}
p.contactinfo{
	font-size:clamp(1.125rem,1.375vw,1.375rem);
	font-weight:800;
}
.quotebox p.quote{
	font-size:clamp(1rem,1.875vw,1.25rem);
	font-weight:400;
	font-style:italic;
	line-height:1.5;
	margin-bottom:0;
}
.quotebox p.byline{
	font-size:clamp(.9375rem,1.6875vw,1.125rem);
	line-height:1.4;
}
.quotebox p.byline .role{
	font-weight:800;
}
.backlink,
.buttons,
input[type=submit]{
	font-size:1.125rem;
	font-size:clamp(.875rem,1.125vw,1.125rem);
	font-weight:400;
	letter-spacing:.06em;
	line-height:1.22;
	margin-bottom:1.5em;
}
.buttons{
	margin-top:3em;
}
.backlink{
	text-align:center;
	margin-top:6em;
	margin-bottom:6em;
}
p.caption{
	padding-top:.5em;
}
strong,b,.accented p{
	font-weight:800;
}
ul{
	list-style:none;
}
.page-content ul li{
	padding-left:1em;
	position:relative;
	margin-bottom:.5em;
}
.post-content ul li{
	padding-left:1.5em;
	position:relative;
	margin-bottom:1em;
}
.page-content ul li:before{
	content:"> ";
	display:inline-block;
	position:absolute;
	left:0;
	top:0;
}
.post-content ul li:before{
	content:"\2022 ";
	display:inline-block;
	position:absolute;
	left:0;
	top:0;
}
.entry-content h2{
	font-size:clamp(1.125rem,1.4vw,1.4rem);
	font-weight:800;
	line-height:1.35;
	padding-top:.9em;
	margin-bottom:.9em;
}
.entry-content p{
	font-size:clamp(1rem,1.25vw,1.25rem);
	line-height:1.4;
	margin-bottom:1em;
}
#colophon .site-info p,
#colophon .site-info ul{
	font-size:.875rem;
}
#colophon .site-info ul{
	text-transform:uppercase;
}




/* layout */

.navbar,
.outer,
.widebox p.caption{
	padding-left:clamp(1.5rem,8vw,9.25rem);
	padding-right:clamp(1.5rem,8vw,9.25rem);
}
.inner{
	max-width:100%;
	margin:0 auto;
}
.single .post-image .inner,
.single .post-content .inner{
	max-width:62.5rem;
}
.page-content .inner{
	padding:1px 0; /* to keep colours and margins inside */
}
.inner.padded{
	padding-top:max(2rem,4.25vw);
	padding-bottom:max(2rem,4.25vw);
}
.post-content .inner.padded{
	padding-top:0;
}
section{
	padding-top:max(2rem,4.25vw);
	padding-bottom:max(2rem,4.25vw);
}

.colour1:has(+ .colour1) .inner.padded,
.colour2:has(+ .colour2) .inner.padded,
.colour3:has(+ .colour3) .inner.padded{
	padding-bottom:1px;
}


.inner.aligncenter{
	max-width:55rem;
	text-align:center;
	margin:0 auto;
}
.testimonials .inner{
	/* exception for space for arrows */
	padding-left:clamp(1rem,2.5vw,2.5rem);
	padding-right:clamp(1rem,2.5vw,2.5rem);
}
.navbar{
	width:100%;
	height:0;
	min-height:9.375rem; /* enough height for logo + nav menus */
	min-height:clamp(4.6875rem,8vw,9.375rem);
	border-width:0 0 2px 0;
	border-style:solid;
}
#nav{
	position:absolute;
	top:0;
	left:0;
	transition:all .3s ease-in-out 0s;
}
@media(max-width:600px){
	#nav{
		position:fixed;
	}
}
.admin-bar #nav{
	top:32px;
}
@media(max-width:782px){
	.admin-bar #nav{
		top:46px;
	}
}
.scrolled #nav{
	min-height:5rem;
}

.navbar .inner{
	display:flex;
	flex-wrap:wrap;
	height:100%;
	justify-content:space-between;
	align-items:center;
}
.site-branding{
	width:25.5rem;
	width:clamp(11.94rem,21.6vw,25.9375rem);
	padding-left:3.177vw;
	order:0;
}
.site-branding a,
.site-branding img{
	display:block;
}
#toggle{
	display:none;
	order:1;
}
#navcontent{
	order:2;
}
.site-nav{
}
.site-nav .main-navigation{
	text-align:center;
}
.site-nav .navi{
	display:inline-block;
}
.site-nav li{
	display:inline-block;
	margin-left:clamp(2em,3.75vw,3.75em);
}
.site-nav li.linkedin a,
p.contactinfo a.linkedin{
	display:inline-block;
	height:.9em;
	width:.9em;
	text-indent:2em;
	overflow:hidden;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}
p.contactinfo a.linkedin{
	height:1.40625rem;
	width:1.40875rem;
}

.page-header{
	padding-top:clamp(4.6875rem,8vw,9.375rem);
}
.page-header .phinside{
	width:clamp(43.125rem,65%,65.375rem);
	max-width:100%;
	padding-bottom:1px; /* to keep things inside when they grow taller */
}
.phinside .buttons{
	margin-top:clamp(2.5rem,5vw,5rem);
	/* same space as below the page-title */
}
.home .page-header .phinside{
	width:clamp(43.125rem,45%,45rem);
	max-width:60%;
}
.page-header.hasimage .phinside{
	min-height:56.25vw;
	padding-bottom:1.5rem; /* a bit more space */
}
.page-header.hasfilters .phinside{
	width:auto;
}
.page-header.hasfilters .impactfilters{
	min-width:min(21.25rem,100%);
	padding-bottom:1.5rem; /* a bit more space */
}
.page-header.hasfilters .inner{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:last baseline;
	gap:0 3rem;
}
.page-header.hasfilters.hasimage .inner{
	display:block;
}
.page-header.hasfilters.hasimage .impactfilters{
	text-align:right;
}
.single .page-header{
	padding-bottom:clamp(6rem,12vw,12rem);
}
.single .page-header .inner{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:baseline;
	gap:0 3rem;
}
.single .post-image{
	margin-top:clamp(-7rem,-7vw,-3.5rem);
	margin-bottom:clamp(2rem,4vw,4rem);
}
.single .page-header h1{
	max-width:min(67%, calc(100% - 10rem));
}
.impactfilters h3,
.impactfilters ul,
.impactfilters ul li{
	display:inline-block;
	margin-right:1em;
}
.impactfilters ul:last-child,
.impactfilters ul li:last-child{
	margin-right:0;
}

.page-content h2,
.page-content h3,
.page-content p,
.page-content ul{
	max-width:68rem;
}
.page-content .decoframe .alignleft h2{
	width:68rem;
	max-width:calc(100% - max(calc(26vw - 8rem),clamp(1.5rem,8vw,9.25rem)) - 1.5rem);
}
.page-content .decoframe .aligncenter h2{
	/* max-width:calc(100% - max(calc(26vw - 8rem),clamp(1.5rem,8vw,9.25rem)) - 3rem); */
	/* wrong!!! */
	max-width:calc(100% - 6rem);
	margin-left:auto;
	margin-right:auto;
}
.page-content .testimonials h2{
	max-width:100%;
}
.page-header h1{
	padding-top:1.25em;
}
.page-header h1.entry-title{
	padding-top:2em;
}

.imgbox img{
	display:block;
}
.videowrapper{
	width:100%;
}
.videobox{
	position:relative;
	padding-top:56.25%;
}
.videobox iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.quotebox{
	text-align:center;
	margin-top:clamp(2rem,9vw,5rem);
	margin-bottom:clamp(2rem,9vw,5rem);
}
.quotebox:before{
	margin-bottom:clamp(1rem,6vw,3.25rem);
}
.quotebox:after{
	margin-top:clamp(1rem,6vw,3.25rem);
}
.testimonials .quotebox{
	margin-top:0;
	margin-bottom:0;
}
.testimonials .quote,
.testimonials .byline{
	max-width:60.25rem;
	padding-left:clamp(1.2rem,2vw,2rem);
	padding-right:clamp(1.2rem,2vw,2rem);
	margin-left:auto;
	margin-right:auto;
}
.testimonials .quotebox:before,
.testimonials .quotebox:after{
	display:none;
	margin-top:0;
	margin-bottom:0;
}
.quotebox .byline{
	margin-top:1.75em;
}
.quotebox .byline span{
	display:block;
}
.footnotes{
	margin-top:clamp(3rem,7vw,6.7rem);
}
.footnotes .inner{
	border-width:1px 0 0 0;
	border-style:solid;
	padding-top:1rem;
}
.columns{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding-top:max(2rem,4.25vw);
	padding-bottom:max(2rem,4.25vw);
}
.columns.samecolour{
	padding-top:0;
}
.col1,
.col2{
	width:46%;
}
@media(max-width:767px){
	.col1,
	.col2{
		width:100% !important;
	}
}
.bioblock{
	overflow:hidden;
	margin-bottom:clamp(2rem,6vw,5.625rem);
}
.bioblock:first-child{
	padding-top:clamp(2rem,6vw,5.625rem);
}
.bioblock .inside{
	width:64.27%;
}
.bioblock .imageside{
	width:35.73%;
}
.bioblock.imgright .inside,
.bioblock.imgleft .imageside{
	float:left;
}
.bioblock.imgleft .inside,
.bioblock.imgright .imageside{
	float:right;
}
.bioblock.imgleft .inside{
	padding-right:clamp(1.5rem,8vw,9.25rem);
	padding-left:clamp(2rem,5.7vw,6rem);
}
.bioblock.imgright .inside{
	padding-left:clamp(1.5rem,8vw,9.25rem);
	padding-right:clamp(2rem,5.7vw,6rem);
}
.bioblock p.contactinfo{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:baseline;
	gap:1.25em 2rem;
	margin-top:2.5em;
}


.fadeblock{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.fadeblock .textside{
	width:45%;
}
.fadeblock.imgleft .textside{
	margin-left:auto;
}
.fadeblock .textside .inside{
	padding-top:max(2rem,6%);
	padding-bottom:max(2rem,6%);
	padding-right:clamp(1.5rem,8vw,9.25rem);
	padding-left:clamp(1.5rem,8vw,9.25rem);
}
.fadeblock .mobileplaceholder{
	display:none;
}


.widesplit{
	display:flex;
	flex-wrap:wrap;
}
.widesplit .imageside{
	width:50%;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.widesplit.imgright .imageside{
	order:2;
}
.widesplit .textside{
	width:50%;
}
.widesplit.imgleft .textside{
	padding-right:clamp(1.5rem,8vw,9.25rem);
}
.widesplit.imgright .textside{
	padding-left:clamp(1.5rem,8vw,9.25rem);
}
.widesplit .textside .inside{
	display:flex;
	flex-direction:column;
	justify-content:center;
	/* min-height is set in HTML, from image dimensions in the imageside */
	padding-top:max(2rem,6%);
	padding-bottom:max(2rem,6%);
	/* max-width:40.625rem; */
}
.widesplit.bioblock .textside .inside{
	padding-top:0;
}
.widesplit.imgleft .textside .inside{
	padding-left:clamp(2rem,5.7vw,4.8rem); /* 5.7vw (80/1400), otherwise narrow width gives more space for the text than wide width */
	padding-left:clamp(2rem,5.7vw,6rem);
}
.widesplit.imgright .textside .inside{
	padding-right:clamp(2rem,5.7vw,4.8rem); /* 4.8rem instead of 5rem of design, to fit a specific long title on one line */
	padding-right:clamp(2rem,5.7vw,6rem);
}
.widesplit .imageside .mobileplaceholder{
	display:none;
}


.items{
	display:flex;
	flex-wrap:wrap;
	padding-top:clamp(2rem,5vw,3.5rem);
	margin-left:-2%;
	margin-right:-2%;
}
.items .item{
	width:calc(100% / 3);
	padding:0 2%;
	margin-bottom:clamp(2rem,5vw,3.5rem);
}

@media(max-width:1023px){
	.items{
		margin-left:-3%;
		margin-right:-3%;
	}
	.items .item{
		width:calc(100% / 2);
		padding:0 3%;
	}
}
@media(max-width:590px){
	.items{
		margin-left:auto;
		margin-right:auto;
	}
	.items .item{
		width:100%;
		padding:0;
	}
}
.preview-inside{
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
.previewimage{
	width:100%;
	height:0;
	padding-top:75.2%;
	position:relative;
}
.previewimage a{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
.previewimage a img{
	display:block;
	transition:all .5s ease-in-out 0s;
}
.previewimage a:focus img,
.previewimage a:hover img,
.previewimage a:active img{
	transform:scale(1.1);
}
.preview-inside .entry-content{
	flex-grow:2;
}
.preview-inside .buttons{
	margin-top:2.25em;
}


/* pagination */
/* kriesi */

.pagination{
	text-align:center;
	padding:3rem 0;
}
.pagination .page-numbers{
	display:inline-block;
	font-size:1rem;
	font-weight:400;
}
.pagination .page-numbers:after{
	content:", ";
	display:inline-block;
}
.pagination .page-numbers:last-child:after{
	display:none;
}
.page-numbers{
	margin-right:.5em;
	color:#090705;
}
.page-numbers.current{
	color:#FF0249;
}


#colophon .site-info{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:0 2em;
	padding:calc(clamp(1.5rem,8vw,9.25rem) / 2) 0;
	position:relative;
}
#colophon .site-info > *{
	max-width:15.875rem;
	order:0;
}
#colophon .site-info p.copyright{
	position:absolute;
	right:0;
	align-self:flex-end;
}
#colophon .site-info p.fcol1 span{
	display:none;
}

form.wpcf7-form{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	max-width:49rem;
	font-size:clamp(.9375rem,3vw,1.125rem);
	margin:calc(clamp(1.5rem,8vw,9.25rem) / 2) auto;
}
form.wpcf7-form p{
	font-size:inherit;
	font-weight:400;
	line-height:1.2;
	border-top:1px solid #EBCDC2;
	padding-top:.5em;
	padding-bottom:.5em;
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	margin-bottom:0;
}
form.wpcf7-form div.extrawrap{
	width:100%;
	font-size:inherit;
	font-weight:400;
	line-height:1.2;
	border-top:1px solid #EBCDC2;
	padding-top:.5em;
	padding-bottom:.5em;
	border-bottom:1px solid #EBCDC2;
	margin-bottom:3rem;
}
form.wpcf7-form p:nth-child(2),
form.wpcf7-form p:nth-child(3){
	width:48%;
}
@media(max-width:925px){
	form.wpcf7-form p:nth-child(2),
	form.wpcf7-form p:nth-child(3){
		width:100%;
	}
}
form.wpcf7-form p.submitbutton{
	order:2;
	/* to make sure it goes after the error/success messages */
	border-top-width:0;
}
form.wpcf7-form p label{
	font-size:inherit;
	letter-spacing:.1em;
	display:inline-block;
	min-width:10em;
	text-transform:uppercase;
	padding-top:.95em;
}
.wpcf7-form-control-wrap{
	display:inline-block;
	width:100%; /* flex is not wrap, so it will fill available width */
}
form.wpcf7-form p input,
form.wpcf7-form p textarea{
	width:100%;
	height:3em;
	font-size:inherit;
	padding:.5em 1em;
	border-width:0;
}
form.wpcf7-form p textarea{
	height:14rem;
}
.wpcf7-spinner{
	position:absolute;
	display:block;
}
form.wpcf7-form p input[type=submit]{
	width:auto;
	height:2.2em;
	padding:.6em 1.8233em .3em .5em;
	background-color:transparent;
	background-image:url(img/arrow-ff0249.svg);
	background-repeat:no-repeat;
	background-position:calc(100% - .5em) center;
	background-size:.85em auto;
	border-width:1px;
	border-style:solid;
	margin-left:auto;
	margin-right:auto;
	cursor:pointer;
}
form.wpcf7-form p input[type=submit]:focus,
form.wpcf7-form p input[type=submit]:hover,
form.wpcf7-form p input[type=submit]:active{
	border-color:#1C1C25;
	background-image:url(img/arrow-1c1c25.svg);
}
.wpcf7-response-output{
	text-align:center;
	color:#FF0249;
	font-size:1.25rem;
	font-weight:800;
	border-width:0;
	margin:1em auto !important;
}
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output{
	color:orange;
	border-width:1px;
}
/* captcha plugin overrides */
form.wpcf7-form p:empty{
	display:none;
}
.dscf7-captcha-container{
	margin:0 auto !important;
}





/* webkit things */

input[type=text],
input[type=search],
input[type=button],
input[type=email],
input[type=submit],
textarea{
	-webkit-appearance:none;
	-webkit-border-radius:0;
}
*{
	-webkit-text-size-adjust:100%;
}

/* Where placeholder needs to obey the styles */

/* fix the stupid placeholder colour */
/* separate rules, because: "a group of selectors containing an invalid selector is invalid". */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
	opacity:1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
	opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
}


@media (max-width:900px){
	#toggle{
		position:fixed;
		top:0;
		z-index:2;
	}
	.admin-bar #toggle{
		top:32px;
	}
	@media(max-width:782px){
		.admin-bar #toggle{
			top:46px;
		}
	}
	#toggle{
		right:clamp(1.5rem,8vw,9.25rem); /* same as padding on .outer */
	}
	#nav,
	.scrolled #nav{
		min-height:3.75rem;
		height:3.75rem;
		overflow:hidden;
	}
	#nav .inner{
		/* justify-content:center; */
		display:block;
	}
	.navbar{
		border-width:0;
	}
	.navbar:before{
		display:none;
	}
	.site-branding{
		padding-left:0;
		margin:0 auto;
		background-image:url(img/deco-masthead.svg);
		background-color:transparent;
		background-repeat:no-repeat;
		background-position:.5rem bottom;
		background-size:clamp(2rem,16vw,4.695rem) auto;
		height:3.75rem;
		width:100%;
		display:flex;
		align-items:center;
		justify-content:center;
		position:absolute;
		left:0;
		border-bottom:2px solid #FF0249;
		padding:0 calc(1rem + clamp(2rem,16vw,4.695rem));
	}
	.site-branding a,
	.site-branding img{
		height:clamp(1.125rem,5vw,1.5rem);
	}
	#toggle{
		display:block;
		width:3rem;
		max-width:clamp(2rem,16vw,3rem);
		height:3.75rem; /* same height as #nav when #nav is closed */
		order:1;
	}
	#toggle a{
		display:block;
		width:100%;
		height:100%;
	}
	#toggle a span.burger{
		display:block;
		width:100%;
		height:100%;
		background:url(img/open-menu.svg) transparent no-repeat right center / contain;
	}
	#toggle a.navisopen span.burger{
		background:url(img/close-menu.svg) transparent no-repeat right center / contain;
	}
	#navcontent{
		display:none;
	}
	body.toggled-on{
		overflow:hidden;
	}
	.toggled-on #nav,
	#nav:target{
		height:100%;
		overflow:auto;
		background:#1C1C25;
	}
	.toggled-on #navcontent,
	#nav:target #navcontent{
		display:block;
		padding-top:6.25rem;
		padding-bottom:5rem;
		/* to make sure that even with the admin bar, there will be */
		/* a scrollbar for the last items in the list */
	}
	.toggled-on .site-branding,
	#nav:target .site-branding{
		padding:0;
	}
	.toggled-on .site-title,
	#nav:target .site-title{
		position:relative;
		top:5rem;
	}
	.toggled-on .site-title a,
	.toggled-on .site-title img,
	#nav:target .site-title a,
	#nav:target .site-title img{
		height:2rem;
	}
	.site-nav .navi{
		width:100%;
		margin-top:0;
		margin-left:auto;
	}
	.toggled-on ul.nav-menu,
	#nav:target ul.nav-menu{
		margin-top:5rem;
	}
	#nav ul.nav-menu{
		width:100%;
		font-size:1.125rem;
		text-align:center;
		margin-bottom:1rem;
	}
	.site-nav ul.nav-menu li{
		display:block;
		float:none;
		width:100%;
		margin-left:revert;
	}
	.site-header ul.nav-menu li a{
		display:inline-block;
		padding:1rem 0;
	}
	.site-header ul.nav-menu li.linkedin a{
		margin:1rem auto 0 auto;
	}
	.site-header ul.nav-menu li a:after{
		bottom:.5rem;
	}
	#nav .navisopen,
	#nav:target .navisclosed,
	.toggled-on #nav .navisclosed{
		display:none;
	}
	#nav .navisclosed,
	#nav:target .navisopen,
	.toggled-on #nav .navisopen{
		display:block;
	}
	#colophon #navcontent2{
		position:absolute;
		right:clamp(1.5rem,8vw,9.25rem); /* same as padding on .outer */
		top:0;
		height:100%;
		display:flex;
		align-items:center;
	}

	#colophon .site-nav ul.nav-menu li{
		display:none;
	}
	#colophon .site-nav ul.nav-menu li.linkedin{
		display:block;
	}
}

@media(max-width:767px){
	.fadeblock{
		background-image:none !important;
	}
	.fadeblock .mobileplaceholder{
		display:block;
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
	}
	.fadeblock .textside{
		width:100%;
		height:auto;
		min-height:0;
		
	}
	.widesplit .imageside{
		width:100%;
	}
	.widesplit .imageside .mobileplaceholder{
		display:block;
	}
	.widesplit.imgright .imageside{
		order:0;
	}
	.widesplit .textside{
		width:100%;
	}
	.widesplit .textside{
		padding-left:0 !important;
		padding-right:0 !important;
	}
	.widesplit.imgleft .textside .inside,
	.widesplit.imgright .textside .inside{
		max-width:100%;
		padding-right:clamp(1.5rem,8vw,9.25rem);
		padding-left:clamp(1.5rem,8vw,9.25rem);
	}
}

@media(max-width:600px){
	.page-header.hasfilters.hasimage .impactfilters{
		text-align:revert;
	}
	.single .page-header h1,
	.single .page-header p.posttype{
		width:100%;
		max-width:100%;
	}
	.single .page-header p.posttype{
		order:-1;
		text-align:right;
		padding-top:.8em;
		margin-bottom:0;
	}

}
@media(max-width:550px){
	.bioblock:first-child{
		padding-top:0;
	}
	.bioblock .imageside{
		float:none !important;
		width:100%;
	}
	.bioblock.imgleft .inside,
	.bioblock.imgright .inside{
		float:none !important;
		width:100%;
		padding-top:max(1.2rem,6%);
		padding-right:clamp(1.5rem,8vw,9.25rem);
		padding-left:clamp(1.5rem,8vw,9.25rem);
	}
	.bioblock .inside h2{
		margin-bottom:1em;
	}
}
@media(max-width:767px){
	.home .page-header.outer{
		background:#1C1C25 !important;
	}
	.home .page-header h1{
		background-repeat:no-repeat;
		background-position:center top;
		background-size:100% auto;
	}
	.home .page-header.hasimage.outer{
		padding:0;
	}
	.home .page-header.hasimage.hasfilters.outer{
		padding-bottom:1.5rem;
	}
	.home .page-header.noimage{
		padding-left:0;
		padding-right:0;
	}
	.home .page-header.hasimage h1{
		padding-top:calc(108vw + 1.25em + clamp(4.6875rem,8vw,9.375rem));
		padding-top:calc(108vw + max(2rem,4.25vw));
		min-height:108vw;
		margin-bottom:.5em;
	}
	.home .page-header .phinside{
		width:100%;
		max-width:100%;
	}
	.home .page-header h1.page-title,
	.home .phtext{
		padding-left:clamp(1.5rem,6vw,9.25rem);
		padding-right:clamp(1.5rem,6vw,9.25rem);
	}
}
@media(max-width:520px){
	.page-header.outer{
		background:#1C1C25 !important;
	}
	.page-header h1{
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
	}
	.page-header.hasimage.outer{
		padding:0;
	}
	.page-header.hasimage.hasfilters.outer{
		padding-bottom:1.5rem;
	}
	.page-header.noimage{
		padding-left:0;
		padding-right:0;
	}
	.page-header.hasimage h1{
		padding-top:calc(1.25em + clamp(4.6875rem,8vw,9.375rem));
		padding-top:calc(1.25em + 3.75rem);
		min-height:108vw;
		margin-bottom:.5em;
	}
	.home .page-header .phinside{
		max-width:100%;
	}
	.page-header h1.page-title,
	.phtext,
	.navbar,
	.outer,
	.widebox p.caption,
	.impactfilters{
		padding-left:clamp(1.5rem,6vw,9.25rem);
		padding-right:clamp(1.5rem,6vw,9.25rem);
	}
	.fadeblock .textside .inside{
		padding-left:clamp(1.5rem,6vw,9.25rem) !important;
		padding-right:clamp(1.5rem,6vw,9.25rem) !important;
	}
	.widesplit.imgleft .textside{
		padding-right:clamp(1.5rem,6vw,9.25rem);
	}
	.widesplit.imgright .textside{
		padding-left:clamp(1.5rem,6vw,9.25rem);
	}
	.widesplit.imgleft .textside .inside,
	.widesplit.imgright .textside .inside,
	.bioblock.imgleft .inside,
	.bioblock.imgright .inside{
		padding-left:clamp(1.5rem,6vw,9.25rem) !important;
		padding-right:clamp(1.5rem,6vw,9.25rem) !important;
	}
	.navbar:before{
		width:clamp(4.6875rem,6vw,9.25rem);
	}

	.page-content .aligncenter{
		text-align:revert;
	}
	.page-content .decoframe .aligncenter h2{
		max-width:calc(100% - max(calc(26vw - 8rem),clamp(1.5rem,8vw,9.25rem)) - 1.5rem);
		margin-left:0;
	}

	.single .page-header{
		padding-bottom:.5rem;
	}
	.single .post-image.outer{
		margin-top:0;
		padding-left:0;
		padding-right:0;
	}




	#colophon .site-info{
		padding:calc(clamp(1.5rem,6vw,9.25rem) / 2) 0;
	}
	#toggle{
		right:clamp(1.5rem,6vw,9.25rem);
		right:1.32875rem;
	}
	#colophon #navcontent2{
		right:clamp(1.5rem,6vw,9.25rem);
		right:1.32875rem;
	}
	#colophon .site-info > *{
		width:100%;
		max-width:100%;
	}
	#colophon .site-info .fcol1{
		order:-2;
	}
	#colophon .site-info .fcol4{
		order:-1;
		padding:1em 0;
	}
	#colophon .site-info p.copyright{
		position:static;
	}
	#colophon .site-info p.fcol1 span{
		display:inline;
	}
	#colophon .site-info p.fcol1 span + br{
		display:none;
	}

}

@media(max-width:400px){
	h1.page-title{
		font-size:clamp(1rem,10vw,2.5rem);
	}
}

@media(max-width:300px){
	#nav,
	.outer,
	.widebox p.caption,
	.page-header h1,
	.phtext{
		padding-left:clamp(.875rem,6vw,1.5rem);
		padding-right:clamp(.875rem,6vw,1.5rem);
	}
}