/*

Custom Theme CSS
================

Author: Mariska Thomas
Updated: January 2015
Notes: Customise Bootstrap CSS to personalise theme

*/



/*	----------------------------------------------
	layout
	------------------------------------------- */
	body {
		font-family: 'Raleway', sans-serif;
		font-size: 15px;
		letter-spacing: 0.01em;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		color: #475760;
		background: url(../../imgs/clouds.jpg) no-repeat fixed;
	}
	
	.site-logo {
		display: block;
		position: absolute;
		top: 1%;
		left: 15%;
		background-color: transparent;
		overflow: visible;
		z-index: 100;
	}
	
	.diagnostic-border {
		border: solid 2px #ff0000;
	}/*use this as diagnostic to see borders of divs etc*/
	
	#features {
		text-align: center;
	}
	
	#features img {
		width: 100%;
		margin-bottom: 20px;
	}
	
	#features .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger {
		background-color: rgba(255,255,255,0.10);
		border: solid 5px rgba(255,255,255,0.50);
		padding: 25px 10px;
	}
	
	#features .panel-heading {
		background-color: transparent;
		border: none;
	}
	
	#features .panel-title {
		font-size: 1.7em;
		color: inherit;
		margin: 0;
	}
	
	.hash-anchor-padding {
		display: inline-block;
		height: 0;
		margin-top: -0;
		visibility: hidden;
	}
	
	.hr-spacer {
		margin-top: 10px;
		margin-bottom: 10px;
		border: 0;
		border-top: 1px solid transparent;
	}
	
	.hr-dotted {
		margin-top: 15px;
		margin-bottom: 15px;
		border: 0;
		border-top: 1px dotted #9ea3a8;
	}
	
	.margin-right-40 {
		margin-right: 40px;
	}
	
	.padding-top-10 {
		padding-top: 10px;
	}
	
	.padding-top-20 {
		padding-top: 20px;
	}
	
	.padding-bottom-20 {
		padding-bottom: 20px;
	}
	
	.padding-left-20 {
		padding-left: 20px;
	}
	
	.padding-right-50 {
		padding-right: 50px;
	}
	
	.padding-sm-left-30 {
		padding-left: 30px;
	}
	.padding-sm-right-30 {
		padding-right: 30px;
	}
	
	.bg-white {
		background-color: #ffffff;
	}
	
	.bg-charcoal {
		background-color: #bbc3c8;
	}
	
	.bg-aqua {
		background-color: #238aba;
	}
	
	.back-to-top {
		background: none;
		margin: 0;
		position: fixed;
		bottom: 5%;
		right: 5%;
		width: 70px;
		height: 70px;
		z-index: 100;
		display: inline;
		text-decoration: none;
		color: #2e3538;
	}
	.back-to-top i {
		font-size: 60px;
	}
	
/*	----------------------------------------------
	modal
	------------------------------------------- */
	.modal-content {
		background-color: #fff;
		border: none;
		border: 5px solid rgba(255, 255, 255, .2);
		border-radius: 0;
		outline: solid 15px #e7ecf0;
	}

	.modal-header {
		padding: 40px 0 0 0;
		border-bottom: 5px solid #f0f5f8;
	}
	.modal-header .close {
		margin-top: -25px;
		margin-right: 15px;
	}
	.modal-body {
		padding: 15px 40px;
	}
	.modal-footer {
		padding: 15px 40px;
		text-align: right;
		border-top: 1px solid #e5e5e5;
		background-color: #d3d8dd;
	}

	
