/* the base.css file is for things that are less commonly changed */
/* however, it is not unlikely you will want to change #index nav rules */

html { height: 100%; }

/* general styles - not recommended for change */
strong, b { font-weight: bold; }
em, i { font-style: italic; }
object { display: block; }
.once { clear: left; }
.clL { clear: left; }

/* this is to prevent some background colors on links in exhibits */
/* do not change these */
#img-container span.backgrounded a,
#img-container a.thickbox, 
#img-container a.thumb-img, 
#img-container #d-col1 a { background: transparent; }
#img-container .picture_holder { 
    padding-right: 16px!important; 
    padding-bottom: 16px!important;
}

/* not recommended for change */
#index {
    overflow: auto;
    top: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    height: 100%;
    z-index: 1;
    overflow-y: scroll;
    -ms-overflow-style: none;    /* IE, Edge */
    scrollbar-width: none;       /* Firefox */
}
#index::-webkit-scrollbar {  /* Chrome, Safari */
    display:none;
}
#exhibit { height: auto; top: 0; }

/* INDEX NAVIGATION/LINKS RULES */
/* the following rules for index are not required */
/* they are mostly for complex customization */

/* styles for the section titles */
#index ul.section span.section_title, 
#index ul.section span.section_title a 
{ cursor: pointer; font-weight: normal; }

.format-books #index ul.active_section a, .format-books_thumbnail #index ul.active_section a { color: #fce5e6!important; }

/* sub-section titles */
#index ul.section span.subsection_title, 
#index ul.section span.subsection_title a 
{ cursor: pointer; }

/* exhibit titles */
#index ul.section li.exhibit_title { margin-left: 10px; font-size: 12px; }
#index ul.section li.exhibit_title a:hover { text-decoration: none; }

/* this is how it indents - delete if you don't like */
#index ul.section li.exhibit_title:hover { text-indent: 2px; }

/* top/bot divs - not really used but do exist */
#index .top { margin-bottom: 70px; }
#exhibit .top { display: none; }

/* generic #img-container - but remember that exhibit formats can override these */
#img-container { margin-bottom: 20px; max-width: 900px; }
#img-container .captioning .caption { text-align: left; }
.over { margin-bottom: 40px; }

#text-container { width: 90%; max-width: 750px; }

.imgb p { margin: 0!important; }
.imgb { margin-bottom: 40px; }

/* news */
#news { overflow-x: hidden; }
.newsWrap { 
    margin-bottom: 80px; 
    padding-bottom: 80px;
    background-image: linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 4px);
    background-size: 5px 1px;
    background-position: bottom;
    background-repeat: repeat-x;
}
.date { font-size: 12px; color: #898989; }
.newsWrap img { max-width: 100%; }
.newsWrap:last-child { 
    padding-bottom: 0;
    background-image: none;
}

/* blog */
.blogImg { margin-bottom: 100px; }
.blogImg p { margin: 0!important; }
#blogLink { 
    position: fixed; 
    bottom: 10px; 
    right: 15px; 
    font-size: 20px;
    z-index: 1;
}
#blogLink a { color: #ccc; }
#blogLink a:hover { color: #fff2f3; }
#blogLink2 { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    padding: 8px 14px; 
    font-size: 13px;
}

a:link.aLink { text-decoration: none!important; }
a:hover.aLink { text-decoration: underline!important; }

.top_mobile { display: none; }
.scrollWrap { 
    width: 90%; 
    margin: 0 0 80px 0; 
    padding: 0; 
    float: none; 
}

.ps_slideshow { 
    width: 90%; 
    margin: 0 0 15px 0; 
    padding: 0; 
    float: none; 
    visibility: hidden; 
}
#imgWrap { 
    width: 90%; 
    overflow: hidden;
}

.pswp--zoom-allowed .pswp__img { cursor: default !important }

#copyright { position:fixed; right: 15px; bottom: 10px; color: #898989; }

