*{
	border: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

html, body{
	overflow-x: hidden;
	height: 100%;
	width: 100%;
	background-color: #412a1a;
	font-family: "FrizQuadrataStd", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	line-height: 1.5;
}

p{
	margin-top: 0;
	margin-bottom: 1rem;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #FA0;
	border-radius: 12px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b37700;
}

.loader_1, .loader_2, .loader_3{
	background: url('../images/sprites.png') no-repeat;
}

.new_loader{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 1000;
	transition: opacity 1000ms;
	display: flex;
	justify-content: center;
	overflow: hidden;
	align-items: center;
	pointer-events: none;
}

.spinner{
	position: relative;
	background-image: url('../images/spinner.png');
	width: 694px;
	height: 694px;
	background-repeat: no-repeat;
	-webkit-animation: spinner 30s;
	animation: spinner 30s;
}

.spinner_text{
	position: absolute;
	bottom: 20px;
	text-align: center;
	font-size: 64px;
	color: #fff;
	font-family: Montserrat;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes spinner {
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); }
}

#new_bg{
	position: relative;
	background: url('../images/bg.png') no-repeat center center fixed;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
}

#new_navbar{
	position: absolute;
	top: 0;
	width: 100%;
	height: 80px;
	background-color: #0008;
}

.new_nav{
	float: left;
	width: 25%;
	height: 100%;
	background-color: #5555;
	transition: background-color 250ms;
}

.new_nav:hover{
	background-color: #0001;
}

.nav-active{
	background-color: #0001;
}

.new_nav_box{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.new_nav_icon{
	background-image: url('../images/nav_icon_gray.png');
	background-repeat: no-repeat;
	width: 59px;
	height: 44px;
	margin-right: 15px;
}

.new_nav_text{
	font-family: Montserrat;
	color: #fff;
	font-size: 24px;
	text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
}

.new_nav_box .text-active{
	color: #f8b415;
}

.new_nav_box .icon-active{
	background-image: url('../images/nav_icon.png');
}

#new_chat{
	position: fixed;
	bottom: 0;
	background-image: url('../images/dark_frame.png');
	width: 100%;
	height: 228px;
	background-repeat: no-repeat;
	background-size: cover;
	transition: opacity 250ms;
	opacity: 0;
	z-index: 1000;
}

@keyframes slide-in {
    from { left: -25px; opacity: 0; }
    to { left: 0px; opacity: 1; }
}

.new_info{
	position: relative;
	float: right;
	clear: both;
	top: 100px;
	right: 20px;
	width: 500px;
	background-color: #0005;
	border-radius: 12px;
	box-shadow: 0px 0px 5px #000;
	padding: 20px;
	min-height: 80px;
	margin-bottom: 10px;
}

.new_info h1{
	text-align: center;
    color: #fff;
	font-size: 24px;
	margin-bottom: 20px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.new_info p{
    color: #fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.new_info a{
	color: #f8b415;
}

#thief_image{
	position: absolute;
	right: 0;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
	opacity: 0.1;
	height: 100%;
	pointer-events: none;
}

.icon-bar {
    width: 90px;
    position: absolute;
    top: 50px;
    background-color: #555;
    animation: slideRight 0.5s ease-in-out;
    animation-fill-mode: forwards;
    opacity: 0;
    z-index: 50;
    margin-left: -25px;
}

.icon-bar a {
    width: 90px;
    display: block;
    text-align: center;
    padding: 12px;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
    margin-left: 12px;
}

.icon-bar, .icon-bar .active, .icon-bar a{
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}

.icon-bar i{
	text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

.icon-bar a:hover {
    background-color: #1c1c1c;
}

.icon-hover a:hover{
    background-color: #888;
}

.active {
    background-color: #ff8319;
}

footer p{
	position: fixed;
	left: 10px;
	bottom: -8px;
	color: #1c1c1c;
	font-weight: bold;
}

/* Create a column layout with Flexbox */
.row2{
	display: flex;
	margin-left: 0px;
	margin-right: 0px;
}

/* Left column (menu) */
.left {
    position: absolute;
    width: 265px;
    height: 622px;
    overflow-x: hidden;
    right: 18px;
    top: 43px;
    background-color: #fef1ad;
	border-radius: 4px;
    padding-top: 45px;
}

.left h2 {
	padding-left: 8px;
}

/* Right column (page content) */
.right {
    position: relative;
    width: 828px;
    height: 791px;
    overflow: hidden;
    transform: scale(0.8);
    top: -41px;
}

/* Style the search box */
#mySearch {
    display: block;
    margin-left: auto;
    margin-right: auto;
	width: 248px;
	height: 30px;
	font-size: 18px;
	padding: 11px;
	border:1px solid #ddd;
	color: #1c1c1c;
	border-radius: 12px;
	margin-bottom: 10px;
	position: absolute;
	right: 4px;
	top: 10px;
}

