@font-face {
    font-family: "bebasneue_regular";
    src: url('/compass/fonts/bebasneue_regular-webfont.eot?1437060450');
    src: url('/compass/fonts/bebasneue_regular-webfont.eot?&1437060450#iefix') format('embedded-opentype'), url('/compass/fonts/bebasneue_regular-webfont.woff?1437060450') format('woff'), url('/compass/fonts/bebasneue_regular-webfont.ttf?1437060450') format('truetype'), url('/compass/fonts/bebasneue_regular-webfont.svg?1437060450') format('svg')
}

@font-face {
    font-family: "bebasneue_bold";
    src: url('/compass/fonts/bebasneue_bold-webfont.eot?1437060449');
    src: url('/compass/fonts/bebasneue_bold-webfont.eot?&1437060449#iefix') format('embedded-opentype'), url('/compass/fonts/bebasneue_bold-webfont.woff?1437060449') format('woff'), url('/compass/fonts/bebasneue_bold-webfont.ttf?1437060449') format('truetype'), url('/compass/fonts/bebasneue_bold-webfont.svg?1437060449') format('svg')
}

@font-face {
    font-family: "bebasneue_book";
    src: url('/compass/fonts/bebasneue_book-webfont.eot?1437060449');
    src: url('/compass/fonts/bebasneue_book-webfont.eot?&1437060449#iefix') format('embedded-opentype'), url('/compass/fonts/bebasneue_book-webfont.woff?1437060450') format('woff'), url('/compass/fonts/bebasneue_book-webfont.ttf?1437060450') format('truetype'), url('/compass/fonts/bebasneue_book-webfont.svg?1437060450') format('svg')
}

@font-face {
    font-family: 'Montserrat';
    src: url("../compass/fonts/montserrat-regular-webfont.eot");
    src: url("../compass/fonts/montserrat-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../compass/fonts/montserrat-regular-webfont.woff2") format("woff2"), url("../compass/fonts/montserrat-regular-webfont.woff") format("woff"), url("../compass/fonts/montserrat-regular-webfont.ttf") format("truetype"), url("../compass/fonts/montserrat-regular-webfont.svg#montserratregular") format("svg");
    font-weight: normal;
    font-style:normal
}

@font-face {
    font-family: 'Montserrat';
    src: url("../compass/fonts/montserrat-bold-webfont.eot");
    src: url("../compass/fonts/montserrat-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../compass/fonts/montserrat-bold-webfont.woff2") format("woff2"), url("../compass/fonts/montserrat-bold-webfont.woff") format("woff"), url("../compass/fonts/montserrat-bold-webfont.ttf") format("truetype"), url("../compass/fonts/montserrat-bold-webfont.svg#montserratbold") format("svg");
    font-weight: bold;
    font-style:normal
}

@import url("https://p.typekit.net/p.css?s=1&k=vxg2kwy&ht=tk&f=10294.10295.10296.10297&a=293511&app=typekit&e=css");

