@import url(normalize.css);
@import url(anim.css);
@import url(fonts.css);
@import url(scroll.css);

::selection { background: rgba(0,0,0,0.5); color: #666; }
::-moz-selection { background: rgba(0,0,0,0.5); color: #666; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: #333; color: #666; width: 100vw; height: 100vh; overflow: hidden;   }
body.fixed { position: fixed; top: 0; left: 0; z-index: 1; }

/* Loading */
.load { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh;	background-image: url('../img/bg-1.gif'); background-size: cover; background-position: center; background-repeat: no-repeat;  position: fixed; top: 0; left: 0; z-index: 9999; animation: flicker3 2s cubic-bezier(0.23,1,0.32,1) forwards;  }
.load > span { display: flex; font: normal 9vh 'Domaine Display', serif; color: #777; transition: all 500ms linear;  }
.load > span.done { transform: scale(0); }
.load > span:after { content: '%'; display: block; font-size: 5vh; transform: translate(3px, 20%); }
.load svg { display: block; position: absolute; fill: #111; width: 50vh; height: 50vh; z-index: 9999!important; animation: rotate2 10s cubic-bezier(0.23, 1, 0.32, 1) forwards; opacity: 0.0; }
.load svg g { fill: #060606; }

/* Containers */
.container { display: block; position: relative; z-index: 1; width: 100vw; height: 100vh; padding: 30px; }
.viewport { display: block; position: relative; width: 100%; height: 100%; z-index: 2; overflow: hidden; border: 1px solid #666; }
.x,.y,.l,.s { position: absolute; font: normal 12px/12px 'Overpass Mono', monospace; z-index: 10;  height: 12px; text-transform: uppercase; }
.x { bottom: 60px; left: 40px; transform: rotate(-90deg); }
.y { top: 60px; right: 45px; transform: rotate(90deg); }
.s { bottom: 60px; right: 45px; transform: rotate(-90deg); }
.l { top: 50px; left: 50px; animation: flicker1 180ms infinite alternate; }

/* Header */
h1 { display: none; margin: 15px; text-indent: -9000px; }
header svg { display: block; position: absolute; z-index: 999; top: calc(50% - 22px); left: calc(50% - 40px); width: 81px; height: 45px; padding: 0; transition: transform 777ms;  }
header svg:hover { cursor: pointer; }
header svg g { fill: #666; transition: fill 1s; }
header svg.black g { fill: #000; }
header:hover svg g { fill: #999!important; }

header { display: flex; align-items: center; position: fixed; top: 31px; left: 31px; width: calc(100% - 63px); z-index: 3; height: 120px; margin: auto; padding: 0; text-align: center; animation: header 1s cubic-bezier(0.23, 1, 0.32, 1) forwards; transform: scale(0.2,0.2); opacity: 0; animation-delay: 222ms; }
header nav { display: flex; align-items: center; justify-content: space-around; width: 100%; max-width: 700px; margin: auto; }
header nav a { display: block; font: normal 16px 'Domaine Sans', sans-serif; color: #777; text-decoration: none; text-transform: uppercase; transition: all 333ms; letter-spacing: 0.05em; }
header nav a.active { color: #ccc; }
header nav a.active:hover { cursor: default; }
header nav a:hover { color: #ccc; }

header.fixed svg { transform: scale(0.65,0.65); }

header nav a:nth-child(2) { margin-right: 50px; }
header nav a:nth-child(3) { margin-left: 40px; }

/* Responsive Menu */
a#menu { display: none; width: 30px; height: 20px; position: absolute; z-index: 11; top: 60px; right: 50px; }
#menu .line { display: block; background: #666; width: 100%; height: 2px; position: absolute; left: 0; border-radius: 4px; transition: all 0.4s; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; }
#menu .line.line-1 { top: 0; }
#menu .line.line-2 { top: 50%; }
#menu .line.line-3 { top: 100%; }
#menu:hover .line { background: #aaa; }
#menu:hover .line-1, #menu:focus .line-1 { transform: translateY(2px); -webkit-transform: translateY(2px); -moz-transform: translateY(2px); }
#menu:hover .line-3, #menu:focus .line-3 { transform: translateY(-2px); -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); }
#menu.active .line-1 { transform: translateY(6px) translateX(0) rotate(45deg); -webkit-transform: translateY(6px) translateX(0) rotate(45deg); -moz-transform: translateY(6px) translateX(0) rotate(45deg); }
#menu.active .line-2 { opacity: 0; }
#menu.active .line-3 { transform: translateY(-14px) translateX(0) rotate(-45deg); -webkit-transform: translateY(-14px) translateX(0) rotate(-45deg); -moz-transform: translateY(-14px) translateX(0) rotate(-45deg); }


/* Content */
main { position: relative; z-index: 2; min-height: 100vh; }
section { display: none; padding: 200px 0; opacity: 0; transform: translateY(12vh); }
section.active { display: block;  animation: fadein 2.5s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes fadein { 100% { opacity: 1; transform: translateY(0); }}

/* Home */
#home { height: 3000px; }
.promo { display: flex; justify-content: space-between; align-items: center; width: 80%; margin: auto;  }
.promo article:before { content: ''; display: block; position: absolute; z-index: -1; width: calc(100% - 20px); height: calc(100% - 20px); top: 10px; left: 10px; border: 1px solid rgba(166,166,166,0.25); }
.promo article { display: block; min-height: 600px; position: relative; width: 40%;  padding: 30px; border: 1px solid rgba(166,166,166,0.5); text-align: center; }
.promo article img { display: block; max-width: 200px; margin: -80px auto 40px auto; }
.promo article h3 a { display: block; font: normal 24px/33px 'Domaine Display', serif; color: #aaa; text-transform: uppercase; letter-spacing: 0.1em; word-spacing: 0.2em; }
.promo article.left span { display: block; margin: 10px auto 40px auto; font: normal 14px 'Domaine Sans', sans-serif; color: #aaa; text-transform: uppercase; }
.promo article.left > a.button { display: block; font: normal 12px 'Domaine Sans', sans-serif; color: #aaa; width: 100%; max-width: 400px; margin: auto; padding: 17px 25px; text-transform: uppercase; border: 1px solid #666; text-decoration: none; background: rgba(0,0,0,0.25); }
.promo article.left ul { display: flex; flex-wrap: wrap; justify-content: center; max-width: 400px; list-style-type: none; margin: 25px auto; padding: 0; }
.promo article.left ul li { width: 50%; }
.promo article.left a { transition: all 666ms; }
.promo article.left ul li a { display: block; font: normal 12px 'Domaine Sans', sans-serif; color: #aaa; text-transform: uppercase; padding: 17px 25px; border: 1px solid #666; border-left: none;  border-bottom: none; background: rgba(0,0,0,0.25); }
.promo article.left ul li:nth-child(odd) { border-left: 1px solid #666; }
.promo article.left ul li:nth-child(3), .promo article.left ul li:nth-child(4), .promo article.left ul li:nth-child(5) { border-bottom: 1px solid #666; }
.promo article.left ul li:nth-child(5) a { border-top: none; }
.promo article.left ul li a:hover { background: rgba(0,0,0,0.5); }

.promo article.right { padding-top: 50px; }
.promo article.right svg { display: none; position: absolute; z-index: -1; left: calc(50% - 91px); max-width: 200px; margin: auto; transform: translateY(-100px); }
.promo article.right svg g { stroke: rgba(0,0,0,0.6); }
.promo article.right span.impact { display: block; max-width: 200px; margin: auto; font: normal 14px/24px 'Domaine Sans', sans-serif; text-transform: uppercase; color: #888; }
.promo article.right h3 a { display: block; max-width: 370px; margin: auto;  }
.promo article.right h3:before, .promo article.right h3:after { content: ''; display: block; margin: 15px auto; width: 25%; height: 1px; background: #666; }

.promo article.right span.n { display: block; margin: 30px 0 0 0; font: normal 14px/24px 'Domaine Sans', sans-serif; text-transform: uppercase; color: #888; letter-spacing: 0.01em; }
.promo article.right span.n:after { content: ''; display: block; width: 1px; height: 50px; background: #666; margin: 15px auto 0 auto; }
.promo article .next-stop { display: block; width: 80%; margin: auto; padding: 20px; text-align: center; border: 1px solid #666; border-left: none; border-right: none;  }
.promo article .next-stop span { display: block; font-family: 'Domaine Sans', sans-serif; text-transform: uppercase; color: #999; }
.promo article .next-stop span:nth-child(1), .promo article .next-stop span:nth-child(3) { font-size: 14px; }
.promo article .next-stop span:nth-child(2) { font-size: 18px; margin: 7px 0; }

.promo article.right ul { display: flex; justify-content: center; width: 100%; max-width: 200px; height: 50px; list-style-type: none; margin: 0 auto; padding: 0; }
.promo article.right ul li { width: 50%; }
.promo article.right ul li:first-child { border-right: 1px solid #666; }
.promo article.right ul li a { display: block;  width: 100%; height: 100%; padding-top: 20px; font: normal 14px 'Domaine Sans', sans-serif; color: #aaa; text-transform: uppercase; }
.promo article.right a.button { display: block; font: normal 12px 'Domaine Sans', sans-serif; color: #aaa; width: 80%; max-width: 400px; margin: 20px auto; padding: 17px 25px; text-transform: uppercase; border: 1px solid #666; text-decoration: none; background: rgba(0,0,0,0.25); }


/* Music */
#music article { display: flex; justify-content: center; align-items: flex-start; position: relative; z-index: 3; width: 100%; max-width: 80vw; margin: auto; }
#music article .release { position: relative; width: calc(50% - 200px); padding: 60px 0 0 0; }
#music article .cover { width: 400px; max-width: 400px; }
#music article .tracks { position: relative; width: calc(50% - 200px);  padding: 60px 0 0 0; }
#music article .release { width: 35vw; }
#music article .cover { width: 20vw; }
#music article .tracks { width: 35vw; }
#music article img { max-width: 100%; }

#music article .release:after {
	content: ''; display: block; width: 100%; height: 1px; background: #666;
	position: absolute;
	top: 120px;
	z-index: -1;
}

#music article .tracks:after {
	content: ''; display: block; width: 100%; height: 1px; background: #666;
	position: absolute;
	top: 120px;
	z-index: -1;
}

#music .release span { display: block; font: normal 24px 'Overpass Mono', monospace; color: #666;  }
#music article:after { content: ''; display: block; width: 1px; height: 900px; z-index: -1; position: absolute; margin: auto; background: #666; left: calc(50% - 1px); }

#music .tracks h3 { display: block; margin-left: 60px; font: normal 36px 'Domaine Display', serif; color: #bbb; letter-spacing: 0.02em; white-space: nowrap; }
#music .tracks ul { display: block; list-style-type: none; margin: 60px 0 100px 60px; padding: 0; counter-reset: tracks; }
#music .tracks ul li { display: flex; margin-bottom: 15px; counter-increment: tracks; }
#music .tracks ul li:before { display: inline-block; width: 35px; content: counter(tracks); font: normal 15px 'Overpass Mono', monospace; color: #777; }
#music .tracks ul li a { font: normal 16px 'Domaine Sans', sans-serif; color: #999; text-decoration: none; transition: color 666ms; }
#music .tracks ul li a:hover { color: #ccc; }

#music article.left .release { order: 3; text-align: right; }
#music article.left .cover { order: 2; }
#music article.left .tracks { order: 1;  }

/* Tour */

#tour { padding-top: 300px; height: 3000px; }
#tour h2 { font: normal 48px 'Domaine Display', serif; display: block; text-align: center; text-transform: uppercase; letter-spacing: 0.2em; word-spacing: 0.12em; }
.dates { display: block; margin: auto; width: 100%; max-width: 1200px; margin: 100px auto; }
.dates .row { display: flex; align-items: center; width: 100%; padding: 20px 60px; justify-content: space-between; border: 1px solid #666; border-top-width: 0; border-left-width: 0; border-right-width: 0; }
.dates .row:first-child { border-top-width: 1px; }
.dates .date { display: block; font-family: 'Domaine Sans', sans-serif; text-transform: uppercase; }
.dates .date, .dates .location { height: 50px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.dates .date > span, .dates .location > span { display: block; }
.dates .location { flex: 1;  }
.dates .date > span:first-child, .location > span:first-child { font: normal 14px/14px 'Domaine Sans', sans-serif; text-transform: uppercase; margin-bottom: 5px; }
.dates .date > span:last-child { font: normal 28px/28px 'Domaine Sans', sans-serif; }
.location > span:last-child { font: normal 26px/26px 'Domaine Display', serif; letter-spacing: 0.03em; }

.dates .tickets ul { display: flex; }
.dates .tickets ul li { display: block; }
.dates .tickets ul li a { display: block; border: 1px solid #666; width: 190px; padding: 15px 0; text-align: center; text-transform: uppercase; font: normal 14px 'Domaine Sans', sans-serif; text-decoration: none; color: #666; transition: all 222ms; }
.dates .tickets ul li a:hover { background: rgba(0,0,0,0.1); color: #ccc; }
.dates .tickets ul li:last-child a { border-left: 0; }

.dates .row:hover > .location,
.dates .row:hover > .date { color: #999!important; }

footer { display: block; max-width: 80%; width: 100%; margin: 50px auto; text-align: center; }
footer span { display: block; margin: 10px auto; font: normal 12px 'Domaine Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; color: #999; }
footer svg { display: block; margin: 10px; }
footer svg g { stroke: #666; }

/* Media */

#media { padding-top: 100px; }

#media article { display: block; width: 100%; max-width: 1200px; margin: auto; text-align: center; /* opacity: 0; transform: scale(0.75,0.75); transition: all 333ms; */ }
#media article.visible { opacity: 1; transform: scale(1,1); }

#media article .frame { display: block; position: relative; margin: 40px auto 0 auto; padding: 30px; /* background: rgba(0,0,0,0.5); */ }
#media article a { display: block; position: relative; clear: both; margin: 0; padding: 0; border: 1px solid #666; overflow: hidden; }
#media article a:after { content: ''; display: block; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px); z-index: 2; background: url('../img/s-5.png'); }
#media article.loading a:after { animation: flicker2 100ms infinite; }

#media article img { display: block; width: 100%; opacity: 0.75; transition: all 5s cubic-bezier(0.23, 1, 0.32, 1); }
#media article:hover img { opacity: 1; transform: scale(1.2,1.2); }
#media article i { position: absolute; z-index: 2; width: 31px; height: 31px; border: 1px solid #666; }
#media article i:nth-of-type(1) { top: 0; left: 0; border-top: none; border-left: none; }
#media article i:nth-of-type(2) { top: 0; right: 0; border-top: none; border-right: none; }
#media article i:nth-of-type(3) { bottom: 0; left: 0; border-left: none; border-bottom: none; }
#media article i:nth-of-type(4) { bottom: 0; right: 0; border-right: none; border-bottom: none; }

#media article h3 { display: block; margin-bottom: 10px; font: normal 36px 'Domaine Display', serif; color: #aaa; letter-spacing: 0.03em; }
#media article span { display: block; font: normal 16px 'Domaine Sans', sans-serif; color: #777; }
#media article iframe { position: absolute; top: 30px; z-index: 2; left: 30px; border: 1px solid #666; height: calc(100% - 60px); width: calc(100% - 60px); opacity: 0; transition: opacity 888ms; }
#media article iframe.play { opacity: 1; }


a { text-decoration: none; color: #777; }

@media all and (max-width: 1200px){
	#lucifer { background-size: auto; background-position: center; }
	.promo article { width: 45%; }
	#music article { flex-wrap: wrap; }
	#music .release { display: none; }
	#music article:after { display: none; }
	#music article .tracks { width: 50vw; }
	#music .tracks ul { margin-bottom: 60px; }
	#media { padding: 100px 40px; }
}


@media all and (max-width: 1024px){
	.promo { width: 90%; }
	.promo article { width: 48%; }
	#tour { padding: 250px 40px; }
	#tour h2 { font-size: 32px; line-height: 42px; letter-spacing: 0.1em; }
	.dates .date, .dates .location { height: auto; }
	.dates .row { flex-wrap: wrap; justify-content: center; }
	.dates .row > div { width: 100%!important; text-align: center; }
	.location > span:last-child { margin-top: 3px; }
	.dates .tickets ul { margin: 15px auto; justify-content: center; }
	.dates .date { order: 3; }
}

@media all and (max-width: 768px){
	.aura > svg { top: calc(50% - 75vh); left: calc(50% - 75vh); width: 150vh; height: 150vh; }
	.promo { flex-wrap: wrap; }
	.promo article { width: 100%; margin-bottom: 50px; }
	#music article { flex-wrap: wrap; }
	#music article > div { width: 100%!important; }
	#music article.left .release { order:1; }
	#music article.left .cover { order: 2; }
	#music article.left .tracks { order: 3; }
	#music .tracks h3, #music .tracks ul { margin-left: 0; }
	#music .tracks h3 { font-size: 28px; }
}

@media all and (max-width: 500px){
	.aura { display: none; }
	a#menu { display: block; }
	header { top: auto; left: auto; }
	header svg  { left: calc(50% - 17px); }
	header.menu svg { top: 39px; left: calc(50% - 40px); }
	header nav { display: none; }
	.container { padding: 8px; }
	.viewport { border-color: rgba(120,120,120,0.5); }
	.ps__rail-y { margin: 40px 0 40px 0; right: 10px!important; }
	.x, .y, .s, .l { display: none; }
	#lucifer { background-size: cover; background-position: center; }
	.location > span:last-child { font-size: 21px; }
	.dates .tickets ul li a { width: 150px; }
	#media article .frame { padding: 15px; }
	#media article .frame i { width: 16px; height: 16px; }
	#media article h3 { font-size: 24px; }
	#media article span { font-size: 14px; }
	#media article iframe { border: none; height: calc(100% - 33px); width: calc(100% - 32px); top: 16px; left: 16px; }
	.dates { margin: 50px auto; }
	header.menu nav { display: flex!important; flex-direction: column; height: 100%; padding: 100px 50px 50px 50px; width: calc(100% - 30px); border: 1px solid #444; margin: 15px; align-items: center; justify-content: center; }
	header.menu { position: fixed; display: flex; flex-direction: column; justify-content: center; z-index: 20; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(11,11,11,0.7) url('../img/s-5.png'); }
	header nav a { width: 100%; margin: 0 auto!important; font-size: 21px; }
	header nav a:after { content: ''; display: block; width: 80%; margin: 25px auto; height: 1px; background: #444; }
	header nav a:first-child:before { content: ''; display: block; width: 80%; margin: 25px auto; height: 1px; background: #444; }

}