html{
    scroll-behavior: smooth;
}
body{
    font-family: RiposteRegular;
    margin: 0;
}

p{
    margin: 0;
}

a{
    color: black;
    text-decoration: none;
}

#menuContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

#header{
    height: 109px;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid black;
    /*font-size: 20px;*/
    font-size: calc(27px * 0.7);
    line-height: calc(33px * 0.7);
    position: relative;
    text-align: center;
}
@media (min-width: 800px){
#header{
    display: flex;
    padding: 33px 75px;
    font-size: 27px;
    line-height: 33px;
    font-family: 'RiposteLight';
}
}


@media (min-width: 800px){
#header.menuVisible{
    width: calc(100% - 290px);
}
}

#menuButtonMobile{
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 40px;
}
#menuButton{
    display: none;
}
@media (min-width: 800px){
#menuButton{
    position: static;
    display: block;
    cursor: pointer;
}
#menuButtonMobile{
    display: none !important;
}
}
#menuButton:hover{
    color: #ff2700;
}
#menu{
    width: 100vw;
    height: calc(100vh - 109px);
    right: 0;
    top: 108px;
    display: none;
    background-color: white;
    z-index: 3;
}
@media (min-width: 800px){
#menu{
    width: 290px;
    height: 100vh;
    top: 0;
    border-left: 1px solid black;
    position: fixed;
    z-index: 11;
}
}

.menuContainer{
    border-bottom: 1px solid black;
}
@media (min-width: 800px){
.menuContainer{
    margin: 1em 0 0 1.5em;
    padding: 0;
    border-bottom: none;
}
}
.menuContainer > p{
    cursor: pointer;
    padding:  1.5em 1em;

}
@media (min-width: 800px){
.menuContainer > p{
    padding: 0;
}
}
.menuContainer > p:hover{
    color: #ff2700;
}
@media (min-width: 800px){
.menuContainer > p:hover{
    color: black;
}
}
.menuContainer > .children{
    display: none;
    width: 100%;
}
.menuContainer > .children > a:hover, .menuContainer:not(.submenu) > p:hover{
    color: #ff2700;
}
.menuContainer > a:hover{
    color: #ff2700;
}
.menuContainer > .children > a{
    display: block;
    width: calc(100% - 2em);
    border-top: 1px solid black;
    background-color: rgb(241,239,231);
    padding: .5em 1em;
}

.menuContainer > a{
    display: block;
    padding: 1.5em 1em;
}
@media (min-width: 800px){
.menuContainer > .children{
    display: block;
    margin-left: 1em;
}
.menuContainer > .children > a{
    display: block;
    padding: 0;
    background-color: transparent;
    border-top: none;

}
.menuContainer > a{
    display: block;
    padding: 0;
}
}

.menuDownArrow{
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    transform: rotate(-45deg);
    width: 10px;
    height: 10px;
    margin: 27px 26px 10px 10px;
}
.menuUpArrow{
    transform: rotate(135deg) translate(6px, -6px) !important;
}
.submenu{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.submenu p{
    flex-basis: calc(100% - 83px);
}
@media (min-width: 800px){
.menuDownArrow{
    display: none;
}
.submenu{
    display: block;
}
.submenu p{
    padding-bottom: 0;
}
}

#headerWordMark{
    width: 180px;
    height: 110px;
}
@media (min-width: 800px){
#headerWordMark{
    width: 240px;
    height: 110px;
}
}
#headerWordLink{
    text-align: center;
    
}
@media (min-width: 800px){
#headerWordLink{
    display: flex;
}
}

#menuItems{
    font-family: 'RiposteLight';
    font-size: calc(22px * 0.7);
    line-height calc(24px * 0.7);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
@media (min-width: 800px){
#menuItems{
    font-size: 20px;
    line-height 24px;
    border-top: 1px solid black;
    margin-top: 108px;
}
}
.menuSpace{
    flex-grow: 1;
}

#closeButton{
    width: calc(100% - 60px);
    padding: 15px;
    background-color: black;
    color: white;
    margin: 15px;
    text-align: center;
}
@media (min-width: 800px){
#closeButton, #menuSpace{
    display: none;
}
}

#footer{
    bottom: 0;
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 33px 25px;
    flex-wrap: wrap;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    font-size: calc(14px * 1);
    line-height: calc(18px * 1);
    font-family: "RiposteLight";
    align-items: center;
}
@media (min-width: 800px){
#footer{
    flex-direction: row;
    font-size: 14px;
    line-height: 18px;
    padding: 33px 75px;
}
}
#footer a{
    color: white;
}
.footerElement > p{
    margin-bottom: 1em;
}
@media (min-width: 800px){
.footerElement > p{
    margin-bottom: 0;
}
}

.content{
    min-height: calc(100vh - 481px);
}

