/*! nts, Compiled at 2022-04-01 16:26:15 */
/**
 * 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
========================================================== */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
general Structure Setup
========================================================= */
@media screen {
  html {
    height: auto;
    font-size: 10px;
    background: #E5E5E5;
  }
  html.imxPortal,
  html.imxPortal body {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    margin: 0px;
    border: 0px;
    padding: 0px;
  }
  html.imxPortal body {
    padding-top: 85px;
  }
  html.imxPortal body a img {
    border: 0px none;
  }
  html.imxPortal body > section {
    margin-bottom: 80px;
    position: relative;
  }
  html.imxPortal body > section.colored {
    background: #3E5F7D;
    padding: 60px 0px 30px 0px;
  }
  section.formular {
    background: url('../images/nts/objects/formularBackground.896bc4fb.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('../images/nts/objects/formularArrowLeft.0e721edb.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) {
  html.imxPortal body {
    padding-top: 75px;
  }
}
@media screen and (max-width: 775px) {
  html.imxPortal body {
    padding-top: 50px;
  }
}
@media screen and (max-width: 600px) {
  html.imxPortal body > section {
    margin-bottom: 25px;
  }
  html.imxPortal body > section.colored {
    padding-top: 30px;
  }
}
@media screen and (max-width: 450px) {
  html.imxPortal body {
    padding-top: 100px;
  }
  html.imxPortal.nts body {
    padding-top: 50px;
  }
}
@media screen and (min-width: 1600px) {
  section.formular > .content:before {
    background-image: url('../images/nts/objects/formularArrowRight.251172ad.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: 400 normal 30px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
  }
  .badge svg .dynamicText > text {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
  }
  p > a {
    color: #517068;
    font: italic 400 18px/1 'tstar', Arial, sans-serif;
    font-weight: italic;
    font-style: 400;
    font-size: 18px;
    line-height: 1;
    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;
  }
}

@font-face {
  font-family: 'panpizza';
  src: url('../fonts/panpizza/panpizza-webfont.baa9b312.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'tstar';
  src: url('../fonts/tstar/tstar-bold-webfont.ad5a6e00.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'tstar';
  src: url('../fonts/tstar/tstar-headline-webfont.13738c97.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'tstar';
  src: url('../fonts/tstar/tstar-light-webfont.b922597d.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'tstar';
  src: url('../fonts/tstar/tstar-medium-webfont.2cc6906c.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'tstar';
  src: url('../fonts/tstar/tstar-regular-webfont.14131c34.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/**
 * 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
========================================================== */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
buttons
========================================================= */
@media screen {
  .button {
    display: inline-block;
    height: 50px;
    padding: 10px;
    max-width: 100%;
    border: 1px #272f38 solid;
    font: 900 normal 20px/30px 'tstar', Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 20px;
    line-height: 30px;
    text-decoration: none;
    color: #036b57;
    background: transparent;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  html.nts.imxPortal .button > [class^='icon-'] {
    vertical-align: unset;
    font-size: 19px;
    text-decoration: none;
  }
  html.nts.imxPortal .button > .text + [class^='icon-'] {
    margin-left: 10px;
  }
  .button--cta {
    background: #EDAE17;
    color: #272f38;
    border: 0;
  }
  .button--light {
    background: #fff;
    color: #2a3841;
  }
  .button--inline {
    vertical-align: middle;
  }
  .button--bigText {
    font-size: 25px;
  }
  .button--leftText > [class^='icon-'] {
    margin-right: 10px;
  }
  .button--rightText > [class^='icon-'] {
    margin-left: 10px;
  }
  .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;
    -webkit-transition: -webkit-transform 0.25s linear;
    transition: -webkit-transform 0.25s linear;
    transition: transform 0.25s linear;
    transition: transform 0.25s linear, -webkit-transform 0.25s linear;
  }
  html.nts .button3d {
    width: 35px;
  }
  .button3d > [class^='icon-'] {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    padding: 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 32px;
    text-decoration: none;
    background: transparent;
    color: #272f38;
    -webkit-transition: all 0.25s linear;
    transition: all 0.25s linear;
  }
  .button3d > [class^='icon-']:last-of-type {
    display: none;
  }
  .csstransforms3d .button3d > [class^='icon-']:last-of-type {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
    bottom: 25px;
    display: block;
  }
}
/*  =========================================================
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 #f2f3f0 solid;
    font-size: 14px;
    color: transparent;
    margin-right: 5px;
    margin-left: -25px;
  }
  input.styled[type=checkbox]:checked + label > [class^='icon-'] {
    border-color: #f2f3f0;
    color: #f2f3f0;
  }
  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: 500 normal 16px/1 'tstar', Arial, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    display: block;
    margin-bottom: 3px;
  }
  span > label.default {
    font: 500 normal 17px/1 'tstar', Arial, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 17px;
    line-height: 1;
  }
  /*input styles*/
  input[type=text].default,
  input[type=email].default,
  select.default,
  textarea.default {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: none;
    font: 700 normal 18px/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    background: #f2f3f0;
    color: #272f38;
  }
  /*error*/
  .formerror {
    color: #a20 !important;
  }
  /* 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: 0 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: #f2f3f0 url('../images/nts/icons/calendar.91215b54.svg') 98% 50% no-repeat;
    background-size: 30px;
  }
  input[type=text].autocomplete {
    background: #f2f3f0 url('../images/nts/icons/pencil.008586ae.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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    line-height: 1;
    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 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
    line-height: 45px;
    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 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 24px;
    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/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    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/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 35px;
    line-height: 1;
    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/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
  }
}
@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 {
    pointer-events: none;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
  }
  .mediaGallery > .mediaCollection > .image > .button {
    position: absolute;
    bottom: 5px;
    right: 5px;
  }
  html.nts .mediaGallery > .mediaCollection > .image > .button {
    background: transparent;
    border: 1px solid #f2f3f0;
    color: #f2f3f0;
  }
  html.nts .mediaGallery > .mediaCollection > .image > .button [class^='icon-'] {
    border: 0;
    margin-right: 0;
    padding-right: 0;
    vertical-align: baseline;
  }
  html.nts .mediaGallery > .mediaCollection > .image > .button .text {
    display: none;
  }
}
@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;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-bottom: 20px;
  }
  .contentForm p {
    font: 400 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #272f38;
    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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    display: block;
    margin-bottom: 3px;
    padding-left: 5px;
  }
  .contentForm fieldset label {
    color: #272f38;
  }
  .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 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 20px;
    color: #2a3841;
    margin: 0px 0px 5px 0px;
  }
  .contentForm fieldset .background > p > strong {
    font: 400 normal 18px/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
  }
  .contentForm input.styled[type=checkbox] + label {
    margin-bottom: 20px;
  }
  .contentForm input.styled[type=checkbox] + label > strong {
    font: 400 normal 18px/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
  }
}
@media screen and (max-width: 400px) {
  #form__newsletter.contentForm button[type=submit] {
    display: block;
    float: none;
    margin: 10px 0 0 auto;
  }
}
@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;
  }
}
.contentForm .contentForm__element--dataUsage {
  position: relative;
  display: inline-block;
}
.contentForm .contentForm__element--dataUsage > input {
  position: absolute;
  top: 0;
  left: 0;
}
/*  =========================================================
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: #B36F65;
    border-bottom: #272f38 40px solid;
    position: relative;
    z-index: 1;
    padding: 25px 0px 15px 0px;
  }
  .priceInformation .infoText {
    font: 600 italic 20px/20px 'tstar', Arial, sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 20px;
    line-height: 20px;
    color: #f2f3f0;
    display: block;
    text-align: center;
    margin: 0px;
  }
  .priceInformation .infoText.smaller {
    font: 600 italic 16px/1 'tstar', Arial, sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 16px;
    line-height: 1;
    color: #f2f3f0;
  }
  .priceInformation .priceTag {
    font: 400 normal 50px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
    line-height: 1;
    color: #f2f3f0;
    text-align: center;
    margin: 0px;
    padding: 0px;
  }
  .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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    padding: 10px;
    margin: 2px;
    background: #f2f3f0;
    color: #272f38;
    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%;
  }
}
@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 {
  -webkit-transition: top 3s ease-in-out, left 3s ease-in-out, opacity 0.3s;
  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 {
    -webkit-box-sizing: border-box;
            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 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 24px;
    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;
  }
}
/*  =========================================================
wrapper
========================================================= */
.wrapperSection .content.isSlider {
  position: relative;
}
.wrapperSection .content .wrapperContainer:before,
.wrapperSection .content .wrapperContainer:after {
  content: '';
  background: #fff;
  width: 100vw;
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 3;
}
.wrapperSection .content .wrapperContainer:after {
  left: 100%;
  /* grid only */
}
.wrapperSection .content .wrapperContainer:before {
  right: 101.083%;
}

/**
 * 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
iframe block
========================================================== */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
article formats
========================================================= */
@media screen {
  article.siteIntro {
    text-align: center;
    padding: 0px;
  }
  .areaIntro {
    padding: 0px 0px 30px 0px;
  }
  article.contentText {
    text-align: left;
    margin-bottom: 2.083%;
  }
  .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 110px/121px 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 110px;
    line-height: 121px;
    color: #2a3841;
    margin: 0px 0px 15px 0px;
  }
  article.areaIntro.center {
    text-align: center;
    padding: 0 0 30px 0;
  }
  article.siteIntro > h2 {
    color: #036b57;
    font: 400 normal 40px/45px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 45px;
    margin: 0px 0px 0px 0px;
  }
  article.siteIntro > .date {
    position: relative;
    font: 900 normal 30px/30px 'tstar', Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 30px;
    line-height: 30px;
    color: #036b57;
    padding-bottom: 15px;
    margin: 0 0 15px 0;
  }
  article.siteIntro:not(.sealStyle__event) > .date {
    display: block;
  }
  article.siteIntro:not(.siteIntro--compassStyled):not(.sealStyle__event) > .date:after {
    content: '';
    width: 122px;
    height: 1px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -66px;
    background-color: #036b57;
  }
  .areaIntro > h1,
  .areaIntro > h2 {
    font: 400 normal 100px/95px 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 100px;
    line-height: 95px;
    color: #272f38;
    margin: 0px 0px 10px 0px;
  }
  html.nts .areaIntro > h1 strong,
  html.nts .areaIntro > h2 strong {
    font-weight: 400;
  }
  article.eventLocation > h2,
  article.contentText > h2 {
    font: 400 normal 40px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 1;
    color: #272f38;
    margin: 0px 0px 15px 0px;
  }
  article.eventLocation > h3,
  .areaIntro > h3,
  article.contentText > h3 {
    color: #272f38;
    font: 400 normal 30px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
    margin: 0 0 10px;
  }
  article.eventLocation > h4,
  .areaIntro > h4,
  article.contentText > h4 {
    font: 400 normal 18px/30px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 30px;
    color: #272f38;
    margin: 30px 0px 10px 0px;
  }
  article.eventLocation > h5,
  .areaIntro > h5,
  article.contentText > h5 {
    font: 700 normal 18px/30px 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 30px;
    color: #272f38;
    margin: 30px 0px 10px 0px;
  }
  article.eventLocation > h6,
  .areaIntro > h6,
  article.contentText > h6 {
    font: 400 normal 18px/30px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 30px;
    color: #272f38;
    margin: 30px 0px 10px 0px;
  }
  article.areaIntro > .date {
    display: block;
    font: 400 normal 30px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
    color: #272f38;
  }
  .colored article.siteIntro > h1,
  .colored .areaIntro > h1,
  .colored .areaIntro > h2,
  .colored article.contentText > h2,
  .colored article.contentText > h3 {
    color: #f2f3f0;
  }
}
@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: #272f38;
    font: 400 normal 25px/30px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
    line-height: 30px;
    margin: 0;
  }
}
@media screen and (max-width: 600px) {
  .columned {
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
  }
  article.siteIntro > h1 {
    font-size: 55px;
    line-height: 40px;
    margin: 0 0 15px 0;
  }
  article.siteIntro > h2 {
    font: 400 normal 25px/30px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
    line-height: 30px;
    color: #272f38;
    margin: 0;
  }
  .areaIntro > h1,
  .areaIntro > h2 {
    font-size: 40px;
    line-height: 30px;
  }
  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 'tstar', Arial, sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 25px;
    line-height: 40px;
    color: #272f38;
    margin: 0px 0px 10px 0px;
  }
  article.siteIntro > p > strong {
    font-weight: 400;
    font-size: 30px;
  }
  .areaIntro > p {
    font: 400 normal 20px/24px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 24px;
    color: #272f38;
    margin: 0px 0px 10px 0px;
  }
  article.eventLocation > p,
  article.contentText > p {
    font: 400 normal 18px/30px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 30px;
    color: #272f38;
    margin: 0px 0px 15px 0px;
  }
  article.contentText > p.center {
    text-align: center;
  }
  .colored article.siteIntro > p,
  .colored .areaIntro > p,
  .colored article.contentText {
    color: #f2f3f0;
  }
  article.contentText > p > a {
    color: #272f38;
  }
}
@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("../images/nts/objects/listStrarGreen.d71e2af2.svg") no-repeat scroll 0 4px/19px rgba(255, 255, 255, 0);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #272f38;
  font: 400 normal 18px/30px 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 30px;
  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%;
  }
}
/*  =========================================================
iframeBlock
========================================================= */
.iframeBlock {
  width: 100%;
}

/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2019 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      27.11.19
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
.siteIntro__badges {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.siteIntro__badges__trustYou {
  display: inline-block;
}
@media (min-width: 901px) {
  .siteIntro__badges__trustYou.mobileonly {
    display: none;
  }
}
@media (max-width: 900px) {
  .siteIntro__badges__trustYou.desktoponly {
    display: none;
  }
}
.siteIntro__badges__images {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 10px;
}
.siteIntro__badges__images img {
  margin: 0 20px;
}

/**
 * Nordseetourismus 2018
 *
 * 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  2018 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage calendar styles
 * @author     gueldner
 * @since      22.03.2018
 * @version    $Id$
 **/
/*  =========================================================
basic styling
calendarElement
buttons
========================================================== */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
basic styling
========================================================= */
@media screen {
  .content .calendar {
    background-color: #3E5F7D;
    padding: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
  }
  .content .calendar > h3 {
    font: 400 normal 30px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
    color: #f2f3f0;
    margin: 0 0 20px 0;
  }
}
@media screen and (max-width: 900px) {
  .content .calendar {
    margin-bottom: 20px;
  }
}
/*  =========================================================
calendarElement
========================================================= */
@media screen {
  .content .calendar .ui-datepicker-group {
    width: 50%;
    float: left;
    position: relative;
    height: 310px;
  }
  .content .calendar .ui-datepicker-group.ui-datepicker-group-last {
    float: right;
  }
  .content .calendar .ui-datepicker-inline {
    width: 100% !important;
  }
  .content .calendar table {
    width: 95%;
    margin-bottom: 50px;
    border-collapse: collapse;
    border-spacing: 0 10px;
  }
  .content .calendar .ui-datepicker-group.ui-datepicker-group-last table {
    margin-left: 5%;
  }
  /* days */
  .content .calendar tr {
    padding: 0;
    margin: 0;
  }
  .content .calendar tr th {
    font: 400 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #f2f3f0;
    text-align: center;
    padding-bottom: 10px;
  }
  /* dates */
  .content .calendar tr td {
    font: 400 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #c1bfbf;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    padding: 7px 0;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
  }
  .content .calendar tr td a {
    text-decoration: none;
  }
  .content .calendar tr td.infocus {
    color: #fff;
    background-color: transparent;
    padding: 7px 0;
    cursor: pointer;
  }
  .content .calendar tr td.infocus:hover,
  .content .calendar tr td.infocus:active,
  .content .calendar tr td.infocus:focus {
    background-color: #272f38;
  }
  .content .calendar tr td.ui-datepicker-other-month {
    color: transparent;
  }
  .content .calendar tr td.selected:not(.ui-datepicker-other-month) {
    background-color: #272f38;
  }
  .content .calendar tr td.today {
    background-color: #272f38;
  }
}
/*  =========================================================
buttons
========================================================= */
@media screen {
  .content .calendar .ui-datepicker-header {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    border: 0;
    background-image: none;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  .content .calendar .ui-datepicker-header {
    width: 100%;
    float: left;
    background-color: #272f38;
    height: 45px;
  }
  .content .calendar .ui-datepicker-title {
    height: 35px;
    font: 400 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    text-align: center;
    padding-top: 6px;
    margin-top: 5px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .content .calendar .ui-datepicker-group-last .ui-datepicker-title {
    border-left: 1px solid #f2f3f0;
  }
  .content .calendar__navi .navElement,
  .content .calendar__navi .navElement:visited {
    width: 45px;
    height: 45px;
    position: relative;
    background-color: #f2f3f0;
    text-decoration: none;
  }
  .content .calendar .ui-datepicker-prev span,
  .content .calendar .ui-datepicker-next span {
    width: 45px;
    height: 45px;
  }
  .content .calendar .ui-datepicker-prev span {
    float: left;
  }
  .content .calendar .ui-datepicker-next span {
    float: right;
  }
  .content .calendar .ui-datepicker-prev:hover span,
  .content .calendar .ui-datepicker-prev:active span,
  .content .calendar .ui-datepicker-prev:focus span,
  .content .calendar .ui-datepicker-next:hover span,
  .content .calendar .ui-datepicker-next:active span,
  .content .calendar .ui-datepicker-next:focus span {
    background-color: #f2f3f0;
  }
  .content .calendar .ui-datepicker-next span::before,
  .content .calendar .ui-datepicker-prev span::before {
    font: 400 28px 'icomoon', Arial, sans-serif;
    color: #f2f3f0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  .content .calendar .ui-datepicker-next.ui-state-disabled span::before,
  .content .calendar .ui-datepicker-prev.ui-state-disabled span::before {
    color: rgba(242, 243, 240, 0.6);
  }
  .content .calendar .ui-datepicker-prev span::before {
    content: '\e905';
    left: 5%;
  }
  .content .calendar .ui-datepicker-next span::before {
    content: '\e904';
    right: -1.5%;
  }
}
@media screen and (max-width: 500px) {
  .calendarElement {
    width: 100%!important;
  }
  .calendarElement:last-of-type {
    display: none;
  }
  .content .calendar__navi .month:not(:first-of-type) {
    display: none;
  }
  .content .calendar__navi .month {
    width: -webkit-calc(10%);
    width: calc(10%);
  }
}

/**
 * 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
========================================================== */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
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: #EDAE17;
    background-size: cover;
    height: 38px;
    left: -20px;
    position: absolute;
    top: 16px;
    min-width: 106px;
    z-index: 1;
  }
  .listelement > .listelementImage > .image > .info > p {
    color: #272f38;
    font: 900 normal 25px/38px 'tstar', Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 25px;
    line-height: 38px;
    padding-left: 30px;
    margin: 0;
  }
  .listelement > .listelementImage > .image > .info > .price {
    font-size: 25px;
  }
  .listelement > .listelementImage > .image > .info > .date {
    font-size: 14px;
    line-height: 1.14em;
    padding-right: 20px;
    margin-top: 4px;
  }
  .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: 700 normal 35px/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 35px;
    line-height: 1;
    color: #272f38;
    margin: 0  0  5px 0;
  }
  .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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #272f38;
    margin: 0  0  10px 0;
  }
  .listelement > .listelementText > p {
    font: 400 normal 18px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    color: #272f38;
    margin: 0  0  20px 0;
    line-height: 30px;
  }
  .listelement > .listelementText > p.author {
    margin: 0 0 5px 0;
    font-weight: bold;
  }
  .listelement > .listelementText > .buttonspacing {
    margin-left: 2%;
  }
  .listelement > .listelementText > .listelementText__badges > .listelementTrustscore {
    display: inline-block;
  }
  .listelement > .listelementTrustscore > a > .trustScore {
    margin: 35px 0 0 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 .listelementText__badges {
    position: absolute;
    top: 0;
    right: 0;
  }
  .listelementText__badges__images {
    display: inline-block;
  }
  .listelementText__badges__images img {
    max-width: 100%;
    margin: 10px 0;
    vertical-align: top;
  }
  .listelementText__badges.detail {
    text-align: center;
  }
  .listelementText__badges.detail img {
    width: 170px;
  }
  .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;
    -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font: 400 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    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: 0;
    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 normal 15px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    line-height: 1;
    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 (min-width: 901px) {
  .listelement > .listelementText.listelementText--widthBadges {
    width: -webkit-calc(64.583% - 185px);
    width: calc(64.583% - 185px);
    padding-right: 185px;
  }
}
@media screen and (min-width: 901px) {
  .listelement > .listelementText > .listelementText__badges > .listelementTrustscore.mobileonly {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .listelement .listelementText__badges {
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
  }
}
@media screen and (min-width: 901px) {
  .listelement .listelementText__badges {
    position: absolute;
    top: 85px;
    width: 170px;
  }
}
@media screen and (max-width: 900px) {
  .listelementText__badges__images {
    width: -webkit-calc(100% - 110px);
    width: calc(100% - 110px);
    vertical-align: top;
  }
}
@media screen and (max-width: 900px) {
  .listelementText__badges__images img {
    margin: 10px;
    width: 85px;
  }
}
@media screen and (max-width: 900px) {
  .listelement > .listelementImage {
    margin-right: 3.9%;
    margin-bottom: 15px;
    width: 100%;
  }
  .listelement.pressimages > .listelementImage {
    margin-bottom: 0;
  }
  .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: 0;
  }
  .listelement > .listelementText {
    width: 100%;
    vertical-align: top;
    margin-bottom: 15px;
  }
  .listelement > .listelementText > .buttonspacing {
    margin: 5px 0 0 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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    color: #272f38;
    margin: 0 0 10px 0;
    line-height: 30px;
  }
  .listelement > .listelementText > .listelementText__badges > .listelementTrustscore.desktoponly {
    display: none;
  }
  .listelement > .listelementText > p {
    padding-right: 0!important;
  }
}
@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;
  }
}
@media screen and (max-width: 420px) {
  .teaser-image.listelement.g-element-3.g-element-md-4.g-element-sm-12.pressimages {
    margin-bottom: 22%;
  }
  .listelement {
    height: auto;
    margin-bottom: 50px;
  }
  .listelement > .listelementImage {
    width: 100%;
    margin: 45px 3.9% 15px 0;
  }
  .listelement.pressimages > .listelementImage {
    margin-top: 0;
  }
  .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 > p {
    font: 600 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
  }
  .listelement > .listelementImage > .image > .info > .price {
    font-size: 20px;
  }
  .listelement > .listelementImage > .image > .info > .date {
    font-size: 12px;
    line-height: 1.0em;
    margin: 0;
  }
  .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/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
    color: #5e666b;
    margin: 0 0 5px 0;
  }
  .listelement > .listelementText.listelementText--widthBadges > h2 {
    margin-right: 185px;
  }
  .listelement > .listelementText > h3 {
    font: 600 italic 16px/1 'tstar', Arial, sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 16px;
    line-height: 1;
    color: #036b57;
    margin: 0;
  }
  .listelement > .listelementText > h4 {
    font: 700 normal 16px/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    color: #272f38;
    margin: 0 0 10px 0;
  }
  .listelement > .listelementText > p {
    font: 400 normal 16px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    color: #272f38;
    margin: 0 0 10px 0;
    line-height: 30px;
  }
  .listelement > .listelementText > .buttonspacing {
    margin-left: 0;
    margin-top: 10px;
  }
  .listelement > .listelementTrustscore > a > .trustScore {
    margin: 35px 0 0 0%;
  }
}
/*  =========================================================
  basisliste - listelement starrating
  ========================================================= */
@media screen {
  .listelement > .listelementText > h2 > .info > .stars {
    background: url("../images/nts/objects/hotelstars.ba5e6d1e.svg") no-repeat scroll 0 0 / cover transparent;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin: 10px 3px 0 0;
  }
  .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: 500 normal 20px/24px 'tstar', Arial, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    line-height: 24px;
    color: #036b57;
    margin: 0 0 10px 0;
  }
  .listelement > .listelementText > h3 > .info {
    height: 8px;
    width: 54px;
    margin-left: 3px;
    display: inline-block;
  }
  .listelement > .listelementText > h3 > .info > .stars {
    background: url("../images/nts/objects/hotelstars.ba5e6d1e.svg") no-repeat scroll 0 0 / cover transparent;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin: 3px 3px 0 0;
  }
  .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;
    -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
  }
  .bestOfList .bestOfListElement input[type="radio"] {
    display: none;
  }
  #mapInfoBoard .bestOfList .bestOfListElement {
    border: 0;
  }
}
/*listelement head*/
@media screen {
  .bestOfList .bestOfListElement > .headline {
    background: #f2f3f0;
    text-decoration: none;
    display: block;
    position: relative;
    text-align: left;
  }
  .bestOfList .bestOfListElement > .headline > .number {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    font: 900 normal 40px/55px 'tstar', Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 40px;
    line-height: 55px;
    color: #fff;
    text-align: center;
    width: 55px;
    height: 100%;
    background: #272f38;
  }
  .bestOfList .bestOfListElement > input[type=radio]:checked ~ .headline > .number {
    background: #f2f3f0;
    color: #272f38;
  }
  .bestOfList .bestOfListElement > .headline > .title {
    display: block;
    position: relative;
    font: 700 normal 30px/45px 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 30px;
    line-height: 45px;
    color: #272f38;
    margin: 0;
    padding: 5px 0 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 {
    background: #fff;
    position: absolute;
    bottom: 5px;
  }
  html.nts .bestOfList .bestOfListElement > .body > .image > .button3d,
  html.nts .bestOfList .bestOfListElement > .body > .image > .button {
    background: transparent;
    bottom: -21px;
    z-index: 1;
    height: auto;
  }
  html.nts .bestOfList .bestOfListElement > .body > .image > .button3d [class^="icon-"],
  html.nts .bestOfList .bestOfListElement > .body > .image > .button [class^="icon-"],
  html.nts .bestOfList .bestOfListElement > .body > .image > .button3d [class*=" icon-"],
  html.nts .bestOfList .bestOfListElement > .body > .image > .button [class*=" icon-"] {
    font-size: 13px;
    color: #036b57;
  }
  .bestOfList .bestOfListElement > .body > .image > .buttonLink {
    right: 5px;
    position: absolute;
    bottom: -21px;
    z-index: 1;
    height: auto;
    text-decoration: none;
  }
  html.nts .bestOfList .bestOfListElement > .body > .image > .buttonLink [class^="icon-"],
  html.nts .bestOfList .bestOfListElement > .body > .image > .buttonLink [class*=" icon-"] {
    font-size: 13px;
    color: #036b57;
  }
  .bestOfList .bestOfListElement > .body > .image > .buttonLink .icon-arrowUp {
    display: none;
  }
  .bestOfList .bestOfListElement > .body > .image > .buttonMap {
    left: 5px;
    display: none;
  }
  .bestOfList .bestOfListElement > .body > h3,
  .bestOfList .bestOfListElement > .body > p {
    font: 400 normal 20px/25px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 25px;
    background: #f2f3f0;
    color: #272f38;
    margin: 0;
    padding: 5px 20px;
  }
  .bestOfList .bestOfListElement > .body > p {
    padding: 5px 40px 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: 400;
  }
  html.nts .bestOfMap ~ .button {
    background: transparent;
    border: 1px solid #f2f3f0;
    color: #f2f3f0;
  }
  html.nts .bestOfMap ~ .button [class^='icon-'] {
    border: 0;
    margin-right: 0;
    padding-right: 0;
    vertical-align: baseline;
  }
  html.nts .bestOfMap ~ .button .text {
    display: none;
  }
  .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;
  }
  html.nts .bestOfList .bestOfListElement > .body > .image > .buttonMap {
    bottom: 37px;
    color: #fff;
    left: 0;
  }
  html.nts .bestOfList .bestOfListElement > .body > .image > .buttonMap [class^="icon-"] {
    font-size: 30px;
    color: #fff;
  }
  html.nts .bestOfList .bestOfListElement > .body > .image > .buttonMap [class^="icon-"]::before {
    border: 2px solid #fff;
    padding: 3px;
  }
}
@media screen and (max-width: 600px) {
  .bestOfList .bestOfMap {
    height: 300px;
    padding-top: 75px;
  }
}
/*  =========================================================
columned list
========================================================= */
@media screen {
  .columnedList .contentText h3 {
    font: 400 normal 30px/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
  }
  .columnedList ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  section.colored .columnedList li {
    font: 400 normal 20px/25px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 25px;
    color: #f2f3f0;
    margin-bottom: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: url('../images/nts/objects/litstar.da211905.svg') 0 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("../images/nts/objects/listStrarGreen.d71e2af2.svg") no-repeat scroll 0 0.21052632px 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/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
    line-height: 1;
    color: white;
    margin: 30px 0 10px 0;
  }
  .trustYouCustom .rating {
    font-size: 25px!important;
    display: inline-block;
    margin: 10px 0 0 0!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/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    color: #5e666b;
    padding-left: 5px;
    width: 65%;
    vertical-align: bottom;
  }
  .trustYouCustom .overallRating .ratingOf {
    display: inline-block;
    padding: 0 5px;
    margin-bottom: 0!important;
  }
  .trustYouCustom .overallRating .trustyouRating {
    margin: 0 0 10px 0!important;
  }
  .trustYouCustom .overallRating a {
    padding: 0;
    color: #5e666b!important;
    text-decoration: none;
    font-size: 14px;
  }
  .trustYouCustom .overallRating a:before {
    display: none;
  }
  .trustYouCustom .ratingText {
    margin: 0 0 10px 0!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: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .trustYouCustom .trustYouListElement p {
    display: inline-block;
    font: 400 normal 20px/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #5e666b;
    margin: 0;
  }
  .trustYouCustom .trustYouListElement .score {
    width: 20%;
    display: inline-block;
    vertical-align: top;
  }
  .trustYouCustom .trustYouListElement .firstScore {
    font: 400 normal 40px/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 1;
    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: 0 0 10px 0;
  }
  .trustYouCustom .trustYouListElement .customerRating a {
    font: 400 normal 14px/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    color: #5e666b;
    margin-top: 10px;
    display: block;
  }
  .trustYouCustom .trustYouListElement .customerRating h2 {
    font: 400 normal 40px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 1;
    color: #272f38;
    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/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
    line-height: 1;
    color: #5e666b;
  }
}

/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      17.02.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
.openingHours {
  font: 400 normal 18px/30px 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 30px;
}
.openingHours__content__headline {
  color: #272f38;
  display: inline-block;
  font: 400 normal 30px/1 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  line-height: 1;
  margin: 0 10px 10px 0;
}
.openingHours p {
  font: 400 normal 18px/30px 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 30px;
  color: #2a3841;
  margin: 0 0 5px 0;
}
.openingHours__content__list {
  width: 320px;
}
.openingHours__content__additionalinformation,
.openingHours__content__description {
  padding-top: 25px;
  width: 500px;
}
@media screen and (max-width: 650px) {
  .openingHours__content__additionalinformation,
  .openingHours__content__description {
    width: 100%;
  }
}
.openingHours .day {
  width: 40%;
  display: inline-block;
  margin-top: 10px;
}
.openingHours .time {
  display: inline-block;
  margin: 0;
}
.openingHours .time + .time {
  margin-left: 40%;
}
.openingHoursLive {
  display: block;
  font: 400 normal 18px/18px 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 18px;
  margin: 5px 20px;
}
.openingHours .openingHoursLive {
  display: inline-block;
}
.openingHoursLive .status {
  position: relative;
}
.openingHoursLive .status::before {
  -webkit-border-radius: 50%;
          border-radius: 50%;
  content: '';
  display: inline-block;
  height: 15px;
  left: -20px;
  position: absolute;
  top: -webkit-calc(50% - 7px);
  top: calc(50% - 7px);
  width: 15px;
}
.openingHoursLive .status--opened {
  color: #00c321;
}
.openingHoursLive .status--opened::before {
  background: #00c321;
}
.openingHoursLive .status--closed {
  color: #ff0000;
}
.openingHoursLive .status--closed::before {
  background: #ff0000;
}

/**
 * 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
========================================================== */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
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) {
    left: 15px;
    top: 15px;
    transform: scale(0.5);
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
  }
  .video > .badge:not(.badge--videoButton) svg,
  .teaser-image > .badge:not(.badge--videoButton) svg {
    left: 50%;
    position: relative;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .video > .badge:not(.badge--videoButton) .text,
  .teaser-image > .badge:not(.badge--videoButton) .text {
    color: #f2f3f0;
    font: 400 normal 65px/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 65px;
    line-height: 1;
    text-align: center;
    -webkit-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
            transform: rotate(-3deg);
    display: block;
  }
  .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: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-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: 51.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 {
    background: #EDAE17;
    background-size: cover;
    left: -20px;
    position: absolute;
    top: 16px;
    z-index: 1;
  }
  .teaser-image > .info > p {
    color: #272f38;
    font: 900 normal 25px/38px 'tstar', Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 25px;
    line-height: 38px;
    padding-left: 30px;
    margin: 0;
  }
  .teaser-image > .info > .price {
    font-size: 20px;
    line-height: 1.14em;
    padding-right: 20px;
    margin: 4px 0;
  }
  .teaser-image > .info > .date {
    font-size: 14px;
    line-height: 1.14em;
    padding-right: 20px;
    margin-top: 4px;
  }
  .teaser-image > .info > .date > strong {
    font: inherit;
    font-size: 20px;
    padding-left: 3px;
  }
  .teaser-image > .info > .stars {
    background: transparent url('../images/nts/badges/ribbon-stars.999353a5.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) {
  .teaser-image > .info > p {
    padding-left: 20px;
  }
  .teaser-image > .info {
    width: 100px;
    height: 60px;
  }
  .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: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-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;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding: 18px 75px 17px 20px;
    font: 700 italic 250%/1em 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 250%;
    line-height: 1em;
    color: #f2f3f0;
    text-decoration: none;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-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(62, 95, 125, 0.8);
  }
  .teaser-image.teaser--sand > .image > .text {
    background: rgba(179, 111, 101, 0.8);
  }
  .teaser-image.teaser--water > .image > .text {
    background: rgba(3, 107, 87, 0.8);
  }
  /*hover states*/
  .teaser-image:active > .image > .text,
  .teaser-image:focus > .image > .text,
  .teaser-image > a:active ~ .image > .text,
  .teaser-image > a:focus ~ .image > .text,
  .teaser-image > a:hover ~ .image > .text,
  .listelement.pressimages:active .image .text,
  .listelement.pressimages:focus .image .text,
  .listelement.pressimages: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(62, 95, 125, 0.8);
  }
  .video.teaser--sand > .overlay,
  .teaser-image.teaser--sand > .overlay {
    background: rgba(179, 111, 101, 0.8);
  }
  .video.teaser--water > .overlay,
  .teaser-image.teaser--water > .overlay {
    background: rgba(3, 107, 87, 0.8);
  }
  .teaser-image > .overlay > .text {
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
    text-align: center;
  }
  .teaser-image > .overlay > .text > h3 {
    font: 600 normal 350%/1 'tstar', Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 350%;
    line-height: 1;
    color: #f2f3f0;
    margin: 0 0 20px 0;
  }
  .teaser-image > .overlay > .text > p {
    font: 400 normal 200%/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 200%;
    line-height: 1;
    color: #f2f3f0;
    margin: 0;
  }
  .teaser-image > .overlay > .text > * {
    transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-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 {
    border: 0;
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 1;
  }
  html.nts .teaser-image > .image > .button,
  html.nts .teaser-image > .button3d,
  html.nts .teaser-image > .button {
    background: transparent;
    color: #f2f3f0;
  }
  /*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: 1000px) {
  .teaser-image > .image > .button,
  .teaser-image > .button3d,
  .teaser-image > .button {
    padding: 18px 0 12px 0;
    line-height: 1;
    height: auto;
  }
}
@media screen and (max-width: 600px) {
  .teaser-image > .image > .button,
  .teaser-image > .button3d,
  .teaser-image > .button {
    padding: 12px 0 6px 0;
  }
}
@media screen and (max-width: 450px) {
  .teaser-image > .image > .button,
  .teaser-image > .button3d,
  .teaser-image > .button {
    padding: 12px 0 3px 0;
  }
}
@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;
    min-height: 560px;
    overflow: hidden;
  }
  /*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;
  }
  .teaser-fullWidth .image {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
  }
}
@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%;
    min-height: 0px;
  }
  html:not(.nts) .teaser-fullWidth .image {
    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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 1;
    color: #f2f3f0;
    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: 60px;
    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(242, 243, 240, 0.8);
    position: relative;
  }
  .teaser-fullWidth article h2 {
    font: 400 normal 40px/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 1;
    color: #272f38;
    margin: 0px 0px 15px 0px;
  }
  .teaser-fullWidth article h3 {
    font: 400 normal 30px/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
    color: #272f38;
  }
  .teaser-fullWidth article h3:first-of-type {
    font: 700 normal 35px/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 35px;
    line-height: 1;
    color: #f2f3f0;
    padding: 10px 20px;
    margin: 0px -20px 20px -20px;
    background: #272f38;
  }
  .teaser-fullWidth article h4 {
    font: 70 normal 25px/1 'tstar', Arial, sans-serif;
    font-weight: 70;
    font-style: normal;
    font-size: 25px;
    line-height: 1;
    color: #272f38;
    margin: 30px 0px 10px 0px;
  }
  .teaser-fullWidth article h5 {
    font: 700 normal 22px/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    color: #272f38;
    margin: 30px 0px 10px 0px;
  }
  .teaser-fullWidth article h6 {
    font: 500 normal 18px/1 'tstar', Arial, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    color: #272f38;
    margin: 30px 0px 10px 0px;
    text-transform: uppercase;
  }
  .teaser-fullWidth article p {
    font: 400 normal 18px/28px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 28px;
    color: #272f38;
    margin: 0px 0px 15px 0px;
  }
  .teaser-fullWidth article p.author {
    font-weight: bold;
  }
  .teaser-fullWidth article p > a {
    color: #272f38;
  }
  .teaser-fullWidth article > .info {
    width: 150px;
    height: 72px;
    position: absolute;
    left: -20px;
    top: -50px;
    background: url('../images/nts/badges/ribbon.fb8bf445.svg') 0px 0px no-repeat;
    background-size: cover;
    z-index: 1;
  }
  .teaser-fullWidth article > .info > p {
    font: 400 normal 25px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
    line-height: 1;
    color: #272f38;
    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('../images/nts/badges/ribbon-stars.999353a5.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 p {
    color: #272f38 !important;
  }
  .teaser-fullWidth article > .info {
    display: none;
  }
  /*make headline and article text smaler*/
  .teaser-fullWidth article h3 {
    font-size: 25px;
  }
  /*handle background colors*/
  .teaser-fullWidth article h3 {
    background: rgba(42, 56, 65, 0.2);
  }
}
/*content styles for a form*/
@media screen {
  .teaser-fullWidth form {
    padding: 0;
    margin-top: 90px;
    background: rgba(39, 47, 56, 0.8);
    position: relative;
  }
  /*hostSearchMinimal margin*/
  .teaser-fullWidth form.minimal {
    margin-top: 250px;
  }
  .teaser-fullWidth form h3 {
    font: 700 normal 35px/42px 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 35px;
    line-height: 42px;
    color: #272f38;
    background: rgba(242, 243, 240, 0.8);
    margin: 0;
    padding: 10px 20px;
    border-bottom: 1px #a5aaae solid;
  }
  .teaser-fullWidth form > fieldset {
    padding: 0 20px;
    display: block;
    border: none;
  }
  .teaser-fullWidth form > fieldset:last-of-type {
    padding-bottom: 25px;
  }
  .teaser-fullWidth form > fieldset:first-of-type {
    padding-top: 25px;
  }
  .teaser-fullWidth form > fieldset > legend {
    display: none;
  }
  /*div containers to structure the input fields*/
  .teaser-fullWidth form > fieldset > div {
    display: inline-block;
    -webkit-box-sizing: border-box;
            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;
  }
  .teaser-fullWidth form label.default {
    color: #f2f3f0;
  }
  /*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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    color: #f2f3f0;
    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;
  }
  html.nts .teaser-fullWidth form {
    margin: 20px 0;
  }
  html.nts .teaser-fullWidth .content {
    margin: 20px 5%;
  }
  .teaser--quickSearch form {
    min-height: 0;
  }
  /*text elements color set to white*/
  /*reposition headline because of new background*/
  .teaser-fullWidth form h3 {
    padding: 10px 20px;
    margin: 0px -20px 20px -20px;
    border: none;
  }
  html.nts .teaser-fullWidth form h3 {
    margin: 0;
  }
  /*handle background colors*/
  .teaser-fullWidth.teaser--sand form {
    background: rgba(179, 111, 101, 0.8);
  }
  .teaser-fullWidth.teaser--water form {
    ackground: rgba(3, 107, 87, 0.8);
  }
  /*the bottom border of the fieldsets is now white*/
  /*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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
    color: #fff;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 5px 0px;
  }
  .teaser-roomSearch form > fieldset {
    display: block;
    padding: 0px;
    border: none;
  }
  .teaser-roomSearch form > fieldset > legend {
    display: none;
  }
  /*div containers to structure the input fields*/
  .teaser-roomSearch form > fieldset > div {
    display: inline-block;
    -webkit-box-sizing: border-box;
            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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    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: #f2f3f0;
  }
  .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: #627d94;
  }
  .teaser-roomSearch form {
    background: #5e666b;
  }
  .teaser-roomSearch.teaser--sand form {
    background: #B36F65;
  }
  .teaser-roomSearch.teaser--water form {
    background: #036b57;
  }
  /*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: 63px;
    height: 57px;
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 1;
  }
  .teaser-text > .text {
    padding: 0 20px;
  }
  .teaser-text > .text > h2 {
    font: 400 normal 40px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 1;
    color: #f2f3f0;
    margin: 0 0 15px 0;
  }
  .teaser-text > .text > h3 {
    color: #f2f3f0;
    font: 400 normal 30px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
    margin: 0 0 10px;
  }
  .teaser-text > .text > h3:first-of-type {
    font: 700 italic 25px/1em 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 25px;
    line-height: 1em;
    background: #272f38;
    color: #f2f3f0;
    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: 500 normal 18px/28px 'tstar', Arial, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 28px;
    color: #f2f3f0;
    margin: 0 0 15px 0;
  }
  .teaser-text > .text > h5 {
    color: #f2f3f0;
    font: 700 normal 18px/28px 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 28px;
    margin: 0 0 15px;
  }
  .teaser-text > .text > h6,
  .teaser-text > .text > p {
    font: 400 normal 18px/28px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    margin: 0px 0px 15px 0px;
  }
  .teaser-text > .text > .date {
    font: 400 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: white;
    margin: 0 0 30px 0;
    display: block;
  }
  .teaser-text > .text > .bold {
    font: 600 normal 18px/28px 'tstar', Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    margin: 0px 0px 15px 0px;
  }
  .teaser-text > .text > .italic {
    font: 400 italic 18px/28px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
    line-height: 28px;
    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('../images/nts/objects/litstar.da211905.svg') 0px 4px no-repeat;
    background-size: 19px 19px;
    padding-left: 25px;
    font: 400 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    margin-bottom: 25px;
  }
  .teaser-text > .text > p > a {
    color: #f2f3f0;
  }
  /*handle background colors*/
  .teaser-text {
    background: #3E5F7D;
  }
  .teaser-text.teaser--sand {
    background: #B36F65;
  }
  .teaser-text.teaser--water {
    background: #036b57;
  }
  .teaser-text.teaser--gray {
    background: #627d94;
  }
  .teaser-text.teaser--white {
    background: #fff;
  }
}
@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;
    min-width: 100%;
    min-height: 100%;
  }
  [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;
    z-index: 10;
  }
  html.nts .teaser-map > .button {
    background: transparent;
    border: 1px solid #f2f3f0;
    color: #f2f3f0;
  }
  html.nts .teaser-map > .button [class^='icon-'] {
    border: 0;
    margin-right: 0;
    padding-right: 0;
    vertical-align: baseline;
  }
  html.nts .teaser-map > .button .text {
    display: none;
  }
  .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;
  }
}
@media screen and (min-width: 2000px) {
  .teaser-map img {
    margin-left: -1200px;
  }
}
/*  =========================================================
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 {
    -webkit-box-sizing: border-box;
            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/1 'tstar', Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    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/1 'tstar', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #2a3841;
    display: block;
    margin: 10px 0px 0px 0px;
  }
  .teaser-press .newsArea .regularText > a {
    font: 300 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #2a3841;
    text-decoration: underline;
  }
  .teaser-press .newsArea .information {
    font: 400 normal 14px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    color: #2a3841;
    margin: 10px 0px 0px 0px;
    display: block;
  }
  .teaser-press .text > a.twitter {
    font: 600 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #2a3841;
    text-decoration: underline;
  }
  .teaser-press a.readMore {
    text-decoration: none;
    padding-top: 10px;
    display: block;
    font: 600 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #2a3841;
    vertical-align: top;
  }
  .teaser-press .author {
    font: 400 normal 14px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    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: #272f38;
    width: 360px;
    min-height: 120px;
    color: #fff;
    font: 300 normal 15px/1 'tstar', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 15px;
    line-height: 1;
    padding: 65px 20px 50px 20px;
  }
  .pictoTeaser .text {
    color: #272f38;
    font: 400 normal 100px/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 100px;
    line-height: 1;
    position: absolute;
    left: 50%;
    top: 80%;
    -webkit-transform: rotate(-3deg) translateX(-50%);
        -ms-transform: rotate(-3deg) translateX(-50%);
            transform: rotate(-3deg) translateX(-50%);
  }
  .pictoTeaser:not(.closed) .text {
    display: none;
  }
  .pictoTeaser .badge {
    left: -471px;
    min-height: 80px;
    min-width: 80px;
    position: absolute;
    top: -169px;
    -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
            transform: scale(0.3);
    z-index: 150;
  }
  .pictoTeaser .badge image {
    -webkit-transform: scale(3.3);
        -ms-transform: scale(3.3);
            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;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding: 18px 75px 17px 20px;
    font: 700 italic 250%/1em 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 250%;
    line-height: 1em;
    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;
    -webkit-box-sizing: border-box;
            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 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    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%;
  }
}
/*  =========================================================
teaser-map--venue
========================================================= */
@media screen {
  .teaser-map {
    width: 100%;
    height: 400px;
    position: relative;
    background-color: #d7d2ca;
  }
  /* contact */
  .teaser-map .content {
    position: relative;
    z-index: 9;
  }
  .teaser-map .content [class*='g-element-'] {
    background-color: #E5E5E5;
    margin-top: 60px;
    padding: 20px;
  }
  .teaser-map .content [class*='g-element-'] h2 {
    font: 400 normal 30px/30px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 30px;
    color: #272f38;
    margin: 0;
  }
  .teaser-map .content [class*='g-element-'] p {
    font: 300 normal 18px/1 'tstar', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    color: #272f38;
  }
  .teaser-map .content [class*='g-element-'] p strong {
    font-weight: 300;
    text-transform: uppercase;
  }
  .teaser-map .content [class*='g-element-'] p a {
    line-height: 35px;
    font-style: normal;
    font-weight: 300;
    color: #272f38;
  }
  .teaser-map .content [class*='g-element-'] p > a[href^="tel"] {
    text-decoration: none;
    padding-left: 30px;
  }
  .teaser-map .content [class*='g-element-'] p > a[href^="tel"]::before {
    content: '\e614';
    font: 400 24px 'icomoon', Arial, sans-serif;
    left: 0;
    margin-top: -11px;
    position: absolute;
    top: 50%;
  }
  .teaser-map .content [class*='g-element-'] p > a[href^="mailto"] {
    padding-left: 30px;
  }
  .teaser-map .content [class*='g-element-'] p > a[href^="mailto"]::before {
    content: '\e60d';
    font: 400 24px 'icomoon', Arial, sans-serif;
    left: 0;
    margin-top: -11px;
    position: absolute;
    top: 50%;
  }
  .teaser-map .content [class*='g-element-'] p > a[target="_blank"] {
    padding-left: 0;
    line-height: 1.1rem;
  }
  .teaser-map .content [class*='g-element-'] p > a[target="_blank"]::before {
    content: '';
  }
  .teaser-map .content [class*='g-element-'] p .address {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-top: 15px;
  }
  .teaser-map .content [class*='g-element-'] p .address::before {
    display: block;
    padding-left: 30px;
    content: '\e610';
    font: 400 28px 'icomoon', Arial, sans-serif;
    left: -30px;
    position: absolute;
    top: 0;
    margin-top: -5px;
  }
  /* map */
  [class*='g-element-'] > .teaser-map {
    margin-bottom: 2.083%;
  }
}
@media screen and (max-width: 600px) {
  .teaser-map .content [class*='g-element-'] {
    background-color: transparent;
    margin: 20px 0 30px 0;
  }
  .teaser-map .content [class*='g-element-'] p,
  .teaser-map .content [class*='g-element-'] p > a {
    font-size: 16px;
  }
}

