/* =============================================== */
/* HIGHLIGHT VIEW */
/* =============================================== */

/*
#1a171b		black (#2b262d)
#dd5f26		orange
#9a9a9a		light gray (text)
#545454		dark gray (text)
#848689     gray (new design)
#1f1f1f		tab background (232323)
#343434		page background
#474742     page background (new design) or #3f3f3a
#eceded     navbar
*/

#stats {
    display: none;
}

[tabindex="-1"] {
    outline: none;
}

/* ----------------------------------------------- */
/* LOAD FONTS */
/* ----------------------------------------------- */

@font-face {
  font-family: 'OpenSans-Light';
  src:  url('../fonts/OpenSans-Light.ttf');
}
@font-face {
  font-family: 'OpenSans-Regular';
  src:  url('../fonts/OpenSans-Regular.ttf');
}
@font-face {
  font-family: 'OpenSans-Semibold';
  src:  url('../fonts/OpenSans-Semibold.ttf');
}

body {
    font-size: 16px;
}

/* ----------------------------------------------- */
/* WEBAPP */
/* ----------------------------------------------- */

/* prevent long press popup on iOS */

body * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ----------------------------------------------- */
/* WEBKIT */
/* ----------------------------------------------- */

body {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
    word-wrap: break-word;
}

#wrapper-image,                         /* do not remove this (native app pages will scale wrong) */
#wrapper-audio,                         /* see navigation.js */
#wrapper-list,
#wrapper-map {
    overflow: hidden;
}

#wrapper-image {
    z-index: 5 !important;
}
#wrapper-audio {
    z-index: 6 !important;
}

#wrapper-audio,
#wrapper-map {
    margin-bottom: -2px !important;
}
#wrapper-audio .iScrollHorizontalScrollbar,
#wrapper-map .iScrollHorizontalScrollbar {
    bottom: 2px !important;
}

/* ----------------------------------------------- */
/* TEXT PAGE */
/* ----------------------------------------------- */

body.page-textpage #wrapper-audio {
    width: 100%;
    left: 0 !important;
}
body.page-textpage #wrapper-audio p {
    max-width: 60em;
}

body.page-textpage .highlight-text .editable-link {
    left: 0px !important;
}
body.page-textpage .highlight-text .editable-form {
    left: 50vw !important;
}

/* ----------------------------------------------- */
/* DEFINE FONTS */
/* ----------------------------------------------- */

body {
    background-color: #000000;
    color: #545454;
}

body {
    line-height: 1.35;
    font-family: OpenSans-Regular, Helvetica, Arial, sans-serif;
    overflow: hidden; /* this is important to prevent the whole page to bounce */
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#page {
    /* background: url('../images/bg_page.png') no-repeat center center; */
     /* background-size: auto 80%; */
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}

h1, a {
    color: #ffffff;
}

h2, h3 {
    color: #545454;
}

h1 {
    font-size: 1.125em;
    margin-top: 0px;
    margin-bottom: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
}
h2 {
    font-size: 0.875em;
    font-style: italic;
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.highlight-text * {
    font-family: OpenSans-Regular, Helvetica, Arial, sans-serif;
    color: #545454;
}

a {
    text-decoration: none !important;;
}

figcaption {
    font-family: OpenSans-Light, Helvetica, Arial, sans-serif;
}

.highlight-text h1 {
    color: #848689;
}

/* ----------------------------------------------- */
/* SHADOW */
/* ----------------------------------------------- */

#header {
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 10;
}
#navbar {
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    box-shadow: 0 -2px 5px rgba(0,0,0,0.15);
    z-index: 10;
}

/* ----------------------------------------------- */
/* TABS */
/* ----------------------------------------------- */

#navbar {
    position: absolute;
    bottom: -3.125em;
    left: 0px;
    width: 100vw;
    height: 6.25em;
    background: #eceded;
    padding-bottom: 3.125em !important;
    text-align: center;
}

#navbar ul {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    padding: 0px;
    margin: auto;
    max-width: 50em;
    width: 100%;
}

#navbar ul li {
    list-style: none;
    display: inline-block;
}

#navbar ul li figure {
    padding-top: 3px;
    margin-top: 0px;
    margin-left: 0;
    margin-right: 0;
}
#navbar ul li figure figcaption {
    white-space: nowrap;
}

#navbar ul li:hover figure:not(.current) {
    -webkit-filter: brightness(.35);
    filter: brightness(.35);
}
#navbar ul li:hover figure:not(.current) figcaption {
    -webkit-filter: brightness(.45);
    filter: brightness(.45);
}

#navbar ul li figure img {
	width: 2.25em;
	height: 2.25em;
	margin-bottom: 2px;
	margin-top: -3px;
}

#navbar ul li figure figcaption {
    font-size: 0.75em !important;
    line-height: 0.75em !important;
    position: relative;
    bottom: 8px;
    color: #616365;
}

#navbar ul li figure.current figcaption {
    color: #dd5f26;
    bottom: 8px;
}

/* ----------------------------------------------- */
/* HEADER */
/* ----------------------------------------------- */

#header {
    width: 100%;
    background: #eceded;
    padding: 0;
    color: #848689;
    font-size: 1.0em;
    text-align: center;
    min-height: 50px;
}

#header > * {
    display: inline-block;
    vertical-align: middle;
}

#header h1 {
    color: #848689 !important;
    vertical-align: middle;
    font-weight: bold;
    max-width: calc(100% - 8.75em);
    margin-top: 0.825em;
    line-height: 1.1em
}

#header .icon {
    padding: 0px;
    margin: 0.75em 0.75em 0.5em 0.75em;
    width: auto;
    height: 1.5625em;
}

#header .left-icon {
    float: left;
}

#header .right-icon {
    float: right;
}

#header .icon:hover {
    -webkit-filter: brightness(.35);
    filter: brightness(.35);
}

#header .header-logo {
    float: left;
    margin-top: 0.25em;
    height: 2.75em;
    width: auto;
    max-width: calc(100vw - 3.4375em);
}

/* ----------------------------------------------- */
/* SHOW / HIDE */
/* ----------------------------------------------- */

#header, #navbar,
#wrapper-image,
#wrapper-audio,
#wrapper-list,
#wrapper-map,
.zoom-buttons {
    visibility: visible;
}
.show {
    visibility: visible !important;
}

#body.page-none #header h1 {
    display: none !important;
}

/* ----------------------------------------------- */
/* CONTENT */
/* ----------------------------------------------- */

