/* ------------------------------- Resets --------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}


/* Selection colours (easy to forget) */

::selection 	 	{background: rgba(11, 161, 226,0.5);}
::-moz-selection 	{background: rgba(11, 161, 226,0.5);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgba(11, 161, 226,0.5);}


html, body {
	height:100%;
	box-sizing: border-box;
	font-family: "futura-pt",sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height:1.4em;
}
* {
	box-sizing: border-box;
}
h1, h2	{
	font-size: 20px;
	font-weight: 400;
	margin-bottom:0.7em;
}
.datenschutz h2	{
	margin:0.7em 0em 0.35em 0em;
}
a { 
	color: black;
	text-decoration: none;
}
p {
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}
#content {
	width:1200px;
	/*height:100vh;*/
	margin:0 auto;
	box-sizing: border-box;
	padding-bottom:50px;
}
.gritts {
	height:auto;
  	display: grid;
  	grid-template-rows:118px 1fr;
  	grid-template-columns: 366px 366px 366px;
  	grid-auto-flow: dense;
  	grid-row-gap: 0;
  	grid-column-gap: 51px;
  	background-color: rgba(255,255,255,1);
  	box-sizing: border-box;
  	align-items:stretch;
}
#uebersicht .gritts {
  	grid-template-rows:118px auto auto auto;
  	height:auto;
}

.box {
	box-sizing: border-box;
	position:relative;
	overflow:auto;
	
	/*
	display:grid;
	align-items:center;
	justify-items:center;
	*/
}

.box-1 {
	background-color: rgba(255,255,255,1);
	grid-column:1/2;
  	grid-row:1/2;
  	z-index: 11;
  	padding-top:39px;
}
.box-1 a { 
	font-size: 20px;
	color: black;
	text-decoration: none;
}
.box-2 {
	background-color: rgba(255,255,255,1);
	grid-column:2/4;
  	grid-row:1/2;
  	z-index: 11;
  	padding-top:34px;
  	text-align:right;
}
.box-2 svg, .box-2 .logo-svg {
	width:366px;
}

.box-3 {
	background-color: rgba(255,255,255,1);
  	grid-row:2/2;
  	z-index: 11;
}

.startimage {
	grid-column:1/4;
  	background-image: url("../images/h34-balkone.png"); 
  	background-repeat: repeat-y; 
  	background-size: 100% auto; 
  	background-position: center 0;
  	width: 100%; 
  	height:590px;
}
.startimage img {
	width:100%;
	height:95%;
}


/* Projektentwicklung / Profil */

.texts .box-3 {
	grid-column:1/2;
}
.box-4 {
	background-color: rgba(255,255,255,1);
	grid-row:2/2;
  	z-index: 11;
}
.texts .box-4 {
	grid-column:2/3;
	padding-top:2.25em;
}
.texts .box-4.datenschutz {
	grid-column:2/4;
}
.kontakt .box-4 {
	padding-top:0;
}
.box-5 {
	background-color: rgba(255,255,255,1);
	grid-row:2/2;
  	z-index: 11;
}
.texts .box-5 {
	grid-column:3/4;
	padding-top:2.25em;
}
.texts .box-5 img {
	width:100%;
	height:auto;
}
.texts ul {
	padding-left:15px;
}


/* Overview */

.box-6, .box-7, .box-8,
.box-9, .box-10, .box-11,
.box-12, .box-13, .box-14 {
	position:relative;
	display:grid;
	/*align-items:center;
	justify-items:center;*/
	padding:0;
	margin-bottom:51px;
	box-sizing: border-box;
}
.box-6 a, .box-7 a, .box-8 a,
.box-9 a, .box-10 a, .box-11 a,
.box-12 a, .box-13 a, .box-14 a {
	padding:0;
	margin 0;
	border:none;
}
.box-6 img, .box-7 img, .box-8 img,
.box-9 img, .box-10 img, .box-11 img,
.box-12 img, .box-13 img, .box-14 img {
	width:100%;
	height:auto;
	opacity:0.7;
	transition: opacity 1s;
	border:none;
	margin:0;
	padding:0;
	display:block;
}
.box-6:hover img, .box-7:hover img, .box-8:hover img,
.box-9:hover img, .box-10:hover img, .box-11:hover img,
.box-12:hover img, .box-13:hover img, .box-14:hover img {
	opacity:1;
}
.box-6 h1, .box-7 h1, .box-8 h1,
.box-9 h1, .box-10 h1, .box-11 h1,
.box-12 h1, .box-13 h1, .box-14 h1 {
	position:absolute;
	text-align:left;
	margin:0 0 0 10px;
}
.box-6 h1 a, .box-7 h1 a, .box-8 h1 a,
.box-9 h1 a, .box-10 h1 a, .box-11 h1 a,
.box-12 h1 a, .box-13 h1 a, .box-14 h1 a {
	display:inline-block;
	font-size:2.5em;
	line-height:2em;
	color:white;
	text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
}
.box-8 {}
.box-9 {}
.box-10 {}
.box-11 {
	background-color: rgba(0,250,40,0.7);
}
.box-12 {}
.box-13 {
	background-color: rgba(100,150,240,0.7);
}
.box-14 {}
.follows {
	position:absolute;
	text-align:center;
	width:100%;
	top: 45%;
	color:white;
	font-size:2.5em;
	opacity:0;
	-webkit-transition: opacity 1s; /* Safari */
    transition: opacity 1s;
}
.follow-active {
	opacity:1;
}

