/************************************* FONT FAMILY *******************************/
body {
	font-family: montserrat, sans-serif;
	font-weight: 300;
	font-style: normal;
}

/************************* CONTAINERS ********************************/
.container-fluid {padding:2% 10% 1%;}


/*---------------------- NAVBAR ----------------------------------*/
header {
	background-color:#343a40;
}

.navbar {padding:25px 10px;}
.navbar-brand {padding:0 15px 0 0; height:auto;}
.navbar-brand img {max-width:200px;}
.nav-item {	padding: 0 20px;}

#navbarToggleExternalContent {
	margin-right:50px;
}

.nav-item a {
	font-size: 1.2rem;
	font-weight:100;
	color: white;
}

.nav-item a:hover {
	color: #56c3fd;
}


/*************************************** COVER SLIDE *****************************/
.cover {
	overflow:hidden;
	position:relative;
	text-align:center;
}

.cover-image {
	background-image: url("../images/backgrounds/illustrative_grey_aerial.jpg");
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	height:360px;
}

.back-cover-image {
	background-image: url("../images/backgrounds/illustrative_dark.jpg");
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	height:550px;
}

/**********************COLOUR OVERLAY FOR ANIMATION**********************************/
.cover-colour-overlay {
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:rgba(100,29,34,0.80);
}

.cover-captions {
	display:block;
	background-color:none;
	padding:20px 20px;
	width:90%;
	top:2%;
	bottom:auto;
	margin:0 auto;
	left:5%;
	right:5%;
	letter-spacing: 2px;
	color: #ffffff;
}
.cover-heading {
	margin-bottom:10px;
	padding:10px !important;
	letter-spacing: 1px !important;
}

.cover-subheading {
	margin-bottom:5px;
}

/************************COLOUR PANELS & BACKGROUND COLOURS*******************************/
/*COLOURED PANEL*/
.coloured-panel {
	color:#FFFFFF;
	padding:30px 0;
	margin-top:10px;
	margin-bottom:10px;
}
.consortium-logo {
	display:block;
	margin-left:auto;
	margin-right:auto;
	max-width:80%;
	margin-bottom:30px;
	text-align: center;
}


