/*
Theme Name: Mandiberg
Description: Mandiberg CSS
Author: Lukas Eigler-Harding
Author URI: http://lukaslukas.com/
Description: Site for artist/teacher/writer/etc Michael Mandiberg. Design & Build by Lukas Eigler-Harding
Version: 1.0
*/


/**
 * Table of Contents:
 *
 *
 *
 *	1. basic html elements
 *	2. menu
 *	3. project list styling
 *	4. page
 *	5. lightbox
 *	6. related works
 *	7. footer section
 *
 * 
 * 
 *
 */


*{
	font-size: 24px;
	line-height: 32px;
	/*font-family: 'Roboto', sans-serif;*/
	font-family: helvetica;
	font-weight: normal;
	letter-spacing: 0.5px;
}

html, body{
	display: block;
	width: 92vw;
	margin: 0 auto;
	max-width: 1500px;
}



div, h1, h2, h3, h4, h5, h6, p{
	padding: 0px;
	margin: 0px;
}

a{
	color: black;
	text-decoration: none;
}
	a:link{
		color: black;
	}
	a:visited{
		color: black;
	}

a:hover{
	text-decoration: none;
	color: black;
}

a:hover h1{
	text-decoration: underline;
}
	a:active{
		color: black;
	}


p{
	color: black;
	margin-bottom: 16px;
}

h1{
	text-transform: uppercase;
	margin-bottom: 20px;
	/* These are technically the same, but use both */
  	overflow-wrap: break-word;
  	word-wrap: break-word;
 	-ms-word-break: break-all;
 	/* Instead use this non-standard one: */
 	word-break: break-word;
	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;

}


.barba-wrapper, .barba-container{
	display: block;
	height: 100%;
	clear: both;
}



/* 2. menu */

header{
	padding-top: 32px;
	margin-bottom: 72px;
	padding-bottom: 0px;

}



.menu > ul {
	padding: 0px;
	margin: 0px;
}

.category-group{
	margin-right: 16px;
}

.category-group > a:hover, .subcategory > a:hover{
	text-decoration: underline;
}

.category{
	text-transform: uppercase;
}

.subcategory{
	
	
}

.sub-active > a{
	font-style: italic;
}

.active{
	font-style: italic;
}

.subcategory{
	margin-left: 8px;
}

.subcategories{
	
}

.active-title{
	text-decoration: underline;
}


/*

.category-section-##

	.category
		.active
		.notactive

	.subcategories > .subcategory    .select
		.sub-active
		.sub-notactive


*/



/* project list styling */

.row{

}

.col-md-4{
	/* bootstrap column */
	vertical-align: top;
	margin-bottom: 64px;
	min-height: 25vw;
	color: black;
}

.col-md-4 > a > h1 {
	display: table;
	position: relative;
	color: black;
	font-size: 24px;
	line-height: 32px;
	clear: both;

}

.col-md-4 > a > p{
	display: block;
	position: relative;
}

.screen-reader-text{
	display: none;
}

.col-md-4 >img{
	width: 100%;
	height: auto;
}

.col-md-4 > a >img{
	width: 100%;
	height: auto;
	display: block;
	position: relative;
}

.col-md-4 > a:hover .col-md-4 > a > h1{
	text-decoration: line-through;
}


/* page */


.col-md-12, .col-md-10, .col-md-8, .col-md-4{


}

.col-md-8 > a {
	text-decoration: underline;
}

.col-md-8 >img,
.col-md-8 > a > img,
.col-md-8 > p > a > img,
.col-md-8 > p > img,
.col-md-8 > h1 > img,
.col-md-8 > h2 > img,
.col-md-8 > h3 > img,
.col-md-8 > h4 > img,
.col-md-8 > h5 > img,
.col-md-8 > h6 > img, 
.col-md-8 > p > div,
.col-md-8 > h1 > div,
.col-md-8 > h2 > div,
.col-md-8 > h3 > div,
.col-md-8 > h4 > div,
.col-md-8 > h5 > div,
.col-md-8 > h6 > div,
.col-md-8 > span >img,
.col-md-8 > span > a > img,
.col-md-8 > span > p > a > img,
.col-md-8 > span > p > img,
.col-md-8 > span > h1 > img,
.col-md-8 > span > h2 > img,
.col-md-8 > span > h3 > img,
.col-md-8 > span > h4 > img,
.col-md-8 > span > h5 > img,
.col-md-8 > span > h6 > img, 
.col-md-8 > span > p > div,
.col-md-8 > span > h1 > div,
.col-md-8 > span > h2 > div,
.col-md-8 > span > h3 > div,
.col-md-8 > span > h4 > div,
.col-md-8 > span > h5 > div,
.col-md-8 > span > h6 > div
{
	margin-top: 16px;
	margin-bottom: 16px;
	display: block;
	width: 100%;
	max-width: 800px;
	height: auto;
}


