@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;
	display: none;
}

.vector-mobile {
	position: fixed;
	height: cover;
	z-index: 100;
	padding: 0px;
	margin: 0;
	top: 0;
	bottom: 0;
}

header h2 {
	font-size: 24px;
}

	/* 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 {
	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: 60vh 40vh 40vh 40vh 40vh 40vh 40vh 40vh 0 0 0 0 0 0 0 0 0 20vh 63px 51px;
	padding-left: 11px;
	padding-right: 11px;
}

.title {
	display: grid;
	font-size: 24px;
	z-index: 102;
}
	
.description {
	display: grid;
	grid-column: 1 / span 2;
	grid-row: 1 / span 1;
	order: 2;
	padding-top: 3vh;
	padding-bottom: 8vh;
	align-self: end;
	z-index: 102;
}
	
	.description h2 {
	font-size: 24px;
	text-align: left;
	margin-bottom: 0px;
	}
	
	.description p {
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	margin-top: 5px;
	}

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

.description p a:hover {
	color: #9690FF;
}

.image1 {
	background-image: url("images/projects/01-wall.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	grid-column: 1 / span 3;
	grid-row: 2 / span 1;
	font-size: 30px;
	text-align: left;
	order: 3;
	}

.image2 {
	background-image: url("images/projects/01-wall-specs.png");
	background-size: cover;
	background-repeat: no-repeat;
	grid-column: 1 / span 3;
	grid-row: 4 / span 1;
	font-size: 30px;
	text-align: left;
	order: 4;
	z-index: 101;
	}

.tiny-info {
	display: grid;
	grid-column: 3 / span 1;
	grid-row: 3 / span 1;
	text-align: left;
	font-size: 12px;
	line-height: 1.3;
	text-decoration: none;
	color: #343042;
	}	
	

.image3 {
	background-image: url("images/projects/01-envision-dark.png");
	background-position: center;
	background-size: 200%;
	background-repeat: no-repeat;
	grid-column: 1 / span 3;
	grid-row: 6 / span 1;
	font-size: 30px;
	text-align: left;
	order: 6;	
	}	
	
.short-description {
	grid-column: 1 / span 3;
	grid-row: 7 / span 1;
	font-size: 18px;
	line-height: 1.4;;
	text-align: left;
	align-self: center;
	order: 7;
}

.short-description-shifted {
	grid-column: 1 / span 2;
	grid-row: 4 / span 1;
	font-size: 14px;
	line-height: 1.4;;
	text-align: left;
	align-self: end;
	margin-top: -7vh;
	padding-bottom: 8vh;
	order: 9;
	z-index: 101;
}

.image4 {
	background-image: url("images/projects/01-everyone.png");
	background-size: contain;
	background-repeat: no-repeat;
	grid-column: 1 / span 3;
	grid-row: 8 / span 1;
	font-size: 30px;
	text-align: left;
	order: 8;	
	}
	
	.image5 {
	background-image: url("images/projects/01-wall3.png");
	background-size: cover;
	background-repeat: no-repeat;
	grid-column: 1 / span 3;
	grid-row: 10 / span 1;
	font-size: 30px;
	text-align: left;
	order: 10;
	z-index: 101;
	}

	.image6 {
	background-image: url("#");
	background-size: cover;
	background-repeat: no-repeat;
	grid-column: 1 / span 3;
	grid-row: 8 / span 1;
	padding: 11px;
	font-size: 14px;
	color: #343042;	
	text-align: left;
	order: 11;	
	}

	.image7 {
	background-image: url("#");
	background-size: cover;
	background-repeat: no-repeat;
	grid-column: 1 / span 3;
	grid-row: 9 / span 1;
	padding: 11px;
	font-size: 14px;
	color: #343042;	
	text-align: left;
	order: 11;	
	}

.image8 {
	background-image: url("#");
	background-size: cover;
	background-repeat: no-repeat;
	grid-column: 1 / span 3;
	grid-row: 11 / span 1;
	padding: 11px;
	font-size: 14px;
	color: #343042;	
	text-align: left;
	order: 11;	
	}

.image9 {
	background-image: url("#");
	background-size: cover;
	background-repeat: no-repeat;
	grid-column: 1 / span 3;
	grid-row: 12 / span 1;
	padding: 11px;
	font-size: 14px;
	color: #ffffff;	
	text-align: left;
	order: 11;	
	}


.project-navi-left {
	grid-column: 2 / span 1;
	grid-row: 18 / span 1;
	z-index: 102;
	order: 12;
	}
	
.project-navi-right {
	grid-column: 3 / span 1;
	grid-row: 18 / span 1;
	z-index: 102;
	order: 13;
	}
	
.project-navi-left h2, .project-navi-right h2 {
	font-size: 18px;
	}
	
.project-navi-left a, .project-navi-right a {
	text-decoration: none;
	color: inherit;
	}
	


		/* Footer */
	
