.map-styles{position:relative;width:100%;margin:0 auto}.react-transform-wrapper{max-width:100%}.map-title{position:absolute;z-index:3;color:#fff;background:#e83a81;padding:.5rem 1rem;border-radius:20px;left:50%;transform:translate(-50%);top:1.5rem;font-size:var(--text-base);text-transform:uppercase;@media (min-width: 1360px){top:2rem}}.map-controls{position:absolute;z-index:6;bottom:1rem;right:1rem;@media (min-width: 992px){bottom:2rem;left:50%;right:auto;transform:translate(-50%)}@media (min-width: 1500px){bottom:4rem}&.active{bottom:5rem;@media (min-width: 1360px){bottom:2rem}@media (min-width: 1500px){bottom:4rem}}button{background:var(--color-tertiary);position:relative;width:30px;height:30px;margin-left:.5rem;border-color:#000;&:before,&:after{content:"";position:absolute;width:60%;height:3px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:2px;background-color:#fff}&:after{transform:translate(-50%,-50%) rotate(90deg)}&.zoom-out{&:after{display:none}}&.reset{width:80px;color:#fff;font-family:var(--font-bold);font-size:var(--text-sm);text-transform:uppercase;&:before{content:"Reset";height:auto;background:none}&:after{display:none}}}}.map-container{position:relative;overflow:hidden;background:#e82f5a;.map-buttons{position:absolute;top:0;left:0;width:100%;display:flex;justify-content:space-between;padding:0;z-index:2;padding:1rem}.map-buttons-btn{background:#fff;border:none;border-radius:50%;width:40px;height:40px;box-shadow:0 4px 14px #000000a6;position:relative;@media (min-width: 1360px){display:none}svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}&:before,&:after{content:"";display:none;width:50%;height:3px;border-radius:2px;background:#000;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}&:after{transform:translate(-50%,-50%) rotate(-45deg)}&.close{&:before,&:after{display:block}@media (min-width: 992px){display:block}}&.active{svg{display:none}&:before,&:after{display:block}}}.map-wrap{width:100%;.map-content{height:calc((var(--vh, 1vh) * 100) - 60px);width:100vw;position:relative;display:flex;justify-content:center;align-items:center;@media (min-width: 768px){height:calc((var(--vh, 1vh) * 100) - 100px)}img{max-height:100%}}}.map-menu{position:absolute;top:0;width:calc(100% - (40px + 2rem));left:calc(40px + 2rem);height:100%;z-index:21;background:#fff;transform:translate(100%);transition:transform .3s ease-in-out;overflow:auto;@media (min-width: 768px){box-shadow:0 14px 40px #00000080;border-radius:15px}@media (min-width: 992px){transform:translate(calc(-100% - (40px + 2rem)));width:300px;height:auto;top:5rem;left:1rem;max-height:calc(100% - 10rem)}@media (min-width: 1360px){top:2rem;left:calc((100vw - 1360px)/2 + 1rem);transform:translate(0);max-height:calc(100% - 4rem)}@media (min-width: 1500px){top:4rem;max-height:calc(100% - 8rem)}.map-menu-ul{list-style:none;padding:0;margin:0;button{width:100%;text-align:left;padding:.65rem .75rem;border:none;background-color:#fff;font-family:var(--font-bold);font-size:var(--text-sm);position:relative;display:flex;align-items:center;&.menu-item{padding-right:40px}.icon{margin-right:.5rem;width:26px;height:26px;position:relative;svg{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);max-width:60%;max-height:60%}&:before{content:"";position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;border-radius:50%}}svg.arrow{position:absolute;right:1rem;top:50%;transform:translateY(-50%);width:auto}span{display:inline-block;&:first-child{min-width:40px}}&.active{&.menu-item{padding-right:.75rem}@media (min-width: 992px){.arrow{display:none}}}&:hover{@media (min-width: 992px){text-decoration:underline}}}li{border-bottom:1px solid #E3E3E3;font-family:var(--font-black);@media (min-width: 992px){display:flex}.sub-button{font-family:var(--font-bold);color:var(--color-secondary)!important;cursor:pointer}button{&.active{color:var(--color-secondary)}}&.active{border-bottom:none}&:first-child{button{padding:1rem .75rem;position:relative;font-family:var(--font-black);&:before,&:after{content:"";position:absolute;width:50px;height:3px;width:15px;top:50%;transform:translateY(-50%);right:1rem;border-radius:2px}&:after{transform:translateY(-50%) rotate(90deg)}&.active{color:#fff;&:before{background:#fff}&:after{display:none}.icon{&:before{background:#fff}}}}}}&.map-menu-ul--restaurants{li{button{color:var(--color-primary);svg.arrow{color:var(--color-primary);stroke:var(--color-primary)}.icon{svg{fill:var(--color-secondary)}&:before{background:var(--color-primary)}}&:after,&:before{background:var(--color-primary)}&.active{background-color:var(--color-primary);color:var(--color-secondary);svg.arrow{color:var(--color-secondary);stroke:var(--color-secondary)}.icon{svg{fill:var(--color-primary)}}}}.sub-button{background:var(--color-primary)}}}&.map-menu-ul--things-to-do{li{button{color:var(--color-tertiary);svg.arrow{color:var(--color-tertiary);stroke:var(--color-tertiary)}.icon{svg{path{stroke:var(--color-secondary)}}&:before{background:var(--color-tertiary)}}&:after,&:before{background:var(--color-tertiary)}&.active{background-color:var(--color-tertiary);color:var(--color-secondary);.icon{svg{path{stroke:var(--color-tertiary)}}}}}.sub-button{background:var(--color-tertiary)}}}&.map-menu-ul--handy-places{li{button{color:var(--color-green);svg.arrow{color:var(--color-green);stroke:var(--color-green)}.icon{svg{path{fill:var(--color-secondary)}}&:before{background:var(--color-green)}}&:after,&:before{background:var(--color-green)}&.active{background-color:var(--color-green);color:var(--color-secondary);.icon{svg{path{fill:var(--color-green)}}}}}.sub-button{background:var(--color-green)}}}}&.active{transform:translate(0)}}.map-key{position:absolute;top:0;width:calc(100% - (40px + 2rem));right:calc(40px + 2rem);z-index:21;background:#fff;transform:translate(-100%);transition:transform .3s ease-in-out;background:linear-gradient(153deg,#e83a81 19.08%,#e72953 23.25%,#e8306c 55.83%,#c8357c 61.26%,#a33a8c 71.7%,#9f3a8a 82.56%,#c23776 92.58%);height:100%;padding:1.5rem;overflow:auto;@media (min-width: 768px){box-shadow:0 14px 40px #00000080;border-radius:15px}@media (min-width: 992px){width:300px;height:auto;transform:translate(calc(100% + 40px + 2rem));top:5rem;right:1rem;max-height:calc(100% - 10rem)}@media (min-width: 1360px){top:2rem;right:calc((100vw - 1360px)/2 + 1rem);transform:translate(0);max-height:calc(100% - 4rem)}@media (min-width: 1500px){top:4rem;max-height:calc(100% - 8rem)}ul{list-style:none;padding:0;li{color:#fff;margin:.5rem 0;display:flex;align-items:center;font-size:var(--text-sm);img{width:30px;&.large{width:100px}}}}h4{color:#fff;font-size:var(--text-base);margin-bottom:1rem}&.active{transform:translate(0)}}.map-info-trigger{position:absolute;bottom:0;left:0;padding:1rem;width:100%;border:none;z-index:20;color:var(--color-secondary);display:flex;justify-content:space-between;align-items:center;font-family:var(--font-black);font-size:var(--text-sm);box-shadow:-0 -14px 20px #00000080;&.restaurant{background-color:var(--color-primary)}&.thing-to-do{background-color:var(--color-tertiary)}&.handy-place{background-color:var(--color-green)}div{&:first-child{flex-grow:1;button{width:100%;text-align:left}}}button{background:transparent;position:relative;border:none;color:var(--color-secondary);padding:0;margin-left:1.5rem;font-family:var(--font-body);&:after{content:"";position:absolute;bottom:.2rem;left:0;width:100%;height:1px;background:var(--color-secondary);opacity:.5}}.btn-title{font-family:var(--font-black);margin-left:0;&:after{display:none}}}.map-info-content{position:absolute;height:100%;overflow:auto;top:0;left:0;width:100%;background:#fff;z-index:7;padding:1rem;padding-bottom:calc(56px + 1rem);@media (min-width: 768px){box-shadow:0 14px 40px #00000080;border-radius:15px}@media (min-width: 992px){height:auto;top:5rem;max-height:calc(100% - 8rem);left:50%;transform:translate(-50%);width:600px;padding:1.5rem;max-height:calc(100% - 10rem)}@media (min-width: 1360px){top:2rem;max-height:calc(100% - 4rem)}@media (min-width: 1500px){top:4rem;max-height:calc(100% - 8rem)}h4{font-size:var(--text-xl);text-transform:uppercase;padding-right:4rem;padding-bottom:.5rem;@media (min-width: 992px){font-size:var(--text-2xl)}}.type{text-transform:uppercase;font-size:var(--text-sm);color:var(--color-primary);padding-bottom:.5rem;.map-info-content--restaurant{color:var(--color-primary)}.map-info-content--thing-to-do{color:var(--color-tertiary)}.map-info-content--handy-place{color:var(--color-green)}}.close{position:absolute;z-index:5;right:1.5rem;top:1.5rem}}}.map-svg{width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}.marker{fill:transparent;cursor:pointer;&.active{animation:pulsate 2s infinite;stroke:var(--color-secondary);stroke-width:10px;&.restaurant{fill:var(--color-primary)}&.thing-to-do{fill:var(--color-tertiary)}&.handy-place{fill:var(--color-green)}}}.marker-path{fill:transparent;cursor:pointer;&.active{fill:var(--color-secondary)}}@keyframes pulsate{0%{stroke-width:2;stroke-opacity:0;r:40px}30%{stroke-width:10;stroke-opacity:1}50%{r:45px;stroke-width:50}70%{stroke-opacity:0}to{r:40px;stroke-opacity:0}}.default-button{border:1px solid black;border-right:2px outset black;border-bottom:2px outset black;&:active{border-color:#000;box-shadow:inset 0 1px 2px #0000001a;border-top:2px inset black;border-left:2px inset black;border-bottom:1px solid #a9a9a9;border-right:1px solid #a9a9a9}}