/* Style Sheet tr.web.authoring */
/* http://www.thorsten-reinicke.de/ */
/* © 2017 Thorsten Reinicke */


/* ********** FONT & BODY ********** */

@font-face {
  font-family: Raleway ; 
  src:	url(Raleway/Raleway-Regular.ttf) ; }

@font-face {
  font-family: Raleway-Italic ; 
  src:	url(Raleway/Raleway-Italic.ttf) ; }

@font-face {
	font-family: Raleway-Thin ;
	src: url(Raleway/Raleway-Thin.ttf) ; }

@font-face {
	font-family: Raleway-Bold ;
	font-weight: bold ; 
	src: url(Raleway-Bold.ttf) ; }




html, body {
	font-family: Raleway, sans-serif ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 ;	
	background: #FFFFFF ; }

a {
	text-decoration: none ; }



/* ********** HEADER ********** */

header { 
	text-align: center ; 
	padding: 0 ; 
	border: 0px solid black ; 
	margin: 24px ; }

header a:link, 
header a:visited,
header a:hover,
header a:active {	
	color: #FFFFFF ; }

header img {
	vertical-align: baseline ; 
	margin-right: 6px ; }

header h1, header h2 {
	font-family: Raleway, serif ; 
	font-weight: normal ; 
	font-style: normal ; 
	color: #000000 ; 
	line-height: 1 ; 
	letter-spacing: 1px ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 6px 0 6px 0 ; }

header h1 {
	font-size: 14px ; 
	text-transform: uppercase ; }

nav a {
	font-size: 14px ; 
	text-transform: uppercase ; }



/* ********** NAVIGATION ********** */

span.link:before,
aside a:before,
footer address a:before,
h4 a:before { 
	content: "\25E2" ; 
	color: #003366 ; 
	font-size: 10px ; 
	margin-right: 4px ; }

article:hover span.link:before,
aside a:hover:before,
footer address a:hover:before,
h4 a:hover:before {
	content: "\25E5" ; 
	color: #FF3366 ; 
	font-size: 10px ; 
	margin-right: 4px ; }

article:active span.link:before,
aside a:active:before,
footer address a:active:before,
h4 a:active:before {
	content: "\25E5" ; 
	color: lightsteelblue ; }


a:hover, a:link, a:visited {
	-webkit-transition: background 0.5s ease-in-out ; 
	transition: background 0.5s ease-in-out ; }

a:active {
	-webkit-transition: background 0s ease-in-out ; 
	transition: background 0s ease-in-out ; }

span.link,
a:link,
a:visited,
nav ul li a:link:before,
nav ul li a_visited:before {
	color: #223355 /* darkslategray */ ; }

span.link:hover, 
a:hover,
nav ul li a:hover:before {
	color: #667788 /* slategray */ ; }

span.link:active,
a:active,
nav ul li a:active:before {
	color: lightsteelblue ; }

span.link {
	padding: 0 ; }



/* ********** MAIN ********** */


main h2 {
	font-family: "Courier New", Raleway; Raleway-Thin ; 
	font-size: 30px ; 
	font-weight: normal ; 
	line-height: 1 ; 
	color: #000 /* #36404A */ ; 
	letter-spacing: 0px ; 
	width: 100% ; 
	padding-left: 0px ; 
	border: 0px solid #C3C9CF ; 
	margin: 0px 0px 24px 24px ; }

main h2 a:link, main h2 a:visited {
	color: #000 ; 
	-webkit-transition: all 0.5s ease-in-out ; 
	transition: all 0.5s ease-in-out ; }

main h2 a:hover { 
	color: #FF3366 ; 
	-webkit-transition: all 0.5s ease-in-out ; 
	transition: all 0.5s ease-in-out ; }



main {
	display: -webkit-flex ; 
	-webkit-flex-wrap: wrap ; 
	-webkit-align-items: flex-start /* flex-start */ ; 

	display: flex ; 
	flex-wrap: wrap ; 
	align-items: flex-start /* center */ ; 

	padding: 0 ;
	border: 0px solid black ; 
	margin: 158px /* 134px */ 24px 67px 24px ; }

main article {
	-webkit-flex-grow: 1 ; 
	-webkit-flex-shrink: 1 ; 

	flex-grow: 1 ; 
	flex-shrink: 1 ; 
	
	font-size: 24px ; 
	line-height: 1 ; 
	letter-spacing: 1px ; 
	
	width: 412px ; 
	max-width: 848px ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0px 24px 48px 24px ; 
	background: #FFFFFF ; 
	
	box-shadow: 0px 0px 0px rgba(0,0,0,0) ;  
	-webkit-transition: box-shadow 0.5s ease-in-out ; 
	transition: box-shadow 0.5s ease-in-out ; }


main article:first-child, main article:nth-child(2) {
	max-width: 100% ; 
	width: 100% ; }

main section {
	max-width: 100% ; 
	width: 100% ; 
	background: #FFFFFF ; 
	padding: 0 ; 
	border: 0px solid #C3C9CF ; 
	margin: 0 24px 96px 24px ; }

section h3 {
	font-family: Raleway, serif ;
	font-size: 24px ; 
	font-weight: normal ; 
	letter-spacing: 0 ; 
	color: #000000 ; 
	line-height: 1 ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 ; }

section h4 {
	font-family: Raleway, serif ; 
	font-weight: normal ; 
	font-size: 18px ; 
	color: #00000 ; 
	line-height: 1.5 ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 9px 0 9px 0 ; }





main article.architektur2:hover {
	box-shadow: 0px 0px 0px rgba(0,0,0,0) ; 
	-webkit-transition: box-shadow 0.5s ease-in-out ; 
	transition: box-shadow 0.5s ease-in-out ; }

main article:hover {
	box-shadow: 0px 4px 12px rgba(0,0,0,0.5) ; 
	-webkit-transition: box-shadow 0.5s ease-in-out ; 
	transition: box-shadow 0.5s ease-in-out ; }

main article:active, main article a:active div {
	box-shadow: 0px 0px 0px rgba(0,0,0,0) ; 
	background: #FF3366 ;  	
	-webkit-transition: all 0s ease-in-out ; 
	transition: all 0s ease-in-out ; }


main article a:active div:nth-child(2) {
	border: 1px solid #FF3366 ; }

main article a:active div div {
	box-shadow: inset 0px 0px 0px rgba(0,0,0,0) ; }




article h3, article h4, article p {
	font-family: Raleway, serif ;
	font-weight: normal ; 
	letter-spacing: 0 ; 
	color: #000000 ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 ; }

article h3 {
	font-size: 24px ; 
	line-height: 2 ; 
/*	font-variant: small-caps ; */ }

article h4 {
	font-size: 18px ; 
	line-height: 1.25 ; }

article p {
	font-size: 16px ; 
	line-height: 1.5 ; }








/* ***************** */


article.architektur2 {
	position: relative ; 
	box-shadow: 0px 0px 12px rgba(0,0,0,0) ; 
	
	border: 0px solid #C3C9CF ; 
	height: 50vh /* 284px */ ; 
	width: 100% /* 640px */ ; 
	max-width: 75vw ; 
	margin: 48px 24px 96px 24px ; }



/* ARTICLE */

article {
	background: #FFFFFF ; }

article div div {
	height: 144px ; }




/* ENTWURF */

article.entwurf div {
	background: #FFFFFF url(index/background_seaside.png) no-repeat 75% 80% ; 
	background-size: cover ; }

article.entwurf div div {
	background: rgba(200,200,100,0.5) ; 
	transition: background 0.5s ease-in-out ; }

article.entwurf:hover div div {
	background: rgba(200,200,100,0.2) ; 
	transition: background 0.5s ease-in-out ; }




/* PLANUNG */

article.planung div {
	background: #FFFFFF url(index/background_harburg.png) no-repeat 75% 80% ; 
	background-size: cover ; }

article.planung div div {
	background: rgba(200,100,100,0.5) ; 
	transition: background 0.5s ease-in-out ; }

article.planung:hover div div {
	background: rgba(200,100,100,0.2) ; 
	transition: background 0.5s ease-in-out ; }




/* AUFMASS */

article.aufmass div {
	background: #FFFFFF url(index/background_lottbeker.png) no-repeat 75% 80% ; 
	background-size: cover ; }

article.aufmass div div {
	background: rgba(100,100,200,0.5) ; 
	transition: background 0.5s ease-in-out ; }

article.aufmass:hover div div {
	background: rgba(100,100,200,0.2) ; 
	transition: background 0.5s ease-in-out ; }




/* DESIGNS  grey-south-east_3 */

article.designs div {
	background: url(index/Twin.png) no-repeat center center ; 
	background-size: cover ; }

article.designs div div {
	background: rgba(160,100,160,0.5) ; 
	transition: background 0.5s ease-in-out ; }

article.designs:hover div div {
	background: rgba(160,100,160,0.2) ; 
	transition: background 0.5s ease-in-out ; }




/* PORTRAIT */

article.portrait div {
	background: #FFFFFF url(portraet/Thorsten_Reinicke_1.jpg) no-repeat center center ; 
	background-size: cover ; }

article.portrait div div {
	background: rgba(100,160,100,0.5) ; 
	transition: background 0.5s ease-in-out ;}

article.portrait:hover div div {
	background: rgba(100,160,100,0.2) ; 
	transition: background 0.5s ease-in-out ;}




/* TRANSFORM */

article.transform div {
	background: #FFFFFF url(index/susan_4.png) no-repeat center center ; 
	background-size: cover ; }

article.transform div div {
	background: rgba(200,150,100,0.5) ; 
	transition: background 0.5s ease-in-out ;}

article.transform:hover div div {
	background: rgba(120,30,0,0.2) ; 
	transition: background 0.5s ease-in-out ;}




/* TEXTE */

article.texte div {
	background: #FFFFFF url(index/Twin.png) no-repeat center center ; 
	background-size: cover ; }

article.texte div div {
	background: rgba(0,120,125,0.5) ; 
	transition: background 0.5s ease-in-out ;}

article.texte:hover div div {
	background: rgba(0,120,125,0.2) ; 
	transition: background 0.5s ease-in-out ;}




/* FAHRRAD */

article.fahrrad div {
	background: #FFFFFF url(fahrradstrasse/IMG_7518_1024.jpg) no-repeat center center ; 
	background-size: cover ; }

article.fahrrad div div {
	background: rgba(150,120,0,0.5) ; 
	transition: background 0.5s ease-in-out ;}

article.fahrrad:hover div div {
	background: rgba(150,120,0,0.2) ; 
	transition: background 0.5s ease-in-out ;}




/* ARTICLE */

article a {
	display: block ; 
	padding: 0 ; }

article div:nth-child(2) {
	background: #FFFFFF ; 
	padding: 12px 0px 6px 24px ; }

article.architektur2 div, article.architektur2:active div {
	background: #FFFFFF ; 
	padding: 0 ; 
	box-shadow: 0px 0px 0px rgba(0,0,0,0) ; }

article div:first-child {
	width: 144px ; 
	float: left ; 
	margin-right: 12px ; }


article div:nth-child(2) {
	border: 1px solid #C3C9CF ; 
	min-height: 144px ; 
	box-sizing: border-box ; 
	padding-top: 6px ; }




/* KEYFRAMES */

div#arch1, div#arch2, div#arch3, div#arch4, div#arch5, div#arch6, div#arch7, div#arch8, div#arch9, div#arch10 {
	position: absolute ; 
	top: 0 ; 
	bottom: 0 ; 
	border: 0px solid green ; 
	width: 100% ; 
	max-width: 100% ; 
	background-color: #FFFFFF ; 

	animation-duration: 30s ; 
	-webkit-animation-duration: 30s ; 
	-moz-animation-duration: 30s ; 

	animation-iteration-count: infinite ; 
	-webkit-animation-iteration-count: infinite ; 
	-moz-animation-iteration-count: infinite ; 

	animation-timing-function: linear ; 
	-webkit-animation-timing-function: linear ; 
	-moz-animation-timing-function: linear ; }




div#arch1 {
	background: #FFFFFF url(index/pflanze_3.jpg) no-repeat center ; 
	background-size: contain ; 
	z-index: 8 ; 
	animation-name: arch1 ; 
	-webkit-animation-name: arch1 ; 
	-moz-animation-name: arch1 ; }

@-webkit-keyframes arch1 {
	0% { opacity: 1 ; }
	6% { opacity: 1 ; }
	10% { opacity: 0 ; }
	96% { opacity: 0 ; }
	100% { opacity: 1 ; } }

@-moz-keyframes arch1 {
	0% { opacity: 1 ; }
	6% { opacity: 1 ; }
	10% { opacity: 0 ; }
	96% { opacity: 0 ; }
	100% { opacity: 1 ; } }

keyframes arch1 {
	0% { opacity: 1 ; }
	6% { opacity: 1 ; }
	10% { opacity: 0 ; }
	96% { opacity: 0 ; }
	100% { opacity: 1 ; } }




div#arch2 {
	background: #FFFFFF url(index/Aussicht_Ansicht.png) no-repeat center ; 
	background-size: contain ; 
	z-index: 7 ; 
	animation-name: arch2 ; 
	-webkit-animation-name: arch2 ; 
	-moz-animation-name: arch2 ; }

@-webkit-keyframes arch2 {
	0% { opacity: 0 ; }
	6% { opacity: 0 ; }
	10% { opacity: 1 ; }
	16% { opacity: 1 ; }
	20% { opacity: 0 ; }
	100% { opacity: 0 ; } }

@-moz-keyframes arch2 {
	0% { opacity: 0 ; }
	6% { opacity: 0 ; }
	10% { opacity: 1 ; }
	16% { opacity: 1 ; }
	20% { opacity: 0 ; }
	100% { opacity: 0 ; } }

keyframes arch2 {
	0% { opacity: 0 ; }
	6% { opacity: 0 ; }
	10% { opacity: 1 ; }
	16% { opacity: 1 ; }
	20% { opacity: 0 ; }
	100% { opacity: 0 ; } }





div#arch3 {
	background: #FFFFFF url(index/henrietten.png) no-repeat center ; 
	background-size: contain ; 
	z-index: 6 ; 
	animation-name: arch3 ; 
	-webkit-animation-name: arch3 ; 
	-moz-animation-name: arch3 ; }

@-webkit-keyframes arch3 {
	0% { opacity: 0 ; }
	16% { opacity: 0 ; }
	20% { opacity: 1 ; }
	26% { opacity: 1 ; }
	30% { opacity: 0 ; }
	100% { opacity: 0 ; } }

@-moz-keyframes arch3 {
	0% { opacity: 0 ; }
	16% { opacity: 0 ; }
	20% { opacity: 1 ; }
	26% { opacity: 1 ; }
	30% { opacity: 0 ; }
	100% { opacity: 0 ; } }

keyframes arch3 {
	0% { opacity: 0 ; }
	16% { opacity: 0 ; }
	20% { opacity: 1 ; }
	26% { opacity: 1 ; }
	30% { opacity: 0 ; }
	100% { opacity: 0 ; } }




div#arch4 {
	background: #FFFFFF url(index/Grey-2021.png) no-repeat center ; 
	background-size: contain ; 
	z-index: 5 ; 
	animation-name: arch4 ; 
	-webkit-animation-name: arch4 ; 
	-moz-animation-name: arch4 ; }

@-webkit-keyframes arch4 {
	0% { opacity: 0 ; }
	26% { opacity: 0 ; }
	30%  { opacity: 1 ; }
	36% { opacity: 1 ; }
	40% { opacity: 0 ; }
	100% { opacity: 0 ; } }

@-moz-keyframes arch4 {
	0% { opacity: 0 ; }
	26% { opacity: 0 ; }
	30%  { opacity: 1 ; }
	36% { opacity: 1 ; }
	40% { opacity: 0 ; }
	100% { opacity: 0 ; } }

keyframes arch4 {
	0% { opacity: 0 ; }
	26% { opacity: 0 ; }
	30%  { opacity: 1 ; }
	36% { opacity: 1 ; }
	40% { opacity: 0 ; }
	100% { opacity: 0 ; } }




div#arch5 {
	background: #FFFFFF url(index/Detail-1-20.png) no-repeat center ; 
	background-size: contain ; 
	z-index: 4 ; 
	animation-name: arch5 ; 
	-webkit-animation-name: arch5 ; 
	-moz-animation-name: arch5 ; }

@-webkit-keyframes arch5 {
	0% { opacity: 0 ; }
	36% { opacity: 0 ; }
	40% { opacity: 1 ; }
	46% { opacity: 1 ; }
	50% { opacity: 0 ; }
	100% { opacity: 0 ; } }

@-moz-keyframes arch5 {
	0% { opacity: 0 ; }
	36% { opacity: 0 ; }
	40% { opacity: 1 ; }
	46% { opacity: 1 ; }
	50% { opacity: 0 ; }
	100% { opacity: 0 ; } }

keyframes arch5 {
	0% { opacity: 0 ; }
	36% { opacity: 0 ; }
	40% { opacity: 1 ; }
	46% { opacity: 1 ; }
	50% { opacity: 0 ; }
	100% { opacity: 0 ; } }




div#arch6 {
	background: #FFFFFF url(index/green_south.png) no-repeat center ; 
	background-size: contain ; 
	z-index: 3 ; 
	animation-name: arch6 ; 
	-webkit-animation-name: arch6 ; 
	-moz-animation-name: arch6 ; }