/**
 * Nordseetourismus 2018
 *
 * 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  2018 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage info teaser styles
 * @author     gueldner
 * @since      23.03.2018
 * @version    $Id$
 **/
/*  =========================================================
basic styling
headlines
content
========================================================== */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
basic styling
========================================================= */
@media screen {
  .infoTeaser {
    border: 1px solid #7b8a88;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-bottom: 2.083%;
  }
}
@media screen and (max-width: 600px) {
  .infoTeaser {
    margin: 20px 0 0 0;
  }
}
/*  =========================================================
headlines
========================================================= */
@media screen {
  .infoTeaser > h2 {
    font: 400 normal 30px/1.2 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    background-color: #7b8a88;
    padding: 9px 0 8px 0;
    margin: 0;
  }
  .infoTeaser > h3 {
    font: 400 normal 22px/1.2 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 22px;
    line-height: 1.2;
    color: #2a3841;
    padding: 0;
    margin: 14px 0 0 40px;
  }
}
@media screen and (max-width: 600px) {
  .infoTeaser > h2 {
    font-size: 24px;
  }
}
/*  =========================================================
content
========================================================= */
@media screen {
  .infoTeaser > ul {
    font: 400 normal 18px/1.2 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1.2;
    color: #2a3841;
    padding: 0 0 20px 0;
    margin: 14px 0 0 40px;
    list-style: none;
  }
  .infoTeaser > ul li {
    padding: 10px 0 11px 37px;
    position: relative;
  }
  .infoTeaser > ul li::before {
    content: "\e613";
    font-family: 'icomoon';
    font-size: 19px;
    color: #2a3841;
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 10;
  }
}
@media screen and (max-width: 900px) {
  .infoTeaser > ul {
    margin-left: 20px;
    font-size: 16px;
    line-height: 1.1;
  }
}
/*  =========================================================
content columns
========================================================= */
@media screen {
  .infoTeaser.fullWidth > ul {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    -webkit-column-gap: 60px;
       -moz-column-gap: 60px;
            column-gap: 60px;
  }
  .infoTeaser.fullWidth > ul li {
    padding: 15px 0 16px 37px;
  }
  .infoTeaser.fullWidth > ul li::before {
    top: 14px;
  }
}
@media screen and (max-width: 900px) {
  .infoTeaser.fullWidth > ul {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
    margin-left: 20px;
  }
}
@media screen and (max-width: 600px) {
  .infoTeaser.fullWidth > ul {
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
  }
  .infoTeaser.fullWidth > ul li {
    padding: 10px 0 11px 37px;
  }
  .infoTeaser.fullWidth > ul li::before {
    top: 9px;
  }
}

