@charset "UTF-8";
/* www.rent-a-paarl.de */
/* CSS Document Mobile First */


/* General css rules Anfang */
/* Box-Modell */
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	margin: 0;
	padding: 0;
}

html {
	font: 100%/1.5 Verdana, Geneva, sans-serif;		/* Browserdefault, 16px */
	}	
	
body {
	border-top: 5px solid #E48D40;				/* braun */
	background: #ebe8de;									/* beige */
	color: #4A463B;												/* dunkelgrau */
	}
h1 {
	color:#646464;												/* grau */
	font-size:1.625rem;										/* 26px; */
	}
h2 {
	color: #646464;												/* grau */
	font-size:1.25rem;										/* 20px; */					
	margin-top:2.50em;										/* 40px; */
	margin-bottom:1.25rem;								/* 20px; */			
	}
h3 {
	font-size:0.94rem;												/* 15px; */
	margin-top:1.88em;										/* 30px; */
	margin-bottom:0;
	}
p {
	line-height: 1.5;
	margin: 8px 0;
	}
.links {
	text-align: left;
	}
main p {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}
a, a:link, a:visited, a:focus {
	text-decoration: none;
	color:#646464;												/* grau */
	}
a:hover, a.aktuell {
	text-decoration: none;
	color:#E48D40;												/* braun */
	}
strong {
	font-weight: bold;
	}
figure {					
	margin:0;															/* zurückgesetzt Jana */
	padding:0;
	}	
figcaption {
	line-height: 1.5;
	font-size:0.875rem;										/* 14px; */
	width:200px;
	}
figcaption.hoch {
    width:150px;
}
figcaption strong {
	border-bottom: 1px solid #D6D0C1;
	padding-bottom:10px;
	margin: 10px 0;
	display:block;
	}
img {
	max-width:100%
	}
ul {
	padding:1.25em 0 1.25em 1.88em; 			/* 20px 0 20px 30px; */
	}
ul li {
	padding-bottom:0.31em;								/* 5px; */
	}
	
/* General css rules Ende */

/* Header Anfang */
header {
	position:relative;
	width:auto;												/* passt sich in Größe an */
	max-width:64rem; 									/* max. 1024px; */
	margin: 1.25em auto 1.25em auto;				/* 20px;  left and right = auto, horizontal zentrieren */
	}
header h1 {
	display:inline-block;
	vertical-align:top;
	/* margin: 35px 0 0 0; */
	margin:0 0 0 0.63em;
	font-size: 3.4375rem;						/* 55px; */
	color: #E48D40;									/* braun */
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:bold;
	font-variant:small-caps;				/* Kapitälchen */
	}
header p {
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;								/* 16px; */
	color: #800000;									/* weinrot */			
	/* color: #4A463B; */						/* dunkelgrau */
	padding-left:0.5em;						/* bündig mit h1 (Serife R) */
	}
header ul.sprache {
	position: absolute;
	right:0.94em;
	top:1em;
	}
header ul.sprache li {
	display:inline-block;
	padding-left:0.63em;
	}
header ul.sprache li a.aktuell {
	color:#B2B2B2;												/* hellgrau */
	}
/* Navigation Anfang */
/* For our main navigation we used the new HTML5 nav element. Since we have added the CSS property position: relative to the header element we can now use position: absolute to position the navigation at the right bottom corner of our header. */
nav {
	position:absolute;		/* header-Element hat position:relative, Navigation kann nun absolut unten rechts im Header positioniert werden */
	right:0;
	bottom:0;
	}
nav ul {
	list-style:none;
	padding:0;
	}
nav ul li {
	display:block;
	float:left;
	padding:0 0.94em;						/* 0 15px; */
	}
nav ul li a {
	font-family: 'Open Sans', sans-serif;
	font-size:1rem;										/* 16px; */				
	text-transform: uppercase;				/* Großbuchstaben */
	transition: all .25s ease;				/* Fade zwischen 2 Farben beim überfahren mit der Maus */
	}
nav ul li a:hover {
	color: #E48D40;										/* braun */
	}
	
/* Subnavigation */
nav .subnavi {
	left: -999em;
	position:absolute;
	z-index:1000;
	}
nav li:hover .subnavi {
	left: auto;
	}
