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

@font-face {
	font-family:'Spezia';
	src: url('SpeziaWeb-Medium.eot'); /* IE9 Compat Modes */
	src: url('SpeziaWeb-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('SpeziaWeb-Medium.woff2') format('woff2'), /* Super Modern Browsers */
         url('SpeziaWeb-Medium.woff') format('woff'); /* Pretty Modern Browsers */
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+000D-FB04;
}

* {
  	box-sizing: border-box;
	font-family: 'Spezia';
	font-weight: 500;
	font-style: normal;
	-moz-osx-font-smoothing: grayscale;     /* optimize font rendering */
	-webkit-font-smoothing: antialiased;    /* apply font anti-aliasing */
	text-rendering: optimizeLegibility;     /* emphasizes in legibility over rendering speed */
	-moz-font-feature-settings:"kern" 1;    /* turn on kerning, highly recomened */ 
	-ms-font-feature-settings:"kern" 1;     /* turn on kerning, highly recomened */ 
	-o-font-feature-settings:"kern" 1;      /* turn on kerning, highly recomened */
	-webkit-font-feature-settings:"kern" 1; /* turn on kerning, highly recomened */
	font-feature-settings:"kern" 1;         /* turn on kerning, highly recomened */
	font-kerning: normal;                   /* turn on kerning, highly recomened */

	font-feature-settings: "liga" on;       /* ligatures: on or off */
	font-feature-settings: "dlig" off;      /* discretionary-ligatures: on or off */
	font-feature-settings: "onum" off;      /* old-style-figures: on or off */
	font-feature-settings: "lnum" off;      /* lining-figures: on or off */
	font-feature-settings: "ss01" on;      /* alternate glyphs: on or off */
	
	text-transform: lowercase;
}


body {
	background-color: #FCFAFA;
}

.vector {
	position: fixed;
	height: cover;
	z-index: 100;
}

header h2 {
	font-size: 24px;
}

.strikeout {
	font-size: inherit;
	line-height: inherit;
	position: relative;
}

.strikeout::after {
  border-bottom: 3px solid #6AFFD1;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 53%;
}



	/* mobile */

.grid-container-header {
	display: grid;
	position: fixed;
	grid-gap: 11px;
	grid-template-columns: 8.33fr;
	grid-template-rows: auto;
	padding-left: 11px;
	padding-right: 11px;
	z-index: 102;
}

.logo {
	font-size: 30px;
	text-align: left;
	line-height: 0;
	z-index: 102;
}

.logo a {
	font-size: 30px;
	text-decoration: none;
	color: #343042;
	z-index: 102;
}

.grid-container {
	display: grid;
	grid-gap: 11px;
	grid-template-columns: 33.33fr 33.33fr 33.34fr;
	grid-template-rows: auto 80vh 40vh 100vh 80px 12vh 12vh 12vh 12vh 12vh 12vh 12vh 12vh 30vh 150px auto auto auto auto auto 90vh 63px 51px;
	padding-left: 11px;
	padding-right: 11px;
}

.hello {
	grid-column: 1 / span 2;
	grid-row: 1;
	color: #FF00FF;
	margin-top: 14px;
	font-size: 30px;
	text-align: left;
	order: 1;
	z-index: 102;
}

.hello h2 {
	font-size: 30px;
	line-height: 1.1;
}

.hello a {
	text-decoration: none;
	color: #FF00FF;
}

	.surname {
		grid-column: 3 / span 1;
		font-size: 18px;
		line-height: 1.3;
		padding-top: 0px;
		margin-top: 8px;
		color: #343042;
		display: none;
	}


.grid-container-menue{
	display: grid;
	position: fixed;
	width: 33.33fr;
	grid-template-columns: 33.33fr 33.33fr 33.34fr;
	grid-template-rows: 24px 24px 24px 24px;
	justify-content: space-between;
	align-content: end;
	bottom: 0;
	grid-column-gap: 11px;
	grid-row-gap: 6px;
	padding-right: 11px;
	padding-left: 11px;
	padding-bottom: 14px;
	font-size: 18px;
	z-index: 101;
}

.about {
	grid-column-start: 1;
 	grid-column-end: 2;
}

.about a:active {
	color: #6AFFD1;
} 

.about a:hover {
	color: #6AFFD1;
} 

.grid-container-menue a {
	text-decoration: none;
	color: #343042;
}

.work {
	grid-column-start: 1;
 	grid-column-end: 2;
}

.work a:hover {
	color: #6AFFD1;
} 

.contact {
	grid-column-start: 1;
 	grid-column-end: 2;
}

.contact a:hover {
	color: #6AFFD1;
} 

.info {
	grid-column: 2 / span 2;
	grid-row-start: 3;
	grid-row-end: 5;
	position: relative;
	display: none;
	bottom: 0;
	
	padding-bottom: 11px;
	grid-column-gap: 11px;
	grid-row-gap: 11px;
	font-size: 18px;

}

/*.contact:hover + .info {
	display: grid;
}

contact:active + .info {
	display: grid;
}*/

.shop {
	grid-column-start: 1;
 	grid-column-end: 2;
}

.shop a:active {
	color: #6AFFD1;
}

.shop:hover span {
	display: none;
}

.shop:hover:before {
	content: "soon!";
	color: #6AFFD1;
}



.intro {
	grid-column: 1 / span 3;
	grid-row: 4;
	font-size: 18px;
	line-height: 1.4;
	text-align: left;
	order: 2;
	margin-bottom: 20vh;
}

.image {
	grid-column: 1 / span 3;
	grid-row: 3 / span 1;
	background-image: url("#");
	background-size: cover;
	background-repeat: no-repeat;
	order: 3;
}

.secret-2 {
	grid-column: 1 / span 3;
	grid-row: 5;
	}	

.project-image {
	grid-column: 1 / span 3;
	grid-row: 4;
	opacity: 0;
  	visibility: hidden;
	order: 99;
}

.project {
	list-style-type: none;
	grid-column: 1 / span 2;
	text-align: left;
	order: 5;
	z-index: 101;
}

#project-1 {
	grid-row: 6;
}

