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

/* GENERAL
----------------------------------------------*/
* {
    margin: 0;
	padding: 0;
    border: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
    }

:root {
	--headlineFont: "minion-3-display", serif;
    --copyFont: "antarctican-mono", monospace;
	--headlineFontSize: 3rem;
	--copyFontSize: 12px;
	--padding: 30px;
	--swiper-theme-color: #ffffff;
    }

h2 {
	margin-top: -10px;
	font-family: var(--headlineFont);
	font-size: var(--headlineFontSize);
    }

h1 {display: inline;}

a:hover {transform: translateX(10px);}

body {
    font-family: var(--copyFont);
    font-weight: 400;
    font-size: var(--copyFontSize);
	-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
	color: white;
	background-color: #191919;
	display: flex;
    }


.paddingS {padding: var(--padding);}





/* INDEX STYLING
----------------------------------------------*/
#index {
	width: calc( (100vw / 3) * 1);
	height: 100vh;
    }

main {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}

footer {
	display: flex;
	justify-content: space-between;
	}

.select {
	margin: 1px;
	display: grid;
	grid-template-columns: 10% 90%;
	cursor: grab;
	}

.select:hover {
	transform: translateX(10px);
	}





/* PORTFOLIO STYLING
----------------------------------------------*/
#portfolio {
	width: calc( (100vw / 3) * 2);
	height: 100vh;
    }

.caption {
	width: calc(100% - (2 * var(--padding)));
	display: grid;
	grid-template-columns: 80% 10% 10%;
	position: absolute;
	top: var(--padding);
	left: var(--padding);
	z-index: 2;
	}

.projektTitel {
	font-family: var(--headlineFont);
	font-size: var(--headlineFontSize);
	}

figcaption {
	position: absolute;
	top: var(--padding);
	left: var(--padding);
	z-index: 2;
	}

.imgContainer {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	}

.imgCover {
	object-fit: cover;
	width: 100%;
	height: 100%;
    }

.imgPortrait {
	height: 90%;
    }

.imgLandscape {
	width: 88%;
    }


/* GENERAL SWIPER LAYOUT
----------------------------------------------*/

.active {
  display: block;
  }

.inactive {
  display: none;
  }  

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    }

.swiper {
	width: 100%;
	height: 100%; 
	position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    /* Fix of Webkit flickering */
    z-index: 1;
    }

.swiper-wrapper {
	width: 100%;
	height: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box;
    }

.swiper-slide {
	width: 100%;
	height: 100%;
    flex-shrink: 0;
    position: relative;
    transition-property: transform;
    display: block;
    }

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0px, 0, 0);
    }

.swiper-horizontal {
    touch-action: pan-y;
    }

.swiper-slide-invisible-blank {
    visibility: hidden;
    }


.swiper-button-prev, .swiper-button-next {
	text-align: right;
    cursor: pointer;
    }


.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: 'prev';
    }

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: 'next';
    }

.swiper-pagination {
    text-align: right;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
    }

.swiper-pagination-fraction {
	z-index: 2;
}



/* BREAKPOINTS
----------------------------------------------*/
@media screen and (max-width: 1024px) and (orientation: portrait) {

		
	:root {
		--padding: 15px;
        }
	
	body {display: block}
	
	#index {
		width: 100%;
		height: auto;
		margin-top: 50vh;
		}
	
	main {
		justify-content: start;
        }
	
	footer {margin: 20% 0%;}

	#portfolio {
        width: 100%;
        height: 50vh;
		position: fixed;
		top: 0;
    	}
	
	figcaption {display: none;}

	.caption {
		grid-template-columns: 50% 25% 25%;
        }
	
	.imgCover {
		object-fit: cover;
		height: 100%;
        }
	
	.imgPortrait {
        height: 100%;
		width: auto;
        }

    .imgLandscape {
        width: 100%;
        }
	
	}