#wrapper-image,
#wrapper-audio,
#wrapper-list,
#wrapper-map {
    background: #474742;
}
#wrapper-audio {
    /* background: #ffffff; */
}
.about-image {
    background: #ffffff !important;
}
#scroller-audio {
    background-color: #ffffff;
}

.back-button {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px !important;
    opacity: 0.80;
}

.back-button:hover {
    opacity: 1.0 !important;
}

.back-button img {
    display: inline-block;
    vertical-align: middle;
    width: 2.1875em;
    height: auto;
}
.back-button span {
    color: #1a171b;
    font-size: 0.8em;
    padding-right: 4px;
}

.text-link:hover {
    opacity: 1.0 !important;
}

.detail-button {
    position: absolute;
    display: block;
    height: auto;
    transform-origin: 0 0;
    padding: 2px 4px 12px 4px;
    border: solid 4px transparent;
    text-align: center;
}

.detail-button,
.detail-button:hover,
.detail-button *,
.detail-button:hover * {
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* -webkit-filter: blur(0); */
}

.detail-button img {
    width: 40px;
    height: auto;
    opacity: 0.70;
}

.detail-button span {
    display: block;
    max-width: 15em;
    color: #dd5f26;
    background-color: rgba(255, 255, 255, 0.70);
    padding: 3px 6px;
    margin: -3px 0px -3px 0px;
    border: solid 2px rgba(221, 95, 38, 0.75);
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.25 !important;
    font-family: ubuntu, helvetica, arial;
}

.detail-button:hover span {
    /*-webkit-transition: all 0.90s ease;
    -moz-transition: all 0.90s ease;
    -o-transition: all 0.90s ease;
    transition: all 0.90s ease;*/
    background-color: rgba(255, 255, 255, 0.90);
    border: solid 2px rgba(221, 95, 38, 9.0) !important;
}

.detail-button:hover img {
    /*-webkit-transition: all 0.90s ease;
    -moz-transition: all 0.90s ease;
    -o-transition: all 0.90s ease;
    transition: all 0.90s ease;*/
    opacity: 0.90;
}

.highlight-audio {
    padding: 25px 20px 10px 20px;
}

.highlight-text {
    padding: 20px;
}

.breadcrumbs-wrapper {
    display: inline-block;
    width: 100%;
}

.highlight-breadcrumbs {
    display: flex;
    padding: 20px 20px 0px 20px;
    float: left;
}

.highlight-breadcrumbs h3 {
    color: #9a9a9a;
    font-size: 0.75em;
    font-weight: normal;
    display: inline-block;
    white-space: normal;
    margin: auto 0;
}
.font-controls {
    float: right;
}
.font-buttons {
    display: block;
    padding: 20px 20px 0 0;
}
.page-location .font-buttons {
    padding-top: 0;
    padding-left: 20px;
    margin-bottom: -4px;
    margin-top: 18px;
}
.page-location .font-buttons #font-plus  {
    margin-left: auto;
}

.share-buttons {
    position: absolute;
    z-index: 90;
    display: flex;
}
.desktop .share-buttons {
	bottom: 20px;
	left: 20px;
}
.mobile .share-buttons {
	bottom: 20px;
	left: 20px;
}
.fb-share-button,
.twitter-share-button,
[data-pin-log="button_pinit"],
[data-pin-log="button_pinit_bookmarklet"],
.pinterest-share-button,
.linkedin-share-button {
    display: block;
    width: 30px !important;
    height: 30px !important;
    opacity: 0.7;
    cursor: pointer;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #1877f2;
    border-radius: 15px !important;
    margin-right: 10px;
}
.fb-share-button > span {
    opacity: 0.01;
}
[data-pin-log="button_pinit"],
.pinterest-share-button {
    overflow: hidden !important;
    text-indent: 100px !important;
}
.fb-share-button {
    background: none !important;
    background-color: #1877f2 !important;
    background-image: url('../images/social/facebook.svg') !important;
}
[data-pin-log=button_pinit],
.pinterest-share-button {
    background: none !important;
    background-color: #e60023 !important;
    background-image: url('../images/social/pinterest.svg') !important;
}
.twitter-share-button {
    background: none !important;
    background-color: #1d9bf0 !important;
    background-image: url('../images/social/twitter.svg') !important;
}
.linkedin-share-button {
    background: none !important;
    background-color: #3992bd !important;
    background-image: url('../images/social/linkedin.svg') !important;
    background-position: center !important;
    background-size: cover !important;
}

.zoom-buttons {
    position: absolute;
    z-index: 99;
}
#zoom-in,
#zoom-out {
    opacity: 0.70;
}
#zoom-in:hover,
#zoom-out:hover {
    opacity: 1.0 !important;
}

.zoom-buttons #zoom-in,
.zoom-buttons #zoom-out {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-image: url(../images/zoom-in.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}
.zoom-buttons #zoom-out {
    background-image: url(../images/zoom-out.png);
}

#font-plus,
#font-minus {
    opacity: 0.70;
}
#font-plus:hover,
#font-minus:hover {
    -webkit-filter: brightness(.35);
    filter: brightness(.35);
}

.font-buttons #font-minus,
.font-buttons #font-plus {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-image: url(../images/font-minus.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}
.font-buttons #font-plus {
    background-image: url(../images/font-plus.png);
}

.highlight-text p a,
.text-link:not(.back-button) {
    color: #dd5f26 !important;
    background: none;
    padding: 0px 2px 0px 2px;
    margin: -3px 0px -3px 0px;
    border: solid 1px #dd5f26 !important;
    border-radius: 4px;
    font-size: 1.0em;
    font-family: ubuntu, helvetica, arial;
    opacity: 0.8;
}
.highlight-text a {
    cursor: pointer;
}

button.text-link:not(:-moz-handler-blocked) {
    padding: 0px 0px 0px 0px;
}
button.text-link:not(:-moz-handler-blocked) {
    top: 0px !important;
}

button.text-link{
    position: relative;
    top: 0px;
}

img {
    -ms-interpolation-mode: bicubic !important;
}

/* ----------------------------------------------- */
/* MAIN LAYOUT */
/* ----------------------------------------------- */


#inner {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 3.125em) !important;
}

@supports (height: 100dvh) {
    #inner {
        height: calc(100dvh - 3.75em) !important;
    }
}

#content {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden !important;
}

