/* quicksand-300 - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('webfonts/quicksand-v30-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('webfonts/quicksand-v30-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* quicksand-regular - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('webfonts/quicksand-v30-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('webfonts/quicksand-v30-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* quicksand-600 - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('webfonts/quicksand-v30-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('webfonts/quicksand-v30-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* carter-one-regular - latin */
@font-face {
  font-family: 'Carter One';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/carter-one-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/carter-one-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

 /* ---------------------------------------------------------
   Basisgestaltung und Layoutbereiche
   ---------------------------------------------------------*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
* {
	margin:0;
	padding:0;
}
html {
  font-family:  'Quicksand', Arial, sans-serif;
  font-size: 62.5%;
  -ms-text-size-adjust: 100%; /* Prevent iOS text size adjust after orientation change */
  -webkit-text-size-adjust: 100%;
  background-color:#fff;
}
body {
  font-size: 1.8rem;
  font-weight:300;
  color: #393d3d;
  min-width: 320px;
  margin: 0 auto;
}

*, *:before, *:after {
	box-sizing         : border-box;
	-moz-box-sizing    : border-box;
	-webkit-box-sizing : border-box;
}

TABLE, TR, TD, TH {
  font-family:  'Quicksand', Arial, sans-serif;
  font-size: 1.8rem;
  font-weight:300;
	vertical-align:top;
	border-spacing: 0px;
	border-style: none;
	border-collapse: collapse;
}

A {
  color:#8bd258;
  font-weight:600;
  text-decoration:none;
  outline: 0;
}

A IMG,
IMG {
	border:0;
}
B, STRONG {font-weight:600;}

P {
  margin-bottom:20px;
  line-height:1.5em;
}
P:last-child {
  margin-bottom:0;
}
.small {
  font-size: 1.6rem;
}

H1,H2,H3,H4,H5,H6 {
  font-family:  'Quicksand', Arial, sans-serif;
  color:#c80272;
  font-weight:400;
  letter-spacing: 1px;
}
H1 {
  font-size: 2.2rem;
  line-height:1.2;
  margin-bottom:10px;
}
H2 {
  font-size: 2.0rem;
  line-height:1.2;
  letter-spacing: 1.5px;
  margin-bottom:10px;
}
H3 {
  font-size: 1.8rem;
  line-height:1.2;
  margin-bottom:6px;
}

.text-center {text-align:center;}
.flexcon {display:flex !important;}

/* Elemente verstecken */
.hideme {
  display:none;
}

/* Clearfix */
.clearfix:after {
	content    : ".";
	display    : block;
	clear      : both;
	font-size  : 0;
	height     : 0;
	visibility : hidden;
}
.clear { clear: both; }


.reframe { max-width: 980px; padding: 0 25px; margin: 0 auto 90px; position:relative; }
/* overwrite gridlex */
[class~="col"],
[class*="col-"],
[class*="col_"] {
  padding: 0 25px 0;}
/*
[class~="col"] :last-child,
[class*="col-"] :last-child,
[class*="col_"] :last-child {
  margin-bottom: 0;} */

[class*="grid-"], [class*="grid_"], [class~="grid"] {
  margin: 0 -25px 0;
}
@media screen and  (max-width: 760px) {
  .reframe { margin: 0 auto 45px; }
  [class*="grid-"], [class*="grid_"], [class~="grid"] {
    margin: 0 -25px 10px;
  }
}

/* HEADER */
HEADER {
  position: relative;
  width:100%;
	height:auto;
  min-height:200px;
  background-color: #fff;
  margin-bottom:90px;
}
@media screen and  (max-width: 768px) {
  HEADER { margin-bottom:0;}
}

HEADER .language {
  position: absolute;
  top:15px;right:20px;
  color:#8bd258;
  font-size: 1.8rem;
  font-weight: 600;
}
.sub HEADER .language {
  position: relative;
  float:right;
  top:-10px;right:40px;
}
@media screen and (max-width: 840px) {
  HEADER .language  { display:none; }
  .language  { position: relative; text-align: center; margin-top: 50px;}
}

