/**
EMBEDED FONTS
*/

@font-face {
    font-family: 'IskaHand';
    src: url('library/fonts/iskahand_23102009-webfont.eot');
    src: url('library/fonts/iskahand_23102009-webfont.eot?#iefix') format('embedded-opentype'),
         url('library/fonts/iskahand_23102009-webfont.woff') format('woff'),
         url('library/fonts/iskahand_23102009-webfont.ttf') format('truetype'),
         url('library/fonts/iskahand_23102009-webfont.svg#iskahand23102009Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MonomentRegular';
    src: url('library/fonts/monoment-webfont.eot');
    src: url('library/fonts/monoment-webfont.eot?#iefix') format('embedded-opentype'),
         url('library/fonts/monoment-webfont.woff') format('woff'),
         url('library/fonts/monoment-webfont.ttf') format('truetype'),
         url('library/fonts/monoment-webfont.svg#MonomentRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SabonItalic';
    src: url('library/fonts/sabon_italicosf-webfont.eot');
    src: url('library/fonts/sabon_italicosf-webfont.eot?#iefix') format('embedded-opentype'),
         url('library/fonts/sabon_italicosf-webfont.woff') format('woff'),
         url('library/fonts/sabon_italicosf-webfont.ttf') format('truetype'),
         url('library/fonts/sabon_italicosf-webfont.svg#SabonItalicOsF') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaLTBook';
    src: url('library/fonts/futuralt-book-webfont.eot');
    src: url('library/fonts/futuralt-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('library/fonts/futuralt-book-webfont.woff') format('woff'),
         url('library/fonts/futuralt-book-webfont.ttf') format('truetype'),
         url('library/fonts/futuralt-book-webfont.svg#FuturaLTBook') format('svg');
    font-weight: normal;
    font-style: normal;
}


/**
* COLORS
*/
@black: #000;
@white: #fff;

/**
* FUNCTIONS
*/
.font-stack-futura(@font-size:18px) {
	font-family:'FuturaLTBook', 'Helvetica Neue', Helvetica, Arial;
	font-size:@font-size;
	font-weight:bold;
}

.font-stack-gill-sans(@font-size:18px) {
	font-family:'Gill Sans', 'Helvetica Neue', Helvetica, Arial;
	font-size:@font-size;
	font-weight:bold;
}

.font-stack-sabon(@font-size:18px) {
	font-family:'SabonItalic', 'Helvetica Neue', Helvetica, Arial;
	font-size:@font-size;
	font-weight:normal;
}

.font-stack-monoment(@font-size:18px) {
	font-family:'MonomentRegular', 'Helvetica Neue', Helvetica, Arial;
	font-size:@font-size;
	font-weight:normal;
}

.font-stack-iska(@font-size:18px) {
	font-family:'IskaHand', 'Helvetica Neue', Helvetica, Arial;
	font-size:@font-size;
	font-weight:normal;
}

.hover-ease(@property: color, @time: 0.3s) {
	-webkit-transition: @property @time ease;
	-moz-transition: @property @time ease;
	-o-transition: @property @time ease;
	transition: @property @time ease;
}

/**
* STRUCTURE
*/
body, html {
	margin:0;
	padding:0 50px 50px 0;
}

aside {
	/*background:url('images/arm.png') -100px 240px no-repeat;*/

	background-image:url('images/dot.png'), url('images/arm.png');
	background-position:115px 380px, -135px 210px;
	background-repeat:no-repeat, no-repeat;
	position:fixed;

	&#page-id5 {
		background-image:url('images/dot.png'), url('images/dot.png'), url('images/arm.png');
		background-position:115px 380px, 115px 700px, -135px 525px;
		background-repeat:no-repeat, no-repeat, no-repeat;
	}

	&#page-id11 {
		background-image:url('images/dot.png'), url('images/dot.png'), url('images/arm.png');
		background-position:115px 380px, 115px 550px, -135px 370px;
		background-repeat:no-repeat, no-repeat, no-repeat;
	}

	float:left;
	padding:50px 0 124px 50px;
	nav {
		background:url('images/navigation-background.png') top left no-repeat;
		.font-stack-gill-sans(15px);
		text-transform:uppercase;
		height:311px;
		position:relative;
		width:169px;
		ul {
			left:-8px;
			position:absolute;
			top:110px;
			li {
				line-height:22px;
				padding:8px 0 10px 40px;
				&.current_page_item {
					background:url('images/navigation-item-active.png') top left no-repeat;
				}
				&:hover {
					background:url('images/navigation-item-active.png') top left no-repeat;
				}
				&:first-of-type {
					letter-spacing:9px;
				}
				&:nth-of-type(2) {
					letter-spacing:5px;
				}
				&:nth-of-type(3) {
					letter-spacing:7px;
					margin-top:-3px;
				}
				&:nth-of-type(4) {
					letter-spacing:10px;
					margin-top:-2px;
				}
				&:last-child {
					.font-stack-sabon(14px);
					letter-spacing:2px;
					padding-left:16px;
					margin:8px 0 0 23px;
					&:hover {
						background:none;
					}
					&.current_page_item {
						background:none;
					}
				}
				a {
					color:@black;
				}
			}
		}
	}
	.widget_text {
		clear:both;
		.font-stack-sabon(14px);
		text-align:center;
		margin:60px 0 0 -20px;
	}
	ul.sub-navigation {
		.font-stack-sabon(14px);
		list-style-type:none;
		margin:30px 0 0 0;
		padding:0;
		text-transform:uppercase;
		width:135px;
		&#blog-statement {
			text-transform:none;
			li {
				letter-spacing:1px;
			}
		}
		li {
			&:first-of-type.active, &:nth-of-type(4n+1).active {
				background-image:url('images/sub_navigation_active_item_background.png');
				background-repeat:no-repeat;
				background-position:10px -2px;
			}
			&:nth-of-type(4n+2).active {
				background-image:url('images/sub_navigation_active_item_background.png');
				background-repeat:no-repeat;
				background-position:8px -38px;
			}
			&:nth-of-type(4n+3).active {
				background-image:url('images/sub_navigation_active_item_background.png');
				background-repeat:no-repeat;
				background-position:8px -74px;
			}
			&:nth-of-type(4n).active {
				background-image:url('images/sub_navigation_active_item_background.png');
				background-repeat:no-repeat;
				background-position:8px -118px;
			}
			/*&.active {
				background-image:url('images/sub_navigation_active_item_background.png');
				background-repeat:no-repeat;
				background-position:10px -2px;
			}*/
			a {
				border-bottom:3px solid @black;
				border-top:1px solid @black;
				display:block;
				margin:0 0 2px 9px;
				padding:7px 0 5px 0;
				text-align:center;
			}
			&:first-of-type {
				a {border-top:0;}
			}
			&:last-of-type {
				a{border-bottom:0;}
			}
		}
		a {
			color:@black;
		}
	}
}

