.panels {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 1;
}

.mypanel {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    cursor: pointer;
    background-position: center center;
    background-size: cover;
    height: 100%;
}

.panel__content {
    width: 100%;
    height: 102%;
    overflow: hidden;
    cursor: pointer;
    background: inherit;
}

.mypanel:before,
.panel__content:before {
    content: ' ';
    display: block;
    width: 100%;
    height: 100%;
}

.mypanel:before {
    background: rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 99;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}

/* The non-CSS Var hover state */
.mypanel:hover:before,
.mypanel:focus:before {
    opacity: 1;
}

.mypanel:hover .panel__content,
.mypanel:focus .panel__content {
    position: absolute;
    top: -1%;
    left: 0;
    z-index: 98;
}

/* If CSS Vars are supported... */
@supports ( (--panel-support: 0) ) {
    /*
    A simple LESS loop to set up the CSS vars.

    Output will be something like
    .panels--1 { --items: 1; }
    .panth:nth-child(1) { --i: 1; }
    .panels--2 { --items: 2; }
    .panth:nth-child(2) { --i: 2; }

    ..up to the total number provided.
    */
    .mypanel:nth-last-child(n + 1),
    .mypanel:nth-last-child(n + 1) ~ .mypanel {
        --items: 1;
    }

    .mypanel:nth-child( 1) {
        --i: 1;
    }

    .mypanel:nth-last-child(n + 2),
    .mypanel:nth-last-child(n + 2) ~ .mypanel {
        --items: 2;
    }

    .mypanel:nth-child( 2) {
        --i: 2;
    }

    .mypanel:nth-last-child(n + 3),
    .mypanel:nth-last-child(n + 3) ~ .mypanel {
        --items: 3;
    }

    .mypanel:nth-child( 3) {
        --i: 3;
    }

    .mypanel:nth-last-child(n + 4),
    .mypanel:nth-last-child(n + 4) ~ .mypanel {
        --items: 4;
    }

    .mypanel:nth-child( 4) {
        --i: 4;
    }

    .mypanel:nth-last-child(n + 5),
    .mypanel:nth-last-child(n + 5) ~ .mypanel {
        --items: 5;
    }

    .mypanel:nth-child( 5) {
        --i: 5;
    }

    .mypanel:nth-last-child(n + 6),
    .mypanel:nth-last-child(n + 6) ~ .mypanel {
        --items: 6;
    }

    .mypanel:nth-child( 6) {
        --i: 6;
    }

    .mypanel:nth-last-child(n + 7),
    .mypanel:nth-last-child(n + 7) ~ .mypanel {
        --items: 7;
    }

    .mypanel:nth-child( 7) {
        --i: 7;
    }

    .mypanel {
        --i: 0;
        --percent: calc(((var(--i) - 1) / var(--items)) * 100);
    }

    .panel__content {
        position: absolute;
        top: -1%;
        left: 0%;
        z-index: auto;
        -webkit-transform: translateX(calc(var(--percent) * 1%));
        transform: translateX(calc(var(--percent) * 1%));
    }

    .panel__content:before {
        background: inherit;
        -webkit-transform: translateX(-50%) translateX(calc(100% / var(--items) * 0.5));
        transform: translateX(-50%) translateX(calc(100% / var(--items) * 0.5));
    }

    .panel__content,
    .panel__content:before {
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.44, 0, 0, 1);
        transition: -webkit-transform 0.4s cubic-bezier(0.44, 0, 0, 1);
        transition: transform 0.4s cubic-bezier(0.44, 0, 0, 1);
        transition: transform 0.4s cubic-bezier(0.44, 0, 0, 1), -webkit-transform 0.4s cubic-bezier(0.44, 0, 0, 1);
    }

    /* When there's an active hover on the container. This will apply to all panels in the container, unless overridden */
    .panels:hover .panel__content {
        z-index: auto;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    /* Panels after the hovered panel */
    .mypanel:hover ~ .mypanel .panel__content {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    /* The active panel */
    .mypanel:hover .panel__content,
    .mypanel:focus .panel__content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    .mypanel:hover .panel__content:before,
    .mypanel:focus .panel__content:before {
        -webkit-transform: translateX(0%) scale(1.2);
        transform: translateX(0%) scale(1.2);
    }

    .mypanel:focus .panel__content,
    .mypanel:focus .panel__content:before {
        -webkit-transition: none !important;
        transition: none !important;
    }
}

/*
//////////////////////////////////////
STYLISTIC CHOICES
//////////////////////////////////// 
*/
.panels {
   /* box-shadow: 0 0 10rem rgba(0, 0, 0, 0.6); */
    height: 60vh;
   /* margin: 10vh auto; */
}

body > .panels:first-child {
    margin: 15vh auto;
    height: 65vh;
}

/* Set up the background images */
.mypanel:nth-child( 7) {
    background-image: url('/static/revolution/images/crocin.png');
}

.mypanel:nth-child( 6) {
    background-image: url('/static/revolution/images/jonathan-perez-409943.jpg');
}

.mypanel:nth-child( 5) {
    background-image: url('/static/revolution/images/sharon-mccutcheon-535694.jpg');
}

.mypanel:nth-child( 4) {
    background-image: url('/static/revolution/images/tim-bish-171738.jpg');
}

.mypanel:nth-child( 3) {
    background-image: url('/static/revolution/images/sharon-mccutcheon-535694.jpg');
}

.mypanel:nth-child( 2) {
    background-image: url('/static/revolution/images/lightroom-2.png');
}

.mypanel:nth-child( 1) {
    background-image: url('/static/webapp/img/healthcare/supplements.jpg');
}

*,
*:before,
*:after {
    box-sizing: border-box;
}