.language A {
  color:#8bd258;
  font-weight: 300;
}
.language SPAN {
  margin: 0 10px;
  font-weight: 300;
}

#toggleMenu {
  display: none;
}

/*svg*/
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  margin-bottom:10px;
  vertical-align:middle;
}

.icon-menu {
  font-size:3.4rem;
  color:#018f86;
}

/* NAVIGATION */
#toggleMenu .icon-cross { display:none; }  /*svg*/
.openNav #toggleMenu .icon-cross { display:block; }   /*svg*/
.openNav #toggleMenu .icon-menu { display:none; }  /*svg*/

#stage {
  position: relative;
  display: flex;
  width:100%;
  height:100vh;
  background-color: #fff;
}

#logo {
  display: block;
  color:#018f86;
  font-family:  'Open Sans', Arial, sans-serif;
  font-family: 'Carter One', Arial, sans-serif;
  font-weight: 600;
  font-size:4.0rem;
  line-height:1.2em;
  letter-spacing: 3px;
  margin-bottom:35px;
}

/* SLIDER*/
.slider .cycle-slideshow {
  position:relative;
  z-index: 99;
}
.slider .cycle-slide {
  width: 100%;
  height:100%;
}
.slider .item   {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  z-index: 99;
}
/* pager */
.cycle-pager {
    text-align: right;padding-right:190px; width: 100%; z-index: 500; position: absolute; bottom: 50px; overflow: hidden;  z-index: 101;
}
@media screen and  (max-width: 768px) {
.cycle-pager { padding-right:50px; }}
@media screen and  (max-width: 480px) {
.cycle-pager { bottom:80px;text-align:center;padding-right:0; }}
.cycle-pager span {
    font-family: arial; font-size: 0; text-indent:-999em;width: 15px; height: 15px;margin:0 17px;
    display: inline-block; background-color: #fff;border-radius: 50%;cursor: pointer;
}
.cycle-pager span.cycle-pager-active { background-color: transparent;border:1px solid #fff;}
.cycle-pager > * { cursor: pointer;}

.half {
  width:50%;
  height:100%;
}
.half.pic {
  width:45%;
  position: relative;
  /*
  background-image: url(../../media/surf-is-up.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  */
}
.half.pic::before {
  display:none;
  position: absolute;
  left:0;bottom:0;
  width:100%;height:22px;
  content: '';
  background-image: url(../fransen-h.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 111;
}
.half.pic::after {
  position: absolute;
  right:0;top:0;
  width:22px;height:100%;
  content: '';
  background-image: url(../fransen.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 111;
}
.half.text {
  width:55%;
  position: relative;
  padding:50px 5% 60px 100px;
}
@media screen and  (max-width: 1360px) {
  .half.text {padding:40px 30px 60px 50px;}
}
@media screen and  (max-width: 1160px) {
  .half.pic { width: 40%; }
  .half.text {width: 60%;}
  #logo {
    font-size:3.0rem;
    margin-bottom:25px;
  }
}
@media screen and  (max-width: 980px) {
  .half.pic { width: 30%; }
  .half.text {width: 70%;}
  #logo {
    font-size:2.8rem;
    margin-bottom:40px;
  }
}
@media screen and  (max-width: 840px) {
  #stage { display: block; height:auto; }

  .slider .item   {
    height: 300px;
  }

  .half { width:100%; height:auto; }
  .half.pic { width:100%;height:300px; }
  .half.text { width:100%; padding:50px 25px 60px 25px;}

  .half.pic {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .half.pic::after {
    display:none;
    position: absolute;
    left:0;top:0;
    height:22px;width:100%;
    content: '';
    background-image: url(../fransen-top.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .half.pic::before { display:block;background-position: left center;}
}

#goto {
  position: absolute;
  bottom: 5%;left:0;
  width: 100%;
}
#goto A {
  width:50px;
  height:117px;
  background-image: url(../arrow_down.png);
}
@media screen and  (max-width: 840px) {
  #goto {display:none;}
}


/* NAVIGATION */
#mainnavi {margin-bottom:75px;}

@media screen and  (max-width: 980px) {
  #mainnavi{ margin-bottom:55px;}
}
#mainnavi > UL {
  display: flex;
  list-style-type: none;
}
#mainnavi > UL > LI {
  position:relative;
  margin-right:35px;
}
@media screen and  (max-width: 980px) {
  #mainnavi > UL > LI {
    margin-right:25px;
  }
}
#mainnavi > UL > LI:last-child {
  margin-right: 0;
}
#mainnavi > UL > LI > A {
  position:relative;
  display:inline-block;
  font-weight:600;
  font-size: 2.4rem;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#mainnavi > UL > LI > A:link,
