@import 'grid.import.less';
@import 'var.import.less';
@import 'fonts.import.less';
@import 'rules.import.less';
@import 'anim.import.less';

@import 'base.import.less';
@import 'nav.import.less';

@import 'forms.import.less';
@import 'tables.import.less';
@import 'button.import.less';

@import 'fa.import.less';

//ADD CUSTOM AND OVERRIDE CODE HERE
		



//HOME

#main {
	background-color: black;
	background-attachment: fixed;
	width: 100%;
}
	.hide { visible: none; position: none; }

.section {
	position: relative;

	img { position: relative; }
	a.invisible { color: #000; font-weight: normal; text-align: center;}

	.titler {
		position: absolute;
			top: 70px;

		width: 100%;
		text-align: center;
		background: 0 none !important;
		line-height: 0.8em;

		.navi;
		color: #FFF;
		text-transform: uppercase;
		letter-spacing: .2rem;
		font-size: 6em;
	}
			#extraspace { top: 15px; }
	.tagger {
		position: absolute;
			top: 150px;
			left: 50%;
			margin-left: -200px;
			width: 400px;

			display: block;
			background: #FFFFFF;
			.border-radius(50px);
			padding: 10px 20px;

			.open;
			letter-spacing: .3rem;
			font-weight: bolder;
			text-transform: uppercase;
			font-size: 0.8em;
			text-align: center;
	}
	.sider, .sidein {
		position: absolute;
			top: 10px;
			right: 10px; 
		width: 350px;
		height: 100%;
		padding-bottom: 50px;
		
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		div {
			.border-radius(50px);
			background-color: @lightblack;
			width: 100%;
			padding: 15px 20px;
			margin-bottom: 10px;

			color: #FFF;
			font-size: 1.2em;

			a {
				display: block;

				text-decoration: underline;
				color: #FFF;
				&:hover { color: @gold; }
			}
		}
		
		.idesc {
			font-size: 0.85em;
			.open;
		}
	}
	p {
		margin: 0;
		padding-bottom: 15px;
	}
	
}
	.side a, .sider a, .sidein a {
		.open;
	}

			#specialtext { font-family: Raleway, sans-serif !important; }

	#page .hero .sidein {
		position: absolute;
			bottom: 0px;
			left: 10px;
		width: 450px;
		padding-bottom: 30px;
	
		.idesc { 
			margin-bottom: 0px;
			font-size: 0.75em;
		}
	}
			
.footer {
	padding: 20px 50px;
	background: @darkestgrey;

	color: #FFF;
	font-family: 'Roboto Condensed', sans-serif;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	
	a { 
		margin: 0 none;
		padding: 0 5px;
		color: @keywhite;
		font-size: 0.8em;
	
		&:hover { color: @gold; }
	}

	h6 {
		margin: 5px;
		color: #FFF;
		font-size: 0.85em;
	}
	.icon {
		width: 100%;
		font-size: 0.9em;
		
		span { 
			font-size: 1.1em; 
			margin: 0 0 0 2px;
			padding: 0 none;
			line-height: 2em;
		}
	}
	i {
		font-size: 1.1em;
		background: 0 none;
		border: 0 none;
		padding: 0 none;
		float: left;
		line-height: 2em;
	}
	.menu {
		a { 
			display: block;
			width: 100%;
			text-align: center;
			line-height: 2.3em;
		}
	}
	.credit, .credit a {
		font-size: 0.75em;
		text-align: right;
		margin-bottom: -20px;
	}
}

//=============================
//

.hero {
	.section;
	width: 100%;
	height: auto;
	min-height: 200px;

	.titler {
		position: absolute;
			top: 90px;
			left: 60px;
			
		width: auto;
		text-align: left;

		.navi;
		text-shadow: -1px -0px 2px #000;
	}
}
.copy {
	.open;
	padding: 20px;
	font-size: 1em;  

	a {
		float: none;
		display: inline;
		font-weight: normal;
		color: @darkestgrey;
		text-decoration: underline;
		padding: 0;
	}
}

.side {
	div, div a {
		float: right;
		text-align: right;
	}
	.button {
		text-align: center;
	}
	a {
		color: @key;
	}

	h6 { margin: 20px 0; }
}

.gallery {


}
.horizontal {
	.ten;
	.push(1);
	.caption { 
		height: 100%;
		margin: 10px 2px;
		padding: 2px 4px;

		background: rgba(200, 200, 200, 0.1);
		.border-radius(5px);

		font-size: 0.8em;
		line-height: 1.1em;
	
		img { 
			float: none;
			width: 100%;
			margin: 0 0 0 0;
			.border-radius(5px 5px 0 0);
		}

	}
}