@font-face {
font-family:"brandon-grotesque";
src:url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"brandon-grotesque";
src:url("https://use.typekit.net/af/32d3ee/0000000000000000000132e0/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/32d3ee/0000000000000000000132e0/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/32d3ee/0000000000000000000132e0/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"brandon-grotesque";
src:url("https://use.typekit.net/af/8f4e31/0000000000000000000132e3/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/8f4e31/0000000000000000000132e3/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/8f4e31/0000000000000000000132e3/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
font-family:"brandon-grotesque";
src:url("https://use.typekit.net/af/383ab4/0000000000000000000132e4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/383ab4/0000000000000000000132e4/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/383ab4/0000000000000000000132e4/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:700;font-stretch:normal;
}

.tk-brandon-grotesque { font-family: "brandon-grotesque",sans-serif; }

@media print {
    * {
        background: transparent !important;
        color: black !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter:none !important
    }

    a, a:visited {
        text-decoration:underline
    }

    a[href]:after {
        content: " (" attr(href) ")"
    }

    abbr[title]:after {
        content: " (" attr(title) ")"
    }

    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
        content: ""
    }

    pre, blockquote {
        page-break-inside:avoid
    }

    thead {
        display:table-header-group
    }

    tr, img {
        page-break-inside:avoid
    }

    img {
        max-width:100% !important
    }

    @page {
        margin:2cm
    }

    p, h2, h3 {
        orphans: 3;
        widows:3
    }

    h2, h3 {
        page-break-after:avoid
    }
}

.icons-sprite, .icons-icon_arrow, .icons-icon_asterisk, .icons-icon_asterisk_textarea, .icons-icon_close, .icons-icon_fb, .icons-icon_gallery, .icons-icon_hamburger, .icons-icon_magnifier, .icons-icon_marker, .icons-icon_marker_big, .icons-icon_quotes, .icons-icon_route, .icons-logo_lang, .locationblock .marker, .contactform .required, .contactform .textarea_rq {
    background-image: url('/img/../img/icons-se0dacc4a72.png');
    background-repeat:no-repeat
}

.icons-icon_arrow {
    background-position:0 0
}

.icons-icon_asterisk {
    background-position:0 -12px
}

.icons-icon_asterisk_textarea {
    background-position:0 -54px
}

.icons-icon_close {
    background-position:0 -158px
}

.icons-icon_fb {
    background-position:0 -169px
}

.icons-icon_gallery {
    background-position:0 -186px
}

.icons-icon_hamburger {
    background-position:0 -201px
}

.icons-icon_magnifier {
    background-position:0 -213px
}

.icons-icon_marker {
    background-position:0 -265px
}

.icons-icon_marker_big {
    background-position:0 -281px
}

.icons-icon_quotes {
    background-position:0 -311px
}

.icons-icon_route {
    background-position:0 -338px
}

.icons-logo_lang {
    background-position:0 -356px
}

.icon {
    display: block;
    width: 40px;
    height: 40px;
    background: url(/img/iconsx2.png) no-repeat;
    background-size: 400px;
    position: absolute;
    top: 0;
    left:0
}

.no-backgroundsize .icon {
    background-image:url(/img/icons.png) !important
}

.icon-holder {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left:0
}

.icon-holder .icon {
    -webkit-transition: opacity .25s ease-out;
    -moz-transition: opacity .25s ease-out;
    -ms-transition: opacity .25s ease-out;
    -o-transition: opacity .25s ease-out;
    transition:opacity .25s ease-out
}

.icon-holder .hover {
    opacity:0
}

.icon-holder:hover .hover {
    opacity:1
}

.icon-holder:hover .hover + .icon {
    opacity:0
}

a:hover .icon-holder .hover, a:hover .icon-holder-40 .hover {
    opacity:1
}

a:hover .icon-holder .hover + .icon, a:hover .icon-holder-40 .hover + .icon {
    opacity:0
}

.no-opacity .icon-holder .hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

.no-opacity .icon-holder:hover .hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.no-opacity .icon-holder:hover .hover + .icon {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

.no-opacity a:hover .icon-holder .hover, .no-opacity a:hover .icon-holder-40 .hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.no-opacity a:hover .icon-holder .hover + .icon, .no-opacity a:hover .icon-holder-40 .hover + .icon {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

.icon-marker {
    background-position:0px 0px
}

.icon-marker2 {
    background-position:-40px 0px
}

.icon-marker3 {
    background-position:-160px -40px
}

.icon-cross {
    background-position:-80px 0px
}

.icon-cross2 {
    background-position:-80px -40px
}

.icon-magnifier {
    background-position:-120px 0px
}

.icon-hamburger {
    background-position:-120px -40px
}

.icon-gallery {
    background-position:-200px 0px
}

.icon-quote1 {
    background-position:-240px 0px
}

.icon-quote2 {
    background-position:-280px 0px
}

.icon-fb {
    background-position:-320px 0px
}

.icon-fb2 {
    background-position:0px -80px
}

.icon-route {
    background-position:-360px 0px
}

.icon-down {
    background-position:-200px -40px
}

.icon-arrow-right {
    background-position:-240px -40px
}

.icon-arrow-left-sm {
    background-position:-280px -40px
}

.icon-tw {
    background-position:-320px -40px
}

.icon-ig {
    background-position:-360px -40px
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display:block
}

audio, canvas, video {
    display: inline-block;
    * display:inline;
    * zoom:1
}

audio:not([controls]) {
    display:none
}

[hidden] {
    display:none
}

html {
    font-size: 100%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust:100%
}

body {
    margin: 0;
    font-size: 13px;
    line-height:1.231
}

body, button, input, select, textarea {
    font-family: sans-serif;
    color:#222
}

::-moz-selection {
    background: #fe57a1;
    color: #fff;
    text-shadow:none
}

::selection {
    background: #fe57a1;
    color: #fff;
    text-shadow:none
}

a {
    color:#00e
}

a:hover {
    color:#06e
}

a:focus {
    outline:thin dotted
}

a:hover, a:active {
    outline:0
}

abbr[title] {
    border-bottom:1px dotted
}

b, strong {
    font-weight:bold
}

blockquote {
    margin:1em 40px
}

dfn {
    font-style:italic
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding:0
}

ins {
    background: #ff9;
    color: #000;
    text-decoration:none
}

mark {
    background: #ff0;
    color: #000;
    font-style: italic;
    font-weight:bold
}

pre, code, kbd, samp {
    font-family: monospace, monospace;
    _font-family: 'courier new', monospace;
    font-size:1em
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap:break-word
}

q {
    quotes:none
}

q:before, q:after {
    content: "";
    content:none
}

small {
    font-size:85%
}

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

sup {
    top:-0.5em
}

sub {
    bottom:-0.25em
}

ul, ol {
    margin: 0;
    padding:0
}

dd {
    margin:0 0 0 40px
}

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding:0
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align:middle
}

svg:not(:root) {
    overflow:hidden
}

figure {
    margin:0
}

form {
    margin:0
}

fieldset {
    border: 0;
    margin: 0;
    padding:0
}

label {
    cursor:pointer
}

legend {
    border: 0;
    * margin-left:-7px;
    padding:0
}

button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    * vertical-align:middle
}

button, input {
    line-height: normal;
    * overflow:visible
}

table button, table input {
    * overflow:auto
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance:none
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding:0
}

textarea {
    overflow: auto;
    vertical-align: top;
    resize:vertical
}

input:invalid, textarea:invalid {
    background-color:#f0dddd
}

table {
    border-collapse: collapse;
    border-spacing:0
}

td {
    vertical-align:top
}

.ir {
    display: block;
    border: 0;
    text-indent: -999em;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    text-align: left;
    direction:ltr
}

.ir br {
    display:none
}

.hidden {
    display: none !important;
    visibility:hidden
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width:1px
}

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width:auto
}

.invisible {
    visibility:hidden
}

html {
    font-size: 16px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position:relative
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    html {
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        width: auto;
        height:auto
    }
}

body {
    width: 100%;
    background-color: #CCC;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing:grayscale
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    body {
        overflow: auto;
        height: auto;
        width:auto
    }
}

.cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center
}

.no-backgroundsize .cover {
    background-size: cover;
    -ms-behavior:url(/css/backgroundsize.min.htc)
}

p, a, li, em, td, input, span {
    font-family: "Montserrat";
    font-size:13px
}

a, a:focus, button, button:focus {
    outline:none
}

a, input[type=submit] {
    text-transform: uppercase;
    text-decoration: none;
    color:#c7c5c3
}

h1, h2, h3, h4, h5, label, a, p, li, span {
    -webkit-font-smoothing: antialiased;
    font-weight: normal;
    margin:0
}

h1, h2 {
    font-family: 'brandon-grotesque';
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    color:#a2a1a1
}

em {
    font-style:normal
}

p {
    color:#a2a1a1
}

table {
    border:1px solid #8a8988
}

thead {
    border-bottom:1px solid #8a8988
}

input[type=text], input[type=email], input[type=tel], textarea {
    background-color: #EEE;
    color: #737373;
    font-style: italic;
    font-size: 11px;
    padding-left: 15px;
    margin-bottom: 5px;
    border: 0;
    width: 294px;
    outline:none
}

input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #735a30;
    font-family: Montserrat;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    font-size:11px
}

input[type=text]:-moz-placeholder, input[type=email]:-moz-placeholder, input[type=tel]:-moz-placeholder, textarea:-moz-placeholder {
    color: #735a30;
    font-family: Montserrat;
    font-style: italic;
    font-size:11px
}

input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, textarea::-moz-placeholder {
    color: #735a30;
    font-family: Montserrat;
    font-style: italic;
    font-size:11px
}

input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #735a30;
    font-family: Montserrat;
    font-style: italic;
    font-size:11px
}

input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: rgba(74, 73, 74, 0.6);
    font-family: Montserrat;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    font-size:11px
}

input[type=text]:-moz-placeholder, input[type=email]:-moz-placeholder, input[type=tel]:-moz-placeholder, textarea:-moz-placeholder {
    color: rgba(74, 73, 74, 0.6);
    font-family: Montserrat;
    font-style: italic;
    font-size:11px
}

input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, textarea::-moz-placeholder {
    color: rgba(74, 73, 74, 0.6);
    font-family: Montserrat;
    font-style: italic;
    font-size:11px
}

input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: rgba(74, 73, 74, 0.6);
    font-family: Montserrat;
    font-style: italic;
    font-size:11px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    input[type=text], input[type=email], input[type=tel], textarea {
        width:250px
    }
}

input[type=text], input[type=email], input[type=tel] {
    height:40px
}

.no-opacity input[type=text], .no-opacity input[type=email], .no-opacity input[type=tel] {
    padding-top: 10px;
    height: auto;
    padding-bottom:10px
}

textarea {
    height: 90px;
    padding-top: 10px;
    resize:none
}