nav ul.subnavi li {
	display:block;
	float:none;
	background-color:#ebe5d3;					        /* dunkelbeige */
	padding:0.31em 2.5em 0.31em 1.25em;				/* 5px 40px 5px 20px; */
	}
nav ul.subnavi li a {
	text-transform: none;											/* keine Großbuchstaben */
	}	
	
/* Navigation Ende */

	/* Mobile Menü */
.toggleMobile {
	display:none;
	}


/* Header Ende */

/* Slider Anfang */
/* Center the slideshow */
.container {
	display:block;
	width:auto;
	margin: 0 auto;
	position:relative;
}
#slider_content {
	line-height: 1.5;
	font-family: 'Open Sans', sans-serif;
	width:25rem;														/* 400px; */
	position:absolute;
	top:10%;
	left:5%;
	display:block;
	z-index:11;
	}
#slider_content h3 {
	color:#4A463B;													/* dunkelgrau */
	font-size:1rem;													/* 16px; */
	margin-bottom:10px;
	padding:10px 15px;
	border-radius: 5px;
	background: rgb(0, 0, 0);					/* Fallback for web browsers that doesn't support RGBa */
	background:rgba(255, 255, 255, 0.6);	 	/* RGBa with 0.6 opacity */
	display:inline-block;							/* VT inline-block gegenüber block: der dunkle Hintergrund der Überschrift wird so breit sein wie der Überschrift-Text selbst und nicht wie das umgebende Element.*/
	}

/* Slider Ende */

/* Spacer Anfang */
.spacer {
	width:auto;
	height:1.875rem;												/* 30px; */
	background-color:#E48D40;								/* braun */
	}
/* Spacer Ende */

/* Hauptinhalt */
main {
	width:auto;														/* Breite passt sich an browser-Fenster an */
	max-width:64rem;											/* max-Breite festlegen 1024px */
	margin:0 auto;												/* zentriert durch margin left and right = auto */
	padding: 3.75em 0 2.5em 0;						/* 60px 0 40px 0;	*/
	}
main article.inhalt {
	padding:0 6.25em 0.63em 0;						/* 0 100px 10px 0; */
	}
main article.inhalt p {
	font-size:0.875rem;							/* 14px; */
	}
main article.inhalt ul {
	font-size:0.875rem;									  /* 14px; */
	}
main article.inhalt a, main article.inhalt a:link, main article.inhalt a:visited  {
	color:#E48D40;												/* braun */
	}	
main article.inhalt a:hover, main article.inhalt a:focus {
	color:#B2B2B2;												/* hellgrau */	
	}

/* Bilder */
.bild {
	margin-top:1.25em;										/* 20px; */
	margin-bottom:1.25em;										/* 20px; */
	}
.bild img {
	border:3px solid #CDCDCD;
	-webkit-border-radius:5px;
	border-radius:5px;
	margin-right:5px;
	}	
.bild figure {
	float:left;
	}
.bild figure figcaption {
	line-height: 1.5;
	font-size:0.75rem;											/* 12px; */
	font-style:italic;
	}
.bild p {
	margin-left:250px;
	}
.bildhoch p {
	margin-left:350px;
	}
.bild-hidden {
	display:none;
	}
/* Bilder Ende */

/* Bildergalerie */
.galerie {
	margin-top:1.25em;										/* 20px; */
	margin-bottom:1.25em;									/* 20px; */
	}
.galerie h1 {
	margin-bottom:1.25em;									/* 20px; */
	}

.galerie img {
	float:left;
	border:1px solid #fff;
	}	
/* Bildergalerie Ende */


/* Google Maps */
iframe.maps {
	width:25em;												/* 400px; */
	height:18.75em;											/* 300px;*/
	border:2px white solid;
	margin-top:1.25em;								/* 20px; */
	margin-bottom:1.25em;								/* 20px; */
	}
	
/* Kontakt-Formular, Gästebuch */
form {
	width:90%;
	margin: 2.5em 0 2.5em 0;			/* 40px 0 40px 0; */
	}
form header h3 {
	font-size:0.875rem;						/* 14px */
	margin:0 0 2.5em 0;
	}
form header p {
	font: 100%/1.5 Verdana, Geneva, sans-serif;		/* Browserdefault, 16px */
	color: #4A463B;												/* dunkelgrau */
	}
