/* fonts */
@import url('https://fonts.googleapis.com/css?family=Raleway:300,700|Source+Sans+Pro:400,600');

/* desktop */
*{
	box-sizing: border-box;
	font-weight: 400;
}

html {
	font-size:62.5%;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
	font-size:1.6rem;
	line-height:2.1rem;
	font-weight: 400;
    width: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    color: #585858;
    background-color: #e5e1db;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    hyphens: auto;
}

body.loading {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

a {
    color: #585858;
}

a.anchor {
    width: 100%;
    height: 0px;
    position: relative;
    display: block;
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 0;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5rem;
}

sub {
    bottom: -0.25rem;
}

strong {
    font-weight: 600;
}

.mce-content-body ul,
body ul.parsed-ul {
    display: block;
    margin: 0;
    overflow: auto;
    padding: 0;
}

.mce-content-body ul li,
body ul.parsed-ul li {
    list-style: none;
    margin: 0 0 0 25px !important;
}

.mce-content-body ul li::before,
body ul.parsed-ul li::before {
    content: "\f06c";
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -25px;
    width: 25px;
    color: #e0be34;
}

.mce-content-body ol,
body ol.parsed-ol {
    display: block;
    margin: 0;
    overflow: auto;
    padding: 0;
}

.mce-content-body ol li,
body ol.parsed-ol li {
    list-style: outside none decimal;
    margin: 0 0 0 30px;
}

input,
select,
textarea {
    font-size:1.6rem;
    font-family: 'Source Sans Pro', sans-serif;
    color: #585858;
    height: 40px;
    width: 100%;
    padding: 0 3px;

    -webkit-appearance: none;
    -webkit-border-radius:0;
    border-radius:0;
}

input[type="checkbox"] {
    -webkit-appearance: none; /* checkbox */
}

input[type=checkbox]:checked {
   background: #585858;
}

textarea {
    height: 250px;
    padding: 3px;
}

a#content-end {
    z-index: 99998;
    display: block;
    bottom: -130px;
    position: relative;
}

div#wrapper {
    min-width: 320px;
}

/* button */

.button,
div.submit input {
    display: block;
    background-color: #463425;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    text-transform: uppercase;
    border: 0;
    font-family: 'Source Sans Pro', sans-serif;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 0 20px;

    -webkit-transition: color .2s linear, background-color .2s linear;
    -ms-transition: color .2s linear, background-color .2s linear;
    transition: color .2s linear, background-color .2s linear;
}

.button.turquoise,
div.submit.turquoise input {
    background-color: #1fa4b9;
}

.button.yellow,
div.submit.yellow input {
    background-color: #e0be34;
}

.button > i,
div.submit input > i {
    padding-right: 7px;
}

button.button,
input.button,
div.submit input {
    line-height: 1;
    height: 40px;
}

.button:hover {
    background-color: rgba(70, 52, 37, 0.5);
}

.button.turquoise:hover {
    background-color: #61c9da;
}

.button.yellow:hover {
    background-color: #f5d866;
}

/* menu */

div.menu {
    z-index: 10001;
    background-color: #FFFFFF;
    border-bottom: 1px solid #c8c8c8;
    position: fixed;
    width: 100%;
    height: 70px;
    top: 0;
    left: 0;
}

div.menu div.logo {
    padding: 10px 50px 0 50px;
    float: left;
}

div.menu div.logo a {
    display: block;
}

div.menu div.logo a img {
    width: 227px;
}

div.menu nav {
    float: left;
}

div.menu > nav > ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: start;
}

div.menu > nav > ul > li {
    line-height: 70px;
    padding: 0 15px;
    position: relative;
}

div.menu > nav > ul > li > i {
    float: right;
    display: none;
    color: #FFFFFF;
    line-height: 40px;
    line-height: 40px;
    margin: 0 20px 0 0;
    cursor: pointer;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

div.menu > nav > ul > li.open > i {
    -webkit-transform: rotate(90deg) translate(0, 0);
    -ms-transform: rotate(90deg) translate(0, 0);
    transform: rotate(90deg) translate(0, 0);
}

div.menu > nav > ul > li > ul.subnav {
    display: none;
    position: absolute;
    left: 0;
    top: 59px;
    background-color: rgba(31, 164, 185, 0.7);
    width: 350px;
    padding: 10px 20px 0 20px;
}

div.menu > nav > ul > li:hover > ul.subnav {
    display: block;
}

div.menu > nav > ul > li > ul.subnav > li {
    line-height: 1.8rem;
    padding: 10px 0;
    border-top: 1px solid #FFFFFF;
    color: #FFFFFF;
}

div.menu > nav > ul > li > ul.subnav > li.tab {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    padding: 0;
    background-color: #FFFFFF;
    border: none;
}

div.menu > nav > ul > li > ul.subnav > li.tab > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(31, 164, 185, 0.7);
    display: block;
}

div.menu > nav > ul > li > ul.subnav > li.parent {
    display: none;
    border-top: none;
}

.touchevents div.menu > nav > ul > li > ul.subnav > li.parent {
    display: block;
}

div.menu > nav > ul > li > ul.subnav > li.first {
    border-top: none;
}

.touchevents div.menu > nav > ul > li > ul.subnav > li.first {
    border-top: 1px solid #FFFFFF;
}

div.menu > nav > ul > li > ul.subnav > li > a {
    color: #FFFFFF;
    display: block;
    padding: 0 5px;
}

div.menu > nav > ul > li > ul.subnav > li > a > i {
    float: right;
}

div.menu > nav > ul > li > ul.subnav > li.active > a,
div.menu > nav > ul > li > ul.subnav > li > a:hover {
    color: #2a2a2a;
}

div.menu div.links {
    overflow: hidden;
    float: right;
    line-height: 70px;
}

div.menu div.links a {
    float: left;
}

div.menu div.links a.book {
    margin-left: 20px;
    float: right;
}
div.menu div.links a.phone{
	float: right;
  margin-left: 20px;
}

div.menu div.links a i {
    padding-right: 5px;
}

div.menu div.icons {
    padding: 10px 50px 0 0;
    overflow: hidden;
    float: right;
}

div.menu div.icons a {
    float: left;
    display: block;
    width: 50px;
    height: 50px;
    border: 1px solid #c8c8c8;
    margin-left: 20px;
    line-height: 50px;
    text-align: center;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;

    -webkit-transition: background-color .2s linear, border-color .2s linear, color .2s linear;
    -ms-transition: background-color .2s linear, border-color .2s linear, color .2s linear;
    transition: background-color .2s linear, border-color .2s linear, color .2s linear;
}

div.menu div.icons div.languages {
    display: none;
    position: absolute;
    top: 70px;
    right: 20px;
    background-color: rgba(31, 164, 185, 0.7);
    z-index: 99998;
    padding: 0 20px 0 20px;
    width: 150px;
}

div.menu div.icons div.languages ul {
    width: 100%;

}

div.menu div.icons div.languages ul li {
    border-top: 1px solid #FFFFFF;
}

div.menu div.icons div.languages ul li:first-child {
    border-top: none;
}

div.menu div.icons div.languages ul li a {
    text-align: left;
    clear: both;
    float: none;
    width: 100%;
    height: auto;
    line-height: 40px;
    border: none;
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: #FFFFFF;
    display: inline-block;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;

    -webkit-transition: background-color .2s linear, border-color .2s linear, color .2s linear;
    -ms-transition: background-color .2s linear, border-color .2s linear, color .2s linear;
    transition: background-color .2s linear, border-color .2s linear, color .2s linear;
}

div.menu div.icons div.languages ul li a i {
    float: right;
    line-height: 40px;
}

div.menu div.icons div.languages ul li a:hover {
    background-color: transparent;
    color: #2a2a2a;
}

div.menu div.icons div.languages.show {
    display: block;
}

div.menu div.icons a:hover,
div.menu div.icons a.active {
    background-color: #1fa4b9;
    border-color: #1fa4b9;
    color: #FFFFFF;
}

div.menu div.links a,
div.menu div.icons a,
div.menu nav > ul > li > a,
div.menu nav > ul > li > ul.subnav > li > a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.6rem;

    -webkit-transition: background-color .2s linear, border-color .2s linear, color .2s linear;
    -ms-transition: background-color .2s linear, border-color .2s linear, color .2s linear;
    transition: background-color .2s linear, border-color .2s linear, color .2s linear;
}

div.menu div.links a:hover,
div.menu nav > ul > li > a:hover,
div.menu nav > ul > li.active > a {
    color: #1fa4b9;
}

div.menu .menu-toggle {
    display: none;
    float: right;
    color: #585858;
    vertical-align: middle;
    padding: 0 20px 0 0;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 2.3rem;
    line-height: 70px;
}

div.menu .menu-toggle span.hamburger{
    display: inline-block;
    vertical-align: middle;
}