#project-2 {
	grid-row: 7;
}

#project-3 {
	grid-row: 8;
}

#project-4 {
	grid-row: 9;
}

#project-5 {
	grid-row: 10;
}

#project-6 {
	grid-row: 11;
}

#project-7 {
	grid-row: 12;
}

#project-8 {
	grid-row: 13;
}
	
.project h1 {
	font-size: 14px;
	color: #343042;
}

.project h2 {
	font-size: 24px;
	color: black;
	margin-top: -11px;
	line-height: 1;
}

.project a {
	text-decoration: none;
	color: #343042;
}
	

.tiny-info1 {
	grid-column: 3 / span 1;
	grid-row: 6;
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	align-self: start;
	margin-top: 11px;
	order: 7;
}

.tiny-info2 {
	grid-column: 3 / span 1;
	grid-row: 7;
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	align-self: start;
	margin-top: 11px;
	order: 7;
}

.tiny-info3 {
	grid-column: 3 / span 1;
	grid-row: 8;
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	align-self: start;
	margin-top: 11px;
	order: 7;
}		

.tiny-info4 {
	grid-column: 3 / span 1;
	grid-row: 9;
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	align-self: start;
	margin-top: 11px;
	order: 7;
}

.tiny-info5 {
	grid-column: 3 / span 1;
	grid-row: 10;
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	align-self: start;
	margin-top: 11px;
	order: 7;
}

.tiny-info6 {
	grid-column: 3 / span 1;
	grid-row: 11 / 11;
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	align-self: start;
	margin-top: 11px;
	order: 7;
}

.click {
	background-image: url("images/click2.png");
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: 22px;
	grid-column: 3 / span 1;
	grid-row: 13;
	z-index: 99;
}	

.secret {
	grid-column: 1 / span 3;
	grid-row: 14;
	}	

.profile-image {
	grid-column: 1 / span 1;
	grid-row: 15;
	background-image: url("images/Anna badet rt klein rnd.png");
	background-size: contain;
	background-repeat: no-repeat;
	order: 8;
}

