@charset "UTF-8";

/* ==========================================================================

RESET
========================================================================== */
html{color:#222;font-size:1em;line-height:1.4}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.hidden{display:none !important}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}@media print{*,*:before,*:after,*:first-letter ,*:first-line {background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}

html,
body {
	height: 100%;
	overflow: hidden;
}

#cooper {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 1;
	overflow: hidden;
	transition: opacity 1s ease;

	font: 12px/12px courier, serif;

	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
}
#cooper span.o {
	display: none;
}

#redroom {
	position: fixed;
	top: -1000%;
	right: -1000%;
	bottom: -1000%;
	left: -1000%;
	background: url(/gfx/tile.svg) repeat 50% 50%;
	-wekit-animation-name: red-room-spinner; 
	-wekit-animation-duration: 60s; 
	-wekit-animation-iteration-count: infinite;
	-wekit-animation-timing-function: linear;
	-moz-animation-name: red-room-spinner; 
	-moz-animation-duration: 60s; 
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: red-room-spinner; 
	-ms-animation-duration: 60s; 
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;
	-o-animation-name: red-room-spinner; 
	-o-animation-duration: 60s; 
	-o-animation-iteration-count: infinite;
	-o-animation-timing-function: linear;
	animation-name: red-room-spinner; 
	animation-duration: 60s; 
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@-ms-keyframes red-room-spinner {
	from { -ms-transform: rotate(0deg); }
	to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes red-room-spinner {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes red-room-spinner {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}
@keyframes red-room-spinner {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}

#toolate {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 1s ease;
}
#toolate.o {
	opacity: 1;
}
#toolate.l {
	transition: opacity 120s ease;
	opacity: 0;
}
#toolate i {
	width: 14.286%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 5;
}
#toolate i:nth-of-type(1) {
	left: 0;
	background-color: #B5B3B4;
}
#toolate i:nth-of-type(2) {
	left: 14.286%;
	background-color: #B9A900;
}
#toolate i:nth-of-type(3) {
	left: 28.572%;
	background-color: #00A5B7;
}
#toolate i:nth-of-type(4) {
	left: 42.858%;
	background-color: #0A9B00;
}
#toolate i:nth-of-type(5) {
	left: 57.144%;
	background-color: #C933BD;
}
#toolate i:nth-of-type(6) {
	left: 71.43%;
	background-color: #CC260D;
}
#toolate i:nth-of-type(7) {
	left: 85.716%;
	background-color: #001FBF;
}

#toolate i:after {
	content: '';
	width: 100%;
	height: 10%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	background-color: #000;
}
#toolate i:nth-of-type(1):after {
	background-color: #001FBF;
}
#toolate i:nth-of-type(3):after {
	background-color: #C933BD;
}
#toolate i:nth-of-type(5):after {
	background-color: #00A5B7;
}
#toolate i:nth-of-type(7):after {
	background-color: #B5B3B4;
}

#readtalkshutup {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 1;
	overflow: hidden;
	transition: opacity 1s ease;

	font: 12px/12px courier, serif;

	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
}
#readtalkshutup span.o {
	display: none;
}
#readtalkshutup .w {
	font-weight: 700;
}
#readtalkshutup .w-1 {
	color: red;
	font-weight: 700;
}

.main-link {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 100;
}

#living,
#living .asset {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(/i/app/cnc/modules/jw/living/img/base.png) no-repeat 50% 50%;
	background-size: contain;
	opacity: 0;
	transition: opacity 0.1s ease-in-out, background-color 0.1s ease-in-out, transform 0.1s ease-in-out;
	transform-origin: 50% 50%;
}
#living .asset {
}
#living .asset:nth-of-type(1) {
	background-image: url(/i/app/cnc/modules/jw/living/img/1.png);
/* 	transition: opacity 0.1s ease-in-out, background-color 0.1s ease-in-out, transform 0.3s ease-out; */
}
#living .asset:nth-of-type(2) {
	background-image: url(/i/app/cnc/modules/jw/living/img/2.png);
}
#living .asset:nth-of-type(3) {
	background-image: url(/i/app/cnc/modules/jw/living/img/3.png);
}

#living.deactivating .asset {
	transition-duration: 0.5s;
}
#living.deactivating {
	transition-duration: 3s;
}

/* #living {
	background-color: #d5866e;
} */