#gallery:not(.accommodation) {
    padding:260px 0 60px
}

#gallery.accommodation {
    padding:60px 0
}

#gallery.accommodation h2 {
    margin-bottom:25px
}

#gallery:not(.accommodation):before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .65;
    background:url(../uploads/bg-left.jpg)
}

#gallery h2, .filters-button-group {
    text-align:center
}

.filters-button-group {
    margin:20px 0 10px
}

.filters-button-group li {
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;
    color: #788196;
    font-weight: 600;
    letter-spacing: 1.4px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    border-bottom: solid 1px transparent;
    padding:5px
}

.filters-button-group li.is-checked {
    color: #1d647e;
    border-color:#1d647e
}

.effect-sizer {
    margin-bottom:0 !important
}

.effect-inner, .effect-inner img {
    display:block
}

.effect-inner img {
    width: 100%;
    position: absolute;
    object-fit: cover;
    min-height: 100%;
    min-width: 100%;
    object-position: center center;
    top: 0;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition:all 0.3s ease
}

.effect-inner:hover img {
    min-height:103%
}

.effect-inner span {
    position: absolute;
    color: #fff;
    display: block;
    z-index: 10;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    top: calc(50% + 120px);
    font-weight: 700;
    letter-spacing: 1.4px;
    display:none
}

.effect-inner span, .effect-inner:before {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    opacity:0
}

.effect-inner:hover span, .effect-inner:hover:before {
    opacity:1
}

.effect-inner:before {
    content: '';
    position: absolute;
    display: block;
    z-index: 9;
    left: 40px;
    right: 40px;
    top: 40px;
    bottom: 40px;
    background:url(../uploads/zoom-in.svg) center center no-repeat rgba(72, 77, 90, .2)
}

.effect-deco {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events:none
}

.effect-deco path {
    fill: none;
    stroke: #fff;
    stroke-width:2px
}

.effect-reveal {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    background-color:rgba(255, 255, 255, .7)
}

.grid-sizer {
    width:25%
}

.effect-item {
    width: 25%;
    padding: 5px;
    box-sizing: border-box;
    height:auto
}

.effect-loading .effect-item {
    visibility:hidden
}

.width-big {
    width:50%
}

.effect-inner {
    padding-top: 100%;
    position: relative;
    overflow:hidden
}

.width-big .effect-inner {
    padding-top:calc(50% - 5px)
}

.height-big .effect-inner {
    padding-top:calc(200% + 10px)
}

.width-big.height-big .effect-inner {
    padding-top:100%
}

#gallery + section.row {
    margin-top:60px
}

@media only screen and (max-width: 1024px) {
    #gallery:not(.accommodation) {
        padding:90px 0 40px
    }

    .effect-inner:before {
        left: 20px;
        right: 20px;
        top: 20px;
        bottom: 20px;
        background-size:30px auto
    }

    .effect-inner:hover img {
        min-height:100%
    }
}

@media only screen and (max-width: 990px) {
    #gallery + section.row {
        margin-top:40px
    }
}

@media only screen and (max-width: 660px) {
    .grid-sizer, .effect-item, .width-big {
        width:50%
    }

    .width-big .effect-inner {
        padding-top:calc(70% - 5px)
    }

    .height-big .effect-inner {
        padding-top:calc(160% + 10px)
    }

    .filters-button-group li {
        padding-top: 0;
        margin-top:10px
    }

    .effect-inner:before {
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
        background-size:25px auto
    }
}

@media only screen and (max-width: 590px) {
    #gallery + section.row {
        margin-top: 0
    }
}