#website {
	position: relative;
	float: left;
	width: 100%;
	height: 50vw;
	min-height: 600px;
	margin-top: 2em;
	margin-bottom: 20px;
	right: 0;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	-webkit-overflow-scrolling: touch;
  	overflow-y: scroll;
}


/************ CSS Güggst Du - 07.03.2017 ************/



body {
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 1.5vw;
	line-height: 2.2vw;
	font-weight: 200;
	color: #111;
	text-align: justify;  
	margin: 0px;
	padding: 0px;
	behavior:url("../csshover.htc");
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;
	-webkit-text-size-adjust: none;
	text-decoration: none;
}





/************ Logo ************/


#logobox {
	position: fixed;
	left: 8vw;
	top: 1vw;
	width: 12vw;
	height: 4vw;
	background-image: url(../pics/logo.png);
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 99;
}

#fisch {
	position: fixed;
	right: 8vw;
	top: 0.75vw;
	width: 8vw;
	height: 7vw;
	background-image: url(../pics/fisch.png);
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 99;
}

#logobox a, a:hover, a:active {
	text-decoration: none;
	color: orange;
}

#siggi {
	position: fixed;
	right: 7.5vw;
	top: 1.5vw;
	width: 10vw;
	height: 4vw;
	font-size: 2em;
	color: #FFF;
	text-align: right;
	z-index: 99;
}





/************ Navigation ************/


#menu {
	position: fixed;
	top: 0;
	border: 0;
	width: 100vw;
	height: 5vw;
	background-color: #333;
	color: #FFFFFF;
	list-style: none outside none;
	text-decoration: none;
	text-align: right;
	z-index: 95;
}

#menu ul {
	position: absolute;
	margin: 2vw auto;
	left: 30vw;
	width: 80vw;
	list-style: none;
}

#menu ul li {
	float: left;
	margin: 0 2vw 0 0;
	font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
	font-weight: 100;
	letter-spacing: 1px;
}

#menu ul li a {
	color: #999999;
	text-decoration: none;	
}

#menu ul li a:hover {
	 color: white;
}

#menu li a.active {
	color: white;
	text-decoration: none;
}





/************ Diary ************/



#diary {
	position: relative;
	float: left;
	margin-top: 12vw;
	margin-left: 0;
	width: 100vw;
	margin-bottom: 6vw;
	overflow: auto;
	font-size: 1.5vw; 
	line-height: 2.25vw;
	font-weight: 200;
	color: #333;
}

#blog-space {
	position: relative;
	float: left;
	width: 100vw;
	height: 5vw;
}

#diary-top {
	position: relative;
	float: left;
	margin-left: 8vw;
	width: 84vw;
	height: auto;
}

#small-box {
	position: relative;
	float: left;
	margin-top: 4vw;
	margin-left: 8vw;
	width: 84vw;
	height: 20vw;
	overflow: auto;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}

#inhalte-box {
	height: 20vw;
	width: auto;
	overflow: auto;
	overflow-y: hidden;
}


#blog-top {
	position: relative;
	float: left;
	width: 92vw;
	height: 2vvw;
	background-color: #EEE;
	padding-top: 3vw;
	padding-left: 8vw;
}

#blog-title {
	position: relative;
	float: left;
	width: 42vw;
	height: 2vw;
	font-size: 2vw; 
	font-weight: 400;
	color: #605C54;
	line-height: 0;
	margin-top: -0.5vw;
}

#blog-date {
	position: relative;
	float: right;
	left: 0;
	width: 32vw;
	height: 2vw;
	margin-top: -0.5vw;
	margin-right: 8vw;
	font-size: 1.5vw; 
	line-height: 0vw;
	font-weight: 100;
	color: #605C54;
	text-align: right;
}

#blog {
	position: relative;
	float: left;
	margin-left: 8vw;
	width: 84vw;
	height: auto;
	margin-top: 2vw;
}

#mov-box-T {
	position: relative;
	float: right;
	width: 40vw;
	height: 22.5vw;
	margin-top: 2vw;
	margin-left: 2.5vw;
	padding-bottom: 1.5vw;
}

#mov-box-L {
	position: relative;
	float: left;
	width: 40vw;
	height: 22.5vw;
	margin-top: 2vw;
	padding-bottom: 1.5vw;
}

#mov-box-R {
	position: relative;
	float: right;
	width: 40vw;
	height: 22.5vw;
	margin-top: 2vw;
	padding-bottom: 1.5vw;
}

