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

/* variables */

:root {
	--body-background: rgba(187,220,201,1);
	--body-color: rgba(204,37,56,1);
	--body-swatch-01: rgba(204,37,56,1);
	--body-swatch-02: rgba(255,255,255,1);
	--body-swatch-03: rgba(0,55,78,1);
/*	--body-swatch-03: rgba(0,78,69,1);*/
	--body-sans: "BwNista", Helvetica, Arial, "sans-serif";
	--body-display: "PilotSemibold", Times, "Times New Roman", "serif";
}


html {
	-webkit-text-size-adjust: none;
	overflow-x: hidden;
	scroll-behavior: smooth;
	font-size: 10px;
}

@media only screen and (max-width: 960px) {
    html {font-size: 8.5px;}
}

@media only screen and (max-width: 800px) {
    html {font-size: 7.5px;}
}

@media only screen and (max-width: 640px) {
    html {font-size: 10px;}
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
   	font-family: var(--body-sans);
	font-weight: 200;
	font-size: 1.25rem;
	line-height: 1.5;
	margin : 0;
    padding : 0;
	text-transform : none;
	background-color: var(--body-background);
	color: var(--body-color);
   	-moz-osx-font-smoothing: grayscale;
   	-webkit-font-smoothing: antialiased;
  	-webkit-backface-visibility: hidden;
}


h1,h3,h4,h5,h6 {
	font-family: var(--body-sans);
	font-style: normal;
	font-weight: 800;
	text-transform: uppercase;
}

p {
	margin: 0 0 12px 0;
}


a {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
	cursor: pointer;
}

section {
	position: relative;
	scroll-snap-align: start;
}

.clear {
	clear: both;
}

#portrait {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,1);
    background-image: url("../_img/michaela_bartz_mediadesign.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
}


.outer {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 120px 24px 120px;
}

@media only screen and (max-width: 960px) {
	.outer {padding: 120px 48px 120px;}
}

@media only screen and (max-width: 640px) {
    .outer {padding: 96px 24px 48px; }
}

.inner {
	width: 100%;
	max-width: 860px;
}

@media only screen and (max-width: 540px) {
    .hideonmobile {display:none;}
}


#portrait .outer {
	align-items:flex-end;
}


#signature {
	position: fixed;
	top: 50%;
	right: 48px;
	transform-origin: right;
	transform: rotate(90deg);
	font-family: var(--body-sans);
	font-style: normal;
	color: var(--body-swatch-01);
	font-weight: 700;
	font-size: 1.0rem;
	line-height: 1.2;
	letter-spacing: -0px;
	text-transform: uppercase;
	z-index: 1000;
	pointer-events: none;
	mix-blend-mode: multiply;
}

h1 {
	font-size: 1.0rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0px;
}

.letterspacing {
	padding: 0 2rem 0 2rem;
	letter-spacing: -0.7rem;
}





#keyfacts, #symbols {
	font-family: var(--body-display);
	font-style: normal;
	font-weight: 700;
	text-transform: normal;
	font-size: 9.6rem;
	line-height: 0.9;
	letter-spacing: -0.5px;
	padding: 24px 0 36px;
	transform: translate(-0.4rem, 0px);
}

#applications, #about {
	background-color: var(--body-color);
	color: var(--body-swatch-02);
	position: relative;
}


@media only screen and (max-width: 640px) {
    #keyfacts {font-size: 6.4rem;letter-spacing: -0.75px;transform: translate(-0.2rem, 0px);}
}

@media only screen and (max-width: 480px) {
    #keyfacts {font-size: 5.4rem;letter-spacing: -0.5px;transform: translate(-0.1rem, 0px);}
}

#keyfacts > div {
	display: inline;;
}

#keyfacts > div:nth-child(2n) {
    color: var(--body-swatch-02);
}

#about #keyfacts > div:nth-child(2n) {
    opacity: 0.4;
}



.font-feature {
	font-feature-settings: 'kern' 1, 'calt' 1, 'liga' 0, 'c2sc' 1, 'ss02' 1;
}

#symbols >div {
	display:none;
}

.symbol {
	width: 10.8rem;
	margin: 0 1.2rem 2.4rem 0;
	display: inline-block;
}

@media only screen and (max-width: 480px) {
	#symbols {font-size: 4.8rem;}
    .symbol {width: 5.4rem; margin: 0 0.6rem 1.2rem 0;}
}


