@font-face {
                    font-family: 'Progo';
                    src: url('Font/progo.bold.otf') format('truetype');
                    font-weight: normal;
                    font-style: normal;
                        }
            @font-face {
                    font-family: 'Gidole';
                    src: url('Font/Gidole-Regular.otf') format('truetype');
                    font-weight: normal;
                    font-style: normal;
                    }



        body
        {
            height: 100%;
            width: 100%;
          background-color: #de0b19; 
        }

        #tlo
        {
            position: absolute;
            top: 18.5vh;
            left: 0;
            width: 73vw;
            height: 81.5vh;
            border-radius: 5vw 5vw 0 0;
            background-color: #ffffff;
        }
        #SPID
        {
            color: black;
            font-family: Progo;
            font-size: 6vw;
            top: 1vw;
            margin: 0;
            position: absolute;
            right: 2vw;
        }
        #SPIDb
        {
            position: absolute;
            border-radius: 0 5vw 5vw 0;
            left: 0;
            top: 1vw;
            background-color: #ffffff;
            height: 7vw;
            width: 27.5vw; 
            transition: 1s; 
        }
        #SPIDb:hover
        {
            
            position: absolute;
            border-radius: 0 5vw 5vw 0;
            left: 0;
            top: 1vw;
            background-color: #ffffff;
            height: 7vw;
            width: 30vw; 
        }
        #dopis
        {
            position: absolute;
             left: 32vw;
             font-size: 6vw;
             top: 1.1vw;
             font-family: Gidole;
             letter-spacing: 0.1vw;
             margin: 0;
             color: #ffffff;
        }
        #zd2
        {
            position: absolute;
            right: -9vw;
            top: -6vw;
            width: 30vw;
            height: auto;
            transform: scale(0.2);
          border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd1
        {
          position: absolute;
            right: -2vw;
            top: -6vw;
            width: 30vw;
            height: auto;
            transform: scale(0.2);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd3
        {
          position: absolute;
            right: -9vw;
            top: 3vw;
            width: 30vw;
            height: auto;
            transform: scale(0.2);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd4
        {
          position: absolute;
            right: -2vw;
            top: 3vw;
            width: 30vw;
            height: auto;
            transform: scale(0.2);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd5
        {
          position: absolute;
            right: -9vw;
            top: 12vw;
            width: 30vw;
            height: auto;
            transform: scale(0.2);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd6
        {
          position: absolute;
            right: -2vw;
            top: 12vw;
            width: 30vw;
            height: auto;
            transform: scale(0.2);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd8
        {
          position: absolute;
            right: 5vw;
            top: -6vw;
            width: 30vw;
            height: auto;
            transform: scale(0.2);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd12
        {
          position: absolute;
            right: 5vw;
            top: 3vw;
            width: 30vw;
            height: auto;
            transform: scale(0.2);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd13
        {
          position: absolute;
            right: 5vw;
            top: 12vw;
            width: 30vw;
            height: auto;
            transform: scale(0.2);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd7
        {
          position: absolute;
            right: -7vw;
            top: 28vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd9
        {
          position: absolute;
            right: 4vw;
            top: 28vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd10
        {
          position: absolute;
            right: -2vw;
            top: 34vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd11
        {
          position: absolute;
            right: 5vw;
            top: 21vw;
            width: 30vw;
            height: auto;
            transform: scale(0.2);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }

        #zd2:hover
        {
            
             position: absolute;
            right: -9vw;
            top: -6vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);
        }
         #zd1:hover
        {
            
             position: absolute;
            right: -2vw;
            top: -6vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);
        }
         #zd3:hover
        {
          position: absolute;
            right: -9vw;
            top: 3vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);   
        
        }
        #zd4:hover
        {
          position: absolute;
            right: -2vw;
            top: 3vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);   
     
        }
        #zd5:hover
        {
          position: absolute;
            right: -9vw;
            top: 12vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);   
        
        }
        #zd6:hover
        {
          position: absolute;
            right: -2vw;
            top: 12vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);   
          
        }
        #zd8:hover
        {
          position: absolute;
            right: 5vw;
            top: -6vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);   
          
        }
        #zd12:hover
        {
          position: absolute;
            right: 5vw;
            top: 3vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);   
          
        }
        #zd13:hover
        {
          position: absolute;
            right: 5vw;
            top: 12vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);   
           
        }
        #zd7:hover
        {
          position: absolute;
            right: -7vw;
            top: 28vw;
            width: 30vw;
            height: auto;
            transform: scale(0.3);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd9:hover
        {
          position: absolute;
            right: 4vw;
            top: 28vw;
            width: 30vw;
            height: auto;
            transform: scale(0.3);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        #zd10:hover
        {
          position: absolute;
            right: -2vw;
            top: 34vw;
            width: 30vw;
            height: auto;
            transform: scale(0.3);   

        }
        #zd11:hover
        {
          position: absolute;
            right: 5vw;
            top: 21vw;
            width: 30vw;
            height: auto;
            transform: scale(0.25);   
            border-radius: 5vw;
            transition: 1s;
            cursor: pointer;
        }
        .imageWrapper
        {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        .imageWrapper img
        {
            width: auto;
            max-width: 90vw;
            max-height: 90vh;
            height: auto;
            scale: auto;

        }
        .imageWrapper span
        {
            position: absolute;
            top: 2vw;
            right: 2vw;
            font-size: 3vw;
            color: #ffffff;
            cursor:pointer;
            font-family: Gidole;
        }
        #ctlo
        {
            position: absolute;
            right: 1.5vw;
            top: 0;
            width: 23vw;
            height: 100%;
            background-color: #7a3635;
            border-top-left-radius: -5vh;

        }
        #ctlo h1
        {
            left: -39vw;
            margin: 0;
            top: 1vh;
            bottom: 1vh;
            position: absolute;
            font-size: 5vw;
            font-family: Gidole;
            color: #ffffff;
            letter-spacing: 0.25vw;
            text-align: center;
        }
        #ctlo h2{
           left: -39vw;
            margin: 0;
            top: 11.5vh;
            position: absolute;
            font-size: 3vw;
            font-family: Gidole;
            color: #ffffff;
            letter-spacing: 0.25vw;  
        }
        #ctlo h3
        {
            left: -17vw;
            margin: 0;
            top: 4.5vh;
            position: absolute;
            font-size: 3vw;
            font-family: Gidole;
            color: #ffffff;
            letter-spacing: 0.25vw;
        }
 
        #tlo img{
             position: absolute;
             top: 0;
             left: 0;
             bottom: 0;
             right: 0;
             width: 100%;
             height: 100%;
             object-fit: cover;
             border-radius: 5vw 5vw 0 0;
             cursor: pointer;
            
        }
        #Godziny
        {
            min-width: 300px ;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 81.5vh;
            width: 25vw;
            background-color: #7a3635;
            border-radius: 0 0 0 0;
        }
        #Godziny h1
        {
            position: absolute;
            bottom: 22vh;
            left: 1vw;
            font-family: Gidole;
            font-size: 4vh;
            color: #ffffff;
        }
        #Godziny h2
        {
            position: absolute;
            bottom: 1vh;
            left: 1.25vw;
            font-family: Gidole;
            font-size: 2.5vh;
            line-height: 3vh;
            color: #ffffff;
        }
        #Godziny h4
        {
            left: 2vw;
            bottom: 26vh;
            position: absolute;
            font-size: 2.5vh;
            font-family: Gidole;
            color: #ffffff;
            line-height: 3vh;
        }
        #Godziny h3
        {
         left: 1vw;
        bottom: 32vh;
        position: absolute;
        font-size: 4vh;
        font-family: Gidole;
        color: #ffffff;   
        }
        #Godziny h5
        {
            left: 1vw;
            bottom: 66vh;
            position: absolute;
            font-size: 5vh;
            font-family: Gidole;
            color: #ffffff;
        }
        #Godziny h6
        {
            left: 2vw;
            bottom: 60vh;
            position: absolute;
            font-size: 2.5vh;
            font-family: Gidole;
            color: #ffffff;
            margin-right: 1vw;
            line-height: 3vh;
        }
        #Godziny h7
        {
            left: 2.5vw;
            bottom: 43vh;
            position: absolute;
            font-size: 2.5vh;
            line-height: 3vh;
            font-family: Gidole;
            color: #ffffff;
        }
        #Godziny h8
        {
            right: 4vw;
            bottom: 43vh;
            position: absolute;
            font-size: 2.5vh;
            line-height: 3vh;
            font-family: Gidole;
            color: #ffffff;
        }
        #k2
        {
            position: absolute; right: 23vw; top: 13vh; background-color: #de0b19; height: 20vh; width: 30vw; border-radius: 5vw 5vw 0 0;
        }
        #k1
        {
            position: absolute; right: 23vw; top: 0; background-color: #7a3635; height: 25vh; width: 40vw;
        }

        @media screen and (max-width: 767px) {
        
        
            #SPIDb
            {
                bottom: 10px;
              position: absolute;
              top: 0px;
              left: 25px;
              right: 25px;
              border-radius: 0 0;
              height: 80px;
              width: auto;
              border-radius:0 0 25px 25px; 
            }
            #SPID
            {
                position: relative;
                font-size: 60px;
                top: 0px;
                right: 10px;
                left: 10px;
                width: auto;
                text-align: center;
            }
            #SPIDb:hover
            {
              position: absolute;
              top: 0px;
              left: 25px;
              right: 25px;
              border-radius: 0 0;
              height: 80px;
              width: auto;
              border-radius:0 0 25px 25px;  
            }
            #ctlo
            {
                left: 50px;
                right: 50px;
                top: 80px;
                width: auto;
                max-width: 100%;
                height: 75px;
                border-radius: 50px 50px 50px 50px;
            }
            #ctlo h1
            {
                top: 1320px;
                left: 20px;
                right: 20px;
                width: auto;
                text-align: center;
                font-size: 50px;
                z-index: 99;
            }
            #ctlo h3
            {
                top: 1380px;
                 left: 15px;
                right: 15px;
                width: auto;
                text-align: center;
                font-size: 30px;
                z-index: 99;
            }
            #ctlo h2
            {
                top: 1450px;
                 left: 20px;
                right: 20px;
                width: auto;
                text-align: center;
                font-size: 30px;
                z-index: 99;
            }
            #zd1
            {
                right: auto;
                top: 500px;
                left: 7.5%;
                transform: scale(0.8);
            }
            #zd1:hover
            {
                right: auto;
                top: 500px;
                left: 7.5%;
                transform: scale(0.9);
            }
            #zd2
            {
                right: auto;
                top: 500px;
                left: 35%;
                transform: scale(0.8);
            }
            #zd2:hover
            {
                right: auto;
                top: 500px;
                left: 35%;
                transform: scale(0.9);
            }
            #zd3
            {
                right: auto;
                top: 500px;
                left: 62.5%;
                transform: scale(0.8);
            }
            #zd3:hover
            {
                right: auto;
                top: 500px;
                left: 62.5%;
                transform: scale(0.9);
            }
            #zd4
            {
                right: auto;
                top: 675px;
                left: 7.5%;
                transform: scale(0.8);
            }
            #zd4:hover
            {
                right: auto;
                top: 675px;
                left: 7.5%;
                transform: scale(0.9);
            }
            #zd5
            {
                right: auto;
                top: 675px;
                left: 35%;
                transform: scale(0.8);
            }
            #zd5:hover
            {
                right: auto;
                top: 675px;
                left: 35%;
                transform: scale(0.9);
            }
            #zd6
            {
                right: auto;
                top: 675px;
                left: 62.5%;
                transform: scale(0.8);
            }
            #zd6:hover
            {
                right: auto;
                top: 675px;
                left: 62.5%;
                transform: scale(0.9);
            }
            #zd8
            {
                right: auto;
                top: 850px;
                left: 62.5%;
                transform: scale(0.8);
            }
            #zd8:hover
            {
                right: auto;
                top: 850px;
                left: 62.5%;
                transform: scale(0.9);
            }
            #zd12
            {
                right: auto;
                top: 850px;
                left: 35%;
                transform: scale(0.8);
            }
            #zd12:hover
            {
                right: auto;
                top: 850px;
                left: 35%;
                transform: scale(0.9);
            }
            #zd13
            {
                right: auto;
                top: 850px;
                left: 7.5%;
                transform: scale(0.8);
            }
            #zd13:hover
            {
                right: auto;
                top: 850px;
                left: 7.5%;
                transform: scale(0.9);
            }
            #zd7
            {
                right: auto;
                top: 1025px;
                left: 35%;
                transform: scale(0.8);
            }
            #zd7:hover
            {
                right: auto;
                top: 1025px;
                left: 35%;
                transform: scale(0.9);
            }
            #zd9
            {
                right: auto;
                top: 1025px;
                left: 7.5%;
                transform: scale(0.8);
            }
            #zd9:hover
            {
                right: auto;
                top: 1025px;
                left: 7.5%;
                transform: scale(0.9);
            }
            #zd10
            {
                right: auto;
                top: 1025px;
                left: 62.5%;
                transform: scale(0.8);
            }
            #zd10:hover
            {
                right: auto;
                top: 1025px;
                left: 62.5%;
                transform: scale(0.9);
            }
            #zd11
            {
                right: auto;
                top: 1025px;
                left: 62.5%;
                transform: scale(0.8);
            }
            #zd11:hover
            {
                right: auto;
                top: 1025px;
                left: 62.5%;
                transform: scale(0.9);
            }
            #tlo
            {
                top: 1000px;
            }
            #k1
            {
                position: absolute;
                top: 0px;
                right: 0;
                height: 75px;
                width: 30%;
                border-radius: 25px 0 0 25px;
                background-color: #de0b19;
            }
            #k2
            {
            position: absolute;
                top: 0px;
                left: 0;
                height: 75px;
                width: 30%;
                border-radius: 0 25px 25px 0;
                background-color: #de0b19;
            }
            #Godziny
            {
                top: 155px;
                left: 25px;
                right: 25px;
                height: 1900px;
                width: auto;
                border-radius: 25px;
                margin: 0;

            }
            #Godziny h1, #Godziny h2, #Godziny h3, #Godziny h4
            {
            
                
                width: auto;
                left: 0;
                right: 0;
                text-align:center;
            }
            #Godziny h5
            {
                top: -120px;
                left: 0;
                right: 0;
                text-align: center;
            }
            #Godziny h6
            {
                position: relative;
                top: -30px;
                left: 0;
                right: 0;
                text-align: center;

            }
            #Godziny h7
            {
                left: 12.5%;
                top: 130px;
            }
            #Godziny h8
            {
                position: absolute;
                right: 12.5%;
                top: 130px;
                
            
                
            }
            #tlo
            {
                top:  1250px;
                width:auto;
                height: fit-content;
                left: 45px;
                right: 45px;
                z-index: 99;
                border-radius: 25px;
            }
            #tlo img
            {
                border-radius: 25px;
                width: 100%;
                height: auto;

            }
            .imageWrapper
        {
            width: 100%;
            height: 2055px;
            background: rgba(0, 0, 0, 0.9);
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        body
        {
            width: 100%;
            height: 100%;
        
        }
        }