@charset "utf-8";
/* CSS Document by eckblick © 2019 */

html 		{ position:relative; background-color: rgba(255,255,255,1.00);  }

body 		{ overflow-y: scroll; -webkit-overflow-scrolling: touch; }


nav#sidebar, main 	{ display:block; box-sizing:border-box; position:absolute; top:0px !important; }
nav#sidebar 		{ width:67%; z-index:50; position:fixed; min-height:100vh; } nav > div:first-child { z-index:100; }



main 		{ width:100%; z-index:1; }


nav#sidebar,
nav#sidebar ul li { background-color: rgba(222,222,222,1.00); }


nav#sidebar > div:first-child { background-color:rgba(0,0,0,0.0); }
nav#sidebar {  -webkit-box-shadow: 1px 0 2px 0 rgba(0,0,0,0.0); box-shadow: 1px 0 2px 0 rgba(0,0,0,0.0); }

nav#sidebar { max-height: 100vh; max-width:690px; min-width:320px; left:-700px; opacity:1; -webkit-overflow-scrolling: touch; }
nav#sidebar, nav#sidebar > div:first-child, nav#sidebar > div:first-child:before, nav#sidebar > div:first-child:after { -webkit-transition: all 333ms ease-in-out; -moz-transition: all 333ms ease-in-out; -ms-transition: all 333ms ease-in-out; -o-transition: all 333ms ease-in-out; transition: all 333ms ease-in-out; }

nav#sidebar > div:first-child { display:block; position:fixed; cursor:pointer; top:8px; left:8px; width:48px;height:48px;}

nav#sidebar > div:first-child:before, 
nav#sidebar > div:first-child:after 		{ background:rgba(38,38,38,1.00); width:70%; height:2px; border-radius: 1px;  margin-left: 15%; display:block; position:absolute; content:'';  }
nav#sidebar > div:first-child:before 		{ margin-top: 38%; }
nav#sidebar > div:first-child:after  		{ margin-top: 57%; }
nav#sidebar > div:first-child:hover:before  { width:65%; }
nav#sidebar > div:first-child:hover:after   { width:55%; }
nav#sidebar.open { opacity:1; -webkit-box-shadow: 1px 0 2px 0 rgba(0,0,0,0.2); box-shadow: 1px 0 2px 0 rgba(0,0,0,0.2); }
nav#sidebar.open > div:first-child { left:auto; right:24px !important; top:8px; position:absolute; }
nav#sidebar.open > div:first-child:before, 
nav#sidebar.open > div:first-child:after { margin-top: 48%; width:70%;  }
nav#sidebar.open > div:first-child:before{-webkit-transform:rotateZ(135deg); -moz-transform:rotateZ(135deg); -ms-transform:rotateZ(135deg); -o-transform:rotateZ(135deg); transform:rotateZ(135deg)}
nav#sidebar.open > div:first-child:after {-webkit-transform:rotateZ(225deg); -moz-transform:rotateZ(225deg); -ms-transform:rotateZ(225deg); -o-transform:rotateZ(225deg); transform:rotateZ(225deg)}
nav#sidebar.open > div:first-child:hover:after {-webkit-transform:rotateZ(135deg); -moz-transform:rotateZ(135deg); -ms-transform:rotateZ(135deg); -o-transform:rotateZ(135deg); transform:rotateZ(135deg)}
nav#sidebar.open > div:first-child:hover:before {-webkit-transform:rotateZ(225deg); -moz-transform:rotateZ(225deg); -ms-transform:rotateZ(225deg); -o-transform:rotateZ(225deg); transform:rotateZ(225deg)}
navsidebar:hover, nav#sidebar.open:hover {opacity:1;} 



nav#sidebar ul { 
	display: -ms-flexbox; display:flex; position:relative; 
	flex-direction: row;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	align-content: flex-start;
	box-sizing: border-box;
	padding:90px 10px 40px 10px;
	overflow-y: auto;
	max-height:100vh;
}
nav#sidebar ul li { 
	flex:1; -ms-flex: 1 1 auto;
	margin:10px;
}
nav#sidebar ul li:hover { opacity:1; cursor:pointer; }

nav#sidebar ul li:last-child { padding-bottom: 40px !important; }






nav#sidebar ul li > div, nav#sidebar ul li > a > div {
	
	box-sizing: border-box;
	display: block;
	position: relative;
	padding: 8px;
	min-width:155px;
	min-height:40px;
	max-width:320px;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
	
}







nav#sidebar ul li > div > span, 
nav#sidebar ul li > a > div > span {
	
	background-color: rgba(31,31,31,1.00);
	border: 5px solid rgba(252,252,252,1.00);
	border-radius: 4px;
	display:inline-block; 
	float:left;
	position:relative;
	width:40%;
	box-sizing: border-box;
	min-height:80px;
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.3);
	margin-bottom: 2px;
	opacity:0.8;
	
	
	background-size: cover;
	background-position: center;
	
}


