@charset "UTF-8";

.sideBarTitle {
	font-size: 1.2 rem; 
	font-weight: 600; 
	color: white;
	white-space: nowrap;
}
.sideBarContainer {
	background-color: var(--base-color);
	position: fixed;
	top: var(--bar-top);
	left: 0;
	padding:1.2rem 1.3rem 0;
	box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
	z-index: 100;
	transition: .4s;
	height: 100vh;
	width:var(--bar-width-min); 
  
}
.sideBarSub {
	background-color: var(--base-color);
	white-space: nowrap;
}
.chevronIcon{
	margin-left: 5rem; 
	font-size: 0.5rem ;
}
.sideBarIcon{margin-right: 1rem;}	
.sideBarBottom {
	bottom: 0px;
    position: absolute;
    margin-bottom: 5rem!important;
}	
	
	
.sideBarContainer:hover{width:250px;}
.sideBarContainer:hover .sideBarTitle{opacity:1 ; visibility:visible}
.sideBarContainer:hover .sideBarIcon{opacity:1}
.sideBarContainer:hover .sideBarSub{opacity:1 ; transition:1s ;visibility:visible}
.sideBarContainer:hover .chevronIcon{opacity:1 ; visibility:visible}

	
@media only screen and (max-width: 767px){
		
	.originalSideBar {
		display: block;
	}
	
	.chevronIcon.chevronIcon {	
		display: block;
	}
	
	.sideBarTitle {
		//display: none;
		display: block;
	}	
	
	.shortTitle {
		//display: block;
		display: none;
	}
	
	.iconSize {
		font-size: 1.6rem;
	}
	.sideBarContainer{
		height: 100vh;
		padding: 0.5 rem 1.3rem 0;
		width:250px;
	}
    

	.sideBarTitle{opacity:1;transition:.3s ; visibility:visible}
	.sideBarIcon{font-size:1.3rem}
	.sideBarSub{opacity:1; visibility:visible}
	.chevronIcon{opacity:1; visibility:visible}
}

@media only screen and (min-width: 768px){
	
	
	.originalSideBar {
		display: block;
	}
	
	.shortTitle {
		display: none;
	}
	
    .sideBarContainer{width:var(--bar-width-min); // 65px
    }

	.sideBarTitle{opacity:0;transition:.3s ; visibility:hidden}
	.sideBarIcon{font-size:1.3rem}
	.sideBarSub{opacity:0; visibility:hidden}
	.chevronIcon{opacity:0;transition:.3s ; visibility:hidden}
}
.sideBarItem {
	font-size: 1 rem; 
	font-weight: 600; 
	color: white;
}

@keyframes openBar{
    from{
        bottom: 100px;
    }
    to{
        bottom: 0px;
    }
}

.openSideBar {
	animation-name: openBar;
    animation-duration: 1s;
}

a:hover, a:visited, a:link {
	text-decoration: none;
}



.b_container {
	display: inline-block;
	cursor: pointer;
}

.hamburger {
  background:  var(--base-color)
  position: relative;
  display: block;
  text-align: center;
  width: 50px;
  left: 0;
  top: 0;
  z-index: 1000;
  cursor: pointer;
}

.hamburger:before {
  content:"\f0c9"; /* hamburger icon */
  font-family: 'Font Awesome 5 Free';
  display: block;
  color: #fff; 
  line-height: 32px;
  font-size:1.5rem;
}

.change .hamburger:before {
  content:"\f00d";  /* pin icon */
  font-family: 'Font Awesome 5 Free';
  font-weight: 600;
  display: block;
  color: #fff;
  line-height: 32px;
}

.pointer {
	cursor: pointer;
}