.small, .medium, .vertical {
	width: 100%;
	padding: 10px;
	margin: 0px -10px 10px 0px;
	background: @lightestgrey;

	color: @darkergrey;
	font-size: 0.8em;
}

	.small img {
		float: right;
		height: 170px;
		width: 170px;
		margin: 0 0 0px 10px;
	}

	.medium img { 
		float: right;
		height: 100%;
		width: auto;
		margin: 0;
	}

	.medium.left img { 
		float: left;
	}
	

	#legal .small { font-size: 0.6em; line-height: 1.1em; }

.pull {
	background: @lightestgrey;
	.border-radius(50px);
	margin: 20px 50px 50px 50px;
	padding: 30px 40px;
	width: auto;

	color: @darkergrey;
	font-size: 1.2em;
	line-height: 2em;
	.open;

	a {
		float: none;
		display: inline;
		color: @darkestgrey;
		text-decoration: underline;
		font-weight: normal;
	}
}
	.pullbox {
		.pull;
	
		font-size: 1.1em;
		text-align: center;
		width: 20%;
		padding: 10px 20px;
		.border-radius(30px);
		border: 5px solid @transblack;
		margin: 20px 2% 20px 2%;
		background: @transblack;
	}

.list {
	h3 { 
		margin: 5px 10px;
		line-height: 1em;
	}
}

a.button {
	
	.border-radius(50px);
	.box-shadow(1px 1px 2px #000);

	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	text-decoration: none;

	padding: 5px 10px;

}
a.big {
	display: inline-block;
	margin: 20px;
	padding: 20px 30px;
	position: relative;
		top: 20px;

	font-size: 1.8em;
	letter-spacing: .2rem;

}

.icon.bank {
	i {
		font-size: 3em;
		color: @darkergrey;

		margin: 0px 12px 30px 0;
	}
}
h5, h4, h6, h3 { 
	i, a { font-size: 1em; }
}

// BIOS ===============================

.line {
	display: block;
	height: 1px;
	width: 60%;
	margin: 20px 19% 0 19%; padding: 0;
	
	background: @lightgrey;
}

.bio {
	.copy;
	margin:  40px 40px 0 40px;
	padding-top: 0;

	h2 { display: block; }
	img { 
		float: left;
		margin: 0px 10px;
	}
}

.contactblock {
	width: auto;
	margin-right: 100px;
	margin-top: 0; padding-top: 0;
	.icon { 
		display: block; 
		margin: 0px 20px 5px 0;

		i { margin-right: 4px; }
	
		a { 
			text-decoration: none; 
			.navi;
		}
	}
}
.group {
	.contactblock {
		width: auto;
		margin: auto;
		float: left; 
		.icon { float: left; }
		h6 {
			float: left;
			text-align: left;
			margin: 0 20px 20px 0;
		}
	}
}

.title, .title a, .bold, .bold a { font-weight: bold; }
li + li.title { margin-top: -10px; }
//================================
#maincontact {
	h4 { 
		text-align: center; 
		margin-bottom: 0;
	}
	form { padding: 20px; 
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	input { margin: 2px; flex: 1 0 auto; } 
}
#mainservice {
	padding: 0 10px;
	ul { .twelve;
		display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
			align-content: stretch;

		li {
			display: block;
			height: 5em;
			width: auto;
			margin: 10px;
			flex: 1 0 auto;
			font-size: 1.5em;
			font-weight: bold;
			color: @darkergrey;
			text-align: center;
			padding: 1em;
			padding-top: 2em;
			.stripes;
		}
			.one  {background-color: @contrast; }
			.two {background-color: lighten(#2196f3, 10%);}
			.three {background-color: fadeout(#4caf50, 10%);}
	}

}

//DONATION

.ask { 
	align: justify;
	font-size: 1.3em;
	line-height: 1.5em;
	padding: 0 5em;
}



//BIOS

#bios img {
	display: inline-block;
	float: left;
	margin: 5px 20px 10px 0;
}
	#bios img:first-of-type { margin-top: 0; }
#divider {
	h3 { text-align: right; margin: 0;}

	width: 90%;
	margin: 20px 5%;
	border-bottom: 5px solid @keydark; 
}

#fixleft h4 { text-align: left; }
#fixleft input { margin-right: 10px; }

//BOOKING

#booking { 
	margin-top: 100px; 

	p { padding: 5px 50px; }
 	a { 
		float: none; 
		padding: 0;
	}
}

//PRESS

.pressList {
	.title + li { 
		margin-top: -12px; 
		font-size: 0.9em;
		color: @darkestgrey;
	}

}

//SUPPORT 

.funders {
	width: 100%;
	padding: 10px;

	li { 
		width: auto; 
		
		border: 1px solid @darkergrey;
		padding: 20px;
		margin: 10px;

		font-size: 1.2em;
		line-height: 1.2em;
		color: @darkestgrey;
	}

}

@import 'media.import.less';