@charset "UTF-8";
/*   JOCHEN ENCKE CSS   */
* {
	box-sizing: border-box;
}
body::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1000;
	background-image: url("../images/background-sky.jpg");
	background-repeat: repeat-x;
	background-position: top;
	background-size: auto 91vh;
}
body {
	font-size: 19px;
	line-height: 1.4;
}
html, body {
	height: 100%;
	/* overflow-y: hidden; */
}
body, p, th, td, li, h1, h2, h3, h4, legend, input, label {
	color: #003366;
	font-family: 'Cabin', sans-serif;
	font-weight: 400;
	text-align: left;
}
p {
	margin-bottom: 0.5em;
}
blockquote p:last-of-type {
	font-size: 14px;
	text-align: right;
	padding: 5px 0;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #3399cc;
}
cite {
	font-weight: 700;
}
a:link, a:visited {
	color: #3399cc;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	text-decoration: underline;
}
img {max-width: 100%;} /* Forces img files fill their containers */

/* NAVIGATION */
/* ========== */
footer {
	width: 100%;
	height: 19vh; /* 93/500 */
	z-index: 1000;
	position: fixed;
	bottom: 0;
	left: 0;
	background-image: url("../images/background-menu.png");
	background-size: cover;
}
nav {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}
nav ul {
	list-style: none;
	text-align: center;
}
nav li {
	display: inline;
	text-align: center;
}
nav li img {
	display: block;
	margin: 1.5vw auto;
}
nav li:nth-of-type(1) img {
	width: 5.625vw; /* 18/320 */
}
nav li:nth-of-type(2) img {
	width: 8.75vw; /* 28/320 */
}
nav li:nth-of-type(3) img {
	width: 10.3125vw; /* 33/320 */
}
nav li:nth-of-type(4) img {
	width: 7.8125vw; /* 25/320 */
	padding-bottom: 3px;
}
nav a:link, nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	color: #e6e6e6;
	font-size: 3.75vw; /* 25/320 */
	line-height: 1.2;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	display: inline-block;
	text-decoration: none;
	padding: 1.5vw 2vw;
}
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	color: white;
	text-shadow: 0px 2px 2px black;
}
nav ul a:hover img, nav ul a:active img, nav ul a:focus img { /* this changes the background and text color for both mouse and keyboard navigators */
	color: white;
	-webkit-filter: drop-shadow(0 2px 2px black);
	filter: drop-shadow(0 2px 2px black);
}
nav ul a.current{
	color: white;
	text-shadow: 0px 2px 2px black;
}
nav ul a.current img{
	-webkit-filter: drop-shadow(0 2px 2px black);
	filter: drop-shadow(0 2px 2px black);
}

/* MARGINS */
#content {
	width: 81.25%; /* 260/320 */
	margin: 0 auto;
}
.youtube, .copyright {
	margin-left: -9.375vw; /* 30/320 */
	margin-right: -9.375vw; /* 30/320 */
}
section {
	margin: 0 auto 1em auto;
}

/* HEADERS */
h1 {
	color: white;
	margin-bottom: 0.3em;
	text-shadow: 0px 3px 3px #003366;
}
h2, h3 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1em;
}
h1 {
	font-size: 6vh; /* 30/500px */
}
h2 {
	font-size: 22px;
}
h3 {
	font-size: 20px;
}
article {
	padding-top: 6vh; /* measured visually */
	padding-bottom: 17vh; /* 85/500, menu overlaps bottom */
}
.return-to-top {
	font-size: 83.333333%;  /* 15/18px */
	font-weight: 700;
	padding-left: 30px;
	margin: 2em 0 2.5em 0;
	background-image: url("../images/triangle-top.svg");
	background-size: 13px 13px;
	background-repeat: no-repeat;
	background-position: 0px 3px;
	clear: both;
}
.copyright {
	color: #666666;
	font-size: 50%; /* 9/18px */
	text-align: center;
	letter-spacing: 0.1em;
}