#project-8 {
	margin-bottom: 20vh;
}

.about-tagline {
	grid-column: 2 / span 2;
	grid-row: 15;
	font-size: 18px;
	line-height: 1.4;
	padding-top: 60px;
	padding-left: 11px;
	text-align: left;
	order: 9;
}

.about-text-1 {
	grid-column: 1 / span 2;
	grid-row: 16;
	font-size: 18px;
	line-height: 1.4;;
	text-align: left;
	margin-top: 5vh;
	order: 10;
}

.about-text-2 {
	grid-column: 1 / span 2;
	grid-row: 17;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
	margin-top: 5vh;
	order: 10;
}

.education {
	grid-row: 18;
}

.teaching {
	grid-row: 19;
}

.experience {
	grid-row: 20;
}

.education, .teaching, .experience {
	grid-column: 1 / span 2;
	padding: 0px;
	font-size: 30px;
	text-align: left;
	margin-top: 0px;
	order: 12;
	margin-bottom: 0px;;
}

.education h2, .teaching h2, .experience h2 {
	font-size: 18px;
	color: black;
	margin-top: 35px;
	margin-bottom: 3px;
}

.education p, .teaching p, .experience p {
	font-size: 14px;
	line-height: 1.4;
	color: #343042;
	margin-top: 0;
	margin-bottom: 0px;
}

.pink-details {
	grid-column: 3 / span 1;
	grid-row: 16;
	font-size: 12px;
	line-height: 1.4;
	color: #FF00FF;
	text-align: left;
	margin-top: 7vh;
	order: 11;
}

.pink-details p {
	margin-top: 0px;
}

	
/* Insta */
	
.grid-container-insta {
	position: fixed;
	bottom: 2px;
	right: 14px;
	grid-template-columns: auto;
	margin-bottom: 14px;
	z-index: 102;
}


.insta {
	font-size: 30px;
	text-align: left;
}

.social-default {
	width: 20px;
	display: block;
}

.social-hover {
	width: 20px;
	display: block;
}

.insta a .social-hover {
	display: none;
}

.insta a:hover .social-default {
	display: none;
}

.insta a:hover .social-hover {
	display: block;
}

.cookies {
	grid-column: 1 / span 2;
	padding: 10px;
	font-size: 18px;
	line-height: 1.4;
	color: #343042;
	text-align: left;
	margin-top: 5vh;
	order: 2;
	}
	
		/* Footer */
	
.credits {
	grid-column: 2 / span 2;
	grid-row: 22 / span 1;
	font-size: 12px;
	line-height: 1.3;
	color: #343042;
	align-self: start;
	z-index: 102;
	order: 9;
	}

.credits a {
	text-decoration: none;
	color: #343042;
}
	
.datenschutz {
	grid-column: 2 / span 2;
	grid-row: 22 / span 1;
	font-size: 12px;
	line-height: 1.3;
	order: 10;
	line-height: 1.3;
}

	
.datenschutz a {
	color: #FF00FF;
	text-align: left;
	text-decoration: none;
}
	
.datenschutz a:hover {
	color: #6AFFD1;
	}	
	
.imprint {
	grid-column: 2;
	grid-row: 23 / span 1;
	text-align: left;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	color: #343042;
	order: 13;
	align-self: end;
	margin-bottom: 9px;
	z-index: 102;
	}
	
.imprint a {
	text-decoration: none;
	color: #343042;
}

.imprint a:hover {
	color: #6AFFD1;
}	

.imprint a:active {
	color: #6AFFD1;
}	
	

.linkedin {
	grid-column: 3;
	grid-row: 23;
	align-self: end;
	z-index: 101;
	order: 14;
	margin-left: 0px;
	margin-bottom: 9px
}

.linkedin a .social-hover {
	display: none;
}

.linkedin a:hover .social-default {
	display: none;
}

.linkedin a:hover .social-hover {
	display: block;
}

@media only screen and (max-width: 767px) {
.mobile-hidden {
	display: none;
}
}

	/* Desktop */

