/*@import 'https://www.hotel-surpunt.com/node_modules/slick-carousel/slick/slick.css';*/
/*@import 'https://www.hotel-surpunt.com/node_modules/cookieconsent/build/cookieconsent.min.css';*/
/* libre-franklin-700 - latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 700;
  src: url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/libre-franklin-v4-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Libre Franklin Bold'), local('LibreFranklin-Bold'),
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/libre-franklin-v4-latin-700.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/libre-franklin-v4-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/libre-franklin-v4-latin-700.woff') format('woff'), /* Modern Browsers */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/libre-franklin-v4-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/libre-franklin-v4-latin-700.svg#LibreFranklin') format('svg'); /* Legacy iOS */
  font-display: swap;
}
/* libre-franklin-700italic - latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: italic;
  font-weight: 700;
  src: url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/libre-franklin-v4-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Libre Franklin Bold Italic'), local('LibreFranklin-BoldItalic'),
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/libre-franklin-v4-latin-700italic.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/libre-franklin-v4-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/libre-franklin-v4-latin-700italic.woff') format('woff'), /* Modern Browsers */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/libre-franklin-v4-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/libre-franklin-v4-latin-700italic.svg#LibreFranklin') format('svg'); /* Legacy iOS */
  font-display: swap;
}
/* heebo-300 - latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/heebo-v5-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Heebo Light'), local('Heebo-Light'),
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/heebo-v5-latin-300.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/heebo-v5-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/heebo-v5-latin-300.woff') format('woff'), /* Modern Browsers */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/heebo-v5-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/heebo-v5-latin-300.svg#Heebo') format('svg'); /* Legacy iOS */
  font-display: swap;
}
/* heebo-700 - latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/heebo-v5-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Heebo Bold'), local('Heebo-Bold'),
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/heebo-v5-latin-700.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/heebo-v5-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/heebo-v5-latin-700.woff') format('woff'), /* Modern Browsers */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/heebo-v5-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Fonts/heebo-v5-latin-700.svg#Heebo') format('svg'); /* Legacy iOS */
  font-display: swap;
}
:root {
  --font-family-sans-serif: 'Heebo', sans-serif;
  --font-family-headlines: 'Libre Franklin', sans-serif;
  --font-weight-regular: 300;
  --font-weight-bold: 700;
  --font-weight-headlines: 700;
}
:root {
  --brand-primary: #3399CC;
  --brand-primary-dark: #4c8cc7;
  --brand-secondary: #4dd7ff;
  --brand-tertiary: #55ee86;

  --white: #fff;
  --gray: #576164;
  --gray-light: #EEEEEE;
  --gray-lighter: #e3e2e4;
  --gray-lightest: #f6f6f6;
  --black: #000000;
}
.container {
  position: relative;
  width: 100%;
}
.container__inside {
  display: block;
  position: relative;
  max-width: 1170px;
  margin: 0 15px
}
@media(min-width: 768px) {
.container__inside {
    margin: 0 15px
}
  }
@media(min-width: 1024px) {
.container__inside {
    margin: 0 35px
}
  }
@media (min-width: 1240px) {
.container__inside {
    margin: 0 auto
}
  }
.container__inside--small {
  margin: 0 15px;
  max-width: 1050px
}
@media(min-width: 768px) {
.container__inside--small {
    margin: 0 15px
}
  }
@media(min-width: 1024px) {
.container__inside--small {
    margin: 0 35px
}
  }
@media (min-width: 1120px) {
.container__inside--small {
    margin: 0 auto
}
  }
.container__inside--extra-small {
  margin: 0 15px;
  max-width: 830px
}
@media(min-width: 768px) {
.container__inside--extra-small {
    margin: 0 15px
}
  }
@media(min-width: 1024px) {
.container__inside--extra-small {
    margin: 0 35px
}
  }
@media (min-width: 1120px) {
.container__inside--extra-small {
    margin: 0 auto
}
  }
body {
  font-size: 16px;
  line-height: 24px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.text strong, .text b, .text-with-image strong, .text-with-image b, .teaser-list-item__text-wrap strong, .teaser-list-item__text-wrap b, .frame-type-form_formframework strong, .frame-type-form_formframework b {
    font-weight: 700;
    font-weight: 700;
    font-weight: var(--font-weight-bold);
  }
.text p, .text-with-image p, .teaser-list-item__text-wrap p, .frame-type-form_formframework p {
    margin: 0 0 16px 0
  }
@media(min-width: 1024px) {
.text p, .text-with-image p, .teaser-list-item__text-wrap p, .frame-type-form_formframework p {
      margin-bottom: 32px
  }
    }
.text ul, .text-with-image ul, .teaser-list-item__text-wrap ul, .frame-type-form_formframework ul {
    margin: 16px 0
  }
@media(min-width: 1024px) {
.text ul, .text-with-image ul, .teaser-list-item__text-wrap ul, .frame-type-form_formframework ul {
      margin: 24px 0
  }
    }
.text a, .text-with-image a, .teaser-list-item__text-wrap a, .frame-type-form_formframework a {
    font-weight: 700;
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    color: #000000;
    color: #000000;
    color: var(--black);
    text-decoration: underline
  }
.text a:hover, .text-with-image a:hover, .teaser-list-item__text-wrap a:hover, .frame-type-form_formframework a:hover {
      text-decoration: none;
    }
.text h1, .text h2, .text-with-image h1, .text-with-image h2, .teaser-list-item__text-wrap h1, .teaser-list-item__text-wrap h2, .frame-type-form_formframework h1, .frame-type-form_formframework h2 {
    margin: 0 0 30px 0;
    font-size: 22px;
    line-height: 26px;
    color: #3399CC;
    color: #3399CC;
    color: var(--brand-primary);
    text-transform: uppercase;
    font-family: 'Libre Franklin', sans-serif;
    font-family: 'Libre Franklin', sans-serif;
    font-family: var(--font-family-headlines);
    font-weight: 700;
    font-weight: 700;
    font-weight: var(--font-weight-headlines);
    font-style: italic
  }
@media(min-width: 1024px) {
.text h1, .text h2, .text-with-image h1, .text-with-image h2, .teaser-list-item__text-wrap h1, .teaser-list-item__text-wrap h2, .frame-type-form_formframework h1, .frame-type-form_formframework h2 {
      margin: 0 0 40px 0;
      font-size: 40px;
      line-height: 50px
  }
    }
.text h2, .text-with-image h2, .teaser-list-item__text-wrap h2, .frame-type-form_formframework h2 {
    text-transform: none;
  }
.text h3, .text-with-image h3, .teaser-list-item__text-wrap h3, .frame-type-form_formframework h3 {
    margin: 0 0 2px 0;
    font-size: 18px;
    line-height: 24px;
    color: #3399CC;
    color: #3399CC;
    color: var(--brand-primary);
    font-family: 'Libre Franklin', sans-serif;
    font-family: 'Libre Franklin', sans-serif;
    font-family: var(--font-family-headlines);
    font-weight: 700;
    font-weight: 700;
    font-weight: var(--font-weight-headlines);
    font-style: italic
  }
@media(min-width: 1024px) {
.text h3, .text-with-image h3, .teaser-list-item__text-wrap h3, .frame-type-form_formframework h3 {
      font-size: 23px
  }
    }
.text h4, .text-with-image h4, .teaser-list-item__text-wrap h4, .frame-type-form_formframework h4 {
    margin: 0 0 0 0;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    color: #000000;
    color: var(--black);
    font-family: 'Heebo', sans-serif;
    font-family: 'Heebo', sans-serif;
    font-family: var(--font-family-sans-serif);
    font-weight: 700;
    font-weight: 700;
    font-weight: var(--font-weight-bold);
  }
/*  h4 {
    margin: 0;
    font-size: 14px;
    line-height: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--brand-primary);

    @md-min {
      font-size: 24px;
      line-height: 35px;
    }
  }

  h5 {
    margin: 0;
    font-size: 14px;
    line-height: 17px;
    font-weight: var(--font-weight-bold);

    @md-min {
      font-size: 24px;
      line-height: 35px;
    }
  }*/
.text ul, .text-with-image ul, .teaser-list-item__text-wrap ul, .frame-type-form_formframework ul {
    list-style: none;
  }
.text ul li::before, .text-with-image ul li::before, .teaser-list-item__text-wrap ul li::before, .frame-type-form_formframework ul li::before {
      content: "•";
      color: #3399CC;
      color: #3399CC;
      color: var(--brand-primary);
      display: inline-block;
      width: 1em;
      margin-left: -1em
    }
button.button, a.button, button.btn {
  display: inline-block;
  padding: 4px 20px 2px 20px;
  font-size: 16px;
  line-height: 30px;
  border-radius: 0;
  border: none;
  font-family: 'Libre Franklin', sans-serif;
  font-family: 'Libre Franklin', sans-serif;
  font-family: var(--font-family-headlines);
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-headlines);
  font-style: italic;
  color: #fff;
  color: #fff;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: background 150ms, -webkit-transform 2000ms ease-out;
  transition: background 150ms, -webkit-transform 2000ms ease-out;
  transition: background 150ms, transform 2000ms ease-out;
  transition: background 150ms, transform 2000ms ease-out, -webkit-transform 2000ms ease-out;
  background: #3399CC;
  background: #3399CC;
  background: var(--brand-primary)
}
@media(min-width: 768px) {
button.button, a.button, button.btn {
    line-height: 38px
}
  }