form p {
	padding:0;
	margin:1.25em 0 1.25em 0;			/* 20px 0 20px 0; */
	}
legend {
	font-size:0.875rem;
	padding:1.25em;								/* 20px */
	}
label {
	display:inline-block;
	width:10em;										/* 160px */
	cursor:pointer;
	vertical-align:top;
	}
.dschutz label {
	width:30em;	
	font-size:0.875rem;
	}
.bsicher {
	padding:0 0 2em 1.25em;
	width:30em;
	font-size:0.875rem;
	}
form p.radioanrede {
	padding:10px 0 10px 10em;			/* 160px */
	}
form p.radioanrede label {
	width:5em;										/* 80px */
	padding-left:1em;							/* 16px */
	}
input[type=text], input[type=email], textarea {
	width:65%;
	padding: 0.63em 0 0.63em 0.19em;				/* 10px 0px 10px 3px; */
	transition: all 0.30s ease-in-out;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  border: 1px solid #DDDDDD;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
}
form .sicher {
	padding:0 0 0 9.19em;
	margin:1.25em 0 1.25em 0;			/* 20px 0 20px 0; */
	}
input[type=submit], input[type=reset] {
	padding:0.63em 0.63em 0.63em 0.63em;				/* 10px */
	}
.fehler {
	color:red;
	font-weight:bold;
	}
div.dank {
	margin: 3.13em 0 6.25em 0;									/* 50px 0 100px 0; */
	padding: 1.88em 1.25em 3.75em 1.25em;				/* 30px 20px 60px 20px; */
	background-color:#fff;
	}
/* Telefon-Nummern 2 Blöcke nebeneinander */
.telefon p.tel-li {
	display:inline-block;
	padding-right:30px;
	vertical-align:top;
	font-size:0.875rem;											/* 14px; */
	text-align: left;
	}
.telefon p.tel-re {
	display:inline-block;
	vertical-align:top;
	font-size:0.875rem;											/* 14px; */
	text-align: left;
	}


/* Gästebuch ausgeben */	
.gaestebuch section {
	margin:5em 0 5em 0;
	}
.gaestebuch article {
	background-color:#fff;	
	margin:1.25em 0 0.88em 0;
	padding:0.63em 0.63em 0.88em 0.63em;
	}
.gaestebuch p.von {
	color: #646464;												/* grau */
	font-size: 0.94rem;
	border-bottom:1px #646464 solid;												/* grau */
	padding-bottom:0.88em;
	}
.gaestebuch p.eintrag {
	color:#000;
	font-size:0.88rem;										/* 14px */
	padding-top:0.63em;

	}

/* Gästebuch ausgeben Ende */

/* Kontakt-Formular Ende */	

/* Kalender */
div.kalender {
	margin: 3.13em 0 6.25em 0;									/* 50px 0 100px 0; */
	padding: 1.88em 1.25em 3.75em 1.25em;				/* 30px 20px 60px 20px; */
	background-color:#fff;
	}
div.kalender p {
	margin-top:30px;
	}	
	
/* Kalender Ende */	
	
/* 2 Textblöcke nebeneinander */
.boxcontent {
	padding:50px 0 45px 0;
	}
.boxcontent article {
	display:inline-block;
	/* max-width:32%; */
	max-width:49%;
	/* padding-right:50px; */
	padding-right:120px;
	vertical-align:top;
	font-size:0.875rem;											/* 14px; */
	}
.boxcontent article h2 {
	font-size:1rem;													/* 16px */
	}	
.boxcontent article p {
	line-height:1.5;
	}
.boxcontent figure img {
	border:#fff 2px solid;
	-webkit-border-radius:4px;
	border-radius:4px;
	}
.boxcontent article ul {
	line-height: 1.5;
	list-style-position: inside;
	padding:0;
	margin:5px 0 0 5px;
	}	
.boxcontent article ul li {
	line-height: 1.5;
	list-style-position: inside;
	padding:0;
	margin:0;
	}	
	
/* Tabelle - Ausstattung */
table.ausstattung {
	width:auto;
	max-width:100%;
	margin-top:50px;
	margin-bottom:50px;
	}
table.ausstattung td {
	padding:.5em 1em;
	vertical-align:top;
	}
