@font-face {
    font-family:'Times NR Seven MT Std';
    src: url('fonts/font-ital.woff') format('woff');
    font-weight: normal;
    font-style: italic, oblique;
}

@font-face {
    font-family:'Times NR Seven MT Std';
    src: url('fonts/font-std.woff') format('woff');
    font-style: normal;
}


/* GENERAL */
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Times NR Seven MT Std', serif;
    font-size: calc(1000px * 0.028);
    font-style: normal;
    color: white;
    background: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar{
    width: 0 !important;
}

a {
    color: white;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}



.button {
    cursor: pointer;    
}

/* MISC */
.blend-difference {
    mix-blend-mode: difference;
}

.no-wrap {
    white-space: nowrap;
}

.zoom-content, .header {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;      
}

/* ZOOM */
.zoom-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.zoom-content {
    pointer-events: none;
    position: relative;
    /* this defines the maximum zoom level */
    width: calc(21000px * 0.5);
    height: calc(14000px * 0.5);
    overflow: hidden;  
}

/* IMAGES */
.zoom-content .image {
    display: block;
    position: absolute;
}

/*.zoom-content .image:after {
    content: '';
    z-index: 1;
    position: absolute;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    top: 0;
    left: 0;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
    mix-blend-mode: difference;
}*/

.zoom-content .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.zoom-content .image img:not([data-loaded="true"]) {
    display: none;
}

/* INFO */
.info {
    position: absolute;
    visibility: hidden; /* hide untill font size is adjusted */
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-flow: column;
    overflow: hidden;  
}


/* INFO SEPARATOR */
.info .separator {
    width: 100%;
}

.info .separator .line {
    width: 100%;
    border-bottom: 1px solid;
    display: none; /* only show on small screens */ 
}

.info .separator-header {
    margin-top: 0.5em;
}

.info .separator-footer {
    margin-bottom: 0.5em;
    display: none; /* footer is only shown on small screens */
}

/* Special verison of the recast button for small screens. Can't be put inside
.info because it has to be positioned relative to the body not .info */
.recast-button-absolute {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-bottom: 0.25em; /* 0.3em with optical corretion */
    padding-left: 0.4em;
    display: none;
}

/* INFO PADDING */
.info > * {
    padding-left: 0.4em;
    padding-right: 0.4em;    
}

.info .header {
    padding-top: 0.4em;
}

.info .content {
    padding-top: 0.5em;
    padding-bottom: 0.3em;
}

.info .footer {
    padding-bottom: 0.25em; /* 0.3em with optical corretion */
}

.info .imprint {
    padding-top: 0.3em;
}

/* INFO HEADER */
.header {
    display: flex;
    flex-direction: row;
    /* line-height: 1em; chrome and firefox have different auto line heights */
    word-spacing: 0.1em;
}

.header .title {
    display: flex;
}

.header .info-button {
    display: inline-block;
    white-space: nowrap;
}

/* add some padding to the left and right elemnts of rangeSlider to have equal spcaing */
.header .title {
    padding-right: 0.15em;
}

.header .button-wrapper {
    padding-left: 0.15em;
}

/* INFO CONTENT */
.info .content-wrapper {
    flex: 1;
    overflow-y: scroll;
}

/* INFO FOOTER */
.info .footer {
    display: none;
}

/* don't break lines inside a `.content span` if possible */
.content span {
    display: inline-block;
}

/* INFO IMPRINT */
.info .imprint {
    display: none;
}
.imprint{
}

.info .imprint.expanded {
    display: block;
}

/* INFO EXPANDED */
.info.expanded {
    height: 100%;
    background: black;
}

.info.expanded .title {
    flex: 1;
}

.info.expanded .zoom-slider,
.info.expanded .recast-button {
    display: none
}

/* INFO COLLAPSED */
.info.collapsed > *:not(.header),
.info.collapsed .header .menu,
.info.collapsed .header .close-button {
    display: none;
}

/* ZOOM SLIDER */
.zoom-slider {
    position: relative;
    height: 1em;
    flex: 1;
}

.zoom-slider input {
    display: none;
}

.zoom-slider .rangeSlider {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    width: 100%;
    height: 0.5em;
}

.zoom-slider .rangeSlider__handle {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: white;
}

.zoom-slider .rangeSlider__fill {   
    display: none;
}

.zoom-slider .rangeSlider__buffer {
    position: absolute;
    top: 50%;
    left: 0;
    height: 0.05em;
    width: 100%;    
    transform: translateY(-50%);
    background: white;
}

/* MEDIA QUERIES */
@media (max-width: 1000px) {
    body {
        font-size: 2.8vw;
    }
}

@media (max-width: 670px) {
    body {
        font-size: 5.18vw;
    }

    .info .header .zoom-slider,
    .button-wrapper,
    .slash-1 {
        display: none;
    }

    .info .separator .line {
        display: block;
    }

    .info.expanded .separator-footer {
        display: block;
    }

    .header, .header .title {
        display: inline-block;
    }

    .info .footer {
        display: block;
    }

    .info .separator-header {
        margin-top: 0.45em; /* optical corretion */
    }

    .info .content {
        padding-top: 0.55em; /* optical corretion */
        padding-bottom: 0.55em; /* optical corretion */
    }

    .info .separator-footer {
        margin-bottom: 0.45em; /* optical corretion */
    }

    .recast-button-absolute {
        display: block;
    }
}