/*	----------------------------------------------
	typography
	------------------------------------------- */
	h1, h2, h3, h4 {
		font-family: 'Raleway', sans-serif;
		font-weight: 300;
	}
	
	h1 {
		font-size: 1.7em;
		margin: 0.2em 0 0.4em 0;
		color: #0095da;
	}
	
	h2 {
		font-size: 1.5em;
		margin: 0.2em 0 0.4em 0;
		color: #7a848a;
	}
	
	h3 {
		font-size: 1.4em;
		margin: 0.8em 0 0.2em 0;
		color: #7a848a;
	}
	
	h4 {
		font-size: 1.2em;
		margin: 0.3em 0 0.2em 0;
	}
	
	b {
		font-weight: 500;
	}
	
	i {
		font-style: italic;
		font-weight: inherit !important;
	}
	
	a {
		color: #647078;
		text-decoration: none;
	}
	a:hover,
	a:focus {
		color: #009ad4;
		text-decoration: none;
	}
	a:focus {
		outline: thin dotted;
		outline: 5px auto -webkit-focus-ring-color;
		outline-offset: -2px;
	}
	
	a.bottom-border {
		text-decoration: none;
		border-bottom: dotted 1px #98a0a6;
	}
	a.bottom-border:hover,
	a.bottom-border:focus {
		border-bottom: dotted 1px #0090d6;
	}
	
	a.social-icons {
		display: inline;
		font-size: 1.2em;
		color: #969ea4;
		padding: 0 .05em;
		text-decoration: none;
	}
	a.social-icons:hover,
	a.social-icons:focus {
		color: #0090d6;
	}

	mark,
	.mark {
		color: #fff;
		background-color: transparent;
	}
	
	.custom-ol-li > li, .custom-ol-li > li li {
		margin-left: -25px;
		padding: 0 0 5px 10px;
	}
	
	ul.custom-ul-li {
		list-style: outside;
		margin-left: -1.4em;
		margin-top: 0.5em;
		margin-bottom: 1.2em;
	}
	ul.custom-ul-li > li {
		list-style-type: disc;
		text-indent: 0em;
		padding-left: 0.25em;
		margin-bottom: 0.35em;
	}
	ul ul.custom-ul-li > li {
		list-style-type: none;
		text-indent: -1.35em;
	}
	ul ul.custom-ul-li > li::before {
		content: "– ";
		padding-right: 0.5em;
	}
	
	.text-warning {
		color: #d58512;
	}
	
	.text-error {
		color: #ff0000;
	}
	
	.text-border-bottom {/*for a hrefs*/
		border-bottom: dotted 1px;
	}
	
	.lead {
		font-size: 1.2em;
	}
	
	.color-white {
		color: #ffffff;
		text-shadow: 1px 1px 3px rgba(0,0,0,0.30);
	}
	
	.color-aqua {
		color: #009ad4;
	}
	
	.label-primary {
		background-color: #009ad4;
	}
	
	.text-inline {
		display: inline;
	}
	
	.gallery-folder-link {
		color: #474c50;
		margin-right: 10px;
	}
	.gallery-folder-selected {
		display: inline-block;
		color: #7e9e3c;
		padding: 2px 5px;
		margin-right: 10px;
		border: solid 1px #7e9e3c;
		border-radius: 4px;
	}
	
	.ruled-text {
		display: flex;
		flex-direction: row;
		justify-content: center;
		text-align: center;
		color: rgba(71,87,96,0.40);
	}
	.ruled-text:before,
	.ruled-text:after {
		background-color: rgba(71,87,96,0.30);
		content: '\a0';
		height: 2px;
		position: relative;
		top: 0.5em;
	}
	.ruled-text:before {
		flex-grow: 1;
		margin-right: 7px;
	}
	.ruled-text:after {
		flex-grow: 10;
		margin-left: 7px;
	}
	
/*	----------------------------------------------
	nav: main and footer and hash menus
	------------------------------------------- */
	.navbar {
		text-align: cnter;
		margin-bottom: 0;
	}
	
	.navbar .navbar-nav {
		max-height: 30px;
		display: inline-block;
		float: none;
	}
	
	.navbar-inverse {
		background-color: #475059;
		border-color: #ffffff;
		border-top-width: 2px;
		border-bottom-width: 0;
		border-left-width: 0;
		border-right-width: 0;
	}
	
	.navbar-inverse .navbar-nav > li > a {
		color: #a4bac4;
		font-size: 0.85em;
		letter-spacing: 0.04em;
	}
	.navbar-inverse .navbar-nav > li > a:hover,
	.navbar-inverse .navbar-nav > li > a:focus {
		color: #ffffff;
		background-color: transparent;
	}
	.navbar-inverse .navbar-nav > .active > a,
	.navbar-inverse .navbar-nav > .active > a:hover,
	.navbar-inverse .navbar-nav > .active > a:focus {
		color: #ffffff;
		background-color: #0095da;
	}
	
	.navbar-brand {
		height: 10px;
	}
	
	footer {
		background: #41484c;
		color: #86878a;
		font-size: 1.0em;
		padding: 20px;
	}
	
	footer h4 {
		color: #7e9e3c;
		font-size: 1.2em;
		text-shadow: 1px 1px 3px rgba(0,0,0,0.30);
	}
	
	footer h6 {
		color: #252728;
		font-size: 0.7em;
	}
	
	footer a {
		color: #a0a7ab;
		font-size: 1em;
		line-height: 170%;
	}
	
	footer a:hover {
		color: #ffffff;
		font-size: 1em;
		text-decoration: none;
	}
	
	.footer-link-active {
		color: #ffffff;
	}
	
	.footer-col-min-height {
		min-height: 130px;
	}
	
	.hr-footer {
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: solid 4px rgba(46,53,56,0.30);
		background-color: transparent;
		margin: 10px 0;
	}
	
	.hash-menu {
		font-size: 0.85em;
		letter-spacing: 0.03em;
		color: rgba(29,41,53,0.70);
		text-decoration: none;
		margin-left: 10px;
	}
	.hash-menu:hover {
		color: rgba(29,41,53,1.00);
		border-bottom: solid 2px #b3b9bc;
		padding-bottom: 2px;
	}

	
