/*
FA DIGITAL WERBEKANALFINER_TABLE.CSS (only on is_page(42388))
*/

/*WERBEKANALFINDER TABLE */
#top .channelfinder-table {background:#ebebeb; margin:50px auto 15px; border-radius:3px; position:relative}
#top .channelfinder-table .scrollwrapper {overflow-x:hidden}
#top .channelfinder-table .scrollwrapper::after {content:''; top:0; right:0; opacity:1; bottom:0; width:180px; background:linear-gradient(90deg, rgba(248,248,248,0) 0%, rgba(248,248,248,0.5) 50%, rgba(248,248,248,1) 100%); z-index:10; position:absolute; transition:all .25s ease-in-out}
#top .channelfinder-table .scrollwrapper.hide-gradient::after {display:none; opacity:0; transition:all .25s ease-in-out}
#top .channelfinder-table .channelfinder-row {white-space:nowrap; display:block; margin:0; font-size:0; width:100%; text-align:left}
#top .channelfinder-table .channelfinder-row:nth-child(even) .channelfinder-column {background:#fff}
#top .channelfinder-table .channelfinder-row:nth-child(odd) .channelfinder-column {background:#fafafa}
#top .channelfinder-table .channelfinder-row .channelfinder-column {display:inline-block; vertical-align:top; position:relative; user-select:none; text-align:center; min-height:100px; border-right:1px solid #ebebeb; width:100px; white-space:wrap; padding:0}
#top .channelfinder-table .channelfinder-row .channelfinder-column img {display:block; width:60px; height:60px; margin:20px; position:relative; object-fit:contain; object-position:center}
#top .channelfinder-table .channelfinder-row .channelfinder-column:last-child {border-right:0}
#top .channelfinder-table .channelfinder-head {width:180px; position:absolute; left:0; z-index:10; border-right:2px solid #002c5c}
#top .channelfinder-table .channelfinder-head::before {content:'Ziele'; position:absolute; top:-35px; color:#002c5c; font-size:20px; z-index:100}
#top .channelfinder-table .channelfinder-head .channelfinder-row {white-space:normal; border-color:#d4e7f8; border-bottom-color:#fff; display:block}
#top .channelfinder-table .channelfinder-head .channelfinder-row:last-child {border-bottom-color:#d4e7f8}
#top .channelfinder-table .channelfinder-head .channelfinder-row .channelfinder-column {width:100%; padding:15px; text-align:left; min-height:100px; background:#d4e7f8; color:#002c5c; transition:all .15s ease-in-out; border-bottom:1px solid #fff}
#top .channelfinder-table .channelfinder-head .channelfinder-row .channelfinder-column i {position:absolute; width:40px; height:40px; border-radius:150px; background:#fff; line-height:40px; padding:0; left:5px; top:50%; transform:translateY(-50%); font-size:18px}
#top .channelfinder-table .channelfinder-head .channelfinder-row .channelfinder-column p {position:absolute; top:50%; transform:translateY(-50%); left:55px; margin:0; font-size:12px; line-height:16px; font-weight:500}
#top .channelfinder-table .channelfinder-body {margin-left:180px}
#top .channelfinder-table .channelfinder-body::before {content:'Werbekanäle'; position:absolute; top:-35px; color:#002c5c; font-size:20px; z-index:100}

#top .channelfinder-table .scroll-btn {position:absolute; user-select:none; cursor:pointer; top:50%; transform:translateY(-50%); background:#002c5c; color:#fff; border:0; padding:10px; z-index:20}
#top .channelfinder-table .scroll-btn.left {left:180px; border-top-right-radius:10px; border-bottom-right-radius:10px}
#top .channelfinder-table .scroll-btn.right {right:0; border-top-left-radius:10px; border-bottom-left-radius:10px}
#top .channelfinder-table .scroll-btn:is(:hover,:focus) {background:#a7d6f4; color:#002c5c}

/*RESPONSIVE: MAX-WIDTH 989px*/
@media only screen and (max-width:989px) {
    /*WERBEKANALFINDER TABLE */
    .responsive #top .channelfinder-table .scrollwrapper::after {display:none}
    .responsive #top .channelfinder-table .channelfinder-row .channelfinder-column {min-height:90px; width:90px}
    .responsive #top .channelfinder-table .channelfinder-row .channelfinder-column img {width:50px; height:50px; margin:20px}
    .responsive #top .channelfinder-table .channelfinder-head {width:120px}
    .responsive #top .channelfinder-table .channelfinder-head .channelfinder-row .channelfinder-column {width:100%; overflow:hidden; max-height:90px; display:block; padding:15px 0}
    .responsive #top .channelfinder-table .channelfinder-head .channelfinder-row .channelfinder-column i {display:none}
    .responsive #top .channelfinder-table .channelfinder-head .channelfinder-row .channelfinder-column p {left:5px}
    .responsive #top .channelfinder-table .channelfinder-body {margin-left:120px; overflow-x:auto}
    .responsive #top .channelfinder-table :is(.channelfinder-body,.channelfinder-head)::before {font-size:16px}
    .responsive #top .channelfinder-table .scroll-btn {padding:5px}
    .responsive #top .channelfinder-table .scroll-btn.left {left:120px}
}