@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: rgb(255, 255, 255);
	text-decoration: none;
    display: inline-block;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}
.center {
	display: block;
  margin-left: auto;
  margin-right: auto;
  /*width: 50%*/
}

#infoLogo {
	margin-bottom: 4em;
	margin-top: 0em;
}
#infoLogo img {
	
	width: 60%;
}

#infoIkonky {
	margin-top: 4em;
	margin-bottom: 4em;
	
}
#infoIkonky img {
	width: 75%;
}

#infoAbout {
text-align: center;
font-family: 'Area-Light', Fallback, sans-serif;
font-weight: 90;
font-size: 1.6em;
}
#infoAbout h3 {
	margin-top: 1.5em;
	font-weight: 90;
	font-size: 1.60em;
}
#infoAbout a,a:visited {
	font-family: 'Area-Light', Fallback, sans-serif;

	color: rgb(143, 91, 128);
	text-decoration: none;
	font-weight: 95;
font-size: 1.1em;

}
#infoAbout a:hover {
	color:#ffcaf6
}

#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;
	/* background-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;

}

#sip {
	position: absolute;
  bottom: 10%;
  left: 48%;
/*  background-color: #4ecdff;*/
  vertical-align: bottom;
  align-items: center;
  display: inline-block;
  width: 50px;
  height: 50px;
}
#speedUp {
	/*
		display: flex;
		align-items: flex-end;
		margin: 0 auto;
		text-align: center;
*/

	display: inline-block;
	align-self: flex-start;
	margin: 0 auto;
	padding: 0;
	text-align: center;
/*	background-color: #ff4ec4;*/

/*
		position: relative;
		bottom: 0%;
		left: 48%;
*/
		
	/*	width: 100%;*/
		
	/*
		position: absolute;
		bottom: 8%;
		
	*/

	}

#welcome {
	font-family: 'Area-Light', Fallback, sans-serif;
	line-height: 2em;
	display: none;
	margin: 0 auto;
	position: absolute;
	top: 20%;
	width: 100%;
	text-align: center;

/*	font-weight: bold;*/
	font-size: 2.0em;

	color:#000;
	/*background-color: #f00;*/
}

#blink {
	font-family: 'Area-Light', Fallback, sans-serif;

	display: none;
	margin: 0 auto;
	position: absolute;
	bottom: 40%;
	width: 100%;
	text-align: center;

/*	font-weight: bold;*/
	font-size: 4.0em;

	color:rgb(255, 255, 255);
	
	animation-name: blinker;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
   }
   
   @keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
   }




/* 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: 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);*/
	 position:relative;
	 left: 70px;
	
    }

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

	#section0 {
		display: none;
	}
	#section1 {
		display: none;
	}
	#section2 {
		display: none;
	}
	#section3 {
		display: none;
	}
	#section4 {
		display: none;
	}
/* /////////////////////////////////////////////////////////////  */
/* /////////////////////////////////////////////////////////////  */
/* /////////////////////////////////////////////////////////////  */
/* /////////////////////////////////////////////////////////////  */

	.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 */
  }
  #infoModal {
	position: fixed;
}
  #introModal {
	  position: fixed;
  }
  
  /* 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;
	margin-top: 2%;
	width: 80%; /* Could be more or less, depending on screen size */
} .modal-content h2 {
	padding-top: 0.0em;
}
#portalExit a,a:visited {
	color: #aaa;
}
  #portalExit a:hover{
	color: black;
	text-decoration: none;
	cursor: pointer;
  }


  #portalModal a,a:visited {
	color: #aaa;
}
  #portalModal a:hover{
	color: black;
	text-decoration: none;
	cursor: pointer;
  }

  /* The Close Button */
  .close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
  }

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

  .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*/