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

	/* FONT-DECLARATIONS */
	@font-face {
		font-family:nanofont;
		src:url(../Nouveau_IBM.ttf);
	}
	@font-face {
		font-family:worksans;
		src:url(..//fonts/work-sans/WorkSans-Medium.otf);
	}
	/*@font-face {
		font-family:roboto;
		src:url(../fonts/work-sans/Roboto-Light.ttf);
	}*/
	@font-face {
		font-family:tahoma;
		src:url(fonts/Tahoma.ttf);
	}
	@font-face {
		font-family:verdana;
		src:url(fonts/Verdana.ttf);
	}
	@font-face {
		font-family:optima;
		src:url(fonts/optima.ttf);
	}
  
    /* PAGE-SPECIFIC STYLES */
    body {
        font-family:optima;
		background-color:white;
    }
	
	a {
		text-decoration:none;
		color:blue;
	}
	
	a:visited {
		color:blue;
	}
	.hueshift {
		color:blue;
	}
	
	@keyframes flash {
	0% {
		filter: hue-rotate(0deg);
		-webkit-filter : hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
		-webkit-filter : hue-rotate(360deg);
	}}
	
	.hiddenAtLoad {
		opacity:0;
	}
	
	#blinds {
		position:fixed;
		top:0px;
		left:0px;
		width:100vw;
		height:100vh;
		margin-top:-20vh;
		margin-left:-20v2;
		padding-top:20vh;
		padding-bottom:20vh;
		padding-right:20vw;
		padding-left:20vw;
		background-color:#E9F3F7;
		opacity:0;
		z-index:999;
		background-image:url(img/backgrounds/Floor4_BackgroundMockUp_IMG_1723.png);
		background-size:cover;
		/*animation:flash 30s infinite alternate;*/
	}
	
    #logger {
		opacity:0.0;
        position:absolute;
        z-index:1000;
        bottom:20%;
        left:15vw;
		width:50vw;
		height:auto;
        color:black;
		padding:10vh;
		padding-right:10vw;
		padding-left:10vw;
		background-color:#E9F3F7;
		font-size:1vw;
    }
	
	#butterfly {
		cursor:pointer;
		position:absolute;
		top:22%;
        left:50%;
		z-index:1001;
		opacity:0;
	}
	#butterfly img {
		width:5vw;
		height:5vw;
		max-width:40px;
		max-height:40px;
	}
    
    /* FRAMES */
    #frame_container {
        position:fixed;
        height:102%;
        width:102%;
        top:-10px;
        left:-10px;
    }
    #level_1 { /* LEVEL K */
        position:fixed;
        opacity:0;
        display:none;
        height:500%;
        width:500%;
        left:-250%;
        top:-250%;
        border:5px pink;
        z-index:500;
    }
    #level_2 { /* LEVEL L */
        position:fixed;
        opacity:0;
        display:none;
        height:500%;
        width:500%;
        left:-250%;
        top:-250%;
        border:5px pink;
        z-index:500;
    }
    #level_3 { /* LEVEL M */
        position:fixed;
        opacity:0;
        display:none;
        height:500%;
        width:500%;
        left:-250%;
        top:-250%;
        border:5px pink;
        z-index:500;
    }
    #level_4 { /* LEVEL N */
        position:fixed;
        opacity:0;
		display:block;
        height:0%;
        width:0%;
        left:-10px;
        top:-10px;
        border:5px pink;
        z-index:500;
    }
    #level_5 { /* LEVEL O */
        position:fixed;
        opacity:0;
        display:none;
        height:500%;
        width:500%;
        left:-250%;
        top:-250%;
        border:5px pink;
        z-index:500;
    }
    
    /* ZOOM BUTTONS (MOVE IN FRAME-PAGES) */
    #buttonOUT {
        bottom:20%;
        left:5%;
        margin-left:0px;
        z-index:10;
        position:fixed;
        cursor:pointer;
    }
    #buttonIN {
        bottom:30%;
        left:5%;
        margin-left:0px;
        z-index:10;
        position:fixed;
        cursor:pointer;
    }
   
    /* LOGO */
    #top_logo {
        position:fixed;
        top:4vh;
		left:3vw;
        width:7vw;
        cursor:pointer;
    }
    #top_logo:hover {
       filter: hue-rotate(90deg);
	   -webkit-filter : hue-rotate(90deg);
    }
    
    /* MENUS */
	@media only screen and (max-width: 700px) and (min-width: 400px) {
    	#menu_links {
			margin-left:-8vw;
    	}
		#menu_box {
			min-height:40px;
		}
  	}
	#menu_box {
        position:fixed;
        top:5vh;
        left:0vw;
        width:100vw;
        height:10vh;
		min-height:60px;
        padding:0px;
    }
    #menu_box:hover {
    }
    #menu {
        position:fixed;
        z-index:500;
    }
    #menu_links {
        position:absolute;
        width:100vw;
		margin-left:-4vw;
		bottom:0px;
        list-style-type:none;
		color:black;
        text-align:center;
        font-size:1.3vw;
		cursor: pointer;
		font-family: 'Mansalva', cursive;
    }
    #menu_links li {
        display:inline-block;
		height:7vh;
		width:10vw;
        background-color:none;
        cursor:pointer;
		text-decoration:none;
    }
	#menu_links li:hover {
		color:#E9F3F7;
	}
	#menu_links li a {
		color:black;
		text-decoration:none;
    }
	#menu_links li a:hover {
		color:#E9F3F7;
		text-decoration:none;
    }
	#menu_links li img {
		height:7vh;
		min-height:30px;
		max-height:70px;
		padding-bottom:0.7vh;
	}
	#menu_links li img:hover {
		filter:grayscale(0%); !important
		-webkit-filter:grayscale(0%); !important
	}
    #menu_footer {
        position:absolute;
        bottom:2%;
    }
	#icon0 {
		filter:grayscale(100%);
		-webkit-filter:grayscale(100%);
	}
	#icon0:hover {
		filter:grayscale(0%);
		-webkit-filter:grayscale(0%);
	}
	#icon1 {
		filter:grayscale(100%);
		-webkit-filter:grayscale(100%);
	}
	#icon1:hover {
		filter:grayscale(0%);
		-webkit-filter:grayscale(0%);
	}
	#icon2 {
		filter:grayscale(100%);
		-webkit-filter:grayscale(100%);
	}
	#icon2:hover {
		filter:grayscale(0%);
		-webkit-filter:grayscale(0%);
	}
	#icon3 {
		filter:grayscale(100%);
		-webkit-filter:grayscale(100%);
	}
	#icon3:hover {
		filter:grayscale(0%);
		-webkit-filter:grayscale(0%);
	}
	#icon4 {
		filter:grayscale(100%);
		-webkit-filter:grayscale(100%);
	}
	#icon4:hover {
		filter:grayscale(0%);
		-webkit-filter:grayscale(0%);
	}
	#icon5 {
		filter:grayscale(100%);
		-webkit-filter:grayscale(100%);
	}
	#icon5:hover {
		filter:grayscale(0%);
		-webkit-filter:grayscale(0%);
	}