/* latin-ext */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url('fonts/lobster/latin_ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url('fonts/lobster/latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage basic styles
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id$
 **/

/*  =========================================================
general Structure Setup
general Font Setup
tools
========================================================== */


/*  =========================================================
general Structure Setup
========================================================= */
@media screen {
  html{ height: auto; font-size: 10px;}
  html, body{ width: 100%; overflow-x: hidden; overflow-y: auto; text-align: center; margin: 0px; border: 0px; padding: 0px;}
  body{ padding-top: 85px;}
  body a img{ border: 0px none;}

  body > section{ margin-bottom: 80px; position: relative;}
  body > section.colored{
    background: #517068;
    padding: 60px 0px 30px 0px;
  }
  section.formular{
    background: url('projects/nts/images/objects/formularBackground.jpg') 50% 100% no-repeat;
    background-size: contain; width: 100%; content: ' ';
    padding: 0px 0px 51.58% /*650/1260*/ 0px; margin-bottom: 0px!important;
    position: relative;
  }
  section.formular > .content:before{
    content: ' ';
    position: absolute; bottom: 0px; left: 0px;
    width: 100%; height: 100%;
    background: url('projects/nts/images/objects/formularArrowLeft.svg') 100% 100% no-repeat;
    background-size: contain;
  }
  input::-ms-clear {display: none;}
  hr{ border-color: #000; border-style: solid none; border-width: 1px 0px 0px 0px; width: 100%; height: 0px; line-height: 0px; font-size: 0px;}
}
@media screen and (max-width: 1000px){
  body{ padding-top: 75px;}
}
@media screen and (max-width: 775px){
  body{ padding-top: 50px;}
}
@media screen and (max-width: 600px){
  body > section{ margin-bottom: 25px;}
  body > section.colored{ padding-top: 30px;}
}
@media screen and (max-width: 450px){
  body{ padding-top: 100px;}
}
@media screen and (min-width: 1600px){
  section.formular > .content:before{
    background-image: url('projects/nts/images/objects/formularArrowRight.svg');
  }
}

/*  =========================================================
general Font Setup
========================================================= */
@media screen {
  strong{ font-weight: 600;}
  em{ font-style: italic;}

  a{ cursor: pointer; color: inherit; font: inherit;}
  button{ cursor: pointer;}
  label{ cursor: pointer;}

  .badge svg tspan,
  .badge svg text{
    font-family: 'Lobster';
  }
  .badge svg text.aleo{
    font-family: 'Aleo'; font-weight: 700; font-style: italic;
  }
  .badge svg .dynamicText > text{
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
  }
  p > a {
    color: #517068;
    font: italic 400 18px 'Aleo',Arial,sans-serif;
    position: relative;
    text-decoration: underline;
  }

  p > a[target='_blank']{ padding: 0px 0px 0px 20px;}

  p > a[target='_blank']:before{
    content: '\e60e';
    font: 400 18px 'icomoon',Arial,sans-serif;
    left: 0;
    margin-top: 5px;
    position: absolute;
    top: 0;
  }
  p > a[target='_blank']{
    padding: 0px 0px 0px 20px;
  }
}

/*  =========================================================
tools
========================================================= */
@media screen {
  .closer{ clear: both; display: block; margin: 0px!important; padding: 0px!important; background: transparent!important;}
  .none, .hide, #print{ display: none!important;}
  .noMargin{ margin: 0px !important;}
  .noPadding{ padding: 0px !important;}
  .noBorder{ border: 0px none transparent !important;}

  .cover{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index:2;}
  .verticalAlignMiddle{ display: inline-block; height: 100%; width: 0px; vertical-align: middle;}

  .relative{ position: relative;}
}.visible-phone,
.visible-tablet,
.visible-desktop {
  display: none !important;
}
.visible-phone-block,
.visible-phone-inline,
.visible-phone-inline-block,
.visible-tablet-block,
.visible-tablet-inline,
.visible-tablet-inline-block,
.visible-desktop-block,
.visible-desktop-inline,
.visible-desktop-inline-block {
  display: none !important;
}
@media (max-width: 599px) {
  .visible-phone {
    display: block !important;
  }
  table.visible-phone {
    display: table;
  }
  tr.visible-phone {
    display: table-row !important;
  }
  th.visible-phone,
  td.visible-phone {
    display: table-cell !important;
  }
}
@media (max-width: 899px) {
  .visible-phone-block {
    display: block !important;
  }
}
@media (max-width: 899px) {
  .visible-phone-inline {
    display: inline !important;
  }
}
@media (max-width: 899px) {
  .visible-phone-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .visible-tablet {
    display: block !important;
  }
  table.visible-tablet {
    display: table;
  }
  tr.visible-tablet {
    display: table-row !important;
  }
  th.visible-tablet,
  td.visible-tablet {
    display: table-cell !important;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .visible-tablet-block {
    display: block !important;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .visible-tablet-inline {
    display: inline !important;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .visible-tablet-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 900px) {
  .visible-desktop {
    display: block !important;
  }
  table.visible-desktop {
    display: table;
  }
  tr.visible-desktop {
    display: table-row !important;
  }
  th.visible-desktop,
  td.visible-desktop {
    display: table-cell !important;
  }
}
@media (min-width: 900px) {
  .visible-desktop-block {
    display: block !important;
  }
}
@media (min-width: 900px) {
  .visible-desktop-inline {
    display: inline !important;
  }
}
@media (min-width: 900px) {
  .visible-desktop-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 599px) {
  .hidden-phone {
    display: none !important;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hidden-tablet {
    display: none !important;
  }
}
@media (min-width: 900px) {
  .hidden-desktop {
    display: none !important;
  }
}
/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage fonts
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id$
 **/


/*  =========================================================
Aleo - Regular
Aleo - Italic
Aleo - Light
Aleo - Light Italic
Aleo - Bold
Aleo - Bold Italic
========================================================== */


/*  =========================================================
Aleo - Regular
========================================================= */
@font-face {
  font-family: 'Aleo';
  src: url('fonts/Aleo/Aleo-Regular.eot');
  src: url('fonts/Aleo/Aleo-Regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/Aleo/Aleo-Regular.woff') format('woff'),
    url('fonts/Aleo/Aleo-Regular.ttf') format('truetype'),
    url('fonts/Aleo/Aleo-Regular.svg#Aleo-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
}

/*  =========================================================
Aleo - Italic
========================================================= */
@font-face {
  font-family: 'Aleo';
  src: url('fonts/Aleo/Aleo-Italic.eot');
  src: url('fonts/Aleo/Aleo-Italic.eot?#iefix') format('embedded-opentype'),
    url('fonts/Aleo/Aleo-Italic.woff') format('woff'),
    url('fonts/Aleo/Aleo-Italic.ttf') format('truetype'),
    url('fonts/Aleo/Aleo-Italic.svg#Aleo-Italic') format('svg');
  font-weight: 400;
  font-style: italic;
}

/*  =========================================================
Aleo - Light
========================================================= */
@font-face {
  font-family: 'Aleo';
  src: url('fonts/Aleo/Aleo-Light.eot');
  src: url('fonts/Aleo/Aleo-Light.eot?#iefix') format('embedded-opentype'),
    url('fonts/Aleo/Aleo-Light.woff') format('woff'),
    url('fonts/Aleo/Aleo-Light.ttf') format('truetype'),
    url('fonts/Aleo/Aleo-Light.svg#Aleo-Light') format('svg');
  font-weight: 300;
  font-style: normal;
}

/*  =========================================================
Aleo - Light Italic
========================================================= */
@font-face {
  font-family: 'Aleo';
  src: url('fonts/Aleo/Aleo-LightItalic.eot');
  src: url('fonts/Aleo/Aleo-LightItalic.eot?#iefix') format('embedded-opentype'),
    url('fonts/Aleo/Aleo-LightItalic.woff') format('woff'),
    url('fonts/Aleo/Aleo-LightItalic.ttf') format('truetype'),
    url('fonts/Aleo/Aleo-LightItalic.svg#Aleo-LightItalic') format('svg');
  font-weight: 300;
  font-style: italic;
}

/*  =========================================================
Aleo - Bold
========================================================= */
@font-face {
  font-family: 'Aleo';
  src: url('fonts/Aleo/Aleo-Bold.eot');
  src: url('fonts/Aleo/Aleo-Bold.eot?#iefix') format('embedded-opentype'),
    url('fonts/Aleo/Aleo-Bold.woff') format('woff'),
    url('fonts/Aleo/Aleo-Bold.ttf') format('truetype'),
    url('fonts/Aleo/Aleo-Bold.svg#Aleo-Bold') format('svg');
  font-weight: 600;
  font-style: normal;
}

/*  =========================================================
Aleo - Bold Italic
========================================================= */
@font-face {
  font-family: 'Aleo';
  src: url('fonts/Aleo/Aleo-BoldItalic.eot');
  src: url('fonts/Aleo/Aleo-BoldItalic.eot?#iefix') format('embedded-opentype'),
    url('fonts/Aleo/Aleo-BoldItalic.woff') format('woff'),
    url('fonts/Aleo/Aleo-BoldItalic.ttf') format('truetype'),
    url('fonts/Aleo/Aleo-BoldItalic.svg#Aleo-BoldItalic') format('svg');
  font-weight: 600;
  font-style: italic;
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage icons
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id: icons.css 891 2016-01-26 10:16:13Z hofmann $
 **/

@media screen {
  [class^='icon-'], [class*='icon-'] {
    font: 400 normal 32px 'icomoon';
    font-variant: normal;
    -text-transform: none;
    speak: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage grid system
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id$
 **/

/*  =========================================================
basic config
12 column grid
========================================================== */


/*  =========================================================
basic config
========================================================= */
@media screen {
  .content{ width: 1175px; margin: 0px auto; text-align: left;}
  
  [class*='g-grid']{ clear: both; display: block;}
  [class*='g-element']{ float: left;}
}
@media screen and (max-width: 1250px){
  .content{ width: 96%; margin: 0px 2%;}
}
@media screen and (max-width: 700px){
  .content{ width: 90%; margin: 0px 5%;}
}

/*  =========================================================
12 column grid
========================================================= */
@media screen {
  #siteHeader__fulltextsearch__searchword_autocomplete,
  .g-grid-12{ width: 102.127%/*1200/1175*/; margin: 0px -2.127%/*25/1175*/ 0px 0px;}
  #siteHeader__fulltextsearch__searchword_autocomplete,
  .g-grid-12 [class*='g-element']{ margin-right: 2.083%/*25/1200*/;}
  
  #siteHeader__filter__location_autocomplete .g-grid-12 [class*='g-element']{ padding-left: 0;}
  
  .g-element-0{ display: none;}
  .g-element-1{ width: 6.25%/*75/1200*/;}
  .g-element-2{ width: 14.583%/*175/1200*/;}
  .g-element-3{ width: 22.916%/*275/1200*/;}
  .g-element-4{ width: 31.25%/*375/1200*/;}
  .g-element-5{ width: 39.583%/*475/1200*/;}
  .g-element-6{ width: 47.916%/*575/1200*/;}
  .g-element-7{ width: 56.25%/*675/1200*/;}
  .g-element-8{ width: 64.583%/*775/1200*/;}
  .g-element-9{ width: 72.916%/*875/1200*/;}
  .g-element-10{ width: 81.25%/*975/1200*/;}
  .g-element-11{ width: 89.583%/*1075/1200*/;}
  .g-element-12{ width: 97.916%/*1175/1200*/;}
  
  .g-offset-0{ margin-left: 0%;}
  .g-offset-1{ margin-left: 6.25%/*75/1200*/;}
  .g-offset-2{ margin-left: 14.583%/*175/1200*/;}
  .g-offset-3{ margin-left: 22.916%/*275/1200*/;}
  .g-offset-4{ margin-left: 31.25%/*375/1200*/;}
  .g-offset-5{ margin-left: 39.583%/*475/1200*/;}
  .g-offset-6{ margin-left: 47.916%/*575/1200*/;}
  .g-offset-7{ margin-left: 56.25%/*675/1200*/;}
  .g-offset-8{ margin-left: 64.583%/*775/1200*/;}
  .g-offset-9{ margin-left: 72.916%/*875/1200*/;}
  .g-offset-10{ margin-left: 81.25%/*975/1200*/;}
  .g-offset-11{ margin-left: 89.583%/*1075/1200*/;}
  .g-offset-12{ margin-left: 97.916%/*1175/1200*/;}
}
@media screen and (max-width: 900px){
  .g-element-md-0{ display: none;}
  .g-element-md-1{ width: 6.25%/*75/1200*/;}
  .g-element-md-2{ width: 14.583%/*175/1200*/;}
  .g-element-md-3{ width: 22.916%/*275/1200*/;}
  .g-element-md-4{ width: 31.25%/*375/1200*/;}
  .g-element-md-5{ width: 39.583%/*475/1200*/;}
  .g-element-md-6{ width: 47.916%/*575/1200*/;}
  .g-element-md-7{ width: 56.25%/*675/1200*/;}
  .g-element-md-8{ width: 64.583%/*775/1200*/;}
  .g-element-md-9{ width: 72.916%/*875/1200*/;}
  .g-element-md-10{ width: 81.25%/*975/1200*/;}
  .g-element-md-11{ width: 89.583%/*1075/1200*/;}
  .g-element-md-12{ width: 97.916%/*1175/1200*/;}
  
  .g-offset-md-0{ margin-left: 0%;}
  .g-offset-md-1{ margin-left: 6.25%/*75/1200*/;}
  .g-offset-md-2{ margin-left: 14.583%/*175/1200*/;}
  .g-offset-md-3{ margin-left: 22.916%/*275/1200*/;}
  .g-offset-md-4{ margin-left: 31.25%/*375/1200*/;}
  .g-offset-md-5{ margin-left: 39.583%/*475/1200*/;}
  .g-offset-md-6{ margin-left: 47.916%/*575/1200*/;}
  .g-offset-md-7{ margin-left: 56.25%/*675/1200*/;}
  .g-offset-md-8{ margin-left: 64.583%/*775/1200*/;}
  .g-offset-md-9{ margin-left: 72.916%/*875/1200*/;}
  .g-offset-md-10{ margin-left: 81.25%/*975/1200*/;}
  .g-offset-md-11{ margin-left: 89.583%/*1075/1200*/;}
  .g-offset-md-12{ margin-left: 97.916%/*1175/1200*/;}
}
@media screen and (max-width: 600px){
  .g-element-sm-0{ display: none;}
  .g-element-sm-1{ width: 6.25%/*75/1200*/;}
  .g-element-sm-2{ width: 14.583%/*175/1200*/;}
  .g-element-sm-3{ width: 22.916%/*275/1200*/;}
  .g-element-sm-4{ width: 31.25%/*375/1200*/;}
  .g-element-sm-5{ width: 39.583%/*475/1200*/;}
  .g-element-sm-6{ width: 47.916%/*575/1200*/;}
  .g-element-sm-7{ width: 56.25%/*675/1200*/;}
  .g-element-sm-8{ width: 64.583%/*775/1200*/;}
  .g-element-sm-9{ width: 72.916%/*875/1200*/;}
  .g-element-sm-10{ width: 81.25%/*975/1200*/;}
  .g-element-sm-11{ width: 89.583%/*1075/1200*/;}
  .g-element-sm-12{ width: 97.916%/*1175/1200*/;}
  
  .g-offset-sm-0{ margin-left: 0%;}
  .g-offset-sm-1{ margin-left: 6.25%/*75/1200*/;}
  .g-offset-sm-2{ margin-left: 14.583%/*175/1200*/;}
  .g-offset-sm-3{ margin-left: 22.916%/*275/1200*/;}
  .g-offset-sm-4{ margin-left: 31.25%/*375/1200*/;}
  .g-offset-sm-5{ margin-left: 39.583%/*475/1200*/;}
  .g-offset-sm-6{ margin-left: 47.916%/*575/1200*/;}
  .g-offset-sm-7{ margin-left: 56.25%/*675/1200*/;}
  .g-offset-sm-8{ margin-left: 64.583%/*775/1200*/;}
  .g-offset-sm-9{ margin-left: 72.916%/*875/1200*/;}
  .g-offset-sm-10{ margin-left: 81.25%/*975/1200*/;}
  .g-offset-sm-11{ margin-left: 89.583%/*1075/1200*/;}
  .g-offset-sm-12{ margin-left: 97.916%/*1175/1200*/;}
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage elements styles
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id$
 **/

/*  =========================================================
buttons
3d button
checkboxes and radios
inputs and labels
copyright on images
socialShareBanner
socialShareRow
media gallery
content forms
hotel rating iframe
hotel price information
recommendations and events loader
badgerow
fullscreen map
Remember
lottery anwser
========================================================== */


/*  =========================================================
buttons
========================================================= */
@media screen {
  .button{
    display: inline-block;
    height: 50px; padding: 10px; max-width: 100%;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
    border: 1px #fff solid;
    font: 400 normal 20px 'Lobster'; text-decoration: none;
    color: #fff; background: #2a3841;
    box-sizing: border-box;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  }

  .button > [class^='icon-']{
    vertical-align: middle;
    font-size: 32px;
    text-decoration: none;
  }

  .button--cta{ background: #5e005e;}
  .button--light{ background: #fff; color: #2a3841;}

  .button--bigText{ font-size: 25px;}

  .button--leftText > [class^='icon-']{
    padding-right: 10px; margin-right: 10px;
    border-right: 1px rgba(255, 255, 255, 0.5) solid;
  }
  .button--rightText > [class^='icon-']{
    padding-left: 10px; margin-left: 10px;
    border-left: 1px rgba(255, 255, 255, 0.5) solid;
  }
  .button--light > [class^='icon-']{ border-color: rgba(42, 56, 65, 0.5);}
  .button--bigText > [class^='icon-']{ vertical-align: top;}

  .button--noBorder {
    border:none;
  }
  .button--margin {
    margin-right: 10px;
  }
}

@media screen and (max-width: 600px){
  .button{ font-size: 18px;}
}
@media screen and (max-width: 400px){
  .button--margin {
    margin-right: 0;
    margin-top: 10px;
  }
}

/*  =========================================================
3d button
========================================================= */
@media screen {
  .button3d{
    display: inline-block;
    position: relative;
    height: 50px; width: 50px;
    transition: transform 0.25s linear; -moz-transition: -moz-transform 0.25s linear; -webkit-transition: -webkit-transform 0.25s linear;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
  }
  .button3d > [class^='icon-']{
    position: absolute; bottom: 0px; left: 0px;
    height: 100%; width: 100%; padding: 10px;
    box-sizing: border-box;
    font-size: 32px; text-decoration: none;
    background: #fff; color: #2a3841;
    transition: all 0.25s linear; -moz-transition: all 0.25s linear; -webkit-transition: all 0.25s linear;
  }
  .button3d > [class^='icon-']:last-of-type{ display: none;}
  .csstransforms3d .button3d > [class^='icon-']:last-of-type{
    transform: rotate3d(1, 0, 0, 90deg); -moz-transform: rotate3d(1, 0, 0, 90deg); -webkit-transform: rotate3d(1, 0, 0, 90deg); -ms-transform: rotate3d(1, 0, 0, 90deg);
    bottom: 25px;
    display: block;
  }
  .csstransforms3d .button3d:active,
  .csstransforms3d .button3d:focus,
  .csstransforms3d .button3d:hover{
    transform: rotate3d(0, 0, 1, 90deg); -moz-transform: rotate3d(0, 0, 1, 90deg); -webkit-transform: rotate3d(0, 0, 1, 90deg); -ms-transform: rotate3d(0, 0, 1, 90deg);
    box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.3);
  }
  .csstransforms3d .button3d:active > [class^='icon-'],
  .csstransforms3d .button3d:focus > [class^='icon-'],
  .csstransforms3d .button3d:hover > [class^='icon-']{
    transform: rotate3d(1, 0, 0, 90deg); -moz-transform: rotate3d(1, 0, 0, 90deg); -webkit-transform: rotate3d(1, 0, 0, 90deg); -ms-transform: rotate3d(1, 0, 0, 90deg);
    bottom: -25px;

  }
  .csstransforms3d .button3d:active > [class^='icon-']:last-of-type,
  .csstransforms3d .button3d:focus > [class^='icon-']:last-of-type,
  .csstransforms3d .button3d:hover > [class^='icon-']:last-of-type{
    transform: rotate3d(1, 0, 0, 0deg); -moz-transform: rotate3d(1, 0, 0, 0deg); -webkit-transform: rotate3d(1, 0, 0, 0deg); -ms-transform: rotate3d(1, 0, 0, 0deg);
    bottom: 0px;
  }

}

/*  =========================================================
checkboxes and radios
========================================================= */
@media screen {
  input.hidden[type=checkbox],
  input.hidden[type=radio]{
    opacity: 0; position: absolute;
  }

  input.styled[type=checkbox]{
    opacity: 0; position: absolute;
  }
  input.styled[type=checkbox] + label{
    display: inline-block; padding-left: 25px;
  }
  input.styled[type=checkbox] + label > [class^='icon-']{
    background: transparent;
    border: 3px rgba(42, 56, 65, 0.5) solid;
    font-size: 14px; color: transparent;
    margin-right: 5px; margin-left: -25px;
  }
  input.styled[type=checkbox]:checked + label > [class^='icon-']{
    background: rgba(42, 56, 65, 0.5);
    border-color: rgba(42, 56, 65, 0);
    color: #fff;
  }

  input.styled[type=radio]{
    opacity: 0; position: absolute;
  }
  input.styled[type=radio] + label{
    display: inline-block; padding-left: 25px;
  }
  input.styled[type=radio] + label:not(.button):before{
    content: ' ';
    display: inline-block; vertical-align: bottom;
    width: 12px; height: 12px;
    background: transparent;
    border: 4px rgba(42, 56, 65, 0.5) solid;
    margin-right: 5px; margin-left: -25px;
    border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;
  }
  input.styled[type=radio]:checked + label:before{
    background: rgba(42, 56, 65, 0.5);
    border-color: transparent;
  }
}

/*  =========================================================
inputs and labels
========================================================= */
@media screen {
  /*label styles*/
  div > label.default{
    font: 400 normal 14px 'Aleo', Arial, sans-serif;
    display: block; margin-bottom: 3px; padding-left: 5px;
  }
  span > label.default{
    font: 400 normal 15px 'Aleo', Arial, sans-serif;
  }

  /*input styles*/
  input[type=text].default,
  input[type=email].default,
  select.default,
  textarea.default{
    box-sizing: border-box; border: none;
    font: 700 normal 18px 'Aleo', Arial, sans-serif;
    background: #fff; color: #2a3841;
    border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
  }
  /*error*/
  .formerror {
    color: #a20 !important;
  }
  input[type=text].formerror,
  input[type=email].formerror,
  select.formerror,
  textarea.formerror {
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35) inset, 0px 0px 10px #f00;
  }

  /* form result */
  article.contentText p.formResult {
    font-size: 40px;
    padding-top:90px;
    line-height:80%;
  }

  article.contentText span#newsletterThankYou{
    font-size: 40px;
    color:#31B404;
    padding-bottom:5px;
  }

  input[type=text].default,
  input[type=email].default{ padding: 0px 10px;}
  div:not([class*='children-dependant']) > select.default { width: 100%;}
  select.default{
    padding: 3px 5px 4px 10px;
  }
  textarea.default{ padding: 5px 10px;}
  select.children {
    padding: 3px 5px 4px 10px;
  }

  input[type=text].calendar{
    background: #fff url('projects/nts/images/icons/calendar.svg') 98% 50% no-repeat;
    background-size: 30px;
  }
  input[type=text].autocomplete{
    background: #fff url('projects/nts/images/icons/pencil.svg') 98% 50% no-repeat;
    background-size: 25px;
  }
}
@media screen and (max-width: 600px){
  input[type=text].default,
  input[type=email].default,
  select.default,
  textarea.default{
    font-size: 14px;
  }
}

/*  =========================================================
copyright on images
========================================================= */
@media screen {
  .image,
  .video{
    position: relative;
  }
  .copyright{
    display: block; padding: 1px 3px;
    position: absolute; top: 0px; right: 0px; z-index: 1;
    font: 400 normal 12px 'Aleo', Arial, sans-serif; text-align: left;
    color: #fff; text-decoration: none;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.75);
    transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg);
    transform-origin: right bottom; -moz-transform-origin: right bottom; -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom;
    top: -17px;
  }
  #keyvisual .copyright{
    top: 45px;
  }
  #keyvisual.indexPage .copyright{
    top: -17px;
  }

  .image > img {
    max-width: 100%; height: auto;
  }
}


/*  =========================================================
socialShareBanner
========================================================= */
@media screen {
  .socialShareBanner{
    width: 100%;
    background: #517068;
    position: relative; z-index: 2;
  }
  .socialShareBanner > h2{
    font: 400 normal 50px/45px 'Lobster';
    color: #fff; background: #517068;
    padding: 10px; margin: -40px 7.8125% /*100/1280*/ 0px 7.8125% /*100/1280*/;
    display: inline-block;
  }
  .socialShareBanner > p{
    font: 400 normal 20px/24px 'Aleo', Arial, sans-serif; color: #fff;
    padding: 0px 7.8125% /*100/1280*/; margin: 0px 0px 5px 0px;
  }

  .socialShareBanner > a{
    display: inline-block;
    width: 70px; /* taken out for #24323 margin: 0px 1px 0px 0px; */
    text-decoration: none;
    position: relative; top: 30px;
  }
  .socialShareBanner > a > [class^='icon']{
    width: 99%; height: 0px;
    padding: 21.4285% /*15/70*/ 0px 85.714% /*60/70*/ 0px;
    font-size: 50px;
    color: #2a3841; background: #fff;
    display: block;
    transition: background .5s ease; -moz-transition: background .5s ease; -webkit-transition: background .5s ease;
    min-width: 99%;
  }
  .socialShareBanner > a > .counter{
    width: 99%; height: 0px;
    padding: 7.142% /*5/70*/ 0px 35.714% /*25/70*/ 0px;
    font: 700 normal 16px 'Aleo', Arial, sans-serif;
    color: #fff; background: #2a3841;
    display: block;
  }
  .socialShareBanner > a:active > [class^='icon'],
  .socialShareBanner > a:focus > [class^='icon'],
  .socialShareBanner > a:hover > [class^='icon']{
    color: #fff; background: #2a3841;
  }
}
@media screen and (max-width: 1000px){
  .socialShareBanner{ display: none;}
}

/*  =========================================================
socialShareRow
========================================================= */
@media screen {
  .socialShareRow{
    text-align: center;
    width: 100%; margin: 30px 0px;
  }
  .socialShareRow > h4{
    font: 400 normal 35px 'Lobster'; color: #5e666b;
    display: inline-block; vertical-align: middle;
    margin: 0px;
  }
  .socialShareRow > a{
    display: inline-block; vertical-align: middle;
    margin: 0px 10px 5px 0px;
    text-decoration: none;
    background: #5e666b;
  }
  .socialShareRow > a > [class^='icon'],
  .socialShareRow > a > .counter{
    display: inline-block; vertical-align: middle;
  }
  .socialShareRow > a > [class^='icon']{
    font-size: 35px; color: #fff;
    margin: 0px 0px 0px 5px;
  }
  .socialShareRow > a > .counter{
    height: 100%;
    padding: 5px 10px; margin: 5px;
    background: #fff; color: #5e666b;
    font: 700 normal 16px 'Aleo', Arial, sans-serif;
  }
}
@media screen and (max-width: 1000px){
  .socialShareRow > h4{ width: 100%;}
}
@media screen and (max-width: 700px){
  /*  .socialShareRow{ text-align: left;}*/
  .socialShareRow > h4{ display: none;}
}

/*  =========================================================
media gallery
========================================================= */
@media screen {
  img.playbutton  {
    width: 200px;
  }
  .mediaGallery{
    overflow: hidden; position: relative;
    margin-bottom: 2.083%;
  }
  .mediaGallery > .mediaCollection{height: 100%;}
  .mediaGallery > .mediaCollection > .image,
  .mediaGallery > .mediaCollection > .video{
    float: left; height: 100%;
    overflow: hidden;
    text-align: center;
  }
  .mediaGallery > .mediaCollection > .video img{
    height: 480px;
  }
  .mediaGallery > .mediaCollection > .image > picture,
  .mediaGallery > .mediaCollection > .image > noscript{
    display: block; width: 100%; height: 100%;
  }
  .mediaGallery > .mediaCollection > .image img{
    display: block; width: auto; height: auto;
    margin: 0;
  }
  .mediaGallery > .mediaCollection > .image > .button{
    position: absolute; bottom: 5px; right: 5px;
  }
}
@media screen and (max-width: 600px){
  .mediaGallery{ margin-bottom: 8%;}
}

/*  =========================================================
badge row
========================================================= */
@media screen {
  .badgeRow {margin: 40px 0px;}

  .badgeRow > img {
    width: 106px;
    margin-right: 15px;
  }
}

/*  =========================================================
content forms
========================================================= */
@media screen {
  .contentForm{ padding-bottom: 50px;}
  .contentForm,
  .contentForm > [class*='g-element']{
    position: relative;
  }
  .contentForm > .background{
    background: rgba(42, 56, 65, 0.2);
    position: absolute; top: 0px; left: 0px;
    height: 100%;
  }

  .contentForm fieldset,
  .contentForm div.border{
    border: none; margin: 20px 20px 10px 20px; padding: 0px;
  }
  .contentForm fieldset.border,
  .contentForm div.border{
    border-top: 1px rgba(0, 0, 0, 0.3) solid;
    padding-top: 20px;
  }
  .contentForm fieldset > legend{ display: none;}

  .contentForm fieldset > div{
    display: inline-block; box-sizing: border-box;
    margin-bottom: 20px;
  }

  .contentForm p{
    font: 400 normal 20px 'Lobster'; color: #5e666b;
    margin: 0px;
  }
  .contentForm button[type=submit]{ float: right;}
  .contentForm button.left[type=submit]{ float: left;}

  .contentForm fieldset > div.half{ vertical-align: top; width: 50%;}
  .contentForm fieldset > div.half:nth-of-type(2n){ padding-right: 5px;}
  .contentForm fieldset > div.half:nth-of-type(2n+1){ padding-left: 5px;}
  .contentForm fieldset > div.full{ width: 100%;}

  .contentForm fieldset > div.threeQuarter{ vertical-align: top; width: 75%; padding-left: 10px;}
  .contentForm fieldset > div.quarter{ vertical-align: top; width: 25%;}

  .contentForm fieldset > div > label{
    font: 400 normal 20px 'Lobster';
    display: block; margin-bottom: 3px; padding-left: 5px;
  }
  .contentForm fieldset label{ color: #5e666b;}

  .contentForm fieldset > div > input[type=text],
  .contentForm fieldset > div > input[type=email]{ height: 40px;}

  .contentForm fieldset > div > input[type='text'],
  .contentForm fieldset > div > input[type='email'],
  .contentForm fieldset > div > select,
  .contentForm fieldset > div > textarea{ width: 100%; resize: vertical;}

  .contentForm fieldset > div > textarea{ height: 475px;}
  .contentForm fieldset > div > select{
    height: 40px; padding-top: 10px;
  }

  .contentForm fieldset .background{
    padding: 10px 20px;
    background: rgba(42, 56, 65, 0.2);
    min-height: 75px;
  }
  .contentForm fieldset .background > p{
    font: 400 normal 16px/20px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px 0px 5px 0px;
  }
  .contentForm fieldset .background > p > strong{
    font: 400 normal 18px 'Lobster';
  }

  .contentForm input.styled[type=checkbox] + label{ margin-bottom: 20px;}
  .contentForm input.styled[type=checkbox] + label > strong{
    font: 400 normal 18px 'Lobster';
  }
}
@media screen and (max-width: 900px){
  .contentForm p{ margin-bottom: 10px;}
  .contentForm fieldset > div > textarea{ height: 400px;}
}
@media screen and (max-width: 600px){
  .contentForm fieldset > div:not(.none){
    width: 100%!important;
    padding: 0!important;
    display: block!important;
    margin-bottom: 10px;
  }
  .contentForm fieldset > div > textarea{ height: 200px;}
}

/*  =========================================================
hotel rating iframe
========================================================= */
@media screen {
  .ratingiFrame{ text-align: center;}
}
@media screen and (max-width: 600px){
  .ratingiFrame{ display: none;}
}

/*  =========================================================
hotel price information
========================================================= */

@media screen {
  .priceInformation{
    width: 100%;
    background-color: #c8ac7c;
    border-bottom: #2a3841 40px solid;
    position: relative; z-index: 1;
    padding: 25px 0px 15px 0px;
  }
  .priceInformation .infoText{
    font: 600 italic 20px/20px 'Aleo'; color: #fff;
    display: block; text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    margin: 0px;
  }
  .priceInformation .infoText.smaller{
    font: 600 italic 16px 'Aleo'; color: #fff;
  }

  .priceInformation .priceTag{
    font: 400 normal 50px 'Lobster'; color: #fff;
    text-align: center;
    margin: 0px; padding: 0px;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
  }
  .priceInformationButton{
    text-align: center;
    margin-top: -25px; position: relative; z-index: 2;
  }
}

/*  =========================================================
recommendations and events loader
========================================================= */
@media screen {
  .itemLoader{
    text-align: center;
    margin-top: 20px;
  }
  .offerList ~ .itemLoader {
    height: 400px;
    margin-top: 200px;
  }
  .itemLoader.bestOfListItemLoader span {
    color: white;
  }

  .itemloader > .spinner{ display: block;}

  .loadingText{
    font: 400 normal 16px 'Aleo'; color:#2a3841;
    display: block; margin-top: 15px;
  }
}

/*  =========================================================
badgerow
========================================================= */
@media screen {
  .badgerow{
    width: 100%; padding: 15px 0px;
  }
  .badgerow > .rowItem{
    width: 120px; height: 120px;
    position: relative; display: inline-block;
  }

  .badgerow > .rowItem > svg {
    position: absolute; top: 0px; left: -90px;
    transform: scale(0.3); -moz-transform: scale(0.3); -webkit-transform: scale(0.3); -ms-transform: scale(0.3);
    transform-origin: top left; -moz-transform-origin: top left; -webkit-transform-origin: top left; -ms-transform-origin: top left;
  }
}

/*  =========================================================
fullscreen map
========================================================= */
@media screen {
  #fullscreenMapContainer{
    width: 100%; height: 650px;
    position: relative;
  }
  .mapTypeSwitch {
    top: 20px; right: 20px;
    position: absolute;
    z-index: 50;
  }
  .mapTypeSwitch a{
    font: 400 normal 20px 'Lobster', Arial, sans-serif; text-decoration: none;
    padding: 10px; margin: 2px;
    background: #fff; color: #2a3841;
    float: left;
  }
  .mapTypeSwitch a.active {
    border: 2px #fff solid; padding: 8px;
    background: transparent; color: #fff;
  }

  #fullscreenMapContainer .gmnoprint .gm-style-mtc {
    display: none;
  }
  #fullscreenMap{
    width: 100%; height: 100%;
  }

  #mapAroundMe{
    position: absolute; top: 80px; right: 20px;
    font: 400 normal 20px 'Lobster', Arial, sans-serif; text-decoration: none;
    border: 2px #fff solid; padding: 8px;
    background: #fff; color: #2a3841;
    display: block; height: 25px;
  }
  #mapAroundMe.active{
    background: transparent; color: #fff;
  }
  #mapAroundMe > [class*='icon']{
    position: absolute; top: -2px; right: 100%;
    border: 2px #fff solid;
    height: 100%;
    font-size: 30px; line-height: 40px;
    padding: 0px 5px;
    color: #2a3841;
    background: #fff;
  }
  #mapAroundMe:not(.active) > [class*='icon']{
    background: transparent; color: transparent;
  }
}
@media screen and (min-width: 600px){
  #siteHeader[data-offCanvasVisible='siteHeader__functions__mapInfoboard'] + #fullscreenMapContainer{
    width: 50%; margin-left: 50%;
  }
}