ul {
    list-style: none;
    margin: 0;
    padding:0
}

::-moz-selection {
    background: #BFBFBF;
    color: #fff;
    text-shadow:none
}

::selection {
    background: #BFBFBF;
    color: #fff;
    text-shadow:none
}

#container {
    position:relative
}

.wrapright, .wrapleft {
    float: left;
    width:100%
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .wrapright, .wrapleft {
        float:none
    }
}

.wrapleft {
    height:100%
}

.wrapright {
    height:100%
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .wrapright {
        position: relative;
        z-index: 1;
        float:none
    }
}

.wrapright__right {
    margin-left: 330px;
    height: 100%;
    overflow-y:auto
}

@media (min-width: 736px) {
    .wrapright__right {
        -webkit-overflow-scrolling:touch
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .wrapright__right {
        margin-left:273px
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .wrapright__right {
        margin-left: 0;
        padding-top: 80px;
        overflow: hidden;
        height:auto
    }
}

.wrapright__left {
    float: left;
    width: 330px;
    margin-left: -100%;
    height:100%
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .wrapright__left {
        display:none
    }
}

.wrapleft__left {
    margin-right: 460px;
    height: 100%;
    overflow-y: auto;
    position:relative
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .wrapleft__left {
        display:none
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .wrapleft__left {
        display:none
    }
}

.wrapleft__right {
    float: right;
    width: 460px;
    margin-left: -460px;
    height: 100%;
    overflow-y: auto;
    position:relative
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .wrapleft__right {
        width:100%
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .wrapleft__right {
        width: 100%;
        height: auto;
        overflow:hidden
    }
}

.clearfix {
    overflow: hidden;
    * zoom:1;
    clear:both
}

.background_container {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 330px;
    background-color: #fff;
    height: 100%;
    width:100%
}

.background_container .fig {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index:-1
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .background_container {
        left:273px
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .background_container {
        display:none
    }

    .background_container.on-intro {
        display:block
    }
}

.background_container.on-intro {
    left:0 !important
}

@media (max-width: 1024px) {
    .wrapleft {
        height:auto
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .l-home {
        background-image:none !important
    }
}

.l-home .overlay {
    height: 100%;
    width: 100%;
    background: rgba(47, 40, 30, 0.7);
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity:0
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .l-home .overlay {
        display:none
    }
}

.l-home.no-intro .overlay {
    opacity:0.8
}

.l-home .wrapright__right {
    overflow:hidden
}

#leftsidebar {
    width: 330px;
    height: 100%;
    position: absolute;
    top: 0;
    text-align: center;
    background: #000;
    background-image: url(/img/krijtbord.jpg);
    background-size: cover;
    background-position:center center
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #leftsidebar {
        width:273px
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    #leftsidebar {
        left: 0 !important;
        width: 100%;
        height: auto;
        z-index: 2;
        background:#000
    }
}

#rightsidebar {
    width: 460px;
    height: 100%;
    float:right
}

.l-rooms {
    width:100%
}

.l-rooms .rooms_container {
    margin: 0 auto;
    max-width: 980px;
    padding:100px 20px 100px 20px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .l-rooms .rooms_container {
        padding-top: 30px;
        padding-bottom:30px
    }
}

.l-rooms .rooms_container .col {
    width: 33.333333%;
    float: left;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box
}

@media (min-width: 1351px) {
    .l-rooms .rooms_container {
        padding: 100px 0 100px 0;
        margin: 0 70px;
        max-width:none
    }
}

@media (min-width: 1600px) {
    .l-rooms .rooms_container .col {
        width:25%
    }
}

@media (max-width: 1250px) {
    .l-rooms .rooms_container .col {
        width:50%
    }
}

@media (max-width: 1023px) {
    .l-rooms .rooms_container {
        max-width: 300px;
        padding-right: 0;
        padding-left:0
    }

    .l-rooms .rooms_container .col {
        width: auto;
        float: none;
        padding:0
    }
}

.l-gallery {
    margin-top: -1px;
    background:#fff
}

.l-gallery .closegallery {
    background: #735a30;
    width: 50px;
    height: 50px;
    color: #fff;
    display: block;
    position: absolute;
    right: 0;
    top: 125px;
    z-index:5
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .l-gallery .closegallery {
        display:none
    }
}

.l-gallery .closegallery .icon {
    top: 6px;
    left:6px
}

.l-gallery .item {
    overflow: hidden;
    position: relative;
    float:left
}

.l-gallery .item .pusher {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index:0
}

.l-gallery .item .pusher2 {
    display:none
}

.l-gallery .item .fig {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index:1
}

.l-gallery .item .fig img {
    display:none
}

@media (max-width: 1440px) {
    .l-gallery .item .pusher {
        display:none
    }

    .l-gallery .item .pusher2 {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
        z-index:0
    }
}

@media (max-width: 768px) {
    .l-gallery .item {
        float: none;
        width: auto !important;
        height:auto !important
    }

    .l-gallery .item .pusher, .l-gallery .item .pusher2 {
        display:none
    }

    .l-gallery .item .fig {
        background: none !important;
        position:relative
    }

    .l-gallery .item .fig img {
        display: block;
        width: 100%;
        height:auto
    }

    .l-gallery .item .gallery-children {
        position:static
    }
}

.l-gallery .gallery-children {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index:1
}

.l-gallery .w50 {
    width:50%
}

@media (max-width: 1200px) {
    .l-gallery .w50 {
        width:100%
    }
}

.l-gallery .h50w100 {
    height: 50%;
    width:100%
}

.l-gallery .h50w50 {
    height: 50%;
    width:50%
}

.l-gallery .caption {
    background-color: rgba(255, 255, 255, 0.8);
    height: 50px;
    position: absolute;
    bottom: 0;
    width: 101%;
    display: table;
    z-index:2
}

.l-gallery .caption p {
    display: table-cell;
    vertical-align: middle;
    padding-left:25px
}

.l-gallery .quote {
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform:translateZ(0)
}

.l-gallery .quote span {
    position: absolute;
    top: 50%;
    display: block;
    left: 40px;
    right: 40px;
    text-align: center;
    color: #A2A1A1;
    font-family: 'brandon-grotesque';
    font-weight: 600;
    font-size: 1.8em;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform:translate(0, -50%)
}

.l-gallery .quote .icon {
    left: 50%;
    margin-left:-20px
}

.l-gallery .quote .icon-quote1 {
    top:-45px
}

.l-gallery .quote .icon-quote2 {
    top: auto;
    bottom:-45px
}

@media (min-width: 1600px) {
    .l-gallery .quote span {
        font-size:2.1em
    }

    .l-gallery .quote .icon-quote1 {
        top:-60px
    }

    .l-gallery .quote .icon-quote2 {
        bottom:-60px
    }
}

@media (max-width: 1300px) {
    .l-gallery .quote span {
        font-size:1.5em
    }

    .l-gallery .quote .icon {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform:scale(0.8)
    }
}

@media (max-width: 1200px) {
    .l-gallery .quote span {
        font-size:1.8em
    }

    .l-gallery .quote .icon {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform:scale(1)
    }
}

@media (max-width: 768px) {
    .l-gallery .quote {
        position: static;
        display:block
    }

    .l-gallery .quote span {
        top: 0;
        position: static;
        margin: 70px 40px;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform:translate(0, 0)
    }
}

.l-gallery-footer {
    padding: 20px 20px 17px 20px;
    clear: both;
    background: #F2F2F2;
    line-height: normal;
    font-size: .9em;
    text-align:right
}

.l-gallery-footer a {
    color:#222 !important
}

.lang {
    width: 320px;
    left: 20px;
    top: 160px;
    position: absolute;
    opacity:0
}

.lang .lang_logo, .lang .lang_selection {
    width: 160px;
    height:160px
}

.lang .lang_logo {
    background-image: url("../img/logo.jpg");
    -moz-box-shadow: #666 2px 2px 10px;
    -webkit-box-shadow: #666 2px 2px 10px;
    box-shadow: #666 2px 2px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px;
    z-index: 2;
    position:relative
}

.lang .lang_selection {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f9f7f0;
    z-index:0
}

.lang .lang_selection ul {
    display: block;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform:translateY(-50%)
}

.lang .lang_selection ul li {
    margin-left: 30px;
    margin-bottom:20px
}

.lang .lang_selection a {
    color: #968383;
    font-weight:700
}

.lang .lang_selection a:hover {
    color:#735a30
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .lang {
        opacity: 1;
        width: 245px;
        left: 50%;
        margin-left:-122px
    }

    .lang .lang_logo {
        width: 120px;
        height: 120px;
        background-size:100%
    }

    .lang .lang_selection {
        left: 120px;
        width: 125px;
        height:120px
    }

    .lang .lang_selection ul li {
        margin-left: 20px;
        margin-bottom: 15px;
        font-size:12px
    }
}

.locationblock {
    height: 40px;
    padding-left: 38px;
    width:280px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .locationblock {
        display:none
    }
}

.locationblock .marker {
    width: 23px;
    height: 30px;
    background-position: 0 -281px;
    float: left;
    padding-right: 15px;
    margin-top:3px
}

.locationblock .icon {
    top: -2px;
    left:-9px
}

.locationblock p {
    font-size: 13.6px;
    color: #fff;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    line-height: 18px;
    font-weight: 700;
    letter-spacing:2px
}

.locationblock.intro {
    position: absolute;
    left: 160px;
    bottom:-40px
}

#container {
    height:100%
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    #container {
        height:auto
    }
}

.main {
    position: relative;
    width: 100%;
    height: 100%;
    opacity:1
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .main {
        background-color:#353535
    }
}

.main .mobileintro {
    width:100%
}

.main h1 {
    position: absolute;
    top: 30%;
    font-size: 60px;
    line-height: 70px;
    color: #fff;
    width: 66%;
    max-width: 810px;
    text-align: center;
    margin: 0 auto;
    line-height: 75px;
    left: 50%;
    margin-left: -32%;
    opacity: 0;
    font-family: 'brandon-grotesque';
    font-weight:400
}

@media (max-height: 768px) and(min-width: 900px) {
    .main h1 {
        font-size: 55px;
        line-height:60px
    }
}

@media only screen and (max-width: 1100px) {
    .main h1 {
        font-size:60px
    }
}

@media only screen and (max-width: 947px) {
    .main h1 {
        font-size: 55px;
        line-height:60px
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .main h1 {
        position: relative;
        font-size: 32px;
        line-height: 50px;
        margin-top:15%
    }
}

.main .roomselection {
    position: absolute;
    bottom: 25%;
    opacity: 0;
    text-align: center;
    left: 0;
    right: 0;
    width:auto
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .main .roomselection {
        position: relative;
        margin-top: 15%;
        width: auto;
        margin-left: 0;
        left:0
    }
}

.main .roomselection .line {
    height: 2px;
    background-color: #fff;
    width: 170px;
    display: inline-block;
    margin-bottom:22px
}

@media (max-width: 1023px) {
    .main .roomselection .line {
        width:60px
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .main .roomselection .line {
        display:none
    }
}

.main .roomselection a {
    display: inline-block;
    border: 2px solid #fff;
    padding: 13px 15px 11px 15px;
    color: #fff;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    line-height:normal
}

.main .roomselection a:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    width: 0%;
    bottom: 0;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.3);
    color:#fff !important
}

.main .roomselection a:visited {
    color:#fff
}

.main .roomselection a:hover, .main .roomselection a:active {
    color:#fff
}

.main .roomselection a:hover:after, .main .roomselection a:active:after {
    width: 100%;
    z-index: 1;
    color:#fff
}

.main .roomselection span {
    display: table-cell;
    vertical-align: middle;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 2px;
    z-index: 2;
    position: relative;
    color: #fff;
    font-family: 'brandon-grotesque';
    font-weight:700
}

.main > .locationblock {
    position: absolute;
    bottom: 5%;
    opacity: 0;
    margin: 0 auto;
    left: 50%;
    margin-left:-120px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .main > .locationblock {
        display: block;
        margin-left: 0;
        left: 0;
        position: relative;
        bottom: 0;
        margin: 0 auto;
        margin-top: 30%;
        padding-bottom: 10%;
        width:215px
    }

    .main > .locationblock p {
        font-size: 10px;
        color:#fff
    }
}

.no-intro .main h1 {
    top: 25%;
    opacity:1
}

.no-intro .roomselection {
    bottom: 33%;
    opacity:1
}

.no-intro .locationblock {
    bottom: 10%;
    opacity:1
}

.main.style2 .inner {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform:translate(0, 0)
}

.main.style2 .inner.intro {
    opacity: 0;
    -webkit-transform: translate(0, 80px);
    -moz-transform: translate(0, 80px);
    -ms-transform: translate(0, 80px);
    -o-transform: translate(0, 80px);
    transform:translate(0, 80px)
}

.main.style2 h1 {
    margin: 130px auto 30px auto;
    opacity: 1;
    position:static
}

.main.style2 .roomselection {
    position: relative;
    top: auto;
    left: auto;
    opacity: 1;
    bottom: auto;
    right:auto
}

.main.style2 .icon-down {
    position: relative;
    margin:50px auto 0 auto
}

.main.style2 .wysi {
    max-width: 700px;
    text-align: center;
    margin: -80px auto 40px auto;
    color:#FFF
}

.main.style2 .wysi h1, .main.style2 .wysi h2, .main.style2 .wysi h3, .main.style2 .wysi ul, .main.style2 .wysi p, .main.style2 .wysi a {
    color:#fff
}

.main.style2 .wysi a {
    font-weight:700
}

.weblounge {
    opacity: .5;
    position: fixed;
    bottom: 20px;
    right: 20px;
    -webkit-transition: opacity .25s;
    -moz-transition: opacity .25s;
    -ms-transition: opacity .25s;
    -o-transition: opacity .25s;
    transition:opacity .25s
}

.weblounge span {
    font-size: .9em;
    display: block;
    width: 165px;
    height: 15px;
    position: absolute;
    top: 2px;
    left: -170px;
    overflow:hidden
}

.weblounge a {
    color:#fff
}

.weblounge i {
    color: #fff;
    font-style: normal;
    right: -165px;
    position: relative;
    -webkit-transition: right .3s ease-out;
    -moz-transition: right .3s ease-out;
    -ms-transition: right .3s ease-out;
    -o-transition: right .3s ease-out;
    transition:right .3s ease-out
}

.weblounge:hover {
    opacity:1
}

.weblounge:hover i {
    right:0
}

@media (max-width: 1024px) {
    .weblounge {
        display:none
    }
}

.intro-blocks {
    max-width: 860px;
    margin:80px auto 100px auto
}

.intro-blocks .col {
    padding: 0 25px 50px 25px;
    float: left;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box
}

.intro-block {
    background:#fdfdfc
}

.intro-block .fig {
    margin: 0;
    overflow: hidden;
    position:relative
}

.intro-block .fig img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition:all 2s
}

