////////////////////////////////  Colors, sizes, functions and mixins ////////////////////////////

// Text Color
@textColor: #FFF;

// Brand Color
@brandColor: #d35400;

// Secondary Brand Color
@BrandColor_secondary: #000;

// Darker Branch Color
@brandColor_darker: darken(@brandColor, 8%);

// Ligther text color
@textColor_lighter: lighten(@textColor, 15%);

// Remove topbar titles at width (icons are still shown):
@removeTopbarTitles: 500px; // at this width, the titles will be removed

// Logo
@logoWidthDesktop: 230px;
@logoMarginDesktop: -15px;
@logoWidthDesktopFixed: 195px;
@logoMarginDesktopFixed: -12px;

// Header
@headerHeight: 110px;

// Responsive Header
@responsiveHeaderHeight: 100px;
@responsiveHeaderHeightFixed: 60px;

// Presentation Header Height:
@presentationHeaderHeight: 66px;

// Footer 
@footerHeight: 370px;
@footerReferencesHeight: 120px;
@footerHeightWithReferences: @footerHeight + @footerReferencesHeight;
@footerLogoWidth: 275px;
@footerLogoMargin: 105px;

// Margins
@marginBottom: 20px;
@marginTop: 20px;

// Branch Transparent Background
.brandTransparentBackground() {
	background: fade(#FFF, 90%);
}

/* Screen sizes */
@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1060px;
@mobile_nav_width: 670px;



// Fade in and out
.easeInOut (@duration: 0.5s) {
	transition: all @duration ease-in-out;
    -webkit-transition: all @duration ease-in-out;
    -moz-transition: all @duration ease-in-out;
}

.ease() {
	-webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease;
}


// Shaddow
.shaddow() {
	-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.25);
	box-shadow: 0px 1px 1px rgba(0,0,0,0.25);
}


//////////////////////////////// Standard stuff ////////////////////////////

/*  HTML & Body  */
html {  overflow: -moz-scrollbars-vertical; overflow-y: scroll; }
body { 
	font-family: Helvetica, Arial; 
	min-width: 280px;
	color: @textColor;
	font-family: "Proxima Nova", "Helvetica", Arial;
	font-weight: 300;
}

html, body {
	height:100%;
}

/* wrapper */
#wrapper {
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin-bottom: -@footerHeight;
	padding-bottom: 80px;
	background-position-x: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: 50% 50%;
	
	&.hasReferences {
		margin-bottom: -@footerHeightWithReferences;
	}
	
	@media screen and (max-width: @screen-sm-min) {
		margin-bottom: 0 !important;
	}
	
}

/* Grouping */
.group:before, .group:after { content: ""; display: table;} .group:after {   clear: both;}.group {   zoom: 1; }

