@import url(//fonts.googleapis.com/css?family=Crimson+Text:600);
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
	min-height: 100%;
	position: relative;
}

body {
	background-image: none;
	background-color: #223f24;
	background-size: 100%;
	font-family: Georgia, Times, 'Times New Roman', serif;
	width: 100%;
	color: #fff;
	font-size: 18px;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
	display: block;
	height: 1px;
	border: 0;
	margin: 1em 0;
	padding: 0;
	border-top: 1px solid #a4a7a3;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 
img {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
	resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */
.chromeframe {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.container {
	max-width: 1170px;
}

.container.page {
	margin: 0px auto;
}

.page {
	position: relative;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: none;
}

/* ==========================================================================
   Content
   ========================================================================== */
h1 {
	font-size: 1.88em;
	margin: 0;
	text-transform: uppercase;
	padding-bottom: .5em;
}

h2 {
	font-size: 1.2em;
	color: #8a998b;
	margin: 0;
}

.smaller {
	font-size: 80%;
}

p a {
	color: #fff;
}

a:hover, a:active, a:focus {
	color: #fff;
}

a.link {
	text-decoration: underline;
}

a.link:hover {
	text-decoration: none;
	color: #fff;
}

.col1 {
	margin-top: 30px;
	background: none;
	box-shadow: none;
	position: relative;
	padding-bottom: 15px;
	margin-bottom: 15px;
}

.mulder {
	position: absolute;
	bottom: 0px;
	left: 10px;
	color:rgba(255, 255, 255, 0.3);
}

.pic {
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
	position: absolute;
	transition: z-index .75s;
	display: none;
}

.pic:hover {
	z-index: 600 !important;
}

#pic1 {
	top: 0;
	left: 45%;
	transform: rotate(-3deg);
	z-index: 400;
}

#pic2 {
	top: 25px;
	left: 70%;
	z-index: 300;
}

#pic3 {
	top: 370px;
	left: 42%;
	transform: rotate(5deg);
	z-index: 300;
}

#pic4 {
	top: 340px;
	left: 59%;
	transform: rotate(2deg);
	z-index: 500;
}

#pic5 {
	top: 400px;
	left: 69%;
	transform: rotate(2deg);
	z-index: 300;
}

p {
	padding-bottom: .75em;
}

.social a {
	margin-right: 10px;
}
.urlaub{
	display:block;
	position: absolute;
	right:0%;
	bottom:5%;
	width:150px;
	z-index: 10000;
}
.urlaub {
           
            -webkit-animation-duration: 10s; 
            animation-duration: 10s; 
            -webkit-animation-fill-mode: both; 
            animation-fill-mode: both;
            transform-origin: 50% 4%;
             -webkit-transition-timing-function: ease-out; /* Safari and Chrome */
   		 transition-timing-function: ease-out;

         }
         
 @-webkit-keyframes shake {
    0%,100% {-webkit-transform: rotate(0);} 
    
    10%{-webkit-transform: rotate(-12deg);} 
    30%{-webkit-transform: rotate(-10deg);} 
    50%{-webkit-transform: rotate(-8deg);} 
     70% {-webkit-transform: rotate(-6deg);} 
    90% {-webkit-transform: rotate(-4deg);} 
   20% {-webkit-transform: rotate(12deg);}
    40% {-webkit-transform: rotate(8deg);}
    60% {-webkit-transform: rotate(6deg);}
    80% {-webkit-transform: rotate(4deg);} 
 }
         
         @keyframes shake { 
             0%100% {transform: rotate(0);} 
            10%{transform: rotate(-12deg);} 
             30%{transform: rotate(-10deg);} 
            50%{transform: rotate(-8deg);} 
             70% {transform: rotate(-6deg);} 
            90% {transform: rotate(-4deg);} 
            20% {transform: rotate(12deg);}
            40% {transform: rotate(8deg);}
            60% {transform: rotate(6deg);}
            80% {transform: rotate(4deg);} 
         }
         
         .shake { 
            -webkit-animation-name: shake; 
            animation-name: shake; 
         }
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
	.urlaub{
	position: absolute;
	right:10%;
	bottom:0%;
	width:250px;
	z-index: 10000;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	body {
		font-size: 25px;
		background-image: url(/files/bg-1.jpg);
	}
	.mulder {
		position: absolute;
		bottom: 15px;
		left: 40px;
		
	}
	.smaller.mulder {
		font-size: 60%;
	}
	
	.col1 {
		margin-top: 30px;
		background: #223f24 url(/files/bg-2.jpg) top left no-repeat;
		padding-left: 40px;
		padding-right: 40px;
		padding-top: 40px;
		padding-bottom: 40px;
		box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
	}
	p {
		padding-bottom: 1.5em;
	}
	.social {
		padding-top: 0.5em;
	}
	.urlaub{
	 width:300px;
	 bottom:1%;
	}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	
	p {
		padding-bottom: .5em;
	}
	.social {
		padding-top: 0em;
	}
	.urlaub{
	right:5%;
	 width:300px;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	.container.page {
		margin: 20px auto;
	}
	.pic {
		display: block;
	}
}

.clearfix:before, .clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}

.smaller {
	font-size: 75%;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
	*zoom: 1;
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
	* {
		background: transparent !important;
		color: #000 !important; /* Black prints faster: h5bp.com/s */
		box-shadow: none !important;
		text-shadow: none !important;
	}
	a, a:visited {
		
	}
	/*
	a[href]:after {
		content: " (" attr(href) ")";
	}
	abbr[title]:after {
		content: " (" attr(title) ")";
	}
/*
     * Don't show links for images, or javascript/internal links
     */
	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after, nav a[href]:after
		{
		content: "";
	}
	nav, header, footer {
		display: none;
	}
	pre, blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	thead {
		display: table-header-group; /* h5bp.com/t */
	}
	tr, img {
		page-break-inside: avoid;
	}
	img {
		max-width: 100% !important;
	}
	@page {
		margin: 0.5cm;
	}
	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}
	h2, h3 {
		page-break-after: avoid;
	}
}