/*
Theme Name: Vincent DT23
Theme URI: n/a
Author: Raffaele Malanga / Els van Bloois
Author URI: https://farstudios.com/
Description: Theme for VincentDT.com
Version: 2.0
License: no license, use a theme from https://wordpress.org/themes/ instead.
License URI: n/a
Tags: n/a
Text Domain: vincentdt23
*/

html{
	font-size:16px;
}
*{
	box-sizing:border-box;
}
html,body,h1,h2,h3,h4,h5,h6,p,ul,li,blockquote,form{
	padding:0;
	margin:0;
}
.skip-link,
.screen-reader-text{
	position:fixed;
	top:-4000px;
	left:-4000px;
}
a:focus .skip-link,
.skip-link:focus{
	top:40px;
	left:40px;
	font-family:Arial,Helvetica,sans-serif;
	font-size:1.5rem;
	font-weight:700;
	background:#fff;
	color:#057382;
	padding:1em;
	border:2px solid #057382;
	border-radius:5px;
}
html,body{
	background:#3A3A3A;
	background:#fff;
	font-family:Arial,Helvetica,sans-serif;
	font-size:100%;
	line-height:1;
}
a:link,
a:visited{
	color:#057382;
	text-decoration:none;
}
a:hover{
	color:#104e4d;
}
a img{
	border-width:0;
}
img{
	max-width:100%;
}

.outerwrapper{
	padding:0 2.5rem;
}
.innerwrapper{
	max-width:60rem;
	margin:0 auto;
}

#page{
	position:relative; /* for positioning contrast */
	background:#fff;
	color:#3e3e3e;
}
#nav .innerwrapper,
#main,
#colophon .site-info,
#colophon .credit-info{
	/* overflow:hidden; */
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#colophon .site-info{
	gap:1rem;
}
#nav .innerwrapper{
	position:relative; /* for positioning of #topsearch */
}
#masthead{
	position:sticky;
	top:0;
	padding:1rem 0;
	background:#eee;
	z-index:10000;
}
.admin-bar #masthead{
	top:32px;
}
@media(max-width:782px){
	.admin-bar #masthead{
		top:46px;
	}
}
#masthead img{
	display:block;
}
#nav{
	width:100%;
	z-index:100000;
}
.site-branding{
	width:9rem;
}
.searchlink a,
.searchlink a img{
	display:block;
	width:1.5rem;
}
#topsearch{
	width:15rem;
	position:absolute;
	top:3rem;
	right:0;
}
#site-navigation{
	width:calc(100% - 11rem);
	text-align:right;
	position:relative;
}
.menu-main-nav-container,
.searchlink{
	display:inline-block;
}
.hquote{
	width:100%;
	max-width:100%;
	background:url(img/dot.gif) transparent repeat-x left bottom;
	padding-bottom:1em;
	margin-top:2rem;
}
.hquote p{
	font-family:'Arvo','Times New Roman',serif;
	font-size:1.1rem;
	line-height:1.2;
	text-align:right;
	color:#999;
}

#primary{
	width:100%;
}

/*** SITE NAV ***/

#toggle{
	display:none;
}
.site-nav{
	font-family:'Arvo','Times New Roman',serif;
	font-size:1.1rem;
	font-size:.9rem;
	font-weight:normal;
	text-transform:uppercase;
	line-height:1.6;
}
.site-nav ul.nav-menu{
	text-align:right;
}
.site-nav ul.nav-menu li ul{
	text-align:left;
}
.site-nav ul li{
	display:inline-block;
	margin-left:1em;
}
.site-nav ul li ul{
	padding:.4rem 0 0 1.25rem;
}
.site-nav ul li ul li{
	font-family:Arial,Helvetica,sans-serif;
	font-size:.84rem;
	font-weight:normal;
	line-height:1.8;
	padding:0;
}
.site-nav .menu-main-nav-container{
	position:relative;
}
.site-nav .sub-menu{
	position:absolute;
	left:-.75em;
	left:-1.25em;
	width:100%;
	display:none;
}
.site-nav li:hover ul.sub-menu{
	display:block;
	background:#eee;
	z-index:2;
}
.site-nav .current_page_ancestor .sub-menu,
.site-nav .current_page_item .sub-menu,
.single-vdt_project .site-nav #menu-item-23 .sub-menu,
.single-vdt_show .site-nav #menu-item-23 .sub-menu{
	display:block;
}
#secondary a,
.site-nav a{
	color:#3e3e3e;
}
.site-nav a:hover,
.site-nav a:focus,
.site-nav a:active{
	color:#057382 !important;
}
.blog .site-nav .menu-item-5966 a,
.single-post .site-nav .menu-item-5966 a,
.site-nav .current_page_ancestor > a,
.site-nav .sub-menu .current-page-ancestor a,
.site-nav .current_page_item a{
	color:#057382;
}
.site-nav .current_page_item .sub-menu a{
	color:#3e3e3e;
}

/* specific exceptions on nav */

.single-vdt_bio .site-nav #menu-item-34 .sub-menu,
.single-vdt_project .site-nav #menu-item-21 .sub-menu,
.single-vdt_article .site-nav #menu-item-24 .sub-menu,
.single-vdt_pressreview .site-nav #menu-item-24 .sub-menu{
	display:block;
}
.single-vdt_bio .site-nav #menu-item-35 a,
.single-vdt_article .site-nav #menu-item-47 a,
.single-vdt_pressreview .site-nav #menu-item-306 a,
.currentproject .site-nav #menu-item-96 a,
.archiveproject .site-nav #menu-item-49 a{
	color:#104e4d;
}