/* WELCOME PAGE */
/* ============ */
#photoframe {
	height: 0;
	padding-bottom: 54.347826%; /* ratio of box 230:125 */
	position: relative;
}
#photo {
	position: absolute;
  	top: 0;
	left: 0;
  	width: 100%;
	height: 100%;
	background-image: url("../images/jochen-encke.jpg");
	background-repeat: no-repeat;
	background-position: top -20px center;
   background-size: 140%;
	border: 3px solid white;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,102,153,0.5);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,102,153,0.5);
	box-shadow: 0px 5px 5px 0px rgba(0,102,153,0.5);
}
.contact li:last-of-type {
	margin-bottom: 0px;
}
.contact li a:link, .contact li a:visited {
	color: #003366;
	background-color: #d3f0ff;
	display: block;
	font-size: 19px;
	line-height: 1.1;
	padding: 10px 0 10px 45px;
	margin: 0 -5% 10px -5%;
	background-repeat: no-repeat;
	background-position: left;
	border: 2px solid white;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,153,255,0.5);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,153,255,0.5);
	box-shadow: 0px 5px 5px 0px rgba(0,153,255,0.5);
	background-position: 15px center;
}

.contact li a:hover, .contact li a:active, .contact li a:focus {
	background-color: white;
	text-decoration: none;
}

.tooltip {
    position: relative;
    display: inline-block;
	 width: 100%;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 70%;
	 margin-left: -35%; /* half of width */
    color: #003366;
	 background-color: #ffcc00;
	 font-size: 70%;
	 text-align: center;
    border-radius: 6px;
    padding: 1px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #ffcc00 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.contact-telephone a {
	background-image: url("../images/contact-telephone.svg");
	background-size: 20px 20px;
}
.contact-email a {
	background-image: url("../images/contact-email.svg");
	background-size: 18px auto;
}
.contact-skype a {
	background-image: url("../images/contact-skype.svg");
	background-size: 22px auto;
}
.contact-address a {
	background-image: url("../images/contact-address.svg");
	background-size: 16px auto;
}
.column-narrow {
	margin: 1em 0;
}

/* THOUGHTS PAGE */
/* ============= */
#thoughts {
	overflow: hidden;
}
#thoughts section a {
	font-size: 4vh; /* 20/500px */
	text-decoration: none;
	color: #003366;
}
#thoughts section a:hover, #thoughts section a:active, #thoughts section a:focus {
	color: #0066cc;
}
#clouds div {
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	will-change: left;
}
#cloud-1 {
	top: 8vh; /* 40/500px */
	width: 30vh; /* 150/500px */
	height:      12vh; /* 60/500px */
	line-height: 12vh; /* 60/500px */
	background-image: url("../images/cloud-1.png");
	animation: movement1 45s ease-out infinite alternate;
}
#cloud-2 {
	top: 22vh; /* 110/500px */
	width: 35vh; /* 180/500px */
	height:      16vh; /* 80/500px */
	line-height: 16vh; /* 80/500px */
	background-image: url("../images/cloud-2.png");
	animation: movement2 60s ease-out infinite alternate;
}
#cloud-3 {
	top: 38vh; /* 200/500px */
	width: 24vh; /* 125/500px */
	height:      15vh; /* 75/500px */
	line-height: 15vh; /* 75/500px */
	background-image: url("../images/cloud-3.png");
	animation: movement3 80s ease-out infinite alternate;
}
#cloud-4 {
	top: 50vh; /* 250/500px */
	width: 34vh; /* 170/500px */
	height:      12vh; /* 60/500px */
	line-height: 12vh; /* 60/500px */
	background-image: url("../images/cloud-4.png");
	animation: movement4 100s ease-out infinite alternate;
}
#cloud-5 {
	top: 64vh; /* 320/500px */
	width: 34vh; /* 170/500px */
	height:      8vh; /* 40/500px */
	line-height: 8vh; /* 40/500px */
	background-image: url("../images/cloud-5.png");
	animation: movement5 120s ease-out infinite alternate;
}
@keyframes movement1 {
  0% {left: 70%;} 100% {left: 0px;}
}
@keyframes movement2 {
  0% {left: -20px;} 100% {left: 70%;}
}
@keyframes movement3 {
  0% {left: 60%;} 100% {left: -30px;}
}
@keyframes movement4 {
  0% {left: 0px;} 100% {left: 60%;}
}
@keyframes movement5 {
  0% {left: 60%;} 100% {left: -20px;}
}

