@font-face {
  font-family: 'Area-Light';
  src: url(assets/fonts/047a193e9d9a810d.eot);
  src: url(assets/fonts/93c343d5af7c9910.woff2) format('woff2'),
       url(assets/fonts/a9eddde059aa1dc4.woff) format('woff');
}

@font-face {
    font-family: 'Area-Bold';
    src: url(assets/fonts/45d588f95212a953.eot);
    src: url(assets/fonts/1c1a4565ee83d5e9.woff2) format('woff2'),
         url(assets/fonts/f03ec5754a7de31e.woff) format('woff');
  }
  

  @font-face {
    font-family: 'Area-LightItalic';
    src: url(assets/fonts/c611eb938de0b0ae.eot);
    src: url(assets/fonts/bc7448718be995ef.woff2) format('woff2'),
         url(assets/fonts/e87b9921d060b7d0.woff) format('woff2');
  }
  
/*
  font-family: 'Area-Light', Fallback, sans-serif;
  cursor: url('./static/cursor/c1.gif'), auto;
  

/* galaxy */
*
{
    margin: 0;
    padding: 0;
}

html,
body
{
    overflow: hidden;
}

.webgl
{
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}

/* FPS */
body {
	margin: 0;
	background-color: #000;
	color: #fff;
/*	font-family: Monospace;  */
	font-family: 'Area-Light', Fallback, sans-serif;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
}
/*
canvas {
    position: absolute;
    left: 0;
    top: 0;
}
*/
a, a:visited {
	color: #ff0;
	text-decoration: none;
    display: inline-block;
}

a:hover {
	text-decoration: underline;
}

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

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 0px;
	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: 5%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: rgb(255, 255, 255);
} 

	#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;
}

.loading-bar
{
    position: absolute;
    bottom: 5%;
    width: 100%;
    height: 2%;
    background: #ff4ec4;
    transform: scaleX(0.3);
    transform-origin: top left;
    transition: transform 0.5s;
	margin:auto;
}

.loading-bar.ended
{
    transform: scaleX(0);
    transform-origin: 100% 0;
    transition: transform 1.5s ease-in-out;
}

#bottom {
	position: absolute;
	bottom: 5px;
	left: 5px;
	color: greenyellow;
}


#right {
	padding: 0.3%;
	  position: fixed;
	  right: 5px;
	  top: 30%;
	margin: auto;
	transition: color .5s ease;
	text-transform: lowercase;
  /*  display: block; */
  }
#right input {
	display: block;
}

#exploringBox{
	position:absolute;
	bottom: 5px;
}
/*
#exploring {
	position:relative;
	bottom: 5px;
	right: 5px;

	margin: 0 auto;
	padding: 0.3%;

	text-align:center;
} 
*/
#exploring {
	position: absolute;
	top: 5px;
	right: 5px;
	color: greenyellow;
}


#exploring input {
	display: inline-block;
	margin: 0 auto;

}

#exploringBottom {
	position:absolute;
	bottom: 5px;

	margin: 0 auto;
	padding: 0.3%;

	text-align:center;
/*background-color: blueviolet;*/
} 
#exploringBottom input {
	display: inline-block;
	margin: 0 auto;

}


/* gltf info */
#title {
	color: black;
    border-radius: 25px;
  /*  border: 1px solid rgb(71, 71, 71);*/
	padding: 0.3%;
	position: absolute;
	left: 5px;
	top: 5px;
	/*background-color: white;*/

  }

  
  #title p {
	max-width: 350px;
  }
  
  #title .log {
	font-size: 12px;
	color: rgb(255, 255, 255)
  }

  #title .mode {
	font-size: 12px;
	color: rgb(255, 255, 255)
  }


  /* buble */ 
 /* .bublina:hover {
    opacity: 1;
}*/
#subtitle {
	position: absolute;
	right: 25px;
	top: 20px;

  }
  #center {
	position: absolute;
	top: 20px;
  }



/* /////////////////////////////////////////////////////////////  */
/* /////////////////////////////////////////////////////////////  */
/* /////////////////////////////////////////////////////////////  */
/* /////////////////////////////////////////////////////////////  */
.section
{  display: flex;
	align-items: center;
	height: 100vh;
	position: relative;
	font-family: 'Cabin', sans-serif;
	color: #ffeded;
  /*  text-transform: uppercase;*/
	font-size: 6vmin;
	padding-left: 1%;
	padding-right: 0%;
	width: 35%;
	/*  SIDE SECTION COLOR*/
	background-color: rgba(87, 210, 30, 0);
}

