.nav-item {
			font-size: 25px;
		}
		
		.nav-link {
			text-decoration: none;
		}	
		
		.bg-dark:active:hover:focus {
			top: 130px;
			z-index: 1;
			background-color: #eee !important;
			border-top:#994000;
		}
	
		.bg-dark > {
			top: 130px;
			z-index: 1;
			background-color: #b34a00 !important;
			border-top:#994000;
		}		

		@media screen and (max-width: 900px) { #sidebar { 
			display:none; 
			} 
			footer {
			font-size: x-small;
			}				
		}
		
		@media screen and (min-width: 901px) { #mobile { 
			display:none; 
			} 			
		}
		
		@media screen and (min-width: 901px) { #topbar { 
			display:none !important;
			background-image: url("../images/Picture1.png");
			position: sticky;
			} 
		}

		@media screen and (max-width:900px)	{  #show-desktop{
			 display:none;
		   }
		}	

		@media (max-width: 900px) {
	
		a.bg-dark:hover, a.bg-dark:focus,
		button.bg-dark:hover,
		button.bg-dark:focus {
		  background-color: #1d2124 !important;
		}	

		.bg-dark {
			top: 130px;
			z-index: 1;
			background-color: #b34a00 !important;
			border-top:#994000;
		}
		
		.nav-item {
			font-size: 25px !important;
		}
		
		.p {
			margin-left: 10px !important;
			margin-right: 10 px !important;
		}
		
		.row {
			flex-direction: column;
		  }

		.column {
		width: 100% !important;
		}	
		
		.nav-link {
			text-decoration: none;
		}
		
		.nav2 > li {
			position: relative !important;
			display: flex !important;
		}
		
		.page-content-wrapper {
			margin: 10px !important;
		}
		
			.nav-tabs > li > a,
			.nav-tabs > li > a:hover,
			.nav-tabs > li > a:focus {
				  display: block !important;
				  text-align: center !important;
				  color: #555555;
				  cursor: default;
				  background-color: #eee;
				  overflow-wrap: break-word !important; 
				  border-bottom-color: transparent;
				  padding-left: 0px !important;
				  padding-top: 0px !important;
				  padding-bottom: 0px !important;
				  padding-right: 0px !important;

			}
			
			.nav-tabs > li.active > a,
			.nav-tabs > li.active > a:hover,
			.nav-tabs > li.active > a:focus {
				  display: block !important;
				  text-align: center !important;
				  color: #000 !important;
				  cursor: default;
				  background-color: #eee !important;
				  overflow-wrap: break-word !important; 
				  border-style: none !important;  
				  padding-bottom: 0px !important;
				  padding-right: 0px !important;
				 
			}

			.tab-content > .active {
				display: block;
				background-color:#eeeeee !important;
				padding-left: 10px;
				padding-right: 10px;
				padding-top: 10px;
				padding-bottom: 0px;	
				margin-bottom: 10px;
				border: none !important;	
			}
			
			.nav-tabs > li  {
			  float: left;
			  display: block !important;
			  text-align: center !important;
			  overflow-wrap: break-word !important; 
			  margin-bottom: 1px;  
			  width: 33%;
			  height: 20 px !important;
			  font-size: 16px;
			  padding-left: 0px !important;
			  padding-top: 0px !important;
			  padding-bottom: 0px !important;
			  padding-right: 0px !important;
			  border-style: none !important;  			  
			}

			.tab-pane {
				width:110% !important;
				background-color: #eee !important;
				padding-left: 10px !important;
				padding-right: 10px;
				padding-top: 20px;
				padding-bottom: 20px;
				margin-bottom:20px;
				border-style:none !important;		
			}
			
}			
			
			
			
			
		
		<!-- end formatting for media tab and card-->
			.btn {
				font-size: 15px !important; 
				text-align: left !important;
			  }

			.tab-content {
				display: block;
				color: #000 !important;
				background-color:#eeeeee !important;
				padding-left: 10px;
				padding-right: 10px;
				padding-top: 10px;
				padding-bottom: 0px;	
				margin-bottom: 10px;
				border: none !important;	
			}	



				
			.tab-content > .active {
				display: block;
				color: #000 !important;
				background-color:#eeeeee !important;
				margin-bottom: 10px;
				border-style: none !important;  			  
				
			}	
			
			.nav > li > a {
				background-color: #eeeeee !important ;
				padding-left: 20px;
				padding-right: 20px;
				padding-top: 10px;
			}	

			.nav > li > a:focus {
				background-color:#eeeeee !important;
				color: #000 !important;	
					
			}	

			.nav-tabs > li > a {
				background-color:#eee !important;
			}	
				
			.nav-tabs > li.active > a,
			.nav-tabs > li.active > a:hover,
			.nav-tabs > li.active > a:focus {
				display: inline-block !important;
				text-align: center !important;
				color: #fff !important;
				cursor: default;
				background-color: #b34a00 !important;
				border-style:none !important;
				height: 50px !important;
			}
			
			.tab-pane  {
				background-color: #eee !important;
				width:90%;
				padding-left: 20px !important;
				padding-right: 20px;
				padding-top: 20px;
				padding-bottom: 20px;
				border-style:none !important;
				min-height: 400px !important;				

			}
			
			

			.home, .menu1, .menu2 > :focus {
				background-color: #efefef !important;
				border-color: #efefef !important;
			}	
			
			h3 {
				color: #b34a00 !important;
			}	

		.sidebar {
			min-width: 80px !important;
		}
		
			
/* collapsable*/

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: transparent !important;
}


.navbar-collapse:active {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
  background-color: #b34a00;
}

.collapsible {
  background-color: #fafafa !important;
  color: #000 !important;
  cursor: pointer !important;
  padding: 10px!important;
  width: 100%!important;
  border: none!important;
  text-align: left !important;
  outline: none!important;
  font-size: 18px !important;
}

.button.close {
  padding: 0;
  background-color: #B34a00 !important;
  border: 0;
}

button {
	border-left: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-top: none !important;
	background-color: #fafafa;
	width:100%;
	text-align: left;
	font-size: 16px !important;
}

button:focus {
outline: none !important;
background-color: #b34a00 !important;
}

.active, .collapsible:hover  {
	background-color: #b34a00 !important;
	color: #fff !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-top: none !important;   
}

.collapsible:after {
	content: "\002B";
	font-size: 18px;
	color: #000;
	font-weight: bold;
	float: right;
	margin-left: 5px;
	border-left: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-top: none !important;   
}

.active:after {
	content: "\2212";
	color: #fff;
	background-color: #555555 !important;
}


.content {
	padding: 0 10px;
	margin-top: 0px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	background-color: #f1f1f1;
	color: #000;
}