@media screen and (min-width:769px) {
    .accCont[data-grid~=container] {
        max-width: calc(1600px + 10%);
        margin: 0 auto;
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 120px;
    }
}

.grey-c {
    color: #c8c8c8;
}

.accordion ul li.initial:nth-child(1) {
    background-image: url("https://compass-ssl.xbox.com/assets/86/5f/865f4787-7704-479c-a240-bd3bb8a96bae.jpg?n=PS_1920_Accordian_Blade1_img.jpg");
}

.accordion ul li.initial:nth-child(2) {
    background-image: url("https://compass-ssl.xbox.com/assets/7d/f0/7df06273-a8cc-47aa-aac4-2c9b5f211d67.jpg?n=PS_1920_Accordian_Blade2_img.jpg");
}

.accordion ul li.initial:nth-child(3) {
    background-image: url("https://compass-ssl.xbox.com/assets/92/38/9238aa16-8b56-440f-be53-c6f0d6af9669.jpg?n=PS_1920_Accordian_Blade3_img.jpg");
}

.accordion ul li.initial:nth-child(4) {
    background-image: url("https://compass-ssl.xbox.com/assets/05/72/0572efea-8768-422f-ab13-920f0cd612f4.jpg?n=PS_1920_Accordian_Blade4_img.jpg");
}

.accordion ul li.initial:nth-child(5) {
    background-image: url("https://compass-ssl.xbox.com/assets/f7/e8/f7e81080-fb36-4b8e-adca-8daf833aa50a.jpg?n=PS_1920_Accordian_Blade5_img.jpg");
}


@media screen and (max-width: 1083px) {
    .accordion ul li.initial:nth-child(1) {
        background-image: url("https://compass-ssl.xbox.com/assets/5d/89/5d89eb28-d74d-4998-af4c-3c9ebf0fce5b.jpg?n=Charlie_1083_Accordian_Blade1_img-02.jpg");
    }

    .accordion ul li.initial:nth-child(2) {
        background-image: url("https://compass-ssl.xbox.com/assets/1c/4b/1c4b8172-ac85-4ffd-bf28-98c2e15f9909.jpg?n=PS_1083_Accordian_Blade2_img.jpg");
    }

    .accordion ul li.initial:nth-child(3) {
        background-image: url("https://compass-ssl.xbox.com/assets/9f/2d/9f2dbf55-5259-4d71-9aed-69349eb0d78e.jpg?n=PS_1083_Accordian_Blade3_img.jpg");
    }

    .accordion ul li.initial:nth-child(4) {
        background-image: url("https://compass-ssl.xbox.com/assets/ca/4f/ca4f5f45-f599-4020-84a8-b91a9db0ef9a.jpg?n=PS_1083_Accordian_Blade4_img.jpg");
    }

    .accordion ul li.initial:nth-child(5) {
        background-image: url("https://compass-ssl.xbox.com/assets/f8/e3/f8e38336-99c0-4bbc-9cbf-98b78dd4c584.jpg?n=PS_1083_Accordian_Blade5_img.jpg");
    }
}
@media screen and (max-width: 767px) {
    .accordion ul li.initial:nth-child(1) {
        background-image: url("https://compass-ssl.xbox.com/assets/36/54/3654f1f2-ba11-47f2-ba51-e09fcd34f421.jpg?n=PS_767_Accordian_Blade1_img.jpg");
    }

    .accordion ul li.initial:nth-child(2) {
        background-image: url("https://compass-ssl.xbox.com/assets/6e/d5/6ed5dd23-0ba8-4ac1-a9c0-ad0f8fd59f62.jpg?n=PS_767_Accordian_Blade2_img.jpg");
    }

    .accordion ul li.initial:nth-child(3) {
        background-image: url("https://compass-ssl.xbox.com/assets/33/18/331831e7-c382-4481-9b3f-73465e1aeaf0.jpg?n=PS_767_Accordian_Blade3_img.jpg");
    }

    .accordion ul li.initial:nth-child(4) {
        background-image: url("https://compass-ssl.xbox.com/assets/5e/49/5e495b7e-7b88-4cbb-9ab9-24c0e1fc6149.jpg?n=PS_767_Accordian_Blade4_img.jpg");
    }

    .accordion ul li.initial:nth-child(5) {
        background-image: url("https://compass-ssl.xbox.com/assets/0e/bd/0ebd9786-3544-4192-b5c8-32b5a96b7f9b.jpg?n=PS_767_Accordian_Blade5_img.jpg");
    }
}