@-webkit-keyframes arch6 {
	0% { opacity: 0 ; }
	46% { opacity: 0 ; }
	50% { opacity: 1 ; }
	56% { opacity: 1 ; }
	60% { opacity: 0 ; }
	100% { opacity: 0 ; } }

@-moz-keyframes arch6 {
	0% { opacity: 0 ; }
	46% { opacity: 0 ; }
	50% { opacity: 1 ; }
	56% { opacity: 1 ; }
	60% { opacity: 0 ; }
	100% { opacity: 0 ; } }

keyframes arch6 {
	0% { opacity: 0 ; }
	46% { opacity: 0 ; }
	50% { opacity: 1 ; }
	56% { opacity: 1 ; }
	60% { opacity: 0 ; }
	100% { opacity: 0 ; } }




div#arch7 {
	background: #FFFFFF url(index/bauaufmass_RHS.png) no-repeat center ; 
	background-size: contain ; 
	z-index: 2 ; 
	animation-name: arch7 ; 
	-webkit-animation-name: arch7 ; 
	-moz-animation-name: arch7 ; }

@-webkit-keyframes arch7 {
	0% { opacity: 0 ; }
	56% { opacity: 0 ; }
	60% { opacity: 1 ; }
	66% { opacity: 1 ; }
	70% { opacity: 0 ; }
	100% { opacity: 0 ; } }

