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


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

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

body {
	font-family: Raleway, Arial, sans-serif ; 
	letter-spacing: 1px ; 
	padding: 0 0 48px 0 ;  
	border: 0 ; 
	margin: 0 ; 
	background: #FFFFFF ; }



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

a {	text-decoration: none ; }


main a, address a {
	color: #223344 ;  }

main a:hover, address a:hover, main a:hover figcaption b {
	color: #556677 ; }

main a:active, address a:active, main a:active figcaption b {
	color: #223344 ; }


main a figcaption:before, address a:before
{	content: "\25E2" ; 
	color: #003366 ; }

main a:hover figcaption:before, address a:hover:before {
	content: "\25E5" ; 
	color: #FF3366 ; }

main a:active figcaption:before, address a:active:before {
	color: #003366 ; }


main a figcaption:before {
	font-size: 10px ; 
	margin-right: 8px ; }

address a:before {
	font-size: 9px ; 
	margin-right: 3px ; }



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

main {
	padding: 0 ;
	border: 0px solid black ; 
	margin: 158px 0 67px 0 ; }

main h2, main h3, main h4 {
	font-weight: normal ; 
	font-style: normal ; 
	text-align: left ; 
	color: #000000 /* 556677 */ ; 
	letter-spacing: 0px ; 
	line-height: 1.5 ; 
 	padding: 0 ; 
	border: 0 ; 
	margin: 0 5% 0 5% ; }

main h2, main h3 {
	font-size: 30px ; 
	font-family: Times /* "Courier New" */ ; 
	font-style: italic ; 
	text-align: center ; 
	color: RGB(108,120,129) ; }

main h3 {
	font-size: 20px ; }

main h4 {
	font-size: 16px ; 
	text-align: left ; 
	margin-left: calc(50% + 3%) ; 
	margin-top: 24px ; }

figcaption b {
	font-size: 18px ; 
	font-weight: normal ; 
	font-style: normal ; 
	margin: 0 ; }

a:link figcaption b, a:visited figcaption b {
	color: #000000 ; }

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

main div.column {
	padding: 0 ; 
	border: 0 ; 
	margin: 24px 5% 24px 5% ; 
	-webkit-column-count: 2 ; 
	text-align: justify ; 
	-moz-column-count: 2 ; 
	-ms-column-count: 2 ; 
	-o-column-count: 2 ; 
	column-count: 2 ; 

	-webkit-column-width: 410px ; 
	-moz-column-width: 410px ; 
	-ms-column-width: 410px ; 
	-o-column-width: 410px ; 
	column-width: 410px ; 

	-webkit-column-gap: 5% ; 
	-moz-column-gap: 5% ; 
	-ms-column-gap: 5% ; 
	-o-column-gap: 5% ; 
	column-gap: 36px ; } 

main div p:first-child {
	margin-top: 0 ; }


main div.copy {
	text-align: center ;
	width: 640px ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 144px auto 24px auto ; } 


/* ********** SECTION & FLEX ********** */


section {
	border: 0px solid black ; }

section figure {
	-webkit-flex-grow: 1 ; 
	-webkit-flex-shrink: 1 ; 

	flex-grow: 1 ; 
	flex-shrink: 1 ; 

	font-size: 15px ; 
	line-height: 1 ; 
	text-align: center ; 
	
	width: px ; 
	padding: 0 ; 
	border: 0px solid grey ; 
	margin: 48px auto 48px auto ; 
	background: #FFFFFF ; }

section figure:first-child {
	margin-left:  ; }

section figure table {
	letter-spacing: 1 ; 
	border: 0 ;  }

/*
section figure:first-child img {
		width: 50% ; 
		min-width: 640px ; } */

section figure table th, section figure table td {
	text-align: left ; 
	line-height: 1.5 ; 
	border: 0 ; 
	vertical-align: top ; }

section figure table th {
	padding-right: 36px ; 
	font-weight: normal ; }

section figure img, section figure table {
	border-collapse: collapse ; 
	border: 0px solid red ; }

section figure table {
	width: 640px ; 
	border: 0px solid red ; 
	margin-left: auto ; 
	margin-right: auto ; }

figcaption {
	padding: 6px ; }




/* KEYFRAMES */

div.arch {
	display: block ; 
	border: 0px solid black ; 
	position: relative ; 
	height: 30vh ; 
	width: 100% ; 
	margin: 40px 0 30px 0 ; }

div#arch1, div#arch2, div#arch3 {
	position: absolute ; 
	top: 0 ; 
	bottom: 0 ; 
	border: 0px solid black ; 
	width: 100% ; 
	max-width: 100% ; 
	background-color: #FFFFFF ; 
	
	-webkit-animation-duration: 12s ; 
	-moz-animation-duration: 12s ;
	animation-duration: 12s ;  
 
	-webkit-animation-iteration-count: infinite ; 
	-moz-animation-iteration-count: infinite ; 
	animation-iteration-count: infinite ;

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



div#arch1 {
	background: #FFFFFF url(index/blue_west_ansicht.png) 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 ; }
	23% { opacity: 1 ; }
	33% { opacity: 0 ; }
	90% { opacity: 0 ; }
	100% { opacity: 1 ; } }


@-moz-keyframes arch1 {
	0% { opacity: 1 ; }
	23% { opacity: 1 ; }
	33% { opacity: 0 ; }
	90% { opacity: 0 ; }
	100% { opacity: 1 ; } }

keyframes arch1 {
	0% { opacity: 1 ; }
	23% { opacity: 1 ; }
	33% { opacity: 0 ; }
	90% { opacity: 0 ; }
	100% { opacity: 1 ; } }


div#arch2 {
	background: #FFFFFF url(index/grey_west.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 ; }
	23% { opacity: 0 ; }
	33% { opacity: 1 ; }
	56% { opacity: 1 ; }
	66% { opacity: 0 ; }
	100% { opacity: 0 ; } }

@-moz-keyframes arch2 {
	0% { opacity: 0 ; }
	23% { opacity: 0 ; }
	33% { opacity: 1 ; }
	56% { opacity: 1 ; }
	66% { opacity: 0 ; }
	100% { opacity: 0 ; } }

keyframes arch2 {
	0% { opacity: 0 ; }
	23% { opacity: 0 ; }
	33% { opacity: 1 ; }
	56% { opacity: 1 ; }
	66% { opacity: 0 ; }
	100% { opacity: 0 ; } }



div#arch3 {
	background: #FFFFFF url(index/green_south.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 ; }
	56% { opacity: 0 ; }
	66% { opacity: 1 ; }
	90% { opacity: 1 ; }
	100% { opacity: 0 ; } }

@-moz-keyframes arch3 {
	0% { opacity: 0 ; }
	56% { opacity: 0 ; }
	66% { opacity: 1 ; }
	90% { opacity: 1 ; }
	100% { opacity: 0 ; } }

keyframes arch3 {
	0% { opacity: 0 ; }
	56% { opacity: 0 ; }
	66% { opacity: 1 ; }
	90% { opacity: 1 ; }
	100% { opacity: 0 ; } }


/* ********** FOOTER ********** */

footer {
	position:  ; 
	left: 0 ; 
	right: 0 ; 
	bottom: 0 ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 ; 
	background: #FFFFFF ; }

footer address {
	color: #000000 ; 
	font-style: normal ; 
	font-size: 14px ;  
	text-align: center ; 
	padding: 12px 0 12px 0 ; 
	border: 0 ; 
	margin: 0 ; }

footer address small {
	font-size: 12px ; }

footer address img {
	width: 24px ; 
	height: 12px ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 4px 0 0 ; }