/* Gallery */
.box-15 {
	background-color: rgba(255,255,255,1);
	grid-column:1/3;
}
.box-16 {
	background-color: rgba(255,255,255,1);
	grid-column:3/4;
}


@media only screen and (min-width: 1025px) and (max-width: 1200px) { 
	#content {
		width:100vw;
		height:auto;
		padding:0 20px;
	}
	#index #content {
		padding:0;
	}
	.gritts {
		grid-template-columns: 1fr 1fr 1fr;
		height:auto;
	}
	#index .box-1 {
		padding-left:20px;
	}
	.box-2 {
		grid-column:2/4;
		text-align:right;
	}
	#index .box-2 {
		padding-right:20px;
	}
	.box-2 svg, .box-2 .logo-svg {
		width:366px;
	}
	.startimage { 
		height:80vh;
	}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) { 
	#content {
		width:100vw;
		height:auto;
		padding:0 20px;
	}
	#index #content {
		padding:0;
	}
	.gritts {
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 30px;
		height:auto;
	}
	.box-1 {
		z-index:12;
		width:150px;
	}
	#index .box-1 {
		padding-left:20px;
	}
	#index .box-2 {
		padding-right:0;
	}
	.box-2 {
		grid-column:1/3;
	}
	.box-2 svg, .box-2 .logo-svg {
		width:366px;
	}
	.startimage { 
		height:80vh;
	}
	.texts .box-3,
	.texts .box-4 {
		grid-column:1/2;
		grid-row:auto;
	}
	.texts .box-4 {
		padding-top:0;
	}
	.texts .box-5 {
		grid-column:2/3;
	}
	
	/* Overview */
	
	.box-6, .box-7, .box-8,
	.box-9, .box-10, .box-11,
	.box-12, .box-13, .box-14 {
		margin-bottom:30px;
	}

	
	/* Gallery */
	.box-15 {
		background-color: rgba(255,255,255,1);
		grid-column:1/3;
	}
	.box-16 {
		background-color: rgba(255,255,255,1);
		grid-column:1/3;
	}
}
@media only screen and (min-width: 481px) and (max-width: 768px) { 
	#content {
		width:100vw;
		height:auto;
		padding:0 20px;
	}
	#index #content {
		padding:0;
	}
	.gritts {
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 30px;
		height:auto;
	}
	/*
	#index .gritts {
		grid-template-columns: 150px 1fr;
	}
	*/
	#index .box-1 {
		padding-left:20px;
	}
	
	#index .box-2 {
		padding-right:20px;
	}
	.box-2 svg, .box-2 .logo-svg {
		width:366px;
	}
	.startimage { 
		height:82vh;
	}
	#index .box-3 {
		grid-column:1/3;
	}
	
	.box-1 {
		z-index:12;
		width:150px;
	}
	.box-2 {
		grid-column:1/3;
		text-align:right;
	}
	
	/* Profil / Projektentwicklung */
	
	.texts .box-3,
	.texts .box-4 {
		grid-column:1/2;
		grid-row:auto;
	}
	.texts .box-4 {
		padding-top:0;
	}
	.texts .box-5 {
		grid-column:2/3;
	}
	.texts .box-3 h1 {
		
	}
	
	
	/* Overview */
	
	.box-6, .box-7, .box-8,
	.box-9, .box-10, .box-11,
	.box-12, .box-13, .box-14 {
		margin-bottom:30px;
	}
	.box-6 h1 a, .box-7 h1 a, .box-8 h1 a,
	.box-9 h1 a, .box-10 h1 a, .box-11 h1 a,
	.box-12 h1 a, .box-13 h1 a, .box-14 h1 a {
		font-size:1.8em;
		line-height:2em;
	}
	/* Gallery */
	.box-15 {
		background-color: rgba(255,255,255,1);
		grid-column:1/3;
	}
	.box-16 {
		background-color: rgba(255,255,255,1);
		grid-column:1/3;
	}
}
@media only screen and (min-width: 481px) and (max-width: 606px) {
	
	.box-2 .logo-svg {
		width:57.7%;
	}
}
@media only screen and (min-width: 1px) and (max-width: 480px) { 
	#content {
		width:100vw;
		height:auto;
		padding:0 20px 30px 20px;
	}
	#index #content {
		padding:0;
	}
	.gritts {
		grid-template-columns: 1fr;
		grid-column-gap: 30px;
		height:auto;
	}
	
	/* Header */
	.box-1 {
		width:95px;
		z-index: 12;
	}
	.box-1 a { 
		font-size: 17px;
	}
	.box-1, .box-2 {
		grid-column: 1/2;
		grid-row: 1/2;
	}
	#index .box-1 {
		padding-left:20px;
	}
	#index .box-2 {
		padding-right:20px;
	}
	.box-2 {
		padding-bottom: 56px;
		display:grid;
		align-items:flex-end;
		justify-items:right;
	}
	.box-2 svg, .box-2 .logo-svg {
		width:59vw;
	}
	
	.box-3,
	.box-4,
	.box-5 {
		grid-column:auto !important;
		grid-row:auto !important;
	}
	
	
	.startimage {
		height:82vh;
	}
	.box-6, .box-7, .box-8,
	.box-9, .box-10, .box-11,
	.box-12, .box-13, .box-14 {
		margin-bottom:30px;
	}
	
	/* Gallery */
	.box-15 {
		background-color: rgba(255,255,255,1);
		grid-column:1/2;
	}
	.box-16 {
		background-color: rgba(255,255,255,1);
		grid-column:1/2;
	}
}