/* Custom bootstrap settings */
a { color: @textColor; outline: 0 !important; }
a:hover { color:@brandColor; text-decoration: none; }
p{margin:0 0 10px;}
a.muted:hover,a.muted:focus{color:#808080;}
.text-warning{color:#c09853;}
a.text-warning:hover,a.text-warning:focus{color:#a47e3c;}
.text-error{color:#b94a48;}
a.text-error:hover,a.text-error:focus{color:#953b39;}
.text-info{color:#3a87ad;}
a.text-info:hover,a.text-info:focus{color:#2d6987;}
.text-success{color:#468847;}
a.text-success:hover,a.text-success:focus{color:#356635;}
h1,h2,h3,h4,h5,h6 {font-weight: 400; margin: 0 0 10px 0; font-family: "Proxima Nova", "Helvetica", Arial; }
h1,h2,h3{line-height:115%;}
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
h4{font-size:17.5px;}
h5{font-size:14px;}
h6{font-size:11.9px;}
hr { border-top: 1px solid #2f2f2f; }

.fadein {
	display: none;
}

.marginBottom {
	margin-bottom: @marginBottom;
}

.marginTop {
	margin-top: @marginTop;
}
// Element overlay 
.element-overlay {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	top:0;
	background: fade(@brandColor, 75%);
	color: #FFF;
	visibility: hidden;
	
	@media screen and (max-width: @screen-sm-min) {
		display: none !important;
	}
	
	.fa {
		font-size: 45px;
		position: absolute;
		top:50%;
		left: 50%;
		margin-top: -22px;
		margin-left: -22px;
	}
	
}

.element-overlay-activate:hover {
	.element-overlay {
		visibility: visible;
	}
}


//////////////////////////////// Header ////////////////////////////

@topBarHeight: 35px;

#topbar {
	height: @topBarHeight;
	width: 100%;
	background: @brandColor;
	color: #FFF;
	position: relative;
	z-index: 140;
	
	.container {
		position: relative;
	}
	
	// language shifter
	#wpml-language-switcher {
		top: 50%;
		margin-top: -12px;
		position: absolute;
		right: 0px;
		
		img {
			margin-left: 6px;
		}
		
	}
	
	// topbar links
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		float: left;
		
		li {
			float: left;
			
			&:last-child {
				a { border-right: solid 1px lighten(@brandColor, 5%); }
			}
			
			a {
				display: block;
				height: @topBarHeight;
				line-height: @topBarHeight;
				color: #FFF;
				padding: 0 15px 0 15px;
				border-left: solid 1px lighten(@brandColor, 5%);
				
				&:hover {
					color: @BrandColor_secondary;
				}
				
				.fa {
					margin-right: 8px;
				}
				
			}
			
			@media screen and (max-width: @removeTopbarTitles) {
				
				.title {
					display: none;
				}
				
				.fa {
					margin-right: 0 !important;
				}
				
			}			
			
			&.last {
				a {
					border-right: solid 1px lighten(@brandColor, 5%);
				}
			}
			
		}
		
	}
	
	
}


//////////////////////////////// Header ////////////////////////////

.headerSpacer {
	height: @headerHeight;
	width: 100%;
	display: none;
	
	@media screen and (max-width: @screen-md-min) {
		height: @responsiveHeaderHeight
	}
	
	&.show {
		display: block;
	}
}

#header {
	width: 100%;
	background: #000;
	height: auto;
	z-index: 100;
	.shaddow();
	z-index: 140;
	position: relative;
	
	#showMenu {
		display: none;
	}
	
	.container {
		position: relative;
		
	}
	
	#logo {
		width: @logoWidthDesktop;
		left: 12px;
		top:50%;
		margin-top: @logoMarginDesktop;
		position: absolute;
		
		img { width: 100%; }
	}
	
	/* mainmenu */
	#mainmenu {
		float: right;
		
		ul {
			list-style: none;
			padding: 0;
			font-size: 1.12em;
			height: @headerHeight;
			line-height: @headerHeight;
			margin: 4px 0 0 0;
			
			li {
				float: left;
				margin-left: 40px;
				border-bottom: 4px solid transparent;
				
				
				&:first-child { margin-left: 0; }
				
				a {
					color: @textColor;
					
					&:hover { color:@brandColor; }
				}
				
				&.current_page_item, &.current-page-ancestor {
					border-bottom: 4px solid@brandColor;
				
					a { 
						color:@brandColor; 
					}
				}
				
			}
		}
		
	}
	
	// fixed menu
	&.fixed {
		position: fixed;
		top:0px;
		background: rgba(0,0,0, .90);
		
		&.is_logged_in {
			top: 32px;
		}
		
		#mainmenu {
			font-size: 0.95em;
		
			ul {
				height: 55px;
				line-height: 55px;
			}
		}
		
		#logo {
			width: @logoWidthDesktopFixed;
			margin-top: @logoMarginDesktopFixed;
		}
	}
}


// Responsive Menu

@media screen and (min-width: 992px) {
	#header {
		#mainmenu {
			ul {
				display: block !important;
			}
		}
	}
}

@media screen and (max-width: @screen-md-min) {

	#reponsiveNavOverlay {
		position: fixed;
		z-index: 140;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.75);
		display: none;
	}
	
	#header {
		
		.container {
		
			.col-sm-12 {
				height: @responsiveHeaderHeight;
			}
		}
	
		#showMenu {
			display: block;
			font-size: 40px;
			position: absolute;
			right: 12px;
			top:50%;
			margin-top: -24px;
			
			&:hover {
				cursor: pointer;
			}
			
			&.active {
				color:@brandColor;
			}
			
		}
		
		#mainmenu {
			
			ul {
				display: none;
				position: absolute;
				left: 12px;
				background:@brandColor;
				right: 12px;
				z-index: 150;
				height: auto !important;
				line-height: 100% !important;
				top: @responsiveHeaderHeight;
				margin-top: 0;
				
				li {
					margin: 0;
					float: none;
					border-bottom: 0 !important;
					
					a {
						display: block;
						width: 100%;
						padding: 12px;
						color: #FFF;
					
						&:hover {
							color: @BrandColor_secondary;
						}	
						
					}
					
					&.current_page_item, &.current-page-ancestor {
						
						a {
							background: darken(@brandColor, 10%);
							color: #FFF;
						} 
						
					}
					
				}
				
			}
			
			
		}
		
		&.fixed {
		
			.container {
				.col-sm-12 {
					height: @responsiveHeaderHeightFixed;
				}
				
				#mainmenu {
					ul {
						top: @responsiveHeaderHeightFixed;
					}
				}
				
			}
		}		
	
	}
	
}


