body, html { padding:0; margin:0; width:100%; height:100%; }
body { font-size:1vw; color:#FFF;min-width:300px; min-height:300px; 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;}

h1 { letter-spacing:.5vw; font-family:'Titillium Web'; line-height:2.8vw; font-size:3vw; font-weight:900; color:#fff; text-transform:uppercase;  }
h2 { letter-spacing:.5vw; font-family:'Titillium Web'; line-height:8vw; padding-left:0; margin: .3em 0 .5em; position:relative; font-size:9vw; font-weight:900; color:transparent; text-transform:uppercase; text-stroke:.2vw #000; -webkit-text-stroke:.2vw #000; }
h2 span { transition:1s color ease; display:inline-block;} 
h2 span.Active { color:#000; transition:.3s color ease; } 
h3 { font-size:3vw; font-weight:400; }

.Page { display:block;}

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

.CHI { width:100%; position:relative; perspective-origin: 50% 50%; perspective: 150vw; position:fixed; top:0; left:0; width:100%; }
.CHI__Wrapper { position: relative; width: 100%; transform: translateZ(0); transform-style: preserve-3d; padding-right:5vw; padding-top:3vw; padding-bottom:3vw; box-sizing:border-box;}
.CHI__List { display:flex; align-items:flex-start; flex-direction:column; margin:0; padding:0; transform-style: preserve-3d; list-style-type:none; }
.CHI li { padding:1em 0 1em 3em; margin:0 0; transition: transform 1.5s cubic-bezier(.075,.82,.165,1);  transform-origin: left center; display:block; transform-style: preserve-3d; transform: rotateY(0) translateZ(0) scale(1);}
.CHI a { text-align:left; text-decoration:none; position: relative; display:block; }
.CHI li:hover { transform: rotateY(0) translateZ(0) scale(1); transition-duration: 1s; }

.CHI .CHI__EntryDetails { position:absolute; top:4.2em; left:0; width:4em; color:#000; display:inline-block; transition:.3s color ease; z-index:5;}
.CHI .CHI__Title { display:inline-block; letter-spacing:.5vw; font-family:'Titillium Web'; line-height:7vw; transition:.3s color ease; padding-left:3vw; margin-left:7vw; position:relative; font-size:8vw; font-weight:900; color:transparent; text-transform:uppercase; text-stroke:.2vw #000; -webkit-text-stroke:.2vw #000;  }
.CHI .CHI__Title::before { width:.2vw; height:3.7vw; position:absolute; top:2.8vw; left:0; background:#000; display:block; content:' '; transform:none; transition:.5s transform ease; transform-origin:100% 0;}
.CHI .CHI__Title i { z-index:-1; transition:.6s opacity ease; transform:translate3d(0,0,0); text-stroke:.2vw #fff; opacity:0.1; -webkit-text-stroke:.2vw #fff; top:0; font-style:normal; position:absolute; left:3vw; display:block; color:transparent!important; }
.CHI.IsScrolling i { opacity:1 }
.CHI a:hover .CHI__Title { color:#fff; }
.CHI a:hover .CHI__Title::before { transform: scaleX(30); }
.CHI a:hover .CHI__EntryDetails { color:#fff; }
.NavImages { position:fixed; top:0; left:0; width:100%; height:100%; }
.NavImages > div { position:fixed; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center center; background-repeat:no-repeat; opacity:0; transition:.3s opacity ease; }
.NavImages > div.Active { opacity:.1; }

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

.HomeUi {  transition:.5s color ease; }
.HomeUi a { color:#FFF; text-decoration:none; transition:.5s color ease; }
.HomeUi a:hover { font-weight:700; }

.HomeUi__Header { position:fixed; top:3vw; right:3vw; z-index:15; }
.HomeUi__Header h1 { text-align:right; margin:0; }
.HomeUi__Header img { display:block; max-width:260px; }
.HomeUi__Header h1 span { transition:.5s color ease; text-stroke:1px #fff; -webkit-text-stroke:1px #fff; color:transparent; transition:.5s all ease;}
.HomeUi__Header h1 span.Active { color:#FFF;}
.HomeUi__Header.Active h1 span { color:#FFF; }
.HomeUi__Right { text-align:right;transition:.5s transform ease; position:fixed; bottom:3vw; right:4vw; z-index:15;  display:block; width:18%; }
.HomeUi__Right > div {  margin-bottom:1em; }

.HomeUi___Menu { margin:0; display:block; list-style-type:none; padding:0; }
.HomeUi___Menu li > span { opacity:.5; }

.HomeUi.Dark { color:#000; }
.HomeUi.Dark a { color:#000; }
.HomeUi.Dark button { color:#000; }
.HomeUi.Dark .HomeUi__Header h1 span { text-stroke:1px #000; -webkit-text-stroke:1px #000; }
.HomeUi.Dark .HomeUi__Header h1 span.Active { color:#000;}
.HomeUi.Dark .HomeUi__Header.Active h1 span { color:#000; }
.HomeUi__Header.Dark h1 span { text-stroke:1px #000; -webkit-text-stroke:1px #000; }
.HomeUi__Header.Dark h1 span.Active { color:#000;}
.HomeUi__Burger { display:none; }

/*------------------------------------------------------------------
[4. Border]
*/

.Border > span { background:#FFF; position:fixed; display:block;  top:0; left:0; width:100%; height:100%; transition: transform 1s ease; z-index:10; }
.Border > span:nth-child(1) { transform:translateY(calc(1vw - 100%)); }
.Border > span:nth-child(2) { transform:translateY(calc(100% - 1vw)); }
.Border > span:nth-child(3) { transform:translateX(calc(100% - 1vw)); }
.Border > span:nth-child(4) { transform:translateX(calc(1vw - 100%)); }

.Border.Faded > span:nth-child(1) { transform:translateY(0); }

/*------------------------------------------------------------------
[5. Subpage]
*/

.Subpage { z-index:12; display:none; opacity:0; color:#000; position:fixed; top:0; left:0; width:100%; height:100%; overflow:auto; }
.Subpage__Content { padding:2vw 0 1.9vw 0; width:64vw; float:right; margin-right:24vw; }
.Subpage__Content > img { display:block; width:100%; margin:3em 0;}
.Subpage__Close { color:#000; position:fixed; top:50%; left:3.7vw; text-decoration:none; transition:.5s color ease, .5s transform ease; transform:translateX(-10vw); display:inline-block; }
.Subpage__Close span { opacity:.5; font-weight:400; }
.Subpage__Close:hover { font-weight:700; }
	
.Subpage.Loaded .Subpage__Close { transform:translateX(0); }

.Subpage__Content a { text-decoration:none; color:#888; }
.Subpage__Content a:hover { text-decoration:underline; }

/*------------------------------------------------------------------
[6. Mobile breakpoint]
*/

@media (min-width:768px) and (max-width:1100px) {
	body { font-size:1.5vw; }
	.CHI .CHI__EntryDetails { top:2em; }
	.Subpage__Close { left:3.2vw; }
}
@media (max-width:767px) {
	body { font-size: 4vw; }

	h1 { letter-spacing:1.5vw; line-height:7.4vw; font-size:8vw;}
	h2 { letter-spacing:1.5vw; line-height:15vw; padding-left:0; margin-left:0; font-size:15vw; text-stroke:.6vw #000; -webkit-text-stroke:.6vw #000; }
	h3 { font-size:9vw; }

	.HomeUi__Header { top:4vw; right:4vw; padding:3vw; transform-origin:100% 0%; transition:.5s background ease, .5s transform ease;}
	.HomeUi__Header img { display:block; width:25vw; }
	.HomeUi.Subsection .HomeUi__Header {   background:#FFF; transition-delay:.3s; transform:scale(0.5); }
		
	.Border > span:nth-child(1) { transform:translateY(calc(3vw - 100%)); }
	.Border > span:nth-child(2) { transform:translateY(calc(100% - 3vw)); }
	.Border > span:nth-child(3) { transform:translateX(calc(100% - 3vw)); }
	.Border > span:nth-child(4) { transform:translateX(calc(3vw - 100%)); }
	
	.Subpage__Content { padding: 20vw 10vw 10vw 10vw; width:100%; box-sizing:border-box; float:none; }
	.Subpage__Content > img { display:block; width:100%; margin:2em 0;}
	
	.Subpage__Close { transform:translateX(-20vw) rotate(-90deg); transform-origin:50% 50%; left:5.2vw; }
	.Subpage.Loaded .Subpage__Close { transform:translateX(-8vw) rotate(-90deg); }
	.Subpage__Content h2 { margin-top:0; }
	
	.CHI__Wrapper { padding-bottom:2vw; padding-top:2vw; }
	.CHI li { max-width:64%; padding-left:6vw; }
	.CHI .CHI__EntryDetails { margin-bottom:.3em; display:block; position:static; }
	.CHI .CHI__Title { margin-left:0; padding-left:0; }
	.CHI .CHI__Title i { display:none; }
	.CHI .CHI__Title::before { display:none; }
		
	.HomeUi__Right { background:#fff; color:#000; right:0; bottom:0; width:100%; padding:3vw;  transform:translateY(100%); }	
	.HomeUi__Right a { color:#000; }
	
	.HomeUi__Burger { display:block; position:absolute; bottom:100%; margin-bottom:4vw; right:4vw; border:none; background:none; outline:0; color:#fff; text-transform:uppercase; transition:.3s transform ease; }
	.HomeUi__Burger .Close { display:none; }
	
	.HomeUi__Right.Active { transform:translateY(0%); }	
	.HomeUi__Right.Active .HomeUi__Burger { transform:translateY(2vw); }	
	.HomeUi__Right.Active .HomeUi__Burger .Open { display:none; }
	.HomeUi__Right.Active .HomeUi__Burger .Close { display:block; }
	
	.HomeUi.Dark .HomeUi__Right { transform:translateY(150%);  }
} 

@media (max-width:768px) and (orientation:landscape) {
	body::before { display:block; position:fixed;  background:#FFF; top:0; left:0; width:100%; height:100%; content:' '; z-index:99999;}
	body::after { display:block; position:fixed; top:50%; left:50%; white-space:nowrap; transform:translate3d(-50%,-50%,0); content: 'Please rotate your device'; color:#000; z-index:99999;}
}

.IEInfo { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; color:#FFF; z-index:99999999; padding:40px; box-sizing:border-box;}

/* IE10 and IE11 */
@media all and (-ms-high-contrast:none){
	.IEInfo { display:block!important; }
}


/*------------------------------------------------------------------
[7. Effects]
*/

.Vignette { content:' '; display:block; position:fixed; top:0; left:0; width:100%; height:100%; background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=1 ); }
.Noise { content:' '; display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/noise.gif); opacity:0.05; }