section {
	margin-left:250px;
	position:relative;
	&.content {
		float:left;
		margin:50px 0 0 250px;
		width:740px;
		&#home {
			background-image:url('images/marker.png'), url('images/marker.png');
			background-position:47px 124px, bottom right;
			background-repeat:no-repeat, no-repeat;
			padding:58px 0 0 74px;
			text-align:center;
			width:666px;
			p.iska {
				font-size:27px;
			}
			p.monoment {
				font-size:35px;
			}
		}
		&#about {
			background-image:url('images/marker.png'), url('images/marker.png'), url('images/marker.png');
			background-position:47px 124px, 780px 124px, bottom right;
			background-repeat:no-repeat, no-repeat;
			padding:105px 74px 0 74px;
			width:660px;
			article {
				.font-stack-sabon(14px);
				/*&:first-of-type {
					h2 {
						background:url('images/x.png') 4px 6px no-repeat;
					}
				}*/
			}
			h2 {
				background:url('images/marker-small.png') 4px 12px no-repeat;
				border-bottom:4px solid @black;
				.font-stack-gill-sans(12px);
				font-weight:bold;
				letter-spacing:2px;
				padding:3px 0 0 32px;
				text-transform:uppercase;
			}
		}

		a#to-top {
			clear:both;
			color:@white;
			display:block;
			background:@black;
			.font-stack-iska(20px);
			text-align:center;
			margin:20px 0;
			&:hover {
				color:@black;
				background:@white;
			}
		}

		&#works {
			padding:125px 0 0 12px;
			article {
				clear:both;
				width:668px;
			}
			span.year {
				background:url('images/marker.png') top right no-repeat;
				display:block;
				float:left;
				.font-stack-sabon(12px);
				line-height:10px;
				width:60px;
			}
			ul {
				float:left;
				list-style-type:none;
				margin:0;
				padding:0;
				width:608px;
				li {
					float:left;
					height:130px;
					margin:0 4px 4px 0;
					&:nth-of-type(3n+3) {
						margin-right:0;
					}
					a.work-teaser {
						display:block;
						height:130px;
						position:relative;
						width:200px;
						img, div.work-info {
							left:0;
							position:absolute;
							top:0;
						}
						div.work-info {
							background:rgba(0,0,0,0.7);
							color:#fff;
							cursor:pointer;
							.font-stack-sabon(20px);
							display:none;
							height:110px;
							padding:10px;
							width:180px;
						}
						&:hover {
							div.work-info {
								cursor:pointer;
								display:block;
							}
						}
					}
				}
			}
		}
		&#work {
			padding:120px 0 0 12px;
			article {
				float:left;
				width:630px;
				h2 {
					background:url('images/marker-red.png') 0px 5px no-repeat;
					border-bottom:4px solid @black;
					/*.font-stack-gill-sans(16px);
					font-weight:normal;*/
					margin:0 0 8px 0;
					/*padding:0 0 0 30px;*/
					position:relative;
					/*text-transform:uppercase;*/
					.font-stack-gill-sans(12px);
					font-weight:bold;
					letter-spacing:2px;
					padding:3px 0 0 32px;
					text-transform:uppercase;
					span#month {
						padding:0 12px 0 0;
					}
					span#client {
						.font-stack-sabon(14px);
						position:absolute;
						right:0;
					}
				}
				p {
					.font-stack-sabon(14px);
					padding:0 0 0 57px;
					margin:0 0 8px 0;
				}
				img {
					line-height:1em;
					margin:0 0 8px 29px;
				}
			}
			span#year {
				display:block;
				float:left;
				.font-stack-sabon(12px);
				line-height:14px;
				width:35px;
			}
		}
		&#links {
			background-image:url('images/marker.png'), url('images/marker.png'), url('images/marker.png');
			background-position:47px 124px, 727px 124px, 727px 872px;
			background-repeat:no-repeat, no-repeat, no-repeat;
			padding:124px 0 0 74px;
			ul.links {
				float:left;
				list-style-type:none;
				margin:0 17px 25px 0;
				li {
					background:@white;
					padding:0 30px 0 0;
					a {
						background:@black;
						color:#fff;
						display:inline-block;
						.font-stack-gill-sans(14px);
						font-weight:normal;
						padding:6px 8px;
						text-transform:uppercase;
					}
				}
			}
		}
		&#contact {
			background-image:url('images/marker.png'), url('images/marker.png');
			background-position:47px 124px, 727px 872px;
			background-repeat:no-repeat, no-repeat;
			padding:114px 0 0 75px;
			/*p#text-right-here {
				background:url('images/text-right-here-background.png') top left no-repeat;
				.font-stack-iska(24px);
				height:56px;
				letter-spacing:4px;
				margin:0 0 0 35px;
				padding:10px 0 0 60px;
				text-transform:uppercase;
			}
			p#thank-you {
				background:url('images/thank-you-background.png') top left no-repeat;
				color:@white;
				.font-stack-iska(24px);
				letter-spacing:4px;
				margin:30px 0 0 145px;
				padding:3px 0 0 10px;
				text-transform:uppercase;
			}*/
			input[type="text"], textarea {
				background:@black;
				border:0;
				color:@white;
				.font-stack-gill-sans(12px);
			}
			input[type="text"] {
				border-left:5px solid red;
				padding:8px;
				margin:10px 0 10px 0;
				text-transform:uppercase;
				width:175px;
			}
			textarea {
				background:url('images/contact_field_background.png') top left no-repeat;
				color:@white;
				height:320px;
				padding:20px;
				width:320px;
				&:focus {
					outline:none;
				}
			}
			input[type="submit"] {
				background:@black;
				border:0;
				border-left:5px solid green;
				color:@white;
				margin:10px 0;
				padding:8px;
				text-transform:uppercase;
				.font-stack-gill-sans(12px);
			}
		}
		&#blog-overview {
			background-image:url('images/marker.png'), url('images/marker.png'), url('images/marker.png');
			background-position:47px 124px, 727px 124px, 727px 872px;
			background-repeat:no-repeat, no-repeat, no-repeat;
			padding:124px 0 0 74px;
			article {
				.font-stack-sabon(14px);
				width:600px;
				margin-bottom:40px;
				h2 {
					border-bottom:4px solid @black;
					.font-stack-gill-sans(12px);
					font-weight:bold;
					margin:-2px 0 8px 0;
					padding:0 0 0 30px;
					position:relative;
					text-transform:uppercase;
					span.date {
						.font-stack-sabon(14px);
						position:absolute;
						right:0;
					}
				}
				p {
					padding:0 0 0 30px;
				}
			}
		}
	}
}

