/*--------------------------EDITABLE CONTENT----------------------------------*/

/*---------------------------COLOURS YAY--------------------------------------*/

/*------------------------Main Colour and its shades--------------------------*/
a.topBar, button.topBar, header, .people, li.menuList, .color0, .back
{
	color:#8c0c3b; /*Main Colour*/
}

.moreNewsContainer
{
	color: #4e4a4b;
}

a.link
{
	color:#8c0c3b;
	font-weight: 900;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

a.linkLight
{
	color:#fff;
}

a.link:visited
{
	color: #8c0c3b;
}

a.topBar:hover, button.topBar:hover, a.link:hover, span.downloadBtn:hover,
#closeFeedback:hover
{
	color: #0320c6; /*0070c0; /*Darker Shade of Main Colour*/
}

a.linkLight:visited
{
	color:#fff;
}

a.linkLight:hover, span.downloadBtn:hover
{
	color:#bfbfbf;
}

#welcome
{
    z-index: 1;
	/*First Colour is Main Colour & Second one is Gradient colour
	For Gradient increase Colour value (in hex)
	by around 22 not much but to make gradient look smooth
	Alt: Decrease value, everything is relative*/

	/*Old browsers*/
	background-color: #8c0c3b;

	background: -webkit-linear-gradient(#8c0c3b, #8c0c3b);
	/* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#8c0c3b, #8c0c3b);
	/* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#8c0c3b, #8c0c3b);
	/* For Firefox 3.6 to 15 */
	background: linear-gradient(#8c0c3b, #8c0c3b);
	/* Standard syntax */
}

/*Top Left Cloud Logo Position and Size*/
#bigLogo
{
	height:250px;
	margin-top: 205px;
    margin-left: 20px;
	
	width:auto;
	top:0;
	left:0;
	z-index:2;
}

/*------------------------------Second Colour---------------------------------*/

/*if you using only two colours assign thrid and fourth colour
two the second one*/
.backColor1
{
	background-color:#8c0c3b;
}

.color3
{
	color: #4e4a4b;
}


/*------------------------------Third Colour----------------------------------*/

.color2
{
	color: #8c0c3b;
}

.backColor2
{
	background-color:#8c0c3b;
}

/*------------------------------Fourth Colour---------------------------------*/

.color1
{
	color: #4e4a4b;
}

.backColor3
{
	background-color:#8c0c3b;
}

/*----------------------------------------------------------------------------*/

/*--------------------------Fonts and background -----------------------------*/

body
{
	/*WARNING! before changing fonts in css load them in html*/

	font-family: 'Open Sans', 'Roboto', sans-serif;
	/*Always add one extra font just in case*/
}

@media screen and (orientation: portrait) {
	body
	{
		background-image: url('../images/hsru1.jpg');
		/* Blur and shade/darker/apply dark layer first to the picture
		for best design*/
	}
}
@media screen and (orientation: landscape)
{
	body
	{
		background-image: url('../images/hsru1.jpg');
		/* Blur and shade/darker/apply dark layer first to the picture
		for best design*/
	}
}

/*Background for contact page don't think you need to change it*/
body#contactPage
{
	background-image: none;
	background-color: #fff;
	background-image: url("../images/BackgroundContactUs.png");
}

/*Font for mozilla browser*/
h1, h2, h3, h4, h5, h6, li.menuList
{
	font-family: 'Open Sans';
}
/*------------------------*/


/*----------------------------------------------------------------------------*/


/*-----------------------------STANDARD SECTION--------------------------------*/
/*--------------------------DON'T TOUCH ANYTHING------------------------------*/

*
{
	margin:0px;
	padding:0px;
}

html
{
	overflow-x: hidden;
	height:100%;
	width:100%;
	min-height:100%;
}

body
{
	color: #000;
	background-color: #474747;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow-x: hidden;
	min-height:100%;
}

h1
{
	font-size: 36px;
}

h2
{
	font-size: 32px;
}

h3
{
	font-size: 28px;
}

h4
{
	font-size: 24px;
}

h5
{
	font-size: 20px;
}

h6
{
	font-size: 18px;
}

a
{
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6
{
	font-weight: 300;
}

section
{
	padding-bottom: 40px;
}

.hidden
{
	visibility: hidden;
}

.notPresent{
	display: none;
}

.lightSection
{
	background-color: #fff;
}

.darkSection
{
	color: #fff;
}

.rowThin
{
	margin-top: 30px;
	margin-bottom: 30px;
}

.roundedCorners
{
	border-radius:20px;
}

/*--------------------------------Buttons-------------------------------------*/

button, input[type="submit"], a, span.menuNav
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

button.button, input.button, a.button
{
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	/*margin-bottom: 30px;*/
	margin-top: 15px;
	border-radius: 8px;
	border-style: none;
	font-size: 22px;
	font-weight: bold;
	color: #fff;
	width:100%;
}

button.button:hover, a.menuNav:hover, input[type="submit"]:hover,
span.menuNav:hover, a.button:hover
{
	opacity: 0.8;
}

button.plusMinus:hover
{
	opacity: 0.7;
}

button.notButton
{
	background-color: transparent;
	border-style: none;
}

button:focus, textarea:focus, input:focus
{
	outline:0;
}

textarea:focus, input[type="text"]:focus, input[type="email"]:focus
{
	border-color: #636363;
}

#readMoreAboutBtn, #readMoreTakePartBtn, input[type="submit"],
#readLessAboutBtn, #readLessTakePartBtn, .btnContainer, .btnContainerBig,
.btnContainerMedium
{
	width:160px;
}

#listBtn, .btnContainerBig
{
	width:330px;
}

#hideListBtn, .btnContainerMedium, .centreWebsite
{
	width:260px;
}

button.centreWebsite
{
	font-size: 18px;
}

a.topBar, button.topBar
{
	width:50px;
	padding: 15px 10px 0px 10px;
	line-height: 0px;
}

button.topBar
{
	padding-bottom: 10px;
}

.btnIcon
{
	float: right;
	margin-top: -42px;
	padding-right: 10px;
	position: relative;
	z-index: 2;
	color: white;
	font-size: 32px;
}

input[type="submit"]
{
	text-align: left;
	padding-left: 40px;
}

button.lightBtn
{
	background-color: #fff;
	color: #4e4a4b;
}

/*----------------------------Slide-in Menu-----------------------------------*/

aside
{
	position: fixed;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	top: 0px;
	z-index: 11;
	height:100%;
	height: -webkit-calc(100%);
	height: -moz-calc(100%);
	height: calc(100%);
	width: 340px;
	display: none;
}

.moveAsideDown
{
	height: -webkit-calc(100% - 70px);
	height: -moz-calc(100% - 70px);
	height: calc(100% - 70px);
	top:70px;
}

@media only screen and (max-width:577px)
{
	aside
	{
		width: 100%;
	}
}

div.menu
{
	display: none;
	position: relative;
	float: left;
	background-color: #fff;
	width: 100%;
	height:100%;
	overflow-y: scroll;
	z-index: 9;
}

div.blur
{
	position: fixed;
	background-color: #000;
	width:100%;
	height:100%;
	opacity:0.6;
	margin-right: 0px;
	display: none;
	z-index: 8;
}

li.menuList
{
	font-size: 24px;
	font-weight: bold;
	width:100%;
	list-style: none;
	cursor:pointer;
}

.menuNav
{
	padding:10px;
	text-align: left;
}

.menuSublist
{
	padding-left: 20px;
	font-size: 20px;
	float: left;
}

.menuNav:hover, .currentSite
{
	background-color: #cccccc;
}

.menuIcons
{
	padding-right: 8px;
	font-size: 26px;
}

.alignLeftTxtIcon
{
	padding-right: 6px;
}

#faqIcon
{
	padding-right: 12px;
}

#homeIcon
{
	padding-right: 10px;
}

/*----------------------------------NavBar------------------------------------*/

#bigLogoContainer
{
	position:fixed;
	top:0;
	left:0;
	height:480px;
	width:480px;
	margin-top:-200px;
	/*No CSS3*/
	background-color: #fff;

	background: -webkit-linear-gradient(150deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6) 85%, rgba(255, 255, 255, 0));
	background: -o-linear-gradient(150deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6) 85%, rgba(255, 255, 255, 0));
	background: -moz-linear-gradient(150deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6) 85%, rgba(255, 255, 255, 0));
	background: linear-gradient(150deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6) 85%, rgba(255, 255, 255, 0));

	/*Yay CSS3*/
	background: -webkit-linear-gradient(150deg, rgba(255, 255, 255, 1), 85%, rgba(255, 255, 255, 0));
	background: -o-linear-gradient(150deg, rgba(255, 255, 255, 1), 85%, rgba(255, 255, 255, 0));
	background: -moz-linear-gradient(150deg, rgba(255, 255, 255, 1), 85%, rgba(255, 255, 255, 0));
	background: linear-gradient(150deg, rgba(255, 255, 255, 1), 85%, rgba(255, 255, 255, 0));

	border-bottom-right-radius: 400px;
	z-index: 2;

	/*height:600px;
	width:600px;

	border-bottom-right-radius: 800px;*/

	/*background: -webkit-radial-gradient(circle farthest-corner at -30px -100px, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.5) 57%, rgba(255, 255, 255, 0.3) 66%, rgba(255, 255, 255, 0.1) 74%, rgba(255, 255, 255, 0) 80%);
	background: -o-radial-gradient(circle farthest-corner at -30px -100px, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.5) 57%, rgba(255, 255, 255, 0.3) 66%, rgba(255, 255, 255, 0.1) 74%, rgba(255, 255, 255, 0) 80%);
	background: -moz-radial-gradient(circle farthest-corner at -30px -100px, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.5) 57%, rgba(255, 255, 255, 0.3) 66%, rgba(255, 255, 255, 0.1) 74%, rgba(255, 255, 255, 0) 70%);
	background: radial-gradient(circle farthest-corner at -30px -100px, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.5) 57%, rgba(255, 255, 255, 0.3) 66%, rgba(255, 255, 255, 0.1) 74%, rgba(255, 255, 255, 0) 80%);*/


	/*-webkit-box-shadow:
	0 0 30px 4px #f46a3d;
	-moz-box-shadow:
	0 0 30px 4px #f46a3d;
	box-shadow:
	0 0 30px 4px #f46a3d;

	-webkit-box-shadow:
	0 0 10px 6px #f46a3d,
	0 0 16px 8px #36a843,
	0 0 20px 14px #0875bd;
	-moz-box-shadow:
	0 0 10px 6px #f46a3d,
	0 0 16px 8px #36a843,
	0 0 20px 14px #0875bd;
	box-shadow:
	0 0 10px 6px #f46a3d,
	0 0 16px 8px #36a843,
	0 0 20px 14px #0875bd;*/

	/*box-shadow:
	0 0 0 4px #0875bd,
	0 0 0 8px #f46a3d,
	0 0 0 12px #36a843;
	-moz-box-shadow:
	0 0 0 4px #0875bd,
	0 0 0 8px #f46a3d,
	0 0 0 12px #36a843;
	-webkit-box-shadow:
	0 0 0 4px #0875bd,
	0 0 0 8px #f46a3d,
	0 0 0 12px #36a843;*/

	/*-webkit-box-shadow:
	0 0 30px 8px #662e92;
	-moz-box-shadow:
	0 0 30px 8px #662e92;
	box-shadow:
	0 0 30px 8px #662e92;*/

	/*position:fixed;
	top:0;
	left:0;
	height:540px;
	width:550px;
	margin-top:-170px;
	background-color: #fff;

	background: -webkit-radial-gradient(circle farthest-corner at -30px -100px, rgba(255, 255, 255, 0.5) 44%, rgba(255, 255, 255, 0.3) 52%, rgba(255, 255, 255, 0.1) 64%, rgba(255, 255, 255, 0) 72%);
	background: -o-radial-gradient(circle farthest-corner at -30px -100px, rgba(255, 255, 255, 0.5) 44%, rgba(255, 255, 255, 0.3) 52%, rgba(255, 255, 255, 0.1) 64%, rgba(255, 255, 255, 0) 72%);
	background: -moz-radial-gradient(circle farthest-corner at -30px -100px, rgba(255, 255, 255, 0.5) 44%, rgba(255, 255, 255, 0.3) 52%, rgba(255, 255, 255, 0.1) 64%, rgba(255, 255, 255, 0) 72%);
	background: radial-gradient(circle farthest-corner at -30px -100px, rgba(255, 255, 255, 0.5) 44%, rgba(255, 255, 255, 0.3) 52%, rgba(255, 255, 255, 0.1) 64%, rgba(255, 255, 255, 0) 72%);

	border-bottom-right-radius: 400px;
	z-index: 2;*/

	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}


