@import url("reference.css");


.page-title{
    font-size:2em;
    margin:0 0 0 .5em;
    padding:.5em .75em;
    border-radius: .125em;
    display: inline-block;
    background:var(--color-blueDark);
    color:#fff;
    transform:rotate(-1deg);
    position: relative;
    z-index: 2;
}
.page-description{
    max-width:60ch;
    padding:1em;
    line-height: 1.4;
}

.logos{}
.logos .logo-list{
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: center;
    gap:0;
}
.logos .logo-list li{
    flex:0 0 12em;
    padding:2em 1em;
    display: flex;
    flex-flow: column;
    align-items: stretch;
    justify-content: center;
    border:none;
    border-top:1px solid rgba(0,0,0, 0.15);

    background-color: var(--color-beige);
    margin-left: -1px;
    margin-top:-1px;
    gap:.75em;
    color:#000;
}
.logos .logo-list li:hover{
    filter:invert(1);
}

.logos .logo-list li .graphics{
    display: flex;
    gap:1em;
    justify-content: center;
}


.logos .logo-list li .graphic{
    flex:1 1 50%;
}

.logos .logo-list li .graphic:nth-child(2){
    filter: invert(1);
}


.logos .logo-list li .graphic img{
    display: block;
    width:100%;
    max-height:3.5em;
    object-fit: contain;
    object-position: right;
    filter:saturate(0);
    mix-blend-mode:  multiply;
}
.logos .logo-list li:hover img{

}
.logos .logo-list li .graphic:nth-child(2) img{
    object-position: left;
}

.logos .logo-list li h3{
    font-size:.75em;
    text-align: center;
}


@media (max-width: 768px) {
    .logos .logo-list li{
        flex:0 0 25%;
        padding:2em 1em;

    }
}
@media (max-width: 480px) {
    .logos .logo-list li{
        flex:0 0 33%;
        padding:2em 1em;

    }
}
@media (max-width: 375px) {
    .logos .logo-list li{
        flex:0 0 50%;
        padding:2em 1em;

    }
}





@page {
    size: auto;   /* auto is the initial value */
    margin: 1cm 1cm 1cm 1cm;
}
@media print{
    .no-print, .no-print * { display: none !important; }

    header,
    .breadcrumbs,
    footer,
    .btn-row,
    .table-controls,
    .page-title,
    .page-description
    {display: none;}
    html, body{
        background:#fff;
    }

    body{
        margin:1cm;
    }
    main{
        margin:0;
        padding:0;
    }

    .logos .logo-list li{
        background-color: #fff;
        page-break-inside: avoid;
        flex:0 0 20% !important;
        padding:1em;
    }

    .logos::before{
        content:"reference.huntingtonaudio.com";
        position: relative;
        display: block;
        right:0;
        text-align: right;
        padding-bottom:.5em;
    }

}