@font-face {
	font-family:Comic;
	src:
		local('Fonts/ComicNeue-Bold.ttf'),
		url('Fonts/ComicNeue-Bold.ttf'); 
		format:('truetype');
}

/* dd container */
  .dropdown {
	display: inline-block;
	position: relative;
	outline: none;
	margin-top:10px;
	font-family:Comic;
	vertical-align:middle;
	font-size:20px;
  }
  
  /* button */
  .dropbtn {
	display: inline-block;
	color: white;
	cursor: pointer;
	width:130px;
	height:26px;
	transition: 0.2s ease-out;
 }

.dropbtn:hover, .dropbtn.c:hover, .dropbtn.r:hover {
 }
  
  /* dd content */
  .dropdown .dropdown-content {
	position: absolute;
	top: 50%;
	visibility: hidden;
	opacity: 0;
	z-index: 100000;
	background-color: #f7f7f7;
	min-width: 120%;
	padding: 10px;
	font-size: 16px;
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
	transition: 0.2s ease-out;
  }
  
  /* center & right position menu relative to the button */
  .dropdown .dropdown-content.c  {
	left: 50%;
	margin-left: calc(-60% - 10px);
  }
  .dropdown .dropdown-content.r  {
	right: 0;
  }
  
  /* style link menu item */
  .dropdown-content .mi {
	display: block;
	color: black;
	padding: 6px 0px 6px 30px;
	text-decoration: none;
	position: relative;
  }
    /* highlight the menu item */
  .dropdown-content .mi::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:
	linear-gradient(
	90deg,
	rgba(0, 137, 131, 0) 0%,
	rgba(0, 137, 131, 0.4) 5%,
	rgba(0, 137, 131, 0) 100%
	);
	opacity: 0;
	z-index: -1;
	transition: 0.2s ease-out;
  }
  .dropdown-content .mi:hover::before {
	  opacity: 1;
  }
  
  /* style text link */
  .dropdown-content .tl {
	color: #36f;
	text-decoration: none;
	border-bottom: 1px dotted #36f;
	transition: 0.2s ease-out;
  }
  .dropdown-content .tl:hover {
	border-bottom: 1px dotted transparent;
  }
  
  /* show dd content */
  .dropdown:focus .dropdown-content {
	outline: none;
	visibility: visible;
	opacity: 1;
	transform: translateY(15px);
  }
  
  /* mask to close menu by clicking on the button */
  .dropdown .db2 {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 10;
	display: none;
  }
  .dropdown:focus .db2 {
	display: inline-block;
  }
  .dropdown .db2:focus .dropdown-content, .dropdown-content .db3:focus .dropdown-content {
	outline: none;
	visibility: hidden;
	opacity: 0;
  }
  
  /* button gradient */
  .dropbtn::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	transition: 0.2s ease-out;
  }

  .dropdown:focus  {
	z-index: 1;
  }
  .dropdown:focus .dropbtn  {
	background: none;
  }
    
  /* icon content */
  .dropbtn.i2::after {
	content: "";
	display: inline-block;
	border: 0;
	width: 15px;
	height: 12px;
	margin-left: 10px;
	background-repeat: no-repeat;
  }
  
  /* icon x */
  .dropdown-content .db3  {
	display: inline-block;
	position: absolute;
	top: 5px;
	right: 5px;
	width: 18px;
	height: 18px;
	padding: 0;
	border-radius: 100%;
	z-index: 10;
	transition: 0.15s ease-out;
  }
  .dropdown-content .db3::before, .dropdown-content .db3::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 60%;           /* height icon */
	width: 2px;            /* width icon  */
	background: #3c4043;   /* color icon  */
  }
  .dropdown-content .db3::before {
	transform: translate(-50%, -50%) rotate(45deg);
  }
  .dropdown-content .db3::after  {
	transform: translate(-50%, -50%) rotate(-45deg);
  }
  .dropdown-content .db3:hover   {
	background: #d1d1d6;
  }
  
  /* sub menu container */
  .sub-dropdown {
	position: relative;
  }
  .sub-dropdown-content {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	background-color: #f7f7f7;
	left: 100%;
	top: -10px;
	padding: 10px 5px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	transition: 0.2s ease-out;
  }
  .sub-dropdown-content a {
	color: black;
	padding: 5px 12px;
	text-decoration: none;
	display: block;
	position: relative;
	white-space: nowrap;
  }
  
  /* sub menu item */
  .si {
	cursor: default;
  }
  .si::after {
	content: "\25B8";
	margin-left: 5px;
	vertical-align: -1px;
	margin-right: 10px;
	float: right;
  }
  .sub-dropdown:hover .sub-dropdown-content {
	visibility: visible;
	opacity: 1;
	transform: translateY(10px);
  }
  /* highlight the sub-menu item */
  .sub-dropdown-content a::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:
	linear-gradient(
	90deg,
	rgba(0, 137, 131, 0) 0%,
	rgba(0, 137, 131, 0.4) 10%,
	rgba(0, 137, 131, 0.4) 90%,	
	rgba(0, 137, 131, 0) 100%
	);
	opacity: 0;
	z-index: -1;
	transition: 0.2s ease-out;
  }
  .sub-dropdown-content a:hover::before {
	  opacity: 1;
  }
  
  /* media queries */
  @media (max-width:745px) {
  .dropdown .dropdown-content.r,
  .dropdown .dropdown-content.c {
	left: 0;
	margin-left: 0;
	}
  .dropbtn.c::before, .dropbtn.r::before {
	background: radial-gradient(circle at 0 0, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
	}
  }