.content.chrono ~ #footer{
}
.content.biography{
    margin-bottom: 40px;
}
.footerElement{
    flex-basis: 100%;
    margin-bottom: 20px;
    text-align: center;
}
.footerElement#socialMedia{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 30px;
}
.footerElement#adress{
    font-size: calc(16px * 0.7);
    line-height: calc(20px * 0.7);
}
.footerElement#adress p{
    margin-bottom: 0;
}
.footerElement#socialMedia img{
    width: 20px;
    margin: 0 10px;
}
@media (min-width: 800px){
.footerElement{
    text-align: left;
}
}
.footerElement#adress{
    order: 99;
}
@media (min-width: 800px){
.footerElement{
    flex-basis: 50%;
}
.footerElement:nth-child(2), .footerElement:nth-child(4){
    text-align: right;
}
.footerElement#adress{
    order: 0;
}
.footerElement#socialMedia{
    width: auto;
    display: initial;
}
}
#indexNewsContainer, #newsFutureContainer{
    padding: 40px 0 0;
}
#newsFutureContainer{
    background-color: rgb(250,249,246);
}
#indexNewsContainer .newsItem, #newsFutureContainer .newsItem{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-family: 'RiposteThin';
    font-size: calc(16px * 0.7);
    line-height: calc(20px * 0.7);
}
@media (min-width: 800px){
#indexNewsContainer .newsItem, #newsFutureContainer .newsItem{
    font-size: 16px;
    line-height: 20px;
}
}
/*#indexNewsContainer a, #indexNewsContainer > div, #newsFutureContainer a, #newsFutureContainer > div{*/
#indexNewsContainer > *, #newsFutureContainer > *{
    display: block;
    width: 100%;
    padding: 15px 15px;
    box-sizing: border-box;
    border-bottom: 1px solid black;
}
@media (min-width: 800px){
/*#indexNewsContainer a, #indexNewsContainer > div, #newsFutureContainer a, #newsFutureContainer > div{*/
#indexNewsContainer > *, #newsFutureContainer > *{
}
}
#indexNewsContainer > div.noBorder{
    border-bottom: none;
}
@media (min-width: 800px){
#indexNewsContainer a, #indexNewsContainer > div, #newsFutureContainer a, #newsFutureContainer > div{
    padding: 15px 75px;
}
}
#indexNewsContainer a:hover, #newsFutureContainer a:hover{
    background-color: rgb(241,239,231);
}
/*#indexNewsContainer a:first-of-type, #newsFutureContainer a:first-of-type, #indexNewsContainer .newsItemCont:first-of-type, #newsFutureContainer .newsItemCont:first-of-type{*/
#indexNewsContainer > *:first-child, #newsFutureContainer > *:first-child{
    border-top: none;
}
.indexNewsTitle{
    font-family: 'RiposteRegular';
}

#indexWhatsOn{
    padding: 15px 15px;
    font-size: calc(27px * 0.7);
    line-height: calc(33px * 0.7);
    font-family: 'RiposteLight';
}
@media (min-width: 800px){
#indexWhatsOn{
    padding: 15px 75px;
    font-size: 27px;
    line-height: 33px;
}
}
.longArrowRight{
    display: block;
    width: 16px;
    height: 16px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(135deg);

}
.longArrowRight::after{
    content: "";
    display: block;
    width: 1px;
    height: 29px;
    background-color: black;
    transform: rotate(-45deg) translate(10px, 4px);
    left: 0;
    top: 0;
}
@media (min-width: 800px){
.longArrowRight::after{
    height: 55px;
    transform: rotate(-45deg) translate(19px, 8px);
}
}
#indexVideoContainer{
    position: relative;
}
#indexImageContainer{
    position: relative;
    height: calc(100vh - 109px);
}
#indexImageContainer img{
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 130px);
    margin: auto;
}
#indexImageContainer img:nth-child(2){
    top: 50%;
    transform: translateY(-50%);
}
#desktopGraphic, #desktopText{
    display: none;
}
#mobileGraphic{
}
@media (min-width: 800px){
#mobileGraphic{
    display: none;
}
#desktopGraphic, #desktopText{
    display: block;
}
}
#indexVideoContainer video{
    max-width: 100%;
    min-width: 100%;
}
/*#videoHint{
    color: #ff2700;
    padding: 20px;
    margin: 5px;
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
}*/
#videoHint{
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    cursor: pointer;
    padding: 20px;
}
#indexViewMore, #exhibitionViewMore, #contactUs{
    position: relative;
    text-align: center;
    border-bottom-style: none !important;
}
@media (min-width: 800px){
#indexViewMore, #exhibitionViewMore{
    text-align: right;
}
}
#contactUs{
    /*text-align: left;*/
}
#indexViewMore a, #exhibitionViewMore a, #contactUs a, #purchaseHere a{
    position: relative;
    right: 0;
    padding: 15px 47px;
    border: 1px solid black;
    display: inline-block;
    margin: 30px;
    width: 51px;
    font-family: 'RiposteLight';
    font-size: calc(14px * 1);
    background-color: black;
    color: white;
}
@media (min-width: 800px){
#indexViewMore a, #exhibitionViewMore a, #contactUs a, #purchaseHere a{
    font-size: 14px;
    background-color: white;
    color: black;
    width: 73px;
}
}
#indexViewMore a{
    width: 74px;
}
#exhibitionViewMore a{
    width: 90px;
}
#purchaseHere a{
    width: 112px;
    margin: 0;
}
#contactUs a{
    width: 79px;
    margin: 0;
}
#purchaseHere{
    text-align: center;
}
@media (min-width: 800px){
#exhibitionViewMore a{
    width: 129px;
}
#purchaseHere a{
    width: 106px;
    margin: 0;
}
#contactUs{
    text-align: left;
}
#contactUs a{
    width: 79px;
}
#purchaseHere{
    text-align: left;
}
}
#indexViewMore a:hover, #exhibitionViewMore a:hover, #contactUs a:hover, #purchaseHere a:hover{
    background-color: black;
    color: white;
}

