.squared {
    position: relative;
    padding:10px 10px 0 10px;
}
.squared::after {     transition:opacity 0.2s ; 
    will-change: opacity; z-index: 1;
    position: absolute;
    content: "";
    display: block;
    top: 0;
    left: 10px;
    bottom: 10px;
    width: calc( 100% - 20px); 
    height: 100%;
    background: #0000 -webkit-gradient(linear, left top, left bottom, from(#0000), to(#01010199)) 0% 0% no-repeat padding-box;
    background: transparent -o-linear-gradient(top,  #00000000 0%,#00000000 70%, #000000cc 90%, #000000ff 100%) 0% 0% no-repeat padding-box;
    background: #0000 linear-gradient(180deg, #00000000 0%,#00000000 70%, #000000cc 90%, #000000ff 100%) 0% 0% no-repeat padding-box;
} 

.x-is-not-active .squared::after {opacity:1}

.squared:hover::after { opacity:0.5}

.x-is-active .squared::after { opacity:1 !important}

.squared .x-thumbnail-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:10;


}

.squared:hover .x-thumbnail-content {
    opacity: 1;
}

.xpanda h3 {
    font-size: 24px;
    margin: 0;
    padding: 0 20px 0px;
    font-weight: 500;
    color:#fff;
}
.x-info h3 {padding:0; font-size:28px; margin:0 0 10px}

.xpanda h4 {
    font-size: 18px;
    margin: 0;
    padding: 0 20px 10px;
    font-weight: 100;
    color:#fff;
    font-family: 'Lora'
}

.x-item a {
    color: #fff !important;
    text-decoration: none;
}

.xpanda p {
    margin: 0 0 15px;
}
.x-info, .x-info p, .x-info li {line-height:1.6; font-size:18px;}
.xpanda img {
    width: 100% !important;
    min-width: 100% !important
}

.x-item-wrap {
    margin: 0 !important;
    line-height: 0;
}

.x-item img {
    min-width: 100% !important;
}

.x-initiated .x-item > img {
    padding-bottom: 0
}

@media (min-width: 769px) {
    .x-initiated .x-item:hover > img {
        -webkit-filter: grayscale(0);
        filter: none;
    }
     .x-initiated .x-item:focus-within > img {
        -webkit-filter: grayscale(0);
        filter: none;
    }
}

.x-initiated .x-item.x-is-active > img {
    -webkit-filter: grayscale(0);
    filter: none;
}


.x-is-active .squared::after {opacity:0.5}

.x-initiated .x-item.x-is-not-active {
    filter: gray;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    ;opacity: 0.5
}

.x-initiated .x-item.x-is-not-active:hover {
    -webkit-filter: grayscale(0);
    filter: none;
    opacity: 1;
    transition: opacity .3s
}

.x-initiated .x-item.x-is-not-active:focus-within {
    -webkit-filter: grayscale(0);
    filter: none;
    opacity: 1;
    transition: opacity .3s
}

.x-placeholder.x-is-expanded p {
    line-height: 1.6
}

.x-placeholder.x-is-expanded .x-info h4 {
    font-size: 1.6rem;
}

.x-placeholder .x-prev {
    display:none;
}

.x-placeholder .x-next {
    display:none;
}

.x-placeholder .x-close {
    background-color:  #173380; 

.x-arrow, .x-close {
    z-index: 1 !important
}

.x-initiated .x-item .squared { max-height: 300px; overflow: hidden; cursor: pointer; transition: max-height 0.2s; }
.x-initiated .x-item.x-is-active .squared { max-height: 340px; margin-bottom:-50px; z-index:10 }