@charset "utf-8";
/* CSS Document */

/* ------- webfonts ------- */

@font-face {
    font-family: 'key-matter';
    src: url('fonts/Matter-Medium.eot');
    src: url('fonts/Matter-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Matter-Medium.woff2') format('woff2'),
        url('fonts/Matter-Medium.woff') format('woff'),
        url('fonts/Matter-Medium.ttf') format('truetype'),
        url('fonts/Matter-Medium.svg#Matter-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ------- STYLES ------- */

/* ANIMATIONS */
.blink{animation:blink .5s infinite ease;-webkit-animation:blink .5s infinite ease;-moz-animation:blink .5s infinite ease;-ms-animation:blink .5s infinite ease}
@keyframes blink{0%{opacity:0}100%{opacity:1;}}
@-webkit-keyframes blink{0%{opacity:0}100%{opacity:1;}}
@-moz-keyframes blink{0%{opacity:0}100%{opacity:1;}}
@-ms-keyframes blink{0%{opacity:0}100%{opacity:1;}}

/* GENERAL */
.columns-guide{width:100%;position:fixed;height:100%;top:0;left:0;z-index:100;pointer-events:none;grid-template-rows:1fr;padding:0 24px}

*{outline:none;margin:0;padding:0;font-family:'key-matter';box-sizing:border-box;font-size:inherit;line-height:inherit;color:inherit;font-weight:500;text-transform:uppercase}

body{-webkit-font-smoothing:antialiased!important;font-smoothing:antialiased!important;overflow-x:hidden;position:relative;margin:0 auto;background-color:#000;color:#FFF}
body.scroll-disabled{overflow:hidden!important;overflow-x:hidden;-webkit-overflow-scrolling:touch}

h1,h2,h3,h4,h5{font-weight:500;font-size:inherit}
p{font-size:inherit}

a{cursor:pointer;text-decoration:none;color:inherit;font-size:inherit;display:block}
a:not(.logotype):hover{color:#777}
li{list-style:none}
img{width:100%;display:table}
video{position:absolute;left:50%;top:50%;width:100%;min-height:100%;z-index:1;object-fit:cover;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}

.fs-s{font-size:21px;line-height:30px;letter-spacing:.7px}
.fs-sm{font-size:40px;line-height:46px}
.fs-m{font-size:52px;line-height:58px}
.fs-l{font-size:9.928124215vw;line-height:8vw;padding-top:0.7vw}
.display-block{display:block}
.ta-left{text-align:left}
.ta-right{text-align:right}
.ta-center{text-align:center}
.ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}

.border-top{border-top:1px solid #FFF6}
.border-bottom{border-bottom:1px solid #FFF6}

.margin-top-24{margin-top:24px}
.margin-top-72{margin-top:72px}
.margin-top-120{margin-top:120px}
.margin-top-288{margin-top:288px}

.margin-bottom-120{margin-bottom:120px}

.position-relative{position:relative}
.position-sticky{position:sticky}

/* columns */
.grid{display:grid;grid-gap:24px;justify-content:center;width:100%;grid-template-columns:repeat(6, 1fr)}
.grid > *{grid-column-end:span 6}
.fit-content{height:fit-content}
.align-center{align-content:center;align-items:center;justify-items:center}

.grid .c-1{grid-column-end:span 1}
.grid .c-1  > *{grid-column-end:span 1}
.grid .c-2{grid-column-end:span 2}
.grid .c-2  > *{grid-column-end:span 2}
.grid .c-3{grid-column-end:span 3}
.grid .c-3  > *{grid-column-end:span 3}
.grid .c-4{grid-column-end:span 4}
.grid .c-4  > *{grid-column-end:span 4}
.grid .c-5{grid-column-end:span 5}
.grid .c-5 > *{grid-column-end:span 5}
.grid .c-6{grid-column-end:span 6}
.grid .c-6 > *{grid-column-end:span 6}

.grid .p-2{grid-column-start:2}
.grid .p-3{grid-column-start:3}
.grid .p-4{grid-column-start:4}
.grid .p-5{grid-column-start:5}

.social ul{display:flex;flex-direction:row;justify-content:space-between}
.social.mobile{display:none}

/* .typewriter */
.typewriter{position:relative}
.typewriter .text.hidden{opacity:0;visibility:hidden;position:absolute;top:0;left:0}
.typewriter span{opacity:0;visibility:hidden;color:inherit;display:inline;font-size:inherit;font-weight:inherit}
.typewriter span.visible{opacity:1;visibility:visible}

/* .lazy-img */
.thumb{background-color:transparent;position:relative}
.aspect{opacity:0;visibility:hidden}
.lazy{opacity:0;visibility:hidden;transition:opacity .6s ease, transform .6s ease;transform:translateY(40px)}
.lazy.visible{opacity:1;visibility:visible;transform:translateY(0)}
.lazy-img-wrapper{position:relative;overflow:hidden;background-color:#0e0e0e;transition:background .6s ease}
.lazy-img-wrapper .img{position:absolute;top:0;left:0;bottom:0;width:100%;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;visibility:hidden;transition:transform .6s ease;transform:scale(1.5);-webkit-transform:scale(1.5);-ms-transform:scale(1.5);-moz-mtransform:scale(1.5)}
.grid-masonry .lazy-img-wrapper .img{display:none}
.lazy-img-wrapper.loaded{background-color:transparent}
.lazy-img-wrapper.loaded .img{opacity:1;visibility:visible;transform:scale(1);-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1)}
.grid-masonry .lazy-img-wrapper.loaded .img{display:block}
a .lazy-img-wrapper .img-hover{position:absolute;z-index:1;top:50%;left:50%;display:none;color:#FFF!important;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);white-space:nowrap}
a:hover .lazy-img-wrapper .img-hover{display:block}
a:hover .lazy-img-wrapper img{opacity:.7!important}

/* .slider */
.modal .slider{position:absolute;left:24px;top:50%;height:calc(100% - 244px);width:calc(100% - 48px);transform:translateY(-50%)}
.modal .slider{padding:0}
.modal .slider .slide{position:relative;height:100%}
.modal .slider div.slide .img{width:100%;height:100%;background-position:center;background-size:contain;background-repeat:no-repeat;overflow:hidden}
.modal .slider div.slide .video-wrapper{width:80%;height:100%;display:block;margin:0 auto}

/* .masonry */
ul.grid-masonry{opacity:0;display:table;width:100%}
ul.grid-masonry.loaded{opacity:1}
ul.grid-masonry > li{float:left;position:relative;margin-bottom:24px;width:calc((100vw - 24px*7)/6*2 + 24px*1)}
ul.grid-masonry .grid-sizer{visibility:hidden;opacity:0;margin:0}

/* modal */
body[modal-opened="artist-modal"] .modal.artist-modal{top:0}
body[modal-opened="venues-modal"] .modal.venues-modal{top:0}
body[modal-opened="media-modal"] .modal.media-modal{top:0}

.modal{background-color:#000;width:100vw;height:100%;overflow:auto;position:fixed;left:0;z-index:80;top:-100%;transition:top .6s cubic-bezier(.7, 0, .3, 1)}
.modal header{background-color:#000;padding:24px 24px 0 24px;position:fixed;width:100%}
.modal footer{position:absolute;bottom:24px;left:24px;width:calc(100% - 48px)}
.modal footer nav{width:100%;display:flex;justify-content:space-between}
.modal nav.social.mobile{margin:24px}

/* swipe */
.swipe{position:fixed;top:100vh;left:0;width:100%;height:100%;padding:24px;z-index:9;transition:top .6s cubic-bezier(.7, 0, .3, 1);overflow:auto;color:#FFF;background-color:#000}
body.swipe-opened .swipe{top:0}

/* .drag-tooltip */
.drag-tooltip{position:absolute;width:calc(100% - 48px);left:24px;bottom:-72px;display:flex;justify-content:space-between}
/* scrollable */
.scrollable{position:relative}
.scrollable .viewport{position:relative;overflow:hidden;height:max-content;}
.scrollable .viewport .overview{position:relative;width:max-content;height:max-content;}
.scrollable .scroll-bar.horizontal{position:absolute;bottom:-32px;height:1px;background-color:#FFF6;width:100%!important;left:0}
.scrollable .scroll-bar.horizontal:after{content:"";display:block;width:100%;height:1px;background-color:#FFF6;position:absolute;top:36px}
.scrollable .scroll-bar.horizontal .thumb{cursor:pointer;height:100%;background-color:#FFF;min-width:10px;left:0;height:3px;top:-1px}
.scrollable .scroll-bar.horizontal .thumb:after{content:"SCROLL";font-size:21px;line-height:30px;display:block;position:absolute;top:5px;left:50%;transform:translateX(-50%);animation:blink .5s infinite ease;-webkit-animation:blink .5s infinite ease;-moz-animation:blink .5s infinite ease;-ms-animation:blink .5s infinite ease}
/* scrollable-items */
.scrollable-items{display:flex;flex-wrap:nowrap}
/* product scrollable-items */
.scrollable-items .item{flex-shrink:0;height:auto;padding-top:24px;border-top:1px solid #FFF6}
.scrollable-items a.disabled{pointer-events:none}
.scrollable-items .item.c-2{width:calc((100vw - 24px*7)/6*2 + 24px*1)}
.scrollable-items .item.c-4{width:calc((100vw - 24px*7)/6*4 + 24px*3)}
.scrollable-container .mobile-scroll{display:none}

/* .master-wrapper */
.master-wrapper{width:100%}

header.master{position:fixed;left:0;top:0;padding:24px;width:100%;z-index:10}
body.swipe-opened header.master{background-color:#000;transition-delay:.2s}
header.master .logotype h1{white-space:nowrap}
header.master .logotype span{display:none}
header.master .logotype:hover ~ .btn-swipe{display:none}
header.master .btn-swipe{position:absolute;right:24px;top:24px}

main{width:100%;height:100vh;position:relative;display:block;background-repeat:no-repeat;background-size:cover;background-position:center bottom;overflow:hidden}
main .lazy, main .lazy-img-wrapper{height:100%;position:relative}
main footer{position:absolute;padding:24px;left:0;bottom:0;width:100%;z-index:1}
main footer .btn-scroll-wrapper{position:relative}

section{padding:24px}

section.about .lazy.typewriter{transform:translateY(0px);-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);transition:opacity .05s ease, transform .05s linear}
.lazy-img-wrapper img.animation-scale{transform:scale(1);-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);transition:transform .05s linear}

section.artists .lazy.typewriter{transform:translateY(0px);-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);transition:opacity .05s ease, transform .05s linear}
section.artists{position:relative}
section.artists h4{height:118px}
section.events{position:relative}
section.events h4{height:32px}
section.venues{position:relative}
section.venues h4{height:32px}
section.friends a{display:flex;justify-content:space-between}

section.contact a{display:flex;justify-content:space-between}

footer.master{padding:24px}

@media screen and (min-width: 1441px){
	.fs-s{font-size:26px;line-height:32px;letter-spacing:.7px}
    .fs-sm{font-size:48px;line-height:52px}
    .fs-m{font-size:68px;line-height:72px}

    section.artists h4{height:146px}
    section.events h4{height:34px}
    section.venues h4{height:34px}

    .scrollable .scroll-bar.horizontal:after{top:36px}
    .scrollable .scroll-bar.horizontal .thumb:after{font-size:26px}
}

@media (max-width: 1024px){
    .fs-l{font-size:9.7vw;line-height:8vw;padding-top:0.7vw}

    .margin-top-24{margin-top:24px}
    .margin-top-72{margin-top:48px}
    .margin-top-120{margin-top:72px}
    .margin-top-288{margin-top:144px}

    /* columns */
    .grid{grid-template-columns:repeat(4, 1fr)}
    .grid > *{grid-column-end:span 4}

    .grid .c-1{grid-column-end:span 1}
    .grid .c-1  > *{grid-column-end:span 1}
    .grid .c-2{grid-column-end:span 2}
    .grid .c-2  > *{grid-column-end:span 2}
    .grid .c-3{grid-column-end:span 3}
    .grid .c-3  > *{grid-column-end:span 3}
    .grid .c-4{grid-column-end:span 4}
    .grid .c-4  > *{grid-column-end:span 4}
    .grid .c-5{grid-column-end:span 4}
    .grid .c-5 > *{grid-column-end:span 4}
    .grid .c-6{grid-column-end:span 4}
    .grid .c-6 > *{grid-column-end:span 4}

    .grid .p-2{grid-column-start:1}
    .grid .p-3{grid-column-start:2}
    .grid .p-4{grid-column-start:3}
    .grid .p-5{grid-column-start:4}
}

@media (max-width: 720px){
    .fs-s{font-size:16px;line-height:20px;letter-spacing:.7px;padding-top:3px}
    .fs-sm{font-size:24px;line-height:28px;padding-top:3px}
    .fs-m{font-size:32px;line-height:36px;padding-top:3px}
    .fs-l{font-size:48px;line-height:52px;padding-top:5px}

    section.artists h4{height:77px}
    section.events h4{height:25px}
    section.venues h4{height:25px}

    .margin-top-24{margin-top:18px}
    .margin-top-72{margin-top:32px}
    .margin-top-120{margin-top:48px}
    .margin-top-288{margin-top:62px}

    .margin-bottom-120{margin-bottom:48px}

    /* columns */
    .grid{grid-template-columns:repeat(1, 1fr)}
    .grid > *{grid-column-end:span 1}

    .grid .c-1{grid-column-end:span 1}
    .grid .c-1  > *{grid-column-end:span 1}
    .grid .c-2{grid-column-end:span 1}
    .grid .c-2  > *{grid-column-end:span 1}
    .grid .c-3{grid-column-end:span 1}
    .grid .c-3  > *{grid-column-end:span 1}
    .grid .c-4{grid-column-end:span 1}
    .grid .c-4  > *{grid-column-end:span 1}
    .grid .c-5{grid-column-end:span 1}
    .grid .c-5 > *{grid-column-end:span 1}
    .grid .c-6{grid-column-end:span 1}
    .grid .c-6 > *{grid-column-end:span 1}

    .grid .p-2{grid-column-start:1}
    .grid .p-3{grid-column-start:1}
    .grid .p-4{grid-column-start:1}
    .grid .p-5{grid-column-start:1}

    ul.grid-masonry > li{width:calc(100vw - 48px)}

    .scrollable-container{overflow-x:scroll;padding-bottom:72px}
    .scrollable-items.grid{justify-content:start}
    .scrollable-items .item.c-2{width:calc(100vw - 48px)}
    .scrollable-items .item.c-4{width:calc(100vw - 48px)}
    .scrollable-container .mobile-scroll{display:block;position:absolute;width:calc(100vw - 48px);padding-bottom:2px}

    .modal .slider div.slide .video-wrapper{width:100%;height:40%;position:relative;top:50%;transform:translateY(-50%)}

    header.master .logotype h1{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 130px)}
	header.master .logotype:hover ~ .btn-swipe{display:inline}

    header nav.grid{display:flex;justify-content:space-between}
    footer.master ul.grid{display:block}
    footer.master ul.grid .ta-right{text-align:left}

    .social:not(.mobile){display:none}
    .social.mobile{display:flex;margin-top:40px}
    .social.mobile ul{flex-direction:column;width:100%}
    .social.mobile ul li{width:100%}
    .social.mobile ul li.language{margin-bottom:40px}
}













/* SLICK PLUG IN */
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; height: 100%;}
.slick-list:focus { outline: none; }
.slick-loading .slick-list { background: #fff url("./ajax-loader.gif") center center no-repeat; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; height: 100%;}
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; background-position: center center;background-size: cover;}
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

/* Icons */
@font-face { font-family: "slick"; src: url("./fonts/slick.eot"); src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; }
/* Arrows */
.slick-prev,.slick-next{position:absolute;display:block;line-height:30px;cursor:pointer;background:transparent;color:transparent;padding:0;border:none;outline:none;z-index:1;font-family:'Work Sans';font-size:50px;font-weight:500;overflow:hidden;width:25%;height:100%;bottom:0;}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }

.slick-prev:before, .slick-next:before {font-size: 40px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-prev{left:0;cursor:url('../imgs/nav_prev.svg'), auto}
.slick-next{right:0;cursor:url('../imgs/nav_next.svg'), auto}
.modal .slick-prev{left:0;cursor:url('../imgs/nav_prev_white.svg'), auto}
.modal .slick-next{right:0;cursor:url('../imgs/nav_next_white.svg'), auto}

/* Dots */
.slick-dots { position: absolute; bottom: 30px; left:50%; transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%); list-style: none; display: block; text-align: left; padding: 0; z-index: 2 }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 2px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1;}
.slick-dots li button:before { position: absolute; top: 0; left: 0;  font-family:"Arial"; content: "•"; width: 20px; height: 20px;font-size: 36px; line-height: 20px; text-align: center; color: #FFF; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 1}
.slick-dots li.slick-active button:before { color: #e4d741; opacity: 1;}