/*===============================*/
/*========= Page - Menu =========*/
/*===============================*/

.menu {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.menu a {
    font-family: 'Lora', serif;
    font-style: italic;
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 2.5;
}

.menu a:hover {
    opacity: .5;
}

.menu__desktop__items,
.menu__mobile__items,
.menu__hamburger-wrap {
    line-height: 0;
    overflow: hidden;
}

.menu__desktop__item,
.menu__hamburger {
    position: relative;
    display: inline-block;
    padding: 0;
    width: 7rem;
    height: 3.5rem;
    border-radius: 3.5rem 3.5rem 0 0;
    text-shadow: 0 0 .5em rgba(0, 0, 0, .25);
    color: #fff;
}

.menu__desktop__item.current,
.menu__hamburger {
    text-shadow: none;
    box-shadow: 0 .6em .6em rgba(0, 0, 0, .5);
}

.menu__mobile__item.current {
    box-shadow: none;
}

.menu__mobile {
    display: none;
}


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

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


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

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

    .menu__desktop__item,
    .menu__hamburger {
        width: 6rem;
        height: 3rem;
    }

    .menu__desktop__item a,
    .menu__hamburger a {
        font-size: 1.25rem;
    }
}


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

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

    .menu__desktop {
        display: none;
    }

    .menu__mobile {
        display: inherit;
    }

    .menu__mobile__items {
        box-shadow: inset 0 -.5em .4em -.5em rgba(0, 0, 0, .2);
        max-height: 0;
        -webkit-transition: max-height 1s;
        transition: max-height 1s;
    }

    .menu.toggled .menu__mobile__items {
        max-height: 15em;
    }

    .menu__mobile__item {
        display: inline-block;
        padding: 0;
    }

    .menu__mobile__item a {
        position: relative;
        line-height: 3;
        padding: 0 .4em;
    }
}


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

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


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

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