@media only screen and (min-width: 768px) {
  /* For desktop: */
.grid-container {
	display: grid;
	grid-gap: 11px;
	grid-template-columns: 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.37fr;
	grid-template-rows: auto 80vh auto auto 200px 12vh 12vh 12vh 12vh 12vh 12vh 12vh 12vh 12vh 40vh 20vh 190px 100px auto 20vh auto 110vh auto auto;
	padding: 11px;
	padding-top: 0px;
	padding-bottom: 11px;
	margin-bottom: 15px;
	margin-left: 3vw;
	margin-right: 3vw;
}
	
	
a[ id= "work" ]:target ~ #work {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}	

.grid-container-header {
	display: grid;
	position: fixed;
	grid-gap: 11px;
	grid-template-columns: auto;
	padding-left: 11px;
	padding-right: 11px;
	margin-left: 3vw;
	margin-right: 3vw;
}

.logo {
	font-size: 30px;
	text-align: left;
	z-index: 101;
}

.hello {
	grid-column: 1 / span 3;
	grid-row: 1;
	font-size: 30px;
	color: #FF00FF;
	text-align: left;
	padding-top: 6px;
	order: 1;
}
	
.hello h2 {
	font-size: 30px;
	line-height: 1.1;
}
	
	.surname {
		grid-column: 1 / span 3;
		font-size: 14px;
		line-height: 1.3;
		color: #343042;
	}	
	
header h2 {
	font-size: 30px;
}	

.intro {
	grid-column: 5 / span 3;
	grid-row: 4;
	font-size: 18px;
	line-height: 1.4;
	color: #343042;
	text-align: left;
	margin-top: 5vh;
	order: 4;
}
	


.image {
	grid-column: 5 / span 3;
	grid-row: 3;
	background: url("#");
	background-size: cover;
	text-align: left;
	order: 3;
}
	
.secret-2 {
	grid-column: 1 / span 2;
	grid-row: 5;
	}		

.project-image-1 {
	grid-area: 6 / 1 / 8 / 5;
	background: url("images/projects/01-space-tours.png");
	background-size: cover;
	background-position: center;
	order: 6;
  	opacity: 0;
  	visibility: hidden;
	-webkit-transition:  opacity 0.3s; /* Safari */
 	transition: opacity 0.3s;
	transition-timing-function: ease-out;
}
	
.project-image-2 {
	grid-area: 7 / 1 / 9 / 5;
	background: url("images/projects/02-phone-cut.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	order: 7;
	opacity: 0;
  	visibility: hidden;
	-webkit-transition:  opacity 0.3s; /* Safari */
 	transition: opacity 0.3s;
	transition-timing-function: ease-out;
}
	
	
.project-image-3 {
	grid-area: 8 / 1 / 10 / 5;
	background: url("images/projects/03-rehearsal2.jpg");
	background-size: cover;
	background-position: center;
	order: 8;
	opacity: 0;
  	visibility: hidden;
	-webkit-transition:  opacity 0.3s; /* Safari */
 	transition: opacity 0.3s;
	transition-timing-function: ease-out;
}
	
.project-image-4 {
	grid-area: 9 / 1 / 11 / 5;
	background: url("images/projects/04-croco.jpg");
	background-size: cover;
	background-position: center;
	order: 9;
	opacity: 0;
  	visibility: hidden;
	-webkit-transition:  opacity 0.3s; /* Safari */
 	transition: opacity 0.3s;
	transition-timing-function: ease-out;
}

.project-image-5 {
	grid-area: 10 / 1 / 12 / 5;
	background: url("images/projects/05-kks-start.png");
	background-size: cover;
	order: 10;
	opacity: 0;
  	visibility: hidden;
	-webkit-transition:  opacity 0.3s; /* Safari */
 	transition: opacity 0.3s;
	transition-timing-function: ease-out;
}
	
.project-image-6 {
	grid-area: 11 / 1 / 13 / 5;
	background: url("images/projects/06-icons-38.png");
	background-size: contain;
	background-position: center;
	order: 11;
	opacity: 0;
  	visibility: hidden;
	-webkit-transition:  opacity 0.3s; /* Safari */
 	transition: opacity 0.3s;
	transition-timing-function: ease-out;
}
	
.project-image-7 {
	grid-area: 12 / 1 / 14 / 5;
	background: url("images/projects/07-witch.jpg");
	background-size: cover;
	order: 12;
	opacity: 0;
  	visibility: hidden;
	-webkit-transition:  opacity 0.3s; /* Safari */
 	transition: opacity 0.3s;
	transition-timing-function: ease-out;
}	
	
.project-image-8 {
	grid-area: 13 / 1 / 15 / 5;
	background: url("images/projects/08-journal.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	order: 13;
	opacity: 0;
  	visibility: hidden;
	-webkit-transition:  opacity 0.3s; /* Safari */
 	transition: opacity 0.3s;
	transition-timing-function: ease-out;
}	
	
		/* project list */
	
	#project-1 {
	grid-column: 6 / span 3;
	grid-row: 6;
	}	
	
	#project-2 {
	grid-column: 6 / span 3;
	grid-row: 7;
	}
	
	#project-3 {
	grid-column: 6 / span 3;
	grid-row: 8;
	}	
	
	#project-4 {
	grid-column: 6 / span 3;
	grid-row: 9;
	}
	
	#project-5 {
	grid-column: 6 / span 2;
	grid-row: 10;
	}
	
	#project-6 {
	grid-column: 6 / span 3;
	grid-row: 11;
	}
	
	#project-7 {
	grid-column: 6 / span 3;
	grid-row: 12;
	}
	
	#project-8 {
	grid-column: 6 / span 3;
	grid-row: 13;
	}
	
	