/*	----------------------------------------------
	carousel
	------------------------------------------- */
	#sliderCarousel {
		width: 100%;
		background-color: transparent;
		border-bottom: none;
	}
	
	.carousel {
		margin: 0 auto;
	}
	
	.carousel-caption {
		font-size: 1.3em;
		text-align: right;
		vertical-align: bottom;
	}
	
	.carousel-caption h4 {
		display: inline-block;
		font-size: 1.2em;
		font-weight: 400;
		background-color: rgba(255,255,255,0.30);
		border: solid 4px #ffffff;
		padding: 7px 15px;
	}
	
	#sliderCarousel .glyphicon {
		font-size: 0.9em;
	}
	
	/*set the margin-height for the slider here and in @media (max-width: 480px)*/
	.slider-margin {
		margin-top: 0;
	}

	
/*	----------------------------------------------
	global styles
	------------------------------------------- */
	.border-left {
		border-left: dotted 2px rgba(255,255,255,0.0);
	}
	
	.border-block {
		display: inline-block;
		width: auto !important;
		border: solid 18px transparent;
		outline: solid 4px #d3d8dd;
		outline-offset: -5px;
	}
	
	.btn-default {
		font-size: 1em;
		color: rgba(122,132,138,0.80);
		background-color: transparent;
		border: solid 3px rgba(100,112,120,0.50);
		margin-bottom: 10px;
	}
	.btn-default:hover {
		color: rgba(122,132,138,0.80);
		background-color: transparent;
		border: solid 3px rgba(100,112,120,1.00);
	}
	
	.btn-aqua {
		font-size: 1em;
		color: rgba(0,149,218,0.80);
		background-color: transparent;
		border: solid 3px rgba(0,149,218,0.50);
	}
	.btn-aqua:hover {
		color: rgba(0,149,218,1.00);
		background-color: transparent;
		border: solid 3px rgba(0,149,218,1.00);
	}
	
	.btn-white {
		font-size: 1em;
		color: rgba(255,255,255,0.80);
		background-color: transparent;
		border: solid 3px rgba(255,255,255,0.50);
	}
	.btn-white:hover {
		color: rgba(255,255,255,1.00);
		background-color: transparent;
		border: solid 3px rgba(255,255,255,1.00);
	}
	
	.thumbnail {
		display: table-cell;
		background-color: rgba(255,255,255,0.50);
		border: 1px solid #eef0f1;
		opacity: 1;
	}
	a.thumbnail:hover,
	a.thumbnail:focus,
	a.thumbnail.active {
		background-color: rgba(255,255,255,1.00);
		border-color: #d2d6d8;
		-moz-box-shadow:    0 3px 5px rgba(0,0,0,0.30);
		-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.30);
		box-shadow:         0 3px 5px rgba(0,0,0,0.30);
		opacity: 0.8;
	}
	
	hr {
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: solid 4px #f0f5f8;
		background-color: transparent;
		margin: 20px 0;
	}

	.thumbnails {
		margin-bottom: 0;
		margin-left: -10px;
		padding: 0;
		list-style: none;
		*zoom: 1;
	}
	
	.thumbnails:before,
	.thumbnails:after {
		display: table;
		line-height: 0;
		content: "";
	}
	
	.thumbnails:after {
		clear: both;
	}
	
	.row-fluid .thumbnails {
		margin: 0;
	}
	
	.thumbnails > li {
		float: left;
		margin-bottom: 10px;
		margin-left: 0;
	}
	
	.gallery-span {
		display: table-cell;
		padding-left: 10px;
	}
	
	.pagination {
	margin: 20px 0;
	border-radius: 4px;
	}
	
	.pagination > li > a,
	.pagination > li > span {
	color: #7e9e3c;
	padding: 3px 12px;
	background-color: rgba(255,255,255,0.50);
	border: 1px solid rgba(255,255,255,0.70);
	}
	
	.pagination > li > a:hover,
	.pagination > li > span:hover,
	.pagination > li > a:focus,
	.pagination > li > span:focus {
	z-index: 2;
	color: #7e9e3c;
	background-color: rgba(255,255,255,1.00);
	border-color: #ddd;
	}
	
	.pagination > .active > a,
	.pagination > .active > span,
	.pagination > .active > a:hover,
	.pagination > .active > span:hover,
	.pagination > .active > a:focus,
	.pagination > .active > span:focus {
	z-index: 3;
	color: #fff;
	cursor: default;
	background-color: #7e9e3c;
	border-color: #bbc3c8;
	}
	
	.pagination > .disabled > span,
	.pagination > .disabled > span:hover,
	.pagination > .disabled > span:focus,
	.pagination > .disabled > a,
	.pagination > .disabled > a:hover,
	.pagination > .disabled > a:focus {
	color: rgba(100,112,120,0.50);
	background-color: rgba(255,255,255,0.50);
	border-color: rgba(255,255,255,0.30);
	margin-top: -1px;
	}
	
	.table > thead > tr > th,
	.table > tbody > tr > th,
	.table > tfoot > tr > th,
	.table > thead > tr > td,
	.table > tbody > tr > td,
	.table > tfoot > tr > td {
		padding: 8px 2px;
		line-height: 1.42857143;
		vertical-align: top;
		border-top: dotted 1px #9ea3a8;
	}
	
	.table-hover > tbody > tr:hover {
		background-color: rgba(185,173,153,0.10);
	}
	
	.tooltip-inner {
		background-color: #475059;
	}
	
	.no-padding {
		padding: 0;
	}

	
