.feature {
    background-image: url(/arch/collections/images/digital-collections-feature-afam50.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: grey;
    background-position: 0 29%;
    height: 400px;
}


.bottomShade {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.55);
}

h1 {
    margin-bottom: 0;
    color: white;
    padding-top: 1.5rem;
}

.feature span.h3 {
    color: white;
}

 a {
	 text-decoration: underline;
	 text-decoration-thickness: 1px;
}
 a.btn, .breadcrumb a, .nav-link {
	 text-decoration: none !important;
}

a.feature-caption {
    color: white;
    font-family: Futura, "futura_ptmedium", sans-serif;
    font-style: italic;
    position: absolute;
    bottom: 10px;
    right: 0;

}

.filter {
    background-color: #595A4A;
    color: white;
    padding: 10px 25px 15px 25px;
}

.filter button:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
}

.panel {
    margin-bottom: 1.5rem;
    margin-right: 10px;
}


.panel-item {
    position: relative;
    height: 100%;
    display: inline-block;
}

.panel-item img,
.panel-item source {
    max-width: 100%;
    height: auto;
}

.details {
    position: relative;
    padding: 10px;
    height: 100%;
    color: white;
    bottom: 0;
    width: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.8);

}

.panel-item:hover .details,
.panel-item:focus .details {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.80)), to(rgba(0, 0, 0, 0.80)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%);
}

a.panel-item {
    text-decoration: none;
}

.panel-title {
    color: white;
    letter-spacing: 1px;
    margin-bottom: .5em;
}

.subtitle {
    position: relative;
    bottom: 0;
    font-size: 18px;
    opacity: 1;
    overflow: hidden;
    -webkit-transition: opacity .7s ease;
    -moz-transition: opacity .7s ease;
    -o-transition: opacity .7s ease;
    transition: opacity .7s ease;
}

.all a:hover {
    text-decoration: none;
}

/*@media (min-width: 576px) and (max-width: 767px) {
    .container {
        max-width: 540px;
    }
}*/

@media (max-width: 991px) {
    .digital-content>div {
        margin-bottom: 1.5rem;
    }

}

@media (min-width: 992px) {
    .digital-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        display: grid;
        grid-gap: 30px;
        grid-template-columns: repeat(auto-fill, 360px);
    }

    .subtitle {
        opacity: 0;
    }

    .panel-item:hover .subtitle,
    .panel-item:focus .subtitle {
        opacity: 1;
    }

    .details,
    .subtitle {
        position: absolute;
    }

    .panel,
    .panel img,
    .panel source {
        border-radius: 4px;
    }

    .panel-title {
        margin-bottom: 0;
    }

    .details {
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.4);
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.70)), color-stop(32%, rgba(0, 0, 0, 0.2)));
        background: -o-linear-gradient(top, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.2) 32%);
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.2) 32%);
        -webkit-transition: background;
        -o-transition: background;
        transition: background;
    }


    .ooh {
        order: 1;

    }

    .crocker {
        order: 2;
    }

    .mitchell-oh {
        order: 3;
    }

    .gross {
        order: 4;
    }

    .dc {
        order: 5;
    }

    .bhi {
        order: 6;
    }

    .aoh {
        order: 7;
    }

    .trc {
        order: 8;
    }

    .afam50 {
        order: 9;
    }

    .mitchell-index {
        order: 10;
    }

    .jlc {
        order: 11;
    }

    .bp {
        order: 12;
    }

     .covid {
        order: 13;
    }

    .riker {
        order: 14;
    }

    .crowd {
        order: 15;
    }

    .webarchives {
        order: 16;
    }

    .suggest {
        order: 17;
    }

    .sca-exhibits {
        order: 18;
    }

    .mitchell-photos {
        order: 19;
    }

    .mitchell-memorabilia {
        order: 21;
    }

    .strout {
        order: 20;
    }

    .digital-content>div {
        align-self: flex-start;
    }

    .d-md-flex {
        display: -webkit-box;
        display: flex;
    }
}

.tall-panel {
    grid-row-end: span 2;
}

.wide-panel {
    grid-column-end: span 2;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .subtitle {
        font-size: 17px;
        line-height: 1.2;
    }

    .panel-title {
        font-size: 1.2em;
    }
}

@media (hover: none) and (pointer: coarse) {
    .subtitle {
        opacity: 1;
    }

    .details {
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.55)), to(rgba(0, 0, 0, 0.55)));
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.55) 100%);
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.55) 100%);
    }
}

@supports (display: grid) {
    .panel {
        margin-bottom: 0;
        margin-right: auto;
    }

    .all {
        order: 1;
    }

}


button.view-more[aria-expanded='true'] {
        display: none;
    }