#project-1:hover + .project-image-1 {
  visibility: visible;
  opacity: 1;
}

#project-2:hover + .project-image-2 {
  visibility: visible;
  opacity: 1;
}

#project-3:hover + .project-image-3 {
  visibility: visible;
  opacity: 1;
}

#project-4:hover + .project-image-4 {
  visibility: visible;
  opacity: 1;
}	

#project-5:hover + .project-image-5 {
  visibility: visible;
  opacity: 1;
}	

#project-6:hover + .project-image-6 {
  visibility: visible;
  opacity: 1;
}

#project-7:hover + .project-image-7 {
  visibility: visible;
  opacity: 1;
}
	
#project-8:hover + .project-image-8 {
  visibility: visible;
  opacity: 1;
}

#project-8 {
		grid-area: 13 / 6 / 16 / 8;
	}
	
.project {
	text-align: left;
	order: 6;
}
	
.project h1 {
	top: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 14px;
	color: #343042;
}

.project h2 {
	margin-top: 0px;
	font-size: 30px;
	color: black;
}


.project a {
	text-decoration: none;
	color: #343042;
}
	
.project a:hover {
		color: #FF00FF;
	}
	
.tiny-info1 {
	grid-column: 9 / span 1;
	grid-row: 6;
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	align-self: start;
	margin-top: 0px;
	order: 14;
}	

	
.tiny-info2 {
	grid-column: 9 / span 1;
	grid-row: 7;
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	align-self: start;
	margin-top: 0px;
	order: 14;
}	
	
.tiny-info3 {
	grid-column: 9 / span 1;
	grid-row: 8;
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	align-self: start;
	margin-top: 0px;
	order: 14;
}		
	
.tiny-info4 {
	grid-column: 9 / span 1;
	grid-row: 9;
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	align-self: start;
	margin-top: 0px;
	order: 14;
}

.tiny-info5 {
	grid-column: 9 / span 1;
	grid-row: 10;
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	align-self: start;
	margin-top: 0px;
	order: 14;
}

	
	
.tiny-info6 {
	grid-column: 9 / span 1;
	grid-row: 11;
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	align-self: start;
	margin-top: 0px;
	order: 14;
}
	
.click {
	background-image: url("images/click2.png");
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: 22px;
	grid-column: 8 / span 2;
	grid-row: 13;
	z-index: 99;
}	

