@import url(https://fonts.googleapis.com/css?family=Anton);
			      @import url(https://fonts.googleapis.com/css?family=Exo+2);
            /* Basic styles */
            *,
            *::before,
            *::after {
            box-sizing: border-box;
            }


            body {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            color: #000;
            background-color: var(--bg-color);
            z-index: 1001;
            }

            h1{
                font-size: 3em;
                font-weight: normal;
                color: rgb(243, 121, 7);
                font-family: 'Exo 2', sans-serif;
            }

            /* title styles */
            .home-title span{
                position: relative;
                overflow: hidden;
                display: block;
                line-height: 1.2;
            }

            .home-title span::after{
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                background: rgb(243, 7, 7);
                animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;
                transform: translateX(-101%);
            }

            .home-title span::before{
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                background: rgb(247, 225, 28);
                animation: a-ltr-before 2s cubic-bezier(.77,0,.18,1) forwards;
                transform: translateX(0);
            }

            .home-title span:nth-of-type(1)::before,
            .home-title span:nth-of-type(1)::after{
                animation-delay: 1s;
            }

            .home-title span:nth-of-type(2)::before,
            .home-title span:nth-of-type(2)::after{
                animation-delay: 1.5s;
            }

            @keyframes a-ltr-after{
                0% {transform: translateX(-100%)}
                100% {transform: translateX(101%)}
            }

            @keyframes a-ltr-before{
                0% {transform: translateX(0)}
                100% {transform: translateX(200%)}
            }

            .win-container{
                position:absolute;

            }
            .runRoyale-container
            {
                position: absolute;
                bottom: 10px;
                left: 20px;
                z-index: 1000;
            }

            .runRoyale
            {
                font-family: 'Anton', sans-serif;
                line-height: 1;

                letter-spacing: -.07em;

                color: #fff;
                z-index: 1000;
            }

            .royale
            {
                font-family: 'Anton', sans-serif;
                font-size: 45px;
                line-height: 1;

                margin-top: -11px;

                -webkit-transition: all .1s ease-in-out;
                        transition: all .1s cubic-bezier(.190, 1.000, .220, 1.000) 1s;
                -webkit-transform: translateX(-1000%);
                    -ms-transform: translateX(-1000%);
                        transform: translateX(-1000%);
                letter-spacing: -1px;
                text-transform: uppercase;

                color: #fc0;
                z-index: 1000;
            }

            .animate .royale
            {
                -webkit-transform: translateX(0);
                    -ms-transform: translateX(0);
                        transform: translateX(0);
                        z-index: 1000;
            }

            .run
            {
                font-family: 'Anton', Helvetica, sans-serif;
                font-size: 40px;

                text-transform: uppercase;

                opacity: 0;
                color: #fff;

                filter: alpha(opacity=0);
                z-index: 1000;
            }

            .animate .run
            {
                font-size: 60px;

                -webkit-transform: scale(1.5,1.5);
                    -ms-transform: scale(1.5,1.5);
                        transform: scale(1.5,1.5);

                opacity: 1;

                filter: alpha(opacity=100);
                z-index: 1000;
            }
			#mapid {position: absolute; top:0;bottom: 0; left: 0; right: 0;}
			#walk{
				position:absolute;
				top: 120px;
				right: 20px;
				width: 107;
				height: 107;
				z-index: 100001;
			}
			#btn {
				position: absolute;
				top: 20px;
				right: 20px;
				padding: 10px;
				z-index: 1001;
				width: 107;
				height: 98;
			}
			#btn2{
				position: absolute;
				bottom: 20px;
				padding: 10px;
				z-index: 1001;
				margin-left: -50px;
				left: 50%;
				border: 0;
				line-height: 2.5;
				padding: 0 20px;
				font-size: 1rem;
				text-align: center;
				color: #fff;
				text-shadow: 1px 1px 1px #000;
				border-radius: 10px;
				background-color: rgba(220, 0, 0, 1);
				background-image: linear-gradient(to top left,
										  rgba(0, 0, 0, .2),
										  rgba(0, 0, 0, .2) 30%,
										  rgba(0, 0, 0, 0));
				box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
							inset 2px 2px 3px rgba(0, 0, 0, .6);
			}
				#btn2:active {
					background-color: rgba(220, 0, 0, 1);
  					box-shadow: 0 5px #666;
 			 		transform: translateY(4px);
					}
                #btn3{
				position: absolute;
				bottom: 20px;
				padding: 10px;
				z-index: 1001;
				margin-left: -50px;
				left: 50%;
				border: 0;
				line-height: 2.5;
				padding: 0 20px;
				font-size: 1rem;
				text-align: center;
				color: #fff;
				text-shadow: 1px 1px 1px #000;
				border-radius: 10px;
				background-color: rgba(220, 0, 0, 1);
				background-image: linear-gradient(to top left,
										  rgba(0, 0, 0, .2),
										  rgba(0, 0, 0, .2) 30%,
										  rgba(0, 0, 0, 0));
				box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
							inset 2px 2px 3px rgba(0, 0, 0, .6);
			}
			#btn3:active {
					background-color: rgba(220, 0, 0, 1);
  					box-shadow: 0 5px #666;
		transform: translateY(4px);
					}
			#canvas{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				 display:block;
				 background-color: rgba(1, 3, 12, 0.4);
				z-index: 1000;
			}
            .main-content {
                overflow:hidden;
                position: relative;

                display: flex;
                align-items: center;
                justify-content: center;
                flex-flow: column;

                height: 100vh;
                left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
                color: #fff;
                text-align: center;
                visibility: hidden;
                z-index: 1001;
            }

            .titleCont{position:relative;}