.html,body{
    margin: 0;
}
* {
    box-sizing: border-box;
    font: 700 20px/1.5 "Lato", sans-serif;
}
.center{
    text-align: center;
}
.title{
    font: 800 25px/1 "Lato", sans-serif;
    color: #800000;/*Akzentfarbe please*/
}
.costheader{
    font: 800 21px/1.5 "Lato", sans-serif;
    color: #800000;/*Akzentfarbe please*/
}
.textcenter
{
    text-align: center;
    font-size: 100px;
}
.textfett
{
    font-weight: 600;
}
.Phafttilte{
    font-size: 27px;
}
.bg {
    background-color:azure;
    //border-radius: 5px;
    border: 2px solid #717171;
}
.Kscrollwindow {
    margin: 0 auto;
    height: 60vh;
    width: 99%;
    overflow-y: scroll;
    font: 16px/26px Georgia, Garamond, Serif;
    font: 400 15px/1.8 "Lato", sans-serif;
}
.Kscrollwindow p, li, a {
        font: 700 15px/1.5 "Lato", sans-serif;
}

div.privacy-msg {
    background-image: url(IMG/Borkum%20OSM%20BG.png);
    background-color: rgba(206,206,206,1);
    padding: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 10px;
    width: 100%;
    height: 90%;
}
div.privacy-div {
    border: 1px solid black;
    background-color: rgba(255,250,240,0.8);
}
    div.privacy-msg p {
    padding: 5px;
    text-align: center;
    position: relative;
}
    div.privacy-msg h4 {
	font-weight:600;
    padding: 5px;
    text-align: center;
    position: relative;
}
.left{
    float: left;
}
.margintop{
    margin-top: 50px;
}
.marginbottom{
    margin-bottom: 50px;
}
div.polaroid:first-child {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  margin-left: 4%;
}
div.polaroid {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  margin-right: 4%;
}
div.container {
  text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font: 800 16px/1.5 "Lato", sans-serif;
}
.proberties li {
    list-style-image: url(IMG/arrow.png);
}
/*.mySlides {display: none}*/
img {vertical-align: middle;}
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  width: 100%;
    z-index: 1;
}
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

