.slick-slide {
    outline: none;
}

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

    position: relative;

    width: 500px;
    height: 500px;
}

.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 {
    width: 500px;
}

.slick-selector a {
    height: 100px;
    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: 500px; height: 500px; }
.slick-selector { width: 500px; }
.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; }
}
*/