.diary-title {
	font-size: 4vw; 
	font-weight: 100;
	color: #605C54;
	line-height: 4vw;
}

.diary-intro {
	font-size: 1.75vw; 
	line-height: 2.5vw;
	font-weight: 100;
	color: #605C54;
}

.blog-title {
	font-size: 20px; 
	font-weight: 100;
	color: #333;
	line-height: 0px;
}

.note {
	font-size: 1.25vw; 
	line-height: 1.75vw;
	font-weight: 100;
	color: #605C54;
}

#big-box {
	position: relative;
	top: 0;
	left: 0;
	width: 84vw;
	height: 40vw;
	overflow: auto;
}

#bilder-box {
	height: 40vw;
	width: auto;
	overflow: auto;
	overflow-y: hidden;
}

#line {
	position: relative;
	float: left;
	width: 100%;
	border-top: thin solid #999;
}





/************ Bildergalerie Photoswipe ******************/



.inhalte-swipe { 
	overflow: hidden;
	position: relative;
	height: 20vw;
	width: 90vw;
	white-space: nowrap;
	overflow-x: scroll;
}

.inhalte-swipe ul {
	position: absolute;
	list-style: none;
	overflow: none;
	white-space: nowrap;
	padding: 0;
	margin: 0;
}
	
.inhalte-swipe:after { 
	clear: both; 
	content: "."; 
	display: block; 
	height: 0; 
	visibility: hidden; 
}

.inhalte-swipe li { 
	display: inline;
}

.inhalte-swipe li a { 
	list-style: none; 
	display: inline; 
	margin-left: 0vw; 
	margin-right: 6vw; 
	text-decoration: none; 
}

.inhalte-swipe li img { 
	display: inline; 
	width: auto; 
	height: 14vw; 
	padding-top: 1vw;

}


.gallery-swipe { 
	overflow: hidden;
	position: relative;
	width: 100&;
	height: 40vw;
	white-space: nowrap;
	overflow-x:scroll;
}

.gallery-swipe ul {
	position: absolute;
	list-style: none;
	overflow: none;
	white-space: nowrap;
	padding: 0;
	margin: 0;
}
	
.gallery-swipe:after { 
	clear: both; 
	content: "."; 
	display: block; 
	height: 0; 
	visibility: hidden; 
}

.gallery-swipe li { 
	display: inline;
}

.gallery-swipe li a { 
	list-style: none; 
	display: inline; 
	margin-left: -40px; 
	margin-right: 60px; 
	text-decoration: none; 
}

.gallery-swipe li img { 
	display: inline; 
	height: 30vw; 
	width: auto; 
	padding-top: 15px;

}


/* For inline examples only */

#PhotoSwipeTarget { width: 100%; height: 200px; }

#Indicators { text-align: center; margin-top: 20px; }
#Indicators span { display: inline-block; height: 10px; width: 10px; margin: 0 10px 0 0; padding: 0; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px; background: #c5c5c5; overflow:hidden; }
#Indicators span.current{ background: #EEBF02; }


/*
 * photoswipe.css
 * Copyright (c) %%year%% by Code Computerlove (http://www.codecomputerlove.com)
 * Licensed under the MIT license
 *
 * Default styles for PhotoSwipe
 * Avoid any position or dimension based styles
 * where possible, unless specified already here.
 * The gallery automatically works out gallery item
 * positions etc.
 */

 
body.ps-active, body.ps-building, div.ps-active, div.ps-building
{
	background: #000;
	overflow: hidden;
}
body.ps-active *, div.ps-active *
{ 
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
	display: none;
}
body.ps-active *:focus, div.ps-active *:focus 
{ 
	outline: 0; 
}


/* Document overlay */

div.ps-document-overlay 
{
	background: #000;
}


/* UILayer */

div.ps-uilayer { 
	
	background: #000;
	cursor: pointer;
	
}


/* Zoom/pan/rotate layer */

div.ps-zoom-pan-rotate{
	background: #000;
}
div.ps-zoom-pan-rotate *  { display: block; }


/* Carousel */

div.ps-carousel-item-loading 
{ 
	background: url(loader.gif) no-repeat center center; 
}

div.ps-carousel-item-error 
{ 
	background: url(error.gif) no-repeat center center; 
}


/* Caption */

div.ps-caption
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-bottom: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
}
div.ps-caption *  { display: inline; }

div.ps-caption-bottom
{ 
	border-top: 1px solid #42403f;
	border-bottom: none;
	min-height: 44px;
}