#mainnavi > UL > LI > A:active,
#mainnavi > UL > LI > A:visited {
  color:#8bd258;
}
#mainnavi > UL > LI > A:hover,
#mainnavi > UL > LI.current > A {
  color: #018f86;
}
@media screen and  (max-width: 1160px) {
  #mainnavi > UL > LI > A {font-size: 2.2rem;}
  #mainnavi > UL > LI { margin-right:23px;}
}

#mobilenavi-frame {display:none;}

/* navi subseite */
#header {
  height: 70px;
  padding:16px 25px 0;
  background-color:#fff;
}
#header #logo {
  float:left;
  font-weight: 600;
  font-size: 3.0rem;
  line-height: 1.2em;
  letter-spacing: 3px;
  margin-bottom: 0;
}
#header #mainnavi {
  float:right;
  margin:3px 20px 0;
}
@media screen and  (max-width: 1160px) {
  #header #logo {
  margin-top: 3px;
  font-size: 2.6rem;
  }
  #header #mainnavi {
    margin-top:8px;
  }
  #header #mainnavi > UL > LI > A {
    font-size: 2.0rem;
  }
}
@media screen and  (max-width: 960px) {
  #header #logo {
  margin-top: 7px;
  font-size: 2.2rem;
  }
  #header #mainnavi {
    margin-top:8px;
    margin-right:5px;
  }
  #mainnavi > UL > LI {
    margin-right:18px;
  }
}

/* KEYVISUAL*/
#keyvisual {
  position: relative;
  width:100%;
  height: 200px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom:30px;
  z-index: 90;
}

#keyvisual:before {
  position: absolute;
  left:0;top:0;
  width:100%;height:22px;
  content: '';
  background-image: url(../fransen-top2.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 111;
}
#keyvisual:after {
  position: absolute;
  left:0;bottom:0;
  width:100%;height:22px;
  content: '';
  background-image: url(../fransen-h2.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 111;
}
@media screen and  (min-width: 550px) {
#keyvisual { height: 250px; }}
@media screen and  (min-width: 760px) {
#keyvisual { height: 300px; }}
@media screen and  (min-width: 980px) {
#keyvisual { height: 400px; }}



/* MAIN */
MAIN IMG, HEADER IMG {
  /* width:100%; */
  max-width: 100%;
  height: auto;
}
MAIN FIGURE IMG {
  display:block;
  width: 100%;
  height: auto;
}
MAIN UL {
  margin:0 0 45px 22px;
}
MAIN LI {
  position:relative;
  line-height:1.5em;
  padding-left:8px;
  margin-bottom:12px;
}
MAIN LI::before {
  position:absolute;
  top:-2px;
  left: 0px;
  content: url(../bullet.png);
}

.sep {
  text-align:center;
}

/* CONTENT */
.gallery {
  display: flex;
  width:100%;
  margin:100px 0;
}
.gallery .item {
  width:10%;
  cursor: pointer;
}
.gallery .item IMG {
  display: block;
  width:100%;
  height: auto;
}
@media screen and  (max-width: 980px) {
  .gallery {flex-wrap: wrap;}
  .gallery .item { width:19%;margin:0.5%; }
}
@media screen and  (max-width: 768px) {
 .gallery {margin:30px 0;}
}
@media screen and  (max-width: 480px) {
  .gallery .item { width:48%; }
}

/* PACKAGES */
#packages {
  position: relative;
  color:#fff;
  padding: 70px 0 80px;
  background-color: #018f86;
  margin-bottom:105px;
}
#packages:before {
  position: absolute;
  left:0;top:-25px;
  width:100%;height:25px;
  content: '';
  background-image: url(../fransen_topgreen2.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 111;
}
#packages:after {
  position: absolute;
  left:0;bottom:-25px;
  width:100%;height:25px;
  content: '';
  background-image: url(../fransen_bottomgreen2.png);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 111;
}
#packages .reframe {
  margin-bottom: 0;
}
#packages H2 {
  color:#fff;
  margin-bottom:30px;
}
#packages P.subline {
  margin-bottom:0;
}