table.ausstattung tr:nth-child(odd) {
	background-color: #DCDCDC;	/* ungerade Zeilen hellgrau */
	}
table.ausstattung td:nth-child(1) {
	font-weight:bold;						/* 1. Spalte bold */
	}
/* Tabelle Ende */


/* Tabelle Responsive - Preise */
table.responsive {
	display: table;
	width: 75%;
	font-size:0.875rem;								/* 14px */
	}
table.responsive thead {
	display: table-header-group;
	}
table.responsive thead tr {
	position: static;
	top: auto;
	left: auto;
	}
table.responsive tbody {
	display: table-row-group;
	}
table.responsive tr {
	display: table-row;
	}
table.responsive th, table.responsive td {
	display: table-cell;
	padding: 0.75em;												/* 12px; */
	vertical-align: top;
	text-align: left;
	}
table.responsive td:before {
	content: "";
	display: inline-block;
	font-weight: bold;
	width: auto;
	}
	table.responsive thead tr:first-child {
	background-color: #ccc;
	}
table.responsive tbody tr:nth-child(odd) {
	background-color: #dcdcdc;	/* ungerade Zeilen hellgrau */
	}
/* Preise Ende */

/* Footer Anfang */
footer {
	clear:both;
	width:auto;
	background:#555555;	/* mittelgrau */
	}
footer .wrapper {
	font-size:0.875rem;													/* 14px; */
	line-height:1.5;
	width:auto; 
	max-width:64rem;	 											/* 1024px; */
	margin: 0 auto;
	padding-top:20px;
	padding-bottom:20px;	
	}
/* 4 Spalten innerhalb des Footer */
footer .wrapper .column {
	color:#ababab;	/* hellgrau */
	float:left;
	width:auto;
	max-width:50%;
	}
footer .wrapper .column1, footer .wrapper .column2, footer .wrapper .column3 {
	margin-right:50px;
	}
footer .wrapper .column a, footer .wrapper .column a:link, footer .wrapper .column a:visited {
	color:#ababab;	/* hellgrau */
	}	
footer .wrapper .column a:hover, footer .wrapper .column a:focus {
	color:#E48D40;				/* braun */	
	}
/* social */
.social {
	background: #B2B2B2;												/* hellgrau */
	width:auto;
	}
.social div {
	max-width:64rem;													/* 1024px; */
	margin: 0 auto;
	padding:5px 0 0 0;
	}
/* social Ende */
/* copyright */
.copyright {
	background: #323232; /*#1D1D1D;*/
	width:auto;
	}
.copyright div {
	max-width:64rem;													/* 1024px; */
	margin: 0 auto;
	font-family: 'Open Sans', sans-serif;
	padding-top:25px;
	padding-bottom:25px;
	color: #888888;    /*grau*/
	font-size:0.875rem;												/* 14px; */
	}
.copyright div a {
	color: #B2B2B2;	/* hellgrau */
	}
.copyright div a:hover {
	color: #E48D40;			/* braun */
	}
/* Copyright Ende */
/* Footer Ende */


@media (min-width: 765px) and (max-width: 1024px)
{
	nav {
		position: relative;		/* navigation hat position:relative, kann nun unter Motto positioniert werden */
		margin: 30px 0 0 0;
		}
	header, main, footer .wrapper, footer .copyright, footer .social {
		padding-left: 0.63em;		/* 10px */
		}						

}