.intro-block .bottom {
    height: 112px;
    padding: 0 110px 0 30px;
    position:relative
}

.intro-block .btn {
    position: absolute;
    top: 50%;
    right: 30px;
    margin-top: -20px;
    padding:0 20px
}

.intro-block .btn span {
    font-size:10px
}

.intro-block .text {
    display: table;
    width: 100%;
    height:100%
}

.intro-block .text-inner {
    display: table-cell;
    vertical-align:middle
}

.intro-block h3 {
    font-family: 'brandon-grotesque';
    font-weight: 400;
    font-size: 28px;
    line-height: 30px;
    color:#4a4949
}

.intro-block h3 a {
    font-family: 'brandon-grotesque';
    font-weight: 400;
    font-size: 28px;
    color: inherit;
    line-height:30px
}

.intro-block:hover .fig img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform:scale(1.05)
}

@media (max-width: 1100px) {
    .intro-blocks .col {
        width: auto;
        float: none;
        padding:0 0 25px 0
    }

    .intro-blocks .intro-block {
        max-width: 380px;
        margin:0 auto
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .intro-blocks {
        margin-top:30px
    }

    .intro-blocks .intro-block {
        width: auto;
        margin:0 20px
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .intro {
        height:100%
    }

    .intro body {
        height:100%
    }

    .intro #container {
        height:100%
    }

    .main.style2 {
        height:auto
    }

    .main.style2 .inner {
        height:auto
    }

    .main.style2 h1 {
        margin:40px auto 20px auto
    }

    .main.style2 .roomselection {
        margin-top:20px
    }

    .main.style2 .icon-down {
        position: relative;
        margin:20px auto 0 auto
    }

    .main.style2 .wysi {
        margin-left: 20px;
        margin-right:20px
    }

    .languageselection.intro {
        display:none
    }

    .intro .wrapright {
        display:none
    }

    .intro #leftsidebar {
        position:relative
    }

    .intro #leftsidebar .sidebar_wrapper {
        display:block
    }

    .intro #leftsidebar .holder {
        position:relative
    }

    .intro #leftsidebar .navigation.intro {
        position: relative;
        top: auto;
        left: auto;
        margin:2em auto
    }

    .intro #leftsidebar .contactdata.intro {
        position: relative;
        top: auto;
        bottom:auto
    }

    .intro .mobilenav__right {
        display:none !important
    }

    .intro .mobilenav .mobilenav__left {
        width: auto;
        position: relative;
        display:none
    }

    .intro .mobilenav .mobilenav__left .mobilelogo {
        margin: 2em auto;
        height:70px
    }

    .background_container.on-intro {
        display:none
    }

    .background_container.on-intro .fig {
        background:none !important
    }

    .nav_wrapper .logo {
        display: none !important;
        width: 170px !important;
        margin-top:20px !important
    }

    .intro body {
        background-color:#fff
    }
}