.secret {
	grid-column: 1 / span 2;
	grid-row: 16;
	}	
	
.profile-image {
	grid-column: 1 / span 2;
	grid-row: 17;
	width: 250px;
	height: 250px;
	display: grid;
	background-image: url("images/Anna badet rt klein rnd.png");
	background-size: cover;
	background-repeat: no-repeat;
	margin-left: 0px;
	order: 16;
}
	
.about-tagline {
	grid-column: 2 / span 2;
	grid-row: 18 / span 1;
	padding-left: 0px;
	font-size: 24px;
	padding-top: 0;
	margin-top: 0px;
	order: 17;
}

.pink-details {
	grid-column: 6 / span 2;
	grid-row: 19 / span 1;
	margin-top: 0px;;
	text-align: left;
	order: 18;
}
	
.pink-details p {
	font-size: 18px;
	line-height: 1.2;
	color: #FF00FF;
}

.about-text-1 {
	grid-column: 2 / span 3;
	grid-row: 19 / span 1;
	margin-top: 0px;
	padding-bottom: 0px;
	font-size: 18px;
	line-height: 1.4;
	text-align: left;
	order: 19;
}
	
	.about-text-1 p {
	margin-top: 0px;
	padding-bottom: 0px;
	font-size: 18px;
	line-height: 1.4;
	text-align: left;
	}	
	
.about-text-2 {
	grid-column: 2 / span 3;
	grid-row: 20 / span 1;
	margin-top: -40px;
	font-size: 18px;
	line-height: 1.4;
	text-align: left;
	order: 20;
	margin-bottom: 100px;
}
	
.bio {	
	grid-column: 10 / span 3;
	grid-row: 19 / span 1;
	font-size: 30px;
	text-align: left;
	padding-top: 0px;
	padding-left: 0px;
	margin-top: 0px;
	order: 21;
	}
	
.bio ul {
	list-style: none;
}

.bio h2 {
	font-size: 18px;
	color: black;
	margin-top: 35px;
	margin-bottom: 3px;
}

.bio p {
	font-size: 14px;
	line-height: 1.4;
	color: #343042;
}
	
.education	{
	grid-column: 2 / span 3;
	grid-row: 22 / span 1;
	font-size: 30px;
	text-align: left;
	padding-top: 0px;
	padding-left: 0px;
	margin-top: 0px;
	order: 21;
	}
	

.education h2 {
	font-size: 18px;
	color: black;
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 3px;
}

.education p {
	font-size: 14px;
	line-height: 1.4;
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 0px;
	color: #343042;
}	
	
.teaching	{
	grid-column: 6 / span 3;
	grid-row: 22 / span 1;
	font-size: 30px;
	text-align: left;
	padding-top: 0px;
	padding-left: 0px;
	margin-top: 0px;
	order: 21;
	}
	

.teaching h2 {
	font-size: 18px;
	color: black;
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 3px;
}

.teaching p {
	font-size: 14px;
	line-height: 1.4;
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 0px;
	color: #343042;
}	
	
.experience	{
	grid-column: 10 / span 3;
	grid-row: 22 / span 1;
	font-size: 30px;
	text-align: left;
	padding-top: 0px;
	padding-left: 0px;
	margin-top: 0px;
	order: 21;
	}
	

.experience h2 {
	font-size: 18px;
	color: black;
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 3px;
}

.experience p {
	font-size: 14px;
	line-height: 1.4;
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 0px;
	color: #343042;
}	
	
	
	
	
	
	
	/* Insta */
	
.grid-container-insta {
	display: grid;
	position: fixed;
	bottom: 0;
	right: 8px;
	grid-gap: 11px;
	grid-template-columns: auto;
	padding: 0px;
	padding-bottom: 16px;
	margin-left: 3vw;
	margin-right: 3vw;
	margin-bottom: 15px;
	z-index: 102;
}


.insta {
	font-size: 30px;
	text-align: left;
}
	
	/* Menue */

