@font-face {
	font-family: 'Source Sans Pro';
	src: url('fonts/SourceSansPro/SourceSansPro-Regular.eot');
	src: local('☺'), url('fonts/SourceSansPro/SourceSansPro-Regular.woff') format('woff'), url('fonts/SourceSansPro/SourceSansPro-Regular.ttf') format('truetype'), url('fonts/SourceSansPro/SourceSansPro-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Source Sans Pro';
	src: url('fonts/SourceSansPro/SourceSansPro-Bold.eot');
	src: local('☺'), url('fonts/SourceSansPro/SourceSansPro-Bold.woff') format('woff'), url('fonts/SourceSansPro/SourceSansPro-Bold.ttf') format('truetype'), url('fonts/SourceSansPro/SourceSansPro-Bold.svg') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Source Sans Pro';
	src: url('fonts/SourceSansPro/SourceSansPro-Italic.eot');
	src: local('☺'), url('fonts/SourceSansPro/SourceSansPro-BoldItalic.woff') format('woff'), url('fonts/SourceSansPro/SourceSansPro-BoldItalic.ttf') format('truetype'), url('fonts/SourceSansPro/SourceSansPro-BoldItalic.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Source Sans Pro';
	src: url('fonts/SourceSansPro/SourceSansPro-BoldItalic.eot');
	src: local('☺'), url('fonts/SourceSansPro/SourceSansPro-BoldItalic.woff') format('woff'), url('fonts/SourceSansPro/SourceSansPro-BoldItalic.ttf') format('truetype'), url('fonts/SourceSansPro/SourceSansPro-BoldItalic.svg') format('svg');
	font-weight: bold;
	font-style: italic;
}

body {
	font-size: medium;
	font-family: 'Source Sans Pro', sans-serif;
}

.navbar {
	font-size: 14px;
}
p {
	font-size: medium;
}

.cel-content-list {
	font-size: medium;
}

.top-buffer {
	margin-top:20px;
}

.top-buffer-small {
	margin-top:5px;
}

.top-buffer-double {
	margin-top:40px;
}

.right-buffer {
	margin-right: 20px;
}

.bottom-buffer {
	margin-bottom:20px;
}
@media (max-width: 991px)
{
	.bottom-buffer {
		margin-bottom: 10px;
	}
}

.cel-hyphen-breaks {
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;

	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Have to manually specify padding if using fixed top nav (and vertical nav on small devices needs less padding) */
body {
	padding-top: 156px;
}
@media (max-width: 767px) {
	body {
		padding-top: 60px;
	}
	.no-padding-xs {
		padding: 0;
	}
}
@media (min-width:768px) AND (max-width: 991px) {
	body {
		padding-top: 117px;
	}
}

#hdr-social-media {
	padding-right: 20px;
}

.row-pad-bottom {
	padding-bottom: 20px;
}

.input-group-addon {
	width:12px;
}

.input-group {
	width: 100%
}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
	/*color: #DF1F1C;*/
}

hlink a:hover, hlink a:visited, hlink a:link, hlink a:active {
	text-decoration: underline;
	/*color: #DF1F1C;*/
}


#nav-xs {
	margin-left:15px;
	margin-right:15px;
	margin-bottom:15px;
	margin-top:5px;
}

nav {
	margin-bottom: 0;
}

/* Uncomment for spacelab theme
.navbar-default {
	background-color: white;
	background-image: none;
}
*/

/* Bug in Bootstrap. Nav is meant to be in container (15px padding) and navbar-right is meant to reclaim this padding (-15 margin) but it doesn't work because it is floated right! */
.navbar-right {
	margin-right: 0px;
}

@media (min-width:768px) AND (max-width: 991px) {
	nav.shrink {
		max-height: 100px;

	}
	nav.shrink .hide-on-shrink {
		display: none;
	}
}