//////////////////////////////// Presentation ////////////////////////////

/* action button */
.actionbutton, input[type=submit] {
	border: 0;
	display: inline-block;
	background:@brandColor;
	border-bottom: 2px solid darken(@brandColor, 8%);
	color: #FFF !important;
	padding: 0 15px 0 15px;
	font-size: 1.05em;
	text-align: center;
	height: 40px;
	line-height: 40px;
	
	&:hover {
		background: darken(@brandColor, 5%);
		text-decoration: none !important;
		border-bottom: 2px solid darken(@brandColor, 15%);
	}
	
	.fa {
		margin-left: 4px;
	}	
	
	&.large {
		font-size: 1.3em;
		height: 48px;
		line-height: 48px;
		padding: 0 20px 0 20px;
		
		.fa {
			margin-left: 8px;
		}		
		
	}

		
}

// Flexslider flex-control
.flex-control-nav { position: absolute; bottom: 0px; text-align: center; right: 15px; z-index: 20; }
.flex-control-nav li {margin: 0 4px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a { text-indent: -9999px; width: 10px; height: 10px; display: block; background: #FFF; 	-moz-border-radius: 100px;-webkit-border-radius: 100px; border-radius: 100px; border: 2px solid transparent;

}
.flex-control-paging li a:hover { cursor: pointer; border: 2px solid #FFF; background:@brandColor; }
.flex-control-paging li a.flex-active { background:@brandColor; }	

.presentation {

	&.marginTop {
		margin-top: @marginTop;
	}
	
	a.box:hover {
		.text {
			color: @textColor;
		}
	}
	
	.box {
		font-size: 16px;
		position: relative;
		display: block;
		
		.inner {
			background: #000;
			position: relative;
			.shaddow();
			
			@media screen and (max-width: @screen-sm-min) {
				height: auto !important;
			}
			
		}
		
		&.fourth, &.third {
			margin-right: 0;
		}
		
		.header {
			height: @presentationHeaderHeight;
			background: #1c1c1c;
			position: relative;
			display: block;
			line-height: @presentationHeaderHeight;
			
			.fa {
				font-size: 38px;
				color:@brandColor;
				position: absolute;
				top:50%;
				margin-top: -19px;
				left: 15px;
			}
			
			.title {
				font-weight: 400;
				font-size: 1.25em;
				margin-left: 15px;
				
			}
		}
		
		.image {
			
			img { width: 100%; }
		}
		
		.text {
			padding: 15px 15px 70px 15px;
			
			a {
				color:@brandColor;
				
				&:hover { color:@brandColor; text-decoration: underline; }
			}
		}
		
		.learnmore {
			right: 15px;
			left: 15px;
			display: block;
			position: absolute;
			bottom: 15px;
		}
		
	}

	
	// Slideshow 
	&.slideshow {
		display: none;
		
		.box {
			
			.inner {
				padding: 5px;
				position: relative;
				
				.pagebend {
					position: absolute;
					bottom: 22px;
					left: -17px;
					z-index: 1;
					background:@brandColor;
					
					@media screen and (max-width: @screen-sm-min) {
						display: none;
					}
					
					.block {
						width: 32px;
						height: 83px;
						position: relative;
						z-index: 10;
					}
					
					.triangle {
						width: 0;
						height: 0;
						border-style: solid;
						border-width: 12px 0px 0 17px;
						border-color: darken(@brandColor, 10%) transparent transparent transparent;	
						z-index: 5;
						position: absolute;		
						bottom: -12px;			
					}
					
				}
				
				.frontpage-slideshow {
					
					.flex-control-nav {
						bottom: 10px;
						right: 25px;
						z-index: 20;
						
						@media screen and (max-width: @screen-sm-min) {
							top:25px;
							bottom: auto;
						}
					}
				
					ul.slides li { 	
							position: relative; 
							height: 350px;
							background-position-x: center;
							background-repeat: no-repeat;
							background-size: cover;
							background-position: 50% 50%;
													
							@media screen and (max-width: @screen-sm-min) {
								height: 250px;
							}
							
						.destination {
							display: block;
							position: absolute;
							right: 0;
							left: 0;
							bottom: 0;
							top:0;
						}	
						
						.description {
							position: absolute;
							bottom: 17px;
							height: 83px;
							background:@brandColor;
							color: #FFF;
							z-index: 20;
							padding: 19px 30px 20px 0px;
							line-height: 115%;
							
							@media screen and (max-width: @screen-sm-min) {
								font-size: 14px;
								padding: 15px;
								height: auto;
								background: fade(@brandColor, 95%);
							}
							
							.title {
								font-size: 1.5em;
								line-height: 115%;
							}
							
							.subtitle {

							}
							
						}
						
					}
				}
				
			}
		}
		
	}
	
	
	// frontpage shortcuts
	&.frontpage {
		
		.box {
			margin-top: 30px;
			
			.header {
				height: 60px;
			}
			
			.fa {
				display: none;
			}
			
			.title {
				font-size: 1.1em;
				margin-top: -10px;
				left: 15px;
			}
			
			&.showIcons {
				.fa {
					font-size: 30px;
					margin-top: -14px;
					color:@brandColor;
					display: block;
				}
				
				.title {
					margin-left: 58px;
					
				}
				
			}			
			
			.text {
				font-size: 0.9em;
			}
			
		}
	}
	
	// single box
	&.single {
		margin-top: @marginTop;
		
		.box {
			width: 100%;
			
			.inner {
				
				&.about {
					overflow: hidden;
				}
			
				@media screen and (max-width: @screen-sm-min) {
					font-size: 13px;
				}

				@media screen and (max-width: @screen-md-min) {
					font-size: 14px;
				}				
				
			}
			
			.text { padding: 15px; }
			
			.header {
				height: auto;
				padding: 30px 15px 15px 38px;
				z-index: 25;
				
			
				.title { 
					position: relative;
					left: auto;
					float: left;
					line-height: 115%;
				
				}
				
			}
				
			.image {
				position: absolute;
				right: 0;
				width: 42%;
				bottom: 0;
				top:75px;
				z-index: 15;
				background-position-x: center;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: 50% 50%;
				
				@media screen and (max-width: @screen-sm-min) {
					position: relative;
					width: 100%;
					top: auto;
					clear: both;
					right: auto;
					bottom: auto;
					height: 250px;
				}
			}
			
			.image-cut {
				position: absolute;
				width: 150px;
				bottom: 0;
				top:75px;
				z-index: 20;
				background-repeat: no-repeat;
				background-position: right top;
				background-image: url('img/about_image_cut.png');
				right: 33%;
				
				@media screen and (max-width: @screen-sm-min) {
					display: none;
				}
				
				@media screen and (max-width: @screen-md-min) {
					transform:rotate(-6deg);
					-ms-transform:rotate(-6deg); /* IE 9 */
					-webkit-transform:rotate(-6deg); /* Opera, Chrome, and Safari */	
					right: 31%;		
				}	
				
			}
			
			.left {
				width: 58%;
				float: left;
				position: relative;
				z-index: 30;
				font-size: 0.92em;
				
				@media screen and (max-width: @screen-sm-min) {
					width: 100%;
				}
				
			}
			
			.right {
				float: right;
				width: 48%;
			}
		}
	}
	
	// services
	&.services {
		
		.box {
			margin-top: @marginTop;
		}
		
		.text {
			font-size: 0.9em;
		}
	}
	
}


//////////////////////////////// Form ////////////////////////////

.form {
	
	.box {
		
		.title {
			left: 65px !important;
		}
	}
	
	form {
	
		.group {
			margin-bottom: 15px;
			
			&.checkboxes {
				.field { margin-top: 5px; }
				label { width: 100%; 
					&:hover { cursor: pointer; color: @brandColor; }
				}
				.wpcf7-list-item-label { padding-left: 8px; font-weight: 300; }
			}
		}
		
		.title {
			width: 40%;
			float: left;
			font-weight: 400;
			margin-top: 4px;
		}
		
		.field {
			width: 60%;
			float: right;
			
			.child {
				.checkbox { display: inline-block; margin-right: 6px;}
				label { font-weight: 300; font-size: 0.95em; height: 30px; width: 100%;
				
					&:hover { cursor: pointer; color: @brandColor; }
				
				 }
			}
			
			.helptext {
				font-size: 0.8em;
				color: #555;
			}
			
			.actionbutton {
				width: 100%;
			}
			
			.input, textarea { 
				width: 100%; 
				padding: 6px 12px 6px 12px;
				font-size: 0.9em;
				border: 1px solid #D7D7D7;
				
			}
			
			textarea {
				height: 60px;
			}
			
			textarea.contact {
				height: 120px;
			}
			
			input[type=submit] {
				width: 100%;
			}
			
			// validation
			.wpcf7-not-valid-tip {
				font-size: 0.8em;
				margin-top: 4px;
				color: #c0392b;
			}
			
		}
		
	}
	
	.wpcf7-response-output {
		border: 0;
		color: #FFF;
		margin: 0;
		padding: 15px;
	
		&.wpcf7-validation-errors {
			background: #c0392b;
		}
		
		&.wpcf7-mail-sent-ok {
			background: #32ce74;
		}
	
	}
	
}

//////////////////////////////// Contact ////////////////////////////

#contact_info {
	list-style: none;
	padding: 0;
	padding-top: 15px;
	
	li {
		margin-bottom: 6px;
	}
	
	.icon {
		width: 40px;
		float: left;
		font-size: 1.6em;
		color: #555;
	}
	
	.title {
		float: left;
		margin-top: 7px;
		
		a { 
			 color: @textColor;
			 
			 &:hover {
				color: @brandColor;
			 }
			 
		}
	}
	
}


//////////////////////////////// Page ////////////////////////////

/* page header */

#pageHeader {
	height: auto;
	color: #000;
	
	.brandTransparentBackground();
	
	.container {
		height: 150px;
		position: relative;
		
	@media screen and (max-width: @screen-md-min) {
		font-size: 13px;
	}
	
	@media screen and (max-width: @screen-sm-min) {
		font-size: 10px;
		height: 120px;
	}		
		
	}
	
	.content {
		position: absolute;
		display: none;
	}
	
	h1 {
		margin-bottom: 0px;
		font-size: 2.8em;
	}
	
	h2 {
		font-weight: 300;
		margin-bottom: 0px;
	}
	
}