button.button:hover, a.button:hover, button.btn:hover {
    background: #4c8cc7;
    background: #4c8cc7;
    background: var(--brand-primary-dark);
  }
button.button:active, a.button:active, button.btn:active {
    background: #3399CC;
    background: #3399CC;
    background: var(--brand-primary);
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
/**
 * Featherlight – ultra slim jQuery lightbox
 * Version 1.7.13 - http://noelboss.github.io/featherlight/
 *
 * Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
 * MIT Licensed.
**/
html.with-featherlight {
  /* disable global scrolling when featherlights are visible */
  overflow: hidden;
}
.featherlight {
  display: none;

  /* dimensions: spanning the background from edge to edge */
  position:fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2147483647; /* z-index needs to be >= elements on the site. */

  /* position: centering content */
  text-align: center;

  /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
  white-space: nowrap;

  /* styling */
  cursor: pointer;
  background: #333;
  /* IE8 "hack" for nested featherlights */
  background: rgba(0, 0, 0, 0);
}
/* support for nested featherlights. Does not work in IE8 (use JS to fix) */
.featherlight:last-of-type {
  background: rgba(0, 0, 0, 0.5);
}
.featherlight:before {
  /* position: trick to center content vertically */
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.featherlight .featherlight-content {
  /* make content container for positioned elements (close button) */
  position: relative;

  /* position: centering vertical and horizontal */
  text-align: left;
  vertical-align: middle;
  display: inline-block;

  /* dimensions: cut off images */
  overflow: auto;
  padding: 0;

  /* dimensions: handling large content */
  margin-left: 5%;
  margin-right: 5%;
  max-height: 95%;

  /* styling */
  background: #fff;
  cursor: auto;

  /* reset white-space wrapping */
  white-space: normal;

  -webkit-box-shadow: 0 0 20px 2px rgba(0,0,0,.2);

          box-shadow: 0 0 20px 2px rgba(0,0,0,.2);
}
/* contains the content */
.featherlight .featherlight-inner {
  /* make sure its visible */
  display: block;
}
/* don't show these though */
.featherlight script.featherlight-inner,
.featherlight link.featherlight-inner,
.featherlight style.featherlight-inner {
  display: none;
}
.featherlight .featherlight-close-icon {
  /* position: centering vertical and horizontal */
  position: absolute;
  z-index: 9999;
  top: 0px;
  left: 0px;

  /* dimensions: 25px x 25px */
  line-height: 50px;
  width: 50px;
  font-size: 35px;
  font-family: 'Heebo', sans-serif;
  font-family: 'Heebo', sans-serif;
  font-family: var(--font-family-sans-serif);


  /* styling */
  cursor: pointer;
  text-align: center;
  /*  font-family: Arial, sans-serif;*/
  /*  background: #fff; !* Set the background in case it overlaps the content *!
    background: rgba(255, 255, 255, 0.3);*/
  color: #000000;
  color: #000000;
  color: var(--black);
  border: none;
  padding: 0;
  background: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

}
/* See http://stackoverflow.com/questions/16077341/how-to-reset-all-default-styles-of-the-html5-button-element */
.featherlight .featherlight-close-icon::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.featherlight .featherlight-image {
  /* styling */
  width: 100%;
  max-width: 1170px;
}
.featherlight-iframe .featherlight-content {
  /* removed the border for image croping since iframe is edge to edge */
  border-bottom: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}
.featherlight iframe {
  /* styling */
  border: none;
}
.featherlight * { /* See https://github.com/noelboss/featherlight/issues/42 */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
  .featherlight .featherlight-content {
    /* dimensions: maximize lightbox with for small screens */
    margin-left: 0;
    margin-right: 0;
    max-height: 98%;
    padding: 0;
  }
}
/* hide non featherlight items when printing */
@media print {
  html.with-featherlight > * > :not(.featherlight) {
    display: none;
  }
}
.featherlight-previous {
  position: absolute;
  left: 10px;
  top: 50%;
  height: 36px;
  width: 20px;
  background: url(https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Images/prev-arrow.svg) no-repeat center;
  cursor: pointer
}
.featherlight-previous:hover {
    opacity: .5;
  }
.featherlight-previous span {
    display: none;
  }
.featherlight-next {
  position: absolute;
  right: 10px;
  top: 50%;
  height: 36px;
  width: 20px;
  background: url(https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Images/next-arrow.svg) no-repeat center;
  cursor: pointer
}
.featherlight-next:hover {
    opacity: .5;
  }
.featherlight-next span {
    display: none;
  }
.select-replace {
  position: relative;
  height: 38px;
  border: none;
  border-radius: 0;
  background: none;
  -webkit-transition: background 500ms;
  transition: background 500ms;
}
.select-replace >select {
    position: absolute;
    width: 100%;
    padding: 0 10px;
    font-size: 13px;
    line-height: 38px;
    border: none;
    border-radius: 0;
    height: 38px;
/*    outline: none;*/
    background: transparent;
    -webkit-box-shadow:none !important;
            box-shadow:none !important;
    cursor: pointer;
    color: #fff;
    color: #fff;
    color: var(--white);
    text-align: left;
    font-family: 'Heebo', sans-serif;
    font-family: 'Heebo', sans-serif;
    font-family: var(--font-family-sans-serif);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none

  }
@media(min-width: 1024px) {
.select-replace >select {
      padding: 0 15px

  }
    }
.select-replace >select::-ms-expand {
      display: none;
    }
.select-replace >select:-moz-focusring {
      text-shadow: 0 0 0 #414141;
      color: #fff;
    }
.select-replace >select option {
      color: #fff;
    }
.select-replace:focus {
    background: #fff;
  }
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html, body {
  margin: 0;
  padding: 0;
}
html {
  background: #fff;
  background: #fff;
  background: var(--white);
  min-height: 100%;
}
body {
  font-family: 'Heebo', sans-serif;
  font-family: 'Heebo', sans-serif;
  font-family: var(--font-family-sans-serif);
  font-weight: 300;
  font-weight: 300;
  font-weight: var(--font-weight-regular);
  color: #000000;
  color: #000000;
  color: var(--black);
}
@media(min-width: 1024px) and (max-width: 1199px) {
.content-structure--subpage >.columns >.column .container:first-child .container__inside {
      max-width: 780px
  }
    }
@media(min-width: 1200px) and (max-width: 1599px) {
.content-structure--subpage >.columns >.column .container:first-child .container__inside {
      padding-right: 200px
  }
    }
.subpage__background {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.subpage__background__inside {
  position: absolute;
  right: -150px;
  bottom: 0;
  width: 600px;
  height: 100%;
  background: #f4f9ff;
  -webkit-transform: skew(-10deg, 0);
          transform: skew(-10deg, 0)
}
@media(max-width: 1023px) {
.subpage__background__inside {
    display: none
}
  }
@media(min-width: 1200px) {
.subpage__background__inside {
    right: -100px
}
  }
@media(min-width: 1600px) {
.subpage__background__inside {
    right: -200px;
    width: 800px
}
  }
.page-header {
  position: relative;
  top: 0;
  height: 77px;
  width: 100%;
  -webkit-transition: background 150ms, height 150ms;
  transition: background 150ms, height 150ms
/*  background: var(--white);*/
}
@media(min-width: 1024px) {
.page-header {
    height: 52px
}
  }
.page-header__inside {
  position: relative;
  margin: 0 15px
}
@media(min-width: 1024px) {
.page-header__inside {
    margin: 0 35px
}
  }
.page-header__logo {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 100;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: 38px;
}
@media(min-width: 1024px) {
.page-header__logo {
    top: 20px;
    right: 25px;
    left: auto;
    -webkit-transform: none;
            transform: none;
    width: 120px;
}
  }
@media(min-width: 1200px) {
.page-header__logo {
    right: 65px;
}
  }
.page-header__logo img {
    display: block;
    width: 100%;
    height: auto;
  }
.page-header__logo .page-header__logo-img--white {
    display: none;
  }
.page-header__logo .page-header__logo-img--gray {
    display: block;
  }
.page-header--white .page-header__logo-img--white {
    display: block;
  }
.page-header--white .page-header__logo-img--gray {
    display: none;
  }
.navigation-open .page-header--white .page-header__logo-img--white, .scrolled .page-header--white .page-header__logo-img--white {
      display: none;
    }
.navigation-open .page-header--white .page-header__logo-img--gray, .scrolled .page-header--white .page-header__logo-img--gray {
      display: block;
    }
.page-navigation-toggle {
  display: block;
  position: absolute;
  left: 0;
  top: 30px;
  height: 21px;
  width: 90px;
  padding: 0;
  border-radius: 0;
  border: none;
  cursor: pointer;
  outline: none;
  background: transparent;
  -webkit-transition: background 500ms, top 250ms;
  transition: background 500ms, top 250ms;
  z-index: 110
}
@media(min-width: 1024px) {
.page-navigation-toggle {
    top: 20px
}
  }
.page-navigation-toggle.page-navigation-toggle--open .page-navigation-toggle__bar {
      background: #fff;
      background: #fff;
      background: var(--white);
    }
.page-navigation-toggle.page-navigation-toggle--open .page-navigation-toggle__bar:nth-child(1) {
      -webkit-transform: rotate(405deg);
              transform: rotate(405deg);
      top: 5px;
    }
.page-navigation-toggle.page-navigation-toggle--open .page-navigation-toggle__bar:nth-child(2) {
      height: 0;
    }
.page-navigation-toggle.page-navigation-toggle--open .page-navigation-toggle__bar:nth-child(3) {
      -webkit-transform: rotate(-225deg);
              transform: rotate(-225deg);
      top: 5px;
    }
.page-navigation-toggle.page-navigation-toggle--open .page-navigation-toggle__text {
      color: #fff;
      color: #fff;
      color: var(--white);
    }
.page-navigation-toggle__bar {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 3px;
  background: #000000;
  background: #000000;
  background: var(--black);
  -webkit-transition: all 200ms;
  transition: all 200ms;
  will-change: left, top
}
.page-navigation-toggle__bar:nth-child(2) {
    top: 5px;
  }
.page-navigation-toggle__bar:nth-child(3) {
    top: 10px;
  }
.page-navigation-toggle__text {
  position: absolute;
  left: 40px;
  top: 0;
  font-size: 16px;
  line-height: 16px;
  font-family: 'Libre Franklin', sans-serif;
  font-family: 'Libre Franklin', sans-serif;
  font-family: var(--font-family-headlines);
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-headlines);
  font-style: italic;
  text-transform: uppercase;
}
.page-overlay-navigation {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 105;
  width: 100vw;
  height: 100vh;
  background: rgba(51, 153, 204, .97);
  overflow: auto;
  overflow-scrolling: auto;
}
@media(min-width: 1024px) {
.page-overlay-navigation {
    text-align: center;
}
  }
.page-overlay-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
.page-overlay-navigation li {
    margin: 0 0 25px 0;
    padding: 0;
    opacity: 0;
    -webkit-animation: page-overlay-navigation__left-to-right;
            animation: page-overlay-navigation__left-to-right;
    -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards
  }
.page-overlay-navigation li:nth-child(1) { -webkit-animation-delay: 75ms; animation-delay: 75ms }
.page-overlay-navigation li:nth-child(2) { -webkit-animation-delay: 150ms; animation-delay: 150ms }
.page-overlay-navigation li:nth-child(3) { -webkit-animation-delay: 225ms; animation-delay: 225ms }
.page-overlay-navigation li:nth-child(4) { -webkit-animation-delay: 300ms; animation-delay: 300ms }
.page-overlay-navigation li:nth-child(5) { -webkit-animation-delay: 375ms; animation-delay: 375ms }
.page-overlay-navigation li:nth-child(6) { -webkit-animation-delay: 450ms; animation-delay: 450ms }
.page-overlay-navigation li:nth-child(7) { -webkit-animation-delay: 525ms; animation-delay: 525ms }
.page-overlay-navigation li:nth-child(8) { -webkit-animation-delay: 600ms; animation-delay: 600ms }
.page-overlay-navigation li:nth-child(9) { -webkit-animation-delay: 675ms; animation-delay: 675ms }
.page-overlay-navigation li.page-overlay-navigation__main-page-link-wrap {
      margin-top: 50px;
    }
.page-overlay-navigation a {
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    color: #fff;
    color: #fff;
    color: var(--white);
    font-family: 'Libre Franklin', sans-serif;
    font-family: 'Libre Franklin', sans-serif;
    font-family: var(--font-family-headlines);
    font-weight: 700;
    font-weight: 700;
    font-weight: var(--font-weight-headlines);
    font-style: italic;
    text-decoration: none
  }
.page-overlay-navigation a:hover {
      border-bottom: solid 2px #fff;
      border-bottom: solid 2px #fff;
      border-bottom: solid 2px var(--white);
    }
@media(min-width: 1024px) {
.page-overlay-navigation a {
      font-size: 40px;
      line-height: 40px
  }
    }
.navigation-open .page-overlay-navigation {
  display: block;
}
.page-overlay-navigation__inside {
  position: relative;
  margin: 95px 30px
}
@media(min-width: 1024px) {
.page-overlay-navigation__inside {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
}
  }
@-webkit-keyframes page-overlay-navigation__left-to-right {
  from {
    opacity: 0;
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes page-overlay-navigation__left-to-right {
  from {
    opacity: 0;
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.page-header__location-nav {
  display: none;
  position: absolute;
  top: 20px;
  left: 140px;
  z-index: 100;
  width: 360px;
  padding: 0;
  font-size: 16px;
  line-height: 16px
}
@media(min-width: 1024px) {
.page-header__location-nav {
    display: block
}
  }
@media(min-width: 1200px) {
.page-header__location-nav {
    left: 220px
}
  }
.page-header__location-nav:hover .page-header__location-nav__items {
      display: block;
    }
.page-header__location-nav:hover .page-header__location-nav__button {
      color: #3399CC;
      color: #3399CC;
      color: var(--brand-primary);
    }
.page-header__location-nav__top-item__header {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  color: #fff;
  color: var(--white);
  font-size: 16px;
  line-height: 16px;
  font-family: 'Libre Franklin', sans-serif;
  font-family: 'Libre Franklin', sans-serif;
  font-family: var(--font-family-headlines);
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-headlines);
}
.page-header__location-nav__button {
  position: relative;
  height: 21px;
  width: 350px;
  padding-left: 42px;
  font-size: 16px;
  line-height: 16px;
  font-family: 'Libre Franklin', sans-serif;
  font-family: 'Libre Franklin', sans-serif;
  font-family: var(--font-family-headlines);
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-headlines);
  font-style: italic;
  text-transform: uppercase;
  color: #000000;
  color: #000000;
  color: var(--black);
  text-decoration: none;
  cursor: pointer;
}
.page-header__location-nav__items {
  display: none;
  margin-top: 17px;
  padding: 30px 20px 30px 20px;
  background: #3399CC;
  background: #3399CC;
  background: var(--brand-primary);
}
.page-header__location-nav__items ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
.page-header__location-nav__items ul li {
      display: block;
      margin: 0 0 35px 0;
      padding: 0;
      opacity: 0;
      -webkit-animation: page-header__location-nav__left-to-right;
              animation: page-header__location-nav__left-to-right;
      -webkit-animation-duration: 300ms;
              animation-duration: 300ms;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards
    }
.page-header__location-nav__items ul li:nth-child(1) { -webkit-animation-delay: 75ms; animation-delay: 75ms }
.page-header__location-nav__items ul li:nth-child(2) { -webkit-animation-delay: 150ms; animation-delay: 150ms }
.page-header__location-nav__items ul li:nth-child(3) { -webkit-animation-delay: 225ms; animation-delay: 225ms }
.page-header__location-nav__items ul li:nth-child(4) { -webkit-animation-delay: 300ms; animation-delay: 300ms }
.page-header__location-nav__items ul li:nth-child(5) { -webkit-animation-delay: 375ms; animation-delay: 375ms }
.page-header__location-nav__items ul li:nth-child(6) { -webkit-animation-delay: 450ms; animation-delay: 450ms }
.page-header__location-nav__items ul li:nth-child(7) { -webkit-animation-delay: 525ms; animation-delay: 525ms }
.page-header__location-nav__items ul li:nth-child(8) { -webkit-animation-delay: 600ms; animation-delay: 600ms }
.page-header__location-nav__items ul li:last-child {
        margin: 0;
      }
.page-header__location-nav__items ul ul li {
      margin: 0 0 15px 0;
    }
.page-header__location-nav__items a {
    font-size: 14px;
    line-height: 22px;
    color: #fff;
    color: #fff;
    color: var(--white);
    text-decoration: none
  }
.page-header__location-nav__items a:hover {
      text-decoration: underline;
    }
.page-header__location-nav__items a:hover .page-header__location-nav__item-header {
        text-decoration: underline;
      }
.page-header__location-nav__items a:hover .page-header__location-nav__item-subheader {
        text-decoration: underline;
      }
.page-header__location-nav__item-header {
  display: inline-block;
  margin-right: 5px;
  font-family: 'Libre Franklin', sans-serif;
  font-family: 'Libre Franklin', sans-serif;
  font-family: var(--font-family-headlines);
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-headlines);
  font-style: italic;
/*  text-transform: uppercase;*/
}
.page-header__location-nav__item-subheader {
  display: inline-block;
}
@-webkit-keyframes page-header__location-nav__left-to-right {
  from {
    opacity: 0;
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes page-header__location-nav__left-to-right {
  from {
    opacity: 0;
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
ul.page-header__language-navigation {
  position: absolute;
  right: -15px;
  top: 30px;
  margin: 0;
  padding: 0;
  font-family: 'Libre Franklin', sans-serif;
  font-family: 'Libre Franklin', sans-serif;
  font-family: var(--font-family-headlines);
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-headlines);
  font-style: italic;
  font-size: 16px;
  line-height: 16px;


}
@media(min-width: 1024px) {
ul.page-header__language-navigation {
    top: 20px;
    right: 200px;


}
  }
@media(min-width: 1200px) {
ul.page-header__language-navigation {
    right: 250px;


}
  }
@media(min-width: 1600px) {
ul.page-header__language-navigation {
    right: 340px;


}
  }
ul.page-header__language-navigation >li {
    padding: 0 10px;
    display: inline;
    position: relative
  }
@media(min-width: 1024px) {
ul.page-header__language-navigation >li {
      display: inline-block
  }
    }
ul.page-header__language-navigation >li:after {
        content: "";
        position: absolute;
        right: -3px;
        top: -webkit-calc(50% - 10px);
        top: calc(50% - 10px);
        display: block;
        width: 2px;
        height: 20px;
        background: #000000;
        background: #000000;
        background: var(--black);
        -webkit-transform: skew(-10deg);
                transform: skew(-10deg);
      }
ul.page-header__language-navigation >li:last-child:after {
        display: none;
      }
ul.page-header__language-navigation >li >a {
      color: #000000;
      color: #000000;
      color: var(--black);
      text-decoration: none;
    }
ul.page-header__language-navigation >li:hover >a {
        color: #3399CC;
        color: #3399CC;
        color: var(--brand-primary);
      }
ul.page-header__language-navigation >li.current >a {
        color: #3399CC;
        color: #3399CC;
        color: var(--brand-primary);
      }
.page-footer {
  position: relative;
  overflow: hidden;
  font-size: 16px;
  line-height: 24px;
  background: #EEEEEE;
  background: #EEEEEE;
  background: var(--gray-light);
}
.page-footer h3 {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-family: 'Heebo', sans-serif;
    font-family: 'Heebo', sans-serif;
    font-family: var(--font-family-sans-serif);
    font-weight: 700;
    font-weight: 700;
    font-weight: var(--font-weight-bold);
  }
.page-footer p {
    margin: 0 0 30px 0;
  }
.page-footer a {
    color: #000000;
    color: #000000;
    color: var(--black);
    text-decoration: none
  }
.page-footer a:hover {
      text-decoration: underline;
    }
.page-footer__inside {
  margin-top: 40px;
  margin-bottom: 140px
}
@media(min-width: 1024px) {
.page-footer__inside {
    margin-top: 55px;
    margin-bottom: 55px
}
  }
@media(min-width: 1024px) {
.page-footer__columns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between
}
  }
@media(min-width: 1024px) {
.page-footer__column:nth-child(1) {
      width: -webkit-calc(24% * 2);
      width: calc(24% * 2)
  }
    }
@media(min-width: 1200px) {
.page-footer__column:nth-child(1) {
      width: -webkit-calc(20% * 2);
      width: calc(20% * 2)
  }
    }
.page-footer__column:nth-child(2) {
    display: none
  }
@media(min-width: 1024px) {
.page-footer__column:nth-child(2) {
      width: 24%
  }
    }
@media(min-width: 1200px) {
.page-footer__column:nth-child(2) {
      width: 20%
  }
    }
@media(min-width: 1024px) {
.page-footer__column:nth-child(3) {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      width: 50%
  }
    }
.page-footer__service-navigation {
  position: relative;
  margin: 0 0 30px 0;
}
@media(min-width: 1024px) {
.page-footer__service-navigation {
    width: 100%;
}
  }
.page-footer__service-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
@media(min-width: 1024px) {
.page-footer__service-navigation ul {
  }
    }
@media(min-width: 1024px) {
.page-footer__service-navigation ul li {
        display: inline-block;
        margin-right: 20px
    }
      }
.page-footer__service-navigation ul a {
      font-weight: 700;
      font-weight: 700;
      font-weight: var(--font-weight-bold);
      text-decoration: underline
    }
.page-footer__service-navigation ul a:hover {
        text-decoration: none;
      }
@media(min-width: 1024px) {
.page-footer__awards {
    width: 50%
}
  }
.page-footer__social-navigation {
  position: relative;
}
.page-footer__social-navigation ul {
    margin: 30px 0;
    padding: 0;
    list-style: none;
  }
.page-footer__social-navigation ul li {
      display: inline-block;
      margin-right: 20px;
    }
.page-footer__social-navigation ul a {
      text-decoration: none;
    }
.page-booking-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 128px;
  z-index: 200;
  background: #3399CC;
  background: #3399CC;
  background: var(--brand-primary)
}
@media(min-width: 768px) {
.page-booking-bar {
    height: 70px
}
  }
.page-booking-bar__inside {
}
.page-booking-bar__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap
}
@media(min-width: 1024px) {
.page-booking-bar__form {
}

  }
.page-booking-bar__field {
  position: relative;
  width: -webkit-calc((100% / 3) - 5px);
  width: calc((100% / 3) - 5px);
  margin-top: 18px;
  height: 38px;
  border: solid 1px #fff;
  border: solid 1px #fff;
  border: solid 1px var(--white);
}
@media(min-width: 768px) {
.page-booking-bar__field {
    width: -webkit-calc((100% / 6) - 5px);
    width: calc((100% / 6) - 5px);
}
  }
.page-booking-bar__field label {
    position: absolute;
    top: -12px;
    left: 10px;
    margin: 0;
    padding: 0 6px;
    color: #fff;
    color: #fff;
    color: var(--white);
    font-size: 12px;
    line-height: 20px;
    background: #3399CC;
    background: #3399CC;
    background: var(--brand-primary);
    text-transform: uppercase;
    font-family: 'Libre Franklin', sans-serif;
    font-family: 'Libre Franklin', sans-serif;
    font-family: var(--font-family-headlines);
    font-weight: 700;
    font-weight: 700;
    font-weight: var(--font-weight-headlines);
    font-style: italic
  }
@media(min-width: 1024px) {
.page-booking-bar__field label {
      font-size: 16px
  }
    }
.page-booking-bar__field input {
    position: absolute;
    width: 100%;
    padding: 0 10px;
    font-size: 13px;
    line-height: 38px;
    margin: 0;
    border: none;
    background: none;
    color: #fff;
    color: #fff;
    color: var(--white)
  }
.page-booking-bar__field input::-webkit-input-placeholder {
      color: #fff;
      color: #fff;
      color: var(--white);
    }
.page-booking-bar__field input:-ms-input-placeholder {
      color: #fff;
      color: #fff;
      color: var(--white);
    }
.page-booking-bar__field input::-ms-input-placeholder {
      color: #fff;
      color: #fff;
      color: var(--white);
    }
input::-webkit-input-placeholder {
      color: #fff;
      color: #fff;
      color: var(--white);
    }
input:-ms-input-placeholder {
      color: #fff;
      color: #fff;
      color: var(--white);
    }
input::-ms-input-placeholder {
      color: #fff;
      color: #fff;
      color: var(--white);
    }
.page-booking-bar__field input::placeholder {
      color: #fff;
      color: #fff;
      color: var(--white);
    }
@media(min-width: 1024px) {
.page-booking-bar__field input {
      padding: 0 15px
  }
    }
.page-booking-bar__submit-button {
  width: 100%;
  height: 38px;
  background: #fff;
  background: #fff;
  background: var(--white);
  padding: 0;
  line-height: 38px;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.page-booking-bar__submit-button__icon {
  display: inline-block;
  width: 28px;
  height: 38px;
  margin-right: 5px;
  line-height: 38px;
  background: url(https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Images/search.svg) no-repeat center;
  background-size: 100% auto;
  vertical-align: middle;
}
.page-booking-bar__submit-button__label {
  display: inline-block;
  font-size: 14px;
  line-height: 38px;
  height: 38px;
  font-family: 'Libre Franklin', sans-serif;
  font-family: 'Libre Franklin', sans-serif;
  font-family: var(--font-family-headlines);
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-headlines);
  font-style: italic;
  text-transform: uppercase
}
@media(min-width: 768px) {
.page-booking-bar__submit-button__label {
    font-size: 16px
}
  }
.text {
  margin: 30px 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  font-weight: 300;
  font-weight: var(--font-weight-regular)

}
@media(min-width: 1024px) {
.text {
    margin: 50px 0

}
  }
@media(min-width: 1200px) {
.text {
    margin: 80px 0

}
  }
.text.text--centered-headline .text__headline {
      text-align: center;
    }
.text .text-center {
    text-align: center;
  }
.text-with-image {
  margin: 30px 0
}
@media(min-width: 1024px) {
.text-with-image {
    margin: 50px 0
}
  }
@media(min-width: 1200px) {
.text-with-image {
    margin: 80px 0
}
  }
@media(min-width: 768px) {
.text-with-image__columns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}
  }
.text-with-image__image-column {
  position: relative;
  overflow: hidden
}
@media(min-width: 768px) {
.text-with-image__image-column {
    width: 50%
}
  }
@media(min-width: 768px) {
.text-with-image--image-right .text-with-image__image-column {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2
}
  }
.text-with-image__image-wrap {
  position: relative
}
.text-with-image__image-wrap+.text-with-image__image-wrap {
    margin-top: 16px
  }
@media(min-width: 1024px) {
.text-with-image__image-wrap+.text-with-image__image-wrap {
      margin-top: 26px
  }
    }
.text-with-image__image {
    display: block;
    width: 100%;
    height: auto;
}
.text-with-image__image-corner {
  position: absolute;
  right: -100px;
  bottom: 0;
  width: 100px;
  height: 100%;
  background: #fff;
  background: #fff;
  background: var(--white);
  -webkit-transform: skew(-15deg, 0);
          transform: skew(-15deg, 0);
}
.text-with-image__text-column {
  display: block;
  padding: 30px 15px 0 15px
}
@media(min-width: 768px) {
.text-with-image__text-column {
    width: 50%;
    padding: 30px 30px 0 30px
}
  }
@media(min-width: 1024px) {
.text-with-image__text-column {
    padding: 60px 60px 0 120px
}
  }
@media(min-width: 768px) {
.text-with-image--image-right .text-with-image__text-column {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1
}
  }
.image-full-size {
  position: relative;
  width: 100%;
  max-height: 100vh;
  overflow: hidden;
}
.image-full-size__image,
.image-full-size__image--mobile {
  display: block;
  width: 100%;
  height: auto;


}
@media(min-width: 768px) {
.image-full-size__image {
    display: block !important
}
  }
@media(max-width: 767px) {
.image-full-size__image--mobile {
    display: block !important
}
  }
.image-full-size__image-corner {
  position: absolute;
  right: -180px;
  bottom: 0;
  width: 300px;
  height: 100%;
  -webkit-transform: skew(-15deg, 0);
          transform: skew(-15deg, 0);
  background: #fff;
  background: #fff;
  background: var(--white);
  opacity: .8;
}
.image-full-size__text {
  position: relative;
  text-align: center;
  padding: 30px 35px;
  background: #fff;
  background: #fff;
  background: var(--white)
}
@media(min-width: 768px) {
.image-full-size__text {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: none;
    text-align: center
}
  }
.image-full-size__header {
  margin: 0 0 15px 0;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 27px;
  font-family: 'Libre Franklin', sans-serif;
  font-family: 'Libre Franklin', sans-serif;
  font-family: var(--font-family-headlines);
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-headlines);
  font-style: italic;
  color: #3399CC;
  color: #3399CC;
  color: var(--brand-primary)
}
@media(min-width: 768px) {
.image-full-size__header {
    margin: 0 0 25px 0;
    font-size: 40px;
    line-height: 48px;
    color: #fff;
    color: #fff;
    color: var(--white);
    text-shadow: 0 0 4px rgba(60, 60, 60, .4)
}
  }
.image-full-size__subheader {
  margin: 0 0 10px 0;
  font-size: 16px;
  line-height: 24px;
  font-family: 'Heebo', sans-serif;
  font-family: 'Heebo', sans-serif;
  font-family: var(--font-family-sans-serif);
  font-weight: 300;
  font-weight: 300;
  font-weight: var(--font-weight-regular);
  color: #000000;
  color: #000000;
  color: var(--black)
}
@media(min-width: 768px) {
.image-full-size__subheader {
    margin: 0 0 40px 0;
    font-size: 40px;
    line-height: 48px;
    color: #fff;
    color: #fff;
    color: var(--white);
    text-shadow: 0 0 4px rgba(60, 60, 60, .4)
}
  }
.teaser-list {
  margin: 30px 0;
}
@media(min-width: 1024px) {
.teaser-list {
    margin: 50px 0;
}
  }
@media(min-width: 1200px) {
.teaser-list {
    margin: 80px 0;
}
  }
.teaser-list .slick-arrow {
    position: absolute;
    left: -15px;
    top: 50%;
    margin-top: -20px;
    z-index: 1;
    width: 30px;
    height: 40px;
    border: none;
    border-radius: 20px;
    background: none;
    background-image: url(https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Images/prev-arrow.svg);
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    text-indent: -160px;
    -webkit-transition: all 100ms;
    transition: all 100ms;
    opacity: 1;
    outline: none
  }
.teaser-list .slick-arrow:hover {
      opacity: .7;
      /*        background-color: #fff;*/
    }
.teaser-list .slick-arrow.slick-prev {

    }
.teaser-list .slick-arrow.slick-next {
      left: auto;
      right: -15px;
      background-image: url(https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Images/next-arrow.svg);
    }
.teaser-list .slick-arrow.slick-disabled {
      opacity: 0;
    }
.teaser-list .slick-slide {
    outline: none;
  }
.teaser-list .slick-slide img {
      outline: none;
    }
.teaser-list__headline {
  margin: 0 0 20px 0;
  font-size: 22px;
  line-height: 26px;
  text-transform: uppercase;
  color: #3399CC;
  color: #3399CC;
  color: var(--brand-primary)
}
@media(min-width: 1024px) {
.teaser-list__headline {
    margin-bottom: 30px;
    font-size: 50px;
    line-height: 60px
}
  }
.teaser-list-item {
  position: relative;
}
.teaser-list-item__inside {
  position: relative;
  margin: 0 15px
}
@media(min-width: 1024px) {
.teaser-list-item__inside {
    margin: 0 25px
}
  }
.teaser-list-item__image-wrap {
}
.teaser-list-item__image {
  display: block;
  width: auto;
  height: 190px;
  margin: 0 auto 30px auto;
}
.teaser-list-item__text-wrap {
  position: relative;
}
.teaser-list-item__header {
  margin: 0;
  color: #000000;
  color: #000000;
  color: var(--black);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-bold);
}
.teaser-list-item__text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}
.teaser-list-item__text p {
    margin-top: 0
  }
