@charset "UTF-8";
/** @author ivanmoreno https://github.com/boyaquito **/

:root {
	--title-text-color: #707070;
	--color-0: #60a7bd;
	--color-1: #a1602b;
	--color-2: #3b5278;
	--text-color: #ffffff;
    /* --main-bg-color: #1a2f3e; */
	/* --main-bg-color: #c6b458; */
	/* --main-bg-color: #7eaf8f; */
	/* --main-bg-color: #b87fb9; */
	--main-bg-color: #c26561;
}

html, body {
	margin: 0;
	overflow: hidden;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	touch-action: none;
	-ms-touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: fixed;
    background-color: var(--main-bg-color);
	/* background: #3E1E68;
	background-image: linear-gradient( to bottom right, #3A6073, #16222A ); */
	/* font-family: 'Abel', sans-serif; */
}

#wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0px;
	left: 0px;
	background-color: var(--main-bg-color);
}

#viewport3d {

	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;

}

#progressBG {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 15;
	opacity: 0.0;
	background-color: var(--main-bg-color);
}

#progress {
	position: relative;
	z-index: 16;
}

#progress img {
	position: absolute;
	z-index: 17;
}

/* .loading {
	position: fixed;
	z-index: 28;
	top: 50%;
	left: 50%;
	-webkit-transform: translate( -50%, -50% );
	-moz-transform: translate( -50%, -50% );
	-ms-transform: translate( -50%, -50% );
	-o-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
	opacity: 1.0;
} */
/*ddd,111*/

.loading {
    position: fixed;
    width: 180px;
    height: 28px;
    --c:#111 93%,#0000;
    background: 
      radial-gradient(circle closest-side,var(--c)) calc(100%/-4) 0,
      radial-gradient(circle closest-side,var(--c)) calc(100%/4)  0;
    background-size:calc(100%/2) 100%;
    animation: l14 1.5s infinite;
    top: 50%;
	left: 50%;
	-webkit-transform: translate( -50%, -50% );
	-moz-transform: translate( -50%, -50% );
	-ms-transform: translate( -50%, -50% );
	-o-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
  }
  @keyframes l14 {
      0%   {background-position: calc(100%/-4) 0    ,calc(100%/4) 0}
      50%  {background-position: calc(100%/-4) -28px,calc(100%/4) 28px}
      100% {background-position: calc(100%/4)  -28px,calc(3*100%/4) 28px}
  }