#mySearch:focus {
	outline: none;
	box-shadow: 0px 0px 2px #ff8319;
}

#searchBox{
	position: absolute;
    right: 28px;
    top: 43px;
    width: 255px;
    height: 49px;
    background-color: #fef1ad;
    z-index: 100;
    box-shadow: 0px 1px 2px -2px #000;
}

/* Style the navigation menu inside the left column */
#myMenu {
	list-style-type: none;
	padding: 0;
	margin: 0;
	padding-top: 5px;
}

#myMenu li a {
	background-color: #fef1ad;
	padding: 12px;
	text-decoration: none;
	font-size: 18px;
	color: #1c1c1c;
	display: block;
	box-shadow: 0px 0px 1px #000;
}

#myMenu li a:hover {
	background-color: #ff8319;
}

#myMenu .active{
	background-color: #ff8319;
}

#search{
	text-align: center;
	color: #1c1c1c;
}

#map{
	position: absolute;
	top: -1px;
	visibility: hidden;
}

#menu_list{
	position: absolute;
	top: 50px;
	left: 50px;
	width: 122px;
	display: none;
	z-index: 100;
}

#menu_list li{
	color: #1c1c1c;
}

#menu_list li:hover{
	background-color: #ff8319;
	cursor: pointer;
}

.list-group-item {
	padding: 2px !important;
	position: relative;
    display: block;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
}

.list-group-item:first-child {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

#blocker{
	display: none;
	z-index: 1000;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000C;
}

#blocker_image{
	margin-top: 50px;
	height: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#dark_mode{
	position: absolute;
	top: 0;
	right: 0;
	border-bottom-left-radius: 8px;
	width: 120px;
	height: 40px;
	background-color: #ff8319;
	animation: slideDown 0.5s ease-in-out;
	animation-fill-mode: forwards;
	opacity: 0;
}

#dark_mode p{
	position: relative;
	top: 8px;
	left: 5px;
	font-size: 14px;
	color: #1c1c1c;
}

#switch{
	z-index: 50;
	position: absolute;
    right: 6px;
    top: 7px;
    font-size: 24px;
	cursor: pointer;
}

#home{
	padding-top: 50px;
	text-align: center;
	pointer-events: none;
	background-color: #000;
}

#home h1{
	margin-bottom: 50px;
}

#home h4{
	margin-bottom: 25px;
}

.tGreen{
	color: #00d100;
	text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

.tRed{
	color: #ff8080;
	text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

.tYellow{
	color: #FF0;
	text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

h1, h4, p, a, button, strong, input, li, #snackbar{
	color: #1c1c1c;
	font-family: 'Montserrat';
}

#sideText{
    position: absolute;
    left: 100px;
    top: 64px;
    font-size: 24px;
    font-weight: bold;
    line-height: 2.5;
	opacity: 0;
	animation: fadeIn 0.5s ease-in-out 0.2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

#sideText p{
	color: #fff;
	text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000;
}

.star, .object{
	animation: wave 2s ease-in-out infinite;
}

.star:hover{
	cursor: pointer;
}

/* The animation code */
@keyframes wave{
    0%  { transform: rotate(-6deg); }
    50%  { transform: rotate(6deg); }
    100%  { transform: rotate(-6deg); }
}

/* ----- Snackbar --- */

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    left: 50%; /* Center the snackbar */
    z-index: 1; /* Add a z-index if needed */
    bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

.alert{
	color: #1c1c1c;
	display: none;
	text-align: center;
	position: fixed;
	bottom: 10px;
	right: 25px;
	z-index: 5000;
	background-image: url(../images/message.png);
    background-repeat: no-repeat;
    width: 439px;
    height: 183px;
}

.alert-dismissible .close{
	padding: .75rem 1rem;
}

.alertTxt{
	position: relative;
	left: 20px;
}

#topBar{
    margin-bottom: 25px;
}

#statusList{
	background-image: url(../images/list.png);
    background-repeat: no-repeat;
	width: 739px;
	height: 357px;
	margin-left: auto;
	margin-right: auto;
}

#statusListTop{
	position: relative;
	top: 25px;
}