@media screen and (max-width: 1000px){
  .mapTypeSwitch{ display: none;}
  #mapAroundMe{
    top: 5px; right: 5px;
  }
}

/*  =========================================================
fullscreen map
========================================================= */
.remember-fly-element {
  position:absolute;
  content: " ";
  width: 100px;
  height: 100px;
  background-color: red;
  display: block;
  margin-top: 50px;

}
.remember-fly-element.flying {
  transition: top 3s ease-in-out, left 3s ease-in-out, opacity 0.3s;
}

/*  =========================================================
lottery anwser
========================================================= */
@media screen {
  #lottery-answer{
    padding-top: 50px; float: left; width: 100%;
  }
}

@media screen {
  #lottery-answer > form{
    box-sizing: border-box; padding: 20px;
    background: #cfb589; margin-top: 25px;
    position: relative;
  }
}

/* radio buttons */
@media screen {
  #lottery-answer > form > [type='radio']{
    position: absolute; opacity: 0;
  }
  #lottery-answer > form > [type='radio'] + label{
    font: 400 normal 20px/24px 'Lobster'; color: #fff;
    padding: 0px 0px 0px 30px;
    display: block;
  }
  #lottery-answer > form > [type='radio'] + label:not(:last-of-type){ margin-bottom: 20px;}

  #lottery-answer > form > [type='radio'] + label:before{
    content: '\e605';
    display: inline-block; vertical-align: middle;
    width: 20px; height: 20px; border: 2px #fff solid; margin: 0px 10px 0px -30px;
    font: 400 normal 14px/20px 'icomoon'; text-align: center;
    color: #cfb589;
  }

  #lottery-answer > form > [type='radio']:checked + label:before{ background: #fff;}
}

@media screen {
  #lottery-answer > form > textarea{
    width: 100%; height: 100px;
    resize: vertical;
  }
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage article and text styles
 * @author     gueldner
 * @since      23.06.2014
 * @version    $Id$
 **/

/*  =========================================================
article formats
headlines
text styles
article list
webcam article
========================================================== */


/*  =========================================================
article formats
========================================================= */
@media screen {
  article.siteIntro{
    text-align: center;
    padding: 0px;
  }
  .areaIntro{
    padding: 0px 0px 30px 0px;
  }
  article.contentText{
    text-align: left;
  }
  .centered {
    text-align: center;
  }
  .columned {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
  }
}
@media screen and (max-width: 600px){
  article.contentText{
    text-align: left;
  }
  .areaIntro {
    padding: 0;
  }
}

/*  =========================================================
headlines
========================================================= */
@media screen {
  article.siteIntro > h1{
    font: 400 normal 70px/80px 'Lobster'; color: #2a3841;
    margin: 0px 0px 15px 0px;
  }

  article.siteIntro > h2 {
    color: #5e666b;
    font: 400 40px/45px 'Lobster';
    margin: 0px 0px 0px 0px;
  }

  .areaIntro > h1,
  .areaIntro > h2{
    font: 400 normal 50px/55px 'Lobster'; color: #2a3841;
    margin: 0px 0px 10px 0px;
  }
  article.eventLocation > h2,
  article.contentText > h2{
    font: 400 normal 40px 'Lobster'; color: #5e666b;
    margin: 0px 0px 15px 0px;
  }
  article.eventLocation > h3,
  .areaIntro > h3,
  article.contentText > h3 {
    color: #5e666b;
    font: 400 30px 'Lobster';
    margin: 0 0 10px;
  }
  article.eventLocation > h4,
  .areaIntro > h4,
  article.contentText > h4{
    font: 400 normal 18px/30px 'Lobster'; color: #5e666b;
    margin: 30px 0px 10px 0px;
  }
  article.eventLocation > h5,
  .areaIntro > h5,
  article.contentText > h5{
    font: 700 normal 18px/30px 'Aleo'; color: #5e666b;
    margin: 30px 0px 10px 0px;
  }
  article.eventLocation > h6,
  .areaIntro > h6,
  article.contentText > h6{
    font: 400 normal 18px/30px 'Aleo'; color: #5e666b;
    margin: 30px 0px 10px 0px;
  }

  .colored article.siteIntro > h1,
  .colored .areaIntro > h1,
  .colored .areaIntro > h2,
  .colored article.contentText > h2,
  .colored article.contentText > h3{
    color: #fff;
  }
}
@media screen and (max-width: 900px){
  .columned {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
  }
  article.siteIntro > h2 {
    color: #5e666b;
    font: 400 25px/30px 'Lobster';
    margin: 0px 0px 0px 0px;
  }
}
@media screen and (max-width: 600px){
  .columned {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
  }
  article.siteIntro > h1{
    font-size: 36px; line-height: 40px;
    margin: 0px 0px 15px 0px;
  }

  article.siteIntro > h2 {
    color: #5e666b;
    font: 400 25px/30px 'Lobster';
    margin: 0px;
  }

  .areaIntro > h1,
  .areaIntro > h2{
    font-size: 40px; line-height: 45px;
  }
  article.eventLocation > h2,
  article.contentText > h2{
    font-size: 35px; margin-bottom: 10px;
  }
  article.eventLocation > h3,
  article.contentText > h3{
    font-size: 25px; margin-bottom: 5px;
  }
}

/*  =========================================================
text styles
========================================================= */
@media screen {
  article.siteIntro > p{
    font: 300 italic 25px/40px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px 0px 10px 0px;
  }

  article.siteIntro > p > strong{
    font-weight: 400; font-size: 30px;
  }

  .areaIntro > p{
    font: 400 normal 20px/24px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px 0px 10px 0px;
  }
  article.eventLocation > p,
  article.contentText > p{
    font: 400 normal 18px/30px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px 0px 15px 0px;
  }
  article.contentText > p.center{
    text-align: center;
  }

  .colored article.siteIntro > p,
  .colored .areaIntro > p,
  .colored article.contentText{
    color: #fff;
  }
  article.contentText > p > a{
    color: #2a3841;
  }
}
@media screen and (max-width: 600px){
  article.siteIntro > p{
    font-size: 18px; line-height: 25px;
  }

  .areaIntro > p{
    font-size: 16px; line-height: 20px;
  }
  article.eventLocation > p,
  article.contentText > p{
    font-size: 16px; line-height: 25px;
  }
}

/*  =========================================================
article list
========================================================= */
.contentText li {
  background: url("projects/nts/images/objects/listStrarGreen.svg") no-repeat scroll 0 4px / 19px 19px rgba(255, 255, 255, 0);
  box-sizing: border-box;
  color: #2a3841;
  font: 400 20px/25px 'Aleo';
  margin-bottom: 20px;
  overflow: hidden;
  padding-left: 25px;
  text-overflow: ellipsis;
}
.noscriptPagination {
  text-align: center;
}

/*  =========================================================
webcam article
========================================================= */
@media screen{
  article.webcam > img{
    padding-bottom: 25px;
    max-width: 97.916%/*1175/1200*/
  }
}
@media screen and (max-width: 600px){
  article.webcam > img{
    object-fit: cover;
    width: 100%;
  }
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage listelement and text styles
 * @author     bruetsch
 * @since      01.07.2014
 * @version    $Id$
 **/

/*  =========================================================
basisliste
basisliste - listelement starrating
bestOf liste
columned liste
trustyou
========================================================== */


/*  =========================================================
basisliste
========================================================= */
@media screen {

  .listelement {
    height: auto;
    margin-bottom: 100px;
  }

  .listelement > .listelementImage {
    width: 32.34%/*380/1175*/;
    margin-right: 2.042%;
    display: inline-block;
  }

  .listelement > .listelementImage > .image > a{ text-decoration: none;}
  .listelement > .listelementImage > .image > a img {width: 100%; height: auto;}

  .listelement > .listelementImage > .image > .badge {
    height: auto;
    left: -40px;
    position: absolute;
    bottom: -10px;
    width: 125px;
    z-index: 1;
  }

  .listelement > .listelementImage > .image > .badge.imageBadge {
    left: -145px;
    bottom: -170px;
    position: absolute;
    transform: scale(0.25); -webkit-transform: scale(0.25); -moz-transform: scale(0.25); -ms-transform: scale(0.25); -o-transform: scale(0.25);
    z-index: 1;
  }

  .listelement > .listelementImage > .image > .info {
    background: transparent url('projects/nts/images/badges/ribbonLose.svg') 0px 0px no-repeat;
    background-size: cover;
    height: 72px;
    left: -20px;
    position: absolute;
    top: -5px;
    width: 150px;
    z-index: 1;
  }

  .listelement > .listelementImage > .image > .info > p {
    color: #fff;
    font-family: 'Lobster';
    font-style: normal;
    font-weight: 400;
    padding-left: 30px;
    transform: rotate(-12.3deg); -webkit-transform: rotate(-12.3deg); -moz-transform: rotate(-12.3deg); -ms-transform: rotate(-12.3deg); -o-transform: rotate(-12.3deg);
  }

  .listelement > .listelementImage > .image > .info > .price {
    font-size: 25px;
    margin: 20px 0 0;
  }

  .listelement > .listelementImage > .image > .info > .date {
    font-size: 14px;
    line-height: 1.14em;
    margin: 14px 0 0;
    padding-top: 8px;
  }

  .listelement > .listelementImage > .image > .info > .date > strong {
    -moz-font-feature-settings: inherit;
    -moz-font-language-override: inherit;
    font-family: inherit;
    font-size: 20px;
    font-size-adjust: inherit;
    font-stretch: inherit;
    font-style: inherit;
    font-variant: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding-left: 3px;
  }

  .listelement > .listelementText {
    width: 64.583%/*775/1200*/;
    display: inline-block;
    vertical-align: top;
    position: relative;
  }

  .listelement > .listelementText > h2 {
    font: 400 normal 40px 'Lobster'; color: #5e666b;
    margin: 0px 0px 5px 0px;
  }
  .listelement > .listelementText > h2 > a {
    text-decoration: none;
  }

  .listelement > .listelementText > h2 > .info {
    height: 16px;
    width: 105px;
    display: inline-block;
  }

  .listelement > .listelementText > h4 {
    font: 400 normal 20px 'Lobster'; color: #2a3841;
    margin: 0px 0px 10px 0px;
  }

  .listelement > .listelementText > p {
    font: 400 normal 18px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px 0px 20px 0px;
    line-height: 30px;
  }

  .listelement > .listelementText > p.author {
    margin: 0px 0px 5px 0px;
    font-weight: bold;
  }

  .listelement > .listelementText > .buttonspacing {margin-left: 2%;}

  .listelement > .listelementText > .listelementTrustscore {
    position: absolute;
    top: 85px; right: 0px;
  }

  .listelement > .listelementText .hasTrustScore {padding-right: 185px;}

  .listelement > .listelementTrustscore > a > .trustScore {margin: 35px 0px 0px 5%;}
  .listelement.g-element-4 > .listelementImage,
  .listelement.g-element-4 > .listelementText {
    width: 100%;
    margin-right: 0%;
  }

  .listelement.g-element-4 > .listelementText > p {
    margin-bottom: 10px;
  }

  .listelement.g-element-4 > .listelementButtons {
    width: 100%;
    margin-right: 0%;
    display: inline-block;
  }

  .listelement.g-element-4 > .listelementButtons > span {
    display: block;
  }

  .listelement.g-element-4 > .listelementButtons > span > label.button {
    background: #2a3841;
    border: 1px solid #fff;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font: 400 20px "Lobster";
    height: 50px;
    max-width: 100%;
    overflow: hidden;
    padding: 10px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .listelement.g-element-4 > .listelementButtons > span .icon-checkmark {
    color: #2a3841;
    font-size: 32px;
    margin-left: 0px;
    margin-right: 5px;
    padding-right: 10px; margin-right: 10px;
    border-right: 1px rgba(255, 255, 255, 0.5) solid !important;
  }

  .listelement.g-element-4 > .listelementButtons > span > input[type=checkbox]:checked + label > [class^='icon-'] {
    color: #fff;
  }

  .listelement.g-element-4 > .listelementButtons > a {
    font: 400 15px "Aleo",Arial,sans-serif;
    display: block;
    margin-bottom: 10px;
  }

  .listelement.g-element-4 > .listelementButtons > a:last-of-type {
    margin-bottom: 20px;
  }
  .listelement.g-element-4 {
    min-height: 630px;
    margin-bottom: 0;
  }

  body.loading > section:not([id=siteHeader]):not([id=siteFooter]){
    opacity: 0.5;
  }
}

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

  .listelement > .listelementImage {
    margin-right: 3.9%;
    margin-bottom: 15px;
    width: 100%;
  }

  .listelement > .listelementImage > .image > .badge.imageBadge {
    position: absolute;
    left: -130px; bottom: -170px;
    transform: scale(0.25); -webkit-transform: scale(0.25); -moz-transform: scale(0.25); -ms-transform: scale(0.25); -o-transform: scale(0.25);
    z-index: 1;
  }

  .listelementSpacing {margin-top: 0px;}

  .listelement > .listelementText {
    width: 100%;
    vertical-align: top;
    margin-bottom: 15px;
  }

  .listelement > .listelementText > .buttonspacing {margin: 5px 0px 0px 0%;}

  .listelement > .listelementImage > .image > .info.noImage{
    display: none;
  }
  .listelement > .listelementImage > .image > .info > .date {
    font-size: 13px;
    line-height: 1em;
    margin: 14px 0 0;
    padding-top: 8px;
  }

  .listelement > .listelementImage > .image > .info > .date > strong {
    -moz-font-feature-settings: inherit;
    -moz-font-language-override: inherit;
    font-family: inherit;
    font-size: 18px;
    font-size-adjust: inherit;
    font-stretch: inherit;
    font-style: inherit;
    font-variant: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding-left: 0;
  }

  .listelement > .listelementText > p {
    font: 400 normal 18px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px 0px 10px 0px;
    line-height: 30px;
  }

  .listelement > .listelementText > .listelementTrustscore {
    position: absolute;
    top: 0px; right: 0px;
    transform: scale(0.6); -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6);
    transform-origin: top; -webkit-transform-origin: top; -moz-transform-origin: top; -ms-transform-origin: top; -o-transform-origin: top;
    margin-right: -34px;
  }

  .listelement > .listelementText .hasTrustScore {padding-right: 120px;}

  .listelement > .listelementText > p {padding-right: 0px!important;}
  .listelement > .listelementText p.hasTrustScore{ padding-top: 10px;}

}

@media screen and (max-width: 900px){
  .listelement.g-element-md-6:nth-of-type(2n+1){ clear: both;}
}

@media screen and (max-width: 890px){
  .listelement > .listelementImage > .image > .badge {
    position: absolute;
    bottom: -10px;
    left: -30px;
    height: auto;
    width: 100px;
    z-index: 1;
  }

  .listelement > .listelementImage > .image > .info {
    background: url("styles/components/portal/assets/projects/nts/images//badges/ribbonLose.svg") no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
    position: absolute;
    left: -15px;
    top: -5px;
    height: 65px;
    width: 135px;
    z-index: 1;
  }
}


@media screen and (max-width: 420px){
  .listelement {
    height: auto;
    margin-bottom: 50px;}

  .listelement > .listelementImage {
    margin-right: 3.9%;
    width: 100%;
    margin: 45px 3.9% 15px 0px;
  }

  .listelement > .listelementImage > .image > .badge {
    height: auto;
    left: -30px;
    position: absolute;
    bottom: -10px;
    width: 95px;
    z-index: 1;
  }

  .listelement > .listelementImage > .image > .badge.imageBadge {
    left: -130px;
    bottom: -170px;
    position: absolute;
    transform: scale(0.25); -webkit-transform: scale(0.25); -moz-transform: scale(0.25); -ms-transform: scale(0.25); -o-transform: scale(0.25);
    z-index: 1;
  }


  .listelement > .listelementImage > .image > .info {
    background: url("projects/nts/images/badges/ribbonLose.svg") no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
    height: 56px;
    left: -14px;
    position: absolute;
    top: -5px;
    width: 120px;
    z-index: 1;
  }

  .listelement > .listelementImage > .image > .info > p {
    color: #fff;
    font-family: 'Lobster';
    font-style: normal;
    font-weight: 400;
    padding-left: 30px;
    transform: rotate(-12.3deg); -webkit-transform: rotate(-12.3deg); -moz-transform: rotate(-12.3deg); -ms-transform: rotate(-12.3deg); -o-transform: rotate(-12.3deg);
  }

  .listelement > .listelementImage > .image > .info > .price {
    font-size: 20px;
    margin: 16px 0 0;
  }

  .listelement > .listelementImage > .image > .info > .date {
    font-size: 12px;
    line-height: 1.0em;
    margin: 7px 0 0;
    padding-top: 10px;
  }

  .listelement > .listelementImage > .image > .info > .date > strong {
    -moz-font-feature-settings: inherit;
    -moz-font-language-override: inherit;
    font-family: inherit;
    font-size: 16px;
    font-size-adjust: inherit;
    font-stretch: inherit;
    font-style: inherit;
    font-variant: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding-left: 1px;
  }

  .listelement > .listelementText > h2 {
    font: 400 normal 30px 'Lobster'; color: #5e666b;
    margin: 0px 0px 5px 0px;
  }

  .listelement > .listelementText > h3 {
    font: 600 italic 16px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px 0px 0px 0px;
  }

  .listelement > .listelementText > h4 {
    font: 400 normal 16px 'Lobster'; color: #2a3841;
    margin: 0px 0px 10px 0px;
  }

  .listelement > .listelementText > p {
    font: 400 normal 16px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px 0px 10px 0px;
    line-height: 30px;
  }

  .listelement > .listelementText > .buttonspacing {
    margin-left: 0%;
    margin-top: 10px;
  }

  .listelement > .listelementTrustscore > a > .trustScore {margin: 35px 0px 0px 0%;}
}

/*  =========================================================
  basisliste - listelement starrating
  ========================================================= */
@media screen{
  .listelement > .listelementText > h2 > .info > .stars {
    background: url("projects/nts/images//objects/hotelstars.svg") no-repeat scroll 0 0 / cover transparent;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin: 10px 3px 0px 0px;
  }

  .listelement > .listelementText > h2 > .info > .stars--five {width: 100%;}

  .listelement > .listelementText > h2 > .info > .stars--four {width: 80%;}

  .listelement > .listelementText > h2 > .info > .stars--three {width: 60%;}

  .listelement > .listelementText > h2 > .info > .stars--two {width: 40%;}

  .listelement > .listelementText > h2 > .info > .stars--one {width: 20%;}

  .listelement > .listelementText > h2 > .info > .stars--zero {width: 0%;}

  .listelement > .listelementText > h3 {
    font: 600 italic 18px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px 0px 0px 0px;
  }

  .listelement > .listelementText > h3 > .info {
    height: 8px; width: 54px;
    margin-left: 3px;
    display: inline-block;
  }

  .listelement > .listelementText > h3 > .info > .stars {
    background: url("projects/nts/images/objects/hotelstars.svg") no-repeat scroll 0 0 / cover transparent;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin: 3px 3px 0px 0px;
  }

  .listelement > .listelementText > h3 > .info > .stars--five {width: 100%;}

  .listelement > .listelementText > h3 > .info > .stars--four {width: 80%;}

  .listelement > .listelementText > h3 > .info > .stars--three {width: 60%;}

  .listelement > .listelementText > h3 > .info > .stars--two {width: 40%;}

  .listelement > .listelementText > h3 > .info > .stars--one {width: 20%;}

  .listelement > .listelementText > h3 > .info > .stars--zero {width: 0%;}
}

.listelement .listelementText button.button {vertical-align: top;}

/*  =========================================================
bestOf liste
========================================================= */
/*basic styling*/
@media screen {
  .bestOfList .bestOfListElement{
    margin-bottom: 30px; border: 1px #517068 solid;
    background: #fff;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
  }
  #mapInfoBoard .bestOfList .bestOfListElement{
    border: 0;
  }
}

/*listelement head*/
@media screen {
  .bestOfList .bestOfListElement > .headline{
    background: rgba(42, 56, 65, 0.1);
    text-decoration: none;
    display: block; position: relative;
    text-align: left;
  }
  .bestOfList .bestOfListElement > .headline > .number{
    display: block;
    position: absolute; top: 0px; left: 0px;
    font: 400 normal 40px 'Lobster'; color: #fff;
    text-align: center;
    width: 55px; height: 100%;
    background: #cfb589;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
  }
  .bestOfList .bestOfListElement > .headline > .title{
    display: block; position: relative;
    font: 400 normal 30px/45px 'Lobster'; color: #5e666b;
    margin: 0px; padding: 5px 0px 5px 75px;
  }
  .bestOfList .bestOfListElement > .headline > .title.noLeftPadding {
    padding-left: 5px;
  }
  .bestOfList .bestOfListElement > .headline > .corner{
    background: #2a3841;
    width: 30px; height: 30px; display: none;
    position: absolute; right: -13px; top: 10px;
    transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);
  }
}
@media screen and (max-width: 600px){
  .bestOfList .bestOfListElement > .headline > .number{
    font-size: 30px; line-height: 45px;
    width: 45px;
  }
  .bestOfList .bestOfListElement > .headline > .title{
    font-size: 30px; line-height: 35px;
    padding-left: 60px;
  }
}

/*listelement body*/
@media screen {
  .bestOfList .bestOfListElement > .body{
    background: #fff;
    display: none;
  }
  .bestOfList .bestOfListElement > .body > .image{
    width: 100%;
  }
  .bestOfList .bestOfListElement > .body > .image img{
    width: 100%; height: auto;
  }
  .bestOfList .bestOfListElement > .body > .image > .button3d,
  .bestOfList .bestOfListElement > .body > .image > .button{
    position: absolute; bottom: 5px; z-index: 1;
  }
  .bestOfList .bestOfListElement > .body > .image > .buttonLink{ right: 5px;}
  .bestOfList .bestOfListElement > .body > .image > .buttonMap{ left: 5px; display: none;}
  .bestOfList .bestOfListElement > .body > p{
    font: 400 normal 20px/25px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px; padding: 5px 20px;
  }
}
@media screen and (max-width: 600px){
  .bestOfList .bestOfListElement > .body > p{
    font-size: 18px; line-height: 22px;
  }
}

/*active style changes*/
@media screen {
  .bestOfList .bestOfListElement > input[type=radio]:checked ~ .headline{
    background: #2a3841;
  }
  .bestOfList .bestOfListElement > input[type=radio]:checked ~ .headline > .title{
    color: #fff;
  }
  .bestOfList .bestOfListElement > input[type=radio]:checked ~ .body{
    display: block;
  }

  .bestOfList .bestOfListElement > input[type=radio]:checked ~ .headline > .corner{
    display: block;
  }
}
/*map styling*/
@media screen {
  .bestOfMap ~ .button {
    position: absolute; right: 15px; bottom: 15px; z-index: 100;
  }
  .bestOfList .bestOfMap{
    width: 100%; height: 645px; overflow: hidden;
    background: #d7d2ca;
    position: relative;
  }
  .bestOfList .bestOfMap > div[id^='bestOfMap']{
    width: 100%; height: 100%; overflow: hidden;
  }
}
@media screen and (max-width: 900px){
  .bestOfList .bestOfMap{
    height: 500px;
    padding-top: 100px;
  }
  .bestOfList .bestOfListElement{ margin-bottom: 20px;}
  .bestOfList .bestOfListElement > .headline > .corner{ display: none!important;}
  .bestOfList .bestOfListElement > .body > .image > .buttonMap{ display: block;}
}
@media screen and (max-width: 600px){
  .bestOfList .bestOfMap{
    height: 300px;
    padding-top: 75px;
  }
}

/*  =========================================================
columned list
========================================================= */
@media screen {
  .columnedList ul {
    padding: 0px; margin: 0px;
    list-style-type: none;
  }

  section.colored .columnedList li {
    font: 400 normal 20px/25px 'Aleo'; color: #fff;
    margin-bottom: 20px;
    box-sizing: border-box;
    background: url('projects/nts/images/objects/litstar.svg') 0px 4px no-repeat;
    background-size: 19px 19px;
    padding-left: 25px;
    overflow: hidden; text-overflow: ellipsis;
  }

  section.colored .columnedList li p {
    margin: 0;
  }

  .columnedList .buttonArea{
    margin-top: 50px;
    text-align: center;
  }
}
@media screen and (max-width: 600px){
  .columnedList li{ font-size: 16px;}
}

@media screen and (min-width: 901px){
  .columnedList li.g-element-3:not(.g-offset-1):nth-of-type(4n+1){ clear: both;}
  .columnedList li.g-element-3.g-offset-1:nth-of-type(3n+1){ clear: both;}
}
@media screen and (max-width: 900px){
  .columnedList li.g-element-3:not(.g-offset-1):nth-of-type(2n+1){ clear: both;}
  .columnedList li.g-element-3.g-offset-1:nth-of-type(2n+1){ clear: both;}
}

/*  =========================================================
trustyou
========================================================= */
@media screen {

  .no-js #trustYouContainer {
    display: none !important;
  }

  .trustYouColor {
    color: #5e666b!important;
  }

  .trustYouCustom.leftElement {
    height: 600px!important;
  }

  .trustYouCustom.leftElement li {
    background: url("projects/nts/images/objects/listStrarGreen.svg") no-repeat scroll 0 4px / 19px 19px rgba(0, 0, 0, 0)!important;
  }

  .trustYouCustom > .text > h3:first-of-type {
    background: none repeat scroll 0 0 rgba(165, 170, 174, 0.3);
  }

  .teaser-text.trustYouCustom > .text > h4 {
    font: 400 normal 25px 'Lobster'; color: white;
    margin: 30px 0px 10px 0px;
  }

  .trustYouCustom .rating {
    font-size: 25px!important;
    display: inline-block;
    margin: 10px 0px 0px 0px!important;
  }

  .trustYouCustom .ratingGraphContainer {
    display: block;
    width: 100%; height: 13px;
    background-color: #e5e5e5;
    padding-left: 1%;
    padding-top: 2px;
  }

  .trustYouCustom .ratingGraphElement {
    display: inline-block;
    width: 9%; height: 11px;
    margin-right: 1%;
    background-color: #25a21c;
  }

  .trustYouCustom .ratingGraphElement:last-of-type {
    margin-right: 0%;
  }

  .trustYouCustom .overallRating {
    display: inline-block;
    font: 400 normal 14px 'Aleo'; color: #5e666b;
    padding-left: 5px;
    width: 65%;
    vertical-align: bottom;
  }

  .trustYouCustom .overallRating .ratingOf {
    display: inline-block;
    padding: 0px 5px;
    margin-bottom: 0px!important;
  }

  .trustYouCustom .overallRating .trustyouRating {
    margin: 0px 0px 10px 0px!important;
  }
  .trustYouCustom .overallRating a {
    padding: 0;
    color: #5e666b!important;
    text-decoration: none;
    font-size: 14px;
  }
  .trustYouCustom .overallRating a:before {
    display: none;
  }

  .trustYouCustom .ratingText {
    margin: 0px 0px 10px 0px!important;
    color: #5e666b!important;
    font-size: 22px !important;
  }
  .trustYouCustom .overallRating p.rating:first-of-type {
    font-size: 40px !important;
  }

  .trustYouCustom .trustYouListElement {
    border-bottom: 1px solid #5e666b;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }

  .trustYouCustom .trustYouListElement:last-of-type {
    border-bottom: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }

  .trustYouCustom .trustYouListElement p {
    display: inline-block;
    font: 400 normal 20px 'Aleo'; color: #5e666b;
    margin: 0px;
  }

  .trustYouCustom .trustYouListElement .score {
    width: 20%;
    display: inline-block;
    vertical-align: top;
  }

  .trustYouCustom .trustYouListElement .firstScore {
    font: 400 normal 40px 'Aleo'; color: #5e666b;
  }
  .trustYouCustom .trustYouListElement .count{
    font-size: 1.5em;
  }

  .trustYouCustom .trustYouListElement .customerRating {
    width: 75%;
    display: inline-block;
    vertical-align: top;
  }

  .trustYouCustom .trustYouListElement .customerRating .customerData {
    font-size: 14px;
    margin: 0px 0px 10px 0px;
  }
  .trustYouCustom .trustYouListElement .customerRating a {
    font: 400 normal 14px 'Aleo'; color: #5e666b;
    margin-top: 10px;;
    display: block;
  }

  .trustYouCustom .trustYouListElement .customerRating h2 {
    color: #5e666b;
    font: 400 40px "Lobster";
    margin: 0 0 5px;
  }

}

@media screen and (max-width: 1160px) {
  .trustYouCustom.leftElement {
    height: 680px!important;
  }
}