@media screen and (max-width: 1023px) {
    .scrollWrap img { width: 100%; }
    .ps_slideshow img { width: 100%; }
    .imgb img { max-width: 100%; }
    #exhibit { margin: 0 0 100px 240px!important; }
    #index { width: 240px!important; }
    #index .container { padding: 85px 0 85px 50px!important; }

    .format-works img, .format-books img { height: auto; }
}
@media screen and (max-width: 767px) and (orientation:portrait){
    img { max-width: 100%; }
    h1 { margin: 1em 0!important; }
    h1 > a:link { text-decoration: none!important; }
    .top h1 { 
        display: none; 
        margin-bottom: 0!important;
    }
    .top_mobile { 
        display: table; 
        width: 100%; 
    }

    #index .container { padding: 100px 0 0 40px!important; }
    #index .top { margin: 0; }

    #exhibit { 
        margin: 0 15px!important; 
        background-color: #fff; 
    }
    #exhibit p { width: 100%!important; }
    #exhibit .container { 
        padding: 0 0 40px 0!important; 
        clear: both; 
    }
    #text-container { 
        width: 100%; 
        max-width: none; 
    }

    #img-container { max-width: 100%!important; }
    #img-container .picture_holder { 
        width: 100%; 
        padding-right: 0!important; 
        padding-bottom: 15px!important; 
        height: auto!important; 
        display: block!important;
        align-items: normal!important;
    }
    #img-container img { 
        width: 100%; 
        height: auto; 
    }
    #imgWrap { width: 100%; }

    #title_mobile { 
        display: table-cell; 
        width: auto; 
    }
    .remove.icon { 
        width: 20px; 
        height: 20px; 
        padding: 22px 22px 0 22px;
    }

    #news { 
        width: 100%; 
        max-width: none; 
    }
    .newsWrap { 
        width: 100%; 
        margin-bottom: 40px; 
        padding-bottom: 40px; 
    }

    .scrollWrap { margin: 0 15px 15px 0; }
    .ps_slideshow { margin: 0 15px 15px 0; }
    .toggle-button { 
        width: 40px; 
        height: 60px; 
        display: table-cell; 
        width: 50px;
    }

    .pswp__counter { 
        left: 5px!important; 
        top: 0!important;
    }
    .pswp__button.pswp__button--close { 
        margin-right: 5px!important; 
        margin-top: 0!important; 
    }

    .format-books_index .picture_holder { 
        width: 100%!important; 
        height: 100%!important; 
    }
    .format-books_index .picture { 
        width: auto!important; 
        height: auto!important; 
    }
    .format-books_index img { 
        width: 100%!important; 
        height: 100%!important; 
    }

    .bio_pc { display: none; }

    #copyright { right: 10px; }

    #page_top { 
        text-align: center; 
        height: 71px; 
    }
    #page_top a { 
        display: inline-block; 
        text-align: center; 
        width: 50px; 
        height: 50px;
    }

/* icon */
    .justified.icon {
        color: #565656;
        position: absolute;
        top: 19px;
        right: 0;
        margin-left: 2px;
        margin-top: 6px;
        width: 17px;
        height: 5px;
        border-top: solid 1px currentColor;
        border-bottom: solid 1px currentColor;
        z-index: 3;
    }
    .justified.icon:before {
        content: '';
        position: absolute;
        top: 2px;
        left: 0;
        width: 17px;
        height: 5px;
        border-top: solid 1px currentColor;
        border-bottom: solid 1px currentColor;
    }

    .remove.icon {
        color: #565656;
        position: absolute;
        margin-left: 3px;
        margin-top: 10px;
    }
    .remove.icon:before {
        content: '';
        position: absolute;
        width: 15px;
        height: 1px;
        background-color: currentColor;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    .remove.icon:after {
        content: '';
        position: absolute;
        width: 15px;
        height: 1px;
        background-color: currentColor;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }

    .arrow-up.icon {
        color: #565656;
        position: absolute;
        margin-left: 0;
        margin-top: 17px;
        width: 1px;
        height: 16px;
        background-color: currentColor;
    }
    .arrow-up.icon:before {
        content: '';
        position: absolute;
        left: -5px;
        top: 1px;
        width: 10px;
        height: 10px;
        border-top: solid 1px currentColor;
        border-right: solid 1px currentColor;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}