.teaser-list-item__text p:last-of-type {
      margin-bottom: 0;
    }
.teaser-list-item__text a {
    font-weight: 700;
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    color: #000000;
    color: #000000;
    color: var(--black);
    text-decoration: underline
  }
.teaser-list-item__text a:hover {
      text-decoration: none;
    }
.image-carousel {
  height: 400px
}
@media(min-width: 768px) {
.image-carousel {
    height: 720px
}
  }
.image-carousel-item {
/*  width: 110%;*/
  height: 400px;
  -webkit-transform: skew(-20deg);
          transform: skew(-20deg);
  overflow: hidden;
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
  background: #000000;
  background: #000000;
  background: var(--black)
}
@media(min-width: 768px) {
.image-carousel-item {
    height: 720px
}
  }
/*    transform: skew(-20deg) scale(1.05);*/
.image-carousel-item:hover .image-carousel-item__image {
      opacity: .95;
    }
/*.slick-active {
  .image-carousel-item {
    .image-carousel-item__image {
      opacity: .95;
    }
  }
}*/
.image-carousel-item__inside {
  height: 100%;
  -webkit-transform: skew(20deg);
          transform: skew(20deg);
}
.image-carousel-item__image-wrap {
  height: 100%;
}
.image-carousel-item__image {
  position: relative;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  display: block;
  height: 100%;
  width: auto;
  opacity: 0.85;
  -webkit-transition: opacity 250ms ease-in, -webkit-transform 2500ms ease-out;
  transition: opacity 250ms ease-in, -webkit-transform 2500ms ease-out;
  transition: transform 2500ms ease-out, opacity 250ms ease-in;
  transition: transform 2500ms ease-out, opacity 250ms ease-in, -webkit-transform 2500ms ease-out;
}
.image-carousel-item__text-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #fff;
  color: #fff;
  color: var(--white);
  text-align: center;
}
.image-carousel-item__header {
  margin: 0 0 30px 0;
  font-family: 'Libre Franklin', sans-serif;
  font-family: 'Libre Franklin', sans-serif;
  font-family: var(--font-family-headlines);
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-headlines);
  font-style: italic;
  font-size: 22px;
  line-height: 26px;
  text-shadow: 0 0 10px rgba(0,0,0,.2)
}
@media(min-width: 1024px) {
.image-carousel-item__header {
    font-size: 40px;
    line-height: 48px
}
  }
