@charset "UTF-8";
/* CSS Document */

#navbar {
	display: none;
}
@media screen and (min-width:1025px){
#navbar {
  overflow: hidden;
	height:5vh;
	text-align: center;
	display: block;
	color:#fff;
	transition: all 0.5s;
}

/* Navbar links */
#navbar a {
  display: inline-block;
  color: #fff;
  text-align: center;
  padding-left: 0.5em;
	padding-right: 0.5em;
  text-decoration: none;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
	font-family:"BannSomDej";
	line-height: 5vh;
	transition:all 0.3s;
}
	
	#navbar a:hover {
		background-color:rgba(29,13,0,0.90);
		transition:all 0.3s;
		border-radius: 10px 0;
		color:#fff;
	}

	
	#navbar-logo {
		width:10vh;
		height:5vh;
		background-image:url(../images/nav-logo.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		display: none;
		vertical-align: middle;
	}
/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  	position: fixed;
  	top: 0;
  	width: 100%;
	background-color:rgba(204,181,133,1.00);
	transition: all 0.5s;
	z-index: 999;
	padding:0.5em;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
	
}
	
	.sticky > #navbar-logo {
		display: inline-block;
	}
}

@media screen and (min-width:1025px){
	#navbar a:link, #navbar a:visited {
		color:#210F00;
	}
	
	#navbar a:hover, #navbar a:active {
		color:#fff;
	}
}