section:nth-child(odd)
{
	justify-content: flex-end;
}

    .bublina {
		background-color: rgba(255, 255, 255, 0.705);
		color: rgb(240, 240, 240);
		font-size: 1.2rem;
		font-weight: bolder;
		line-height: 1.35;
		margin-bottom: var(--spacing);
		margin-left: auto;
		margin-right: auto;
		margin: auto;
		
    /*  opacity: 1.0;  */
    /*  float: right;*/
      
      border-radius: 25px;
      width: 100%;

      border: 1px solid rgb(71, 71, 71);
     /* grid-column: 2/ 10; */
      padding: 1rem;
     /* background: var(--dark-bg);*/

	  
    }

    .bublina p {
      font-size: 1.0rem;
      text-transform: none;
      padding: 1.2rem;
     /* margin-bottom: var(--spacing);*/
     /* margin-top:  var(--spacing );*/
  
      margin-left: auto;
      margin-right: auto;
    }
	.bublina1 {
		display: flex;
		align-items: center;
		width: 50%;
		position: relative;
		
		font-weight: bolder;
		color: rgb(210, 231, 196);
		/*  opacity: 1.0;  */
		/*  float: right;*/
		  
		  border-radius: 25px;
		  
		  border: 0px solid rgb(71, 71, 71);
		 /* grid-column: 2/ 10; */
		  padding: 1rem;
		 /* background: var(--dark-bg);*/
		 background-color: rgba(255, 255, 255, 0);
		  font-size: 1.2rem;
		  line-height: 1.35;
		  margin-bottom: var(--spacing);
		  margin-left: auto;
		  margin-right: auto;
		  margin: auto;
		  
		}
	
		.bublina1 p {
		  font-size: 1.0rem;
		  text-transform: none;
		  padding: 1.2rem;
		 /* margin-bottom: var(--spacing);*/
		 /* margin-top:  var(--spacing );*/
	  
		  margin-left: auto;
		  margin-right: auto;
		}
	


/* /////////////////////////////////////////////////////////////  */
/* /////////////////////////////////////////////////////////////  */
/* /////////////////////////////////////////////////////////////  */
/* /////////////////////////////////////////////////////////////  */

	.info {
		/*  opacity: 1.0;  */

		  color: black;
		  border-radius: 25px;
		  width: 400px;
		  border: 1px solid rgb(71, 71, 71);
		 /* grid-column: 2/ 10; */
		  padding: 1rem;
		 /* background: var(--dark-bg);*/
		 background-color: rgb(255, 255, 255);
		  font-size: 1.2rem;
		  line-height: 1.35;
		  margin-bottom: var(--spacing);
		  margin-left: auto;
		  margin-right: auto;
		}
		.info p {
		  font-size: 1.0rem;
		  text-transform: none;
		  padding: 1.2rem;
		 /* margin-bottom: var(--spacing);*/
		 /* margin-top:  var(--spacing );*/
	  
		  margin-left: auto;
		  margin-right: auto;
		}



		/* MODAL */ 
		 /* The Modal (background) */
.modal {


	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(255, 255, 255); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.568); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
	font-size: large;
	line-height: 2em;
	color: black;
    border-radius: 25px;
    border: 1px solid rgb(71, 71, 71);
	

	background-color: #ffffff;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 40px;
	width: 80%; /* Could be more or less, depending on screen size */
} .modal-content h2 {
	padding-top: 1.2em;
}
  
  /* The Close Button */
  .close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
  }

  .close:hover,
  .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
  } 


  .yes {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
  }
  .yes a, a:visited {
	color: #aaa;
  }
  .yes:hover,
  .yes:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
  } 

  .goto {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
  }
  .goto a, a:visited {
	color: #aaa;
  }
  .goto:hover,
  .goto:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
  } 


  #designed {
	  text-align: right;
	  float:none;
	  font-size: small;
	  font-weight: 400;
	  color: #aaa;
	  width: 100%;
	  display: block;
	 /* background-color: #f00;*/
  }


  .links a,a:visited {
	

    }
	.links a:hover {
		background-color: rgb(255, 255, 255);
		text-decoration: none;
		border: 1px solid rgb(255, 255, 255);
		background-color: rgb(57, 170, 136);
	}
	.links:hover {
		background-color: rgb(57, 170, 136);
	}
	#techno a,a:visited {
	/*	float: right;*/
	font-size: 1.2rem;
	font-weight: bolder;
		color: rgb(255, 255, 255);
		border-radius: 25px;
	/*	width: 400px;*/
		border: 1px solid rgb(71, 71, 71);
	   /* grid-column: 2/ 10; */
		padding: 1rem;
	   /* background: var(--dark-bg);*/
	   background-color: rgba(255, 255, 255, 0);
		
		line-height: 1.0;
		margin-bottom: var(--spacing);
		margin-left: auto;
		margin-right: auto;
		margin: auto;
	}
	#techno a:hover {
		text-decoration: none;
		border: 1px solid rgb(255, 255, 255);
		background-color: rgba(57, 180, 94, 0.39);
	}

/*# sourceMappingURL=main.css.map*/