* {
    margin: 0;
    padding: 0;
    font-family: 'Source Code Pro', monospace;
    color: dimgrey;
    cursor: none !important;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;
    -webkit-user-select: none;
}

*:not(html) {
    pointer-events: none;
}

html, body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
}

html {
    pointer-events: auto;
}

body {
    overflow: hidden;
}

.hide-scrollbar {
    overflow: clip;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.cursor {
    position: absolute;
    z-index: 5;
    display: none;
    width: 15px;
    height: 15px;
    top: 0;
    left: 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    pointer-events: none;
    opacity: 0.7;
}

.bottom {
    border-bottom: 1px solid rgb(40, 40, 40);
    border-right: 1px solid rgb(40, 40, 40);
    border-left: 0px solid rgb(40, 40, 40);
    border-top: 0px solid rgb(40, 40, 40);
}

.top {
    border-bottom: 0px solid rgb(40, 40, 40);
    border-right: 0px solid rgb(40, 40, 40);
    border-left: 1px solid rgb(40, 40, 40);
    border-top: 1px solid rgb(40, 40, 40);
}

.clickable {
    border-bottom: 0px solid rgb(40, 40, 40);
    border-right: 1px solid rgb(40, 40, 40);
    border-left: 0px solid rgb(40, 40, 40);
    border-top: 1px solid rgb(40, 40, 40);
}

.clickableClose {
    border-bottom: 1px solid rgb(40, 40, 40);
    border-right: 0px solid rgb(40, 40, 40);
    border-left: 1px solid rgb(40, 40, 40);
    border-top: 0px solid rgb(40, 40, 40);
}

.reachedTop {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    border-bottom: 0px solid rgb(40, 40, 40);
    border-right: 0px solid rgb(40, 40, 40);
    border-left: 0px solid rgb(40, 40, 40);
    border-top: 1px solid rgb(40, 40, 40);
}

.reachedBottom {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    border-bottom: 1px solid rgb(40, 40, 40);
    border-right: 0px solid rgb(40, 40, 40);
    border-left: 0px solid rgb(40, 40, 40);
    border-top: 0px solid rgb(40, 40, 40);
}

.hoverLink {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    border-bottom: 0px solid rgb(40, 40, 40);
    border-right: 0px solid rgb(40, 40, 40);
    border-left: 0px solid rgb(40, 40, 40);
    border-top: 1px solid rgb(40, 40, 40);
}

#title {
    position: relative;
    z-index: 1;
    top: 4px;
    left: 158px;
    width: 181px;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    color: dimgrey;
    padding: 22px 40px 10px 40px;
    text-decoration: none;
    border-bottom: 1px solid dimgrey;
    pointer-events: auto;
    font-size: 14px;
}

nav {
    position: absolute;
    z-index: 1;
    width: 300px;
    height: 250px;
    top: 50px;
    padding-right: 10px;
    padding-bottom: 10px;
    border: 1px solid dimgrey;
    -webkit-transition: left 0.5s;
    transition: left 0.5s;
    background-color: rgba(255, 255, 255, 0.8);
    pointer-events: auto;
}

.navClosed {
    left: -264px;
}

.navOpen {
    left: -1px;
}

#links {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    top: 140px;
    width: 140px;
    height: 100px;
    font-size: 14px;
}

nav a {
    text-decoration: none;
    pointer-events: auto;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

nav a:hover {
    color: black;
    padding-right: 5px;
}

.currentComponent {
    padding-right: 5px;
    color: black;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.component {
    position: relative;
    width: 100vw;
    height: 100vh;
    -webkit-transition: left 1s;
    transition: left 1s;
}


.imageWrap {
    position: absolute;
    z-index: -1;
    width: 90%;
    height: 100%;
    right: 0;
    top: 100vh;
    -webkit-transition: top 1s;
    transition: top 1s;
}

img {
    border: 1px solid dimgrey;
    pointer-events: auto;
}

.current {
    display: block;
    top: 0;
}

.previous {
    top: -100vh;
}

.loading {
    display: none;
}

.landscape {
    position: absolute;
    right: 0;
    top: 0;
    max-height: 90%;
    max-width: 100%;
}

.portrait {
    position: absolute;
    right: 20%;
    top: 0;
    height: 90%;
}

.info {
    position: absolute;
    bottom: 20px;
    z-index: 5;
    white-space: nowrap;
}

.info div {
    height: 100%;
}

.info div p {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 14px;
}

#counter {
    position: absolute;
    font-size: 14px;
    bottom: 18px;
    left: 30px;
    pointer-events: auto;
}

#counterInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

#pipe {
    margin: 0px 5px 0px 2px;
}

