@import url("fonts.css");

html{
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body{
	min-height:100vh;
	padding:0px;
	margin:0px;
	background-color:white;
	font-family: 'Roboto', 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
	font-size:26.66666px;
	display:flex;
	flex-direction: column;
}

header{
	height:514px;
	text-align: center;
	display:block;
	flex-grow: 0;
}

#welcomeMessage{
	font-size:1.6em;
	margin-top:1.4em;
	color:#b4e600;
	font-weight:400;
	margin-left:5.6%;
}

.leavesBackground{
	background-image:url(images/background_2560.jpg);
	background-image:image-set(
      url(images/background_2560.jpg) 1x,
	  url(images/background_4928.jpg) 2x
    );
	background-image:-webkit-image-set(
      url(images/background_2560.jpg) 1x,
	  url(images/background_4928.jpg) 2x
    );	
	background-size: cover;
	background-position: center 8%;	
}

header img{
	position:relative;
	top:23%;
	width:490px;  
	max-width:80%;
	height:auto;
	display:block;
	margin:auto;
}

nav{
	text-align: center;
	padding: 15px 0px 15px 0px;
	flex-grow:0;
}

nav a {	
	display: inline-block;
	text-transform: uppercase;
	color:#b4e600;
	font-size: 30.6px;
	line-height:57px;
	font-weight: 300;
	padding: 0px 20px 0px 20px;
	margin:0px 10px 0px 10px;
	box-shadow:0px 0px 0px 5px white inset;
	transition:background-color 0.5s, color 0.3s, box-shadow 0.3s;
}

nav a:hover, nav a.selected {
	background-color:#b4e600;
	color:white;
	box-shadow:0px 0px 0px 0px white inset;
}

main{
	flex-grow: 1;
	width:1100px;
	margin:0px auto 4.6em auto;
	font-size:1em;
	line-height: 1.5;
	color:#2E2E2E;
	font-weight:100;
	font-family: 'Catamaran', 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
	display:flex;
	flex-direction: column;
	justify-content: center;
}

main h1{
	font-family: 'Roboto', 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
	margin: 1.5em auto 0.68em 3%;
	font-weight: 100;
	font-size: 2.5em;
	text-transform: uppercase;
	color: #858585;
	line-height: normal;
	text-align:left;
}

main h2{
	font-size:1em;
	margin-left:3%;
	margin-right:3%;
	margin-top:2.1em;
	margin-bottom:0.5em;
	font-weight:600;
	text-transform:uppercase;
	text-align:left;
}

main section > h2:first-child{
	margin-top:0em;
}

main h2.unindented{
	margin-left:0em;
}

main h3{
	font-size:1em;
	margin-right:3%;
	margin-top:2.1em;
	margin-bottom:0.5em;
	font-weight:500;
	text-align:left;
}

main p:first-of-type{
	margin-top: 0px;
}

main ul{
	page-break-before: avoid;
}

main ul li {
	margin-bottom:0.3em;
	list-style: none;
	margin-left:0px;
	padding-left:0px;
	text-indent:-1em;
}

main ul li:before{
	content:"\2022";
	padding-right:1em;
}

main ul li:last-of-type{
	margin-bottom:0px;
}

main ul.sparseList li {
	margin-bottom:1em;
}

main img{
	border-radius:3px;	
}

a {
	text-decoration: none;
	outline: none;
}

main a {
	font-weight:400;
	color:#b4e600;
	transition:color 0.3s;
}

main a:hover {
	color:#9cc700;
}

footer{
	flex-grow:0;
}

#imprintLink{
	text-align: center;
	margin-bottom: 1.1em;
	font-size:0.7em;
}

#imprintLink a{
	font-weight:400;
	color:#2E2E2E;
	margin-top:0.3em;
	text-transform: uppercase;
	letter-spacing:0.2em;
	transition: color 0.5s;
	padding-left:0.2em;
}

#bottomBackground{
	height:123px;
	background-position: center 96% !important;	
}

