/*curry mustard: 227, 151, 37*/

* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'SuisseIntl';
    src: url('fonts/SuisseIntl-Regular-WebS.woff2') format('woff2'),
        url('fonts/SuisseIntl-Regular-WebS.woff') format('woff'),
        url('fonts/SuisseIntl-Regular-WebS.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: 'SuisseIntl';
    src: url('fonts/SuisseIntl-RegularItalic-WebS.woff2') format('woff2'),
        url('fonts/SuisseIntl-RegularItalic-WebS.woff') format('woff'),
        url('fonts/SuisseIntl-RegularItalic-WebS.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
}

.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

::selection {
    color: black; 
    background: white;
}

a {
    text-decoration: none;
    color:white;
    pointer-events: auto;
}

a:hover {
    color:rgb(227, 151, 37);
}

img {
    width:100%;
    display:block;
}

body {
    position:relative;
    margin:0;
    padding:0;
    width:100%;
    height:auto;
    background:black;
    
    font-feature-settings: "liga" 1, "kern" 1;
    -moz-font-feature-settings: "liga" 1, "kern" 1;
    -webkit-font-feature-settings: "liga" 1, "kern" 1;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
}

.eyes {
    z-index: 1;
    position:fixed;
    
    margin:10px 0 0 0;
    
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.eyes-mobile {
    z-index: 1;
    position:fixed;
    display:none;
    
    margin:10px 0 0 0;
    
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

circle {
    transition: r 600ms, cx 600ms, cy 600ms;
}

circle:hover  {
    cursor:pointer;
}

.vision {
    position:fixed;
    top:0;
    left:0;
    z-index:0;
    height:100%;
    width:100%;
    opacity:0;
    transition: opacity 1000ms;
    pointer-events:none;
    overflow:hidden;
}

.vision-clicker{
    position:absolute;
    z-index: 100;
    cursor:pointer;
    display:none;
}

.vision-image {
    position: absolute;
    top:0;
    left:0;
    width:0;
    height:auto;
}

.vision-top {
    position:absolute;
    top:0;
    left:0;
    height:0;
    background:black;
    width:100%;
}

.vision-left {
    position:absolute;
    background:black;
    top:0;
    left:0;
    height:100%;
}

.vision-right {
    position:absolute;
    background:black;
    top:0;
    right:0;
    height:100%;
}

.vision-bottom {
    position:absolute;
    background:black;
    height:100%;
    width:100%;
    top:0;
    left:0;
}

.large-image-container {
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:4;
    background:rgba(0,0,0,0.9);
    opacity:0;
    cursor:pointer;
    pointer-events: none;
    
    transition: opacity 300ms;
}

.large-image {
    position:relative;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:80%;
}

.mountains {
    position:absolute;
    left:0;
    top:0;
    z-index: 2;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow: hidden;
}

.character {
    position:absolute;
    z-index:10;
    display:none;
    transition: width 500ms;
}

.character-one {
    width:60px;
}

.character-one.hover {
    width:90px;
}

.character-two {
    width:80px;
}

.character-two.hover {
    width:110px;
}

.character-three {
    width:80px;
}

.character-three.hover {
    width:110px;
}

.character-four {
    width:80px;
}

.character-four.hover {
    width:110px;
}

.mountain-one {
    z-index: 1;
    position:absolute;
    top:100px;
    left:0;
    width:100%;
}

.mountain-two {
    z-index: 2;
    
    top:35vh;
    left:0;
    position:absolute;
    
    width:100%;
}

.mountain-three {
    z-index: 3;
    top:60vh;
    left:0;
    position:absolute;
    
    width:100%;
}

.mountain-dark {
    z-index: 4;
    top:100vh;
    left:0;
    position:absolute;
    
    width:100%;
}

.mountain-four {
    z-index: 5;
    bottom:-550px;
    left:0;
    position:absolute;
    width:100%;
}

header {
    z-index: 3;
    position:relative;
    width:100vw;
    height:100vh;
    pointer-events: none;
}

.head {
    pointer-events: none;
    
    position:absolute;
    margin:0 0 2px 0;
    padding:0;
    bottom:0;
    left:0;
    width:100%;
    text-align:center;
    
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:white;
    font-size: 60px;
    line-height:60px;
}

.sub-header {
    z-index: 1;
    
    margin:2px auto 0 auto;
    padding:0;
    bottom:0;
    width:1100px;
    text-align:center;
    
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:black;
    font-size: 60px;
    line-height:64px;
    
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

.date {
    z-index: 1;
    display:flex;
    position:relative;
    
    margin:9px auto 120px auto;
    padding:0;
    width:900px;
    
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:white;
    font-size: 19px;
    line-height:19px;
    
    font-variant-numeric: oldstyle-nums;
}

.date div {
    width:50%;
    text-align: center;
}

main {
    z-index:3;
    position:relative;
    width:100%;
    height:auto;
}

.main-divide {
    width:1100px;
    margin:120px auto 0 auto;
    display:flex;
    flex-wrap: wrap; 
}

.events-credits {
    order:2;
    position:relative;
    width:50%;
    padding:0 0 0 70px;
}

.location {
    margin:22px 0 0 0;
    width:100%;
}

.tsv-min {
    width:56px;
    margin:0 16px 0 0;
    display:inline-block;
}

.location-text{
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    font-size: 18px;
    line-height:22px;
    color:white;
    padding:0;
    margin:0;
    display:inline-block;
}

.intro {
    order:1;
    position:relative;
    width:50%;
    padding:0 0 0 0;
}

.credits-mobile {
    position:relative;
    display:none;
}

table {
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    width:100%;
    font-size: 18px;
    line-height:22px;
    color:white;
    padding:0;
    margin:0;
    border-collapse: collapse;
}

tr {
    border-bottom:1px solid white;
}

td {
    vertical-align:top;
}

.table-header {
    border-bottom:2px solid white;
}

.event-year {
    text-align:right;
    padding:0 0 11px 0;
}

.event-date {
    padding:5px 0 11px 0;
    width:130px;
}

.event-time {
    padding:5px 0 11px 0;
    width:110px;
}

.event-title {
    padding:5px 0 11px 0;
}

.credits {
    margin:22px 0 0 0;
}

.about {
    margin:0 0 11px 0;
}

.about-title {
    margin:0;
    padding:0;
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    font-size: 14px;
    line-height:18px;
    text-transform: uppercase;
    text-indent: 20px;
    color:white;
}

.about-text {
    margin:0;
    padding:0;
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:white;
    font-size:14px;
    line-height:18px;
    width:100%;
    
    font-variant-numeric: oldstyle-nums;
}

.about-text + .about-text{
    margin:11px 0 0 0;
}

.intro-para {
    margin:0;
    padding:0;
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:white;
    font-size: 18px;
    line-height:22px;
}

.intro-para + .intro-para {
    text-indent: 28px;
}

.intro-credits {
    margin:0;
    padding:0;
    width:100%;
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:white;
    font-size:14px;
    line-height:18px;
    font-variant-numeric: oldstyle-nums;
}

.artists {
    width:1100px;
    height:auto;
    margin:0 auto 0 auto;
}

section {
    position:relative;
    width:530px;
    left:45px;
    margin:0 auto 39px auto;
    z-index:1;
}

.section-one, .section-three {
    padding: 0 0 0 100px;
}

.section-two, .section-four {
    padding: 0 100px 0 0;
}

.artist {
    position:relative;
    margin:0;
    padding:0;
    width:100%;
    
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:white;
    font-size: 35px;
    line-height:39px;
}

.stroke-dash {
    color:black;
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

.title {
    position:relative;
    margin:0;
    padding:0 0 0 39px;
    width:100%;
    
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:black;
    font-size: 35px;
    line-height:39px;
    
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

.developer {
    position:relative;
    margin:0 0 0 0;
    padding:0;
    width:100%;
    
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:white;
    font-size: 35px;
    line-height:39px;
}

.with {
    position:relative;
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:white;
    top:-4px;
    vertical-align: super;
    font-size: 14px;
    line-height:14px;
    text-shadow: none;
}

.info {
    position:relative;
    cursor:pointer;
    z-index:0;
}

.info:hover .artist, .info:hover .developer {
    color:black;
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

.info:hover .title {
    color:white;
    text-shadow: none;
}

.more-info {
    z-index: -1;
    margin:22px 0 33px 0;
    position:relative;
    z-index:0;
    height:0;
    opacity:0;
    pointer-events: none;
    transition: opacity 500ms, height 500ms;
    
    text-shadow:
    -0.6px -0.6px 0 #000,
    0.6px -0.6px 0 #000,
    -0.6px 0.6px 0 #000,
    0.6px 0.6px 0 #000; 
}

.images {
    position:absolute;
    left:-330px;
    top:140px;
    width:1100px;
    height:calc(100% - 140px);
    z-index:-1;
}

.image {
    position:absolute;
    top:0;
    left:45%;
    opacity:0;
    width:200px;
    z-index:0;
    transition: left 500ms, top 500ms, opacity 200ms, width 500ms, transform 300ms;
}

.image:hover {
    cursor:pointer;
    z-index:1;
    transform: scale(1.1);
}

.image-preview {
    width:100%;
    height:auto;
    position:fixed;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:-1;
    display:none;
}

.description {
    position:relative;
    margin:0;
    padding:0;
    width:425px;
    
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:white;
    font-size: 18px;
    line-height:22px;
}

.artist-bio {
    margin:14px 0 0 0;
    padding:0;
    width:100%;
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:white;
    font-size:14px;
    line-height:18px;
    
    font-variant-numeric: oldstyle-nums;
}

.artist-bio + .artist-bio {
    margin:11px 0 0 0;
}

.artwork-credits {
    margin:18px 0 0 0;
    padding:0 0 0 39px;
    width:390px;
    font-family: 'SuisseIntl', 'Helvetica', sans-serif;
    color:white;
    font-size:14px;
    line-height:18px;
    font-variant-numeric: oldstyle-nums;
}

.credit {
    margin:0;
    padding:0;
    text-indent:-18px;
    padding-left:18px;
}

footer {
    order:3;
    position:relative;
    height:52px;
    width:100%;
    margin:160px 0 50px 0;
    display:flex;
    flex-direction:row;
    justify-content: space-around;
    align-items: center;
}

.ccfa {
    width:280px;
}

.amd {
    width:140px;
}

.oac {
    width:190px;
}

.tac {
    width:110px;
}

@media only screen and (max-width: 1200px) {
    .sub-header {
        width:560px;
    }
    
    .date {
        width:100%;
        display:block;
    }
    
    .date div {
        width:100%;
    }
    
    .place {
        margin:6px 0 0 0;
        width:100%;
    }
    
    .artists {
        width:560px;
    }
    
    .images {
        left:-20px;
        width:560px;
    }
    
    .mountain-four {
        bottom:-400px;
    }
    
    .main-divide {
        width:550px;
    }
    
    .events-credits {
        order:0;
        width:100%;
        padding:0;
    }
    
    table {
        width:525px;
    }
    
    .about-text {
        width:470px;
    }

    .intro {
        order:1;
        width:100%;
        margin:22px 0 0 0;
    }
    
    .tsv-min {
        margin:0 13px 0 0;
        width:46px;
    }
    
    .location-text {
        font-size:14px;
        line-height:18px;
    }
    
    .credits {
        display:none;
    }
    
    .credits-mobile {
        margin:22px 0 0 0;
        display:block;
        width:100%;
        order:3;
    }
    
    footer {
        order:4;
        height:104px;
        flex-flow:wrap;
        margin:100px 0 50px 0;
        align-content: space-between;
        justify-content: flex-start;
    }
    
    .sponsor {
        margin:0 40px 0 0;
    }

    .ccfa {
        width:260px;
    }

    .amd {
        width:120px;
    }

    .oac {
        width:170px;
    }

    .tac {
        width:100px;
    }
}

@media only screen and (max-width: 900px) {
    .mountain-four {
        bottom:-200px;
    }
}

@media only screen and (max-width: 700px) {
    .vision {
        display:none;
    }
    
    .eyes {
        display:none;
    }
    
    .eyes-mobile {
        display:block;
    }
    
    .head {
        font-size: 39px;
        line-height:44px;
    }
    
    .sub-header {
        width:100%;
        padding:0 5px 0 5px;
        font-size: 39px;
        line-height:44px;
    }
    
    .date {
        margin:24px auto 90px auto;
        font-size: 18px;
        line-height:18px;
    }
    
    .mountain-dark {
        margin:-50px 0 0 0;
    }
    
    .mountain-four {
        bottom:-100px;
    }
    
    .artists {
        width:100%;
    }
    
    section {
        left:0;
        width:100%;
    }
    
    .section-one, .section-three {
        padding: 0 0 0 0;
    }

    .section-two, .section-four {
        padding: 0 0 0 0;
    }
    
    .info {
        width:290px;
        left:10px;
        margin:0 auto 0 auto;
    }
    
    .more-info {
        width:100%;
        height:auto;
        opacity:1;
        display:none;
    }
    
    .description {
        width:100%;
        max-width:445px;
        padding:0 20px 0 20px;
        margin:0 auto 0 auto;
        font-size:16px;
        line-height:20px;
        pointer-events: auto;
    }
    
    .artist-bio {
        width:100%;
        max-width:445px;
        padding:0 20px 0 20px;
        margin:14px auto 0 auto;
        font-size:13px;
        line-height:17px;
        pointer-events: auto;
    }
    
    .artwork-credits {
        width:100%;
        max-width:445px;
        margin:18px auto 0 auto;
        padding:0 20px 0 20px;
        font-size:13px;
        line-height:17px;
        pointer-events: auto;
    }
    
    .artist-bio + .artist-bio {
        margin:11px auto 0 auto;
    }
    
    .artist {
        font-size:30px;
        line-height:34px;
    }
    
    .title {
        font-size:30px;
        line-height:34px;
    }
    
    .developer {
        font-size:30px;
        line-height:34px;
    }
    
    .images {
        position:relative;
        margin:18px auto 0 auto;
        padding:0 15px 0 15px;
        left:0;
        top:0;
        max-width:445px;
        width:100%;
        height:auto;
        z-index:-1;
        display:none;
        flex-flow:row;
        flex-wrap: wrap;
    }
    
    .image {
        position:relative;;
        top:0;
        left:0;
        opacity:1;
        width:50%;
        padding:5px;
        max-width:200px;
        height:auto;
        align-self: center;
    }
    
    .main-divide {
        width:100%;
        margin:90px auto 0 auto;
        padding:0 20px 0 20px;
    }
    
    table {
        font-size:16px;
        line-height:20px;
        width:100%;
    }
    
    .events-credits {
        max-width:415px;
        margin:0 auto 0 auto;
    }
    
    .event-date {
        width:110px;
    }
    
    .event-time {
        width:100px;
    }
    
    .intro-para {
        max-width:415px;
        margin:0 auto 0 auto;
        font-size:16px;
        line-height:20px;
    }
    
    .intro-para + .intro-para {
        text-indent: 20px;
    }
    
    .intro {
        margin:18px 0 0 0;
    }
    
    .location {
        margin:22px auto 0 auto;
        max-width:415px;
    }
    
    .tsv-min {
        margin:0 10px 0 0;
        width:42px;
    }
    
    .location-text {
        font-size:13px;
        line-height:17px;
    }
    
    .credits-mobile {
        margin:22px auto 0 auto;
        max-width:415px;
    }
    
    .about-title {
        font-size: 13px;
        line-height:17px;
        text-indent:17px;
    }
    
    .about-text {
        font-size: 13px;
        line-height:17px;
        width:100%;
    }
    
    footer {
        height:auto;
        width:415px;
        margin:44px auto 50px auto;
    }
    
    .sponsor {
        margin:10px 20px 0 0;
    }

    .ccfa {
        width:180px;
    }

    .amd {
        width:70px;
    }

    .oac {
        width:120px;
    }

    .tac {
        width:60px;
    }
}