// Normalize everything
* {
	margin: 0;
	padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

// Imports & variables
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500);
@import url(http://fonts.googleapis.com/css?family=Khand:400,100,300,700);


// Single elements & classes
ul {
	list-style-type: none;
}

a {
	color: black;
	text-decoration: none;
	&:hover, &:active {
		color: #666;
	}
}

.title {
	font-family: Khand;
	font-weight: 700;
	text-transform: uppercase;
}

.single_page_links {
	flex: 2;
	text-align: right;
	font-weight: 700;
	text-transform: uppercase;
	li {
		margin-bottom: 10px;
	}
}

// Paragraph links
.news_text, .caption, .single_description {
	a:link, a:active {
		text-decoration: underline;
	}
	a:hover, a:active {
		text-decoration: none;
	}
}


//////////// 

body, html {
	width: 100%;
	height: 100%;
	font-family: Roboto;
	font-size: 12px;
}


///////////////////////
// Header
#header {
	position: fixed;
	height: 80px;
	width: 100%;
	top: 0;
	z-index: 100;
	padding-top: 35px;
	background: rgba(255,255,255,0.95);
	text-align: center;
	transition: 0.4s;
	-webkit-transition: 0.4s;

	a:link, a:visited {
		color: black;
		text-decoration: none;
	}
	a:hover,a:active {
		color: black;
		text-decoration: none;
		color: #666;
	}

	// Logo
	#logo {
		position: absolute;
		left: 37px;
		top: 37px;
		transition: 0.4s;
		-webkit-transition: 0.4s;
		img {
			width: 180px;
		}
	}

	// Menu
	#menu {
		font-weight: 400;
		font-size: 14px;
		ul {
			display: inline-block;
			li {
				display: inline-block;
				margin: auto 10px;
				&.active {
					border-bottom: 3px solid black;
				}
			}
		}
	}

	// Smaller menu
	&.smaller {
		height: 60px;
		padding-top: 20px;
		#logo {
			left: 20px;
			top: 20px;
			img {
				width: 180px;
			}
		}
	}
}



///////////////////////////
// Container (alle sider)
#container {
	width: 60%;
	margin: auto;
	height: 100%;

	.content {
		padding-top: 80px;
	}

}



///////////////////////
// Front page
#front_page {
	height: 100%;
	padding-top: 90px;

	// Front image
	#front_image {
		height: 80%;
		width: 100%;
		max-width: 100%;
		max-height: 80%;
		// margin-left: 10%;
		background-size: cover;
		background-position: center center;
	}

	// Front text
	#front_text {
		margin-top: 8px;
		// margin-left: 10%;
		.title;
		#front_title {
			font-size: 25px;
			line-height: 24px;
		}
		#front_artist {
			font-size: 17px;
			line-height: 10px;
			span {
				display: inline-block;
				border-bottom: 3px solid black;
				padding-bottom: 1px;
			}
		}
	}

	// Forsideknapper
	.front_button {
		position: absolute;
		font-weight: 500;
		font-size: 14px;
		cursor: pointer;
		&:hover { opacity: 0.5 }
	}
	#now_button, #more_button {
		top: 50%;
		margin-top: -10px;
		width: 20px;
		height: 20px;
	}
	#now_button {
		left: 20px;
		transform: rotateZ(90deg);
		-webkit-transform: rotateZ(90deg);
	}
	#more_button {
		right: 20px;
		transform: rotateZ(-90deg);
		-webkit-transform: rotateZ(-90deg);
	}
	#news_button {
		bottom: 20px;
		width: 20px;
		text-align: center;
		left: 50%;
		margin-left: -10px;
	}

	// Social buttons
	#social_buttons {
		position: absolute;
		top: 50%;
		margin-top: -70px;
		right: 45px;
		.social_button {
			position: relative;
			width: 20px;
			height: 20px;
			margin: 10px;
			img {
				height: 100%;
			}
			&.wechat {
				cursor: pointer;
			}
		}
		#wechat_box {
			position: absolute;
			width: 100px;
			left: -110px;
			bottom: -5px;
			text-align: right;
			display: none;
		}
	}

}



// News page
#news {
	margin: auto;
	margin-bottom: 50px;
	width: 75%;

	.newsitem {
		margin-bottom: 40px;
		.news_thumb {
			width: 100%;
			img {
				width: 100%;
			}
		}
		.news_title {
			margin-top: 5px;
			line-height: 17px;
			font-size: 17px;
			font-family: Khand;
			font-weight: 700;
			span {
				padding-top: 2px;
				display: inline-block;
				border-top: 3px solid black;
			}
		}
		.news_text {

		}
	}

}