nav#sidebar.open ul li:hover > div > span,
nav#sidebar.open ul li:hover > a > div > span { opacity: 1; }





nav#sidebar ul li > div > h3, 
nav#sidebar ul li > a > div > h3,
nav#sidebar ul li > div > p, 
nav#sidebar ul li > a > div > p {  

	display:inline-block; 
	width:60%;
	color:inherit;
	text-decoration: none;
	float:left;
	clear: none;
	box-sizing:border-box; 
    padding-left: 12px;
		
	
}



nav#sidebar ul li > div > h3, 
nav#sidebar ul li > a > div > h3 	{  font-size:1.2rem; font-weight:200; color:rgba(42,42,42,1.00) }


nav#sidebar.open ul li:hover > div > h3,
nav#sidebar.open ul li:hover > a > div > h3 { color:rgba(0,0,0,1.00); }



nav#sidebar ul li > div > p, 
nav#sidebar ul li > a > div > p 	{  font-size:0.6rem; font-weight:100; margin-top: 8px; padding-right: 4px; padding-top: 2px; color: rgba(75,75,75,0.60); min-height:30px; }




/* FX INput */


div.fxinput {   
	
	position:	relative;
	display:	inline-block; 
	min-height:	32px; 
	box-sizing: border-box; 
	min-width:  300px;
	width: 		47%;
	margin:		2px 1.5% 4px 1.5%;
	float: 		left;
	color:		#222 !important;
	padding:	4px; 


}

div.fxinput.wide  { width: 97%; min-height: 64px;  }
div.fxinput.short { width: 30%; min-width: 160px; min-height: 64px;  }


label,
select,
textarea,
input,
div.fxinput > label,
div.fxinput > select,
div.fxinput > textarea,
div.fxinput > input { display:block; position:relative; width:100%; border:0px; outline:none; box-sizing: border-box; float:left; text-align: left; }

label, select, textarea, input { max-width:1024px; }
select, textarea, input { margin-top: 12px; padding:6px 9px 3px 9px; font-size:1.1rem; font-family: inherit; font-weight:normal;  }



div.fxinput > label,
div.fxinput > select,
div.fxinput > textarea,
div.fxinput > input { max-width:100%; }


select,
textarea,
input,
div.fxinput > select,
div.fxinput > textarea,
div.fxinput > input { border-bottom: 1px dotted rgba(128,128,128,0.20);  }

select:focus,
textarea:focus,
input:focus,
div.fxinput > select:focus,
div.fxinput > textarea:focus,
div.fxinput > input:focus { border-bottom: 1px solid rgba(128,128,128,0.5);  }


div.fxinput:not(.readonly):hover {  }
div.fxinput.readonly > label,
div.fxinput.readonly > select,
div.fxinput.readonly > textarea,
div.fxinput.readonly > input { background:rgba(0,0,0,0) !important; cursor:not-allowed !important; }

div.fxinput > label { margin-top: -4px; font-size:0.85rem; margin-bottom: 4px; opacity:0.5; padding:6px 10px 3px 10px; }
div.fxinput:hover > label { opacity:1;  }

div.fxinput > select,
div.fxinput > textarea,
div.fxinput > input { padding:4px 8px 2px 8px; font-size:1.25rem; color:rgba(112,112,112,1.00) !important; font-family: inherit !important; }
div.fxinput:hover > select,
div.fxinput:hover > textarea,
div.fxinput:hover > input { color:rgba(12,12,12,1.00) !important; }

div.fxinput > textarea { min-height:80px; }

.button, button, input[type='submit'],
div.fxinput > button, div.fxinput > input[type='submit'] {  

	line-height: 	normal;
	padding:		1rem 28px;
	color: 			inherit;
	box-sizing:     border-box;
	margin:			1%;
	font-size:		1.2rem;
	font-weight:	normal;
	font-family: 	inherit;
	display: 		inline-block;
	border-radius:  2.1rem;
	-webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.33);
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.33);
	text-align: center;

}

div.fxinput > button, div.fxinput > input[type='submit'] { min-width: 		48% !important;  } 

.button:hover, button:hover, input[type='submit']:hover,
div.fxinput > button:hover, div.fxinput > input[type='submit']:hover {
	
	background-color:rgba(37,37,37,1.00);
	color: #fff;
	
	
}






	
	form.login { display:inline-block; width:calc(100% - 20px); position: relative; float:left; box-sizing: border-box; padding:10px; margin:-30px 10px 30px 10px; background:rgba(255,255,255,1.00); text-align: center; } 
	
	form.login input, form.login button { width:100%; border-radius: 0px; border:1px solid rgba(0,0,0,0.1); margin:0px 0px 0px 0px } 
	form.login input { background: rgba(0,0,0,0.03) }

	form.login div { clear: both; float:none; padding:0px 0px 0px 0px; min-width:97%;  }