@-moz-keyframes arch7 {
	0% { opacity: 0 ; }
	56% { opacity: 0 ; }
	60% { opacity: 1 ; }
	66% { opacity: 1 ; }
	70% { opacity: 0 ; }
	100% { opacity: 0 ; } }

keyframes arch7 {
	0% { opacity: 0 ; }
	56% { opacity: 0 ; }
	60% { opacity: 1 ; }
	66% { opacity: 1 ; }
	70% { opacity: 0 ; }
	100% { opacity: 0 ; } }




div#arch8 {
	background: #FFFFFF url(index/seaside_2.png) no-repeat center ; 
	background-size: contain ; 
	z-index: 1 ; 
	animation-name: arch8 ; 
	-webkit-animation-name: arch8 ; 
	-moz-animation-name: arch8 ; }

@-webkit-keyframes arch8 {
	0% { opacity: 0 ; }
	66% { opacity: 0 ; }
	70% { opacity: 1 ; }
	76% { opacity: 1 ; }
	80% { opacity: 0 ; }
	100% { opacity: 0 ; } }

@-moz-keyframes arch8 {
	0% { opacity: 0 ; }
	66% { opacity: 0 ; }
	70% { opacity: 1 ; }
	76% { opacity: 1 ; }
	80% { opacity: 0 ; }
	100% { opacity: 0 ; } }
