/*------MAP-------*/
.map-container {
padding-left: clamp(5px, 3vw, 44.5px);
            padding-right: clamp(5px, 3vw, 44.5px);
            padding-bottom: clamp(5px, 3vw, 44.5px);
            padding-top: clamp(5px, 2.4vw, 35px);
            position: relative;
            }
        
.map-background {
    width: 100%;           
            height: auto;          
            aspect-ratio: 1/1;     
            background-color: #241C12;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
            }
        
/* map overlay pojawianie sie */
        .map-fade-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000000;
            z-index: 25;
            pointer-events: none;
            opacity: 1;
            animation: mapFadeIn 1.5s ease-out forwards;
            }

        @keyframes mapFadeIn {
        0% {
            opacity: 1;
            }
        5% {
            opacity: 1;
            }
        100% {
            opacity: 0;
            }
            }
/* map overlay end */
        
        .map-wrapper {
            width: 100%;
            height: 100%;
            }

        #mapa-container {
            width: 100%;
            height: 100%;
            cursor: pointer;
            transition: none;
            transform-origin: 0 0;
            }

        #mapa-container svg {
            width: 100%;
            height: 100%;
            display: block;
            }

        #mapa-container.zoomed {
            cursor: grab;
            }

        #mapa-container.zoomed:active {
            cursor: grabbing;
            }

        .clickable-text {
            cursor: pointer;
            transition: fill;
            }

        .clickable-text:hover {
            fill: #9d9d9d;
            }
        
        .mobile-logo,
        .mobile-legenda,
        .clickable-square {
            display: none;
            position: absolute;
            z-index: 10;
            }
/*---------MAP END-----------*/

        
        
 /*-------MEDIA QUERIES TABLET-------*/
 /*-------MEDIA QUERIES TABLET-------*/
        
        @media (max-width: 991px) {
        .page-container {
            width: 100vw;
            }


            
/*---------------------MAP--------------------*/        
            .map-container {
            padding-bottom: 3.4vw;
            padding-top: 1.7vw;
            padding-left: 3vw;
            padding-right: 3vw;
            }
 /*--------------------MAP END----------------*/
}
        
 /* MEDIA QUERIES MOBILE----------------------------------------------- */
 /* MEDIA QUERIES MOBILE----------------------------------------------- */
     @media (max-width: 768px) {
        .page-container {
            width: 100vw;
            padding: 0;
            }

         
 /*--------------------MAP--------------------*/
           .map-container {
            padding-left: 0;
            padding-right: 0;
            padding-top: 0.1vw;
            padding-bottom: 4vw;
            }
            
            .map-background {
                width: 100vw;
                aspect-ratio: 3/5;
                margin: 5vw auto;
                position: relative;
            }
         
            .map-wrapper {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%; 
            }
            
            #legenda,
            #logo {
                display: none;
            }
                    
            .mobile-logo,
            .mobile-legenda,
            .clickable-square {
                display: block;
            }
            
            .mobile-logo {
                top: 5%;
                left: 0%;
                width: 100%;
                height: 12%;
                background-color: #241C12;
                }
            
            .mobile-legenda {
                bottom: 5%;
                left: 0%;
                width: 100%;
                height: 12%;
                background-color: #241C12;
            }
              
            .mobile-logo svg,
            .mobile-legenda svg {
                width: 100%;
                height: 100%;
                display: block;
                transform: translateX(-5%);
                }
            
            .clickable-square {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 60%;
                background-color: transparent;
                cursor: pointer;
            }
            
            .clickable-square.hidden {
                display: none;
            }
 /*-----------------MAP END-----------------*/
 
        }
        
/* MEDIA QUERIES----------------------------------------------- */
/* MEDIA QUERIES----------------------------------------------- */ 
        /* Przywrócenie logo i legendy na desktop */
        @media (min-width: 769px) {
            #legenda,
            #logo {
                display: block !important;
            }
            
            .mobile-logo,
            .mobile-legenda {
                display: none !important;
            }
        }