/* allgemein */

* {margin: 0;
padding: 0;}


/* vollkorn-regular - latin */
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts_ofs/vollkorn-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts_ofs/vollkorn-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts_ofs/vollkorn-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts_ofs/vollkorn-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts_ofs/vollkorn-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts_ofs/vollkorn-v12-latin-regular.svg#Vollkorn') format('svg'); /* Legacy iOS */
}

/* vollkorn-500 - latin */
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts_ofs/vollkorn-v12-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts_ofs/vollkorn-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts_ofs/vollkorn-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts_ofs/vollkorn-v12-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts_ofs/vollkorn-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts_ofs/vollkorn-v12-latin-500.svg#Vollkorn') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts_ofs/open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts_ofs/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts_ofs/open-sans-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts_ofs/open-sans-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts_ofs/open-sans-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts_ofs/open-sans-v18-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}




html { -webkit-text-size-adjust: none; }

body {
background:#f2eee4 url(../ofs_images/strand_header.jpg);
background-repeat:no-repeat;
background-position:50% -30px;
}


/*  schrift im himmel  */
div#top {
position:relative;
margin: 20px auto 0px auto;
width:75%;
text-align:left;
}
a#topgross {
position:relative;
margin-top:20px;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-size: 42px; 
letter-spacing: 0.00em;
text-align:left; 
line-height: 100%; 
text-decoration:none;
color:#fff;
}
p#topklein {
position:relative;
margin-top:0px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 20px; 
letter-spacing: 0.00em;
text-align:left; 
line-height: 100%; 
color:#fff;
}





div#container {
position:relative;
margin: 230px auto 0px auto;
width:75%;
text-align:left;
}

.menu {
position:relative;
}
.menu a, .menu p {
display:inline; 
font-family: 'Vollkorn', serif;
font-weight: 500;
font-size: 26px; 
letter-spacing: 0.00em;
text-align:left; 
margin:0px 8px 0px 0px; 
text-decoration:none;
word-wrap: normal;
color:#0f95c7
}
.menu a:link, .menu a:visited { color:#0f95c7; background-color:transparent; }
.menu a:hover, .menu a:active { color:#aca594; background-color:transparent; }


div#rechts {
float:right; 
width:30%;
height:auto;
margin-top:50px;
}




.kasten {padding: 5px 10px 10px 10px;
min-height:auto;
width:100%;
background-color: #f9f6f1;
margin-bottom:10px;
box-shadow: 0px 0px 10px #bbb;
}
.kasten p {margin-top:5px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px; 
letter-spacing: 0.00em;
text-align:left; 
line-height: 120%; 
color:#000;
}
p#kastengr {width:100%;
border-bottom:2px solid #ded6c1;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-size: 20px; 
letter-spacing: 0.00em;
text-align:left; 
line-height: 120%; 
text-decoration:none;
color:#ada48c;
}
.kasten a, .kasten button, a#partner {display:block;
margin-top:5px;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-size: 20px; 
letter-spacing: 0.00em;
text-align:left; 
line-height: 120%; 
text-decoration:none;
color:#ada48c;
}
.kasten a:link, .kasten a:visited, .kasten button:link, .kasten button:visited, a#partner:link, a#partner:visited { color:#ada48c; background-color:transparent; }
.kasten a:hover, .kasten a:active, .kasten button:hover, .kasten button:active, a#partner:hover, a#partner:active { color:#0f95c7; background-color:transparent; }

.kasten button {;
border:none;
background: none; 
cursor: pointer;
}



.kasten ul {margin-top:5px;
margin-left:15px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px; 
letter-spacing: 0.00em;
text-align:left; 
line-height: 120%; 
color:#ada48c;
list-style-type: square;
}
.kasten ul li span {
color: #000;
}

h1, h2 {width:65%;
position:relative;
margin-top:50px;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-size: 22px; 
letter-spacing: 0.00em;
text-align:left; 
line-height: 140%; 
text-decoration:none;
color:#0f95c7
}

p#copy {
position:relative;
margin-top:30px;
font-family: 'Vollkorn', serif;
font-weight: 400;
font-size: 20px; 
text-align:left;
letter-spacing: 0.00em;
line-height: 140%; 
color: #443f33;
width:65%;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
}

