@import url('../../fonts/muli-fontfacekit/stylesheet.css');*/
/*@import url('../fonts/rambla-fontfacekit/stylesheet.css');*/

/* font family */

body{
	/*font-size:12px;*/
	/*font-size:16px;*/
}

body,*{
	font-family:'MuliRegular',sans-serif;
	font-weight:normal;
}

.page{
	padding:3em 5% 5% 5%;
	
}

a.title img{
	max-height:62px;
	max-width:100%;

}

a,h1,h2{
	color:rgb(15,48,81);

}

em{
	/*color:rgb(15,48,81);*/
	font-style:normal;
	font-family:'MuliRegular',sans-serif;
}

.product .details em{
	text-transform:uppercase;
	color:rgb(160,160,160);
	font-family:'MuliRegular',sans-serif;
}



h1{
	margin-top:3em;
	font-size:17px;
	text-transform:uppercase;
	min-height:3em;
}

.product{
	min-width:270px;
	
}

/*.product .thumbnail{
	max-width:100%;
}


*/
.product .thumbnail{
	width:100%;
	min-width:100%;
}

.product .thumbnail img{
	margin-left:0;
	width:100%;
}



.product h2{
	font-size:17px;
	text-transform:uppercase;
	margin-bottom:0;

}

.imprint h1{
	margin:0;
	padding:0;
	border:0;
	min-height:1em;
	margin-top:1em;
}

#navigation,
#navigation h1{
	margin-top:0;
	font-size:11px;
	line-height:7.5em;
	text-transform:none;
	font-family:'MuliLight',sans-serif;
	color:rgb(15,48,81);
	border:0;
	min-height:1em;
}

#navigation{
	width:100%;
	display:flex;
	flex-flow:row nowrap;
	align-items:flex-start;
	justify-content: flex-end;
	justify-items:flex-end;
	gap:2em;
	margin-left:-15px;
	margin-right:-15px;
	margin-left:-5px;
	margin-right:-5px;
	&> :first-child {
	    margin-right: auto;

	}
}


#navigation a.title{
	height:85px;
	width:auto;
	padding-bottom:2.2em;


	& svg{

		height:100%;
		width:auto;
	}
}
#navigation .col-sm-12 svg{
	padding-bottom:0;
}

#navigation .active{
	text-decoration:underline;
	/*font-weight:bold;*/
}

#navigation h1,
#navigation .main{
	display:block;
	padding-top:1em;
	/*letter-spacing:0.1em;*/
}




.year{
	font-size:10px;
}

h1,h2,dt{
	/*font-family:'MuliRegular',sans-serif;*/
	/*font-family:'RamblaRegular',sans-serif;	*/
	font-weight:normal;
}

.product h2{
	/*font-size:17px;*/
	font-size:14px;
}

.product .icon img{
	margin-top:14px;
	margin-right:14px;
	height:24px;
	width:auto;
	float:left;
}

.product h2{
	float:left;
	margin-bottom:0;
}

.product dl {
	padding: 0;
}
	
.product dt {
	float: left;
	clear: left;
	width: 45%;
	text-align: left;
}
	
.product dt:after {
	content: ":";
}
	
.product dd {
	margin: 0 0 0 50%;
	padding: 0 0 0 0;
}

.product .row + p{
	margin-left:40px;
	color:rgb(15,48,81);
}

.products-mask{
	/*margin-top:3em;*/
	overflow:hidden;
}

.product{
	
}

h1{
	border-top:2px solid rgb(15,48,81);
	padding-top:1em;
	padding-bottom:1em;
	min-height:5em;
	border-bottom:2px solid rgb(15,48,81);
}



.imprint hr{
	font-size:17px;
	border-top:2px solid rgb(15,48,81);
	margin-top:3em;
	padding-top:1em;
}

.product p{
	padding-left:40px;
}

.thumbnail{
	border:0;
	padding:0;
}



/*
@media (max-width: @screen-phone-max) { ... }
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg) { ... }
*/

/*hide navigation*/
.sm{
	display:none;
}