/**************************************/
.accordion ul:focus {outline: 1px solid #fff;}
.accordion ul {
    width: 100%;
    display: inline-table;
    table-layout: fixed;
    margin: 0;
    padding: 0;
    background-size: cover;
}

    .accordion ul li {
        display: table-cell;
        vertical-align: bottom;
        position: relative;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center; 
        transition: all 500ms ease; 
       
    }

       .accordion ul li.initial {background-size: 100% 100%; 
               /*-webkit-transition: background-size .25s ease-out;
              -moz-transition: background-size .25s ease-out;
               -o-transition: background-size .25s ease-out;
               -ms-transition: background-size .25s ease-out;
               transition: background-size .25s ease-out; */
          }

        .accordion ul li.initial:hover {
            background-size: 120% 120%;
             /* -webkit-transition: background-size .65s ease-in;      
               -moz-transition: background-size .65s ease-in;
               -o-transition: background-size .65s ease-in;
             -ms-transition: background-size .65s ease-in;      
             transition: background-size .65s ease-in; */
        }

        .accordion ul li:focus > .mainCont, .accordion ul li:active> .mainCont {outline: 1px solid #fff;}
        .accordion ul li > .mainCont {
            display: block;
            height: 41.65vw;
            width: 100%;
            position: relative;
            z-index: 3;
            vertical-align: bottom;
            box-sizing: border-box;
            color: #fff;
            text-decoration: none;
            font-family: SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif
            transition: all 200ms ease;
            display: block;
            overflow: hidden;
        }

        /**************/

        .accordion ul li .mainCont .c-paragraph-3 strong {letter-spacing: 4px;}
        .accordion ul li.contracted .mainCont {
            background: rgba(255, 255, 255, 0.1);
        }
        .accordion ul li.expanded .mainCont {
            background: none;
        }

    .accordion ul:hover li.expanded:hover .mainCont {
        cursor: default;
    }

    .accordion ul:hover li:hover .mainCont {
        background: none;
        cursor: pointer;
    }
    .accordion .mainCont .c-heading-2 {padding-top: 10px; white-space: nowrap;}
    .accordion ul li.expanded .content {
        color: #000;
        display: block;
        margin-left: 11%;
        width: 20vw;
    }
@media (min-width: 1084px) and (max-width: 1200px) {
.accordion ul li.expanded .content {
    width: 26vw;
}
}
.accordion ul li.expanded .content.right {
    float: right;
    margin-right: 11%;
    margin-left:0;
}

    .accordion ul li .content {
        display: none;
    }

    .accordion ul li span p {
        position: absolute;
        width: 20em;
        height: auto;
        bottom: 25%;
        left: 6px;
        text-indent: 1em;
        padding: 0;
        margin: 0;
        color: #fff;
        font-weight: 600;
        letter-spacing: 4px;
        text-transform: uppercase;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    .accordion ul li .expandBtn {width: 16px; position: absolute; bottom: 25%; left: 12px;}
    .accordion ul li.initial span p, .accordion ul li.expanded span p, .accordion ul li.initial .expandBtn, .accordion ul li.expanded .expandBtn {
        display: none;
    }

.expanded {
    width: 100%;
}

.initial {
    width: 20%;
}

.btnClose {
    width: 22px;
    position: relative;
    z-index: 100;
    left: 98%;
    margin-top: 12px;
}
@media screen and (min-width: 1084px) {
    .contracted {
        width: 4.45%;
    }
    .btnClose { left: 96%;}
    .accordion .content {margin-top: 1vw;} 
    .accordion ul li.expanded span p {
        right: -31%;
        left: auto;
    }
}

@media screen and (min-width: 1400px) {
    .contracted {
        width: 3.3%;
    }
    .btnClose { left: 97%;}
    .accordion .content {margin-top: 6vw;} 
    .accordion ul li.expanded span p {
        right: -26%;
        left: auto;
    }
}

@media screen and (min-width: 1600px) {
    .contracted {
        width: 3%;
    }
    .btnClose { left: 98%;}
    .accordion .content {margin-top: 10vw;} 
    .accordion ul li.expanded span p {
        right: -23%;
        left: auto;
    }
}

.initial .btnClose, .contracted .btnClose {
    display: none;
}

.btnClose img {
    cursor: pointer;
}

.svgBorder {
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
}

.logoImg {
    margin: 0 auto;
    position: absolute;
    bottom: 56px;
    margin-left: 1.8vw;
    width: 77%;
    text-align: center;
}

    .logoImg img {
        width: 100%;
    }

    .logoImg .seeDetailsBtn, .logoImg p {
        display: none;
    }

.accordion ul li:hover .logoImg .seeDetailsBtn {
    display: inline-block;
    width: 20px;
    margin-right: 15px;
}
.accordion ul li .logoImg p {text-transform: uppercase;}
.accordion ul li:hover .logoImg p {
    display: inline-block;
    padding-top: 32px;
    font-weight: 400;
    letter-spacing: 0.2em;
}


.expanded .logoImg, .contracted .logoImg {
    display: none;
}

 .accordion .c-action-trigger {position: relative; top: -5px;}

 .accordion .c-action-trigger.c-glyph::after,  .accordion .c-action-trigger.c-glyph::before {
    font-family: MWF-MDL2;
    display: inline-block;
    top: -2px;
    position: relative;
}


/********** mobile ***************/

@media screen and (max-width: 1083px) {

    .logoImg {
        margin-left: 6vw;
        width: 33%;
        bottom: 7vw;
    }

        .logoImg > div {
            position: absolute;
            right: -150%;
            bottom: 7vw;
        }

        .logoImg .seeDetailsBtn {
            display: inline-block;
            width: 20px;
            margin-right: 15px;
        }

        .logoImg p {
            display: inline-block;
            margin-right: 15px;
        }

    .accordion ul li:hover .logoImg p {
        padding-top: 3px;
    }
  
    .accordion {
        height: auto;
    }
        .accordion ul li {
            background-size: cover !important;
        }
        .accordion ul li,
        .accordion ul li:hover,
        .accordion ul:hover li,
        .accordion ul:hover li:hover {
            position: relative;
            display: table;
            table-layout: fixed;
            width: 100%;
            -webkit-transition: none;
            transition: none;
        }

            .accordion ul li span p {
                position: absolute;
                width: 20em;
                height: auto;
                bottom: 27%;
                left: 15%;
                text-indent: 1em;
                padding: 0;
                margin: 0;
                color: #acacac;
                -webkit-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
                -ms-transform-origin: 0 0;
                -o-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: none;
                -moz-transform: none;
                -ms-transform: none;
                -o-transform: none;
                transform: none;
            }
            .accordion ul li .expandBtn {bottom: 34%; left: 8.33%;}
            .accordion ul li.expanded > .mainCont {
                height: 100vw;
            }

            .accordion ul li.initial > .mainCont {
                height: 28.3vw;
            }

            .accordion ul li.initial:hover {
                background-size: cover;
            }

            .accordion ul li .mainCont {
                background: none;
            }

            .accordion ul li.contracted > .mainCont {
                height: 44px;
            }

            .accordion ul li.expanded .content {
                margin: 0 8.33%;
                width: auto;
                position: absolute;
                bottom: 9%;
            }
.accordion ul li.expanded .content.right {
    float: none;
    margin-left: 11%;
    margin-right:0;
}

    .svgBorder {
        width: 1px;
        height: auto;
        max-height: 87vw;
        position: absolute;
        z-index: 99;
        top: auto;
        left: 0px;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .btnClose {
        left: 85vw;
        top: 0;
    }
}
@media screen and (max-width: 767px) {
               .accCont[data-grid~=container] {
                   padding-left: 5%;
                  padding-right: 5%;
                }
            .accordion ul li.initial > .mainCont {
                height: 30.6vw;
            }
            .accordion ul li.expanded .content {
                bottom: 7%;
            }
    .btnClose {
        left: 80vw;
        top: 0;
    }
}