@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;
        }

        #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; 
        }
        #Salon
        {
            position: absolute; left: 32vw; font-size: 6vw; top: 1.1vw; font-family: Gidole; letter-spacing: 0.1vw; margin: 0; color: #ffffff;
        }
        #tlod{
            position: absolute;
            top: 18.5vh;
            left: 0;
            width: 100%;
            height: 81.5vh;
            border-radius: 5vw 5vw 0 0;
            background-color: #ffffff;
            box-sizing: border-box;
        }
        #logo{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100vw;
            height: 9vh;
            background-color: #de0b19;
            border-radius: 0 0 5vw;

        }

        #Malbork{
            transition: 1s;
            border-radius: 5vw;
            position: absolute;
            top: 20vh;
            left: 1.1vw;
            width: 47.5vw;
            height: 75vh;
            background-color: #de0b19;



        }
        
        #Malbork img{
            border-radius: 5vw;
            position: absolute;
            top: 2vw;
            left: 2vw;
            width: calc(100% - 4vw);
            height: auto;
            scale: auto;
        
        }
        #Malbork h1
        {
            position: absolute;
            bottom: 9.75vw;
            left: 2.5vw;
            margin: 0;
            color: #ffffff;
            font-size: 4vw;
            font-family: Gidole;
            text-shadow: 0 0.2vw 0.4vw rgba(0,0,0,0.25);

        }
        #Malbork h2
        {
            position: absolute;
            bottom: 3.75vw;
            left: 3.725vw;
            margin: 0;
            line-height: 2.1vw;
            font-size: 2vw;
            color: #ffffff;
            font-family: Gidole;
            text-shadow: 0 0.2vw 0.4vw rgba(0,0,0,0.25);    
        }
        #Malbork:hover{
            transform: scale(1.02);
            box-shadow: 0 2vw 2vw rgba(0,0,0,0.15);
        
        }
        #Kosakowo{
            transition: 1s;
            border-radius: 5vw;
            position: absolute;
            top: 20vh;
            right: 1.1vw;
            width: 47.5vw;
            height: 75vh;
            background-color: #de0b19;


        }
        #Kosakowo h1
        {
            position: absolute;
            bottom: 9.75vw;
            left: 3.25vw;
            margin: 0;
            color: #ffffff;
            font-size: 4vw;
            font-family: Gidole;
            text-shadow: 0 0.2vw 0.4vw rgba(0,0,0,0.25);
 
        }
        #Kosakowo h2
        {
           
            position: absolute;
            bottom: 3.75vw;
            left: 3.25vw;
            margin: 0;
            line-height: 2.1vw;
            font-size: 2vw;
            color: #ffffff;
            font-family: Gidole;
            text-shadow: 0 0.2vw 0.4vw rgba(0,0,0,0.25);
        }
        #Kosakowo img{
            border-radius: 5vw;
            position: absolute;
            top: 2vw;
            left: 2vw;
            width: calc(100% - 4vw);
            height: auto;
            scale: auto;
        
        }
        #Kosakowo:hover{
            transform: scale(1.02);
            box-shadow: 0 2vw 2vw rgba(0,0,0,0.15);
        }
         @media screen and (max-width: 450px) {

            #logo
            {
                display:none;
            }
            #SPIDb
            {
              position: absolute;
              top: 25pxpx;
              left: 25px;
              right: 25px;
              border-radius: 0 0;
              height: 80px;
              width: auto;
              border-radius:25px;
              margin: 0;  
            }
            #SPID
            {
                top: 0px;
                position: absolute;
                font-size: 60px;
                right: 20px;
                left: 20px;
                width: auto;
                text-align: center;
                margin: 0;
            }
            #Salon
            {
                right: 0;
                left: 0;
                text-align: center;
                top: 100px;
                font-size: 40px;
            }
            #Malbork
            {
                top: 320px;
                left: 20px;
                right: 20px;
                width: auto;
                height: 370px;
            }
            #Malbork img
            {
                left: 20px;
                right: 20px;
                top: 20px;
                bottom: 20px;
                width: calc(100% - 40px);
                height: calc(100% - 40px);
                object-fit: cover;
                object-position: center;
            }
            #Malbork h1
            {
                font-size: 20px;
                left: 30px;
                bottom: 60px;
            }
            #Malbork h2
            {
                font-size: 10px;
                left: 30px;
                bottom: 30px;
            }
            #Kosakowo
            {
                top: 700px;
                left: 20px;
                right: 20px;
                width: auto;
                height: 370px;
            }
            #Kosakowo img
            {
                left: 20px;
                right: 20px;
                top: 20px;
                bottom: 20px;
                width: calc(100% - 40px);
                height: calc(100% - 40px);
                object-fit: cover;
                object-position: center;
            }
            #Kosakowo h1
            {
                font-size: 20px;
                left: 30px;
                bottom: 60px;
            }
            #Kosakowo h2
            {
                font-size: 10px;
                left: 30px;
                bottom: 30px;
            }
            #tlod            
            {
            position: absolute;
            top: 300px;
            left: 0;
            width: 100%;
            height: 1000px;
            border-radius: 25px;
            background-color: #ffffff;
            box-sizing: border-box;
            }



         }