/* #EBE9E5 #E2DED7; #873c1b; */ @font-face { font-family: '_bradley'; src: url('BRADHITC.TTF') format('truetype'); } @font-face { font-family: '_franklin'; src: url('FRABK.TTF') format('truetype'); font-weight: 400; } @font-face { font-family: '_franklin'; src: url('framd.ttf') format('truetype'); font-weight: 500; } @font-face { font-family: '_franklin'; src: url('FRADM.TTF') format('truetype'); font-weight: 700; } @font-face { font-family: '_helvetica'; src: url('HelveticaBQ-Light.otf') format('opentype'); } @font-face { font-family: '_minion'; src: url('MinionPro-Regular.otf') format('opentype'); } @font-face { font-family: 'Avenir'; src: url('Avenir-Heavy-05.woff') format('woff'); font-weight: 700; font-style: normal; ascent-override: 105%; } @font-face { font-family: 'Avenir'; src: url('Avenir-Medium-09.woff') format('woff'); font-weight: 500; font-style: normal; ascent-override: 105%; } @font-face { font-family: 'Avenir'; src: url('Avenir-Light-07.woff') format('woff'); font-weight: 300; font-style: normal; ascent-override: 105%; } @font-face { font-family: 'addington_cfmedium'; src: url('addingtoncf-medium.woff2') format('woff2'), url('addingtoncf-medium.woff') format('woff'); font-weight: normal; font-style: normal; } .baum2021 { filter: hue-rotate(-40deg) !important; } .baum2022 { filter: hue-rotate(-20deg) !important; } .baum2023 { filter: hue-rotate(0deg) !important; } .baum2024 { filter: hue-rotate(20deg) !important; } .baum2025 { filter: hue-rotate(40deg) !important; } #mapid .leaflet-layer:first-child { filter: hue-rotate(-20deg) sepia(10%) saturate(60%) brightness(100%) contrast(97%) grayscale(0%); } .pattern { --mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%; -webkit-mask: var(--mask); mask: var(--mask); } .leaflet-popup { padding: 10px 10px 0px 50px; /*border: 50px solid rgba(0,0,0,0);*/ } .leaflet-popup-content-wrapper { text-align: left; border-radius: 0px; padding: 0px; min-width: 200px; } .leaflet-popup-content { padding: 0px !important; margin: 0px !important; } .leaflet-container a.leaflet-popup-close-button { padding: 15px 27px 0px 0px; /*color: rgba(255,255,255,0.7);*/ color: #aaa !important; } ion-icon { pointer-events: none; } * { font-family: _franklin, Verdana, Geneva, Tahoma, sans-serif; box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; } a { color: rgb(135, 60, 27) !important; } table { border-collapse: collapse; } td { padding: 0px; } .button-icon, .noselect, .leaflet-control-zoom-in, .leaflet-control-zoom-out { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } img, button { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } body { min-height: 100vh; min-height: fill-available; min-height: -webkit-fill-available; } html { height: fill-available; height: -webkit-fill-available; } html, body { margin: 0; } a { cursor: pointer; } .ui-dialog a { text-decoration: none; font-weight: 700; color: #873c1b; } .ui-dialog img { width: 100%; } a:hover { opacity: 0.75; } a:active { opacity: 0.5; } .plain:hover, .plain:active { opacity: 1; } body { visibility: hidden; color: #873c1b; } #pics::-webkit-scrollbar { width: 0; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ } .ui-dialog { background-color: #E2DED7; } button { border: none; font-weight: 300; font-size: 14px; color: #fff; background-color: #873c1b; text-transform: uppercase; cursor: pointer; } button:hover { filter: brightness(120%); } button:active { filter: brightness(140%); } .map-button:hover, .fav-button:hover { filter: brightness(98%) } .map-button:active, .fav-button:active { filter: brightness(96%) } #main { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; } #header { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 74px; background-color: #E2DED7; /*border-bottom: 1px solid #ddd;*/ } .shadow { box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5); } #nav-menu { position: absolute; top: 0; right: 0; height: 100%; font-size: 0px; } .button-nav { height: 100%; width: 74px; padding: 0px; background: none; color: #873c1b; font-weight: 700; position: relative; } .button-nav ion-icon { font-size: 28px; } .button-nav div { font-size: 9px; line-height: 9px; } .button-nav:hover { filter: none; opacity: 0.75; } .button-nav:active { filter: none; opacity: 0.5; } .indicator { position: absolute; top: 15px; right: 21px; width: 10px; height: 10px; background-color: #873c1b; border-radius: 50px; border: 2px solid #E2DED7; } #button-filter { vertical-align: top; margin: 10px; height: 54px; width: 54px; background: #873c1b; padding: 0px; font-size: 24px; } #list, #map { position: absolute; left: 0; /*right: -1px; border-right: 1px solid #ddd;*/ right: 0; top: 0; bottom :0; background-color: #fff; overflow: hidden; } #list { transform: translateX(-100%); z-index: 1; background-color: #eee; } #map { z-index: 0; } #map-nav { position: absolute; left: 0; bottom: 0; width: 100%; height: 176px; transform: translateY(0px); z-index: 2; } #map-nav-inner { position: absolute; left: 40px; right: 40px; top: 0; bottom: 0; } .map-nav-change { position: absolute; top: 0; bottom: 0; width: 40px; z-index: 99999; cursor: pointer; text-align: center; } .map-nav-change ion-icon { display: none; color: #873c1b; font-size: 40px; margin: auto; } .map-nav-change:hover { opacity: 0.75; } .map-nav-change:active { opacity: 0.5; } .highlight-pin { z-index: 9999 !important; } #viewer { z-index: 99999; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.7); display: none; } .viewer-button { position: absolute; top: 0; height: 100%; width: 80px; color: rgba(255,255,255,0.75); font-size: 60px; padding: 10px; line-height: 60px; background: none; z-index: 0; } .viewer-button:hover { opacity: 0.75; } .viewer-button:active { opacity: 0.5; } #viewer-button-close { position: absolute; top: 0; right: 0; height: 80px; width: 80px; color: rgba(255,255,255,0.75); font-size: 60px; padding: 10px; line-height: 60px; background: none; z-index: 1; } #viewer-button-close:hover { opacity: 0.75; } #viewer-button-close:active { opacity: 0.5; } #detail { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; transform: translateX(100%); z-index: 3; } .toggle-view-button { padding: 0px 0px; background-color: #873c1b; height: 35px; padding: 0px 10px; line-height: 35px; font-size: 0px; } .toggle-view-button ion-icon { font-size: 18px; vertical-align: middle; } .toggle-view-button div { margin-left: 6px; font-size: 12px; display: inline-block; vertical-align: top; } .button-icon { padding: 0px 0px; background-color: #873c1b; height: 35px; padding: 0px 10px; line-height: 35px; font-size: 0px; color: #fff; z-index: 10; } .button-icon ion-icon { font-size: 18px; vertical-align: middle; } .button-icon div { margin-left: 6px; font-size: 12px; display: inline-block; vertical-align: top; } .leaflet-bottom { bottom: auto !important; top: 0; } .leaflet-control-zoom { border: none !important; box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5) !important; background: none !important; } .leaflet-control-zoom a { background-color: #873c1b !important; color: #fff !important; border-radius: 0px !important; font-size: 20px !important; line-height: 28px !important; font-family: addington_cfmedium !important; font-weight: 700 !important; } .leaflet-control-zoom a:hover { filter: brightness(120%); opacity: 1; } .leaflet-control-zoom a:active { filter: brightness(140%); opacity: 1; } .leaflet-control-zoom-in { height: 31px !important; border-bottom: 1px solid rgba(255,255,255,0.2) !important; } /*#mapid .leaflet-layer:first-child { filter: grayscale(100%) brightness(100%); } #mapid .leaflet-layer:nth-child(2) { filter: contrast(0%) brightness(200%); } #mapid .leaflet-layer:last-child { mix-blend-mode: multiply; } #detail-mapid .leaflet-layer:first-child, #mapid .leaflet-layer:last-child { filter: hue-rotate(-20deg) sepia(10%) saturate(60%) brightness(100%) contrast(97%) grayscale(0%); }*/ #mapid .leaflet-container { background-color: #fff; } /*@keyframes pin { 0% { transform: scale(100%); } 50% { transform: scale(150%); } 100% { transform: scale(100%); } }*/ .fav-button { border: none; font-weight: 700; font-size: 20px; width: 32px; height: 32px; color: #873c1b; padding: 6px; text-align: center; background-color: #EBE9E5; } .map-button { border: none; font-weight: 700; font-size: 20px; width: 32px; height: 32px; color: #873c1b; padding: 6px; text-align: center; background-color: #EBE9E5; } .map-button ion-icon { vertical-align: top; } .input-toggle + label { display: inline-block; padding: 2px 6px; background-color: rgba(0,0,0,0.05); color: #873c1b; border-radius: 0px; margin: 1px; font-size: 13px; cursor: pointer; } .input-toggle:checked + label { background-color: #873c1b; color: #E2DED7; } .filter-headline { text-transform: uppercase; font-size: 15px; color: rgba(0,0,0,0.3); margin-bottom: 10px; font-weight: 700; } .filter-block { background-color: #E2DED7; margin-bottom: 6px; padding: 20px; } /*SLIDER*/ .slider { -webkit-appearance: none; width: 100%; height: 1px; background: rgba(0,0,0,0.1); outline: none; /*opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s;*/ margin: 20px 0px; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; border: 2px solid #873c1b; background: #E2DED7; cursor: pointer; } .slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; border: 2px solid #873c1b; background: #E2DED7; cursor: pointer; } .modal-content { position: absolute; top: 0; left: 0; width: 100%; bottom: 0px; padding: 20px; overflow-y: auto; overflow-x: hidden; } .modal-nav { position:absolute; left: 0; width: 100%; height: 55px; bottom: 0; padding: 0px; z-index: 9999; text-align: right; } .modal-nav button { display: inline-block; margin: 10px; } #search-results { position: absolute; left: 0; top: 53px; right: 0; bottom: 0; overflow-y: auto; } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ opacity: 1; /* Firefox */ color: rgba(0,0,0,0.25); } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(0,0,0,0.25); } ::-ms-input-placeholder { /* Microsoft Edge */ color: rgba(0,0,0,0.25); } #search-icon { position: absolute; left: 15px; top: 0; z-index: 999; height: 50px; font-size: 24px; color: #873c1b; } #button-clear-search { position: absolute; top: 0; width: 50px; right: 0; height: 50px; line-height: 50px; font-size: 20px; color: #873c1b; background: none; padding: 15px 0px; display: none; } #button-clear-search:hover { opacity: 0.75; } #button-clear-search:active { opacity: 0.5; } .category-div { display: inline-block; border: none; font-size: 12px; line-height: 18px; height: 18px; color: #EBE9E5; padding: 0px 4px; margin-right: 4px; text-align: center; background-color: #a6a095; vertical-align: top; } .box-categories { margin-bottom: 10px; height: 18px; width: 100%; white-space: nowrap; overflow: hidden; position: relative; font-size: 0px; } .box-title { margin-top: 10px; margin-bottom: 2px; font-family: addington_cfmedium; font-size: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden } .box-line { font-weight: 500; font-size: 12px; margin-right: 76px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; height: 18px; line-height: 18px; } .search-item { display: block; width: 100%; height: 60px; /*border-bottom: 1px solid #ddd;*/ position: relative; } .search-item:active { background-color: #f7f7f7; } .search-item:last-child { border: none; } .search-item-title { position: absolute; left: 20px; right: 20px; font-size: 15px; top: 11px; color: #873c1b; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 500; } .search-item-address { position: absolute; left: 20px; right: 20px; font-size: 12px; bottom: 11px; color: #873c1b; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 300; } .ui-modal { background-color: #E2DED7; } #detail-images { height: 210px; white-space: nowrap; overflow-x: scroll; /*important for lazy images*/ overflow-y: hidden; margin-bottom: 20px; } #detail-title-poi { font-size: 12px; color: #873c1b; margin-top: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 4px; opacity: 0.5; } #detail-title { font-family: addington_cfmedium; font-size: 24px; color: #873c1b; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 2px; } #detail-categories { margin-bottom: 6px; width: 100%; position: relative; font-size: 0px; } #detail-categories > .category-div { margin-bottom: 4px; } #detail-info { font-weight: 500; font-size: 13px; color: #873c1b; margin-bottom: 0px; } #detail-hours { font-weight: 500; font-size: 13px; color: #873c1b; margin-bottom: 20px; } #detail-buttons { margin: -2px; display: flex; flex-wrap: wrap; margin-bottom: 20px; } #detail-description { font-weight: 300; font-size: 15px; text-align: justify; margin-bottom: 20px; } #detail-links { margin-bottom: 30px; } #detail-links .icon { width: 25px; position: relative; } #detail-map { position: relative; height: 300px; } #detail-links ion-icon { position: absolute; top: 4px; left: 0px; } #detail-links a { text-decoration: underline; color: #873c1b; font-size: 14px; } #detail-links .hours { font-size: 14px; } .button-detail { min-width: 40%; margin: 2px; flex: 1 0 120px; text-align: center; text-transform: uppercase; } .button-detail:hover { filter: brightness(120%); opacity: 1; } .button-detail:active { filter: brightness(140%); opacity: 1; } .img-detail { display: inline-block; height: 100%; cursor: pointer; } .img-detail:last-child { margin: 0px; } /*SCROLL*/ @keyframes scroll { 0% { transform: translateY(0); opacity: 1; } 25% { opacity: 1; } 75% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } #scroll-icon { display: block; position: fixed; height: 40px; width: 24px; bottom: 120px; text-align: center; cursor: pointer; margin: auto; left: 0; right: 0; border: 2px solid #fff; border-radius: 12px; } #scroll-icon::before { position: absolute; top: -5px; bottom: -5px; left: -20px; right: -20px; content: ''; } .scroll-icon-ring { display: block; position: absolute; top: 0; height: 40px; width: 24px; } .scroll-icon-dot { display: block; position: absolute; left: 50%; background: #fff; height: 8px; width: 8px; top: 6px; margin-left: -4px; border-radius: 50%; transform-origin: top center; backface-visibility: hidden; animation: scroll 2s ease-out infinite; } .scroll-icon-text { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; text-align: center; margin: auto; font-weight: 500; font-size: 11px; } #list-entries, #fav-entries { padding-bottom: 75px; } #viewer-pic-copyright, #about-copyright { position: absolute; right: 0; color: #fff; font-size: 12px; background-color: #000; opacity: 0.65; padding: 1px 4px; } #viewer-pic-copyright { bottom: 0; } #about-copyright { top: 0; } #about-title, #about-subtitle { font-family: addington_cfmedium; font-size: 32px; } .about-title-cl { font-family: addington_cfmedium; font-size: 32px; } .about-subtitle-cl { font-size: 16px; text-transform: uppercase; font-weight: 500; margin-bottom: 30px; } #about-description { font-size: 16px; font-weight: 300; text-align: justify; } .gradient { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e2ded7+0,e2ded7+100&0+0,1+100 */ background: -moz-linear-gradient(left, rgba(226,222,215,0) 0%, rgba(226,222,215,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(226,222,215,0) 0%,rgba(226,222,215,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(226,222,215,0) 0%,rgba(226,222,215,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e2ded7', endColorstr='#e2ded7',GradientType=1 ); /* IE6-9 */ width: 20px; } .soften { filter: blur(3px); } @media screen and (orientation:portrait) { #about-cover { background: url('cover-portrait.jpg'); } } @media screen and (orientation:landscape) { * { scrollbar-color: #d4d0c9 #EBE9E5; scrollbar-width: thin; } ::-webkit-scrollbar { width: 8px; height: 8px; background: #EBE9E5; } ::-webkit-scrollbar-thumb { background: #d4d0c9; position: relative; } ::-webkit-scrollbar-thumb:hover { background: #c7c3bb; } ::-webkit-scrollbar-thumb:active { background: #bdb9b1; } #about-cover { background: url('cover-landscape.jpg'); } #list { transform: none !important; position: absolute; left: 0; bottom: 0; width: 394px; top: 74px; box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5); } #list-entries { padding-bottom: 0px; } #map-nav { margin: auto; left: 0px; right: 0px; max-width: 600px; } #map-nav-inner { overflow: hidden; left: 80px; right: 80px; box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5); } .map-nav-change { width: 80px; } .map-nav-change ion-icon { display: block; } #header { transform: none !important; position: absolute; left: 0; width: 394px; top: 0px; } #map { transform: none !important; position: absolute; left: 0px; top: 0px; bottom: 0px; filter: none !important; } #button-show-map { display: none; } #button-show-list { display: none; } } @media only screen and (max-height: 540px) { #scroll-icon { visibility: hidden; } } /*GPS MARKER BEGIN*/ .gps { visibility: hidden; } .dot { margin: auto auto; width: 300px; height: 300px; position: relative; } .centraldot { width: 10px; height: 10px; background: rgba(122, 59, 64,1); border-radius: 30px; position: absolute; left: 145px; top: 145px; animation: animationDotCentral linear 3s; transform-origin: 50% 50%; animation-fill-mode: forwards; animation-iteration-count: infinite; } .wave { width: 260px; height: 260px; background: rgba(122, 59, 64,0.4); border-radius: 200px; position: absolute; left: 20px; top: 20px; opacity: 0; animation: animationWave cubic-bezier(0,.54,.53,1) 3s; transform-origin: 50% 50%; animation-fill-mode: forwards; animation-delay: 0.9s; animation-iteration-count: infinite; } .wave2 { width: 260px; height: 260px; background: rgba(122, 59, 64,0.4); border-radius: 200px; position: absolute; left: 20px; top: 20px; opacity: 0; animation: animationWave cubic-bezier(0,.54,.53,1) 3s; transform-origin: 50% 50%; animation-fill-mode: forwards; animation-delay: 1.07s; animation-iteration-count: infinite; } @keyframes animationDotCentral { 0% { transform: scale(0); opacity: 0; } 5% { transform: scale(2); } 10% { transform: scale(0.90); opacity: 1; } 11% { transform: scale(1.50); } 12% { transform: scale(1.00); } 28% { background: rgba(122, 59, 64,1); } 29% { background: rgba(183, 89, 96,1); } 31% { background: rgba(122, 59, 64,1); } 33% { background: rgba(183, 89, 96,1); } 35% { background: rgba(122, 59, 64,1); } 90% { opacity: 1; } 100% { opacity: 0; } } @keyframes animationWave { 0% { opacity: 0; transform: scale(0.00); } 1% { opacity: 1; } 10% { background: rgba(122, 59, 64,0.4); } 100% { transform: scale(1); background: rgba(122, 59, 64,0.0); } } /*GPS MARKER END*/ .ldr-0 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ldr-0:after { content: " "; display: block; width: 46px; height: 46px; margin: 15px; border-radius: 50%; border: 2px solid #fff; border-color: #fff transparent #fff transparent; animation: ldr-0 1.2s linear infinite; } @keyframes ldr-0 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ldr-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ldr-1:after { content: " "; display: block; width: 36px; height: 36px; margin: 20px; border-radius: 50%; border: 2px solid #fff; border-color: #fff transparent #fff transparent; animation: ldr-1 1.2s linear infinite; } @keyframes ldr-1 { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .ui-modal { margin: auto; box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.5); width: 90%; height: 90%; max-height: 90%; position: relative; display: flex; flex-direction: column; max-width: 640px; } .ui-modal-overlay { background-color: rgba(0,0,0,0.3); } @media screen and (max-width: 768px) { .ui-modal-overlay { background: none; } .ui-modal { box-shadow: none; width: 100%; max-width: 100%; height: 100%; max-height: 100%; } } #map-2024 { opacity: 1; display: none; } .pulse { transform: scale(1); animation: pulse 2s infinite; } @keyframes pulse { 30% { transform: scale(1); } 40% { transform: scale(1.05); } 50% { transform: scale(0.98); } 60% { transform: scale(1); } }