@media screen and (max-width: 320px) {
  .trustYouCustom .trustYouListElement .firstScore {
    font: 400 normal 25px 'Aleo'; color: #5e666b;
  }
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage various teaser styles
 * @author     gueldner
 * @since      23.06.2014
 * @version    $Id$
 **/

/*  =========================================================
teaser-image
teaser-fullWidth
teaser-roomSearch
teaser-text
teaser-map
tour-map
picto-teaser
========================================================== */


/*  =========================================================
teaser-image
========================================================= */
/*basic styling*/
@media screen {

  .teaser-image{
    margin-bottom: 2.083%;
    position: relative;
  }
  .video > .badge,
  .teaser-image > .badge{
    height: auto;
    position: absolute; z-index: 1;
  }
  .video > .badge:not(.badge--videoButton),
  .teaser-image > .badge:not(.badge--videoButton){
    width: 1000px;
    left: -75px; top: -15px;
    transform: scale(0.25); -moz-transform: scale(0.25); -webkit-transform: scale(0.25); -ms-transform: scale(0.25);
    transform-origin: top left; -moz-transform-origin: top left; -webkit-transform-origin: top left; -ms-transform-origin: top left;
  }
  .video > .badge.badge--videoButton,
  .teaser-image > .badge.badge--videoButton{
    width: 100%; height: 100%;
    text-align: center;
    left: 0px; top: 0px;
    transform-origin: center; -moz-transform-origin: center; -webkit-transform-origin: center; -ms-transform-origin: center;
    transition: transform 0.5s ease-in-out; -moz-transition: -moz-transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out;
  }
  .video > .badge.badge--videoButton > img,
  .teaser-image > .badge.badge--videoButton > img{
    width: 53.333% /*200/375*/;
    max-width: 300px; margin: 0px auto;
    display: inline-block; vertical-align: middle;
  }
  .video > a:hover ~ .badge.badge--videoButton,
  .teaser-image > a:hover ~ .badge.badge--videoButton{
    transform: scale(1.25); -moz-transform: scale(1.25); -webkit-transform: scale(1.25); -ms-transform: scale(1.25);
  }
  .teaser-image > .info{
    width: 150px; height: 72px;
    position: absolute; left: -20px; top: -5px;
    background: url('projects/nts/images/badges/ribbonLose.svg') 0px 0px no-repeat;
    background-size: cover;
    z-index: 1;
  }
  .teaser-image > .info > p{
    font-weight: 400; font-style: normal;
    font-family: 'Lobster'; color: #fff;
    padding-left: 30px;
    transform: rotate(-12.3deg); -moz-transform: rotate(-12.3deg); -webkit-transform: rotate(-12.3deg); -ms-transform: rotate(-12.3deg);
  }
  .teaser-image > .info > .price{
    font-size: 25px; margin: 20px 0px 0px 0px;
  }
  .teaser-image > .info > .date{
    font-size: 14px; line-height: 1.14em;
    padding-top: 8px; margin: 14px 0px 0px 0px;
  }
  .teaser-image > .info > .date > strong{
    font: inherit; font-size: 20px; padding-left: 3px;
  }
  .teaser-image > .info > .stars{
    background: transparent url('projects/nts/images/badges/ribbon-stars.svg') 0px 0px no-repeat;
    background-size: cover; height: 100%;
  }
  .teaser-image > .info > .stars--one{ width: 33.3%;}
  .teaser-image > .info > .stars--two{ width: 50%;}
  .teaser-image > .info > .stars--three{ width: 66.6%;}
  .teaser-image > .info > .stars--four{ width: 80%;}
  .teaser-image > .info > .stars--five{ width: 100%;}
  .teaser-image a{ z-index: 2;}
}
@media screen and (max-width: 1025px) and (min-width: 901px), screen and (max-width: 700px) and (min-width: 601px), screen and (max-width: 400px){
  .video > .badge:not(.badge--videoButton),
  .teaser-image > .badge:not(.badge--videoButton){
    transform: scale(0.18); -moz-transform: scale(0.18); -webkit-transform: scale(0.18); -ms-transform: scale(0.18);
    left: -60px; top: -20px;
  }
  .teaser-image > .info > p{ padding-left: 20px}
  .teaser-image > .info{
    width: 100px; height: 48px;
  }
  .teaser-image > .info > .price{
    font-size: 16px; margin: 15px 0px 0px 0px;
  }
  .teaser-image > .info > .date{
    font-size: 10px;
    padding-top: 4px; margin-top: 10px;
  }
  .teaser-image > .info > .date > strong{
    font-size: 14px;
  }
}
@media screen and (max-width: 600px){
  .teaser-image{ margin-bottom: 8%;}
}

/*image styling*/
@media screen {
  .teaser-lottery > .image,
  .teaser-image > .image{
    width: 100%; height: 0px;
    display: block; overflow: hidden;
  }
  .teaser-lottery > .image img,
  .teaser-image > .image img{
    width: 100%; height: auto;
    transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1);
  }
  html.no-touch .teaser-image > .image img{ transition: transform 0.5s ease-in-out; -moz-transition: -moz-transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out;}
  /*hover states*/
  html.no-touch .teaser-image:active > .image img,
  html.no-touch .teaser-image:focus > .image img,
  html.no-touch .teaser-image:hover > .image img,
  html.no-touch .teaser-image > a:active ~ .image img,
  html.no-touch .teaser-image > a:focus ~ .image img,
  html.no-touch .teaser-image > a:hover ~ .image img{
    transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -ms-transform: scale(1.5);
  }
  /*height infos*/
  .teaser-image.g-element-3 > .image{ padding-bottom: 100%;}
  .teaser-image.g-element-6 > .image{ padding-bottom: 47.82% /*275/575*/;}
  .teaser-image.g-element-9 > .image{ padding-bottom: 31.43% /*275/875*/;}
  .teaser-image.g-element-4 > .image{ padding-bottom: 100%;}
  .teaser-image.g-element-8 > .image{ padding-bottom: 48.38% /*375/775*/;}
  .teaser-image.g-element-12 > .image{ padding-bottom: 31.91% /*375/1175*/;}

  /*title for text teaser*/
  .teaser-image > .image > .text{
    position: absolute; bottom: 0px; left: 0px;
    box-sizing: border-box; width: 100%;
    padding: 18px 75px 17px 20px;
    font: 700 italic 250%/1em 'Aleo', Arial, sans-serif; color: #fff;
    text-decoration: none;
    transition: transform 0.5s ease; -moz-transition: -moz-transform 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease;
    transform-origin: bottom; -moz-transform-origin: bottom; -webkit-transform-origin: bottom; -ms-transform-origin: bottom;
  }
  /*color stylings*/
  .teaser-image > .image > .text{ background: rgba(42, 56, 65, 0.9);}
  .teaser-image.teaser--sand > .image > .text{ background: rgba(162, 142, 106, 0.9);}
  .teaser-image.teaser--water > .image > .text{ background: rgba(99, 126, 118, 0.9);}

  /*hover states*/
  .teaser-image:active > .image > .text,
  .teaser-image:focus > .image > .text,
  .teaser-image:hover > .image > .text,
  .teaser-image > a:active ~ .image > .text,
  .teaser-image > a:focus ~ .image > .text,
  .teaser-image > a:hover ~ .image > .text{
    transform: rotate3d(1, 0, 0, 90deg); -moz-transform: rotate3d(1, 0, 0, 90deg); -webkit-transform: rotate3d(1, 0, 0, 90deg); -ms-transform: rotate3d(1, 0, 0, 90deg);
  }
}
@media screen and (max-width: 600px){
  .teaser-image > .image{ padding-bottom: 100%;}
  .teaser-image > .image > .text{ padding: 10px 75px 10px 10px;}
}

/*text overlay*/
@media screen {
  .video > .overlay,
  .teaser-image > .overlay{
    width: 100%; height: 100%;
    position: absolute; top: 0px; left: 0px;
    opacity: 0;
    text-align: center;
    transition: opacity 0.25s ease-in-out; -moz-transition: opacity 0.25s ease-in-out; -webkit-transition: opacity 0.25s ease-in-out;
  }
  .video > .overlay,
  .teaser-image > .overlay{ background: rgba(42, 56, 65, 0.9);}
  .video.teaser--sand > .overlay,
  .teaser-image.teaser--sand > .overlay{ background: rgba(207, 181, 137, 0.9);}
  .video.teaser--water > .overlay,
  .teaser-image.teaser--water > .overlay{ background: rgba(81, 112, 104, 0.9);}

  .teaser-image > .overlay > .text{
    display: inline-block; vertical-align: middle;
    padding: 10px; text-align: center;
  }
  .teaser-image > .overlay > .text > h3{
    font: 400 normal 350% 'Lobster'; color: #fff;
    margin: 0px 0px 20px 0px;
  }
  .teaser-image > .overlay > .text > p{
    font: 400 normal 200% 'Aleo', Arial, sans-serif; color: #fff;
    margin: 0px;
  }
  .teaser-image > .overlay > .text > *{
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
    transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -ms-transform: scale(0);
    transition: transform 0.5s ease-in-out; -moz-transition: -moz-transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out;
  }

  .teaser-image > .image > .button,
  .teaser-image > .button3d,
  .teaser-image > .button{
    position: absolute; bottom: 5px; right: 5px;
    z-index: 1;
  }

  /*hover states*/
  .video:active > .overlay,
  .video:focus > .overlay,
  .video:hover > .overlay,
  .teaser-image:active > .overlay,
  .teaser-image:focus > .overlay,
  .teaser-image:hover > .overlay,
  .video > a:active ~ .overlay,
  .video > a:focus ~ .overlay,
  .video > a:hover ~ .overlay,
  .teaser-image > a:active ~ .overlay,
  .teaser-image > a:focus ~ .overlay,
  .teaser-image > a:hover ~ .overlay{
    opacity: 1;
  }
  .teaser-image:active > .overlay > .text > *,
  .teaser-image:focus > .overlay > .text > *,
  .teaser-image:hover > .overlay > .text > *,
  .teaser-image > a:active ~ .overlay > .text > *,
  .teaser-image > a:focus ~ .overlay > .text > *,
  .teaser-image > a:hover ~ .overlay > .text > *{
    transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1);
  }
  /*font size settings for different g-element teaser variations*/
  .teaser-image.g-element-3,
  .teaser-image.g-element-6,
  .teaser-image.g-element-9{ font-size: 80%;}
  .teaser-image.g-element-4,
  .teaser-image.g-element-8,
  .teaser-image.g-element-12{ font-size: 100%;}
}

@media screen and (max-width: 1100px){
  .teaser-image.g-element-3 .text > p{ display: none;}
}
@media screen and (max-width: 1000px) and (min-width: 901px){
  .teaser-image.g-element-md-4,
  .teaser-image.g-element-md-8{ font-size: 65%;}
  .teaser-image.g-element-md-6,
  .teaser-image.g-element-md-12{ font-size: 75%;}
}
@media screen and (max-width: 900px){
  .teaser-image.g-element-md-4 > .image{ padding-bottom: 100%;}
  .teaser-image.g-element-md-8 > .image{ padding-bottom: 48.38% /*375/775*/;}
  .teaser-image.g-element-md-6 > .image{ padding-bottom: 100%;}
  .teaser-image.g-element-md-12 > .image{ padding-bottom: 48.38% /*375/775*/;}

  .teaser-image > .overlay > .text > p{ display: block;}

  .teaser-image.g-element-md-4,
  .teaser-image.g-element-md-8{ font-size: 75%;}
  .teaser-image.g-element-md-6,
  .teaser-image.g-element-md-12{ font-size: 100%;}
}
@media screen and (max-width: 600px){
  .teaser-image[class*='g-element'] > .image{ padding-bottom: 100%;}
}
@media screen and (max-width: 750px){
  .teaser-image.g-element-md-4 .text > p{ display: none;}
  .teaser-image.g-element-md-4,
  .teaser-image.g-element-md-8{ font-size: 65%;}
  .teaser-image.g-element-md-6,
  .teaser-image.g-element-md-12{ font-size: 75%;}
}
@media screen and (max-width: 600px){
  .teaser-image > .overlay > .text > p{ display: block;}
  .teaser-image.g-element-sm-12{ font-size: 100%;}
}
@media screen and (max-width: 400px){
  .teaser-image.g-element-sm-12{ font-size: 75%;}
}