#pageTitle, #photogramTitle{
    font-size: calc(40px * 0.7);
    line-height: calc(48px * 0.7);
    text-align: center;
    margin: 50px 30px;
    font-family: RiposteLight;
    letter-spacing: .2em;
}
#articleTitle{
    font-size: calc(50px * 0.7);
    line-height: calc(60px * 0.7);
    text-align: center;
    margin: 90px 20px 20px;
    font-family: RiposteLight;
}
#articleSubtitle{
    font-family: RiposteLight;
    font-size: calc(18.5px * 0.7);
    line-height: calc(22px * 0.7);
    margin: 0 auto 80px;
    text-align: center;

}
@media (min-width: 800px){
#pageTitle, #photogramTitle{
    margin: 80px auto;
    font-size: 40px;
    line-height: 48px;
}
#articleTitle{
    font-size: 50px;
    line-height: 60px;
    margin: 90px auto 20px;
}
#articleSubtitle{
    font-size: 18.5px;
    line-height: 22px;
}
}

#newsGridContainer, #albumGridContainer{
    margin: 0 auto;
    /*display: grid;*/
    /*grid-template-columns: 1fr;*/
}
.photogramGridContainer{
    margin: 0 auto;
}
@media (min-width: 800px){
.photogramGridContainer{
    margin: 0 200px;
}
}
#albumGridContainer.detail{
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
/*
@media (min-width: 800px){
#newsGridContainer{
    grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1200px){
#newsGridContainer{
    grid-template-columns: 1fr 1fr 1fr;
}
}
@media (min-width: 1600px){
#newsGridContainer{
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
*/
.newsGridItem{
    margin: 10px auto;
    width: 250px;
    text-align: center;
}
.artDbItem{
    margin: 10px auto;
    width: 120px;
    text-align: center;
}
.albumGridItem{
    margin: 10px auto;
    width: 120px;
    text-align: center;

}
.newsGridItem{
    margin-bottom: 20px;
    width: 80vw;
}
.newsGridItem img{
    max-width: 100%;
}
@media (min-width: 800px){
.newsGridItem, .artDbItem{
    margin: 10px;
    width: 370px;
}
.albumGridItem{
    width: 250px;
}
.artDbItem{
    margin: 10px auto;
    width: 250px;
    text-align: center;
}
}
.newsGridItem .text{
    text-align: left;
    font-size: calc(14px * 1);
    line-height: calc(18px * 1);
}
@media (min-width: 800px){
.newsGridItem .text{
    font-size: 14px;
    line-height: 18px;
}
}
.newsGridItem .text *{
    margin: 5px 0;
}
.newsGridItem .text .title{
    font-size: calc(26px * 0.7);
    margin: 20px 0;
    line-height: calc(30px * 0.7);
    font-family: 'RiposteLight';
}
@media (min-width: 800px){
.newsGridItem .text .title{
    font-size: 26px;
    line-height: 30px;
}
}
.albumGridItem, .artDbItem{
    /*display: grid;
    align-items: center;
    justify-content: center;*/
}
.albumGridItem a{
}
.albumGridItem img, .artDbItem img{
    width: 100px;
}
@media (min-width: 800px){
.albumGridItem img, .artDbItem img{
    padding-top: 25px;
    padding-bottom: 25px;
    width: 200px;
    transition: width .3s, padding .3s;
    /*
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    */
    
}
.albumGridItem img:hover, .artDbItem img:hover{
    width: 250px;
    padding-top: 0;
    padding-bottom: 0;
}
}

#categorySelectButton, #formatSelectButton, #rangeSelectButton{
    padding: 1.5em 1em;
    border-bottom: 1px solid black;
    width: calc(100vw - 30px);
    font-family: 'RiposteLight';
    font-size: calc(22px * 0.7);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
@media (min-width: 800px){
#categorySelectButton, #formatSelectButton{
    padding: 5px 20px;
    font-size: 20px;
    border: 1px solid black;
    width: 100%;
    box-sizing: border-box;
}
#rangeSelect{
    display: none;
}
}
#formatSelectButton{
    border-left: none;
}

#categorySelectOptions, #formatSelectOptions{
    display: none;
    border-top: none;
    font-family: 'RiposteLight';
    font-size: calc(20px * 0.7);
    background-color: white;
    position: relative;
    z-index: 1;
}
@media (min-width: 800px){
#categorySelectOptions, #formatSelectOptions{
    font-size: 20px;
    border: 1px solid black;
    width: 100%;
    box-sizing: border-box;
}
}
#formatSelectOptions{
    margin-left: -1px;
}
.categorySelectOption, .formatSelectOption{
    padding: .5em 1em;
    width: calc(100vw - 2em);
    cursor: pointer;
    border-bottom: 1px solid black;
    background-color: rgb(241,239,231);
}
@media (min-width: 800px){
.categorySelectOption, .formatSelectOption{
    padding: 5px 20px;
    width: auto;
    background-color: white;
}
.categorySelectOption:last-child, .formatSelectOption:last-child{
    border-bottom: none;
}
}
.categorySelectOption.selected, .formatSelectOption.selected{
    background-color: black;
    color: white;
    border-bottom: 1px solid white;
}
@media (min-width: 800px){
#categorySelect, #formatSelect{
    width: 16%;

}
}
#range{
    margin: 40px 35px 34px;
    width: calc(100vw - 70px);
    border-bottom: 1px solid black;
}
#rangeContainer{
    display: none;
    border-bottom: 1px solid black;
    background-color: rgb(241,239,231);
}
@media (min-width: 800px){
#range{
    margin: 30px 50px 0;
    width: 100%;
    border-bottom: none;
}
#rangeContainer{
    display: block;
    border-bottom: none;
    background-color: transparent;
    width: 24%;
}
}

