/****************************************************************************
 * Topbar
 ****************************************************************************/
.topbar {
    background-color: rgba(96,87,67,0);
    box-shadow: 0 0 1rem rgba(0,0,0,0);
    height: 5rem;
    z-index: 2000;
}
.topbar.scrolled {
    background-color: rgba(96,87,67,0.95);
    box-shadow: 0 0 1rem rgba(0,0,0,0.25);
}
.topbar > .row {
	max-width:85rem;
}

/****************************************************************************
 * Topbar Blog + Single Page
 ****************************************************************************/
body.blog .topbar:not(.scrolled),
body.single-post .topbar:not(.scrolled){
    color:#000000;
}


body.single:not(.single-post) .topbar {
	background-color: rgba(96,87,67,0.95);
    box-shadow: 0 0 1rem rgba(0,0,0,0.25);
}


body.blog .topbar:not(.scrolled) .logo,
.single-post .topbar:not(.scrolled) .logo {
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -ms-filter: invert(1);
    -o-filter: invert(1);
    filter: invert(1);
}

/****************************************************************************
 * Topbar Logo
 ****************************************************************************/
.topbar .logo_wrapper .logo {
    height: 4rem;
}


/****************************************************************************
 * Navigation Wrapper
 ****************************************************************************/
.navigation_wrapper {
    background-color: rgba(96,87,67,1);
}
.navigation_wrapper .menu_wrapper {
	overflow:hidden;
}

/****************************************************************************
 * Mobile Menu
 ****************************************************************************/
@media screen and (min-width: 64em){
	.show_on_mobile {
		display:none;
	}
}

