.w05 { width: 5%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w50 { width: 50%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w90 { width: 90%; }
.w95 { width: 95%; }
.w100 { width: 100%; }

.star {
  font-size: 0.4em;
  color: #F00;
}

.center, .center-column, .top, .right, .bottom, .left {
	display: flex;
	justify-content: center;
	align-items: center;
}

.center-column {
	flex-direction: column;
}

.top { align-items: flex-start; }
.right { justify-content: flex-end; }
.bottom { align-items: flex-end; }
.left { justify-content: flex-start; }

.single-spaced, .single-spaced * {
	line-height:1;
}
/*
@media (max-width: 1024px) {
	.desktop {
		display:none;
	}
}
*/


/* Side Bar */
.sidebar { /* it's a mobile sidebar, blocker and content */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* to cover the whole screen */
  height: 100vh;
  padding: 0;  /* to override the default padding */
  background: rgba(0,0,0, .5); /* half transparent background */
  display: none;
  z-index: 99999; /* to be on top of any other elements */
}
.sidebar.visible {
  display: block;
}
/*cover the whole screen and to detect user click on background */
.sidebar .side_blocker { 
  position: absolute;
  width: 100%;
  height: 100%;
}
/* user content */
.sidebar .side_content {
  z-index:2;
  position: absolute;
  top: 0;
  left: 0;
  background:rgba(47,53,64,1);
  color:white;
  height: 100%;
  width: 100%;
  left: -100%;  /* will be animated to left: 0, by animation */
  animation: slide 0.5s forwards;
}

@keyframes slide {
  100% { left: 0; }
}