/*  =========================================================
teaser-fullWidth
========================================================= */
/*basic styling*/
@media screen {
  .teaser-fullWidth{
    width: 100%; position: relative;
    background-position: 50% 50%;
    background-size: cover;
    min-height: 560px;
  }

  /*teaser with a top badge*/
  .teaser-fullWidth.teaser--widthBadge{ margin-top: 190px;}
  .teaser-fullWidth > .badge{
    position: absolute; top: -130px; left: 50%;
    margin-left: -500px; width: 1000px; height: auto;
    transform: scale(0.7); -moz-transform: scale(0.7); -webkit-transform: scale(0.7); -ms-transform: scale(0.7);
    transform-origin: center top; -moz-transform-origin: center top; -webkit-transform-origin: center top; -ms-transform-origin: center top;
  }

  .teaser-fullWidth > .content{ position: relative;}
}
@media screen and (max-width: 1100px){
  .teaser-fullWidth > .badge{
    transform: scale(0.6); -moz-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6);
    top: -90px;
  }
}
@media screen and (max-width: 900px){
  /*hide the badge on small screens and spare extra margin*/
  .teaser-fullWidth.teaser--widthBadge{ margin-top: 0px;}
  .teaser-fullWidth > .badge{ display: none;}
}
@media screen and (max-width: 600px){
  /*add margin to the bottom to spare place for other fullWidth teaser*/
  .teaser-fullWidth{
    padding-top: 0px; margin-bottom: 8%;
    background: none!important;
    min-height: 0px;
  }
  .teaser-fullWidth .copyright{ display: none;}
  /*change border color of buttons to background color of content*/
  .teaser-fullWidth .button{ border-color: #5e666b;}
}

/*big title*/
@media screen {
  /*big title in image*/
  .teaser-fullWidth > .content  h2{
    position: absolute; bottom: 120px; left: 2.5%;
    font: 400 normal 40px 'Lobster'; color: #fff;
    text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
    text-align: left;
  }
  .teaser-fullWidth > .content .maxiTeaserWithExtraText h2{
    bottom: initial;
    top: 60px;
  }
  .teaser-fullWidth > .content .maxiTeaserWithExtraText.right h2{
    left: initial;
    right: -10.5%;
  }
  .teaser-fullWidth > .content h2 > strong{
    font: inherit; font-size: 80px; line-height: 77px;
    display: block; margin-left: 5%;
  }
}
@media screen and (max-width: 1025px) and (min-width: 901px), screen and (max-width: 700px) and (min-width: 601px){
  /*smaller text on smaler displays*/
  .teaser-fullWidth > .content  h2{ font-size: 30px;}
  .teaser-fullWidth > .content  h2 > strong{ font-size: 60px; line-height: 55px;}
}
@media screen and (max-width: 900px){
  /*reposition title on small screens*/
  .teaser-fullWidth > .content  h2{
    position: absolute; bottom: auto; left: 2.5%; top: 0px;
  }
}
@media screen and (max-width: 600px){
  /*big title in image*/
  .teaser-fullWidth > .content  h2{
    display: none;
  }
}

/*content styles for an article*/
@media screen {
  .teaser-fullWidth article{
    padding: 0px 20px 20px 20px; margin-top: 65px;
    background: rgba(255, 255, 255, 0.9);
    position: relative;
  }
  .teaser-fullWidth article h2{
    font: 400 normal 40px 'Lobster'; color: #2a3841;
    margin: 0px 0px 15px 0px;
  }
  .teaser-fullWidth article h3{
    font: 400 normal 30px 'Lobster'; color: #2a3841;
  }
  .teaser-fullWidth article h3:first-of-type{
    font: 400 normal 40px 'Lobster'; color: #2a3841;
    padding: 10px 20px; margin: 0px -20px 20px -20px;
    background: rgba(165, 170, 174, 0.3);
  }

  .teaser-fullWidth article h4{
    font: 400 normal 25px 'Lobster'; color: #2a3841;
    margin: 30px 0px 10px 0px;
  }
  .teaser-fullWidth article h5{
    font: 600 normal 22px 'Aleo'; color: #2a3841;
    margin: 30px 0px 10px 0px;
  }
  .teaser-fullWidth article h6{
    font: 400 normal 18px 'Aleo'; color: #2a3841;
    margin: 30px 0px 10px 0px;
    text-transform: uppercase;
  }
  .teaser-fullWidth article p{
    font: 400 normal 18px/28px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px 0px 15px 0px;
  }
  .teaser-fullWidth article p.author{
    font-weight: bold;
  }
  .teaser-fullWidth article p > a{
    color: #2a3841;
  }
  .teaser-fullWidth article > .info{
    width: 150px; height: 72px;
    position: absolute; left: -20px; top: -50px;
    background: url('projects/nts/images/badges/ribbon.svg') 0px 0px no-repeat;
    background-size: cover;
    z-index: 1;
  }
  .teaser-fullWidth article > .info > p{
    font-weight: 400; font-style: normal;
    font-family: 'Lobster'; color: #fff;
    padding-left: 25px;
    transform: rotate(-12.3deg); -moz-transform: rotate(-12.3deg); -webkit-transform: rotate(-12.3deg); -ms-transform: rotate(-12.3deg);
  }
  .teaser-fullWidth article > .info > .price{
    font-size: 27px; margin: 25px 0px 0px 0px;
  }
  .teaser-fullWidth article > .info > .date{
    font-size: 14px; line-height: 1.14em;
    padding-top: 8px; margin: 17px 0px 0px 0px;
  }
  .teaser-fullWidth article > .info > .date > strong{
    font: inherit; font-size: 20px; padding-left: 3px;
  }
  .teaser-fullWidth article > .info > .stars{
    background: transparent url('projects/nts/images/badges/ribbon-stars.svg') 0px 0px no-repeat;
    background-size: cover; height: 90%; width: 90%;
    margin-top: 7px;
  }
  .teaser-fullWidth article > .info > .stars--one{ width: 30%;}
  .teaser-fullWidth article > .info > .stars--two{ width: 45%;}
  .teaser-fullWidth article > .info > .stars--three{ width: 60%;}
  .teaser-fullWidth article > .info > .stars--four{ width: 73%;}
  .teaser-fullWidth article > .info > .stars--five{ width: 90%;}
}
@media screen and (max-width: 600px){
  /*remove margins and paddings that kept article inside the teaser in position*/
  .teaser-fullWidth article{
    padding-top: 0px; margin-top: 0px;
  }
  /*text elements color set to white*/
  .teaser-fullWidth article h3,
  .teaser-fullWidth article p{ color: #fff!important;}

  .teaser-fullWidth article > .info{ display: none;}

  /*make headline and article text smaler*/
  .teaser-fullWidth article h3{ font-size: 30px}

  /*handle background colors*/
  .teaser-fullWidth article h3{ background: rgba(42, 56, 65, 0.2);}
  .teaser-fullWidth article{ background: #5e666b;}
  .teaser-fullWidth.teaser--sand article{ background: #c0a474;}
  .teaser-fullWidth.teaser--water article{ background: #8f9e9a;}
}



/*content styles for a form*/
@media screen {
  .teaser-fullWidth form{
    padding: 10px 20px 20px 20px; margin-top: 90px;
    background: rgba(255, 255, 255, 0.9);
    position: relative;
  }
  /*hostSearchMinimal margin*/
  .teaser-fullWidth form.minimal{
    margin-top: 250px;
  }
  .teaser-fullWidth form h3{
    font: 400 normal 30px 'Lobster'; color: #2a3841;
    margin: 0px 0px 10px 0px; padding: 0px 0px 5px 0px;
    border-bottom: 1px #a5aaae solid;
  }
  .teaser-fullWidth form > fieldset{
    display: block;
    padding: 0px; border: none;
  }
  .teaser-fullWidth form > fieldset:not(:last-of-type){
    border-bottom: 1px #a5aaae solid; margin-bottom: 20px;
  }
  .teaser-fullWidth form > fieldset > legend{ display: none;}

  /*div containers to structure the input fields*/
  .teaser-fullWidth form > fieldset > div{
    display: inline-block; box-sizing: border-box;
    margin-bottom: 20px;
  }
  .teaser-fullWidth form > fieldset > div.half{ width: 50%; vertical-align: top;}
  .teaser-fullWidth form > fieldset > div.half:nth-of-type(2n+1){ padding: 0px 5px 0px 0px;}
  .teaser-fullWidth form > fieldset > div.half:nth-of-type(2n){ padding: 0px 0px 0px 5px;}
  .teaser-fullWidth form > fieldset > div.full{ width: 100%;}

  .teaser-fullWidth form input[type=text]{ height: 30px;}

  /*sizes of the input fields*/
  .teaser-fullWidth form > fieldset > div > input[type='text']{ width: 100%;}
  .teaser-fullWidth form > fieldset > div > select{ width: 100%;}
  .teaser-fullWidth form > fieldset > div > select[name='adults'],
  .teaser-fullWidth form > fieldset > div > select[name='children']{ width: 75px;}
  .teaser-fullWidth form > fieldset > div > select[name^='childAge']{ width: 55px; margin-right: 5px;}

  /*faked checkbox styles*/
  .teaser-fullWidth form > fieldset > div > input.styled[type=checkbox] + label{
    font: 400 normal 16px 'Aleo', Arial, sans-serif; color: #2a3841;
    display: block; margin: 0px 0px 10px 0px; padding: 0px 0px 0px 25px;
    position: relative;
  }
  .teaser-fullWidth form > fieldset > div > input.styled[type=checkbox] + label > [class^='icon-']{ margin-left: -25px;}
  .teaser-fullWidth form > fieldset > div > input.styled[type=checkbox]:checked + label > [class^='icon-']{ color: #fff;}

  /*finaly the submit button*/
  .teaser-fullWidth form > fieldset > button{ float: right;}

}
@media screen and (max-width: 950px) and (min-width: 901px), screen and (max-width: 700px) and (min-width: 601px), screen and (max-width: 400px){
  /*wrap input fields on portrait screens*/
  .teaser-fullWidth form > fieldset > div.half{ width: 100%; padding: 0px!important;}
  .teaser--quickSearch form{
    min-height: 550px;
  }
}
@media screen and (max-width: 1100px){
  .teaser-fullWidth form{ margin-top: 0px;}
}
@media screen and (max-width: 900px){
  /*remove margins and paddings that kept form inside the teaser in position*/
  .teaser-fullWidth form{
    padding-top: 0px; margin-top: 190px;
  }
}

@media screen and (max-width: 600px){
  /*remove margins and paddings that kept form inside the teaser in position*/
  .teaser-fullWidth form{
    padding-top: 0px; margin-top: 0px;
  }
  .teaser--quickSearch form{
    min-height: 0;
  }
  /*text elements color set to white*/
  .teaser-fullWidth form h3,
  .teaser-fullWidth form label{ color: #fff!important;}

  /*reposition headline because of new background*/
  .teaser-fullWidth form h3{
    padding: 10px 20px; margin: 0px -20px 20px -20px;
    border: none;
  }

  /*handle background colors*/
  .teaser-fullWidth form h3{ background: rgba(42, 56, 65, 0.2);}
  .teaser-fullWidth form{ background: #5e666b;}
  .teaser-fullWidth.teaser--sand form{ background: #c0a474;}
  .teaser-fullWidth.teaser--water form{ background: #8f9e9a;}

  /*the bottom border of the fieldsets is now white*/
  .teaser-fullWidth form > fieldset{ border-color: #fff!important;}

  /*checkbox colors set to white*/
  .teaser-fullWidth form > fieldset > div > input.styled[type=checkbox] + label > [class^='icon-']{ border-color: #fff;}
  .teaser-fullWidth form > fieldset > div > input.styled[type=checkbox]:checked + label > [class^='icon-']{ color: #5e666b; background: #fff;}

  /*hostSearchMinimal margin*/
  .teaser-fullWidth form.minimal{
    margin-top: 0px;
  }

}

/*  =========================================================
teaser-roomSearch
========================================================= */

@media screen {
  .teaser-roomSearch form{
    padding: 10px 20px 20px 20px; margin-top: 190px;
    background: rgba(255, 255, 255, 0.9);
    position: relative;
  }
  .teaser-roomSearch form h3{
    font: 400 normal 30px 'Lobster'; color: #2a3841;
    margin: 0px 0px 10px 0px; padding: 0px 0px 5px 0px;
    border-bottom: 1px #a5aaae solid;
  }
  .teaser-roomSearch form > fieldset{
    display: block;
    padding: 0px; border: none;
  }
  .teaser-roomSearch form > fieldset:not(:last-of-type){
    border-bottom: 1px #a5aaae solid; margin-bottom: 20px;
  }
  .teaser-roomSearch form > fieldset > legend{ display: none;}

  /*div containers to structure the input fields*/
  .teaser-roomSearch form > fieldset > div{
    display: inline-block; box-sizing: border-box;
    margin-bottom: 20px;
  }
  .teaser-roomSearch form > fieldset > div.half{ width: 50%; vertical-align: top;}
  .teaser-roomSearch form > fieldset > div.half:nth-of-type(2n+1){ padding: 0px 10px 0px 0px;}
  .teaser-roomSearch form > fieldset > div.full{ width: 100%;}

  /*sizes of the input fields*/
  .teaser-roomSearch form > fieldset > div > input[type='text']{ width: 100%;}
  .teaser-roomSearch form > fieldset > div > select[name='adults'],
  .teaser-roomSearch form > fieldset > div > select[name='children']{ width: 75px;}
  .teaser-roomSearch form > fieldset > div > select[name^='childAge']{ width: 60px; margin-right: 5px;}

  /*faked checkbox styles*/
  .teaser-roomSearch form > fieldset > div > input.styled[type=checkbox] + label{
    font: 400 normal 16px 'Aleo', Arial, sans-serif; color: #fff;
    display: block; margin: 0px 0px 10px 0px; padding: 0px 0px 0px 25px;
    position: relative;
  }
  .teaser-roomSearch form > fieldset > div > input.styled[type=checkbox] + label > [class^='icon-']{ margin-left: -25px;}
  .teaser-roomSearch form > fieldset > div > input.styled[type=checkbox]:checked + label > [class^='icon-']{ color: #fff;}

  /*finaly the submit button*/
  .teaser-roomSearch form > fieldset > button{ float: right;}


  /*remove margins and paddings that kept form inside the teaser in position*/
  .teaser-roomSearch form{
    padding-top: 0px; margin-top: 0px;
  }
  /*text elements color set to white*/
  .teaser-roomSearch form h3,
  .teaser-roomSearch form label{ color: #fff;}

  .teaser-roomSearch input[type=text]{ height: 30px;}

  /*reposition headline because of new background*/
  .teaser-roomSearch form h3{
    padding: 10px 20px; margin: 0px -20px 20px -20px;
    border: none;
  }

  /*handle background colors*/
  .teaser-roomSearch form h3{ background: rgba(42, 56, 65, 0.6);}
  .teaser-roomSearch form{ background: #5e666b;}
  .teaser-roomSearch.teaser--sand form{ background: #c0a474;}
  .teaser-roomSearch.teaser--water form{ background: #8f9e9a;}

  /*the bottom border of the fieldsets is now white*/
  .teaser-roomSearch form > fieldset {
    border:none;
  }

  /*checkbox colors set to white*/
  .teaser-roomSearch form > fieldset > div > input.styled[type=checkbox] + label > [class^='icon-']{ border-color: #fff;}
  .teaser-roomSearch form > fieldset > div > input.styled[type=checkbox]:checked + label > [class^='icon-']{ color: #5e666b; background: #fff;}
}

@media screen and (max-width: 900px){
  .teaser-roomSearch form{ margin-bottom: 20px;}
}

@media screen and (max-width: 1025px) and (min-width: 901px), screen and (max-width: 700px) and (min-width: 601px), screen and (max-width: 400px){
  /*wrap input fields on portrait screens*/
  .teaser-roomSearch form > fieldset > div.half{ width: 100%; padding: 0px!important;}
}

/*  =========================================================
teaser-text
========================================================= */
/*basic styling*/
@media screen {
  .teaser-text{
    margin-bottom: 2.083%; padding-bottom: 80px;
    position: relative;
  }
  .teaser-text > .button{
    position: absolute; top: 5px; right: 5px; z-index: 1;
  }
  .teaser-text > .badge{
    width: 110px; height: 80px;
    position: absolute; right: -5px; bottom: -20px;
    z-index: 1;
  }

  .teaser-text > .text{ padding: 0px 20px;}
  .teaser-text > .text > h2{
    font: 400 normal 40px 'Lobster'; color: white;
    margin: 0px 0px 15px 0px;
  }

  .teaser-text > .text > h3{
    color: white;
    font: 400 30px 'Lobster';
    margin: 0 0 10px;
  }
  .teaser-text > .text > h3:first-of-type{
    font: 700 italic 25px/1em 'Aleo', Arial, sans-serif;
    background: rgba(42, 56, 65, 0.2); color: #fff;
    padding: 20px 75px 17px 20px; margin: 0px -20px 20px -20px;
  }
  .teaser-text > .text > h3 > a{
    text-decoration: none;
    display: block;
  }
  .teaser-text > .text > h4{
    font: 400 normal 18px/28px 'Lobster'; color: white;
    margin: 0px 0px 15px 0px;
  }
  .teaser-text > .text > h5{
    color: #fff;
    font: 700 18px/28px 'Aleo',Arial,sans-serif;
    margin: 0 0 15px;
  }
  .teaser-text > .text > h6,
  .teaser-text > .text > p{
    font: 400 normal 18px/28px 'Aleo', Arial, sans-serif; color: #fff;
    margin: 0px 0px 15px 0px;
  }
  .teaser-text > .text > .bold{
    font: 600 normal 18px/28px 'Aleo', Arial, sans-serif; color: #fff;
    margin: 0px 0px 15px 0px;
  }
  .teaser-text > .text > .italic{
    font: 400 italic 18px/28px 'Aleo', Arial, sans-serif; color: #fff;
    margin: 0px 0px 15px 0px;
  }
  .teaser-text > .text  > ul {
    padding: 0px;
    list-style-type: none;
    margin-bottom: 50px;
  }

  .teaser-text > .text  > ul > li {
    background: url('projects/nts/images/objects/litstar.svg') 0px 4px no-repeat;
    background-size: 19px 19px;
    padding-left: 25px;
    font: 400 normal 20px 'Aleo', Arial, sans-serif; color: #fff;
    margin-bottom: 25px;
  }
  .teaser-text > .text  > p > a {
    color: #2a3841;
  }
  /*handle background colors*/
  .teaser-text{ background: #5e666b;}
  .teaser-text.teaser--sand{ background: #c0a474;}
  .teaser-text.teaser--water{ background: #8f9e9a;}
  .teaser-text.teaser--white{ background: #fff; }
}
@media screen and (max-width: 800px){
  .teaser-text > .badge{
    width: 150px;
    right: -40px; bottom: -20px;
  }
}
@media screen and (max-width: 600px){
  .teaser-text{ margin-bottom: 8%;}
}

/*  =========================================================
teaser-map
========================================================= */
@media screen {
  .teaser-map{
    width: 100%; height: 400px;
    position: relative;
  }
  .teaser-map img {
    position: absolute; top: 0; left: 50%;
    margin-left: -300px;
  }
  [class*='g-element-'] > .teaser-map{
    margin-bottom: 2.083%;
  }
  .teaser-map > [id^='teaserMap']{
    width: 100%; height: 100%;
    position: absolute; top: 0px; left: 0px;
  }
  .teaser-map > .button{
    position: absolute; bottom: 15px; right: 5px;
  }
  .teaser-map > div {
  }
  .teaser-map > div > div {
    background-size: cover; background-position: center;
    height: 400px;
  }
}
@media screen and (min-width: 600px){
  .teaser-map img {
    margin-left: -450px;
  }
}
@media screen and (min-width: 900px){
  .teaser-map img {
    margin-left: -1000px;
  }
}

/*  =========================================================
tour-map
========================================================= */
@media screen {
  .content-map {
    width: 100%; height: auto;
    position: relative;
  }

  .content-map > div{
    width: 100%; height: 740px; margin-bottom: 100px;
  }

  .content-map > .button{
    position: absolute; bottom: 15px; right: 5px;
  }

}

/*  =========================================================
pressarea
========================================================= */

@media screen {

  .teaser-press {
    height: 550px;
    padding-bottom: 0px;
  }

  .teaser-press .iconArea {
    box-sizing: border-box;
    font-size: 38px;
    height: 100%;
    left: 0;
    padding: 10px;
    position: absolute;
    top: 0;
  }

  .teaser-press .iconArea.blog {background: #cb280c;}

  .teaser-press .iconArea.icon-blog {
    background: #2a3841;
    padding: 2px 0 0 0;
    font-size: 58px;
  }

  .teaser-press .iconArea.twitter {background: #00acee;}

  .teaser-press .iconArea.facebook {background: #326a9a;}

  .teaser-press .iconArea.youtube {background: #e62f29;}

  .teaser-press .iconArea.google {background: #dd4c39;}

  .teaser-press > .text {padding: 0px;}

  .teaser-press > .text > h3 {
    padding-left: 70px !important;
    position: relative;
    margin: 0px !important;
    background: rgba(42, 56, 65, 0.5) !important;
  }

  .teaser-press .newsArticle {
    margin-top: 40px;
  }

  .teaser-press .newsArticle:first-of-type {
    margin-top: 10px;
  }

  .teaser-press .newsArticle:last-of-type {
    margin-bottom: 40px;;
  }

  .teaser-press .newsArea {
    overflow-y: auto; overflow-x: hidden;
    padding: 0 6%;
    height: 479px;
    word-wrap: break-word;
    background: rgba(42, 56, 65, 0.2);
  }

  .teaser-press .newsArea > a {
    text-decoration: none;
  }

  .teaser-press .newsArea > .newsArticle > a > img {
    height: auto; width: 100%;
  }

  .teaser-press h4 {
    margin-top: 5px !important;
    font: 600 normal 20px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 10px 0px 0px 0px;
    display: block;
  }

  .teaser-press h4 > a.twitter {
    text-decoration: underline;
  }

  .teaser-press .newsArea a {
    text-decoration: none;
  }

  .teaser-press .newsArea .regularText {
    font: 300 normal 20px 'Aleo', Arial, sans-serif; color: #2a3841;
    display: block;
    margin: 10px 0px 0px 0px;
  }

  .teaser-press .newsArea .regularText > a {
    font: 300 normal 20px 'Aleo', Arial, sans-serif; color: #2a3841; text-decoration: underline;
  }

  .teaser-press .newsArea .information {
    font: 400 normal 14px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 10px 0px 0px 0px;
    display: block;
  }

  .teaser-press .text > a.twitter {
    font: 600 normal 20px 'Aleo', Arial, sans-serif; color: #2a3841;
    text-decoration: underline;
  }

  .teaser-press a.readMore{
    text-decoration: none;
    padding-top: 10px;
    display: block;
    font: 600 normal 20px 'Aleo', Arial, sans-serif; color: #2a3841;
  }

  .teaser-press .facebookArticle {
    position: relative;
    margin-top: 10px;

  }
  .teaser-press .facebookArticle > a {
    text-decoration: none;
  }

  .teaser-press .facebookArticle > a > img {
    height: auto; width: 100%;
  }

  .teaser-press .socialMediaStats {
    float: right;
    margin-top: 5px;
  }

  .teaser-press .socialMediaStats > a {
    text-decoration: none;
  }

  .teaser-press .likes:before {
    content: url('projects/nts/images/objects/fbThumb.svg');
    height:20px; width:20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
  }

  .teaser-press .likes {
    font: 400 normal 20px 'Aleo', Arial, sans-serif; color: #2a3841;
    vertical-align: top;
    margin-right: 20px;
  }

  .teaser-press .comments:before {
    content: url('projects/nts/images/objects/fbSpeech.svg');
    height:20px; width:20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
  }

  .teaser-press .comments {
    font: 400 normal 20px 'Aleo', Arial, sans-serif; color: #2a3841;
    vertical-align: top;
  }

  .teaser-press .author {
    font: 400 normal 14px 'Aleo', Arial, sans-serif; color: #2a3841;
  }

  .teaser-press .googleplusHeadline {
    margin-bottom: 15px !important;
  }

  .teaser-press .authorMargin {
    margin: 5px 0px 0px 0px
  }
  .teaser-press.teaser-text.teaser--water {
    background: none repeat scroll 0 0 #fff;
  }

}

@media screen and (max-width: 1175px){
  .teaser-text > .text > h3 > a {
    font-size: 16px;
  }
}

@media screen and (max-width: 900px){
  .teaser-text > .text > h3 > a {
    font-size: 25px;
  }
}

@media screen and (max-width: 725px){
  .teaser-text > .text > h3 > a {
    font-size: 16px;
  }
}

@media screen and (max-width: 600px){
  .teaser-press {
    height: auto;
    padding-bottom: 0px;
  }
  .teaser-press .newsArea {
    overflow-y: visible;
    padding: 0 6%;
    height: auto;
  }
  .teaser-text > .text > h3 > a {
    font-size: 25px;
  }
  .teaser-press .newsArticle:last-of-type {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 380px){
  .teaser-text > .text > h3 > a {
    font-size: 16px;
  }
}

/*  =========================================================
picto-teaser
========================================================= */
@media screen {
  .pictoTeaser {
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 100;
    background-color: #2a3841;
    width: 360px;
    min-height: 120px;
    color: #fff;
    font: 300 15px "Aleo",Arial,sans-serif;
    padding: 65px 20px 50px 20px;
  }

  .pictoTeaser .badge {
    left: -471px;
    min-height: 80px;
    min-width: 80px;
    position: absolute;
    top: -169px;
    transform: scale(0.3);
    z-index: 150;
  }

  .pictoTeaser .badge image {
    transform: scale(3.3);
  }

  .pictoTeaser .close {
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .pictoTeaser .button {
    background: #ffffff none repeat scroll 0 0;
    color: #2a3841;
    position: absolute;
    bottom: 5px;
    right: 5px;
  }

  .pictoTeaser .button--rightText > [class^="icon-"] {
    border-left: 1px solid rgba(42, 56, 65, 0.5);
  }

  .pictoTeaser.closed {
    padding: 0;
    height: 0;
    width: 0;
  }

  .pictoTeaser.closed .badge {
    left: -620px;
    top: -160px;
  }

  .pictoTeaser.closed .hideable {
    display: none;
  }

}

@media screen and (max-width: 1000px){
  .pictoTeaser {
    display: none;
  }
}

/*  =========================================================
teaser-lottery
========================================================= */
/* basic styling */
@media screen {
  .teaser-lottery{
    margin-bottom: 2.083%;
    position: relative;
  }
}
/* add larger bottom margin for smaller screens */
@media screen and (max-width: 600px){
  .teaser-lottery{ margin-bottom: 8%;}
}

/* image styling */
@media screen {
  .teaser-lottery > .image{
    width: 100%; height: 0px;
    display: block; overflow: hidden;
  }
  .teaser-lottery > .image > img{
    width: 100%; height: auto;
    transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1);
  }
}
/* image height infos */
@media screen {
  .teaser-lottery.g-element-3 > .image{ padding-bottom: 100%;}
  .teaser-lottery.g-element-6 > .image{ padding-bottom: 47.82% /*275/575*/;}
  .teaser-lottery.g-element-9 > .image{ padding-bottom: 31.43% /*275/875*/;}
  .teaser-lottery.g-element-4 > .image{ padding-bottom: 100%;}
  .teaser-lottery.g-element-8 > .image{ padding-bottom: 48.38% /*375/775*/;}
  .teaser-lottery.g-element-12 > .image{ padding-bottom: 31.91% /*375/1175*/;}
}
@media screen and (max-width: 900px){
  .teaser-lottery.g-element-md-4 > .image{ padding-bottom: 100%;}
  .teaser-lottery.g-element-md-8 > .image{ padding-bottom: 48.38% /*375/775*/;}
  .teaser-lottery.g-element-md-6 > .image{ padding-bottom: 100%;}
  .teaser-lottery.g-element-md-12 > .image{ padding-bottom: 48.38% /*375/775*/;}
}
@media screen and (max-width: 600px){
  .teaser-lottery > .image{ padding-bottom: 100%;}
}
/* image caption */
@media screen {
  .teaser-lottery > .image > .text{
    position: absolute; bottom: 0px; left: 0px;
    box-sizing: border-box; width: 100%;
    padding: 18px 75px 17px 20px;
    font: 700 italic 250%/1em 'Aleo', Arial, sans-serif; color: #fff;
    text-decoration: none;
  }
  /*color stylings*/
  .teaser-lottery > .image > .text{ background: rgba(42, 56, 65, 0.9);}
  .teaser-lottery.teaser--sand > .image > .text{ background: rgba(162, 142, 106, 0.9);}
  .teaser-lottery.teaser--water > .image > .text{ background: rgba(99, 126, 118, 0.9);}
}
@media screen and (max-width: 600px){
  .teaser-lottery > .image > .text{ padding: 10px 75px 10px 10px;}
}

/* text/button area */
@media screen {
  .teaser-lottery__text{
    display: block; position: relative; box-sizing: border-box;
    min-height: 150px; margin: 0px 10px; padding: 10px 10px 65px 10px;
    background: #d4bc94;
  }

  .teaser-lottery__text > p{
    font: 400 normal 18px/24px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px;
  }
}
/* button */
@media screen {
  .teaser-lottery__text > .button{
    position: absolute; left: 10px; bottom: 10px; padding: 10px!important;
    border-color: #d4bc94;

    transition: background 0.25s ease; -moz-transition: background 0.25s ease; -webkit-transition: background 0.25s ease;
  }
  .teaser-lottery__text > [type=radio]:not(:checked) + .button{
    background: #9d8f73;
  }
}
/* checkmark in button */
@media screen {
  .teaser-lottery__text > [type=radio] + .button > [class*='icon-']{
    font-size: 32px!important;
    margin: 0px 10px 0px -58px!important; padding: 0px 10px 0px 0px!important;
    border-right: 1px solid rgba(255, 255, 255, 0.5)!important; color: #fff!important;

    transition: margin 0.25s ease; -moz-transition: margin 0.25s ease; -webkit-transition: margin 0.25s ease;
  }
  .teaser-lottery__text > [type=radio]:checked + .button > [class*='icon-']{
    margin-left: 0px!important;
  }
}
/* text in button */
@media screen {
  .teaser-lottery__text > [type=radio]:checked + .button > .text-inactive{
    display: none;
  }
  .teaser-lottery__text > [type=radio]:not(:checked) + .button > .text-active{
    display: none;
  }
}


/* font size settings for different g-element teaser variations */
@media screen {
  .teaser-lottery.g-element-3,
  .teaser-lottery.g-element-6,
  .teaser-lottery.g-element-9{ font-size: 80%;}
  .teaser-lottery.g-element-4,
  .teaser-lottery.g-element-8,
  .teaser-lottery.g-element-12{ font-size: 100%;}
}
@media screen and (max-width: 1000px) and (min-width: 901px){
  .teaser-lottery.g-element-md-4,
  .teaser-lottery.g-element-md-8{ font-size: 65%;}
  .teaser-lottery.g-element-md-6,
  .teaser-lottery.g-element-md-12{ font-size: 75%;}
}
@media screen and (max-width: 900px){
  .teaser-lottery.g-element-md-4,
  .teaser-lottery.g-element-md-8{ font-size: 75%;}
  .teaser-lottery.g-element-md-6,
  .teaser-lottery.g-element-md-12{ font-size: 100%;}
}
@media screen and (max-width: 750px){
  .teaser-lottery.g-element-md-4,
  .teaser-lottery.g-element-md-8{ font-size: 65%;}
  .teaser-lottery.g-element-md-6,
  .teaser-lottery.g-element-md-12{ font-size: 75%;}
}
@media screen and (max-width: 600px){
  .teaser-lottery.g-element-sm-12{ font-size: 100%;}
}
@media screen and (max-width: 400px){
  .teaser-lottery.g-element-sm-12{ font-size: 75%;}
}.blog--bright-sand {
  background-color: #f5ebdb;
}

#blogkeyvisual {
  margin-bottom: 0;
  min-height: 690px;
}

#blogkeyvisual + #breadcrumb{
  position: absolute; top: 0px; left: 0px; z-index: 2;
  background: rgba(81, 112, 104, 0.8);
}

#blogkeyvisual > .content article {
  margin-top: 150px;
  margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
  #blogkeyvisual {
    min-height: 0;
  }
  #blogkeyvisual > .content article {
    margin-top: 85px;
    margin-bottom: 0px;
  }
}

.blogCategoryList .areaIntro h2 {
  text-align: center;
}

.blogArticle .siteIntro img {
  border-radius: 50%;
  border-color: #c8ac7c;
  border-width: 2px;
  border-style: solid;
}

.blogLinkBox article {
  margin: 20px 0;
}

.blogLinkBox h2 {
  font: 400 normal 250% 'Lobster';
  color: #2A3841;
}

.blogLinkBox ul {
  padding-left: 0px;
}

.blogLinkBox a {
  font: italic 400 200%/1em "Aleo",Arial,sans-serif;
  color: #2A3841;
  text-decoration: none;
  line-height: 200%;
}

.blogLinkBox .blogLinkBoxArchive a::before,
.blogLinkBox .blogLinkBoxCategories a::before {
  width: 20px;
  height: 100%;
  display: inline-block;
  font: 400 16px 'icomoon';
  text-transform: none;
  color: #C8AC7C;
  content: '\e602';
  margin-left: 0px;
}

.blogLinkBox li {
  display: block;
}

.blogLinkBox .blogLinkBoxArchive ul {
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  column-count: 2;
  column-gap: 10px;
}

.tagcloud {
  background: #FFFFFF;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

.tagcloud .weight-1 {
  font-size: 150%;
}

.tagcloud .weight-1 .tagspacer {
  vertical-align: -4px;
}

.tagcloud .weight-2 {
  font-size: 200%;
  vertical-align: -2px;
}

.tagcloud .weight-2 .tagspacer {
  vertical-align: -2px;
}

.tagcloud .weight-3 {
  font-size: 250%;
  vertical-align: -4px;
}

.tagcloud .tagspacer {
  font-size: 25px;
}

.tagcloud a {
  line-height: 35px;
  white-space: nowrap;
}

.blog-taglist {
  font: 400 normal 100% 'Lobster';
  text-align: center;
}

.blog-taglist > .text {
  padding: 20px;
}

.blog-taglist .prefix {
  font: 400 normal 350% 'Lobster';
  margin-right: 20px;
  color: #2A3841;
}

.blog-taglist .links {
  font: 400 normal 250% 'Lobster';
  text-decoration: none;
  color: #2A3841;
}

.blog-authorinfo h2 {
  font: 400 normal 50px/55px 'Lobster';
  color: #2a3841;
  text-align: center;
}

.blog-authorinfo p {
  font: 400 normal 18px/30px 'Aleo',Arial,sans-serif;
  color: #2a3841;
}

.blog-authorleadarticle p {
  font: 400 normal 18px/30px 'Aleo',Arial,sans-serif;
  color: #2a3841;
  text-align: center;
}

.blogBadgeAuthor {
  position: relative;
  height: 195px;
}

.blogBadgeAuthor img {
  border-radius: 50%;
  border-color: #c8ac7c;
  border-width: 2px;
  border-style: solid;
  display: block;
  margin: auto;
}

.blogBadgeAuthor svg {
  position: absolute;
  bottom: 0;
  left: calc(50% - 123px);
}


.blogBadgeAuthor svg .dynamicText>text {
  text-shadow: 2px 2px 0 rgba(0,0,0,.5);
  font-family: 'Lobster';
}

@media screen and (max-width: 900px) {
  .blog-authorinfo .g-element-4 {
    width: 100%;
  }
  .blog-authorinfo .g-element-4 .blogBadgeAuthor {
    margin: 0 auto;
  }
}

.blogAuthorListHeadline {
  margin-bottom: -80px;
}

.blogAuthorListHeadline h2 {
  font: 400 normal 50px/55px 'Lobster';
  color: #2A3841;
}

@media screen and (max-width: 900px) {
  .blogAuthorListHeadline .g-element-4 {
    width: 0;
  }
  .blogAuthorListHeadline .g-element-8 {
    width: 100%;
  }
  .blogAuthorListHeadline h2 {
    text-align: center;
  }
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      03.03.2016
 * @version    $Id: _init.css 1265 2016-05-12 12:47:47Z mueller $
 **/

/*  =========================================================
frame
opener
========================================================== */


/*  =========================================================
frame
========================================================= */
@media screen {
  #offCanvas{
    position: fixed; z-index: 55;
    left: 0px; bottom: 0px;
  }
}
@media screen and (min-width: 1001px){ #offCanvas{ top: 85px;}}
@media screen and (max-width: 1000px){ #offCanvas{ top: 75px;}}
@media screen and (max-width: 775px){ #offCanvas{ top: 50px;}}

@media screen {
  #offCanvas > [type='radio']{
    position: absolute; top: 0px; left: -20px; opacity: 0;
  }
}

@media screen {
  .offCanvas__content{
    position: absolute; top: 0px; left: 0px; bottom: 0px;
    box-sizing: border-box;
    background: #f5ebdb;
    border-right: 1px #a5aaae solid;

    transition: transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
  }

  #offCanvas > [type='radio']:not(:checked) + div{
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
@media screen and (min-width: 601px){
  .offCanvas__content{
    width: 415px; padding: 20px 35px;
  }
}
@media screen and (max-width: 600px){
  .offCanvas__content{
    width: 300px; padding: 15px 20px;
  }
}

/*  =========================================================
opener/closer
========================================================= */
@media screen {
  .opener-offCanvas{
    position: absolute; z-index: 2;
    top: 0px; left: 0px;
    display: block;
    padding: 10px 1.25em;
    font: 400 normal 16px/18px 'Aleo', Arial, sans-serif; text-align: center;
    color: #fff; background: #5e005e;
  }
  .map-offCanvas-opener > .opener-offCanvas{
    top: 190px !important;
    z-index: 54;
  }
}

@media screen {
  #offCanvas > label{
    position: absolute;
    display: block;
    padding: 10px 1.25em;
    color: #2a3841; background: #f5ebdb;

    transition: top 0.5s ease;
    -webkit-transition: top 0.5s ease;
  }

  #offCanvas [type='radio']:not(:checked) + label{ top: 0px;}
}
@media screen and (min-width: 601px){ #offCanvas > label{ left: 415px;}}
@media screen and (max-width: 600px){ #offCanvas > label{ left: 300px;}}

@media screen and (min-width: 1001px){ #offCanvas [type='radio']:checked + label{ top: -170px;}}
@media screen and (max-width: 1000px){ #offCanvas [type='radio']:checked + label{ top: -158px;}}
@media screen and (max-width: 775px){ #offCanvas [type='radio']:checked + label{ top: -100px;}}

@media screen and (min-width: 1001px){
  #offCanvas > label,
  .opener-offCanvas{ height: 65px;}

  #offCanvas > label > [class*='icon-'],
  .opener-offCanvas > [class*='icon-']{ font-size: 50px;}

  #offCanvas > label > [class*='icon-']{ line-height: 65px;}
}
@media screen and (max-width: 1000px){
  #offCanvas > label,
  .opener-offCanvas{ height: 55px;}

  #offCanvas > label > [class*='icon-'],
  .opener-offCanvas > [class*='icon-']{ font-size: 40px;}

  #offCanvas > label > [class*='icon-']{ line-height: 55px;}
}
@media screen and (max-width: 775px){
  #offCanvas > label,
  .opener-offCanvas{ height: 30px;}

  .opener-offCanvas{ font-size: 10px; line-height: 12px;}

  #offCanvas > label > [class*='icon-'],
  .opener-offCanvas > [class*='icon-']{ font-size: 20px;}

  #offCanvas > label > [class*='icon-']{ line-height: 30px;}
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      03.03.2016
 * @version    $Id: offCanvas.filter.css 1177 2016-04-21 12:15:27Z mueller $
 **/

/*  =========================================================
general structure
checkbox section
input section
========================================================== */


/*  =========================================================
general structure
========================================================= */
@media screen {
  .offCanvas__filter{
    text-align: left;
    position: relative;
  }

  .offCanvas__filter:not(:last-of-type){ border-bottom: 1px rgba(42, 56, 65, 0.3) solid;}
}

/* label and checkbox for hidding/showing section */
@media screen {
  .offCanvas__filter > [type='checkbox']{
    position: absolute; top: 0px; left: 0px;
    opacity: 0;
  }
  .offCanvas__filter > label{
    font: 700 normal 20px 'Aleo', Arial, sans-serif; color: #2a3841;
    display: block; padding: 15px 0px;
  }
  .offCanvas__filter > label:after{
    width: 20px; display: inline-block;
    font: 400 normal 16px 'icomoon'; font-variant: normal; text-transform: none;
    color: #c8ac7c;
    transition: transform 0.25s ease; -moz-transition: -moz-transform 0.25s ease; -webkit-transition: -webkit-transform 0.25s ease;
    margin-left: 10px;
  }

  .offCanvas__filter > [type='checkbox']:not(:checked) + label:after{ content: '\e600';}
  .offCanvas__filter > [type='checkbox']:checked + label:after{ content: '\e603';}
}
@media screen and (max-width: 600px){
  .offCanvas__filter > label{ font-size: 16px;}
}

/*  =========================================================
checkbox section
========================================================= */
/* general styling */
@media screen {
  .offCanvas__filter__checkbox{
    position: relative;
    margin-bottom: 20px;
  }
}

/* show hide section */
@media screen {
  .offCanvas__filter > [type='checkbox']:not(:checked) ~ .offCanvas__filter__checkbox{
    display: none;
  }

  .offCanvas__filter > [type='checkbox']:checked ~ .offCanvas__filter__checkbox{
    display: block;
  }
}

/* input styling */
@media screen {
  .offCanvas__filter__checkbox > [type='checkbox']{
    position: absolute; top: 0px; left: 0px;
    opacity: 0; display: none;
  }
}

/*label styling*/
@media screen {
  .offCanvas__filter__checkbox > label{
    padding: 0px 0px 0px 30px; display: block; margin-bottom: 10px;
    font: 400 normal 16px 'Aleo', Arial, sans-serif; color: #2a3841;
  }

  .offCanvas__filter__checkbox > label:before{
    content: '\e605';
    display: inline-block; vertical-align: baseline;
    margin: 0px 10px 0px -30px;
    width: 14px; height: 14px;
    border: 3px #8f918e solid;
    font: 400 normal 14px/14px 'icomoon'; color: #f5ebdb;
  }

  .offCanvas__filter__checkbox > [type*='checkbox']:not(:checked) + label:before{
    background: #f5ebdb;
  }
  .offCanvas__filter__checkbox > [type*='checkbox']:checked + label:before{
    background: #8f918e;
  }
}

@media screen {
  .offCanvas__filter__checkbox > label > span{
    font: 400 italic 12px 'Aleo', Arial, sans-serif;
    float: right; margin-top: 3px;
  }
}

/*  =========================================================
input section
========================================================= */
@media screen {
  .offCanvas__filter__input{
    margin-bottom: 30px; margin-top: 20px;
    display: flex;
  }

  .offCanvas__filter__input > div{ flex: 1 1;}
  .offCanvas__filter__input > div:not(:last-child){ margin-right: 10px;}
  .offCanvas__filter__input input.default{
    height: 30px; width: 100%; display: block;
  }

  input[name="dateTo"].alignLeft + .picker{
    left: 0;
  }
}

/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage header styles
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id$
 **/

/*  =========================================================
basic config
functions
statics
offCanvas navi
offCanvas filter and forms
offCanvas autocomplete
offCanvas mapInfoBoard
scrolldown arrow
request offer form
========================================================== */


/*  =========================================================
basic config
========================================================= */
@media screen {
  #siteHeader{
    width: 100%; height: 85px;
    background: #2a3841;
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.3);
    position: fixed; top: 0px; left: 0px; z-index: 60;
    transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px);
  }

  /*general offCanvas Styles*/
  .siteHeader__offCanvas{
    position: absolute; left: 0; top: 100%;
    width: 100%; display: none;
    background: #f5ebdb;
    box-sizing: border-box;
  }

  input:checked ~ .siteHeader__offCanvas,
  *.active > .siteHeader__offCanvas{
    display: block;
  }
}

@media screen and (max-width: 1000px){
  #siteHeader{ height: 75px;}
}


@media screen and (max-width: 775px){
  #siteHeader{
    height: 50px;
  }
}

@media screen and (max-width: 450px){
  #siteHeader{
    position: relative;
    padding-top: 50px; margin-top: -100px;
  }
  #siteHeader.fixed{
    position: fixed;
    margin-top: -50px;
  }
}

/*  =========================================================
functions
========================================================= */
@media screen {
  #siteHeader__functions{
    float: left;
  }
  #siteHeader__functions > ul{
    padding: 0px; margin: 0px;
    list-style: none;
  }
  #siteHeader__functions > ul > li{
    display: inline-block;
    vertical-align: top;
  }
  #siteHeader__functions > ul > li > .siteHeader__function{
    cursor: pointer; display: block;
    height: 65px; padding: 10px 20px;
    text-decoration: none; color: #fff;
    transition: background 0.5s ease; -moz-transition: background 0.5s ease; -webkit-transition: background 0.5s ease;
  }
  #siteHeader__functions > ul > li:not(:first-of-type) > .siteHeader__function > .verticalAlignMiddle{
    border-left: 1px rgba(255, 255, 255, 0.2) solid;
    margin: 0px 20px 0px -20px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > span{
    display: inline-block; vertical-align: middle;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > span .map-close{
    display: block; font-size:15px;
  }

  #siteHeader__functions > ul > li > .siteHeader__function > :not([class]){
    font: 700 normal 25px/40px 'Aleo', Arial, sans-serif;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > [class^='icon-']{ font-size: 50px;}

  /*hover states*/
  #siteHeader__functions > ul > li > input:active + label.siteHeader__function,
  #siteHeader__functions > ul > li > input:focus + label.siteHeader__function,
  #siteHeader__functions > ul > li > input:hover + label.siteHeader__function,
  #siteHeader__functions > ul > li > a.siteHeader__function:active,
  #siteHeader__functions > ul > li > a.siteHeader__function:focus,
  #siteHeader__functions > ul > li > a.siteHeader__function:hover{
    background: rgba(245, 235, 219, 0.5);
  }
  #siteHeader__functions > ul > li > input:checked + .siteHeader__function{
    background: #f5ebdb!important; color: #2a3841;
  }
  #siteHeader__functions > ul > li > input:checked + .siteHeader__function > [class^='icon-']:before{ content: '\e606';}
}

@media screen and (max-width: 1000px){
  #siteHeader__functions > ul > li > .siteHeader__function{
    height: 55px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > :not([class]){ font-size: 20px; line-height: 25px;}
  #siteHeader__functions > ul > li > .siteHeader__function > [class^='icon-']{ font-size: 40px;}
}

@media screen and (max-width: 775px){
  #siteHeader__functions > ul > li > .siteHeader__function{
    height: 40px; padding: 5px 10px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > :not([class]){ display: none;}
  #siteHeader__functions > ul > li > .siteHeader__function > [class^='icon-']{ font-size: 30px;}

  #siteHeader__functions > ul > li:not(:first-of-type) > .siteHeader__function > .verticalAlignMiddle{
    margin: 0px 10px 0px -10px;
  }
}

/*  =========================================================
statics
========================================================= */
@media screen {
  #siteHeader__statics{
    float: right;
  }
  #siteHeader__statics > a.logo{
    height: 39px; margin: 10px 0px; padding: 13px 25px;
    text-decoration: none;
    display: inline-block; vertical-align: top;
    border-left: 1px rgba(255, 255, 255, 0.2) solid;
  }
  #siteHeader__statics > a.logo > img{
    width: auto; height: 100%;
    display: inline-block; vertical-align: middle;
  }

  #siteHeader__fulltextsearch{
    display: inline-block; vertical-align: middle;
    height: 100%; padding: 0px;
  }

  #siteHeader__fulltextsearch > form{
    height: 40px; padding: 23px 25px 22px 25px;
  }
  #siteHeader__fulltextsearch > form:hover{ background: #f5ebdb;}

  #siteHeader__fulltextsearch > form > input{
    box-sizing: border-box;
    width: 225px; height: 100%;
    padding: 0px 50px 0px 10px; border: none;
    font: 700 italic 20px 'Aleo', Arial, sans-serif;
    background: #fff; color: #2a3841;
    border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35); -moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
    vertical-align: middle;
  }
  #siteHeader__fulltextsearch > form > button{
    border: none; background: none;
    height: 100%;
    vertical-align: middle;
    width: 50px; margin-left: -50px;
  }
  #siteHeader__fulltextsearch > form > button > span{
    font-size: 35px; color: #2a3841;
  }
  /*hide button in desktop screen*/
  #siteHeader__fulltextsearch > [for='siteHeader__statics__search']{
    display: none; color: #fff;
  }

  /*hover states*/
  #siteHeader__statics__search:active + label,
  #siteHeader__statics__search:focus + label,
  #siteHeader__statics__search:hover + label{
    background: rgba(245, 235, 219, 0.5);
  }
  #siteHeader__statics__search:checked + label{
    background: #f5ebdb; color: #2a3841;
  }
}

@media screen and (max-width: 1000px){
  #siteHeader__statics > a.logo{ height: 29px;}

  #siteHeader__fulltextsearch > form{
    position: absolute; left: 0; top: 100%;
    width: 90%; padding: 20px 5%;
    background: #f5ebdb;
    display: none;
  }
  #siteHeader__statics__search:checked ~ form{
    display: flex;
  }
  #siteHeader__fulltextsearch > form > input{
    width: 100%;
  }

  #siteHeader__fulltextsearch > [for='siteHeader__statics__search']{
    display: block;
    height: 55px; padding: 10px 20px;
  }
  #siteHeader__fulltextsearch > [for='siteHeader__statics__search'] > [class^='icon-']{
    display: inline-block; vertical-align: middle;
    font-size: 40px;
  }
}

@media screen and (max-width: 775px){
  #siteHeader__statics > a.logo{
    margin: 5px 0px; height: 24px; padding: 8px 15px;
  }

  #siteHeader__fulltextsearch > [for='siteHeader__statics__search']{
    height: 40px; padding: 5px 10px;
  }
  #siteHeader__fulltextsearch > [for='siteHeader__statics__search'] > [class^='icon-']{ font-size: 30px;}
}

@media screen and (max-width: 450px){
  #siteHeader__statics{
    float: left;
    border-left: 1px rgba(255, 255, 255, 0.2) solid;
  }


  #siteHeader__statics > a.logo{
    position: absolute; top: 0px; left: 0px;
    padding: 8px 0px 10px 0px; margin: 0px; border: none;
    width: 100%; height: 32px;
    background: rgba(0, 0, 0, 0.1);
  }
}

/*  =========================================================
offCanvas navi
========================================================= */
@media screen {
  #mainNavi{
    padding: 30px 0px;
    text-align: left;
    overflow-y: auto!important;
  }
  #mainNavi a{ text-decoration: none;}
  #mainNavi ul{ list-style: none;}

  .mainNavi__firstLayer{ padding: 0px; overflow: hidden;}
  .mainNavi__firstLayer > li > a{
    font: 400 normal 30px 'Lobster'; color: #2a3841;
    display: block;
    padding: 10px 0px;
  }

  .mainNavi__secondLayer{
    padding: 0px; margin-bottom: 20px;
  }
  .mainNavi__secondLayer > li{
    border-top: 1px rgba(42, 56, 65, 0.3) solid;
  }
  .mainNavi__secondLayer > li > a::before{
    width: 20px; height: 100%; display: inline-block;
    font: 400 normal 16px 'icomoon'; font-variant: normal; text-transform: none;
    color: #c8ac7c;
    content: '\e602';
    transition: transform 0.25s ease; -moz-transition: -moz-transform 0.25s ease; -webkit-transition: -webkit-transform 0.25s ease;
    margin-left: -20px;
  }
  .mainNavi__secondLayer > li > a{
    font: 400 italic 20px 'Aleo', Arial, sans-serif; color: #2a3841;
    display: block; padding: 15px 0px 15px 20px;
  }

  .mainNavi__thirdLayer{
    padding-left: 20px; margin-left: 20px;
    max-height: 0px; overflow: hidden;
    transition: max-height 1s linear; -moz-transition: max-height 1s linear; -webkit-transition: max-height 1s linear;
  }
  .mainNavi__thirdLayer > li{
    border-top: 1px rgba(42, 56, 65, 0.3) solid;
  }
  .mainNavi__thirdLayer > li:first-of-type{
    margin-left: -20px; padding-left: 20px;
  }
  .mainNavi__thirdLayer > li > a{
    display: block; padding: 10px 0px;
    font: 300 italic 16px 'Aleo', Arial, sans-serif; color: #5e666b;
  }

  .mainNavi__secondLayer > li > input{
    opacity: 0;
    display: none;
  }
}
@media screen and (min-width: 901px){
  /*hover states*/
  .no-touch .mainNavi__secondLayer > li > a:active::before,
  .no-touch .mainNavi__secondLayer > li > a:focus::before,
  .no-touch .mainNavi__secondLayer > li:hover > a::before,
  .no-touch .mainNavi__secondLayer > li.active > a::before{
    transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg);
  }

  .no-touch .mainNavi__secondLayer > li > a:active ~ ul,
  .no-touch .mainNavi__secondLayer > li > a:focus ~ ul,
  .no-touch .mainNavi__secondLayer > li:hover > ul,
  .no-touch .mainNavi__secondLayer > li.active > ul{
    max-height: 1000px;
  }
}