@media (max-width: 765px)
{
	h1 {font-size:1.25rem;}
	h2 {font-size:1rem;}
	header {padding-left: 0.31em; padding-top:0.63em;}						/* 5px */
	header h1 {
		display:block;
		margin: 0;
		font-size: 2.5rem;											/* 40px; */
		}	
	header p {
		padding-left:0;						
		}
	header nav {display:none;}	
	#mobileMenu {display: block; z-index: 99;}
	#mobileMenu a:hover, #mobileMenu a.aktuell {color:#fff;}
	
	/* Mobile Menü */
	#mobileMenu {
		/*position: fixed;*/
		position: absolute;
		top: -2.8em;
		left: 0;
		width: 90%;
		display: none;
		}
	#mobileMenu ul li {
		display:block;
		background-color: #E48D40;					/* braun */
		padding: 0.5em 0 0.5em 0;					/* 8px 0 8px 0; */
		letter-spacing: 0.1em;
		text-align: center;
		text-transform: uppercase;
		border-bottom: 1px solid #CC5836;		/* rot */
		}
	#mobileMenu ul.subnavi {
		text-transform: none;
		border-bottom: none;
		padding:0.31em 0 0.31em 0;				/* 10px 0 5px 0; */		
		}
	#mobileMenu ul.subnavi li {
		text-transform: none;
		border-bottom: none;
		}

	/* Anfang Symbole zum Öffnen/Schließen des Menü */
	.toggleMobile {
		/*position: fixed;*/
		position: absolute;
		top: -1em;
		right: 0;																	/* 10px */
		display: block;
		width: 2.5em;																	/* 40px; */
		height: 2.25em;																/* 36px; */
		cursor: pointer;
		z-index: 999;
		}
	.toggleMobile span.auf {
		display:inline;
		}		
	.toggleMobile span.zu {
		display:none;
		}
	.toggleMobile.active span.auf {
		display:none;
		}
	.toggleMobile.active span.zu {
		display:inline;
		}
	/* Ende Symbole zum Öffnen/Schließen des Menü */	
	/* Mobile Menü Ende*/
	
	/* slideshow Text ausblenden */
	#slider_content {
		display:none;
		}
		
	/* Inhalt */
	main {
		padding: 0.94em 0.63em 0.63em 0.63em;					/* 15px 10px 10px 10px; */
	}
	main article.inhalt {
	padding:0 0.36em 0.63em 0;											/* 0 10px 10px 0; */
	}
	main article.inhalt p {
		padding: 0 0 0.31em 0;												/* 0 0 5px 0; */
		}	
	.boxcontent {
		padding-top:10px;
		}		
	.boxcontent article {
		display:block;
		max-width:100%;
		margin-top:20px;
		padding-right:10px;
		}
	.bild figure, galerie img {
		float:none;
		margin-right:0;
	}	
	.bild p {
		margin-left:0;
	}	
	/* Google Maps */
	iframe {
		width:auto;											/* 400px; */
		height:auto;				
		border:0;
		}

	/* Kontakt-Formular */
	form {
		width:100%;
		margin: 1.25em 0 2.5em 0;			/* 20px 0 40px 0; */
		}
	form header {
		padding:0;
		}
	form header h3 {
		margin:0 0 1.25em 0;					/* 0 0 20px 0 */
		}
	fieldset {
		border:none; 
		margin:0; 
		padding:0;}
	label {
		display:block;
		width:100%;	
		padding-bottom:0.31em;
		}
	input[type=text], input[type=email], textarea {
		width:100%;
		padding:1.25em 0.31em 1.25em 0.31em;
	}
	form .sicher {
		padding:0 0 0 0.31em;
	}
	
	div.dank {
		margin: 0.63em 0 0.63em 0;					/* 10px 0 10px 0; */
		padding: 0;
		background-color: transparent;
		}
	
	/* Tabelle Responsive */
	table.responsive table,
	table.responsive thead,
	table.responsive tbody,
	table.responsive th,
	table.responsive td,
	table.responsive tr {
		display: block;
		overflow: hidden;
	}
	table.responsive thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	table.responsive td {padding: 0.25em 0.5em;}
	
	table.preise td:before {
		content: attr(data-label) ": ";
		/* width: 10em;			*/							/* 5em;*/
		width:100%;
	}

	/* Tabelle Responsive Ende */
	
	/* footer */
	footer .wrapper, footer .copyright, footer .social {
		padding-left: 0.63em;											/* 10px; */
		padding-right: 0.63em;										/* 10px; */
	}
	footer .wrapper .column {
  	float:none;		
		max-width:100%;
		}
	footer .wrapper .column2, footer .wrapper .column3, footer .wrapper .column4  {
		margin-top:0.31em;												/* 5px */
		}	
	footer .wrapper .column1, footer .wrapper .column2, footer .wrapper .column3, footer .wrapper .column4 {
		margin-right:0;
		}	
	footer ul {
	padding:0.63em 0 0.63em 1.25em; 			/* 10px 0 10px 20px; */
	}
}

/* html5boilerplate.com Clearfix
--------------------------------- */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}