#navbarTransparent
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:9;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

#whiteMenuIcon
{
	margin-left:465px;

}

#whiteLogIn, #whiteMenuIcon
{
	background-color:transparent;
	color:#fff;
}

#whiteLogIn:hover, #whiteMenuIcon:hover
{
	opacity:0.6;
}

header
{
	background-color: #fff;
	height: 70px;
	width: 100%;
	position: fixed;
	top:0;
	margin-top: 0px;
	font-size: 40px;
	z-index: 10;
	-webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.3);
	display: none;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

#logoTop
{
	height:68px;
	margin-top: 1px;
	width: auto;
	left:50%;
	position: fixed;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-ms-transform: translate(-50%, 0); /* IE 9 */
	-webkit-transform: translate(-50%, 0); /* Safari */
	transform: translate(-50%, 0);
	/*Nice trick to center the image*/
}

.menuIconContainer
{
	float:left;
	font-size: 40px;
}

.logInIconContainer, .logInIcon
{
	float:right;
	font-size: 40px;
}

/*-------------------------Containers-----------------------------------------*/

.container
{
	width: 100%;
	margin: auto;
}


/*---------------Container for section width----------------------------------*/
.containerBigSize
{
	width:100%;
	margin: auto;
}

@media only screen and (min-width:1920px)
{
	.containerBigSize
	{
		width:75%;
		margin: auto;
	}
}