h2 {
	font-family: var(--body-display);
	font-weight: 700;
	max-width: 54rem;
	font-size: 7.4rem;
	line-height: 0.9;
	letter-spacing: -0.8px;
	margin: 24px 0 48px;
	transform: translate(-0.35rem, 0px);
}


.job, .qualification, .skill {
	margin: 0 0 6rem 0;
	width: 60%;
	max-width: 440px;
	border-top: 1px dashed;
	padding: 2.4rem 0 0 0;
	float: left;
	clear: both;
}

.skill {
	padding: 1.6rem 0 0 0;
}

@media only screen and (max-width: 640px) {
	.job, .qualification, .skill {width: 100%;}
	
}

.qualification {
	float: right;
	color: var(--body-swatch-03);
	position: relative;
}

.new::before {
	content: 'NEW';
	font-family: var(--body-display);
	font-weight: 700;
	font-feature-settings: 'kern' 1, 'calt' 1, 'liga' 0, 'c2sc' 1, 'ss02' 1;
	font-size: 5.4rem;
	line-height: 0.9;
	letter-spacing: -0.8px;
	position: absolute;
	left: 120px;
    top: -16px;
	z-index: 1;
	color: var(--body-swatch-02);
    -webkit-transform: skew(-5deg, -5deg) rotate(0deg);
             transform: skew(-5deg, -5deg) rotate(0deg);
    -webkit-transform-origin: center center;
             transform-origin: center center;
    text-shadow: -1px -1px var(--body-swatch-03),
                  1px 1px var(--body-swatch-01),
                  2px 2px var(--body-swatch-01),
                  3px 3px var(--body-swatch-01),
                  4px 4px var(--body-swatch-01),
                  5px 5px var(--body-swatch-01),
                  6px 6px var(--body-swatch-01),
                  7px 7px var(--body-swatch-01),
                  8px 8px var(--body-swatch-01),
                  9px 9px var(--body-swatch-03),
                  10px 10px var(--body-swatch-03),
                  11px 11px 8px rgba(0,0,0,0.8);
}


.qualification .title::before {
    content: '';
    position: absolute;
	right: -8px;
    top: -54px;
    width: 42px;
    height: 42px;
    background-image: url('data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve"%3E%3Cg fill="%23fff"%3E%3Cpath d="M300.98,220.26l-1.34-0.65c1.99-62.44-23.07-118.31-47.79-157.75c-0.11-0.31-0.24-0.63-0.39-0.93 c-0.42-0.85-0.97-1.58-1.6-2.22C227.7,24.1,206.41,2.94,205.82,2.37c-3.24-3.16-8.4-3.16-11.64,0 c-0.59,0.57-21.88,21.73-44.04,56.35c-0.64,0.63-1.18,1.37-1.6,2.22c-0.15,0.31-0.28,0.62-0.39,0.93 c-24.72,39.44-49.78,95.3-47.79,157.74l-1.42,0.69c-19.91,9.96-32.28,29.92-32.28,52.1v85.8c0,3.74,2.5,7.03,6.11,8.03 c0.74,0.2,1.48,0.3,2.22,0.3c2.87,0,5.62-1.49,7.15-4.05l36.96-61.68c3.67,8.25,7.93,16.54,12.85,24.85l-14.42,28.82 c-1.29,2.58-1.16,5.65,0.37,8.1c1.52,2.46,4.2,3.95,7.09,3.95h17.45l-8.55,21.97c-1,2.56-0.67,5.45,0.89,7.72 c1.55,2.27,4.13,3.63,6.88,3.63h116.67c2.75,0,5.32-1.36,6.88-3.63c1.55-2.27,1.89-5.16,0.89-7.72l-8.55-21.97H275 c2.89,0,5.57-1.5,7.09-3.95s1.66-5.52,0.37-8.1l-14.42-28.82c4.92-8.31,9.18-16.6,12.85-24.86l36.96,61.68 c1.53,2.56,4.27,4.05,7.15,4.05c0.74,0,1.48-0.1,2.22-0.3c3.61-1,6.11-4.29,6.11-8.03v-85.8 C333.33,250.22,320.96,230.25,300.98,220.26z M200.01,20.45c6.81,7.49,18.78,21.53,31.55,40.52c-20.43,7.65-42.62,7.66-63.06,0.02 C181.25,41.99,193.21,27.95,200.01,20.45z M159.36,75.3c13.1,5.39,26.87,8.1,40.64,8.1c13.79,0,27.59-2.72,40.7-8.13 c34.86,57.42,68.01,148.29,13.36,241.28H145.94C91.35,223.66,124.51,132.76,159.36,75.3z M110.69,282.45l-27.35,45.64V272.4 c0-14.03,6.95-26.82,18.39-34.48c1.67,14.19,4.83,28.67,9.76,43.31C111.21,281.64,110.94,282.04,110.69,282.45z M246.15,383.19 h-92.3l6.48-16.66h79.35L246.15,383.19z M245.37,349.87h-90.74h-16.15l8.33-16.66h106.36l8.33,16.66H245.37z M316.67,328.09 l-27.44-45.79c-0.22-0.35-0.46-0.71-0.7-1.06c4.93-14.64,8.08-29.11,9.75-43.3c11.46,7.68,18.39,20.45,18.39,34.47V328.09z"/%3E%3Cpath d="M200,249.91c36.76,0,66.67-29.9,66.67-66.64c0-36.75-29.91-66.64-66.67-66.64s-66.67,29.9-66.67,66.64 C133.33,220.01,163.24,249.91,200,249.91z M200,133.28c27.57,0,50,22.42,50,49.98c0,27.56-22.43,49.98-50,49.98s-50-22.42-50-49.98 C150,155.7,172.43,133.28,200,133.28z"/%3E%3Cpath d="M200,166.61c9.19,0,16.67,7.48,16.67,16.66c0,4.6,3.73,8.33,8.33,8.33c4.61,0,8.33-3.73,8.33-8.33 c0-18.38-14.95-33.32-33.33-33.32c-4.61,0-8.33,3.73-8.33,8.33C191.67,162.88,195.39,166.61,200,166.61z"/%3E%3C/g%3E%3C/svg%3E%0A');
	transition: all;
	
	
}