div.menu .menu-toggle span.hamburger span{
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #585858;
    border-radius: 3px;
    z-index: 1;
    -webkit-transform-origin: 4px 0px;
    -ms-transform-origin: 4px 0px;
    transform-origin: 4px 0px;
    -webkit-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease,
    -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease,
    -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    -o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease,
    -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

div.menu .menu-toggle span.hamburger span:first-child{
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

div.menu .menu-toggle span.hamburger span:nth-last-child(2){
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

div.menu.show-menu .menu-toggle span.hamburger span{
    opacity: 1;
    -webkit-transform: rotate(45deg) translate(-6px, -19px);
    -ms-transform: rotate(45deg) translate(-6px, -19px);
    transform: rotate(45deg) translate(-6px, -19px);
}

div.menu.show-menu .menu-toggle span.hamburger span:nth-last-child(3){
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.2, 0.2);
    -ms-transform: rotate(0deg) scale(0.2, 0.2);
    transform: rotate(0deg) scale(0.2, 0.2);
}

div.menu.show-menu .menu-toggle span.hamburger span:nth-last-child(2){
    opacity: 1;
    -webkit-transform: rotate(-45deg) translate(0, 15px);
    -ms-transform: rotate(-45deg) translate(0, 15px);
    transform: rotate(-45deg) translate(0, 15px);
}

/* header */

header.images {
    display: block;
    width: 100%;
    height: 100vh;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
}

.csscalc header.images {
    margin-top: 70px;
    height: calc(100vh - 70px);
}

header.images > div.animation {
    opacity: 0;
    width: 100%;
    height: 30vh;
    position: absolute;
    top: 35vh;
    left: 0;
    background: transparent url("/frontend/img/enjoy-meran.svg") no-repeat center center;
    background-size: contain;
    z-index: 999;
}

.cssanimations body.loaded header.images > div.animation {
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-delay: 1.5s;
    animation-name: header-text;
}

header.images .bubble {
    display: block;
    text-decoration: none;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 5px solid #1fa4b9;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 99;
    padding: 5px;
    hyphens: none;

    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

header.images .bubble > div {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #1fa4b9;
}

header.images .bubble > div > div {
    text-align: center;
    color: #FFFFFF;
    position: absolute;
    left: 5%;
    width: 90%;
    top: 45%;
    font-weight: 100;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

header.images .bubble > div > div span.h2 {
    display: block;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 700;
    font-family: 'Raleway', sans-serif;
    font-size: 2rem;
    line-height: 2rem;
}

header.images .viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bx-wrapper {
    position: relative;
    margin: 0;
    padding: 0;
    *zoom: 1;
    height: 100% !important;
}

.bx-wrapper .bxslide {
    width: 100%;
    height: 100% !important;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.bx-wrapper .bxslide div.text {
    color: #ffffff;
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    font-size: 4rem;
    line-height: 12rem;
    padding: 0;
    margin: -6rem 0 0;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    background-color: rgba(70, 52, 37, 0.3);
}

.bx-wrapper .bx-viewport {
    background: #fff;

    /*fix other elements on the page moving (on Chrome)*/
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}

header.images .bx-wrapper .bx-viewport {
    height: 100% !important;
}

.bx-wrapper ul li {
    height: 100% !important;
    margin: 0 !important;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
    width: 100%;
}

.bx-wrapper .bx-loading {
    min-height: 50px;
    /* background: url(images/bx_loader.gif) center center no-repeat #fff; */
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

.bx-wrapper .bx-prev {
    left: 80px;
}

.bx-wrapper .bx-next {
    right: 80px;
}

.bx-wrapper .bx-controls-direction a,
div.room-images div.panorama a.open-tour {
    color: #ffffff;
    font-size: 32px;
    height: 32px;
    line-height: 32px;
    margin-top: -16px;
    outline: 0 none;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 32px;
    z-index: 9999;
}

.bx-wrapper .bx-controls-direction a span,
div.room-images div.panorama a.open-tour span {
    font-size: 32px;
    height: 32px;
    line-height: 32px;
    outline: 0 none;
    text-align: center;
    width: 32px;
    display: block;
}

.bx-wrapper .bx-controls-direction a i,
div.room-images div.panorama a.open-tour i {
    color: #FFFFFF;
    font-size: 20px;
    height: 32px;
    line-height: 32px;
    outline: 0 none;
    text-align: center;
    width: 32px;
}

.bx-wrapper .bx-controls-direction a.bx-prev i,
div.room-images div.panorama a.open-tour.prev i {
    padding-right: 3px;
}

.bx-wrapper .bx-controls-direction a.bx-next i,
div.room-images div.panorama a.open-tour.next i {
    padding-left: 3px;
}

.bx-wrapper .bx-controls-direction a i.fa-circle,
div.room-images div.panorama a.open-tour i.fa-circle {
    color: rgba(70, 52, 37, 0.5);
    font-size: 35px;
    padding: 0;
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}

header.images a#j2c.button {
    position: absolute;
    bottom: 55px;
    left: calc(50vw - 100px);
    z-index: 999;
    width: 200px;
    background-color: rgba(70, 52, 37, 0.5);
}

header.images a#j2c.button:hover {
    background-color: rgba(70, 52, 37, 1);
}

/* breadcrumbs */

section.breadcrumbs {
    font-size: 1rem;
    line-height: 1.2rem;
    padding: 10px 20px;
    text-align: center;
}

section.breadcrumbs ol li,
section.breadcrumbs ol i {
    display: inline-block;
}

section.breadcrumbs a {
    text-decoration: none;
}

/* top buttons */

section.top-buttons {
    padding: 20px 0 0 0;
    text-align: center;
}

section.top-buttons a {
    margin: 0 10px;
    display: inline-block;
    border: 1px solid #c8c8c8;
    text-transform: uppercase;
    padding: 0 20px;
    line-height: 40px;
    height: 40px;
    text-decoration: none;
}

section.top-buttons a:hover {
    border-color: #1fa4b9;
}

/* cookie */

section.cookie {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #FFFFFF;
    padding: 10px 0;
    z-index: 9999999;
}

section.cookie br {
    display: none;
}

section.cookie > div {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 20px;
}

section.cookie a {
    color: #5D5D5D;
}

section.cookie a.button {
    display: block;
    position: absolute;
    right: 0;
    color: #5D5D5D;
    top: 0;
    width: 40px;
    height: 40px;
    font-size: 30px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

/* content/textblocks */

.header-spacer,
.menu-spacer {
    background-color: #FFFFFF;
}

.header-spacer {
    height: 100vh;
}

.menu-spacer {
    height: 70px;
}

main {

}

main,
section.main,
div.media-group.teaser-4-group,
div.media-group.special-group {
    position: relative;
    background-color: #e5e1db;
}

body.en div.media-group,
body.it div.media-group{
	display: none;
}
body.is-short-yes div.media-group,
body.en div.media-group.special-content-group,
body.it div.media-group.special-content-group,
body.en div.media-group.special-seekda-group,
body.it div.media-group.special-seekda-group,
body.en div.media-group.special-aries-creative-voucher-group,
body.it div.media-group.special-aries-creative-voucher-group{
	display: block;
}

div.media-group.teaser-4-group {
    padding-top: 40px;
}

main > div,
section.main > div,
div.media-group.teaser-4-group > div,
div.media-group.special-children-prices-group > div,
div.media-group.special-children-prices-suite-group > div {
    margin: 0 auto;
    width: 100%;
    max-width: 1040px;
    padding: 40px 20px;
}

main > div,
div.media-group.special-children-prices-group > div,
div.media-group.special-children-prices-suite-group > div {
    padding-top: 0;
}

div.media-group.teaser-4-group > div,
section.main.overview > div {
    padding-top: 0;
    padding-bottom: 0;
}

main > div h1,
h2.editor,
h3.editor {
    text-align: center;
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    font-size: 3.5rem;
    line-height: 4rem;
    color: #1fa4b9;
    padding: 30px 0 30px 0;
}

h2.editor {
    padding: 0;
}

h2.editor.special-headline {
    padding: 30px 0;
}

h3.editor {
    padding: 0;
    line-height: 2.5rem;
    font-size: 2rem;
}

main > div h1.with-caption {
    padding-bottom: 0;
}

main > div .h1-caption {
    text-align: center;
    font-weight: bold;
    padding-bottom: 30px;
}

main.with-columns > div div.content {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    -webkit-column-rule: 1px solid #c8c8c8;
    -moz-column-rule: 1px solid #c8c8c8;
    column-rule: 1px solid #c8c8c8;
}

/* editor */

span.small {
    font-size: 1.2rem;
}

span.color {
    color: #1fa4b9;
}

/* teaser 1 */

section.image,
section.teaser-1 {
    height: 100vh;
    width: 100%;
    position: relative;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
}

section.teaser-1 > div {
    position: absolute;
    top: calc(50% - 60px);
    color: #ffffff;
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    font-size: 4rem;
    line-height: 12rem;
    padding: 0;
    text-align: center;
    width: 100%;
    background-color: rgba(70, 52, 37, 0.3);
}

.cssanimations div.teaser-1-wrapper section.teaser-1 > div {
    opacity: 0;
}

.cssanimations div.teaser-1-wrapper.animate section.teaser-1 > div {
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-name: teaser-caption;
}

/* teaser 2 */

section.teaser-2 {
    min-height: 100vh;
    position: relative;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

section.teaser-2 article {
    position: relative;
    width: 30%;
    min-height: 100vh;
    right: 15%;
    left: 55%;
    background-color: #e0be34;
    color: #FFFFFF;
    padding: 0 70px;
}

section.teaser-2 article table,
section.teaser-2 article table tr td {
    width: 100%;
    height: 100vh;
    vertical-align: middle;
}

section.teaser-2 article table tr td {
    padding-top: 40px;
    padding-bottom: 40px;
}

section.teaser-2 article h2 {
    color: #ffffff;
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    font-size: 3.5rem;
    line-height: 4rem;
    padding-bottom: 40px;
    position: relative;
}

section.teaser-2 article td h3,
section.teaser-2 article td a,
body section.teaser-2 article td ul.parsed-ul li::before {
    color: #FFFFFF;
}

section.teaser-2 article h2 > img,
section.teaser-2 article h2 > a {
    display: block;
    position: absolute;
    left: -200px;
    top: -150px;
}

section.teaser-2 article h2 > img,
section.teaser-2 article h2 > a > img {
    width: 200px;
}

/* teaser 3 */

section.teaser-3 {
    position: relative;
    padding: 40px 0;
}

section.teaser-3 > div {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0 auto;
}

section.teaser-3 span.image,
section.teaser-3 a.image,
section.teaser-3 div.video {
    position: absolute;
    top: 0;
    left: 20px;
    height: 100%;
    width: calc(50% - 20px);
    display: block;
    background-repeat: no-repeat;
    background-size: cover;

    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

section.teaser-3.even span.image,
section.teaser-3.even a.image,
section.teaser-3.even div.video {
    left: auto;
    right: 20px;
}

section.teaser-3 div.video {
    height: auto;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

.cssanimations section.teaser-3 span.image,
.cssanimations section.teaser-3 a.image,
.cssanimations section.teaser-3 div.video {
    opacity: 0;
}

.cssanimations section.teaser-3.animate span.image,
.cssanimations section.teaser-3.animate a.image,
.cssanimations section.teaser-3.animate div.video {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: teaser-image;
    animation-delay: 0.5s;
}

section.teaser-3 div.video video {
    width: 100%;
}

section.teaser-3 div.video div.youtube {
    width: 100%;
    padding-top: 56%; /* 16:9 */
    position: relative;
}

section.teaser-3 div.video div.youtube iframe {
    width:100%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
}

section.teaser-3 div.content {
    width: 50%;
    float: right;
    padding: 40px 0 80px 40px;
    position: relative;
}

section.teaser-3.even div.content {
    float: left;
    padding-left: 0;
    padding-right: 40px;
}

section.teaser-3 div.content h2 {
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    font-size: 5rem;
    line-height: 6rem;
    color: #1fa4b9;
    padding-bottom: 30px;
}

section.teaser-3 div.content h2 span {
    display: block;
}

.cssanimations section.teaser-3 div.content h2 span {
    opacity: 0;
}

.cssanimations section.teaser-3.animate div.content h2 span.line-1 {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: teaser-line;
    animation-delay: 1s;
}

section.teaser-3 div.content h2 span.line-2 {
    text-align: center;
    font-size: 3rem;
    line-height: 3rem;
}

.cssanimations section.teaser-3.animate div.content h2 span.line-2 {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: teaser-line;
    animation-delay: 1.2s;
}

section.teaser-3 div.content a.more {
    position: absolute;
    bottom: 0;
    left: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border: 1px solid #c8c8c8;
    text-decoration: none;
    text-transform: uppercase;

    -webkit-transition: color .2s linear, background-color .2s linear;
    -ms-transition: color .2s linear, background-color .2s linear;
    transition: color .2s linear, background-color .2s linear;
}

section.teaser-3.even div.content a.more {
    left: auto;
    right: 40px;
}

.cssanimations section.teaser-3 div.content > div,
.cssanimations section.teaser-3 div.content a.more {
    opacity: 0;
}

.cssanimations section.teaser-3.animate div.content > div,
.cssanimations section.teaser-3.animate div.content a.more {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: teaser-content;
}

.cssanimations section.teaser-3.animate div.content a.more {
    animation-delay: 0.5s;
}

section.teaser-3 div.content a.more:hover {
    background-color: #c8c8c8
}

/* teaser 4 */

.teaser-4 {
    position: relative;
    background-color: #FFFFFF;
    margin-bottom: 40px;

    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.teaser-4.no-shaddow {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.t4d-small div.media-group.teaser-4-group .teaser-4 {
    float: left;
    width: calc(50% - 20px);
}

.t4d-small div.media-group.teaser-4-group .teaser-4.even {
    float: right;
}

.teaser-4 a.image,
.teaser-4 div.image,
.teaser-4 .ratio-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 66.666%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
}

.teaser-4 .ratio-image > div,
.teaser-4 .ratio-image > a {
    display: block;
    text-decoration: none;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.t4d-small div.media-group.teaser-4-group .teaser-4 .ratio-image {
    background-color: #FFFFFF;
    width: 100%;
    padding-top: 60%;
    position: relative;
}

.teaser-4 div.text-wrapper {
    float: right;
    width: 33.333%;
    padding: 40px;
}

.t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper {
    clear: both;
    width: 100%;
    height: 345px;
    overflow: hidden;
}

body.it.t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper,
body.en.t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper {
    height: 420px;
}

.teaser-4 div.text-wrapper h2 {
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    font-size: 3rem;
    line-height: 3.5rem;
    text-align: center;
    padding-bottom: 0;
}

div.media-group.teaser-4-group .teaser-4 div.text-wrapper h2 {
    padding-bottom: 20px;
}

.teaser-4 div.text-wrapper .size,
.teaser-4 div.text-wrapper .times {
    padding-bottom: 20px;
    font-weight: bold;
    text-align: center;
}

.teaser-4 div.text-wrapper .price {
    padding-top: 20px;
    font-size: 2rem;
    line-height: 2rem;
    font-weight: bold;
    text-align: center;
}

.teaser-4 div.text-wrapper .price span {
    font-size: 1rem;
}

.teaser-4 div.text-wrapper .buttons {
    padding-top: 20px;
}

.t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper .buttons {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #FFFFFF;
    padding: 20px 40px 40px 40px;
}

.teaser-4 div.text-wrapper .buttons a {
    width: calc(50% - 10px);
    float: left;
    padding: 0;
}

.teaser-4.one-button div.text-wrapper .buttons a {
    clear: both;
    float: none;
    margin: 0 auto;
    width: 50%;
}

.teaser-4 div.text-wrapper .buttons a.yellow {
    margin-left: 20px;
}

section.overview .teaser-4 div.text-wrapper .buttons a.fw {
    margin: 0;
    width: 100%;
    float: none;
    clear: both;
    width: 100%;
}

section.overview .teaser-4 div.text-wrapper .buttons a.yellow {
    float: left;
    margin-top: 20px;
    margin-left: 0;
    margin-right: 0;
    width: calc(50% - 10px);
}

section.overview .teaser-4 div.text-wrapper .buttons a.yellow.book {
    float: right;
}

/* teaser 5 */

.teaser-5 {
    position: relative;
    background-color: #FFFFFF;
    margin-top: 40px;

    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.teaser-5.nr-0 {
    margin-top: 0;
}

.teaser-5 > div.preview {
    position: relative;
}

.teaser-5 .ratio-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 66.666%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
}

.teaser-5 .ratio-image > div {
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.teaser-5 div.text-wrapper {
    float: right;
    width: 33.333%;
    padding: 40px;
}

.teaser-5 div.text-wrapper h2 {
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    font-size: 3rem;
    line-height: 3.5rem;
    text-align: center;
    padding-bottom: 0;
}

.teaser-5 div.text-wrapper .ranges {
    text-align: center;
}

.teaser-5 div.text-wrapper .desc {
    padding-top: 20px;
    text-align: center;
    padding-bottom: 5px;
    font-weight: bold;
}

.teaser-5 div.text-wrapper .value {
    font-size: 2.3rem;
    line-height: 2.3rem;
    font-weight: bold;
    text-align: center;
}

.teaser-5 div.text-wrapper .value span {
    font-size: 1rem;
}

.teaser-5 div.text-wrapper .buttons {
    padding-top: 20px;
}

.teaser-5 div.text-wrapper .buttons a {
    width: calc(50% - 10px);
    float: left;
    padding: 0;
}

.teaser-5 div.text-wrapper .buttons a {
    float: left;
    margin-left: 0;
    margin-right: 0;
    width: calc(50% - 10px);
}

.teaser-5 div.text-wrapper .buttons a.book {
    float: right;
}

.teaser-5 div.text-wrapper .buttons a.fw {
    margin: 0;
    width: 100%;
    float: none;
    clear: both;
}

.teaser-5 > div.more {
    position: relative;
    padding: 20px;
}

.teaser-5 > div.more a.close {
    margin-top: 20px;
}

/* children prices */

div.children-prices-wrapper {
   padding-top: 40px;
}

section.children-prices {

}

section.children-prices.inline {
    padding-top: 20px;
}

section.children-prices div.list {
    padding: 20px 0 20px 0;
}

section.children-prices.inline div.list {
    padding-bottom: 0;
}

section.children-prices div.list div.line i {
    color: #e0be34;
    padding-right: 10px;
    line-height: 2.1rem;
}

/* treatments */

section.overview.treatment {
    padding-top: 40px;
}

section.overview.treatment h2 {
    padding-bottom: 20px;
}

section.overview.treatment div.treatment {
    background-color: #FFFFFF;
    padding: 0;
}

section.overview.treatment div.treatment div.title {
    padding: 10px 40px 10px 40px;
    background-color: #1fa4b9;
    color: #FFFFFF;
    font-weight: 600;
    border-top: 1px solid #FFFFFF;
    cursor: pointer;
    position: relative;
}

section.overview.treatment div.treatment.first div.title {
    border-top: 0;
}

section.overview.treatment div.treatment div.title i {
    position: absolute;
    left: 20px;
    top: 13px;
}

section.overview.treatment div.treatment div.title i.fa-chevron-down {
    left: auto;
    top: 10px;
    right: 20px;
}

section.overview.treatment div.treatment.expand div.title i.fa-chevron-down {
    top: 13px;
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

section.overview.treatment div.treatment div.content {
    display: none;
    padding: 20px;
}

section.overview.treatment div.treatment div.content div.prices {
    padding: 15px 0 0 0;
}

section.overview.treatment div.treatment div.content div.prices div.price {
    padding: 5px;
    border-top: 1px solid #1fa4b9;
}

section.overview.treatment div.treatment div.content div.prices div.price div.draft {
    float: left;
    font-weight: 600;
}

section.overview.treatment div.treatment div.content div.prices div.price div.value {
    float: right;
}

section.overview.treatment div.treatment.expand div.content {
    display: block;
}

/* sitemap */

section.sitemap > div > ul {
    float: left;
    width: 50%;
}

section.sitemap > div > ul ul {
    padding-left: 20px;
}

section.sitemap li {
    padding: 3px 0;
}

section.sitemap li a {
    text-decoration: none;
}

section.sitemap > div > ul > li > a {
    font-weight: 500;
}

section.sitemap ul {
    display: block;
    margin: 0;
    overflow: auto;
    padding: 0;
}

section.sitemap ul li {
    list-style: outside none none;
    margin: 0 0 0 0;
}



/* download */

section.downloads .download {
    background:#1fa4b9;
    position:relative;
    float:left;
    width: calc(25% - 15px);
    margin: 20px 0 0 0;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

section.downloads .download.pos-4-0 {
    margin-right: 15px;
}

section.downloads .download.pos-4-1 {
    margin-left: 5px;
    margin-right: 10px;
}

section.downloads .download.pos-4-2 {
    margin-left: 10px;
    margin-right: 5px;
}

section.downloads .download.pos-4-3 {
    margin-left: 15px;
}

section.downloads .download .download-inner {
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    opacity:1;
    padding-top:100%;
    position:relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

section.downloads .download:hover .download-inner {
    opacity:0.3;
}

section.downloads .download .download-title {
    color:#fff;
    text-align:center;
    font-size: 20px;
    line-height: 20px;
    z-index:2;
    position: absolute;
    text-transform: uppercase;
    transform: translate3d(0px, 20px, 0px);
    transition: transform 0.35s ease 0s;
    width: 100%;
    bottom:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}

section.downloads .download .download-title .download-icon {
    opacity:0;
    -webkit-transition: opacity 0.35s, margin-top 0.35s;
    transition: opacity 0.35s, margin-top 0.35s;
    display:block;
    width:100%;
    text-align:center;
    font-size:70px;
    margin-top:-120px;
}

section.downloads .download:hover .download-title .download-icon {
    opacity:1;
    margin-top:10px;
}

/* galleries */

section.gallery ul.bxslider li div.bxslide {
    height: 470px !important;
}

section.gallery div.bxpager a.bxslide {
    height: 150px !important;
}

section.gallery div.bxpager-wrapper {
    padding-top: 20px;
}

section.gallery .bx-wrapper .bx-viewport {
    background-color: transparent;
}

/* weather */

section.weather {

}

section.weather > div {
    padding-top: 0;
    padding-bottom: 0;
}

section.weather div.day {
    text-align: center;
    width: calc(25% - 15px);
    float: left;
    margin-right: 15px;
    background-color: #FFFFFF;
}

section.weather div.day.nr-1 {
    margin-left: 5px;
    margin-right: 10px;
}

section.weather div.day.nr-2 {
    margin-left: 10px;
    margin-right: 5px;
}

section.weather div.day.nr-3 {
    margin-left: 15px;
    margin-right: 0;
}

section.weather div.day div.icon {
    font-family: 'MeteoconsRegular';
    font-size: 50px;
    line-height: 50px;
}

section.weather div.day div.date {
    font-weight: bold;
    padding: 10px;
    color: #FFFFFF;
    background-color: #1fa4b9;
}

section.weather div.day img {
    padding-top: 5px;
}

section.weather div.day div.tempreture {
    padding: 0 0 10px 0;
}

section.weather div.conditions {
    padding-top: 20px;
}

/* map */

section.routeplanner {
    padding-top: 0;
}

section.routeplanner #route-error {
    padding: 10px;
    background-color: #DF2929;
    color: #FFFFFF;
    text-align: center;
    display: none;
    max-width: none;
    width: 100%;
}

section.routeplanner #map-canvas {
    width: 100%;
    height: 500px;
    padding: 0;
    max-width: none;
}

section.routeplanner > #control {
    display: none;
}

section.routeplanner #control {
    padding: 10px;
}

section.routeplanner #control input {
    float: left;
    width: 180px;
    text-align: center;
}

section.routeplanner #control button.submit {
    float: right;
    font-size: 20px;
    padding: 0 10px;
    line-height: 1;
}

section.routeplanner #control button.submit i {
    padding: 0;
}

section.routeplanner #directions-panel {
    padding: 20px;
}

section.routeplanner #directions-panel div.adp-list {
    background-color: #FFFFFF;
    border: 0;
}

section.routeplanner #directions-panel div.adp-list td {
    padding: 10px;
}

section.routeplanner #directions-panel div.adp-list td.adp-listheader {
    padding: 0 5px 10px 5px;
    font-weight: 500;
}

section.routeplanner #directions-panel div.adp-list td.adp-listsel {
    background-color: #1fa4b9;
    color: #FFFFFF;
}

section.routeplanner .routeplanner img {
    border: 0;
}

section.routeplanner table.adp-placemark {
    background-color: #1fa4b9;
    color: #FFFFFF !important;
}

section.routeplanner table.adp-placemark {
    width: 100%;
    border: 0;
}

section.routeplanner table.adp-placemark td {
    padding: 0px;
    vertical-align: middle;
    font-size: 20px;
}

section.routeplanner table.adp-placemark td img {
    display: none;
}

section.routeplanner table.adp-placemark td.adp-text {
    padding: 0 10px;
    font-size:1.6rem;
    line-height:4.1rem;
    font-weight: 600;
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #1fa4b9 !important;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    color: #FFFFFF;
}

section.routeplanner table.adp-placemark td img {
    margin: 0;
}

section.routeplanner table.adp-directions {
    width: 100%;
}

section.routeplanner .adp-summary {
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
}

section.routeplanner .adp-details, section.routeplanner .adp-legal {
    color: #b3b3b3;
    font-size: 10px;
    padding: 0;
    text-align: right;
}

/* forms */

div.message {
    font-weight: bold;
    text-align: center;
    background-color: #1fa4b9;
    color: #FFFFFF;
    padding: 10px;
}

div.message.error {
    background-color: #DF2929;
}

div.message.space-top {
    margin-top: 20px;
}

main > div > form,
section.main > div > form {
    width: 100%;
    padding: 30px 0;
    margin: 0 auto;
}

section.main > div > form {
    padding: 0;
}

main > div > form div.col,
section.main > div > form div.col {
    width: 50%;
    float: left;
}

main > div > form div.col.left,
section.main > div > form div.col.left {
    padding-right: 10px;
}

main > div > form div.col.right,
section.main > div > form div.col.right {
    padding-left: 10px;
}

main > div > form div.input,
section.main > div > form div.input {
    padding: 10px 0 0 0;
}

main > div > form div.input.checkbox,
section.main > div > form div.input.checkbox {
    padding: 0 0 0 0;
}

main > div > form div.input label,
section.main > div > form div.input label {
    display: block;
    cursor: pointer;
    font-weight: 500;
}

section.search input,
main > div > form div.input input,
main > div > form div.input select,
main > div > form div.input textarea,
section.main > div > form div.input input,
section.main > div > form div.input select,
section.main > div > form div.input textarea {
    width: 100%;
    border: 1px solid #5D5D5D;
    line-height: 30px;
}

main > div > form div.input select.room-selector.initialized,
main > div > form div.input select.package-selector.initialized,
section.main > div > form div.input select.room-selector.initialized,
section.main > div > form div.input select.package-selector.initialized {
    float: left;
    width: calc(100% - 60px);
}

main > div > form div.input button.selector,
section.main > div > form div.input button.selector {
    float: right;
    height: 40px;
    border: 0;
    line-height: 40px;
    width: 40px;
    cursor: pointer;
    background-color: #1fa4b9;
    color: #FFFFFF;
}

main > div > form div.input div.error-message,
section.main > div > form div.input div.error-message {
    color: #DF2929;
    padding: 2px 5px;
}

main > div > form div.input label > span.asterisks,
section.main > div > form div.input label > span.asterisks {
    display: none;
}

main > div > form div.input.required label > span.asterisks,
section.main > div > form div.input.required label > span.asterisks {
    display: inline;
}

main > div > form div.input div.checkbox input,
main > div > form div.input.checkbox input,
section.main > div > form div.input div.checkbox input,
section.main > div > form div.input.checkbox input {
    width: 12px;
    height: 12px;
    margin-right: 10px;
}

main > div > form div.input div.checkbox label,
main > div > form div.input.checkbox label,
section.main > div > form div.input div.checkbox label,
section.main > div > form div.input.checkbox label {
    font-weight: normal;
}

main > div > form section.newsletter,
section.main > div > form section.newsletter {
    padding-top: 10px;
}

main > div > form section.newsletter h2,
section.main > div > form section.newsletter h2 {
    font-weight: 500;
}

main > div > form section.newsletter div.info,
section.main > div > form section.newsletter div.info {
    padding-bottom: 10px;
}

main > div > form section.captcha,
section.main > div > form section.captcha {
    margin-top: 10px;
    padding: 10px;
    background-color: #F3F1EB;
}

main > div > form section.captcha h2,
section.main > div > form section.captcha h2 {
    font-weight: 500;
}

main > div > form section.captcha > div.input.captcha,
section.main > div > form section.captcha > div.input.captcha {
    padding: 0;
    float: left;
}

main > div > form section.captcha > div.input.captcha > label,
section.main > div > form section.captcha > div.input.captcha > label {
    float: left;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
}

main > div > form section.captcha > div.input.captcha > div.captcha-field,
section.main > div > form section.captcha > div.input.captcha > div.captcha-field {
    float: left;
}

main > div > form section.captcha > div.input.captcha > div.captcha-field > img,
section.main > div > form section.captcha > div.input.captcha > div.captcha-field > img {
    float: left;
}

main > div > form section.captcha > div.input.captcha > div.captcha-field > div.input,
section.main > div > form section.captcha > div.input.captcha > div.captcha-field > div.input {
    float: left;
    padding: 0;
    width: 150px;
}

main > div > form section.captcha > div.input.captcha > div.input div.error-message,
section.main > div > form section.captcha > div.input.captcha > div.input div.error-message {
    text-align: center;
}

main > div > form section.captcha div.submit,
section.main > div > form section.captcha div.submit {
    float: right;
}

main > div > form > div.submit,
section.main > div > form > div.submit {
    float: right;
    padding: 10px 0;
}

main > div > form section.send-option,
section.main > div > form section.send-option {
    padding: 10px;
    text-align: right;
}

main > div > form section.send-option a.submit,
section.main > div > form section.send-option a.submit {
    float: right;
}

/* request form rooms */
.rooms-wrap{
	text-align: center;
}
.rooms-label{
	margin-top: 2rem;
}
.rooms-wrap .room-add.button{
	background: #1fa4b9;
	width:auto;
    display: inline-block;
    margin: 0 auto 1rem auto;
}
.rooms-wrap .room-wrap{
	display: flex;
	flex-wrap:wrap;
	background:#fff;
	padding:15px;
	margin-bottom: 1.5rem;
	position: relative;
	border:1px solid #5D5D5D;
	opacity:1;
	max-height:500px;
	transition: opacity 0.3s linear, max-height 0.3s linear;
}
.rooms-wrap .room-wrap.fadedout{
	opacity:0;
	max-height:0;
}
.rooms-wrap .room-wrap label{
	text-align: left;
    font-weight: bold;
    font-size: 1.3rem;
}
.rooms-wrap .room-wrap .room-remove{
	position: absolute;
	top: -0.5rem;
    right: -0.5rem;
	border-radius: 90px;
	background: #1fa4b9;
	color: #fff;
	font-size: 2rem;
	height:3rem;
	line-height: 3rem;
	width: 3rem;
	vertical-align: middle;
	text-align: center;
	opacity:1;
	transition: opacity 0.3s linear;
}
.rooms-wrap .room-wrap .room-remove.room-nodelete{
	opacity:0;
}
.rooms-wrap .room-wrap > .input.select{
	width:100%;
	padding: 0;
}
.rooms-wrap .room-wrap > .room-col{
	width:calc(50% - 5px);
}
.rooms-wrap .room-wrap > .room-col-2{
	margin-left: 10px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.rooms-wrap .room-wrap > .room-col-2 > .input{
	width:calc(50% - 5px);
}
.rooms-wrap .room-wrap > .room-col-2 > .input:first-of-type{
	width:100%;
}
.rooms-wrap .room-wrap > .room-col-2 > .input.room-child-age{
	opacity:1;
	max-height:100px;
	transition: opacity 0.3s linear, max-height 0.3s linear;
}
.rooms-wrap .room-wrap > .room-col-2 > .input.room-child-age.fadedout{
	opacity:0;
	max-height:0;
}


/* rooms/packages */

div.room-images,
div.package-image {
    margin: 40px 0;
    background-color: #FFFFFF;
    width: 100%;
    padding-top: 40%;
    position: relative;

    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

div.room-images {
    padding: 0;
    line-height: 0;
    font-size: 0;
    position: relative;
}

div.room-images ul.bxslider li div.bxslide,
div.room-images div.panorama {
    height: 470px !important;
}

div.room-images a.open-tour-button {
   position: absolute;
   right: -70px;
   top: -70px;
   width: 140px;
   height: 140px;
   background: transparent url("/frontend/img/open-tour.png") no-repeat center center;
   background-size: contain;
}

div.room-images div.panorama iframe {
    width: 100%;
    height: 100%;
}

div.package-image div {
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

section.prices.room {

}

section.prices.desktop-only {
    display: block;
}

section.prices.mobile-only {
    display: none;
}

section.prices.room.mobile-only h2 {
    padding-bottom: 20px;
}

section.prices.room .line,
section.prices.package .line {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: start;
}

section.prices.room .line .draft,
section.prices.room .line .season,
section.prices.package .line .info,
section.prices.package .line .room,
section.prices.room.mobile-only .season,
section.prices.room.mobile-only .prices .price,
section.prices.package.mobile-only .room,
section.prices.package.mobile-only .prices .price {
    position: relative;
    width: 450px;
    padding: 15px;
    background-color: #FFFFFF;
    margin-top: 5px;

    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

section.prices.room .line .draft,
section.prices.room .line .season {
    width: 325px;
}

section.prices.room.mobile-only .season,
section.prices.package.mobile-only .room {
    width: 100%;
    text-align: center;
    margin-top: 20px !important;
}

section.prices.room.mobile-only .prices .price,
section.prices.package.mobile-only .prices .price {
    width: calc(50% - 3px);
    float: left;
    text-align: center;
}

section.prices.package.mobile-only .price-table .prices .price {
    width: 100%;
}

section.prices.package.mobile-only .price-table.drafts-2 .prices .price {
    width: calc(50% - 4px);
}


section.prices.package.mobile-only .price-table.drafts-3 .prices .price {
    width: calc(33.333% - 4px);
}

section.prices.package.mobile-only .price-table.drafts-4 .prices .price {
    width: calc(25% - 4px);
}

section.prices.room.mobile-only .prices .price.pos-1,
section.prices.room.mobile-only .prices .price.pos-3 {
    float: right;
}

section.prices.package.mobile-only .prices .price.pos-0 {
    margin-right: 4px;
}

section.prices.package.mobile-only .prices .price.pos-1 {
    margin-left: 2px;
    margin-right: 2px;
}

section.prices.package.mobile-only .prices .price.pos-2 {
    margin-left: 4px;
}

section.prices.room.mobile-only .prices .price .option,
section.prices.package.mobile-only .prices .price .draft {
    font-weight: bold;
}

section.prices.room.mobile-only .prices .price .value span,
section.prices.package.mobile-only .prices .price .value span {
    padding-right: 5px;
}

section.prices.room .line .season .name {
    font-weight: bold;
}

section.prices.package .line .room a {
    font-weight: bold;
    text-decoration: none;
}

section.prices.package .line .room i {
    padding-right: 5px;
}

section.prices.room .line .options,
section.prices.package .line .drafts {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
}

section.prices.room .line .options .option,
section.prices.package .line .drafts .draft {
    position: relative;
    text-align: center;
    padding: 15px;
    background-color: #FFFFFF;
    margin-left: 5px;
    margin-top: 5px;
    width: 100%;

    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

section.prices.room .options-2 .options .option,
section.prices.package .drafts-2 .drafts .draft {
    width: 50%;
}

section.prices.room .options-3 .options .option,
section.prices.package .drafts-3 .drafts .draft {
    width: 33.333%;
}

section.prices.room .options-4 .options .option,
section.prices.package .drafts-4 .drafts .draft {
    width: 25%;
}

section.prices.room .line .options .option > span,
section.prices.package .line .drafts .draft > span {
    padding-right: 10px;
}

section.prices.room .line.headline .draft,
section.prices.room .line.headline .options .option,
section.prices.package .line.headline .info,
section.prices.package .line.headline .drafts .draft,
section.prices.room.mobile-only .season,
section.prices.package.mobile-only .room {
    background-color: #1fa4b9;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-top: 0;
    font-weight: bold;
}

section.prices.package.mobile-only .room a {
    color: #FFFFFF;
    text-decoration: none;
}

section.prices .footnote {
    padding: 40px 0 0 0;
}

/* room table overview */

section.overview.room.view-table {

}

section.overview.room.view-table > div {
    max-width: none;
    padding-top: 0;
    padding-bottom: 40px;
}

section.overview.room.view-table > div div.row .shaddow {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

section.overview.room.view-table div.row {
    position: relative;
}

section.overview.room.view-table div.row.th a.nav {
    position: absolute;
    display: block;
    top: calc(50% - 16px);
    left: 312px;
    color: #FFFFFF
}

section.overview.room.view-table div.row.th a.nav.next {
    left: auto;
    right: 6px;
}

section.overview.room.view-table div.row.th a.nav i {
    color: #FFFFFF;
    font-size: 20px;
    height: 32px;
    line-height: 32px;
    outline: 0 none;
    text-align: center;
    width: 32px;
}

section.overview.room.view-table div.row.th a.nav.prev i {
    padding-right: 3px;
}

section.overview.room.view-table div.row.th a.nav i.fa-circle {
    color: rgba(70, 52, 37, 0.5);
    font-size: 35px;
    padding: 0;
}

section.overview.room.view-table div.row > div.season {
    width: 195px;
    margin: 0 5px 5px 0;
    height: 107px;
    font-weight: bold;
}

section.overview.room.view-table div.row > div.season div.times {

}

section.overview.room.view-table div.row > div.season div.times div.time {
    font-weight: normal;
}

section.overview.room.view-table div.row > div.options {
    width: 125px;
    margin: 0 5px 5px 0;
}

section.overview.room.view-table div.row > div.options div.option {
    border-top: 1px solid #1FA4B9;
    text-align: center;
}

section.overview.room.view-table div.row > div.options div.option:first-child {
    border-top: 0;
}

section.overview.room.view-table div.row > div.rooms-wrapper {
    float: left;
    width: calc(100% - 330px);
    overflow: hidden;
    position: relative;
}

section.overview.room.view-table div.row > div.rooms-wrapper div.rooms {
    width: calc(200% - 40px);
    position: relative;
    left: 0px;
}

section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room {
    text-align: center;
    width: calc((100% / 10) - 5px);
    margin: 0 5px 5px 0;
}

section.overview.room.view-table div.row > div.season,
section.overview.room.view-table div.row > div.options,
section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room {
    float: left;
    background-color: #FFFFFF;
    padding: 10px;
}

section.overview.room.view-table div.row.th > div.season,
section.overview.room.view-table div.row.th > div.options,
section.overview.room.view-table div.row.th > div.rooms-wrapper div.rooms div.room {
    background-color: #1fa4b9;
    font-weight: bold;
    color: #FFFFFF;
    vertical-align: middle;
    position: relative;
    height: 100%;
    margin-top: 5px;
}

section.overview.room.view-table div.row.th > div.season table,
section.overview.room.view-table div.row.th > div.options table,
section.overview.room.view-table div.row.th > div.rooms-wrapper div.rooms div.room table {
    padding: 0;
    margin: 0;
    width: 100%;
}

section.overview.room.view-table div.row.th > div.season table tr,
section.overview.room.view-table div.row.th > div.options table tr,
section.overview.room.view-table div.row.th > div.rooms-wrapper div.rooms div.room table tr {

}

section.overview.room.view-table div.row.th > div.season table tr td,
section.overview.room.view-table div.row.th > div.options table tr td,
section.overview.room.view-table div.row.th > div.rooms-wrapper div.rooms div.room table tr td {
    width: 100%;
    height: 90px;
    vertical-align: middle;
}

section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room > div.title,
section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room > div.options {
    float: left;
    width: 33.333%;
    display: none;
}

section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room > div.title table,
section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room > div.title table td {
    width: 100%;
    height: 87px;
}

section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room > div.title table td {
    padding-right: 10px;
    font-weight: bold;
    vertical-align: middle;
}

section.overview.room.view-table div.row.th > div.rooms-wrapper div.rooms div.room table tr td a,
section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room > div.title table td a {
    text-decoration: none;
}

section.overview.room.view-table div.row.th > div.rooms-wrapper div.rooms div.room table tr td a {
    color: #FFFFFF;
}

section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room div.draft {
    float: left;
    width: 100%;
}

section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room div.draft div.option,
section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room div.options div.option {
    border-top: 1px solid #1FA4B9;
}

section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room div.draft div.option:first-child,
section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room div.options div.option:first-child {
    border-top: 0;
}

section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room div.draft div.option > div {
    width: 65px;
    margin: 0 auto;
}

section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room div.draft div.option div.currency {
    float: left;
    text-align: left;
}

section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room div.draft div.option div.value {
    float: right;
    text-align: right;
}

/* back navigation */

div.back-navi {
    padding-top: 40px;
}

div.back-navi .button {
    color: #585858;
    background: transparent url("/frontend/img/back-link.png") no-repeat left center;
    width: 280px;
    margin: 0 auto;
    float: none;
    clear: both;
    padding: 0 0 0 22px;
    position: relative;
    line-height: 37px;
}

div.back-navi .button span {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #585858;
    border-left: none;
}

/* request and book buttons */

section.request-book-buttons {
    width: 400px;
    margin: 40px auto 0 auto;
    position: relative;
}

section.request-book-buttons .button {
    float: left;
    width: 190px;
}

section.request-book-buttons .button.book {
    float: right;
}

/* usp */

a.usp {
    display: block;
    float: left;
    width: 33.333%;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    opacity: 0;
    padding: 0 10px;

    -webkit-transition: opacity .8s linear;
    -ms-transition: opacity .8s linear;
    transition: opacity .8s linear;
}

a.usp.show {
    opacity: 1;
}

a.usp span.icon {
    display: block;
    width: 100px;
    height: 100px;
    font-size: 40px;
    line-height: 100px;
    margin: 0 auto;
    background-color: #FFFFFF;
    color: #1fa4b9;

    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;

    -webkit-transition: color .2s linear, background-color .2s linear;
    -ms-transition: color .2s linear, background-color .2s linear;
    transition: color .2s linear, background-color .2s linear;
}

a.usp:hover span.icon {
    background-color: #1FA4B9;
    color: #FFFFFF;
}

a.usp h2 {
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    font-size: 3rem;
    line-height: 3.5rem;
    color: #1fa4b9;
    padding: 15px 0 10px 0;
}

/* pool */

section.alternative {
    padding-top: 40px;
}

section.pool .bx-wrapper,
section.alternative .bx-wrapper {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

section.pool .bx-wrapper .bx-viewport,
section.alternative .bx-wrapper .bx-viewport {
    height: auto;
}

section.pool > div > h2,
section.alternative > h2 {
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    font-size: 3.5rem;
    line-height: 4rem;
    text-align: center;
    padding-bottom: 30px;
}

section.alternative > h2 {
    color: #1FA4B9;
}

section.pool > div > ul > li {
    position: relative;
}

section.pool div.image {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

section.pool div.text-wrapper {
    float: left;
    width: 50%;
    padding: 40px;
}

section.pool div.text-wrapper h2 {
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    font-size: 3rem;
    line-height: 3.5rem;
    text-align: center;
    padding-bottom: 20px;
}

section.pool div.text-wrapper span.times {
    display: block;
    padding-bottom: 20px;
}

section.pool div.text-wrapper span.times span.time {
    text-align: center;
    display: block;
}

section.pool div.text-wrapper .text {
    padding-bottom: 20px;
}

section.pool div.text-wrapper .buttons {

}

section.pool div.text-wrapper .buttons a {
    width: calc(50% - 10px);
    float: left;
}

section.pool div.text-wrapper .buttons a.book {
    margin-left: 20px;
}

section.pool div.text-wrapper .prices {
    text-align: center;
    padding-bottom: 20px;
    font-weight: 600;
}

section.pool div.text-wrapper .prices .price {

}

section.pool .bx-wrapper .bx-prev,
section.alternative .bx-wrapper .bx-prev,
section.gallery .bx-wrapper .bx-prev,
div.room-images .bx-wrapper .bx-prev,
div.room-images div.panorama a.prev {
    left: -80px;
}

section.pool .bx-wrapper .bx-next,
section.alternative .bx-wrapper .bx-next,
section.gallery .bx-wrapper .bx-next,
div.room-images .bx-wrapper .bx-next,
div.room-images div.panorama a.next {
    right: -80px;
}

/* search */

section.search input {
    width: calc(100% - 60px);
    float: left;
}

section.search button {
    float: right;
    padding: 0;
    width: 50px;
    text-align: center;
}

section.search button i {
    padding: 0;
}

section.search article {
    margin-top: 20px;
    background-color: #FFFFFF;
    padding: 20px;
}

section.search article .short {
    padding: 20px 0;
}

section.search article .button {
    float: right;
}

/* footer */

footer {
    position: relative;
    padding-bottom: 125px;
    background-color: #e5e1db;
}

footer section.map {
    width: 50%;
    float: left;
    position: relative;
		background: url('/frontend/img/map_johannis.jpg') center no-repeat;
		background-size: cover;
}

footer section.map div#footer-map {
    width: 100%;
    height: 100%;
    position: absolute;
}

footer section.contact {
    width: 50%;
    float: right;
    background-color: #978773;
    color: #FFFFFF;
    position: relative;
}

footer section.banner {
    width: 100%;
    color: #FFFFFF;
    position: relative;
		display: flex;
		height: 35rem;
		padding-top: 2rem;
}

footer section.banner a.col{
    display: inline-block;
		height: 100%;
}

footer section.map,
footer section.contact {
    height: 860px;
}

footer section.contact address {
    padding: 40px 0 40px 0;
    width: 275px;
		margin: 5rem 18rem;
}

footer section.contact address div.logo {
    width: 250px;
    height: 84px;
    background: transparent url("/frontend/img/logo-neg.png") no-repeat top left;
    background-size: contain;
    margin-bottom: 30px;
}

footer section.contact address .family {
    font-weight: 600;
}

footer section.contact address a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 2rem;
    line-height: 2rem;
    margin-top: 1.6rem;
    display: inline-block;
}

footer section.contact address a i {
    padding-right: 10px;
}

footer section.contact div.social {
    margin-top: 30px;
}

section.fixed-offers div.social a,
footer section.contact div.social a {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 20px 0 0;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

section.fixed-offers div.social a.facebook,
footer section.contact div.social a.facebook {
    background-image: url("/frontend/img/facebook.png");
}

section.fixed-offers div.social a.google,
footer section.contact div.social a.google {
    background-image: url("/frontend/img/google.png");
}

section.fixed-offers div.social a.instagram,
footer section.contact div.social a.instagram {
    background-image: url("/frontend/img/instagram.png");
}

footer section.contact div.map {
    width: 100%;
    height: 23rem;
    background: transparent url("/frontend/img/map-de.png") no-repeat center center;
    background-size: contain;
}

body.en footer section.contact div.map {
    background-image: url("/frontend/img/map-en.png");
}

body.it footer section.contact div.map {
    background-image: url("/frontend/img/map-it.png");
}

footer section.banner .col-1 {
	width: 50%;
	display:block;
}

footer section.banner .col-2 {
	width: 25%;
	display:block;
}

footer section.banner .col-3 {
	width: 25%;
	display:block;
}


footer section.contact div.foreign {
    background-color: #56423b;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

footer section.banner div.foreign {
		background-color: #56423b;
}

footer section.contact div.foreign div.col {
    float: left;
    width: calc(50% - 40px);
    margin: 0 20px;
}

footer section.banner div.foreign div.foreign-inner {
    margin: 0 20px;
}

footer section.contact div.foreign div.col a.stroblhof {
    display: block;
    width: 100%;
    max-width: 237px;
    height: 83px;
    background: transparent url("/frontend/img/logo-stroblhof.png") no-repeat center center;
    background-size: contain;
    margin: 46px auto 0 auto;
}

footer section.banner div.foreign div.foreign-inner a.stroblhof {
    display: block;
    width: 100%;
    max-width: 237px;
    height: 83px;
    background: transparent url("/frontend/img/logo-stroblhof.png") no-repeat center center;
    background-size: contain;
    margin: 46px auto 0 auto;
}

footer section.contact div.foreign div.col.col-1 {

}

footer section.contact div.foreign div.col.col-2 {
    padding: 30px 0;
}

footer section.contact div.foreign div.col.col-2 div.group {
    font-size: 2rem;
    line-height: 2.8rem;
    font-weight: 600;
}

footer section.banner div.foreign div.foreign-inner div.group {
		font-size: 2.9rem;
		line-height: 2.9rem;
		text-align: center;
		margin-top: 2rem;
}

footer section.contact div.foreign div.col.col-2 a {
    margin-top: 20px;
    width: 80%;
    border: 1px solid #f4a31a;
    height: 40px;
    line-height: 40px;
    color: #f4a31a;
    text-align: center;
    display: block;
    text-decoration: none;
    text-transform: uppercase;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-transition: color .2s linear, background-color .2s linear;
    -ms-transition: color .2s linear, background-color .2s linear;
    transition: color .2s linear, background-color .2s linear;
}

footer section.banner div.foreign div.foreign-inner div.yellow-btn a {
		margin: 0 auto;
}

footer section.banner div.foreign div.foreign-inner div.yellow-btn a {
    margin-top: 3rem;
    width: 70%;
    border: 1px solid #f4a31a;
    height: 40px;
    line-height: 40px;
    color: #f4a31a;
    text-align: center;
    display: block;
    text-decoration: none;
    text-transform: uppercase;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-transition: color .2s linear, background-color .2s linear;
    -ms-transition: color .2s linear, background-color .2s linear;
    transition: color .2s linear, background-color .2s linear;
}

footer section.contact div.foreign div.col.col-2 a:hover {
    color: #FFFFFF;
    background-color: #F4A31A;
}

footer section.banner div.foreign div.foreign-inner div.yellow-btn a:hover {
    color: #FFFFFF;
    background-color: #F4A31A;
}

footer section.banner a.col-1 {
    display: block;
    height: 33rem;
    background: transparent url("/frontend/img/stroblhof-banner-left.jpg") no-repeat 50% 70%;
    background-size: cover;
    margin: 0 auto;
}

footer section.banner a.col-3 {
    display: block;
    height: 33rem;
    background: transparent url("/frontend/img/stroblhof-banner-right.jpg") no-repeat center center;
    background-size: cover;
    margin: 0 auto;
}

footer section.circle {
		display: flex;
		justify-content: space-around;
		position: relative;
		height: 0;
		top: 7rem;
		margin-right: calc(100vW - 94vW);
}

footer section.circle a.circle {
    color: #FFFFFF;
    background-color: #F4A31A;
		text-transform: uppercase;
		width: 21rem;
		height: 21rem;
		font-size: 3.3rem;
		text-align: center;
		z-index: 99;
		display: block;
		line-height: 2.5rem;

    -webkit-border-radius: 25rem;
    -moz-border-radius: 25rem;
    border-radius: 25rem;

		-moz-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
		text-decoration: none;
}

footer section.circle a.circle div {
  	margin: 0 auto;
		display: block;
		padding: 0.75rem;
}

footer section.circle a.circle div:first-of-type {
		font-weight: 600;
		font-size: 3.6rem;
		margin-top: 4.25rem;
}

footer section.circle a.circle div span {
		font-weight: 600;
}

main section.social,
footer section.links {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 30px 0;
    justify-content: center;
}

main section.social {
    flex-wrap: wrap;
}

main section.social a,
footer section.links a {
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-filter: sepia(100%) grayscale(100%);
    filter: sepia(100%) grayscale(100%);
    margin: 0 20px;

    -webkit-transition: filter .2s linear;
    -ms-transition: filter .2s linear;
    transition: filter .2s linear;
}

main section.social a:hover,
footer section.links a:hover {
    -webkit-filter: sepia(0%) grayscale(0%);
    filter: sepia(0%) grayscale(0%);
}

main section.social a.tripadvisor,
footer section.links a.tripadvisor {
    width: 217px;
    height: 70px;
    background-image: url("/frontend/img/tripadvisor.png");
}

main section.social a.holidaycheck,
footer section.links a.holidaycheck {
    width: 198px;
    height: 70px;
    background-image: url("/frontend/img/holidaycheck.png");
}

footer section.links a.dorf-tirol {
    width: 121px;
    height: 70px;
    background-image: url("/frontend/img/dorf-tirol.png");
}

footer section.links a.meranerland {
    width: 197px;
    height: 70px;
    background-image: url("/frontend/img/meranerland.png");
}

footer section.links a.south-tyrol {
    width: 88px;
    height: 70px;
    background-image: url("/frontend/img/south-tyrol.png");
}

footer nav.navi {
    text-align: center;
    font-size: 1.2rem;
    padding: 0 10px;
}

footer nav.navi a {
    font-size: 1.2rem;
    text-decoration: none;
}

footer nav.navi span {
    padding: 0 5px;
}

footer nav.navi span:last-of-type {
    display: none;
}

/* fixed offers */

section.fixed-offers {
    position: fixed;
    background-color: #56423b;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.cssanimations section.fixed-offers {
    bottom: -130px;
}

.cssanimations section.fixed-offers.animate {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-delay: 0s;
    animation-name: fixed-offers;
}

section.fixed-offers > div {
    padding-top: 3px;
    padding-bottom: 3px;
}

section.fixed-offers > div > div.social {
    float: left;
    padding-top: 20px;
    line-height: 0;
}

section.fixed-offers div.social a {
    margin-left: 0px;
    margin-right: 10px;
}

section.fixed-offers > div > div.offers {
    float: left;
    width: 659px;
    padding: 0 70px 0 80px;
}

section.fixed-offers > div > div.offers .bx-wrapper .bx-viewport {
    background: #e5e1db;
}

section.fixed-offers > div > div.offers .bx-wrapper .bx-prev,
section.fixed-offers > div > div.offers .bx-wrapper .bx-next {
    background-color: #1fa4b9;
    width: 50px;
    height: 50px;
    line-height: 0;
    margin-top: -25px;
}

section.fixed-offers > div > div.offers .bx-wrapper .bx-prev i,
section.fixed-offers > div > div.offers .bx-wrapper .bx-next i {
    line-height: 50px;
}

section.fixed-offers > div > div.offers .bx-wrapper .bx-prev {
    left: -60px
}

section.fixed-offers > div > div.offers .bx-wrapper .bx-next {
    right: -60px;
}

section.fixed-offers > div > div.offers .bx-wrapper .bx-viewport li > a {
    display: block;
}

section.fixed-offers > div > div.offers .bx-wrapper .bx-viewport li div.image {
    float: left;
    width: 175px;
    height: 90px;
    background-size: cover;
    background-repeat: no-repeat;
}

section.fixed-offers > div > div.offers .bx-wrapper .bx-viewport li div.text {
    height: 90px;
    padding: 0 10px;
    float: left;
    text-align: center;
    width: 334px;
}

section.fixed-offers > div > div.offers .bx-wrapper .bx-viewport li div.text table {
    width: 100%;
}

section.fixed-offers > div > div.offers .bx-wrapper .bx-viewport li div.text table tr {

}

section.fixed-offers > div > div.offers .bx-wrapper .bx-viewport li div.text table tr td {
    height: 90px;
    width: 100%;
    vertical-align: middle;
}

section.fixed-offers > div > div.offers .bx-wrapper .bx-viewport li div.text h2 {
    text-align: center;
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    font-size: 2rem;
    line-height: 2rem;
    color: #1fa4b9;
    padding-bottom: 10px;
}

section.fixed-offers div.contact {
    padding: 15px 0 15px 20px;
    float: right;
    line-height: 30px;
}

section.fixed-offers div.contact a {
    color: #FFFFFF;
    display: block;
    text-decoration: none;
}

section.fixed-offers div.contact a i {
    padding-right: 5px;
}

section.panorama div.panorama-container {
    padding-top: 56%; /* 16:9 */
    position: relative;
}

section.panorama div.panorama-container iframe {
    width:100%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
}

/* youtube */
section.youtube-container .youtube-video-container {
	padding-top: 56%; /* 16:9 */
    position: relative;
}

section.youtube-container .youtube-video-container iframe {
	width:100%;
	height: 100%;
    left: 0;
    position: absolute;
    top: 0;
}

/* vimeo */
section.vimeo-container .vimeo-video-container {
	padding-top: 56%; /* 16:9 */
    position: relative;
}

section.vimeo-container .vimeo-video-container iframe {
	width:100%;
	height: 100%;
    left: 0;
    position: absolute;
    top: 0;
}

/* webcam */
section.webcam-container {
	background: #F6F3E9;
	padding:30px 0;
}

section.webcam-container .webcam-iframe-container {
	padding-top: 56%; /* 16:9 */
    position: relative;
}

section.webcam-container .webcam-iframe-container iframe {
	width:100%;
	height: 100%;
    left: 0;
    position: absolute;
    top: 0;
}

/* social wall */
section .media-group .social-wall-headline {
	text-align: center;
	font-weight: 300;
	font-family: 'Raleway', sans-serif;
	font-size: 3.5rem;
	line-height: 4rem;
	color: #1fa4b9;
	padding: 30px 0 30px 0;
}
section .media-group .social-wall {
    background-color: #e5e1db;
    color: #585858;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 2rem 2rem 2rem;
}
section .media-group .social-wall .brick.facebook {
    width: calc(20% - 30px);
	background-color: #ffffff;
    position: relative;
	margin: 15px;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}
section .media-group .social-wall .brick.facebook i {
    position: absolute;
    padding: 1rem;
}
section .media-group .social-wall .brick.facebook i::before {
    color: #585858;
    font-size: 3rem;
}
section .media-group .social-wall .brick.facebook .img > div:first-of-type {
    background-repeat: no-repeat;
    background-size: cover;
    height: 13vW;
    width: 100%;
    background-position: center;
}
section .media-group .social-wall .brick.facebook .img > div.date {
    position: absolute;
    margin-top: -3rem;
    margin-left: 1rem;
    color: #585858;
}
section .media-group .social-wall .brick.facebook .message {
    background-color: #ffffff;
    color: #585858;
    text-align: left;
    padding: 20px 15px 35px 15px;
	font-weight: 200;
	line-height: 25px;
	font-size: 16px;
	font-stretch: 100%;
	font-family: 'Source Sans Pro', sans-serif;
	max-height: 245px;
	min-height: 245px;
	height: 100%;
	overflow: hidden;
}
section .media-group .social-wall .brick.facebook .button {
    text-transform: uppercase;
	margin: 0 auto;
	width: 75%;
	margin-top: 25px;
	margin-bottom: 35px;
}
.fa-facebook-square {
	content: url(/frontend/img/facebook.png);
	width: 45px;
}
.fa-instagram {
	content: url(/frontend/img/instagram.png);
	width: 45px;
}

/* hogast */

div#hogast-ti-form {
    max-width: none !important;
    background-color: transparent !important;
}



/* giggle */

div.giggle-wrapper {
    display: block;
    width: 100%;
    overflow: hidden;
		padding-top: 20px;
}

div.giggle-wrapper > div,
div.giggle-wrapper > div > iframe {
    width: 100% !important;
}

#gt1484134706881 {
	margin: 0 auto;
	max-width: 1500px;
}

#gt1484134706881 #giggleContentFrame{
	overflow: hidden !important;
}
#gt1484134706881 #giggleContentFrame #giggleScrollContainer > div{
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
#gt1484134706881 #giggleContentFrame .giggle-activity-container{
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	height: 100% !important;
}

#gt1525428061745 > div:first-of-type {
	display: none !important;
}

@media (max-width: 1745px) {
	footer section.circle {
		margin-right: calc(100vW - 91%);
	}
}

@media (max-width: 1600px) {
	footer section.circle {
		margin-right: calc(100vW - 88%);
	}
}

@media (max-width: 1520px) {
	#gt1525428061745  {
		padding: 0 2rem;
	}
}


@media (max-width: 1580px) and (min-width: 1401px) {

    div.menu div.logo {
        padding-left: 20px;
        padding-right: 20px;
    }

    div.menu > nav > ul > li {
        padding-left: 10px;
        padding-right: 10px;
    }

    div.menu div.icons {
        padding-right: 20px;
    }

}

@media (max-width: 1440px) {

    div.menu,
    div.menu-spacer {
        height: 110px;
    }

    div.menu div.icons div.languages {
        top: 40px;
    }

    .csscalc header.images {
        margin-top: 110px;
        height: calc(100vh - 110px);
    }

    div.menu nav {
        float: right;
        clear: right;
        margin-right: 30px;
    }

    div.menu > nav > ul > li > ul.subnav,
    div.menu > nav > ul > li > ul.subnav > li.tab > span {
        left: auto;
        right: 0;
    }

    div.menu div.links {
        float: left;
        clear: left;
        width: auto;
        background-color:#1fa4b9;
        padding: 0 0 0 30px;
        line-height: 40px;
				order: 1;
    }
    .top-links-wrap{
			display: flex;
			justify-content: space-between;
			align-items: stretch;
			background-color:#1fa4b9;
		}
    div.menu div.links a,
    div.menu div.links a:hover,
    div.menu div.links a.book,
    div.menu div.links a.phone {
        color: #FFFFFF;
        float: left;
        margin: 0 0 0 20px;
    }

    div.menu div.icons {
				order: 2;
        width: auto;
        float: right;
        clear: right;
        background-color:#1fa4b9;
        padding: 0 50px 0 0;
        margin: 0;
        text-align: right;
    }

    div.menu div.icons a,
    div.menu div.icons a:hover {
        color: #FFFFFF;
        line-height: 40px;
        width: auto;
        height: auto;
        border: none;
        clear: both;
        float: none;
        display: inline;
    }

    section.overview.room.view-table div.row.th,
    section.overview.room.view-table div.row.th a.nav {
        display: none;
    }

    section.overview.room.view-table div.row > div.season {
        clear: both;
        float: none;
        width: 100%;
        height: auto;
        text-align: center;
        background-color: #1FA4B9;
        color: #FFFFFF;
    }

    section.overview.room.view-table div.row > div.season:first-child {
        margin-top: 0;
    }

    section.overview.room.view-table div.row > div.options {
        display: none;
    }
    section.overview.room.view-table div.row > div.rooms-wrapper {
        width: 100%;
        overflow: visible;
    }

    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms {
        position: relative;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100%;
    }

    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room {
        width: calc(50% - 3px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 6px;
    }

    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room.pos-0 {
        margin-right: 3px;
    }

    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room.pos-1 {
        margin-left: 3px;
    }

    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room > div.title,
    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room > div.options {
        display: block;
    }

    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room div.draft {
        width: 33.333%;
    }


}

@media (max-width: 1300px) {
	footer section.circle {
		margin-right: calc(100vW - 86%);
	}
}

@media (max-width: 1270px) {

    section.teaser-2 article {
        padding-left: 40px;
        padding-right: 40px;
        width: 35%;
        left: 50%;
        right: 15%;
    }

}

@media (max-width: 1200px) {

    section.pool .bx-wrapper .bx-prev,
    section.alternative .bx-wrapper .bx-prev,
    section.gallery .bx-wrapper .bx-prev,
    div.room-images .bx-wrapper .bx-prev,
    div.room-images div.panorama a.prev {
        left: -15px;
    }

    section.pool .bx-wrapper .bx-next,
    section.alternative .bx-wrapper .bx-next,
    section.gallery .bx-wrapper .bx-next,
    div.room-images .bx-wrapper .bx-next,
    div.room-images div.panorama a.next {
        right: -15px;
    }


		footer section.circle {
			margin-right: calc(100vW - 84%);
		}

}

@media (max-width: 1150px) {

    div.menu div.logo {
        padding-left: 20px;
        padding-right: 20px;
    }

    div.menu nav {
        margin-right: 10px;
    }

    div.menu > nav > ul > li {
        padding-left: 10px;
        padding-right: 10px;
    }

    div.menu div.links {
        padding: 0;
    }

    div.menu div.icons {
        padding: 0 20px 0 0;
    }

    header.images .bubble {
        top: 30px;
        left: 30px;
    }

    div.room-images a.open-tour-button {
        width: 110px;
        height: 110px;
        right: -15px;
        top: -60px;
    }

}

@media (max-width: 1092px){

    footer section.circle,
	footer section.banner a.col-1 {
		display: none;
	}

	footer section.banner .col-2,
	footer section.banner .col-3 {
		width: 50%;
	}
	section .media-group .social-wall .brick.facebook {
		width: calc(50% - 30px);
	}
	section .media-group .social-wall .brick.facebook:last-of-type {
		display: none;
	}
	section .media-group .social-wall .brick.facebook .img > div:first-of-type {
		height: 21vW;
	}
}

@media (max-width: 1050px){

    footer section.contact div.foreign div.col.col-2 div.group {
        font-size: 1.6rem;
        line-height: 2rem;
    }

    footer section.contact div.foreign div.col.col-2 a {
        width: 100%;
    }

}

@media (max-width: 1039px){

    footer section.links {
        width: 100%;
    }

    section.fixed-offers {
        display: none;
    }

    .teaser-4 a.image, .teaser-4 div.image, .teaser-4 .ratio-image, .teaser-5 .ratio-image {
        width: 50%;
    }

    .teaser-4 div.text-wrapper, .teaser-5 div.text-wrapper {
        width: 50%;
    }

    footer {
        padding-bottom: 15px;
    }

    main section.social {
        width: 100%;
    }

}

@media (max-width: 1024px){

    section.image,
    section.teaser-1,
    section.teaser-2 {
        background-attachment: inherit;
    }

}

@media (max-width: 950px) {

    div.menu {
        position: relative;
        z-index: 99998;
    }

    div.menu .menu-toggle {
        display: block;
    }

    div.menu nav {
        clear: both;
        float: none;
        width: 100%;
        display: none;
        background-color: #1fa4b9;
        position: absolute;
        top: 110px;
        margin: 0;
    }

    div.menu.show-menu nav {
        display: block;
    }

    div.menu > nav > ul {
        display: inherit;
    }

    div.menu > nav > ul > li {
        line-height: 40px;
        padding: 0;
        border-bottom: 1px solid #FFFFFF;
    }

    div.menu > nav > ul > li > a {
        padding: 0 20px;
        color: #FFFFFF;

        float: left;
        display: block;
        width: calc(100% - 26px);
    }

    div.menu > nav > ul > li > a:hover,
    div.menu > nav > ul > li.active > a {
        color: #FFFFFF;
    }

    div.menu > nav > ul > li > i {
        display: block;
        width: 6px;
        overflow: hidden;
    }

    div.menu > nav > ul > li > ul.subnav,
    div.menu > nav > ul > li:hover > ul.subnav {
        display: none;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        padding: 0;
        margin: 0;
        width: 100%;
        background-color: #FFFFFF;
    }

    div.menu > nav > ul > li.open > ul.subnav {
        display: block;
    }

    div.menu > nav > ul > li > ul.subnav li {
        border-top: 1px solid #1FA4B9;
    }

    div.menu > nav > ul > li > ul.subnav > li.parent,
    .touchevents div.menu > nav > ul > li > ul.subnav > li.parent {
        display: block;
    }

    div.menu > nav > ul > li > ul.subnav li.first,
    .touchevents div.menu > nav > ul > li > ul.subnav > li.first {
        border-top: 1px solid #1FA4B9;
    }

    div.menu > nav > ul > li > ul.subnav li > a {
        padding-left: 20px;
        padding-right: 20px;
        color: #585858;
    }

    div.menu > nav > ul > li > ul.subnav > li.tab {
        display: none;
    }

    .header-spacer,
    .menu-spacer {
        display: none;
    }

    header.images {
        position: relative;
        margin: 0;
        height: 500px;
    }

    .csscalc header.images {
        margin: 0;
        height: calc(100vh - 110px);
    }

    section.image,
    section.teaser-1 {
        height: 75vh;
    }

    section.teaser-2 article {
        width: 40%;
        right: 10%;
        left: 50%;
    }

    section.gallery ul.bxslider li div.bxslide,
    div.room-images ul.bxslider li div.bxslide,
    div.room-images div.panorama {
        height: 370px !important;
    }

    section.gallery div.bxpager a.bxslide {
        height: 100px !important;
    }

    section.textblock img.tour-img {
        width: 165px;
    }

    footer section.map,
    footer section.contact {
        width: 100%;
        clear: both;
        float: none;
        height: auto;
    }

    footer section.contact address {
        padding: 0;
        width: 66.666%;
        float: left;
        position: relative;
    }

    footer section.contact address div.logo {
        width: 100%;
    }

    footer section.contact address div.mobile-col {
        padding: 30px 0px 30px 40px;
        width: 50%;
        float: left;
    }

    footer section.contact address div.mobile-col.mobile-col-2 {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    footer section.contact div.map {
        width: calc(33.333% - 40px);
        margin-right: 40px;
        height: 235px;
        float: right;
    }

    footer section.contact div.foreign {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto;
    }

    footer section.map {
        height: 250px;
    }

}

@media (max-width: 870px) {

    .bx-wrapper .bx-next {
        right: 20px;
    }

    .bx-wrapper .bx-prev {
        left: 20px;
    }

    .t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper {
        height: 415px;
    }

    body.en.t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper,
    body.it.t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper {
        height: 525px;
    }

    footer section.contact address {
        padding-right: 20px;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        clear: both;
        float: none;
    }

    footer section.contact address div.mobile-col {
        padding-left: 20px;
    }

    footer section.contact div.map {
        display: none;
    }

}

@media (max-width: 850px){

    section.prices.desktop-only {
        display: none;
    }

    section.prices.mobile-only {
        display: block;
    }

}

@media (max-width: 800px) {

    a.usp h2 {
        font-size: 2rem;
        line-height: 2.5rem;
        padding-bottom: 0;
    }

    a.usp span.text {
        display: none;
    }

    section.teaser-3 div.content h2 {
        font-size: 2.5rem;
        line-height: 3rem;
    }

    section.teaser-3 div.content h2 span.line-2 {
        line-height: 2rem;
        font-size: 2rem;
    }

    section.pool div.image {
        display: none;
    }

    section.pool div.text-wrapper {
        float: none;
        clear: both;
        width: 100%;
    }

    section.top-buttons {
        display: none;
    }

}

@media (max-width: 768px) {

    header.images .bubble {
        display: none;
    }

    header.images .bx-controls {
        display: none;
    }

    section.teaser-1 > div {
        top: calc(50% - 40px);
        font-size: 2.5rem;
        line-height: 4rem;
        padding: 20px;
    }

    main > div h1, h2.editor,
    section.pool > div > h2,
    section.alternative > h2,
    section.pool div.text-wrapper h2,
    .teaser-4 div.text-wrapper h2,
    .teaser-5 div.text-wrapper h2 {
        font-size: 2.5rem;
        line-height: 3rem;
    }

    h3.editor {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    a.open-tour,
    div.room-images a.open-tour-button,
    div.room-images div.panorama {
        display: none !important;
    }

    div.room-images .images.hidden {
        display: block !important;
    }

    section.teaser-2 {
        min-height: 0;
    }

    section.teaser-2 article {
        position: relative;
        min-height: 0;
        width: 100%;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        height: auto;
        padding: 40px;
        background-color: rgba(224, 190, 52, .8);
    }

    section.teaser-2 article table,
    section.teaser-2 article table tr td {
        height: auto;
    }

    section.teaser-2 article table tr td {
        padding-top: 0;
        padding-bottom: 0;
    }

    section.teaser-2 article h2 {
        font-size: 3rem;
        line-height: 3.5rem;
    }

    .t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper {
        height: 470px;
    }

    body.it.t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper,
    body.en.t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper {
        height: 515px;
    }

    .teaser-4.one-button div.text-wrapper .buttons a {
        width: 100%;
    }

    .teaser-4 div.text-wrapper .buttons a,
    .teaser-4 div.text-wrapper .buttons a.yellow,
    .teaser-5 div.text-wrapper .buttons a {
        margin: 0;
        width: 100%;
    }

    .teaser-4 div.text-wrapper .buttons a.yellow,
    .teaser-5 div.text-wrapper .buttons a.yellow {
        margin-top: 20px;
    }

    section.gallery ul.bxslider li div.bxslide,
    div.room-images ul.bxslider li div.bxslide,
    div.room-images div.panorama {
        height: 320px !important;
    }

    section.gallery div.bxpager a.bxslide {
        height: 80px !important;
    }

    section.weather div.day,
    section.downloads .download {
        width: calc(50% - 10px);
    }

    section.weather div.day.nr-0,
    section.downloads .download.pos-4-0 {
        margin-left: 0px;
        margin-right: 10px;
    }

    section.weather div.day.nr-1,
    section.downloads .download.pos-4-1 {
        margin-left: 10px;
        margin-right: 0px;
    }

    section.weather div.day.nr-2,
    section.downloads .download.pos-4-2 {
        margin-left: 0;
        margin-right: 10px;
        margin-top: 20px;
    }

    section.weather div.day.nr-3,
    section.downloads .download.pos-4-3 {
        margin-left: 10px;
        margin-right: 0px;
        margin-top: 20px;
    }

    footer section.links {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

}

@media (max-width: 730px) {

    .teaser-4 a.image, .teaser-4 div.image, .teaser-4 .ratio-image, .teaser-5 .ratio-image {
        width: 40%;
    }

    .teaser-4 div.text-wrapper, .teaser-5 div.text-wrapper {
        width: 60%;
    }

    .t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper {
        height: 445px;
    }

    body.it.t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper,
    body.en.t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper {
        height: 490px;
    }

}

@media (max-width: 660px) {

    header.images,
    .csscalc header.images {
        height: 270px;
    }

    header.images > div.animation {
        display: none;
    }

    header.images a#j2c.button {
        display: none;
    }

    a.usp h2 {
        font-size: 1.6rem;
        line-height: 2rem;
    }

    section.teaser-3 {
        padding: 40px 0 40px 0;
    }

    section.teaser-3 div.content,
    section.teaser-3.even div.content {
        clear: both;
        float: none;
        width: 100%;
        padding: 20px 0 0 0;
    }

    section.teaser-3 div.content a.more,
    section.teaser-3.even div.content a.more {
        position: relative;
        float: right;
        left: auto;
        right: auto;
        bottom: auto;
        top: auto;
        margin-top: 20px;
    }

    section.teaser-3 span.image,
    section.teaser-3 a.image,
    section.teaser-3 div.video,
    section.teaser-3.even a.image,
    section.teaser-3.even div.video {
        position: relative;
        width: 100%;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto;
    }

    section.teaser-3 span.image,
    section.teaser-3 a.image,
    section.teaser-3.even a.image {
        height: 250px;
    }

    section.teaser-3 div.content h2 span {
        display: inline;
    }

    section.teaser-3.animate div.content h2 span.line-2 {
        text-align: left;
        padding-left: 5px;
        font-size: 2.5rem;
        line-height: 3rem;
    }

    .teaser-4,
    .t4d-small div.media-group.teaser-4-group .teaser-4 {
        width: 100%;
        clear: both;
        float: none;
    }

    .teaser-4 a.image,
    .teaser-4 div.image,
    .teaser-4 .ratio-image,
    .t4d-small div.media-group.teaser-4-group .teaser-4 .ratio-image,
    .teaser-5 .ratio-image {
        background-color: #FFFFFF;
        width: 100%;
        padding-top: 50%;
        position: relative;
    }

    section.alternative .teaser-4 a.image,
    section.alternative .teaser-4 div.image,
    section.alternative .teaser-4 .ratio-image,
    section.alternative .t4d-small div.media-group.teaser-4-group .teaser-4 .ratio-image {
        display: none;
    }

    .teaser-4 div.text-wrapper,
    .t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper,
    body.en.t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper,
    body.it.t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper,
    .teaser-5 div.text-wrapper {
        height: auto;
        width: 100%;
        padding: 20px;
    }

    div.text-wrapper .buttons,
    .t4d-small div.media-group.teaser-4-group .teaser-4 div.text-wrapper .buttons {
        position: relative;
        bottom: auto;
        padding: 20px 0 0 0;
    }

    .teaser-4.no-button div.text-wrapper .buttons,
    .t4d-small div.media-group.teaser-4-group .teaser-4.no-button div.text-wrapper .buttons {
        display: none;
    }

    section.overview.room.view-table .expired-season {
        display: none !important;
    }

    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room.pos-0,
    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room.pos-1 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        clear: both;
        float: none;
    }

    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room > div.title {
        clear: both;
        float: none;
        width: 100%;
        padding-bottom: 10px;
    }

    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room > div.title table,
    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room > div.title table td {
        height: auto;
    }

    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room > div.options,
    section.overview.room.view-table div.row > div.rooms-wrapper div.rooms div.room div.draft {
        width: 50%;
    }

    .rooms-wrap .room-wrap > .room-col,
    .rooms-wrap .room-wrap > .room-col-2{
    	width: 100%;
    	margin: 0;
    }
	section .media-group .social-wall .brick.facebook {
		width: calc(100% - 30px);
	}
	section .media-group .social-wall .brick.facebook .img > div:first-of-type {
		height: 45vW;
	}

}

@media (max-width: 570px) {

    main.with-columns > div div.content {
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        column-gap: 0;
    }

    section.gallery ul.bxslider li div.bxslide,
    div.room-images ul.bxslider li div.bxslide,
    div.room-images div.panorama {
        height: 300px !important;
    }

    section.gallery div.bxpager a.bxslide {
        height: 70px !important;
    }

    main > div > form section.captcha > div.input.captcha,
    section.main > div > form section.captcha > div.input.captcha {
        clear: both;
        float: none;
        width: 100%;
    }

    main > div > form section.captcha > div.input.captcha > div.captcha-field,
    section.main > div > form section.captcha > div.input.captcha > div.captcha-field {
        float: right;
        width: calc(100% - 120px);
    }

    main > div > form section.captcha > div.input.captcha > div.captcha-field > div.input,
    section.main > div > form section.captcha > div.input.captcha > div.captcha-field > div.input {
        width: calc(100% - 70px);
    }

    main > div > form section.captcha div.submit,
    section.main > div > form section.captcha div.submit {
        clear: both;
        float: none;
        width: 100%;
        padding-top: 20px;
    }

    section.routeplanner #map-canvas {
        height: 350px;
    }

    footer section.contact address {
        padding: 40px 0;
        max-width: none;
        text-align: center;
    }

    footer section.contact address div.mobile-col,
    footer section.contact address div.mobile-col.mobile-col-2 {
        clear: both;
        float: none;
        width: 100%;
        padding: 0;
        position: relative;
        bottom: auto;
        right: auto;
        left: auto;
        top: auto;
    }

    footer section.contact address div.logo {
        background-position: center center;
    }

    footer section.contact div.social a.instagram {
        margin-right: 0;
    }

    footer section.contact div.foreign div.col.col-1 {
        display: none;
    }

    footer section.contact div.foreign div.col.col-2 {
        margin: 0;
        clear: both;
        float: none;
        width: 100%;
        padding: 30px 20px;
    }

    footer section.contact div.foreign div.col.col-2 div.group {
        line-height: 20px;
        float: left;
        width: 50%;
    }

    footer section.contact div.foreign div.col.col-2 a {
        margin: 0;
        width: calc(50% - 20px);
        float: right;
        margin-left: 20px;
    }

}

@media (max-width: 550px){

    footer section.banner {
			display: inline-block;
		}

		footer section.banner .col-2,
		footer section.banner .col-3 {
			width: 100%
		}

}

@media (max-width: 520px) {

    div.menu div.icons div.languages {
        right: 0;
    }

    a.usp {
        padding: 20px 20px 0px 20px;
        width: 100%;
        clear: both;
        float: none;
    }

    a.usp:first-child {
        padding-top: 0;
    }

    a.usp h2 {
        font-size: 2.5rem;
        line-height: 3rem;
        padding-bottom: 10px;
    }

    a.usp span.text {
        display: inline;
    }

    section.pool div.text-wrapper {
        padding: 20px;
    }

    section.pool div.text-wrapper .buttons a,
    section.pool div.text-wrapper .buttons a.book {
        width: 100%;
        clear: both;
        float: none;
        margin: 0;
    }

    section.pool div.text-wrapper .buttons a.book {
        margin-top: 20px;
    }

    div.menu div.links {
    }

    div.menu div.links a i {
        padding-right: 0;
    }

    div.menu div.links a > span {
        display: none;
    }

    div.menu div.links a.book {
        margin-left: 10px;
    }

    div.menu div.logo {
        padding-left: 10px;
        padding-right: 10px;
    }

    div.menu .menu-toggle > span.text {
        display: none;
    }

    div.menu div.icons {
        padding-right: 10px;
    }

    div.menu .menu-toggle {
        padding-right: 10px;
    }

    header.images,
    .csscalc header.images {
        height: 235px;
    }

    section.gallery ul.bxslider li div.bxslide,
    div.room-images ul.bxslider li div.bxslide,
    div.room-images div.panorama {
        height: 250px !important;
    }

    section.gallery div.bxpager a.bxslide {
        height: 55px !important;
    }

    section.request-book-buttons {
        width: 100%;
    }

    section.request-book-buttons .button {
        width: calc(50% - 10px);
    }

    section.prices.package.mobile-only .price-table .prices .price,
    section.prices.package.mobile-only .price-table.drafts-2 .prices .price,
    section.prices.package.mobile-only .price-table.drafts-3 .prices .price,
    section.prices.package.mobile-only .price-table.drafts-4 .prices .price {
        width: 100%;
        clear: both;
        float: none;
    }

    section.prices.package.mobile-only .prices .price.pos-0,
    section.prices.package.mobile-only .prices .price.pos-1,
    section.prices.package.mobile-only .prices .price.pos-2 {
        margin-left: 0;
        margin-right: 0;
    }

    section.prices.package.mobile-only .prices .price .draft,
    section.prices.package.mobile-only .prices .price .value {
        width: 50%;
        float: left;
    }

    footer section.contact div.foreign div.col.col-2 div.group > div {
        line-height: 40px;
    }

    footer section.contact div.foreign div.col.col-2 div.group > div:first-child {
        display: none;
    }

}

@media (max-width: 400px) {

    section.gallery ul.bxslider li div.bxslide,
    div.room-images ul.bxslider li div.bxslide,
    div.room-images div.panorama {
        height: 175px !important;
    }

    section.gallery div.bxpager a.bxslide {
        height: 50px !important;
    }

    section.weather div.day,
    section.weather div.day.nr-0,
    section.weather div.day.nr-1,
    section.weather div.day.nr-2,
    section.weather div.day.nr-3 {
        margin: 20px 0 0 0;
        width: 100%;
        clear: both;
        float: none;
    }

    section.downloads .download,
    section.downloads .download.pos-4-0,
    section.downloads .download.pos-4-1,
    section.downloads .download.pos-4-2,
    section.downloads .download.pos-4-3 {
        margin: 20px 0 0 0;
        width: 100%;
    }

    section.weather div.day.nr-0 {
        margin: 0;
    }

    section.overview .teaser-4 div.text-wrapper .buttons a.yellow,
    section.overview .teaser-4 div.text-wrapper .buttons a.yellow.book {
        margin-top: 20px;
        float: none;
        clear: both;
        width: 100%;
    }

}

@media (max-width: 360px) {

    section.request-book-buttons .button {
        width: 100%;
        float: none;
        clear: both;
    }

    section.request-book-buttons .button.book {
        margin-top: 20px;
    }

}

/* print */
@media print {

	.hidden-print {
		display:none !important;
	}

}

/* slideshow */

body.slideshow > div#wrapper {
    display: none;
    overflow: hidden;
}

section#slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

section#slideshow .viewport{
    height: 100% !important;
    overflow: hidden;
}

section#slideshow .bx-viewport {
    height: 100% !important;
}

section#slideshow h2 {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 9999;
    background-color: #FFFFFF;
    padding: 20px;

    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    font-size: 3.5rem;
    line-height: 4rem;
    color: #1fa4b9;
}

section#slideshow div.navigation {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

section#slideshow div.navigation ul {
    padding-top: 10px;
    min-width: 250px;
    max-height: 0;
    overflow: hidden;
}