/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
.blog--bright-sand {
  background-color: #B36F65;
}
#blogkeyvisual {
  margin-bottom: 0;
  min-height: 690px;
}
html.nts #blogkeyvisual {
  margin-top: -85px;
}
#blogkeyvisual > .content article {
  margin-top: 150px;
  margin-bottom: 20px;
}
@media screen and (max-width: 600px) {
  #blogkeyvisual {
    min-height: 0;
  }
  #blogkeyvisual > .content article {
    margin-top: 150px;
    margin-bottom: 0;
    padding: 0 20px 90px 20px;
  }
}
.blogCategoryList .areaIntro h2 {
  text-align: center;
}
.blogArticle .siteIntro img {
  -webkit-border-radius: 50%;
          border-radius: 50%;
  border-color: #EDAE17;
  border-width: 2px;
  border-style: solid;
}
.blogLinkBox article {
  margin: 20px 0;
}
.blogLinkBox h2 {
  font: 400 normal 250%/1 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 250%;
  line-height: 1;
  color: #f2f3f0;
}
.blogLinkBox ul {
  padding-left: 0;
}
.blogLinkBox a {
  font: 400 italic 2em/1em 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 2em;
  line-height: 1em;
  color: #f2f3f0;
  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: #EDAE17;
  content: '\e904';
  margin-left: 0;
}
.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;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  text-align: center;
  list-style: none;
}
.tagcloud li {
  display: inline;
}
.tagcloud li:not(:last-of-type) a:after {
  content: ' /';
}
.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 a {
  line-height: 35px;
  color: #272f38;
}
.blog-taglist {
  font: 400 normal 100%/1 'panpizza', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 100%;
  line-height: 1;
  text-align: center;
}
.blog-taglist > .text {
  padding: 20px;
}
.blog-taglist .prefix {
  font: 400 normal 350%/1 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 350%;
  line-height: 1;
  margin-right: 20px;
  color: #f2f3f0;
}
.blog-taglist .links {
  font: 400 normal 250%/1 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 250%;
  line-height: 1;
  text-decoration: none;
  color: #f2f3f0;
}
.blog-authorinfo h2 {
  font: 400 normal 50px/55px 'panpizza', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
  line-height: 55px;
  color: #272f38;
  text-align: center;
}
.blog-authorinfo p {
  font: 400 normal 18px/30px 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 30px;
  color: #272f38;
}
.blog-authorleadarticle p {
  font: 400 normal 18px/30px 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 30px;
  color: #272f38;
  text-align: center;
}
.blogBadgeAuthor {
  position: relative;
  height: 250px;
}
.blogBadgeAuthor img {
  -webkit-border-radius: 50%;
          border-radius: 50%;
  border-color: #EDAE17;
  border-width: 2px;
  border-style: solid;
  display: block;
  margin: auto;
}
.blogBadgeAuthor .smallBadge {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-160%);
      -ms-transform: translateX(-160%);
          transform: translateX(-160%);
  top: 8%;
  background: #EDAE17;
  padding: 10px;
}
.blogBadgeAuthor .smallBadge__last,
.blogBadgeAuthor .smallBadge__first {
  display: block;
  font: 900 normal 14px/1 'tstar', Arial, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  color: #272f38;
}
@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 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
  line-height: 55px;
  color: #272f38;
}
@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$
 **/
