@charset "UTF-8";
/* CSS Document */


    /* FONT-DECLARATIONS */
	@font-face {
		font-family:nanofont;
		src:url(levels/Nouveau_IBM.ttf);
	}
	@font-face {
		font-family:worksans;
		src:url(fonts/work-sans/WorkSans-Medium.otf);
	}
	/*@font-face {
		font-family:roboto;
		src:url(fonts/Roboto/Roboto-Regular.ttf);
	}*/
	@font-face {
		font-family:tahoma;
		src:url(fontss/Tahoma.ttf);
	}
	@font-face {
		font-family:verdana;
		src:url(fonts/Verdana.ttf);
	}
	@font-face {
		font-family:optima;
		src:url(fonts/optima.ttf);
	}

      
    /* INDEX-SPECIFIC STYLES */
    body {
		font-family: 'Crimson Text', serif;
    }
    ::selection  {
        background-color:#81DFDB;
    }
   .blockimg {
        position:absolute;
    }
	.label {
		font-size:1.0vw;
		font-style:italic;
		text-align:center;
    }
    #log {
        visibility:hidden;
    }
	
	/* CLASSES DEFINITION */
	a {
		font-weight:bold;
		text-decoration:none;
		color:blue;
	}
	a:hover {
	}
	a:visited {
	}
	
	p img {
	}
	
	p {
	}
	
	#logger {
		display:none;
	}
	
	#to_top {
	  opacity:0;
	  display:block;
	  position: fixed;
      bottom:3vh;
      right:2vw;
	  z-index: 99;
	  font-size: 1.3vw;
	  background-color:#003;
	  color:white;
	  cursor: pointer;
	  padding: 2vh;
  	}
  
	#to_top:hover {
	  background-color:#E9F3F7;
	  color: black;
	}
	
	/* FLOOR TITLE */
	.collapsible {
	  background-color: blue;
	  background:url(../../../landingpagematerials/main_background_slyall.jpg);
	  background-position: 0px 0px;
	  cursor: pointer;
	  padding: 15px 18px 15px 18px;
	  color: white;
	  text-align: left;
	}
	
    #bottomtitle {
		border: 0px solid;
  		border-image: linear-gradient(30deg, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  		border-image-slice: 1;
		border-radius:7px;
        position:absolute;
        background:linear-gradient(30deg, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
        color:white;
        padding-top:1vh;
		padding-bottom:1vh;
        right:20vw;
        top:5vh;
        width:20vw;
		min-width:100px;
        font-size:2vw;
        text-align:center;
        font-family:worksans;
		opacity:0.8;
        z-index:699;
		box-shadow:0px 0px 40px white;
    }
	
	/* BLOCKS/ROOMS */
    .contentbox {
        position:absolute;
        left:-100%;
        display:none;
        margin-left:-35vw;
        top:18vh;
        width:70vw;
        background-color:#E9F3F7 ;
		opacity:1;
		padding-bottom:7vh;
		border-radius:5px;
		/*box-shadow:0px 0px 40px white;*/
    }
	
	.titlebox  {
        font-size:1.5vw;
        color:white;
		font-family: 'Mansalva', cursive;
	  	background-color: blue;
	  	background:url(../../../landingpagematerials/main_background_slyall.jpg);
	  	background-position:-50px -40px;
		background-size:;
	  	cursor: pointer;
	  	margin:0 0 0 -0vw;
		padding:5vh 3vw;
		width:64vw;
	  	color: white;
	  	text-align:left;
		border-top-left-radius:5px;
		border-top-right-radius:5px;
    }
	
	.contents {
        position:absolute;
        color:black;
        text-align:justify;
        font-size:1.2vw;
		padding:2vh 3vw 7vh 3vw;
    }
	
	.contents img {
		box-shadow:#D9E0E5 10px 10px;
		cursor:pointer;
    }
	.videobox {
		width:45vw;
		margin-left:10vw;
		box-shadow:#D9E0E5 10px 10px;
		cursor:pointer;
	}
	
	.copyright {
		position:relative;
		top:100%;
		width:20vw;
		left:30vw;
		padding-bottom:5vh;
		background:none;
		opacity:0.2;
	
	}
	.copyright:hover {
		opacity:1;
	}
	.copyright::after {
		font-size:1.0vw;
		font-style:italic;
		text-align:center;
		content:"© 2019 - Nano-Verses Project";
	}
	
	#viewport {
		position:fixed;
		width:80vw;
		height:80vh;
		background-color:;
		left:10vw;
		top:10vh;
		z-index:;
	}
    
	/* ROLL BUTTONS */
	#buttonL {
		display:none;
        top:50vh;
        left:4vw;
        margin-left:0px;
        z-index:10;
        position:fixed;
        cursor:w-resize;
		
    }
    #buttonR {
        top:50vh;
        right:4vw;
        margin-left:0px;
        z-index:10;
        position:fixed;
        cursor:e-resize;
		
    }
     #rollL, #rollR, #zoomout_within, #zoomin_within {
		width:2.5vw;
        max-width:60px;
		z-index:10;
		background-color:#E9F3F7;
		padding:1vh 1vw;
		border-radius:10px;
		opacity:0.2;
    }
	
	#rollL:hover, #rollR:hover, #zoomout_within:hover, #zoomin_within:hover {
		opacity:1;
    }
	
	
	#buttonL, #buttonR, #buttonOUT, #buttonIN {
	}
	
	#buttonL:hover, #buttonR:hover, #buttonOUT:hover, #buttonIN:hover {
		
	}
	/*#rollL {
		content: url(../img/buttons/btn_left.png)
	}
	#rollL:hover {
		content: url(../img/buttons/btn_left_neg.png);
	}
	#rollR {
		content: url(../img/buttons/btn_right.png)
	}
	#rollR:hover {
		content: url(../img/buttons/btn_right_neg.png);
	}
	#zoomout_within {
		content: url(../img/buttons/btn_zoomout.png)
	}
	#zoomout_within:hover {
		content: url(../img/buttons/btn_zoomout_neg.png);
	}
	#zoomin_within {
		content: url(../img/buttons/btn_zoomin.png)
	}
	#zoomin_within:hover {
		content: url(../img/buttons/btn_zoomin_neg.png);
	}*/
	/* ZOOM BUTTONS */

    #buttonOUT {
		display:;
		position:fixed;
		left:4vw;
        margin-left:0px;
        top:45vh;
        z-index:10;
        cursor:pointer;
    }
    #buttonIN {
		display:;
		position:fixed;
		left:4vw;
        margin-left:0px;
        top:57vh;
        z-index:10;
        cursor:pointer;
    }
    
	
	/* REPORTER AND POPUP BOXES */
	#reporter {
        position:fixed;
        color:white;
        top:100px;
        left:100px;
    }
	.pop {
		color: blue;
	}
	.info {
		cursor:help;
	}
	#image {
		position:absolute;
	}
	#popup_left {
        position:fixed;
        background-color:black;
		background-image:url(../../../landingpagematerials/main_background_slyall.jpg);
        color:white;
		font-size:1vw;
        width:15vw;
        height:;
        bottom:3vh;
        left:3vw;
        padding:20px;
        display:none;
		z-index:999;
    }
	#popup_right {
        position:fixed;
        background-color:black;
		background-image:url(../../../landingpagematerials/main_background_slyall.jpg);
        color:white;
		font-size:1vw;
        width:15vw;
        height:;
        bottom:3vh;
        right:3vw;
        padding:20px;
        display:none;
		z-index:999;
    }
	
	/* NOT USED */
	/*	#leveltitle {
        background:black;
        font-size:200%;
        color:pink;
    }	*/
	/* #bottomtitlebox {
        position:absolute;
        left:50%;
        bottom:10%;
        width:200px;
        height:500px;
        background:yellow;
        font-size:12px;
        text-align:justify;
        font-family:Verdana, Geneva, sans-serif;
        z-index:299;
    } */
	
    /*	#youarehere {
        position:absolute;
        left:26%;
        bottom:4%;
        width:100px;
        height:100px;
        opacity:1;
        border-radius:50%;
        filter: blur(10px);
        background-color:white;
        
    }	*/
	
	/* SLIDESHOW STUFF */
	.mySlides {display: none}
	#slide1 {display:block}
	/*img {vertical-align: middle;}*/
  
  	/* Remove box-shadow from regular images definition */
	.slideshow-container img {	
		box-shadow:none;
	}
	
	/* Slideshow containers */
	#slideshow_1 {
		margin-left:0vw;
		margin-bottom:3vh;
		background-color:;
		cursor:pointer;
	}
	
	#slideshow_1 .prev, #slideshow_1 .next {
		top:35%;
	}
	
	#slideshow_1 img {
		width: 64vw;
	}
	
	#slideshow_2 {
		margin-left:0vw;
		margin-bottom:3vh;
		background-color:;
		cursor:pointer;
	}
	
	#slideshow_2 .prev, #slideshow_2 .next {
		top:45%;
	}
	
	#slideshow_2 img {
		width: 49vw;
		margin-left:7vw;
	}
	
	#slideshow_3 {
		margin-left:0vw;
		margin-bottom:3vh;
		background-color:;
		cursor:pointer;
	}
	
	#slideshow_3 .prev, #slideshow_3 .next {
		top:62%;
	}
	
	#slideshow_3 img {
		width: 64vw;
	}
  #slideshow_4 {
		margin-top:5vh;
		margin-bottom:3vh;
		background-color:;
		cursor:pointer;
	}
	
	#slideshow_4 .prev, #slideshow_4 .next {
		top:65%;
	}
	
	#slideshow_4 img {
		width: 64vw;
	}
	#slideshow_5 {
		margin-left:0vw;
		margin-bottom:3vh;
		background-color:;
		cursor:pointer;
	}
	
	#slideshow_5 .prev, #slideshow_5 .next {
		top:52%;
	}
	
	#slideshow_5 img {
		width: 64vw;
	}
	
	#slideshow_6 {
		margin-left:0vw;
		margin-bottom:3vh;
		background-color:;
		cursor:pointer;
	}
	
	#slideshow_6 .prev, #slideshow_6 .next {
		bottom:7%;
	}
	
	#slideshow_6 img {
		width: 64vw;
	}
	
	#slideshow_7 {
		margin-left:0vw;
		margin-bottom:3vh;
		background-color:;
		cursor:pointer;
	}
	
	#slideshow_7 .prev, #slideshow_7 .next {
		bottom:50%;
	}
	
	#slideshow_7 img {
		width: 64vw;
	}
  
	/* Next & previous buttons */
	/*.prev, .next {
	  cursor: pointer;
	  position:absolute;
	  width: 50%;
	  padding: 16px;
	  margin-top:-35%;
	  color: white;
	  z-index: 400;
	  font-weight: bold;
	  font-size: 18px;
	  transition: 0.6s ease;
	  border-radius: 0 3px 3px 0;*/
	  
	.prev {
		cursor: pointer;
		position: absolute;
		width: auto;
		color: blue;
		font-weight: bold;
		font-size: 5vw;
		user-select: none;
		left: 3vw;
		padding:2vh 5vh;
	}
  
	/* Position the "next button" to the right */
	.next {
		cursor: pointer;
		position: absolute;
		width: auto;
		color: blue;
		font-weight: bold;
		font-size: 5vw;
		user-select: none;
		right: 4vw;
		padding:2vh 5vh;
 	}
	
	.prev, .next {
		opacity:0.2;
  	}
  
  	/* On hover, add a black background color with a little bit see-through */
  	.prev:hover, .next:hover {
		color:white;
	  	background-color:#000;
		opacity:1;
  	}
  
  	/* Caption text */
  	.textslideshow {
    	color:black;
    	font-size: 1.2vw;
		text-align:center;
		height:6vh;
    	padding: 1vh 0vw 1vh 0vw;
    	bottom: 0%;
    	width: 65vw;
		z-index:300;
  	}
  
  	/* The dots/bullets/indicators */
  	.dot {
    	cursor: pointer;
		margin-bottom:44%;
    	height: 1vw;
    	width: 1vw;
    	margin: 0px 0.6vw;
    	background-color: #bbb;
    	z-index: 400;
    	border-radius: 50%;
    	display: inline-block;
    	transition: background-color 0.6s ease;
  	}
  
  	.active, .dot:hover {
    	background-color: blue;
  	}
  
  	/* Fading animation */
  	.fade {
    	-webkit-animation-name: fade;
    	-webkit-animation-duration: 0.5s;
    	animation-name: fade;
    	animation-duration: 0.5s;
  	}
  
  	@-webkit-keyframes fade {
    	from {opacity: 0} 
    	to {opacity: 1}
  	}
  
  	@keyframes fade {
    	from {opacity: 0} 
    	to {opacity: 1}
  	}
  
  	/* On smaller screens, decrease text size */
 	 @media only screen and (max-width: 300px) {
    	.prev, .next,.text {font-size: 11px}
  	}