/* =================================================================== */
/* BASIC */
/* =================================================================== */
body { text-align:center; background: url('artimg/background.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
hr { border: 0px; background: #001D49; height: 1px; }
/* TEXTAREAS / INPUTS */
textarea, input {
	font-family:lane;
	font-size:14px;
	border: 1px solid #3f8bba;
	padding: 5px 10px;
	background:#edf4f9;
	color:#3f8bba;
	font-weight:bold;
	letter-spacing:1px;
}
/* SUBMIT-BUTTONS */
input[type=submit]{ 
	background-color:#3f8bba;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	cursor:pointer;
	color:#ffffff;
	font-family:lane;
	font-size:14px;
	padding:5px 50px;
	text-decoration:none;
	font-weight:bold;
	letter-spacing:1px;
}
input[type=submit]:hover { background:#326f94; }
input[type=submit]:active { background:#326f94; }
input[type=submit]:disabled { color:#EEEEEE; background:#AAAAAA; border:1px solid #AAAAAA; }

/* SELECT-BOXES */
select {
	height:35px;
	font-family:lane;
	font-size:14px;
	background: #edf4f9 url(artimg/select_arrow.png) no-repeat right;	
	border: 1px solid #3f8bba;
	padding:5px 10px;
	padding-right: 25px;
	color: #3f8bba;
	cursor:pointer;
	font-weight:bold;
	letter-spacing:1px;
	-webkit-border-radius: 0px; 
	-moz-border-radius: 0px; 
	border-radius: 0px;
	-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
	-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; 
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
select::-ms-expand { display: none; }
option {
	background:#edf4f9;
	border-top:1px solid #3f8bba;
	height:30px;
	color: #3f8bba;
}
/* CHECKBOXES */
input[type="checkbox"]:checked, [type="checkbox"]:not(:checked) { display:none; }
input[type="checkbox"] + label { margin-right:10px; }
input[type="checkbox"]:checked + label, input[type="checkbox"]:not(:checked) + label{ position: relative; padding-left: 28px; cursor: pointer; line-height: 20px; display: inline-block; color: #555555; margin-top:1px; margin-bottom:1px; }
input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid #3f8bba; background: #EEEEEE; }
input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after { content: '\2714'; width: 20px; text-align:center; font-family:lane; font-weight:bold; font-size:18px; height: 20px; color:#FFFFFF; background: #3f8bba; position: absolute; top: 0px; left: 0px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
input[type="checkbox"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
input[type="checkbox"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
input[type="checkbox"]:checked + label:hover:before, input[type="checkbox"]:not(:checked) + label:hover:before { content=''; background: #FFFFFF; }

/* RADIO */
input[type="radio"]:checked, [type="radio"]:not(:checked) { display:none; }
input[type="radio"] + label { font-family:lane; font-size:12px; margin-right:10px; }
input[type="radio"]:checked + label, input[type="radio"]:not(:checked) + label{ position: relative; padding-left: 28px; cursor: pointer; line-height: 20px; display: inline-block; color: #555555; margin-top:1px; margin-bottom:1px; }
input[type="radio"]:checked + label:before, input[type="radio"]:not(:checked) + label:before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid #3f8bba; background: #FFFFFF; }
input[type="radio"]:checked + label:after, input[type="radio"]:not(:checked) + label:after { content: '\2714'; width: 20px; text-align:center; font-family:lane; font-weight:bold; font-size:18px; height: 20px; color:#FFFFFF; background: #3f8bba; position: absolute; top: 0px; left: 0px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
input[type="radio"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
input[type="radio"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
input[type="radio"]:checked + label:hover:before, input[type="radio"]:not(:checked) + label:hover:before { content=''; background: #FFFFFF; }







/* =================================================================== */
/* EXTERNAL FONTS*/
/* =================================================================== */
@font-face { font-family: 'lane'; src: url('fonts/Lane-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }lane
@font-face { font-family: 'caviardreams'; src: url('fonts/CaviarDreams-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }





/* =================================================================== */
/* ARTCMS */
/* =================================================================== */
/* images */
.image_schatten { -webkit-box-shadow: 2px 2px 12px 2px rgba(0,0,0,0.48); -moz-box-shadow: 2px 2px 12px 2px rgba(0,0,0,0.48); box-shadow: 2px 2px 12px 2px rgba(0,0,0,0.48); }
.image_schwarzer_rahmen { border:1px solid #000000; }
.image_roterrahmen { border:3px solid #FF0000; } 

/* content (div) */
.content { min-height:500px; background: #FFFFFF; }

/* fonts */
.text_standard { color:#000000; font-family:lane; font-size:16px; text-align:justify; margin-top:0px; margin-bottom:0px; line-height:22px; }
.text_standard a { color:#3f8bba; text-decoration:none; font-family:lane; font-size:16px; text-align:justify; margin-top:0px; margin-bottom:0px; line-height:22px; }
.text_standard a:hover{ color:#000000; text-decoration:none; font-family:lane; font-size:16px; text-align:justify; margin-top:0px; margin-bottom:0px; line-height:22px; }
.text_big { color:#000000; font-family:lane; font-size:20px; color:#3f8bba; text-align:left; }
.text_big a, .text_big a:hover{ color:#000000; font-family:lane; font-size:20px; color:#3f8bba; text-align:left; }


/* =================================================================== */
/* FEWO */
/* =================================================================== */

/* ==================== BASIC ================ */
.table_active {
	background:#FFFFFF;
	font-family:lane;
	margin-bottom:20px;
	width:100%;
}
.table_active th {
	background:#3f8bba;
	color:#FFFFFF;
	padding:5px; 
	text-align:left;
	letter-spacing:2px;
}
.table_active td {
	color:#000000;
	padding:5px; 
	text-align:left;
}

.table_active .header {
	background:#EEEEEE;
	color:#000000;
	font-weight:bold;
}

.table_inactive {
	font-family:lane;
	margin-bottom:20px;
	width:100%;
}
.table_inactive th {
	margin-bottom:20px; 
	background:#CCCCCC;
	color:#888888;
	padding:5px;
	text-align:left;
}

.table_error {
	font-family:lane;
	margin-bottom:20px;
	width:100%;
}
.table_error th {
	margin-bottom:20px; 
	background:#990000;
	color:#FFFFFF;
	padding:5px;
	text-align:left;
}




.comment {
	font-family:lane;
	font-size:12px;
	color:#000000;
	letter-spacing:1px;
}
.comment a { text-decoration:none; font-size:12px; color:#3f8bba; font-weight:bold; }
.comment a:hover { text-decoration:underline; font-size:12px; color:#3f8bba; font-weight:bold; }

.strikethrough{
	font-family:lane;
	text-decoration: line-through;
	font-size:11px;
	color:#FF0000!important;
	letter-spacing:1px;
}

.error {
	font-family:lane;
	font-size:12px;
	color:#FF0000!important;
	letter-spacing:1px;
}

.inputerror {
	border: 1px solid #FF0000;
	outline: 1px solid #FF0000;
}

/* selectbox to choose countries */
.country_select_div { background:#FFFFFF; border:2px solid #3f8bba; width:150px; margin-top:0px; margin-left:-100px; }
.country_select_div table { background:#3f8bba; width:100%; font-family:lane; font-size:14px; }
.country_select_div td { background:#edf4f9; color: #3f8bba; }
.country_select_div td:hover {background: #3f8bba; color:#FFFFFF; cursor:pointer; }

/* Gallery */
.gallery_background { background:rgba(0,0,0,0.8); }
.gallery_thumbnail { border:5px solid #FFFFFF; }
.gallery_image { outline:5px solid #FFFFFF; }
.gallery_divlabel { background:rgba(255,255,255,0.5); padding:20px; font-family:lane;  }

/* ==================== CALENDAR ================ */
/* outer table */
.kalender { width:250px; max-width:250px; font-family:lane; background:white; -webkit-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75); }	
/* first row (with month) */
.kalender th { background:#3f8bba; color:#FFFFFF; }									
/* second row (with days if the week) */
.kalender tr:nth-child(2) th{ background:#555555; color:white; }		
/* last row (to close window) */
.kalender .footer, .kalender .footer a { background:#3f8bba; color:#FFFFFF; text-decoration:none; }
/* general setting for td's */
.kalender td { text-align:center; font-family:lane; width:14%; padding:5px; }				
/* free day */
.kalender .free { color:black; background: url('artimg/calendar_free.png'); background-size: cover; }
.kalender .free_hover { color:black; background: url('artimg/calendar_free_hover.png'); background-size: cover; cursor:pointer; }
/* blocked day */
.kalender .blocked { color:black; background: url('artimg/calendar_blocked.png'); background-size: cover; }
.kalender .blocked_hover { color:black; background: url('artimg/calendar_blocked.png'); background-size: cover; cursor:pointer; }
/* blocked day (arrival) */
.kalender .arrival { color:black; background: url('artimg/calendar_arrival.png'); background-size: cover; }
.kalender .arrival_hover{ background: url('artimg/calendar_arrival_hover.png'); background-size: cover; cursor:pointer; }
/* blocked day (departure) */
.kalender .departure { color:black; background: url('artimg/calendar_departure.png'); background-size: cover; }
.kalender .departure_hover{ background: url('artimg/calendar_departure_hover.png'); background-size: cover; cursor:pointer; }
/* regular day */
.kalender .number { color:#000000; }									
/* today */
.kalender .today { font-weight:bold; }									
/* day is not part of this month (e.g. 31st of previous month) */
.kalender .empty { color:#FFFFFF; background:#FFFFFF; cursor:auto; }					

/* outer div for calendar on booking-page */
.kalender_buchen {
	width:250px;
	max-width:250px;
	height:250px;
	text-align:center;
	margin-top:0px;
	margin-left:5px;	
}

/* note (div) for calendar on pricelist-page */
.note {
	font-weight:normal;
	width:250px;
	margin-top:30px;
	background:#FFFFFF;
	color:#000000;
	-webkit-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
}
.note table th{ padding:5px; color:#000000; }
.note table td{ background: #FFFFFF; padding:5px; }

/* label of the discount -logo for special offers */
.icon_specialoffer { margin-top:10px; margin-left:-2px; }


/* =================================================================== */
/* INDIVIDUAL */
/* =================================================================== */
.td_menu { font-family:caviardreams; font-weight:normal; font-size:25px; padding:10px; text-align:center; color:#595959; letter-spacing:1px; min-width:150px; }
.td_menu:hover { font-family:caviardreams; font-weight:normal; font-size:25px; padding:10px; text-align:center; cursor:pointer; color:#3f8bba; min-width:150px; letter-spacing:1px; background:url('artimg/hr.png'); background-repeat: no-repeat; background-size: 150px 12px; background-position: center bottom; }
.td_menu_active { font-family:caviardreams; font-weight:normal; font-size:25px; padding:10px; text-align:center; cursor:pointer; color:#3f8bba; min-width:150px; letter-spacing:1px; background:url('artimg/hr.png'); background-repeat: no-repeat; background-size: 150px 12px; background-position: center bottom;}
.cookieinfo {  font-family:lane; font-size:16px; color:#FFFFFF; position:fixed; z-index:10000; text-decoration:none; background:rgba(39,57,93,0.75); height:50px; width:100%; bottom:0px; left:0px; right:0px; }

.table_box { background: #edf4f9; width:300px; }
.table_box_th { font-family:caviardreams; font-size:25px; font-weight:normal; text-align:left; cursor:pointer; padding:10px; color:#3f8bba; height:30px; vertical-align:top; letter-spacing:1px; background:url('artimg/hr.png'); background-repeat: no-repeat; background-size: 300px 12px; background-position: center bottom; }
.table_box_td { font-family:lane; font-size:16px;  padding-left:10px; text-align:left; color:#555555; }

.pagetitle { font-family:caviardreams; font-size:25px; font-weight:normal; text-align:left; color:#3f8bba; letter-spacing:1px; margin-top:16px; }
.suche_header { font-family:caviardreams; font-size:22px; font-weight:normal; text-align:left; color:#3f8bba; letter-spacing:1px; margin-top:16px; }
.suche_preis {  font-family:lane; color:#007700; font-size:20px; font-weight:bold; }

.submenu {  font-family:lane; color:#555555; font-size:18px; }
.submenu a {  font-family:lane; color:#555555; font-size:18px; color:#3f8bba; text-decoration:none; }
.submenu a:hover {  font-family:lane; color:#555555; font-size:18px; color:#000000; text-decoration:underline; }



#video {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    height: 480px;
    width: 640px;
	background:red;
}}











/* =================================================================== */
/* PHOTO-GALLERY */
/* =================================================================== */
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  width:auto;
  max-height:500px;
  height:auto;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}