.sidebar_wrapper {
    height:100%
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .sidebar_wrapper {
        display: none;
        height: auto;
        width:100%
    }
}

.nav_wrapper {
    padding-top:80px
}

@media (max-width: 1024px) and(orientation: landscape) {
    .nav_wrapper {
        padding-top:40px
    }

    .nav_wrapper .contactdata {
        font-size:10px
    }
}

.nav_wrapper .logo {
    display: block;
    width: 115px;
    margin:0 auto
}

.nav_wrapper .logo img {
    display: block;
    width: 100%;
    height:auto
}

@media (max-height: 768px) and(min-width: 900px) {
    .nav_wrapper {
        padding-top:40px
    }

    .nav_wrapper .contactdata {
        font-size:10px
    }

    .nav_wrapper .logo {
        display: block;
        width: 60px;
        margin:0 auto
    }

    .nav_wrapper .logo img {
        display: block;
        width: 100%;
        height:auto
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .nav_wrapper {
        margin-top: 0;
        top: auto;
        padding-top: 0;
        -webkit-transform: none;
        transform: none;
        -ms-transform:none
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .nav_wrapper .logo {
        display:none
    }

    .mobilenav .mobilenav__wrapright {
        float: left;
        width:100%
    }

    .mobilenav .mobilenav__right {
        height: 80px;
        padding-left: 50px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing:border-box
    }

    .mobilenav .mobilenav__left {
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height:80px
    }

    .mobilenav .mobilenav__left .mobilelogo {
        height: 40px;
        position: relative;
        margin: 21px 0 0 15px;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform:translateZ(0)
    }

    .mobilenav .hamburger {
        position: relative;
        height: 80px;
        text-align: center;
        line-height: 81px;
        color: #a2a1a1;
        float: right;
        padding-right:40px
    }

    .mobilenav .hamburger span {
        text-align: center;
        height: 40px;
        vertical-align: middle;
        text-transform: uppercase;
        font-size: 18px;
        margin-left: 15px;
        margin-right:15px
    }

    .mobilenav .hamburger .icon {
        left: auto;
        right: 10px;
        top:20px
    }

    .mobilenav .hamburger .arrow {
        position: absolute;
        top: 1px;
        right: -5px;
        display: inline-block;
        width: 9px;
        height: 12px;
        background: url("../img/icons/icon_arrow.png");
        margin-bottom: -2px;
        display:none
    }

    .mobilenav .hamburger .arrow.show {
        display:inline-block
    }
}

.navigation {
    width: 160px;
    padding-top: 37px;
    padding-bottom: 33px;
    margin:0 auto
}

@media (max-width: 1024px) and(orientation: landscape) {
    .navigation {
        padding-top: 25px;
        padding-bottom:23px
    }

    .navigation li a {
        font-size:10px
    }
}

@media (max-height: 768px) and(min-width: 900px) {
    .navigation {
        padding-top: 25px;
        padding-bottom:23px
    }

    .navigation li a {
        font-size:10px
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .navigation {
        width: 100%;
        padding-top:0
    }
}

.navigation > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform:translateZ(0)
}

.navigation li {
    list-style-type: none;
    display: block;
    width: 160px;
    text-align: center;
    border-bottom: 1px solid #313131;
    line-height: normal;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .navigation li {
        width:100%
    }

    .navigation li a {
        padding:18px 0 17px 0
    }
}

.navigation li.pre_active {
    border:0
}

.navigation li.active {
    border:none
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .navigation li.active {
        color:#fff
    }
}

.navigation li.active a {
    color: #000;
    background:#fff
}

.navigation li.active a:hover {
    color:#000
}

.navigation li:last-child {
    border-bottom:none
}

.navigation li a {
    font-family: 'brandon-grotesque';
    font-weight: 600;
    font-size: 13px;
    padding: 11px 0 10px 0;
    color: #797979;
    display:block
}

.navigation li a:hover {
    color:#fff
}

.btn {
    height: 40px;
    line-height: 40px;
    color: #000;
    background: #D4D4D4;
    display: inline-block;
    text-align: center;
    text-transform: uppercase !important;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    position:relative
}

.btn span {
    z-index: 2;
    position: relative;
    color: #000;
    font-family: 'brandon-grotesque';
    font-weight: 600;
    font-size:13px
}

.btn:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    width: 0%;
    height: 40px;
    top: 0;
    left: 0;
    background-color: #A2A2A2;
    color:#000 !important
}

.btn:visited, .btn:hover, .btn:active {
    color:#000
}

.btn:hover:after, .btn:active:after {
    width: 100%;
    z-index: 1;
    color:#000
}

.btn.reserve {
    margin-bottom: 10px;
    color: #FFF;
    background: none;
    border: 2px solid #FFF;
    box-sizing: border-box;
    line-height:36px
}

.btn.reserve:after {
    display:none
}

.btn.reserve span, .btn.reserve:visited, .btn.reserve:hover, .btn.reserve:active {
    color:#FFF
}

input[type=submit], button[type=submit] {
    height: 40px;
    color: #000;
    background: #D4D4D4;
    border: 0;
    padding: 0 18px;
    outline:none
}

#leftsidebar .btn {
    width:160px
}

