/* Menu Working with CheckBox */


/* Cambiando el estado del  CheckBox ocultamos y mostramos el 
menu, eliminando la necesidad de Javascript */


/*Buttons of navigation*/

:root {
    --size-menu : 40px;
    --margin-menu : 30px;
}


.navigation {
    z-index: 1000;
    padding: 0;
    position: fixed;
    margin: var(--margin-menu);
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    outline: 0;
}

.sticky {
    width: var(--size-menu);
    top: 0;
    right: 0px;
}



/*button next */

.arrow {
    bottom: 5vh;
    margin: 10px;
    width: 35px;
    height: 35px;
}

.prev {
    transform: rotate(180deg);
    right: 55px;
}

.next {
    right: 0px;
}

.prev:hover polyline,
.prev:focus polyline {
    stroke-width: 3;
}

.prev:active polyline {
    stroke-width: 6;
    transition: all 100ms ease-in-out;
}

.next:hover polyline,
.next:focus polyline {
    stroke-width: 3;
}

.next:active polyline {
    stroke-width: 6;
    transition: all 100ms ease-in-out;
}

polyline {
    transition: all 250ms ease-in-out;
}