:root {
	--space-cadet: #00000000;
	--teal-blue: #007991;
	--green-sheen: #e7d6cf;
	--blue-green: #efefef;
	--dark-orange: #e2e2e2;
	--height-of-clps-lv-1: 0px;
	--height-of-clps-lv-2: 0px;
  }
  
  * {
	transition: all 0.2s;
	box-sizing: border-box;
  }
   
 
  
  .clps-menu {
	overflow: hidden;
	position: relative;
	width: 100%;
  }
  
  .clps-menu button, .a {
	display: inline-block;
	width: 100%;
	color: rgb(84, 45, 45);
	border: none;
	background-color: transparent;
  	text-align: center;
	height:60px;
  }

  .clps-menu a {
	display: inline-block;
	width: 100%;
	color: white;
	border: none;
	background-color: transparent;
  	text-align: center;
	height:20px;
  }
  
  
  .clps-lv-1{
	background-color: var(--space-cadet);
  }
  
  .clps-lv-1 > a, .clps-lv-1 > button {
	padding: 0px;
  }
  
  .clps-lv-1 > ul {
	max-height: 0;
  }
  
  .clps-lv-1.collapsed > ul {
	max-height: calc(var(--height-of-clps-lv-1) + var(--height-of-clps-lv-2));
  }
  
  .clps-lv-2 {
	font-size: 0.9em;
	background-color: var(--teal-blue);
  }
  
  .clps-lv-2 a, .clps-lv-2 button {
	padding: 5px 20px;
  }
  
  .clps-lv-2 > ul {
	max-height: 0;
  }
  
  .clps-lv-2.collapsed > ul {
	max-height: var(--height-of-clps-lv-2);
  }
  
  .clps-item {
	background-color: var(--blue-green);
  }
  
  .clps-item a {
	font-size: 16px;
	padding: 10px 0px 30px 0px;
  }
  
  .clps-item span {
	color: rgb(95, 95, 95);
	border:0;
  }
  
  .clps-menu > ul  {
	visibility: hidden;
	opacity: 0;
	border:0;
  }
  
  .clps-menu.collapsed > ul  {
	visibility: visible;
	opacity: 1;
	border:0;
  }
  
  .clps-menu:hover {
	background-color: var(--green-sheen);
	border:0;
	color: #d81616;
  }
  
  .clps-item:hover {
	background-color: var(--dark-orange);
	border:0;
  }