.image-carousel-item__text {
  margin: 0 0 20px 0;
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  text-shadow: 0 0 2px rgba(0,0,0,.9);
}
.image-carousel-item__link {
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  color: #fff;
  color: #fff;
  color: var(--white);
  text-decoration: underline
}
.image-carousel-item__link:hover {
    text-decoration: none;
  }
@media(max-width: 767px) {
.slick-current .image-carousel-item__image {
    opacity: .85
}
  }
.image-carousel .slick-arrow {
    position: absolute;
    left: 10px;
    bottom: 20px;
    z-index: 1;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 20px;
    background: none;
    background-image: url(https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Images/prev-arrow-white.svg);
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    text-indent: -160px;
    -webkit-transition: all 100ms;
    transition: all 100ms;
    opacity: 1;
    outline: none
  }
@media(min-width: 1024px) {
.image-carousel .slick-arrow {
      left: 20px;
      bottom: 40px
  }
    }
.image-carousel .slick-arrow:hover {
      opacity: .7;
      /*        background-color: #fff;*/
    }
.image-carousel .slick-arrow.slick-prev {

    }
.image-carousel .slick-arrow.slick-next {
      left: auto;
      right: 10px;
      background-image: url(https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Images/next-arrow-white.svg)
    }
@media(min-width: 1024px) {
.image-carousel .slick-arrow.slick-next {
        right: 20px
    }
      }