.mobile.page-highlight #content,
.mobile.page-location #content {
    flex-direction: column;
}

#wrapper-image,
#wrapper-audio,
#wrapper-list,
#wrapper-map {
    position: relative;     /* needed for scrollbar position */
}

/* MOBILE / PORTRAIT */
.mobile #wrapper-image {
    height: 55%;
    width: 100%;
}
.mobile .highlight-image {
    margin-bottom: -10px;
}
.mobile .map-image {
    margin-bottom: -10px;
}
.mobile #wrapper-audio {
    height: 45%;
    width: 100%;
}
.mobile #scroller-audio {
    min-height: calc(100% + 5px);
}
.mobile #wrapper-list {
    width: 100%;
}
.mobile #wrapper-map {
    width: 100%;
}
.mobile .zoom-buttons {
    bottom: 14px;
    right: 20px;
}
.mobile .map-controls .zoom-buttons {
    top: auto !important;
    bottom: 14px;
    right: 20px;
}

/* DESKTOP / LANDSCAPE */
.desktop #wrapper-image {
    width: 66%;
}
.desktop .highlight-image {
    margin-bottom: -10px;
}
.desktop .map-image {
    margin-bottom: -10px;
}
.desktop #wrapper-audio {
    width: 34%;
}

/* small wide screen: 50/50 layout */
@media (min-width: 100px) and (max-width: 1120px) {
    .desktop #wrapper-image {
        width: calc(100% - 380px);
    }
    .desktop #wrapper-audio {
        width: 380px;
    }
}

.desktop #scroller-audio {
    min-height: 100%;
    background-color: #ffffff;
}
.desktop #wrapper-list {
    width: 100%;;
}
.desktop #wrapper-map {
    width: 100%;
}
.desktop .zoom-buttons {
    bottom: 14px;
    right: 20px;
}
.desktop .map-controls .zoom-buttons {
    bottom: 14px;
    right: 20px;
}

/* ----------------------------------------------- */
/* COOKIE BANNER */
/* ----------------------------------------------- */

#cookie_banner {
    position: absolute;
    bottom: 3.125em;
    left: 0;
    width: 100vw;
    z-index: 999;
    display: none;
}
#cookie_banner {
    background-color: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
    box-shadow: 0 -1px 10px 0 rgba(1^2, 171, 171, 0.3);
}
#cookie_banner p {
    float: left;
    margin: 10px;
}
#cookie_banner #accept_cookies {
    float: right;
    margin: 10px;
    color: rgb(255, 255, 255);
    background-color: rgb(97, 162, 41);
    padding: 6px 12px;
    cursor: pointer;
}
@media (min-width: 1200px) {
   #cookie_banner p {
        float: left;
        margin-top: 16px;
    } 
}

/* ----------------------------------------------- */
/* IFRAME */
/* ----------------------------------------------- */

#iframe_external_page {
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0px;
    width: 100%;
    height: calc(100% - 100px);
}

/* ----------------------------------------------- */
/* CURSOR */
/* ----------------------------------------------- */

audio, video, input[type="submit"], .icon, .zoom-buttons img, .font-buttons img, .text-link,
.detail-button, .highlight-share, #navbar li, .mejs-mediaelement * div,
.mejs-horizontal-volume-total, .mejs-horizontal-volume-slider {
    cursor: pointer;
}

.guide-item > div,
.highlight-item > div {
    cursor: pointer;
}

#wrapper-image {
    cursor:all-scroll;
}

#wrapper-audio {
    cursor: n-resize;
}

#wrapper-list,
#wrapper-list a {
    cursor: n-resize;
}

#wrapper-map {
    cursor: all-scroll;
}

/* ----------------------------------------------- */
/* SCROLLER */
/* ----------------------------------------------- */

.iScrollIndicator {
    border: 1px solid #848689 !important;
    background: #848689 none repeat scroll 0% 0% !important;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    -ms-touch-action: none;
}

#scroller-audio {
    width: 100% !important;
    height: auto;
}

#scroller-image,
#scroller-audio,
#scroller-list,
#scroller-map {
    width: auto;
    /*-webkit-tap-highlight-color: #dd5f26;*/
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}
#scroller-list {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100%;
    min-height: 100%;
    align-content: baseline !important;
}

/* ----------------------------------------------- */
/* BUTTONS */
/* ----------------------------------------------- */

