/* This is the complete stylesheet for the Spring Group website. */

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');


body { font-family: verdana, sans-serif; font-size: 12pt; font-weight: normal; color: black; 
margin: 0; padding: 0; background-color: rgb(256,256,256); overflow-x:hidden;}

#page {max-width: 1200px; margin:0 auto; position: relative; top: -8px;}

h1 {margin: 0 0 1em 0; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-size: 2.5em;}
h2 {margin: 0 0 .5em 0; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-size: 1.6em; color: rgb(33,0,141);}
h3 {margin: 0 0 .5em 0; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-size: 1.3em;}
h4 {margin: 0 0 1.5em 0; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-size: 1.1em;}
h5 {margin: 0 0 1.5em 0; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-size: 1.1em; }
p {margin: 0 0 1em 0; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-size: 1.1em;}
a {font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-size: 1.1em; font-weight:normal;}

/* Styling the header section ==============================================================
==========================================================================================*/
.header {
		height:92px;
		background-color: rgba(241, 226, 209);
		background: url(../graphics/headerbackgroundimage.svg) no-repeat;
		background-size:100%;
		background-position: top center;
		}
.header a.headerimage {position: absolute;
	/*top: 25px;*/
	/*left: 50%; margin-left: -375px;*/
	/*right:0px;*/
	/*width: 750px;*/
	/*height: 300px;*/
	/*height: 53px;
	/*background: url(../graphics/montage.jpg) no-repeat;*/
	/*background:  url(../graphics/springgroup.gif) no-repeat;*/
	height: 92px;
	width:25%;
	left: 11%;
	background: url(../graphics/springgrouplogopurpleplain.svg) no-repeat;
	background-size: auto 90px;
	z-index:10; /*To appear above the navbar menu items*/
	}

/* This code will keep the header in place once the user starts scrolling, using JavaScript */
section.sticky {
	position: fixed;
	top: 0px;
	width:100%;
	z-index: 2; /* So that it appears in front of the rest of the webpage content */
	box-shadow: 0 1px 10px 0px rgb(128,96,165);
}

/* This adjusts the section below the header so that it doesn't jump up (once the position of the header
becomes 'fixed', the section below would jump to the top of the webpage)*/
.sticky + section {
	padding-top: 92px; /* Equal to the height of the header */
}
/*To ensure the publications navigation side bar doesn't jump: */
.sticky ~ section.publicationsnav {
	margin-top: -92px;
}



/* Styling the navigation bar ==============================================================
==========================================================================================*/
div.navbar {
		/*background-color: rgba(169, 169, 169);*/
		width: 100%;
		position: absolute; top: 45px;
		right:11%;
		margin-right: -20px; /* To move the Nav bar in line with the text on the pages*/
		}
    div.navbar::after { content:''; display: block; clear: both; }

	div.navbar ul {list-style: none; margin: auto;}

	div.navbar ul li {float:right; width: auto; padding:0 20px 0 20px; background-color: rgb(241, 226, 209);}
	
	div.navbar .davidspringlink {display: none;}
	
	div.navbar ul li.researchdropdown:hover + .research {display: block;}
	
	div.navbar ul li.membersdropdown:hover + .members {display: block;}

	div.navbar ul li a {display: block; color: black; text-align: center;
		padding: 10px 0 10px 0; text-decoration: none; font-size:1.3em;
		color: rgb(128,96,165); font-weight: 500; background-color: rgba(241, 226, 209, 1);
	}
		
	div.navbar ul li a:hover {
		color: rgb(33,0,141);
		transition: .2s;
	}
		
	/* If you want a hover effect:	
	nav ul li a:hover {
		background-color: #CB4F00;
		color: black;
		transition: .4s;
	}*/

/* Styling the sub-navigation menu for the research pages ================================
==========================================================================================*/
div.subnav {
	display:none; width: 200px;
	background-color: rgb(128,96,165);
	position: fixed;
	top: 91px; /* This needs to be the sum of the header height (90px) and the nav bar height (43px) */
	z-index: 1;
	box-shadow: 0 2px 5px 0px rgb(33,0,141);
		}
		
div.subnav ul {
	list-style: none;
	margin: 0px; padding: 0 0 0 0; 
	height: auto;
	}

div.subnav ul li {
	/*float:left;*/ width: 100%; padding: 0 0 0 0; margin: 0 0; background: none;
	}
	
div.subnav ul li a {
	display: block;
	color: white; text-align: left;
	padding: 10px 0 10px 0; text-decoration: none;
	font-size:1.1em; padding-left: 20px;
	background: none;
	}

div.subnav:hover {display: block;}

div.subnav ul li a:hover {
		background-color: rgb(113,61,173);
		transition: .4s;
		color: white;
	}

div.research {
	right: calc(11% + 384px); /* Brings it in line with the Research button*/
}

div.members {
	right: calc(11% + 118px); /* Brings it in line with the Members button*/
}

/* Styling the footer =====================================================================
==========================================================================================*/

section.generalinfo {
	width: 100%;
	height: 100px;
	background-color: rgb(241, 226, 209);
	}
section.generalinfo aside{
	width: 33%;
	height: 100px;
	float: left;
}
section.generalinfo aside.content{
	margin: 0 0 0 0;
}
section.generalinfo aside.unilink a{
	position: relative;
	top: 40px;
	margin-left: 33%; /* To keep it aligned left with the text */
	padding: 10 100;
	width: 300px;
	background: url(../graphics/cambridgelogobackground.jpg) no-repeat;
	background-size: auto 40px;
}

section.generalinfo aside.opportunitiespagelink {
	text-align: center;
}
section.generalinfo aside.opportunitiespagelink a{
	position: relative;
	color: rgb(128,96,165);
	text-decoration: none;
	top: 40px;
	font-size:1.3em;
}

section.generalinfo aside.twitterlink {
	text-align: center;
}

section.generalinfo aside.twitterlink a.twitterlogo{
	position: absolute;
	margin-top: 40px;
	height: 30px; width: 30px;
	background: url(../graphics/twitterlogoblack.png) no-repeat;
	background-size: contain;
}

section.generalinfo aside a:hover {
		color: rgb(33,0,141);
		transition: .2s;
	}


/*=========================================================================================
===========================================================================================
	STYLING OF INDIVIDUAL WEBPAGES
===========================================================================================
===========================================================================================*/

/* Styling the landing page ==============================================================
==========================================================================================*/
section.indexbody {
	height:435px; /* To fill the screen on my (Tom's) laptop with Chrome */
	background-color: rgb(255,255,255)/*rgba(33,0,141,0.2)*/;
	box-shadow: 0 1px 10px 0px rgb(128,96,165) inset;
}

