#podpowiedzi {
    display: none;
    position: fixed;
    /* position: absolute; */
    right: -9%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 4vh;
    background: rgb(26, 26, 26);
    border-radius: 5px;
    width: 20%;
    height: 67%;
    z-index: 999;
}

#podpowiedzi img {
    margin-top: 2vh;
    border-radius: 5px;
}

#tekst {
    position: relative;
    top: 3vh;
}

.zamknij {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 84%;
    padding: 2vh;
    background: rgb(30,30,30);
    color: white;
    border-radius: 5px;
    transition: 0.3s;
}

.zamknij:hover {
    transition: 0.3s;
    background: rgb(137,36,36, 0.739);
}

#buttona {
    transition: 0.3s;
    color: rgb(137,36,36, 0.739);
}

#buttona:hover {
    transition: 0.3s;
    color: rgb(137,36,36);
}



@media(max-width: 1440px) {
    #podpowiedzi {
	width: 27%;
	right: -12%;
    }
}

@media(max-width: 1024px) {
    #podpowiedzi {
	width: 40%;
	right: -18%;
    }
}


@media(max-width: 600px) {
    #podpowiedzi {
	width: 60%;
	right: -26%;
    }
    #tekst {
	font-size: 15px;
    }
}


@keyframes fadeInDown {
    0% {
       opacity: 0;
       top: 10%;
    }
    100% {
       opacity: 1;
    }
 } 

 @keyframes fadeOutUp {
    0% {
       opacity: 1;
    }
    100% {
       opacity: 0;
       top: 10%;
    }
 } 

 @keyframes fadeInLeft {
    0% {
       opacity: 0;
       right: -30%;
    }
    100% {
       opacity: 1;
    }
 } 

 @keyframes fadeOutRight {
    0% {
       opacity: 1;
    }
    100% {
       opacity: 0;
       right: -30%;
    }
 } 


 @keyframes fadeIn {
    0% {
       opacity: 0;
    }
    100% {
       opacity: 1;
    }
 } 

 @keyframes fadeOut {
    0% {
       opacity: 1;
    }
    100% {
       opacity: 0;
    }
 }