.col-md-8 > iframe,
.col-md-8 > p > iframe,
.col-md-8 > h1 > iframe,
.col-md-8 > h2 > iframe,
.col-md-8 > h3 > iframe,
.col-md-8 > h4 > iframe,
.col-md-8 > h5 > iframe,
.col-md-8 > h6 > iframe,
.col-md-8 > span > iframe,
.col-md-8 > span > p > iframe,
.col-md-8 > span > h1 > iframe,
.col-md-8 > span > h2 > iframe,
.col-md-8 > span > h3 > iframe,
.col-md-8 > span > h4 > iframe,
.col-md-8 > span > h5 > iframe,
.col-md-8 > span > h6 > iframe{
	margin-top: 16px;
	margin-bottom: 16px;
	display: block;
	width: 100%;
	max-width: 800px;
	height: 500px;	
}

.col-md-8 >img,
.col-md-8 > a > img,
.col-md-8 > p > a > img,
.col-md-8 > p > img,
.col-md-8 > h1 > img,
.col-md-8 > h2 > img,
.col-md-8 > h3 > img,
.col-md-8 > h4 > img,
.col-md-8 > h5 > img,
.col-md-8 > h6 > img{
	
}

.col-md-8 > h1, 
.col-md-8 > h2, 
.col-md-8 > h3, 
.col-md-8 > h4, 
.col-md-8 > h5, 
.col-md-8 > h6, 
.col-md-8 > p,
.col-md-8 > span > h1, 
.col-md-8 > span > h2, 
.col-md-8 > span > h3, 
.col-md-8 > span > h4, 
.col-md-8 > span > h5, 
.col-md-8 > span > h6, 
.col-md-8 > span > p {
	color: black;
	font-size: 24px;
	margin-bottom: 16px;
}     

.col-md-8 > h2, .col-md-8 > span > h2 {
	font-style: italic;
	text-transform: uppercase;
}

.col-md-8 > h3, .col-md-8 > span > h3 {
	font-style: italic;
}

.col-md-8 > p, .col-md-8 > span > p {
	max-width: 800px;
}

.col-md-8 > p > a, .col-md-8 > span > p > a{
	text-decoration: underline;
}

blockquote{
	border-left: 2px solid black;
	color: black;
	font-size: 18px;
	line-height: 24px;
}

hr{
	display: block;
	position: relative;
	text-align: left;
	margin-left: 0px;
	border-top: none;
	border-bottom: solid black 2px;
	max-width: 800px;
}

.readmore{
	display: block;
	position: relative;
	max-width: 800px;
	color: black;
	cursor: pointer;
}

.readmore  > div {
	display: block;
	position: relative;
	margin:0 auto;
	margin-top: 48px;
	margin-bottom: 48px;
	width: 150px;
	height: 150px;
	border-radius: 75px;
	text-align: center;
	border: solid 2px black;
	text-transform: uppercase;
	font-size: 24px;

}

.readmore > div > span{
	position: relative;
	display: block;
	width: 100px;
	padding-top: 40px;
	height: 60px;
	vertical-align: middle;
	margin: 0 auto;
}

.readmore > div:hover span{
	text-decoration: underline;
}


.long-read{
	display: none;
	position: relative;
	transform: translateY(100px);
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	transition: transform 1s;
	-webkit-transition: transform 1s;
}




/* lightbox */

	.lightbox-frame{
		display: none;
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0px;
		left: 0px;
		z-index: 1000;
		text-align: center;

	}
	.lightbox-background{
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0px;
		left: 0px;
		background-color: black;
		opacity: 0.9;
		cursor: zoom-out;

	}

	.helper {
	    display: inline-block;
	    height: 100%;
	    vertical-align: middle;
	    text-align: center;
	}

	.displayed-image{
		position: relative;
		display: inline-block;
		text-align: center;
		width:100%;
    	max-width:900px;
		height: auto;
		margin: 0 auto;
		vertical-align: middle;
		box-shadow: 1px 1px 15px 0px gray;

	}



/* related works */

.related-works{
	margin-top: 0px;
	padding-top: 0px;
	border-top: none;
	border-left: solid 2px black;
	color: black;
	
}

.related-works * {
	font-size: 24px;
	line-height: 32px; 
}

.related-works > h1 {
	font-size: 24px;
	line-height: 32px; 
	margin-bottom: 8px;
	color: black;
	font-style: italic;
}

.related-work >h1{
	margin-bottom: 20px;
	margin-top: 24px;
}


.related-work > a{
	position: relative;
	display: block;
	padding-bottom: 12px;
	
	margin-bottom: 24px;

}

.related-work > a > img{
	max-width: 100%;
	height: auto;
	padding-top: 4px;
	margin-top: 8px;
	padding-bottom: 4px;
	display: block;
}

.related-work > a > h1{
	position: relative;
	display: inline;
	margin-bottom: 4px;
	
	padding-bottom: 0px;
	border-bottom: 2px white solid;

}

.related-work > a:hover h1{
	text-decoration: none;
	border-bottom: 2px black solid;
}

.related-work > a > h1, .related-work > a > p{
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0.5px;
}

.related-work{
	max-width: 800px;
}



/* footer section */

.footer-below{
	margin-top: 70px;
	border-top: solid 2px black;
}



