/* popup menu */	
@media (max-width:799px) {

	.menu.embedded {
		display: none;
	}
	 
	.menu {
		position:relative;
		z-index:1;
		/*position:-webkit-sticky;*/
		margin-top: -70px;
		top: 0px;
		right: 0px;
		color: white;		
	}
	
	.menu {
		/* required to make height of menu 0px. Otherwise it hides text */
		margin:0px;
	}
	
	.menu>input ~ ol {
		transform-origin: right bottom;		
		transform: scale(0.0);
		transition: all 0.3s ease;
		position: fixed;
		top:0px;
		left:0px;
		display: block;
		box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.1);	
		background: #fafafa;	
		box-sizing: border-box;
		width: calc(100% - var(--menu-icon-width) - 8px);
		padding-right:20px;
	}
	
	.menu>input {
		-webkit-appearance: none;
		-moz-appearance: none;
		width:var(--menu-icon-width);
		height:var(--menu-icon-height);
		
	}	
	
	.menu>.menu-icon, .menu>input {
		position: absolute;
		right: 8px;
		bottom: 16px;
		z-index:1;
		padding:0px;
		margin:0px;
	}
	
	.menu>.menu-icon {
		pointer-events:none;
	}
	
	.menu>input:focus {
		outline: none;
	}
	
	.menu>input:checked ~ ol {
		transform: scale(1.0);
	}
	
	.menu>.label {	
	  font-size:10px;
	  position: absolute;
	  top:-50px;
	  right: 8px;
	  color:black;
	}
	
	.menu-icon {	
	  --menu-icon-transition: 0.2s ease-in-out;
	  display: block;
	      
	  width: var(--menu-icon-width);
	  height: var(--menu-icon-height);
	  position: relative;
	  transform: rotate(0deg);
	  cursor: pointer;
	}

	.menu-icon span {
	  margin:0px;
	  display: block;
	  position: absolute;
	  height: 20%;
	  width: 100%;
	  background: var(--menu-icon-color);
	  border-radius: 6%/50%;
	  opacity: 1;
	  left: 0;
	  transform: rotate(0deg);
	  transition: var(--menu-icon-transition);
	}

	.menu-icon span:nth-child(2),.menu-icon span:nth-child(3) {
	  top: 40%;
	}

	.menu-icon span:nth-child(4) {
	  top: 80%;
	}

	.menu>input:checked ~ .menu-icon>span:nth-child(1) {
	  top: 40%;
	  width: 0%;
	  left: 50%;
	}

	.menu>input:checked ~ .menu-icon>span:nth-child(2) {
	  transform: rotate(45deg);
	}

	.menu>input:checked ~ .menu-icon>span:nth-child(3) {
	  transform: rotate(-45deg);
	}

	.menu>input:checked ~ .menu-icon>span:nth-child(4) {
	  top: 40%;
	  width: 0%;
	  left: 50%;
	}
	
	
}

@media (min-width:800px) {
	
	.menu.popup {
		display: none;
	}
	
	.menu {
		position: sticky;
		position: -webkit-sticky;
		top: 248px;/*180px;*/
		margin-top:40px;
		box-sizing: boder-box;
		width:260px;
		float: left;
	}
	
	.content {
		margin-left: 260px;
	
	}
		
}	
	.disable-scroll {
		overflow: hidden;
		border-right: 16px solid;
	}
	
	.disable {
		pointer-events:none;
	}