*{
		margin: 0px;
		padding: 0px;
		font-family: 'Noto Sans', sans-serif;
	}
	
	body{
		overflow-x: hidden;
	}

	img { 
		display: inline-block; 
	}
	
	a:visited{
		color: #555;
		
	}
	
	#toolbar::-webkit-scrollbar{
		width: 18px;  /* for vertical scrollbars */
		height: 20px; /* for horizontal scrollbars */
	}

	#toolbar::-webkit-scrollbar-track{
		background: #9a1818;
	}

	#toolbar::-webkit-scrollbar-thumb{
		background: #d32f2f;
		border: 5px solid #9a1818;
		border-radius: 10px;
	}
	
	#toolbar::-webkit-scrollbar-corner{
		background: #3f4955;
	}

	#toolbar{
		width: 220px;
		background: #b71c1c;
		color: white;
		height: 100%;
		max-height: 100%;
		position: fixed;
		top:0px;
		left:0px;
		box-shadow: 0px -4px 10px 0px black;
		z-index: 10;
		unicode-bidi: bidi-override;
		direction: rtl;
		overflow-y: scroll;
	}
	
	#toolbar *{
		direction: ltr;
	}

	.toolbar_title{
		color: white;
		background: #b71c1c;
		padding: 20px;
		text-shadow: 1px 1px 7px black;
		cursor: pointer;
		border-bottom: 2px solid #d32f2f;
	}

	.toolbar_item{
		display: block;
		color: white ! important;
		text-decoration: none;
		padding: 20px;
		background: #d32f2f;
		transition: background 200ms;
		text-shadow: 1px 1px 7px black;
		cursor: pointer;
	}
	
	.toolbar_item[draggable="true"]{
		cursor: move;
		cursor: pointer;
	}
	
	.toolbar_item:hover{
		background: #e57373;
	}

	#toolbox{
		z-index: 10;
		position: absolute;
		background: rgb(20,180,248);
		display: none;
		height: 30px;
		border-radius: 2pt 2pt 0px 0px;
		color: white;
		line-height: 30px;
		vertical-align: top;
		overflow: hidden;
	}

	
	#toolbox > .tb_btn:hover{
		background: #AADDFF;
		cursor: pointer;
	}	
	
	#toolbox > .tb_btn[disabled="1"]{
		opacity: 0.2;
	}		
	
	.selected_element{
		outline: 6px solid rgb(20,180,248);
		z-index: 5 ! important;
	}	
	
	.sold_stamp{
		background-image: url('home_images/sold_stamp.png');
		background-repeat: no-repeat;
		background-position: top left;
		background-size: contain;
		top: 0px;
		position: absolute;
		width: 200px;		
		height: 200px;
	}
	/*
	#row_controls{
		z-index: 10;
		position: fixed;
		left: 220px;
		background: rgba(20,180,248,1);
		width: 30px;
		display: none;
	}

	#row_controls > img:hover{
		background: #AADDFF;
		cursor: pointer;
	}	

	#input_controls{
		z-index: 10;
		position: fixed;
		background: rgba(20,180,248,1);
		height: 30px;
		display: none;
	}

	#input_controls > img:hover{
		background: #AADDFF;
		cursor: pointer;
	}
	*/
	
	#edit_space{
		width: calc(100% - 280px);
		min-height: calc(100vh - 60px);
		margin: 30px;
		margin-left: 250px;
		box-shadow: 0px 1px 20px rgba(0,0,0,0.15), 0px 1px 10px rgba(0,0,0,0.3);
		overflow: visible;
		transition: all 300ms;
		background: #EEE;
	}

				
	#edit_space[type="1"]{
		width: 240px;;
	}

	/*
	#edit_space *:focus{
		outline: 6px solid rgba(20,180,248,0.4);
	}

	#edit_space *:focus::after{
		content: "<b>EAT</b>";
		position: absolute;
		left: 0px;
		bottom: -30px;
		line-height: 20px;
		font-size: 12px;
		padding: 5px;
		background: black;
		color: white;
	}
	*/
	.page_element{
		position: relative;
	}

	.drop_here{
		content: "DROP HERE";
		background: #ffcdd2 ! important;
	}

	.title{
		line-height: 80px;
		font-size: 34px;
		color: #333;
		text-shadow: 1px 1px 1px #AAA;
		/*box-shadow: 0px 8px 12px -10px black;*/
		border-bottom: 4px solid #c61818;
		padding-left: 20px;
		letter-spacing: 1.1pt;
		max-width: 50%;
		margin: 0px auto;
		margin-bottom: 20px;
	}

	#edit_space[type="1"] .title{
		font-size: 18px;
		line-height: 34px;
	}

	.paragraph{
		padding: 20px;
		color: #333;
		letter-spacing: 0.5px;
		line-height: 24px;
		font-size: 15px;
		max-width: 50%;
		margin: 0px auto;
		white-space: normal;
	}	
	
	.card  .paragraph{
		max-width: none;
	}
				
	.picture{
		display: block;
		text-align: center;
		width: 100%;
		max-width: 50%;
		margin: 0px auto;
		border-radius: 2pt;
		box-shadow: 0 3px 6px rgba(0,0,0,0.26), 0 1px 10px rgba(0,0,0,0.23);
	}

	.card .picture{
		box-shadow: none;
		border-radius: 2pt 2pt 0px 0px;
		border-bottom: 4px solid #c61818;
		max-width: none;
	}
			
	.card{
		display: block;
		position: relative;
		width: 50%;
		margin: 20px auto;
		padding:0px;
		border-radius: 3px;
		box-shadow: 0 3px 6px rgba(0,0,0,0.26), 0 1px 10px rgba(0,0,0,0.23);
		background: white;
		transition: opacity 0.3s;
		max-width: 800px;
		overflow: hidden;
		background: white;
	}
		
	#edit_space .card{
		overflow: visible;
	}

	.col2:first-child > .card{
		width: 90%;
		margin: 20px 10px 20px calc(10% - 10px);
	}
	
	.col2:last-child > .card{
		width: 90%;
		margin: 20px calc(10% - 10px) 20px 10px;
	}
		
	.col3 > .card{
		width: 100%;
		margin: 20px 0px;
	}

	.list{
		box-sizing: border-box;
		padding: 20px;
		color: #333;
		letter-spacing: 0.5px;
		line-height: 24px;
		font-size: 15px;
		max-width: 50%;
		margin: 0px auto;
		padding-left: 40px;
	}

	.card_title{
		padding: 30px 5px;
		text-align: center;
		background-color: #c62828;
		text-shadow: 1px 1px 5px black;
		font-size: 15pt;
		color: white;
	}			

	.card_text{
		padding: 20px;
	}
	
	.button{
		display: block;
		max-width: 340px ! important;
		margin: 16px auto;
		background: #c62828;
		border-radius: 2pt;
		padding: 24px;
		box-shadow: 0 3px 8px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
		transition: all 0.2s;
		transition-delay: 100ms;
		text-decoration: none;
		color: white ! important;
	}			
	
	.content_page .button:hover{
		transition-delay: 0s;
		background: #ff5f52;
		box-shadow: 0px 8px 27px rgba(0, 0, 0, 0.26), 0 8px 25px rgba(0,0,0,0.33);
		transform: scale(1.005);
	}
	
	.content_page .button:active{
		transition-delay: 0s;
		background: #8e0000;
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0,0,0,0.23);	
		transform: scale(0.995);				
	}	
	
	.content_page{
		box-sizing: border-box;
		padding: 30px 0px;
		width: 100%;	
		margin: 0px auto;
		min-height: calc(100vh - 220px);
		background: white;
	}
			
	.card_table{
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		display: table ! important;
	}
	
	.card_table tr{
		background: #EEE;
	}
	
	.card_table tr:nth-child(odd){
		background: #CCC;
	}
	
	#edit_space .card_table td{
		border: 2px solid #ddd;
	}
	.card_table td > img{
		margin: 0px 15px;
	}
	
	.card_table tr > td:nth-child(1){	text-align:right; font-weight: bold; }
	.card_table tr > td:nth-child(2){	text-align:center; }
	
	.card_table td{
		padding: 8px;
		color: #333;
		letter-spacing: 0.5px;
		line-height: 24px;
		font-size: 15px;
	}		
	
	.click_blocker{
		opacity: 0;
		transition: opacity 0.2s;
		background: rgba(0,0,0,0.4); 
		width: 100%; 
		height: 100%; 
		position: absolute;
		text-align: center;
		line-height: 400px;
		color: white;
		font-size: 30px;
		text-shadow: 0px 0px 100px black;
		z-index: 10;
	}
	
	.click_blocker:hover{
		cursor: pointer;
		opacity: 1;
	}
	
	.click_blocker + *{
		filter: grayscale(100%);
	}
	
	.row{
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		vertical-align: top;
		margin: 0px auto;
	}
	
	#edit_space .row{
		background: #DDD;
	}

	.column{
		display: inline-block;
		box-sizing: border-box;
		padding: 20px;
		color: #333;
		letter-spacing: 0.5px;
		line-height: 24px;
		font-size: 15px;
		height: 100%;
		vertical-align: top;
		min-width: 240px;
		
	}
	
	#edit_space .column{
		border: 1px solid #DDD;
		background: white;
	}	
	
	.vertical_join{
		padding: 0px;
		margin: 20px auto;
		max-width: 800px;
	}
	
	.vertical_join > *{
		margin: 0px;
		width: 100%;
		border-radius: 0px;
	}
	
	.vertical_join > .card{
		border-top: 2px solid #c61818;
		border-bottom: 2px solid #c61818;
	}
	
	.vertical_join .picture{
		border-radius: 0px;
	}
	
	.vertical_join > .card:first-child{
		border-radius: 2pt 2pt 0px 0px ! important;
		border-top: 0px;
	}	
	
	.vertical_join > .card:last-child{
		border-radius: 0px 0px 2pt 2pt ! important;
		border-bottom: 0px;
	}
	
	#edit_space .vertical_join{
		border: 2px solid #DDD;
		background: #EEE;
		padding-bottom: 30px;
	}

	.col1{width: 100%;}
	.col2{width: 50%;}
	.col3{width: 33.33%;}
	.col2:first-child, .col3:first-child{padding-left: 40px; padding-right: 0px;}
	.col2:last-child, .col3:last-child{padding-left: 0px; padding-right: 40px;}
	
	.parallax{
		display: block;
		position: relative;
		background-color: white;
		background-attachment: absolute;
		background-size: cover;
		background-repeat: no-repeat;
		background-position-x: center;
	}
				
	.image_box{
		width: 100%;
		height: 220px;
		z-index: -1;
	}
	
							
	.image_box > div{
		opacity: 0.4;
		background: #222;
		width: 100%;
		height: 100%;
	}
	
	#hover_text{
		position: fixed;
		z-index: 9;
		display: none;
		padding: 16px;
		color: white;
		background: black;
		border-radius: 2pt;
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0,0,0,0.23);	
		line-height: 18px;
		display: inline-block;
	}
	
	/*-------------------------------------------------------------------------------------------------------------------------------------------------------*/
			
	[unselectable="on"]{
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;	
	}		
	
	#nav_bar{
		color: white;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
		box-shadow: 0px 0px 12px -2px black;
		background: #c62828;
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		z-index: 1;
		overflow: hidden;
		transition: height 200ms;
	}
	
	#nav_bar:hover{
		height: 60px ! important;
	}
	
	#nav_bar > img{
		display: inline-block;
		height: 50px;
		vertical-align: top;
		margin: 5px;
		margin-left: 30px;
	}
	
	#nav_bar > .nav_btn{
		display: inline-block;
		line-height: 60px;
		font-size: 16px;
		padding: 0px 20px;
		transition: all 200ms;
		cursor: pointer;
		text-decoration: none;
		color: white;
	}
	
	#nav_bar > .nav_btn:hover{
		background: rgba(255,255,255,0.8);
		color: #c61818;
		text-shadow: none;
		text-decoration: none;
	}
	
	#nav_bar > .icon{
		position: fixed;
		color: white;
		top: 0px;
		right: 0px;
		z-index: 2;
		display: none;
		transition: all 200ms;
		cursor: pointer;
	}
	
	#nav_bar > .icon:hover{
		/*background: rgba(255,255,255,0.8);*/
		color: #c61818;
		text-shadow: none;
	}
	
	#loading{
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: #c62828;
		z-index: 100;
		background-image: url('home_images/logo_large.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
	
	#top_bar{
		height: 60px;
	}
	
	#hero_image{
		background-color: black;
		transition-delay: 200ms;
		transition: background-image 0.3s ease-in-out;
		height: calc(100vh - 60px);		
		max-height: calc(100vh);		
		width: 100%;
	}
	
	#hero_image[col="false"]{
		filter: grayscale(100%);
	}
	
	#hero_image[col="false"] > div{
		opacity: 0;
	}	
	
	#hero_image > .hero_description_container{
		position: absolute;
		box-sizing: border-box;
		opacity: 1;
		bottom: 14px;
		width: 50%;
		height: 60px;
		overflow: visible;
		text-align: center;
		margin: 0px 25%;
		transition: opacity 0.2s;
	}
	
	#hero_image .hero_description{
		
		height: auto;
		margin: 0px auto;
		width: 100%;
		position: absolute;
		bottom: 0px;
		left: 50%;
	}		
	
	#hero_image .hero_description_text{
		background: rgba(255,255,255,0.8);
		box-sizing: border-box;
		display: block;
		padding: 18px;
		margin: 0px auto;
		min-width: 50%;
		width: 100%;
		max-width: 800px;
		color: #333;
		font-size: 18px;
		border-radius: 2pt;
		box-shadow: 0 3px 6px rgba(0,0,0,0.26), 0 1px 10px rgba(0,0,0,0.23);
	
		font-size: 18px;
		border-radius: 2pt;
		position: relative;
		bottom: 0px;
		left: -50%;
	}

	
	#hero_button_container{
		display: inline-block;
		padding-top: 8px;
	}
	
	.hero_button{
		display: inline-block;
		width: 2%;
		min-width: 60px;
		height: 100%;
		cursor: pointer;
		position: absolute;
		bottom: 0px;
		transition: all 0.2s;
		transition-delay: 0.2s;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.hero_button.arrow_left{background-image: url('home_images/arrow_left.png'); left: 0px;}
	.hero_button.arrow_right{background-image: url('home_images/arrow_right.png'); right: 0px;}
				
	.hero_button:hover{
		transition-delay: 0s;
		background-color: rgba(255,255,255,0.1);
	}
	
	.hero_button:active{
		transition-delay: 0s;
		background-color: rgba(255,255,255,0.3);
	}

	.hero_button[state="1"]{
		background: white;
	}
	
	.sub_column > .page_element{
		max-width: none;
	}
	
	#file_viewer_container{
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 20;
		width: 100vw;
		height: 100vh;
		overflow:hidden;
		background: rgba(0,0,0,0.2);
		display: none;
	}
	#file_viewer{
		position: fixed;
		z-index: 20;
		width: 600px;
		height: 600px;
		top: calc(50vh - 300px);
		left: calc(50vw - 300px);
		box-shadow: 0px 1px 15px rgba(0,0,0,0.43);
		border-radius: 2pt;
		background: white;
		overflow: hidden;
	}
	
	#file_viewer > div:first-child{
		box-shadow: 0px 0px 15px rgba(0,0,0,0.43);
		background: #c61818;
		color: white;
		text-shadow: 1px 1px 6px black;
		padding: 20px;
		line-height: 30px;
	}
	#file_view{
		height: 530px;
		overflow-y: scroll;
	}
	
	#file_view > .file{
		height: 120px;
		padding: 8px;
		display: inline-block;
		transition-delay: 0.2s;
		transition: opacity 200ms;
		cursor: pointer;
	}
				
	#file_view > .file:hover{
		transition-delay: 0s;
		opacity: 0.6;
	}
	
	#file_view > .file:active{
		transition-delay: 0s;
		opacity: 0.3;
	}
	
	#file_view > .file > .img{
		padding: 10px;
		width: 80px;
		height: 80px;
		background-size: 80px;
		background-repeat: no-repeat;
		background-position: center;
	}
	#file_view > .file > p{
		width: 100px;
		font-size: 8pt;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	#file_context{
		position: absolute;
		display: none;
		z-index: 40;
		background: white;
		box-shadow: 0 3px 6px rgba(0,0,0,0.26), 0 1px 10px rgba(0,0,0,0.23);
	}
	
	#file_context > div{
		line-height: 25px;
		padding: 10px 20px;
		cursor: pointer;
	}	
	
	#file_context > div:hover{
		background: #5AF;
	}
	
	#upload_file{
		display: inline-block;
	}	
	
	/*-------------------------------------------------------------------------------------------------------------------------------------------------------*/
	
	@media screen and (max-width: 1200px) {
		.nav_btn{
			font-size: 14px ! important;
			padding: 0px 10px ! important;
		}
	}
	@media screen and (max-width: 1020px) {
		#nav_bar .nav_btn:not(:first-child) {
			display: none;
		}
		
		#nav_bar > .icon {
			float: right;
			display: block;
		}
		
		#nav_bar.responsive{
			height: auto ! important;
		}
		
		#nav_bar.responsive > .nav_btn{
			display: block;
			font-size: 15px ! important;
			padding: 0px 20px ! important;
		}
		
		.column{
			display: block;
			width: 100%;
			margin: 0px 0px;
			padding: 0px ! important;
		}
		
		.column > *{
			max-width: 90%;
		}
		
		.card{
			margin: 20px auto ! important;
			width: 90% ! important;
		}	
		
		.vertical_join{
			max-width: 100%;
		}
		
		.vertical_join .card{
			margin: 0px auto ! important;
		}
		
		.card *{
			max-width: none;
		}
		
		.content{
		}
		
		.content_column{
			width: 90%;
		}
		
		#hero_image{
			background-size: 110%;
			height: calc(100vw / 1.77);
		}
		
		#hero_image .hero_description_text{
			padding: 5px;
			opacity: 0.75;
		}
		
		#hero_image .hero_description_container{
			width: 90%;
			margin: 0px 5%;
		}
		
		.hero_button:hover{
			background-color: rgba(0,0,0,0);
			background-size: 100%;
		}
		
		h1{
			line-height: 50px;
			font-size: 25px;
		}
		
		p, td, li{
			line-height: 20px ! important;
			font-size: 13px ! important;
		}
		
		.parallax{
			background-size: auto 100vh;
		}
		
		#goto_system{
			display: none ! important;
		}
		
		#top_bar{
			height: 0px;
		}
		
	}