$black: #252525;

$white: #fff;

$grey: #eaeaea;



$primary-color: #20b49c;

$primary-color-dark: darken( $primary-color, 10% );

$primary-color-tint-1: lighten( $primary-color, 10% );

$primary-color-tint-2: lighten( $primary-color, 20% );

$primary-color-tint-3: lighten( $primary-color, 30% );

$primary-color-tint-4: lighten( $primary-color, 40% );

$primary-color-tint-5: lighten( $primary-color, 50% );

$link-color: $primary-color;



.nav-drill {

    margin-top: 50px;

    transform: translateX(100%);

}

.nav-is-toggled .nav-drill {

    transform: translateX(0);

}

.nav-is-toggled::after {

    opacity: 1;

    visibility: visible;

}

.nav-drill {

    display: flex;

    position: fixed;

    z-index: 100;

    top: 0;

    right: 0;

    width: 250px;

    height: 100vh;

    background-color: #fff;

    overflow-y: auto;

    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;

    transition: 0.45s;

}

.nav-items {

    flex: 0 0 100%;

}

.nav-item:not(:last-child) {

    border-bottom: solid 1px #daf9f4;

}

.nav-link {

    display: block;

    padding: 0.875em 1em;

    background-color: #fff;

    color: #20b49c;

    font-size: 1rem;

    line-height: 1.5em;

    font-weight: 300;

}

.nav-expand-content {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    transform: translateX(100%);

    background-color: #daf9f4;

    transition: 0.3s;

    visibility: hidden;

}

.nav-expand-content .nav-item:not(:last-child) {

    border-bottom: solid 1px #20b49c;

}

.nav-expand-content .nav-link {

    background-color: #daf9f4;

}

.nav-expand-content .nav-back-link {

    display: flex;

    align-items: center;

    background-color: #20b49c !important;

    color: #fff;

}

.nav-expand-content .nav-back-link::before {

    content: 'chevron_left';

    margin-right: 0.5em;

    font-family: 'Material Icons';

}

.nav-expand-link {

    display: flex;

    justify-content: space-between;

}

.nav-expand-link::after {

    content: 'chevron_right';

    flex: 0 1 auto;

    font-family: 'Material Icons';

}

.nav-expand.active > .nav-expand-content {

    transform: translateX(0);

    visibility: visible;

}

.nav-expand .nav-expand-content {

    background-color: #daf9f4;

}

.nav-expand .nav-expand-content .nav-link {

    background-color: #daf9f4;

}

.nav-expand .nav-expand-content .nav-expand-content {

    background-color: #aff1e6;

}

.nav-expand .nav-expand-content .nav-expand-content .nav-link {

    background-color: #aff1e6;

}

.nav-expand .nav-expand-content .nav-expand-content .nav-expand-content {

    background-color: #84e9d9;

}

.nav-expand .nav-expand-content .nav-expand-content .nav-expand-content .nav-link {

    background-color: #84e9d9;

}

.nav-expand .nav-expand-content .nav-expand-content .nav-expand-content .nav-expand-content {

    background-color: #59e1cb;

}

.nav-expand .nav-expand-content .nav-expand-content .nav-expand-content .nav-expand-content .nav-link {

    background-color: #59e1cb;

}