.navigation_wrapper .mobile_menu {
	/*position:absolute;
	bottom:2rem;*/
	margin-top:2rem;
	width:70%;
	left:50%;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

.navigation_wrapper .mobile_menu .menu-item.phone i:before {
	content: '';
	background: url(../img/DSH_call_white.svg) no-repeat;
	background-size: contain;
	top:0;
	left:0;
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
    background-position: center;
}
.navigation_wrapper .mobile_menu .menu-item.mail i:before {
	content: '';
	background: url(../img/DSH_email_white.svg) no-repeat;
	background-size: contain;
	top:0;
	left:0;
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
    background-position: center;
}
.navigation_wrapper .mobile_menu .menu-item.booking i:before {
	content: '';
	background: url(../img/DSH_calendar_month_white.svg) no-repeat;
	background-size: contain;
	top:0;
	left:0;
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
    background-position: center;
}
.navigation_wrapper .mobile_menu .menu-item.giftcard i:before {
	content: '';
	background: url(../img/DSH_redeem_white.svg) no-repeat;
	background-size: contain;
	top:0;
	left:0;
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
    background-position: center;
}

.navigation_wrapper .mobile_menu .menu-item.webcam i:before {
	content: '';
	background: url(../img/DSH_webcam_white.svg) no-repeat;
	background-size: contain;
	top:0;
	left:0;
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
    background-position: center;
}


.navigation_wrapper .mobile_menu .menu-item.whatsapp i:before {
	content: '';
	background: url(../img/DSH_whatsapp_white.svg) no-repeat;
	background-size: contain;
	top:0;
	left:0;
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
    background-position: center;
}


/****************************************************************************
 * Navigation Menu
 ****************************************************************************/
.navigation_wrapper .menu li {
    position: relative;
}
.navigation_wrapper .menu li a {
    font-size: 1.5rem;
    font-family: 'Lora', serif;
    font-weight: 400;
    display: inline-block;
    position: relative;
}
.navigation_wrapper .menu li a:after {
    content: ''; position: absolute;
    left: 0.75rem; right: 0.75rem;
    height: 0.125rem; width: auto;
    background-color: currentColor;
    bottom: 0; opacity: 0;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.navigation_wrapper .menu li a[aria-current="page"]:after,
.navigation_wrapper .menu li a:hover:after {
    opacity: 1;
}
.navigation_wrapper .menu li a[aria-current="page"][href*="#"]:after{
	opacity: 0;
}



.navigation_wrapper .menu_wrapper > .menu:first-child > li {
    padding-right: 1rem;
}


/****************************************************************************
 * Sub Menu
 ****************************************************************************/
.navigation_wrapper .sub-menu-toggle {
    display: inline-block; width: 2rem; height: 2rem;
    margin-left: 0.5rem; position: absolute;
    cursor: pointer; top: 0.5rem; right: 1rem;
}
.navigation_wrapper .sub-menu-toggle:after {
    content: ''; position: absolute;
    top: 35%; left: 50%; width: 0.625rem; height: 0.625rem;
    border: 2px solid currentcolor; border-top: none; 
    border-left: none;
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    -moz-transform: translate(-50%,-50%) rotate(45deg);
    -ms-transform: translate(-50%,-50%) rotate(45deg);
    -o-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg);
}

.navigation_wrapper .menu_wrapper ul li li .sub-menu-toggle {
    right: 0;
}

.navigation_wrapper .sub-menu-toggle + .sub-menu {
    display: none;
    list-style: none;
}
.navigation_wrapper .sub-menu-toggle.active + .sub-menu {
    display: block;
}



@media screen and (min-width:64em){
    .navigation_wrapper .menu_wrapper {
        overflow: visible;
    }
    .navigation_wrapper .sub-menu-toggle {
        top: 0; right: 0;
        pointer-events: none;
		top: 0.25rem;
    }

    .navigation_wrapper .sub-menu-toggle.active + .sub-menu,
    .navigation_wrapper .sub-menu-toggle:hover + .sub-menu,
    .navigation_wrapper li a:hover + .sub-menu-toggle + .sub-menu,
    .navigation_wrapper li:hover a + .sub-menu-toggle +.sub-menu,
    .navigation_wrapper li a + .sub-menu-toggle + .sub-menu:hover {
        display: block;
    }

    .navigation_wrapper li .sub-menu {
        position: absolute;
        margin: 0 -1rem;
        padding: 1rem;
        width: 20rem;
    }
    .navigation_wrapper li .sub-menu:after {
        content: ''; position: absolute; z-index: -1;
        bottom: 0; left: -999rem; right: -999rem;
        width: auto; height: auto; top: -999rem;
        background-color: rgba(96,87,67,.8);
    }
    .navigation_wrapper li .sub-menu li {
        list-style: none;
    }
}


/****************************************************************************
 * Language Switch
 ****************************************************************************/
.typo_language_switch_wrapper > span {
    display: none;
}
.typo_language_switch_wrapper ul.typo_language_switch_nav {
    margin:  2rem -0.125rem 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.typo_language_switch_wrapper ul.typo_language_switch_nav li {
    list-style: none;
    padding: 0.125rem; 
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 100%; 
}
.typo_language_switch_wrapper ul.typo_language_switch_nav li.current {
    font-weight: 600;
}
.typo_language_switch_wrapper ul.typo_language_switch_nav li:after {
    content: '/'; font-weight: 600;
    padding-left: 0.25rem;
}
.typo_language_switch_wrapper ul.typo_language_switch_nav li:last-child:after {
    content: none;
}





@media screen and (min-width: 64em){
    /****************************************************************************
    * Topbar
    ****************************************************************************/
    .topbar {
        height: 9rem;
    }
    .topbar.scrolled {
        height: 5rem;
    }


    /****************************************************************************
    * Topbar
    ****************************************************************************/
    .topbar .logo_wrapper {
        width: 8rem;
    }
    .topbar .logo_wrapper .logo {
        height: 6rem;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }
    .topbar.scrolled .logo_wrapper .logo {
        height: 4rem;
    }

    /****************************************************************************
    * Navigation Wrapper
    ****************************************************************************/
    .navigation_wrapper {
        background-color: transparent;
    }
    .navigation_wrapper .menu_wrapper {
        padding-right: 4rem;
    }

    /****************************************************************************
    * Navigation Menu
    ****************************************************************************/
    .navigation_wrapper .menu li a {
        font-size: 1.125rem;
    }

    /****************************************************************************
    * Language Switch
    ****************************************************************************/
    .typo_language_switch_wrapper {
        position: absolute;
        top: 50%; right: 0;
        -webkit-transform: translate(0,-50%);
        -moz-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
        -o-transform: translate(0,-50%);
        transform: translate(0,-50%);
    }
    .typo_language_switch_wrapper ul.typo_language_switch_nav {
        margin:  0 -0.125rem;
    }
}

@media screen and (min-width: 80em){
    /****************************************************************************
    * Navigation Menu
    ****************************************************************************/
    .navigation_wrapper .menu li a {
        font-size: 1.25rem;
    }
}