#welcomeimage {
	background: url(../graphics/welcomeimage.svg) no-repeat;
	background-position: center;
	background-size: 1400px auto;
	background-position: center center;
	height:435px;
}

/*=========================================================================
==========================================================================*/

/* Styling Dave's biography page ==============================================================
==========================================================================================*/
section.biography {
	width: 100%;
	height: 600px;
}
div.biographytext {
	position: relative;
	top: 80px;
	right: 11%;
	width: 50%;
	float: right;
	text-align: justify;
}
aside.biographyphoto {
	position: relative;
	height: 430px;
	top: 40px;
	float: left;
	left: 11%;
	width: 308px;
	background: url(../graphics/drs5.jpg) no-repeat;
}

/* Styling the Research Pages ==============================================================
==========================================================================================*/

div.researchtextgeneral {
	position:relative; margin-top:40px;
	left: 11%;
	width: 78%;
	margin-bottom: 40px;
	text-align: justify;
	}
div.researchtextgeneral h5 {
	color: rgb(33,0,141);
	margin:15px 0 6px 0;
}

div.figure {
	margin-top: 20px;
	margin-bottom: 40px;
}

div.figurecaption {
	position: relative;
	width:750px;
	left:50%;
	margin-left: -375px;
	text-align: center;
	margin-top: -20px;
	margin-bottom: 40px;
}
	
/* Introductory Research Page==============================================================
==========================================================================================*/

section.researchintro {
	position:relative; margin-top:40px;
	width: 58%; /*Narrower than the rest of the text to accommodate the group poster on the right hand side*/
	left: 11%;
	text-align: justify;
	margin-bottom: 20px;
}

/*Here is the code for styling the group poster image, and the link to download the higher-res version*/
aside.groupposter {
	position: relative;
	float:right;
	right:11%;
	margin-top: -350px;
	height: 300px;
	width: 15%;
	background: url(../downloads/groupposter.svg) no-repeat;
	background-size: contain;
	background-position: center bottom;
	text-align: center;
}
.groupposter a {
	position: relative;
	top: 280px;
	text-decoration: none;
}

/* Setting the width of the section containing the links to the various sub-group pages */
section.researchtopics {
	height: 100px;
	width: 78%;
	margin-left: 11%;
}
/* Uses the CSS styling for the 'flex-container' div class, specified in the 'Group' subsection of this document */
div.mini {
	width:15.5%;
	float: left;
	height: 80px;
	margin: 0 0.5% 20px 0.5%;
	text-align: center;
	background-color: rgb(128,96,165);
	box-shadow: 0 1px 10px 0px rgb(128,96,165);
}
/*
section.commercialtopics {
	margin-top: 100px;
	margin-bottom: 40px;
}

div.sgccmini {
	width: 98%;  To get it to align with the commercial topics, it must take into account the following
	details: Each mini has width 48%, spaced evenly (therefore 2% separation between them. 48*2 +2 = 98%
	margin-top:8px;
	padding: 50px 0 50px 0;
	background-color: rgb(128,96,165);
	text-align: center;
	box-shadow: 0 1px 10px 0px rgb(128,96,165);
}

div.sgccmini a{
	color: black;
	font-size: 1.5em;
	text-decoration: none;
}*/

div.mini a{
	line-height: 40px; /*Puts the text in the centre of the boxes*/
	color: white;
	font-size: 1.1em;
	text-decoration: none;
	background-color: rgba(113,61,173,0.5);
	box-shadow: 0 0 2px 2px rgba(113,61,173,0.5);
}

div.sgccmini a { /*To centre the text of this box, given it spills over multiple lines*/
	position: relative;
	top:0px;
	line-height: 1.5;
	display: inline-block;
	vertical-align: middle;
	box-shadow: 0 0 0px 0px rgba(113,61,173,0.5);
}


/* The following contains the code to put in the images into the links on the research page*/
div.biotherapeuticsmini {
	background: url(../graphics/researchbiotherapeutics.svg) no-repeat;
	background-size: cover;
	background-position: left bottom;
}

div.peptidesmini {
	background: url(../graphics/researchpeptides.svg) no-repeat;
	background-size: cover;
	background-position: left bottom;
}

div.methodologymini {
	background: url(../graphics/researchmethodology.svg) no-repeat;
	background-size: cover;
	background-position: right bottom;
}

div.antibioticsmini {
	background: url(../graphics/researchantibiotics.svg) no-repeat;
	background-size: cover;
	background-position: left top;
}

div.spinoutsmini {
	background: url(../graphics/researchspinouts.svg) no-repeat;
	background-size: cover;
	background-position:right bottom;
}

/*div.pep2smartmini {
	background: url(../graphics/jessica_iegre-photo.png) no-repeat;
	background-size: 100% auto;
}*/

div.sgccmini {
	background: url(../graphics/researchsgcc.svg) no-repeat;
	background-size: cover;
	background-position: right top;
}
/*=========================================================================================*/


/* Formatting the individual research pages: ==============================================*/

	
/* Therapeutics ==========================================================================
==========================================================================================*/

div.biotherapeuticsfig {
	position: relative;
	left: 10%;
	margin-left: 0;
	height: 450px;
	width: 80%;
	background: url(../graphics/biotherapeuticssubgroupfig2020.png) no-repeat;
	background-size: 100% auto;
	/*background-color: blue;*/
}

/* Peptides ==============================================================================
==========================================================================================*/

div.peptidesfig {
	position: relative;
	left: 10%;
	margin-left: 0;
	height: 520px;
	width: 80%;
	background: url(../graphics/peptidessubgroupfig2020.png) no-repeat;
	background-size: 100% auto;
	/*background-color: blue;*/
}

/* Methodology ============================================================================
==========================================================================================*/

div.methodologyfig {
	position: relative;
	left:10%;
	margin-left: 0;
	height: 520px ;
	width: 80%;
	background: url(../graphics/methodologysubgroupfig2020.png) no-repeat;
	background-size: 100% auto;
	/*background-color: blue;*/
}
/* Antibiotics ===========================================================================
==========================================================================================*/

div.antibioticsfig {
	position: relative;
	left:50%;
	margin-left: -300px;
	height: 300px ;
	width: 600px;
	background: url(../graphics/antibioticsfighighres.png) no-repeat;
	background-size: auto 300px;
	/*background-color: blue;*/
}

/* Spin-outs ===============================================================================
==========================================================================================*/
a.pharmenable {
	position:absolute;
	height:80px;
	width:326px;
	background: url(../graphics/Pharmenable.png) no-repeat;	
	background-size: auto 80px;
}

div.pharmenablediv {
	padding-top:90px;
}