//////////////////////////////// Content ////////////////////////////

#contentarea {
	margin-top: @marginTop;
	position: relative;


	// Post List (for news and stuff)
	#postList {
	
		.news-image {
			
			img {
				width: 100%;
			}
			
		}
	
		.contentBoxHeader {
			padding-bottom: 5px;
		}
		
		.navigation {
			.next-posts { float: left; }
			.prev-posts { float: right; }
			
			a {
				&:hover {
					text-decoration: none !important;
					color: @textColor !important;
				}
			}
			
		}
		
		h3 {
			margin-top: 0;
		}
		
		&.list {
			p {
				margin-bottom: 0;
			}
		}
		
		.date {
			font-size: 0.95em;
			color: #767676;
			margin-top: -2px;
		}
		
	}			

	&.notfound {
		text-align: center;
		.inner { padding: 25px !important; }
	}
	
	/* content */
	#content {
	
		@media screen and (max-width: @screen-sm-min) {
			font-size: 13px;
		}
	
		// contentboxes start
		
		.contentBox {
			background: #000;
			.shaddow();
			display: block;
			position: relative;
			
			.contentBoxHeader {
				background: #1c1c1c;
				line-height: 115%;
				margin: 0;
				padding: 17px 15px 15px 15px;
			}
			
			&.marginTop {
				margin-top: @marginTop;
			}
			
			.inner {
				padding: 15px;
				position: relative;
				
				p:last-child { margin-bottom: 0; }
				
			}
			
			iframe {
				width: 100% !important;
			}
			
			h1 {
				margin-bottom: 5px;
			}
			
			h2 {
				margin-bottom: 6px;
			}
			
			p {
				margin-bottom: 14px;
			}
			
			.topImage {
				img { width: 100%; }
			}
			
			a {
				color: @brandColor;
				
				&:hover {
					text-decoration: underline;
					color:@brandColor;
				}
			}
			
			// Search page
			&.search {
			
				input[type=text] {
					width: 220px;
					display: inline-block;
					
					@media screen and (max-width: 350px) {
						width: 100%;
						margin-bottom: 10px;
					}
					
				}
				
				input[type=submit] {
					display: inline-block;
					height: 34px;
					line-height: 34px;
					
					@media screen and (max-width: 350px) {
						width: 100%;
					}
				}
			
				
			}
			
			// Contact form
			&.contactform {
			
				.required {
					color: #c0392b;
				}
				
				.alert {
					margin-bottom: 0;
				}
				
			}
			
			
			// Standard content box with different options for customizing
			&.standard {
			
				.contentSection {
					margin-bottom: 20px;
					position: relative;
					
					&:last-child, &:only-child {
						margin-bottom: 0;
					}
					
					// Text
					&.text {
						
						.attachedImage {
							float: right;
							margin: 0 0 20px 20px;
							width: 44%;
							display: block;
							color: @textColor;
							
							text-decoration: none;
							
							@media screen and (max-width: @screen-md-min) {
								width: 100%;
								float: none;
								margin: 0 0 15px 0;
							}
							
/*
							&:hover {
								border: 1px solid @brandColor;
							}
*/
							
							img {
								width: 100%;
							}
							
							.image_text {
								line-height: 115%;
								padding: 10px;
								
							}
							
						}
						
					}
					
					// Gallery
					&.gallery {
						
						ul {
							list-style: none;
							padding: 0;
							margin-bottom: 0;
							
							li {
							
								@media screen and (max-width: @screen-sm-min) {
									width: 25%;
									float: left;
								}
								
								@media screen and (max-width: 400px) {
									width: 33.333333333333%;
								}
								
								a {
									display: block;
									
									&.thumbnail {
										background: none;
									
										&:hover {
											border-color: @brandColor;
										}
									}
									
									img {
										width: 100%;
									}
									
								}
								
							}
							
						}
						
					}
					
					// Downloads
					&.downloads {
					
						h3 {
							margin-bottom: 0;
						}
						
						table {
							td {
								background: none;
							}
						}
						
						hr {
							margin: 10px 0 10px 0;
						}
						
						.download_download {
							width: 100px;
							text-align: center;
						}
						
						.download_size {
							width: 100px;
						}
						
						.download_title {
							
							a {
								color: @textColor;
								
								&:hover {
									text-decoration: none;
									color: @brandColor;
								}
								
							}
							
						}
					
					}
					
					// Google Maps
					&.maps {
						
						.acf-map {
							height: 300px;
							
							@media screen and (max-width: @screen-sm-min) {
								height: 200px;
							}
							
						}
						
					}
					
					
					// Image
					&.image {
						text-decoration: none !important;
						text-align: center;
						
						.imageTitle {
							background: @brandColor;
							color: #FFF;
							padding: 15px;
							position: absolute;
							bottom: 20px;
							font-size: 1.2em;
							line-height: 115%;
						}
			
						
					}
				
					
				}

			}
			
			// Call-to-action
			&.c2a {
				text-align: center;
				
				.inner {
					padding: 25px 15px;
				}
				
				h2 {
					font-size: 1.7em;
					width: 95%;
					margin: 0 auto 5px auto;
				}
				
				.description {
					color: @textColor_lighter;
					margin: 5px auto 10px auto;
					width: 95%;
				}
				
				.actionbutton {
					margin-top: 6px;
					
					.fa {
						position: relative;
						bottom: -2px;
					}
					
				}
			
			}
			
			// Single image
			&.image {
				text-decoration: none !important;

				img {
					width: 100%;
				}
				
				.imageTitle {
					background: @brandColor;
					color: #FFF;
					padding: 15px;
					position: absolute;
					bottom: 25px;
					font-size: 1.2em;
					line-height: 115%;
				}
	
				
			}
			
			// Video
			&.video {
				vertical-align:bottom;
				background: #ededed;
			}
			
			// Google Maps
			&.maps {
				
				.acf-map {
					height: 300px;
					
					@media screen and (max-width: @screen-sm-min) {
						height: 200px;
					}
					
				}
				
			}
			
			// References
			&.referenceBox {
				margin-bottom: @marginBottom;
				
				a.anchor {
					display: block;
					position: relative;
					top: -85px; 
					visibility: hidden;
				}
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.descriptionArea {
					float: left;
					width: 60%;
					
					&.noGallery {
						width: 100%;
					}
					
					@media screen and (max-width: @screen-sm-min) {
						float: none;
						width: 100%;
						margin-bottom: 20px;
					}					
					
				}
				
				.imageGallery {
					float: right;
					width: 36%;
					
					@media screen and (max-width: @screen-sm-min) {
						float: none;
						width: 100%;
					}
					
					.feature-link {
						display: block;
						position: relative;
					}
					
					.featured-image {
						width: 100%;
					}
					
					ul {
						list-style: none;
						margin: 8px -8px 0 -8px;
						padding: 0;
					
						
						li {
							width: 33.333333%;
							float: left;
							
							
							a {
								display: block;
								position: relative;
								margin: 8px 8px 8px 8px;
							}
							
							img {
								width: 100%;
							}
							
						}
						
					}
					
				}
				
			}
			
			
			
			
			
			
			
		}
			
		// contentboxes end
		
	}
	
	
	/* sidemenu */
	#sidemenu {
		position: static;
		margin-bottom: 25px;
		
		
		ul.sideNavigation {
			background: #000;
			list-style: none;
			padding: 0;
			font-size: 1.15em;
			font-weight: 400;
			padding: 0 10px 0 10px;
			margin-bottom: 0;
			.shaddow();
			
			@media screen and (max-width: @screen-sm-min) {
				position: relative !important;
				top: auto !important;
				bottom: auto !important;
			}
			
			
			li {
				border-top: 1px solid #2f2f2f;
				padding: 10px 5px 10px 5px;
				
				&:first-child {
					border-top:0px;
				}
				
				&.current_page_item {
					a { color: @brandColor; }
					
					ul.children {
						a {
							color: @textColor;
						}
					}
					
				}
				
				ul.children {
					display: none;
				}
				
				&.page_item_has_children.current_page_item, &.page_item_has_children.current_page_ancestor  {
				
					ul.children {
						padding-left: 15px;
						font-size: 0.8em;
						display: block;
						
						li {
							border-top: 0;
							line-height: 110%;
							padding: 6px 6px 6px 0px;
							
							a {
								&:hover {
									color: @brandColor;
								}
							}
							
						}
						
					}					
					
				}
				
				
			}
			
		}
		
	}
	
	// fixed sidemenu 
	&.fixed {
		#sidemenu ul.sideNavigation {
			position: fixed;
			top:63px;
			
			&.is_logged_in {
				top: 95px;
			}
			
		}
	}
	
	&.fixed.reached {
		#sidemenu ul.sideNavigation {
			position: absolute;
			top: auto;
			bottom: 0px;
		}
		
	}
	
}