/*  =========================================================
frame
opener
========================================================== */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
frame
========================================================= */
@media screen {
  #offCanvas {
    position: fixed;
    z-index: 401;
    left: 0;
    bottom: 0;
  }
}
@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: 0;
    left: -20px;
    opacity: 0;
  }
}
@media screen {
  .offCanvas__content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: #50565d;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
  }
  #offCanvas > [type='radio']:not(:checked) + div {
    -ms-transform: translateX(-100%);
        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: 0;
    left: 0;
    display: block;
    padding: 10px 1.25em;
    font: 400 normal 16px/18px 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #f2f3f0;
    background: #EDAE17;
  }
  .map-offCanvas-opener > .opener-offCanvas {
    top: 190px !important;
    z-index: 400;
  }
}
@media screen {
  #offCanvas > label {
    position: absolute;
    display: block;
    padding: 10px 1.25em;
    color: #f2f3f0;
    background: #50565d;
    transition: top 0.5s ease;
    -webkit-transition: top 0.5s ease;
  }
  #offCanvas [type='radio']:not(:checked) + label {
    top: 0;
  }
}
@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: -190px;
  }
}
@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: 40px;
  }
  .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$
 **/
/*  =========================================================
general structure
checkbox section
input section
========================================================== */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
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/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #f2f3f0;
    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: #f2f3f0;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    color: #f2f3f0;
  }
  .offCanvas__filter__checkbox > label:before {
    content: '\e605';
    display: inline-block;
    vertical-align: baseline;
    margin: 0px 10px 0px -30px;
    width: 14px;
    height: 14px;
    border: 3px #f2f3f0 solid;
    font: 400 normal 14px/14px 'icomoon';
    color: transparent;
    background: #f2f3f0;
  }
  .offCanvas__filter__checkbox > [type*='checkbox']:checked + label:before {
    color: #272f38;
  }
}
@media screen {
  .offCanvas__filter__checkbox > label > span.hits {
    font: 400 italic 12px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
    line-height: 1;
    float: right;
    margin-top: 3px;
  }
}
/*  =========================================================
input section
========================================================= */
@media screen {
  .offCanvas__filter__input {
    margin-bottom: 30px;
    margin-top: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .offCanvas__filter__input label.default {
    font: 700 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #f2f3f0;
    display: block;
    padding: 0 0 15px 0px;
    margin: 0;
  }
  .offCanvas__filter__input > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1;
        -ms-flex: 1 1;
            flex: 1 1;
  }
  .offCanvas__filter__input > div:not(:last-child) {
    margin-right: 10px;
  }
  .offCanvas__filter__input input.default {
    height: 30px;
    width: 100%;
    display: block;
  }
}