#statusListBottom {
    position: relative;
    top: 56px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 25% 25%;
    grid-row-gap: 15px;
}

.bgimg2 {
    background-image: url('../images/landing/bg_rudi.jpg');
    height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
	z-index: -10;
	overflow: hidden;
	animation: fade 4s ease-in-out infinite alternate;
}

.bgimg3{
    background-image: url('../images/landing/bg_rudi_2.png');
    height: 100%;
	width: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
	z-index: -1;
	animation: upDown 4s ease-in-out infinite alternate;
}

.bgimg4{
    background-image: url('../images/landing/bg_rudi_3.png');
    height: 100%;
	width: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
	z-index: -1;
	left: -10px;
	animation: leftRight 4.5s ease-in-out infinite alternate 1s;
}

.meteor, .meteor2{
    position: absolute;
    top: -500px;
    right: -500px;
    background: url(../images/landing/stone2.png);
    z-index: 50;
    width: 99px;
    height: 91px;
	animation: falling 5s ease-in-out infinite;
	opacity: 0.25;
}

.meteor2{
	animation: falling2 5s ease-in-out infinite 2s;
}

.stars1{
    background-image: url(../images/landing/stars.png);
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
    z-index: -1;
    animation: blink 1s ease-in-out infinite alternate;
	opacity: 0;
}

.lights1{
    background-image: url(../images/landing/lights.png);
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
    z-index: -1;
    animation: lightFade 0.25s ease-in-out infinite alternate;
	opacity: 0;
}

@keyframes fadeIn{
    0%  { left: 90px; opacity: 0; }
    100%  { left: 100px; opacity: 1; }
}

@keyframes slideDown{
    0%  { top: -40px; }
    100%  { top: 0px; opacity: 1; }
}

@keyframes slideRight{
    0%  { left: -100px; }
    100%  { left: 0px; opacity: 1; }
}

@keyframes upDown{
    0%  { top: -10px; }
    100%  { top: 10px; transform: rotate(-3deg); }
}

@keyframes leftRight{
    0%  { left: -10px; }
    100%  { left: 10px; transform: rotate(0.5deg); }
}

@keyframes falling{
    0%  { right: 200px; top: -1500px; }
    100%  { right: 3000px; top: 2000px; }
}

@keyframes falling2{
    0%  { right: -500px; top: -500px; }
    100%  { right: 2000px; top: 2000px; }
}

@keyframes fade{
    0%  { opacity: 1; }
    70%  { opacity: 1; }
    75%  { opacity: .98; }
    80%  { opacity: 1; }
    100%  { opacity: 1; }
}

@keyframes blink{
    0%  { opacity: 0; }
    100%  { opacity: 1; }
}

@keyframes lightFade{
    0%  { opacity: 0; }
    100%  { opacity: 1; }
}

/* ----- Coming Soon ----- */

.bgimg {
    background-image: url('../images/landing/cd_bg.jpg');
    height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
    background-color: #000;
    font-size: 25px;
	z-index: -1;
	overflow: hidden;
	animation: fade 4s ease-in-out infinite alternate;
}

.bgimgShoulder{
    background-image: url('../images/landing/cd_bg_1.png');
	width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
	z-index: -1;
	top: 0px;
	animation: shoulderMovement 2s ease-in-out infinite alternate;
}

.bgimgEyes{
    background-image: url('../images/landing/cd_bg_2.png');
	width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
	z-index: -1;
	top: 0px;
	animation: lightFade 1.5s ease-in-out infinite alternate;
}

.bgimgEyes2{
    background-image: url('../images/landing/cd_bg_3.png');
	width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
	z-index: -1;
	top: 0px;
	animation: eyeMovement 1s ease-in-out infinite alternate;
}

.bgimgMouth{
    background-image: url('../images/landing/cd_bg_4.png');
	width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
	z-index: -1;
	top: 0px;
	animation: mouthMovement 3s ease-in-out infinite alternate;
}

.bgimgHair{
    background-image: url('../images/landing/cd_bg_5.png');
	width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
	z-index: -1;
	top: 0px;
	animation: hairMovement 3s ease-in-out infinite alternate;
}

.bgimgHairGlow{
    background-image: url('../images/landing/cd_bg_7.png');
	width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
	z-index: -1;
	top: 0px;
	animation: hairGlowing 2s ease-in-out infinite alternate;
}

.bgimgSplash{
    background-image: url('../images/landing/cd_bg_6.png');
	width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
	z-index: -1;
	top: 0px;
	animation: splashMovement 0.4s linear infinite alternate;
}