div.pep2smartdiv a{
	text-decoration: none;
	font-size: 1.8em;
}
/* Compound Library ==========================================================================
==========================================================================================*/

div.sgccfig {
	position: relative;
	left:50%;
	margin-left: -200px;
	height: 400px ;
	width: 400px;
	background: url(../graphics/sgccfig.svg) no-repeat;
	background-size: auto 400px;
}

/*=========================================================================================
==========================================================================================*/



/* Styling the Publications Page ==============================================================
==========================================================================================*/

/*Styling the mini nav bar*/
section.publicationsnav {
	position: fixed;
	left: 0px;
	width: 21%;
	top: 300px;
	text-align: center;
}

section.publicationsnav a {
	color:  rgb(128,96,165);
	font-weight: bold;
	font-size: 1.6em;
	margin: 0 40px 0 40px;
	text-decoration: none;
}

section.publicationsnav a:hover {
	color: rgb(33,0,141);
}


section.publicationslist {
	width:68%;
	margin-left:21%;
	margin-top: 40px;
	margin-bottom: 10px;
	text-align: justify;
}

/*To ensure that the links to scroll down the page don't put the headings underneath the header*/
.publicationslist h2 {
	margin: -120px 0 0 0;
	padding: 120px 0px 20px 0px;
}

.publicationstable td {
	padding-bottom: 20px;
	vertical-align: top; 
}

.publicationstable {
	table-layout: auto;
	margin-bottom: 40px;
}
/*aside.thesisimage {
	position: fixed;
	top: 210px;
	left: 10px;
}*/

/* Styling the Group Page ==============================================================
==========================================================================================*/

section.groupimages {
	margin-top: 40px;
	width: 50%;
	margin-left:50%;
	height: 390px;
}

#myenclosing {
	position: absolute;
	left:-375px;
	text-align: center;
}

#selectionbuttons {position: absolute;
	top: 527px;
	left:49%;
}

section.groupmembers {
	width: 78%;
	margin-left: 11%;
	margin-top: 10px;
	height: 450px;
}

/*Used to produce the lists of names, which should all fit into a single view =======*/
section.memberlist {
	display: inline-block;
	margin-top:30px;
	float: left;
	width: 25%;
}

section.phdlist {
	width:49%;
}

#phdnames {
	column-count: 2;
	column-gap: 0px;
}
/*=====================================================================================*/


/*Styling the headers*/
section.groupmembers h5 {
	clear: left;
	padding-top: 30px;
	font-size: 2em;
	text-align:center;
	margin-bottom: 10px;
}
/*Styling for the line of text: "There are currenty X members of the Spring Group" */
section.groupmembers h3 {
	margin-top: 30px;
	clear: left;
	text-align:center;
}

/* Styling to make images of the individuals appear upon hovering over their name */
/* Code for the popout box */
div.popout {
	visibility: hidden;
	position: absolute;
	margin-left: 180px;
	margin-top: -110px;
	height: 225px;
	width:150px;
	border: 3px solid rgb(33,0,141);
	box-shadow: -4px 4px 3px 0px rgb(128,96,165);
	z-index: 1; /*To bring the popout in front of the text */
}

a.individual {
	position: relative;
}

a.individual:hover {
	color: rgb(33,0,141);
}

a.individual:hover + div.popout {
	visibility: visible;
}


/*The following code was used to input landscape images of the members of the group
on the group page.

.flex-container {
	display: flex;
	width: 80%;
	margin-left:10%;
	flex-wrap: wrap;
	justify-content:space-evenly;
}

.individual {
	width: 200px;
	height: 20px;
	padding-top: 130px;
	text-align: center;
}

.individual a {text-decoration: none}

div.image {
	margin-top:-130px;
	width:150px;
	height: 100px;
	margin-bottom: 10px;
	margin-left: 25px;
}*/


/* Here is the code to insert the appropriate image (landscape) in each box 
===========================================================================
=========================================================================*/
/* COMEHEREFORTHEPORTRAITS */

div.AndrewCounsellimage {
	background: url(../graphics/AndrewCounsellportrait.jpg) no-repeat;
	background-size: 100% auto;
}

div.BethCooperimage {
	background: url(../graphics/BethCooperportrait.jpg) no-repeat;
	background-size: 100% auto;
}