/**
 * Nordseetourismus 2021
 *
 * 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     schoening
 * @since      29.10.2021
 * @version    $Id$
 **/
/*  =========================================================
imports
========================================================= */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
styles
========================================================= */
.accordion__list {
  overflow: hidden;
}
.accordion__list h1 {
  font: 400 normal 26px/35px Arial, sans-serif;
  color: #272f38;
  margin: 0 0 5px 0;
  padding-right: 15px;
}
.accordion__list .accordionTeaser {
  position: relative;
}
.accordion__list .accordionTeaser__listElement {
  width: 100%;
  margin-bottom: 5px;
}
.accordion__list .accordionTeaser__title {
  color: #fff;
  background-color: #3E5F7D;
  margin-right: 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 23px 20px 23px 20px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.accordion__list .accordionTeaser__title span {
  font: 400 normal 2rem/2rem Arial, sans-serif;
}
.accordion__list .accordionTeaser__title::before {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center;
  background-color: #3E5F7D;
  color: #fff;
  text-decoration: none;
  padding: 5px 5px 5px 5px;
  margin-right: 20px;
  position: absolute;
  right: 17%;
}
@media screen and (max-width: 1200px) {
  .accordion__list .accordionTeaser__title::before {
    right: 0;
  }
}
.accordion__list .accordionTeaser__title.active::before {
  background-color: #3E5F7D;
  color: #fff;
  text-decoration: none;
  padding: 5px 5px 5px 5px;
  margin-right: 20px;
}
.accordion__list .accordionTeaser__text {
  background: rgba(49, 90, 110, 0.05);
  display: none;
  width: 100%;
  font: 400 normal 18px/20px Arial, sans-serif;
  color: #272f38;
  text-align: justify;
  padding: 25px 0 40px 0;
  margin-bottom: 15px;
}
.accordion__list .accordionTeaser__text .buttonstyle {
  color: #272f38;
  text-decoration: none;
  background: rgba(49, 90, 110, 0.15);
  display: inline-block;
  margin: 5px 5px 5px 15px;
  padding: 10px;
}
.accordion__list .accordionTeaser__text .buttonstyle--active {
  color: #fff;
  background-color: #EDAE17;
}
.accordion__list .accordionTeaser__text div {
  display: block!important;
}
.accordion__list .accordionTeaser__text p {
  font: 400 18px/34px Arial, sans-serif;
  color: #272f38;
  margin: 0 15px 15px 15px;
}
.accordion__list .accordionTeaser__text h1 {
  font: 400 26px/26px Arial, sans-serif;
  color: #272f38;
  margin: 15px 0 5px 15px;
}
.accordion__list .accordionTeaser__text h2 {
  font: 400 22px/22px Arial, sans-serif;
  color: #272f38;
  margin: 15px 0 5px 15px;
}
.accordion__list .accordionTeaser__text h3 {
  font: 400 20px/20px Arial, sans-serif;
  color: #272f38;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  margin: 15px 0 5px 15px;
}
.accordion__list .accordionTeaser__text b,
.accordion__list .accordionTeaser__text strong {
  font: 700 normal 2rem/2rem Arial, sans-serif;
  color: #272f38;
}
.accordion__list .accordionTeaser__text em {
  font-style: italic;
}
.accordion__list .accordionTeaser__title.active ~ .accordionTeaser__text {
  display: block;
}

/**
 * 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
========================================================== */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
basic config
========================================================= */
@media screen {
  #CybotCookiebotDialogBodyUnderlay {
    width: 100%!important;
  }
  #siteHeader {
    width: 100%;
    height: 85px;
    background: #3E5F7D;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 402;
    transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
  }
  html.nts #siteHeader.hasKeyvisualBlock {
    background: transparent;
  }
  html.nts #siteHeader.hasKeyvisualBlock:before {
    background: transparent;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0.8;
    z-index: -1;
    -webkit-transition: background-color 0.25s ease;
    transition: background-color 0.25s ease;
  }
  html.nts #siteHeader.hasKeyvisualBlock.fixed:before {
    background: #3E5F7D;
  }
  html.nts body.index #siteHeader {
    background: transparent;
  }
  html.nts body.index #siteHeader.fixed {
    background: rgba(62, 95, 125, 0.3);
  }
  /*general offCanvas Styles*/
  .siteHeader__offCanvas {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    display: none;
    background: #50565d;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  html.nts #mainNavi.siteHeader__offCanvas {
    background: #627d94;
  }
  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;
  }
  html.deutsche-nordsee #siteHeader,
  html.nts #siteHeader {
    padding-top: 0;
    margin-top: 0;
    position: fixed;
  }
  #siteHeader.fixed {
    position: fixed;
    margin-top: -50px;
  }
}
/*  =========================================================
functions
========================================================= */
@media screen {
  #siteHeader__functions {
    float: left;
  }
  #siteHeader__functions > ul {
    padding: 0;
    margin: 0;
    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: #f2f3f0;
    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: 0 20px 0 -20px;
  }
  html.nts #siteHeader__functions > ul > li:not(:first-of-type) > .siteHeader__function > .verticalAlignMiddle {
    border-left: none;
    width: 0;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > span {
    display: inline-block;
    vertical-align: middle;
  }
  #siteHeader__functions > ul > li > .siteHeader__function .name {
    display: none;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > span .map-close {
    display: block;
    font-size: 15px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > :not([class]) {
    font: 900 normal 25px/1 'tstar', Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 25px;
    line-height: 1;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > [class^='icon-'] {
    font-size: 40px;
  }
  html.nts #siteHeader__functions > ul > li:not(:first-of-type) > .siteHeader__function {
    position: relative;
    margin-left: 1px;
  }
  html.nts #siteHeader__functions > ul > li:not(:first-of-type) > .siteHeader__function::after {
    position: absolute;
    left: -1px;
    bottom: 20px;
    top: 20px;
    width: 1px;
    background: #f2f3f0;
    content: '';
  }
  /*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(62, 95, 125, 0.5);
  }
  #siteHeader__functions > ul > li > input:checked + .siteHeader__function {
    background: #3E5F7D !important;
    color: #f2f3f0;
  }
  .siteHeader--map #siteHeader__functions > ul > li > input:checked + .siteHeader__function {
    left: 0;
    position: fixed;
    z-index: 1;
    background: none !important;
  }
  #siteHeader__functions > ul > li > input:checked + .siteHeader__function > [class^='icon-']:before {
    content: '\e606';
  }
}
@media screen and (min-width: 776px) {
  html.nts #siteHeader__functions > ul > li > .siteHeader__function > [class^='icon-'] {
    margin-right: 10px;
  }
}
@media screen and (max-width: 775px) {
  html.nts #siteHeader__functions > ul > li:not(:first-of-type) > .siteHeader__function::after {
    top: 5px;
    bottom: 5px;
  }
}
@media (min-width: 776px) {
  html.nts #siteHeader__functions > ul > li:not(.menu) > input:not(:checked) + .siteHeader__function > [class^='icon-'] {
    display: none;
  }
  html.nts #siteHeader__functions > ul > li > .siteHeader__function .name {
    font: 900 normal 25px/1 'tstar', Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 25px;
    line-height: 1;
    display: inline-block;
  }
}
@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: 0 10px 0 -10px;
  }
}
/*  =========================================================
statics
========================================================= */
@media screen {
  #siteHeader__statics {
    float: right;
  }
  #siteHeader__statics .name {
    display: none;
  }
  #siteHeader__statics > a.logo {
    height: 39px;
    margin: 10px 0;
    padding: 13px 25px;
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
    border-left: 1px rgba(255, 255, 255, 0.2) solid;
  }
  html.nts #siteHeader__statics > a.logo {
    border-left: 0;
    position: relative;
    margin-left: 1px;
  }
  html.nts #siteHeader__statics > a.logo::after {
    position: absolute;
    left: -1px;
    bottom: 10px;
    top: 10px;
    width: 1px;
    background: #f2f3f0;
    content: '';
  }
  #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: 0;
  }
  #siteHeader__fulltextsearch > form {
    height: 40px;
    padding: 23px 25px 22px 25px;
  }
  #siteHeader__fulltextsearch > form > input {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 225px;
    height: 100%;
    padding: 0 50px 0 10px;
    border: none;
    font: 700 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    background: #f2f3f0;
    color: #272f38;
    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: 25px;
    color: #272f38;
  }
  /*hide button in desktop screen*/
  #siteHeader__fulltextsearch > [for='siteHeader__statics__search'] {
    display: none;
    color: #f2f3f0;
  }
  /*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: #3E5F7D;
    color: #f2f3f0;
  }
}
@media screen and (max-width: 775px) {
  html.nts #siteHeader__statics > a.logo::after {
    top: 0;
    bottom: 0;
  }
}
@media screen and (max-width: 450px) {
  html.nts #siteHeader__statics > a.logo::after {
    width: 0;
  }
}
@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: #50565d;
    display: none;
  }
  #siteHeader__statics__search:checked ~ form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    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 0;
    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;
  }
  html.nts #siteHeader__statics {
    border: 0;
  }
  html.nts #siteHeader__statics > a.logo {
    position: absolute;
    right: 0;
  }
}
@media screen and (max-width: 450px) and (max-width: 450px) {
  html.nts #siteHeader__statics #siteHeader__fulltextsearch {
    position: relative;
  }
  html.nts #siteHeader__statics #siteHeader__fulltextsearch label[for="siteHeader__statics__search"]::after {
    position: absolute;
    left: -1px;
    width: 1px;
    background: #f2f3f0;
    content: '';
    top: 5px;
    bottom: 5px;
  }
}
/*  =========================================================
offCanvas navi
========================================================= */
@media screen {
  #mainNavi {
    padding: 30px 0;
    text-align: left;
    overflow-y: auto!important;
  }
  #mainNavi a {
    text-decoration: none;
  }
  #mainNavi ul {
    list-style: none;
  }
  .mainNavi__firstLayer {
    padding: 0;
  }
  .mainNavi__firstLayer > li > a {
    font: 400 normal 30px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
    color: #f2f3f0;
    display: block;
    padding: 10px 0;
  }
  .mainNavi__secondLayer {
    padding: 0;
    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: #f2f3f0;
    content: '\e904';
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-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 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #f2f3f0;
    display: block;
    padding: 15px 0 15px 20px;
  }
  .mainNavi__thirdLayer {
    padding-left: 20px;
    margin-left: 20px;
    max-height: 0;
    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 0;
    font: 300 normal 16px/1 'tstar', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    color: #f2f3f0;
  }
  .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: #f2f3f0;
    content: '\e904';
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-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: 0;
    display: inline-block;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a::before {
    display: none;
  }
  #mainNavi.mobile {
    padding: 0;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li {
    margin-left: 20px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a {
    padding-left: 0;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li:first-of-type {
    margin-left: 0;
    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;
  }
  html.nts #mainNavi.mobile .mainNavi__secondLayer > li > input[type=checkbox]:checked + label:before {
    position: relative;
    top: 5px;
    left: -5px;
  }
}
@media screen and (max-width: 900px) {
  #mainNavi.mobile {
    padding: 0;
    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 0 20px;
    border: none;
  }
  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 0;
  }
  form.siteHeader__offCanvas label {
    color: #f2f3f0;
  }
  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: #f2f3f0;
  }
  /*faked dropdown inputs*/
  form.siteHeader__offCanvas > fieldset > .fakeInput {
    height: 28px;
    padding: 7px 10px 0;
    border: none;
    margin: 5px 10px 10px 0;
    cursor: pointer;
    position: relative;
    background: #fff;
    color: #2a3841;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
            box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput.active {
    margin: 0 5px -20px -5px;
    border: 5px #fcf7ef solid;
    border-bottom-width: 20px;
    -webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35), 2px 2px 1px rgba(0, 0, 0, 0.3);
            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/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
  }
  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;
    -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
            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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    color: #2a3841;
    display: block;
    margin: 0 0 10px 0;
    padding: 0 30px 0 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/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
    line-height: 1;
    color: #2a3841;
    text-align: right;
    position: absolute;
    top: 3px;
    right: 0;
  }
  /* quick search*/
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div,
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    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;
  }
  html.nts li#remember__function {
    width: 205px;
  }
  li.aroundMe,
  li.quickSearch {
    width: 92px;
  }
  html.nts li.menu,
  html.nts li.aroundMe,
  html.nts li.quickSearch {
    width: 175px;
  }
  /*button styles*/
  form.siteHeader__offCanvas .button {
    float: right;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 775px) {
  html.nts li.menu,
  li.aroundMe,
  ul li.quickSearch {
    width: 51px;
  }
}
@media screen and (min-width: 601px) {
  li.aroundMe > form.siteHeader__offCanvas,
  li.quickSearch > form.siteHeader__offCanvas {
    position: relative;
    width: 385px;
  }
}
@media screen and (max-width: 450px) {
  html.nts ul li.quickSearch {
    width: 70px;
  }
  html.nts #siteHeader__statics__search:checked ~ form {
    position: fixed;
    width: 90%;
  }
}
@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: 0;
    padding-left: 0;
    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/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
    color: #f2f3f0;
    margin: 20px 0 15px 0;
  }
  #siteHeader__fulltextsearch__searchword_autocomplete 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: 0;
    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/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #f2f3f0;
    margin: 0;
  }
  .item.type-event h5,
  .item.type-offer h5 {
    font: 400 italic 13px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 13px;
    line-height: 1;
    color: #f2f3f0;
    margin: 0;
  }
  /*autocomplete suggestions*/
  .autocompleteSuggestions {
    margin: 0 0 25px 0;
    padding: 7px 10px 10px 10px;
    list-style: none;
    background: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
  }
  .autocompleteSuggestions ul {
    list-style: none outside none;
  }
  #siteHeader__fulltextsearch__searchword_autocomplete .type-suggest:nth-of-type(2) {
    -webkit-border-radius: 10px 10px 0 0;
            border-radius: 10px 10px 0 0;
  }
  #siteHeader__fulltextsearch__searchword_autocomplete .type-suggest:last-of-type {
    -webkit-border-radius: 0 0 10px 10px;
            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 ul > li {
    display: block;
    position: relative;
    padding: 8px 0 6px 0;
    font: 400 normal 21px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 21px;
    line-height: 1;
    color: #2a3841;
  }
  .autocompleteSuggestions ul > li > a {
    text-decoration: none;
    display: block;
    padding-right: 100px;
  }
  html.nts .autocompleteSuggestions ul > li strong {
    padding: 0 0 0 3px;
  }
  .autocompleteSuggestions ul > li strong {
    font: inherit;
    background: #272f38;
    color: #f2f3f0;
  }
  .autocompleteSuggestions ul > li.type-offer strong {
    background: transparent;
  }
  .autocompleteSuggestions ul > li .hits {
    position: absolute;
    top: 12px;
    right: 12px;
    text-align: right;
    font: 400 italic 14px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    line-height: 1;
  }
  #siteHeader__fulltextsearch__searchword_autocomplete {
    width: 100% !important;
    left: 0 !important;
    -webkit-border-radius: 0;
            border-radius: 0;
    margin-top: 18px;
  }
  /* healthfinder autosuggest */
  .autocompleteSuggestions {
    background: none repeat scroll 0 0 #3E5F7D;
    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: #627d94 !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: #f2f3f0 !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: 0 0 5px 0;
  }
}
@media screen and (max-width: 900px) {
  html.nts .item.type-title h3 {
    margin: 20px 0 15px 10px;
  }
}
@media screen and (max-width: 600px) {
  #siteHeader__fulltextsearch__autocomplete h3 {
    display: none;
  }
  .autocompleteSuggestions ul > li {
    font-size: 16px;
  }
  .autocompleteSuggestions 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/1 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 1;
    color: #f2f3f0;
    margin: 0 0 20px 0;
  }
  #mapInfoBoard > .mapInfoBoard__content > p {
    font: 300 italic 20px/28px 'tstar', Arial, sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 20px;
    line-height: 28px;
    color: #f2f3f0;
    margin: 0 0 20px 0;
  }
  #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 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 21px;
  line-height: 24px;
  margin: 0;
  color: #272f38;
  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 'tstar', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 58px;
  margin: 0 0 10px 0;
  display: inline-block;
  color: #f2f3f0;
}
.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;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  #siteHeader__requestOffer .remember-list li {
    float: left;
    margin-left: 10px;
    color: #272f38;
    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