input[type=button] {
	padding: 5px;
	margin-right: 10px;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 
				0px 1px 0px 0px rgba(250, 250, 250, 0.5) ;
}
input[type=submit] {
	border: 1px solid rgba(0, 0, 0, 0.3);
	background: #dd5f26;
	background: -moz-linear-gradient(top,  #dd5f26 0%, #cd4718 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd5f26), color-stop(100%,#cd4718));
	background: -webkit-linear-gradient(top,  #dd5f26 0%,#cd4718 100%);
	background: -o-linear-gradient(top,  #dd5f26 0%,#cd4718 100%);
	background: -ms-linear-gradient(top,  #dd5f26 0%,#cd4718 100%);
	background: linear-gradient(to bottom,  #dd5f26 0%,#cd4718 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd5f26', endColorstr='#cd4718',GradientType=0 );
	color: #fff;
	padding: 5px 15px;
	margin-right: 0;
	margin-top: 0px;
	border-radius: 3px;
	/*text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);*/
	cursor: pointer;
}

/* ----------------------------------------------- */
/* HIGHLIGHTS LIST */
/* ----------------------------------------------- */

.guide-item,
.highlight-item {
    padding: 0px;
    margin: 0px 0px 0px 0px;
    position: relative;
    float: left;
    border-bottom: solid 0px #dd5f26;
    /*border-bottom: solid 1px #ffffff;*/
    min-height: 42px;
}

a.guide-item,
a.highlight-item {
    width: 100%;
}

.guide-item > img,
.highlight-item > img {
    max-width: 100%;
    padding: 0px;
    margin: 0px 0px -4px 0px;
    position: relative;
}

/* 1 column */
@media (min-width: 100px) and (max-width: 640px) {
    .desktop .guide-item > img,
    .desktop .highlight-item > img {
        height: auto;
        width: 100.0%;
    }
    .guide-item,
    .highlight-item {
        /* max-height: calc(100.0vw * 0.625); */
    }
    div.guide-item,
    div.highlight-item {
        width: 100%;
    }
}
/* 2 columns */
@media (min-width: 640px) and (max-width: 1400px) {
    .desktop .guide-item > img,
    .desktop .highlight-item > img {
        height: auto;
        width: 100.0%;
    }
    .desktop .guide-item,
    .desktop .highlight-item {
        border-left: solid 0px #ffffff;
    }
    #scroller-list {
        margin-left: 0px;
    }
    .guide-item,
    .highlight-item {
        /* max-height: calc(50.0vw * 0.625); */
    }
    div.guide-item,
    div.highlight-item {
        width: 50%;
    }
}

/* 3 columns */
@media (min-width: 1400px) and (max-width: 5000px) {
    .desktop .guide-item > img,
    .desktop .highlight-item > img {
        height: auto;
        width: 100.0%;
    }
    .desktop .guide-item,
    .desktop .highlight-item {
        border-left: solid 0px #ffffff;
    }
    #scroller-list {
        margin-left: 0px;
    }
    .guide-item,
    .highlight-item {
        /* max-height: calc(33.333vw * 0.625); */
    }
    div.guide-item,
    div.highlight-item {
        width: 33.333%;
    }
}

.mobile .guide-item > img,
.mobile .highlight-item > img {
    height: auto;
    width: 100%;
    width: 100vw;
}

.guide-item,
.highlight-item {
    overflow: hidden;
}

/*
.guide-item:hover img,
.highlight-item:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
*/

.guide-item > div.title-bar,
.highlight-item > div.title-bar {
    height: 42px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    padding: 5px 10px;
    position: absolute;
    bottom: 0px;
}

.guide-item > div.title-bar *,
.highlight-item > div.title-bar * {
    display: inline-block;
    vertical-align: middle;
}

.guide-item > div.title-bar h1,
.highlight-item > div.title-bar h1 {
    font-size: 20px;
    line-height: 30px;
    font-weight: normal;
}

.guide-item > div.title-bar img,
.highlight-item > div.title-bar img {
    float: right;
    padding: 3px 5px 3px 0px;
    height: 30px;
    width: auto;
}

.guide-item .read-more,
.highlight-item .read-more {
    float: right;
    margin-top: 5px;
    margin-right: 8px;
    display: none !important;
}

a.highlight-item:focus {
   outline: none; 
}
a.highlight-item:focus img {
    outline: auto;
    outline-offset: -2px;
}

/* ----------------------------------------------- */
/* GUIDE CATEGORIES */
/* ----------------------------------------------- */

.category-item {
    height: 2.625em;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    background: #eceded;
}
.desktop .category-item,
.mobile .category-item {
    text-align: center;
}

.category-item > h1 {
    font-size: 1.25em;
    line-height: 1.875em;
    margin-top: 0.125em !important;
    font-weight: normal;
    color: #848689;
}

/* ----------------------------------------------- */
/* PREVIEW */
/* ----------------------------------------------- */

.highlight-item.preview:nth-child(n+2) > img {
    opacity: 0.5 !important;
}

.highlight-item.preview:nth-child(n+2):after {
    content: url('../images/ic_premium.png');
}

.highlight-item.preview:nth-child(n+2):after {
    position: absolute;
    bottom: 55px;
    left: 15px;
}

/* ----------------------------------------------- */
/* PAID */
/* ----------------------------------------------- */

.guide-item.paid:after {
    content: url('../images/bt_euro_paid.png');
}

.guide-item.paid:after {
    position: absolute;
    bottom: 55px;
    left: 15px;
}

/* ----------------------------------------------- */
/* FULLSCREEN */
/* ----------------------------------------------- */

#full-screen.active {
    /*-webkit-filter: brightness(.35);
    filter: brightness(.35);*/
}

/* ----------------------------------------------- */
/* MENU */
/* ----------------------------------------------- */

#language-menu {
    cursor: pointer;
}
#language-menu img {
    width: 100%;
}
#language-menu::before {
	content: '';
	background-image: url(../drawable/nav-next.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1.375em 1.375em;
	height: 1.5625em;
	width: 1.5625em;
	display: inline-block;
	position: relative;
	left: 2.25em;
	top: -0.375em;
	transform: rotate(90deg);
    transform-origin: 50% 50%;
}
#language-menu.active:before {
    top: -0.375em;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

#context-menu.active,
#language-menu.active {
    -webkit-filter: brightness(.35);
    filter: brightness(.35);
}

#menu,
#language-options {
    position: absolute;
    visibility: hidden;
    z-index: 5;
    background-color: #1f1f1f;
    opacity: 0.85;
    color: #ffffff;
    font-size: 1.0em;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
#menu .menu-text {
    font-size: 1.0em;
}
#menu {
    top: 3.125em;
    bottom: 3.125em;
    width: 31.25em;
    padding: 25px;
    height: calc(100vh - 6.25em);
}
#menu * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#language-options {
    right: 0px;
    top: 3.125em;
    width: 4.8125em;
    padding: 10px 10px 6px 10px;
}
#language-options li {
    list-style-type: none;
    margin-bottom: 0px;
    cursor: pointer;
}
#language-options img {
    width: auto;
    height: 1.5625em;
}

.desktop #menu {
    max-width: 40%;
}

.mobile #menu {
    max-width: 80%;
}

#menu.active,
#language-options.active {
    visibility: visible;
    z-index: 99999;
}

#menu .menu-header {
    text-align: center;
    margin-bottom: 10px;
}
#menu .menu-link {
    display: block;
}

#menu .menu-logo {
    width: auto;
    height: 60px;
    margin-bottom: 5px;
}

#menu .store-icon {
    height: 35px;
    width: auto;
    float: left;
    margin: 15px 10px 5px 0px;
    border: solid 1px rgba(255,255,255,0.0);
    border-radius: 5px;
}

#menu .store-icon:hover {
    border: solid 1px rgba(255,255,255,0.85);
}

#menu .menu-buttons {
    bottom: 35px;
}

#menu .menu-footer {
    font-size: 0.625em;
    text-align: center;
}

#menu .menu-buttons,
#menu .menu-buttons {
	margin-left: auto;
	text-align: center;
	margin-right: auto;
    display: flex;
}
#menu .menu-footer p {
    margin: 0px;
    margin-bottom: -10px;
    margin-top: 10px;
}

.menu-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.menu-text-wrapper {
    flex: 2;
    height: auto;
    overflow: hidden;
}

.menu-about {
  display: none;
}

.menu-text p > a {
    color: #dd5f26;
}

/* ----------------------------------------------- */
/* WHITE MENU STYLE */
/* ----------------------------------------------- */