div.EleanorAtkinsonimage {
	background: url(../graphics/EleanorAtkinsonportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2021 were shorter than previous photos, so need to be set to auto width*/
}

div.JackSydenhamimage {
	background: url(../graphics/JackSydenhamportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2021 were shorter than previous photos, so need to be set to auto width*/
}

div.JiraborrirakCharoenpattarapreedaimage {
	background: url(../graphics/JiraborrirakCharoenpattarapreedaportrait.jpg) no-repeat;
	background-size: 100% auto;
}

div.JonathanBarghimage {
	background: url(../graphics/JonathanBarghportrait.jpg) no-repeat;
	background-size: 100% auto;
}

div.KristinaKostadinovaimage {
	background: url(../graphics/KristinaKostadinovaportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2022 were shorter than previous photos, so need to be set to auto width*/
}

div.LukeParryimage {
	background: url(../graphics/LukeParryportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2021 were shorter than previous photos, so need to be set to auto width*/
}

div.NicolaAshmanimage {
	background: url(../graphics/NicolaAshmanportrait.jpg) no-repeat;
	background-size: 100% auto;
}

div.PeterCurranimage {
	background-color: white/*url(../graphics/PeterCurranportrait.jpg) no-repeat;
	background-size: 100% auto;*/
}

div.SophieDay-Rileyimage {
	background: url(../graphics/SophieDay-Rileyportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2021 were shorter than previous photos, so need to be set to auto width*/
}
div.RaduBizgaimage {
	background: url(../graphics/RaduBizgaportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.RebeccaRevieimage {
	background: url(../graphics/RebeccaRevieportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2021 were shorter than previous photos, so need to be set to auto width*/
}
div.RebekahWestimage {
	background: url(../graphics/RebekahWestportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2021 were shorter than previous photos, so need to be set to auto width*/
}
div.TillyJoyceimage {
	background: url(../graphics/TillyJoyceportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2021 were shorter than previous photos, so need to be set to auto width*/
}
div.TimSchoberimage {
	background: url(../graphics/TimSchoberportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2021 were shorter than previous photos, so need to be set to auto width*/
}
div.FriederikeDannheimimage {
	background: url(../graphics/FriederikeDannheimportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.TomasDeingruberimage {
	background: url(../graphics/TomasDeingruberportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2021 were shorter than previous photos, so need to be set to auto width*/
}
div.ElaineFowlerimage {
	background: url(../graphics/ElaineFowlerportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.JosephineGaynordimage {
	background: url(../graphics/JosephineGaynordportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.AbigailHanbyimage {
	background: url(../graphics/AbigailHanbyportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.AnnaIampolskaimage {
	background: url(../graphics/AnnaIampolskaportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in July 2022 were shorter than previous photos, so need to be set to auto width*/
}
div.JiyanKandemirimage {
	background: url(../graphics/JiyanKandemirportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.MiaKapunimage {
	background: url(../graphics/MiaKapunportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in December 2020 were shorter than previous photos, so need to be set to auto width*/
}
div.TomKingimage {
	background: url(../graphics/TomKingportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2021 were shorter than previous photos, so need to be set to auto width*/
}
div.SonaKrajcovicovaimage {
	background: url(../graphics/SonaKrajcovicovaportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in July 2022 were shorter than previous photos, so need to be set to auto width*/
}
div.TinaLeontidouimage {
	background: url(../graphics/TinaLeontidouportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in July 2022 were shorter than previous photos, so need to be set to auto width*/
}
div.XiaoxuOuimage {
	background: url(../graphics/XiaoxuOuportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.MahriParkimage {
	background: url(../graphics/MahriParkportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in December 2020 were shorter than previous photos, so need to be set to auto width*/
}
div.MaraiaPickeringimage {
	background: url(../graphics/MaraiaPickeringportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.PoppyMartinimage {
	background: url(../graphics/PoppyMartinportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2021 were shorter than previous photos, so need to be set to auto width*/
}
div.HarryConveyimage {
	background: url(../graphics/HarryConveyportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in November 2021 were shorter than previous photos, so need to be set to auto width*/
}
div.HikaruSekiimage {
	background: url(../graphics/HikaruSekiportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in December 2020 were shorter than previous photos, so need to be set to auto width*/
}
div.HaGanimage { /*The space in Bee Ha's first name will be included when the Perl script runs*/
	background: url(../graphics/BeeHaGanportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.Hansenimage { /*The space in Anders's surname name will be included when the Perl script runs*/
	background: url(../graphics/AndersHojgaardHansenportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.JessicaIegreimage {
	background: url(../graphics/JessicaIegreportrait.png) no-repeat;
	background-size: 100% auto;
}
div.KimMortensenimage {
	background: url(../graphics/KimMortensenportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.JaviPerez-Arealesimage {
	background: url(../graphics/JaviPerez-Arealesportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.NaomiRobertsonimage {
	background: url(../graphics/NaomiRobertsonportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.HannahSoreimage {
	background: url(../graphics/HannahSoreportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.YuriTakadaimage {
	background: url(../graphics/YuriTakadaportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.StephenWalshimage {
	background: url(../graphics/StephenWalshportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.RaoulWaltherimage {
	background: url(../graphics/RaoulWaltherportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.ThomasWhartonimage {
	background: url(../graphics/ThomasWhartonportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in December 2020 were shorter than previous photos, so need to be set to auto width*/
}
div.AbbieCurringtonimage {
	background: url(../graphics/AbbieCurringtonportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.NinaAllenimage {
	background: url(../graphics/NinaAllenportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in December 2020 were shorter than previous photos, so need to be set to auto width*/
}
div.EilidhBodfishimage {
	background: url(../graphics/EilidhBodfishportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in December 2020 were shorter than previous photos, so need to be set to auto width*/
}
div.NathanaelSmalleyimage {
	background: url(../graphics/NathanaelSmalleyportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in December 2020 were shorter than previous photos, so need to be set to auto width*/
}
div.BenSawyerimage {
	background: url(../graphics/BenSawyerportrait.jpg) no-repeat;
	background-size: auto 100%; /*Those photos taken in December 2020 were shorter than previous photos, so need to be set to auto width*/
}
div.SarahPhillipsimage {
	background: url(../graphics/SarahPhillipsportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.RoshanPatelimage {
	background: url(../graphics/RoshanPatelPortrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.PeterRukovanskyimage {
	background: url(../graphics/PeterRukovanskyPortrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.LingchenLiimage {
	background: url(../graphics/LingchenLiportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.FernandaGadini-Finelliimage {
	background: url(../graphics/FernandaGadini-Finelliportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.LinweiZengimage {
	background: url(../graphics/LinweiZengportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.StuartAstleimage {
	background: url(../graphics/StuartAstleportrait.jpg) no-repeat;
	background-size: 100% auto;
}
div.KeithLoiimage {
	background: url(../graphics/KeithLoiportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.AryamanSokhalimage {
	background: url(../graphics/AryamanSokhalportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.JanVenneimage {
	background: url(../graphics/JanVenneportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.DariaWanicimage {
	background: url(../graphics/DariaWanicportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.TianyiYangimage {
	background: url(../graphics/TianyiYangportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.AlexRowleyimage {
	background: url(../graphics/AlexRowleyportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.AmalieGudumimage {
	background: url(../graphics/AmalieGudumportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.IuliiaBakanovchimage {
	background: url(../graphics/IuliiaBakanovchportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.SaanVossimage {
	background: url(../graphics/SaanVossportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.JoshuaAbioyeimage {
	background: url(../graphics/JoshuaAbioyeportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.GeorgieBonneyimage {
	background: url(../graphics/GeorgieBonneyportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.SophieIveyimage {
	background: url(../graphics/SophieIveyportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.AhmedEl-Bouhyimage {
	background: url(../graphics/AhmedEl-Bouhyportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.XinmingNiimage {
	background: url(../graphics/XinmingNiportrait.jpg) no-repeat;
	background-size: auto 100%;
}
div.OliviaTangimage {
	background: url(../graphics/OliviaTangportrait.jpg) no-repeat;
        background-size: auto 100%;
}
div.EtienneBonvinimage {
        background: url(../graphics/EtienneBonvinportrait.jpg) no-repeat;
        background-size: auto 100%;
}
div.JackSutroimage {
        background: url(../graphics/JackSutroportrait.jpg) no-repeat;
        background-size: auto 100%;
}
div.MonikaKijewskaimage {
        background: url(../graphics/MonikaKijewskaportrait.jpg) no-repeat;
        background-size: auto 100%;
}
div.XXXXXimage {
        background: url(../graphics/XXXXXportrait.jpg) no-repeat;
        background-size: auto 100%;
}



/* END OF INDIVIDUAL IMAGES SECTION =========================================
===========================================================================*/

section.labcontactdetails {
	margin-left: 11%;
	width: 78%;
}

section.pastmembers {
	margin-left: 11%;
	width: 78%;
}

section.pastmembers a {
	font-size: 1em;
	text-decoration: none;
}

/* Styling the Past Group page ==============================================================
==========================================================================================*/
section.pastgroupdetails {
	position:relative; margin-top:40px;
	width:78%;
	margin-left:11%;
	margin-bottom: 40px;
	text-align: justify;
	}
}

#pastgroupintro a {
	text-decoration:none;
	font-size: 1.0em;
}

div.pastgrouptable {
	width:100%;
	overflow-x:visible;
}

table {
	width:100%;
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	border-collapse: collapse;
	table-layout: fixed;
	overflow-x:visible;
}

table td, table th {
	padding: 8px;
}

table tr:nth-child(even){
	background-color: rgb(240,240,240);
}

table th {
	text-align:left;
	font-size:1.2em;
	font-weight: normal;
	/*border-bottom: 2px solid black;
	border-top: 2px solid black;*/
	background-color:rgb(128,96,165);
	color: white;
}

table a {
	text-decoration:none;
}

/* Styling the Contacts Page ==============================================================
==========================================================================================*/
section.contactdetails {
	width: 100%;
	height: 620px;
}

div.googlemaps {
	position: relative;
	top: 85px; /* This brings it out of range of the research subnavigation dropdown*/
	margin-left:10%;
}

div.contacttext {
	text-align: center;
	width: 30%;
	left: 35%;
	position: relative;
	top: -419px; /*To bring the text up, as it is relative to where the bottom of the googlemaps insert
		would have been if it hadn't been offset.*/
}

aside.fountain {
	position: absolute;
	top: 170px; /*To bring the image down. Needed to be done this way as to make it relative pushed all
		of the general info section off the bottom of the page.*/
	height: 459px;
	float: right;
	right: 10%;
	width: 310px;
	background: url(../graphics/trinity-fountain.jpg) no-repeat;
}
	

/* Styling the Links Page */

/* Probably won't be part of the new website */

/* Styling the Opportunities Page ==============================================================
==========================================================================================*/
section.opportunitiespage {
	width: 100%;
	height: 1040px; /* = Without the video (390px), this was set to 650px. */
}

div.opportunitiestext {
	position: relative;
	top: 40px;
	left: 11%;
	width: 50%;
	float: left;
	text-align: justify;
}

/* Code for styling the virtual open day video */
div.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  margin-bottom: 20px;
  border: none;
}

iframe.virtualopendayvid {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

div.opportunitiestext a {
	font-size: 1.0em;
}

div.opportunitiestext h5 {
	margin-bottom:5px;
	color: rgb(33,0,141);
}

aside.drschemistry {
	position: relative;
	height: 430px;
	top: 80px;
	float: right;
	right: 11%;
	width: 308px;
	background: url(../graphics/drschem.jpg) no-repeat;
}


/* Styling the Conference page ==============================================================
==========================================================================================*/
section.conferencedetails {
	width: 100%;
	height: 620px;
}

/*
aside.conferencephoto1{
	position: relative;
	height: 430px;
	top: 20px;
	float: left;
	left: 7%;
	width: 308px;
	background: url(../graphics/drs5.jpg) no-repeat;
}
*/


div.conferencetitle{
	text-align: center;
	width: 100%;
	position: relative;
	top: 10px;
	font-size: 2.0em;
}

div.basicinfo{
	/*margin-left:35%;*/
	margin-left:10%;
	text-align: center;
	/*width: 60%;*/
	width: 80%;
	position: relative;
	margin-top: 50px;
	margin-bottom: 100px;
}

a.googleform{
	text-decoration:none;
	font-size: 1.0em;
}

div.groupphotocollage2023conf {
	position: relative;
	height: 520px;
	width: 100%;
	background: url(/graphics/GroupPhotoCollage2023Conf.png) no-repeat;
	background-size: 100% auto;
}



/* Media Queries =================================================================================
==================================================================================================
=================================================================================================*/

/* Ensuring the group poster doesn't ride up too high when the window is enlarged*/
@media screen and (min-width: 1400px) {
	aside.groupposter {
		margin-top: -265px;
		height: 250px;
	}
	.groupposter a {
		top: 225px;
	}
	
	div.groupphotocollage2023conf {
		height: 650px;
	}
}


/* The website should expand to fill larger screens, so larger screens shouldn't be a problem */

@media screen and (min-width:1346px){
	div.sgccmini a { 
		position: relative; /*To re-centre the text of this box*/
		top: 14px;
	}
}

@media screen and (min-width:1300px){
	div.biotherapeuticsfig{
		width:800px;
		left:50%;
		margin-left:-400px;
	}
	div.peptidesfig{
		width:800px;
		left:50%;
		margin-left:-400px;
	}
	div.methodologyfig{
		width:800px;
		left:50%;
		margin-left:-400px;
	}
	
	div.groupphotocollage2023conf {
		height: 600px;
	}
}

/* Reducing the side margins on the website for smaller screens */
@media screen and (max-width:1125px) {
	.header a.headerimage {
		left: 7%; /*Setting new margins*/
		width: 240px;
	}
	
	/*Re-aligning the nav bar with the new margins */
	div.navbar {
		right:7%;
	}
	div.research {
		right: calc(7% + 384px); /* Brings it in line with the Research button*/
	}
	div.members {
		right: calc(7% + 118px); /* Brings it in line with the Members button*/
	}
	
	/*Resetting margins on Dave Spring biography page*/
	div.biographytext {
		right: 7%;
	}
	aside.biographyphoto {
		left: 7%;
	}
	
	/*Resetting the margins on the Research pages */
	section.researchintro {
		width: 68%; /*Narrowed to accommodate the group poster to it's right */
		left: 7%;
	}
	/*Adjusting the styling on the poster to keep the text close by and the positioning reasonable*/
	aside.groupposter {
		right:7%;
		margin-top: -350px;
		height: 250px;
	}
	.groupposter a {
		top: 230px;
	}
	section.researchtopics {
		width: 86%;
		margin-left: 7%;
	}
	div.researchtextgeneral {
		left: 7%;
		width: 86%;
	}
	div.sgccmini a { 
		position: relative; /*To re-centre the text of this box*/
		top: 0px;
	}
	
	/*Resetting margins on the contacts page*/
	div.googlemaps {
		margin-left:7%;
	}
	aside.fountain {
		right: 7%;
	}
	
	/*Resetting margins on opportunities page*/
	div.opportunitiestext {
		left: 7%;
		width: 45%;
	}
	aside.drschemistry {
		right: 7%;
	}
	
	/* Resetting margins on the conference page*/
	/*div.basicinfo{
		width: 50%;
		margin-left: 45%;
		margin-top: 50px;
	}*/
/*	aside.conferencephoto1{
		left: 5%;
	}*/

}

/*Removing the nav bar when it would overlap with the Spring Group logo */

@media screen and (max-width:975px) {
	
	/*Making sure the header doesn't shrink unreasonably small*/
	.header {
		height:90px;
		background-color: rgba(241, 226, 209);
		background: url(../graphics/headerbackgroundimage.svg) no-repeat;
		background-size:975px;
		background-position: top center;
		}
		
	/*Dealing with the navigation bar ================================================*/
	div.navbar ul {transform:rotate(180deg);}
	div.navbar ul li {display:none; background-color:none;transform:rotate(180deg);}
	div.navbar .dropdownicon {
		display:block;
		position:relative;
		float:right;
		margin-right:7%;
		top: -10px;
		background: url(../graphics/dropdownbuttonlight.svg) no-repeat;
		background-size:contain;
		height:30px; width: 30px;
		z-index: 3;
	}
	div.navbar.responsive {
		z-index:1;
		position:absolute;
		top:92px;
		height:280px;
		width: 100%;
		right: 0px;
		margin: 0 0;
		padding: 0 0;
		background-color:rgb(128,96,165);
		box-shadow: 0 2px 5px 0px rgb(33,0,141);
	}
	div.navbar.responsive .dropdownicon {
		position: relative;
		top: -331px; /*To make sure it stays in the same place when the navigation opens */
	}
	div.navbar.responsive ul {
		padding: 0 20px 0 20px;
	}
	div.navbar.responsive ul li {
		/*transform: rotate(-180deg);*/
		float:none; display: block;
		padding: 0 0;
	}
	div.navbar.responsive ul li a {
		color: white;
		margin: 0 0;
		background-color:rgb(128,96,165);
	}
	
	div.navbar.responsive ul li.researchdropdown:hover + .research {display: none;}
	
	div.navbar.responsive ul li.membersdropdown:hover + .members {display: none;}
	
	/* Given that I have removed the subnav from the responsive website, we won't need this ========
	div.navbar.responsive .subnav {
		display:none; width: 100%;
		background-color: rgb(241, 226, 209);
		position: relative;
		top: 0;
		z-index: 2;
		box-shadow: 0 -1px 2px 0px rgb(33,0,141);
	}
	div.navbar ul li a:hover {
		background-color: rgb(113,61,173);
		transition: .4s;
	}
	
	div.navbar ul li.membersdropdown:active + .members {display: block;}
	
	.responsive .research {
		right: 0;
	}
	.responsive .members {
		right: 0;
	}
	==================================================================================================*/
	
	section.generalinfo aside.unilink a{
		position: relative;
		top: 45px;
		margin-left: 33%; /* To keep it aligned left with the text */
		padding: 10 100;
		width: 250px;
		background: url(../graphics/cambridgelogobackground.jpg) no-repeat;
		background-size: auto 30px;
	}
	
	/* Re-styling Dave's biography page ==============================================================
	==========================================================================================*/
	section.biography {
		width: 100%;
		height: 640px;
	}
	div.biographytext {
		top: 40px;
	}
	aside.biographyphoto {
		position: relative;
		height: 430px;
		top: 40px;
		width: 200px;
		background: url(../graphics/drs5.jpg) no-repeat;
		background-size:contain;
	}
	
	/*Dealing with the research page */
	
	aside.groupposter {
		margin-top: -370px;
		height: 200px;
	}
	.groupposter a {
		top: 180px;
	}
	
	section.researchtopics {
		height: 200px;
	}
	div.mini {
		width:30%;
		float: left;
		height: 80px;
		margin: 0 1.5% 20px 1.5%;
		text-align: center;
		background-color: rgb(128,96,165);
		box-shadow: 0 1px 10px 0px rgb(128,96,165);
	}
	div.sgccmini a { 
		position: relative; /*To re-centre the text of this box*/
		top: 14px;
	}
	
	div.researchtextgeneral {
		left: 7%;
		width: 86%;
	}
	div.figurecaption {
		width:100%;
		margin-left:-50%;
	}
	
	div.peptidesfig {
		/*margin-left: -300px;*/
		height: 420px ;
		/*width: 600px;
		background: url(../graphics/peptidessubgroupfig2020.png) no-repeat;
		background-size: 600px auto;*/
	}
	div.methodologyfig {
		/*margin-left: -300px;*/
		height: 430px ;
		/*width: 600px;
		background: url(../graphics/methodologysubgroupfig2020.png) no-repeat;
		background-size: 600px auto;*/
	}
	
	/*Re-styling the publications page*/
	section.publicationsnav a {
		color:  rgb(128,96,165);
		font-weight: bold;
		margin: 0 20px 0 20px;
		text-decoration: none;
	}
	
	/*Re-styling the group page*/
	section.groupmembers {
		width: 86%;
		margin-left: 7%;
		margin-top: 10px;
		height: 650px;
	}

	/*Used to move the lists of names, so that they lie vertically =======*/
	section.memberlist {
		display: inline-block;
		margin-top:30px;
		float: none;
		width: 100%;
		text-align: center;
	}
	
	#postdocnames {
		column-count: 3;
		column-gap: 0px;
	}

	#phdnames {
		column-count: 3;
		column-gap: 0px;
	}
	
	div.popout {
		visibility: hidden;
		position: absolute;
		margin-left: 55px;/*So that the popouts now appear below the name, rather than to the side*/
		margin-top: 10px;
		height: 225px;
		width:150px;
		border: 3px solid rgb(33,0,141);
		box-shadow: -4px 4px 3px 0px rgb(128,96,165);
		z-index: 1; /*To bring the popout in front of the text */
	}
	.undergradlist .popout {
		visibility: hidden;
		position: absolute;
		margin-left: 330px;/*So that the popouts now appear below the name, rather than to the side*/
		margin-top: 10px;
		height: 225px;
		width:150px;
		border: 3px solid rgb(33,0,141);
		box-shadow: -4px 4px 3px 0px rgb(128,96,165);
		z-index: 1; /*To bring the popout in front of the text */
	}
	
	/*Re-styling the contacts page*/
	div.googlemaps {
		margin-left:7%;
	}
	div.contacttext {
		width: 60%;
		float:right;
		left: 0%;
	}
	
	aside.fountain {
		display:none;
	}
	
	/*Extending the height of the opportunities page*/
	section.opportunitiespage {
		height: 1040px;
	}
	
	
	/*Reducing the size of the conference title and making Dave smaller*/
	div.conferencetitle{
		text-align: center;
		width: 100%;
		position: relative;
		top: 15px;
		font-size: 1.6em;
	}
	/*div.basicinfo{
		width: 60%;
		margin-left: 35%;
		margin-top: 50px;
	}*/

	/*aside.conferencephoto1{
		position: relative;
		height: 430px;
		width: 200px;
		background: url(../graphics/drs5.jpg) no-repeat;
		background-size:contain;
	}*/
	
	div.groupphotocollage2023conf {
		height: 450px;
	}
	
}

/*Reducing the size of the margins of the publications navigation buttons to make them fit each
on a single line, and moving the google maps image below the contact details text */
@media screen and (max-width:757px) {
	/*Removing the publications nav bar*/
	section.publicationsnav {
		display: none;
	}
	
	section.publicationslist {
		width:86%;
		margin-left:7%;
	}
	
	/*Re-styling the positioning of the group poster*/
	aside.groupposter {
		position: relative;
		margin-top: -450px;
		height: 180px;
	}
	.groupposter a {
		top: 165px;
	}
	
	/*Group page changes - making the group image smaller*/
	section.groupimages {
		margin-top: 40px;
		width: 50%;
		margin-left:50%;
		height: 340px;
	}

	#myenclosing {
		left:-300px;
	}

	#selectionbuttons {position: absolute;
		top: 430px;
	}
	#myenclosing .groupimage { /*This class tag is on the img in the html*/
		width: 600px;
	}
	
	/*Contact details changes*/
	section.contactdetails {
		width: 100%;
		height: 1120px;
	}

	div.googlemaps {
		position: relative;
		top: 585px; /* This brings it out of range of the research subnavigation dropdown*/
		left:50%;
		margin-left: -155px;
	}

	div.contacttext {
		text-align: center;
		width: 100%;
		float:none;
		position: relative;
		top: -419px; /*To bring the text up, as it is relative to where the bottom of the googlemaps insert
		would have been if it hadn't been offset.*/
	}
	
	/*Restyling opportunities page*/
	section.opportunitiespage {
		width: 100%;
		height: 1070px;
	}
	aside.drschemistry {
		width: 200px;
		background: url(../graphics/drschem.jpg) no-repeat;
		background-size:200px auto;
	}
	
	/*Resizing the conference title*/
	div.conferencetitle{
		top: 30px;
		font-size: 1.2em;
	}
	
	div.groupphotocollage2023conf {
		height: 350px;
	}
}


/* Re-styling for iPad sized devices. This is where I'm making major changes to styling. Those made to 
accommodate mobiles should mainly be changes in font sizes and div heights.===========================*/
@media screen and (max-width:650px) {
	
	/*Adjusting the index page image*/
	section.indexbody {
		height:400px; /* To fill the screen*/
	}
	#welcomeimage {
		background: url(../graphics/welcomeimage.svg) no-repeat;
		background-size: 1200px auto;
		background-position: center center;
		height:400px;
	}
	
	/*Adjusting the footer */
	section.generalinfo aside.unilink a{
		position: relative;
		top: 50px;
		width: 150px;
		background: url(../graphics/cambridgelogobackground.jpg) no-repeat;
		background-size: auto 20px;
	}
	
	section.generalinfo aside.twitterlink a.twitterlogo{
		position: absolute;
		margin-top: 40px;
		height: 20px; width: 20px;
		background: url(../graphics/twitterlogoblack.png) no-repeat;
		background-size: contain;
	}
	
	/* Re-styling Dave's biography page ==============================================================
	==========================================================================================*/
	section.biography {
		width: 100%;
		height: 950px;
	}
	aside.biographyphoto {
		float: none;
		width: 75%;
		left: 50%;
		margin-left: -100px;
		background: url(../graphics/drs5.jpg) no-repeat;
		background-size: 200px auto;
	}
	div.biographytext {
		position:absolute;
		top: 450px;
		width: 80%;
		float: none;
	}
	
	section.researchintro {
		width: 86%; /* Widening the text section as the group poster now sits beneath it*/
		left: 7%;
	}
	/*Re-styling the positioning of the group poster*/
	aside.groupposter {
		position: relative;
		float:none; /*Placing the group poster beneath the main body of text*/
		left:50%;
		margin-top: 0;
		margin-left: -150px;
		height: 300px;
		width: 300px;
		padding-bottom: 40px;
		margin-bottom: 20px;
	}
	.groupposter a {
		top: 310px;
	}
	
	/*Reducing the size of images on the research pages*/
	div.biotherapeuticsfig {
		left: 5%;
		height: 270px ;
		width: 90%;
		/*background: url(../graphics/biotherapeuticssubgroupfig2020.png) no-repeat;
		background-size: 450px auto;*/
	}
	div.peptidesfig {
		/*margin-left: -225px;*/
		left: 5%;
		height: 320px ;
		width: 90%;
		/*background: url(../graphics/peptidessubgroupfig2020.png) no-repeat;
		background-size: 450px auto;*/
	}
	div.methodologyfig {
		/*margin-left: -225px;*/
		left: 5%;
		height: 320px ;
		width: 90%;
		/*background: url(../graphics/methodologysubgroupfig2020fig.png) no-repeat;
		background-size: 450px auto;*/
	}
	div.antibioticsfig {
		margin-left: -225px;
		height: 240px ;
		width: 450px;
		background: url(../graphics/antibioticsfighighres.png) no-repeat;
		background-size: 450px auto;
	}
	
	/*Adjusting the size of the group photo*/
	section.groupimages {
		margin-top: 40px;
		width: 100%;
		margin-left:50%;
		height: 340px;
	}
	#myenclosing {
		left:-50%;
	}
	#selectionbuttons {position: absolute;
		top: 445px;
	}
	#myenclosing .groupimage { /*This class tag is on the img in the html*/
		width: 100%;
	}
	
	
	/*Restyling the conference page*/
	/*aside.conferencephoto1{
		float: none;
		left: 50%;
		width: 75%;
		margin-left: -100px;
		background: url(../graphics/drs5.jpg) no-repeat;
		background-size: 200px auto;
	}*/
	div.conferencetitle{
		top: 30px;
		font-size: 1em;
	}
	/*section.conferenceinformation{
		height:1000px;
	}*/
	/*div.basicinfo{
		position: absolute;
		top: 400px;
		width: 80%;
		float: none;
		margin-left: 10%;
		margin-top: 0px;
	}*/
	
	
}

@media screen and (max-width:639px) {
	div.sgccmini a { 
		position: relative; /*To re-centre the text of this box*/
		top: 0px;
	}
}

/*This is the point at which the image overlaps the text on the opportunities page*/
@media screen and (max-width:535px) {
	/*Keeping the selection buttons close to the group image as it gets smaller*/
	section.groupimages {
		margin-top: 40px;
		width: 100%;
		margin-left:50%;
		height: 300px;
	}
	#selectionbuttons {position: absolute;
		top: 395px;
	}
	section.groupmembers {
		height: 1150px; /*Making the section longer, to fit in the vertical list of members*/
	}
	#postdocnames {
		column-count: 1; /*Moving to a single, vertical list*/
	}
	#phdnames {
		column-count: 1;
	}
	
	/*Adjusting the opportunities page*/
	section.opportunitiespage {
		width: 100%;
		height: 1240px;
	}

	div.opportunitiestext {
		top: 40px;
		left: 7%;
		width: 86%;
		float: none;
	}
	aside.drschemistry {
		top: 40px;
		float: none;
		left: 50%;
		margin-left:-100px;
		width: 200px;
		background: url(../graphics/drschem.jpg) no-repeat;
		background-size: 200px auto;
	}
	
	div.groupphotocollage2023conf {
		height: 300px;
	}
}

/*This is the point at which the footer starts to overlap, even with the smaller icons*/
@media screen and (max-width:480px) {
	section.generalinfo {
		width: 100%;
		height: 150px;
		background-color: rgb(241, 226, 209);
	}
	section.generalinfo aside{
		width: 100%;
		height: 50px;
		float: none;
	}
	section.generalinfo aside.unilink a{
		position: relative;
		top: 100px;
		left: -25%;
		width: 150px;
		background: url(../graphics/cambridgelogobackground.jpg) no-repeat;
		background-size: auto 30px;
	}

	section.generalinfo aside.opportunitiespagelink {
		text-align: center;
	}
	section.generalinfo aside.opportunitiespagelink a{
		position: relative;
		top: -20px;
	}
	section.generalinfo aside.twitterlink a.twitterlogo{
		position: absolute;
		margin-top: -15px;
		margin-left: 25%;
		height: 30px; width: 30px;
		background: url(../graphics/twitterlogoblack.png) no-repeat;
		background-size: contain;
	}
	
	/*Re-styling Dave's biography section*/
	section.biography {
		width: 100%;
		height: 1130px;
	}
	
	/*Dealing with the research page */
	section.researchtopics {
		height: 300px;
	}
	div.mini {
		width:45%;
		float: left;
		height: 80px;
		margin: 0 2% 20px 2%;
		text-align: center;
		background-color: rgb(128,96,165);
		box-shadow: 0 1px 10px 0px rgb(128,96,165);
	}
	div.sgccmini a { 
		position: relative; /*To re-centre the text of this box*/
		top: 14px;
	}
	
	/*Reducing the size of images on the research pages*/
	div.biotherapeuticsfig {
		/*margin-left: -150px;*/
		height: 190px ;
		/*width: 300px;
		background: url(../graphics/biotherapeuticssubgroupfig2020.png) no-repeat;
		background-size: 300px auto;*/
	}
	div.peptidesfig {
		/*margin-left: -150px;*/
		height: 230px ;
		/*width: 300px;
		background: url(../graphics/peptidessubgroupfig2020.png) no-repeat;
		background-size: 300px auto;*/
	}
	div.methodologyfig {
		/*margin-left: -150px;*/
		height: 230px ;
		/*width: 300px;
		background: url(../graphics/methodologysubgroupfig2020.png) no-repeat;
		background-size: 300px auto;*/
	}
	div.antibioticsfig {
		margin-left: -150px;
		height: 150px ;
		width: 300px;
		background: url(../graphics/antibioticsfighighres.png) no-repeat;
		background-size: 300px auto;
	}
	a.pharmenable {
		position:absolute;
		height:65px; /*To ensure the logo remains within the screen*/
		width:326px;
		background: url(../graphics/Pharmenable.png) no-repeat;	
		background-size: auto 65px;
	}
	div.pharmenablediv {
		padding-top:75px; /*To reduce the space between the logo and the text*/
	}
	div.sgccfig {
		margin-left: -150px;
		height: 300px ;
		width: 300px;
		background: url(../graphics/sgccfig.svg) no-repeat;
		background-size: 300px auto;
	}
	
	/*Adjusting the selection buttons on the group page*/
	section.groupimages {
		margin-top: 40px;
		width: 100%;
		margin-left:50%;
		height: 270px;
	}
	#selectionbuttons {position: absolute;
		top: 370px;
	}
	
	/*Extending the length of the opportunities page*/
	section.opportunitiespage {
		width: 100%;
		height: 1340px;
	}
	
	/*Resizing the conference page title*/
	div.conferencetitle{
		top: 30px;
		font-size: 0.8em;
	}
	
}


@media screen and (max-width:431px) {
	div.sgccmini a { 
		position: relative; /*To re-centre the text of this box*/
		top: 0px;
	}
	
	div.groupphotocollage2023conf {
		height: 220px;
	}
}



/*Re-styling for small phones ===============================================================*/
@media screen and (max-width:320px) {
	
	.header a.headerimage {
		left: 7%;
		width: 200px;
		top: 10px;
		background: url(../graphics/springgrouplogopurpleplain.svg) no-repeat;
		background-size: auto 70px;
		z-index:10; /*To appear above the navbar menu items*/
	}
	
	div.navbar .dropdownicon {
		right: 30px;
	}
	div.navbar.responsive .dropdownicon {
		right: 0px;
	}
	
	/*Adjusting the index page image*/
	section.indexbody {
		height:300px; /* To fill the screen*/
	}
	#welcomeimage {
		background: url(../graphics/welcomeimage.svg) no-repeat;
		background-size: 900px auto;
		background-position: center center;
		height:300px;
	}
	
	/*Re-styling Dave's biography section*/
	section.biography {
		width: 100%;
		height: 1200px;
	}
	
	/*Re-styling the research page */
	section.researchtopics {
		height: 600px;
	}
	div.mini {
		width:100%;
		float: left;
		height: 80px;
		margin: 0 0% 20px 0%;
		text-align: center;
		background-color: rgb(128,96,165);
		box-shadow: 0 1px 10px 0px rgb(128,96,165);
	}
	div.sgccmini a { 
		position: relative; /*To re-centre the text of this box*/
		top: 14px;
	}
	
	/*Adjusting the selection buttons on the group page*/
	section.groupimages {
		margin-top: 20px;
		width: 100%;
		margin-left:50%;
		height: 200px;
	}
	#selectionbuttons {position: absolute;
		top: 280px;
	}
	
	/*Extending the length of the opportunities page*/
	section.opportunitiespage {
		width: 100%;
		height: 1440px;
	}
	
	/*Resizing the conference page and title*/
	div.conferencetitle{
		top: 20px;
		font-size: 0.8em;
	}
	/*section.conferenceinformation{
		height:600px;
	}*/

}


@media screen and (max-width:203px) {
	div.sgccmini a { 
		position: relative; /*To re-centre the text of this box*/
		top: 0px;
	}
}