footer{
	display: block;
	padding-bottom: 70px;
	color: black;
	
}


footer * {
	color: black;
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 0px;
}  

footer > .col-sm-10 {
	padding-top: 24px;
}

.col-sm-10 > .row > .col-sm-4{
	min-height: auto;
	margin-bottom: auto;
	color: black;
}

.col-sm-4 > h2,
.col-sm-6 > h2  {
	font-style: italic;
	text-transform: uppercase;
	color: black;
}

.col-sm-4 > h3,
.col-sm-6 > h3 {
	font-style: italic;
}

.col-sm-4 > h4,
.col-sm-6 > h4,
.col-sm-4 > h5,
.col-sm-6 > h5,
.col-sm-4 > h6,
.col-sm-6 > h6,
.col-sm-4 > p,
.col-sm-6 > p  {
	max-width: 800px;
	color: black;
}


@media screen and (max-width: 991px){
	.related-works{
		margin-top: 48px;
		padding-top: 18px;
		border-top: solid 2px black;
		border-left: none;
	}
}


/* mobile-styling */


@media only screen and (max-device-width: 736px) {

	*{
		font-size: 40px;
		line-height: 56px;
	}

	.col-md-4 > a > h1 {
		font-size: 40px;
		line-height: 56px;
		display: block;
		position: relative;
	}

	footer * {
		color: black;
		font-size: 24px;
		line-height: 32px;
	}  

	blockquote{
	color: black;
	font-size: 24px;
	line-height: 32px;
}

	.col-md-8 > h1, 
	.col-md-8 > h2, 
	.col-md-8 > h3, 
	.col-md-8 > h4, 
	.col-md-8 > h5, 
	.col-md-8 > h6, 
	.col-md-8 > p {
		font-size: 40px;
		
	} 


	.related-works{
		margin-top: 48px;
		padding-top: 18px;
		border-top: solid 2px black;
		border-left: none;
	}

	.related-works * {
		font-size: 40px;
		line-height: 56px; 
	}

	.related-works > h1 {
		font-size: 40px;
		line-height: 56px; 
	}

	.col-md-8 >img,
	.col-md-8 > a > img,
	.col-md-8 > p > a > img,
	.col-md-8 > p > img,
	.col-md-8 > h1 > img,
	.col-md-8 > h2 > img,
	.col-md-8 > h3 > img,
	.col-md-8 > h4 > img,
	.col-md-8 > h5 > img,
	.col-md-8 > h6 > img, 
	.col-md-8 > p > div,
	.col-md-8 > h1 > div,
	.col-md-8 > h2 > div,
	.col-md-8 > h3 > div,
	.col-md-8 > h4 > div,
	.col-md-8 > h5 > div,
	.col-md-8 > h6 > div,
	.col-md-8 > span >img,
	.col-md-8 > span > a > img,
	.col-md-8 > span > p > a > img,
	.col-md-8 > span > p > img,
	.col-md-8 > span > h1 > img,
	.col-md-8 > span > h2 > img,
	.col-md-8 > span > h3 > img,
	.col-md-8 > span > h4 > img,
	.col-md-8 > span > h5 > img,
	.col-md-8 > span > h6 > img, 
	.col-md-8 > span > p > div,
	.col-md-8 > span > h1 > div,
	.col-md-8 > span > h2 > div,
	.col-md-8 > span > h3 > div,
	.col-md-8 > span > h4 > div,
	.col-md-8 > span > h5 > div,
	.col-md-8 > span > h6 > div,
	.col-md-8 > iframe,
	.col-md-8 > p > iframe,
	.col-md-8 > h1 > iframe,
	.col-md-8 > h2 > iframe,
	.col-md-8 > h3 > iframe,
	.col-md-8 > h4 > iframe,
	.col-md-8 > h5 > iframe,
	.col-md-8 > h6 > iframe,
	.col-md-8 > span > iframe,
	.col-md-8 > span > p > iframe,
	.col-md-8 > span > h1 > iframe,
	.col-md-8 > span > h2 > iframe,
	.col-md-8 > span > h3 > iframe,
	.col-md-8 > span > h4 > iframe,
	.col-md-8 > span > h5 > iframe,
	.col-md-8 > span > h6 > iframe{

	max-width: 100%;

	}


	.col-md-8 > p, .col-md-8 > span > p, .related-work, .readmore {
		max-width: 98vw;
	}

	.related-work > a > h1, .related-work > a > p, .long-read > p{
		font-size: 40px !important;
		line-height: 56px;
		letter-spacing: 0.5px;
	}


	.readmore  > div {
		display: block;
		position: relative;
		margin:0 auto;
		margin-top: 48px;
		margin-bottom: 48px;
		width: 200px;
		height: 200px;
		border-radius: 100px;
		text-align: center;
		border: solid 2px black;
		text-transform: uppercase;
		font-size: 24px;

	}

	.readmore > div > span{
		position: relative;
		display: block;
		width: 150px;
		padding-top: 40px;
		height: 60px;
		vertical-align: middle;
		margin: 0 auto;
	}

}