* {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
body {
	padding-top: 75px;
	background: #02101a url(/img/body-bg.jpg) 0 49px no-repeat;
	background-size: contain;
	background-size: 100% auto;
	font-family: 'Roboto', serif;
	overflow-x: hidden;
}
input:focus, textarea:focus, select:focus{
	outline: none;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}
.trn {
	visibility: hidden;
}
.navbar-toggle {
	border-color: transparent !important;
}

.load-cog {
	color: #FFF;
	text-align: center;
	font-size: 12px;
	margin-bottom: 1em;
}

.navbar {
	background-color: rgba(0,0,0,.75);
	border: 0px solid transparent;
	text-transform: uppercase;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
	color: #fff;
	background-color: rgba(2,55,76,.65);
	font-weight: 300;
}

.character-select {
	cursor: pointer;
}
.character-select.active {
	color: #d5f6f9;
	font-weight: bold;
	text-transform: capitalize;
}

#pixie {
	z-index: 0;
	position: absolute;
	top: 0;
}

.cabal-logo-container {
	text-align: left;
}
.cabal-logo {
    height: 75px;
	margin: 2em 0 3.5em 0;
}

.panel {
	border: 0;
	border-radius: 0;
}

.list-group-item a, .list-group-item a:focus, .list-group-item a:hover {
	display: block;
	text-decoration: none;
}
.list-group-item.active a, .list-group-item.active a:focus, .list-group-item.active a:hover {
	color: white;
}

.first-content {
	position: relative;
	background-color: rgba(0,0,0,.55);
	padding: 2em 1.5em 1.5em 1.25em;
	z-index: 1;
}

.pj-logo {
	position: absolute;
	right: 0em;
	z-index: 0;
	top: 65px;
}


#character-list img {
	margin-right: .75em;
}
.effect {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	overflow: hidden;
}

@media (max-width: 1100px) {
	.cabal-logo-container {
		text-align: center;
	}
	.cabal-logo {
		height: 75px;
		margin: 2.5em 0 3.5em 0;
	}
	.pj-logo {
		display: none;
	}
}








.button-download {
	width: 100%;
	height: 60px;
	position: relative;
	border: solid rgba(255, 255, 255, 0.3) 1px;
	background: transparent;
	cursor: pointer;
	transition: all 1s;
}
.button-download span.icon {
	position: absolute;
	top: 11px;
	left: 25px;
	font-size: 2em;
	color: #87270d;
	text-shadow: 1px 1px 1px #f58460;
}
.button-download span.download {
	position: absolute;
	top: 10px;
	left: 65px;
	font-size: 1.25em;
	font-weight: 500;
	color: #87270d;
	text-shadow: 1px 1px 1px #f58460;
}
.button-download span.from {
	position: absolute;
	top: 32px;
	left: 67px;
	font-size: .75em;
	color: #ffdeb9;
	text-shadow: 1px 1px 1px #87270d;
}