#dbApplyButton{
    border: 1px solid black;
    padding: 10px;
    flex-basis: 100%;
    text-align: center;
    cursor: pointer;
    background-color: black;
    color: white;
    margin-bottom: 10px;
}

#dbCloseButton{
    border: 1px solid black;
    padding: 10px;
    flex-basis: 40%;
    text-align: center;
    cursor: pointer;
}
#dbClearButton{
    border: 1px solid black;
    padding: 10px;
    flex-basis: 40%;
    text-align: center;
    cursor: pointer;
}
#dbMobileButtonContainer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100% - 30px);
    margin: 0 15px 15px;
    justify-content: space-between;

}
@media (min-width: 800px){
#dbMobileButtonContainer{
    display: none;
}
}

#filterButton{
    cursor: pointer;
}














.continentContainer{
    display: flex;
    flex-direction: column;
    padding: 15px 0px 0px;
    padding-top: 50px;
}
.continentContainer.first{
    padding-top: 15px;
}
@media (min-width: 800px){
.continentContainer{
    flex-direction: row;
    padding: 30px 0 40px;
    margin: 0;
    border-top: 1px solid black;
}
}
.continentName{
    flex-basis: 20%;
    box-sizing: border-box;
    font-size: calc(27px * 0.7);
    line-height: calc(33px * 0.7);
    font-family: 'RiposteLight';
    padding-bottom: 15px;
    padding-left: 20px;
    border-bottom: 1px solid black;
}
@media (min-width: 800px){
.continentName{
    font-size: 27px;
    line-height: 33px;
    padding-left: 5%;
    padding-bottom: 0;
    border-bottom: none;
}
}
.collectionContainer{
    flex-basis: 85%;
}
@media (min-width: 800px){
.collectionContainer{
    padding: 0;
}
}
.collection{
    font-size: calc(21px * 0.7);
    line-height: calc(28px * 0.7);
    width: calc(100% - 40px);
    display: block;
    border-bottom: 1px solid black;
    padding: 15px 20px;
}
.collection:last-child{
    border-bottom: none;
}
@media (min-width: 800px){
.collection{
    font-size: 21px;
    line-height: 28px;
    width: calc(33% - 30px);
    padding: 0 30px 0 0 ;
    border-bottom: none;
    margin-bottom: 1.5em;
}
}
a.collection:hover > .collectionTitle{
    color: red;
}
.collectionAdress{
    font-family: 'RiposteThin';
}

.artDbListItem, #artDbListHeader{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding:10px 15px;
    border-top: 1px solid black;
}
#artDbListItems > a:last-child > .artDbListItem{
    border-bottom: 1px solid black;
}
@media (min-width: 800px){
.artDbListItem, #artDbListHeader{
    padding:2px 15px;
    border: none;
}
}
.artDbListItem:hover{
    color: red;
}

#artDbListHeader{
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    display: none;
}
@media (min-width: 800px){
#artDbListHeader{
    display: flex;
}
}
#artDbListHeader > .headerSorter{
    cursor: pointer;
}


#headerTitle, .listTitle{
    flex-basis: 100%;
}
#headerYear, .listYear{
    flex-basis: 10%;
    display: none;
}
#headerCategory, .listCategory{
    flex-basis: 10%;
    display: none;
}
#headerFormat, .listFormat{
    flex-basis: 10%;
    display: none;
}
@media (min-width: 800px){
#headerTitle, .listTitle{
    flex-basis: 70%;
    margin: 0 5px;
}
#headerYear, .listYear{
    flex-basis: 10%;
    display: block;
    margin: 0 5px;
}
#headerCategory, .listCategory{
    flex-basis: 10%;
    display: block;
    margin: 0 5px;
}
#headerFormat, .listFormat{
    flex-basis: 10%;
    display: block;
    margin: 0 5px;
}
}

#chronoContainer{
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: flex-start;

}
@media (min-width: 800px){
#chronoContainer{
    height: calc(100vh - 110px);
}
}

#chronoShortItems1, #chronoShortItems2{
    border-right: 1px solid black;
    flex-basis: 170px;
    overflow: hidden;
    height: 100%;
    font-size: calc(13px * 0.7);
    padding: 0 20px;
    font-family: 'RiposteLight';
    display: none;
}
@media (min-width: 800px){
#chronoShortItems1, #chronoShortItems2{
    font-size: 13px;
    display: block;
}
}
#chronoShortItems1{
    text-align: center;
    flex-basis: 20vw;
    font-size: 21px;
    line-height: 28px;
    font-family: 'RiposteLight';
}
.chronoTitle{
    font-size: 21px;
    line-height: 28px;
    padding-top: 60px;
    padding-bottom: 30px;
    font-family: 'RiposteLight';
}
.chronoShortItem{
    cursor: pointer;
}
/*.chronoShortItem:hover{
    color: red !important;
}*/

