/* menu */

/* Google Font CDN Link */
		@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
		*{
		  margin: 0;
		  padding: 0;
		 
		}
		
	#navMenu
	{
		margin: 0;
		padding: 0;
		display: table;
		width: 100%;
		margin-top:10px;
	}
	
	
	#menu 
	{
	  list-style: none inside;
	  overflow: visible;
	  margin:0px;
	  padding: 0;
	  text-align: center;
	  display: table;
	  width: 100%;
	}
	
	
	
	/* menu selected item */
	#menu li#selectedItem
	{
		border-bottom: 2.5px solid blue;
	}
	
	/* menu selected item link*/
	#menu li#selectedItem a 
	{
		color: blue;
	}
	
	#menu li#selectedItem li.dropdownMenuItem a
	{
		color: black;
	}
	
	/* dropdown menu */
	ul#dropdownMenu
	{
	  padding:0;
	  left: 0;
	  display: none;
	  margin-top:11px;
	  background-color:white;
	}
	
	/* dropdown menu item*/
	#menu li.dropdownMenuItem
	{
		font-size:0.8em;
		line-height: 40px;
		height: 50px;
		list-style-type: none;
		width:100%;
		background-color:white;
		position: relative;
	}
	
	
	/* menu item */
	#menu li.menuItem 
	{
		float: left;
		font-size: 1.3em;
		line-height: 40px;
		height: 50px;
		border-bottom: 3px solid white;
		width:25%;
		border-right:3px solid white;
		border-left:3px solid white;
		/*font-family: "Poppins" , sans-serif;*/
	}
	
	/* menu item link */
	#menu li.menuItem a 
	{
		text-decoration: none;
		color: black;
		display: block;
		font-weight: bold;
		width:100%
	}
	
	#icDropdownMenu
	{
		margin:0px 4px;
	}
	
	#details
	{
		overflow:auto;
		margin:auto;
		margin-top:15px;
		height:100%;
	}
	
	#wraper
	{
		overflow:auto;
		margin:auto;
		height:100%;
	}
	
	.small{overflow:hidden; display:none;}

	/* menu item hover && menu selected item hover*/
	#menu li.menuItem:hover, #menu  li#selectedItem:hover
	{
		border-bottom: 3px solid blue;
	}

	/* menu item hover link */
	#menu li.menuItem a:hover, #menu li#selectedItem li.dropdownMenuItem a:hover
	{
		color: blue;
	}

	
	/* not sure 
	#menu li.menuItem:hover ul ul
	{
	  display: none;
	}
	*/
	
	/* dropdown menu drop*/
	#menu li:hover ul#dropdownMenu
	{
	  display: block;
	}
	
	
	/* Media Queries for menu*/
	
	@media (max-width:1350px)
	{
		#menu li.menuItem
		{
			font-size: 1.2em;
		}
	}
	
	@media (max-width:1230px)
	{

	}
	
	@media (max-width:820px)
	{	
		
		#menu li.menuItem{border-bottom: 2.5px solid white;}
		#menu li.menuItem:hover {border-bottom: 2.5px solid blue;}
		#menu  li#selectedItem:hover{border-bottom: 3px solid blue;}

		#menu li.dropdownMenuItem 
		{
			font-size: 0.7em;
		}
		
	}
	
	
	/* Phone Menu Queries*/

 @import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:400,600');
 
	@media (max-width:700px)
	{
		#details
		{
			margin-top:85px;
			
		}
		
		header 
		{
		  position: fixed;
		  height: 85px;
		  width: 100%;
		  background-color:white;
		  display: table;
		}

		#icDropdownMenu
		{
			display: none;
		}
		
		/* cancle dropdown menu drop*/
		#menu li:hover ul#dropdownMenu
		{
		  display: normal;
		}
		
		#menu li#selectedItem a
		{
			color:blue;
		}
	

		#navMenu 
		{
			min-height: 100vh;
			position: fixed;
			margin:0px;
			z-index: 10;
			
		}
		
		#navMenu .bg
		{
		  top:85px;
		  position: fixed;
		  left: 0;
		  width: 100%;
		  height: calc(100% - 10px);
		  visibility: hidden;
		  opacity: 0;
		  transition: .3s;
		  background: #000;
		}

		#navMenu:focus-within .bg 
		{
		  visibility: visible;
		  opacity: .6;
		}
		#navMenu * {
		  visibility: visible;
		}

		
		#navMenu .button
		 {
		  position: absolute;
		  float:right;
		  display: flex;
		  right:0px;
		  flex-direction: column;
		  justify-content: center;
		  z-index: 10;
		  -webkit-appearance: none;
		  border: 0;
		  background: transparent;
		  border-radius: 0;
		  height: 20px;
		  width: 20px;
		  cursor: pointer;
		  margin-right: 25px;
		  top:10px;
		  -webkit-tap-highlight-color: rgba(0,0,0,0);
		   position: absolute;
		 
		}
		
		
		.icon-bar {
		  display: block;
		  width: 100%;
		  height: 2px;
		  background: #aaa;
		  transition: .3s;
		}
		.icon-bar + .icon-bar {
		  margin-top: 2px;
		}

		#navMenu:focus-within .button 
		{
		  pointer-events:  none;
		}
		#navMenu:focus-within .icon-bar:nth-of-type(1) 
		{
		  transform: translate3d(0,4px,0) rotate(45deg);
		}
		#navMenu:focus-within .icon-bar:nth-of-type(2) 
		{
		  opacity: 0;
		}
		#navMenu:focus-within .icon-bar:nth-of-type(3) 
		{
		  transform: translate3d(0,-4px,0) rotate(-45deg);
		}

		#nav-content 
		{
		  margin-top:85px;
		  font-weight: 600;
		  height: 100%;
		  /*font-family: 'Encode Sans Condensed', sans-serif;*/
		 
		  padding: 20px;
		  width: 80%;
		  max-width: 300px;
		  position: absolute;
		  top: 0;
		  right: 0;
		  height: calc(100% - 10px);
		  background: #ececec;
		  pointer-events: auto;
		  -webkit-tap-highlight-color: rgba(0,0,0,0);
		  transform: translateX(100%);
		  transition: transform .3s;
		  will-change: transform;
		  contain: paint;

		}

		#nav-content ul#menu 
		{
		  transform: rotate(180deg);
		  height: 100%;
		  display: flex;
		  flex-direction: column;
		  list-style: none;
		}

		#nav-content ul#menu li.menuItem
		{
			transform: rotate(-180deg);
			width:100%;
			border:0px;
			font-size:1.3em;
			float: right;
			margin-right:10px;
			text-align: right !important;
		}
		
		ul#dropdownMenu
		{
		  padding:0;
		  left: 0;
		  display: inline;
		  margin-top:0px;
		  background-color:#ececec;
		}
		
		#menu li.dropdownMenuItem
		{
			font-size:0.7em;
			list-style-type: none;
			width:100%;
			background-color:#ececec;
			position: relative;
			padding-right:25px;
		} 
	

		#nav-content li.menuItem a 
		{
		  padding: 15px 5px;
		  display: block;
		  text-transform: uppercase;
		  transition: color .1s;
		  text-decoration: none;
		  outline: 0;
		  color: currentColor;
		  transition: .2s ease-in-out;
		}
		
		#menu li.dropdownMenuItem a
		{
			 padding:0;
		}

		#nav-content li.menuItem a:hover, #menu li#selectedItem a:hover
		{
		  color:rgb(0, 0, 250,0.5);
		}

		#nav-content li:not(.small) + .small 
		{
		  margin-top: auto;
		}
		
		
		.small
		{
			display: flex;
			align-self: center;
			
		}
		
		.small a
		{
			font-size: 12px;
			font-weight: 400;
			color: #888;
			
		}

		.small 
		{
			transform: rotate(-180deg);
			width:100%;
			border:0px;
			font-size:1.2em;
			float: right;
			margin-right:10px;
			text-align: right !important;
			padding: 0px ;
			
		}

		.small a {
		  font-size: 12px;
		  font-weight: 400;
		  color: #888;
		  padding: 15px 5px;
		  display: block;
		}
		.small a + a {
		  margin-left: 15px;
		}

		#navMenu:focus-within #nav-content
		 {
		  transform: none;
		}


		/*
		* {
		  box-sizing: border-box;
		  margin: 0;
		  padding: 0;
		}
		*/
	}
	
	@media (max-width:550px)
	{
		
		
	}
	
	@media (max-width:500px)
	{
		
		
	}
	
	@media (max-width:450px)
	{
		
		#navMenu .button{ margin-right: 13px;}
		
		/*
		@media (min-height: 500px) 
		{
			#details{margin-top:105px;}
			header {height: 105px;}
			#nav-content { margin-top:150px;}
		}
			*/
		
	}
	
	@media (max-width:350px)
	{
		#navMenu .button{ margin-right: 5px;}
	}