@charset "utf-8";
/* styles applied for all window widths */

html{
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}
body{
    margin: 4rem 0 0 0;
    background: #111111;
    overflow-x: hidden;
}
h1, h2, h3{
    font-family: 'Playfair Display', serif;
    font-weight: normal;
}
h1{
    font-size: 2.25rem;
    line-height: 1.125;
    margin: 0 0 1.125rem 0;
}
h2{
    font-size: 2.25rem;
    line-height: 1.125;
    margin: 0 0 1.125rem 0;
}
h3,
.subtitle{
    margin: 0 0 1.125rem 0;
    font-size: 1.125rem;
    line-height: 1.5;
    max-width: 50rem;
    font-family: 'Playfair Display', serif;
}
h4
{
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: bold;
}
p{
    font-size: 1rem;
}
a{
    color: #AB8B62;
    cursor: pointer;
}
a:hover{
    color: #eacda3;
}

/* buttons */

.mediumButton{
    text-decoration: none;
    padding: 0.75rem 1.5rem 0.75rem 1.5rem;
    margin: 0.15rem 0.05rem;
    box-sizing: border-box;
    border-radius: 0.25rem;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}
.primaryButton{
    color: #111111;
    background-color: #AB8B62;
    background-image: linear-gradient(to right, #AB8B62 0%, #eacda3 50%, #AB8B62 100%);
    background-size: 200% auto;
    border: 1px solid #AB8B62;
    transition: 0.5s ease;
}
.primaryButton:hover{
    background-position: right center;
    color: #111111;
}
.primaryButton:focus {
    border: 1px solid #eacda3;
}
.secondaryButton{
    color: #111111;
    border: 1px solid #111111;
    opacity: 0.5;
    background-color: transparent;
}
.secondaryButton:hover{
    opacity: 1;
    color: #111111;
}
.secondaryButton:focus {
    border: 1px solid #111111;
}
.secondaryButton.darkMode{
    color: #ffffff;
    border: 1px solid #ffffff;
}
.secondaryButton.buttonIcon{
    text-decoration: none;
    width: 3rem;
    height: 3rem;
    box-sizing: border-box;
    border-radius: 0.25rem;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #111111;
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
}
.secondaryButton.buttonIcon.link{background-image: url("../images/icon-link.svg");}
.secondaryButton.buttonIcon.facebook{background-image: url("../images/icon-facebook.svg");}
.secondaryButton.buttonIcon.twitter{background-image: url("../images/icon-twitter.svg");}
.secondaryButton.buttonIcon.done{background-image: url("../images/icon-done.svg");}

.secondaryButton.buttonIcon span{
    display: none;
}

/* buttons end */

/* container */

.container {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: filter 0.5s;
    position: relative;
}
.mainSection {
    padding: 2rem 2rem 6rem 2rem;
    width: 100vw;
    box-sizing: border-box;
    min-height: 50vh;
}
.blurred{
    filter: blur(8px);
}

/* container end */

/* title screen */

.titleScreen{
    color: #ffffff;
    background: #111111;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    z-index: 6;
    padding: 2rem 2rem 2rem 2rem;
}
.titleImage{
    width: 100%;
}
.titleImage img{
    height: 100%;
}

/* title screen end */

/* gallery intro */

.galleryIntro {
    background: #ddd;
    position: relative;
}
.introPart{
}
.introPart.chart{
    overflow-x: auto;
    margin: 0 -2rem 0 -2rem;
    width: 100%;
    padding: 0 2rem 0 2rem;
}
.introPart:last-child{
    margin-right: 0;
}
.introTitle{
    min-width: 50vw;
}
.chartLegend{
    text-align: center;
}
.chartLegend .hint{
    margin-right: 1rem;
}
.chartLegend .hint span{
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 1rem;
}

/* gallery intro end */

/* period intro start */
.periodIntro{
    margin: 6rem 0 1rem 0;
}
.periodTitle{
    width: 50vw;
}
/* period intro end */

/* gallery showcase */

.galleryShowcase{
    background: #ffffff;
}
.artwork{
    width: 100%;
    box-sizing: border-box;
}
.imageContainer{
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.imageContainer img{
    width: 100%;
    height: auto;
}
.artworkDescription{
    margin: 1rem 0 4rem 0;
    width: 100%;
}
.artworkDescription .museumInfo{
    font-size: 0.875rem;
}
.artworkDescription .relatedTags .secondaryButton{
    font-size: 0.875rem;
    padding: 0.25rem 1rem;
    margin: 0.15rem 0.05rem;
}
.artworkDescription .generatedInfo{
    font-size: 0.875rem;
    color: #AB8B62;
}
.boundBox{
    border:2px solid #ffffff;
    position:absolute;
    box-sizing: border-box;
    opacity: 0;
    transition: 0.25s 2.0s ease;
    box-shadow: inset 0 0.1rem 0.25rem rgba(0,0,0,0.5), 0 0.1rem 0.25rem rgba(0,0,0,0.5);
    border-radius: 0.25rem;
}
.boundbox:nth-child(1)  {transition: 0.25s 0.0s ease;}
.boundbox:nth-child(2)  {transition: 0.25s 0.1s ease;}
.boundbox:nth-child(3)  {transition: 0.25s 0.2s ease;}
.boundbox:nth-child(4)  {transition: 0.25s 0.3s ease;}
.boundbox:nth-child(5)  {transition: 0.25s 0.4s ease;}
.boundbox:nth-child(6)  {transition: 0.25s 0.5s ease;}
.boundbox:nth-child(7)  {transition: 0.25s 0.6s ease;}
.boundbox:nth-child(8)  {transition: 0.25s 0.7s ease;}
.boundbox:nth-child(9)  {transition: 0.25s 0.8s ease;}
.boundbox:nth-child(10) {transition: 0.25s 0.9s ease;}
.boundbox:nth-child(11) {transition: 0.25s 1.0s ease;}
.boundbox:nth-child(12) {transition: 0.25s 1.1s ease;}
.boundbox:nth-child(13) {transition: 0.25s 1.2s ease;}
.boundbox:nth-child(14) {transition: 0.25s 1.3s ease;}
.boundbox:nth-child(15) {transition: 0.25s 1.4s ease;}
.boundbox:nth-child(16) {transition: 0.25s 1.5s ease;}
.boundbox:nth-child(17) {transition: 0.25s 1.6s ease;}
.boundbox:nth-child(18) {transition: 0.25s 1.7s ease;}
.boundbox:nth-child(19) {transition: 0.25s 1.8s ease;}
.boundbox:nth-child(20) {transition: 0.25s 1.9s ease;}

.artwork.focuseIn .boundBox{
    opacity: 1;
}
.artwork.focuseIn.focuseOut .boundBox{
    opacity: 0;
}
.boundBox p{
    font-size: 0.875rem;
    color: #ffffff;
    font-weight: bold;
    margin: 0.25rem 0.5rem 0.25rem 0.5rem;
    text-shadow: 0 0.1rem 0.25rem rgba(0,0,0,0.5);
}

/* gallery showcase end */

/* artwork detail */

.container.artworkDetailContainer{
    background: #ffffff;
}
.artworkDetail{
    background: #ffffff;
}

/* artwork detail end */

/* final screen */

.finalScreen{
    color: #ffffff;
    background: #111111;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    min-width: 75vw;
    flex-flow: column;
    min-height: 50vh;
    padding: 2rem 2rem 2rem 2rem;
    z-index: 6;
}

/* final screen end */

/* Main menu */

.menuCover{
    position: fixed;
    top:0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    background-color: #111111;
    opacity: 0;
    transition: opacity 0.5s, visibility 0.5s;
    display: block;
    visibility: hidden;
}
.menuCover.opened{
    opacity: 0.5;
    visibility: visible;
}
.mainMenu{
    position: fixed;
    top:0;
    left: 0;
    z-index:10;
    width: 100vw;
    font-size: 1rem;
    display: flex;
    justify-content: flex-start;
}
.mainMenu .projectLogo{
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    line-height: 1rem;
    height: 4rem;
    display: inline-block;
    box-sizing: border-box;
    text-decoration: none;
    color: #ffffff;
}
.menuLink{
    padding: 1.5rem 2rem;
    line-height: 1rem;
    border-bottom: 1px solid #fff;
    width: 100%;
    box-sizing: border-box;
    height: 4rem;
    display: block;
    text-decoration: none;
}
.menuIcon{
    width: 4rem;
    height: 4rem;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    box-sizing: border-box;
    display: none;
}
.menuIcon.openMenu,
.menuIcon.closeMenu{
    position: absolute;
    top:0;
    right: 4rem;
}
.menuIcon.openSearch,
.menuIcon.closeSearch{
    position: absolute;
    top:0;
    right: 0;
}
.menuIcon.openMenu{background-image: url("../images/icon-menu-white.svg");}
.menuIcon.closeMenu{background-image: url("../images/icon-close-white.svg");}
.menuIcon.openSearch{background-image: url("../images/icon-search-white.svg");}
.menuIcon.closeSearch{background-image: url("../images/icon-close-white.svg");}
.menuIcon.back{background-image: url("../images/icon-arrow-white.svg");}

.menuIcon.visible{
    display: block;
}



.menuIcon span{
    display: none;
}
.menuFirstLevel{
    border-bottom: 1px solid #fff;
    background: #111111;
    width: 100vw;
    height: 4rem;
    z-index: 20;
    position: absolute;
    box-sizing: border-box;
}
.menuSecondLevel,
.menuThirdLevel{
    position: absolute;
    color: #ffffff;
    z-index: 10;
    background: #111111;
    transition: left 0.5s;
    width: 100vw;
    left:-100vw;
    top:4rem;
}
.menuSecondLevel.opened,
.menuThirdLevel.opened{
    left:0;
}
.menuThirdLevel{
    z-index: 15;
    top:0;
}
.windowBackRow{
    width: 100%;
    border-bottom: 1px solid #fff;
    display: flex;
    justify-content: flex-end;
    height: 4rem;
    box-sizing: border-box;
    overflow: hidden;
}
.windowContent{
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    height: calc(100vh - 4rem);
    overflow: auto;
}

/* Menu window end */

/* Main menu end */

/* form */

.fieldBox{
    margin: 0 0 1rem 0;
    width: 100%;
}
.fieldBox:last-child{
    margin: 2rem 0 1rem 0;
}
input,
select{
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    padding: 0.75rem 0.75rem 0.75rem 0.75rem;
    border-radius: 0.25rem;
    box-sizing: border-box;
    border: 1px solid #666666;
    background: #111111;
    color: #fff;
    min-height: 1rem;
    font-size: 1rem;
}
input:focus,
select:focus{
    border: 1px solid #fff;
    outline: none;
}
input[type='checkbox']{
    width: 1rem;
    display: inline-block;
    margin: 0.5rem 0.5rem 0.5rem 0;
}
label{
    color: #ffffff;
    line-height: 1.5rem;
    margin: 0 0 0.25rem 0;
    display: inline-block;
}
.hiddenInput{
    display: none;
}
.errorMessage{
    color: rgba(255,0,0,0.75);
    display: block;
    margin: 0.25rem 0 0 0;
}
.searchForm .primaryButton{
    width: 100%;
}
.advancedOptions{
    max-height: 0;
    transition: max-height 1s ease;
    overflow: hidden;
    margin: 0;
}
.advancedOptions.opened{
    max-height: 14rem;
}

/* select 2 multiple choice */

.searchForm .select2-container {
    width: 100%;
    position: relative;
    z-index: 30;
}
.searchForm .select2-container--default .select2-selection--multiple {
    background-color: #111111;
    border: 1px solid #666666;
    border-radius: 0.25rem;
    min-height:1rem;
}
.searchForm .select2-container .select2-search--inline .select2-search__field {
    padding: 0.4rem;
}
.searchForm .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #ffffff;
}
.searchForm .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #dddddd;
    border: none;
    border-radius: 0.25rem;
    padding: 0.25rem;
    color: #111111;
}
.searchForm .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: none;
}
.wrapper .select2-dropdown {
    background-color: #333333;
    border: none;
    color: #ffffff;
}
.wrapper .select2-results__option {
    padding: 0.3rem 0.6rem;
}
.wrapper .select2-container--default .select2-results__option--selected {
    color: #777777;
    background-color: #333333;
}
.wrapper .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #555555;
}