@keyframes eyeMovement{
    0%  { left: -1px; top: -1px; }
    100%  { left: 0.5px; top: 1px; }
}

@keyframes shoulderMovement{
    100%  { top: 10px; }
}

@keyframes mouthMovement{
    100%  {  left: -0px; transform: scaleX(1.3); }
}

@keyframes hairMovement{
    0%  {  top: 0px; left: 00px; transform: rotate(0deg); }
    100%  {  top: 10px; left: -120px; transform: rotate(15deg); }
}

@keyframes splashMovement{
    0%  {  opacity: 0; transform: rotate(-1deg) scale(1.075);  }
    50%  {  opacity: 1; }
    100%  {  opacity: 0; transform: rotate(1deg) scale(1.1); }
}

@keyframes hairGlowing{
    0%  {  opacity: 0; }
    100%  {  opacity: 1; }
}

.middle {
    position: absolute;
    top: 7%;
    left: -48%;
    text-align: center;
    width: 972px;
}

.middle h1, .middle p{
	font-family: 'Montserrat';
	font-size: 42px;
	color: #d8d8d8;
	text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000;
}

.middle h3{
	color: #d8d8d8;
	text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000;
}

hr {
    margin: auto;
    width: 40%;
	background-color: #FFF;
	box-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000;
	height: 1px;
}

#timeHolder, #timeHolder2{
	display: flex;
	transform: scale(0.32);
	position: relative;
	top: -55px;
	margin-bottom: -60px;
	float: left;
}

.numDots{
	width: 136px;
	height: 179px;
    background: url('../images/numbers.png') -136px 179px;
	margin-left: -15px;
    margin-right: -15px;
}

.numDots, .num0, .num1, .num2, .num3, .num4, .num5, .num6, .num7, .num8, .num8, .num9{
	position: relative;
	right: 660px;
}

.num0{
	width: 136px;
	height: 179px;
    background: url('../images/numbers.png') 0px 179px;
}

.num1{
	width: 136px;
	height: 179px;
    background: url('../images/numbers.png') 136px 358px;
}

.num2{
	width: 136px;
	height: 179px;
    background: url('../images/numbers.png') 408px 358px;
}

.num3{
	width: 136px;
	height: 179px;
    background: url('../images/numbers.png') 0px 358px;
}

.num4{
	width: 136px;
	height: 179px;
    background: url('../images/numbers.png') 136px 0px;
}

.num5{
	width: 136px;
	height: 179px;
    background: url('../images/numbers.png') 544px 358px;
}

.num6{
	width: 136px;
	height: 179px;
    background: url('../images/numbers.png') 272px 358px;
}

.num7{
	width: 136px;
	height: 179px;
    background: url('../images/numbers.png') -136px 358px;
}

.num8{
	width: 136px;
	height: 179px;
    background: url('../images/numbers.png') 272px 0px;
}

.num9{
	width: 136px;
	height: 179px;
    background: url('../images/numbers.png') -272px 358px;
}

.shine{
	-webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.5) 50%, #000 50%, rgba(0,0,0,.5) 70%);
	-webkit-mask-size: 200%;
	animation: shine 4s infinite linear;
}

@keyframes shine {
	from { -webkit-mask-position: 200%; }
	to { -webkit-mask-position: -100%; }
}

/* ----- Loader ----- */
.loader{
	background-position: -83px 0;
	position: absolute;
    left: 45%;
    top: 45%;
    width: 78px;
    height: 89px;
    z-index: 150;
    transform: scale(1.5);
	display: none;
}

.loader_3{
	background-position: -167px 0;
	position: relative;
	width: 78px;
	height: 89px;
	z-index: 100;
}

.loader_2 {
	background-position: 0 0;
	position: absolute;
	z-index: 5;
	width: 78px;
	height: 89px;
	animation: spin 2s linear infinite;
	clip-path: circle(34px at center);
	z-index: 99;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ----- Slider ----- */
.slidecontainer {
	position: absolute;
	width: 100%;
	z-index: 10;
}

.slider {
	-webkit-appearance: none;
	appearance: none;
	width: 200px;
	height: 12px;
	background: #d3d3d3;
	outline: none;
	opacity: 0.5;
	-webkit-transition: .2s;
	transition: opacity .2s;
	border-radius: 24px;
	position: absolute;
	left: 35px;
	top: 684px;
}

.slider:hover {
	opacity: 1;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	background: #ff8319;
	cursor: pointer;
	border-radius: 50%;
}

.slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: #ff8319;
	cursor: pointer;
	border-radius: 50%;
}