﻿.grid-item-container {
    position: relative;
    margin-bottom: 1.5rem;
}

    .grid-item-container .channels-block {
        max-height: 440px;
        position: relative;
        cursor: pointer;
    }

        .grid-item-container .channels-block .lifter-box {
            transition: margin .4s ease-in-out;
        }

.header-block {
    position: relative;
    widht: 100%: display: block;
}

    .header-block .responsive-image {
        background-color: #c4c4c4;
        padding-top: 56.25%;
        position: relative;
    }

        .header-block .responsive-image .image {
            object-fit: cover;
            object-position: center;
            font-family: "object-fit: cover; object-position: center;";
            height: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            transition: all .1s ease-in-out;
            width: 100%;
            max-width: 100%;
            display: block;
            border-style: none;
        }

.article-block-key-titles {
    background-color: #0a0c11;
    padding-top: 16px;
    transition: padding .4s ease-in-out, background .2s linear .2s;
    display: flex;
}

    .article-block-key-titles .text-holder {
        width: 90%;
        max-width: 90%;
        padding-left: 10px;
    }

        .article-block-key-titles .text-holder .label {
            color: #fff;
            font-size: 1.2rem;
            line-height: 1.3333333333em;
            letter-spacing: 2px;
            margin-bottom: 8px;
            font-weight: 500;
            margin-top: 0;
            transition: color .2s linear .2s;
            display: block;
            text-align: left;
            padding: 0;
            margin-bottom: 0;
        }
.article-block-key-titles .text-holder p {
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.3333333333em;
    letter-spacing: 2px;
    margin-bottom: 8px;
    font-weight: 500;
    margin-top: 0;
    transition: color .2s linear .2s;
    display: block;
    text-align: left;
    padding: 0;
    margin-bottom: 0;
}

        .article-block-key-titles .text-holder h3 {
            background-color: #17126e;
            color: #90e4e7;
            text-transform: uppercase;
            letter-spacing: .25em;
            font-size: 1.5em;
            line-height: 1.0833333333em;
            display: inline;
            font-weight: 700;
            margin: 0;
            display: inline-block;
        }

    .article-block-key-titles .item-brand-logo {
        max-width: 137px;
        width: 64px;
        height: 48px;
        margin-left: 8px;
        padding-top: 0;
        background-size: 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        height: 48px;
        text-indent: -9999px;
    }

        .article-block-key-titles .item-brand-logo.apple-tv {
            background-image: url('https://productions.bbcstudios.com/_next/static/media/patch-200.a15f4e6a8048839db03f22bfaeeedd5f.png');
        }

.grid-item-container .channels-block:hover, .grid-item-container .channels-block:focus {
    box-shadow: none;
}

    .grid-item-container .channels-block:hover .lifter-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: -15px -15px -30px;
        z-index: 1;
    }

    .grid-item-container .channels-block:hover .article-block-key-titles {
        background-color: #fff;
        box-shadow: inset 0 4px 0 #fff;
        padding: 19px 10px 15px 16px;
    }

    .grid-item-container .channels-block:hover .label {
        color: #000;
    }
.grid-item-container .channels-block:hover p {
    color: #000;
}

    .grid-item-container .channels-block:hover .text-holder {
        padding-left: 0;
    }

.multi2Item-carousel .carousel-control {
    width: 45px;
    background-color: #000;
    opacity: 1;
    height: 42px;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    border-color: #fff;
}

    .multi2Item-carousel .carousel-control.left {
        right: 36px;
        left: auto;
        background: #fff;
    }

    .multi2Item-carousel .carousel-control.right {
        right: -10px;
        background: #000;
    }


.multi2Item-carousel .cloneditem-1,
.multi2Item-carousel .cloneditem-2,
.multi2Item-carousel .cloneditem-3 {
    display: none;
}

.carousel .item .col-xs-12 {
    padding: 6px;
}



@media all and (min-width: 768px) {

    .multi2Item-carousel .carousel-inner .cloneditem-1 {
        display: block;
    }
}

@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
    .multi2Item-carousel .carousel-inner > .item.active.right,
    .multi2Item-carousel .carousel-inner > .item.next {
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
        left: 0;
    }

    .multi2Item-carousel .carousel-inner > .item.active.left,
    .multi2Item-carousel .carousel-inner > .item.prev {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        left: 0;
    }

        .multi2Item-carousel .carousel-inner > .item.left,
        .multi2Item-carousel .carousel-inner > .item.prev.right,
        .multi2Item-carousel .carousel-inner > .item.active {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            left: 0;
        }
}

@media all and (min-width: 992px) {

    .multi2Item-carousel .carousel-inner .cloneditem-2,
    .multi2Item-carousel .carousel-inner .cloneditem-3 {
        display: block;
    }
}

/* @media all and (min-width: 992px) and (transform-3d),
all and (min-width: 992px) and (-webkit-transform-3d) {
   .multi2Item-carousel .carousel-inner > .item.active.right,
   .multi2Item-carousel .carousel-inner > .item.next {
      -webkit-transform: translate3d(16.6%, 0, 0);
      transform: translate3d(16.6%, 0, 0);
      left: 0;
   }
   .multi2Item-carousel .carousel-inner > .item.active.left,
   .multi2Item-carousel .carousel-inner > .item.prev {
      -webkit-transform: translate3d(-16.6%, 0, 0);
      transform: translate3d(-16.6%, 0, 0);
      left: 0;
   }
   .multi2Item-carousel .carousel-inner > .item.left,
   .multi2Item-carousel .carousel-inner > .item.prev.right,
   .multi2Item-carousel .carousel-inner > .item.active {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      left: 0;
   }
} */

/* @media only screen and (max-width: 992px) {
   .carousel .item .col-xs-12:nth-last-child(-n+2) {
      display: block;
   }
} */