@media screen {
  #mainNavi.mobile .mainNavi__secondLayer > li > label::before{
    width: 17px; height: 100%; display: inline-block;
    font: 400 normal 16px 'icomoon'; font-variant: normal; text-transform: none;
    color: #c8ac7c;
    content: '\e602';
    transition: transform 0.25s ease; -moz-transition: -moz-transform 0.25s ease; -webkit-transition: -webkit-transform 0.25s ease;
    margin-left: -20px;
    vertical-align: top;
    margin-top: 15px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a {
    padding-left: 0px;
    display: inline-block;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a::before{
    display: none;
  }
  #mainNavi.mobile{ padding: 0px;}
  #mainNavi.mobile .mainNavi__secondLayer > li{ margin-left: 20px;}
  #mainNavi.mobile .mainNavi__secondLayer > li > a{ padding-left: 0px;}
  #mainNavi.mobile .mainNavi__secondLayer > li:first-of-type{
    margin-left: 0px; padding-left: 20px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a{
    display: inline-block;
    width: 98%;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a::before{
    display: none;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > input[type=checkbox]:checked ~ ul{
    max-height: 1000px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li >  input[type=checkbox]:checked + label:before{
    transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg);
  }
  #mainNavi.mobile .mainNavi__firstLayer > li:not(:first-of-type){
    border-top: 1px rgba(42, 56, 65, 0.3) solid;
  }
  footer.offCanvas--open,
  section.offCanvas--open{
    display: none;
  }
  body.offCanvas--open{
    background: #f5ebdb;
  }
}
@media screen and (max-width: 900px){
  #mainNavi.mobile{ padding: 0px; padding-bottom: 50px;}
}

/*  =========================================================
offCanvas filter and forms
========================================================= */
@media screen {
  /*basic frame styles*/
  form.siteHeader__offCanvas{ text-align: left;}
  form.siteHeader__offCanvas > fieldset{
    display: block;
    padding: 10px 20px 0px 20px; border: none;
  }
  form.siteHeader__offCanvas > fieldset:not(:last-of-type){
    border-bottom: 1px #ccc7bc solid;
  }
  /*form.siteHeader__offCanvas > fieldset.filterDropDowns{ padding-right: 120px;}*/
  form.siteHeader__offCanvas > fieldset > legend{ display: none;}

  form.siteHeader__offCanvas > fieldset > div,
  form.siteHeader__offCanvas > fieldset > div > div{
    display: inline-block;
    margin-right: 10px; margin-bottom: 10px;
  }
  form.siteHeader__offCanvas > fieldset > div.border{
    margin-left: 10px; padding-left: 20px;
    border-left: 1px #ccc7bc solid;
  }
  form.siteHeader__offCanvas > fieldset > span:not(.button){
    display: inline-block; vertical-align: middle;
    margin: 10px 30px 10px 0px;
  }

  form.siteHeader__offCanvas label{ color: #2a3841;}
  form.siteHeader__offCanvas input[type=text]{ height: 30px;}
  form.siteHeader__offCanvas input[type=text].healthfinderFulltext {
    width: 450px;
  }
  form.siteHeader__offCanvas input[type=text].healthfinderLocation {
    width: 207px;
  }

  form.siteHeader__offCanvas > fieldset > div > div > input[type=text].calendar{ width: 165px;}
  #siteHeader__hostSearch__city{ width: 315px; }
  #siteHeader__hostSearch__persons,
  #siteHeader__hostSearch__children{ width: 85px;}
  #siteHeader__hostSearch select[name^='childrenAge']{ width: 60px; margin-right: 5px;}
  #siteHeader__filter__priceFrom, #siteHeader__filter__priceTo{ width: 115px;}

  form.siteHeader__offCanvas > fieldset > span > input.styled[type=checkbox]:checked + label > [class^='icon-']{
    color: #f5ebdb;
  }

  /*faked dropdown inputs*/
  form.siteHeader__offCanvas > fieldset > .fakeInput{
    height: 28px; padding: 7px 10px 0px; border: none; margin: 5px 10px 10px 0px;
    cursor: pointer;
    position: relative;

    background: #fff; color: #2a3841;
    border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput.active{
    margin: 0px 5px -20px -5px;
    border: 5px #fcf7ef solid; border-bottom-width: 20px;
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35), 2px 2px 1px rgba(0, 0, 0, 0.3);
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > label{
    font: 700 normal 18px 'Aleo', Arial, sans-serif;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > label > [class^='icon-']{
    font-size: 14px;
    border: 3px #bdb29d solid; margin-left: 5px;
    color: #fff; background: #bdb29d;
    display: inline-block;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > input[type=checkbox]:checked + label > [class^='icon-']{
    transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);
  }

  form.siteHeader__offCanvas > fieldset > .fakeInput > div{
    padding: 12px 20px 10px 10px;
    width: 250px;
    display: none;
    background: #fcf7ef;
    position: absolute; left: -5px; top: 40px; z-index: 1;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > input[type=checkbox]:checked ~ div{
    display: block;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label{
    font: 400 normal 16px 'Aleo', Arial, sans-serif; color: #2a3841;
    display: block; margin: 0px 0px 10px 0px; padding: 0px 30px 0px 25px;
    position: relative;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label.count-0 {
    opacity: 0.33;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label > [class^='icon-']{ margin-left: -25px;}
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > input[type=checkbox]:checked + label > [class^='icon-']{ color: #fcf7ef;}
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label > .hits{
    font: 400 italic 12px 'Aleo', Arial, sans-serif; color: #2a3841; text-align: right;
    position: absolute; top: 3px; right: 0px;
  }

  /* quick search*/
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div,
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div{
    width: 100%;
    margin-left: 0px;
    padding-left: 0px;
    padding-top: 10px;
    border-left: none;
  }
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div > div.half.dateFrom,
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div > div.half.dateFrom{
    padding-right: 14px;
  }
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div > div.half,
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div > div.half{
    width: 45%
  }
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div.adults,
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div.children,
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div.adults,
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div.children{
    width: 25%;
    padding-right: 20px;
  }
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div.children-dependant > select,
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div.children-dependant > select{
    padding-right: 10px;
  }
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div.children-dependant > select:not(:last-of-type),
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div.children-dependant > select:not(:last-of-type){
    margin-right: 18px;
  }
  li.aroundMe,
  li.quickSearch{
    width: 92px;
  }

  /*button styles*/
  form.siteHeader__offCanvas .button{
    border-color: #f5ebdb;
    float: right; margin-top: 10px; margin-bottom: 10px;
  }
}
@media screen and (max-width: 775px){
  li.aroundMe,
  li.quickSearch{
    width: 51px;
  }
}
@media screen and (min-width: 451px){
  li.aroundMe > form.siteHeader__offCanvas,
  li.quickSearch > form.siteHeader__offCanvas{
    position: relative;
    width: 385px;
  }
}
@media screen and (max-width: 400px){
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div > div.half,
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div > div.half{
    width: 100%
  }
  form.siteHeader__offCanvas > fieldset > div > div{
    display: block;
  }
  form.siteHeader__offCanvas > fieldset > div > div > input[type=text].calendar {
    width: 100%;
  }
}

@media screen and (max-width: 1000px){
  form.siteHeader__offCanvas > fieldset > div.border{
    margin-left: 0px; padding-left: 0px;
    border-left: none;
  }
}

@media screen and (max-width: 600px){
  form.siteHeader__offCanvas > fieldset > div:not([class*='fakeInput']){ width: 100%;}
  form.siteHeader__offCanvas > fieldset > div > input[type=text]{ width: 100%!important;}

  form.siteHeader__offCanvas > fieldset > .fakeInput > label{ font-size: 14px;}
  form.siteHeader__offCanvas > fieldset > .fakeInput > div{ width: 200px;}
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label > .hits{ display: none;}
}

/*  =========================================================
offCanvas autocomplete
========================================================= */
@media screen {
  #siteHeader__fulltextsearch > form:hover #siteHeader__fulltextsearch__autocomplete{
    display: block;
  }
  #siteHeader__fulltextsearch__autocomplete{ text-align: left;}
  #siteHeader__fulltextsearch__autocomplete h3,
  .item.type-title h3 {
    font: 400 normal 30px 'Lobster'; color: #2a3841;
    margin: 20px 0px 15px 0px;
  }
  #siteHeader__fulltextsearch__searchword_autocomplete > .content > .g-grid-12 > ul.g-element-4 {
    float:right;
    padding-left: 0;
    margin-right: 20px;
  }
  /*autocomplete teaser*/
  .item.type-event,
  .item.type-offer { margin-bottom: 25px;}
  .item.type-event > .image,
  .item.type-offer > .image{
    width: 34.66% /*130/375*/; height: 0px; overflow: hidden;
    padding-bottom: 21.33% /*80/375*/; margin-right: 2.66% /*10/375*/;
    display: inline-block; vertical-align: top;
  }
  .item.type-event > .text,
  .item.type-offer > .text{
    width: 62.66% /*235/375*/;
    display: inline-block; vertical-align: top;
  }
  .item.type-event > .text a,
  .item.type-offer > .text a{
    text-decoration: none;
  }
  .item.type-event > .text span.price,
  .item.type-offer > .text span.price{
    font-size: 18px
  }
  .item.type-event > .text span.price strong,
  .item.type-offer > .text span.price strong{
    font-weight: bold;
  }
  .item.type-event h4,
  .item.type-offer h4{
    font: 700 normal 20px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px;
  }
  .item.type-event h5,
  .item.type-offer h5{
    font: 400 italic 13px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px;
  }

  /*autocomplete suggestions*/
  .autocompleteSuggestions{
    margin: 0px 0px 25px 0px; padding: 7px 10px 10px 10px;
    list-style: none;
    background: #fff;
    border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
  }
  .autocompleteSuggestions > .content > .g-grid-12 > ul {
    list-style: none outside none;
  }
  #siteHeader__fulltextsearch__searchword_autocomplete .type-suggest:nth-of-type(2) {
    border-radius: 10px 10px 0 0;
  }
  #siteHeader__fulltextsearch__searchword_autocomplete .type-suggest:last-of-type {
    border-radius: 0 0 10px 10px;
  }
  #siteHeader__fulltextsearch__searchword_autocomplete .type-suggest:not(:last-of-type):after{
    position: relative; bottom: -10px;
    display: block;
    content: '';
    border-bottom: 1px solid black;
  }
  .autocompleteSuggestions .item.type-suggest,
  .autocompleteSuggestions > .content > .g-grid-12 > ul > li{
    display: block; position: relative;
    padding: 8px 0px 6px 0px;
    font: 400 normal 21px 'Aleo', Arial, sans-serif; color: #2a3841;
  }
  .autocompleteSuggestions > .content > .g-grid-12 > ul > li > a{
    text-decoration: none;
    display: block; padding-right: 100px;
  }
  .autocompleteSuggestions > .content > .g-grid-12 > ul > li strong{
    font: inherit;
    background: #2a3841; color: #fff;
  }
  .autocompleteSuggestions > .content > .g-grid-12 > ul > li .hits{
    position: absolute; top: 12px; right: 12px;
    text-align: right;
    font: 400 italic 14px 'Aleo', Arial, sans-serif;
  }
  #siteHeader__fulltextsearch__searchword_autocomplete {
    width: 100% !important;
    left: 0 !important;
    border-radius: 0;
    margin-top: 22px;
  }
  /* healthfinder autosuggest */
  .autocompleteSuggestions {
    background: none repeat scroll 0 0 #f5ebdb;
    z-index: 60;
    position: fixed !important;
  }
  .autocompleteSuggestions li{
    text-align: left;
  }
  .autocompleteSuggestions .type-city.selected {
    width: 60%;
  }
  .autocompleteSuggestions .type-city.selected,
  .autocompleteSuggestions .type-event.selected,
  .autocompleteSuggestions .type-offer.selected,
  .autocompleteSuggestions .type-suggest.selected {
    background: #517068 !important; color: #fff !important;
  }
  .autocompleteSuggestions .type-event.selected h5,
  .autocompleteSuggestions .type-offer.selected h5,
  .autocompleteSuggestions .type-suggest.selected h5,
  .autocompleteSuggestions .type-event.selected h4,
  .autocompleteSuggestions .type-offer.selected h4,
  .autocompleteSuggestions .type-suggest.selected h4{

    color: #fff !important;
  }
  #siteHeader__fulltextsearch__searchword_autocomplete .type-suggest {
    background: none repeat scroll 0 0 #fff;
    list-style: none outside none;
    padding: 7px 10px 10px;
  }
  #siteHeader__filter__fulltext_autocomplete,
  #siteHeader__filter__location_autocomplete {
    top: 150px !important;
  }
  #siteHeader__filter__fulltext_autocomplete ul,
  #siteHeader__filter__location_autocomplete ul {
    float: none;
    clear: both;
    padding-left:0;
  }
}
@media screen and (max-width: 1000px){
  #siteHeader__fulltextsearch__autocomplete h3{ margin: 0px 0px 5px 0px;}
}
@media screen and (max-width: 600px){
  #siteHeader__fulltextsearch__autocomplete h3{ display: none;}
  .autocompleteSuggestions > .content > .g-grid-12 > ul > li{ font-size: 16px;}
  .autocompleteSuggestions > .content > .g-grid-12 > ul > li .hits{ display: none;}
}

/*  =========================================================
offCanvas mapInfoBoard
========================================================= */
@media screen {
  #mapInfoBoard{
    width: 50%;
    overflow-y: auto!important;
  }

  #mapInfoBoard > .mapInfoBoard__content{
    width: 88.617%/*545/615*/; padding: 50px 5.691%/*35/615*/;
  }
  #mapInfoBoard > .mapInfoBoard__content > h1{
    font: 400 normal 40px 'Lobster'; color: #2a3841;
    margin: 0px 0px 20px 0px;
  }
  #mapInfoBoard > .mapInfoBoard__content > p{
    font: 300 italic 20px/28px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px 0px 20px 0px;
  }
  #mapInfoBoard > .mapInfoBoard__content > .image{
    width: 100%; overflow: hidden;
    margin-bottom: 20px;
  }
  #mapInfoBoard > .mapInfoBoard__content > .image > img{
    width: 100%; height: auto;
  }
}
@media screen and (max-width: 900px){
  #mapInfoBoard{ width: 100%;}
}

/*  =========================================================
request offer form
========================================================= */
#siteHeader__requestOffer select[name^='childAge'] { width: 60px; margin-right: 5px;}
#siteHeader__requestOffer .remember-list {
  width: 100%;
}
#siteHeader__requestOffer .remember-list ul { margin: 0; padding: 10px 0;}
#siteHeader__requestOffer .remember-list li {
  font: 400 normal 21px/24px 'Lobster';
  margin: 0;
  color: #2a3841;
  width: 100%;
  padding:0 0 20px 0;
  height: auto;
  position: relative;;
  vertical-align: top;
  list-style: none;
}

#siteHeader__requestOffer__success p,
#siteHeader__requestOffer .mandatoryFields {
  font: 400 normal 24px/58px 'Lobster';
  margin: 0px;
  display: inline-block;
  margin-right: 10px;
  color: #2a3841;
}

.ui-effects-transfer { border: 2px dotted gray; background-color: rgba(0,0,0,0.1); z-index: 5000;}

#requestOffer_postcode,
#requestOffer_adults {
  width: 90px;
}

#requestOffer_city {
  width: 200px;
}

.requestFields.first-fieldset {
  border-top: 9px #ccc7bc solid;
}

#siteHeader__requestOffer__success p {
  text-align: center;
}

#siteHeader__functions__toggleRequestForm {
  float: none;
  display: block;
  cursor: pointer;
}

@media screen and (min-width: 620px){
  #siteHeader__requestOffer .remember-list ul { margin: 0 0 0 -10px; padding: 10px 0;}
  #siteHeader__functions__toggleRequestForm {
    position: absolute;
    right: 15px;
    top: 10px;
  }
  #siteHeader__requestOffer .remember-list {
    padding-right: 250px;
    box-sizing: border-box;
  }
  #siteHeader__requestOffer .remember-list li {
    float: left;
    margin-left: 10px;
    color: #2a3841;
    max-width: 230px;
    min-width: 100px;
    height: 60px;
  }
  #siteHeader__requestOffer .remember-list li:last-child:after {
    content: " ";
    display: table;
    clear: both;
  }
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage keyvisual styles
 * @author     gueldner
 * @since      23.06.2014
 * @version    $Id$
 **/

/*  =========================================================
basic config
pagination
badges for images
badges for area
breadcrumb navi
========================================================== */


/*  =========================================================
basic config
========================================================= */
@media screen {
  #keyvisual{
    width: 100%; height: 690px;
    border-bottom: 5px #2a3841 solid;
    position: relative;
    background: #8f9e9a;
  }
  #keyvisual.indexPage{ height: 950px;}

  #keyvisual > .keyvisualCroped{
    width: 100%; height: 100%; overflow: hidden;
    position: relative;
  }

  #keyvisual > .keyvisualCroped > .image{
    width: 100%; height: 100%;
    overflow: hidden;
    position: absolute; top: 0%; left: 0%;
    transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1);
    transition: opacity 0.5s ease, transform 0.5s ease; -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease; -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    display: none;
  }
  #keyvisual > .keyvisualCroped > .image > picture,
  #keyvisual > .keyvisualCroped > .image > noscript{
    position: absolute; top: 0px; left: 0px;
    height: 100%; width: 100%;
  }
  #keyvisual > .keyvisualCroped > .image > picture > img,
  #keyvisual > .keyvisualCroped > .image > noscript > img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  #keyvisual > .keyvisualCroped > .image.positioned{
    transition: left 1s ease; -moz-transition: left 1s ease; -webkit-transition: left 1s ease;
    transform: scale(0.9)!important; -moz-transform: scale(0.9)!important; -webkit-transform: scale(0.9)!important; -ms-transform: scale(0.9)!important;
  }
  #keyvisual > .keyvisualCroped > .image.left{ left: -100%;}
  #keyvisual > .keyvisualCroped > .image.right{ left: 100%;}

  #keyvisual > .keyvisualCroped > .image.active{
    left: 0%;
    transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1);
    z-index: 1;
  }
  #keyvisual > .keyvisualCroped > .image.last{
    left: 0%;
    opacity: 0.25;
    transform: scale(0.75); -moz-transform: scale(0.75); -webkit-transform: scale(0.75); -ms-transform: scale(0.75);
  }
  #keyvisual > .keyvisualCroped > .image.left,
  #keyvisual > .keyvisualCroped > .image.right,
  #keyvisual > .keyvisualCroped > .image.active,
  #keyvisual > .keyvisualCroped > .image.last{ display: block;}
  #keyvisual > .keyvisualCroped > .keyvisualVideo .bufferImagePlaceholder{
    opacity: 1;
    transition: visibility 0.5s, opacity 0.5s linear;
  }
  #keyvisual > .keyvisualCroped > .keyvisualVideo .videoPlaceholder{
    position: relative;
    padding-bottom: 56.25%;
  }
  #keyvisual > .keyvisualCroped > .keyvisualVideo .bufferImagePlaceholder{
    position: absolute;
    top: 0px;
  }
  #keyvisual > .keyvisualCroped > .keyvisualVideo iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #keyvisual > .keyvisualCroped > .keyvisualVideo .invisible{
    opacity: 0;
    transition: visibility 0.5s, opacity 0.5s linear;
  }

  #keyvisual > .keyvisualCroped > .keyvisualVideo .videoPlayButton{
    z-index: 3;
  }
  #keyvisual > .keyvisualCroped > .keyvisualVideo .videoPlayButton > img{
    height: 200px;
    margin-left: -60px;
    margin-top: -140px;
  }
}
@media screen and (max-width: 600px){
  #breadcrumb + #keyvisual{ margin-top: 0px;}
}
@media screen and (max-height: 500px){
  #keyvisual.indexPage,
  #keyvisual
  { height: 350px}
}
@media screen and (min-height: 501px){
  #keyvisual.indexPage,
  #keyvisual
  { height: 450px}
}
@media screen and (min-height: 601px){
  #keyvisual.indexPage,
  #keyvisual
  { height: 550px}
}
@media screen and (min-height: 701px){
  #keyvisual.indexPage,
  #keyvisual
  { height: 650px}
}
@media screen and (min-height: 801px){
  #keyvisual:not(.indexPage){ height: 690px}
  #keyvisual.indexPage{ height: 750px}
}
@media screen and (min-height: 901px){
  #keyvisual.indexPage{ height: 850px}
}
@media screen and (min-height: 1000px){
  #keyvisual.indexPage{ height: 950px}
}

/*  =========================================================
pagination
========================================================= */
@media screen {
  .pagination{
    position: absolute; top: 50%; z-index: 3;
    margin-top: -42px;
    width: 85px; height: 85px;
    box-sizing: border-box;
    background: #fff; color: #2a3841;
    text-decoration: none;
    transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);
    transform-origin: top left; -moz-transform-origin: top left; -webkit-transform-origin: top left; -ms-transform-origin: top left;
    text-align: left;
    transition: transform 0.25s linear; -moz-transition: -moz-transform 0.25s linear; -webkit-transition: -webkit-transform 0.25s linear;
  }
  .pagination.pagination--left{
    left: 0px;
    padding: 12px 0px 0px 37px
  }
  .pagination.pagination--right{
    right: -85px;
    padding: 25px 0px 0px 15px
  }
  .pagination > span{
    transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);
    display: block;
  }

  .no-touch .pagination.pagination--left:active,
  .no-touch .pagination.pagination--left:focus,
  .no-touch .pagination.pagination--left:hover{
    transform: rotate(50deg); -moz-transform: rotate(50deg); -webkit-transform: rotate(50deg); -ms-transform: rotate(50deg);
  }
  .no-touch .pagination.pagination--right:active,
  .no-touch .pagination.pagination--right:focus,
  .no-touch .pagination.pagination--right:hover{
    transform: rotate(40deg); -moz-transform: rotate(40deg); -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg);
  }

  #keyvisual.animated > .keyvisualCroped > .pagination.pagination--left{
    transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg);
  }
  #keyvisual.animated > .keyvisualCroped > .pagination.pagination--right{
    transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg);
  }
}

/*  =========================================================
badges for images
========================================================= */
@media screen {
  #keyvisual > .keyvisualCroped > .image > .badge{
    position: absolute;
    top: 0px; left: 0px;
    box-sizing: border-box;
    width: 100%; height: 100%;
    text-decoration: none;
  }
  #keyvisual > .keyvisualCroped > .image > .badge .logo{
    position: relative;
    display: inline-block;
    margin: 50px -1000% 0px -1000%;
  }

  #keyvisual > .keyvisualCroped > .image > .badge .logo > svg{
    position: relative;
    width: 1000px; height: 400px;
  }
  #keyvisual > .keyvisualCroped > .image > .badge .logo > .helper{
    position: absolute; display: block;
    top: 24px; left: 50%;
    width: 250px; height: 250px;
    margin-left: -125px;
    border-radius: 50%;
    box-shadow: 0px 0px 100px #fff; -moz-box-shadow: 0px 0px 100px #fff; -webkit-box-shadow: 0px 0px 100px #fff;
    background: rgba(255, 255, 255, 0.5);
  }

  #keyvisual > .keyvisualCroped > .image > .badge > .text {
    text-align: right;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
    position: relative; top: -75px; right: -300px;
    display: block; margin-right: 50%;
  }
  #keyvisual > .keyvisualCroped > .image > .badge > .text > p {
    font: 400 normal 25px 'Lobster'; color: #fff;
  }
  #keyvisual > .keyvisualCroped > .image > .badge > .text > p > strong{
    font: inherit; font-size: 30px;
  }
  #keyvisual > .keyvisualCroped > .image > .badge > .text > p > em{
    font: inherit;
    font-style: italic;
  }
  #keyvisual > .keyvisualCroped > .image > .badge > .text > .button3d{
    position: absolute; top: 50%; left: 100%;
    margin: -25px 0px 0px 10px;
    text-shadow: none;
  }

  #keyvisual > .keyvisualCroped > .image > .badge--small > .logo{
    transform: scale(0.6); -moz-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6);
    margin-top: -50px;
  }
  #keyvisual > .keyvisualCroped > .image > .badge--small > .text{
    right: -275px; top: -130px;
    font-size: 20px;
  }
  #keyvisual > .keyvisualCroped > .image.keyvisualVideo .videoPlayButton > [class^='icon-'],
  #keyvisual > .keyvisualCroped > .image.keyvisualVideo .videoPlayButton > [class*='icon-'] {
    font-size: 110px;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    color: #fff;
    cursor: pointer;
  }
  #keyvisual > .keyvisualCroped > .image .videoPlayButton{
    display: none;
    position: absolute;
    left: 50%;
    top: 80%;
    margin-left: -30px;
  }
  #keyvisual > .keyvisualCroped > .image .videoPlayButton.show {
    display: inherit;
  }
}
@media screen and (max-height: 700px){
  #keyvisual > .keyvisualCroped > .image.keyvisualVideo .videoPlayButton > [class^='icon-'],
  #keyvisual > .keyvisualCroped > .image.keyvisualVideo .videoPlayButton > [class*='icon-'] {
    font-size: 70px;
  }
  #keyvisual > .keyvisualCroped > .image .videoPlayButton + a{
    display: none;
  }
  #keyvisual > .keyvisualCroped > .image .videoPlayButton{
    bottom: 50%;
  }
}

@media screen and (max-width: 1100px){
  #keyvisual > .keyvisualCroped > .image > .badge > .text{
    position: relative; top: -90px; right: -150px;
    display: block; margin-right: 40%;
  }
  #keyvisual > .keyvisualCroped > .image > .badge--small > .text{ top: -120px;}

  #keyvisual > .keyvisualCroped > .image > .badge .logo{
    transform: scale(0.7); -moz-transform: scale(0.7); -webkit-transform: scale(0.7); -ms-transform: scale(0.7);
    margin-top: -35px;
  }

  #keyvisual > .keyvisualCroped > .image > .badge--small > .logo{
    transform: scale(0.6); -moz-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6);
    margin-top: -60px;
  }
}
@media screen and (max-width: 700px){
  #keyvisual > .keyvisualCroped > .image > .badge > .text{
    position: relative; top: -100px; right: -150px;
    display: block; margin-right: 50%;
  }
  #keyvisual > .keyvisualCroped > .image > .badge--small > .text{ top: -115px;}

  #keyvisual > .keyvisualCroped > .image > .badge .logo{
    transform: scale(0.6); -moz-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6);
    margin-top: -65px;
  }

  #keyvisual > .keyvisualCroped > .image > .badge--small > .logo{
    transform: scale(0.5); -moz-transform: scale(0.5); -webkit-transform: scale(0.5); -ms-transform: scale(0.5);
    margin-top: -80px;
  }
}
@media screen and (max-width: 600px){

  #keyvisual > .keyvisualCroped > .image > .badge > .text{
    position: absolute; bottom: 0px; top: auto; left: 0px; right: auto;
    width: 100%; box-sizing: border-box;
    margin: 0px; padding: 5px 25px 60px 25px;
    font-size: 18px; text-align: center;
    background: rgba(42, 56, 65, 0.62);
  }
  #keyvisual > .keyvisualCroped > .image > .badge > .text > strong{ font-size: 24px;}
  #keyvisual > .keyvisualCroped > .image > .badge > .text > .button3d{
    top: auto; left: 50%; bottom: 5px;
    margin: 0px 0px 0px -25px;
  }

  #keyvisual > .keyvisualCroped > .image > .badge .logo{
    transform: scale(0.5); -moz-transform: scale(0.5); -webkit-transform: scale(0.5); -ms-transform: scale(0.5);
    margin-top: -75px;
  }

  #keyvisual > .keyvisualCroped > .image > .badge--small > .logo{
    transform: scale(0.4); -moz-transform: scale(0.4); -webkit-transform: scale(0.4); -ms-transform: scale(0.4);
    margin-top: -100px;
  }
}

/*  =========================================================
badges for area
========================================================= */
@media screen {
  #keyvisual > .badge{
    position: absolute; bottom: -125px; left: 0%; z-index: 2;
    width: 100%; height: 450px; overflow: hidden;
  }
  #keyvisual > .badge.hotelBadge{ bottom: -200px;}
  #keyvisual > .badge .logo{
    position: absolute; bottom: 0px; left: 50%;
    margin-left: -500px; width: 1000px;
    z-index: 1;
  }

  #keyvisual > .badge .logo > svg{
    width: 100%; height: 400px;
    position: relative;
  }
  #keyvisual > .badge .logo > .helper{
    position: absolute; display: block;
    top: 24px; left: 50%;
    width: 250px; height: 250px;
    margin-left: -125px;
    border-radius: 50%;
    box-shadow: 0px 0px 100px #fff; -moz-box-shadow: 0px 0px 100px #fff; -webkit-box-shadow: 0px 0px 100px #fff;
    background: rgba(255, 255, 255, 0.42);
  }

  #keyvisual > .badgeRibbon{
    background: transparent url("projects/nts/images/badges/ribbon.svg") 0px 0px no-repeat;
    background-size: contain;
    bottom: -70px;
    display: inline-block;
    height: 203px;
    left: 50%;
    margin-left: -209px;
    position: absolute;
    width: 418px;
    z-index: 1;
  }

  #keyvisual > .badgeRibbon > .date {
    font-size: 33px;
    line-height: 1em;
    margin: 75px 70px 0;
    padding-top: 8px;
    text-align: left;
  }
  #keyvisual > .badgeRibbon > p {
    color: #fff;
    font-family: 'Lobster';
    font-style: normal;
    font-weight: 400;
    padding-left: 30px;
    transform: rotate(-12.3deg);
    -moz-transform: rotate(-12.3deg);
    -webkit-transform: rotate(-12.3deg);
    -ms-transform: rotate(-12.3deg);
  }

  #keyvisual > .badgeRibbon > .date > strong {
    font-family: 'Lobster';
    font-size: 48px;
    padding-left: 3px;
  }

}
@media screen and (max-width: 900px){
  #keyvisual > .badge{ bottom: -160px;}
  #keyvisual > .badge .logo{ transform: scale(0.7); -moz-transform: scale(0.7); -webkit-transform: scale(0.7); -ms-transform: scale(0.7);}

  #keyvisual > .badgeRibbon{
    bottom: -75px;
    transform: scale(0.8); -moz-transform: scale(0.8); -webkit-transform: scale(0.8); -ms-transform: scale(0.8);
  }

}
@media screen and (max-width: 600px){
  #keyvisual > .badge{ bottom: -210px;}
  #keyvisual > .badge .logo{ transform: scale(0.4); -moz-transform: scale(0.4); -webkit-transform: scale(0.4); -ms-transform: scale(0.4);}
  #keyvisual > .badge .logo > svg{height: 450px;}

  #keyvisual > .badgeRibbon{
    bottom: -80px;
    transform: scale(0.6); -moz-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6);
  }
}

@media screen and (max-width: 450px){
  #keyvisual > .badge{ bottom: -198px;}
}

/*  =========================================================
breadcrumb navi
========================================================= */
@media screen {
  #breadcrumb{
    width: 100%; padding: 20px 0px;
    background: #517068; text-align: left;
  }
  #keyvisual + #breadcrumb{
    position: absolute; top: 0px; left: 0px; z-index: 2;
    background: rgba(81, 112, 104, 0.8);
  }
  #breadcrumb__list{
    margin: 0px; padding: 0px 20px;
    list-style: none;
  }
  #breadcrumb__list > li{
    display: inline-block; padding: 0px 5px 0px 0px;
    font: 400 normal 15px 'Aleo', Arial, sans-serif;
    color: #fff;
  }
  #breadcrumb__list > li > strong{
    font: inherit; font-weight: 700;
  }
}
@media screen and (max-width: 600px){
  #breadcrumb{ margin-bottom: 0px;}
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage footer styles
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id$
 **/

/*  =========================================================
basic config
footer head
footer content
footer bottom
contact area
========================================================== */


/*  =========================================================
basic config
========================================================= */
@media screen {
  #siteFooter{ position: relative;}

  #siteFooter [class^='g-grid'] > [class^='g-element']:nth-of-type(1) > .innerContent{
    text-align: right;
    margin-right: 15px;
  }
  #siteFooter [class^='g-grid'] > [class^='g-element']:nth-of-type(2) > .innerContent{
    text-align: left;
    margin-left: 40px;
  }
  #siteFooter [class^='g-grid'] > [class^='g-element']:nth-of-type(1) .button{ border-color: #517068;}
  #siteFooter [class^='g-grid'] > [class^='g-element']:nth-of-type(2) .button{ border-color: #cfb589;}

  /*background stuff*/
  #siteFooter__background--left,
  #siteFooter__background--right{
    position: absolute; top: 0px;
    width: 50%; height: 100%;
  }
  #siteFooter__background--left{ left: 0%; background: #517068;}
  #siteFooter__background--right{ left: 50%; background: #cfb589;}

  #siteFooter__background--helper{
    position: absolute; top: 0px; left: 0px;
    width: 100%; height: 100%;
  }
  #siteFooter__background--helper *{ height: 100%;}
  #siteFooter__background--leftHelper{ background: #517068;}
  #siteFooter__background--rightHelper{ background: #cfb589;}
}
@media screen and (max-width: 900px){
  #siteFooter{ background: #517068;}
  #siteFooter__background{ display: none;}

  #siteFooter .innerContent{
    margin: 0px!important;
    text-align: center!important;
  }
}

/*  =========================================================
footer head
========================================================= */
@media screen {
  #siteFooter__head{
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    padding: 30px 0px 20px 0px;
  }
  #siteFooter__head h2{
    font: 400 normal 40px/37px 'Lobster'; color: #fff;
    margin: 0px;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
  }
}
@media screen and (max-width: 500px){
  #siteFooter__head{ padding: 20px 0px 10px 0px;}
  #siteFooter__head h2{ font-size: 33px;}
}

/*  =========================================================
footer content
========================================================= */
@media screen {
  #siteFooter__content{
    position: relative;
    padding: 35px 0px 30px 0px;
  }
  #siteFooter__content .button:not(:first-of-type){ margin-left: 10px;}
  #siteFooter__content p{
    font: 300 normal 15px 'Aleo', Arial, sans-serif; color: #fff;
  }

  #siteFooter__content form > div{
    margin: 0px 20px 20px 0px;
    display: inline-block;
  }

  #siteFooter__content label{ color: #fff;}
  #siteFooter__content input[type=text],
  #siteFooter__content input[type=email]{ height: 40px;}

  #siteFooter__content #form__newsletter .name-firstname,
  #siteFooter__content #form__newsletter .name-lastname{ width: 200px;}
  #siteFooter__content #form__newsletter .name-email{ width: 335px;}

  #siteFooter__content #form__newsletter + label > [class^='icon-']{
    border-color: #fff;
  }
  #siteFooter__content #form__newsletter:checked + label > [class^='icon-']{
    background: #fff; color: #cfb589;
  }
}
@media screen and (max-width: 1000px){
  #siteFooter__newsletterForm__email{ width: 250px;}
}
@media screen and (max-width: 500px){
  #siteFooter__content{ padding: 30px 0px 25px 0px;}
}

/*  =========================================================
footer bottom
========================================================= */
@media screen {
  #siteFooter__bottom{
    position: relative;
    background: rgba(42, 56, 65, 0.3  );
    padding: 25px 0px 20px 0px;
  }

  #siteFooter__bottom a.logo{
    height: 100%; text-decoration: none;
    display: inline-block; vertical-align: middle;
  }
  #siteFooter__bottom a.logo > img{
    width: 240px; height: 55px;
    display: inline-block; vertical-align: middle;
  }

  #siteFooter__bottom a.text{
    font: 300 normal 14px 'Aleo', Arial, sans-serif; color: #fff;
    text-decoration: underline;
    margin-right: 15px;
  }
  #siteFooter__bottom p{
    font: 300 normal 14px 'Aleo', Arial, sans-serif; color: #fff;
    margin: 15px 0px 0px 0px;
  }
}
@media screen and (max-width: 900px){
  #siteFooter__bottom{
    background: #cfb589;
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 500px){
  #siteFooter__bottom{ padding-bottom: 25px;}
  #siteFooter__bottom a.text{
    display: inline-block; vertical-align: top;
    width: 46%; margin: 0px 2% 10px 2%; padding: 5px;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
    border: 1px #cfb589 solid;
    text-align: center; text-decoration: none;
    background: #2a3841;
    box-sizing: border-box;
  }
}

/*  =========================================================
contact area
========================================================= */
/*basic styling*/
@media screen {
  .contactArea{
    width: 100%;
    background: rgba(228, 229, 231, 0.3);
  }
}

/*head styling*/
@media screen {
  .contactArea > .head{
    padding: 10px 0px;
    background: rgba(165, 170, 174, 0.3);
  }
  .contactArea > .head h2{
    font: 400 normal 35px 'Lobster'; color: #2a3841;
    margin: 0px; padding: 0px;
  }
}
@media screen and (max-width: 600px){
  .contactArea > .head h2{ font-size: 25px;}
}

