@charset 'UTF-8';
/**
* Ferienhaus Inselpanorama - Natur soweit das Auge blickt!
* @author   Stefan Bozkurt - one-screen.com
* @filename main.css
* @version  0.3
---------------------------------------------------------*/
/**
* Main Font
---------------------------------------------------------*/
@font-face { font-family: "Maritime"; src: url("../fonts/Maritime_Sans.ttf"); }
@font-face { font-family: "MaritimeBold"; src: url("../fonts/Maritime_Sans_bold.ttf"); }
/**
* General
---------------------------------------------------------*/
html, body { color: #000; font-family: 'Maritime', Helvetica, sans-serif; font-weight: 400; letter-spacing: 2px; }
h1 { font-size: 2.8em; margin: 0; padding: 20px 0 0; }
@-moz-document url-prefix() { p { line-height: 34px; font-weight: 400; } }
@-moz-document url-prefix() { h2 { line-height: 38px; font-weight: 400; } }
h2 { margin: 15px  10px 20px; color: #fff; font-size: 24px; font-weight: 400; white-space: pre-line; }
@media only screen and (max-width : 480px) {
  h2 { margin: 15px 10px 20px 0; }
}
section h2 { margin: 20px 0 10px 20px; color: #2f642f; font-size: 24px; }
h3 { padding: 10px 0 0 20px; margin: 0; color: #2f642f; text-align: left; font-size: 20px; font-weight: 400;white-space: normal; }
h4 { padding: 0 0 0 0px; margin: 10px 0; color: #2f642f; text-align: left; font-size: 18px; font-weight: 400;white-space: normal; }
p { font-size: 18px; font-weight: 400; margin: 10px 0; padding: 0 20px; white-space: pre-line;}
ul { font-size: 18px; line-height: 15px; margin: 0; padding: 0; white-space: normal; }
/**
* Page Defaults
---------------------------------------------------------*/
.logo { text-align: center; z-index: 99; width: 420px; margin: 0 auto; padding: 30px 0 22px; }

@media only screen and (max-width : 480px) {
  .logo { width: unset; padding: 30px 20px 22px; }
  .logo img{ width: 100%; max-width: 100%; height: auto;}  
}

.horizontal { image-rendering: crisp-edges;border-top: 5px solid #2f642f; width: 100%; height: 480px; white-space: nowrap; overflow: hidden; -webkit-overflow-scrolling: touch; }
.horizontalBig { image-rendering: crisp-edges;border-top: 5px solid #2f642f; width: 100%; white-space: nowrap; overflow: hidden; -webkit-overflow-scrolling: touch; }
.table { display: table; table-layout: fixed; width: 700%; margin: 0; padding: 0; overflow: auto; }
section { width: 100%; display: table-cell; background: #f0ede5; margin: 0; padding: 0; vertical-align: top; }
.scrollContent { overflow: auto; height: 430px; }
.scrollContent:hover { -webkit-overflow: scroll; }
@media only screen and (max-width : 480px) {
  .scrollContent { overflow: auto; height: auto; }
}
.bottomNav { position: relative; bottom: 0; border-top: 5px solid #2f642f; height: 60px; clear: both; background: #78604e; text-align: right; }

/**
* Preloader
---------------------------------------------------------*/
#page-overlay { width:100%; height:100%; background:#78604e; position:fixed; left:0; top:0; opacity:1; z-index:500; 
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -o-transition:all .5s;
  transition:all .5s;
}
#page-overlay .inner { position:absolute; left:50%; top:50%;
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  -o-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}
#page-overlay .spinner { width:40px; height:40px; border:2px solid orange; border-top-color:#2f642f; border-right-color:#2f642f; border-bottom-color:#2f642f; 
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  -webkit-animation:rotate .8s linear infinite;
  -moz-animation:rotate .8s linear infinite;
  -o-animation:rotate .8s linear infinite;
  animation:rotate .8s linear infinite;
}
@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate(0) }
  100% { -webkit-transform: rotate(360deg) }
}
@-moz-keyframes rotate {
  0% { -moz-transform: rotate(0) }
  100% { -moz-transform: rotate(360deg) }
}
@-o-keyframes rotate {
  0% { -o-transform: rotate(0) }
  100% { -o-transform: rotate(360deg) }
}
@keyframes rotate {
  0% {transform: rotate(0) }
  100% { transform: rotate(360deg) }
}

/**
* Grid? :D
---------------------------------------------------------*/
.col--100 { display: inline-block; width: 100%; }
.col--33 { display: inline-block; width: 33%; }
.col--50 { display: inline-block; width: 50%; vertical-align: top; margin-left: -4px; }
.col--50-float { float: left; width: 50%; }

@media only screen and (max-width : 480px) {
  .col--50 {
    display: block;
    width: 100%;
    vertical-align: top;
    margin-left: 0px;
 }
  .col--50-float { float: unset; width: 100%; }
}

/**
* HR Style
---------------------------------------------------------*/
 hr { height: 2px; color: #2f642f; background-color: #2f642f; border: 0; padding: 0; margin: 30px 25%; }
.star { width: 140px; height: 35px; background: url('../img/star.png') #fff; margin: -50px auto 0 auto; }

/**
* Main Menu
---------------------------------------------------------*/
.nav-toggle { display:block; position:fixed; right:15px; top:15px; z-index:200; padding:10px;
  -webkit-transition:none;
  -moz-transition:none;
  -o-transition:none;
  transition:none;
}
.nav-toggle span { display:block; width:32px; height:3px; background:#2f642f; position:relative;
  -webkit-transition:all .2s;
  -moz-transition:all .2s;
  -o-transition:all .2s;
  transition:all .2s;
}
.nav-toggle .line-2 { margin:6px 0; }
.nav-open .nav-toggle { background:transparent; }
.nav-open .nav-toggle .line-1 { top:9px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}
.nav-open .nav-toggle .line-3 { top:-9px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
#nav { width:80%; max-width:35%; height:100%; overflow-y:auto; padding-top:200px; background:#fff; position:fixed; right:0; top:0; z-index:150;
  -webkit-transform:translate3d(100%,0,0);
  -moz-transform:translate3d(100%,0,0);
  -ms-transform:translate3d(100%,0,0);
  -o-transform:translate3d(100%,0,0);
  transform:translate3d(100%,0,0);
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  -o-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-transition:0 300ms ease;
  -moz-transition:0 300ms ease;
  -o-transition:0 300ms ease;
  transition:transform 300ms ease;
}
.nav-open #nav {
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  -ms-transform:translate3d(0,0,0);
  -o-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
}
#nav a { display:block; font-weight:600; font-size:26px; text-transform:uppercase; text-align:left; padding:25px 0 25px 40px; }
#page:before { display:block; content:"";width:100%; height:0; position:fixed; left:0;top:0; background:rgba(59, 59, 59, 0.6); opacity:0; z-index:100; pointer-events:none;
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  -ms-transform:translate3d(0,0,0);
  -o-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  -o-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-transition:opacity 300ms ease, height 1ms 300ms ease;
  -moz-transition:opacity 300ms ease, height 1ms 300ms ease;
  -o-transition:opacity 300ms ease, height 1ms 300ms ease;
  transition:opacity 300ms ease, height 1ms 300ms ease;
}
.nav-open #page:before { height:100%; opacity:1;
  -webkit-transition:opacity 300ms ease;
  -moz-transition:opacity 300ms ease;
  -o-transition:opacity 300ms ease;
  transition:opacity 300ms ease;
}
#nav a:hover { background:#f2f2f2; }
.nav-open .nav-toggle .line-2,.is-loaded #page-overlay { opacity:0; }

/**
* Links and buttons
---------------------------------------------------------*/
div a.next { display: inline-block; width: 60px; height: 60px; background-image: url('../img/right-arrow.png'); background-position: center center; background-repeat: no-repeat; }
div a.next span { display: none; }
div a.prev { display: inline-block; width: 60px; height: 60px; background-image: url('../img/left-arrow.png'); background-position: center center; background-repeat: no-repeat; }
div a.prev span { display: none; }
a { color:#2f642f; text-decoration:none; outline:0; 
  -webkit-transition:all .2s;
  -moz-transition:all .2s;
  -o-transition:all .2s;
  transition:all .2s;
}
a:hover { color: orange; }

/**
* Section: Hero
---------------------------------------------------------*/
.bg { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 430px; }
.img1 { background-image: url('../img/hero1.jpg'); }
.img2 { background-image: url('../img/hero2.jpg'); }
.img3 { background-image: url('../img/hero3.jpg'); }
.img4 { background-image: url('../img/hero5.jpg'); }
.img5 { background-image: url('../img/fraetow2_bg.jpg'); }

/* Slider */
.slick-loading .slick-list { background: #fff url('../img/ajax-loader.gif') center center no-repeat; }
/* Arrows */
.slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; display: block; width: 20px; height: 20px; padding: 0; cursor: pointer; color: transparent; border: none; outline: none; background: transparent;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.slick-prev:hover, .slick-prev:focus { background: url('../img/left-arrow.png') 18px no-repeat #000; outline: none; }
.slick-next:hover, .slick-next:focus { background: url('../img/right-arrow.png') 22px no-repeat #000; outline: none; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; }
.slick-prev:before, .slick-next:before { font-size: 20px; line-height: 1; opacity: .75; color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-prev { left: 0px; bottom: -35px; z-index: 9999; padding: 30px 40px 40px 20px; background: url('../img/left-arrow.png') 20px no-repeat #000; opacity: 0.6; }
.slick-next { left: 60px; bottom: -35px; z-index: 9999; padding: 30px 40px 40px 20px; background: url('../img/right-arrow.png') 20px no-repeat #000; opacity: 0.6; }
/* Dots */
.slick-dots { position: absolute; left: 0px; bottom: -50px; z-index: 99; display: block; width: 50%; margin: 0 25%; list-style: none; text-align: center; }
@media only screen and (max-width : 480px) {
  .slick-dots {
    width: 60%;
    margin: 0 20%;
  }
}
    

.slick-dots li { position: relative; display: inline-block; width: 40px; height: 40px; margin: 0; padding: 0; cursor: pointer; }
.slick-dots li button { position: absolute; font-size: 0; line-height: 0; display: block; width: 40px; height: 40px; bottom: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { font-size: 40px; line-height: 20px; position: absolute; top: 20px; left: 0; width: 40px; height: 40px; padding-top: 5px; content: '•'; text-align: center; opacity: 1; color: orange; background: #78604e; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before { opacity: 1; color: #fff; }

/**
* Section: IntroText
---------------------------------------------------------*/
.introImage { background: url('../img/gallery/aussen/1.jpg') no-repeat; background-size:cover; background-position: center center; width: 100%; min-height: 430px; }
.introImage2 { background: url('../img/preview_fraetow_03.jpg') no-repeat; background-size:cover; width: 100%; min-height: 430px; }

/**
* Section: Intro Gallery
---------------------------------------------------------*/

.preview_bg { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 300px; }
.previewOutside  { background: url('../img/galleryCategory1.jpg'); }
.previewInside   { background: url('../img/galleryCategory2.jpg'); }
.previewLocation { background: url('../img/galleryCategory3.jpg'); }

/**
* Section: Gallery
---------------------------------------------------------*/
#previewGalleries { width: 100%; height: 410px; margin-left: 0px; font : normal 18px 'MaritimeBold', sans-serif; letter-spacing: 2px; }
#previewGalleries h2 { font : normal 24px 'Maritime', sans-serif; letter-spacing: 2px; }
#gallery1, #gallery3 { width: 33%; }
#gallery2 { width: 34%; }
#previewGallery1, #previewGallery2, #previewGallery3 { display: none; }
.previewGallery { width: 100%; }
.box { position: relative; width: 20%; float: left; padding-bottom: 20%; }
.boxInnerPreview { width: 100%; height: 410px; margin: 0; position: absolute; left: 0px; right: 10px; top: 0px; bottom: 0px; overflow: hidden; }
.boxInnerPreview img { width: 182%; margin-left: -50px; }
.boxInner { width: 100%; margin: 0; position: absolute; left: 0px; right: 10px; top: 0px; bottom: 0px; overflow: hidden; }
.boxInner img { width: 220%; margin-left: -50px; }
.boxInnerPreview .titleBoxPreview { position: absolute; bottom: 48px; left: 0; right: 0; margin-bottom: -50px; background: #000; background: rgba(0, 0, 0, 0.5); color: #FFF; padding: 10px; text-align: center; 
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  display:  none;
}
.boxInner .titleBox { position: absolute; bottom: 0; left: 0; right: 0; margin-bottom: -50px; background: #000; background: rgba(0, 0, 0, 0.5); color: #FFF; padding: 10px; text-align: center; 
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  display:  none;
}
.boxInnerPreview:hover .titleBoxPreview { margin-bottom: 0; }
.boxInner:hover .titleBox, .titleBox { margin-bottom: 0; }
@media only screen and (max-width : 480px) {
  /* Smartphone view: 1 tile */
  .box { width: 50%; padding-bottom: 50%; }
  .boxInner .titleBox { display: none; }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
  /* Tablet view: 2 tiles */
  .box { width: 50%; padding-bottom: 50%; }
}
@media only screen and (max-width : 1024px) and (min-width : 651px) {
  /* Small desktop / ipad view: 3 tiles */
  .box { width: 33.3%; padding-bottom: 33.3%; }
}
@media only screen and (max-width : 1290px) and (min-width : 1024px) {
/* Medium desktop: 4 tiles */
  .box { width: 25%; padding-bottom: 25%; }
}

.galleryNav { text-align: center; margin-top: 18px; margin-left: 12px; margin-bottom: 19px; padding: 20px 10px; background: #f0ede5; }
.galleryNav ul { display: table; width: 20%; margin: 0 auto; padding: 0; }
.galleryNav li:nth-child(1) { display: table-cell; text-align: right; }
.galleryNav li { display: table-cell; text-align: center; }
.galleryNav li:nth-child(3) { display: table-cell; text-align: left; }
.galleryNav li a { text-decoration: none; color: #fff; }
[data-gallery] { display: none; }
.galleryPrev, .galleryOverview, .galleryNext { padding: 5px 10px; background: #2f642f; }
.galleryPrev:hover, .galleryOverview:hover, .galleryNext:hover { background: orange; color: #000; -webkit-transition: all 0.15s ease; transition: all 0.15s ease; }

/**
* Section: Equipment
---------------------------------------------------------*/
.circle { float: left; margin: 0px 0px 60px 20px; padding: 0px 0 0px; height: 60px; font-size: 30px; line-height: 50px; text-align: center; color: #2f642f; }
.circle p { font-size: 16px; padding: 0; margin: 0; line-height: 20px; letter-spacing: 1px; }
i { margin: 0; padding-top: 5px; font-size: 20px; display: table-cell; vertical-align: middle; text-align: center; }
ul.equipment { margin: 10px 20px 10px 50px; list-style-type: circle; line-height: 30px; white-space: normal; }
ul.equipment li { color: #000; }
.accordion_container { font-size: 20px; font-weight: 400; padding-left: 45px; }
.accordion_head { cursor: pointer; padding: 0; margin: 0; font-family: 'MaritimeBold', Helvetica, sans-serif; font-size: 21px; font-weight: 400; color: #2f642f; }
.accordion_head:hover { color: orange; }
.accordion_body {display: none; padding: 0px; margin: 0; }

/**
* Section: Location
---------------------------------------------------------*/
#map-content{ height: 430px; width:100%; }
.navigation ul { width: 95%; margin: 0px; padding: 0 0 0 20px; list-style-type: circle; line-height: 15px; }
.navigation ul li { display: inline-block; padding: 10px 0;}
.navigation ul li a { display: block; padding: 0 10px 0 0; font-family: 'MaritimeBold', Helvetica, sans-serif; font-size: 21px; font-weight: 400; text-decoration: none;  color: #2f642f; }
.navigation ul li a:hover { color: orange; }
.navigation li.active a { color: orange; }
.locationContent { font-size: 18px; padding-left: 0px; }
.locationContent ul { list-style-type: circle; margin: 0 0 0 40px; padding: 0; line-height: 25px; }
.locationContent ul li { margin: 10px; }

/**
* Section: Availability
---------------------------------------------------------*/
#calendarOuter { width:100%; }
#calendarInner { display: table; margin: 0 auto; }

/**
* Section: Footer
---------------------------------------------------------*/
footer { display: inline-block; width: 100%; margin: -10px 0 0 0; padding-top: 20px; background: #78604e; }
footer p { color: #fff; padding: 6px 0 0 3px; }
.footerContact { width: 90%; margin: 0 auto; color: #fff; }
.footerContact a { width: 90%; margin: 0 auto; color: orange; text-decoration: none; }
ul.list_vert_footer { margin: 0 0 0 10px; padding: 0; color: #fff; list-style: none; line-height: 30px; }
ul.list_hor_footer { margin: 0 0 0 10px; padding: 0; color: #fff; list-style: none; white-space: normal; }
ul.list_hor_footer li a { text-decoration: none; color: orange; text-align: center; }
ul.list_hor_footer li { display: inline; color: orange; }
.legal { clear: both; width: 90%; margin: 0 auto; padding: 15px 0 25px; background: #78604e; }
.legalLink a { text-decoration: none; color: orange; }

@media only screen and (max-width : 480px) {
  .footerContact p,
  .footerContact .contact {
    display: none;
  }
  .list_hor_footer li {
    line-height:  34px;
  }
}



/**
* SubSection: Footer Mailform
---------------------------------------------------------*/
input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  -webkit-text-fill-color:#fff;
}
.message, .name, textarea { display: block; padding: 0; margin: 0; border: 0; clear: both; overflow: hidden; -webkit-text-fill-color:#fff; color: #fff; letter-spacing: 2px; }
.first, .last { float: left; width: 100%; margin: 0; padding: 0 0 0 20px; border-radius: 0; border: 1px solid rgba(0, 0, 0, 0.1); height: 50px; background: #826b56; letter-spacing: 2px; } 
.last { width: 100%; border-left: 0; border-radius: 0; letter-spacing: 2px; }
.email, textarea { height: 50px; width: 100%; padding: 0 0 0 20px; border-radius: 0; border-top: 0; border-left: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: #826b56; letter-spacing: 2px; }
textarea { padding-top: 10px; border-radius: 0; height: 160px; resize: none; letter-spacing: 2px; }
.first:focus, .last:focus, .email:focus, textarea:focus { outline: none; color: orange; -webkit-text-fill-color: orange; }
.sendButton { height: 32px; background: #d8962a; border: 0; margin: 1px; color: white; float: left; padding: 3px 20px 1px 20px; transition: all linear .1s; letter-spacing: 2px; }
.sendButton:hover { background: #2f642f; }
.sendButton:focus { outline: none; }

/* Section Datenschutz */
.contentWrapper {
  max-width: 1530px;
  min-width: 320px;
  margin: 0 auto 40px;
  padding: 40px;
  height: 410px;
  overflow: auto;
}

.contentWrapper h2 {
  margin-left: 20px;
  color: #2f642f;
}

.contentWrapper h4 {
  margin-left: 20px;
  color: #2f642f;
}

.contentWrapper h5 {
  margin-left: 20px;
  color: #2f642f;
  font-size: 16px;
}

.contentWrapper ul {
  margin-left: 50px;
  line-height: 1.5
}