#preview{
	
		display:flex;
		flex-flow:row nowrap;
		gap:0;
		&> *{
			min-width:0;
			flex-grow:1;
			/*flex:0 1 auto;*/
			background:#eee;
			aspect-ratio:1/1;
			width:100%;
			object-fit: cover;
			font-size:0.5vw;
			text-align:center;
			align-content:center;
			padding:0;
			border-radius:0;
			border:1em #fff solid;
			&.loaded{
				padding:0;
				background:transparent;
				& img{
					object-fit:cover;
				}
			}
		}

		& a{
			display:block;
			& img{
				border:0;
				transition:200ms ease-out;
			}
		}
		& a:hover img{
			transform:scale(1.1,1.1);
			transform-origin:center center;
		}	
	
}



#projects{
	--col-width: calc((100vw - 10vw - 3 * 2em)/4);
	width:100%;
	overflow-x:hidden;
	overflow-y:visible;
	padding:0;
	margin:0;
	margin-left:-15px;
	position:relative;
	min-height:calc(var(--col-width) + 30em);

	& #prev,
	& #next{
		position:absolute;
		top:calc(var(--col-width) / 2 - 0.25em);
		z-index:2;
		font-size:3em;
		display:block;
		opacity:0;
		height:1em;
		line-height:1em;
		transition:300ms ease-in-out;
	}

	&:hover #prev,
	&:hover #next{
		opacity:1;
	}

	& #prev{
		left:0.8em;
	}
	& #next{
		right:0.5em;
	}
	& .container{
		
		position:absolute;
		width:auto;
		top:0;
		left:0;
		margin:0;
		margin-left:-15px;
		padding:0;
		display:flex;
		flex-flow:row nowrap;
		gap:2em;
		justify-items:flex-start;
		min-height:var(--col-width);
		& >*{
			min-width:var(--col-width);
			& .thumbnail{
				border-image-width:0!important;
			}
		}
	}
}

@media (max-width: 768px) {
	
	.page{
		padding-top:15px;
	}

	.sm{
		display:block;
	}

	#navigation{
		padding:15px 15px 0 15px;
		flex-flow:row wrap;
		justify-content:space-between;
		line-height:1em;
		max-width:100%;
		margin:0;

		
	}

	#navigation a{
		margin:0;
		padding:0;
		line-height:1.5em;
		display:flex;
	}

	#navigation .main{
		padding-top:0;
	}

	#navigation a.title{
		width:100%;
		margin-left:0;
		padding:0;
		align-self: flex-start;
		margin-right:auto;
		justify-self:flex-start;
		& svg{
			display:block;
			width:100%;
			height:auto;

		}
	}

	.details{
		padding-bottom:2em;
		border-bottom:2px solid rgb(15,48,81);
		margin-bottom:3em;
	}

	.product:last-child .details{
		border-bottom:0;
	}

	.row#navigation{
		display:grid;
		padding:0 1em 0 1em;
		grid-template-columns: repeat(3, 1fr);
		& * {
			padding:0;
			text-align:center;

		}
		& a.title{
			width:100%;
			height:auto;
		}
		& .col-sm-12{
			margin-bottom:1em;
			width:100%;
			grid-column: 1 / 4;
			/*grid-row: 1 / 2;*/
			
		}

		& + .row:has(.products-mask){
			padding-top:3em;
		}
	}

	#preview{
		margin:3em 0 0 0;
		flex-flow:row wrap;
		&> *{
			max-width:33.3333%;
			max-width:12.5%;
			max-width:10%;
		}
		
	}

	#projects{
		overflow-y:visible;
		padding:15px;
		margin:0 15px;
		width:100%;
		& .container{
			flex-flow:column nowrap;
			position:relative;
			width:100%;
			& .product{
				padding-top:3em;
				width:100%;
				& .details{
					margin-bottom:0;
				}
				&:first-child{
					border-top:2px solid rgb(15,48,81);
					padding-top:3em;
				}
			}
		}
	}

	#next,#prev{
		display:none;
	}
}