/* MEDIA PAGE */
/* ========== */
.float-left {
	width: 39.0625vw; /* 125/320px */
}
.photos img {
	width: 39.0625vw; /* 125/320px */
}
.photos img:nth-of-type(odd) {
	margin-right: 3.125vw; /* 10/320px */
}
.book {
	width: 39.0625vw; /* 125/320px */
	float: right;
	margin-left: 10px;
}
.photo-half-width {
}
.photo-half-width img {
	border: 1px solid rgba(0, 0, 0, 0.5);
}
.youtube {
	width: 100vw; /* ratio of box 427:240 */
	height: 56.2060896vw; /* unit relative to width */
	position: relative;
	margin-bottom: 1.5em;
}
.youtube iframe {
	position: absolute;
  	top: 0;
	left: 0;
  	width: 100%;
	height: 100%;
}

/*      MEDIA QUERIES      */
/* ======================= */

@media (min-width: 600px) {
	#content {
		max-width: 600px;
		margin: 0 auto;
	}
	nav a:link, nav ul a:visited {
		font-size: 2.5vh;
		line-height: 7vh;
		padding: 1vw 2vw;
	}
	nav a:nth-of-type(1) {
		padding-left: 0;
	}
	nav a:nth-of-type(4) {
		padding-right: 0;
	}
	nav li img {
		display: inline-block;
		margin: 0 auto;
	}
	nav li:nth-of-type(1) img {
		width: 2vh; /* 18/320 */
	}
	nav li:nth-of-type(2) img {
		width: 3vh; /* 28/320 */
	}
	nav li:nth-of-type(3) img {
		width: 3vh; /* 33/320 */
	}
	nav li:nth-of-type(4) img {
		width: 3vh; /* 25/320 */
		padding-bottom: 0;
		margin-right: 5px;
	}

	#photo-container, address {
		float: right;
		width: 45%;
	}
	#photoframe {
		padding-bottom: 100%; /* square */
	}
	#photo {
		background-size: 150%;
		background-position: top center;
	}
	.column-narrow {
		width: 45%;
		float: left;
		margin-top: 0;
	}
	.contact li a:link, .contact li a:visited {
		margin: 0 0 10px 0;
	}
	section {
		width: 75%;
	}
	#breaking header {
		width: 75%;
		margin: 0 auto;
	}
	#breaking article, #thoughts1 article, #thoughts2 article, #thoughts3 article, #thoughts4 article, #thoughts5 article {
		background-color: rgba(255, 255, 255, 0.2);
	}
	#breaking .return-to-top, #thoughts1 .return-to-top, #thoughts2 .return-to-top, #thoughts3 .return-to-top, #thoughts4 .return-to-top, #thoughts5 .return-to-top, #breaking .copyright, #thoughts1 .copyright, #thoughts2 .copyright, #thoughts3 .copyright, #thoughts4 .copyright, #thoughts5 .copyright {
		margin-left: 12.5%;
	}
	p {
		line-height: 1.6;
	}
	address:after {
    content: "";
    display: block;
    clear: both;
	}
	article {
		float: left;
	}
	.copyright {
		text-align: left;
		margin: 0;
	}
	.float-left, .column-narrow2 {
		width: 65%;
	}
  .book {
		width: 30%;
	}
	.youtube {
		width: 600px;
		height: 337px;
		position: relative;
		margin: 0 0 1.5em 0;
	}
}

@media screen and (orientation:landscape) and (max-width: 768px){
	.youtube {
		width: 80vw; /* ratio of box 427:240 */
		height: 56.2060896vw; /* unit relative to width */
		position: relative;
		margin-bottom: 1.5em;
		padding: 0 50px;
	}
	h1 {
		font-size: 9vh; /* 30/500px */
	}
	nav a:link, nav ul a:visited {
		font-size: 5vh;
		line-height: 6vh;
		padding: 1vw 2vw;
	}
	nav li img {
		display: inline-block;
		margin: 0 auto;
	}
	nav li:nth-of-type(1) img {
		width: 3.5vh; /* 18/320 */
	}
	nav li:nth-of-type(2) img {
		width: 6vh; /* 28/320 */
	}
	nav li:nth-of-type(3) img {
		width: 6vh; /* 33/320 */
	}
	nav li:nth-of-type(4) img {
		width: 6vh; /* 25/320 */
		padding-bottom: 0;
		margin-right: 5px;
	}

}