.image-carousel .slick-arrow.slick-disabled {
      opacity: 0;
    }
.news-list {
  margin: 30px 0;
}
@media(min-width: 1024px) {
.news-list {
    margin: 50px 0;
}
  }
@media(min-width: 1200px) {
.news-list {
    margin: 80px 0;
}
  }
.news-list .slick-arrow {
    position: absolute;
    left: -15px;
    top: 50%;
    margin-top: -20px;
    z-index: 1;
    width: 30px;
    height: 40px;
    border: none;
    border-radius: 20px;
    background: none;
    background-image: url(https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Images/prev-arrow.svg);
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    text-indent: -160px;
    -webkit-transition: all 100ms;
    transition: all 100ms;
    opacity: 1;
    outline: none
  }
.news-list .slick-arrow:hover {
      opacity: .7;
      /*        background-color: #fff;*/
    }
.news-list .slick-arrow.slick-prev {

    }
.news-list .slick-arrow.slick-next {
      left: auto;
      right: -15px;
      background-image: url(https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Images/next-arrow.svg);
    }
.news-list .slick-arrow.slick-disabled {
      opacity: 0;
    }
.news-list .slick-slide {
    outline: none;
  }
.news-list .slick-slide img {
      outline: none;
    }
.news-list-item {
  position: relative;
  height: 355px
}
@media(min-width: 1024px) {
.news-list-item {
    height: 480px
}
  }