/*** SIDEBAR BLOCKS ***/
/* now top nav, subnav, and banners */

.search-form{
	display:flex;
	font-size:1rem;
	height:3.125rem;
}
.search label{
	width:calc(100% - 3.125rem);
	height:100%;
}
.search input.search-field{
	width:100%;
	height:100%;
	font-size:1.1rem;
	background:#fff;
	color:#3e3e3e;
	padding-left:1rem;
	border:1px solid #B2B2B2;
	border-right-width:0;
}
.search input.search-submit{
	width:3.125rem;
	height:100%;
	background:url(img/arrow-search.png) #057382 no-repeat center / auto 1rem;
	color:#fff;
	border:1px solid #057382;
	text-indent:-500px;
	cursor:pointer;
}
.banner{
	width:100%;
	padding:2em 0;
	text-align:center;
	background:url(img/dot.gif) transparent repeat-x left top;
}
.mailing h2{
	display:inline-block;
	padding-left:2.8rem;
	background:url(img/mail.png) transparent no-repeat left top / auto 1.6rem;
	text-transform:uppercase;
	margin-bottom:0;
}
.social-links ul{
	display:flex;
	justify-content:center;
	margin-left:-.2rem;
	margin-right:-.2rem;
}
.social-links ul li{
	display:inline-block;
	width:16.66%;
	padding:.2rem;
}
.social-links ul li a img{
	width:40px; /* that's the size of the linkedin icon, which is smaller than the rest. */
	/* the others are actually 49px */
}


/*** CONTENT ***/

#main{
	padding-bottom:1.6rem;
}

/* news overview pages (taxonomy archives + index page) */

.newsposts{
	display:flex;
	flex-wrap:wrap;
	padding-top:2rem;
	margin-left:-1rem;
	margin-right:-1rem;
}
.newsposts .item{
	width:33.33%;
	padding:0 1rem;
	margin-bottom:2rem;
}
@media(max-width:767px){
	.newsposts .item{
		width:50%;
	}	
}
@media(max-width:489px){
	.newsposts .item{
		width:100%;
	}	
}
.page-content .newsposts h3{
	font-size:clamp(1rem,2vw,1.2rem);
	font-weight:600;
	line-height:1.4;
}
.page-content .newsposts p{
	font-size:clamp(.875rem,1.5vw,1rem);
	line-height:1.4;
}

/* news posts layout */

.single-post #primary{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.single-post .page-header{
	width:100%;
	margin-bottom:1rem;
}
.single-post article{
	width:calc(100% - 21rem);
	width:65%;
}
.single-post .secondary{
	width:17rem;
	width:28%;
}
.single-post .entry-header,
.single-post .sidebar-header{
	min-height:5rem;
	margin-bottom:1rem;
}
.single-post .post-navigation{
	width:100%;
	background:url(img/dot.gif) transparent repeat-x left top;
	padding-top:1rem;
	padding-bottom:1rem;
}
.single-post .post-navigation .nav-links{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:1.5rem;
}
.nav-previous{
	text-align:left;
}
.nav-next{
	text-align:right;
	flex-grow:1; /* so that it goes full width when it drops to the next line, which is needed in order to align right */
}

@media(max-width:767px){
	.single-post .page-header,
	.single-post article{
		width:100%;
	}
	.single-post .secondary{
		width:100%;
		background:url(img/dot.gif) transparent repeat-x left top;
		order:3; /* to go after post navigation */
	}
}

/* end news posts layout */


.page-header{
	min-height:.8rem; /* to create space for those projects that do not have a category title */
}

.home .page-content{
	padding-top:2rem;
	background:url(img/dot.gif) transparent repeat-x left top;
}

h1.page-title{
	color:#3e3e3e;
	font-family:'Arvo','Times New Roman',serif;
	font-size:2.5rem;
	font-weight:normal;
	text-transform:lowercase;
	text-align:right;
	line-height:1.2;
	padding-top:.2rem;
	padding-bottom:.8rem;
	background:url(img/dot.gif) transparent repeat-x left bottom;
}
h1.entry-title,
.sidebar-header h2{
	font-family:'Arvo','Times New Roman',serif;
	font-size:clamp(1.3rem,3.3vw,2.2rem);
	font-weight:normal;
	line-height:1.2;
	padding-top:.5em;
}
.page-content h2,
.entry-content h2{
	font-family:'Arvo','Times New Roman',serif;
	font-size:clamp(1.5rem,3.3vw,2.2rem);
	font-size:clamp(1.3rem,3.3vw,2.2rem);
	font-weight:normal;
	line-height:1.2;
	margin-bottom:.5em;
}
.page-content h3,
.entry-content h3{
	/* font-size:1.3rem; */
	font-size:clamp(1.23rem,3vw,2rem);
	font-weight:500;
	line-height:1.6;
	margin-bottom:0;
}
.page-content h2.searchresult-title,
.page-content h3.searchresult-title{
	margin-bottom:0;
}
.page-content h4,
.entry-content h4{
	/* font-size:1rem; */
	font-size:clamp(1rem,2.5vw,1.625rem);
	line-height:1.6;
}

.process-img-1{
	float: left;
	margin-bottom: 4px;
}