///////////////////////// 
// Exhibitions

// Overview
#exhibitions_overview, .single_project_overview {

	margin-top: 70px;

	.exhibition_preview, .project_preview {
		display: flex;
		display: -webkit-flex;
		margin-bottom: 30px;
		
		.preview_thumb {
			flex: 1;
			-webkit-flex: 1;
			img {
				width: 400px;
			}
		}
		.preview_info {
			flex: 1;
			-webkit-flex: 1;
			text-align: right;
			.title;

			.preview_title {
				font-size: 20px;
				line-height: 20px;
			}
			.preview_text {
				font-size: 14px;
				line-height: 14px;
				span {
					display: inline-block;
					border-bottom: 3px solid black;
				}
			}
		}
	}

}


// Single exhibition / single artfair / single project
.exhibition_single, .artfair_single, .project_single {
	
	// Exhibition info
	.single_info {
		.single_header {
			text-align: right;
			.title;
			.single_title {
				font-size: 25px;
			}
			.single_artist {
				line-height: 7px;
				font-size: 20px;
				span {
					display: inline-block;
					border-bottom: 3px solid black;
					padding-bottom: 4px;
				}
			}
		}
		.single_infobody {
			display: flex;
			margin-top: 20px;
			.single_description {
				flex: 3;
			}
			.single_links {
				.single_page_links;
			}
		}
	}

	// Exhibition content
	.single_content {
		margin-top: 30px;


	}

}

// Exhibition piece / artist piece
.piece {
	margin: 30px auto;
	.piece_image { // Bliver manipuleret af jQuery, pr viewportheight.
		// Align image left or center
		// text-align: center;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.piece_info {
		margin-top: 7px;
		.piece_title {
			.title;
			display: inline-block;
			font-size: 20px;
			line-height: 15px;
			&::after {
				content: ', ';
				font-size: 12px;
				font-weight: 400;
				font-family: Roboto;

			}
		}
		.piece_year {
			display: inline-block;
		}
		.caption {
			line-height: 90%;
		}
	}
}


////////////////////
// Artists

// Overview
#artists_overview {

	ul {
		margin-top: 70px;
		li {
			.title;
			font-size: 30px;
			margin-bottom: 15px;
			line-height: 25px;

			span {
				display: inline-block;
				border-top: 3px solid black;
				padding-top: 3px;
			}
		}
	}

}


// Single artist
#single_artist {

	.artist_header {
		.artist_name {
			.title;
			text-align: right;
			font-size: 25px;
			line-height: 25px;
			span {
				display: inline-block;
				border-top: 3px solid black;
			}
		}
		.artist_info {
			display: flex;
			display: -webkit-flex;

			.artist_links {
				margin-top: 15px;
				.single_page_links;
			}
		}
	}
}




//////////////////////
// Art fair

// Oversigt
.artfair_overview {
	text-align: center;
	margin-top: 70px;

	// Oversigt thumbs.
	.artfair_preview {
		margin-bottom: 30px;

		.title {
			font-size: 30px;
			line-height: 30px;
			span {
				display: inline-block;
				border-top: 3px solid black;
			}
		}
		.subtitle {
			font-family: Khand;
			font-size: 15px;
			.artist_name {
				font-weight: 700;
			}
		}

	}
}

.artfair_single {
	.single_info .single_title {
		line-height: 30px;
		span {
			display: inline-block;
			border-top: 3px solid black;
		}
	}
	.single_info .single_artist span {
		border: none !important;
	}
}





/////////////////////////
// PROJECTS
.projects_overview {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	text-align: center;

	.title {
		margin: 30px auto;
		width: 280px;
		font-size: 30px;
		line-height: 30px;
		span {
			// display: inline-block;
			// padding-top: -10px;
			// border-top: 3px solid black;
		}
	}

}




///////////////////////
// ABOUT
.about {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	height: 100%;

	// About box
	.about_box {
		display: flex;
		display: -webkit-flex;
		div {
			flex: 1;
			-webkit-flex: 1;
		}
		// Google map iframe
		.map, .map iframe {
			width: 400px;
			height: 400px;
			border: none;
			padding-right: 20px;
		}
		// Info box (right side)
		.about_info {
			// margin-left: 10px;
			.about_address {
				font-family: Khand;
				font-weight: 700;
				font-size: 17px;
				line-height: 1.1em;
			}
			p {
				margin: 10px auto;
			}
		}
	}
}