#menu {
	background-color: #ffffff !important;
	opacity: 1 !important;
}

#menu p {
    color: #545454 !important;
}

/* ----------------------------------------------- */
/* LOADER */
/* ----------------------------------------------- */

#page .loader {
    width: 64px;
    height: 64px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -32px;
    margin-top: -32px;
    opacity: 1.0;
}

#page .loader .loader-inner div {
    background-color: #dd5f26;
}
#page .loader .line-spin-fade-loader {
    position: relative;
    top: 24px !important;
    left: 28px !important;
}

/* ----------------------------------------------- */
/* SPLASH SCREEN */
/* ----------------------------------------------- */

#splash_screen {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 1000;
}

/* ----------------------------------------------- */
/* ADD TO HOME */
/* ----------------------------------------------- */

.ath-phone,
.ath-tablet,
.ath-android {
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    top: 50px !important;
}
.ath-container {
    -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.2) !important;
    -moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.2) !important;
    box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.2) !important;
    background: #ffffff !important;
}
.ath-phone:after,
.ath-tablet:after {
    bottom: auto !important;
    top: -0.9em !important;
    left: 68% !important;
    background: #ffffff !important;
    -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.0) !important;
    -moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.0) !important;
    box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.0) !important;
}
.ath-phone:after, .ath-tablet:after {
    
}
.ath-android .ath-action-icon {
    margin-top: 0.4em;
}


/* ----------------------------------------------- */
/* VR BUTTONS */
/* ----------------------------------------------- */

#controls-app-mode, #controls-app-mode-webgl {
    top: auto !important;
    bottom: 10px !important;
}
#mode-control-1 {
    position: absolute;
    left: 45px;
    bottom: 0px;
}
.mobile #mode-control-1 {
    left: 100vw;
    margin-left: -75px;
}
#mode-control-2,
#mode-control-3 {
    position: absolute;
    left: 0px;
    bottom: 0px;
}
#mode-control-1,
#mode-control-2,
#mode-control-3 {
    width: 35px;
    height: 35px;
    overflow: hidden;
}
#mode-control-1 h1::before {
    content: url('../drawable/ic_fullscreen_vr.png') !important;
}
#mode-control-2 h1:before,
#mode-control-3 h1:before {
    content: url('../drawable/ic_close_active.png') !important;
}

/* ----------------------------------------------- */
/* BOOKING */
/* ----------------------------------------------- */

.guide-item > .highlight-booking,
.highlight-item > .highlight-booking {
    display: block;
    position: absolute;
    background-color: transparent !important;
    bottom: auto;
    top: 20px;
    right: 20px;
    height: 90px;
    cursor: pointer !important;
}
.guide-item > .highlight-booking img,
.highlight-item > .highlight-booking img {
    height: 60px !important;
    width: auto !important;
}

div.highlight-booking {
    width: 95px !important;
}

section.highlight-booking {
    position: absolute;
    right: 20px;
}
section.highlight-booking img {
    margin-top: 0px;
    height: 75px !important;
}
.highlight-booking span {
    color: #eb6d06 !important;
    font-weight: bold !important;
    font-size: 18px;
    text-align: center;
    position: absolute;
    top: 65px;
    right: 50%;
    margin-right: -50px;
    width: 100px;
}
section.highlight-booking span {
    color: #eb6d06 !important;
    font-weight: bold !important;
    font-size: 18px;
    text-align: center;
    position: absolute;
    top: 75px !important;
    right: 50%;
    margin-right: -50px;
    width: 100px;

}
.highlight-booking .booking-link {
    cursor: pointer;
}
.highlight-booking .booking-link {
    outline: none;
}
.highlight-booking .booking-link:focus img {
    outline: auto;
    outline-offset: 2px;
}
.highlight-text.extra-margin {
    margin-top: 30px !important;
}
.highlight-text.extra-margin h1 {
    max-width: calc(100% - 100px);
}

.booking-icon:after {
    content: "";
    /* background-image: url('../images/icon-link.png'); */
    background-image: url('../images/icon-hand.png');
    display: none !important;
}
.booking-icon.booking-mailto:after {
    content: "";
    background-image: url('../images/icon-mail.png');
}
.booking-icon.booking-tel:after {
    content: "";
    background-image: url('../images/icon-phone.png');
}
.booking-icon:after,
.booking-icon.booking-mailto:after,
.booking-icon.booking-tel:after {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
}
.highlight-booking .booking-icon:after {
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
}
.highlight-booking .booking-icon:after {
    top: 5px;
    right: 8px;
}
.highlight-booking .booking-icon.booking-mailto:after {
    top: 4px;
    right: 9px;
}
.highlight-booking .booking-icon.booking-tel:after {
    top: 5px;
    right: 7px;
}
#scroller-list .booking-icon:after {
    top: 5px;
    right: 8px;
}
#scroller-list .booking-icon.booking-mailto:after {
    top: 4px;
    right: 9px;
}
#scroller-list .booking-icon.booking-tel:after {
    top: 5px;
    right: 7px;
}

/* =========================================*/
/* FRONTEND EDITING - BUTTONS               */
/* ======================================== */

/* general */

#exposeMask {
    z-index: 9 !important;
    opacity: 0.5 !important;
    display: none !important;
    visibility: hidden !important;
}
.editable-highlight {
    display: none !important;
}
.editable-form {
    top: calc(50vh - 100px) !important;
    left: calc(50vw - 0px) !important;
}

#scroller-list .editable-form {
    position: absolute !important;
    top: auto !important;
    left: calc(50% - 50px) !important;
}
#scroller-list .editable-guide-image .editable-form,
#scroller-list .editable-highlights-image .editable-form {
    margin-top: 15px;
    width: 450px !important;
}
#scroller-list .editable-guide-title .editable-form,
#scroller-list .editable-highlights-title .editable-form {
    margin-top: -235px;
}

.editable-form label {
    display: block;
    margin-bottom: 0px;
}
.editable-hidden {
    display: none !important;
}

/* highlight view */

.highlight-text .editable-form {
    top: 400px !important;
    left: -15vw !important;
}
.highlight-image-edit-button {
    position: absolute;
    top: 100px;
    left: 150px;
}
.highlight-audio .editable-link {
    top: 85px !important;
}
.highlight-audio .editable-form {
    top: 400px !important;
    left: -15vw !important;
}
.highlight-booking .editable-booking-wrapper {
    position: absolute;
    left: -10px;
}
.highlight-booking .editable-form {
    top: 400px !important;
    left: -15vw !important;
}