.grid-container-menue {
	display: grid;
	position: fixed;
	width: auto;
	grid-column-gap: 11px;
	grid-row-gap: 6px;
	grid-template-columns: 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.37fr;
	grid-template-rows: 20 20 20 20;
	justify-content: space-between;
	align-content: end;
	bottom: 0;
	padding: 11px;
	padding-right: 11px;
	padding-left: 11px;
	padding-top: 16px;
	padding-bottom: 11px;
	margin-left: 3vw;
	margin-right: 3vw;
	margin-bottom: 15px;
	font-size: 18px;
	z-index: 101;
}

.about {
	grid-column: 1;
	grid-row: 1;
}
	
	.about a:hover {
		color: #6AFFD1;
	}	
	
	.about a:active {
		color: #6AFFD1;
	}	
	
	
.grid-container-menue a {
	text-decoration: none;
	color: #343042;
}

.work {
	grid-column: 1;
	grid-row: 2;
}
	
	.work a:hover {
		color: #6AFFD1;
	}	
	
	.work a:active {
		color: #6AFFD1;
	}	

.shop {
	grid-column: 1;
	grid-row: 4;
}

.shop:hover span {
	display: none;
}

.shop:hover:before {
	content: "soon!";
	color: #6AFFD1;
}

.contact {
	grid-column: 1;
	grid-row: 3;
}
	
	.contact a:hover {
		color: #6AFFD1;
	}	
	
	.contact a:active {
		color: #6AFFD1;
	}

/*.contact:hover + .info {
	display: grid;
}

contact:active + .info {
	display: grid;
}
	*/
	
	
.info {
	grid-area: 3 / 2 / 5 / 3;
	position: relative;
	display: none;
	bottom: 0;
	padding-bottom: 0;
	padding-left: 10px;
	margin-left: 0;
	grid-column-gap: 11px;
	grid-row-gap: 6px;
	font-size: 18px;
}
	
.info a {
		color: #343042;
}

		/* Footer */
	
.credits {
	grid-column: 10 / span 2;
	grid-row: 23;
	align-self: start;
	padding-bottom: 28px;
	font-size: 12px;
	text-align: left;
	line-height: 1.3;
	color: #343042;
	order: 13;
	z-index: 102;
	}
	
	.credits a {
	text-decoration: none;
	color: #343042;
}	
	
.datenschutz {
	grid-column: 12;
	grid-row: 23;
	align-self: start;
	order: 14;
	text-align: left;
	font-size: 12px;
	line-height: 1.3;
	text-decoration: none;
	z-index: 102;
}
	
.datenschutz a {
	font-size: 12px;
	color: #FF00FF;
	text-align: left;
	line-height: 1.3;
	text-decoration: none;
}
	
.datenschutz a:hover {
			color: #6AFFD1;
	}
	
.datenschutz a:active {
			color: #6AFFD1;
	}
	
.imprint {
	grid-column: 10;
	grid-row: 24 / span 1;
	text-align: left;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	color: #343042;
	order: 15;
	align-self: end;
	margin-bottom: 5px;
	}
	
.imprint a {
	text-decoration: none;
	color: #343042;
}

.imprint a:hover {
	color: #6AFFD1;
}
	
.imprint a:active {
	color: #6AFFD1;
}	
	
.desktop-hidden {
	display: none;
}
	
.linkedin {
	grid-column: 12;
	grid-row: 24 / span 1;
	align-self: end;
	z-index: 101;
	order: 16;
	margin-left: 0px;
	margin-bottom: 5px
}

.linkedin a .social-hover {
	display: none;
}

.linkedin a:hover .social-default {
	display: none;
}

.linkedin a:hover .social-hover {
	display: block;
}
	
	
}

	/* Huge Desktops */

@media only screen and (min-width: 1900px) {

.grid-container {
	margin-left: 10vw;
	margin-right: 10vw;
}
.grid-container-menue {	
	margin-left: 10vw;
	margin-right: 10vw;
}
	
.grid-container-insta {
	margin-left: 10vw;
	margin-right: 10vw;
}
.grid-container-header	{
	margin-left: 10vw;
	margin-right: 10vw;
}
	
}