#chronoLongItems{
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
}
@media (min-width: 800px){
#chronoLongItems{
    width: 80vw;
}
}
.slick-prev::before, .slick-next::before{
    content: '' !important;
}
.slick-prev{
    position: absolute;
    top: 50%;
    left: 25px !important;
    z-index: 5;
    border-top: 1px solid black !important;
    border-left: 1px solid black !important;
    width: 20px;
    height: 20px;
    transform: rotate(-45deg) !important;
}
.slick-next{
    position: absolute;
    top: 50%;
    right: 25px !important;
    border-top: 1px solid black !important;
    border-right: 1px solid black !important;
    width: 20px;
    height: 20px;
    transform: rotate(45deg) !important;
}

#chronoNext, #chronoPrev{
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    border-top: 1px solid black;
    border-right: 1px solid black;
    z-index: 5;
    cursor: pointer;
}
#chronoNext{
    right: 25px;
}
#chronoPrev{
    left: 25px;
}
.chronoLongItem{
    text-align: center;
    border-bottom: 1px solid black;
    position: relative;
}
.chronology-image > img {
    margin: 0 auto ;
    max-width: 70vw;
}
.chronology-text{
    font-family: 'RiposteLight';
    font-size: calc(14px * 1);
    line-height: calc(18px * 1);
    max-width: 90vw;
    margin: 20px auto 20px;
}
.chronology-text-link:hover{
    color: red;
}
.chronology-text-link{
    font-family: 'RiposteLight';
    font-size: calc(14px * 1);
    margin: 20px auto 20px;
    display: block;
    text-align: left;
}
@media (min-width: 800px){
.chronology-text{
    font-size: 14px;
    line-height: 18px;
    margin: 40px auto 40px;
    max-width: 30vw;
}
.chronology-text-link{
    font-size: 14px;
    line-height: 18px;
    margin: 0px auto 100px;
    max-width: 30vw;
}
.chronology-image > img {
    margin: 0 auto ;
    max-width: none;
}
}
.chronoSpacer{
    height: 45vh;
}
.chronology-par{
    text-align: left;
}
#dbMenu{
    display: none;
    flex-direction: column;
    position: absolute;
    min-height: calc(100vh - 109px);
    width: 100vw;
    top: 109px;
    left: 0;
    background-color: white;
    z-index: 10;
}
#dbMenuMobile{
    display: flex;
    margin: 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    width: 90vw;
}
@media (min-width: 800px){
#dbMenu{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 0 calc(5vw - 6px);
    width: 90vw;
    height: auto;
    top: auto;
    left: auto;
    position: absolute;
    min-height: unset;
    background-color: transparent;

}
#dbMenuMobile{
    display: none;
}
}
#dbMenu > a{
    display: block;
}
#dbMenuMobile > #dbSpacer{
    flex-grow: 999999;
}
@media (min-width: 800px){
#dbMenu > #dbSpacer{
    flex-grow: 1;
}
}

#dbSelectedMenu {
    display: none;
}
@media (min-width: 800px){
#dbSelectedMenu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 40px;
    margin: 0 auto;
    width: 90vw;
}
}

.menuSelectedCategory, .menuSelectedFormat {
    background-color: black;
    color: white;
    padding: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: none;
    font-family: 'RiposteLight';
    font-size: calc(14px * 1);
    cursor: pointer;
}
@media (min-width: 800px){
.menuSelectedCategory, .menuSelectedFormat {
    font-size: 14px;
}
}
.menuSelectedCategory:hover, .menuSelectedFormat:hover {
    background-color: red;
}

#search{
    border: none;
    border-bottom: 1px solid black;
    box-shadow: none;
    color: black;
    font-family: "RiposteLight";
    font-size: calc(20px * 0.7);
    margin: 60px 20px 40px;
}
@media (min-width: 800px){
#search{
    font-size: 20px;
    margin: 0 28px;
    width: 20%;
}
}
#search::placeholder{
    color: black;
    font-family: "RiposteLight";
    font-size: calc(20px * 0.7);
     opacity: 1;
}
@media (min-width: 800px){
#search::placeholder{
    font-size: 20px;
}
}
#artDbBoxes{
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    width: 24px;
    margin: 0 5px;
}
#dbMenu #artDbBoxes{
    display: none !important;
}

#artDbBoxes .box{
    max-width: 10px;
    min-width: 10px;
    height: 10px;
    flex-basis: 50%;
    background-color: black;
    flex-grow: 0;
    margin: 1px;
}

#artDbLines{
    display: flex !important;
    flex-direction: column;
    margin: 0 5px;
}
#dbMenu #artDbLines{
    display: none !important;
}


#artDbLines .line{
    width: 20px;
    height: 2px;
    margin: 3px 0;
    background-color: black;
}
@media (min-width: 800px){
#dbMenu #artDbLines{
    display: flex !important;
}
#dbMenu #artDbBoxes{
    display: flex !important;
}
}
#menuButtonMobile{
    display: flex;
    flex-direction: column;
    margin: 0 5px;
}
#menuButtonMobile .line{
    width: 20px;
    height: 2px;
    margin: 3px 0;
    background-color: black;
}
.grey{
    background-color: lightgrey !important;
}

#artDbGalleryContainer{
    margin: 0 auto;
}
#artDbGalleryContainerContainer{
    width: 95vw;
    margin: 30px auto;
    min-height: 40vh;
}
@media (min-width: 800px){
#artDbGalleryContainerContainer{
    margin: 80px auto;
}
}

