.section > .section-nav {
    position: absolute; 
    right: 0; 
    top: 0; 
    height: 5.2vh; 
    width: 100vh; 
    min-width: 500px; 
    overflow: hidden; 
    margin: 0;
    transform: rotate(90deg) translate(94.8vh, 5.2vh);
    transform-origin: bottom right;
}

.section > .section-nav > * {
    position: absolute;
    bottom: 1.8vh;
    font-size: 1.4vh;
    line-height: 1.6vh;
    font-family: 'FuturaPT-BookObl';
    cursor: pointer;
}

.section > .section-nav .sn-prev {
    left: 5.2vh;
}

.section > .section-nav > * .arrow {
    width: 15px;
    height: 1px;
    background-color: black;
    top: 0.8vh;
    position: relative;
    
}

.section > .section-nav > * .arrow::before, .section > .section-nav > * .arrow::after {
    content: ""; 
    position: absolute;
    width: 8px;
    height: 1px;
    background-color: black;
    display: block;
}

/* next */
.section > .section-nav .sn-next {
    right: 5.2vh;
    
}

.section > .section-nav .sn-next .arrow {
    float: right;
    margin: 0 0 0 10px;
}

.section > .section-nav .sn-next .arrow::before, .section > .section-nav .sn-next .arrow::after {
    right: 0;
    transform-origin: top right;
}
.section > .section-nav .sn-next .arrow::before {transform: rotate(-45deg);}
.section > .section-nav .sn-next .arrow::after {transform: rotate(45deg);}

/* prev */
.section > .section-nav .sn-prev .arrow {
    float: left;
    margin: 0 10px 0 0;
}
.section > .section-nav .sn-prev .arrow::before, .section > .section-nav .sn-prev .arrow::after {
    left: 0;
    transform-origin: top left;
}
.section > .section-nav .sn-prev .arrow::before {transform: rotate(-45deg);}
.section > .section-nav .sn-prev .arrow::after {transform: rotate(45deg);}

/* hover */
.section > .section-nav > *:hover {
    color: silver;
 }
 
 .section > .section-nav > *, .section > .section-nav > * .arrow, .section > .section-nav > * .arrow::after, .section > .section-nav > * .arrow::before {
     transition: all 200ms ease;
 }
 
 .section > .section-nav > *:hover .arrow, .section > .section-nav > *:hover .arrow::after, .section > .section-nav > *:hover .arrow::before {
     background-color: silver;
 }
 
 @media screen and (max-width: 980px) {
    .section-nav {display: none;}
 }