#counterLeft {
    text-align: center;
    width: 20px;
    height: 20px;
}

#counterRight {
    height: 20px;
}

#counterLeftScrollWrap {
    overflow: hidden;
    width: 20px;
    right: 10px;
}

#counterLeftScroll {
    overflow-y: scroll;
    text-align: center;
    width: 20px;
    padding-right: 20px;
    max-height: 100px;
    pointer-events: auto;
}

#counterLeftScroll p {
    height: 20px;
    pointer-events: auto;
}

#counterLeftScroll p:first-of-type {
    margin-top: 55px;
}

#counterLeftScroll p:not(:last-of-type) {
    padding-bottom: 5px;
}

#pipeScroll {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    max-height: 100px;
    margin: 0px 5px 2px 2px;
}

#counterRightScroll {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    max-height: 100px;
    margin-bottom: 2px;
}

.counterNumber {
    -webkit-transition: padding 0.3s;
    transition: padding 0.3s;
}

.counterNumber:hover {
    padding-right: 5px;
}

/* // biography */

.bio {
    position: absolute;
    width: 70vw;
    height: 80vh;
    right: 0;
    padding-top: 50px;
    padding-right: 50px;
    font-size: 13px;
    overflow: hidden;
}

.x {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 30px;
    height: 30px;
    right: 0;
    bottom: 20px;
    font-size: 14px;
    border: 1px solid dimgrey;
    pointer-events: auto;
    text-decoration: none;
}

.bio p:not(.bioTextLink) {
    line-height: 1.7;
}

.bio sup {
    vertical-align: top;
    position: relative;
    top:: -5em;
}

.bioText {
    overflow: scroll;
    height: 100%;
    pointer-events: auto;
}

.bioText p:first-of-type {
    margin-bottom: 8px;
}

.bioText::-webkit-scrollbar {
    display: none;
}

.bioTextLink {
    z-index: 10;
    pointer-events: auto;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding-left: 10px;
}

.bioTextLink:hover {
    padding-left: 5px;
    color: black;
}

.bioTextLink:hover strong {
    color: black;
}

.bio a {
    text-decoration: none;
    color: dimgrey;
    margin-bottom: 20px;
    pointer-events: auto;
    padding-left: 10px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.bio a:hover em {
    color: black;
}

.bio a:hover {
    padding-left: 5px;
}

.galleryLink, .galleryLink strong {
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.galleryLink:hover, .galleryLink:hover strong {
    color: black;
}

#videoWrap {
    width: 100%;
    max-width: 1350px;
    height: 1000px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    background-color: rgba(240, 240, 240, 0.4);
    padding: 50px 0px;
}

.vidAndControls {
    height: 300px;
    pointer-events: auto;
}

.vidAndControls:nth-child(odd) {
    margin-left: 80px;
}

.vidAndControls:nth-child(even) {
    -ms-flex-item-align: end;
        align-self: flex-end;
    margin-right: 80px;
}

.vidAndControls video {
    height: 100%;
    pointer-events: auto;
}

.controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}

.playPause {
    -ms-flex-item-align: start;
        align-self: flex-start;
    width: 10px;
    height: 10px;
    font-size: 14px;
    pointer-events: auto;
}

.slider {
    position: relative;
    width: 60%;
    height: 2px;
    background-color: silver;
    pointer-events: auto;
}

.progressBar {
    position: absolute;
    height: 100%;
    /* width: 60%; */
    background-color: grey;
}

.timePosition {
    position: absolute;
    display: none;
    top: 3px;
    font-size: 12px;
}

.timer {
    width: 95px;
    font-size: 12px;
    text-align: center;
}

.mute, .fullScreen {
    font-size: 12px;
    pointer-events: auto;
}


/* // exhibitions */

#exhibitionListWrap {
    position: absolute;
    width: 430px;
    height: 600px;
    bottom: 15px;
    padding-right: 20px;
    font-size: 13px;
    border-top: 1px solid dimgrey;
    border-bottom: 1px solid dimgrey;
    border-right: 1px solid dimgrey;
    background-color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-transition: right 0.5s;
    transition: right 0.5s;
    white-space: nowrap;
}