input[type=date] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}
input[type=date]:focus {
    border: 3px solid #555;
}
input[type=text]:focus {
    border: 3px solid #555;
}
textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}
textarea[type=text]:focus {
    border: 3px solid #555;
}
select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
    
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.red{
    color: red;
}
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.navbar .icon {
  display: none;
}
.success {color:#3EAD2D; font-size: 14}
.error {color: #FF0000; font-size: 14}
.slideshow {width:100%;padding-top: 50px;padding-bottom: 35%; overflow:hidden; position:relative; }
.slideshow img{ position:absolute; animation:fling-minislide 45s infinite; opacity:0; width: 100%; height: auto;}
@keyframes fling-minislide {30%{opacity:1;} 60%{opacity:0;}} 
.slideshow img:nth-child(4){animation-delay:0s;}
.slideshow img:nth-child(3){animation-delay:15s;}
.slideshow img:nth-child(2){animation-delay:30s;}
.slideshow img:nth-child(1){animation-delay:45s;}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
/*.mySlides{
    height: 100%;
    width: 100%;
}
.mySlides img
{
    height: 100%;
    display: block;
    object-fit: cover;
}*/
/* 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}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
.picturecontainer{
    margin-left: 5%;
    margin-top: 2%
}









.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    cborder: solid 1px red;
}

    .col-13f{
        width: 65%;
        float: right;
    }

/* For desktop: */
.col-1 {width: 5%;}
.col-2 {width: 10%;}
.col-3 {width: 15%}
.col-4 {width: 20%;}
.col-5 {width: 25%;}
.col-6 {width: 30%;}
.col-7 {width: 35%;}
.col-8 {width: 40%;}
.col-9 {width: 45%;}
.col-10 {width: 50%;}
.col-11 {width: 55%;}
.col-12 {width: 60%;}
.col-13 {width: 65%;}
.col-14 {width: 70%;}
.col-15 {width: 75%;}
.col-16 {width: 80%;}
.col-17 {width: 85%;}
.col-18 {width: 90%;}
.col-19 {width: 95%;}
.col-20 {width: 100%;}

@media screen and (max-width: 1260px)
{
        div.container {
  text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font: 800 11px/1.6 "Lato", sans-serif;
}
    .col-13f{
        float: right;
    }
}
@media screen and (max-width: 1000px) {
    
    

    
    
    
      .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
    
    
  .navbar.responsive {position: fixed;opacity: 0.9}
  .navbar.responsive .icon {
    position: fixed;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
        .reisezeiten{
        width: 50%;
    }
    .AllorNothing{
        width: 5%;
    }
        .ResizeImg{
        width: 35%;
    }
    .picturecontainer{
        width:50%;
    }
            div.container {
  text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font: 800 13px/1.6 "Lato", sans-serif;
}

    
}
@media only screen and (max-width: 768px) {
    
        * {
    font: 700 18px/1.5 "Lato", sans-serif;
    }

    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    .picturecontainer a {
        width: 25%;
    }
    .picturecontainer div.container {
        font: 700 12px/1.5 "Lato", sans-serif;
    }
    .proberties div:last-child {
        margin-top: -70px;
    }
    div.polaroid:first-child {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  margin-left: 1%;
}
div.polaroid {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  margin-right: 4%;
}
    div.container {
  text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font: 800 17px/1.5 "Lato", sans-serif;
}
    .picturecontainer{
    margin-left: 0%;
    margin-top: 2%
}
}
.nopadding {
    padding: 0px;
}
.nomargin {
    margin: 0px;
}




/* Styles the thumbnail */

a.lightbox img {
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 94px 20px 20px 20px;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}


.removeAlink {
    text-decoration: none;
    color: black;
}
.centertext{
    margin: 22px 0;
}
.centertextcount{
    margin: 12px 0;
}
.centertextdate{
    margin: 4px 0;
}
.strong{
    font: 800 22px/1 "Lato", sans-serif;
    //text-decoration: underline;
    color: #800000;/*Akzentfarbe please*/
}
[type="date"] {
  background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

input[type=submit] {
    width: 100%;
    background-color: #800000;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=submit]:hover {
    background-color: #950005;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
    z-index: -1;
    opacity: 0.5;
width:100%;
height:100%;
box-sizing: border-box;
background: gray;
color: black;
text-decoration: none;
position: fixed;
margin-top: 50px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
top: 0px;
}
.imprintperson p {
    margin: 0px;
}
.imprinttitle{
    font: 800 22px/1 "Lato", sans-serif;
    text-decoration: underline;
    color: #800000;/*Akzentfarbe please*/
}


@media screen and (max-width: 1600px) {
        .centertext{
        margin: 0px;
}
            .centertextcount{
        margin: 0px;
}
            .centertextdate{
        margin: 0px;
}
            .centertext{
        margin: 0px;
}
    .row div{
        padding-top:0px;
        padding-bottom: 0px;
    }
    .t{
        margin-bottom: 0px;
    }
input[type=text] {
    width: 100%;
    padding: 6px 10px;
    margin: 0px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}
input[type=date] {
    width: 100%;
    padding: 6px 10px;
    margin: 0px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}
    .col-13{
        width: 100%;
    }
        .col-13f{
        width: 100%;
    }
    .a, .b, .c {
        width: 100%;
    }
    .m{
        max-height: 600px;
    }
Kleinerer Text und Wohnung anpassen
}


.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.pcolumn {
  float: left;
  width: 33%;
}
.pbbcolumn {
  float: left;
  width: 16.6%;
}

.pcolumn img {
  float: left;
  width: 100%;
    border: 2px solid white;
}
.pbbcolumn img {
  float: left;
  width: 100%;
    border: 2px solid white;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.95);
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

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

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-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);
}

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

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}