@media(min-width:490px){
	.page-content .incolumns h2,
	.page-content .incolumns h3,
	.entry-content .incolumns h2,
	.entry-content .incolumns h3{
	/* h2 + h3 in "incolumns" look like h4, until they go to single column */
		font-family:Arial,Helvetica,sans-serif;
		/* font-size:1rem; */
		font-size:clamp(1rem,2.5vw,1.625rem);
		font-weight:700;
		line-height:1.6;
		margin-bottom:0;
	}
}

.entry-header p.entry-meta,
.entry-content p.entry-meta{
	font-size:1rem;
	line-height:1.2;
	padding-top:.6em;
	margin-bottom:0;
}

.page-content p,
.page-content ul,
.page-content table td{
	/* font-size:1.3125rem; */
	font-size:clamp(1.125rem,2.5vw,1.625rem);
	font-size:clamp(1rem,2.5vw,1.625rem);
	line-height:1.6;
	margin-bottom:1.6em;
}
.entry-content p,
.entry-content ul,
.entry-content table td{
	/* the content column here is narrower, so we can't go as large */
	/* until the column goes full width of course,see below */
	font-size:clamp(1rem,2vw,1.4rem);
	line-height:1.6;
	margin-bottom:1.6em;
}

@media(max-width:767px){
	.entry-content p,
	.entry-content ul,
	.entry-content table td{
		/* when column goes full width of course, then we're back to */
		/* the default font-sizes for page-content */
		font-size:clamp(1rem,2.5vw,1.625rem);
		line-height:1.6;
		margin-bottom:1.6em;
	}
}
.secondary h3{
	font-size:clamp(1rem,2vw,1.2rem);
	line-height:1.4;
}
.secondary p,
.secondary ul{
	font-size:clamp(1rem,2vw,1.2rem);
	line-height:1.6;
	margin-bottom:1.6em;
}
.secondary ul.tags{
	font-size:clamp(.875rem,1.75vw,1rem);
}
.secondary ul.recentposts li{
	margin-bottom:1em;
}
.secondary p.posted-on{
	font-size:.875rem;
	text-transform:uppercase;
	margin-bottom:0;
}
.secondary h2.tagsheading{
	font-family:'Arvo','Times New Roman',serif;
	font-size:clamp(1.3rem,2.2vw,1.5rem);
	font-weight:normal;
	line-height:1.2;
	margin-bottom:.5em;
}

.contentblock form table{
	margin-bottom:40px;
}

ul{
	list-style:none;
	/* for all lists, except those with class "bulleted" */
}
ul.bulleted li{
	padding-left:12px;
	background:url(img/bullet.png) transparent no-repeat left .5em;
}

iframe{
	display:block;
	margin-bottom:1.25rem;
	max-width:100%;
}

/* wrappers with optional captions */

.wrapper iframe{
	margin-bottom:8px;
}
.wrapper .bordered iframe{
	margin-bottom:0;
}
.wrapper .bordered{
	border:1px solid #999;
	margin-bottom:8px;
}

.wrapper .bx-wrapper{
	background:#eee;
	margin-bottom:8px !important;
}
.wrapper .caption{
	font-size:clamp(.875rem,1vw,1rem);
	margin-bottom:1.25rem;
}
.wrapper{
	padding-bottom:1px; /* to keep margin on caption paragraph inside */
	margin-bottom:1.25rem;
}

/* images */

.wideimage img,
.wideimage span.caption{
	display:block;
	font-size:1rem;
	font-size:clamp(.875rem,1vw,1rem);
	text-align:center;
	margin-bottom:.5em;
	margin-left:auto;
	margin-right:auto;
}
.sidebyside{
	overflow:hidden;
	margin-bottom:1rem;
}
.sidebyside .imgleft{
	float:left;
	max-width:49%;
}
.sidebyside .imgright{
	float:right;
	max-width:49%;
}
.sidebyside img,
.sidebyside span.caption{
	display:block;
	font-size:1rem;
	text-align:center;
}
.sidebyside span.caption{
	padding-top:8px;
	margin-bottom:8px;
}


.sidebyside div.moused a{
	display:block;
	position:relative;
}
.sidebyside div.moused a span.outer{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:url(img/overlay.png);
	background-size:100% 100%;
	display:none;
}
.sidebyside div.moused a:focus span.outer,
.sidebyside div.moused a:hover span.outer,
.sidebyside div.moused a:active span.outer{
	display:block;
}

.sidebyside div.moused a span.outer span.caption{
	display:block;
	position:absolute;
	top:40%;
	width:100%;
	font-family:'Arvo',serif;
	font-size:14px;
	font-weight:700;
	color:#3e3e3e;
}

/* videos */


.videobox{
	position:relative;
	height:0;
	padding-top:56.25%;
}
.videobox iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}



div.sidebyside div.video{
	width:48%;
	max-width:426px;
	border:1px solid #686868;
}
div.sidebyside div.video iframe{
	margin-bottom:0;
}
div.sidebyside div.odd{
	float:left;
}
div.sidebyside div.even{
	float:right;
}


.contentblock{
	overflow:hidden;
}
.contentblock.spaced{
	margin-bottom:1rem;
}
.contentblock.cleared{
	clear:both;
}

a .home-vid-title {
	font-size: 1.3rem;
    padding-right: 30px;
    color: #3e3e3e;
    background:url(img/arrow-white.png) transparent no-repeat right .2em / auto 1rem;
}
a.home-vid-link {
	margin-top: 20px;
	display: block;
	color: #3e3e3e;
	font-family: 'Arvo',serif;
	font-size: 2rem;
}

