.phone-case {
    background-image: url(../images/clay-phone.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 65px 20px 65px;
}

.phone-case .phone-case-container {
    border: 0;
    border-left-color: 0;
    overflow: hidden;
}

.phone-case .phone-case-container .phone-case-container-screen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 456px;
}

.phone-case .phone-case-container .phone-case-container-screen video {
    width: 100%;
    height: 100%;
}



@media only screen and (min-width:960px) {

    .vertical-phone-carousel .content {
        padding: 0px
    }

    .vertical-phone-carousel .content .list-wrapper .stickyfeature .sticky {
        text-align: left;
        padding-bottom: 1.875rem
    }

    .vertical-phone-carousel .content .list-wrapper .stickyfeature .sticky h2 {
        color: #50e3c2
    }

    .vertical-phone-carousel .content .list-wrapper .stickyfeature .sticky h3 .slider-dark-navy-titles {
        color: #1a2343
    }

    .legal-pages .list-section ul li a,
    .vertical-phone-carousel .content .list-wrapper .find-more-link {
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .vertical-phone-carousel .content .list-wrapper .find-more-link:hover {
        background-color: transparent
    }

    .vertical-phone-carousel .content .list-wrapper div .slide-phone-side-image,
    .vertical-phone-carousel .content .list-wrapper div .small-only {
        display: block;
        max-width: 100%;
        margin: auto;
        width: 180px
    }

    .vertical-phone-carousel .content .list-wrapper div .small-only {
        border: solid 1px #f7f7f7
    }

    .vertical-phone-carousel .content .list-wrapper div li:before {
        background: url(media-library/checkbox-tick.9412bc71.svg) no-repeat;
        background-position: center bottom;
        margin: 16px 8px -4px 0;
        background-size: 20px;
        content: '';
        display: inline-block;
        height: 22px;
        width: 22px
    }

    .vertical-phone-carousel .sidebar {
        padding-left: calc(100% - 295px);
        position: -webkit-sticky;
        position: sticky;
        top: 17vh;
        margin-bottom: 0em;
        display: none;
        /* z-index: -1 */
    }

    @media only screen and (min-width:768px) {
        .vertical-phone-carousel {
            padding-top: 0
        }
    }

    @media only screen and (min-width:992px) {
        .vertical-phone-carousel {
            padding-bottom: 80px;
        }

        .vertical-phone-carousel .stickyfeature {
            top: 40%
        }

        .vertical-phone-carousel .content {
            float: left;
            width: 58%;
            position: relative;
            z-index: 1;
        }

        .vertical-phone-carousel .content:after {
            content: ''
        }

        .vertical-phone-carousel .content .list-wrapper:first-child div {
            padding-top: 0
        }

        .vertical-phone-carousel .content .list-wrapper:first-child .stickyfeature {
            opacity: 1
        }

        .vertical-phone-carousel .content .list-wrapper:first-child .stickyfeature .sticky {
            top: 20%;
            padding-bottom: 0
        }

        .vertical-phone-carousel .content .list-wrapper:first-child .stickyfeature .sticky h2,
        .vertical-phone-carousel .content .list-wrapper:first-child .stickyfeature .sticky h3 {
            text-align: left
        }

        .vertical-phone-carousel .content .list-wrapper:first-child .stickyfeature .sticky .slide-phone-side-image {
            top: 12rem
        }

        .vertical-phone-carousel .content .list-wrapper div,
        .vertical-phone-carousel .content .list-wrapper div.stickyfeature .sticky h2,
        .vertical-phone-carousel .content .list-wrapper div.stickyfeature .sticky h3 {
            text-align: left
        }

        .vertical-phone-carousel .content .list-wrapper div.stickyfeature {
            min-height: 50em
        }

        .vertical-phone-carousel .content .list-wrapper div.stickyfeature .sticky {
            padding: 0;
            position: -webkit-sticky;
            position: sticky;
            top: 30%
        }

        .vertical-phone-carousel .content .list-wrapper div.stickyfeature .sticky .slide-phone-side-image {
            position: absolute;
            left: 28rem;
            width: 15rem;
            top: 6rem;
            border: 0
        }

        .vertical-phone-carousel .content .list-wrapper div.stickyfeature p {
            -webkit-animation-delay: 2s;
            animation-delay: 2s
        }

        .vertical-phone-carousel .content .list-wrapper div .small-only {
            display: none
        }

        .vertical-phone-carousel .content .list-wrapper .stickyfeature {
            opacity: .00001;
            padding-top: 0
        }

        .vertical-phone-carousel .sidebar {
            display: block
        }

        .vertical-phone-carousel .sidebar .phone-case {
            width: 295px;
            position: -webkit-sticky;
            position: sticky;
            top: 20%;
        }


    }

    @media only screen and (min-width:1200px) {
        .vertical-phone-carousel .content .list-wrapper div.stickyfeature .sticky .slide-phone-side-image {
            left: 38rem;
            width: 16rem
        }

        .vertical-phone-carousel {
            /* width: 65% */
        }
    }

    @media only screen and (min-width:1600px) {
        .vertical-phone-carousel {
            /* width: 45% */
        }
    }

    @media only screen and (min-width:992px) {
        .vertical-carousel-bg {
            background-image: "";
            background-size: cover;
            background-attachment: fixed;
            height: 475px;
            width: 100%;
            position: fixed;
            z-index: -5
        }
    }