html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	background-color: #000000;
	overflow: hidden;
	-webkit-user-select: none;
}

#status {
	margin: 0px;
	width: 600px;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, -50%);
}

#portraitImage {
	margin: 0px;
	width: 600px;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, -50%);
}

.textStatus {
	white-space: nowrap;
	font-size: 20px;
	color: #f50909;
	font-family: 'Montserrat:300', sans-serif;
	text-align: center;
}

.disabled {
	pointer-events: none;
	cursor: default;
}

canvas {
	position: absolute;
}

.preloader {
  /*transition: transform 1s;*/
}

.preloader:hover {
  /*transform: scale(20);*/
}

#fpsLabel {
	color: #FFFFFF;
	font-size: 35px;
	position: absolute;
	top:0px;
	right:10px;
}

#buttonContainer {
	position: absolute;
	top: 0px;
}

#dropCards {
	position: absolute;
	left:0px;
	width:200px;
	top:25%;
}

.closeButton {
	background:url(close.svg) no-repeat scroll center center / 40% auto rgba(0, 0, 255, 0);
	content: "";
    display: inline-block;
    height: 50px;
	top: -10px;
	width: 100px;
    margin-right: 1px;
    position: relative;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 20px;

    vertical-align: middle;

	cursor: pointer;
	filter: drop-shadow(1px 1px 0px #000000);
}

.closeButton:hover {
	background:url(closeOver.svg) no-repeat scroll center center / 50% auto rgba(0, 0, 255, 0);
}

.closeBigButton {
	background:url(close.svg) no-repeat scroll center center / 70% auto rgba(0, 255, 255, 0);
	content: "";
    display: inline-block;
    height: 30px;
	top: 0px;
	width: 30px;
    margin-right: 1px;
    position: relative;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 20px;

    vertical-align: middle;

	cursor: pointer;
	filter: drop-shadow(1px 1px 0px #000000);
}

.closeBigButton:hover {
	background:url(closeOver.svg) no-repeat scroll center center / 70% auto rgba(0, 255, 255, 0);
}

.subButton1 {
	width: 120px;
	height: 60px;
	margin: 3px 0px 0px 0px;
}

.eeButton {
	background: transparent;
	color: #FFFFFF;
	font-weight: 200;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
	text-decoration: none;
	white-space: nowrap;
	font-size: 16px;
	font-family: 'Montserrat:300', sans-serif;
	border: 0px;
	cursor: pointer;
	width: auto;
	/*height: 34px;*/
	/*line-height : 34px;*/
	text-align  : left;
	/*padding-left:10px;*/
	/*padding-right:10px;*/
}

.eeButton:hover {
	color: #f50909;
}

.subButton {
	background: transparent;
	color: #FFFFFF;
	font-weight: 300;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
	text-decoration: none;
	white-space: nowrap;
	font-size: 25px;
	font-family: 'Montserrat:300', sans-serif;
	border: 0px;
	cursor: pointer;
	width: auto;
	text-align  :left;
	margin-left: 5px;
	margin-right: 30px;
}

.navButton {
	background: transparent;
	color: #FFFFFF;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
	text-decoration: none;
	white-space: nowrap;
	font-size: 30px;
	font-family: 'Montserrat', sans-serif;
	border: 0px;
	cursor: pointer;
	width: auto;
	text-align  : center;
	pointer-events: auto;
	min-width:100px;
}

.navButtonSize25 {
	font-size: 25px;
}

.subButtonSize20 {
	font-size: 20px;
}

.navButton:focus {
	outline: none;
}
.navButton:checked:after {
	outline: none;
	color: #f50909;
}
.navButton:hover {
	outline: none;
	color: #f50909;
}

.navButton:active {
	color: #f50909;
}

.selected {
	color: #f50909!important;
	opacity: 1;
}

.disabledButton {
	color: #FFFFFF!important;
	opacity: .5;
	cursor: default;
	pointer-events: none;
}

.disabledSelectedButton {
	color: #f50909!important;
	opacity: .1;
	cursor: default;
	pointer-events: none;
}

.disabledButton:hover {
	pointer-events: none;
}

.enableButton {
	pointer-events: auto;
}

.svg {fill: #f50909 !important;}

.disabledButton1 {
	color: #f50909!important;
	opacity: .1;
	cursor: default;
}

.disabledButton1:hover {
	pointer-events: none;

}

.subJumpButton {
    background: transparent;
    color: #FFFFFF;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
    display: inline-block;
    font-size: 20px;
    font-family: 'Montserrat:300', sans-serif;
    padding-top: 0.64286em;
    padding-right:0.85714em;
    padding-bottom:0.53571em;
    /*padding-left:0.85714em;*/
    position: relative;
    /*width:133px;*/
    white-space: nowrap;
    cursor: pointer;
}
.subJumpButton:visited {
    color: #FFFFFF;
}
.subJumpButton:hover,
.subJumpButton:focus {
    background: transparent;
    /*box-shadow: 0 6px 0 #3E6C20, 0 6px 3px rgba(0, 0, 0, 0.4);*/
    color: #f50909!important;
}
.subJumpButton:active {
    /*box-shadow: 0 0 0 #3E6C20, 0 0 0 rgba(0, 0, 0, 0.4);
    top: 6px;*/
}
.subJumpButton:active:after {
    top: -6px;
}
.subJumpButton:before {
    background:url(jump.svg) no-repeat scroll center center / 100% auto rgba(255, 255, 255, 0);
    content: "";
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    width: 20px;
	filter: drop-shadow(1px 1px 0px #000000);
}
.subJumpButton:hover:before {
    background:url(jumpOver.svg) no-repeat scroll center center / 100% auto rgba(255, 0, 0, 0);
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}
.subJumpButton:after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.subSmileyButton {
	background: transparent;
    color: #FFFFFF;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
    display: inline-block;
	font-size: 20px;
    font-family: 'Montserrat:300', sans-serif;
    padding-top: 0.64286em;
	padding-right:0.85714em;
	padding-bottom:0.53571em;
	/*padding-left:0.85714em;*/
    position: relative;
	/*width:133px;*/
	white-space: nowrap;
	cursor: pointer;
}

.subSmileyButtonDisabled {
	filter: drop-shadow(1px 1px 0px #000000);
	cursor: default;
	pointer-events: none;
	color: #f50909!important;
}

.subSmileyButton.selected {
	opacity: 0.2!important;
	color: #FFFFFF!important;
}

.subSmileyButton:visited {
    color: #FFFFFF;
}
.subSmileyButton:hover,
.subSmileyButton:focus {
    background: transparent;
    /*box-shadow: 0 6px 0 #3E6C20, 0 6px 3px rgba(0, 0, 0, 0.4);*/
    color: #f50909!important;
}
.subSmileyButton:active {
    /*box-shadow: 0 0 0 #3E6C20, 0 0 0 rgba(0, 0, 0, 0.4);
    top: 6px;*/
}
.subSmileyButton:active:after {
    top: -6px;
}
.subSmileyButton:before {
    background:url(smiley.svg) no-repeat scroll center center / 100% auto rgba(255, 255, 255, 0);
    content: "";
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
    display: inline-block;
    height: 20px;
    margin-right: 0px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    width: 20px;
	filter: drop-shadow(1px 1px 0px #000000);
}
.subSmileyButton:hover:before {
	background:url(smileyOver.svg) no-repeat scroll center center / 100% auto rgba(255, 0, 0, 0);
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}
.subSmileyButton:after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.subFileButton {
	background: transparent;
    color: #FFFFFF;
	filter: drop-shadow(1px 1px 0px #000000);
    display: inline-block;
	font-size: 20px;
    font-family: 'Montserrat:300', sans-serif;
    padding-top: 0.64286em;
	padding-right:0.85714em;
	padding-bottom:0.53571em;
	/*padding-left:0.85714em;*/
    position: relative;
	/*width:133px;*/
	white-space: nowrap;
	cursor: pointer;
}
.subFileButton:visited {
    color: #FFFFFF;
}
.subFileButton:hover,
.subFileButton:focus {
    background: transparent;
    /*box-shadow: 0 6px 0 #3E6C20, 0 6px 3px rgba(0, 0, 0, 0.4);*/
    color: #f50909!important;
}
.subFileButton:active {
    /*box-shadow: 0 0 0 #3E6C20, 0 0 0 rgba(0, 0, 0, 0.4);
    top: 6px;*/
}
.subFileButton:active:after {
    top: -6px;
}
.subFileButton:before {
    background:url(file.svg) no-repeat scroll center center / 100% auto rgba(255, 255, 255, 0);
    content: "";
	filter: drop-shadow(1px 1px 0px #000000);
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    width: 20px;
}
.subFileButton:hover:before {
	background:url(fileOver.svg) no-repeat scroll center center / 100% auto rgba(255, 0, 0, 0);
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}
.subFileButton:after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.subButton:focus {
	outline: none;
}
.subButton:checked:after {
	outline: none;
	color: #f50909;
}
.subButton:hover {
	outline: none;
	color: #f50909;
}

.disabled {
	opacity: 0;
}

.enabled {
	opacity: 1;
	color: #f50909!important;
}


#buttons, #subButtons {
	position: absolute;
}

a {
	text-decoration: none;
}

.volume {
    background: transparent;
    color: #FFFFFF;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
    display: inline-block;
	font-size: 24px;
    font-family: 'Montserrat:300', sans-serif;
    padding: 0.64286em 0.85714em 0.53571em;
    position: relative;
}
.volume:visited {
    /*color: #FFFFFF;*/
}
.volume:hover {
	/*background: transparent;
	color: #f50909;*/
}
.volume:focus {
    /*background: transparent;*/
    /*box-shadow: 0 6px 0 #3E6C20, 0 6px 3px rgba(0, 0, 0, 0.4);*/
    /*color: #f50909;*/
}
.volume:active {
    /*box-shadow: 0 0 0 #3E6C20, 0 0 0 rgba(0, 0, 0, 0.4);
    top: 6px;*/
}
.volume:active:after {
    top: -6px;
}

.iconText {
	background: transparent;
	color: #FFFFFF;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
	display: inline-block;
	font-size: 24px;
	font-family: 'Montserrat:300', sans-serif;
	padding-left: 0px;
}

.iconText:hover {
	color: #f50909;
}

.iconTextSelected {
	background: transparent;
	color: #f50909;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
	display: inline-block;
	font-size: 24px;
	font-family: 'Montserrat:300', sans-serif;
}

.iconSmile {
  width: 28px;
  height: 28px;

  -webkit-mask: url('./smile.svg');
  mask: url('./smile.svg');
}

.iconFile {
	width: 28px;
	height: 28px;

	-webkit-mask: url('./fileOver.svg');
	mask: url('./fileOver.svg');
}

.iconJump {
  width: 28px;
  height: 28px;

  -webkit-mask: url('./jumpOver.svg');
  mask: url('./jumpOver.svg');
}

/*.volBtn:hover {
	color: #f50909!important;
}*/

.iconVolume {
	width: 40px;
	height: 40px;

	-webkit-mask: url('./volumeIcon.svg');
	mask: url('./volumeIcon.svg');
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

.icon-white { background-color: #FFFFFF; }
.icon-red { background-color: #f50909; }

.redText {
	color: #f50909;
}
.whiteText {
	color: #FFFFFF !important;
}
.volumeBlock {
	padding:1px 0px 0px 5px;
	display: inline-block;
	white-space: normal;
	vertical-align: middle;
	text-align:left;
}
.block {
	padding:1px;
	display: inline-block;
	white-space: normal;
	vertical-align: middle;
	text-align:center;
}

.filterBox {
	-webkit-filter: drop-shadow(1px 1px rgba(0,0,0,1));
	filter: drop-shadow(1px 1px rgba(0,0,0,1));
}

.wrapper {
	display: inline-block;
	white-space: nowrap;
	/*SD: Padding with increase / decrease hitArea of Nav buttons*/
	padding-top: 15px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 15px;
	cursor:pointer;
}

.icon {
	height: 20px;
	content: "";
	display: inline-block;
	height: 20px;
	margin-right: 10px;
	position: relative;
	top: -2px;
	vertical-align:sub;
	width: 30px;
	background:url(volume.svg) no-repeat scroll center center / 100% auto rgba(255, 255, 255, 0);
	filter: drop-shadow(1px 1px 0px #000000);
}

.icon:hover {
	background:url(volumeOver.svg) no-repeat scroll center center / 100% auto rgba(255, 255, 255, 0);
}

.iconSelected {
	height: 20px;
	content: "";
	display: inline-block;
	height: 20px;
	margin-right: 10px;
	position: relative;
	vertical-align:sub;
	top: -2px;
	width: 30px;
	background:url(volumeOver.svg) no-repeat scroll center center / 100% auto rgba(255, 255, 255, 0);
	filter: drop-shadow(1px 1px 0px #000000);
}

.volume:before {
    background:url(volume.svg) no-repeat scroll center center / 100% auto rgba(255, 255, 255, 0);
    content: "";
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    width: 30px;
}

/*.volume:hover:before {
	background:url(volumeOver.svg) no-repeat scroll center center / 100% auto rgba(255, 0, 0, 0);
}*/

.volumeSelected {
	/*content: "";
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    width: 30px;*/
	/*background:url(volumeOver.svg) no-repeat scroll center center / 100% auto rgba(255, 0, 0, 0)!important;*/

	/*color: #f50909!important;*/
}

.volumeUnSelected {
	color: #FFFFFF!important;
}

.volume:after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.contact {
    background: transparent;
    color: #FFFFFF;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
    display: inline-block;
	font-size: 24px;
    font-family: 'Montserrat:300', sans-serif;
    padding: 0.64286em 0.85714em 0.53571em;
    position: relative;
}
.contact:visited {
    color: #FFFFFF;
}
.contact:hover,
.contact:focus {
    /*box-shadow: 0 6px 0 #3E6C20, 0 6px 3px rgba(0, 0, 0, 0.4);*/
    color: #f50909!important;
}
.contact:active {
    /*box-shadow: 0 0 0 #3E6C20, 0 0 0 rgba(0, 0, 0, 0.4);
    top: 6px;*/
}
.contact:active:after {
    top: -6px;
}

.contact:before {
    background:url(contact.svg) no-repeat scroll center center / 100% auto;
    content: "";
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    width: 30px;
}

.contact:hover:before {
	background:url(contactOver.svg) no-repeat scroll center center / 100% auto;
}

.contact:after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/*Neon*/
	.welcome {
	  text-align: center;
	  font-size: 30px;
	  margin: 0px 0 0px 0;
		font-family: Montserrat;
	}
	p.welcome a {
		color: #fff;
		background: transparent;
		text-decoration: none;
		/*-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		transition: all 0.5s;
		-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
		-moz-animation: neon1 1.5s ease-in-out infinite alternate;
		animation: neon1 1.5s ease-in-out infinite alternate;*/
	}

	/*p.welcome a:hover {
	  color: #dd173f;
	  -webkit-animation: none;
	  -moz-animation: none;
	  animation: none;
	}*/

	/*glow for webkit*/

	@-webkit-keyframes neon1 {
	  from {
		text-shadow: 0 0 10px #dd173f, 0 0 20px #dd173f, 0 0 30px #dd173f, 0 0 40px #dd173f, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 100px #ff0000, 0 0 150px #ff0000;
	  }
	  to {
		text-shadow: 0 0 5px #dd173f, 0 0 10px #dd173f, 0 0 15px #dd173f, 0 0 20px #dd173f, 0 0 23px #ff0000, 0 0 20px #ff0000, 0 0 25px #ff0000, 0 0 37px #ff0000;
	  }
	}

	/*glow for mozilla*/

	@-moz-keyframes neon1 {
	  from {
	    text-shadow: 0 0 10px #dd173f, 0 0 20px #dd173f, 0 0 30px #dd173f, 0 0 40px #dd173f, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 100px #ff0000, 0 0 150px #ff0000;
	  }
	  to {
	    text-shadow: 0 0 5px #dd173f, 0 0 10px #dd173f, 0 0 15px #dd173f, 0 0 20px #dd173f, 0 0 23px #ff0000, 0 0 20px #ff0000, 0 0 25px #ff0000, 0 0 37px #ff0000;
	  }
	}

	/*glow*/

	@keyframes neon1 {
	  from {
	    text-shadow: 0 0 10px #dd173f, 0 0 20px #dd173f, 0 0 30px #dd173f, 0 0 40px #dd173f, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 100px #ff0000, 0 0 150px #ff0000;
	  }
	  to {
	    text-shadow: 0 0 5px #dd173f, 0 0 10px #dd173f, 0 0 15px #dd173f, 0 0 20px #dd173f, 0 0 23px #ff0000, 0 0 20px #ff0000, 0 0 25px #ff0000, 0 0 37px #ff0000;
	  }
	}