.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.projekt {
    width: 31%;
    height: 240px;
    margin: 20px 20px 0 0;
    text-align: center;
    background-size: 130%;
    background-position: center center;
    position: relative;
    transition: background-size 1s;
}

#paramnezia {
    background-image: url("images/fader6.jpg");
}

#azvagyok {
    background-image: url("images/fader1.jpg");
}

#artformoney {
    background-image: url("images/money.jpg");
}

#kijarat {
    background-image: url("images/kijaratavaros.jpg");
}

#egymasmellett {
    background-image: url("images/fader11.jpg");
}

#halesz {
    background-image: url("images/fader8.jpg");
}

#sohatobbe {
    background-image: url("images/fader2.jpg");
}

#openpool {
    background-image: url("images/fader10.jpg");
}

#fok90 {
    background-image: url("images/fader4.jpg");
}

#szobemlek {
    background-image: url("images/fader3.jpg");
}

#makingbed {
    background-image: url("images/makbed.jpg");
}

#fenylab {
    background-image: url("images/fenylab.jpg");
}

#hexa {
    background-image: url("images/hexa.jpg");
}
#hullam {
    background-image: url("images/hullamlab.jpg");
}
#nadas {
    background-image: url("images/nadas.jpg");
}

.projekt a {
    background-color: rgba(245, 241, 236, 0.8);
    position: absolute;
    width: 100%;
    bottom: -20px;
    font-size: 24px;
    font-weight: bold;
    padding: 8px 30px;
}

.projekt:hover {
    background-size: 170%;
}


.galeria {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 20px auto;
}

.galeria>img {
    height: 200px;
    cursor: pointer;
    margin: 10px 20px 10px 0;
    transition: opacity 0.2s;
}

.galeria>img:hover {
    opacity: 70%;
}

/*MODAL*/
/* The Modal (background) */


#myModal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.93);
}

/* Modal Content (image) */
#modal-image {
    margin: auto;
    position: relative;
    display: block;
    height: 95%;
    max-width: 90%;
    animation-name: zoom;
    animation-duration: 0.6s;
}


@keyframes zoom {
    from {
        transform: scale(0.1)
    }

    to {
        transform: scale(1)
    }
}


#myModal div {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #f1f1f1;
    font-size: 18px;
    font-weight: normal;
}

/* gombok */

#myModal span {
    position: absolute;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: transform 0.3s;
}

#bezar {
    top: 15px;
    right: 35px;
}

#elozo {
    top: 50%;
    left: 35px;
    z-index: 2;
}

#kovetkezo {
    top: 50%;
    right: 35px;
    z-index: 2;
}

#myModal span:hover,
#myModal span:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}