#artDbList{
    width: 100vw;
    margin: 30px auto;
    font-family: "RiposteLight";

}

@media (min-width: 800px){
#artDbList{
    width: 90vw;
    margin: 80px auto;
}
}

.leftArrow, .rightArrow, .topArrow, .bottomArrow, .bottomArrowSmall{
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
}
.smallLeftArrow{
    width: 5px;
    height: 5px;
    display: inline-block;
    transform: translateY(-1px) rotate(45deg);
}
.detailClose{
    width: 32px;   
    height: 32px;
}
.detailClose:before, .detailClose:after {
    position: absolute;
    left: 35px;
    content: ' ';
    height: 18px;
    width: 1px;
    background-color: #333;

}
.detailClose:before {
      transform: rotate(45deg);

}
.detailClose:after {
      transform: rotate(-45deg);

}
.leftArrow, .smallLeftArrow {
    border-bottom: 1px solid black;
    border-left: 1px solid black;
}
.rightArrow {
    border-top: 1px solid black;
    border-right: 1px solid black;
}
.bottomArrow, .bottomArrowSmall{
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}
.topArrowSmall{
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-right: none;
    border-bottom: none
}
.topArrow {
    border-top: 1px solid black;
    border-left: 1px solid black;
    margin: 0 auto;
}
.bottomArrowSmall{
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 15px;
    margin-top: 6px;

}
.leftArrow, .rightArrow{
    display: none;
}
.detailSpacer{
    flex-grow: 9999;
}
.leftArrow.mobile, .rightArrow.mobile{
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 10px;
}
@media (min-width: 800px){
.bottomArrowSmall{
    margin-right: 0;
    margin-top: 5px;
}
.leftArrow, .rightArrow{
    display: block;
}
.leftArrow.mobile, .rightArrow.mobile{
    display: none;
}
}

#photoGalleryContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 20px 10px 110px;
    align-items: center;
}
@media (min-width: 800px){
#photoGalleryContainer{
    margin: 20px 80px 110px;
}
}
#photoGalleryContainer img{
    margin-bottom: 20px;
    max-width: 80vw
}
@media (min-width: 800px){
#photoGalleryContainer img{
    max-width: none;
    max-height: calc(100vh - 250px);
    min-height: calc(100vh - 250px);
}
}
.photoGalleryImageWrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#photoGalleryContainer p{
    text-align: center;
    font-family: "RiposteLight";
    font-size: 14px;
    line-height: calc(18px * 1);
}
@media (min-width: 800px){
#photoGalleryContainer p{
    font-size: 14px;
    line-height: 18px;
}
}

#photoGalleryBack, #artDBBack{
    margin: 20px;
    font-family: "RiposteLight";
    font-size: 14px;
    display: flex;
    flex-direction: row;
}
#photoGalleryBack > a.mobile{
}
#photoGalleryBack > a:first-child:not(.mobile){
    display:none
}
@media (min-width: 800px){
#photoGalleryBack, #artDBBack{
    margin: 20px 80px;
    font-size: 14px;
}
#photoGalleryBack > a:first-child:not(.mobile){
    display: block;
}
#photoGalleryBack > a.mobile{
    display: none;
}
}

#dbGalleryContainer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 30px 80px 50px;
    /*border-bottom: 1px solid black;*/
    align-items: center;
}
#dbGalleryContainer img{
    max-height: calc(100vh - 250px);
}
#dbGalleryContainer iframe{
    height: calc(100vh - 250px);
    width: 99vw;
}
#dbGalleryContainer p{
    text-align: center;
    font-family: "RiposteLight";
    font-size: calc(20px * 0.7);
}
@media (min-width: 800px){
#dbGalleryContainer p{
    font-size: 20px;
}
}
#dbGalleryInfo{
    padding: 20px 0px 50px;
}
@media (min-width: 800px){
#dbGalleryInfo{
    padding: 20px 80px 50px;
}
}

#infoBlock{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
#infoBlock .leftElement{
    border-bottom: 1px solid black;
    width: 35%;
    padding: 15px;
    font-size: calc(27px * 0.7);
    line-height: calc(33px * 0.7);
    box-sizing: border-box;
    font-family: "RiposteLight";
}
@media (min-width: 800px){
#infoBlock .leftElement{
    font-size: 27px;
    line-height: 33px;
    width: 30%;
}
}
#infoBlock .rightElement{
    border-bottom: 1px solid black;
    width: 65%;
    padding: 15px;
    font-family: "RiposteLight";
    font-size: calc(18.5px * 0.7);
    line-height: calc(30px * 0.7);
    box-sizing: border-box;
}
@media (min-width: 800px){
#infoBlock .rightElement{
    font-size: 18.5px;
    line-height: 30px;
}
}
#infoBlock .last{
    border-bottom: none;
}

#dbGalleryRelated{
    background-color: #E4E0CF;
    padding: 25px 20px 100px;
}
@media (min-width: 800px){
#dbGalleryRelated{
    padding: 50px 80px 100px;
}
}
#dbGalleryRelated p{
    font-family: "RiposteLight";
    font-size: calc(20px * 0.7);
    padding-bottom: 25px;
}
@media (min-width: 800px){
#dbGalleryRelated p{
    font-size: 20px;
    padding: 0 15px;
}
}