.highlight-audio-edit-button {
    position: absolute;
    top: 100px;
    left: 150px;
}
.highlight-audio-edit-button .editable-form .js-object-attached {
    height: 260px;
}
.highlight-audio-edit-button .editable-form .video_player {
    top: 190px !important;
}

/* my guides */

.editable-guide-wrapper {
    position: relative !important;
    float: left !important;
    width: 0px !important;
}
.editable-guide-wrapper .editable-link {
    cursor: pointer !important;
}
.editable-guide-wrapper .editable-guide-image {
    position: relative !important;
    top: calc(50% - 33px);
    left: calc(-15vw + 20px) !important;
}
.editable-guide-wrapper .editable-guide-title {
    position: relative !important;
    top: calc(100% - 33px);
    left: calc(-15vw + 20px) !important;
}

/* highlights list */

.editable-highlights-wrapper {
    position: relative !important;
    float: left !important;
    width: 0px !important;
}
.editable-highlights-wrapper .editable-link {
    cursor: pointer !important;
}
.editable-highlights-wrapper .editable-highlights-image {
    position: relative !important;
    top: calc(50% - 33px);
    left: calc(-15vw + 20px) !important;
}
.editable-highlights-wrapper .editable-highlights-title {
    position: relative !important;
    top: calc(100% - 33px);
    left: calc(-15vw + 20px) !important;
}

/* =========================================*/
/* FRONTEND EDITING - WIDGETS               */
/* ======================================== */

.hidden {
    display: none !important;
}
.editable-form {
    text-align: left !important;
    border-radius: 0px !important;
}
.editable-form p {
    margin: 0px !important;
    clear: both;
}
.editable-form label {
    text-transform: none !important;
}
#editable-toolbar,
.editable-form,
.editable-link {
    background-color: #fff5bf !important;
    border: none !important;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
}

.highlight-image-edit-button label[for*="detail_buttons"],
.highlight-image-edit-button textarea[name*="detail_buttons"] {
    display: none !important;
}

/* images */

.editable-image .editable-form {
    cursor: default !important;
}
.editable-image .editable-form .js-file-selector {
    cursor: pointer !important;
}
.editable-image .editable-form .js-file-selector > * {
    display: inline-block;
    vertical-align: middle;
}
.editable-image .editable-form .js-related-lookup {
    color: #000000 !important;
    cursor: pointer !important;
    display: block !important;
    margin-bottom: -1em;
}
.editable-image .editable-form .js-file-selector .thumbnail_img {
    margin-bottom: 18px !important;
}
.editable-image .editable-form .js-related-lookup .choose-file,
.editable-image .editable-form .js-related-lookup .fa.fa-picture-o,
.editable-image .editable-form .js-filer-dropzone .fa {
    margin-right: 6px;
}
.editable-image .editable-form .js-file-selector .filerClearer {
    height: 16px !important;
    width: 16px !important;
    margin-left: 6px !important;
    margin-top: 2px !important;
}
.editable-image .editable-form .filer-dropzone .dz-message {
    margin: 19px 0 20px 0 !important;
}

/* details */

.highlight-image-edit-button form {
    top: 50vh !important;
    height: 100vh !important;
}
.highlight-image-edit-button form .detail_editor {
    margin-top: 20px;
    height: calc(100% - 190px) !important;
    overflow-y: hidden;
    overflow-x: hidden;
}
.highlight-image-edit-button form .detail_editor_image,
.highlight-image-edit-button form .detail_editor_image > img {
    height: 100% !important;
    margin-bottom: -2px;
}

.editable-form-max-height {
    max-height: 210px !important;
}

/* audio */

.editable-audio .editable-form {
    cursor: default !important;
}
.editable-audio .editable-form .js-file-selector {
    cursor: pointer !important;
}
.editable-audio .editable-form .js-file-selector > * {
    display: inline-block;
    vertical-align: middle;
}
.editable-audio .editable-form .js-related-lookup {
    color: #000000 !important;
    cursor: pointer !important;
    display: block !important;
    margin-bottom: 50px;
}
.editable-audio .editable-form .js-file-selector .thumbnail_img {
    margin-bottom: 18px !important;
}
.editable-audio .editable-form .js-related-lookup .choose-file,
.editable-audio .editable-form .js-related-lookup .fa.fa-picture-o,
.editable-audio .editable-form .js-filer-dropzone .fa {
    margin-right: 6px;
}
.editable-audio .editable-form .js-file-selector .filerClearer {
    height: 16px !important;
    width: 16px !important;
    margin-left: 6px !important;
    margin-top: 2px !important;
}

.editable-audio .editable-form .media_player {
    top: 180px !important;
    width: calc(100% - 40px) !important;
    left: 40px !important;
    margin-left: 0px !important;
}
.editable-audio .editable-form .controls {
    width: 100% !important;
}
.editable-audio .editable-form .filer-dropzone .dz-message {
    margin: 20px 0 !important;
}

.editable-video .editable-form .media_player {
    top: 200px !important;
}

.mejs-controls .mejs-button * {
    cursor: pointer !important;
}

/* video */

.highlight-video {
    background-color: #000000 !important;
}

.highlight-video video {
    width: 100%;
    height: 100%;
}
.highlight-video,
.highlight-video video {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.video-controls {
    position: absolute;
    z-index: 99;
    top: 10px;
    right: 10px;
}
.video-controls  img {
    width: 35px;
    height: auto;
}

#wrapper-image.highlight-video.video-fullscreen {
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
}

.highlight-video.video-fullscreen #video-fullscreen-on {
    display: none !important;
}
.highlight-video:not(.video-fullscreen) #video-fullscreen-off {
    display: none !important;
}

/* vector map */

.editable-vector p {
    display: none !important;
}
.editable-vector #editor_vector {
    height: calc(100% - 40px) !important;
    overflow-y: auto;
}
#map_preview {
    height: 100% !important;
    width: calc(80vw - 320px) !important;
}
.editable-vector #editor_vector.has-warning {
    height: calc(100% - 110px) !important;
}
#map_editor {
    height: 100% !important;
    width: 320px !important;
}

/* =========================================*/
/* MARKER STYLES                            */
/* ======================================== */

