body {
    margin: 0;
}
blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
    margin: 0
}


html {
    font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    line-height: 1.5
}
.container {
    width: 100%
}
.image-listing-filters {
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 5;
    right: 0;
    transform: translateZ(0);
    transition: all var(--nav-panel-animation-duration) ease
}

body.nav-panel--expanded .image-listing-filters {
    visibility: hidden;
    opacity: 0
}

.image-listing-filters a {
    background-color: #fff;
    padding: .75rem 1rem;
    display: block;
    text-decoration: none;
    cursor: pointer;
    color: #00303f;
    color: var(--colors-blue);
    border: none;
    text-transform: uppercase;
    font-size: 12px;
    font-size: var(--font-size-small);
    letter-spacing: 1pt
}

.image-listing-filters__trigger-wrap {
    text-align: left;
    background-color: #fff;
    position: relative;
    z-index: 6;
    padding: 1rem
}

.image-listing-filters__trigger-wrap a {
    width: 100%;
    position: relative;
    padding-right: 55px;
    text-align: left
}

.image-listing-filters__trigger-wrap span:nth-child(2):not(:empty):before {
    content: ": "
}

.image-listing-filters__trigger-wrap a i {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 25px;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: transform .2s
}


figcaption {
    height: 120px;
}

#ajaxed figcaption * {
    direction: ltr !important;
    text-align: left !important;
}

#ajaxed figcaption p {
    display: block;
    direction: ltr !important;
    text-align: left !important;
}

.image-listing .item strong {
    display: block;
    float: left !important;
    margin-left: 0 !important;
}



.image-listing-filters.is-open .image-listing-filters__trigger-wrap a i {
    transform: rotate(90deg)
}

.image-listing-filters__trigger {
    --btn-border-width: 1px;
    --btn-font-size: var(--font-size-small);
    --btn-text-color: var(--colors-blue);
    --btn-border-color: var(--colors-blue);
    font-size: 1rem;
    font-size: var(--btn-font-size);
    border: none;
    border-bottom: var(--btn-border-width) solid var(--btn-border-color);
    padding: .5rem 2.5rem .5rem 1rem;
    font-weight: 400;
    color: #fff;
    color: var(--btn-text-color);
    text-align: left;
    width: 100%;
    max-width: 300px;
    text-transform: uppercase;
    letter-spacing: 1pt;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20fill%3D%22%2300303F%22%20d%3D%22M7.41%207.84L12%2012.42l4.59-4.58L18%209.25l-6%206-6-6z%20%22/%3E%3C/svg%3E")
}

.image-listing-filters__list-wrap {
    position: absolute;
    perspective: 2000px;
    z-index: 7;
    pointer-events: none;
    top: calc(100% - 1rem + 1px);
    width: 100%;
    max-width: 300px;
    left: 1rem
}

.image-listing-filters__list-wrap ul {
    transition: transform .2s ease-in-out,visibility .2s,opacity .1s .1s;
    opacity: 0;
    transform: rotateX(-70deg);
    transform-origin: top center;
    visibility: hidden;
    pointer-events: all
}
.my_section {
    background-color: #fff;
}

@media (max-width: 1199px) {
    .image-listing-filters.is-open ul {
        transition:transform .2s ease-in-out,visibility .2s,opacity 50ms 0ms;
        opacity: 1;
        transform: rotateX(0);
        visibility: visible
    }
}

.image-listing-filters ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #053341;
    z-index: 2
}

.image-listing-filters li {
    flex: 0 1 auto;
    text-transform: uppercase;
    transition: max-width .3s ease-in-out
}

.image-listing-filters li span {
    display: inline-block;
    position: relative
}

.image-listing-filters li.is-active span:before {
    content: "";
    position: absolute;
    height: 1px;
    background: #00303f;
    background: var(--colors-blue);
    width: 100%;
    top: calc(100% + 2px);
    left: 0
}

.image-listing {
    /* --colors-heading:#fff; */
    margin: auto;
    z-index: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch
}

.image-listing .item {
    width: 100%;
    flex: 0 1 auto;
    position: relative;
    overflow: hidden
}

@media (min-width: 480px) {
    .image-listing .item {
        width:50%
    }
}

@media (min-width: 768px) {
    .image-listing .item {
        width:33.3333333333%
    }
}

@media (min-width: 1024px) {
    .image-listing .item {
        width:25%;
        max-height:230px;
        
    }
}

.image-listing .item a:after {
    display: block;
    width: 100%;
    padding-bottom: 100%;
    content: "";
    background: rgba(0,0,0,.2);
    left: 0;
    top: 0;
    position: relative;
    z-index: 2;
    opacity: 1;
    transition: all .2s ease-in-out
}

.image-listing .item a:before {
    content: "";
    background: url(./images/cross.svg) no-repeat 50% 30%;
    background-size: 100%;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: -40px;
    z-index: 2;
    transition: transform .7s cubic-bezier(0,.98,.91,.99)
}

.image-listing .item:hover a:after,.image-listing .item:hover a:before {
    opacity: 1;
    visibility: visible
}

.image-listing .item:hover a:before {
    transform: scale(.3)
}

.image-listing .item:hover a:after {
    /* background: rgba(229,0,4,.6); */
    background: rgb(230,99,34,.6);
}

.image-listing .item:hover figcaption:after {
    height: 100%
}

.image-listing .item:hover figcaption p {
    opacity: 1;
    transform: translateY(0)
}

.image-listing .item:hover figcaption strong {
    opacity: 1;
    transform: translateY(0)
}

.image-listing .item img,.image-listing .item picture {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    height:100%;

}

.image-listing .item picture.align--center img {
    -o-object-position: center;
    object-position: center
}

.image-listing .item picture.align--left img {
    -o-object-position: left center;
    object-position: left center
}

.image-listing .item picture.align--right img {
    -o-object-position: right center;
    object-position: right center
}

.image-listing .item figcaption {
    position: absolute;
    bottom: 0;
    padding: 20px;
    z-index: 3;
    width: 100%;
    background-color: transparent;
    box-sizing: border-box;
    transition: all .5s cubic-bezier(0,.06,.07,1.14)
}

.image-listing .item figcaption:after {
    display: block;
    height: 0;
    width: 100%;
    content: "";
    background-color: #e86b2c;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: height .3s cubic-bezier(0,.06,.07,1.14)
}

.image-listing .item h3 {
    line-height: 1.4;
    margin: 0;
    position: relative;
    z-index: 10
}

.image-listing .item p,.image-listing .item strong {
    color: #fff;
    margin-bottom: 0;
    opacity: 0;
    position: relative;
    z-index: 10;
    transition: all .8s cubic-bezier(0,.06,.07,1.14);
    transform: translateY(-8px)
}

.image-listing .item p {
    float: left
}

.image-listing .item strong {
    float: right;
    margin-left: 3ch;
    /* text-transform: uppercase; */
    line-height: 1.6
}

.image-listing .item a {
    color: #fff;
    text-decoration: none!important;
    display: block;
    height: 100%
}


@media (max-width: 480px) {
    h3 {
        font-size:1.17em!important
    }

    .image-listing figcaption {
        padding: 5px 10px!important
    }

    .image-listing p,.image-listing strong {
        margin-top: 0;
        font-size: .75em
    }

    .image-listing h3 {
        font-size: .75em
    }
}