.home .videobox.lead {
	border: 1px solid #686868;
	margin-bottom:1rem;
}

ul.projectslist{
	float:left;
}
ul.projectslist li{
	padding:4px 0;
}
ul.projectslist li a{
	display:block;
	overflow:hidden;
}
ul.projectslist li a img{
	float:left;
	margin-top:.25rem;
	margin-right:.8rem;
}
ul.projectslist li a span{
	padding-top:1px;
}
ul.projectslist li.item1 a span{
	background:none;
}





/** search **/

.searchresult{
	margin-bottom:1.5rem;
}


/** frontpage/homepage **/

.page-id-2 .hptop{
	padding-top:2rem;
}
.wideslider div.slidebox{
	position:relative;
}
.wideslider p.overlay{
	width:100%;
	display:block;
	font-family:'Arvo',serif;
	font-size:1rem;
	font-weight:700;
	line-height:1.5;
	text-align:center;
	background:rgba(255,255,255,.8);
	color:#3e3e3e;
	padding:0.5em 1em;
	position:absolute;
	bottom:0;
}


#piclinks{
	display:flex;
	flex-wrap:wrap;
	padding:2rem 0 0 0;
	margin:0 -.5rem 1rem -.5rem;
}
#piclinks li{
	width:25%;
	text-align:center;
	padding:0 .5rem;
	margin-bottom:1rem;
}
#piclinks li.pic1{
	width:100%;
}
#piclinks li.picb{
	width:50%;
}
#piclinks li.pic1 a{
	border:1px solid #686868;
}
#piclinks li a{
	display:block;
	position:relative;
}
#piclinks li a img{
	width:100%;
	display:block;
}
#piclinks li a span.boxtitle{
	width:100%;
	display:block;
	font-family:'Arvo',serif;
	font-size:1rem;
	font-weight:700;
	line-height:1.5;
	background:rgba(255,255,255,.8);
	color:#3e3e3e;
	padding:.5em 0;
}
#piclinks li.top2homeproject a span.TEMP{
	width:100%;
	height:100%;
	background:url(img/overlay-293x293.png);
	background-size:100% auto;
}
#piclinks li.pic1 a span.boxtitle{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	background:rgba(255,255,255,.5);
	text-align:left;
	padding:2rem 2rem;
}
#piclinks li.pic1 a span.boxmaintitle{
	font-size:1.3rem;
	/* text-transform:uppercase; */
	padding-right:30px;
	background:url(img/arrow-white.png) transparent no-repeat right .2em / auto 1rem;
}
#piclinks li.pic1 a span.boxsubtitle{
	font-size:1rem;
	font-weight:400;
	text-transform:none;
}


blockquote,
.page-content blockquote,
div.hpquote{
	font-family:'Arvo','Times New Roman',serif;
	font-size:1.3rem;
	font-size:clamp(1.3rem,3.2vw,2.1rem);
	font-weight:normal;
	line-height:1.4;
	text-align:left;
	padding:2rem 0;
	background:url(img/dot.gif) transparent repeat-x left top;
}
blockquote p,
.page-content blockquote p,
div.hpquote p{
	font-size:inherit;
	line-height:inherit; 
	margin-bottom:0;
}
blockquote p.byline,
.page-content blockquote p.byline,
div.hpquote .byline{
	font-size:.75em; /* relative to quote font-size */
	padding-top:.6em;
	text-transform:uppercase;
}
div.hpvids{
	padding:1.6rem 0;
	background:url(img/dot.gif) transparent repeat-x left top;
	overflow:hidden;
}
/* rest of videos styles see 'videos' */




/** company page **/
/** collaborators **/


.personnelindex{
	background:url(img/dot.gif) transparent repeat-x left top;
}
.rowcolumn,
.biocategory,
.personnel{
	display:flex;
	background:url(img/dot.gif) transparent repeat-x left bottom;
	padding-top:4px;
	padding-bottom:4px;
}
.rowcolumn h2,
.biocategory h2,
.personnel h2{
	width:40%;
	min-width:10rem;
	padding-top:8px;
}
.detailscolumn,
.biolist,
.personnellist{
	width:60%;
	max-width:calc(100% - 11rem);
}
.biocategory ul li,
.personnel ul li{
	overflow:hidden;
	padding:0;
}
.biocategory ul li span,
.personnel ul li span{
	margin-right:.5em;
}
.detailscolumn p,
.detailscolumn ul,
.biocategory ul,
.personnel1 ul{
	padding-top:7px;
	margin-bottom:0;
}
.biocategory ul li,
.personnel1 ul li{
	margin-bottom:8px;
}
.biocategory ul li a{
	display:block;
}
.personnel h3,
.personnel h4{
	padding-top:7px;
	margin-bottom:0;
}
.personnel2 ul{
	padding:0;
	margin-bottom:8px;
}
.personnel2 ul li{
	margin-bottom:0;
}


/** bios **/

.bioimg{
	float:right;
	max-width:50%;
	margin-left:1.25rem;
	padding-bottom:8px;
	background:url(img/dot.gif) transparent repeat-x left bottom;
	margin-bottom:.8rem;
}

hr{
	height:1em;
	/* background:url(img/dot2.gif) transparent repeat-x left center; */
	background:url(img/dot.gif) transparent repeat-x left center;
	border-width:0;
}

/** projects **/

