.material-icons{
    vertical-align:-6px
}
    div.carousel
    {
        background: linear-gradient(135deg, #f8a849, #074793, #303743 80%);
        animation: gradient-move 2.5s ease infinite;
        background-size: 200% 200%;
        width:100%;
        min-width:320px;
        max-width:-webkit-fill-available;
        /* background-color:#eee; */
        padding:2%;
        margin-bottom: 15px;
        
        
    }
div.carousel>.header
{   display: none !important;
    width:100%;
    margin:0 0 20px;
    display:flex;
    align-items:center
}
div.carousel>.header .icon
{
    display:inline-block;
    background-color:#2770a0;
    color:#fff;
    padding:7px 12px;
    border-radius:5px;
    margin-right:20px
}
div.carousel>.header .title
{
    color:#2770a0;
    font-size:18px;
    font-weight:400;
    margin:0}
    div.carousel>.header .subtitle
    {
        color:#a0a0a0;
        font-size:14px;
        margin:0
    }
    div.carousel>.cards-container
    {
        position:relative;
        width:100%;
        overflow:hidden;
    }
    div.carousel>.cards-container>.previous
    {
        position:absolute;
        left:0;width:40px;
        color:#fff;
        background-color:rgba(0,0,0,.4);
        display:flex;
        justify-content:center;
        align-items:center;
        transition:all .3s;text-decoration:none;
        height: -webkit-fill-available !important;
    }
    div.carousel>.cards-container>.previous.hidden
    {opacity:0;
        transform:translateX(-40px)
    }
        div.carousel>.cards-container>.next
        {
            position:absolute;
            right:0;
            width:40px;
            color:#fff;
            background-color:rgba(0,0,0,.4);
            display:flex;
            justify-content:center;
            align-items:center;
            transition:all .3s;
            text-decoration:none;
            height: -webkit-fill-available !important;
        }
        div.carousel>.cards-container>.next.hidden
        {opacity:0;
            transform:translateX(40px)
        }
        div.carousel>.cards-container>.cards-scroll
        {
            position:absolute;
            top:8px;
            left:0;
            display:flex;
            transition-timing-function:ease-out;
            transition-duration:.4s
        }
        div.carousel>.cards-container>.cards-scroll .collection
        {
            text-align:center
        }
        /* div.carousel>.cards-container>.cards-scroll .collection .sublayer
        {
            height:3px;
            margin:1px auto;
            background-color:#fff;
            box-shadow:1px 1px 3px rgba(0,0,0,.2) 
        
    } */
    div.carousel>.cards-container>.cards-scroll .collection .sublayer.level1
    {width:98%}
    
    div.carousel>.cards-container>.cards-scroll .collection .sublayer.level2
    {width:94%}
    div.carousel>.cards-container>.cards-scroll .card
    {
        flex-shrink:0;
        display:inline-block;
        background-color:#fff;
        box-shadow:1px 1px 3px rgba(0,0,0,.2);
        overflow:hidden;
        border-start-start-radius: 60px;
    border-end-end-radius: 60px;
    }
    div.carousel>.cards-container>.cards-scroll .card>.img
    {
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
        background-color:#ddd;
        background-size:cover;
        
        background-repeat: no-repeat;
        height: -webkit-fill-available !important;
    }
    div.carousel>.cards-container>.cards-scroll .card>.img.placeholder
    {
        background:linear-gradient(90deg,#ddd 8%,#eee 25%,#ddd 50%);
        animation:backgroundPulse forwards 7s linear infinite
    }
    div.carousel>.cards-container>.cards-scroll .card>.img>.type
    {
       display: none;
        /* display:inline-block; */
        background-color:rgba(0,0,0,.6);
        color:#fff;
        margin:0;
        padding:1px 5px;
        font-size:10px;
        font-weight:700
    }
    div.carousel>.cards-container>.cards-scroll .card>.img>.duration
    {
        
    display: none;
    }
    div.carousel>.cards-container>.cards-scroll .card>.caption
    {
        display: none;
        padding:14px;
        color:#2770a0;
        font-size:12px;
        text-transform:capitalize
    }
    div.carousel>.cards-container>.cards-scroll .card>.caption>.placeholder
    {
        display:inline-block;
        background-color:#ddd;
        background:linear-gradient(90deg,#ddd 8%,#eee 25%,#ddd 50%);
        height:14px;
        margin:4px;
        animation:backgroundPulse forwards 7s linear infinite
    }
    @keyframes backgroundPulse
    {
        0%
        {background-position:0 0}
        100%
        {background-position:100em 0}
    }


    @media (min-width: 769px) {
        div.carousel>.cards-container
        {
            height: 350px !important;
        }
        div.carousel>.cards-container>.cards-scroll .card
        {
            width: 360px !important;
        height: 342px !important;
        }
    }