/* ========================================== */


/* three panel module */


/* variations: 
.three-panel.no-right = no right column. Center image will be wider and aligned right.
.three-panel.wide-right = right column is wider, usually for video thumbnails
.three-panel.narrow = allows for narrow center image, usually goes with .wide-right
.three-panel.headline-under = at mobile, headline appears under main image

*/

.three-panel {
    /*max-width: 1364px;*/
    margin: 0 auto;
    overflow: visible;
    position: relative;
    display: flex;
    /* These three allow centering middle panel, while allowing content to decided middle panel's dimensions */
    justify-content: center;
    /*align-items: center;*/
    padding-left: 10%;
    padding-right: 10%;
}

@media screen and (max-width: 767px) {
    .three-panel {
        padding-left: 0;
        padding-right: 0;
    }
}

.three-panel [data-grid*="col-"] {
    float: none;
}

.three-panel.no-right {
    justify-content: flex-end;
    padding-right: 0;
}

.three-panel div {}

.three-panel .middle {
    position: relative;
    display: inline-block;
    /*width: 1084px;
      margin: 0 auto;*/
    /* taken care of with parent flex */
    z-index: 10;
    width: 100%;
    /* overcome MWF */
}

.three-panel .middle img {
    max-width: 100%;
}

.three-panel .middle .play-pause {
    color: white;
    position: absolute;
    left: 30px;
    top: 15px;
}

.three-panel .middle .play-pause.bottom {
    bottom: 15px;
}

.three-panel .left,
.three-panel .right {
    position: absolute;
    align-self: self-start;
    /* Flexbox. Align top by default, despite top: value applied elsewhere. Makes parallax calc easier. */
    z-index: 20;
    color: white;
}

.three-panel.headline-under .left {
    order: 2;
}

.three-panel .left {
    max-width: 468px;
    left: 0px;
    bottom: 10%;
}

.three-panel .right {
    order: 99;
    /* renders last when stacked at lower breakpoints */
    width: 264px;
    right: 0px;
    bottom: 30%;
}

.three-panel.wide-right .right {
    width: 400px;
}

.three-panel.activate .left {
    transform: translateY(-300px);
}

.three-panel.activate .right {
    transform: translateY(-150px);
}


/*
.three-panel .left h2, 
.three-panel .left [class~="c-heading"] {
 font-size: 68px;
 font-family: SegoeProBlack, Segoe UI,SegoeUI,Helvetica,Arial,sans-serif;
    max-width: 468px;
}

.three-panel .left p {
}
.three-panel .left [class~="c-heading"] {
}
*/

.three-panel .left {
    width: 264px;
}

@media screen and (max-width: 767px) {
    .three-panel {
        flex-direction: column;
        /*max-width: 768px;*/
    }
    /*.three-panel .middle,*/
    .three-panel .left,
    .three-panel .right {
        width: 65%;
        position: relative;
        display: block;
        min-width: 288px;
    }
    .three-panel.activate .left,
    .three-panel.activate .right {
        transform: translateY(0);
    }
}


/* END three panel module */
.inside-out .left {
top: 35%;
}
@media screen and (max-width: 1083px) {
    .inside-out .left {
        top: 0;
    }  
}
.inside-out .m-ambient-video {
padding-top: 0;
}

.inside-out .three-panel .right {
    top: 55%;
}

.doubleVideo .small-video img {
    border: 2px solid #444;
}
.halo-three-panel .three-panel .right {
    border: 2px solid #666;
}
@media screen and (max-width: 767px) {
.three-panel .m-ambient-video {
    min-width: 0 !important;
    /*max-width: 90%;*/

}
}