.slick-selector { width: 600px; }
.fancyBox-target { width: 600px; height: 600px; }
.slick-selector .slick-track { height: 120px; }


.slick-slide {
    outline: none;
}

.fancyBox-target {
    display: flex;
    flex-wrap: wrap;

    position: relative;
}

.fancyBox-zoom-icon {
    bottom: 0;
    right: 0;

    background-color: #f0f0f0de;

    position: absolute;

    width: 45px;
    height: 45px;

    text-align: center;

    pointer-events: none;
}
.fancyBox-zoom-icon i {
    font-size: 20px;
    line-height: 45px;
    color: #919191;
}

.fancyBox-target a {
    width: 100%;
    height: 100%;

    display: grid;
    grid-auto-flow: column;

    cursor: pointer;
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;

    transition: opacity 1s ease-out;

}

.fancyBox-target a img {
    width: 100%;
    vertical-align: middle;
    align-self: center;
}

.slick-selector .slick-track {
    display: flex;
    align-items: flex-start;
}

.slick-selector a {
    width: 100px;

    display: grid !important;
    grid-auto-flow: column !important;

    cursor: pointer;
}
.slick-selector a img {
    width: 100%;
    vertical-align: middle;
    align-self: center;
}

/*  # # # # #  # # # # # # # # # #  */
/*  # # # # # centerMode # # # # #  */
/*  # # # # # # # # # #  # # # # #  */

/*
    centerMode Állításával a ".fancyBox-targeta img" (Nagykép) méretét és a ".slick-selector a" kisképek méretét
    kell álítani hogy egy szintben legyenek. Díszítés esetén a marginnal és paddinggal kell próbálkozni. Media rule ok esetén is.
    Ha ".slick-selector a" height-et autóra vesszük akkor nincs lehetőség díszítésre viszont 100% responsive lesz! (Egyszerübb lesz a media rule csak a szélességeket kell állítani)
*/

/* * * * centerMode: false * * * */
/*
.fancyBox-target a img {
    padding: 5px;
}
.slick-selector a {
    padding: 5px 5px;
}
*/

/* * * * centerMode: true * * * */

.fancyBox-target a img {
    padding: 0px;
}
.slick-selector a {
    /*transform: scale(0.95);*/
    margin: 5px 5px;
}


/*  # # # # #  # # # # # # # # # #  */
/*  # # # # #  MOD         # # # #  */
/*  # # # # # # # # # #  # # # # #  */

/*
.slick-selector a {

    margin-top: 2px;
    border: 1px solid #dadada;
}
*/

/*  # # # # #  # # # # # # # # # #  */
/*  # # # # #  media rules # # # #  */
/*  # # # # # # # # # #  # # # # #  */

/*
.fancyBox-target { width: 450px; height: 450px; }
.slick-selector { width: 450px; }
.slick-selector a { height: 120px; width: 120px; }

@media only screen and (max-width: 1200px) {
    .fancyBox-target { width: 360px; height: 360px; }
    .slick-selector { width: 360px; }
    .slick-selector a { height: 90px; width: 90px; }
}

@media only screen and (max-width: 992px) {
    .fancyBox-target { width: 280px; height: 280px; }
    .slick-selector { width: 280px; }
    .slick-selector a { height: 100px; width: 100px; }
}

@media only screen and (max-width: 767px) {
    .fancyBox-target { width: 500px; height: 500px; }
    .slick-selector { width: 500px; }
    .slick-selector a { height: 140px; width: 140px; }
}
@media only screen and (max-width: 578px) {
    .fancyBox-target { width: 100%; height: 500px; }
    .slick-selector { width: 100%; }
    .slick-selector a { height: 140px; width: 140px; }
}
*/