html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body {line-height: 1; }
ol, ul {list-style: none; }
blockquote, q {quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; }
table {border-collapse: collapse; border-spacing: 0; }

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600,700,800');

#hjmchat.ninchat-embed-container.ninchat-bottom { right: 0 !important; box-shadow: none !important; }


body { position: relative; background: #fff; font-family: 'Raleway', sans-serif; font-size: 13px; overflow-x: hidden; text-align: left; color: #292e36; transition: all 0.5s ease; min-height: 100vh; }
strong { font-weight: 400; }
a, .a { cursor: pointer; color: #29859e; transition: color 0.3s ease; position: relative; text-decoration: none; }
a:hover, .a:hover { color: #0e2c35; }
.dark a:hover, .dark .a:hover { color: #4dacc6; }
a:after, .a:after { display: inline-block; height: 1px; content: ''; border-bottom: 1px solid #29859e; width: 0%; position: absolute; bottom: -2px; left: 50%; transform: perspective(1px) translateX(-50%); transition: all 0.5s ease; }
a.noline:after, .a.noline:after { border-color: transparent; }
a.noline.noline-top:after, .a.noline.noline-top:after { bottom: auto; top: -3px; }
a:not(.noline-no):hover:after, .a:not(.noline-no):hover:after { border-color: #0e2c35; width: 95%; }
.dark a:not(.noline-no):hover:after, .dark .a:not(.noline-no):hover:after { border-color: #4dacc6; }
.a.tip-btn:before { content: 'Click to copy to clipboard'; background-color: #29859e; color: #fff; display: block; width: 200px; height: 0; overflow: hidden; font-size: 0.8em; padding: 5px 0px; position: absolute; bottom: 18px; left: 50%; text-align: center; text-transform: none; transform: perspective(1px) translateX(-50%); transition: all 0.5s ease; opacity: 0; }
.a.tip-btn:hover:before { bottom: 28px; height: 28px; opacity: 1; }

h1 { font-size: 3em; text-transform: uppercase; font-weight: 300; }
p { margin: 20px 0; }
p.large { font-size: 1.6em; }
img { max-width: 100%; /*image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-optimize-crisp-edges;*/ }

.visible-xs { display: none; }

/* .light {} */
.dark { background: #222; color: #f2f2f2; }
.caps { text-transform: uppercase; }
section { padding: 100px 0; box-sizing: border-box; position: relative; height: auto; min-height: 100vh; box-sizing: border-box; overflow: hidden; }

/* section.intro {  } */

.mousescroll { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); background: transparent; border: solid 3px #29859e; border-radius: 20px; display: block; width: 20px; height: 30px; margin: auto; transition: all 0.3s ease; }
.mousescroll .wheel { background: #29859e; border: 0; border-radius: 4px; display: block; width: 4px; height: 8px; position: relative; top: 6px; margin-left: auto; margin-right: auto; }
.mousescroll .wheel { -webkit-animation-name: drop; -webkit-animation-duration: 1.3s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: infinite; -webkit-animation-play-state: running; -webkit-animation-name: drop; animation-name: drop; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-play-state: running; animation-play-state: running; }
@-webkit-keyframes drop       { 0% {top: 4px; height: 2px; } 30% {top: 6px; height: 8px; } 50% {top: 8px; height: 8px; } 75% {top: 12px; height: 4px; } 100% {top: 4px; height: 2px; } }
@keyframes drop               { 0% {top: 4px; height: 2px; } 30% {top: 6px; height: 8px; } 50% {top: 8px; height: 8px; } 75% {top: 12px; height: 4px; } 100% {top: 4px; height: 2px; } }
.mousescroll:hover { border-color: #0e2c35; }
.mousescroll:hover .wheel { background: #0e2c35; }
.mousescroll.show { opacity: 0; }

.mousescroll.mousescroll-invert:hover { border-color: #eee; }
.mousescroll-invert.mousescroll-invert:hover .wheel { background: #eee; }

.text { font-size: 1.4em; font-weight: 300; line-height: 1.5em; }

/* #plain-text { background: url(../bg-blurry.jpg) 50% 100% / cover no-repeat #cde0e9; } */

.plain-text { padding: 0 70px; margin: 0 auto; width: 70%; max-width: 800px; position: absolute; top: 50%; left: 50%; transform: perspective(1px) translate(-50%,-50%); }
.plain-text p { margin: 30px 0; }
/*.plain-text p:first-of-type::first-letter { font-size: 4em; }
.plain-text p:first-of-type::before { content: '_'; display: inline-block; font-size: 3em; margin-left: -30px; }*/

h2 { font-size: 1.8em; font-weight: 300; text-transform: uppercase; }

#nav { background-color: #fff; position: fixed; font-weight: 300; height: 80px; top: 0; left: 0; width: 100%; box-sizing: border-box; padding: 30px; word-spacing: 0.54vw; color: rgba(0,0,0,0.3); text-transform: uppercase; font-size: 1.7em; z-index: 99; }
#nav .brand { float: left; width: 70px; position: absolute; }
#nav .scroll-toggle,
#nav .scroll-toggle * { visibility: hidden; opacity: 0; transition: all 0.5s ease; }
#nav .scroll-toggle.show,
#nav .scroll-toggle.show * { visibility: visible; opacity: 1; }
#nav .nav-links { float: right; }

#nav .return { position: absolute; left: 50%; transform: translateX(-50%); }
.return img { height: 0.8em; }

.center-container { position: absolute; padding: 0; width: 66vw; text-align: center; height: auto; margin: 0 auto; top: 50%; left: 50%; transform: perspective(1px) translate(-50%,-50%); }
.intro-container { position: absolute; padding: 0; width: 34vw; height: auto; margin: 0 auto; top: 50%; left: 50%; transform: perspective(1px) translate(-50%,-50%); }
#plain-line { opacity: 1; border-radius: 10px; background-color: #000; position: absolute; padding: 0; width: 100%; height: 0.4vw; margin: 0 auto; top: 49%; left: 50%; transform: perspective(1px) translate(-50%,-50%); transition: all 3s ease; }
#plain-line.end { opacity: 0; width: 5%; }
#plain-logo { width: 100%; opacity: 0; transition: all 4s ease; }
#plain-logo.end { opacity: 1; }
#plain-slogan { opacity: 0; display: block; margin-top: 1vw; font-weight: 300; font-size: 1.3vw; text-transform: uppercase; word-spacing: 0.54vw; letter-spacing: 0.3vw; text-align: center; color: #777; margin-right: -0.3vw; transition: opacity 5s ease; }
#plain-slogan.end { opacity: 1; }


@media screen and (max-width: 1200px) {
	.intro-container { width: 40vw; }
	#nav { font-size: 1.5em; }
	#plain-slogan { font-size: 1.7vw; word-spacing: 1vw; letter-spacing: 0.18vw; }

	.plain-text { padding: 0 50px;  }
}

@media screen and (max-width: 767px) {

	#nav .brand 	{ width: 55px; }

	.hidden-xs { display: none; }
	.visible-xs { display: inline-block; }
	.intro-container { width: 66vw; }
	#nav { background-color: #fff; }
	#plain-slogan { font-size: 3.6vw; word-spacing: 1vw; letter-spacing: 0vw; margin-top: 2vw; }
	.mousescroll { bottom: 40px; }
	.plain-text { padding: 0 30px; max-width: none; position: relative; top: auto; left: auto; transform: perspective(0px) translate(0,0); }
}


/* ------- */


/* @media (max-width: 1200px){

body 			{  }

} */

@media (max-width: 1023px){

h1 				{ font-size: 4em; }
h2 				{ font-size: 3em; }

}

@media (max-width: 799px){
.ninchat-embed-container { top: auto !important; bottom: 0 !important; }
.ninchat-embed-container.ninchat-open { height: 100% !important; }
}

@media (max-height: 499px){
.ninchat-embed-container.ninchat-open { height: 100% !important; }
}

@media (max-width: 479px){

.float-right	{ float: none; margin-top: 20px; }

}