@media only screen and (min-width:1366px)
{
	.containerBigSize
	{
		width:90%;
		margin: auto;
	}
}

@media only screen and (min-width:2560px)
{
	.containerBigSize
	{
		width:70%;
		margin: auto;
	}
}

@media only screen and (min-width:3840px)
{
	.containerBigSize
	{
		width:65%;
		margin: auto;
	}
}

/*----------------------------------------------------------------------------*/

.topContainer
{
	height:70px;
	width:100%;
}

.btnContainerBig, .btnContainerMedium, .btnContainer
{
	margin:auto;
}

.containerBlured
{
	height:auto;
}

.logoContainer
{
	margin: auto;
	height:100%;
}

.mediaContainer
{
	width:450px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

/*------------------------------Welcome section-------------------------------*/

#welcome
{
	text-align: center;
	margin-top: 0px;
	color: #fff;
	padding: 0;
}

#welcomeTxt1
{
	text-align: center;
	padding-top:140px;
	padding-left: 40px;
	padding-right: 40px;
	margin-top: 0px;
}

#welcomeTxt2
{
	text-align: center;
	padding-top: 40px;
	padding-bottom: 120px;
	padding-left: 40px;
	padding-right: 40px;
}

.moveWelcomeHeading
{
	margin-left:300px;
}

@media only screen and (max-width:900px)
{
	#welcomeTxt1
	{
		margin-left: 0px;
		padding-top:300px;
	}
	#welcomeTxt2
	{
		margin-left: 0px;
		padding-top: 30px;
	}
}

@media only screen and (max-width:581px)
{
	#welcomeTxt1
	{
		padding-top: 170px;
	}
}

.emphasise
{
	font-weight: 700;
	/*text-shadow: 0 0 8px #f46a3d;*/
}

/*--------------------------------What's section------------------------------*/
/*--------------------------------And Take a Part ----------------------------*/

#about
{
	margin-top: -10px;
}

.sectionHeading
{
	text-align: center;
	padding-top: 40px;
	padding-bottom: 20px;
	margin-top: 0px;
	padding-left: 40px;
	padding-right: 40px;
}

.sectionSubHeading
{
	text-align: center;
	padding-bottom: 20px;
	padding-left: 40px;
	padding-right: 40px;
}

.sectionTxt
{
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 10px;
	text-align: left;
	word-wrap: break-word;
	font-size: 20px;
}

.closedSectionTxt
{
	text-align: center;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 10px;
	word-wrap: break-word;
	font-size: 20px;
}

.placeholder
{
	width: 300px;
	margin: auto;
}

.placeholderPic
{
	width:100%;
	height:auto;
	margin-bottom: 15px;
	margin-top: 15px;
}

#contactUsFromTakePart
{
	width:100%;
	display: block;
}

#haveQuestions
{
	padding-bottom: 0;
	margin-top: 40px;
	font-weight: 300;
	font-size: 28px;
}

/*---------------------------------Study News---------------------------------*/

#studyNewsHeading
{
	margin-bottom:0;
}

#newsTxtContainer
{
	padding-top:0;
}

#recruitmentChart, #sitesChart
{
	margin-bottom: 20px;
}

#insideDoughnut
{
	z-index: 2;
	position:relative;
	text-align:center;
	width:100px;
	margin-top:0;
	font-size: 26px;
}

#trialSitesChartHeading
{
	margin-bottom:52px;
}

.addedTrialSitesContainer
{
	margin-bottom:40px;
	font-size: 20px;
}

.latestSiteIcon
{
	font-size:28px;
	padding-right:4px;
}

.moreNewsContainer
{
	background-color:#fff;
	border-radius:8px;
	width:80%;
	margin:auto;
	font-size:16px;
}

#newsTxt
{
	padding-top:30px;
}

.newsTxt
{
	padding: 30px 40px 0px 40px;
	font-size:20px;
	word-wrap:break-word;
	text-align: left;
}

.carousel
{
	float:right;
	width:25%;
	margin-bottom:45px;
	margin-left:30px;
	margin-right:30px;
	margin-top: 40px;
	z-index: 2;
}

.singleNewsContainer > time, .newsHeading
{
	word-wrap: break-word;
}

@media only screen and (max-width:725px)
{
	.carousel
	{
		width: 45%;
	}
}

@media only screen and (max-width:450px)
{
	#newsHeading
	{
		clear: both;
	}
	.carousel
	{
		width: 80%;
		float: none;
		margin: auto;
		margin-top:0;
		margin-bottom: 30px;
	}
	ul.slick-dots
	{
		margin-bottom: 10px;
	}
}

.singleNewsContainer > time
{
	font-size: 14px;
}

#newsTitle
{
	padding:0;
	margin-bottom:0;
}

.navCarousel
{
	width:100%;
	height: 60px;
}

.singleNewsContainer
{
	border-bottom: solid 1px #bfbfbf;
	text-align:center;
	padding: 8px 3px 8px 3px;
	cursor: pointer;
}

#selectedNews
{
	background-color: #bfbfbf;
}

.singleNewsContainer:first-child
{
	border-radius:8px 8px 0 0;
}

.singleNewsContainer:last-child
{
	border-bottom: 0;
	border-radius:0 0 8px 8px;
}

.singleNewsContainer:nth-child(even)
{
	background-color: #f7f7f7;
}

.singleNewsContainer:hover
{
	background-color: #d9d9d9;
}

.calendarIcon
{
	font-size:24px;
}

/*--------------------------------Key Facts section---------------------------*/
/*-------------------------------And Key Researchers--------------------------*/

#keyFacts
{
	padding-bottom: 40px;
}

.keyFactsSubheading
{
	margin-top: 40px;
}

#factsHeading
{
	margin-bottom: 0;
	padding-top: 40px;
}

.headingIandD
{
	padding-left:40px;
	font-weight:400;
}

.downloadList
{
	font-size: 20px;
	padding: 5px 40px 5px 40px;
}

.downloadBtn
{
	cursor: pointer;
	margin-right: 8px;
	font-size: 24px;
}

.downloadLinkFacts
{
	padding-top: 8px;
	padding-bottom: 8px;
}

.people
{
	font-size: 290px;
	text-align: center;
	height:290px;
	background-color: #fff;
	border-radius: 20px;
	text-align: center;
}


#keyResearch
{
  padding-bottom: 40px; 
}

.card, .back, .front
{
  width:290px;
  height:290px;
  border-radius: 20px;
  margin: auto;
}

.back, .front
{
  cursor: pointer;
}

.front
{
  background-color:#fff;
  color:#4e4a4b;
}

.card
{
  margin-bottom: 60px; /*40px before*/
}

.back
{
  background-color:#fff;
  color:#4e4a4b;
  text-align: center;
  padding: 10px;
  word-wrap: break-word;
}

.backHeading
{
  font-size: 20px;
  overflow-y:auto;
  height:67px;
  margin-bottom:8px;
  text-align: left;
  margin-top: 3px;
  font-weight: 900;
}

.backHeadingNewLine
{
  display:block;
  margin-top:6px;
}

.backInfo
{
  font-size: 15px;
  overflow-y:auto;
  height:197px;
  text-align: left;
  line-height: 175%;
}

/*----------------------------------FAQs section------------------------------*/
/*------------------------------And sponsors section--------------------------*/

#faqs
{
	padding-bottom:40px;
}

.faq
{
	font-size:22px;
	padding-right: 10px;
	cursor: pointer;
}

.plusMinus
{
	font-size: 25px;
	height: 100%;
	padding: 8px 8px 0px 8px;
	margin: 8px 12px 0px 32px;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	float: right;
}


.answer
{
	font-size: 18px;
	display: none;
}

#sponsors
{
	padding-bottom:240px;
}

.sponsorsCard
{
	width:290px;
	height:290px;
	margin-bottom: 40px;
	background-color: #fff;
	border-radius: 20px;
	-webkit-box-shadow:  0 0px 6px 2px rgba(0,0,0,.3);
	-moz-box-shadow:  0 0px 6px 2px rgba(0,0,0,.3);
	box-shadow: 0 0px 6px 2px rgba(0,0,0,.3);
}

/*----------------------------Map Section-------------------------------------*/
#map
{
	width:90%;
	height:500px;
	margin: auto;
	-webkit-box-shadow:  0 0px 6px 2px rgba(0,0,0,.3);
	-moz-box-shadow:  0 0px 6px 2px rgba(0,0,0,.3);
	box-shadow: 0 0px 6px 2px rgba(0,0,0,.3);
	margin-bottom: 10px;
	color: #000;
}

@media only screen and (min-width:1920px)
{
	#map
	{
		width:75%;
	}
}

#mapSection
{
	border-bottom: thin solid #e3e3e3;
	padding-bottom: 0;
}

#trialSitesList
{
	color:#000;
}

.accordionHeader
{
	background-color:#e3e3e3;
	cursor: pointer;
}

.accordionHeader:hover
{
	background-color:#cccccc;
}

@media only screen and (min-width:993px)
{
	.leftAccordElement, .leftAccordContent
	{
		border-right: solid 1px #bfbfbf;
	}

	.rightAccordElement, .rightAccordContent
	{
		border-left: solid 1px #bfbfbf;
	}

	.leftAccordContent
	{
		-webkit-box-shadow:  1px 0 0 #bfbfbf;
		-moz-box-shadow:  1px 0 0 #bfbfbf;
		box-shadow: 1px 0 0 #bfbfbf;
	}

	.rightAccordContent
	{
		-webkit-box-shadow:  -1px 0 0 #bfbfbf;
		-moz-box-shadow:  -1px 0 0 #bfbfbf;
		box-shadow: -1px 0 0 #bfbfbf;
	}
}

.leftAccordElement, .rightAccordElement
{
	border-bottom: solid 2px #bfbfbf;
}

.accordionContent
{
	padding-bottom: 10px;
}

.trialCentre
{
	/*float:left;*/
	font-size:16px;
	/*padding-left:10px;*/
	padding-top:14px;
	word-wrap: break-word;
}

.trialCentreDefaultLogo
{
	font-size:30px;
	padding-left:4px;
}

.trialCentreLogo
{
	height:100%;
	width:auto;
	margin: auto;
	border-radius:6px;
}

img.trialCentreLogo
{
	background-color: #fff;
}

.trialCentreLogoContainer
{
	height:30px;
	/*width:30px;*/
	margin: auto;
	margin-top:6px;
	margin-bottom: 6px;
	margin-right: 4px;
	margin-left: 4px;
	float:left;
}

.trialLocationBtn
{
	margin:0;
}

.ui-state-focus
{
	outline: none;
}

.moreInfoMap
{
	font-weight: 400;
	margin-top: 10px;
	margin-bottom: 10px;
}

.mapKeySubHeading
{
	font-weight: 400;
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.notclickableHeading
{
	cursor: default;
}

button.trialPlus
{
	margin-right: 0;
	margin-left: 12px;
	margin-top: 0px;
	height:40px;
	float:left;
}

.containerMapPeople
{
	padding-right:15px;
}

.containerMapContact
{
	word-wrap:break-word;
}

.containerMapAddress, .containerMapContact
{
	padding-right:15px;
}

.containerMapAddress, .containerMapContact
{
	padding-left:20px;
}

.trialCentreInfoContainer, .trialCentreInfoContainerRight
{
	width: 220px;
	margin: auto;
}

@media only screen and (min-width:1090px)
{
	.trialCentreInfoContainerRight, .trialCentreInfoContainer
	{
		width: 250px;
	}
}

.keyStaffHeading
{
	padding-top:10px;
}

.moreInfoPeopleList
{
	padding-left: 20px;
}

/*--------------------------Social Medial Section-----------------------------*/

#socialMedia
{
	height:100%;
	background-color: #e3e3e3;
	padding-top: 3px;
}

.socialContainer
{
	width:60%;
	height:100%;
	margin: auto;
	text-align: center;
}

.socialIconContainer
{
	width:36px;
	height: 36px;
	margin: auto;
	display: inline-block;
}

.socialIcons
{
	font-size: 36px;
}

.socialIconContainer > .fa-facebook-square
{
	color: #3b5998;
}

.socialIconContainer > .fa-twitter
{
	color: #00aced;
}

.socialIconContainer > .fa-youtube-play
{
	color: #e52d27;
}

.socialIconContainer > .fa-google-plus-square
{
	color: #dc4e41;
}

.socialIconContainer > .fa-instagram
{
	color:#fff;
	font-size: 33px;
	border-radius: 6px;
	margin-top: -2px;
	padding-left: 3px;
	padding-right: 3px;
	background-color: #fec564;

	background:radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%);
	background: -webkit-radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%);
	background: -o-radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%);
	background: -moz-radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%);

	background:radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%);
	background: -webkit-radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%);
	background: -o-radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%);
	background: -moz-radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%);

	background:radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%);
	background: -webkit-radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%);
	background: -o-radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%);
	background: -moz-radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%);

	background:radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%);
	background: -webkit-radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%);
	background: -o-radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%);
	background: -moz-radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%);

	background:radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%);
	background: -webkit-radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%);
	background: -o-radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%);
	background: -moz-radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%);

	background:radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%);
	background: -webkit-radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%);
	background: -o-radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%);
	background: -moz-radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%);

	background:radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent);
	background: -webkit-radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent);
	background: -o-radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent);
	background: -moz-radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent);


	background:linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
	background: -o-linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
	background: -moz-linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
	background: linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}

