/**
 * SFD 2015
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage map
 * @author     degener
 * @since      04.12.2015
 * @version    $Id: map.css 1168 2016-08-02 09:48:48Z schoening $
 **/
/*  =========================================================
    0. global setting
  1. navigation
  2. map fullframe - global settings
  3. map fullframe - top navi
  4. map fullframe - navi categories
  5. map fullframe - sub-navi categories
  6. map fullframe - zoom
  7. map fullframe - infoboard
  8. map fullframe - infoboard / list
  9. map fullframe - infoboard / detail
========================================================== */
/*  =========================================================
    0. global setting
========================================================== */
@media screen {
  .mapWrapper {
    width: 100%;
    float: left;
    position: relative;
  }
  .mapWrapper.routing {
    height: 500px;
    margin-bottom: 24px;
  }
  .mapContainer {
    width: 100%;
    height: 560px;
    float: left;
    position: relative;
    background-color: #e5e3df;
    margin: 0;
  }
  .mapContainer.list {
    height: 80vh;
  }
  .mapContainer.gallery {
    height: 500px;
  }
  .leaflet-pane {
    z-index: 19 !important;
  }
}
/*  =========================================================
    1. navigation
========================================================== */
@media screen {
  #mapZoom {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
  }
  #mapZoom li {
    float: left;
  }
  #mapZoom li a {
    width: 58px;
    height: 58px;
    float: left;
    position: relative;
    margin-right: 1px;
    background-color: rgba(120, 120, 120, 0.8);
  }
  #mapZoom li a::before {
    font-size: 32px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  #mapZoom li a.plus::before {
    content: '\e913';
  }
  #mapZoom li a.minus::before {
    content: '\e912';
  }
  #mapZoom li a:hover,
  #mapZoom li a:active,
  #mapZoom li a:focus {
    background-color: #787878;
  }
  .mapWrapper a.fullsize {
    height: 58px;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 1px;
    z-index: 9999;
    font-family: 'Neutra Demi';
    font-size: 1rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    background-color: rgba(120, 120, 120, 0.8);
    padding: 22px 60px 0 10px;
  }
  .mapWrapper a.fullsize::after {
    content: '\e911';
    font-size: 32px;
    color: #fff;
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .mapWrapper a.fullsize:hover,
  .mapWrapper a.fullsize:active,
  .mapWrapper a.fullsize:focus {
    background-color: #787878;
  }
}
/*  =========================================================
    2. map fullframe - global settings
========================================================== */
@media screen {
  #mainMap {
    width: 100vw;
    height: 100vh;
    float: left;
    overflow: hidden;
  }
  #mainMap > #mapFullframe {
    width: 100vw;
    height: 100vh;
    float: left;
    z-index: 1;
    overflow: hidden;
  }
  #mainMap a.logo {
    width: 160px;
    height: 120px;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 12px;
    z-index: 30;
    background-color: #fff;
    background-image: url("/portal/assets/images/environment/logo_xl.svg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
  }
  #mapNavigation {
    width: 100%;
    display: inline-block;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
  }
}
@media only screen and (max-width: 1240px) {
  #mainMap a.logo {
    width: 120px;
    height: 90px;
    right: 10px;
  }
}
@media only screen and (max-width: 900px) {
  #mainMap a.logo {
    width: 83px;
    height: 62px;
    background-image: url("/portal/assets/images/environment/logo_sm.svg");
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  #mapNavigation {
    width: 100%;
    height: 62px;
    top: 0;
    left: 0;
    background-color: #fff;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
  }
}
/*  =========================================================
    3. map fullframe - top navi
========================================================== */
@media screen {
  #mapNavigation__header {
    width: 100%;
    float: left;
    z-index: 20;
  }
  #mapNavigation__header li {
    float: left;
    position: relative;
    z-index: 20;
    margin-left: 12px;
  }
  #mapNavigation__header .mapNavigation__items {
    float: left;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  #mapNavigation__header .mapNavigation__items .selected {
    height: 50px;
    float: left;
    position: relative;
    font-size: 1.375rem;
    color: #787878;
    background-color: #fff;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    padding: 14px 40px 14px 45px;
    cursor: pointer;
  }
  #mapNavigation__header .mapNavigation__items .selected::after {
    font-family: 'iconset';
    content: '\e901';
    display: inline-block;
    position: absolute;
    top: 49%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 0.75rem;
  }
  #mapNavigation__header .mapNavigation__items .selected.active {
    color: #787878;
    background-color: #fff;
  }
  #mapNavigation__header .mapNavigation__items .selected.active::after {
    content: '\e900';
  }
  #mapNavigation__header .mapNavigation__items:hover .selected {
    color: #787878;
    background-color: #fff;
  }
  #mapNavigation__header .mapNavigation__items .mapNavigation__itemContent {
    height: 0;
    position: absolute;
    top: 47px;
    left: 0;
    display: inline-block;
    background-color: #fff;
    padding: 0 12px;
    overflow: hidden;
    opacity: 0;
    -webkit-box-shadow: 0 4px 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 2px 2px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  #mapNavigation__header .mapNavigation__items .mapNavigation__itemContent li {
    width: 100%;
    margin: 5px 0;
  }
  #mapNavigation__header .mapNavigation__items .mapNavigation__itemContent li a,
  #mapNavigation__header .mapNavigation__items .mapNavigation__itemContent li a:visited {
    width: 100%;
    float: left;
    position: relative;
    font-size: 1.063rem;
    color: #787878;
    background-color: #fff;
    padding: 10px 10px 10px 35px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
  }
  #mapNavigation__header .mapNavigation__items .mapNavigation__itemContent li a:hover,
  #mapNavigation__header .mapNavigation__items .mapNavigation__itemContent li a:active,
  #mapNavigation__header .mapNavigation__items .mapNavigation__itemContent li a:focus,
  #mapNavigation__header .mapNavigation__items .mapNavigation__itemContent li a.active {
    color: #fff;
    background-color: #787878;
  }
  #mapNavigation__header .mapNavigation__items:hover .mapNavigation__itemContent {
    height: auto;
    opacity: 1;
    padding: 12px;
  }
  #mapNavigation__header .mapCloser a {
    height: 50px;
    float: left;
    position: relative;
    font-size: 1.375rem;
    color: #fff;
    background-color: #787878;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    padding: 14px 24px 14px 50px;
  }
  #mapNavigation__header .mapCloser a span {
    color: #fff;
  }
  #mapNavigation__header .mapCloser a::before {
    content: '\e800';
    font-size: 1.875rem;
    position: absolute;
    top: 50%;
    left: 10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  #mapNavigation__header .mapCloser a:hover,
  #mapNavigation__header .mapCloser a:active,
  #mapNavigation__header .mapCloser a:focus,
  #mapNavigation__header .mapCloser a:hover span,
  #mapNavigation__header .mapCloser a:active span,
  #mapNavigation__header .mapCloser a:focus span {
    color: #787878;
    background-color: #fff;
  }
  #mapNavigation__header .icon::before {
    font-size: 1.875rem;
    position: absolute;
    top: 50%;
    left: 10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  #mapNavigation__header .mapContent span.summer::before {
    content: '\e60a';
    color: #787878;
  }
  #mapNavigation__header .mapContent a.summer::before {
    content: '\e60a';
    font-size: 1.063rem;
  }
  #mapNavigation__header .mapContent span.winter::before {
    content: '\e976';
    color: #787878;
  }
  #mapNavigation__header .mapContent a.winter::before {
    content: '\e976';
    font-size: 1.5rem;
  }
  #mapNavigation__header .mapType span.map::before {
    content: '\e9ac';
    color: #787878;
  }
  #mapNavigation__header .mapType a.map::before {
    content: '\e9ac';
    font-size: 1.063rem;
  }
  #mapNavigation__header .mapType span.satelite::before {
    content: '\e9ad';
    color: #787878;
  }
  #mapNavigation__header .mapType a.satelite::before {
    content: '\e9ad';
    font-size: 1.5rem;
  }
  #mapNavigation__header .mapLanguages span {
    padding-left: 14px !important;
  }
  #mapNavigation__header .mapLanguages a {
    padding-left: 10px !important;
  }
}
@media only screen and (max-width: 1170px) {
  #mapNavigation__header .mapNavigation__items .selected::after {
    right: 10px;
  }
  #mapNavigation__header li {
    margin-left: 2px;
  }
  #mapNavigation__header .mapCloser a > span,
  #mapNavigation__header .mapNavigation__items .selected > span {
    width: 1px;
    height: 1px;
    position: absolute;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
  #mapNavigation__header .mapNavigation__items .selected {
    padding-right: 30px;
  }
  #mapNavigation__header .mapCloser a {
    padding-right: 0;
  }
  #mapNavigation__categories {
    left: 0;
  }
}
@media only screen and (max-width: 900px) {
  #mapNavigation__header .mapCloser {
    position: absolute;
    top: 6px;
    left: 140px;
  }
  #mapNavigation__header .mapCloser a {
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #787878;
    background-color: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  #mapNavigation__header .mapCloser a:hover,
  #mapNavigation__header .mapCloser a:active,
  #mapNavigation__header .mapCloser a:focus {
    color: #fff;
    background-color: #787878;
  }
  #mapNavigation__header .mapSearch {
    z-index: 20;
  }
  #mapNavigation__header .mapContent,
  #mapNavigation__header .mapType,
  #mapNavigation__header .mapLanguages {
    position: absolute;
    top: 72px;
    z-index: 10;
  }
  #mapNavigation__header .mapContent {
    left: 10px;
  }
  #mapNavigation__header .mapType {
    left: 95px;
  }
  #mapNavigation__header .mapLanguages {
    left: 180px;
  }
}
@media only screen and (max-width: 400px) {
  #mapNavigation__header .mapContent {
    left: 5px;
  }
  #mapNavigation__header .mapType {
    left: 85px;
  }
  #mapNavigation__header .mapLanguages {
    left: 165px;
  }
}
/*  =========================================================
    4. map fullframe - navi categories
========================================================== */
@media screen {
  .mapNavigationWrapper h2 {
    display: none;
  }
  #mapNavigation__categories {
    position: absolute;
    top: 60px;
    left: 126px;
    z-index: 10;
    background-color: #fff;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    padding: 1px;
  }
  #mapNavigation__categories li {
    float: left;
    position: relative;
    margin: 1px;
  }
  #mapNavigation__categories li a {
    width: 48px;
    height: 48px;
    float: left;
    position: relative;
    z-index: 10;
    /* bg-colors */
    /* icons */
    /* summer */
    /* kultur */
    /* service */
  }
  #mapNavigation__categories li a.summer {
    background-color: #e7f7bc;
  }
  #mapNavigation__categories li a.winter {
    background-color: #d4feff;
  }
  #mapNavigation__categories li a.kultur {
    background-color: #e0d0c1;
  }
  #mapNavigation__categories li a.service {
    background-color: #e6e6e6;
  }
  #mapNavigation__categories li a.selected {
    background-color: #fff !important;
  }
  #mapNavigation__categories li a.icon::before {
    font-size: 1.875rem;
    color: #5e5e5e;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  #mapNavigation__categories li a.selected::before {
    color: #f01414;
  }
  #mapNavigation__categories li a.hiking::before {
    content: '\e918';
  }
  #mapNavigation__categories li a.running::before {
    content: '\e94b';
  }
  #mapNavigation__categories li a.cycling::before {
    content: '\e953';
  }
  #mapNavigation__categories li a.summerSport::before {
    content: '\e60a';
  }
  #mapNavigation__categories li a.golf::before {
    content: '\e947';
  }
  #mapNavigation__categories li a.sightseeing::before {
    content: '\e9be';
  }
  #mapNavigation__categories li a.gastro::before {
    content: '\e9bd';
  }
  #mapNavigation__categories li a.info::before {
    content: '\e992';
  }
  #mapNavigation__categories li a.infrastructure::before {
    content: '\e99e';
  }
  #mapNavigation__categories li a.lodges::before {
    content: '\e937';
  }
  #mapNavigation__categories li a.accommodations::before {
    content: '\e605';
  }
  #mapNavigation__categories li a.event::before {
    content: '\e910';
  }
  #mapNavigation__categories li a.program::before {
    content: '\e9ae';
  }
  #mapNavigation__categories li a.close::before {
    content: '\e800';
  }
}
@media only screen and (max-width: 1170px) {
  #mapNavigation__categories {
    top: 72px;
    left: 0;
  }
}
@media only screen and (max-width: 900px) {
  .mapNavigationWrapper h2 {
    width: 50px;
    height: 50px;
    display: inline-block;
    float: left;
    position: relative;
    background-color: #fff;
    top: -50px;
    left: 12px;
    z-index: 20;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .mapNavigationWrapper h2:hover {
    color: #fff;
    background-color: #787878;
  }
  .mapNavigationWrapper h2 span {
    width: 1px;
    height: 1px;
    position: absolute;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
  .mapNavigationWrapper h2.open {
    color: #fff;
    background-color: #f01414;
  }
  .mapNavigationWrapper h2.open::before {
    content: '\e800';
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  .mapNavigationWrapper h2.closed::before {
    content: '\e604';
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  #mapNavigation__categories {
    width: 100vw;
    top: 54px;
    z-index: 20;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 6px 0 10px 0;
    display: none;
  }
  #mapNavigation__categories > li {
    width: 100%;
    margin: 0;
    border: 1px solid #fff;
  }
  #mapNavigation__categories > li:last-child {
    display: none;
  }
  #mapNavigation__categories li a {
    width: 100%;
    text-align: left;
    padding-left: 50px;
    padding-top: 17px;
  }
  #mapNavigation__categories li a .hide {
    width: auto;
    height: auto;
    float: left;
    font-family: "Neutra Demi";
    font-size: 1.25rem;
    text-transform: uppercase;
    clip: inherit;
  }
  #mapNavigation__categories li a.icon::before {
    top: 10px;
    left: 10px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  #mapNavigation__categories li a.closed::after {
    content: '\e901';
    font-size: 1.5rem;
    color: #787878;
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  #mapNavigation__categories li a.open::after {
    content: '\e900';
    font-size: 1.5rem;
    color: #787878;
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
/*  =========================================================
    5. map fullframe - sub-navi categories
========================================================== */
@media screen {
  #mapNavigation__categories li ul {
    height: 0;
    position: absolute;
    top: 49px;
    left: -2px;
    background-color: #fff;
    padding: 0 20px;
    -webkit-box-shadow: 0 3px 2px 2px rgba(0, 0, 0, 0);
    box-shadow: 0 3px 2px 2px rgba(0, 0, 0, 0);
    overflow: hidden;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  #mapNavigation__categories li ul li {
    width: 270px;
    float: left;
    clear: both;
    position: relative;
    padding: 5px 0;
    margin: 10px 0!important;
  }
  #mapNavigation__categories li ul li h3 {
    font-family: 'Neutra Demi';
    font-style: normal;
    font-size: 1.25rem;
    text-transform: uppercase;
    text-align: left;
  }
  #mapNavigation__categories li ul li label {
    width: 100%;
    float: left;
    font-size: 1.25rem;
    padding-left: 40px;
  }
  #mapNavigation__categories li ul li input[type="checkbox"]:checked + label::before,
  #mapNavigation__categories li ul li input[type="checkbox"]:not(:checked) + label::before {
    left: 0;
  }
  #mapNavigation__categories li ul li input[type="checkbox"]:checked + label,
  #mapNavigation__categories li ul li input[type="checkbox"]:checked + label::after {
    color: #f01414;
  }
  #mapNavigation__categories li:hover ul {
    height: auto;
    padding: 10px 20px;
    -webkit-box-shadow: 0 3px 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 2px 2px rgba(0, 0, 0, 0.1);
  }
  /* icons */
  #mapNavigation__categories li ul li label {
    /* hiking */
    /* running */
    /* cycling */
  }
  #mapNavigation__categories li ul li label.icon::after {
    font-size: 1.875rem;
    color: #5e5e5e;
    position: absolute;
    top: 5px;
    right: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  #mapNavigation__categories li ul li label.hiking::after {
    content: '\e918';
  }
  #mapNavigation__categories li ul li label.adler::after {
    content: '\e93a';
  }
  #mapNavigation__categories li ul li label.natureWatch::after {
    content: '\e950';
  }
  #mapNavigation__categories li ul li label.pilger::after {
    content: '\e918';
  }
  #mapNavigation__categories li ul li label.running::after {
    content: '\e94b';
  }
  #mapNavigation__categories li ul li label.nordicWalking::after {
    content: '\e951';
  }
  #mapNavigation__categories li ul li label.mtbTour::after {
    content: '\e94e';
  }
  #mapNavigation__categories li ul li label.bikeTour::after {
    content: '\e953';
  }
  #mapNavigation__categories li ul li label.bikeRental::after {
    content: '\e953';
  }
  #mapNavigation__categories li ul li label.ebikeTour::after {
    content: '\e941';
  }
  #mapNavigation__categories li ul li label.ebikeAkku::after {
    content: '\e942';
  }
  #mapNavigation__categories li ul li label.ebikeRental::after {
    content: '\e941';
  }
}
@media only screen and (max-width: 900px) {
  #mapNavigation__categories li ul {
    width: 100%;
    float: left;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    display: none;
  }
  #mapNavigation__categories li ul li {
    width: 100%;
    padding: 15px 10px!important;
    margin: 0 !important;
    border-bottom: 1px solid #ebebeb;
  }
  #mapNavigation__categories li ul li:last-of-type {
    border-bottom: none;
  }
  #mapNavigation__categories li ul li:first-child {
    display: none;
  }
  #mapNavigation__categories li ul li input[type="checkbox"]:checked + label::before,
  #mapNavigation__categories li ul li input[type="checkbox"]:not(:checked) + label::before {
    top: 8px;
    left: 10px;
  }
  #mapNavigation__categories li ul li label {
    padding-left: 80px;
  }
  #mapNavigation__categories li ul li label.icon::after {
    right: inherit;
    left: 50px;
  }
}
/*  =========================================================
    6. map fullframe - zoom
========================================================== */
@media screen {
  #mapNavigation__tools {
    position: absolute;
    top: 72px;
    left: 24px;
    z-index: 10;
    background-color: #fff;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    padding: 1px;
  }
  #mapNavigation__tools li {
    float: left;
    position: relative;
    margin: 1px;
  }
  #mapNavigation__tools li a {
    width: 48px;
    height: 48px;
    float: left;
    position: relative;
    z-index: 10;
    background-color: #ff;
    /* icons */
  }
  #mapNavigation__tools li a.icon::before {
    font-size: 1.875rem;
    color: #5e5e5e;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  #mapNavigation__tools li a.plus::before {
    content: '\e912';
  }
  #mapNavigation__tools li a.minus::before {
    content: '\e913';
  }
}
@media only screen and (max-width: 1170px) {
  #mapNavigation__tools {
    top: inherit;
    bottom: 12px;
    left: 12px;
  }
}
@media only screen and (max-width: 800px) {
  #mapNavigation__tools {
    display: none;
  }
}
/*  =========================================================
    7. map fullframe - infoboard
========================================================== */
@media screen {
  /* board opener */
  .infoboardOpener {
    width: 70px;
    height: 50px;
    display: inline-block;
    position: absolute;
    top: 165px;
    right: 0;
    z-index: 10;
    color: #fff;
    background-color: #f01414;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
  }
  .infoboardOpener.icon::before {
    content: '\e600';
    font-size: 1.25rem;
    position: absolute;
    top: 50%;
    left: 5px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .infoboardOpener.icon::after {
    content: '\e937';
    font-size: 1.875rem;
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .infoboardOpener:hover,
  .infoboardOpener:active,
  .infoboardOpener:focus {
    color: #fff;
    background-color: #f01414;
  }
  /* infoboard */
  #mapInfoBoard {
    width: 390px;
    height: -webkit-calc(-65vh);
    height: calc(-65vh);
    position: absolute;
    top: 165px;
    right: -390px;
    z-index: 15;
    display: inline-block;
    background-color: #fff;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    /* board closer */
  }
  #mapInfoBoard .infoboardCloser {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #f01414;
  }
  #mapInfoBoard .infoboardCloser.icon::before {
    content: '\e800';
    font-size: 2rem;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  /* reiter */
  #mapInfoBoard #mapTabs {
    width: 100%;
    height: 100%;
    float: left;
  }
  #mapTabs > .tabs {
    width: 100%;
    float: left;
    padding: 0;
    margin-bottom: 20px;
  }
  #mapTabs > .tabs li {
    float: left;
    margin-right: 2px;
  }
  #mapTabs > .tabs li a {
    float: left;
    font-family: 'Neutra Demi';
    font-size: 1rem;
    text-transform: uppercase;
    padding: 16px 20px;
  }
  #mapTabs > .tabs li.ui-state-default {
    background-color: #fff;
  }
  #mapTabs > .tabs li.ui-state-default a {
    color: #787878;
  }
  #mapTabs > .tabs li.ui-state-active,
  #mapTabs > .tabs li.ui-state-hover {
    background-color: #787878;
  }
  #mapTabs > .tabs li.ui-state-active a,
  #mapTabs > .tabs li.ui-state-hover a {
    color: #fff;
  }
}
@media only screen and (max-width: 900px) {
  .infoboardOpener {
    top: 72px;
  }
  #mapInfoBoard {
    height: -webkit-calc(28vh);
    height: calc(28vh);
    top: 72px;
    z-index: 25;
  }
}
@media only screen and (max-width: 400px) {
  #mapInfoBoard {
    width: 100%;
  }
}
/*  =========================================================
    8. map fullframe - infoboard / list
========================================================== */
@media screen {
  /* liste */
  #mapInfoBoard #mapList {
    width: 100%;
    height: -webkit-calc(20%);
    height: calc(20%);
    float: left;
    padding: 0 20px;
    overflow-Y: auto;
  }
  #mapInfoBoard #mapList .category {
    width: 100%;
    float: left;
    margin: 10px 0;
  }
  #mapInfoBoard #mapList .category h3 {
    width: 100%;
    float: left;
    position: relative;
    font-family: 'Neutra Demi';
    font-style: normal;
    font-size: 1.25rem;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
  }
  #mapInfoBoard #mapList .category h3 span {
    padding: 4px;
    display: inline-block;
    font-size: 1.5rem;
    margin-right: 10px;
  }
  #mapInfoBoard #mapList .category h3 span.summer {
    background-color: #e7f7bc;
  }
  #mapInfoBoard #mapList .category h3 span.winter {
    background-color: #d4feff;
  }
  #mapInfoBoard #mapList .category h3 span.kultur {
    background-color: #e0d0c1;
  }
  #mapInfoBoard #mapList .category h3 span.service {
    background-color: #e6e6e6;
  }
  #mapInfoBoard #mapList .category h3.closed::before {
    content: '\e901';
    font-size: 1.5rem;
    color: #787878;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  #mapInfoBoard #mapList .category h3.open::before {
    content: '\e900';
    font-size: 1.5rem;
    color: #787878;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  #mapList ul {
    width: 100%;
    float: left;
    margin-top: 10px;
    display: none;
  }
  #mapList ul li {
    width: 100%;
    float: left;
    text-align: left;
    border-top: 1px solid #e6e6e6;
    padding: 10px 0;
  }
  #mapList ul li:last-child {
    border-bottom: 1px solid #e6e6e6;
  }
  #mapList ul li a {
    float: left;
    position: relative;
    font-size: 1.2rem;
    color: #787878;
    padding-left: 40px;
  }
  #mapList ul li a::before {
    font-size: 1.5rem;
    position: absolute;
    top: 0;
    left: 0;
  }
  #mapList ul li a::after {
    content: '\e601';
    font-size: 0.75rem;
    margin-left: 5px;
    text-decoration: none !important;
  }
  #mapList ul li a:hover,
  #mapList ul li a:active,
  #mapList ul li a:focus {
    color: #f01414;
  }
  #mapList ul li a.wanderweg::before {
    content: '\e95a';
  }
  #mapList ul li a.adler::before {
    content: '\e93a';
  }
  #mapList ul li a.natureWatch::before {
    content: '\e950';
  }
  #mapList ul li a.pilger::before {
    content: '\e918';
  }
  #mapList ul li a.golf::before {
    content: '\e947';
  }
}
/*  =========================================================
    9. map fullframe - infoboard / detail
========================================================== */
@media screen {
  .leutaschMarker {
    position: relative;
    margin-top: -45px;
    margin-left: -70px;
  }
  .scharnitzMarker {
    position: relative;
    margin-left: 55px;
    margin-top: -35px;
  }
  .seefeldMarker {
    position: relative;
    margin-left: 60px;
    margin-top: -45px;
  }
  .moesernMarker {
    position: relative;
    margin-top: 50px;
    margin-left: -100px;
  }
  .reithMarker {
    position: relative;
    margin-left: 65px;
    margin-top: 50px;
  }
}
/*  =========================================================
    10. static survey map
========================================================== */
@media screen {
  .surveyMap .mapContainer {
    position: relative;
    background-image: url('../../../images/environment/survey-map_bg_480.jpg');
    background-position: center;
  }
  .surveyMap .mapContainer .marker {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .surveyMap .mapContainer .marker.moesern {
    transform: translate(-170px, 35px);
  }
  .surveyMap .mapContainer .marker.leutasch {
    transform: translate(-156px, -185px);
  }
  .surveyMap .mapContainer .marker.seefeld {
    transform: translate(3px, -102px);
  }
  .surveyMap .mapContainer .marker.reith {
    transform: translate(29px, 60px);
  }
  .surveyMap .mapContainer .marker.scharnitz {
    transform: translate(110px, -222px);
  }
}
@media only screen and (min-width: 481px) {
  .surveyMap .mapContainer {
    background-image: url('../../../images/environment/survey-map_bg_768.jpg');
  }
}
@media only screen and (min-width: 769px) {
  .surveyMap .mapContainer {
    background-image: url('../../../images/environment/survey-map_bg_1024.jpg');
  }
}
@media only screen and (min-width: 1025px) {
  .surveyMap .mapContainer {
    background-image: url('../../../images/environment/survey-map_bg_1440.jpg');
  }
}
@media only screen and (min-width: 1441px) {
  .surveyMap .mapContainer {
    background-image: url('../../../images/environment/survey-map_bg_1980.jpg');
  }
}
@media only screen and (min-width: 1981px) {
  .surveyMap .mapContainer {
    background-image: url('../../../images/environment/survey-map_bg_3000.jpg');
  }
}
@media only screen and (min-width: 3001px) {
  .surveyMap .mapContainer {
    background-image: url('../../../images/environment/survey-map_bg_4030.jpg');
  }
}