/* General styles for all menus */
#showRight
{
	outline: none;
}

.cbp-spmenu {
	background: #fff;
	position: fixed;
}
.cbp-spmenu h3 {
	color: #afdefa;
	font-size: 1.9em;
	padding: 20px;
	margin: 0;
	font-weight: 300;
	background: #0d77b6;
}
.cbp-spmenu > a {
	display: block;
	color: #fff;
	font-size: 1.1em;
	font-weight: 300;
  text-decoration: none;
}
.cbp-spmenu > a:hover {
	background: #56565A;
}
.cbp-spmenu > a:active {
	background: #afdefa;
	color: #47a3da;
}
/* Orientation-dependent styles for the content of the menu */
.cbp-spmenu-vertical {
	width: 240px;
	height: 100%;
	top: 0;
	z-index: 1000;
}
.cbp-spmenu-vertical a {
	border-bottom: 1px solid #77777B;
	padding: 1em;
}
/* Vertical menu that slides from the left or right */
.cbp-spmenu-right {
	right: -240px;
}
.cbp-spmenu-right.cbp-spmenu-open {
	right: 0px;
}
/* Transitions */
.cbp-spmenu,
.cbp-spmenu-push {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#showRight {
  display: inline-block;
  margin: -72px 0;
  border: none;
  background: #fff;
  float: right;
  opacity: 1;
}
#showRight span {
  display: block;
}
/* ====================== lines button ==================================================*/
.lines-button {
  padding: 2rem 1rem;
  transition: .3s;
  cursor: pointer;
  user-select: none;
  border-radius: 0.57143rem;
  /* */
}
.lines-button:active {
  transition: 0;
}
.lines {
  display: inline-block;
  width: 34px;
  height: 0px;
  padding: 0.2rem 0.1rem;
  background: #0079c2;
  border-radius:0;
  transition: 0.3s;
  position: relative;
}
.lines:before, .lines:after {
  display: inline-block;
  width: 34px;
  height: 0px;
  padding: 0.2rem 0.1rem;
  background: #0079c2;
  border-radius: 0;
  transition: 0.3s;
  position: absolute;
  left: 0;
  content: '';
  -webkit-transform-origin: 0.28571rem center;
  transform-origin: 0.28571rem center;
}
.lines:before {
  top: 0.8rem;
}
.lines:after {
  top: -0.8rem;
}

.lines-button:hover .lines:before {
  top: 1.14286rem;
}
.lines-button:hover .lines:after {
  top: -1.14286rem;
}

/*.lines-button.close {
  -webkit-transform: scale3d(0.8, 0.8, 0.8);
  transform: scale3d(0.8, 0.8, 0.8);
}*/
/*.lines-button.x.close .lines {
  background: transparent;
}*/
/*.lines-button.x.close .lines:before, .lines-button.x.close .lines:after {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  top: 0;
  width: 4rem;
}*/
/*.lines-button.x.close .lines:before {
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
}
.lines-button.x.close .lines:after {
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
}*/
#showRight.active
{
	margin-right: 223px !important;
  padding: 2rem 2rem;
}

/* Example media queries */
@media screen and (max-height: 26.375em){

	.cbp-spmenu-vertical {
		font-size: 90%;
		width: 240px;
	}

	.cbp-spmenu-right {
		right: -290px;
	}
}