.content .btn {
    width:178px
}

.languageselection {
    background: #fff;
    width: 160px;
    height: 44px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left:-80px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .languageselection {
        position: relative;
        margin-left: 0;
        left: 0;
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom:2px
    }
}

.languageselection a {
    display: inline-table;
    width: 48px;
    height: 45px;
    border-top: 1px solid #dcdbdb;
    color:#a2a1a1
}

.languageselection a span {
    display: table-cell;
    vertical-align:middle
}

.languageselection a:hover {
    color:#000
}

.languageselection a.active {
    border-left: 1px solid #dcdbdb;
    border-right: 1px solid #dcdbdb;
    font-weight: 700;
    color:#000
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .languageselection {
        bottom:27px
    }
}

.languageselection.intro {
    bottom:-50px
}

.contactdata p {
    color: #929292;
    font-size: 11px;
    line-height: 18px;
    text-transform:inherit
}

.contactdata a {
    font-size: 11px;
    line-height: 18px;
    text-transform: inherit;
    text-decoration: underline;
    color:#C7C5C3
}

.contactdata a:hover {
    color:#C7C5C3
}

.contactdata a.disclaimer {
    display: block;
    color: #C5C5C5;
    margin-top:5px
}

.contactdata a.facebook {
    display: block;
    color: #C5C5C5;
    margin-top:10px
}

.roomblock {
    display: block;
    position: relative;
    margin-bottom: 40px;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility:hidden
}

.roomblock:hover .icon_magnifier:after, .roomblock:hover .icon_magnifier:active:after {
    width: 100%;
    z-index: 1;
    color:#614B27
}

.roomblock:hover .img_holder img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform:scale(1.05)
}

.roomblock .img_holder {
    overflow: hidden;
    position: relative;
    z-index:10000
}

.roomblock .img_holder img {
    display: block;
    width: 100%;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition:all 2s
}

.roomblock .room_content {
    background-color: #fff;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left:24px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .roomblock .room_content {
        padding-left: 10px;
        padding-right: 10px;
        text-align:center
    }
}

.roomblock h2 small {
    font-size: 60%;
    display: block;
    margin-top: -2px;
    margin-bottom:2px
}

.roomblock > h2 {
    font-family: bebasneue_book;
    font-size:24px
}

.roomblock > h2, .roomblock p {
    color:#a2a1a1
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .roomblock > h2, .roomblock p {
        padding-left: 0;
        float:none
    }
}

.roomblock > p {
    text-transform:uppercase
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .roomblock > p {
        padding-bottom:18px
    }
}

.roomblock .icon_magnifier {
    width: 52px;
    height: 52px;
    background-repeat: no-repeat;
    border: 1px solid #8d8d8d;
    position: absolute;
    right: 17px;
    bottom: 14px;
    display:none
}

.roomblock .icon_magnifier .icon {
    top: 6px;
    left: 6px;
    z-index:2
}

.roomblock .icon_magnifier:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    width: 0%;
    height: 52px;
    top: 0;
    left: 0;
    background-color: #D1C5A8;
    color:#faf9f9 !important
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .roomblock .icon_magnifier {
        display:none
    }
}

.picturescroll {
    height: 100vh;
    width: 100%;
    text-align:center
}

.picturescroll .pic {
    overflow: hidden;
    width: 70%;
    max-height: auto;
    margin:6% auto
}

.picturescroll img {
    width: 100%;
    height: auto;
    -moz-box-shadow: #666 2px 2px 10px;
    -webkit-box-shadow: #666 2px 2px 10px;
    box-shadow: #666 2px 2px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px;
    -webkit-transition: opacity 3s, -webkit-transform 3s;
    transition: opacity 3s, transform 3s;
    -webkit-backface-visibility: hidden;
    backface-visibility:hidden
}

.picturescroll img:hover {
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform:scale3d(1.2, 1.2, 1)
}