.credits {
	grid-column: 2 / span 2;
	grid-row: 19 / 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: 19 / span 1;
	font-size: 12px;
	line-height: 1.3;
	order: 10;
}

	
	
.datenschutz a {
	color: #343042;
	text-align: left;
	text-decoration: none;
}
	
.datenschutz a:hover {
			color: #6AFFD1;
	}	
	
.imprint {
	grid-column: 2;
	grid-row: 20 / 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: 20;
	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;
}


	/* Menue */

.grid-container-menue{
	display: grid;
	position: fixed;
	width: 33.3vw;
	grid-template-columns: 33.33vw 33.33vw 33.34vw;
	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:active {
	color: #6AFFD1;
} 

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

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

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

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

.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;
}



.info {
	grid-column-start: 2;
 	grid-column-end: 4;
	grid-row-start: 3;
	grid-row-end: 5;
	position: fixed;
	display: none;
	margin-left: 33.33%;
	bottom: 0;
	padding-bottom: 14px;
	grid-column-gap: 11px;
	grid-row-gap: 11px;
	font-size: 18px;

}

/* Insta */
	
.grid-container-insta {
	display: grid;
	position: fixed;
	bottom: 4px;
	right: 8px;
	grid-gap: 11px;
	grid-template-columns: auto;
	margin-bottom: 13px;
	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;
}



@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: 5vh 20vh 10vh 10vh 20vh 10vh 20vh 80vh 20vh 80vh 20vh 80vh 20vh 80vh 0 0 0 0 0 0 0 0 0 0 0 0 auto 20vh auto auto;
	padding: 11px;
	padding-top: 16px;
	padding-bottom: 11px;
	margin-bottom: 15px;
	margin-left: 3vw;
	margin-right: 3vw;
}
	
.vector {
	position: fixed;
	height: cover;
	z-index: 100;
	display: block;
}

	
.vector-mobile {
	position: fixed;
	display: none;
	height: cover;
	z-index: 100;
}
	
.desktop-hidden {
	display: none;
}
	

.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;
}
	
	
		/* MAIN */
	
	

.title {
	display: grid;
	font-size: 24px;
}
	
.description {
	display: grid;
	grid-column: 1 / span 3;
	grid-row: 4 / span 2;
	order: 2;
	align-self: end;
}
	
	.description h2 {
	font-size: 24px;
	text-align: left;
	margin-bottom: 0px;
	}
	
	.description p {
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	margin-top: 5px;
	}
	
