/* GLOBAL */

* {
    box-sizing: border-box;
    transition: font-size 250ms ease;
}

html,
body {
    padding: 0;
    margin: 0;
    font-feature-settings: "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: #000000;
    cursor: pointer;
}

p {
    padding: 0;
    margin: 0;
}

img {
    display: block;
}

/* LAYOUT */

.flex {
    display: flex;
    flex-wrap: wrap;
}

.column {
    flex-direction: column;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-100 {
    width: 100%;
}

/* TYPOGRAPHY */

.menu,
.event,
.work,
.gig,
.title,
.year,
.back,
.nav {
    font-family: 'Favorit Extended';
}

.body,
.caption {
    font-family: 'Favorit';
}

.name,
.work,
.gig,
.title,
.year {
    font-size: 64px;
}

.date,
.location,
.nth {
    font-size: 32px;
}

.menu,
.body,
.back,
.caption,
.nav {
    font-size: 24px;
}

.footnote,
.caption {
    font-size: 16px;
}

/* CONTENT */

.main {
    padding: 60px 30px 0;
    width: 100%;
    overflow: hidden;
    transition: font-size 250ms ease;
}

.menu {
    flex-basis: auto;
    margin-left: 30px;
    line-height: 1;
}

.menu:last-child {
    margin-bottom: 60px;
}

.outer {
    cursor: pointer;
}

.inner {
    display: none;
    padding: 60px 30px;
    line-height: 1;
}

.menu,
.inner {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 2;
}

.event {
    padding-bottom: 60px;
}

.event:last-child {
    padding-bottom: 0;
}

.date,
.location {
    display: inline-block;
    margin-right: 60px;
    color: #7F7F7F;
}

.name {
    display: block;
}

.work,
.gig {
    display: flex;
    align-items: baseline;
    padding-right: 15px;
    float: left;
}

.nth {
    margin-right: 15px;
    color: #7F7F7F;
}

.text {
    position: relative;
    padding: 0 30px 60px;
}

.title {
    padding-top: 60px;
}

.year {
    padding: 0;
}

.body {
    padding-top: 60px;
    float: left;
}

.image {
    position: relative;
    padding: 0 30px 60px;
    transition: width 250ms ease;
}

.image img {
    padding: 0;
    width: 100%;
    cursor: zoom-in;
}

.caption {
    padding-top: 15px;
}

.body p,
.caption p {
    margin-top: 15px;
}

.body p:first-child,
.caption p:first-child {
    margin-top: 0;
}

.body p a,
.caption p a {
    text-decoration: underline !important;
}

.logo {
    position: absolute;
    width: 25%;
    z-index: 2;
}

/* INDEX */

.index-img {
    display: none;
    position: absolute;
    width: 25%;
    height: auto;
    z-index: 3;
}

/* NAV */

.nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 30px 60px;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nav-back {
    display: inline-block;
    width: 20%;
    float: left;
}

.nav-title {
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.top {
    display: inline-block;
    float: right;
}

/* EFFECTS */

::selection {
    color: #000000;
    background: #7F7F7F;
}

.fx-1 {
    animation: FX01 5s linear infinite;
    transform-origin: center center;
}

.fx-2 {
    animation: FX02 5s infinite;
}

.fx-3 {
    animation: FX03 5s linear infinite;
}

.skew-1 {
    transform: skewX(30deg);
    transform-origin: left;
}

.skew-2 {
    transform: skewX(-30deg);
    transform-origin: left;
}

.skew-3 {
    transform: skewX(45deg);
    transform-origin: left;
}

.skew-4 {
    transform: skewX(-45deg);
    transform-origin: left;
}

/* MOBILE */

@media only screen and (max-width: 960px) {

    .w-40,
    .w-50,
    .w-60,
    .w-70 {
        width: 100%;
    }

    .logo {
        width: 50%;
    }

    .date,
    .location {
        display: block;
    }

    .body {
        width: 100%;
    }

    .nav-back {
        margin-right: 30px;
    }

    /* TYPOGRAPHY < 960 */
    .menu,
    .body,
    .back,
    .caption,
    .nav {
        font-size: 24px;
    }

    .event,
    .work,
    .title,
    .year {
        font-size: 56px;
    }
}

@media only screen and (max-width: 640px) {
    .logo {
        width: 60%;
    }

    .main {
        padding: 30px 15px 0;
    }

    .menu {
        margin-left: 15px;
    }

    .menu:last-child {
        margin-bottom: 30px;
    }

    .event {
        padding-bottom: 30px;
    }

    .date,
    .location {
        margin-right: 0;
    }

    .inner {
        padding: 30px 15px;
    }

    .text {
        padding: 0 15px 30px;
    }

    .title {
        padding-top: 30px;
    }

    .body {
        padding-top: 30px;
    }

    .image {
        padding: 0 15px 30px;
    }

    .caption {
        padding-top: 30px;
    }

    .nav {
        padding: 30px;
    }

    .top {
        float: right;
    }

    .nav-title {
        display: none;
        position: relative;
        padding-top: 15px;
        width: 100%;
    }

    .index-img {
        visibility: hidden;
    }

    /* TYPOGRAPHY < 640 */
    .menu,
    .date,
    .location,
    .work>span,
    .body,
    .back,
    .caption,
    .nav {
        font-size: 16px;
    }

    .work,
    .gig,
    .name,
    .title,
    .year {
        font-size: 32px;
    }
}

/* ANIMATION */

@keyframes FX01 {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }

    50% {
        transform: perspective(1000px) rotateY(180deg);
    }

    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}

@keyframes FX02 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 100;
    }

    100% {
        opacity: 0
    }
}

@keyframes FX03 {
    0% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}