/*basic body styling*/
@media screen {
  .contactArea > .body{ padding: 20px 0px;}
  .contactArea > .body .contactInfos{
    margin-right: 50px; padding-right: 10px;
    border-right: 1px rgba(0, 0, 0, 0.3) solid;
  }
}
@media screen and (max-width: 900px){
  .contactArea > .body .contactInfos{ margin-right: 10px;}
}
@media screen and (max-width: 600px){
  .contactArea > .body .contactInfos{
    margin-right: 0px; border-right: none; padding-right: 0px;
    margin-bottom: 10px; padding-bottom: 20px;
    border-bottom: 1px rgba(0, 0, 0, 0.3) solid;
  }
}

/*body styling for fonts and links*/
@media screen {
  .contactArea > .body h4{
    font: 700 normal 20px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px; padding: 0px;
  }
  .contactArea > .body h5{
    font: 400 normal 16px 'Aleo', Arial, sans-serif; color: #2a3841;
    text-transform: uppercase;
    margin: 5px 0px 20px 0px; padding: 0px;
  }
  .contactArea > .body p{
    font: 400 normal 20px 'Aleo', Arial, sans-serif; color: #2a3841;
    margin: 0px; padding: 0px;
  }

  .contactArea > .body a{
    font: 400 normal 20px 'Aleo', Arial, sans-serif; color: #2a3841;
    display: inline-block; padding: 5px 0px; margin: 10px 0px 0px 5px; vertical-align: bottom;
  }
  .contactArea > .body span{ color: #2a3841;}
}
@media screen and (max-width: 600px){
  .contactArea > .body h4,
  .contactArea > .body p,
  .contactArea > .body a{ font-size: 18px;}
  .contactArea > .body h5{ font-size: 14px;}
}
@media screen {
  .icon-instagram:before{
    content: url(projects/nts/images/objects/instagram.svg);
  }
}/*
    jQuery Touch Optimized Sliders "R"Us
    Core CSS
*/
.tos-noanimation {
  -webkit-transition-property: none !important;
  -moz-transition-property: none !important;
  -ms-transition-property: none !important;
  -o-transition-property: none !important;
  transition-property: none !important; }

.tos-fastanimation {
  -webkit-transition-duration: 0.2s !important;
  -moz-transition-duration: 0.2s !important;
  -ms-transition-duration: 0.2s !important;
  -o-transition-duration: 0.2s !important;
  transition-duration: 0.2s !important;
  -webkit-transition-timing-function: ease-out !important;
  -moz-transition-timing-function: ease-out !important;
  -ms-transition-timing-function: ease-out !important;
  -o-transition-timing-function: ease-out !important;
  transition-timing-function: ease-out !important; }

.tos-wrapper {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  display: none;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden; }
.tos-wrapper.tos-opened {
  display: block; }
.tos-wrapper.tos-opening {
  opacity: 1; }
.tos-wrapper.tos-fixed {
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000; }
.tos-wrapper.tos-inline {
  position: relative; }

.tos-slider {
  white-space: nowrap;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative; }

.tos-wrapper.tos-fx-slide .tos-slider {
  left: 0;
  -webkit-transition: left 0.4s ease;
  -moz-transition: left 0.4s ease;
  -ms-transition: left 0.4s ease;
  -o-transition: left 0.4s ease;
  transition: left 0.4s ease; }
.tos-wrapper.tos-fx-slide.tos-fixed .tos-slider {
  position: absolute; }

.tos-wrapper.tos-fx-fade .tos-slider {
  opacity: 1;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease; }

.tos-uibg {
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  opacity: 0;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1; }

.tos-desktop .tos-wrapper:hover .tos-uibg,
.tos-touch .tos-wrapper.tos-hover .tos-uibg {
  opacity: 1; }

.tos-slide {
  -webkit-overflow-scrolling: touch;
  line-height: 1px;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative; }
.tos-slide:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px; }
.tos-slide.tos-loading:after {
  content: '';
  border-right: 5px solid black;
  border-radius: 50%;
  display: block;
  width: 30px;
  height: 30px;
  margin: -15px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  -webkit-animation: spin 1s infinite linear;
  -moz-animation: spin 1s infinite linear;
  -ms-animation: spin 1s infinite linear;
  -o-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear; }
.tos-slide.tos-loading > * {
  opacity: 0; }
.tos-slide > * {
  opacity: 1;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease; }

.tos-wrapper.tos-fixed .tos-slide.tos-loading:after {
  border-right-color: white; }

@-webkit-keyframes spin {
  from {
  -webkit-transform: rotate(0deg); }

to {
  -webkit-transform: rotate(360deg); } }

@-moz-keyframes spin {
  from {
  -moz-transform: rotate(0deg); }

to {
  -moz-transform: rotate(360deg); } }

@-ms-keyframes spin {
  from {
  -ms-transform: rotate(0deg); }

to {
  -ms-transform: rotate(360deg); } }

@-o-keyframes spin {
  from {
  -o-transform: rotate(0deg); }

to {
  -o-transform: rotate(360deg); } }

@keyframes spin {
  from {
  transform: rotate(0deg); }

to {
  transform: rotate(360deg); } }

.tos-slide > * {
  vertical-align: middle;
  display: inline-block;
  max-height: 100%;
  max-width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }
.tos-slide.tos-html > div {
  white-space: normal;
  text-align: left;
  line-height: 1.5; }
.tos-slide.tos-html > div * {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none; }

.tos-wrapper.tos-fill .tos-slide.tos-image > img {
    max-height: none;
    max-width: none;
    min-height: 100%;
    min-width: 100%; }

.tos-wrapper.tos-fixed .tos-slide.tos-html > div {
  background-color: white;
  color: #333333;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  padding: 40px;
  overflow: auto; }

.tos-desktop .tos-wrapper.tos-fixed {
  background-color: rgba(0, 0, 0, 0.85); }
.tos-desktop .tos-wrapper.tos-fixed.tos-fit .tos-slide {
  padding: 20px; }

/*
    jQuery Touch Optimized Sliders "R"Us
    Buttons addon
*/
.tos-prev,
.tos-next,
.tos-close {
  background: black;
  border-radius: 3px;
  opacity: 0;
  display: block;
  width: 40px;
  position: absolute;
  z-index: 1;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease; }

.tos-prev,
.tos-next {
  height: 80px;
  margin-top: -40px;
  top: 50%; }
.tos-prev.tos-disabled,
.tos-next.tos-disabled {
  cursor: default; }

.tos-prev {
  left: 20px; }

.tos-next {
  right: 20px; }

.tos-close {
  height: 40px;
  top: 20px;
  right: 20px; }

.tos-desktop .tos-wrapper:hover .tos-prev,
.tos-desktop .tos-wrapper:hover .tos-next,
.tos-desktop .tos-wrapper:hover .tos-close,
.tos-touch .tos-wrapper.tos-hover .tos-prev,
.tos-touch .tos-wrapper.tos-hover .tos-next,
.tos-touch .tos-wrapper.tos-hover .tos-close {
  opacity: 0.5; }
.tos-desktop .tos-wrapper:hover .tos-prev:hover,
.tos-desktop .tos-wrapper:hover .tos-next:hover,
.tos-desktop .tos-wrapper:hover .tos-close:hover,
.tos-touch .tos-wrapper.tos-hover .tos-prev:hover,
.tos-touch .tos-wrapper.tos-hover .tos-next:hover,
.tos-touch .tos-wrapper.tos-hover .tos-close:hover {
  opacity: 0.9; }
.tos-desktop .tos-wrapper:hover .tos-prev.tos-disabled,
.tos-desktop .tos-wrapper:hover .tos-next.tos-disabled,
.tos-desktop .tos-wrapper:hover .tos-close.tos-disabled,
.tos-touch .tos-wrapper.tos-hover .tos-prev.tos-disabled,
.tos-touch .tos-wrapper.tos-hover .tos-next.tos-disabled,
.tos-touch .tos-wrapper.tos-hover .tos-close.tos-disabled {
  opacity: 0.2; }

.tos-prev span,
.tos-next span,
.tos-close span:before,
.tos-close span:after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  margin: -5px;
  position: absolute;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); }

.tos-close span:before,
.tos-close span:after {
  width: 6px;
  height: 6px;
  margin-top: -4px;
  margin-left: 0;
  margin-right: 0; }

.tos-prev span,
.tos-close span:before {
  border-bottom: 3px solid white;
  border-left: 3px solid white;
  left: 50%; }

.tos-next span,
.tos-close span:after {
  border-top: 3px solid white;
  border-right: 3px solid white;
  right: 50%; }

.tos-desktop .tos-wrapper.tos-fixed.tos-fit.tos-has-prev .tos-slide, .tos-desktop .tos-wrapper.tos-fixed.tos-fit.tos-has-next .tos-slide, .tos-desktop .tos-wrapper.tos-fixed.tos-fit.tos-has-close .tos-slide {
  padding-left: 80px;
  padding-right: 80px; }

.tos-inline {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  display: inline-block;
  margin: 0;
  position: relative;
  top: auto;
  left: auto;
  right: auto; }
.tos-inline.tos-prev {
  margin-right: -60px; }
.tos-inline.tos-next {
  margin-left: -60px; }

.tos-loading .tos-inline {
  opacity: 0 !important; }