.projectcategory{
	/* background:url(img/dot2.gif) transparent repeat-x left bottom; */
	background:url(img/dot.gif) transparent repeat-x left bottom;
	padding-bottom:4px;
	overflow:hidden;
}
.projectcategory h2{
	float:left;
	padding-top:8px;
}
.projectcategory ul{
	clear:right;
	float:right;
	width:295px;
	margin-bottom:0;
}
.projectcategory ul li{
	overflow:hidden;
	padding:4px 0;
}
.projectcategory ul li a{
	display:block;
}
.projectcategory ul li a img{
	float:left;
	margin-top:4px;
	margin-right:.8rem;
}
.projectcategory ul li a span{
	float:right;
	width:190px;
	padding-top:4px;
	/* background:url(img/dot2.gif) transparent repeat-x left top; */
	background:url(img/dot.gif) transparent repeat-x left top;
}
.projectcategory ul li.item1 a span{
	background:none;
}

/** new grid **/

.catpage ul{
	display:flex;
	flex-wrap:wrap;
	margin-left:-1rem;
	margin-right:-1rem;
}
.catpage ul li{
	width:33.33%;
	padding:0 1rem;
	margin-bottom:2rem;
}
.single-post .catpage ul li{
	width:50%;
}
.catpage ul li a{
	display:block;
	position:relative;
}
.catpage ul li a img{
	display:block;
	width:100%;
}
.catpage ul li a span.outer{
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
}
.catpage ul li a span.outer span{
	display:block;
	padding:.5em;
	background:rgba(255,255,255,.8);
	color:#3e3e3e;
	font-family:"Arvo","Times New Roman",serif;
	font-size:1rem;
	line-height:1.5;
}
.catpage.hubversion ul li a span.outer span{
/*	display:none; */
}



/** project single pages **/

.projecttop{
	padding-top:.8rem;
	padding-bottom:.8rem;
	/* background:url(img/dot2.gif) transparent repeat-x left bottom; */
	background:url(img/dot.gif) transparent repeat-x left bottom;
}
.projecttop img{
	width:100%;
}
#jump{
	float:right;
	width:135px;
	font-size:.84rem;
	line-height:1.8;
	margin-left:1.6rem;
	/* background:url(img/dot2.gif) transparent repeat-x left bottom; */
	background:url(img/dot.gif) transparent repeat-x left bottom;
}
#jump li{
	/* background:url(img/dot2.gif) transparent repeat-x left top; */
	background:url(img/dot.gif) transparent repeat-x left top;
}
#jump li a{
	color:#3e3e3e;
}
#jump li a:hover{
	color:#057382;
}
.page-content h2.page-title{
	color:#3e3e3e;
}
.page-content h2.subtitle,
.entry-content h2.subtitle{
	font-family:Arial,Helvetica,sans-serif;
	font-weight:bold;
}
.projectsection{
	clear:both;
	overflow:hidden;
	padding-top:.8rem;
	padding-bottom:1.6rem;
	background:url(img/dot.gif) transparent repeat-x left top;
}
.projectsection h2{
	color:#3e3e3e;
}
#soundclips iframe{
	margin-bottom:.4rem;
}
.projectsection ul{
}
#whos_who ul li{
	clear:left;
	float:left;
	width:100%;
}
#whos_who ul li strong{
	clear:left;
	float:left;
	width:47%;
}
#whos_who ul li ul{
	float:left;
	width:50%;
	margin-bottom:0;
}


.share{
	background:url(img/dot.gif) transparent repeat-x left top;
	padding:.8rem 0;
}
.share p{
	margin:0;
}
.backlink{
	background:url(img/dot.gif) transparent repeat-x left top;
	padding:.8rem 0;
}


/** calendar **/

#AutoListBox{
	float:right;
	margin-bottom:.8rem;
}
ul.calendar{
	clear:both;
}
ul.calendar li{
	/* background:url(img/dot2.gif) transparent repeat-x left top; */
	background:url(img/dot.gif) transparent repeat-x left top;
	padding:8px 0;
	overflow:hidden;
}
ul.calendar li span{
	float:left;
}


/** calendar new (2015 and newer) **/

ul.calendarupcoming li span.date span.times{
	float:none;
	display:block;
}
ul.calendarupcoming li span.date{
	width:17%;
	margin-right:2.5%;
}
ul.calendarupcoming li span.show{
	width:39.5%;
	margin-right:2.5%;
}
ul.calendarupcoming li span.location{
	width:22%;
}
ul.calendarupcoming li span.infolink{
	float:right;
	width:14%;
}

/** calendar archive (2014 and older) **/

ul.calendararchive li span.date span.times,
ul.calendararchive li span.infolink{
	display:none;
}
ul.calendararchive li span.date{
	width:20%;
	margin-right:2%;
}
ul.calendararchive li span.show{
	width:33%;
}
ul.calendararchive li span.location{
	float:right;
	width:43%;
	text-align:right;
}

/** calendar different (used for 1998) **/

ul.calendar.nodates li span.show{
	width:30%;
}
ul.calendar.nodates li span.location{
	text-align:left;
	width:68%;
}


/** calendar single pages **/

