/*======================================*/
/*========= Button - Prev/Next =========*/
/*======================================*/

.viewer__nav {
    line-height: 0;
}

.viewer__nav__icon {
    display: inline-block;
}

.viewer__nav svg {
    width: 3rem;
    height: 3rem;
}

.viewer__nav:hover svg.v1 path {
    opacity: 0;
}

.viewer__nav svg.v2 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.viewer__nav svg.v2 path {
    opacity: 0;
}

.viewer__nav:hover svg.v2 path {
    opacity: 1;
}

.viewer__prev.off:hover svg.v2 path,
.viewer__next.off:hover svg.v2 path {
    opacity: 0;
}

.viewer__prev.off svg.v1 path,
.viewer__next.off svg.v1 path,
.viewer__prev.off:hover svg.v1 path,
.viewer__next.off:hover svg.v1 path {
    opacity: .3;
}


/*=====================*/
/*=== Touch Devices ===*/
/*=====================*/

@media (hover:none), (hover:on-demand) {

    .viewer__nav:hover svg.v1 path {
        opacity: 1;
    }

    .viewer__nav:hover svg.v2 path {
        opacity: 0;
    }
}


/*======================*/
/*=== 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__nav {
        padding: 0 3rem;
    }
}


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

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


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

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