section#slideshow div.navigation.open ul {
    -webkit-transition: all 600ms linear 0s;
    -moz-transition: all 600ms linear 0s;
    -o-transition: all 600ms linear 0s;
    transition: all 600ms linear 0s;
    max-height: 1000px;
}

section#slideshow div.navigation ul li a {
    margin-top: 10px;
    display: block;
    text-decoration: none;
    background-color: #FFFFFF;
    padding: 10px;
    text-align: center;
    color: #1fa4b9;
    font-weight: 500;
}

section#slideshow div.navigation ul li a.active,
section#slideshow div.navigation ul li a:hover {
    background-color: #1fa4b9;
    color: #FFFFFF;
}

section#slideshow div.navigation a.button {
    float: right;
    width: 40px;
    margin: 0 0 0 10px;
    padding: 0;
    background-color: #1fa4b9;
}

section#slideshow div.navigation a.button i {
    padding: 0;
}

section#slideshow > div.loading {
    background-color: #FFFFFF;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    text-align: center;
}

section#slideshow > div.loading > i {
    position: relative;
    top: 50%;
    margin-top: -12px;
    line-height: 24px;
    font-size: 24px;
}

section#slideshow .bx-controls-direction {
    display: block;
}

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

    section#slideshow div.navigation {
        padding: 20px;
        right: 0;
        top: 0;
        width: 100%;
    }

    section#slideshow div.navigation ul {
        padding-top: 40px;
        width: 100%;
    }

}