.tiny-info {
	display: grid;
	grid-column: 10 / span 2;
	grid-row: 7 / span 1;
	text-align: left;
	font-size: 12px;
	line-height: 1.3;
	text-decoration: none;
	color: #343042;
	}	
	
	
	.image1 {
	background-image: url("images/projects/01-wall.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	grid-column: 5 / span 8;
	grid-row: 2 / span 5;
	font-size: 30px;
	text-align: left;
	order: 3;
	}	
	
	.image2 {
	background-image: url("images/projects/01-wall-specs.png");
	background-size: cover;
	background-repeat: no-repeat;
	grid-column: 1 / span 12;
	grid-row: 8 / span 1;
	font-size: 30px;
	text-align: left;
	order: 4;
	z-index: 101;
	}
	
	.image3 {
	background-image: url("images/projects/01-envision-dark.png");
	background-size: contain;
	background-repeat: no-repeat;
	grid-column: 1 / span 12;
	grid-row: 10 / span 1;
	font-size: 30px;
	text-align: left;
	order: 5;	
	}	
	

	.image4 {
	background-image: url("images/projects/01-everyone.png");
	background-size: contain;
	background-repeat: no-repeat;
	grid-column: 1 / span 12;
	grid-row: 12 / span 1;
	font-size: 30px;
	text-align: left;
	order: 6;	
	}

	.short-description-shifted {
	grid-column: 9 / span 3;
	grid-row: 10 / span 6;
	font-size: 18px;
	line-height: 1.4;;
	text-align: left;
	align-self: end;
	padding-bottom: 7vh;
	order: 5;
	z-index: 101;
}
	
	
	.image5 {
	background-image: url("images/projects/01-wall3.png");
	background-size: cover;
	background-repeat: no-repeat;
	grid-column: 1 / span 12;
	grid-row: 14 / span 1;
	padding: 11px;
	font-size: 14px;
	color: white;	
	text-align: left;
	order: 7;
	z-index: 101;
	}
	
	.image6 {
	background-image: url("#");
	background-size: contain;
	background-repeat: no-repeat;
	grid-column: 1 / span 8;
	grid-row: 15 / span 1;
	padding: 11px;
	font-size: 14px;
	color:#343042;	
	text-align: left;
	order: 8;	
	}
	
	.image7 {
	background-image: url("#");
	background-size: contain;
	background-repeat: no-repeat;
	grid-column: 1 / span 8;
	grid-row: 16 / span 1;
	padding: 11px;
	font-size: 14px;
	color: #343042;	
	text-align: left;
	order: 8;	
	}
	
	.image8 {
	background-image: url("#");
	background-size: contain;
	background-repeat: no-repeat;
	grid-column: 1 / span 8;
	grid-row: 17 / span 1;
	padding: 11px;
	font-size: 14px;
	color: #343042;	
	text-align: left;
	order: 8;	
	}
	
	.image9 {
	background-image: url("#");
	background-size: contain;
	background-repeat: no-repeat;
	grid-column: 1 / span 8;
	grid-row: 18 / span 1;
	padding: 11px;
	font-size: 14px;
	color: #ffffff;	
	text-align: left;
	order: 8;	
	}
	
	
.project-navi-left {
	grid-column: 6 / span 1;
	grid-row: 27 / span 1;
	z-index: 102;
	}
	
.project-navi-right {
	grid-column: 7 / span 1;
	grid-row: 27 / span 1;
	z-index: 102;
	}
	
.project-navi-left h2, .project-navi-right h2 {
	font-size: 18px;
	}
	
.project-navi-left a, .project-navi-right a {
	text-decoration: none;
	color: inherit;
	}
	
	
		/* Footer */
	
.credits {
	grid-column: 10 / span 2;
	grid-row: 29;
	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: 29;
	align-self: start;
	order: 14;
	text-align: left;
	font-size: 12px;
	line-height: 1.3;
	text-decoration: none;
	color: #343042;
	z-index: 102;
}
	
.datenschutz a {
	font-size: 12px;
	color: #343042;
	text-align: left;
	line-height: 1.3;
	text-decoration: none;
}
	
.imprint {
	grid-column: 10;
	grid-row: 30 / 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;
}

.desktop-hidden {
	display: none;
}
	
.linkedin {
	grid-column: 12;
	grid-row: 30 / 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;
}
	
	
	/* Insta */
	
.grid-container-insta {
	display: grid;
	position: fixed;
	bottom: 0;
	right: 20px;
	grid-gap: 11px;
	grid-template-columns: auto;
	padding: 0px;
	padding-bottom: 11px;
	margin-left: 3vw;
	margin-right: 3vw;
	margin-bottom: 20px;
	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: 102;
}

.about {
	grid-area: 1 / 1 / 2 / 2;
}

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

.work {
	grid-area: 2 / 1 / 3 / 2;
}

.shop {
	grid-area: 4 / 1 / 5 / 2;
}

.shop:hover span {
	display: none;
}

.shop:hover:before {
	content: "soon!";
}

.contact {
	grid-area: 3 / 1 / 4 / 2;
}

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

/* 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;
}
	
}