/*====================================*/
/*========= Viewer Interface =========*/
/*====================================*/


/*==========================*/
/*==== General Settings ====*/
/*==========================*/

.viewer {
    position: relative;
}


/*=============================*/
/*==== Thumbnails Settings ====*/
/*=============================*/

.viewer--article-thmbs .viewer__interface,
.viewer--artwork-thmbs .viewer__interface {
    max-width: 720px;
    margin: auto;
}


/*===========================================*/
/*==== Articles/Artworks/Series Settings ====*/
/*===========================================*/

.viewer--articles .viewer__col__ajax {
    -ms-flex-preferred-size: 560px;
    flex-basis: 560px;
}

.viewer--artwork .viewer__col__ajax {
    -ms-flex-preferred-size: 460px;
    flex-basis: 460px;
}

.viewer--series .viewer__col__ajax {
    -ms-flex-preferred-size: 500px;
    flex-basis: 500px;
}

.viewer__col__nav {
    position: relative;
    min-width: 5rem;
}


/*======================*/
/*=== Tablet (980px) ===*/
/*======================*/

/*@media all and (max-width: 61.25em) {}*/


/*==========================*/
/*=== Smartphone (768px) ===*/
/*==========================*/

/*@media all and (max-width: 48em) {}*/


/*===================================*/
/*=== Smartphone Portrait (480px) ===*/
/*===================================*/

@media all and (max-width: 30em) {

    .viewer--articles .viewer__interface,
    .viewer--artwork .viewer__interface,
    .viewer--series .viewer__interface {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .viewer__col__nav {
        min-width: 0;
        height: 3em;
        margin-top: 1.5rem;
    }

    .viewer__col__prev {
        text-align: right;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }

    .viewer__col__next {
        text-align: left;
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
    }
}


/*===============================*/
/*=== Smartphone (6s) (376px) ===*/
/*===============================*/

/*@media all and (max-width: 23.5em) {}*/


/*======================================*/
/*=== Smartphone (5s and 4s) (320px) ===*/
/*======================================*/

/*@media all and (max-width: 20em) {}*/