/**
BLOG ARTICLE
*/

ol.commentlist {
	list-style:none;
	width:600px;
	li.comment {
		border-top:1px solid #ddd;
		padding:10px 0;
		section.comment_content {
			margin:0;
		}
	}
}

form#commentform {
	ul#comment-form-elements {
		list-style:none;
		input[type="text"], input[type="email"], input[type="url"] {
			background:@black;
			color:@white;
			.font-stack-gill-sans(12px);
			border:0;
			padding:8px;
			margin:5px 0;
			text-transform:uppercase;
			width:175px;
		}
		input[type="text"] {
			border-left:5px solid cyan;
		}
		input[type="email"] {
			border-left:5px solid magenta;
		}
		input[type="url"] {
			border-left:5px solid yellow;
		}
	}
	textarea {
		border:0;
		border-left:5px solid #444;
		background:@black;
		color:@white;
		height:100px;
		padding:8px;
		margin:5px 0;
		.font-stack-gill-sans(12px);
		width:420px;
	}
	#recaptcha_widget_div {
		margin-top:10px;
	}
	input[type="submit"] {
		background:@black;
		border:0;
		border-left:5px solid green;
		color:@white;
		margin:10px 0;
		padding:8px;
		text-transform:uppercase;
		.font-stack-gill-sans(12px);
	}
}

