@charset "UTF-8";
/* CSS Document */

body{
    font-family: 'Montaga', serif;
    background: url("../img/ansichtssache.jpg")center center fixed;
    background-size: cover;
    margin: 0;
	padding: 30px 0;
    font-style: normal;
    font-weight: 400;
	text-align: center;
	font-size: 20px;
	color: white;
}

#nextProject:before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    border-width: 0 5vw 5vw 0;
    border-style: solid;
    border-color: #fff #fff rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5);
    border-radius: 0 0 0 5px;
    /* background: rgba(0, 0, 0, 1); */
    display: block;
    width: 0;
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 30%), -1px 1px 1px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgb(0 0 0 / 30%), -1px 1px 1px rgb(0 0 0 / 20%);
}

#nextProject a{
	position: absolute;
    width: 5vw;
    height: 5vw;
    top: 0;
    right: 0;
}

a{
	text-decoration: none;
	color: rgba(255, 255, 255, 0.75);
}

main{
	max-width: calc(100%/2.36453202);
	margin: 0 auto;
}

h1{
	font-size: 7.25vw;
	font-weight: 300;
	margin: 0 auto 50px auto;
	line-height: 1;
}

h3{
	font-size: 2.5vw;
	font-weight: 300;
}

p{
	line-height: 25px;
}

#description{
	margin-top: 50px;
}

#images{
	display: flex;
	width: calc(100% + 40vw);
	justify-content: space-between;
	align-items: center;
    margin-left: -20vw;
	/*column-gap: 65px;*/
	align-content: stretch;
}

#images .left{
	order: 1;
	width: 22%;
}

#images .center{
	order: 2;	
	width: 28.4%;
}

#images .right{
	order: 3;
	width: 39%;
}

#images img{
	width: 100%;
	height: auto;
	display: block;
}

/*#images .left a:first-child img, #images .center a:first-child img{
	padding-bottom: 65px;
}*/

#images figure{
	margin: 0;
	position: relative;
}

#images .left a:first-child figure, #images .center a:first-child figure{
    margin: 0 0 50px 0;
}

#images figcaption{
	position: absolute;
    bottom: calc(50% - 0.5em);
    width: 100%;
	display: none;
	line-height: 1em;
}

#images figure:hover figcaption{
	display: block;
}

#images figure:hover img{
	opacity: 0.75;
}

/*Detail Page*/
#back{
	position: absolute;
    margin-left: calc(-20vw - 20px);
    top: 30px;
}

/*Cyanotypie*/
main#cyanotypie #images .left{
	width: 21.5%;
}

main#cyanotypie #images .center img:first-child{
	padding-bottom: 65px;
}

/*Mobile*/
@media screen and (max-width:720px) {	
	main{
		max-width: 90vw;
	}
	
	h1{
		margin: 0 auto 25px auto;
	}
	
	h3 {
    	font-size: 1.1em;
	}
	
	#images{
		width: 100%;
		margin-left: 0;
	}
	
	#nextProject::before{
		border-width: 0 7.5vw 7.5vw 0;
	}
	
	#nextProject a{
		width: 7.5vw;
    	height: 7.5vw;
	}
}