html {
    height: 100%;
}
body {
    height: 100%;
    background-color: white;
}


/* + Detail {{{ */

.detail {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;

    /*display: block;*/

    overflow: hidden;
    /*overflow: scroll;*/
    /*overflow: auto;*/
}

.detailSlide {
    height: 100%;

    font-family: 'Exo 2';
    font-weight: 300;
    /*text-transform: uppercase;*/

    /*
    background-image: url("images/starburst.png");
    background-repeat: no-repeat;
    background-size: cover;
    */

    position: relative;
    color: #2f2e2e;
}

.detailSlide .overlay {
    opacity: 0.0;
}

.detailSlide .overlay.show {
    opacity: 1.0;
    transition: opacity 2.0s;
}


.detailSlide .mainImage {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.detailSlide .mainImage.overlay {
    position: absolute;
    top: 0;
    left: 0;
}

.detailSlide .description {
    width: 60%;
    margin: auto;

    position: absolute;
    /*top: calc(-30px - 5vw);*/
    /*top: 5vw;*/
    top: 34vw;
    left: 9.5vw;

    display: flex;
    justify-content: space-between;

    padding-bottom: 50px;
    /*border: solid red 1px;*/
}
.detailSlide .info {
    font-size: 0.7vw;
    line-height: 1.4;

    position: relative;
}

@media screen and (max-width: 1300px) {
    .detailSlide .info {
        font-size: 9.1px;
    }
}



.detailSlide .info.left {
        width: 19vw;
        /*border: solid 1px green;*/
}

.detailSlide .info.right {
    width: auto;
    position: relative;
    /*left: 4vmin;*/
}

.detailSlide .logo {
    /* Centre image in container */
    position: absolute;
    right: -4vw;
    top: 0;
    /*transform: translateX(-50%);*/
    /*width: 100%;*/
    /*border: solid blue 1px;*/
    width: 18vw;
}

/* + }}} */

/* + Thumbs {{{ */

.thumbs {
    position: fixed;
    top: 0;
    left: 50%;
    width: 50%;
    bottom: 85px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border-left: 2px solid black;


}


.below-thumbs {
    position: fixed;
    height: 86px;
    bottom: 0;
    left: 50%;
    width: 50%;
    background-color: #000;
    
}


.thumbHeading {
    width: 100%;
    height: 67px;

    background-image: url("images/brands/white_strip_1.png");
    background-repeat: repeat;

    font-family: 'Exo 2';
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: rgb(178, 127, 41);
    text-align: center;
    line-height: 67px;
}

.thumbRow {
    width: 100%;
    height: 100px;
    flex-grow: 1;

    background-color: white;
    /*
    background-image: url("images/brands/white_strip_1.png");
    background-repeat: repeat;
    */

    display: flex;
    justify-content: unset;
}

/* + + Thumb slide {{{ */

.thumbSlide {
    width: calc((100% - 0px) / 3);
    /*This goes some way to fixing a 1px movement of logo during transition*/
    height: calc(100% - 1px);

    box-sizing: border-box;

    cursor: pointer;

    line-height: normal;

    /* Contain children */
    position: relative;
    overflow: hidden;
    border-right: solid 1px white;

}

/* + + + Background texture {{{ */

/* Colour background image: Hide by default, show when slide is hovered, hide when slide is selected */
.thumbSlide .thumbBackground_colour {
    /*opacity: 0;*/
    filter: grayscale(100%) contrast(50%) brightness(75%);
    /*transition: opacity 0.5s;*/
    transition: filter 0.5s;
}
.thumbSlide:hover .thumbBackground_colour {
    /*opacity: 1;*/
    filter: grayscale(0%);
}
.thumbSlide.selected .thumbBackground_colour {
    /*opacity: 0;*/
    filter: grayscale(100%);
}

/* + + + }}} */

/* + + + Logo {{{ */

.thumbSlide .thumbLogo {
    max-width: 50%;
}

/* Logo opacity: 0.5 default, 1.0 when slide is hovered, 0.5 when slide is selected */
.thumbSlide .thumbLogo {
    opacity: 0.5;
    transition: opacity 0.5s;
}
.thumbSlide:hover .thumbLogo {
    opacity: 1;
}
.thumbSlide.selected .thumbLogo {
    opacity: 1;
}

/* + + + }}} */

.thumbSlide > img {
    /* Centre image in container */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.thumbSlide > img.thumbBackground {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* + + }}} */

/* + + Thumb banner {{{ */

.thumbBanner {
    position: absolute;
    bottom: 1px;
    /*This goes some way to fixing a 1px movement of logo during transition*/
    width: calc(100% - 1px);
    left: 1px;

    //background-position: bottom;
    background-color: rgba(0, 0, 0, 0.75);

    height: 0px;
    transition: height 0.5s;
    /*box-sizing: border-box;*/

}

.thumbSlide:hover .thumbBanner {
    height: 46px;
}
.thumbSlide.selected .thumbBanner {
    height: 100%;
}

.thumbSlide div {
    text-transform: uppercase;
}

/* + + }}} */

/* + + Thumb text {{{ */

.thumbText {
    position: absolute;
    bottom: 0;
    width: 100%;

    height: 0px;
    transition: height 0.5s;
}
.thumbSlide:hover .thumbText {
    height: 30px;
}
.thumbSlide.selected .thumbText {
    height: 30px;
}

.thumbText .name {
    font-family: Hero;
    color: rgb(177, 140, 12);
    text-align: center;
}
.thumbText .role {
    font-family: Hero;
    color: rgb(254, 254, 254);
    text-align: center;
}


/* + + }}} */

/* + }}} */

.fader {
    display: inline-block;
}
.greyFadeIn {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
}
.greyFadeOut {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
}


.closeButton {
    display: none;
}




@media screen and (max-width: 780px) {
    .detail {
        width: 95vw;
        left: 2.5vw;
        height: 95vh;
        top: 2.5vh;
        border: 2px solid #ddd;
        background: #fff;
        display:none;
        border-radius: 10px;
        box-sizing: border-box;
        overflow: hidden;

    }


    .detail.show {
        display: block;
    }


    .detailSlide .description {
        font-size: 2.3vw;
        top: 75vw;
        width: 80vw;
        left: 10vw;
        display: block;
    }

    .detailSlide .info {
        position: initial;
    }

    .detailSlide .info.left {
        width: 60vw;
        margin-left: auto;
        margin-right: auto;
    }

    .detailSlide.info.right {
        width: 60vw;
        position: relative;

    }

    .detailSlide .logo {
        margin-top: 2em;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        max-width: 300px;
        display: block;
        position: static;
    }



    .closeButton {
        display: block;
        /*z-index: 100;*/
        position: absolute;
        top: 0.5vh;
        right: 0.5vw;
        padding: 1vmin;
        /*font-size: 3vw;*/
        /*width: 5vw;*/
        /*height: 5vw;*/
        color: rgba(0.3,0.3,0.3,0.6);
        font-size: 6vw;
    }

    .thumbs {
        width: 100%;
        left: 0;
        height: 100%;
    }

    .thumbSlide {
        /*width: 25vw;*/
    }

    .thumbText {
        font-size: 2.5vmin;
    }


    .below-thumbs {
        display: none;

    }
}