.socialIconContainer > .fa-pinterest
{
	color: #bd081c;
}

.socialIconContainer > .fa-linkedin-square
{
	color: #007ab6;
}

.socialIconContainer > a:hover
{
	opacity: 0.7;
}

/*---------------------------Contact Section----------------------------------*/

#contactSection
{
	background-color: transparent;
	margin-bottom: 0px;
	padding-bottom: 20px;
}

#contactUsBigContainer
{
	/*If you don't you use social media stripe decrease 240px to footer height*/
	min-height:100vh;
	min-height:calc(100vh - 240px);
	min-height:-webkit-calc(100vh - 240px);
	min-height:-moz-calc(100vh - 240px);
	width: 100%;
}

fieldset
{
	border: none;
	padding: 0;
	margin: 0;
}

form
{
	width:100%;
	margin-bottom: 40px;
}

input[type="text"], textarea, input[type="email"]
{
	font-size: 18px;
	border-radius: 8px;
	padding:4px 12px 4px 12px;
	background-color: #f3f3f3;
	border: 2px solid #ababab;
	margin-right: 10px;
}

.hiddenMessage
{
	padding-left: 14px;
	padding-right: 14px;
	color: red;
	font-size: 18px;
}

input[name="name"], input[name="email"], input[name="subject"], textarea[name="message"], .hiddenMessage
{
	width:270px;
}