keyframes arch8 {
	0% { opacity: 0 ; }
	66% { opacity: 0 ; }
	70% { opacity: 1 ; }
	76% { opacity: 1 ; }
	80% { opacity: 0 ; }
	100% { opacity: 0 ; } }




div#arch9 {
	background: #FFFFFF url(index/harburg.png) no-repeat center ; 
	background-size: contain ; 
	z-index: 1 ; 
	animation-name: arch9 ; 
	-webkit-animation-name: arch9 ; 
	-moz-animation-name: arch9 ; }

@-webkit-keyframes arch9 {
	0% { opacity: 0 ; }
	76% { opacity: 0 ; }
	80% { opacity: 1 ; }
	86% { opacity: 1 ; }
	90% { opacity: 0 ; }
	100% { opacity: 0 ; } }

@-moz-keyframes arch9 {
	0% { opacity: 0 ; }
	76% { opacity: 0 ; }
	80% { opacity: 1 ; }
	86% { opacity: 1 ; }
	90% { opacity: 0 ; }
	100% { opacity: 0 ; } }

keyframes arch9 {
	0% { opacity: 0 ; }
	76% { opacity: 0 ; }
	80% { opacity: 1 ; }
	86% { opacity: 1 ; }
	90% { opacity: 0 ; }
	100% { opacity: 0 ; } }




div#arch10 {
	background: #FFFFFF url(index/blue_west.png) no-repeat center ; 
	background-size: contain ; 
	z-index: 1 ; 
	animation-name: arch10 ; 
	-webkit-animation-name: arch10 ; 
	-moz-animation-name: arch10 ; }

@-webkit-keyframes arch10 {
	0% { opacity: 0 ; }
	86% { opacity: 0 ; }
	90% { opacity: 1 ; }
	96% { opacity: 1 ; }
	100% { opacity: 0 ; } }

@-moz-keyframes arch10 {
	0% { opacity: 0 ; }
	86% { opacity: 0 ; }
	90% { opacity: 1 ; }
	96% { opacity: 1 ; }
	100% { opacity: 0 ; } }

keyframes arch10 {
	0% { opacity: 0 ; }
	86% { opacity: 0 ; }
	90% { opacity: 1 ; }
	96% { opacity: 1 ; }
	100% { opacity: 0 ; } }