.header_img {
    display:none
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .header_img {
        width: 100%;
        height: auto;
        display:block
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .header_img {
        width: 100%;
        height: auto;
        display:block
    }
}

.backlink {
    float: right;
    color: #c7c5c3 !important;
    position: relative;
    padding-right: 20px;
    font-weight:normal
}

.backlink .icon {
    position: absolute;
    top: -12px;
    right: -16px;
    left: auto;
    opacity:.6
}

.backlink:hover {
    color:#A3A19F !important
}

.backlink:hover .icon {
    opacity:.9
}

.content {
    padding-top: 63px;
    padding-bottom: 134px;
    padding-left: 60px;
    padding-right:60px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .content {
        padding-top: 20px;
        padding-bottom: 50px;
        padding-left: 25px;
        padding-right:20px
    }
}

.content h1 {
    padding-top: 50px;
    color: #000;
    font-family: 'brandon-grotesque';
    font-weight: 700;
    padding-bottom: 7px;
    font-size:32px
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .content h1 {
        padding-top:10px
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .content h1 {
        padding-top:30px
    }
}

.content a {
    text-transform: none;
    text-decoration: underline;
    color: #000;
    font-weight:bold
}

.content a:visited {
    color:#000
}

.content a:hover {
    color:#000
}

.content a.backlink {
    float:right
}

.content h2 {
    margin: 2.3em 0 -.3em 0;
    color: #000;
    font-family: 'brandon-grotesque';
    font-weight: 700;
    font-size:16px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .content h2 {
        width:80%
    }
}

.content h3 {
    font-weight: bold;
    margin: 1.4em 0;
    color: #000;
    font-size: 12px;
    font-family: 'Montserrat'
}

.content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    margin: 1.3em 0;
    margin-left:14px
}

.content ul li {
    font-size: 12px;
    padding: 3px 0;
    color: #a2a1a1;
    text-indent:-1.3em
}

.content ul li:before {
    content: "■";
    color: #000;
    padding-right:8px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .content ul li:before {
        font-size:6px
    }
}

.content > em {
    margin: 1em 0;
    color: #4A4949;
    text-transform: uppercase;
    font-size: 12px;
    display:block
}

.content table {
    margin:1.5em 0 1.5em
}

.content table thead td {
    padding:10px 18px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .content table thead td {
        padding:14px 7px
    }
}

.content table tbody td {
    padding:14px 18px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .content table tbody td {
        padding:14px 11px
    }
}

.content table td {
    text-transform: uppercase;
    font-size: 12px;
    color: #010101;
    vertical-align:middle
}

.content table td.price {
    font-family: bebasneue_regular;
    font-size: 28px;
    color: #9f9d9c;
    padding-top:16px
}

.content table td.is-dark {
    color:#181818
}

.content table + .btn {
    margin-top:-.75em
}

.content p {
    width: 90%;
    margin: 1.4em 0;
    line-height:19px
}

.content .is-light {
    color:#9f9d9c
}

.content.maisonbertine strong {
    color:#9f8b8b
}

.content.maisonbertine > ul li {
    line-height: 19px;
    letter-spacing: normal;
    color: #a2a1a1;
    width: 90%;
    padding:1px 0
}

.content.links h2 {
    padding-bottom:5px
}

.content.links a {
    text-transform: none;
    text-decoration: underline;
    color:#9b868d
}

.content.links a:hover {
    color: #735a30;
    text-decoration:none
}

.content.links p {
    padding-top: 0;
    padding-bottom:8px
}

.pictures {
    margin: 0 -5px;
    display: none;
    margin-top:20px
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .pictures {
        display:block
    }
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .pictures {
        display:block
    }

    .pictures.mobile-1 {
        margin:0
    }

    .pictures.mobile-1 a {
        width: auto;
        float: none;
        padding:0
    }
}

.pictures a {
    width: 50%;
    display: block;
    float: left;
    padding: 0 5px;
    margin-bottom: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box
}

.pictures img {
    width: 100%;
    height: auto;
    display:block
}

.linkout {
    position: absolute;
    top: 125px;
    right: 0;
    width:250px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .linkout {
        position: relative;
        top: auto;
        width:auto
    }

    .linkout div {
        float: none !important;
        width: auto;
        margin-bottom:0 !important
    }
}

.linkout div {
    display: block;
    height: 50px;
    background-color: #D4D4D4;
    margin-bottom: 10px;
    line-height: 52px;
    text-align: left;
    float: right;
    padding-left: 18px;
    position: relative;
    padding-right:47px
}

.linkout div:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    width: 0%;
    height: 50px;
    top: 0;
    left: 0;
    background-color: #A2A2A2;
    color:#000 !important
}

.linkout div:hover:after, .linkout div:active:after {
    width: 100%;
    z-index: 1;
    color:#000
}

.linkout div span {
    z-index: 2;
    position: relative;
    color:#000
}

.linkout div .icon {
    left: auto;
    right: 7px;
    top: 5px;
    z-index:2
}

.contactform {
    width: 310px;
    margin-top:1.5em
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .contactform {
        width: 250px;
        margin-bottom:20px
    }
}

.contactform .zipcode {
    width: 85px;
    float: left;
    margin-right:5px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .contactform .zipcode {
        width: 250px;
        float:none
    }
}

.contactform .county {
    width: 188px;
    float:left
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .contactform .county {
        width: 250px;
        float:none
    }
}

.contactform .required {
    background-position:0 -12px
}

.contactform .textarea_rq {
    background-position: 0 -54px;
    margin-bottom:10px
}

.contactform input[type=submit] {
    float:right
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .contactform input[type=submit] {
        float:left
    }
}

.contactform em {
    float: left;
    display: none;
    color: #ff7c6d;
    font-size: 11px;
    text-transform: none;
    width: 170px;
    font-style: italic;
    line-height:16px
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .contactform em {
        width:100%
    }
}

.contactform .chk {
    margin: 1em 0 1.5em;
    padding-left: 20px;
    position: relative;
    color: #A2A1A1;
    font-family: "Montserrat";
    font-size:13px
}

.contactform .chk input {
    position: absolute;
    top: 2px;
    left:0
}

.socials {
    list-style: none;
    display: block;
    text-align: center;
    margin:20px auto 20px
}

.socials li {
    display:inline-block
}

.socials a {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 36px;
    background: #353535;
    border-radius: 50%;
    margin:0 3px
}

.socials .icon {
    top: -2px;
    left:-2px
}

.lunch {
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    position: relative;
    background:#fff
}

.lunch-inner {
    min-height: 100%;
    position:relative
}

.lunch-figs {
    width: 300px;
    float:left
}

.lunch-figs:before {
    content: "";
    display: block;
    width: 300px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #CCC;
    z-index:0
}

.lunch-figs .fig {
    margin: 0;
    position: relative;
    z-index:1
}

.lunch-figs img {
    display: block;
    width: 100%;
    height:auto
}

.videoWrapper {
    position: relative;
    padding-bottom: 47.25%;
    padding-top: 25px;
    height:0
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%
}

.pictures .videoWrapper {
    clear: both;
    margin-bottom:10px
}

.lunch-content {
    margin-left: 300px;
    min-height:100%
}

.lunch-content h1 {
    padding-top: 50px;
    margin-bottom: 30px;
    color: #000;
    font-family: 'brandon-grotesque';
    font-weight: 700;
    font-size:32px
}

.lunch-content h1 small {
    font-size: 16px;
    color: #A2A1A1;
    display:block
}

.lunch-content h1.harmonie {
    color:#d30059
}

.lunch-content-inner {
    padding: 50px 110px 50px 110px;
    max-width:590px
}

.lunch-content-inner hr {
    border-color: #e8e8e8;
    margin:2em 0
}

.lunch-content-inner .wysi {
    line-height: 19px;
    font-family: 'Montserrat'
}