/* select 2 multiple choice end */

/* Date range slider */

.sliderLabel{
    margin: 0 0 0.75rem 0;
}
.noUi-target,.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-target {
  position: relative;
  direction: ltr;
}
.noUi-base {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.noUi-origin {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
}
.noUi-handle {
  position: relative;
  z-index: 1;
}

/* This class is applied to the lower origin when its values is > 50%. */
.noUi-stacking .noUi-handle {
  z-index: 10;
}
.noUi-state-tap .noUi-origin {
  -webkit-transition: left 0.3s,top .3s;
  transition: left 0.3s,top .3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}
.noUi-base,.noUi-handle {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/* Slider size and handle placement */
.noUi-horizontal {
  height: 4px;
}

.noUi-horizontal .noUi-handle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  left: -7px;
  top: -7px;
  background-color: #AB8B62;
}

/* Styling */

.noUi-background {
  background: #666666;
}

.noUi-connect {
  background: #AB8B62;
  -webkit-transition: background 450ms;
  transition: background 450ms;
}

.noUi-origin {
  border-radius: 2px;
}

.noUi-target {
  border-radius: 2px;
}

.noUi-target.noUi-connect {
}

/* Handles and cursors;
 */
.noUi-draggable {
  cursor: w-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: n-resize;
}

.noUi-handle {
  cursor: default;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}

.noUi-handle:active {
  border: 8px solid #AB8B62;
  border: 8px solid rgba(171,139,78,0.38);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  left: -14px;
  top: -14px;
}

/* Date range slider end */

/* form end */

/* about project */

.partners{
    margin: 6rem 0 0 0;
}
.partners .logo{
    background-repeat: no-repeat;
    height: 3rem;
    margin: 1rem 2rem 0 0;
    display: inline-block;
}
.partners .logo.logoUmprum{
    background-image: url("../images/logo-umprum.svg");
    width: 14.43rem;
}
.partners .logo.logoMsmt{
    background-image: url("../images/logo-msmt.svg");
    width: 4.38rem;
}
.partners .logo.logoSng{
    background-image: url("../images/logo-sng.svg");
    width: 6.33rem;
}
.partners .logo.logoBlueGhost{
    background-image: url("../images/logo-blueghost.svg");
    width: 12rem;
}
.partners .logo span{
    display: none;
}

/* about project end */

/* browse exhibitions */

.browseExhibition{
    color: #ffffff;
}
.exhibitionList{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
.exhibitionPreview{
    position: relative;
    width: calc(50% - 0.5rem);
    padding-top: calc(50% - 0.5rem);
    margin-bottom: 1rem;
    background-color: #555555;
    overflow: hidden;
}
.previewImage{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: cover;
    background-position: center center;
    transform: scale(1.1, 1.1);
    transition: transform 0.5s;
}
.exhibitionPreview:hover .previewImage{
    transform: scale(1.25, 1.25);
}
.previewInfo{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    flex-flow: column;
    padding: 1rem;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%);
    color: #ffffff;
}

/* browse exhibitions end */

/* info page */

.infoPage{
    color: #ffffff;
}

/* info page end */

/* sharing panel start */

.sharingPanel{
    display: none;
}

/* sharing panel end */

/* sharing popup */

.sharingPopup{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top:0;
    left: 0;
    z-index: 30;
    opacity: 1;
    transition: opacity 0.5s, visibility 0.5s;
    visibility: visible;
}
.sharingPopup.closed{
    visibility: hidden;
    opacity: 0;
}
.sharingPopupCover{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top:0;
    left:0;
    z-index: 30;
    opacity: 0.5;
    background-color: #111111;
}
.sharingPopupFlex{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.sharingPopupWindow{
    width: 100%;
    max-width: 25rem;
    text-align: center;
    padding: 2rem;
    box-sizing: border-box;
    background: #ffffff;
    position: relative;
    z-index: 40;
    border-radius: 0.25rem;
    box-shadow: 0 0.25rem 1rem 0.25rem rgba(0,0,0,0.25);
}
.sharingPopupClose{
    background: url("../images/icon-close-black.svg") center no-repeat;
    background-size: 100%;
    width: 1rem;
    height: 1rem;
    display: block;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}
.sharingPopupImage{
    width:10rem;
    height: 10rem;
    margin: 0 auto 1.125rem auto;
    background-position: center center;
    background-size: cover;
    border-radius: 100%;
}
.sharingPopupWindow h3{
    margin: 0 0 1.125rem 0;
}
.sharingPopup .sharingLinks{
    display: flex;
    justify-content: center;
    margin: 2.25rem 0 1.125rem 0;
}
.sharingPopup .sharingLinks *{
    margin: 0 0.25rem;
}

/* intro */

/* parallax */

.mainSection.parallaxContainer{
    padding: 0;
    background-color: #AB8B62;
}
.mainSection.parallaxContainer.introGallery{background-color: #111111;}
.mainSection.parallaxContainer.introMap{background-color: #ffffff;}

.parallaxCover{
    width: 100vw;
    height: 100vw;
    overflow: hidden;
    position: relative;
    z-index: 0;
}
.parallaxImage{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
#introGallery{background-image: url("../images/intro/hampisch-interior.jpg");}
#introMap{background-image: url("../images/intro/ce-map.jpg");}

/* parallax end */

.mainSection.landInfo,
.mainSection.museumsInfoMobile{
    color: #ffffff;
}
.landInfo article
.museumsInfoMobile article{
    width: 100%;
}
.mainSection.callToAction{
    color: #111111;
    background-color: #ffffff;
}
.callToAction article{
    width: 100%;
}
.upperLine,
.mainSection.museumsInfo,
.mainSection.visionInfo{
    display: none;
}

/* intro end */