.news-list-item__inside {
  position: relative;
  height: 100%;
  margin: 0 15px;
  overflow: hidden
}
@media(min-width: 1024px) {
.news-list-item__inside {
    margin: 0 25px
}
  }
.news-list-item__image-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.news-list-item__image-corner {
  position: absolute;
  right: -110px;
  bottom: 0;
  width: 100px;
  height: 100%;
  background: #fff;
  background: #fff;
  background: var(--white);
  -webkit-transform: skew(-15deg, 0);
          transform: skew(-15deg, 0);
}
.news-list-item__gradient-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#3399cc),to(#99ccff));
  background: -webkit-linear-gradient(left, #3399cc 0%,#99ccff 100%);
  background: linear-gradient(to right, #3399cc 0%,#99ccff 100%);
}
.news-list-item__gradient-corner {
  position: absolute;
  right: -110px;
  bottom: 0;
  width: 100px;
  height: 100%;
  background: #fff;
  background: #fff;
  background: var(--white);
  -webkit-transform: skew(-15deg, 0);
          transform: skew(-15deg, 0);
}
.news-list-item__icon-wrap {
  position: absolute;
  bottom: 25px;
  width: 100%
}
@media(min-width: 1024px) {
.news-list-item__icon-wrap {
    bottom: 60px
}
  }
.news-list-item__icon {
  display: block;
  height: 50%;
  max-height: 160px;
  width: auto;
  margin: 0 auto
}
@media(min-width: 1024px) {
.news-list-item__icon {
    max-height: 180px
}
  }
.news-list-item__text-wrap {
  position: relative;
  margin: 25px;
  color: #fff;
  color: #fff;
  color: var(--white);
}
.news-list-item__subheader {
  margin: 0 0 10px 0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 300;
  font-weight: 300;
  font-weight: var(--font-weight-regular);
}
.news-list-item__header {
  margin: 0 0 18px 0;
  font-size: 16px;
  line-height: 19px;
  font-family: 'Libre Franklin', sans-serif;
  font-family: 'Libre Franklin', sans-serif;
  font-family: var(--font-family-headlines);
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-headlines);
  font-style: italic;
}
.news-list-item__text {
  margin: 0 0 20px 0;
  font-size: 16px;
  line-height: 24px;
}
.news-list-item__link {
  text-decoration: underline;
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  color: #fff;
  color: #fff;
  color: var(--white)
}
.news-list-item__link:hover {
    text-decoration: none;
  }