.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed .tos-prev,
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed .tos-next,
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed .tos-close {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2); }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed .tos-prev,
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed .tos-next,
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed .tos-close {
  -webkit-transform: scale(3);
  -moz-transform: scale(3);
  -ms-transform: scale(3);
  -o-transform: scale(3);
  transform: scale(3); }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed .tos-prev, .tos-touch.tos-scale-3 .tos-wrapper.tos-fixed .tos-prev {
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed .tos-next, .tos-touch.tos-scale-3 .tos-wrapper.tos-fixed .tos-next {
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed .tos-close, .tos-touch.tos-scale-3 .tos-wrapper.tos-fixed .tos-close {
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top; }

/*
    jQuery Touch Optimized Sliders "R"Us
    Caption addon
*/
.tos-caption {
  color: white;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  left: 0;
  z-index: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }
.tos-caption.tos-disabled {
  opacity: 0 !important; }

.tos-desktop .tos-wrapper:hover .tos-caption,
.tos-touch .tos-wrapper.tos-hover .tos-caption {
  opacity: 1; }

.tos-wrapper .tos-caption {
  line-height: 20px;
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  bottom: 20px; }
.tos-wrapper.tos-has-caption .tos-uibg {
  height: 100px; }

.tos-desktop .tos-wrapper.tos-fixed.tos-fit.tos-has-caption .tos-slide {
  padding-bottom: 60px; }

.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed .tos-caption {
  line-height: 40px;
  font-size: 30px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  bottom: 40px; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed.tos-has-caption .tos-uibg {
  height: 200px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed .tos-caption {
  line-height: 60px;
  font-size: 45px;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
  bottom: 60px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed.tos-has-caption .tos-uibg {
  height: 300px; }

/*
    jQuery Touch Optimized Sliders "R"Us
    Drag addon
*/
.tos-wrapper.tos-fx-slide .tos-slider {
  -webkit-transition-property: left, margin;
  -moz-transition-property: left, margin;
  -ms-transition-property: left, margin;
  -o-transition-property: left, margin;
  transition-property: left, margin; }

/*
    jQuery Touch Optimized Sliders "R"Us
    Pagination addon
*/
.tos-pagination {
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1; }
.tos-pagination a {
  display: inline-block; }
.tos-pagination.tos-bullets a {
  background-color: rgba(255, 255, 255, 0.2); }
.tos-pagination.tos-bullets a:hover {
  background-color: rgba(255, 255, 255, 0.5); }
.tos-pagination.tos-bullets a.tos-selected {
  background-color: rgba(255, 255, 255, 0.9); }

.tos-desktop .tos-wrapper:hover .tos-pagination,
.tos-touch .tos-wrapper.tos-hover .tos-pagination {
  opacity: 1; }

.tos-wrapper .tos-pagination {
  padding: 0 0 20px 0; }
.tos-wrapper.tos-has-bullets .tos-pagination {
  height: 10px; }
.tos-wrapper.tos-has-bullets .tos-pagination a {
  border-radius: 10px;
  width: 10px;
  height: 10px;
  margin: 0 5px; }
.tos-wrapper.tos-has-bullets .tos-caption {
  bottom: 40px; }
.tos-wrapper.tos-has-bullets .tos-uibg {
  height: 90px; }
.tos-wrapper.tos-has-bullets.tos-has-caption .tos-uibg {
  height: 130px; }
.tos-wrapper.tos-has-thumbnails .tos-pagination {
  height: 50px; }
.tos-wrapper.tos-has-thumbnails .tos-pagination a {
  background-position: center center;
  background-size: cover;
  width: 50px;
  height: 50px;
  margin: 0 5px; }
.tos-wrapper.tos-has-thumbnails .tos-caption {
  bottom: 80px; }
.tos-wrapper.tos-has-thumbnails .tos-uibg {
  height: 130px; }
.tos-wrapper.tos-has-thumbnails.tos-has-caption .tos-uibg {
  height: 170px; }

.tos-desktop .tos-wrapper.tos-fixed.tos-fit.tos-has-bullets .tos-slide {
  padding-bottom: 50px; }
.tos-desktop .tos-wrapper.tos-fixed.tos-fit.tos-has-bullets.tos-has-caption .tos-slide {
  padding-bottom: 80px; }
.tos-desktop .tos-wrapper.tos-fixed.tos-fit.tos-has-thumbnails .tos-slide {
  padding-bottom: 90px; }
.tos-desktop .tos-wrapper.tos-fixed.tos-fit.tos-has-thumbnails.tos-has-caption .tos-slide {
  padding-bottom: 120px; }

.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed .tos-pagination {
  padding: 0 0 40px 0; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed.tos-has-bullets .tos-pagination {
  height: 20px; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed.tos-has-bullets .tos-pagination a {
  border-radius: 20px;
  width: 20px;
  height: 20px;
  margin: 0 10px; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed.tos-has-bullets .tos-caption {
  bottom: 80px; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed.tos-has-bullets .tos-uibg {
  height: 180px; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed.tos-has-bullets.tos-has-caption .tos-uibg {
  height: 260px; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed.tos-has-thumbnails .tos-pagination {
  height: 100px; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed.tos-has-thumbnails .tos-pagination a {
  background-position: center center;
  background-size: cover;
  width: 100px;
  height: 100px;
  margin: 0 10px; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed.tos-has-thumbnails .tos-caption {
  bottom: 160px; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed.tos-has-thumbnails .tos-uibg {
  height: 260px; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed.tos-has-thumbnails.tos-has-caption .tos-uibg {
  height: 340px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed .tos-pagination {
  padding: 0 0 60px 0; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed.tos-has-bullets .tos-pagination {
  height: 30px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed.tos-has-bullets .tos-pagination a {
  border-radius: 30px;
  width: 30px;
  height: 30px;
  margin: 0 15px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed.tos-has-bullets .tos-caption {
  bottom: 120px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed.tos-has-bullets .tos-uibg {
  height: 270px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed.tos-has-bullets.tos-has-caption .tos-uibg {
  height: 390px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed.tos-has-thumbnails .tos-pagination {
  height: 150px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed.tos-has-thumbnails .tos-pagination a {
  background-position: center center;
  background-size: cover;
  width: 150px;
  height: 150px;
  margin: 0 15px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed.tos-has-thumbnails .tos-caption {
  bottom: 240px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed.tos-has-thumbnails .tos-uibg {
  height: 390px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed.tos-has-thumbnails.tos-has-caption .tos-uibg {
  height: 510px; }

/*
    jQuery Touch Optimized Sliders "R"Us
    Youtube media
*/
.tos-play {
  background: black;
  opacity: 0;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease; }
.tos-play:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%; }

.tos-desktop .tos-wrapper:hover .tos-play,
.tos-touch .tos-wrapper.tos-hover .tos-play {
  opacity: 0.5; }
.tos-desktop .tos-wrapper:hover .tos-play:hover,
.tos-touch .tos-wrapper.tos-hover .tos-play:hover {
  opacity: 0.9; }

.tos-wrapper .tos-play {
  border-radius: 80px;
  width: 80px;
  height: 80px;
  margin: -40px; }
.tos-wrapper .tos-play:after {
  border: 20px solid transparent;
  border-left-color: white;
  border-left-width: 30px;
  margin-top: -20px;
  margin-left: -10.5px; }

.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed .tos-play {
  border-radius: 160px;
  width: 160px;
  height: 160px;
  margin: -80px; }
.tos-touch.tos-scale-2 .tos-wrapper.tos-fixed .tos-play:after {
  border: 40px solid transparent;
  border-left-color: white;
  border-left-width: 60px;
  margin-top: -40px;
  margin-left: -21px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed .tos-play {
  border-radius: 240px;
  width: 240px;
  height: 240px;
  margin: -120px; }
.tos-touch.tos-scale-3 .tos-wrapper.tos-fixed .tos-play:after {
  border: 60px solid transparent;
  border-left-color: white;
  border-left-width: 90px;
  margin-top: -60px;
  margin-left: -31.5px; }
/* box-sizing: content-box is the default, 
   putting it back in case of global overwrites */
.fr-window, .fr-window [class^="fr-"],
.fr-overlay, .fr-overlay [class^="fr-"],
.fr-loading, .fr-loading [class^="fr-"] {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/* Overlay */
.fr-overlay {
  z-index: 99999;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  zoom: 1;
  overflow: hidden;
}
.fr-overlay-background {
  background: #000;
  filter: alpha(opacity=90);
  opacity: .9;
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Window */
.fr-window,
.fr-window-fixed-measure {
  z-index: 100000;
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 100%;
}

/* z-index */
.fr-ui-outside .fr-info { z-index: 100001; }

/* Loading icon */
.fr-loading {
  z-index: 100001;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  margin-left: -26px;
  overflow: visible;
}
.fr-loading-offset {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.fr-loading-background, .fr-loading-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fr-loading-background {
  background: #0d0d0d url('styles/tools/fresco/skins/loading.gif') 50% 50% no-repeat;
  opacity: .8;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  position: relative;
  float: left;
  border: 1px solid rgba(80,80,80,.2);
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}
.fr-loading-icon { display: none; }


/* Bubble (holds everything) */
.fr-bubble {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Fonts */
.fr-ui,
.fr-info { 
  font: normal 13px/21px "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Verdana, Arial, sans-serif;
}

/* Frames / UI */
.fr-frames {
  height: 100%;
  width: 100%;
  position: absolute;
  display:inline;
  top: 0;
  left: 0;
  overflow: hidden;
}
.fr-frames-move {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.fr-frame, .fr-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.fr-frame-touch {
  position: relative;
  float: left;
  top: auto;
  left: auto;
  width: 100%;
}

.fr-window *:not(.fr-caption)::selection,
.fr-window *:not(.fr-caption)::-moz-selection,
.fr-window *:not(.fr-caption)::-webkit-selection {
  background: transparent;
}

.fr-mobile-touch-enabled .fr-frame .fr-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fr-frame-touch .fr-box {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fr-mobile-touch-enabled .fr-ui,
.fr-mobile-touch-enabled .fr-ui-spacer,
.fr-mobile-touch-enabled .fr-ui-wrapper,
.fr-mobile-touch-enabled .fr-ui-padder,
.fr-mobile-touch-enabled .fr-ui-toggle,
.fr-mobile-touch-enabled .fr-ui-outer-border,
.fr-mobile-touch-enabled .fr-side { pointer-events: none; }


/* Content */
.fr-box { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.fr-box-has-ui-outside { overflow: hidden; }
.fr-box-spacer, .fr-ui-spacer {
  position: absolute; 
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.fr-box-wrapper, .fr-ui-wrapper {
  position: relative;
  background: url('styles/tools/fresco/skins/blank.gif');
  overflow: hidden;
}

.fr-box-padder, .fr-ui-padder {
  position: absolute;
  top: 0;
  left: 0;
  zoom: 1;
  border-color: transparent;
  border-style: solid;
  border-width: 0;
  background: url('styles/tools/fresco/skins/blank.gif');
}

.fr-box-padder, .fr-ui-padder {
  position: absolute;
  top: 0;
  left: 0;
}
.fr-ui-padder { zoom: 1; }

.fr-box-wrapper, .fr-ui-wrapper, .fr-ui-toggle {
  position: relative;
  float: left;
  display: inline;
  zoom: 1;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.fr-box-wrapper { background: #101010; }

.fr-ui-wrapper-outside {
  float: left;
  height: 100%;
  width: 100%;
}

/* outer-border */
.fr-box-outer-border,
.fr-ui-outer-border {
  position: relative;
  float: left;
  display: inline;
  height: 100%;
  width: 100%;
  zoom: 1;
}
/* IE < 8 has a bug where dimensions are ignored without a border */
.fr-ltIE9 .fr-box-outer-border,
.fr-ltIE9 .fr-ui-outer-border { border: 0px solid transparent; }  

.fr-content {
  height: 100%;
  width: 100%;
  zoom:1;
  *display:inline;
  margin: 0;
  padding: 0;
}

.fr-content-image {
  position: absolute;
  top: 0;
  left: 0;
  image-rendering: optimizeQuality;
  max-width: none;
}

.fr-content-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

.fr-download-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-user-drag: element;
  user-drag: element;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;
}

/* onClick inside ui-outside */
.fr-onclick-side {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: url(styles/tools/fresco/skins/blank.gif);
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
}
.fr-onclick-side img { cursor: pointer; }
.fr-onclick-previous { left: 0; }
.fr-onclick-next { right: 0;}

/* onClick: 'next' has full width */
.fr-frame-onclick-next .fr-onclick-next { width: 100%; }

.fr-side {
  position: absolute;
  top: 0;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  background: url('styles/tools/fresco/skins/blank.gif') 0 0 repeat;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  zoom: 1;
}
.fr-side-disabled { cursor: default; }

.fr-side-button {
  position: absolute;
  top: 50%;
  width: 54px;
  height: 72px;
  margin: 0 9px;
  margin-top: -36px;
  pointer-events: auto;
}
.fr-side-button-icon {
  float: left;
  position: relative;
  height: 100%;
  width: 100%;
  zoom: 1;
}

.fr-side-previous { left: 0; width: 50%; }
.fr-side-next { right: 0; width: 50%;}

.fr-side-previous .fr-side-button { left: 0; }
.fr-side-next .fr-side-button { right: 0; }


/* sides (UI outside), smaller area */
.fr-ui-outside .fr-side {
  width: 72px;
  height: 72px;
  top: 50%;
  margin-top: -36px;
}
.fr-ui-outside .fr-side-button { margin-top: 0; top: 0; }
 
 
/*
 * Info 
 */
.fr-info {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  color: #efefef;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  pointer-events: auto;
}
.fr-info-background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  line-height: 1%;
  filter: alpha(opacity=80);
  opacity: .8;
  zoom: 1;
  background: #000;
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}
.fr-info-outside .fr-info-background { background: #0d0d0d; filter: none; opacity: 1; }


.fr-info-padder {
  padding: 12px;
  display: block;
  filter: alpha(opacity=99);
  overflow: hidden;
  width: auto;
  position: relative;
}
.fr-caption {
  position: relative;
  filter: alpha(opacity=99);
  opacity: .99;
  width: auto;
  word-wrap: no-wrap;
}
.fr-position-text { position: relative; }

/* UI inside */
.fr-has-position .fr-info-inside .fr-caption { margin-right: 75px; }
.fr-info-inside .fr-position {
  filter: alpha(opacity=99);
  opacity: .99;
  position: relative;
  text-align: right;
  word-wrap: no-wrap;
  line-height: 21px;
  color: #b3b3b3;
  float: right;
  width: 75px;
}
.fr-no-caption .fr-info-inside .fr-position {
  width: auto;
  margin: 0 1px 1px 0;
  color: #b9b9b9;
  filter: alpha(opacity=99);
}

.fr-info-inside .fr-position-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fr-no-caption .fr-info-inside .fr-position-background {
  border-radius: 12px;
  background: #101010;
  filter: alpha(opacity=80);
  opacity: .8;
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

.fr-info-inside .fr-position-text { position: relative; }
.fr-no-caption .fr-info-inside .fr-position-text {
  float: left;
  height: 13px;
  line-height: 13px;
  padding: 6px 10px;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

/* hide the position on small screens */
@media all and (max-width: 568px) and (max-height: 320px),
       all and (max-width: 320px) and (max-height: 568px) {
  .fr-has-position .fr-info-inside .fr-caption { margin-right: 0; }
  .fr-position { display: none !important; }

  /* smaller side buttons */
  .fr-ui-outside .fr-side {
    width: 54px;
    height: 50px;
    margin-top: -25px;
  }
  .fr-side-button {
    width: 40px;
    height: 50px;
    margin: 0 6px;
    margin-top: -25px;
  }
}


/* UI outside/touch position */
.fr-ui-outside .fr-position {
  position: absolute;
  bottom: 15px;
  right: 15px;
  display: inline;
  width: auto;
  margin: 0 1px 1px 0;
  color: #b9b9b9;
}
.fr-ui-outside .fr-position-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  filter: alpha(opacity=80);
  opacity: .8;
  background: #1e1e1e;
  border: 1px solid rgba(180,180,180,.2);
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}
.fr-ui-outside .fr-position-text {
  position: relative;
  float: left;
  width: auto;
  text-align: right;
  word-wrap: no-wrap;
  color: #b3b3b3;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  word-wrap: no-wrap;
  padding: 6px 10px;
  height: 13px;
  line-height: 13px;
}

.fr-ui-outside .fr-position-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Info without caption */
.fr-no-caption .fr-info-outside { display: none; } 
.fr-no-caption .fr-info-padder { pointer-events: none; }
.fr-no-caption .fr-info-background { pointer-events: none; opacity: 0; filter: none; display: none;}


/* 1/5 */
.fr-no-caption .fr-position-text,
.fr-ui-outside .fr-position-text {
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

/* outside position */
.fr-ui-outside .fr-position {
  float: none;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 15px;
}


/* IE 7 */
.fr-ltIE8 .fr-info * { zoom: 1;  filter: alpha(opacity=99);   }
.fr-ltIE8 .fr-box * { zoom: 1; filter: alpha(opacity=99); }

/* Info (UI outside) */
.fr-info-outside { bottom: auto; }
.fr-no-caption .fr-info-outside .fr-info-padder { padding: 10px 5px; }
.fr-ui-outside .fr-no-caption .fr-position { margin: 0; }

/* X */
.fr-close {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 47px;
  height: 47px;
  cursor: pointer;
  pointer-events: auto;
}

.fr-close-background,
.fr-close-icon {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 23px;
  width: 23px;
}

.fr-close-background {
  filter: alpha(opacity=80);
  opacity: .8;
  -moz-transition: background-color .2s ease-in;
  -webkit-transition: background-color .2s ease-in;
  transition: background-color .2s ease-in;
  background-color: #282828;
  cursor: pointer;
}
.fr-close:hover .fr-close-background { background-color: #333; }

.fr-ui-outside .fr-close-background { background-color: #363636; }
.fr-ui-outside .fr-close:hover .fr-close-background { background-color: #434343; }


/*
 * Thumbnails
 */ 
.fr-thumbnails {
  position: absolute;
  width: 100%;
  height: 9%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  zoom: 1;
  overflow: hidden;
}
.fr-thumbnails-horizontal {
  left: 0;
  bottom: 0;
  min-height: 40px;
  max-height: 120px;
  padding: 20px 0;
}
.fr-thumbnails-vertical {
  left: 0;
  top: 0;
  min-width: 40px;
  max-width: 120px;
  padding: 0 20px;
}

.fr-thumbnails,
.fr-thumbnails * {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fr-thumbnails-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
}
.fr-thumbnails-vertical .fr-thumbnails-wrapper {
  top: 50%;
  left: 0;
}

.fr-thumbnails-slider {
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
  zoom: 1;
}

.fr-thumbnails-slider-slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.fr-thumbnails-thumbs {
  float: left;
  height: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
}
.fr-thumbnails-slide {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.fr-thumbnail-frame {
  position: absolute;
  zoom: 1;
  overflow: hidden;
}

.fr-thumbnail {
  position: absolute;
  width: 30px;
  height: 100%;
  left: 50%;
  top: 50%;
  zoom: 1;
  cursor: pointer;
  margin: 0 10px;
}
.fr-ltIE9 .fr-thumbnail * {
  overflow: hidden; /* IE6 */
  z-index: 1;
  zoom: 1;
}

.fr-thumbnail-wrapper {
  position: relative;
  background: #161616;
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  display: inline; /* IE6 */
  z-index: 0; /* IE8 */
}

.fr-thumbnail-overlay { cursor: pointer; }
.fr-thumbnail-active .fr-thumbnail-overlay { cursor: default; }
.fr-thumbnail-overlay,
.fr-thumbnail-overlay-background,
.fr-thumbnail-overlay-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fr-thumbnail-overlay-border {
  border-width: 0;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}
.fr-thumbnail img {
  position: absolute;
  filter: alpha(opacity=85);
  opacity: .85;
  max-width: none;
}
.fr-thumbnail:hover img,
.fr-thumbnail-active:hover img {
  filter: alpha(opacity=99);
  opacity: .99;
}
.fr-thumbnail-active img,
.fr-thumbnail-active:hover img  {
  filter: alpha(opacity=35);
  opacity: .35;
}
.fr-thumbnail-active { cursor: default;  }

/* Thumbnails loading */
.fr-thumbnail-loading,
.fr-thumbnail-loading-background,
.fr-thumbnail-loading-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fr-thumbnail-loading-background {
  background-color: #101010;
  background-image: url('styles/tools/fresco/skins/loading.gif');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: .8;
  position: relative;
  float: left;
}
/* this element is there as an alternative to putting the loading image on the background */
.fr-thumbnail-loading-icon { display: none; }


/* Thumbnail < > */
.fr-thumbnails-side {
  float: left;
  height: 100%;
  width: 28px;
  margin: 0 10px;
  position: relative;
  overflow: hidden;
}
.fr-thumbnails-side-previous { margin-left: 20px; }
.fr-thumbnails-side-next { margin-right: 20px; }

.fr-thumbnails-side-button {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -14px; 
  margin-left: -14px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.fr-thumbnails-side-button-background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  filter: alpha(opacity=80);
  opacity: .8;
  -moz-transition: background-color .2s ease-in;
  -webkit-transition: background-color .2s ease-in;
  transition: background-color .2s ease-in;
  background-color: #333;
  cursor: pointer;
  border-radius: 4px;
}
.fr-thumbnails-side-button:hover .fr-thumbnails-side-button-background { background-color: #3b3b3b; }

.fr-thumbnails-side-button-disabled * { cursor: default; }
.fr-thumbnails-side-button-disabled:hover .fr-thumbnails-side-button-background { background-color: #333; }

.fr-thumbnails-side-button-icon {
  height: 42px;
  width: 42px;
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
}

/* vertical thumbnails */
.fr-thumbnails-vertical .fr-thumbnails-side,
.fr-thumbnails-vertical .fr-thumbnails-thumbs,
.fr-thumbnails-vertical .fr-thumbnail-frame { clear: both; }


/* Touch UI */
.fr-frames-has-touch-ui { top: 43px; }

.fr-touch-menu {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 43px;
}
.fr-touch-menu-wrapper {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}

.fr-touch-caption {
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  margin-top: -43px;
}
.fr-touch-menu-wrapper,
.fr-touch-caption-wrapper {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.fr-touch-caption-overflow-scroll { /* TODO */
  overflow-x: hidden;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

.fr-touch-menu-background,
.fr-touch-caption-background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  line-height: 1%;
  filter: alpha(opacity=80);
  opacity: .8;
  zoom: 1;
  background: #000;
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

.fr-touch-caption-info {
  float: left;
  position: relative;
  clear: both;
  padding-right: 38px;
  color: #efefef;
}
.fr-touch-caption-info-padder {
  float: left;
  padding: 11px;
  display: block;
  filter: alpha(opacity=99);
  overflow: hidden;
  width: auto;
  position: relative;
}
.fr-touch-caption-text-wrapper {
  float: left;
  clear: both;
  font-weight: normal;
  font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Verdana, Arial, sans-serif;
  font-size: 13px;
  line-height: 21px;
  height: 21px; /* same as line-height */
  width: 100%;
  overflow: hidden;
}
.fr-touch-caption-text {
  float: left;
}

.fr-touch-caption-overflow .fr-touch-caption-text-wrapper {
  overflow: visible;
  height: auto;
}


/* buttons */
.fr-touch-button {
  padding: 10px 4px;
  width: 23px;
  height: 23px;
  position: relative;
  cursor: pointer;
}
.fr-touch-button .fr-touch-button-background {
  position: absolute;
  top: 10px;
  left: 4px;
  height: 23px;
  width: 23px; 
}
.fr-touch-button .fr-touch-button-background { background-color: #303030; }
.fr-touch-button:hover .fr-touch-button-background { background-color: #404040; }

.fr-touch-button-icon {
  float: left;
  position: relative;
  width: 23px;
  height: 23px;
}
/* x */
.fr-touch-close {
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 11px;
}

/* ... */
.fr-touch-caption-more {
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 11px;
  display: none;
}
.fr-touch-caption-padded .fr-touch-caption-more {
  display: block;
}


/* we can improve things on browsers that support media queries */
@media all and (min-height: 0px) {
  .fr-thumbnails { padding: 10px 0; }
  .fr-thumbnail,
  .fr-thumbnails-side { margin: 0 4px; }
  .fr-thumbnails-side-previous { margin-left: 8px; }
  .fr-thumbnails-side-next { margin-right: 8px; }
  .fr-thumbnail-loading-background { background-image: url('styles/tools/fresco/skins/loading-small.gif'); }
}
@media all and (min-height: 200px) {
  .fr-thumbnails { padding: 12px 0; }
  .fr-thumbnail,
  .fr-thumbnails-side { margin: 0 6px; }
  .fr-thumbnails-side-previous { margin-left: 12px; }
  .fr-thumbnails-side-next { margin-right: 12px; }
}

@media all and (min-height: 350px) {
  .fr-thumbnail-loading-background { background-image: url('styles/tools/fresco/skins/loading-medium.gif'); }
}

@media all and (min-height: 500px) {
  .fr-thumbnails { padding: 14px 0; }
  .fr-thumbnail,
  .fr-thumbnails-side { margin: 0 7px; }
  .fr-thumbnails-side-previous { margin-left: 14px; }
  .fr-thumbnails-side-next { margin-right: 14px; }
}

@media all and (min-height: 700px) {
  .fr-thumbnails { padding: 20px 0; }
  .fr-thumbnail,
  .fr-thumbnails-side { margin: 0 10px; }
  .fr-thumbnails-side-previous { margin-left: 20px; }
  .fr-thumbnails-side-next { margin-right: 20px; }
  .fr-thumbnail-loading-background { background-image: url('styles/tools/fresco/skins/loading.gif'); }
}

/* IE specific resets */
.fr-ltIE8 * { zoom: 1; z-index: 1;}
.fr-ltIE9 .fr-content-image-overlay,
.fr-ltIE9 .fr-has-caption .fr-info-outside .fr-info-background { border: 0; }



/*
 * ===== Skin: Fresco ===== 
 */
/* Sprite */
.fr-window-fresco .fr-side-button-icon,
.fr-window-fresco .fr-close-icon,
.fr-window-fresco .fr-touch-close .fr-touch-button-icon,
.fr-window-fresco .fr-touch-caption-more .fr-touch-button-icon,
.fr-window-fresco .fr-thumbnails-side-button-icon {
  background-image: url('styles/tools/fresco/skins/fresco/sprite.png');
}
/* High-res sprite */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
  .fr-window-fresco .fr-side-button-icon,
  .fr-window-fresco .fr-close-icon,
  .fr-window-fresco .fr-touch-close .fr-touch-button-icon,
  .fr-window-fresco .fr-touch-caption-more .fr-touch-button-icon,
  .fr-window-fresco .fr-side-button-icon {
    background-image: url('styles/tools/fresco/skins/fresco/sprite@x2.png');
    background-size: 500px 500px; /* downscaled 50%, size of original sprite */
  }
}

.fr-window-fresco .fr-box-outer-border { box-shadow: 0 0 5px rgba(0,0,0,.4); }
/* outer-border instead of inner-border example (box and ui px should be the same) */ 
/*
.fr-window-fresco .fr-box-outer-border { border: 10px solid #fff; }
.fr-window-fresco .fr-ui-outer-border { padding: 10px; }
.fr-window-fresco .fr-content-image-overlay { border-width: 0; }
*/

.fr-window-fresco .fr-box-wrapper {
  background: #101010;
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}

.fr-window-fresco .fr-content-image-overlay { 
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, .08);
}
/* remove bottom border if the image has a caption, or add it when it has a caption */
.fr-window-fresco .fr-has-caption .fr-box-has-ui-outside .fr-content-image-overlay { border-bottom-width: 0px; }
.fr-window-fresco .fr-no-caption .fr-box-has-ui-outside .fr-content-image-overlay { border-bottom-width: 1px; }

.fr-window-fresco .fr-ui-outside .fr-position-text {
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.fr-window-fresco .fr-no-caption .fr-info-inside .fr-position-background {
  border: 1px solid rgba(180,180,180,.15);
}
.fr-window-fresco .fr-has-caption .fr-info-inside .fr-info-background {
  border: 1px solid rgba(68,68,68,.1);
  border-top-width: 0;
}
.fr-window-fresco .fr-has-caption .fr-info-outside .fr-info-background {
  border: 1px solid rgba(80,80,80,.25);
  border-top-width: 0;
}

.fr-window-fresco .fr-thumbnail-wrapper { box-shadow: 0 0 3px rgba(0, 0, 0, .3); }
.fr-window-fresco .fr-thumbnail-active .fr-thumbnail-wrapper { box-shadow: 0 0 1px rgba(0, 0, 0, .1);  }


/* < > */
.fr-window-fresco .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: -13px -14px; }
.fr-window-fresco .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -93px -14px; }

.fr-window-fresco .fr-side-previous:hover .fr-side-button .fr-side-button-icon { background-position: -13px -114px; }
.fr-window-fresco .fr-side-next:hover .fr-side-button .fr-side-button-icon { background-position: -93px -114px; }

/* disabled state (IE < 9) */
.fr-window-fresco .fr-side-previous .fr-side-button-disabled .fr-side-button-icon,
.fr-window-fresco .fr-side-previous:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -13px -214px; }
.fr-window-fresco .fr-side-next .fr-side-button-disabled .fr-side-button-icon,
.fr-window-fresco .fr-side-next:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -93px -214px; }

/* < > transition */
.fr-window-fresco:not(.fr-ltIE9) .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: -13px -114px; }
.fr-window-fresco:not(.fr-ltIE9) .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -93px -114px; }
.fr-window-fresco:not(.fr-ltIE9) .fr-side .fr-side-button .fr-side-button-icon {
  -moz-transition: opacity .2s ease-in;
  -webkit-transition: opacity .2s ease-in;
  transition: opacity .2s ease-in;
  opacity: .5;
}
.fr-window-fresco .fr-side:hover .fr-side-button .fr-side-button-icon,
.fr-window-fresco .fr-frame .fr-side .fr-side-button-active .fr-side-button-icon { 
  opacity: 1;
}
/* < > transition (IE < 9) */
.fr-ltIE9 .fr-frame .fr-side-previous .fr-side-button-active .fr-side-button-icon { background-position: -13px -114px; }
.fr-ltIE9 .fr-frame .fr-side-next .fr-side-button-active .fr-side-button-icon { background-position: -93px -114px; }


/* disabled side */
.fr-window-fresco:not(.fr-ltIE9) .fr-ui-outside .fr-side .fr-side-button-disabled .fr-side-button-icon,
.fr-window-fresco:not(.fr-ltIE9) .fr-ui-outside .fr-side .fr-side-button-disabled:hover .fr-side-button-icon { opacity: .2; }
/* on the inside we hide disabled sides */
.fr-window-fresco .fr-ui-inside .fr-side-button-disabled .fr-side-button-icon { background-image: none; }


/* responsive < > */
@media all and (max-width: 568px) and (max-height: 320px),
       all and (max-width: 320px) and (max-height: 568px) {
  .fr-window-fresco .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: 0px -300px; }
  .fr-window-fresco .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -40px -300px; }

  .fr-window-fresco .fr-side-previous:hover .fr-side-button .fr-side-button-icon { background-position: 0px -350px; }
  .fr-window-fresco .fr-side-next:hover .fr-side-button .fr-side-button-icon { background-position: -40px -350px; }

  .fr-window-fresco:not(.fr-ltIE9) .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: 0px -350px; }
  .fr-window-fresco:not(.fr-ltIE9) .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -40px -350px; }
}

/* X */
.fr-window-fresco .fr-close .fr-close-icon { background-position: -169px -9px;}
.fr-window-fresco .fr-close:hover .fr-close-icon { background-position: -210px -9px; }

/* X transition */
.fr-window-fresco:not(.fr-ltIE9) .fr-close .fr-close-icon {
  background-position: -210px -9px;
  -moz-transition: opacity .2s ease-in;
  -webkit-transition: opacity .2s ease-in;
  transition: opacity .2s ease-in;
  opacity: .8;
}
.fr-window-fresco .fr-close:hover .fr-close-icon  { opacity: 1; }

/* Thumbnails */
.fr-window-fresco .fr-thumbnail-wrapper {
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}
.fr-window-fresco .fr-thumbnail-wrapper { box-shadow: 0 0 3px rgba(0, 0, 0, .3); }
.fr-window-fresco .fr-thumbnail-active .fr-thumbnail-wrapper { box-shadow: 0 0 1px rgba(0, 0, 0, .1); }
.fr-window-fresco .fr-thumbnail-wrapper {
  box-shadow: 0 -1px 4px rgba(0, 0, 0, .3);
}
.fr-window-fresco .fr-thumbnail-overlay-border {
  border-width: 1px;
  border-color: rgba(255, 255, 255, .08); /* should remain rgba */
}
/* no inner border on active thumbnail */
.fr-thumbnail-active .fr-thumbnail-overlay-border,
.fr-thumbnail-active:hover .fr-thumbnail-overlay-border { border: 0px; }

/* Thumbnails < > */
.fr-window-fresco .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon { background-position: -160px -41px;}
.fr-window-fresco .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-icon { background-position: -202px -41px; }
.fr-window-fresco .fr-thumbnails-side-next .fr-thumbnails-side-button-icon { background-position: -160px -83px;}
.fr-window-fresco .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-icon { background-position: -202px -83px; }
/* vertical ^ (up/down) adjustments */
.fr-window-fresco .fr-thumbnails-vertical .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon { background-position: -286px -41px;}
.fr-window-fresco .fr-thumbnails-vertical .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-icon { background-position: -328px -41px; }
.fr-window-fresco .fr-thumbnails-vertical .fr-thumbnails-side-next .fr-thumbnails-side-button-icon { background-position: -286px -83px;}
.fr-window-fresco .fr-thumbnails-vertical .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-icon { background-position: -328px -83px; }

/* Thumbnails < > transition */
.fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side .fr-thumbnails-side-button-icon {
  -moz-transition: opacity .2s ease-in;
  -webkit-transition: opacity .2s ease-in;
  transition: opacity .2s ease-in;
  opacity: .8;
}
.fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon,
.fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled { background-position: -160px -41px; }
.fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side-next .fr-thumbnails-side-button-icon,
.fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled { background-position: -202px -83px; }
.fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side:hover .fr-thumbnails-side-button-icon { opacity: 1; }
/* vertical ^ (up/down) adjustments */
.fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-vertical .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon,
.fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-vertical .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled { background-position: -286px -41px; }
.fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-vertical .fr-thumbnails-side-next .fr-thumbnails-side-button-icon,
.fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-vertical .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled { background-position: -328px -83px; }

/* lower opacity on disabled states */
.fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side .fr-thumbnails-side-button-disabled,
.fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side:hover .fr-thumbnails-side-button-disabled { opacity: .5; }

/* lower opacity IE < 9 using images */
.fr-window-fresco.fr-ltIE9 .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon,
.fr-window-fresco.fr-ltIE9 .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon { 
  background-position: -244px -41px;
}
.fr-window-fresco.fr-ltIE9 .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon,
.fr-window-fresco.fr-ltIE9 .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon { 
  background-position: -244px -83px;
}
.fr-window-fresco.fr-ltIE9 .fr-thumbnails-side .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-background,
.fr-window-fresco.fr-ltIE9 .fr-thumbnails-side:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-background { 
  filter: alpha(opacity=50);
}
/* vertical ^ (up/down) adjustments */
.fr-window-fresco.fr-ltIE9 .fr-thumbnails-vertical .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon,
.fr-window-fresco.fr-ltIE9 .fr-thumbnails-vertical .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon { 
  background-position: -370px -41px;
}
.fr-window-fresco.fr-ltIE9 .fr-thumbnails-vertical .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon,
.fr-window-fresco.fr-ltIE9 .fr-thumbnails-vertical .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon { 
  background-position: -370px -83px;
}


/* Touch caption */
/* background */
.fr-window-fresco .fr-touch-menu-background,
.fr-window-fresco .fr-touch-caption-background {
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, .12);
  border-width: 0 0 1px 0;
  box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
.fr-window-fresco .fr-touch-caption-background {
  border-width: 1px 0 0 0;
  box-shadow: 0 -1px 3px rgba(0,0,0, .3);
}

/* smaller text on mobile devices */
@media all and (max-width: 568px) and (max-height: 320px),
       all and (max-width: 320px) and (max-height: 568px) {
  .fr-window-fresco .fr-touch-caption-text-wrapper { font-size: 12px; }
}

/* x */
.fr-window-fresco .fr-touch-close .fr-touch-button-icon { background-position: -169px -9px; }
.fr-window-fresco .fr-touch-close:hover .fr-touch-button-icon { background-position: -210px -9px; }

/* x transition */
.fr-window-fresco:not(.fr-ltIE9) .fr-touch-close .fr-touch-button-icon {
  background-position: -210px -9px;
  -moz-transition: opacity .2s ease-in;
  -webkit-transition: opacity .2s ease-in;
  transition: opacity .2s ease-in;
  opacity: .8;
}
.fr-window-fresco .fr-touch-close .fr-touch-button-icon  { opacity: 1; }

/* ... */
.fr-window-fresco .fr-touch-caption-more .fr-touch-button-icon { background-position: -169px -134px;  }
.fr-window-fresco .fr-touch-caption-more:hover .fr-touch-button-icon { background-position: -210px -134px;  }
/* ... transition */
.fr-window-fresco:not(.fr-ltIE9) .fr-touch-caption-more .fr-touch-button-icon {
  background-position: -210px -134px;
  -moz-transition: opacity .2s ease-in;
  -webkit-transition: opacity .2s ease-in;
  transition: opacity .2s ease-in;
  opacity: .8;
}
.fr-window-fresco .fr-touch-caption-more .fr-touch-button-icon  { opacity: 1; }


/* ... \/ */
.fr-window-fresco .fr-touch-caption-less .fr-touch-button-icon { background-position: -169px -175px;  }
.fr-window-fresco .fr-touch-caption-less:hover .fr-touch-button-icon { background-position: -210px -175px;  }
/* ... \/ transition */
.fr-window-fresco:not(.fr-ltIE9) .fr-touch-caption-less .fr-touch-button-icon {
  background-position: -210px -175px;
  -moz-transition: opacity .2s ease-in;
  -webkit-transition: opacity .2s ease-in;
  transition: opacity .2s ease-in;
  opacity: .8;
}
.fr-window-fresco .fr-touch-caption-less .fr-touch-button-icon  { opacity: 1; }



/*
 * ===== Skin: IE6 (always used there as a fallback) ===== 
 */
.fr-window-IE6 * { zoom: 1; }

/* Sprite */
.fr-window-IE6 .fr-side-button-icon,
.fr-window-IE6 .fr-close-icon,
.fr-window-IE6 .fr-thumbnails-side-button-icon {
  background-image: url('styles/tools/fresco/skins/IE6/sprite.png');
}

/* < > */
.fr-window-IE6 .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: -13px -114px; }
.fr-window-IE6 .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -93px -114px; }

/* disabled */
.fr-window-IE6 .fr-side-previous .fr-side-button-disabled .fr-side-button-icon,
.fr-window-IE6 .fr-side-previous:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -13px -214px; }
.fr-window-IE6 .fr-side-next .fr-side-button-disabled .fr-side-button-icon,
.fr-window-IE6 .fr-side-next:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -93px -214px; }
.fr-window-IE6 .fr-ui-inside .fr-side-button-disabled .fr-side-button-icon { display: none; }


/* responsive < > */
@media all and (max-width: 568px) and (max-height: 320px),
       all and (max-width: 320px) and (max-height: 568px) {
  .fr-window-IE6 .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: 0px -350px; }
  .fr-window-IE6 .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -40px -350px; }

  .fr-window-IE6 .fr-side-previous .fr-side-button-disabled .fr-side-button-icon,
  .fr-window-IE6 .fr-side-previous:hover .fr-side-button-disabled .fr-side-button-icon { background-position: 0px -400px; }
  .fr-window-IE6 .fr-side-next .fr-side-button-disabled .fr-side-button-icon,
  .fr-window-IE6 .fr-side-next:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -40px -400px; }
}


/* X */
.fr-window-IE6 .fr-close .fr-close-icon { background-position: -169px -9px;}
.fr-window-IE6 .fr-close:hover .fr-close-icon { background-position: -210px -9px; }

.fr-window-IE6 .fr-info { filter: alpha(opacity=99);  }
.fr-window-IE6 .fr-ui-outside .fr-info { background: #000; }
.fr-window-IE6 .fr-close-icon { background-color: #232323; }
.fr-window-IE6 .fr-close .fr-close-background { display: none; }

.fr-window-IE6 .fr-info-background { display: none; }
.fr-window-IE6 .fr-has-caption .fr-ui-inside .fr-info,
.fr-window-IE6 .fr-info-outside { background: #0d0d0d; }


.fr-window-IE6 .fr-position { background: #101010; }
.fr-window-IE6 .fr-has-caption .fr-ui-inside .fr-position { background: none; }
.fr-window-IE6 .fr-position .fr-position-background { display: none; }

/* perfect-scrollbar v0.6.7 */
.ps-container{-ms-touch-action:none;overflow:hidden !important}.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block}.ps-container.ps-in-scrolling{pointer-events:none}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:0.9}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:0.9}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-webkit-transition:background-color 0.2s linear,opacity 0.2s linear;-moz-transition:background-color 0.2s linear,opacity 0.2s linear;-o-transition:background-color 0.2s linear,opacity 0.2s linear;transition:background-color 0.2s linear,opacity 0.2s linear;bottom:3px;height:8px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color 0.2s linear;-moz-transition:background-color 0.2s linear;-o-transition:background-color 0.2s linear;transition:background-color 0.2s linear;bottom:0;height:8px}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-webkit-transition:background-color 0.2s linear,opacity 0.2s linear;-moz-transition:background-color 0.2s linear,opacity 0.2s linear;-o-transition:background-color 0.2s linear,opacity 0.2s linear;transition:background-color 0.2s linear,opacity 0.2s linear;right:3px;width:8px}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color 0.2s linear;-moz-transition:background-color 0.2s linear;-o-transition:background-color 0.2s linear;transition:background-color 0.2s linear;right:0;width:8px}.ps-container:hover.ps-in-scrolling{pointer-events:none}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:0.9}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:0.9}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:0.6}.ps-container:hover>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:0.9}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container:hover>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:0.9}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999}
/* ==========================================================================
   $BASE-PICKER
   ========================================================================== */
/**
 * Note: the root picker element should *NOT* be styled more than what’s here.
 */
.picker {
  font-size: 16px;
  text-align: left;
  line-height: 1.2;
  color: #000000;
  position: absolute;
  z-index: 10000;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: 'Aleo';
}
/**
 * The picker input element.
 */
.picker__input {
  cursor: default;
}
/**
 * When the picker is opened, the input element is “activated”.
 */
.picker__input.picker__input--active {
  border-color: #0089ec;
}
/**
 * The holder is the only “scrollable” top-level container element.
 */
.picker__holder {
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/*!
 * Classic picker styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */
/**
 * Note: the root picker element should *NOT* be styled more than what’s here.
 */
.picker {
  width: 100%;
}
/**
 * The holder is the base of the picker.
 */
.picker__holder {
  position: absolute;
  background: #ffffff;
  border: 1px solid #aaaaaa;
  border-top-width: 0;
  border-bottom-width: 0;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 176px;
  max-width: 466px;
  max-height: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  -webkit-transform: translateY(-1em) perspective(600px) rotateX(10deg);
  -moz-transform: translateY(-1em) perspective(600px) rotateX(10deg);
  transform: translateY(-1em) perspective(600px) rotateX(10deg);
  -webkit-transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s;
  -moz-transition: -moz-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s;
}
/**
 * The frame and wrap work together to ensure that
 * clicks within the picker don’t reach the holder.
 */
.picker__frame {
  padding: 1px;
}
.picker__wrap {
  margin: -1px;
}
/**
 * When the picker opens...
 */
.picker--opened .picker__holder {
  max-height: 25em;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
  border-top-width: 1px;
  border-bottom-width: 1px;
  -webkit-transform: translateY(0) perspective(600px) rotateX(0);
  -moz-transform: translateY(0) perspective(600px) rotateX(0);
  transform: translateY(0) perspective(600px) rotateX(0);
  -webkit-transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s;
  -moz-transition: -moz-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s;
  -webkit-box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12);
}
/* ==========================================================================
   $BASE-DATE-PICKER
   ========================================================================== */
/**
 * The picker box.
 */
.picker__box {
  padding: 0 1em;
}
/**
 * The header containing the month and year stuff.
 */
.picker__header {
  text-align: center;
  position: relative;
  margin-top: .75em;
}
/**
 * The month and year labels.
 */
.picker__month,
.picker__year {
  font-weight: 500;
  display: inline-block;
  margin-left: .25em;
  margin-right: .25em;
}
.picker__month {
  font-weight: 700;
}
.picker__year {
  color: #999999;
  font-size: .8em;
  font-style: italic;
}
/**
 * The month and year selectors.
 */
.picker__select--month,
.picker__select--year {
  border: 1px solid #b7b7b7;
  height: 2em;
  padding: .5em;
  margin-left: .25em;
  margin-right: .25em;
}
@media (min-width: 24.5em) {
  .picker__select--month,
  .picker__select--year {
    margin-top: -0.5em;
  }
}
.picker__select--month {
  width: 35%;
}
.picker__select--year {
  width: 22.5%;
}
.picker__select--month:focus,
.picker__select--year:focus {
  border-color: #0089ec;
}
/**
 * The month navigation buttons.
 */
.picker__nav--prev,
.picker__nav--next {
  position: absolute;
  padding: .5em 1.25em;
  width: 1em;
  height: 1em;
  box-sizing: content-box;
  top: -0.25em;
}
@media (min-width: 24.5em) {
  .picker__nav--prev,
  .picker__nav--next {
    top: -0.33em;
  }
}
.picker__nav--prev {
  left: -1em;
  padding-right: 1.25em;
}
@media (min-width: 24.5em) {
  .picker__nav--prev {
    padding-right: 1.5em;
  }
}
.picker__nav--next {
  right: -1em;
  padding-left: 1.25em;
}
@media (min-width: 24.5em) {
  .picker__nav--next {
    padding-left: 1.5em;
  }
}
.picker__nav--prev:before,
.picker__nav--next:before {
  content: " ";
  border-top: .5em solid transparent;
  border-bottom: .5em solid transparent;
  border-right: 0.75em solid #000000;
  width: 0;
  height: 0;
  display: block;
  margin: 0 auto;
}
.picker__nav--next:before {
  border-right: 0;
  border-left: 0.75em solid #000000;
}
.picker__nav--prev:hover,
.picker__nav--next:hover {
  cursor: pointer;
  color: #000000;
  background: #cfb589;
}
.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
  cursor: default;
  background: none;
  border-right-color: #f5f5f5;
  border-left-color: #f5f5f5;
}
/**
 * The calendar table of dates
 */
.picker__table {
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-size: inherit;
  width: 100%;
  margin-top: .75em;
  margin-bottom: .5em;
}
@media (min-height: 33.875em) {
  .picker__table {
    margin-bottom: .75em;
  }
}
.picker__table td {
  margin: 0;
  padding: 0;
}
/**
 * The weekday labels
 */
.picker__weekday {
  width: 14.285714286%;
  font-size: .75em;
  padding-bottom: .25em;
  color: #999999;
  font-weight: 500;
  /* Increase the spacing a tad */
}
@media (min-height: 33.875em) {
  .picker__weekday {
    padding-bottom: .5em;
  }
}
/**
 * The days on the calendar
 */
.picker__day {
  padding: .3125em 0;
  font-weight: 200;
  border: 1px solid transparent;
}
.picker__day--today {
  position: relative;
}
.picker__day--today:before {
  content: " ";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 0;
  height: 0;
  border-top: 0.5em solid rgba(42, 56, 65, 0.6);
  border-left: .5em solid transparent;
}
.picker__day--disabled:before {
  border-top-color: #aaaaaa;
}
.picker__day--outfocus {
  color: #dddddd;
}
.picker__day--infocus:hover,
.picker__day--outfocus:hover {
  cursor: pointer;
  color: #000000;
  background: #cfb589;
}
.picker__day--highlighted {
  border-color: #5e666b;
}
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
  cursor: pointer;
  color: #000000;
  background: #cfb589;
}
.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
  background: #5e666b;
  color: #ffffff;
}
.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #dddddd;
  cursor: default;
}
.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
  background: #bbbbbb;
}
/**
 * The footer containing the "today", "clear", and "close" buttons.
 */
.picker__footer {
  text-align: center;
}
.picker__button--today,
.picker__button--clear,
.picker__button--close {
  border: 1px solid #ffffff;
  background: #ffffff;
  font-size: .8em;
  padding: .66em 0;
  font-weight: bold;
  width: 33%;
  display: inline-block;
  vertical-align: bottom;
}
.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
  cursor: pointer;
  color: #000000;
  background: #b1dcfb;
  border-bottom-color: #b1dcfb;
}
.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
  background: #b1dcfb;
  border-color: #0089ec;
  outline: none;
}
.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
  position: relative;
  display: inline-block;
  height: 0;
}
.picker__button--today:before,
.picker__button--clear:before {
  content: " ";
  margin-right: .45em;
}
.picker__button--today:before {
  top: -0.05em;
  width: 0;
  border-top: 0.66em solid #0059bc;
  border-left: .66em solid transparent;
}
.picker__button--clear:before {
  top: -0.25em;
  width: .66em;
  border-top: 3px solid #ee2200;
}
.picker__button--close:before {
  content: "\D7";
  top: -0.1em;
  vertical-align: top;
  font-size: 1.1em;
  margin-right: .35em;
  color: #777777;
}
.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #dddddd;
  cursor: default;
}
.picker__button--today[disabled]:before {
  border-top-color: #aaaaaa;
}

/* ==========================================================================
   $CLASSIC-DATE-PICKER
   ========================================================================== */
/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage header styles
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id: header.css 1396 2016-09-07 13:55:44Z mueller $
 **/

/*  =========================================================
basic config
functions
statics
offCanvas navi
offCanvas filter and forms
offCanvas autocomplete
offCanvas mapInfoBoard
request offer form
========================================================== */


/*  =========================================================
basic config
========================================================= */
@media screen {
  #siteHeader{
    width: 100%; height: 85px;
    background: #0b3344;
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.3);
    position: fixed; top: 0px; left: 0px;
    transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px);
  }

  /*general offCanvas Styles*/
  .siteHeader__offCanvas{
    position: absolute; left: 0; top: 100%;
    width: 100%; display: none;
    background: #fff;
    box-sizing: border-box;
  }

  input:checked ~ .siteHeader__offCanvas,
  *.active > .siteHeader__offCanvas{
    display: block;
  }
}

@media screen and (max-width: 1000px){
  #siteHeader{ height: 75px;}
}

@media screen and (max-width: 775px){
  #siteHeader.mobile{
    height: 50px;
  }
}

@media screen and (max-width: 450px){
  #siteHeader{
    position: relative;
    padding-top: 50px; margin-top: -100px;
  }
  #siteHeader.fixed{
    position: fixed;
    margin-top: -50px;
  }
}

/*  =========================================================
functions
========================================================= */
@media screen {
  #siteHeader__functions{
    float: left;
  }
  #siteHeader__functions > ul{
    padding: 0px; margin: 0px;
    list-style: none;
  }
  #siteHeader__functions > ul > li{
    display: inline-block;
    vertical-align: top;
  }
  #siteHeader__functions > ul > li > .siteHeader__function{
    cursor: pointer; display: block;
    height: 65px; padding: 10px 20px;
    text-decoration: none; color: #fff;
    transition: background 0.5s ease; -moz-transition: background 0.5s ease; -webkit-transition: background 0.5s ease;
  }
  #siteHeader__functions > ul > li:not(:first-of-type) > .siteHeader__function > .verticalAlignMiddle{
    border-left: 1px rgba(255, 255, 255, 0.2) solid;
    margin: 0px 20px 0px -20px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > span{
    display: inline-block; vertical-align: middle;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > .smallText{
    font: 700 italic 18px/20px 'Max', Arial, sans-serif;
    text-align: left;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > :not([class]){
    font: 400 normal 30px/40px 'Max', Arial, sans-serif;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > [class^='icon-']{ font-size: 50px;}

  /*hover states*/
  #siteHeader__functions > ul > li > input:active + label.siteHeader__function,
  #siteHeader__functions > ul > li > input:focus + label.siteHeader__function,
  #siteHeader__functions > ul > li > input:hover + label.siteHeader__function,
  #siteHeader__functions > ul > li > a.siteHeader__function:active,
  #siteHeader__functions > ul > li > a.siteHeader__function:focus,
  #siteHeader__functions > ul > li > a.siteHeader__function:hover{
    background: rgba(255, 255, 255, 0.5);
  }
  #siteHeader__functions > ul > li > input:checked + .siteHeader__function{
    background: #fff!important; color: #0b3344;
  }
  #siteHeader__functions > ul > li > input:checked + .siteHeader__function > [class^='icon-']:before{ content: '\e606';}
}

@media screen and (max-width: 1000px){
  #siteHeader__functions > ul > li > .siteHeader__function{
    height: 55px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > .smallText{ font-size: 16px; line-height: 18px;}
  #siteHeader__functions > ul > li > .siteHeader__function > :not([class]){ font-size: 20px; line-height: 25px;}
  #siteHeader__functions > ul > li > .siteHeader__function > [class^='icon-']{ font-size: 40px;}
}

@media screen and (max-width: 775px){
  #siteHeader__functions > ul > li > .siteHeader__function{
    height: 40px; padding: 5px 8px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > .smallText{ display: none;}
  #siteHeader__functions > ul > li > .siteHeader__function > :not([class]){ display: none;}
  #siteHeader__functions > ul > li > .siteHeader__function > [class^='icon-']{ font-size: 30px;}

  #siteHeader__functions > ul > li:not(:first-of-type) > .siteHeader__function > .verticalAlignMiddle{
    margin: 0px 10px 0px -10px;
  }
}

/*  =========================================================
statics
========================================================= */
@media screen {
  #siteHeader__statics{
    float: right;
  }
  #siteHeader__statics > a.logo{
    height: 39px; margin: 10px 0px; padding: 13px 25px;
    text-decoration: none;
    display: inline-block; vertical-align: top;
    border-left: 1px rgba(255, 255, 255, 0.2) solid;
  }
  #siteHeader__statics > a.logo > img{
    width: auto; height: 100%;
    display: inline-block; vertical-align: middle;
  }

  #siteHeader__fulltextsearch{
    display: inline-block; vertical-align: middle;
    height: 100%; padding: 0px;
  }

  #siteHeader__fulltextsearch > form{
    height: 40px; padding: 23px 25px 22px 25px;
  }
  #siteHeader__fulltextsearch > form:hover{ background: #fff;}

  #siteHeader__fulltextsearch > form > input{
    box-sizing: border-box;
    width: 225px; height: 100%;
    padding: 0px 50px 0px 10px; border: none;
    font: 400 italic 20px 'Max', Arial, sans-serif;
    background: #fff; color: #0b3344;
    border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.35); -moz-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.35); -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.35);
    vertical-align: middle;
  }
  #siteHeader__fulltextsearch > form > button{
    border: none; background: none;
    height: 100%;
    vertical-align: middle;
    width: 50px; margin-left: -50px;
  }
  #siteHeader__fulltextsearch > form > button > span{
    font-size: 35px; color: #0b3344;
  }
  /*hide button in desktop screen*/
  #siteHeader__fulltextsearch > [for='siteHeader__statics__search']{
    display: none; color: #fff;
  }

  /*hover states*/
  #siteHeader__statics__search:active + label,
  #siteHeader__statics__search:focus + label,
  #siteHeader__statics__search:hover + label{
    background: rgba(255, 255, 255, 0.5);
  }
  #siteHeader__statics__search:checked + label{
    background: #fff; color: #0b3344;
  }
}

@media screen and (max-width: 1000px){
  #siteHeader__statics > a.logo{ height: 29px;}

  #siteHeader__fulltextsearch > form{
    position: absolute; left: 0; top: 100%;
    width: 90%; padding: 20px 5%;
    background: #fff;
    display: none;
  }
  #siteHeader__statics__search:checked ~ form{
    display: flex;
  }
  #siteHeader__fulltextsearch > form > input{
    width: 100%;
  }

  #siteHeader__fulltextsearch > [for='siteHeader__statics__search']{
    display: block;
    height: 55px; padding: 10px 20px;
  }
  #siteHeader__fulltextsearch > [for='siteHeader__statics__search'] > [class^='icon-']{
    display: inline-block; vertical-align: middle;
    font-size: 40px;
  }
}

@media screen and (max-width: 775px){
  #siteHeader__statics > a.logo{
    margin: 5px 0px; height: 24px; padding: 8px 15px;
  }

  #siteHeader__fulltextsearch > [for='siteHeader__statics__search']{
    height: 40px; padding: 5px 8px;
  }
  #siteHeader__fulltextsearch > [for='siteHeader__statics__search'] > [class^='icon-']{ font-size: 30px;}
}

@media screen and (max-width: 450px){
  #siteHeader__statics{
    float: left;
    border-left: 1px rgba(255, 255, 255, 0.2) solid;
  }


  #siteHeader__statics > a.logo{
    position: absolute; top: 0px; left: 0px;
    padding: 8px 0px 10px 0px; margin: 0px; border: none;
    width: 100%; height: 32px;
    background: rgba(0, 0, 0, 0.1);
  }
}