.eventtop{
	padding-top:.8rem;
	padding-bottom:.8rem;
	/* background:url(img/dot2.gif) transparent repeat-x left bottom; */
	background:url(img/dot.gif) transparent repeat-x left bottom;
}
.eventtop img{
	width:100%;
}
#eventdetails{
	float:right;
	width:205px;
	padding-top:.8rem;
	padding-left:.8rem;
	margin-left:1.6rem;
	background:url(img/dot-vertical.gif) transparent repeat-y left top;
	margin-bottom:1.6rem;
}
#eventdetails .infolink a{
	display:inline-block;
	background:#057382;
	color:#3e3e3e;
	padding:.4rem 1.6rem;
	border-radius:.4rem;
}
#eventdescription{
	padding-top:.8rem;
	margin-bottom:1.6rem;
}
#eventdetails h3,
#relatedinfo h3{
	font-family:'Arvo','Times New Roman',serif;
	font-size:1rem;
	font-weight:normal;
	line-height:1.2;
	margin-bottom:1em;
}
#relatedinfo{
	clear:both;
	overflow:hidden;
	padding-top:.8rem;
	padding-bottom:1.6rem;
	background:url(img/dot.gif) transparent repeat-x left top;
}
#relatedinfo.empty{
	background:transparent;
}
.relatedinfolinks{
	margin-left:
}
.relatedinfosection{
	clear:left;
	float:left;
	width:100%;
}
.relatedinfosection h4{
	clear:left;
	float:left;
	width:40%;
}
.relatedinfosection .relatedinfolinks{
	float:left;
	width:57%;
	margin-bottom:1em;
}



/** press page **/

ul.pressthumbs{
	overflow:hidden;
}
ul.pressthumbs li{
	float:left;
	width:100px;
	padding:4px;
	border:1px solid #666;
	margin-right:9px;
	margin-bottom:9px;
}
ul.pressthumbs li img{
	display:block;
}


/** articles **/
/** and press reviews **/

.articlesnippets ul{
}
.articlesnippets li{
	/* background:url(img/dot2.gif) transparent repeat-x left bottom; */
	background:url(img/dot.gif) transparent repeat-x left bottom;
	overflow:hidden;
	margin-bottom:1.5em;
}
.articlesnippets li h2{
	margin-bottom:3px;
}
.articlesnippets li p.author{
	font-style:italic;
	margin-bottom:0;
}
.articlesnippets li p.pubdate{
	font-weight:700;
}

div.nav-links{
	font-size:1rem;
	text-align:center;
}


/** article single pages **/

.articletop{
	padding-top:.8rem;
	padding-bottom:.8rem;
	/* background:url(img/dot2.gif) transparent repeat-x left bottom; */
	background:url(img/dot.gif) transparent repeat-x left bottom;
}
.articletop img{
	width:100%;
}
h2.page-title,
ul#jump,
.categorygridtop,
.articlesnippets,
.pagecontent,
.articletext{
	padding-top:.8rem;
}
.articledetails p.author{
	font-style:italic;
	margin-bottom:0;
}
.articledetails p.pubdate{
	font-weight:700;
}


/*** FOOTER ***/

#colophon{
	font-size:.9rem;
	line-height:1.4;
	padding-top:.8rem;
	border-top:1px solid #595959;
	padding-bottom:2.5rem;
}
p.address,
p.companyinfo{
	/* margin-bottom:1rem; */
	/* this is done via the flex gap */
}
ul.sponsors{
	width:100%;
	text-align:right;
	margin-bottom:.8rem;
}
ul.sponsors li{
	display:inline-block;
	margin-left:.8rem;
}
ul.sponsors li a,
ul.sponsors li img{
	display:block;
	height:2.9375rem;
}
ul.sponsors li img{
	opacity:.65;
}
div.credit-info{
	color:#999;
	padding-top:.8rem;
	border-top:1px solid #2E2E2E;
}
p.copyright{
	float:left;
}
p.credits{
	float:right;
}

/* mailchimp */

#mc_embed_signup{
	color:#3e3e3e;
}
#mc_embed_signup h2{
	font-weight:400;
}
#mc_embed_signup .button{
	background:#666;
	color:#ffffff;
}
#mc_embed_signup .button:hover{
	background:#333;
}


/* 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%;
}

/* the following styles, from '.making-img-1' to the end of the @max-width 720 styles for the contact form, were added by someone else */
/* they didn't close the @media(max-width:1000px) rule set, which I've now closed */

.making-img-1{
	float: left;
	margin-bottom: 6px;
	margin-right: 5px;
	
}
 .making-img-2{
	margin-right: 5px;
}
.wpcf7{
	float: right;
	width: 50%;
}
fieldset{
	padding: 0;
	border: none;
	display: flex;
}
legend{
	margin-right: 20px;
	border: none;
}
.wpcf7-form-control.wpcf7-text {
	border-radius: 3px;
	border:none;
	padding: 10px;
	margin-right: 10px;
	width: 90%;
	
}
.wpcf7-form-control.wpcf7-textarea{
	border-radius: 3px;
	border:none;
	padding: 10px;
	width: 91%;
}
.wpcf7-form-control.wpcf7-text.wpcf7-email{
	width: 90%;
}
/* .wpcf7-form-control.wpcf7-text{
	width: 81%;
} */
/* .page-content p, .page-content ul, .page-content table td{
	text-align: center;
} */
.wpcf7-form-control.wpcf7-submit{
	background-color: #a8a6a1;
	color: #3e3e3e;
	font-size: 14px;
	padding: 17px 54px;
	border-radius: 41px;
	text-align: center;
}
.wpcf7-text{
	border-radius: 6px;
	border:none;
	padding: 10px;
}

fieldset p:nth-child(2) label span.wpcf7-form-control-wrap input.wpcf7-validates-as-required{
	width: 81%;
}