.intro-video {
  position: relative;
  width: 100%;
  overflow: hidden
}
@media(min-width: 1024px) {
.intro-video {
    height: -webkit-calc(100vh - 52px);
    height: calc(100vh - 52px)
}
  }
.intro-video__inside {
  position: relative;
  width: 100%;
  height: 100%;
}
.intro-video__video-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
@media(min-width: 1024px) {
.intro-video__video-wrap {
    position: absolute;
    width: 75%;
    height: 100%;
}
  }
.intro-video__video-wrap .intro-video__video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    overflow: hidden;
  }
.intro-video__video-corner {
  position: absolute;
  right: -180px;
  bottom: 0;
  width: 250px;
  height: 100%;
  -webkit-transform: skew(-15deg, 0);
          transform: skew(-15deg, 0);
  background: #fff;
  background: #fff;
  background: var(--white);
  opacity: .8
}
@media(min-width: 1024px) {
.intro-video__video-corner {
    display: none
}
  }
.intro-video__text-wrap {
  position: relative;
  width: 100%
}
@media(min-width: 1024px) {
.intro-video__text-wrap {
    position: absolute;
    right: 0;
    top: 0;
    width: 35%;
    height: 100%
}
  }
@media(min-width: 1200px){
.intro-video__text-wrap {
    width: 30%
}
  }
.intro-video__text-wrap:before {
    content: "";
    position: absolute;
    right: -150px;
    bottom: 0;
    width: 600px;
    height: 100%;
    background: #fff;
    background: #fff;
    background: var(--white);
    -webkit-transform: skew(-10deg, 0);
            transform: skew(-10deg, 0)
  }
@media(max-width: 1023px) {
.intro-video__text-wrap:before {
      display: none
  }
    }
@media(min-width: 1200px) {
.intro-video__text-wrap:before {
      right: -100px
  }
    }
@media(min-width: 1600px) {
.intro-video__text-wrap:before {
      right: -200px;
      width: 800px
  }
    }
.intro-video__offers {
  position: relative;
  margin: 25px 35px;
}
@media(min-width: 1024px) {
.intro-video__offers {
    position: absolute;
    bottom: 90px;
    left: 0;
    right: 60px;
    margin: 0;
}
  }
@media(min-width: 1024px) {
.intro-video__offers {
    right: 95px;
}
  }
