body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
	height: 100%; 
	width: 100%;
}

a {
	color: #ff0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
}

#overlay {
	position: absolute;
	font-size: 16px;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: rgba(0,0,0,0.7);
}

#overlay button {
background: transparent;
border: 0;
border: 1px solid rgb(255, 255, 255);
border-radius: 4px;
color: #ffffff;
padding: 12px 18px;
text-transform: uppercase;
cursor: pointer;
}


#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}


#container {
position: relative;  
width: 100vw;
height: 100vh;
overflow: hidden;
}











	@keyframes animationFadeIn {
			/*transition: all 0.4s ease-out;*/
			0%   { opacity:0; }
			100%  { opacity:1;}
	}

	@keyframes animationFadeOut {
		/*transition: all 0.4s ease-out;*/
		0%   { opacity:1; }
		100%  { opacity:0;}
	}
	
	


	.flip-card-container {
		left: 36%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 15em;
		height: 26em;
		margin: 40px 0;
		perspective: 50em;
		position: absolute;
		cursor:pointer;
	}

	.flip-card {
		position: relative;
		width: 100%;
		height: 100%;
		transition: transform 1s;
		transform-style: preserve-3d;
		display:none;
	}
	.flip-card-container:hover .flip-card {
		transform: rotateY(180deg); /* <=>  rotateY(.5turn) */
	}
	/* Position the front and back side */
	.flip-card-front, .flip-card-back {
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden; /* Safari */
		backface-visibility: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		/* border-radius: 0.5rem; */
	}

	.flip-card-back {
		transform: rotateY(180deg);
	}
	
	.flip-card-front img {
		width: 100%;
		height: 100%;
		/* border-radius: 0.5rem; */
	}
	.flip-card-back img {
		width: 100%;
		height: 100%;
		/* border-radius: 0.5rem; */
	}

	.flip-card-back p {
		text-align: center;
		margin: 1rem;
		line-height: 1.5rem;
	}
	.flip-card-back p span {
		display: block;
		font-size: 1rem;
		font-style: italic;
		font-weight: bold;
		margin-top: 1.25rem;
	}





	
	
			/* card safari, ^ firefox


			
		position: absolute;
		width: 10em;
		height: 10em;
		cursor: pointer;
		transform-style: preserve-3d;
		transform-origin: center right;
		transition: transform 1s;
		display: none;
		zoom: 37%;
		-moz-transform: scale(0.3);
		margin-top: 14em;
		opacity: 1;
		*/
		/* margin-left: 8em; */


	/* .card {
		position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform 0.2s;
    zoom: 37%;
    -moz-transform: scale(0.3);
    margin-top: 6em;
    opacity: 1;
		margin-left: -5em;	
	}
	
	.scene {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 200px;
		height: 260px;
		margin: 40px 0;
		perspective: 50em;
		position: absolute;
	}

		
	.card__face {
		position: absolute;
		width: 100%;
		height: 100%;
		line-height: 260px;
		color: white;
		backface-visibility:hidden;
	}


	.card__face--front {
		backface-visibility: hidden;
		height: 13em;
		margin-top: -4.101em;
		margin-left: -1.6em;
	}
	
	.card__face--back {
		backface-visibility: hidden;
		height: 13.001em;
		margin-top: -4.102em;
		transform: rotateY(180deg);
		margin-left: -0.9em;
	}

	.card.is-flipped {
		-moz-transform: scale(0.3);
		transform: translateX(-90%) rotateY(-180deg)
	}
	*/
 


/*
.scene {
  width:10em;
  height:15em;
  perspective: 30em;
}

.card {
  width:100%;
  height:100%;
  position:relative;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.face {
  width:100%;
  height:100%;
  
  color:#FFF;
  line-height:15em;
  text-align:center;
  position:absolute;
  
  backface-visibility:hidden;
}

.front {
  background-color:#0379ff;
}

.back {
  background-color:#333;
  transform: rotateY(180deg);
}


.scene:hover .card {
  transform: rotateY(180deg);
}

*/

	
	#popup1{
		display: none;
		cursor: pointer;
		width: 12.8em;
		height: 8.8em;
		position: fixed;
		top: 50%;
		z-index: 9999;
		margin-top: 0;
		font-size: 0.9em;
		font-family: sans-serif;
		background-color: rgba(26, 31, 29, 0.82);
		left: 50%;
		padding: 2em;
		border-radius: 1em;
		color: white;
		-ms-transform: translateY(-50%);
		transform: translate(-50%, -50%);

		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		-khtml-user-select: none; /* Konqueror HTML */
		-moz-user-select: none; /* Old versions of Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
		user-select: none; /* Non-prefixed version, currently
		supported by Chrome, Edge, Opera and Firefox */
																	
	}
	


/*preloader 4may*/
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #000000;
z-index: 9999;
color: grey;
font-family:sans-serif;
font-size:0.7em;
text-align: center;
}	
.preloader-icon
{
position: relative;
width: 100%;
height: 100%;
/*animation: shake 7.5s infinite;*/
}	@keyframes shake
{
0% { transform: translate(1px, -1px) rotate(0deg);}
10% { transform: translate(1px, -3px) rotate(-1deg);}
20% { transform: translate(1px, -5px) rotate(-3deg);}
30% { transform: translate(1px, -7px) rotate(0deg);}
40% { transform: translate(1px, -9px) rotate(1deg);}
50% { transform: translate(1px, -11px) rotate(3deg);}
60% { transform: translate(1px, -9px) rotate(0deg);}
70% { transform: translate(1px, -7px) rotate(-1deg);}
80% { transform: translate(1px, -5px) rotate(-3deg);}
90% { transform: translate(1px, -3px) rotate(0deg);}
100% { transform: translate(1px, -1px) rotate(-1deg);}
}