article section{
	text-align: justify;
	hyphens:auto;
}

.horizontalLayout{
	display:flex;
	align-items: flex-start;
}

.currentInformation{
	color:#f02c00;
	margin-top:3em;
	margin-bottom:3em;
	font-weight:300;
}

#infoBox{
	flex-shrink: 0;
	padding:0.9em;
	margin-left:1.7em;
	background-color:#f3f3f3;
	border-radius:3px;
	display:flex;
	align-items: center;
}

.contact #infoBox{
	margin-right:3.8em;
	margin-left:0px;
	background-color:transparent;
	display:block;
}

.contact #infoBox{
	align-self: flex-start;
}

#infoBoxImage{
	height:11.2em;
	width:auto;
	margin-right:0.8em;
}

#infoBoxImage img{
	max-width: 100%;
	max-height:100%;
}

#ats{
	float:right;
	margin-left:1em;
	margin-top:0.5em;
	margin-bottom:0.5em;
	width:auto;
	height:15.5em;
}


#ats img{
	height:calc(100% - 5.8ex);
}

#googleMaps{
	flex-grow: 1;
	height:66vh;
	min-height:300px;
	align-self: stretch;
	border-radius:2px;
}

#contactAddress{
	flex-grow: 0;
	flex-shrink:0;
	margin-left:5em;
	display:flex;
	align-items: flex-start;
	flex-direction: column;
}

#contactAddress div{
	padding:0.9em;
	background-color:#f3f3f3;
	border-radius:3px;	
}

blockquote{
	margin-top:2em;
	margin-bottom:2em;
}

blockquote p {
	font-size:2.3em;
	margin-bottom:0.1em;
	color:#b4e600;
	font-family: 'Kalam', cursive;
}

cite{
	font-style:normal;
	margin-left:1em;
}

cite:before{
	content:"\2014";
	margin-right:0.3em;
}

cite.imageSource{
	display:block;
	font-size:0.57em;
	margin-left:0em;
	font-weight: 500;
}

cite.imageSource:before{
	content:"";
	margin-right:0em;
}

#portrait{
	width:auto;
	height:453px;	
	float:right;
	margin-left:40px;
	margin-top:13px;
	margin-bottom:20px;
}

#vfoLogo{
	width:auto;
	height:200px;
}

strong{
	font-weight: 400;
}

table {
	padding-top: 20px;
}

#aboutMeTable td{
	vertical-align: top;
	padding-bottom:20px;
	line-height:1.2;
	text-align:left;
}

#aboutMeTable tr:last-of-type td:last-of-type{
	padding-bottom:0px;
}

#aboutMeTable td.yearColumn{
	white-space: nowrap;
	padding-right: 40px;
	font-weight: 400;
	text-align:right;
}

@media (min-width:2000px){
	main{
		width:1800px;
	}
	
	article section{
		column-count: 2;	
		column-gap:180px;
		column-rule: 1px solid #E0E0E0;		
	}
	
	main h1{
		margin-left: 0.5em;
		margin-bottom:1.08em;
	}
	
	#welcomeMessage{
		margin-left:61.6px;
	}
	
	#infoBox{
		margin-left:3.1em;
	}
	
	#ats{
		margin-top:0.6em;
		height:14em;
	}
	
	#googleMaps{
		height:79vh;
	}
}

@media(max-width: 1920px){
	
	.leavesBackground{
		background-size: 1920px;
		background-image:url(images/background_1920.jpg);
		background-image:image-set(
		  url(images/background_1920.jpg) 1x,
		  url(images/background_3840.jpg) 2x
		);
		background-image:-webkit-image-set(
		  url(images/background_1920.jpg) 1x,
		  url(images/background_3840.jpg) 2x
		);		
	}
}
	