.lunch-content-inner .wysi p, .lunch-content-inner .wysi ul {
    margin:1em 0
}

.lunch-content-inner .wysi a, .lunch-content-inner .wysi a:visited {
    color: #B7883B;
    text-transform:none
}

.lunch-content-inner .wysi:hover {
    color:#A77C35
}

.lunch-content-inner .wysi.dishes {
    color: #4a4949;
    font-size: 12px;
    line-height:17px
}

.lunch-content-inner .wysi.dishes p, .lunch-content-inner .wysi.dishes ul {
    color:#4a4949
}

.lunch-content-inner .wysi.dishes h3 {
    font-weight: bold;
    color: #7E502F;
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 2em;
    font-family: 'Montserrat'
}

.lunch-content-inner .logo {
    margin:10px 0 -25px 0
}

.lunch-content-inner .pictures {
    margin-top:3em
}

.lunch-menu {
    margin:2.5em 0
}

.lunch-menu ul {
    padding: 0;
    margin: 0;
    border-bottom:1px solid #e8e8e8
}

.lunch-menu li {
    display: block;
    list-style-type: none;
    border-top:1px solid #e8e8e8
}

.lunch-menu a {
    display: block;
    font-family: 'Montserrat';
    font-weight: bold;
    color: #000000;
    padding: 17px 17px 17px 17px;
    position: relative;
    font-size:16px
}

.lunch-menu a .icon {
    position: absolute;
    top: 5px;
    right: 0;
    left:auto
}

.lunch-menu a:hover {
    background:#fafafa
}

.lunch-title {
    position: relative;
    padding-right:80px
}

.lunch-title .backlink2 {
    top: 66px;
    right:0
}

.harmonie h1 {
    color:#D30059
}

.harmonie .lunch-content-inner .wysi.dishes h3 {
    color:#D30059
}

.harmonie .lunch-content-inner .wysi a {
    color:#D30059
}

.backlink2 {
    display: block;
    position: absolute;
    color: #070707;
    background: #E6E6E8;
    font-size: 12px;
    padding: 7px 10px 4px 22px;
    line-height:normal
}

.backlink2 .icon {
    top: -7px;
    left:-8px
}

.backlink2:hover {
    color: #070707;
    background:#ddd
}

@media (max-width: 1024px) {
    .lunch-content-inner {
        padding:50px 50px 50px 50px
    }

    .lunch-content {
        margin-left:250px
    }

    .lunch-content h1 {
        padding-top:0px
    }

    .lunch-figs {
        width:250px
    }

    .lunch-figs:before {
        width:250px
    }
}

@media (max-width: 1023px) {
    .lunch {
        background:#F9F9F9
    }

    .lunch-figs {
        display:none
    }

    .lunch-content {
        margin-left:0
    }

    .lunch-content-inner {
        padding: 60px 60px 60px 60px;
        max-width:none
    }
}

@media (max-width: 767px) {
    .lunch-content-inner {
        padding:30px 20px 60px 20px
    }

    .lunch-content-inner .logo {
        margin-bottom:20px
    }

    .lunch .backlink2 {
        top:20px
    }
}

.top-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    color:#fff
}

.top-message-inner {
    display:inline-block
}

.top-message-label {
    display: inline-block;
    background: #000;
    padding: 14px 20px 14px 20px;
    text-transform: uppercase;
    font-size: 12px;
    font-family: 'brandon-grotesque';
    font-weight: 700;
    letter-spacing:1px
}

.top-message-content {
    display: inline-block;
    background: #353535;
    padding: 14px 20px 14px 20px;
    text-transform: uppercase;
    font-size: 12px;
    font-family: 'brandon-grotesque';
    font-weight: 700;
    letter-spacing:1px
}

@media (max-width: 767px) {
    .top-message {
        position:relative
    }

    .top-message-inner {
        display:block
    }

    .top-message-label {
        display:none
    }

    .top-message-content {
        display:block
    }
}

.frm-newsletter {
    background: #fdfdfc;
    max-width: 810px;
    margin: 50px auto;
    padding: 40px 35px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box
}

.frm-newsletter h2 {
    width: 47%;
    float: left;
    color: #4a4949;
    margin-top: 5px;
    font-size: 28px;
    line-height:30px
}

.frm-newsletter .inner {
    float: left;
    width: 53%;
    position:relative
}

.frm-newsletter input {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box
}

.frm-newsletter .btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    padding:0
}

.frm-newsletter .btn span {
    font-size:10px
}

.frm-newsletter .feedback {
    text-align: right;
    color: #C83104;
    display: none;
    margin:10px 0 0 0
}

@media (max-width: 1190px) {
    .frm-newsletter {
        max-width: none;
        margin:25px 25px 100px 25px
    }
}

@media (max-width: 1100px) {
    .frm-newsletter {
        max-width: 380px;
        margin:0 auto 80px auto
    }

    .frm-newsletter h2 {
        width: auto;
        float: none;
        margin-bottom:20px
    }

    .frm-newsletter .inner {
        float: none;
        width:auto
    }
}

@media (max-width: 736px) {
    .frm-newsletter {
        width: auto;
        margin:0 20px 80px 20px
    }
}

.no-js .bg_home {
    background-image: url("../img/backgrounds/bg_home.jpg");
    background-position:bottom left
}

.no-js .bg_maisonbertine {
    background-image: url("../img/backgrounds/bg_maisonbertine.jpg")
}

.no-js .bg_links {
    background-image: url("../img/backgrounds/bg_links.jpg")
}

.no-js .bg_route {
    background-image: url("../img/backgrounds/bg_route.jpg")
}

.no-js .bg_contact {
    background-image: url("../img/backgrounds/bg_contact.jpg")
}

.bg_rooms {
    background-image: url("../img/backgrounds/bg_rooms_overview.jpg")
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .bg_rooms {
        background:#5e584f
    }
}

.bg_room {
    background-image: url("../img/backgrounds/bg_room.jpg");
    background-image: url("/uploads/hotel/hotel-bg.jpg")
}

.bg_algemeen {
    background-image: url("../img/backgrounds/bg_algemeen.jpg")
}

.is-white {
    background-color: #fff;
    background-color:rgba(255, 255, 255, 0.95)
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .is-white {
        background-color:#fff
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .is-white {
        background-color:#fff
    }

    .is-white.wrapleft__right {
        background-color:#fafafa
    }
}

.is-left {
    left:-330px
}

.is-mobile {
    display:none
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .is-mobile {
        display:block
    }
}

.is-tablet {
    display:none
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .is-tablet {
        display:block
    }
}

.is-mobile_tablet {
    display:none
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .is-mobile_tablet {
        display:block
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .is-mobile_tablet {
        display:block
    }
}

.is-desktop {
    display:block
}

@media only screen and (min-width: 320px) and (max-width: 736px) {
    .is-desktop {
        display:none !important
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .is-desktop {
        display: none !important
    }
}