.colour-charcoal {/*background:#222523;*/ background:#343a40;}
.colour-grey-light {background:#4a4e4b;}
.colour-red-dark {background:#641d22;}
.colour-red-light {background:#b1454d;}
.colour-blue-dark {background:#245f7e;}
.colour-blue-light {background:#56c3fd;}
.colour-green {	background:#bebb5d;}
.colour-purple {background:#815b82;}
.colour-green-new {background:#28a745;}
.colour-orange {background: #ffc107;}

.text-black {color:black;}

/************************BOOTSTRAP BUTTON OVERRIDES*******************************/
.btn{white-space:normal; height:60px;}

/* now purpe */
.btn-info {
    color: #fff;
    background-color: #815b82;
    border-color: #815b82;
}

.btn-info:hover, .btn-info:focus {
    color: #fff;
    background-color: #704F71;
    border-color: #704F71;
}

.btn-primary {
	color:#fff;
	background-color: #245f7e;
	border-color: #245f7e;
}
.btn-primary:hover, .btn-primary:focus {
	color:#fff;
	background-color: #1E506A;
	border-color: #1E506A;
}

/************************STANDARD HTML TAGS*******************************/
h1 {
	font-size:2rem;
	font-weight:400;
	margin-bottom:30px;
	margin-top:0;
}

h2 {
	font-size:1.8rem;
	line-height:30px;
	margin-bottom:20px;
	margin-top:0;
	font-family: montserrat, sans-serif;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 2px;
}

h3 {
	font-size:1.4rem;
	font-weight:100;
	font-style:italic;
	margin-bottom:20px;
	margin-top:0;
}

p {
	font-size:1.2rem;
	font-weight:300;
	line-height:1.8rem;
	margin-bottom:30px;
}

a {
	font-size:1.2rem;
	color:#56c3fd;
	transition:color 0.25s ease-in;
	-moz-transition:color 0.25s ease-in;
	-webkit-transition:color 0.25s ease-in;
	-o-transition:color 0.25s ease-in;
}

a:hover, a.active {
	color:#56c3fd;
}

ul {
	margin:0 0 15px 15px;
	padding:0;
	font-size:16px;
	line-height:1.4;
	font-weight:300;
}

hr {
	margin-top:50px;
	margin-bottom:40px;
	border: solid 1px white;
}

img {
	max-width:100%;
	height:auto !important;
}


.thumbnail-img {
	width:100%;
	padding:0 10px 0 30px;
	margin:5px 0 20px;
	position:relative;
}

.thumbnail-cgi {
	width:100%;
	position:relative;
}


.fa-search-plus {
	position:absolute;
	color:black;
	font-size:25px;
	top:5px;
	right:15px;
	padding:5px;
	background-color:rgba(240,240,240,0.5);
	border:2px solid black;
	border-radius:5px;
	box-shadow:2px 2px 3px rgba(50,50,50,0.7);
}

.fa-search-plus:hover, .fa-search-plus:focus {
	color:orange;border-color:orange;
}



/*---------------------- CONTAINERS, SECTIONS, HEADERS -----------*/




/*FOOTER*/
footer {
	border-top:10px solid #FFFFFF;
	padding:30px 0;
	text-align: center;
	color:#FFFFFF;
}
footer img{
	width:90%;
	max-width:500px;
}
footer a {
	color:#FFFFFF;
}
footer p {
	font-size:12px;
	letter-spacing: 1px;
}
footer span {
	display: block;
}

.copyright {
	font-size:1rem;
	line-height:1.2rem;
}

.shadow {
	text-shadow: 1px 2px 15px black;
}

/******************************** LIGHTBOX MODAL ***********************************/

.lb-modal {
	display: none;
	position: fixed;
	z-index: 1000;
	padding-top: 60px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: black;
}

/* Modal Content */
.lb-modal-content {
	position: relative;
	background-color: black;
	margin: auto;
	padding: 0;
	width: 90%;
	height:90%;
	max-width: 1000px;
}

.img-landscape {
	width:100%;
	height:auto;
}

.img-portrait {
	height:100%;
	width:auto;
	margin:auto;
	padding:0;
}

/* The Close Button */
 .close {
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 35px;
	font-weight: bold;
	opacity:1;
}

.close:hover, .close:focus {
	color: yellow;
	text-decoration: none;
	cursor: pointer;
	opacity:1;
}

.close {
	color:black;
}
.close:hover,
.close:focus {
	color:red;
}

#lightboxModal .close {
	color: white;
}

#lightboxModal .close:hover,
#lightboxModal .close:focus {
	color: orange;
}

/* Caption text */
.lb-caption-container {
	position: relative;
	background-color: black;
	margin: auto;
	width: 90%;
	max-width: 1000px;
	text-align: center;
	padding: 2px 16px;
	color: white;
}


/*********************************** ADDITIONAL BREAK POINTS **************************************/

/* Extra small devices (phones, less than 768px) */
@media (max-width: 479px) {
	.inset-image, .thumbnail-img {
		width:100%;
		padding:0 10px 0 10px;
		margin:5px 0 5px;
	}
	.navbar-brand img {max-width:150px;}
}
/* Very Small devices (mobiles, 480px and up) */
@media (min-width: 480px) {}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.coloured-panel {padding:40px 0;}
	
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.inset-image, .thumbnail-img {
		float:right;
		width:50%;
		padding:0 10px 0 30px;
		margin:5px 0 20px;
	}
	
	.navbar-brand img {	max-width:250px;}
	.navbar-nav {padding-top:22px;}
	.coloured-panel {padding:50px 0;}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	.coloured-panel {padding:60px 0;}	
}



#interactive-map, #interactive-map-infra {
	padding:0;
	width:100%;
	height:auto;
}

#interactive-map div, #interactive-map-infra div {
	background-image: url("../images/june/site_plan.jpg");
	background-size:100%;
	background-position:center center;
	background-repeat: no-repeat;
	position: relative;
	padding-bottom: 56.25%;
	width:100%;
	
}

.modal {z-index:10000;}