/*------------------------------------------------------------------

[Table of contents]
1. General styles
2. Preloader
3. UI
4. Cursor
5. Border
6. The list nav
7. Subpage
-------------------------------------------------------------------*/



/*------------------------------------------------------------------
[1. General styles]
*/

body, html {padding:0; margin:0; width:100%; height:100%; }
body { font-size:1vw; color:#000; font-family: 'Roboto Mono', monospace; font-weight:400; transition:.5s background ease; position:absolute; top:0; left:0; width:100%; height:100%;  overflow-y:scroll; background:#fff!important;}
body, body * {  cursor:none!important;  }
.Page { display:block; }

::selection { background:#f41d08; color:#fff; border:none; }

@media (max-width:1024px) {
	body { font-size:3vw; }
	body, body * {  cursor:auto!important;  }
	
}
@media (max-width:1024px) and (orientation:landscape) {
	body::after { position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; background:#fff; content:'Please rotate your device'; z-index:15; text-align:center; line-height:90vh;}
}

/*------------------------------------------------------------------
[2. Preloader]
*/

.Preloader { z-index:999; position:fixed; top:0; left:0; width:100%; height:100%; }
.Preloader::before { content:' '; position:absolute; top:0; left:-10%; width:120%; height:100%; background:#1bd4e3; transition:1.6s transform ease; transform: skew(5deg);}
.Preloader::after { content:' '; position:absolute; top:0; left:-10%; width:120%; height:100%; background:#f41d08; transition:1.6s transform ease; transform: skew(5deg); mix-blend-mode: multiply;}
.Preloader > div { display:flex; align-items:center; justify-content:center; text-transform:uppercase; white-space:nowrap; font-size:3vw; font-weight:900; font-family:'Raleway', sans-serif; content:' '; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; transition:.6s opacity ease; z-index:10;}
.Preloader > div > div { position:relative; }
.Preloader > div > div > span:first-child { animation:Preloader 3s ease-in-out infinite; content:' '; transition:.3s transform ease; transition-delay:.3s; display:block; color:#f41d08; }
.Preloader > div > div > span:last-child { animation:PreloaderI 3s ease-in-out infinite; content:' '; transition:.3s transform ease; transition-delay:.3s; display:block; position:absolute; top:0; left:0; color:#1bd4e3; mix-blend-mode: multiply; }

body.Loaded .Preloader { pointer-events:none; }
body.Loaded .Preloader > div { opacity:0; }
body.Loaded .Preloader::before { transition-delay:0s; transform:translate3d(120%,0,0) skew(-5deg); }
body.Loaded .Preloader::after { transition-delay:0s; transform:translate3d(-120%,0,0) skew(-5deg); }

@keyframes Preloader {
	0% { transform:translate3d(-.04em,-0.04em,0); }
	50% { transform:translate3d(.04em,0.04em,0); }
	100% { transform:translate3d(-.04em,-0.04em,0); }
}
@keyframes PreloaderI {
	0% { transform:translate3d(.04em,0.04em,0); }
	50% { transform:translate3d(-.04em,-0.04em,0); }
	100% { transform:translate3d(.04em,0.04em,0); }
}


@media (max-width:1024px) {
	.Preloader > div { font-size:9vw; }
}

/*------------------------------------------------------------------
[3. UI]
*/

.MainHeader__Logo {  z-index: 15; position:fixed; top:3vw; left:3vw; width:10vw; display:block;}
.MainHeader__Logo img { display:block; width:100%; }

.MainHeader__Nav { z-index:15; display:flex; position:fixed; bottom:2vw; left:3vw; list-style-type:none; padding:0; margin:0; }
.MainHeader__Nav li { display:block; padding:0; margin:0 2em 0 0; }
.MainHeader__Nav a { transition:.3s color ease; color:#000; text-decoration:none; text-transform:uppercase;}
.MainHeader__Nav li:not(.Active) a:hover { color:#1bd4e3; }
.MainHeader__Nav li.Active a { font-weight:700; cursor:inherit; }

.MainHeader__Social { z-index:15; display:flex; position:fixed; top:2.8vw; right:3vw; list-style-type:none; padding:0; margin:0; }
.MainHeader__Social li { display:block; padding:0; margin:0 0 0 2em; }
.MainHeader__Social a { transition:.3s color ease; color:#000; text-decoration:none; text-transform:uppercase;}
.MainHeader__Social li:not(.Active) a:hover { color:#f41d08; }
.MainHeader__Social li.Active a { font-weight:700; cursor:inherit; }

.MainHeader__Copy { color:#000; text-decoration:none; text-transform:uppercase; z-index:15; display:flex; position:fixed; bottom:2vw; right:3vw; } 

@media (max-width:1024px) { 
	.MainHeader__Logo { top:6vw; left:6vw; width:25vw; }
	.MainHeader__Social { top:8.5vw; right:9vw; }
	.MainHeader__Nav { bottom:12vw; left:6vw; }
	.MainHeader__Nav li { margin-right:1em; }
	.MainHeader__Copy { bottom:7vw; left:6vw; }
}

/*------------------------------------------------------------------
[4. Cursor]
*/

.Cursor { display:none; pointer-events:none; }
body.MouseMove .Cursor { display:block; }
.Cursor > span.First {mix-blend-mode: multiply; z-index:9999; width: 30px; height: 30px; pointer-events: none; position:fixed;}
.Cursor > span.First i { display:block; transition:.3s background ease, .3s transform ease, .3s border ease; width: 30px; height: 30px; pointer-events: none; border-radius:100%; border:2px solid #f41d08;box-sizing:border-box; border-radius:100%; }
.Cursor > span.Second { mix-blend-mode: multiply;z-index:9999; width: 30px; height: 30px; pointer-events: none; position:fixed; }
.Cursor > span.Second i { display:block; transition:.3s background ease, .3s transform ease, .3s border ease, .3s opacity ease; width: 30px; height: 30px; pointer-events: none;  border-radius:100%; border:2px solid #1bd4e3; top:0; left:0; box-sizing:border-box;  }
body.Hover .Cursor > span.First i { background: #f41d08; transform:scale(0.2); }
body.Hover .Cursor > span.Second i { transform:scale(2); border-width:1px; }
body:not(.Loaded) .Cursor > span.First i { background: #f41d08; transform:scale(0.2); }
.Cursor__Text { pointer-events:none; white-space:nowrap; color:#000; text-transform:uppercase; position:absolute; top:50%; left:50%; transform:translate3d(-50%,-50%,0); opacity:0; transition:.3s opacity ease; }
body.TextHover .Cursor__Text { opacity:1; }
body.TextHover .Cursor > span.Second i {  transform:scale(3); background:#fff; border-color:#fff;}
body.TextHover .Cursor > span.First i {transform:scale(3); }
body.TextHover .Cursor > span.Second { mix-blend-mode:inherit; }
body.TextHover .Cursor > span.First {}

@media (max-width:1024px) { 
	.Cursor { display:none!important; }
}

/*------------------------------------------------------------------
[5. Border]
*/

.Border { pointer-events:none; }
.Border .First { z-index:12; transition:.3s transform ease;transition-delay:.3s; transform:translate3d(2px,2px,0);  display:block; position:fixed; top:1vw; width:calc(100% - 2vw); left:1vw; height:calc(100% - 2vw); border:2px solid #f41d08; }
.Border .Second { z-index:12; transition:.3s transform ease; transition-delay:.3s; transform:translate3d(-2px,-2px,0);  display:block; position:fixed; top:1vw; width:calc(100% - 2vw); left:1vw; height:calc(100% - 2vw); border:2px solid #1bd4e3; mix-blend-mode: multiply; }
body.Hover .Border .First { transition-delay:0s; transform:translate3d(0,0,0); }
body.Hover .Border .Second { transition-delay:0s; transform:translate3d(0,0,0); }

.Border::before { z-index:2; content:' '; position:fixed; top:0; left:0; width:100%; height:10vw; pointer-events:none; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%); }
.Border::after { z-index:2; content:' '; position:fixed; bottom:0; left:0; width:100%; height:10vw; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);}
	
@media (max-width:1024px) {
	.Border .First { top:2vw; width:calc(100% - 6vw); left:2vw; height:calc(100% - 6vw); }
	.Border .Second { top:2vw; width:calc(100% - 6vw); left:2vw; height:calc(100% - 6vw); }
	.Border::before {height:45vw; }
	.Border::after {height:45vw; }
	
}


/*------------------------------------------------------------------
[6. The list nav]
*/

.TheList { transform-origin:0 50%; width:100%; position:relative; perspective-origin: 50% 50%; perspective: 150vw; position:fixed; top:0; left:0; width:100%; }
.TheList__Wrapper { position: relative; width: 100%; transform: translateZ(0); transform-style: preserve-3d;  box-sizing:border-box;}
.TheList__List { display:flex; align-items:center; flex-direction:column; margin:5em 0; padding:0; transform-style: preserve-3d; list-style-type:none; width: 100%; }
.TheList li { opacity:0; margin:0 0; padding:.5em 0; transition: 1s opacity ease;  transform-origin: left center; display:block; transform-style: preserve-3d; }
.TheList li.Visible { opacity:1; }
.TheList a { padding:.25em 0; text-align:left; text-decoration:none; position: relative; display:block; }
.TheList li:hover { transform: rotateY(0) translateZ(0) scale(1); transition-duration: 1s; }

.TheList .TheList__Details { padding-left:2em; position:absolute; left:100%; top:1em; line-height:1.2em; color:#000; display:none; }
.TheList .TheList__Title { white-space:nowrap; text-align:center; display:block; letter-spacing:.5vw;transition:.6s opacity ease, .3s color ease, .1s transform ease; font-family:'Raleway'; line-height:5vw; transition:.3s color ease; padding-left:0; margin-left:0; position:relative; font-size:5vw; font-weight:900; text-stroke:2px #1bd4e3; -webkit-text-stroke:2px #1bd4e3; color:transparent; text-transform:uppercase;}
.TheList .TheList__Title i {  width:100%; z-index:1; transition:.6s opacity ease; transform:translate3d(0,0,0);  top:-0.01vw; font-style:normal; position:absolute; left:0; display:block; mix-blend-mode: multiply; text-stroke:2px #f41d08; -webkit-text-stroke:2px #f41d08; color:transparent;}
.TheList a:hover .TheList__Title { animation:ListHover 3s ease-in-out infinite; font-size:7vw; line-height:7vw; color:#1bd4e3;}
.TheList a:hover .TheList__Title i { animation:ListHoverI 3s ease-in-out infinite; color:#f41d08; }
.TheList a:hover .TheList__Details { display:block; }

@keyframes ListHover {
	0% { transform:translate3d(-.04em,-0.04em,0); }
	50% { transform:translate3d(.04em,0.04em,0); }
	100% { transform:translate3d(-.04em,-0.04em,0); }
}
@keyframes ListHoverI {
	0% { transform:translate3d(.04em,0.04em,0); }
	50% { transform:translate3d(-.04em,-0.04em,0); }
	100% { transform:translate3d(.04em,0.04em,0); }
}

@media (max-width:1024px) { 
	.TheList__List { margin:8em 0; }
	.TheList li { margin:.5em 0; }
	.TheList .TheList__Title { font-size:8vw;  text-stroke:1px #1bd4e3; -webkit-text-stroke:1px #1bd4e3; }
	.TheList .TheList__Title i { text-stroke:1px #f41d08; -webkit-text-stroke:1px #f41d08; }
	.TheList .TheList__Details { display:none!important; }
	
	@keyframes ListHover {
		0% { transform:translate3d(-.08em,-0.08em,0); }
		50% { transform:translate3d(.08em,0.08em,0); }
		100% { transform:translate3d(-.08em,-0.08em,0); }
	}
	@keyframes ListHoverI {
		0% { transform:translate3d(.08em,0.08em,0); }
		50% { transform:translate3d(-.08em,-0.08em,0); }
		100% { transform:translate3d(.08em,0.08em,0); }
	}
}


/*------------------------------------------------------------------
[7. Subpage]
*/

.Subpage { position:fixed; top:0; left:0; transform-origin:50% 50%; }
.Subpage__Wrapper { padding:0 15vw 0 15vw; }
.Subpage__Fullheight { min-height:calc(100vh); display:flex; justify-content:center; flex-direction:column;}
.Subpage h1 { margin-top:0; white-space:nowrap; text-align:left; display:block; letter-spacing:.5vw; font-family:'Raleway'; line-height:5vw; transition:.3s color ease; padding-left:0; margin-left:0; position:relative; font-size:5vw; font-weight:900; text-stroke:2px #1bd4e3; -webkit-text-stroke:2px #1bd4e3; color:transparent; text-transform:uppercase;  animation:ListHover 3s ease-in-out infinite;  color:#1bd4e3;}
.Subpage h1 i {  width:100%; z-index:1; transition:.6s opacity ease; transform:translate3d(0,0,0);  top:-0.01vw; font-style:normal; position:absolute; left:0; display:block; mix-blend-mode: multiply; text-stroke:2px #f41d08; -webkit-text-stroke:2px #f41d08; color:transparent; animation:ListHoverI 3s ease-in-out infinite; color:#f41d08; }

.Subpage h2 { white-space:nowrap; text-align:left; display:block; letter-spacing:.5vw; font-family:'Raleway'; line-height:3vw; transition:.3s color ease; padding-left:0; margin-left:0; position:relative; font-size:3vw; font-weight:900; text-stroke:2px #1bd4e3; -webkit-text-stroke:2px #1bd4e3; color:transparent; text-transform:uppercase; }
.Subpage h2 i {  width:100%; z-index:1; transition:.6s opacity ease; transform:translate3d(0,0,0);  top:-0.01vw; font-style:normal; position:absolute; left:0; display:block; mix-blend-mode: multiply; text-stroke:2px #f41d08; -webkit-text-stroke:2px #f41d08; color:transparent; }

.Subpage p { margin:3em 0; opacity:0; transition:1s opacity ease; }
.Subpage p.Visible { opacity:1; }

.Subpage__Video { position:relative; margin:5em 0; display:block; width:100%; }
.Subpage__Video video { opacity:0; pointer-events:none; transition:.3s opacity ease; position:absolute; top:0; left:0; width:100%; background:#000; height:100%; }
.Subpage__Video.Played video { opacity:1; }

.Subpage .Row { margin:3em 0; width:100%; display:flex; justify-content:space-between; }
.Subpage .Row > div { width:calc(50% - 1vw); }

.Subpage__Image { width:100%; position:relative; margin:5em 0;}
.Subpage__Image > div:nth-child(1) { opacity:0; transition:1s opacity ease; background:cyan; }
.Subpage__Image > div:nth-child(2) { opacity:0; transition:1s opacity ease; transition-delay:.3s;background:red; position:absolute; top:0; left:0; width:100%; mix-blend-mode: darken;}
.Subpage__Image img { mix-blend-mode: lighten; display:block; width:100%; }

.Subpage__Image.Visible > div:nth-child(1) { opacity:1; }
.Subpage__Image.Visible > div:nth-child(2) { opacity:1; }

@media (max-width:1024px) { 
	.Subpage__Wrapper { padding:0 7vw 15vw 6vw; }
	.Subpage h1 { line-height:1.2em; font-size:8vw; white-space:inherit; }	
	.Subpage h2 { margin-top:2em; line-height:1.2em; font-size:8vw; white-space:inherit; text-stroke:1px #1bd4e3; -webkit-text-stroke:1px #1bd4e3; }
	.Subpage h2 i { text-stroke:1px #f41d08; -webkit-text-stroke:1px #f41d08; }

	.Subpage .Row { display:block; }
	.Subpage .Row > div { width:100%; margin:1em 0; }
	.Subpage p { margin:1em 0; }
	.Subpage .Row { margin:1em 0; }
	.Subpage__Image { margin:3em 0; }
	.Subpage__Video { margin:3em 0; }
	
}