#loading {
    position: absolute;
    top: 5px;
    left: 10px;
    width: 40px;
}

#loading p {
    display: inline-block;
}

@-webkit-keyframes dotOne {
    0%   {opacity: 0}
    20%  {opacity: 0}
    40%  {opacity: 1}
    60%  {opacity: 1}
    80%  {opacity: 1}
    100% {opacity: 1}
}

@keyframes dotOne {
    0%   {opacity: 0}
    20%  {opacity: 0}
    40%  {opacity: 1}
    60%  {opacity: 1}
    80%  {opacity: 1}
    100% {opacity: 1}
}

#dotOne {
    -webkit-animation: dotOne 1s infinite;
            animation: dotOne 1s infinite;
}

@-webkit-keyframes dotTwo {
    0%   {opacity: 0}
    20%  {opacity: 0}
    40%  {opacity: 0}
    60%  {opacity: 1}
    80%  {opacity: 1}
    100% {opacity: 1}
}

@keyframes dotTwo {
    0%   {opacity: 0}
    20%  {opacity: 0}
    40%  {opacity: 0}
    60%  {opacity: 1}
    80%  {opacity: 1}
    100% {opacity: 1}
}

#dotTwo {
    -webkit-animation: dotTwo 1s infinite;
            animation: dotTwo 1s infinite;
}

@-webkit-keyframes dotThree {
    0%   {opacity: 0}
    20%  {opacity: 0}
    40%  {opacity: 0}
    60%  {opacity: 0}
    80%  {opacity: 1}
    100% {opacity: 1}
}

@keyframes dotThree {
    0%   {opacity: 0}
    20%  {opacity: 0}
    40%  {opacity: 0}
    60%  {opacity: 0}
    80%  {opacity: 1}
    100% {opacity: 1}
}

#dotThree {
    -webkit-animation: dotThree 1s infinite;
            animation: dotThree 1s infinite;
}

#listPartition1 {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: dimgrey;
    left: 380px;
}

#listPartition2 {
    position: absolute;
    width: 1px;
    height: 562px;
    background-color: dimgrey;
    left: 0;
}

#exhibitionList::-webkit-scrollbar {
    display: none;
}

#exhibitionList {
    width: 100% !important;
    overflow: scroll;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    height: 100%;
    width: 80%;
    pointer-events: auto;

    text-align: right;
    /* scrollbar-width: none; */
}

.listOpen {
    right: 0px;
}

.listClosed {
    right: -451px;
}

.exhibitionLink {
    pointer-events: auto;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.currentExhibition {
    padding-right:
}

.exhibitionLink span {
    width: 20px;
}

.selected {
    color: black;
    padding-right: 10px;
}

.exhibitionLink:not(.selected):hover {
    padding-right: 5px;
    color: black;
}

.return {
    padding: 8px 0px 0px 8px;
    position: absolute;
    right: 450px;
    bottom: -1px;
    height: 30px;
    font-size: 18px;
    pointer-events: auto;
    text-decoration: none;
    border-left: 1px solid dimgrey;
    border-bottom: 1px solid dimgrey;
    border-top: 1px solid dimgrey;
    width: 50px;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    white-space: nowrap;
}

.inviteWrap img {
    background-color: rgba(240, 240, 240, 0.4);
}




/* MEDIA QUERIES ===========================================>> */

@media screen and (max-height: 650px) {

    body {
        height: 650px;
    }

    #component {
        width: 650px;
    }

    .imageWrap {
        height: 650px;
        top: 650px;
    }

    .current {
        top: 0;
    }

    .previous {
        top: -650px;
    }

    .info {
        top: 610px !important;
    }

    #counter {
        top: 612px !important;
    }

    #exhibitionListWrap {
        top: 34px !important;
    }

    .bio {
        height: 520px;
    }

    .x {
        top: 600px !important;
    }

}


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

    body {
        width: 1260px;
    }

    #component {
        width: 1260px;
    }

    .imageWrap {
        left: 126px !important;
        width: 1134px;
    }

    #exhibitionListWrap {
        right: auto;
        -webkit-transition: left 0.5s;
        transition: left 0.5s;
    }

    .listOpen {
        right: auto;
        left: 809px;
    }

    .listClosed {
        right: auto;
        left: 1260px;
    }

    .bio {
        width: 882px;
        left: 328px !important;
    }

    .x {
        left: 1230px !important;
    }

}