//////////////////////////////// Top media ////////////////////////////

.topMedia {
	/* border-bottom: 5px solid @brandColor; */
	border: 5px solid #000;

	// Comparison
	&#comparison {
		width: 100% !important;
		
		.ui-draggable {
			background: #FFF;
			opacity: 1 !important;
			width: 5px !important;
			
			div {
				background: none !important;	
			}
			
			
			.drag-icon {
				font-size: 25px;
				background: @brandColor;
				width: 42px;
				height: 42px;
				color: #FFF;
				-moz-border-radius: 999px;
				-webkit-border-radius: 999px;
				border-radius: 999px;
				text-align: center;
				position: absolute;
				left: -22px;
				top: 50%;
				margin-top: -19px;
				border: 5px solid #FFF;
					
				&:hover {
					background: @brandColor_darker;
					cursor: col-resize;
				}
					
				.fa {
					height: 29px;
					vertical-align: middle;
				}

			}
			
		}
		
	}
	
	// Single Image
	&#singleImage {
		img { width: 100%; } 
	}
	
	// Video
	&#video {
		iframe { width: 100%; }
	}

}

.balinks {
	display: none;
	margin-top: -36px;
	z-index: 90;

	.balink a {
		display: inline-block;
		background-image: url('img/transparent_green.png');
		width: auto;
		color: #FFF !important;
		padding: 8px 10px 8px 10px; 
		
		&:hover {
			text-decoration: none !important;
			background: #FFF;
			color: @brandColor !important;
		}
	}
}