/**
* TEXT HIGHLIGHTS
*/
span#home-iska {
	background:url('images/iska-home-background.png') top left no-repeat;
	color:#fff;
	display:inline-block;
	font-size:36px;
	letter-spacing:2px;
	line-height:43px;
	text-align:center;
	width:156px;
}

span#home-thanks {
	background:url('images/thankyou-home-background.png') top left no-repeat;
	color:#fff;
	display:inline-block;
	font-size:30px;
	letter-spacing:2px;
	line-height:40px;
	text-align:center;
	width:132px;
}

span#home-thanks-de {
	background:url('images/thankyoude-home-background.png') top left no-repeat;
	display:inline-block;
	font-size:30px;
	letter-spacing:2px;
	line-height:41px;
	text-align:center;
	width:113px;
}

/**
* COMMON ELEMENTS
*/
a {
	text-decoration:none;
}

h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
}

p {
	margin:0;
	padding:0;
}

/**
STYLED ELEMENTS
*/
.iska {
	.font-stack-iska();
	letter-spacing:4px;
	text-transform:uppercase;
	word-spacing:4px;
	font-size:27px;
}
.monoment {
	.font-stack-monoment();
}

a#next-work-button, a#prev-work-button {
	display:block;
	background:@black;
	color:@white;
	.font-stack-gill-sans(13px);
	position:absolute;
	top:0;
	padding:5px 10px;
}

a#prev-work-button {
	top:147px;
}

a#next-work-button {
	top:90px;
	right:0px;
}

.site__footer {
  clear: both;
  text-align: center;
  font-size: 11px;
  padding-top: 10vh;
}

.site__footer .menu {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.site__footer .menu li {
  list-style: none;
  margin: 0;
  padding: 0 10px;
}

.site__footer a {
  color: #333;
  opacity: 0.2;
  transition: opacity .4s ease;
}

.site__footer a:hover {
  opacity: 1;
}

.page--simple {
  padding-top: 140px;
}

/**
* WORDPRESS STYLES
*/
.aligncenter, div.aligncenter, img.centered, img.aligncenter {display: block; margin-left: auto; margin-right: auto; text-align: center;}
.alignleft{float:left}
.alignright{float:right}
.floatLeft{float:left}
.floatRight{float:right}

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