/*.qualification:hover .title::before {
	transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(0px) translateY(-300px) translateZ(0px);
	opacity: 0;
}*/


@media only screen and (min-width: 550px) {
.qualification .title::before {
    content: '';
    position: absolute;
    left: -64px;
    top: -12px;
    width: 48px;
    height: 48px;
}
}

#vita .title.animated::before { 
    -moz-animation: brocket linear 2s;
    -webkit-animation: rocket linear 2s;
    animation: rocket linear 2s;
	animation-iteration-count: 1;
}


/*.qualification:hover .title::before {
	animation: rocket linear 2s;
	animation-iteration-count: 1;
}*/

/*@keyframes rocket {
	0% { transform: perspective(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
	opacity: 1; }
	84% { transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(0px) translateY(-600px) translateZ(-200px);
	opacity: 0; }
	90% { transform: perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(100px) translateZ(0px);
	opacity: 0; }
	100% { transform: perspective(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
	opacity: 1; }
}*/


/*@keyframes rocket {
	0% { transform: perspective(1200px) rotateX(0deg) translateY(0px);
	opacity: 1; }
	54% { transform: perspective(1200px) rotateX(60deg) translateY(-200px);
	opacity: 0; }
	60% { transform: perspective(1200px) rotateX(-45deg) translateY(100px);
	opacity: 0; }
	100% { transform: perspective(1200px) rotateX(0deg) translateY(0px);
	opacity: 1; }
}*/

@keyframes rocket {
	0% { transform: perspective(1200px) rotateX(0deg) translateY(0px) translateZ(0px) scale(1);
	opacity: 1; }
	25% { transform: perspective(1200px) rotateX(90deg) translateY(-100px) translateZ(100px) scale(0.8);
	opacity: 0.5; }
	50% { transform: perspective(1200px) rotateX(180deg) translateY(0px) translateZ(200px) scale(0.6);
	opacity: 0.1; }
	75% { transform: perspective(1200px) rotateX(270deg) translateY(100px) translateZ(100px) scale(0.8);
	opacity: 0.5; }
	100% { transform: perspective(1200px) rotateX(360deg) translateY(0px) translateZ(0px) scale(1);
	opacity: 1; }
}


.kind {
	font-weight: 800;
	font-size: 1.0rem;
	padding: 0 0 0.2rem;
	text-transform: uppercase;
}

.skills-container .kind {
	color: var(--body-swatch-02);
	grid-column-start: 1;
	grid-column-end: -1; 
	padding: 0 0 2rem;
}

.date {
	font-weight: 800;
	font-size: 1.0rem;
	padding: 0 0 1.6rem 0;
	color: var(--body-swatch-02);
}

.title {
	font-family: var(--body-display);
	font-weight: 700;
	font-size: 4.2rem;
	line-height: 0.9;
	padding: 0 0 0.2rem 0;
	transform: translate(-0.15rem, 0px);
}