p#datenschutz {
position:relative;
margin-top:30px;
font-family: 'Vollkorn', serif;
font-weight: 400;
font-size: 15px; 
text-align:left;
letter-spacing: 0.00em;
line-height: 140%; 
color: #443f33;
width:85%;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
}

a#tel {
font-family: 'Vollkorn', serif;
font-weight: 400;
font-size: 20px; 
text-align:left;
letter-spacing: 0.00em;
line-height: 140%; 
color: #443f33;
text-decoration: none;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
}

a#telklein {
font-family: 'Vollkorn', serif;
font-weight: 400;
font-size: 15px; 
text-align:left;
letter-spacing: 0.00em;
line-height: 140%; 
color: #443f33;
text-decoration: none;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
}

a#detail 
{display:block;
margin-top:5px;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-size: 20px; 
letter-spacing: 0.00em;
text-align:left; 
line-height: 120%; 
text-decoration:none;
color:#ada48c;
}
a#detail:link, a#detail:visited { color:#ada48c; background-color:transparent; }
a#detail:hover, a#detail:active { color:#0f95c7; background-color:transparent; }
}


/*  Modal Image */
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
background-color: #fefefe;
  margin: auto;
  display: block;
  width: 90%;
  max-width: 800px;
}
.modal-content:hover {
        opacity: 1;
}
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 90%;
  }
}





/*  Modal Galery */

* {
  box-sizing: border-box;
}
.row {
margin-top:10px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.column {
  float: left;
  width: 20%;
}
.mySlides {
  display: none;
}
.mySlides > img:hover{
  opacity: 1;
}
.cursor {
  cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {border:none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  font-weight: bold;
  font-size: 40px;
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
}
/* Position the "prev button" to the left */
.prev {left: 0;
}

img {
  margin-bottom: -4px;
}
.demo, img:hover {
  opacity: 0.6;
}
.active,
.demo:hover {
  opacity: 1;
}


#overlay {
  position: fixed;
  display: none;
  padding-top: 100px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9);
  z-index: 2;
  cursor: pointer;
}
#overlay span {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
#overlay span:hover,
#overlay span:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
#overlay-content {
background-color: #fefefe;
  margin: auto;
  display: block;
  width: 90%;
  max-width: 800px;
}
#overlay-content:hover {
        opacity: 1;
}



/*  kontaktformular  */

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #f2eee4;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
font-size: 12px; 
letter-spacing: 0.00em;
}
input:hover,  textarea:hover {
  border: 1px solid #ada48c;
  }
  
#kontaktform {margin-top: 20px;}
    
button#submit {
  background-color: #0f95c7;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

button#submit:hover {
    opacity:0.7;
}
    
.formular {
font-family: 'Vollkorn', serif;
font-weight: 400;
font-size: 20px; 
letter-spacing: 0.00em;
width:70%;
margin-top:20px;
background-color: transparent;
padding: 0px;
color: #ada48c;
}


.ohnohoney{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

.ohnohoney:hover {
  border: none;
  } 



/*  belegungsplan  */

iframe
{
min-height:440px;
margin:0px;
border-width: 0;
background-color: transparent;
}



/*  footer  */
.footer{
position:relative;
width: 100%;
margin-top: 50px;
margin-bottom:50px;
background-color: #0f95c7;
padding:10px;
}
.footer a {
display:inline; 
font-family: 'Vollkorn', serif;
font-weight: 500;
font-size: 18px; 
letter-spacing: 0.00em;
text-align:left; 
text-decoration:none;
word-wrap: normal;
}
.footer a:link, .footer a:visited { color:#fff; background-color:transparent; }
.footer a:hover, a.footer a:active { color:#fff; opacity:0.6;background-color:transparent; }

a.nachoben {
width:40px;
float:right;
}

strong {
    font-weight: 500;
    color:#ada48c;
}





@media only screen and (min-width:750px){
    div#oben {display:none;}
    
}


@media only screen and (max-width:750px){
    div#links, a#planlink {display:none;}
    p#copy, p#datenschutz, .formular, h1 {width:100%;}
    div#oben, .kasten {width: 100%;}
    div#rechts {float:none;margin-top:20px;width:100%}
    div#container {margin-top: 150px;}
    .prev {left:30px;}
    .next {right:30px;}
     a.nachoben  {visibility:hidden;}
    
}
@media only screen and (max-width:500px){
    .column {display:none;}
    a.nachoben  {visibility:hidden;}
    .prev {left:10px;}
    .next {right:10px;}


}