.sidebar-overlay{
    @extend %overlay;
    display: flex;
    justify-content: flex-end;

    &.open{
        .sidebar-outer{
            animation: slide-right-in-transition;
            animation-duration: 0.4s;
            animation-delay: 0.2s;
            animation-fill-mode: both;
        }
    }
}

.sidebar-outer{
    width: 35%;
    max-width: 42rem;
    height: 100%;
    box-shadow: 0 0 2.1rem -0.4rem #626262;
    background: #fff;
    animation: slide-right-out-transition;
    //transform: translate3d(100%, 0, 0);
    animation-duration: 0.4s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
}

.sidebar-outer-header{
    width: 100%;
    height: 5.8rem;
    color: #fff;
    background: $color-featured;
    display: flex;
    justify-content: center;
    align-items: center;

    .link-close{
        font-size: 2.7rem;
        padding: 0 2rem;
        cursor: pointer;

        &:before{
            display: inline-block;
            transform: rotate(180deg);
        }
    }

    .heading{
        text-transform: uppercase;
        font-family: $font-title;
        font-size: 1.6rem;
        margin: 0;
        flex-grow: 1;
        text-align: center;
        padding-left: 5rem;
        color: $color-snow;


        i{
            font-size: 1.8rem;
            vertical-align: text-bottom;
            margin-right: 0.8rem;
        }
    }
}

.sidebar-outer-main{
    padding: 3rem 4rem;
    height: calc(100% - 5.8rem);

    .collapse-caption{
        .sub-title{
            text-transform: uppercase;
        }
    }
}