div.ps-caption-content
{
	padding: 13px;
	display: block;
}


/* Toolbar */

div.ps-toolbar
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-top: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
	height: 44px;
	display: table;
	table-layout: fixed;
}
div.ps-toolbar * { 
	display: block;
}

div.ps-toolbar-top 
{
	border-bottom: 1px solid #42403f;
	border-top: none;
}

div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play
{
	cursor: pointer;
	display: table-cell;
}

div.ps-toolbar div div.ps-toolbar-content
{
	width: 44px;
	height: 44px;
	margin: 0 auto 0;
	background-image: url(icons.png);
	background-repeat: no-repeat;
}

div.ps-toolbar-close div.ps-toolbar-content
{
	background-position: 0 0;
}

div.ps-toolbar-previous div.ps-toolbar-content
{
	background-position: -44px 0;
}

div.ps-toolbar-previous-disabled div.ps-toolbar-content
{
	background-position: -44px -44px;
}

div.ps-toolbar-next div.ps-toolbar-content
{
	background-position: -132px 0;
}

div.ps-toolbar-next-disabled div.ps-toolbar-content
{
	background-position: -132px -44px;
}

div.ps-toolbar-play div.ps-toolbar-content
{
	background-position: -88px 0;
}

/* Hi-res display */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi)
{
	div.ps-toolbar div div.ps-toolbar-content
	{
		-moz-background-size: 176px 88px;
		-o-background-size: 176px 88px;
		-webkit-background-size: 176px 88px;
		background-size: 176px 88px;
		background-image: url(icons@2x.png);
	}
}












/************ FONTS ******************/


@font-face {
    font-family: 'QuicksandLight';
    src: url('Quicksand_Light-webfont.eot');
    src: url('Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Light-webfont.woff') format('woff'),
         url('Quicksand_Light-webfont.ttf') format('truetype'),
         url('Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'QuicksandLightOblique';
    src: url('Quicksand_Light_Oblique-webfont.eot');
    src: url('Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Light_Oblique-webfont.woff') format('woff'),
         url('Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
         url('Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'QuicksandBook';
    src: url('Quicksand_Book-webfont.eot');
    src: url('Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Book-webfont.woff') format('woff'),
         url('Quicksand_Book-webfont.ttf') format('truetype'),
         url('Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'QuicksandBookOblique';
    src: url('Quicksand_Book_Oblique-webfont.eot');
    src: url('Quicksand_Book_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Book_Oblique-webfont.woff') format('woff'),
         url('Quicksand_Book_Oblique-webfont.ttf') format('truetype'),
         url('Quicksand_Book_Oblique-webfont.svg#QuicksandBookOblique') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'QuicksandBold';
    src: url('Quicksand_Bold-webfont.eot');
    src: url('Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Bold-webfont.woff') format('woff'),
         url('Quicksand_Bold-webfont.ttf') format('truetype'),
         url('Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandBoldOblique';
    src: url('Quicksand_Bold_Oblique-webfont.eot');
    src: url('Quicksand_Bold_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Bold_Oblique-webfont.woff') format('woff'),
         url('Quicksand_Bold_Oblique-webfont.ttf') format('truetype'),
         url('Quicksand_Bold_Oblique-webfont.svg#QuicksandBoldOblique') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'QuicksandDash';
    src: url('Quicksand_Dash-webfont.eot');
    src: url('Quicksand_Dash-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Dash-webfont.woff') format('woff'),
         url('Quicksand_Dash-webfont.ttf') format('truetype'),
         url('Quicksand_Dash-webfont.svg#QuicksandDash') format('svg');
    font-weight: normal;
    font-style: normal;
}





@media (max-width: 800px) and (orientation: portrait) {



body {
	font-size: 2.5vw;
	line-height: 3.2vw;
	font-weight: 200;
	background-color: #FFF;
}





/************ header ************/



#logobox {
	position: relative;
	float: left;
	left: 7.5vw;
	margin-top: 5vw;
	width: 36vw;
	height: 12vw;
	z-index: 99;
}

#fisch {
	position: relative;
	float: right;
	right: 0;
	margin-right: 5vw;
	margin-top: 1vw;
	width: 30vw;
	height: 15vw;
	z-index: 99;
}





/************ Navigation ************/



#menu {
	position: relative;
	float: left;
	top: 0;
	border: 0;
	width: 100vw;
	height: 22vw;
	margin: -18vw 0 10vw 0;
	background-color: #333;
}

#menu ul {
	left: 0;
	margin: 22vw 0 0 0;
	padding: 0;
	width: 100vw;
	height: 12vw;
	background-color: #0CF;
}

#menu ul li {
	float: left;
	margin: 0 2vw 0 0;
	font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
	font-size: 1.75em;
	font-weight: 100;
	letter-spacing: 1px;
	padding: 5vw;
	text-align: center;
}

#menu ul li a {
	color: #FFF;
	text-decoration: none;	
}