nav.navbar{
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.caunton-logo {
	border: 0px currentColor;
	border-image: none;
}

.dark-background {
	background: #71909C;
}
.medium-background {
	background: #D4DEE3;
}


.footer-small {
	font-size: smaller;
	color: lightgray;
}

.footer-large {
	color: white;
}

.footer-logo
{
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 5px;
}

.footer-logos {
	text-align: center;
}

.section-heading {
	font-size: x-large;
	/*color: #DF1F1C;*/
	color: #71909C;
	text-align:center;
}

.section-detail {
	font-size: medium;
	text-align:center;
	padding-left: 10px;
	padding-right:10px;
}

.section-detail-small {
	font-size: small;
	text-align:center;
	padding-left: 10px;
	padding-right:10px;
}

.news {
	font-size: medium;
	padding-left: 30px;
	padding-right: 30px;
	vertical-align: middle;
}

.panel-fixed-height {
	height: 100%;
}

.section-logo {
	text-align:center;
	padding-top: 10px;
}

.section-sub-heading {
	font-size: large;
	color: #DF1F1C;
	text-align:center;
}

.carousel .icon {
	padding-bottom: 10px;
}

.carousel-caption {
	background-color: transparent;
	left: 8%;
	right: 8%;
	padding-bottom: 0px;
	position: absolute;
}
.carousel-caption h3 {
		margin-top: 5px;
}
.carousel-control.left, .carousel-control.right {
	background: none !important;
	filter: progid: none !important;
	outline: 0;
}
.carousel .carousel-control {
	visibility: hidden;
}
.carousel:hover .carousel-control {
	visibility: visible;
}
.carousel-indicators li { visibility: hidden;}


.slick-slide img {
	margin-left: auto;
	margin-right: auto
}
#sectorscarousel a {
	color: white;
}
#sectorscarouselsmall a {
	color: white;
}
#sectorscarouselsmall {
	margin-bottom: 0px;
}
#sectorscarouselsmall p {
	font-size: small;
}
@media (max-width: 767px) {
	#sectorscarouselsmall .slick-prev, #sectorscarouselsmall .slick-next {
		top: 25%;
	}
}
/*
#sectorscarouselsmall .slick-slide, #sectorscarousel .slick-slide{
    background-color: rgba(0, 0, 0, 0.20);
	text-shadow: 1px 0 0 #666, 0 -1px 0 #666, 0 1px 0 #666, -1px 0 0 #666;
}
*/
.carousel-caption.visible-xs {
	 bottom: 0px;
}
.carousel-dark-background {
    background-color: rgba(0, 0, 0, 0.20);
	text-shadow: 1px 0 0 #666, 0 -1px 0 #666, 0 1px 0 #666, -1px 0 0 #666;
	padding-left:40px;
	padding-right:40px;
}
.carousel-dark-background {
    padding-top: 0px;
}

.panel-default>.panel-heading {
	background-image: none;
}

.panel-body img {
	/*width:100%;*/
	height:100%;
}