========================================================== */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
basic config
========================================================= */
@media screen {
  #keyvisual {
    width: 100%;
    height: 690px;
    position: relative;
    margin-top: -85px;
    background: transparent;
  }
  #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, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease, -webkit-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;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #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 > .image > .imageArticle {
    position: absolute;
  }
  #keyvisual > .keyvisualCroped > .image > .imageArticle h1 {
    font: 900 normal 140px/0.9 'tstar', Arial, sans-serif;
    color: #fff;
    margin: 20px 0;
  }
  #keyvisual > .keyvisualCroped > .image > .imageArticle h2 {
    font: 500 normal 40px/1 'tstar', Arial, sans-serif;
    color: #fff;
    margin: 20px 0;
  }
  #keyvisual > .keyvisualCroped > .keyvisualVideo .videoPlaceholder {
    position: relative;
    padding-bottom: 56.25%;
  }
  #keyvisual > .keyvisualCroped > .keyvisualVideo .bufferImagePlaceholder {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    opacity: 1;
    position: absolute;
    top: 0;
    -webkit-transition: visibility 0.5s, opacity 0.5s linear;
    transition: visibility 0.5s, opacity 0.5s linear;
    width: 100%;
  }
  #keyvisual > .keyvisualCroped > .keyvisualVideo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #keyvisual > .keyvisualCroped > .keyvisualVideo .invisible {
    opacity: 0;
    -webkit-transition: visibility 0.5s, opacity 0.5s linear;
    transition: visibility 0.5s, opacity 0.5s linear;
  }
  #keyvisual > .keyvisualCroped > .keyvisualVideo .videoPlayButton {
    z-index: 3;
  }
  #keyvisual > .keyvisualCroped > .keyvisualVideo .videoPlayButton > img {
    height: 150px;
    margin-left: -60px;
    margin-top: -140px;
  }
  html.nts #keyvisual > .keyvisualCroped > .keyvisualVideo .videoPlayButton > img {
    margin-left: -45px;
    margin-top: -70px;
  }
}
@media screen and (max-width: 1000px) {
  #keyvisual {
    margin-top: -75px;
  }
}
@media screen and (max-width: 775px) {
  #keyvisual {
    margin-top: -50px;
  }
}
@media screen and (min-width: 601px) {
  #keyvisual > .keyvisualCroped > .image > .imageArticle {
    width: 40%;
  }
  #keyvisual > .keyvisualCroped > .image > .imageArticle.pos-v-top {
    top: 70px;
  }
  #keyvisual > .keyvisualCroped > .image > .imageArticle.pos-v-bottom {
    bottom: 10px;
  }
  #keyvisual > .keyvisualCroped > .image > .imageArticle.pos-v-middle {
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  #keyvisual > .keyvisualCroped > .image > .imageArticle.pos-h-left {
    left: 60px;
    text-align: left;
  }
  #keyvisual > .keyvisualCroped > .image > .imageArticle.pos-h-right {
    right: 60px;
    text-align: left;
  }
  #keyvisual > .keyvisualCroped > .image > .imageArticle.pos-h-middle {
    left: 25%;
    text-align: center;
  }
}
@media screen and (max-width: 1200px) {
  #keyvisual > .keyvisualCroped > .image > .imageArticle h1 {
    font-size: 80px;
  }
  #keyvisual > .keyvisualCroped > .image > .imageArticle h2 {
    font-size: 30px;
  }
}
@media screen and (max-width: 600px) {
  #breadcrumb + #keyvisual {
    margin-top: 0;
  }
  #keyvisual > .keyvisualCroped > .image > .imageArticle {
    top: 50%;
    width: -webkit-calc(100% - 50px);
    width: calc(100% - 50px);
    margin: 0 25px;
    text-align: left;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  #keyvisual > .keyvisualCroped > .image > .imageArticle h1 {
    font-size: 80px;
  }
  #keyvisual > .keyvisualCroped > .image > .imageArticle h2 {
    font-size: 30px;
  }
}
@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;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: #f2f3f0;
    text-decoration: none;
    text-align: left;
    -webkit-transition: left 0.25s linear, right 0.25s linear;
    transition: left 0.25s linear, right 0.25s linear;
  }
  html:not(.nts) .pagination {
    width: 85px;
  }
  .pagination.pagination--left {
    left: 20px;
    padding: 25px 0 0 0;
  }
  .pagination.pagination--right {
    right: 20px;
    padding: 25px 0 0 0;
  }
  html.nts .no-touch .pagination.pagination--left:active,
  html.nts .no-touch .pagination.pagination--left:focus,
  html.nts .no-touch .pagination.pagination--left:hover {
    left: 10px;
    padding-right: 10px;
  }
  html.nts .no-touch .pagination.pagination--right:active,
  html.nts .no-touch .pagination.pagination--right:focus,
  html.nts .no-touch .pagination.pagination--right:hover {
    right: 10px;
    padding-left: 10px;
  }
}
/*  =========================================================
badges for images
========================================================= */
@media screen {
  #keyvisual > .keyvisualCroped > .image > .badge {
    position: absolute;
    left: 0px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    height: 100%;
    text-decoration: none;
    top: 65%;
  }
  html.nts #keyvisual > .keyvisualCroped > .image > .badge {
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  #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: 114px;
  }
  #keyvisual > .keyvisualCroped > .image > .badge .logo .text {
    font: 400 normal 170px/188px 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 170px;
    line-height: 188px;
    text-shadow: 0 0 100px rgba(0, 0, 0, 0.45);
    -webkit-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
            transform: rotate(-3deg);
    color: #f2f3f0;
    display: block;
  }
  #keyvisual > .keyvisualCroped > .image > .badge .logo > .helper {
    position: absolute;
    display: block;
    top: 24px;
    left: 50%;
    width: 250px;
    height: 250px;
    margin-left: -125px;
    -webkit-border-radius: 50%;
            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;
    position: relative;
    top: -50px;
    right: 50%;
    -webkit-transform: translateX(25%);
        -ms-transform: translateX(25%);
            transform: translateX(25%);
    display: block;
  }
  #keyvisual > .keyvisualCroped > .image > .badge > .text p {
    font: 900 normal 25px/30px 'tstar', Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 25px;
    line-height: 30px;
    color: #f2f3f0;
    display: inline-block;
  }
  #keyvisual > .keyvisualCroped > .image > .badge > .text p > strong {
    font: inherit;
    font-size: 30px;
    text-decoration: underline;
  }
  #keyvisual > .keyvisualCroped > .image > .badge > .text p > em {
    font: inherit;
    font-style: italic;
  }
  #keyvisual > .keyvisualCroped > .image > .badge > .text a {
    text-decoration: none;
    display: inline-block;
    position: relative;
  }
  #keyvisual > .keyvisualCroped > .image > .badge > .text [class^='icon-'] {
    color: #f2f3f0;
    font-size: 25px;
    margin-left: 10px;
    position: absolute;
    right: -27px;
    bottom: 28px;
  }
  #keyvisual > .keyvisualCroped > .image > .badge > .text > .button3d {
    position: absolute;
    top: 50%;
    left: 100%;
    margin: -25px 0px 0px 10px;
    text-shadow: none;
  }
  html:not(.nts) #keyvisual > .keyvisualCroped > .image > .badge--small > .logo {
    margin-top: -50px;
  }
  html:not(.nts) #keyvisual > .keyvisualCroped > .image > .badge--small > .text {
    top: -100px;
    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-width: 450px) {
  html.nts #keyvisual > .keyvisualCroped > .image > .badge {
    height: auto;
  }
  html.nts #keyvisual > .keyvisualCroped > .image > .badge .redirectBadgeText {
    background: transparent;
    padding: 0;
    left: 0;
    right: 0;
    bottom: 35px;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
  html.nts #keyvisual > .keyvisualCroped > .image > .badge .redirectBadgeText p {
    font: 900 normal 12px/14px 'tstar', Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 12px;
    line-height: 14px;
    text-align: center !important;
  }
  html.nts #keyvisual > .keyvisualCroped > .image > .badge .redirectBadgeText p strong {
    font-size: inherit;
  }
}
@media screen and (max-width: 450px) {
  #keyvisual > .keyvisualCroped > .image > .badge > .text [class^='icon-'] {
    font-size: 12px;
    right: -13px;
    bottom: 13px;
  }
}
@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%;
  }
  html.nts #keyvisual > .keyvisualCroped > .image .videoPlayButton {
    top: 40%;
  }
}
@media screen and (max-width: 1000px) {
  html.nts #keyvisual > .keyvisualCroped > .image .videoPlayButton {
    top: 40%;
  }
}
@media screen and (max-width: 400px) {
  html:not(.nts) #keyvisual > .keyvisualCroped > .image .videoPlayButton {
    top: 65%;
  }
}
@media screen and (max-width: 1100px) {
  #keyvisual > .keyvisualCroped > .image > .badge > .text {
    position: relative;
    top: -90px;
    right: -150px;
    display: block;
    margin-right: 40%;
  }
  html:not(.nts) #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;
  }
  html:not(.nts) #keyvisual > .keyvisualCroped > .image > .badge--small > .logo {
    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%;
  }
  #html:not(.nts) #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;
  }
  html:not(.nts) #keyvisual > .keyvisualCroped > .image > .badge--small > .logo {
    margin-top: -80px;
  }
}
@media screen and (max-width: 600px) {
  #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;
  }
  html.nts #keyvisual > .keyvisualCroped > .image > .badge .logo {
    margin-top: 0;
  }
  html:not(.nts) #keyvisual > .keyvisualCroped > .image > .badge--small > .logo {
    margin-top: -100px;
  }
}
@media (max-width: 450px) {
  #keyvisual > .keyvisualCroped > .image > .badge > .text {
    position: absolute;
    bottom: 0px;
    top: auto;
    left: 0px;
    right: auto;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0px;
    padding: 5px 25px 60px 25px;
    font-size: 18px;
    text-align: center;
  }
}
/*  =========================================================
badges for area
========================================================= */
@media screen {
  #keyvisual > .badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  #keyvisual > .badge.hotelBadge {
    bottom: -200px;
  }
  #keyvisual > .badge .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    margin-left: -500px;
    width: 1000px;
    z-index: 1;
  }
  #keyvisual > .badge .logo > svg {
    width: 100%;
    height: 114px;
    position: relative;
  }
  #keyvisual > .badge .logo .text {
    font: 400 normal 170px/188px 'panpizza', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 170px;
    line-height: 188px;
    text-shadow: 0 0 100px rgba(0, 0, 0, 0.45);
    -webkit-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
            transform: rotate(-3deg);
    color: #f2f3f0;
    display: inline-block;
  }
  #keyvisual > .badge .logo > .helper {
    position: absolute;
    display: block;
    top: 24px;
    left: 50%;
    width: 250px;
    height: 250px;
    margin-left: -125px;
    -webkit-border-radius: 50%;
            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("../images/nts/badges/ribbon.fb8bf445.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: 400 normal 30px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
  }
  #keyvisual > .badgeRibbon > .date > strong {
    font: 400 normal 48px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 48px;
    line-height: 1;
    padding-left: 3px;
  }
}
@media screen and (max-width: 900px) {
  #keyvisual > .badge {
    bottom: -160px;
  }
  #keyvisual > .badge .logo {
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
  }
  #keyvisual > .badgeRibbon {
    bottom: -75px;
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
  }
}
@media screen and (max-width: 600px) {
  #keyvisual > .badge {
    bottom: -210px;
  }
  #keyvisual > .badge .logo > svg {
    height: 114px;
  }
  #keyvisual > .badge .logo {
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
  }
  #keyvisual > .badgeRibbon {
    bottom: -80px;
    -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
            transform: scale(0.6);
  }
}
@media screen and (max-width: 450px) {
  #keyvisual > .badge {
    bottom: -198px;
  }
}
/*  =========================================================
breadcrumb navi
========================================================= */
@media screen {
  #breadcrumb {
    width: 100%;
    padding: 20px 0;
    background: transparent;
    text-align: left;
  }
  #breadcrumb__list {
    margin: 0px;
    padding: 0px 20px;
    list-style: none;
  }
  #breadcrumb__list > li {
    display: inline-block;
    padding: 0px 5px 0px 0px;
    font: 700 normal 18px/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    color: #272f38;
  }
  #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