@media only screen and (max-width:400px)
{
	input[name="name"], input[name="email"], input[name="subject"], textarea[name="message"], .hiddenMessage
	{
		width:200px;
	}
}

@media only screen and (min-width:1366px)
{
	input[name="name"], input[name="email"], input[name="subject"], textarea[name="message"], .hiddenMessage
	{
		width:350px;
	}
}

textarea
{
	resize: none;
}

.boxTitle
{
	text-align: center;
	font-size: 26px;
	height:100%;
}

.formIcon
{
	font-size: 32px;
	color: #ababab;
}

@media only screen and (max-width:600px)
{
	.formIcon
	{
		margin-left: 30px;
	}
}

div.l1 > span.fa-user
{
	font-size: 36px;
}

div.l1 > span.fa-tag
{
	font-size: 37.25px;
}

.textReaders
{
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

#extrano
{
	font-size: 10px;
	background-color: #000;
}

/*-----------------------------------Footer-----------------------------------*/

footer
{
	position: fixed;
    bottom: 0;
	padding-bottom: 25px;
	width: 100%;

	/*Light footer*/

	/*Old browsers*/
	/*background-color: #fff;

	background: -webkit-linear-gradient(#fff, #eee);
	background: -o-linear-gradient(#fff, #eee);
	background: -moz-linear-gradient(#fff, #eee);
	background: linear-gradient(#fff, #eee);*/

	/*For dark footer comment out gradient*/
	background-color: #333333;
	color:#fff;
}

#chartLogo
{
	height:100%;
	width: 180px;
}

#logoBottom
{
	width:100%;
	height:auto;
	margin-top: 20px;
	background-color: #fff; /*For dark footer*/
	padding: 15px;
	border-radius: 10px;
}

#contact, #address
{
	width:200px;
	margin: auto;
}

.contactTxt
{
	float: left;
}

.copyright
{
	text-align: center;
	font-size: 16px;
	margin-top: 15px;
}

#addressFooter, #contactFooter
{
	font-size: 28px;
	font-weight: 300;
}

/*----------------------------Feedback System---------------------------------*/

#feedbackSystem
{
	display: none;
	margin:0;
	position:fixed;
	top:50%;
	left:50%;
	margin:auto;
	margin-bottom: 20px;
	background-color:#fff;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width:600px;
	z-index:20;
	padding: 30px;
	padding-bottom:0;
}

#feedbackForm
{
	margin:0;
	padding-bottom: 20px;
}

.feedbackSubHeading
{
	text-align:left;
	font-size:20px;
	margin-top:25px;
	margin-bottom:10px;
}

#feedbackTxtInput
{
	width:100%;
	height:125px;
	margin:auto;
}

.feedbackWrongMsg {
	width:100%;
	font-size: 18px;
	color: red;
	text-align: center;
	padding-top: 10px;
}

#feedbackLabel
{
	display: block;
	width:150px;
}

.feedbackCol
{
	width:20%;
	float:left;
	text-align:center;
	font-size: 16px;
}

.feedbackRadio
{
	display:inline-block;
	width:100%;
}

@media only screen and (max-height:492px)
{
	#feedbackSystem
	{
		transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		top:0;
		height:100%;
		overflow-y: scroll;
	}
}

@media only screen and (max-width:620px)
{
	@media only screen and (max-height:560px)
	{
		#feedbackSystem
		{
			height:100%;
			transform: translate(-50%, 0);
			-ms-transform: translate(-50%, 0);
			-webkit-transform: translate(-50%, 0);
			top:0;
			overflow-y: scroll;
		}
	}
	#feedbackSystem
	{
		width:100%;
	}
	.feedbackCol
	{
		width:100%;
		text-align:left;
		margin-bottom: 10px;
	}
	.feedbackRadio
	{
		width:auto;
		float:left;
		margin-top: 6px;
		margin-right: 8px;
	}
}

#closeFeedback
{
	position:absolute;
	right:0;
	top:0;
	padding:0;
	font-size:40px;
	margin-right:10px;
	margin-top: 2px;
}

.feedbackHeading
{
	text-align:center;
	font-size:28px;
}

#feedbackTrialLogoContainer
{
	height:80px;
	float:left;
}

#feedbackTrialLogo
{
	border-radius: 0;
}

/*--------------------------------Miscellaneous-------------------------------*/
.customCard
{
	width:93%;
	margin: auto;
}
.collapse-card
{
	border-style: none;
	border-radius: 10px;
	margin-bottom: 10px;
}
.collapse-card__title
{
	font-size: 28px;
	font-weight: 300;
}
.topBorderRound
{
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.customRound
{
	border-radius: 10px;
}
.customTxt
{
	padding-top: 0;
	padding-left: 70px;
	padding-right: 32px;
}

.collapse-card__title
{
	color:#000;
	padding-bottom:3px;
	white-space: normal;
	word-wrap: normal;
}

.collapse-card__heading > button
{
	height:30px;
	padding-top:5px;
	margin-right:20px;
}

.collapse-card__body
{
	color:#000;
}

/*--------------------------Changes to Carousel Theme-------------------------*/

.slick-prev::before, .slick-next::before
{
	color: white;
	margin-top: 0;
}

.slick-prev
{
	left:0;
	z-index: 1;
}

.slick-next
{
	right: 0;
}

.slick-slide:focus
{
	outline:0;
}

.slick-dots li.slick-active button:before
{
		opacity: .75;
		color: white;
}

.slick-dots li button:before
{
	font-size: 18px;
	color: white;
	opacity: .5;
}

/*Created by M.Muszynski*/

.itemlist {
    padding-left: 2em;
}

.takepartList {
    padding-left: 4em;
}

.moveDown { /*To move a small image down towards the centre of the card*/
    margin-top: 100px;
}