/*  =========================================================
offCanvas navi
========================================================= */
@media screen {
  #mainNavi{
    padding: 30px 0px;
    text-align: left;
    overflow-y: auto!important;
  }
  #mainNavi a{ text-decoration: none;}
  #mainNavi ul{ list-style: none;}

  .mainNavi__firstLayer{ padding: 0px; overflow: hidden;}
  .mainNavi__firstLayer > li > a{
    font: 700 normal 25px 'Max'; color: #0b3344;
    display: block;
    padding: 10px 0px;
  }

  .mainNavi__secondLayer{
    padding: 0px; margin-bottom: 20px;
  }
  .mainNavi__secondLayer > li{
    border-top: 1px rgba(11, 51, 68, 0.3) solid;
  }
  .mainNavi__secondLayer > li > a::before{
    width: 20px; height: 100%; display: inline-block;
    font: 400 normal 16px 'icomoon'; font-variant: normal; text-transform: none;
    color: #0b3344;
    content: '\e602';
    transition: transform 0.25s ease; -moz-transition: -moz-transform 0.25s ease; -webkit-transition: -webkit-transform 0.25s ease;
    margin-left: -20px;
  }
  .mainNavi__secondLayer > li > a{
    font: 400 italic 20px 'Max', Arial, sans-serif; color: #0b3344;
    display: block; padding: 15px 0px 15px 20px;
  }

  .mainNavi__thirdLayer{
    padding-left: 20px; margin-left: 20px;
    max-height: 0px; overflow: hidden;
    transition: max-height 1s linear; -moz-transition: max-height 1s linear; -webkit-transition: max-height 1s linear;
  }
  .mainNavi__thirdLayer > li{
    border-top: 1px rgba(11, 51, 68, 0.3) solid;
  }
  .mainNavi__thirdLayer > li:first-of-type{
    margin-left: -20px; padding-left: 20px;
  }
  .mainNavi__thirdLayer > li > a{
    display: block; padding: 10px 0px;
    font: 400 italic 16px 'Max', Arial, sans-serif; color: #416371;
  }
}
@media screen and (min-width: 901px){
  /*hover states*/
  .no-touch .mainNavi__secondLayer > li > a:active::before,
  .no-touch .mainNavi__secondLayer > li > a:focus::before,
  .no-touch .mainNavi__secondLayer > li:hover > a::before,
  .no-touch .mainNavi__secondLayer > li.active > a::before{
    transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg);
  }

  .no-touch .mainNavi__secondLayer > li > a:active ~ ul,
  .no-touch .mainNavi__secondLayer > li > a:focus ~ ul,
  .no-touch .mainNavi__secondLayer > li:hover > ul,
  .no-touch .mainNavi__secondLayer > li.active > ul{
    max-height: 1000px;
  }
}
@media screen {
  #mainNavi.mobile .mainNavi__secondLayer > li > label::before{
    width: 17px; height: 100%; display: inline-block;
    font: 400 normal 16px 'icomoon'; font-variant: normal; text-transform: none;
    color: #0b3344;
    content: '\e602';
    transition: transform 0.25s ease; -moz-transition: -moz-transform 0.25s ease; -webkit-transition: -webkit-transform 0.25s ease;
    margin-left: -20px;
    vertical-align: top;
    margin-top: 15px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a {
    padding-left: 0px;
    display: inline-block;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a::before{
    display: none;
  }
  #mainNavi.mobile{ padding: 0px;}
  #mainNavi.mobile .mainNavi__secondLayer > li{ margin-left: 20px;}
  #mainNavi.mobile .mainNavi__secondLayer > li > a{ padding-left: 0px;}
  #mainNavi.mobile .mainNavi__secondLayer > li:first-of-type{
    margin-left: 0px; padding-left: 20px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a{
    display: inline-block;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a::before{ display: none;}
  #mainNavi.mobile .mainNavi__secondLayer > li > input[type=checkbox]:checked ~ ul{
    max-height: 1000px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li >  input[type=checkbox]:checked + label:before{
    transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg);
  }
  #mainNavi.mobile .mainNavi__firstLayer > li:not(:first-of-type){
    border-top: 1px rgba(42, 56, 65, 0.3) solid;
  }
  section.offCanvas--open{
    display: none;
  }
}
/*  =========================================================
offCanvas filter and forms
========================================================= */
@media screen {
  /*basic frame styles*/
  form.siteHeader__offCanvas{ text-align: left;}
  form.siteHeader__offCanvas > fieldset{
    display: block;
    padding: 10px 20px 0px 20px; border: none;
  }
  form.siteHeader__offCanvas > fieldset:not(:last-of-type){
    border-bottom: 1px rgba(11, 51, 68, 0.3) solid;
  }

  form.siteHeader__offCanvas > fieldset > legend{ display: none;}

  form.siteHeader__offCanvas > fieldset > div{
    display: inline-block;
    margin-right: 10px; margin-bottom: 10px;
  }
  form.siteHeader__offCanvas > fieldset > div.border{
    margin-left: 10px; padding-left: 20px;
    border-left: 1px rgba(11, 51, 68, 0.3) solid;
  }
  form.siteHeader__offCanvas > fieldset > span{
    display: inline-block; vertical-align: middle;
    margin: 10px 30px 10px 0px;
  }

  form.siteHeader__offCanvas label{ color: #0b3344;}

  form.siteHeader__offCanvas > fieldset > div > input[type=text].calendar{ width: 160px;}
  #siteHeader__hostSearch{
    box-sizing: border-box;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,.35);
  }
  #siteHeader__hostSearch__city{ width: 315px; }
  #siteHeader__hostSearch__persons,
  #siteHeader__hostSearch__children{ width: 85px;}
  #siteHeader__hostSearch select[name^='childrenAge']{ width: 60px; margin-right: 5px;}
  #siteHeader__filter__priceFrom, #siteHeader__filter__priceTo{ width: 115px;}

  form.siteHeader__offCanvas > fieldset > div > input.styled[type=checkbox] + label > [class^='icon-']{
    border-color: #333;
  }
  form.siteHeader__offCanvas > fieldset > div > input.styled[type=checkbox]:checked  + label > [class^='icon-']{
    background: #333; color: #fff;
  }
  form.siteHeader__offCanvas > fieldset > div > input.styled[type=checkbox]:checked + label > [class^='icon-']{
    color: #fff;
  }

  /*faked dropdown inputs*/
  form.siteHeader__offCanvas > fieldset > .fakeInput{
    height: 28px; padding: 7px 10px 0px; border: none; margin: 5px 10px 10px 0px;
    cursor: pointer;
    position: relative;

    background: #fff; color: #333;
    border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput.active{
    margin: 0px 5px -20px -5px;
    border: 5px #fff solid; border-bottom-width: 20px;
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35), 2px 2px 1px rgba(0, 0, 0, 0.3);
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > label{
    font: 400 normal 18px 'Max', Arial, sans-serif;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > label > [class^='icon-']{
    font-size: 14px;
    border: 3px #333 solid; margin-left: 5px;
    color: #fff; background: #333;
    display: inline-block;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > input[type=checkbox]:checked + label > [class^='icon-']{
    transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);
  }

  form.siteHeader__offCanvas > fieldset > .fakeInput > div{
    padding: 12px 20px 10px 10px;
    width: 250px;
    display: none;
    background: #fff;
    position: absolute; left: -5px; top: 40px; z-index: 1;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > input[type=checkbox]:checked ~ div{
    display: block;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label{
    font: 400 normal 16px 'Max', Arial, sans-serif; color: #0b3344;
    display: block; margin: 0px 0px 10px 0px; padding: 0px 100px 0px 25px;
    position: relative;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label > [class^='icon-']{ margin-left: -25px;}
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > input[type=checkbox]:checked + label > [class^='icon-']{ color: #fff;}
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label > .hits{
    font: 400 italic 12px 'Max', Arial, sans-serif; color: #0b3344; text-align: right;
    position: absolute; top: 3px; right: 0px;
  }

  /* quick search*/
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div.children-dependant > select:not(:last-of-type) ,
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div.children-dependant > select:not(:last-of-type) {
    margin-right: 14px;
  }
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div.dateUnknown > input.styled[type=checkbox] + label > [class^='icon-'],
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div.dateUnknown > input.styled[type=checkbox] + label > [class^='icon-']{
    border-color: #333;
  }
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div.dateUnknown > input.styled[type=checkbox]:checked + label > [class^='icon-'] ,
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div.dateUnknown > input.styled[type=checkbox]:checked + label > [class^='icon-'] {
    background: #000;
    color: #fff;
  }
  li.aroundMe > form.siteHeader__offCanvas,
  li.quickSearch > form.siteHeader__offCanvas{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  /*button styles*/
  form.siteHeader__offCanvas .button{
    border-color: #fff;
    float: right; margin-top: 10px; margin-bottom: 10px;
  }
}

@media screen and (min-width: 600px){
  form.siteHeader__offCanvas > fieldset.filterDropDowns{ padding-right: 120px;}
  form.siteHeader__offCanvas .filterDropDowns .button{ margin-right: -100px;}
}

@media screen and (max-width: 1000px){
  form.siteHeader__offCanvas > fieldset > div.border{
    margin-left: 0px; padding-left: 0px;
    border-left: none;
  }
}

@media screen and (max-width: 600px){
  form.siteHeader__offCanvas > fieldset > div:not([class*='fakeInput']){ width: 100%;}
  form.siteHeader__offCanvas > fieldset > div > input[type=text]{ width: 100%!important;}

  form.siteHeader__offCanvas > fieldset > .fakeInput > label{ font-size: 14px;}
  form.siteHeader__offCanvas > fieldset > .fakeInput > div{ width: 200px;}
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label > .hits{ display: none;}
}

/*  =========================================================
offCanvas autocomplete
========================================================= */
@media screen {
  #siteHeader__fulltextsearch > form:hover #siteHeader__fulltextsearch__autocomplete{
    display: block;
  }
  #siteHeader__fulltextsearch__autocomplete{ text-align: left;}
  #siteHeader__fulltextsearch__autocomplete h3,
  .item.type-title h3{
    font: 700 normal 25px 'Max'; color: #0b3344;
    margin: 20px 0px 15px 0px;
  }

  /*autocomplete teaser*/
  .autocompleteTeaser{ margin-bottom: 25px;}
  .autocompleteTeaser > .image{
    width: 34.66% /*130/375*/; height: 0px; overflow: hidden;
    padding-bottom: 21.33% /*80/375*/; margin-right: 2.66% /*10/375*/;
    display: inline-block; vertical-align: top;
  }
  .autocompleteTeaser > .text{
    width: 62.66% /*235/375*/;
    display: inline-block; vertical-align: top;
  }
  .autocompleteTeaser > .text a{
    text-decoration: none;
  }
  .autocompleteTeaser h4{
    font: 400 normal 20px 'Max', Arial, sans-serif; color: #0b3344;
    margin: 0px;
  }
  .autocompleteTeaser h5{
    font: 400 italic 13px 'Max', Arial, sans-serif; color: #0b3344;
    margin: 0px;
  }

  /*autocomplete suggestions*/
  .autocompleteSuggestions{
    margin: 0px 0px 25px 0px; padding: 7px 10px 10px 10px;
    list-style: none;
    background: #fff;
    border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
  }
  .autocompleteSuggestions > li:not(:last-of-type){
    border-bottom: 1px rgba(11, 51, 68, 0.3) solid;
  }
  .autocompleteSuggestions > li{
    display: block; position: relative;
    padding: 8px 0px 6px 0px;
    font: 400 normal 21px 'Max', Arial, sans-serif; color: #0b3344;
  }
  .autocompleteSuggestions > li > a{
    text-decoration: none;
    display: block; padding-right: 100px;
  }
  .autocompleteSuggestions > li strong{
    font: inherit;
    background: #0b3344; color: #fff;
  }
  .autocompleteSuggestions > li .hits{
    position: absolute; top: 12px; right: 0px;
    text-align: right;
    font: 400 italic 14px 'Max', Arial, sans-serif;
  }
  .autocompleteSuggestions .type-city.selected,
  .autocompleteSuggestions .type-event.selected,
  .autocompleteSuggestions .type-offer.selected,
  .autocompleteSuggestions .type-suggest.selected {
    background: #416371 !important;
  }
}
@media screen and (max-width: 1000px){
  #siteHeader__fulltextsearch__autocomplete h3,
  .item.type-title h3  {
    margin: 0px 0px 5px 0px;
  }
}
@media screen and (max-width: 600px){
  #siteHeader__fulltextsearch__autocomplete h3,
  .item.type-title h3  {
    display: none;
  }

  .autocompleteSuggestions > li{ font-size: 16px;}
  .autocompleteSuggestions > li .hits{ display: none;}
}

/*  =========================================================
offCanvas mapInfoBoard
========================================================= */
@media screen {
  #mapInfoBoard{ overflow-y: auto!important;}
}
@media screen and (min-width: 1401px) {
  #mapInfoBoard{ width: 35%;}
}
@media screen and (max-width: 1400px) and (min-width: 901px) {
  #mapInfoBoard{ width: 50%;}
}
@media screen and (max-width: 900px){
  #mapInfoBoard{ width: 100%;}
}

@media screen {
  #mapInfoBoard > .mapInfoBoard__content{
    width: 88.617%/*545/615*/; padding: 50px 5.691%/*35/615*/;
  }
  #mapInfoBoard > .mapInfoBoard__content > h1{
    font: 700 normal 40px 'Daniel'; color: #0b3344;
    margin: 0px 0px 20px 0px;
  }
  #mapInfoBoard > .mapInfoBoard__content > p{
    font: 400 italic 18px/30px 'Max', Arial, sans-serif; color: #0b3344;
    margin: 0px 0px 20px 0px;
  }
  #mapInfoBoard > .mapInfoBoard__content > .image{
    width: 100%; overflow: hidden;
    margin-bottom: 20px;
  }
  #mapInfoBoard > .mapInfoBoard__content > .image > img{
    width: 100%; height: auto;
  }
}

/*  =========================================================
request offer form
========================================================= */

#siteHeader__requestOffer .remember-list li {
  font: 400 normal 21px/24px 'Max';
}
#siteHeader__requestOffer__success p,
#siteHeader__requestOffer .mandatoryFields {
  font: 400 normal 24px/58px 'Max';
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage keyvisual styles
 * @author     gueldner
 * @since      23.06.2014
 * @version    $Id: keyvisual.css 1456 2017-03-02 13:58:57Z hofmann $
 **/

/*  =========================================================
basic config
pagination
keyvisual text
breadcrumb navi
========================================================== */


/*  =========================================================
basic config
========================================================= */
@media screen {
  #keyvisual{
    width: 100%; height: 690px;
    border-bottom: 5px #0b3344 solid;
    position: relative;
    background: #85959b;
  }
  #keyvisual.indexPage{ height: 950px;}

  #keyvisual > .keyvisualCroped{
    width: 100%; height: 100%; overflow: hidden;
    position: relative;
  }

  #keyvisual > .keyvisualCroped > .image{
    width: 100%; height: 100%;
    overflow: hidden;
    position: absolute; top: 0%; left: 0%;
    transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1);
    transition: opacity 0.5s ease, transform 0.5s ease; -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease; -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    display: none;
  }
  /* override top position to spare some space for breadcrumb */
  #keyvisual > .keyvisualCroped > .image > .copyright{ top: 50px;}
  #keyvisual > .keyvisualCroped > .image > picture,
  #keyvisual > .keyvisualCroped > .image > noscript{
    position: absolute; top: 0px; left: 0px;
    height: 100%; width: 100%;
  }
  #keyvisual > .keyvisualCroped > .image > picture > img,
  #keyvisual > .keyvisualCroped > .image > noscript > img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  #keyvisual > .keyvisualCroped > .image.positioned{
    transition: left 1s ease; -moz-transition: left 1s ease; -webkit-transition: left 1s ease;
    transform: scale(0.9)!important; -moz-transform: scale(0.9)!important; -webkit-transform: scale(0.9)!important; -ms-transform: scale(0.9)!important;
  }
  #keyvisual > .keyvisualCroped > .image.left{ left: -100%;}
  #keyvisual > .keyvisualCroped > .image.right{ left: 100%;}

  #keyvisual > .keyvisualCroped > .image.active{
    left: 0%;
    transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1);
    z-index: 1;
  }
  #keyvisual > .keyvisualCroped > .image.last{
    left: 0%;
    opacity: 0.25;
    transform: scale(0.75); -moz-transform: scale(0.75); -webkit-transform: scale(0.75); -ms-transform: scale(0.75);
  }
  #keyvisual > .keyvisualCroped > .image.left,
  #keyvisual > .keyvisualCroped > .image.right,
  #keyvisual > .keyvisualCroped > .image.active,
  #keyvisual > .keyvisualCroped > .image.last{ display: block;}
  #keyvisual > .keyvisualCroped > .keyvisualVideo .videoPlayButton > img{
    height: 150px;
    margin-left: -40px;
  }
}
@media screen and (max-width: 600px){
  #breadcrumb + #keyvisual{ margin-top: 0px;}
}
@media screen and (max-height: 500px){
  #keyvisual.indexPage,
  #keyvisual
  { height: 350px}
}
@media screen and (min-height: 501px){
  #keyvisual.indexPage,
  #keyvisual
  { height: 450px}
}
@media screen and (min-height: 601px){
  #keyvisual.indexPage,
  #keyvisual
  { height: 550px}
}
@media screen and (min-height: 701px){
  #keyvisual.indexPage,
  #keyvisual
  { height: 650px}
}
@media screen and (min-height: 801px){
  #keyvisual:not(.indexPage){ height: 690px}
  #keyvisual.indexPage{ height: 750px}
}
@media screen and (min-height: 901px){
  #keyvisual.indexPage{ height: 850px}
}
@media screen and (min-height: 1000px){
  #keyvisual.indexPage{ height: 950px}
}

@media screen and (min-aspect-ratio: 7/3){
  #keyvisual > .keyvisualCroped > .image > picture img,
  #keyvisual > .keyvisualCroped > .image > noscript img{
    width: 100%; height: auto;
    margin: 0px;
  }
}
@media screen {
  #keyvisual > .badge.hotelBadge,
  #keyvisual > .badge {
    bottom: 73px;
    height: 500px;
  }
}

/*  =========================================================
pagination
========================================================= */
@media screen {
  .pagination{
    position: absolute; top: 50%; z-index: 3;
    margin-top: -42px;
    width: 85px; height: 85px;
    box-sizing: border-box;
    color: #fff;
    background: rgba(0,0,0,0);
    text-decoration: none; text-align: center;
    transition: left 0.25s ease, right 0.25s ease;
  }
  .pagination.pagination--left{ left: 0px;}
  .pagination.pagination--right{ right: -70px;}

  .no-touch .pagination.pagination--left:active,
  .no-touch .pagination.pagination--left:focus,
  .no-touch .pagination.pagination--left:hover{
    transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);
  }
  .no-touch .pagination.pagination--right:active,
  .no-touch .pagination.pagination--right:focus,
  .no-touch .pagination.pagination--right:hover{
    transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);
  }

  .pagination > span{
    display: block;
    font-size: 80px; line-height: 85px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  }

  #keyvisual.animated > .keyvisualCroped > .pagination.pagination--left{ left: -85px;}
  #keyvisual.animated > .keyvisualCroped > .pagination.pagination--right{ right: -85px;}
}
@media screen and (max-width: 600px){
  .pagination{ display: none;}
}

/*  =========================================================
keyvisual text
========================================================= */
/* general styling */
@media screen {
  .keyvisual__image__text{
    position: absolute; top: 50%; left: 0px;
    width: 100%; box-sizing: border-box;
    text-align: center;
    transform: translateY(-50%);
    padding: 0px 25px;
  }

  .keyvisualCroped > .keyvisual__image__text{ z-index: 2;}
}

/* title */
@media screen {
  .keyvisual__image__text > h1,
  .keyvisual__image__text > h2{
    font: 400 normal 100px/1.25em 'Daniel'; letter-spacing: -5px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    display: inline-block; margin: 0px 0px 35px 0px;
  }
  .keyvisual__image__text > h1 > strong,
  .keyvisual__image__text > h2 > strong{
    font-weight: 700; font-size: 1.25em; line-height: 1em;
  }
}
@media screen and (max-width: 1200px){
  .keyvisual__image__text > h1,
  .keyvisual__image__text > h2{
    font-size: 80px;
  }
}
@media screen and (max-width: 1000px){
  .keyvisual__image__text > h1,
  .keyvisual__image__text > h2{
    font-size: 60px;
  }
}
@media screen and (max-width: 600px){
  .keyvisual__image__text > h1,
  .keyvisual__image__text > h2{
    font-size: 40px;
  }
}
/* highlight badge */
@media screen {
  .keyvisual__image__text > h1.highlight:before,
  .keyvisual__image__text > h2.highlight:before{
    content: '';
    display: inline-block; width: 88px; height: 74px;
    background: url('projects/foehr/images/environment/logoBadge.svg') 0px 0px no-repeat;
    background-size: contain;

    position: relative; top: -50px; left: -25px;
  }
}
@media screen and (max-width: 900px){
  .keyvisual__image__text > h1.highlight:before,
  .keyvisual__image__text > h2.highlight:before{
    display: block;
    background-position: 50% 0%;
    width: 100%; height: 33px;
    margin-bottom: 20px;
    position: static;
  }
}

/* link with buttonBox */
@media screen {
  .keyvisual__image__text > a{
    text-decoration: none;
  }
}
@media screen {
  .keyvisual__image__text > a{
    position: relative;
    display: block; width: 45%;
    margin: 0px 25% 0px 35%;
    font: 400 normal 22px/35px 'Max', Arial, sans-serif; text-align: right;
    color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
  }
}
@media screen and (max-width: 1000px){
  .keyvisual__image__text > a > span{
    display: none;
  }
}
@media screen {
  .keyvisual__image__text > a:after{
    content: '\e61d';
    font: 400 normal 30px/45px 'icomoon'; text-align: center;

    width: 45px; height: 45px;
    background: #fff; color: #0b3344;

    border-radius: 10px; text-shadow: none;
  }
}
@media screen and (min-width: 1001px){
  .keyvisual__image__text > a:after{
    display: block;
    position: absolute; top: 50%; left: 100%;
    margin-left: 15px;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 1000px){
  .keyvisual__image__text > a:after{
    display: inline-block;
  }
}

/* simple text */
@media screen {
  .keyvisual__image__text > p{
    font: 400 normal 25px/1.25em 'Max';
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    display: block; margin: 0px;
  }
  .keyvisual__image__text > p > [class*='icon']{
    font-size: 2em; margin: 0px 2px;
  }
}
@media screen and (max-width: 600px){
  .keyvisual__image__text > p{
    font-size: 20px;
  }
  .keyvisual__image__text > p > [class*='icon']{
    font-size: 1.5em;
  }
}
/* video play button */
@media screen and (max-height: 700px){
  #keyvisual > .keyvisualCroped > .image .videoPlayButton{
    bottom: initial;
  }
}
/*  =========================================================
breadcrumb navi
========================================================= */
@media screen {
  #breadcrumb{
    width: 100%; padding: 20px 0px;
    background: #416371; text-align: left;
  }
  #keyvisual + #breadcrumb{
    position: absolute; top: 0px; left: 0px; z-index: 2;
    background: #416371;
  }
  #breadcrumb__list{
    margin: 0px; padding: 0px 20px;
    list-style: none;
  }
  #breadcrumb__list > li{
    display: inline-block; padding: 0px 5px 0px 0px;
    font: 400 normal 16px 'Max', Arial, sans-serif;
    color: #fff;
  }
}
@media screen and (max-width: 600px){
  #breadcrumb{ margin-bottom: 0px;}
}/**
 * Nordseetourismus 2014
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage footer styles
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id: footer.css 887 2016-01-22 15:17:22Z mueller $
 **/

/*  =========================================================
basic config
footer head
footer content
footer bottom
contact area
========================================================== */


/*  =========================================================
basic config
========================================================= */
@media screen {
  #siteFooter{ position: relative;}

  #siteFooter [class^='g-grid'] > [class^='g-element']:nth-of-type(1) > .innerContent{
    text-align: right;
    margin-right: 15px;
  }
  #siteFooter [class^='g-grid'] > [class^='g-element']:nth-of-type(2) > .innerContent{
    text-align: left;
    margin-left: 40px;
  }

  /*background stuff*/
  #siteFooter__background--left,
  #siteFooter__background--right{
    position: absolute; top: 0px;
    width: 50%; height: 100%;
  }
  #siteFooter__background--left{ left: 0%; background: #416371;}
  #siteFooter__background--right{ left: 50%; background: #677a82;}

  #siteFooter__background--helper{
    position: absolute; top: 0px; left: 0px;
    width: 100%; height: 100%;
  }
  #siteFooter__background--helper *{ height: 100%;}
  #siteFooter__background--leftHelper{ background: #416371;}
  #siteFooter__background--rightHelper{ background: #677a82;}
}
@media screen and (max-width: 900px){
  #siteFooter{ background: #416371;}
  #siteFooter__background{ display: none;}

  #siteFooter .innerContent{
    margin: 0px!important;
    text-align: center!important;
  }
}

/*  =========================================================
footer head
========================================================= */
@media screen {
  #siteFooter__head{
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    padding: 30px 0px 20px 0px;
  }
  #siteFooter__head h2{
    font: 700 normal 30px/37px 'Daniel'; color: #fff;
    margin: 0px;
  }
}
@media screen and (max-width: 500px){
  #siteFooter__head{ padding: 20px 0px 10px 0px;}
  #siteFooter__head h2{ font-size: 23px;}
}

/*  =========================================================
footer content
========================================================= */
@media screen {
  #siteFooter__content{
    position: relative;
    padding: 35px 0px 30px 0px;
  }
  #siteFooter__content .button:not(:first-of-type){ margin-left: 10px;}
  #siteFooter__content p{
    font: 400 normal 16px 'Max', Arial, sans-serif; color: #fff;
  }

  #siteFooter__content form > div{
    margin: 0px 20px 20px 0px;
    display: inline-block;
  }

  #siteFooter__content label{ color: #fff;}
  #siteFooter__content input[type=text]{ height: 40px;}

  #siteFooter__newsletterForm__firstname,
  #siteFooter__newsletterForm__lastname{ width: 200px;}
  #siteFooter__newsletterForm__email{ width: 335px;}
  #siteFooter__newsletterForm__newsletter:checked + label > [class^='icon-']{ color: #677a82;}
}
@media screen and (max-width: 1000px){
  #siteFooter__newsletterForm__email{ width: 250px;}
}
@media screen and (max-width: 500px){
  #siteFooter__content{ padding: 30px 0px 25px 0px;}
}

/*  =========================================================
footer bottom
========================================================= */
@media screen {
  #siteFooter__bottom{
    position: relative;
    background: #0b3344;
    padding: 25px 0px 20px 0px;
  }

  #siteFooter__bottom a.logo{
    height: 100%; text-decoration: none;
    display: inline-block; vertical-align: middle;
  }
  #siteFooter__bottom a.logo > img{
    width: 180px; height: 38px;
    display: inline-block; vertical-align: middle;
  }

  #siteFooter__bottom a.text{
    font: 300 normal 14px 'Max', Arial, sans-serif; color: #fff;
    text-decoration: underline;
    margin-right: 15px;
  }
  #siteFooter__bottom p{
    font: 300 normal 14px 'Max', Arial, sans-serif; color: #fff;
    margin: 15px 0px 0px 0px;
  }
}
@media screen and (max-width: 900px){
  #siteFooter__bottom{
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 500px){
  #siteFooter__bottom{ padding-bottom: 25px;}
  #siteFooter__bottom a.text{
    display: inline-block; vertical-align: top;
    width: 46%; margin: 0px 2% 10px 2%; padding: 5px;
    text-align: center; text-decoration: none;
    background: #fff; color: #0b3344;
    box-sizing: border-box;
    border-radius: 5px;
  }
}

/*  =========================================================
contact area
========================================================= */
/*basic styling*/
@media screen {
  .contactArea{
    width: 100%;
    background: initial;
  }
}

/*head styling*/
@media screen {
  .contactArea > .head{
    padding: 10px 0px;
    background: #67828d;
  }
  .contactArea > .head h2{
    font: 700 normal 30px 'Daniel'; color: #fff;
    margin: 0px; padding: 0px;
  }
}
@media screen and (max-width: 600px){
  .contactArea > .head h2{ font-size: 20px;}
}

/*basic body styling*/
@media screen {
  .contactArea > .body{ padding: 20px 0px;}
  .contactArea > .body .contactInfos{
    margin-right: 50px; padding-right: 10px;
    border-right: 1px rgba(0, 0, 0, 0.3) solid;
  }
}
@media screen and (max-width: 900px){
  .contactArea > .body .contactInfos{ margin-right: 10px;}
}
@media screen and (max-width: 600px){
  .contactArea > .body .contactInfos{
    margin-right: 0px; border-right: none; padding-right: 0px;
    margin-bottom: 10px; padding-bottom: 20px;
    border-bottom: 1px rgba(0, 0, 0, 0.3) solid;
  }
}

/*body styling for fonts and links*/
@media screen {
  .contactArea > .body h4{
    font: 700 normal 20px 'Max', Arial, sans-serif; color: #0b3344;
    margin: 0px; padding: 0px;
  }
  .contactArea > .body h5{
    font: 400 normal 16px 'Max', Arial, sans-serif; color: #0b3344;
    text-transform: uppercase;
    margin: 5px 0px 20px 0px; padding: 0px;
  }
  .contactArea > .body p{
    font: 400 normal 20px 'Max', Arial, sans-serif; color: #0b3344;
    margin: 0px; padding: 0px;
  }

  .contactArea > .body a{
    font: 400 normal 20px 'Max', Arial, sans-serif; color: #0b3344;
    display: inline-block; padding: 5px 0px; margin: 10px 0px 0px 5px; vertical-align: bottom;
  }
  .contactArea > .body span{
    color: #0b3344;
    font-size: 30px;
    vertical-align: baseline;
  }
}
@media screen and (max-width: 600px){
  .contactArea > .body h4,
  .contactArea > .body p,
  .contactArea > .body a{ font-size: 18px;}
  .contactArea > .body h5{ font-size: 14px;}
}/**
 * Foehr 2015
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage fonts
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id: fonts.css 873 2016-01-21 13:43:16Z mueller $
 **/


/*  =========================================================
Daniel - Regular
Daniel - Bold

Max - Regular
Max - Italic
Max - Bold
Max - Bold Italic
========================================================== */


/*  =========================================================
Daniel - Regular
========================================================= */
@font-face {
  font-family: 'Daniel';
  src: url('projects/foehr/fonts/Daniel/regular/daniel-webfont.eot');
  src: url('projects/foehr/fonts/Daniel/regular/daniel-webfont.eot?#iefix') format('embedded-opentype'),
       url('projects/foehr/fonts/Daniel/regular/daniel-webfont.woff') format('woff'),
       url('projects/foehr/fonts/Daniel/regular/daniel-webfont.ttf') format('truetype'),
       url('projects/foehr/fonts/Daniel/regular/daniel-webfont.svg#danielregular') format('svg');
  font-weight: 400;
  font-style: normal;
}

/*  =========================================================
Daniel - Bold
========================================================= */
@font-face {
  font-family: 'Daniel';
  src: url('projects/foehr/fonts/Daniel/bold/danielbd-webfont.eot');
  src: url('projects/foehr/fonts/Daniel/bold/danielbd-webfont.eot?#iefix') format('embedded-opentype'),
       url('projects/foehr/fonts/Daniel/bold/danielbd-webfont.woff') format('woff'),
       url('projects/foehr/fonts/Daniel/bold/danielbd-webfont.ttf') format('truetype'),
       url('projects/foehr/fonts/Daniel/bold/danielbd-webfont.svg#danielbold') format('svg');
  font-weight: 700;
  font-style: normal;
}

/*  =========================================================
Max - Regular
========================================================= */
@font-face {
  font-family: 'Max';
  src: url('projects/foehr/fonts/Max/regular/MaxWeb.eot');
  src: url('projects/foehr/fonts/Max/regular/MaxWeb.eot?#iefix') format('embedded-opentype'),
    url('projects/foehr/fonts/Max/regular/MaxWeb.woff') format('woff'),
    url('projects/foehr/fonts/Max/regular/MaxWeb.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/*  =========================================================
Max - Italic
========================================================= */
@font-face {
  font-family: 'Max';
  src: url('projects/foehr/fonts/Max/italic/MaxWeb-Italic.eot');
  src: url('projects/foehr/fonts/Max/italic/MaxWeb-Italic.eot?#iefix') format('embedded-opentype'),
    url('projects/foehr/fonts/Max/italic/MaxWeb-Italic.woff') format('woff'),
    url('projects/foehr/fonts/Max/italic/MaxWeb-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

/*  =========================================================
Max - Bold
========================================================= */
@font-face {
  font-family: 'Max';
  src: url('projects/foehr/fonts/Max/bold/MaxWeb-Bold.eot');
  src: url('projects/foehr/fonts/Max/bold/MaxWeb-Bold.eot?#iefix') format('embedded-opentype'),
    url('projects/foehr/fonts/Max/bold/MaxWeb-Bold.woff') format('woff'),
    url('projects/foehr/fonts/Max/bold/MaxWeb-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/*  =========================================================
Max - Bold Italic
========================================================= */
@font-face {
  font-family: 'Max';
  src: url('projects/foehr/fonts/Max/boldItalic/MaxWeb-BoldItalic.eot');
  src: url('projects/foehr/fonts/Max/boldItalic/MaxWeb-BoldItalic.eot?#iefix') format('embedded-opentype'),
    url('projects/foehr/fonts/Max/boldItalic/MaxWeb-BoldItalic.woff') format('woff'),
    url('projects/foehr/fonts/Max/boldItalic/MaxWeb-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}