.prices {
  width:100%;
  margin:0 0 10px;
}
.prices TR {
  border-bottom: 1px solid rgba(255,255,255, 0.5);
}
.prices TD, .prices TH {
  text-align: right;
  padding:15px 4px;
  letter-spacing: 1.5px;
}
.prices TD:first-child{
  text-align: left;
}
.prices TH {
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1.5px;
}

.btn {
  font-weight: 400;
  color:#fff;
  padding:10px 25px;
  border-radius: 7px;
  background-color:#c80272;
}

/* MAP */
#map {
  max-height:450px;
}
#map iframe {
  display:block;
}
.responsiveContainer {
  position: relative;
  padding-bottom:56.25%;
    max-height:450px;
  overflow: hidden;
}
.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Formular */
#rex-yform {
  width:100%;
 margin: 25px 0 60px;
}
#form-anmeldung {
  width:100%;
  margin-bottom:0;
}
#form-anmeldung LABEL {
  display:block;
	width:100%;
	height:28px;
	font-size: 18px;font-size: 1.8rem;
  color:#333;
}

.form-check-group .control-label {
  font-size: 1.8rem !important;
  font-weight:600;
  margin-bottom:20px;
}
#form-anmeldung .checkbox LABEL {
	width:100%;
	height:auto;
  margin-bottom:10px;
  cursor:pointer;
}
#form-anmeldung .checkbox LABEL INPUT {
  margin-right:10px;
}
#form-anmeldung INPUT.form-control{
	width:100%;
	height:40px;
  padding:0 10px;
	border:1px solid #d8d8d8;
	font-size: 15px;font-size: 1.5rem;
	margin-bottom:15px;
  border-radius:3px;
}
#form-anmeldung SELECT {
	width:255px;
	height:40px;
  padding:0 16px;
	border:1px solid #d8d8d8;
	font: 16px  'Source Sans Pro', Arial, Verdana, sans-serif;  font-size: 1.6rem;
	margin-bottom:25px;
}
#form-anmeldung OPTION {
  padding:0 20px;
}

#form-anmeldung TEXTAREA {
	width:100%;
	height:145px;
  padding:10px 10px;
	border:1px solid #d8d8d8;
	font: 16px  'Source Sans Pro', Arial, Verdana, sans-serif;font-size: 1.6rem;
	margin-bottom:15px;
  border-radius:3px;
}

FORM BUTTON {
	display:block;
	float:left;
	width:138px;
  height:40px;
	padding:0;
	font: 16px; font-size: 1.6rem;
	color:#fff;
  background-color: #c80272;
	border:0;
  border-radius:3px;
  margin-left:0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
	cursor:pointer;
}
FORM BUTTON:hover {
  background-color:#f8028d;
}

#form-anmeldung INPUT:hover,
#form-anmeldung TEXTAREA:hover,
#form-anmeldung SELECT:hover {
  background-color:#f9fde8;
}