========================================================== */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      13.01.20
 */
/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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  2021 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      24.08.21
 */
/* default font settings */
/*  =========================================================
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;
  }
  html.nts #siteFooter [class^='g-grid'] > [class^='g-element']:nth-of-type(1) .button {
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
  }
  /*background stuff*/
  #siteFooter__background--left,
  #siteFooter__background--right {
    position: absolute;
    top: 0px;
    width: 50%;
    height: 100%;
  }
  #siteFooter__background--left {
    left: 0%;
  }
  html.nts #siteFooter__background--left {
    background: rgba(39, 47, 56, 0.85);
  }
  #siteFooter__background--right {
    left: 50%;
    background: #272f38;
  }
  #siteFooter__background--helper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
  #siteFooter__background--helper * {
    height: 100%;
  }
  html.nts #siteFooter__background--leftHelper {
    opacity: 0.85;
  }
  #siteFooter__background--rightHelper {
    background: #272f38;
  }
  html.nts #siteFooter__headNewsletter {
    position: relative;
  }
  html.nts #siteFooter__headNewsletter::before {
    content: '';
    position: absolute;
    left: 0;
    top: -30px;
    bottom: -20px;
    width: 100vw;
    background: #3E5F7D;
  }
  html.nts #siteFooter__headNewsletter .innerContent {
    position: relative;
  }
}
@media screen and (min-width: 901px) {
  html.nts #siteFooter__head .content .h-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  html.nts #siteFooter__headContact {
    position: relative;
  }
  html.nts #siteFooter__headContact::before {
    content: '';
    position: absolute;
    right: -6.7%;
    top: -30px;
    bottom: -20px;
    width: 100vw;
    background: #627d94;
  }
  html.nts #siteFooter__headContact .innerContent {
    position: relative;
  }
}
@media screen and (max-width: 900px) {
  #siteFooter__background {
    display: none;
  }
  #siteFooter .innerContent {
    margin: 0px !important;
    text-align: center !important;
  }
}
/*  =========================================================
footer head
========================================================= */
@media screen {
  #siteFooter__head {
    position: relative;
    padding: 30px 0px 20px 0px;
  }
  html.nts #siteFooter__head {
    background: #3E5F7D;
  }
  #siteFooter__head h2 {
    font: 900 normal 37px/37px 'tstar', Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 37px;
    line-height: 37px;
    color: #f2f3f0;
    margin: 0;
  }
}
@media screen and (max-width: 500px) {
  #siteFooter__head {
    padding: 20px 0px 10px 0px;
  }
  #siteFooter__head h2 {
    font-size: 33px;
  }
}
/*  =========================================================
footer content
========================================================= */
@media screen {
  acronym[title] {
    text-decoration: none;
  }
  #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/1 'tstar', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 15px;
    line-height: 1;
    color: #fff;
  }
  #siteFooter__content form > div {
    margin: 0px 20px 20px 0px;
    display: inline-block;
  }
  #siteFooter__content label {
    color: #f2f3f0;
  }
  #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: 427px;
  }
  #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: 900px) {
  html.nts #siteFooter__content {
    background: #272f38;
    opacity: .85;
  }
}
@media screen and (max-width: 500px) {
  #siteFooter__content {
    padding: 30px 0px 25px 0px;
  }
  html.nts #siteFooter__content {
    opacity: 0.85;
  }
}
/*  =========================================================
footer bottom
========================================================= */
@media screen {
  #siteFooter__bottom {
    position: relative;
    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/1 'tstar', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    text-decoration: underline;
    margin-right: 15px;
  }
  #siteFooter__bottom p {
    font: 300 normal 14px/1 'tstar', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    margin: 15px 0px 0px 0px;
  }
}
@media screen and (max-width: 900px) {
  #siteFooter__bottom {
    background: #272f38;
    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 #f2f3f0 solid;
    text-align: center;
    text-decoration: none;
    background: #272f38;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}
/*  =========================================================
contact area
========================================================= */
/*basic styling*/
@media screen {
  .contactArea {
    width: 100%;
    background: #627d94;
  }
}
/*head styling*/
@media screen {
  .contactArea > .head {
    padding: 10px 0px;
    background: #3E5F7D;
  }
  .contactArea > .head h2 {
    font: 400 normal 35px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 35px;
    line-height: 1;
    color: #f2f3f0;
    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/1 'tstar', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #f2f3f0;
    margin: 0px;
    padding: 0px;
  }
  .contactArea > .body h5 {
    font: 400 normal 16px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    color: #f2f3f0;
    text-transform: uppercase;
    margin: 5px 0px 20px 0px;
    padding: 0px;
  }
  .contactArea > .body p {
    font: 400 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #f2f3f0;
    margin: 0px;
    padding: 0px;
  }
  .contactArea > .body a {
    font: 400 normal 20px/1 'tstar', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #f2f3f0;
    display: inline-block;
    padding: 5px 0px;
    margin: 10px 0px 0px 5px;
    vertical-align: bottom;
  }
  .contactArea > .body span {
    color: #f2f3f0;
  }
  .contactArea__link {
    overflow: hidden;
    padding: 0 0 0 35px;
    position: relative;
  }
  .contactArea__link [class^="icon-"],
  .contactArea__link [class*=" icon-"] {
    left: 0;
    position: absolute;
    top: 10px;
  }
}
@media screen and (max-width: 600px) {
  .contactArea > .body h4,
  .contactArea > .body p,
  .contactArea > .body a {
    font-size: 18px;
  }
  .contactArea > .body h5 {
    font-size: 14px;
  }
}

/* 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-"] {
  -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('../images/nts/fresco/loading.fbc22aa7.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, 0.2);
  -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)::-moz-selection,
.fr-window *:not(.fr-caption)::-moz-selection,
.fr-window *:not(.fr-caption)::-webkit-selection {
  background: transparent;
}
.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;
  -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;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.fr-box-wrapper,
.fr-ui-wrapper {
  position: relative;
  background: url('../images/nts/fresco/blank.32547260.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('../images/nts/fresco/blank.32547260.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;
  -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;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  -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;
  -moz-user-select: none;
   -ms-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(../images/nts/fresco/blank.32547260.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('../images/nts/fresco/blank.32547260.gif') 0 0 repeat;
  -webkit-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;
  -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%;
  line-height: 1%;
  filter: alpha(opacity=80);
  opacity: .8;
  zoom: 1;
  background: #000;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}
.fr-info-outside .fr-info-background {
  background: #0d0d0d;
  -webkit-filter: none;
          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 {
  -webkit-border-radius: 12px;
          border-radius: 12px;
  background: #101010;
  filter: alpha(opacity=80);
  opacity: .8;
  -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, 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%;
  -webkit-border-radius: 12px;
          border-radius: 12px;
  filter: alpha(opacity=80);
  opacity: .8;
  background: #1e1e1e;
  border: 1px solid rgba(180, 180, 180, 0.2);
  -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;
  color: #b3b3b3;
  -webkit-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;
  -webkit-filter: none;
          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, 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;
  -webkit-transition: background-color 0.2s ease-in;
  transition: background-color 0.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;
  -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;
  -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('../images/nts/fresco/loading.fbc22aa7.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;
  -webkit-transition: background-color 0.2s ease-in;
  transition: background-color 0.2s ease-in;
  background-color: #333;
  cursor: pointer;
  -webkit-border-radius: 4px;
          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%;
  line-height: 1%;
  filter: alpha(opacity=80);
  opacity: .8;
  zoom: 1;
  background: #000;
  -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('../images/nts/fresco/loading-small.66d83da7.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('../images/nts/fresco/loading-medium.dd7390d4.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('../images/nts/fresco/loading.fbc22aa7.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('../images/nts/fresco/fresco/sprite.4c9d3c84.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('../images/nts/fresco/fresco/sprite@x2.c335d734.png');
    background-size: 500px 500px;
    /* downscaled 50%, size of original sprite */
  }
}
.fr-window-fresco .fr-box-outer-border {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
          box-shadow: 0 0 5px rgba(0, 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, 0.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, 0.3);
}
.fr-window-fresco .fr-no-caption .fr-info-inside .fr-position-background {
  border: 1px solid rgba(180, 180, 180, 0.15);
}
.fr-window-fresco .fr-has-caption .fr-info-inside .fr-info-background {
  border: 1px solid rgba(68, 68, 68, 0.1);
  border-top-width: 0;
}
.fr-window-fresco .fr-has-caption .fr-info-outside .fr-info-background {
  border: 1px solid rgba(80, 80, 80, 0.25);
  border-top-width: 0;
}
.fr-window-fresco .fr-thumbnail-wrapper {
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.fr-window-fresco .fr-thumbnail-active .fr-thumbnail-wrapper {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 1px rgba(0, 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 {
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.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;
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.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 {
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.fr-window-fresco .fr-thumbnail-active .fr-thumbnail-wrapper {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}
.fr-window-fresco .fr-thumbnail-wrapper {
  -webkit-box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.3);
          box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.3);
}
.fr-window-fresco .fr-thumbnail-overlay-border {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.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 {
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.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, 0.12);
  border-width: 0 0 1px 0;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.fr-window-fresco .fr-touch-caption-background {
  border-width: 1px 0 0 0;
  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3);
          box-shadow: 0 -1px 3px rgba(0, 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;
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.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;
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.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;
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.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('../images/nts/fresco/IE6/sprite.62dac695.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;
}