#teachingImage{
    width: calc(100% - 0px);
    display: none;
}
#teachingImage.mobile{
    display: block;
}
@media (min-width: 800px){
#teachingImage{
    width: 100%;
    margin-left: 0;
    display: block;
}
#teachingImage.mobile{
    display: none;
}
}
#teachingTextImage{
    max-width: 100%;
    margin-top: 3rem;
}
#teachingImageCaption, .biographyImageCaption{
    margin: 1em 20px;
    font-family: "RiposteLight";
    font-size: 14px;
    line-height: calc(18px * 1);
}
@media (min-width: 800px){
#teachingImageCaption, .biographyImageCaption{
    font-size: 14px;
    line-height: 18px;
    margin: 1em 75px;
}
}
#teachingTextImageCaption, .biographyTextImageCaption{
    margin: 1em 0 3rem !important;
    font-family: "RiposteLight";
    font-size: calc(14px * 1);
    line-height: calc(18px * 1);
}
@media (min-width: 800px){
#teachingTextImageCaption, .biographyTextImageCaption{
    font-size: 14px;
    line-height: 18px;
}
}

.biographyTextImage{
    width: 100%;
}
.biographyLeft .biographyTextImage{
    margin-top: 3rem;
}
.biographyRight .biographyTextImage{
    margin-top: 3rem;
}
.biographyRight .biographyTextImageCaption{
}
@media (min-width: 800px){
.biographyRight .biographyTextImage{
    margin-top: 109px;
}
.biographyRight .biographyTextImageCaption{
    margin-bottom: 160px !important;
}
}
.biographyLeft .biographyTextImageCaption{
    margin: 2em 0;
}
.imageWife{
    margin-top: 2em !important;
}
.imageChildren{
    margin-top: 4em !important;
}
.biographyImage{
    width: calc(100% - 0px);
    margin-top: 3rem;
    display: none
}
.biographyImage.mobile{
    display: block;
}
.biographyImage.text{
    display: block;
}
@media (min-width: 800px){
.biographyImage{
    width: 100%;
    display: block;
    margin-left: 0;
}
.biographyImage.mobile{
    display: none;
}
}
.biographyImage.top{
    margin-top: 0;
}
.half{
    margin: 0 auto;
    width: 100%;
}
.half .biographyTextImageCaption{
    margin-left: 10px !important;
}
@media (min-width: 800px){
.half{
    margin: 0 auto;
    width: 50%;
}
.half .biographyTextImageCaption{
    margin-left: 0;
}
}

#teachingTwoThirds, .biographyTwoThirds{
    margin: 1em 10px;
    font-family: "RiposteLight";
    font-size: calc(34px * 0.7);
    line-height: calc(50px * 0.7);
}
@media (min-width: 800px){
#teachingTwoThirds, .biographyTwoThirds{
    font-size: 34px;
    line-height: 50px;
    margin: 1em 75px;
    width: 66%;
}
}
#teachingTextContainer, .biographyTextContainer{
    padding: 0em 20px;
    margin: 1em 0;
    font-family: "RiposteLight";
    font-size: calc(18.5px * 0.7);
    line-height: calc(30px * 0.7);
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    justify-content: space-between;
    margin-bottom: 50px;
}
@media (min-width: 800px){
#teachingTextContainer, .biographyTextContainer{
    font-size: 18.5px;
    line-height: 30px;
    flex-direction: row;
    padding: 0em 75px;
}
}
#photogramTextContainer{
    padding: 1em 0px;
    font-family: "RiposteLight";
    font-size: calc(18.5px * 0.7);
    line-height: calc(30px * 0.7);
    width: 100%;
    margin: 0 ;
    text-align: center;

}
@media (min-width: 800px){
#photogramTextContainer{
    padding: 1em 75px;
    font-size: 18.5px;
    line-height: 30px;
}
}
.biographyTextContainer{
    margin-bottom: 0;
}

#teachingLeft, #teachingRight, #articleRight, .biographyLeft, .biographyRight{
    /*flex-basis: 45%;*/
    flex-basis: calc(100% - 40px)
}
@media (min-width: 800px){
#teachingLeft, #teachingRight, #articleRight, .biographyLeft, .biographyRight{
    flex-basis: calc(50% - 40px)
}
}
#teachingLeft p{
    margin: 2em 0;
}
.biographyLeft p{

}
#teachingRight, .biographyRight{
}
#teachingRight{
    text-align: center;
}
@media (min-width: 800px){
#teachingRight, .biographyRight{
    text-align: center;
}
}

.teachingEmph, .biographyEmph{
    font-family: "RiposteLight";
    font-size: calc(40px * 0.7);
    line-height: calc(54px * 0.7);
    color: #ff2700;
    text-align: left;
    hanging-punctuation: first;
    margin: 20px 0;

}
.center.biographyEmph{
    margin: 20px 20px;
}
.teachingEmph.desktop, .biographyEmph.desktop{
    display: none;
}
.teachingEmph.mobile{
}
@media (min-width: 800px){
.teachingEmph, .biographyEmph{
    font-size: 40px;
    line-height: 54px;
}
.teachingEmph.desktop, .biographyEmph.desktop{
    display: block;
}
.teachingEmph.mobile, .biographyEmph.mobile{
    display: none;
}
}
.teachingEmph{
    text-align: center;
}
@media (min-width: 800px){
.biographyEmph{
    margin: 160px 0;
}
.center.biographyEmph{
    width: 50%;
    margin: 40px auto;
}
}