#skills .title {
	font-size: 3.6rem;
}


#applications .skill {
	border-top: 0px;
}
#applications .title {
	text-align: center;
	position: relative;
	margin-bottom: 2.4rem;
}

#portrait::before, 
#applications::before{
	content: "";
    position: absolute;
    top: -0.5px;
    left: 0;
	width: 100%;
	height: 10vh;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1000 40' preserveAspectRatio='none' width='100%25' height='10vh'%3E%3Cpolygon points='0,0 1000,0 0,40' style='fill:rgba(187,220,201,1);'/%3E%3C/svg%3E");
	background-size: 100% 100%;
}

#portrait::after{
	content: "";
    position: absolute;
    bottom: -0.5px;
    left: 0;
	width: 100%;
	height: 10vh;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1000 40' preserveAspectRatio='none' width='100%25' height='10vh'%3E%3Cpolygon points='0,40 1000,40 1000,0' style='fill:rgba(187,220,201,1);'/%3E%3C/svg%3E");
	background-size: 100% 100%;
}


.portrait_clipped {
	position: absolute;
	height: 24rem;
	width: 24rem;
	top: -5%;
	right: 15%;
}

@media only screen and (max-width: 480px) {
    .portrait_clipped {height: 18rem; width: 18rem; right: 5%;}
}

.portrait_clipped img {
	max-width: 100%;
}

.clippath {
	-webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);

}



#applications::after {
	content: "";
    position: absolute;
    bottom: -0.5px;
    left: 0;
	width: 100%;
	height: 10vh;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1000 40' preserveAspectRatio='none' width='100%25' height='10vh'%3E%3Cpolygon points='0,40 1000,0 1000,40' style='fill:rgba(187,220,201,1);'/%3E%3C/svg%3E");
	background-size: 100% 100%;
}


#applications .title::before, #applications .title::after {
    content: "";
    position: absolute;
    height: 0.8rem;
    margin: 0 0px;
    left: 0;
    right: 0;
	opacity: 0.7;
}

#applications .title::before {
	top: -2.0rem;
    border-left: 1px solid var(--body-swatch-02);
    border-top: 1px solid var(--body-swatch-02);
    border-right: 1px solid var(--body-swatch-02);

}

#applications .title::after {
	bottom: -1.2rem;
    border-left: 1px solid var(--body-swatch-02);
    border-bottom: 1px solid var(--body-swatch-02);
    border-right: 1px solid var(--body-swatch-02);
}

#applications .experience {
    padding: 2.4rem 0 0;
}




.subtitle {
	font-weight: 700;
}

.description {
	padding: 0.6rem 0 0;
	max-width: 480px;
}

#skills .description {
	padding: 0rem 0 0 0;
	max-width: 480px;
}

.experience {
	font-size: 1.8rem;
	padding: 0.6rem 0 0;
	color: var(--body-swatch-02);
	transform: translate(-0.25rem, 0px);
}


.skills-container {
	display: grid;
	grid-template-columns: 30% 30% 30%;
	grid-column-gap: 5%;
	overflow: hidden;
	width: 100%;
	margin: 72px 0 0 0;
	overflow: visible;
}

@media only screen and (max-width: 720px) {
    .skills-container {grid-template-columns: 45% 45%; grid-column-gap: 10%;}
}

@media only screen and (max-width: 640px) {
    .skills-container {display: block;}
}

.skills-container >div {
	width: 100%;
	max-width: 360px;
}


#contactimprint {
	background-color: var(--body-swatch-03);
	color: var(--body-swatch-02);
}


#contact {
	font-family: var(--body-display);
	font-style: normal;
	font-weight: 700;
	text-transform: normal;
	font-size: 2.4rem;
	line-height: 1.2;
	text-align: center;
	padding: 0 0 96px 0;
}

#imprint {
	display: grid;
	grid-template-columns: 30% 30% 30%;
	grid-column-gap: 5%;
	overflow: hidden;
	width: 100%;
	margin: 72px 0 0 0;
}

#imprint >div {
	padding: 0 0 24px 0;
}

@media only screen and (max-width: 720px) {
    #imprint {grid-template-columns: 45% 45%; grid-column-gap: 10%;}
}

@media only screen and (max-width: 640px) {
    #imprint {display: block;}
}

#imprint h4 {
	font-size: 1.0rem;
	padding: 0 0 0.8rem;
}

#imprint p {
	font-size: 1.3rem;
}

#bugs {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	grid-gap: 36px;
	font-size: 1.2rem;
	margin: 72px 0 0 0;
}