.row-pad {
	padding-left: 30px;
	padding-right: 30px;
}
@media (max-width: 767px) {
	.row-pad {
		padding-left: 5px;
		padding-right: 5px;
	}
}
@media (min-width:768px) AND (max-width: 991px) {
	.row-pad {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.CELPagerNumber, .CELPagerNumberSelected {
	padding-right: 20px;
}

.CELPagerNumberSelected {
	font-size : larger;
}


.cel-carousel-splash {
	margin-bottom: 0px;
	visibility: hidden;
}

.slick-initialized {
	visibility: visible;
}

.cel-carousel-splash .slick-prev:before, .cel-carousel-splash .slick-next:before { font-family: "slick"; font-size: 60px; line-height: 1; color: #DF1F1C; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }   
@media (min-width: 991px) {
	.cel-carousel-splash .slick-prev:before, .cel-carousel-splash .slick-next:before  {
		font-size: 100px;
	}
}
.cel-carousel-splash .slick-prev:before { content: "‹"; z-index: 8;}
.cel-carousel-splash .slick-prev { top: 40%; left: 5%; z-index: 8;}
@media (max-width: 767px) {
	.cel-carousel-splash .slick-prev {
		top: 35%; left: 0px; z-index: 8;
	}
}.cel-carousel-splash .slick-next:before { content: "›"; z-index: 8;}
.cel-carousel-splash .slick-next { top: 40%; right: 5%;  z-index: 8;}
@media (max-width: 767px) {
	.cel-carousel-splash .slick-next {
		top: 35%; right: 0px; z-index: 8;
	}
}

.cel-carousel-splash-caption {
	position: absolute;
	opacity: 1;
	background-color: #DF1F1C;
	top: 10%;
	right: 0px;
	z-index: 6;
	color: white;
}
@media (max-width: 991px){
	.cel-carousel-splash-caption {
		position: absolute;
		opacity: 1;
		background-color: #DF1F1C;
		top: 0px;
		right: 0px;
		z-index: 6;
	}
}

.cel-carousel-splash-caption a {
	color: white;
}

.cel-carousel-splash-caption h3, .cel-carousel-splash-caption h4 {
	padding: 15px;
	margin: 0px;
}

.cel-carousel-splash-caption p {
	padding: 2px;
	margin: 0px;
	font-size: smaller;
}

.cel-carousel-splash-caption-container {
	position: relative;
}

.cel-carousel-splash-caption a:hover {
	color:white;
}

.cel-carousel-splash-caption:hover {
	opacity: 0.8;
}

.cel-btn-group {
	vertical-align: middle;
	position: relative;
	display: inline-block;
}

.cel-btn {
	border-width: 1px;
	color: white;
	float:left;
	font-size: 14px;
	padding-bottom: 6px;
	padding-top:6px;
	padding-left: 12px;
	padding-right:12px;
	border:1px;
}

.cel-btn>a {
	padding: 0px;
	color: white;
}

.cel-btn span {
	position: relative;
}

.cel-btn span:active {
	top:1px;
	left:1px;
}

.cel-btn-red {
	border-color: #DF1F1C;
	background-color: #DF1F1C;
}

.cel-btn-grey {
	border-color: #71909C;
	background-color: #71909C;
}

.cel-btn-clickable:hover, .cel-btn-clickable:focus {
	opacity: 0.8;
}

.cel-carousel-buttons {  visibility: hidden; }
.slick-initialized { visibility: visible; }

.cel-section-title, .cel-section-title a {
	color: #71909C;
	/*color: #D4DEE3;*/
	/*color: #DF1F1C;*/
}

.cel-section-title a:hover {
	/*color: #71909C;*/
	color: #555555;
	/*color: #DF1F1C;*/
}

/* Add Source Sans Pro using the font-weight and font-style attributes so that the font is correctly applied to core styles */

/* Change from rounded buttons to rectangular buttons */
* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

/* All links will be in red */
a {
	color: #DF1F1C;
}
a:hover {
	color: darkred;
}
/* apart from buttons */
a.btn {
	color: white;
}

/* Bold is too overpowering in the menu with Source Sans Pro */
.navbar a {
	font-weight: normal;
}


@media (max-width: 767px) {
	/*.featureimage {
		height: 250px;
	}*/
}

.cel-project-header {
	/*color: #71909C;*/
}

/* To overlay text on an image, the image and caption must be in a div which is relative and the caption itself must be absolute */
.project-image {
	position:relative;
}

.project-image img {
	width: 100%;
	max-height: 650px;
	margin:auto;
}

.project-image>image {
}
.project-image-caption {
	position: absolute;
	right: 0;
	top: 15%;
	color: white;
	background-color: black;
	padding-top: 0px;
	padding-bottom: 10px;
	padding-left: 50px;
	padding-right: 50px;
	background-color: rgba(0, 0, 0, 0.5);
}
.project-image-header {
	color: white;
	background-color: #DF1F1C;
	text-align: center;
	width: 100%;
	padding-top: 1px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 10px;
}
.project-image-header-small {
	color: white;
	background-color: black;
	text-align: center;
	width: 100%;
	padding-top: 1px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 10px;
}
/* Don't need as much padding on a smaller screen */
.project-image-caption.visible-sm {
	padding-left: 30px;
	padding-right: 30px;
}
.project-image-caption.visible-xs {
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 0px;
}

.project-image-details {
	padding-bottom: 20px;
	padding-top: 20px;
	font-size: medium;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	bottom: 0px;
	left: 0px;
}

.cel-project-tabs .cel-hidden>div {
	color: transparent;
}


/* Overlay the section above - used to move Project Details header up so it aligns with photo tabs */
.negative-margin {
	float: none;
	margin-top: -40px;
}
/* Overlaying of this section by .negative-margin requires tabs are moved in front of the overlayed section so they are still clickable */
.nav-tabs > li {
	z-index: 2;
}
.nav-tabs li a, .nav-tabs li.active a {
	color: white;
	margin-left: 2px;
	margin-right: 0px;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
	background-color: #DF1F1C;
	opacity: 1;
	border-bottom-style: none;
	color: white;
}
.nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
	opacity: 0.8;
	cursor: pointer;
}
.nav-tabs > li h4 {
	margin-top: 5px;
	margin-bottom: 5px;
}

/* Fixed width tabular layout for project  */
.project-label {
	float:left;
	width: 120px;
	font-weight: bold;
}
.project-detail {
	float:left;
}

.project-detail-edit {
	width: 100%;
}

label {
	font-weight: normal;
}

/* Used to allow the content of a row to push right up to the edges of the row e.g. download button on project page */
.small-padding {
	padding-top:5px;
	padding-bottom:5px;
}

.panel-title {
	font-size: large;
}

/* Caunton colours for a panel */
.panel-caunton {
	border: none;
}

.panel-caunton .panel-heading {
	/*background-color: #DF1F1C;*/
	/*background-color: #777;*/
	background-color: #71909C;
	background-color: #f5f5f5;
}
.panel-caunton .panel-title, .panel-caunton .panel-title a {
	color: #71909C;
	/*color: #000000;*/
	font-size: large;
}
.panel-caunton.panel-small .panel-title, .panel-caunton.panel-small .panel-title a {
	font-size: medium;
}
.panel-caunton.panel-small .panel-heading {
	height: 60px;
}
.panel-caunton .panel-body {
	background-color: white;
	min-height: 150px;
}
.panel-caunton.panel-small img {
	width:100%;
}

.widgetwideimagefull
{
	float:left;
	padding-top: 10px;
	padding-right: 12px;
	padding-bottom: 6px;
}

.news-headline {
	text-align: center;
}

.cel-carousel-buttons .slick-slide {
	background-color: #F8F8F8;
	height:50px;
	text-align: center;
	padding-top: 15px;
	margin: 5px;
}

.cel-carousel-buttons .cel-slick-selected
{
	background-color: #E7E7E7;
}

.cel-carousel-buttons .cel-slick-selected a {
	color: #000000;
}

.cel-carousel-buttons.slick-slider {
	margin-bottom: 0px;
}

.cel-year > li > a {
	color: black;
}

.cel-year>li.active>a,.cel-year>li.active>a:focus,.cel-year>li.active>a:hover {
	color: white;
}

/* img is inline and so is centred by text-align:center but input[type=image] (which is what asp:imagebutton generates in search.aspx) is not unless it is changed to inline-block */
.cel-img-center {
	text-align: center;
}
.cel-img-center>input {
	display:inline-block;
}
.cel-img-center img {
	width: 100%;
}
.cel-img-label {
	text-align: right;
	font-style: italic;
}

.cel-map {
	height: 350px;
	width: 100%;
}
@media (max-width: 767px)
{
	.cel-map {
		height: 250px;
		width: 100%;
	}
}
@media (min-width: 1200px) and (min-height: 800px)
{
	.cel-map {
		height: 450px;
		width: 100%;
	}
}

/* This is needed for hot topics in search results mode where the hot topic contains an image otherwise the image sticks out the side of the panel */
.cel-img-responsive-container img {
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
}
.cel-img-responsive-container div {
	overflow: hidden !important;
}

.cel-img-caption {
	font-style : italic;
}

.cel-x3d {
	width:100%;
	height:523px;
}


.cel-admin>a {
	padding-right: 5px;
	padding-left: 5px;
}

.cel-news-title {
	text-align:center;
	padding-bottom: 10px;
}

.cel-news-photo {
	float:left;
	margin-right: 20px;
	margin-bottom: 10px;
}

.cel-italic {
	font-style: italic;
}

.cel-sub-heading {
	font-weight: bold;
}

.cel-search-photo>a>img, .cel-search-photo>input[type="image"]{
	margin:auto;
	height: auto;
	width: auto;
	display: block;
}
.cel-search-photo-wide>a>img, .cel-search-photo-wide>input[type="image"] {
	margin:auto;
	height: 188px;
	width: 330px;
	display: block;
}
@media (max-width: 767px)
{
	.cel-search-photo>a>img, .cel-search-photo>input[type="image"], .cel-search-photo-wide>a>img, .cel-search-photo-wide>input[type="image"] {
		margin:auto;
		height: auto;
		width: auto;
		display: block;
	}
}

.cel-no-top-buffer {
	padding-top: 0px;
	margin-top: 0px;
}

.cel-search-separator {
	height:2px;
	background-color: #eee;
}

.dark-background a {
	color: white;
}
.dark-background a:hover {
	color: darkred;
}

.cel-btn-red a:hover {
	color: #71909C;
}

.cel-video {
	width: 100%;
	max-height: 518px;
}

.left-buffer {
	padding-right: 30px;
}

.map-image {
	position:relative;
}
.map-image-caption {
	position: absolute;
	right: 0;
	top: 15%;
	color: white !important;
	background-color: black;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	padding-right: 20px;
	opacity: 0.7;
	z-index:4;
}
.map-image-caption:hover {
	opacity: 1;
}

.cel-wrapper {
    padding-left: 15px;
    padding-right: 15px;
}

.cel-no-bottom-margin {
	margin-bottom: 0px;
}

.navbar {
	margin-bottom: 0px;
}

.btn-danger {
	background-image:none;
}

/* Reinstate navbar submenu - Start */
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
/*.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}*/
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#555;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}
/* Reinstate navbar submenu - End */