/* span.wpcf7-form-control-wrap input.wpcf7-validates-as-required{
	width: 90%;
} */

span input[name="your-subject"] {
	width: 91%;
}

.wpcf7-form-control.wpcf7-submit{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.enquiry-copy{
	position: absolute;
	top: 58.6%;
	width: 30.5%;
}

@media(max-width: 1000px) {
	.wpcf7{
		align-items: center;
		width: 100%;
	}
	fieldset{
		display: flex;
		flex-direction: column;
		padding: 0;
		border: none;
		display: flex;
	}
	
	legend{
		margin-right: 20px;
		border: none;
	}
	.wpcf7-form-control.wpcf7-text {
		border-radius: 3px;
		border:none;
		padding: 10px;
		margin-right: 10px;
		width: 100%;
		
	}
	.wpcf7-form-control.wpcf7-textarea{
		border-radius: 3px;
		border:none;
		padding: 10px;
		width: 100%;
	}
	.wpcf7-form-control.wpcf7-text.wpcf7-email{
	width: 100%;
	
	}
	.wpcf7-form-control.wpcf7-text{
		width: 100%;
	}
	.wpcf7-form-control.wpcf7-submit{
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.wpcf7-text{
		border-radius: 6px;
		border:none;
		padding: 10px;
	}
	fieldset p:nth-child(2) label span.wpcf7-form-control-wrap input.wpcf7-validates-as-required{
		width: 100%;
		margin-bottom: 10px;
	}

	span input[name="your-subject"] {
		width: 91%;
		margin-bottom: 10px;
	}

	.enquiry-copy{
		text-align: left;
		position: unset;
		width: 100%;
	}

	/* fieldset p:nth-child() label span.wpcf7-form-control-wrap input.wpcf7-validates-as-required{
		display: block;
		margin-left: auto;
		margin-right: auto;
	} */

	@media(max-width: 720px) {
		.wpcf7{
			align-items: center;
			width: 100%;
		}
		fieldset{
			display: flex;
			flex-direction: column;
			padding: 0;
			border: none;
			display: flex;
			display: block;
			margin-left: auto;
			margin-right: auto;
		}

		legend{
			margin-right: 20px;
			border: none;
		}
		.wpcf7-form-control.wpcf7-text {
			border-radius: 3px;
			border:none;
			padding: 10px;
			margin-right: 10px;
			width: 100%;

		}
		.wpcf7-form-control.wpcf7-textarea{
			border-radius: 3px;
			border:none;
			padding: 10px;
			width: 100%;
		}
		.wpcf7-form-control.wpcf7-text.wpcf7-email{
		width: 100%;

		}
		.wpcf7-form-control.wpcf7-text{
			width: 100%;
		}
		/* .page-content p, .page-content ul, .page-content table td{
			text-align: center;
		} */
		/* .wpcf7-form-control.wpcf7-submit{
			background-color: #a8a6a1;
			color: #3e3e3e;
			font-size: 14px;
			padding: 17px 54px;
			border-radius: 41px;
			text-align: center;
		} */

		.wpcf7-form-control.wpcf7-submit{
			display: block;
			margin-left: auto;
			margin-right: auto;
		}
		.wpcf7-text{
			border-radius: 6px;
			border:none;
			padding: 10px;
		}
		.enquiry-copy{
			text-align: left;
			position: unset;

		}
		fieldset p:nth-child(2) label span.wpcf7-form-control-wrap input.wpcf7-validates-as-required{
			width: 100%;
			margin-bottom: 10px;
			}

		span input[name="your-subject"] {
			width: 91%;
			margin-bottom: 10px;
		}

		/* fieldset p:nth-child() label span.wpcf7-form-control-wrap input.wpcf7-validates-as-required{
			display: block;
			margin-left: auto;
			margin-right: auto;
		} */
	}
} /* added closing bracket to make sure my styles below aren't dependent on @media(max-width:1000px) */


/* 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:Arial,Helvetica,sans-serif;
	font-size:1.1rem;
	color:#3e3e3e;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	font-family:Arial,Helvetica,sans-serif;
	font-size:1.1rem;
	color:#3e3e3e;
	opacity:1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	font-family:Arial,Helvetica,sans-serif;
	font-size:1.1rem;
	color:#3e3e3e;
	opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	font-family:Arial,Helvetica,sans-serif;
	font-size:1.1rem;
	color:#3e3e3e;
}
::-ms-input-placeholder { /* Microsoft Edge */
	font-family:Arial,Helvetica,sans-serif;
	font-size:1.1rem;
	color:#3e3e3e;
}


@media(max-width:890px){
	.outerwrapper{
		padding-left:1.5rem;
		padding-right:1.5rem;
	}
}
@media(max-width:854px){
	#piclinks li{
		width:50%;
	}
}
@media (max-width:800px){
	.sidebyside div.moused a span.outer span.caption{
		top:40%;
	}
	.projectcategory ul{
		width:295px;
	}
	.projectcategory ul li a span{
		width:190px;
	}
	#piclinks li{
		width:25%;
	}
	.catpage ul li{
		width:50%;
	}
}
@media (max-width:630px){
	#piclinks li{
		width:50%;
	}
}
@media (max-width:620px){
	ul.sponsors li a,
	ul.sponsors li img{
		height:2.5rem;
	}
}
@media (max-width:565px){
	.sidebyside div.moused a span.outer span.caption{
		top:35%;
	}
}
@media (max-width:540px){
	ul.sponsors li{
		margin-left:.5rem;
	}
	ul.sponsors li a,
	ul.sponsors li img{
		height:2rem;
	}
}
@media (max-width:510px){
	.projectcategory h2{
		padding-top:1.6rem;
	}
	.projectcategory ul{
		width:100%;
	}
	.projectcategory ul li a span{
		float:none;
		display:block;
		width:auto;
		margin-left:105px;
	}
	p.copyright,
	p.credits{
		float:none;
		margin-bottom:.4rem;
	}
}
@media (max-width:470px){
	.outerwrapper{
		padding-left:.8rem;
		padding-right:.8rem;
	}
	ul.calendar li span.date{
		width:40%;
	}
	ul.calendar li span.show,
	ul.calendar li span.location,
	ul.calendar li span.infolink{
		float:right;
		width:56% !important;
		text-align:left;
	}
}
@media (max-width:450px){
	#piclinks li,
	.catpage ul li,
	#piclinks li.picb{
		width:100%;
	}
	h1.page-title{
		text-align:left;
	}
	.sidebyside div.moused a span.outer span.caption{
		top:30%;
		font-size:1rem;
	}
	ul.calendar.nodates li span.show,
	ul.calendar.nodates li span.location{
		float:left;
		width:100% !important;
	}
	ul.calendar.nodates li span.show{
		padding-bottom:8px;
	}
	ul.sponsors{
		width:100%;
		text-align:left;
	}
	ul.sponsors li{
		margin-left:0;
		margin-right:.5rem;
	}
}
@media (max-width:410px){
	.mailing,
	.social-links,
	.twitter,
	.instagram,
	.search{
		float:none;
		width:100%;
		min-height:0;
	}
	.social-links{
		background:url(img/dot.gif) transparent repeat-x left top;
	}
}
@media (max-width:360px){
	ul.calendar li{
	}
	div.pagecontent ul.calendararchive li span,
	div.pagecontent ul.calendarupcoming li span{
		display:block;
		float:none !important;
		width:auto !important;
		margin-right:auto !important;
	}
}

