@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/******************************************************
				***	RESEARCH PAGE ***
******************************************************/
/******Research Page Dropdown******/
.rs-content
{
	position:absolute;
	top:40px;
	background-color:rgb(254,155,72);
	margin-left:32px;
	display:none;
	margin-top:8px;
}

.rs-content a
{
	color:white;
	text-decoration:none;
	padding-left:5px;
	padding-right:5px;
}

.rs-sub ul li a
{
	color:white;
	text-decoration:none;
	cursor: pointer;
}

.rs-sub ul li a:hover
{
	color:white;
	text-decoration:none;
	cursor: pointer;
}

.rs-sub ul
{
	padding:0;
	margin:0;
	list-style-type:none;
}

.navButton:hover .rs-content
{
	display: block;
}

/******End of Dropdown******/

/* Make banner text left aligned and give it a white font colour */
#banner p
{
	text-align:left;
	color:white;
	font-family: 'Montserrat', sans-serif;
}

/*Container for gallery images - display the images in the center of the page and align them in the middle of the page*/
#galleryContainer
{
	display:                 flex;
	display:                 -webkit-flex; /* Safari 8 */
	flex-wrap:               wrap;
	-webkit-flex-wrap:       wrap;         /* Safari 8 */
	justify-content:         center;
	-webkit-justify-content: center;
}

/* Display images side by side and add padding to the top */
.gallery
{
	float:left;
	padding: 4vw;
	padding-bottom: 1vh;
}

/* Define size of gallery images and spacing */
.gallery img
{
	height: 29vh;
	width:auto;	
	/*padding: 3vw;
	padding-bottom: 1vh;*/
	padding-bottom: 1vh;
	float:center;
}

/* Remove hyperlink underline from the image descriptions when clicked and change formatting */
.gallery a
{
	text-decoration: none;
	color: #000000;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
}

/* When user hovers over text, change text colour */
.gallery a:hover
{
	color:#fe9b48;
	text-decoration:none;
}

/****************************************************
					GALLERY POPUPS
****************************************************/

/* Image 1's popup window styling */
/* Size, colour, display over the top of main body of research page and hide */
#popUp_image01
{
	height:95%;
	width:100%;
	background-color:#F6F6F6;
	position:absolute;
	display:none;
}

#projectContainer
{
	background-color:#F6F6F6;
}

/* Image 2's popup window styling */
#popUp_image02
{
	height:95%;
	width:100%;
	background-color:#F6F6F6;
	position:absolute;
	display:none;
}

/* Image 3's popup window styling */
#popUp_image03
{
	height:95%;
	width:100%;
	background-color:#F6F6F6;
	position:absolute;
	display:none;
}

/* Image 4's popup window styling */
#popUp_image04
{
	height:95%;
	width:100%;
	background-color:#F6F6F6;
	position:absolute;
	display:none;
}

/* Image 5's popup window styling */
#popUp_image05
{
	height:95%;
	width:100%;
	background-color:#F6F6F6;
	position:absolute;
	display:none;
}

/* Image 6's popup window styling */
#popUp_image06
{
	height:95%;
	width:100%;
	background-color:#F6F6F6;
	position:absolute;
	display:none;
}

/* Image 7's popup window styling */
#popUp_image07
{
	height:95%;
	width:100%;
	background-color:#F6F6F6;
	position:absolute;
	display:none;
}

/* Add padding around the border of the popup container */
.popUp_Container
{
	padding:5vw;	
}

/* Add a margin to the top of the button container and add spacing to the right so it is inline with the popup window image */
.popUp-btn-container
{
	margin-top:2.5vh;;
	margin-right:5vw;
	float:right;
}

/* Define size and colour of buttons, display side by side and add spacing */
.popUp-btn
{
	height:30px;
	width:100px;
	background-color:#000000;
	float:left;
	margin-top:0vh;
	margin-left:3vw;
}

/* Change colour of button font, align text to the centre of the button using alignment and padding */
.popUp-btn p
{
	color:#FFFFFF;
	text-align:center;
}

/* Define size of popup window's main image container, position to the right of the screen */
.popUp-img-container
{
	height:77vh;
	width:auto;
	float:right;
	position:relative;
}

/* Resize image within container */
.popUp-img-container img
{
	max-height:100%;	
	width:40vw;
	
}

/* Display popup window text to left of screen, define size and allow scroll bar to be displayed when text overflows boundaries */
.popUp-Text
{
	height:77vh;
	width:45vw;
	float:left;
	overflow:auto;
	padding-right:80px;
}

/*Define size of left arrow image, position infront of main popup image and move half way down the main image */
.popUp-leftArrow img
{
	height:75px;
	width:auto;
	position:absolute;
	margin-top:50%;
}

/* Define size of right arrow image, position infront of main popup image, move half way down the main image and display to the right side */
.popUp-rightArrow img
{
	height:75px;
	width:auto;
	position:absolute;
	/* Move to right side of the image */
	left:100%;
	/* Move arrow half way down the main image */
	margin-top:50%;
	/* Transform the origin to be on the right side of the arrow - this way it lines up inside the main popup image's boundaries */
    -webkit-transform: translate(-100%, 0)
}

/* Upon user hovering over the left arrow, display a new image and change the cursor */
.popUp-leftArrow:hover
{
	background-image:url(images/research/leftArrow_hover.png);
	cursor:pointer;
}

/* Upon user hovering over the right arrow, display a new image and change the cursor */
.popUp-Arrow:hover
{
	background-image:url(images/research/rightArrow_hover.png);
	cursor:pointer;
}

/* Change scrollbar to be white */
.popUp-Text::-webkit-scrollbar
{
	background-color:#ebebeb;
	/*-ms-scrollbar-arrow-color: #000000;*/
}
.popUp-Text::-webkit-scrollbar-button
{
	background-image: url(images/research/upArrow.png);
}

/* Change thumb of scrollbar to be black */
.popUp-Text::-webkit-scrollbar-thumb
{
	background-color: lightgray; 
}