#menu ul li a:hover {
	 color: #333;
	 font-weight: 600;
}

#menu li a.active {
	 color: #333;
	 font-weight: 600;
}





/************ Diary ************/



#diary {
	margin: 0;
	margin-top: 15vw;
	width: 100vw;
	font-size: 4.5vw; 
	line-height: 6.5vw;
}

#diary-top {
	text-align: center;
}

#blog-top {
	padding: 0;
	width: 100vw;
	height: auto;
	background-color: #EEE;
}

#blog-title {
	width: 84vw;
	height: auto;
	font-size: 6vw; 
	line-height: 9vw;
	font-weight: 400;
	text-align: center;
	margin-top: 2vw;
	margin-left: 8vw;
}

#blog-date {
	position: relative;
	float: left;
	width: 84vw;
	height: 2vw;
	margin-top: 0vw;
	margin-left: 8vw;
	margin-bottom: 9vw;
	font-size: 4.5vw; 
	line-height: 6vw;
	font-weight: 100;
	color: #605C54;
	text-align: center;
}

#mov-box-T {
	position: relative;
	float: left;
	width: 100vw;
	height: 56vw;
	margin-top: 5vw;
	margin-left: -8vw;
	padding-bottom: 5vw;
}

.diary-title {
	font-size: 12vw; 
	font-weight: 100;
	color: #605C54;
	line-height: 12vw;
}

.diary-intro {
	font-size: 4.5vw; 
	line-height: 6vw;
	font-weight: 100;
	color: #605C54;
}

.blog-title {
	font-size: 20px; 
	font-weight: 100;
	color: #333;
	line-height: 0px;
}

.note {
	font-size: 4vw; 
	line-height: 6.5vw;
	font-weight: 100;
	color: #605C54;
}

#big-box {
	position: relative;
	top: 0;
	left: 0;
	width: 100vw;
	height: 60vw;
	overflow: auto;
	margin-left: -8vw;
}

#bilder-box {
	height: 60vw;
	width: 100vw;
	overflow: auto;
	overflow-y: hidden;
}

#small-box {
	display: none;
}

#inhalte-box {
	height: 20vw;
	width: auto;
	overflow: auto;
	overflow-y: hidden;
}






/************ Bildergalerie Photoswipe ******************/



.inhalte-swipe { 
	overflow: hidden;
	position: relative;
	height: 200px;
	width: 900px;
	white-space: nowrap;
	overflow-x: scroll;
}

.inhalte-swipe ul {
	position: absolute;
	list-style: none;
	overflow: none;
	white-space: nowrap;
	padding: 0;
	margin: 0;
}
	
.inhalte-swipe:after { 
	clear: both; 
	content: "."; 
	display: block; 
	height: 0; 
	visibility: hidden; 
}

.inhalte-swipe li { 
	display: inline;
}

.inhalte-swipe li a { 
	list-style: none; 
	display: inline; 
	margin-left: -40px; 
	margin-right: 60px; 
	text-decoration: none; 
}

.inhalte-swipe li img { 
	display: inline; 
	width: auto; 
	height: 140px; 
	padding-top: 15px;
}

.gallery-swipe { 
	overflow: hidden;
	position: relative;
	width: 100vw;
	height: 100vw;
	white-space: nowrap;
	overflow-x:scroll;
}

.gallery-swipe ul {
	position: absolute;
	list-style: none;
	overflow: none;
	white-space: nowrap;
	padding: 0;
	margin: 0;
}
	
.gallery-swipe:after { 
	clear: both; 
	content: "."; 
	display: block; 
	height: 0; 
	visibility: hidden; 
}

.gallery-swipe li { 
	display: inline;
}

.gallery-swipe li a { 
	list-style: none; 
	display: inline; 
	margin-left: -40px; 
	margin-right: 60px; 
	text-decoration: none; 
}

.gallery-swipe li img { 
	display: inline; 
	height: 50vw; 
	width: auto; 
	padding-top: 15px;

}



}