/*	----------------------------------------------
	media queries
	------------------------------------------- */

/*portrait and landscape phone*/
@media (max-width: 480px) {
	/*reduce size of logo on mobile phones*/
	.brand-logo {
		height: 9vh;
		padding: 0;
	}
	
	/*set mobile menu content to full width*/
	#main-navbar-collapse {
		width: 100%;
	}

	#sliderCarousel .carousel-caption {
		font-size: 0.9em;
		text-align: center;
	}
	
	#sliderCarousel .carousel-caption h4 {
		font-size: 1.3em;
		background-color: rgba(0,0,0,0.50);
		border: solid 2px #fff;
		padding: 4px 8px;
		text-align: center;
	}
	
	#sliderCarousel .glyphicon {
		font-size: 0.7em;
	}

	#sliderCarousel .item img {
		height: 130px;
	}
	
	.footer-col-min-height {
		min-height: inherit;
		padding-bottom: 0.9em;
	}
	
	.back-to-top i {
		font-size: 60px;
	}
	
	.logo-size {
		height: 90px;
	}
	
	.site-logo {
		display: block;
		position: relative;
		padding-bottom: 10px;
		top: 0;
		width: 86%;
		text-align: center;
	}
	
	.hash-anchor-padding {
		display: inline-block;
		height: 0;
		margin-top: -0;
		visibility: hidden;
	}
	
	.slider-margin {
		margin-top: 150px;
	}
	
	.padding-sm-left-30 {
		padding-left: 0;
	}
	.padding-sm-right-30 {
		padding-right: 0;
	}
	
	a.social-icons {
		display: inline;
		font-size: 1.2em;
		padding: 0 .2em;
		margin-bottom: 0.5em;
		transition: .3s ease-in-out;
	}
}

@media (max-width: 800px) {
	
	/*set mobile menu content to full width*/
	#main-navbar-collapse {
		width: 100%;
	}
	#sliderCarousel .glyphicon {
		font-size: 0.8em;
	}
	
	.border-left {
		border-left: none;
	}
	
	.logo-size {
		height: 140px;
	}
	
	.site-logo {
		display: block;
		position: absolute;
		top: 1%;
		left: 7%;
		background-color: transparent;
		overflow: visible;
		z-index: 100;
	}

	.carousel-caption {
		font-size: 1.2em;
		text-align: right;
	}
	
	.carousel-caption h4 {
		display: inline-block;
		font-size: 1.0em;
		font-weight: 400;
		background-color: rgba(255,255,255,0.30);
		border: solid 3px #ffffff;
		padding: 4px 8px;
	}
	
	a.social-icons {
		display: inline;
		font-size: 1.3em;
		padding: 0 .25em;
		transition: .3s ease-in-out;
	}
}

@media (max-width: 1200px) {
	
}