/* misc */
.hidden {
    display: none !important;
}

.hide-text {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.nulled {
    font-size: 0;
    line-height: 0;
    padding: 0;
    margin: 0;
}

.clear {
    clear: both;
    display: block;
    height: 0;
    width: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* animations */

@-webkit-keyframes teaser-caption {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes teaser-caption {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes teaser-image {
    from {
        opacity: 0;
        transform: translate3d(-50%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes teaser-image {
    from {
        opacity: 0;
        transform: translate3d(-50%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@-webkit-keyframes teaser-line {
    from {
        opacity: 0;
        transform: translate3d(-50%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes teaser-line {
    from {
        opacity: 0;
        transform: translate3d(-50%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@-webkit-keyframes teaser-content {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes teaser-content {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes header-text {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.4, 0.4, 0.4);
        transform: scale3d(0.4, 0.4, 0.4);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale3d(0.7, 0.7, 0.7);
        transform: scale3d(0.7, 0.7, 0.7);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes header-text {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.4, 0.4, 0.4);
        transform: scale3d(0.4, 0.4, 0.4);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale3d(0.7, 0.7, 0.7);
        transform: scale3d(0.7, 0.7, 0.7);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes fixed-offers {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fixed-offers {
    from {
        opacity: 0;
        bottom: -130px;
    }
    to {
        opacity: 1;
        bottom: 0;
    }
}

a.book>i,a.book>span {
    font-size: 20px;
    color:#E0BE34;
}

.social-wall {
    display: block;
    width: 100%;
    height: 100%;
    background: #978773;
    position: relative;
    padding: 25px;
}