.marker-style-icon img {
    opacity: 1.0 !important;
}
.marker-scale-small span {
    font-size: 1.125em;
}
.marker-scale-medium span {
    font-size: 1.25em;
}
.marker-scale-large span {
    font-size: 1.375em;
}
.marker-scale-xlarge span {
    font-size: 1.5em;
}
.marker-scale-small img {
    height: 50px;
    width: auto;
}
.marker-scale-medium img {
    height: 60px;
    width: auto;
}
.marker-scale-large img {
    height: 70px;
    width: auto;
}
.marker-scale-xlarge img {
    height: 80px;
    width: auto;
}

.marker-style-marker5 span {
    color: #76c178 !important;
    border: solid 2px rgba(118, 193, 120, 0.75) !important;
}
.marker-style-marker5:hover span {
    border: solid 2px rgba(118, 193, 120, 1.0) !important;
}
.marker-style-marker6 span {
    color: #545454 !important;
    border: none !important;
}
.marker-style-marker6:hover span {
    border: none !important;
}

/* =========================================*/
/* MARKER SCALE MOBILE                      */
/* ======================================== */

.mobile .detail-button {
    transform: scale(1.5) !important;
    transform-origin: center;
}

/* ======================================== */
/* MCE CUSTOM STYLES                        */
/* ======================================== */

.mce-ico {
    font-family: tinymce,Arial !important;
}

/* ---------------------------------------- */
/* LISTS                                    */
/* ---------------------------------------- */

ul.cs_list,
ol.cs_list {
  padding: 0px !important;
}
.cs_list li {
    list-style: none !important;
    display: inline-flex;
    width: 100%;
}
.cs_list li {
    padding: 8px 8px 8px 8px !important;
    width: calc(100% - 0px);
    color: #545454 !important;
    position: relative;
    display: inline-flex;
    line-height: 1.0 !important;
}
.cs_list li a {
    color: #545454 !important;
    position: relative;
    display: inline-flex;
    width: calc(100% - 0px);
    border: none !important;
    padding: 8px 0 8px 0 !important;
    margin: -8px 0 -8px 0 !important;
}
.cs_list_arrow_right li::after {
    content: '';
    height: 14px;
    width: 10px;
    background-image: url('../../webapp/drawable/bt_arrow_right-black.png');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    margin: auto 0px auto auto;
    display: inline;
}
.cs_list_odd_even_gray li:nth-child(2n+1) {
    background-color: #eceded;
}
.cs_list_odd_even_yellow li:nth-child(2n+1) {
    background-color: #fff5dc;
}

/* ---------------------------------------- */
/* TABLES                                   */
/* ---------------------------------------- */

.cs_table {
    border-collapse: collapse !important;
    line-height: 1.0 !important;
}
.cs_table_full_width {
    width: 100% !important;
}
.cs_table_odd_even_gray tr:nth-child(2n+1) {
    background-color: #eceded;
}
.cs_table_odd_even_yellow tr:nth-child(2n+1) {
    background-color: #fff5dc;
}
.cs_table td {
  padding-left: 8px;
}

/* ----------------------------------------------- */
/* MAP NAVIGATION */
/* ----------------------------------------------- */

body.page-map #content {
    position: relative;
}

#wrapper-map-navigation {
    position: absolute;
    z-index: 10000;
    top: 15px;
    right: 15px;
    width: auto;
    height: 2.25em;
    background: #eceded;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    pointer-events: none;
}
#map_navigation_select {
    display: flex;
}
#wrapper-map-navigation * {
    font-size: 1.0em !important;
    line-height: 1.35 !important;
    pointer-events: auto;
}

#wrapper-map-navigation .icon {
    width: 1.875em;
    height: 2.25em;
    display: block;
    padding: 0.5em;
}
#wrapper-map-navigation #map_navigation_prev {
    padding-right: 2px;
}
#wrapper-map-navigation #map_navigation_next {
    padding-left: 2px;
}

#wrapper-map-navigation:not(.touch-open) .icon:hover {
    filter: brightness(.35);
}

#wrapper-map-navigation #map_navigation_current {
    color: #848689 !important;
    width: 100%;
}
#wrapper-map-navigation #map_navigation_current span {
    display: none;
    height: 100%;
    line-height: 2.125em !important;
}

#wrapper-map-navigation #map_navigation_dropdown {
    display: none;
    position: relative;
    padding: 7px 10px;
    top: -2px;
    background-color: #1f1f1f;
    opacity: 0.85;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    max-width: calc(100vw - 30px);
}
#wrapper-map-navigation #map_navigation_dropdown a {
    width: 100%;
    display: block;
    padding-top: 3px;
    padding-bottom: 3px;
}

#wrapper-map-navigation:hover #map_navigation_current span {
    display: block !important;
}
#wrapper-map-navigation:hover #map_navigation_dropdown {
    display: block !important;
}
#wrapper-map-navigation.touch-open #map_navigation_current span {
    display: block !important;
}
#wrapper-map-navigation.touch-open #map_navigation_dropdown {
    display: block !important;
}
#wrapper-map-navigation.touch-open #map_navigation_current span {
    font-size: 1.125em !important;
}
#wrapper-map-navigation.touch-open #map_navigation_dropdown a {
    font-size: 1.125em !important;
    line-height: 1.25em !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ----------------------------------------------- */
/* DONATE BUTTON */
/* ----------------------------------------------- */

.donate-button {
    text-align: center;
    width: 200px;
    margin-top: 15px;
    margin-left: calc(50% - 108px);
}
.donate-button img {
    cursor: pointer;
    width: 200px;
}

/* ----------------------------------------------- */
/* INPUTS */
/* ----------------------------------------------- */

input[type="text"], input[type="number"], input[type="url"] {
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
	-o-user-select: text !important;
	user-select: text !important;
}

select {
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 11px) calc(0.75em + 1px), calc(100% - 6px) calc(0.75em + 1px), calc(100% - 1.75em) 0.25em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
    padding-right: 27px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select, input[type="text"], input[type="number"], input[type="url"] {
    border: 1px solid #bbb;
    padding-left: 6px !important;
    padding-right: 6px;
    
}
select:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="url"]:focus {
    outline: auto !important;
}
.tagit input[type="text"]:focus {
    outline: none !important;
}
.tagit.has-focus {
    outline: auto;
}

/* ----------------------------------------------- */
/* MAIL FORM */
/* ----------------------------------------------- */

.form_popup {
    display: none;
    position: fixed !important;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0 !important;
}

