@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 > div:first-child { background-color:rgba(0,0,0,0.0); }
nav#sidebar { background-color: rgba(222,222,222,1.00); -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:0.5; -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; }
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:0.9; -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:flex; position:relative; 
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	align-content: flex-start;
	box-sizing: border-box;
	padding:90px 10px 90px 10px;
	overflow-y: auto;
	max-height:100vh;
}
nav#sidebar ul li { 
	flex:1;
	margin:10px;
}
nav#sidebar ul li:hover { opacity:1; background-color:rgba(255,255,255,0.30); cursor:pointer; }








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:160px;
	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(205,205,205,1.00);
	border: 12px solid rgba(252,252,252,1.00);
	display:block; 
	position:relative;
	width:100%;
	box-sizing: border-box;
	min-height:125px;
	-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: 7px;
    

	background-size: cover;
	background-position: center;
	
}


nav#sidebar ul li.simple > a > div > span {
	
    background-color: rgba(225,225,225,1.00);
    background-image:url(svg/csLogo.svg);
	background-size: 80%;
	background-position: center;
    background-repeat: no-repeat;
	
}

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:100%;
	color:inherit;
	text-decoration: none;
	float:left;
	clear: both;
	box-sizing:border-box; 
		
	
}

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


nav#sidebar ul li > div > p, 
nav#sidebar ul li > a > div > p 	{  font-size:0.8rem; font-weight:100; margin-top: 10px; padding-right: 20px; padding-top: 8px; color: rgba(75,75,75,1.00); min-height:46px; border-top:  dotted 1px rgba(0,0,0,0.30)}