.intro-video__offers .slick-arrow {
    position: absolute;
    left: -30px;
    top: 50%;
    margin-top: -20px;
    z-index: 1;
    width: 30px;
    height: 40px;
    border: none;
    border-radius: 20px;
    background: none;
    background-image: url(https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Images/prev-arrow.svg);
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    text-indent: -160px;
    -webkit-transition: all 100ms;
    transition: all 100ms;
    opacity: 1;
    outline: none
  }
@media(min-width: 1024px) {
.intro-video__offers .slick-arrow {
      top: auto;
      bottom: 0;
      left: -40px
  }
    }
.intro-video__offers .slick-arrow:hover {
      opacity: .7;
      /*        background-color: #fff;*/
    }
.intro-video__offers .slick-arrow.slick-prev {}
.intro-video__offers .slick-arrow.slick-next {
      left: auto;
      right: -30px;
      background-image: url(https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Images/next-arrow.svg)
    }
@media(min-width: 1024px) {
.intro-video__offers .slick-arrow.slick-next {
        right: -40px
    }
      }
.intro-video__offers .slick-arrow.slick-disabled {
      opacity: 0;
    }
.intro-video__offer {}
.intro-video__offer-title {
  margin: 0 0 20px 0;
  font-size: 23px;
  line-height: 27px;
  color: #3399CC;
  color: #3399CC;
  color: var(--brand-primary);
  font-family: 'Libre Franklin', sans-serif;
  font-family: 'Libre Franklin', sans-serif;
  font-family: var(--font-family-headlines);
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-headlines);
  font-style: italic;
}
.intro-video__offer-subline {
  margin: 0 0 20px 0;
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-bold);
}
.intro-video__offer-link {
  margin-top: 20px;
}
.intro-video__video-text {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 90%;
  text-align: center
}
@media(min-width: 1024px) {
.intro-video__video-text {
    max-width: 40%
}
  }
.intro-video__video-text__headline {
  margin: 0 0 25px 0;
  font-size: 30px;
  line-height: 30px;
  font-family: 'Libre Franklin', sans-serif;
  font-family: 'Libre Franklin', sans-serif;
  font-family: var(--font-family-headlines);
  font-weight: 700;
  font-weight: 700;
  font-weight: var(--font-weight-headlines);
  font-style: italic;
  color: #fff;
  color: #fff;
  color: var(--white);
  text-shadow: 0 0 4px rgba(60, 60, 60, .4)
}
@media(min-width: 768px) {
.intro-video__video-text__headline {
    font-size: 40px;
    line-height: 48px
}
  }
@media(min-width: 1200px) {
.intro-video__video-text__headline {
    font-size: 50px;
    line-height: 58px
}
  }
.intro-video__video-text__stars {
  position: relative;
  text-align: center;
}
.intro-video__video-text__star {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 0 20px
}
@media(min-width: 768px) {
.intro-video__video-text__star {
    width: 35px;
    height: 35px;
    margin: 0 20px
}
  }
.map {
  margin: 30px 0
}
@media(min-width: 1024px) {
.map {
    margin: 50px 0
}
  }
@media(min-width: 1200px) {
.map {
    margin: 80px 0
}
  }
.map__inside {
  position: relative;
  overflow: hidden;
  max-height: 800px;
  min-height: 400px
}
.map__inside:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0;
    padding-bottom: 50%;
  }
.map__iframe-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
}
.map__iframe-wrap iframe {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.image-gallery {
  margin: 30px 0
}
@media(min-width: 1024px) {
.image-gallery {
    margin: 50px 0
}
  }
@media(min-width: 1200px) {
.image-gallery {
    margin: 80px 0
}
  }
.image-gallery__items {
  position: relative;
  margin: -6px;
  overflow: hidden;
}
.image-gallery__item {
  float: left;
  margin: 6px;
  width: -webkit-calc((100% / 3) - 12px);
  width: calc((100% / 3) - 12px);
}
.image-gallery__item-image {
  display: block;
  width: 100%;
  height: auto;
}
.frame-type-form_formframework {
  position: relative;
  width: 100%;
  margin: 30px 0;
  text-align: center;

}
@media(min-width: 1024px) {
.frame-type-form_formframework {
    margin: 50px 0;

}
  }
@media(min-width: 1200px) {
.frame-type-form_formframework {
    margin: 80px 0;

}
  }
.frame-type-form_formframework h2 {
    text-align: center;
  }
.frame-type-form_formframework form {
    display: block;
    position: relative;
    max-width: 1170px;
    margin: 0 15px;
    text-align: left
  }
@media(min-width: 768px) {
.frame-type-form_formframework form {
      margin: 0 15px
  }
    }
@media(min-width: 1024px) {
.frame-type-form_formframework form {
      margin: 0 35px
  }
    }
@media (min-width: 1240px) {

  .frame-type-form_formframework form {
      margin: 0 auto
  }
    }
.frame-type-form_formframework form h2 {
      display: none;
    }
.frame-type-form_formframework form .row {
      position: relative;
    }
@media(min-width: 768px) {
.frame-type-form_formframework form .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
      }
@media(max-width: 767px) {
.frame-type-form_formframework form .row .col-xs-12 {
          width: 100%
      }
        }
.frame-type-form_formframework form .row .col-sm-12 {
        width: 100%;
      }
@media(min-width: 768px) {
.frame-type-form_formframework form .row .col-sm-6 {
          width: -webkit-calc(50% - 10px);
          width: calc(50% - 10px)
      }
        }
.frame-type-form_formframework .form-group {
    margin-bottom: 15px;

  }
.frame-type-form_formframework .form-group .control-label {
      display: block;
      margin-bottom: 3px;
      font-size: 16px;
      line-height: 24px;
      color: #000000;
      color: #000000;
      color: var(--black);
    }
.frame-type-form_formframework .form-group .form-control {
      width: 100%;
    }
.frame-type-form_formframework .form-group input[type=text], .frame-type-form_formframework .form-group input[type=email], .frame-type-form_formframework .form-group input[type=tel], .frame-type-form_formframework .form-group input[type=date] {
      padding: 10px;
      border: solid 1px #000000;
      border: solid 1px #000000;
      border: solid 1px var(--black);
      font-size: 18px;
      line-height: 20px;
      background: #fff;
      background: #fff;
      background: var(--white);
      font-family: 'Heebo', sans-serif;
      font-family: 'Heebo', sans-serif;
      font-family: var(--font-family-sans-serif);
    }
.frame-type-form_formframework .form-group textarea {
      height: 180px;
      padding: 10px;
      font-size: 18px;
      line-height: 20px;
      border: solid 1px #000000;
      border: solid 1px #000000;
      border: solid 1px var(--black);
      background: #fff;
      background: #fff;
      background: var(--white);
      font-family: 'Heebo', sans-serif;
      font-family: 'Heebo', sans-serif;
      font-family: var(--font-family-sans-serif);
    }
.frame-type-form_formframework .form-group input[type=checkbox] {
      position: relative;
      top: -3px;
      margin-right: 5px;
    }
.frame-type-form_formframework .form-group input[type=radio] {
      position: relative;
      top: -3px;
      margin-right: 5px;
    }
.frame-type-form_formframework .form-group select {
      height: 40px;
    }
.frame-type-form_formframework .loading-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.3);
    background-image: url(https://www.hotel-surpunt.com/typo3conf/ext/team3hotels_theme/Resources/Public/Images/ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: center;
  }
.control-label {

}