/* FOOTER */
FOOTER {
  overflow: hidden;
  color:#fff;
  font-size: 1.5rem;
  padding: 20px 0;
  background-color: #018f86;
  clear:both;
}
FOOTER .grid {
  margin-bottom:0;
}

FOOTER .reframe {
  width:100%;
  color:#fff;
  margin-bottom:0;
  clear:both;
}
FOOTER [class~="col"],FOOTER  [class*="col-"],FOOTER  [class*="col_"] {
    padding: 0 25px 0;
}
FOOTER A {
  font-weight: 400;
  color:#fff;
}
FOOTER P {
  margin-bottom:23px;
}
FOOTER SPAN {
  margin:0 18px;
}
FOOTER .meta {
  text-align:right;
}
@media screen and  (max-width: 560px) {
  FOOTER .meta {
    text-align:left;
    margin-top:10px;
  }
}

/* ---------------------------------------------------------
   @media
   ---------------------------------------------------------*/

@media screen and  (max-width: 1040px) {

}
/* ---------------------------------------------------------*/

@media screen and  (max-width: 980px) {

}

/* ---------------------------------------------------------*/
@media screen and  (max-width: 840px) {

  #toggleMenu {
    display:block;
    position: absolute;
    right: 30px;
    top: 12px;
    height: 40px;
    line-height: 36px;
    width: 40px;
    color: #018f86;
    fill: currentColor;
    text-align: center;
    cursor: pointer;
    z-index: 10001;
  }
  #mainnavi {display:none;}

  #mobilenavi-frame {
    display:block;
    position:fixed;
    left:0;right:0;
    top:0;bottom:0;
    margin-top: -130%;
    height: calc(-100vh);
    opacity:0;
    background-color:rgba(255,255,255, 0.9);
    z-index: 19001;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .openNav #mobilenavi-frame {
    height: calc(100vh);
    margin-top: 0;
    opacity:1;
  }

  #logo-mobile {
    display:block;
    position: absolute;
    left:24px; top:18px;
    width:100%; height:40px;
    color:#018f86;
    font-family: 'Carter One', Arial, sans-serif;
    font-size:2.2rem;
    letter-spacing: 3px;
  }

  #navihead {
    position: relative;
    width:100%;
    height:60px;
    /* background-color: rgba(49,183,188, 0.7); */
  }
  #closeMenu {
    position: absolute;
    right:27px;top:10px;
    color:#fff;
    width:40px;
    height:40px;
    fill:CurrentColor;
    cursor:pointer;
  }
  .icon-cross {
    font-size:4.2rem;
    color:#c80272;
  }
  .icon-menu {
    font-size:4.4rem;
    color:#fff;
  }
  .sub .icon-menu { color:#c80272;}

 #mobilenavi  {
   display:none;
   height: calc(100vh - 80px);
   overflow:auto;
   padding-top:30px;
 }
 .openNav #mobilenavi  {
    display:block;
  }
  #mobilenavi > UL {
     display:flex;
     flex-direction: column;
   }
   #mobilenavi > UL > LI {
     list-style: none;
   }
   #mobilenavi > UL > LI > A {
     display: flex;
     justify-content: center;
     align-items: center;
     padding:15px 30px;
     font-size: 2rem;
     font-weight:600;
   }
   #mobilenavi > UL > LI > A:link,
   #mobilenavi > UL > LI > A:active,
   #mobilenavi > UL > LI > A:visited {
     color:#8bd258;
   }
   #mobilenavi > UL > li:hover > A {
     color: #0c9297;
   }
   #mobilenavi > UL > LI.current > A {
     color: #0c9297;
   }

}

/* ---------------------------------------------------------*/
@media screen and  (max-width: 576px) {

}

/* ---------------------------------------------------------*/
@media screen and  (max-width: 460px) {

  #logo-mobile {
    font-size:1.8rem;
  }
  #header #logo {
    font-size: 1.8rem;
  }

}
/* Ende @media */
/* ---------------------------------------------------------*/

/* END */