@media (max-width:1600px){
	
	main{
		font-size:0.8em;
	}
	
	nav{
		padding: 10px 0px 10px 0px;
	}
	
	nav a {	
		font-size: 24px;
		line-height:45px;
		padding: 0px 12px 0px 12px;
		margin:0px 6px 0px 6px;
	}
	
	header img{
		width:462px;  
	}
	
	#portrait{
		height:325px;
		margin-top:8px;
		margin-left:50px;		
	}
	
	#ats{
		height:14.5em;
		margin-top:0.6em;
	}
	
	#vfoLogo{
		height:135px;	
	}

}

@media(max-width: 1280px){
	
	main{
		width:80%;
	}
	
	#portrait{
		height:300px;
	}
	
	#ats{
		height:14.5em;
		margin-bottom:0px;
	}
}

/* only info box */
@media (max-width:1063px){
	.horizontalLayout{
		flex-direction: column;
	}
	#infoBox{
		margin-left:0px;
		margin-top:0.5em;
	}
	.contact #infoBox{
		margin-top:0em;
	}
	
	#googleMaps{
		height:79vh;
	}
}

/* menu */
@media (max-width:1080px){
	nav a {	
		font-size: 20.9px;
		padding:0px 10px 0px 10px;
		margin:0px 1px 0px 1px;
		line-height:40px;
		font-weight:400;
	}
}

/* very small viewports */
@media (max-width:880px) {

	body{
		font-size:8px;
	}
	
	header{
		height:40vh;
		min-height:150px;
		max-height:400px;
	}
	
	.leavesBackground{
		background-size: 880px;
		background-image:url(images/background_880.jpg);
		background-image:image-set(
		  url(images/background_880.jpg) 1x,
		  url(images/background_1760.jpg) 2x
		);
		background-image:-webkit-image-set(
		  url(images/background_880.jpg) 1x,
		  url(images/background_1760.jpg) 2x
		);
	}
	
	header img{
		top:15%;	
		max-height:100px;
		width:auto;	
	}
	
	nav a {	
		font-size: 17.3px;
	}
	
	main{
		font-size:2em;
		line-height:1.7;
		margin-bottom: 60px;
	}
	
	main h1{
		margin-top:1em;
		margin-bottom:0.5em;
		font-size:2.5em;
	}
	
	table {
		padding-top: 0px;
	}
	
	footer{
		height:80px;
	}
	
	#imprintLink{
		font-size:1.4em;
	}
	
	#ats{
		height:18em;
		margin-top:0.6em;
	}
	
	#portrait{
		height:auto;
		width:38%;
		max-width:200px;
		margin-left:23px;
		margin-bottom:8px;
		border-radius:2px;
	}
	
	#ats{
		height:20em;
		float:none;
		display:inline-block;
		text-align:left;
		margin-left:0px;
	}
	
	#atsWrapper{
		text-align:center;
	}
	
}

/* make table columns rows and don't justify */
@media (max-width:550px) {
	
	/* let header have height of screen */
	@media (max-height:600px) {
		#headerNavWrapper{
			display:flex;
			flex-direction: column;
			height:100vh;
		}

		nav{
			flex-grow:0;
			flex-shrink:0;
		}

		header{
			flex-grow:1;
			flex-shrink: 0;
			max-height:none;
		}
		
		header img{
			top:20vh;
		}
	}
	
	main{
		width:90%;
	}
	
	article section{
		text-align: left;
	}
	
	#aboutMeTable td.yearColumn{
		text-align:left;
		padding-top:10px;
	}
	
	#aboutMeTable td{
		padding-top:0px;
		padding-bottom:8px;
	}
	
	td{
		display: block;
	}
	
	blockquote {
		margin-left:1.1em;
		margin-right:0.5em;
	}
	
}

@media (max-width:423px){
	.horizontalLayout{
		align-items: stretch;
	}
	#infoBox{
		flex-direction: column;
		align-items: flex-start;
	}
	#infoBoxImage{
		margin-right: 0px;
		height:auto;
		order:1;
		margin-top:1em;
		margin-bottom:-10px;
	}
	#info{
		order:0;
	}
}