.teaching-line{
    height: 70px;
    width: 1px;
    background-color: black;
    margin: 10px auto;
}

.tempImgSpace{
    position: relative;
}
.tempImgSpace img{
    position: absolute;
    bottom: 1em;
}
#contactContainer{
    margin-bottom: 40px;
}

.contactBlock, .imprintBlock{
    display: flex;
    flex-direction: column;
    margin-top: 25px;
}
.contactBlock:first-child{
    border-top: none;
}
@media (min-width: 800px){
.contactBlock, .imprintBlock{
    flex-direction: row;
    border-top: 1px solid black;
    margin-top: 0;
}
}
.contactBlock .left{
    padding: 20px 25px;
    font-size: calc(27px * 0.7);
    line-height: 33px;
    line-height: calc(33px * 0.7);
    width: 100%;
    box-sizing: border-box;
    font-family: 'RiposteLight';
    border-bottom: 1px solid black;
}
.imprintBlock .left{
    padding: 40px 0 0px 25px;
    font-size: calc(27px * 0.7);
    line-height: 33px;
    line-height: calc(33px * 0.7);
    box-sizing: border-box;
    font-family: 'RiposteLight';
    width: 100%;

}
.contactBlock .right{
    flex-basis: 85%;
    padding: 20px 25px;
    font-family: 'RiposteThin';
    font-size: calc(21px * 0.7);
    line-height: 28px;
    line-height: calc(28px * 0.7);
}
.imprintBlock .right{
    flex-basis: 85%;
    padding: 40px 25px 40px 25px;
    font-family: 'RiposteLight';
    font-size: calc(21px * 0.7);
    line-height: 28px;
    line-height: calc(28px * 0.7);

}
@media (min-width: 800px){
.contactBlock .left{
    padding: 20px 75px;
    font-size: 27px;
    line-height: 33px;
    width: 280px;
    border-bottom: none;
}
.imprintBlock .left{
    padding: 40px 0 40px 75px;
    font-size: 27px;
    line-height: 33px;
    width: 500px;
    border-bottom: none;
}
.contactBlock .right{
    padding: 20px 75px;
    font-size: 21px;
    line-height: 28px;
}
.imprintBlock .right{
    padding: 40px 75px 40px 75px;
    font-size: 21px;
    line-height: 28px;
}
}
.contactBlock .right.split, .imprintBlock .right .split{
    display: flex;
    flex-direction: column;
}
.contactBlock .right.split div{
    flex-basis: 100%;
}
.contactBlock .right.split div:first-child{
    margin-bottom: 20px;
}
.imprintBlock .right .split div{
    flex-basis: 100%;
}
@media (min-width: 800px){
.contactBlock .right.split, .imprintBlock .right .split{
    flex-direction: row;
}
.contactBlock .right.split div{
    flex-basis: 40%;
}
.contactBlock .right.split div:first-child{
    margin-bottom: 0px;
}
.imprintBlock .right .split div{
    flex-basis: 50%;
}
}
@media (min-width: 1200px){
.contactBlock .right.split div{
    flex-basis: 30%;
}
}
.contactBlock .title, .imprintBlock .title{
    font-family: 'RiposteRegular';

}
.contactBlock a:hover, .imprintBlock a:hover{
    color: red;

}

.articleIntro{
    margin: 1.5em 10px 3em;
    font-family: "RiposteLight";
    font-size: calc(34px * 0.7);
    line-height: calc(50px * 0.7);
}
@media (min-width: 800px){
.articleIntro{
    font-size: 34px;
    line-height: 50px;
    margin: 1.5em auto 3em;
    width: 66%;
}
}
#foundationImages{
    display: flex;
    flex-direction: column;
    margin: 0 10px 0px;
    justify-content: space-between;
}
#foundationImages .imageBlock{
    margin-bottom: 40px;
}
@media (min-width: 800px){
#foundationImages{
    flex-direction: row;
    margin: 0 75px 40px;
}
#foundationImages .imageBlock{
    width: calc(50% - 40px);
    margin-bottom: 0;
}
}
#foundationImages .imageBlock img{
    max-width: 100%
}
#foundationImages .caption{
    margin: 1em 0;
    font-family: "RiposteLight";
    font-size: calc(14px * 1);
    line-height: calc(18px * 1);
}
@media (min-width: 800px){
#foundationImages .caption{
    font-size: 14px;
    line-height: 18px;
}
}
.filmographyYear{
    font-family: "RiposteLight";
}

.teaching-head-year{
    margin-bottom: .5em;
}

.photogramSlider {
    height: 300px;
    margin-bottom: 40px;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;  

}
@media (min-width: 800px){
.photogramSlider {
    height: 550px;
}
}
.slide {
    flex-shrink: 0;
    height: 100%;
    padding: 0 20px;
    scroll-snap-align: center;

}

#dbListNo{
    margin: 40px 10px;
}

.desktopBR{
    display: none;
}
.mobileBR{
}
@media (min-width: 800px){
.desktopBR{
    display: block;
}
.mobileBR{
    display: none;
}
}
.ulList{
    padding-left: 12px;
}
@media (min-width: 800px){
.ulList{
    padding-left: 20px;
}
}