@media(max-width:490px){
	.rowcolumn,
	.biocategory,
	.personnel{
		flex-wrap:wrap;
	}
	.rowcolumn h2,
	.biocategory h2,
	.personnel h2,
	.detailscolumn,
	.biolist,
	.personnellist{
		width:100%;
		max-width:100%;
	}
}


@media (max-width:1050px){ /* was 970px until 20240717 */
	#masthead{
		position:fixed;
		width:100%;
		height:8rem;
		transition:all 1s ease-in-out 0s;
	}
	#page{
		padding-top:8rem;
	}
	.site-branding{
		width:7.5rem;
	}
	#site-navigation{
		position:static;
	}
	.searchlink{
		position:absolute;
		top:0;
		right:0;
	}
	.searchlink ul li{
		margin-left:0;
	}
	#toggle{
		position:absolute;
		top:0;
		right:3rem;
		display:block;
		width:40px;
		height:30px;
	}
	#toggle a{
		display:block;
		width:100%;
		height:100%;
	}
	#toggle a span.burger{
		display:block;
		width:100%;
		height:100%;
		background:url(img/menu.png) transparent no-repeat right center / contain;
	}
	#nav .navisopen #toggle a span.burger,
	#nav:target #toggle a span.burger{
		background-image:url(img/menu-close.png);
	}
	#nav .navisopen,
	#nav:target .navisclosed,
	.toggled-on #nav .navisclosed{
		display:none;
	}
	#nav .navisclosed,
	#nav:target .navisopen,
	.toggled-on #nav .navisopen{
		display:block;
	}
	#nav .inner{
		display:block;
		height:100%;
	}
	#site-navigation{
		width:100%;
	}
	#nav .nav-menu li{
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
	#nav .nav-menu > li{
			margin-bottom:.5em;
	}
	#nav .nav-menu li ul.sub-menu{
		display:block;
		position:static;
		padding:0;
		text-align:center;
	}
	#site-navigation .menu-main-nav-container,
	#site-navigation .nav-menu{
		width:100%;
		text-align:center;
		padding:5px;
		background:transparent;
		display:none;
	}

	/* hierarchy for height calculations */
	/* 
	#masthead,
	#nav,
	.innerwrapper,
	#site-navigation,
	.menu-main-nav-container,
	ul#menu-main-nav
	
	*/
	
	body.toggled-on{
		overflow:hidden;
	}
	.toggled-on #masthead{
		height:100%;
	}
	.admin-bar.toggled-on #masthead{
		height:calc(100% - 32px);
	}
	@media(max-width:782px){
		.admin-bar.toggled-on #masthead{
			height:calc(100% - 46px);
		}
	}
	
	#nav .innerwrapper,
	.menu-main-nav-container{
		height:100%;
	}
	
	#nav:target,
	.toggled-on #nav{
		height:100%;
	}
	#nav:target #site-navigation,
	.toggled-on #site-navigation{
		height:calc(100% - 86px);
		/* 86px is the height of the logo */
		overflow:auto;
	}
	#nav:target #site-navigation .menu-main-nav-container,
	.toggled-on #nav #site-navigation .menu-main-nav-container,
	#site-navigation.toggled-on .menu-main-nav-container{
		display:block;
	}
	#nav:target #site-navigation .nav-menu,
	.toggled-on #nav #site-navigation .nav-menu,
	#site-navigation.toggled-on .nav-menu{
		display:block;
	}
}