.form_popup.popup_show {
    display: flex !important;
}

.form_popup_inner {
    height: auto !important;
    width: 420px !important;
    margin: auto;
    background-color: #ffffff !important;
    padding: 18px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.form_title {
    font-weight: 600;
    font-size: 14px !important;
    line-height: 14px !important;
    margin: 0 0 10px 0;
    text-align: center;
}

.modal-form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.modal-form-row input,
.modal-form-row select {
  background-color: transparent;
  height: 28px;
  width: 100% !important;
}
.button-wrapper {
  margin-top: 20px;
  display: flex;
}
.btn {
  padding: 4px 8px;
}
.btn.btn-primary {
  background-color: #dd5f26;
  border: solid 1px #dd5f26;
  margin-left: auto;
}
.btn.btn-secondary {
  color: #dd5f26;
  border: solid 1px #dd5f26;
}
input.form-error {
  border-color: #bf3030 !important;
}

/* ----------------------------------------------- */
/* SEARCH */
/* ----------------------------------------------- */

#search {
    width: 100%;
    border-bottom: solid 1px #848689;
    padding-bottom: 12px;
    height: fit-content !important;
    background: #eceded;
}
#search .col-search {
    display: flex;
    flex-direction: column;
    float: left;
    margin: 10px 20px 0px 20px;
}
#search input.has-error,
#search ul.has-error {
    border: solid 1px #C40000;
}

#search #errors {
    display: block;
    width: 100vw;
    float: left;
    padding: 4px 20px 0 20px;
}
@media (max-width: 969px) {
    #search #errors {
        padding-top: 18px;
    }
}

@media (max-width: 969px) {
    #search {
        display: flex;
        flex-direction: column;
    }
    #search #id_search {
        width: 100% !important;
    }
    input.search-submit {
        margin-top: 10px !important;
    }
    #search .col-search.buttons .secondary {
        margin-left: auto !important;
    }
}

#search #id_search {
    width: 11.25em;
}
#search .ui-autocomplete-input {
    width: 5.625em;
}
ul.tagit {
    min-width: 11.25em;
}

#search label,
#search .tagit-label,
#search .text-icon {
    font-size: 1.0em;
    color: #1a171b !important;
}

#id_search {
    border-color: #C6C6C6;
    border-radius: 0;
    padding: 5px 8px 6px 8px !important;
    color: #1a171b !important; 
}

.tagit {
    font-size: 1.0em !important;
    line-height: 1.0em !important;
}
#search ul.tagit.ui-widget {
    padding-bottom: 0 !important;
    margin: 0;
}
.tagit li.tagit-choice {
    font-size: 1.0em !important;
    cursor: pointer;
    background-color: transparent !important;
    border-color: #9a9a9a !important;
    margin-top: 0.125em;
    margin-bottom: 2px;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.tagit li.tagit-new {
    font-size: 1.0em !important;
    margin-top: 0px;
    margin-bottom: 0px;
	padding: 4px 4px 4px 0 !important;
}
.tagit-autocomplete * {
    font-size: 1.0em !important;
    color: #1a171b !important;
}
.tagit-close,
.tagit-choice {
    cursor: pointer !important;
}
ul.tagit li.tagit-choice .tagit-close {
	right: .25em !important;
}
ul.tagit li.tagit-choice-editable {
	padding: 2px 1em 2px .5em !important;
}
.tagit-autocomplete.ui-autocomplete {
    z-index: 100 !important;
}
.tagit-autocomplete.ui-autocomplete a {
    cursor: pointer !important;
}

input.search-submit {
    background: #dd5f26;
    border: none;
    font-size: 1.0em;
    color: #fff;
    border-radius: 0;
    margin-top: 1.3125em;
    padding: 7px 18px 6px 18px;
}

#search .col-search.buttons {
    display: flex;
    flex-direction: row;
}
#search .col-search.buttons input {
    text-transform: lowercase !important;
}

#search .col-search.buttons .secondary {
    margin-left: 20px;
    border: solid 1px #dd5f26;
    color: #dd5f26;
    background-color: transparent;
    padding: 6px 17px 5px 17px;
}

#search #id_search {
    background-image: url(../drawable/search.png);
    background-repeat: no-repeat;
    background-position: 4px 4px;
    background-size: 1.375em 1.375em;
    padding-left: 1.875em !important;
}
#search .tag-select-category {
    position: relative;
    padding-left: 1.875em !important;
    background-color: #fff;
}
#search .tag-select-category::before {
    content: '';
    background-image: url(../drawable/filter.png);
    background-repeat: no-repeat;
    background-position: 4px 2px;
    background-size: 1.375em 1.375em;
    width: 1.375em;
    height: 1.375em;
    display: block;
    position: absolute;
    left: 2px;
}

#search input[type=text] {
    font-size: 1.0em;
}

#highlight_item_template {
    display: none;
}

#search .error {
    display: none;
    color: #C40000;
}

/* ----------------------------------------------- */
/* SEARCH LIST LAYOUT */
/* ----------------------------------------------- */

/* mobile device with browser zoom > 130% */
@media (max-width: 420px) {
    .highlight-list.cols-2 a.highlight-item .col-left {
        display: none !important;
    }
    .highlight-list.cols-2 a.highlight-item .col-right {
        display: flex;
        flex-direction: column;
        margin-left: 0px;
        width: 100% !important;
    }
    .highlight-list.cols-2 a.highlight-item .mobile-img {
        display: block !important;
        margin-bottom: 10px;
    }
    .highlight-list.cols-2 a.highlight-item .title-bar {
        min-height: 0 !important;
    }
    .highlight-list.cols-2 a.highlight-item .title-bar h1 {
        margin-left: 0;
        margin-bottom: 4px;
    }
    #search .search-submit {
        padding: 5px 8px 4px 8px;
    }
}

/* global zoom large */

body.zoom-large .highlight-list a.highlight-item .col-left {
    display: none !important;
}
body.zoom-large .highlight-list a.highlight-item .col-right {
    display: flex;
    flex-direction: column;
    margin-left: 0px;
    width: 100% !important;
}
body.zoom-large .highlight-list a.highlight-item .mobile-img {
    display: block !important;
    margin-bottom: 10px;
}
body.zoom-large .highlight-list a.highlight-item .title-bar {
    min-height: 0 !important;
}
body.zoom-large .highlight-list a.highlight-item .title-bar h1 {
    margin-left: 0;
    margin-bottom: 4px;
}