.button-download.red {
	border: 1px solid #b92706;
	background: #c93818;
	background: -moz-linear-gradient(top, #e5a770 1%, #e85a27 4%, #c93818 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e5a770), color-stop(4%,#e85a27), color-stop(100%,#c93818));
	background: -webkit-linear-gradient(top, #e5a770 1%,#e85a27 4%,#c93818 100%);
	background: -o-linear-gradient(top, #e5a770 1%,#e85a27 4%,#c93818 100%);
	background: -ms-linear-gradient(top, #e5a770 1%,#e85a27 4%,#c93818 100%);
	background: linear-gradient(to bottom, #e5a770 1%,#e85a27 4%,#c93818 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5a770', endColorstr='#c93818',GradientType=0 );
	-webkit-box-shadow: 0px 3px 0px rgba(160, 47, 21, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 3px 0px rgba(160, 47, 21, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 3px 0px rgba(160, 47, 21, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
}
.button-download.red span.icon {
	color: #87270d;
	text-shadow: 1px 1px 1px #f58460;
}
.button-download.red span.download {
	color: #87270d;
	text-shadow: 1px 1px 1px #f58460;
}
.button-download.red span.from {
	color: #ffdeb9;
	text-shadow: 1px 1px 1px #87270d;
}



.button-download.yellow {
	border: 1px solid #d17118;
	background: #ec801a;
	background: -moz-linear-gradient(top, #ffffff 0%, #f69f28 2%, #ec801a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(2%,#f69f28), color-stop(100%,#ec801a));
	background: -webkit-linear-gradient(top, #ffffff 0%,#f69f28 2%,#ec801a 100%);
	background: -o-linear-gradient(top, #ffffff 0%,#f69f28 2%,#ec801a 100%);
	background: -ms-linear-gradient(top, #ffffff 0%,#f69f28 2%,#ec801a 100%);
	background: linear-gradient(to bottom, #ffffff 0%,#f69f28 2%,#ec801a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ec801a',GradientType=0 );
	-webkit-box-shadow: 0px 3px 0px rgba(206, 109, 9, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 3px 0px rgba(206, 109, 9, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 3px 0px rgba(206, 109, 9, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
}
.button-download.yellow span.icon {
    color: #9E5900;
    text-shadow: 1px 1px 1px #f1ab5a;
}
.button-download.yellow span.download {
    color: #9E5900;
    text-shadow: 1px 1px 1px #f1ab5a;
}
.button-download.yellow span.from {
	color: #ffdeb9;
	text-shadow: 1px 1px 1px #9E5900;
}





.button-download .line {
	background: white;
	position: absolute;
	transition: none;
	transform: scale(0);
	opacity: 1;
}
.button-download .line:nth-child(1) {
	transform-origin: 100% 100%;
	height: 3px;
	width: 20%;
	bottom: 0;
}
.button-download .line:nth-child(4) {
	transform-origin: 0 100%;
	height: 3px;
	width: 20%;
	top: -1px;
	right: 0;
}
.button-download .line:nth-child(2) {
	transform-origin: 100% 100%;
	height: 100%;
	width: 3px;
	bottom: 0;
	left: -1px;
}
.button-download .line:nth-child(5) {
	transform-origin: 100% 0;
	height: 100%;
	width: 3px;
	bottom: 0;
	right: -1px;
}
.button-download .line:nth-child(3) {
	transform-origin: 0 100%;
	height: 3px;
	width: 100%;
	top: -1px;
	left: -1px;
}
.button-download .line:nth-child(6) {
	transform-origin: 100% 0;
	height: 3px;
	width: 100%;
	bottom: 0;
	right: -1px;
}
.button-download:hover > .line {
	transform: scale(1);
	opacity: 0;
	transition: all 1s;
}
.button-download:hover > .line:nth-child(2), .button:hover > .line:nth-child(5) {
	transition-delay: 0.5s;
}
.button-download:hover > .line:nth-child(3), .button:hover > .line:nth-child(6) {
	transition-delay: 0.9s;
}





















@keyframes movewave {
	0% { transform: translateX(0) translateZ(0) scaleY(1) }
	50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) }
	100% { transform: translateX(-50%) translateZ(0) scaleY(1) }
}
.wave-wrapper {
	overflow: hidden;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	z-index: -1;
}
.wave-wrapper-inner {
	position: absolute;
	width: 100%;
	overflow: hidden;
	height: 100%;
	bottom: -1px;
}
.bg-top {
	z-index: 15;
	opacity: 0.65;
}
.bg-middle {
	z-index: 10;
	opacity: 0.75;
}
.bg-bottom {
	z-index: 5;
	opacity: 0.85;
}
.wave {
	position: absolute;
	left: 0;
	width: 200%;
	height: 100%;
	background-repeat: repeat no-repeat;
	background-position: 0 bottom;
	transform-origin: center bottom;
}
.wave-top {
	background-image: url('/img/wave-top.png');
	background-size: 50% 110px;
}
.wave-animation .wave-top {
	animation: movewave 5s linear infinite;
}
.wave-middle {
	background-image: url('/img/wave-mid.png');
	background-size: 50% 120px;
}
.wave-animation .wave-middle {
	animation: movewave 10s linear infinite;
}
.wave-bottom {
	background-image: url('/img/wave-bot.png');
	background-size: 50% 100px;
}
.wave-animation .wave-bottom {
	animation: movewave 15s linear infinite;
}













input {
	border: 1px solid #a2a2a2 !important;
	border-radius: 0 !important;
	font-size: .95em !important;
	padding: 5px;
	background-color: #f4f2ef !important;
	color: #000 !important;
}
.input-group-addon {
	border: 1px solid #a2a2a2 !important;
	border-right: 0 !important;
	border-radius: 0 !important;
	font-size: .85em !important;
	color: #000;
	background: #f4f2ef;
}
button:focus {
	outline: 0; 
}
.login, .login:hover {
	text-decoration: none !important;
}
.login input {
	border-left: 0 !important;
}
.button-login {
	width: 100%;
	cursor: pointer;
	text-transform: uppercase;
	font-size: .97em;
    text-shadow: 1px 1px 1px rgba(0,0,0,.75);
    padding: .65em 25px;
	font-weight: 300;
	position: relative;
}
.button-login.blue {
    background: linear-gradient(to bottom, #009EFF 0px, #0075BC 100%) repeat scroll 0 0 transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow: 0 1px 0 #E6F5FF inset;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    width: 100%;
    border-right: 0;
    border-left: 0;
}

.button-login.green {
    background: linear-gradient(to bottom, #88C425 0px, #519548 100%) repeat scroll 0 0 transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow: 0 1px 0 #e6fff2 inset;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    width: 100%;
    border-right: 0;
    border-left: 0;
    margin-top: 1em;
}


.button-login.red {
    background: linear-gradient(to bottom, #c4253b 0px, #820001 100%) repeat scroll 0 0 transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow: 0 1px 0 #ffeae6 inset;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    width: 100%;
    border-right: 0;
    border-left: 0;
}

.button-login .line {
	background: white;
	position: absolute;
	transition: none;
	transform: scale(0);
	opacity: 1;
}
.button-login .line:nth-child(1) {
	transform-origin: 100% 100%;
	height: 3px;
	width: 20%;
	bottom: 0;
}
.button-login .line:nth-child(4) {
	transform-origin: 0 100%;
	height: 3px;
	width: 20%;
	top: -1px;
	right: 0;
}
.button-login .line:nth-child(2) {
	transform-origin: 100% 100%;
	height: 100%;
	width: 3px;
	bottom: 0;
	left: -1px;
}
.button-login .line:nth-child(5) {
	transform-origin: 100% 0;
	height: 100%;
	width: 3px;
	bottom: 0;
	right: -1px;
}
.button-login .line:nth-child(3) {
	transform-origin: 0 100%;
	height: 4px;
	width: 100%;
	top: -1px;
	left: -1px;
}
.button-login .line:nth-child(6) {
	transform-origin: 100% 0;
	height: 4px;
	width: 100%;
	bottom: 0;
	right: -1px;
}
.button-login:hover > .line {
	transform: scale(1);
	opacity: 0;
	transition: all 1s;
}
.button-login:hover > .line:nth-child(2), .button:hover > .line:nth-child(5) {
	transition-delay: 0.5s;
}
.button-login:hover > .line:nth-child(3), .button:hover > .line:nth-child(6) {
	transition-delay: 0.9s;
}


svg.scifi {
	height: 450px;
	width: 450px;
	position: absolute;
	right: 70px;
	top: -55px;
}
.scifi .st0, .scifi .st1, .scifi .st2, .scifi .st3 {
	fill: none;
	stroke: rgba(190,234,255,.15);
	stroke-width: 42;
	stroke-miterlimit: 10;
}
.scifi .st0 {
	stroke-dasharray: 12.1947, 12.1947, 12.1947, 12.1947, 12.1947, 12.1947;
}
.scifi .st1 {
	stroke-dasharray: 50, 90, 200, 30, 40, 0;
}
.scifi .st2 {
	stroke-linecap: square;
	stroke-dasharray: 120, 20, 110, 20, 140;
}
.scifi .st3 {
	stroke-width: 16;
	stroke-linecap: square;
}











.box-options {
	border-style: solid;
	border-width: 73px 25px 30px 25px;
	-moz-border-image: url(/img/box-options.png) 73 25 30 25 stretch repeat;
	-webkit-border-image: url(/img/box-options.png) 73 25 30 25 stretch repeat;
	-o-border-image: url(/img/box-options.png) 73 25 30 25 stretch repeat;
	border-image: url(/img/box-options.png) 73 25 30 25 stretch repeat;
	margin-bottom: 1.75em;
}
.box-options .content {
	background-color: #101010;
	border: 1px solid #101010;
	color: #8dc0e0;
	padding: 10px;
	font-weight: 300;
	position: relative;
	width: 100.5%;
	height: 100.5%;
	margin-top: -1px;
	margin-left: -1px;
}
.box-options .title {
	position: absolute;
	margin-top: -55px;
	font-size: 1.2em;
}
.box-options .body {
	text-align: justify;
	font-size: .95em;
}

.box-cabal {
	border-style: solid;
	border-width: 100px 15px 40px 15px;
	-moz-border-image: url(/img/box-cabal.png) 100 15 40 15 stretch stretch;
	-webkit-border-image: url(/img/box-cabal.png) 100 15 40 15 stretch stretch;
	-o-border-image: url(/img/box-cabal.png) 100 15 40 15 stretch stretch;
	border-image: url(/img/box-cabal.png) 100 15 40 15 stretch stretch;
	margin-bottom: 1.75em;
}
.box-cabal .content {
	background-color: #1d1d1d;
	border: 1px solid #1d1d1d;
	color: #8dc0e0;
	padding: 10px;
	font-weight: 300;
	position: relative;
	width: 100.5%;
	height: 100.5%;
	margin-top: -1px;
	margin-left: -1px;
}
.box-cabal .title {
	width: 100%;
	position: relative;
	margin-top: -73px;
	font-size: 1.2em;
	text-transform: uppercase;
	text-align: center;
}
.box-cabal .body {
	margin-top: 3.5em; 
	text-align: justify;
}
.box-cabal, .box-cabal:hover {
	text-decoration: none;
}



.box-message {
	border-style: solid;
	border-width: 20px 20px 20px 20px;
	-moz-border-image: url(/img/box-message.png) 20 20 20 20 stretch stretch;
	-webkit-border-image: url(/img/box-message.png) 20 20 20 20 stretch stretch;
	-o-border-image: url(/img/box-message.png) 20 20 20 20 stretch stretch;
	border-image: url(/img/box-message.png) 20 20 20 20 stretch stretch;
	margin-bottom: 1.75em;
}
.box-message .content {
	background-color: rgba(11,48,48,.95);
	padding: 0;
	font-weight: 300;
	position: relative;
	width: 100.5%;
	height: 101%;
	margin-top: -1px;
	margin-left: -1px;
}



.box-options .body .notice,
.box-cabal   .body .notice {
	margin-bottom: .3em;
}
.box-options .body .notice:last-child,
.box-cabal   .body .notice:last-child {
	margin-bottom: 0;
}
.box-options .body small, .box-options .body .date,
.box-cabal   .body small, .box-options .body .date {
	color: #378caa;
	font-weight: 400;
}
.box-options .body .date,
.box-cabal   .body .date {
	margin-right: .25em;
}








video { width: 100%; cursor: pointer; }
video::-webkit-media-controls { display: none; }
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}