//////////////////////////////// Footer ////////////////////////////

#footer, .push { 

	height:@footerHeight;
	
	&.hasReferences {
		height: @footerHeightWithReferences;
	}

	@media screen and (max-width: @screen-sm-min) {
		height: auto !important;
		overflow: visible !important;
	}

 }

#footer {
	position: relative;
	width:100%;
	background-color:@brandColor;
	color: #FFF;
	overflow-y: hidden;
	
	@media screen and (max-width: @screen-sm-min) {
		
		.inner {
			padding: 12px;
			background: lighten(@brandColor, 5%);
		}
		
	}
	
	#copyright {
		background: #000;
		color: #FFF;
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 10px;
		
		@media screen and (max-width: @screen-sm-min) {
			position: relative;
			bottom: auto;
			margin-top: @marginTop;
		}
		
		a {
			color:@brandColor;
			
			&:hover {
				text-decoration: underline;
			}
			
		}
		
		.left {
			float: left;
		}
		
		.right {
			float: right;
		}
		
		@media screen and (max-width: 650px) {
			text-align: center;
		
			.left, .right {
				float: none !important;
				width: 100%;
			}
		}		
		
	}
	
	.bottom {
		
		.row {
			padding-top: 40px;
			
			@media screen and (max-width: @screen-sm-min) {
				padding-top: 0;
			}
			
			.column {
				
				@media screen and (max-width: @screen-sm-min) {
					margin-top: @marginTop;
				}
				
				h2 {
					font-weight: 400;
					font-size: 1.4em;
				}
				
				ul {
					list-style: none;
					padding: 0;
					
					li {
						margin-bottom: 10px;
						line-height: 115%;
						
						.date {
							color: #282828;
							display: inline-block;
							display: none;
						}
						
						ul.children {
							display: none;
						}
						
						&.current_page_item {
							/* a { color: @brandColor; } */
						}
					}
				}
				
				a {
					color: #FFF;
					
					&:hover {
						color: @BrandColor_secondary;
					}
				}
				
				&.contact {
					.text {
						a {
							color: @BrandColor_secondary;
							font-weight: bold;
							
							&:hover {
								text-decoration: underline;
							}
						}
					}
				}
				
				&.logo {
					margin-top: @footerLogoMargin;
					
					img {
						width: @footerLogoWidth;
					}
				
					@media screen and (max-width: @screen-md-min) {
					 	display: none;
					}
				}
				
			}
		}
		
	}
	
	// References in footer
	#footer-references {
		height: @footerReferencesHeight;
		background: #000;
		color: @BrandColor_secondary;
		font-size: 1.6em;
		
		@media screen and (max-width: @screen-sm-min) {
			display: none;
		}
		
		.container {
			height: @footerReferencesHeight;
			position: relative;
		}
		
		.references-text {
			line-height: 115%;
			position: absolute;
			font-weight: 400;
			color: #FFF;
			
			@media screen and (max-width: @screen-sm-min) {
				display: none;
			}
			
		}
		
		.reference-logo {
			width: 25%;
			text-align: center;
			float: left;
			position: relative;
			
			@media screen and (max-width: @screen-md-min) {
			
			}
			
			@media screen and (max-width: @screen-md-min) {
				width: 33.333333%;
				
				&.reference_4 {
					display: none;
				}
				
			}
		
			img {
				width: 80%
			}
			
		}
		
	}
	
	// facebook logo and text
	#facebook {
		padding-top: 25px;
		display: block;
		font-size: 1.1em;
		
		.fa {
			font-size: 30px;
			float: left;
		}
		
		.title {
			float: left;
			margin-left: 10px;
			line-height: 115%;
		}
		
	}
	
}
	
//////////////////////////////// Staff ////////////////////////////

#staff {
	list-style: none;
	padding: 0;
	
	.image {
		float: left;
		width: 38%;
		img { width: 100%; }
	}
	
	.details {
		float: right;
		width: 59%;
		
		h2 {
			margin-bottom: 0;
		}
		
		.title {
			margin: -5px 0 4px 0;
			color: #757575;
			font-size: 0.9em;
		}
		
	}
	
	
}