.hc-top-up {
	background: transparent;
	border-color: rgba(255, 255, 255, .4);
	transition: .5s;
	width: 100%;
	height: 100px;
	background-position: center;
	float: left;
	position: absolute;
	z-index: 2;
}

.hc-top-nd {
	background: rgba(255, 255, 255, .9);
	border: 0;
	transition: .5s;
	width: 100%;
	height: 100px;
	background-position: center;
	float: left;
	position: absolute;
	z-index: 2;
	background-color: #666666;
}

.hc-banner {
	margin: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	position: relative
}

.hc-banner .banner li {
	width: 100%;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	background-position: center;
	background-size: cover;
	overflow: hidden
}

.left {
	float: left;
	width: 30px;
	height: 52px;
	line-height: 52px;
	color: #fff;
	left: 10px;
	background: rgba(0, 0, 0, .7)
}

.right {
	float: right;
	width: 30px;
	height: 52px;
	line-height: 52px;
	color: #fff;
	right: 10px;
	background: rgba(0, 0, 0, .7)
}

a.btn {
	position: relative;
	top: 120px;
	z-index: 10;
	cursor: pointer;
	text-align: center;
	font-size: 32px
}

.left {
	float: left;
	width: 30px;
	height: 52px;
	line-height: 52px;
	color: #fff;
	left: 10px;
	background: rgba(0, 0, 0, .7)
}

.right {
	float: right;
	width: 30px;
	height: 52px;
	line-height: 52px;
	color: #fff;
	right: 10px;
	background: rgba(0, 0, 0, .7)
}

ol {
	position: relative;
	display: table;
	margin: 0 auto;
	top: 90vh;
	z-index: 10
}

ol li {
	float: left;
	width: 50px;
	height: 10px;
	margin: 0 10px;
	border-radius: 2px;
	background: rgba(215, 215, 215, .5);
	cursor: pointer
}

ol li.red {
	background: #ff0
}

.daoxian {
	z-index: 10000;
	height: 2px;
	width: 96%;
	background-color: #cccccc;
	padding-left: 0.2rem;
	display: none;
}
.zhixiang{
		position: absolute;
		top: 0.5rem;
		left: 9.9rem;
		width: 26px;
		height: 50px;
		background-color: #999999;
		display: none;
		z-index: 1000;
		
}

@media only screen and (min-width:768px) {
	.p1100 {}
	.hc-top-up .hc-logobox {
		display: inline-block;
	}
	.hc-top-nd .hc-logobox {
		display: inline-block;
		padding: 10px;
		border-right: 1px solid rgba(0, 0, 0, .4)
	}
	
	
	
	#mainNav .hc-logobox img {
		/*height: 40px*/
	}
	#mainNav .hc-contact,
	#mainNav .hc-navbox {
		height: 30px;
		overflow: hidden;
		/*margin: 15px 10px auto*/
		margin-top: 38px;
		margin-left: 154.5px;
	}
	#mainNav .hc-navbox li {
		transition: .5s;
		top: 0;
		padding: 0 5px
	}
	#mainNav .hc-navbox li:hover {
		transition: .5s;
		top: -30px
	}
	#mainNav .hc-contact a {
		padding: 0 25px;
		line-height: 28px;
		display: inline-block;
		color: #666;
		border: 1px solid rgba(255, 255, 255, .8);
		transition: .5s
	}
	#mainNav .hc-contact a:nth-child(1),
	#mainNav .hc-contact a:hover {
		transition: .5s;
		color: #0583c4;
		line-height: 24px;
		font-size: 18px;
		font-weight: bold;
		height: 100%;
		width: 100%;
		display: block;
		background: url(../img/tel.png) left center no-repeat;
		background-size: auto auto;
	}
	#mainNav .hc-navbox li>.nav-off,
	#mainNav .hc-navbox li:hover>.nav-off {
		border-radius: 50px;
		color: #ffffff!important
	}
	#mainNav .nav li a:nth-child(n) {
		/*text-align: center;*/
		/*line-height: 0.3rem;*/
		padding: 0 0.23rem;
	}
	.hc-fly {
		width: 45%;
		height: 100vh;
		position: absolute;
		top: 15%;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		opacity: 1;
		transition: 1s
	}
	.hc-fly img:nth-child(1) {
		width: 75%;
		display: block;
		margin: 0 auto
	}
	.hc-fly p:nth-child(3) {
		height: 20px;
		font-size: 18px;
		text-align: center;
		color: rgba(255, 255, 255, .6);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 37%;
		letter-spacing: 2px
	}
	.hc-fly p:nth-child(4) {
		height: 20px;
		font-size: 28px;
		text-align: center;
		color: rgba(255, 255, 255, .9);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 22%
	}
}


.slides-box{
	display: none;
}

.logo {
	width: 170px;
	height: 52px;
	float: left;
	margin-top: 24px;
}

.navbar {
	margin-bottom: 0px;
}

nav a {
	font-size: 18px;
}

font-size: 18px;

}
nav ul {
	margin-left: ;
}
.navbar-default .navbar-nav>li>a {
	color: #FFFFFF;
}
.navbar-default:hover .navbar-nav>li>.nav-on {
	color: #FFFFFF;
}
.navbar-default .navbar-nav>li:hover>.nav-on {
	opacity: 0;
	transition: all 0.2s;
}
@media only screen and (min-width:1100px) {
	.p1100 {
		display: none
	}
	
	.hc-top-up .hc-logobox {
		display: inline-block;
	}
	
	.hc-top-nd .hc-logobox {
		display: inline-block;
		padding: 10px;
		border-right: 1px solid rgba(0, 0, 0, .4)
	}
	
	#mainNav .hc-logobox img {
		height: 100%
	}
	
	#mainNav .dsi img {
		height: 40px;
		display: none;
	}
	
	#mainNav .hc-contact,
	#mainNav .hc-navbox {
		height: 30px;
		overflow: hidden;
	}
	
	#mainNav .hc-navbox li {
		transition: .5s;
		top: 0;
		padding: 0 5px;
		font-size: 16px;
	}
	
	#mainNav .hc-navbox li:hover {
		transition: .5s;
		top: -30px
	}
	
	#mainNav .hc-contact a {
		padding: 0 25px;
		line-height: 28px;
		display: inline-block;
		color: #666;
		transition: .5s
	}
	
	#mainNav .hc-contact a:nth-child(1),
	#mainNav .hc-contact a:hover {
		transition: .5s;
		color: #0583c4;
		line-height: 24px;
		font-size: 18px;
		font-weight: bold;
		height: 100%;
		width: 100%;
		display: block;
		background: url(../img/tel.png) left center no-repeat;
		background-size: auto auto;
	}
	
	#mainNav .hc-navbox li>.nav-off,
	#mainNav .hc-navbox li:hover>.nav-off {
		border-radius: 50px;
		color: #ffffff!important
	}
	
	#mainNav .nav li a:nth-child(n) {
		text-align: center;
		line-height: 30px;
		display: block;
		padding: 0 23px
	}
	
	.hc-fly {
		width: 45%;
		height: 100vh;
		position: absolute;
		top: 15%;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		opacity: 1;
		transition: 1s
	}
	
	.hc-fly img:nth-child(1) {
		width: 75%;
		display: block;
		margin: 0 auto
	}
	
	.hc-fly p:nth-child(3) {
		height: 20px;
		font-size: 18px;
		text-align: center;
		color: rgba(255, 255, 255, .6);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 37%;
		letter-spacing: 2px
	}
	
	.hc-fly p:nth-child(4) {
		height: 20px;
		font-size: 28px;
		text-align: center;
		color: rgba(255, 255, 255, .9);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 22%
	}
}
@media only screen and (max-width:768px) {
	.p768 {
		display: none
	}
	.slides-box{
		display: block;
	}
	
	.content{
		display: none;
	}
	.new{
		display: none;
	}
	.banner{
		display: none;
	}
	footer{
		display: none;
	}
	.dibu{
		display: none;
	}
	
	.dbd{
		display: none;
	}
	.cd-main-search{
		display: none;
	}
	.cd-search-trigger {display: none;}
	
	
.daoxian {
		z-index: 10000;
		height: 1px;
		width: 96%;
		background-color: #cccccc;
		margin-left: 0.2rem;
		display: block;
	}
	.zhixiang{
		position: absolute;
		top: 0.5rem;
		left: 9.9rem;
		width: 26px;
		height: 50px;
		background-color: #999999;
		display: block;
		z-index: 1000;
		
	}
	
	nav .logo {
		width: 3.1rem;
		height: 0.94rem;
		float: left;
		margin-top: 0.60rem;
		margin-left: 0.59rem;
	}
	
	.logo img {
		width: 3.1rem;
		height: 0.94rem;
		float: left;
	}
	
	.hc-top-up {
		width: 100%;
		height: 2rem;
		z-index: 2;
	}
	
	.hc-top-nd {
		border: 0;
		width: 100%;
		height: 2rem;
	}
	
	.container-fluid {}
	
	.hc-navbox {
		width: 100%;
		position: absolute;
		top: 0;
		background: rgba(255, 255, 255, 1);
		z-index: -1;
		margin-top: -15px;
		margin-left: 0px;
		padding-top: 0;
		height: 0;
		overflow: hidden;
		opacity: 0;
		transition: .5s
	}
	
	.hc-navbox01 {
		width: 100%;
		position: absolute;
		top: 0;
		background-color: #f1f1f1;
		z-index: -1;
		margin: 0;
		padding-top: 2rem;
		/*height: 100vh;*/
		overflow: hidden;
		opacity: 1;
		transition: .5s
	}
	
	#navBox li {
		height: 2.4rem;
		width: 100%;
		font-size: 1.2em;
		background-color: #FFFFFF;
	}
	
	.navbar-nav>li>a {
		padding-top: 0;
		padding-bottom: 0;
		line-height: 2.3rem;
	}
	
	.navbar .nav>li>a {
		position: relative;
		display: block;
		padding: 0;
		padding-left: 0.92rem;
	}
	
	.navbar .nav .sousuo {
		display: none;
	}
	
	#navBox li:active {
		background: #fff
	}
	
	#navBox li .nav-on {
		display: none
	}
	
	#mainNav .dis img {
		height: 50px;
		padding: 10px;
		display: none;
	}
	
	.navbar-default .navbar-nav>li>a {
		color: #333333;
		font-size: 14px;
	}
	
	#mainNav .hc-oi {
		width: 24px;
		height: 24px;
		background-color: #FFFFFF;
		position: absolute;
		right: 20px;
		top: 35%;
	}
	
	#mainNav .hc-io {
		width: 96%;
		height: 1.35rem;
		background: #666666;
		position: absolute;
		right: 0.22rem;
		top: 16.95rem;
	}
	
	#mainNav .hc-oi em {
		position: absolute;
		left: 50%;
		top: 50%;
		bottom: auto;
		right: auto;
		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		-o-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		display: inline-block;
		width: 16px;
		height: 2px;
		background-color: #ffffff;
		z-index: 10
	}
	
	#mainNav .hc-oi em::before,
	#mainNav .hc-oi em:after,
	#mainNav .hc-oi em::before,
	#mainNav .hc-oi em:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-ms-transform: translateZ(0);
		-o-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transition: -webkit-transform .3s;
		-moz-transition: -moz-transform .3s;
		transition: transform .3s
	}
	
	#mainNav .hc-oi em::before {
		-webkit-transform: translateY(-6px) rotate(0deg);
		-moz-transform: translateY(-6px) rotate(0deg);
		-ms-transform: translateY(-6px) rotate(0deg);
		-o-transform: translateY(-6px) rotate(0deg);
		transform: translateY(-6px) rotate(0deg)
	}
	
	#mainNav .hc-oi em::after {
		-webkit-transform: translateY(6px) rotate(0deg);
		-moz-transform: translateY(6px) rotate(0deg);
		-ms-transform: translateY(6px) rotate(0deg);
		-o-transform: translateY(6px) rotate(0deg);
		transform: translateY(6px) rotate(0deg)
	}
	
	#mainNav .hc-io em {
		background: transparent
	}
	
	#mainNav .hc-io em::before {
		-webkit-transform: translateY(0px) rotate(45deg);
		-moz-transform: translateY(0px) rotate(45deg);
		-ms-transform: translateY(0px) rotate(45deg);
		-o-transform: translateY(0px) rotate(45deg);
		transform: translateY(0px) rotate(45deg)
	}
	
	#mainNav .hc-io em::after {
		-webkit-transform: translateY(0px) rotate(-45deg);
		-moz-transform: translateY(0px) rotate(-45deg);
		-ms-transform: translateY(0px) rotate(-45deg);
		-o-transform: translateY(0px) rotate(-45deg);
		transform: translateY(0px) rotate(-45deg)
	}
	
	.hc-fly {
		width: 100%;
		height: 100vh;
		position: relative
	}
	
	.hc-fly .fly-one {
		width: 75%;
		position: absolute;
		left: 50%;
		top: 20%;
		margin-left: -37%;
		opacity: 1
	}
	
	.hc-fly .fly-two {
		width: 100%;
		height: 30vh;
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		background: rgba(252, 203, 13, .5);
		opacity: 1
	}
	
	.hc-fly .fly-three {
		height: 20px;
		font-size: 18px;
		text-align: center;
		color: rgba(255, 255, 255, .8);
		position: absolute;
		z-index: 2;
		left: 0;
		right: 0;
		bottom: 25vh;
		letter-spacing: 2px
	}
	
	.hc-fly .fly-four {
		height: 20px;
		font-size: 18px;
		text-align: center;
		color: #fff;
		position: absolute;
		z-index: 2;
		left: 0;
		right: 0;
		bottom: 15vh;
		letter-spacing: 2px
	}
}
@media only screen and (min-width:769px) and (max-width:1099px) {
	.p768 {
		display: none
	}
	
	.slides-box{
		display: block;
	}
	.content{
		display: none;
	}
	.new{
		display: none;
	}
	.banner{
		display: none;
	}
	footer{
		display: none;
	}
	.dibu{
		display: none;
	}
	
	
	.navbar-default .navbar-nav>li>a {
		color: #333333;
		position: relative;
		display: block;
		padding: 0;
		line-height: 2.3rem;
		padding-left: 0.92rem;
	}
	
.daoxian {
		z-index: 10000;
		height: 2px;
		width: 96%;
		background-color: #cccccc;
		padding-left: 0.2rem;
		display: block;
	}
.zhixiang{
		position: absolute;
		top: 0.5rem;
		left: 9.9rem;
		width: 26px;
		height: 50px;
		background-color: #999999;
		display:block;
		z-index: 1000;
		
	}
	
	.hc-navbox {
		width: 100%;
		position: absolute;
		top: 0;
		background: rgba(255, 255, 255, .9);
		z-index: -1;
		margin: 0 -15px;
		padding-top: 0;
		height: 0;
		overflow: hidden;
		opacity: 0;
		transition: .5s
	}
	
	.hc-navbox01 {
		width: 100%;
		position: absolute;
		top: 0;
		background: #f1f1f1;
		z-index: -1;
		padding-top: 1rem;
		height: 100vh;
		opacity: 1;
		transition: .5s
	}
	
	#navBox li {
		height: 2.3rem;
		width: 100%;
		font-size: 1.2em;
		background-color: #FFFFFF;
		line-height: 2.3rem;
	}
	
	#navBox li:active {
		background: #fff
	}
	
	#navBox li .nav-on {
		display: none
	}
	
	#mainNav .hc-logobox img {}
	
	#mainNav .hc-oi {
		width: 24px;
		height: 24px;
		background-color: #FFFFFF;
		position: absolute;
		right: 20px;
		top: 35%;
	}
	
	#mainNav .hc-io {
		width: 96%;
		height: 1.35rem;
		background: #666666;
		position: absolute;
		right: 0.22rem;
		top: 15.5rem;
	}
	
	#mainNav .hc-oi em {
		position: absolute;
		left: 50%;
		top: 50%;
		bottom: auto;
		right: auto;
		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		-o-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		display: inline-block;
		width: 16px;
		height: 2px;
		background-color: #353535;
		z-index: 10
	}
	
	#mainNav .hc-oi em::before,
	#mainNav .hc-oi em:after,
	#mainNav .hc-oi em::before,
	#mainNav .hc-oi em:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: #353535;
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-ms-transform: translateZ(0);
		-o-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transition: -webkit-transform .3s;
		-moz-transition: -moz-transform .3s;
		transition: transform .3s
	}
	
	#mainNav .hc-oi em::before {
		-webkit-transform: translateY(-6px) rotate(0deg);
		-moz-transform: translateY(-6px) rotate(0deg);
		-ms-transform: translateY(-6px) rotate(0deg);
		-o-transform: translateY(-6px) rotate(0deg);
		transform: translateY(-6px) rotate(0deg)
	}
	
	#mainNav .hc-oi em::after {
		-webkit-transform: translateY(6px) rotate(0deg);
		-moz-transform: translateY(6px) rotate(0deg);
		-ms-transform: translateY(6px) rotate(0deg);
		-o-transform: translateY(6px) rotate(0deg);
		transform: translateY(6px) rotate(0deg)
	}
	
	#mainNav .hc-io em {
		background: transparent
	}
	
	#mainNav .hc-io em::before {
		-webkit-transform: translateY(0px) rotate(45deg);
		-moz-transform: translateY(0px) rotate(45deg);
		-ms-transform: translateY(0px) rotate(45deg);
		-o-transform: translateY(0px) rotate(45deg);
		transform: translateY(0px) rotate(45deg)
	}
	
	#mainNav .hc-io em::after {
		-webkit-transform: translateY(0px) rotate(-45deg);
		-moz-transform: translateY(0px) rotate(-45deg);
		-ms-transform: translateY(0px) rotate(-45deg);
		-o-transform: translateY(0px) rotate(-45deg);
		transform: translateY(0px) rotate(-45deg)
	}
	
	.hc-fly {
		width: 100%;
		height: 100vh;
		position: relative
	}
	
	.hc-fly .fly-one {
		width: 75%;
		position: absolute;
		left: 50%;
		top: 20%;
		margin-left: -37%;
		opacity: 1
	}
	
	.hc-fly .fly-two {
		width: 100%;
		height: 30vh;
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		background: rgba(252, 203, 13, .5);
		opacity: 1
	}
	
	.hc-fly .fly-three {
		height: 20px;
		font-size: 18px;
		text-align: center;
		color: rgba(255, 255, 255, .8);
		position: absolute;
		z-index: 2;
		left: 0;
		right: 0;
		bottom: 25vh;
		letter-spacing: 2px
	}
	
	.hc-fly .fly-four {
		height: 20px;
		font-size: 18px;
		text-align: center;
		color: #fff;
		position: absolute;
		z-index: 2;
		left: 0;
		right: 0;
		bottom: 15vh;
		letter-spacing: 2px
	}
	
	.dis {
		display: block;
	}
	
	.dsi {
		display: none;
	}
	
	.navbar-fixed-top {}
}
//
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
	position: relative;
	min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
	margin-bottom: @navbar-margin-bottom;
	border: 1px solid transparent;
	// Prevent floats from breaking the navbar
	&:extend(.clearfix all);
	@media (min-width: @grid-float-breakpoint) {
		border-radius: @navbar-border-radius;
	}
}
// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.
.navbar-header {
	&:extend(.clearfix all);
	@media (min-width: @grid-float-breakpoint) {
		float: left;
	}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.
.navbar-collapse {
	overflow-x: visible;
	padding-right: @navbar-padding-horizontal;
	padding-left: @navbar-padding-horizontal;
	border-top: 1px solid transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	&:extend(.clearfix all);
	-webkit-overflow-scrolling: touch;
	&.in {
		overflow-y: auto;
	}
	
	@media (min-width: @grid-float-breakpoint) {
		width: auto;
		border-top: 0;
		box-shadow: none;
		&.collapse {
			display: block !important;
			height: auto !important;
			padding-bottom: 0; // Override default setting
			overflow: visible !important;
		}
		&.in {
			overflow-y: visible;
		}
		// Undo the collapse side padding for navbars with containers to ensure
		// alignment of right-aligned contents.
		.navbar-fixed-top &,
		.navbar-static-top &,
		.navbar-fixed-bottom & {
			padding-left: 0;
			padding-right: 0;
		}
	}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
	.navbar-collapse {
		max-height: @navbar-collapse-max-height;
		@media (max-device-width: @screen-xs-min) and (orientation: landscape) {
			max-height: 200px;
		}
	}
}
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
.container,
.container-fluid {
	>.navbar-header,
	>.navbar-collapse {
		margin-right: -@navbar-padding-horizontal;
		margin-left: -@navbar-padding-horizontal;
		@media (min-width: @grid-float-breakpoint) {
			margin-right: 0;
			margin-left: 0;
		}
	}
}
//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
	z-index: @zindex-navbar;
	border-width: 0 0 1px;
	@media (min-width: @grid-float-breakpoint) {
		border-radius: 0;
	}
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
	position: fixed;
	right: 0;
	left: 0;
	z-index: @zindex-navbar-fixed;
	// Undo the rounded corners
	@media (min-width: @grid-float-breakpoint) {
		border-radius: 0;
	}
}
.navbar-fixed-top {
	top: 0;
	border-width: 0 0 0px;
}
ol li.red {
	background: #ff0
}
.navbar-fixed-bottom {
	bottom: 0;
	margin-bottom: 0; // override .navbar defaults
	border-width: 1px 0 0;
}
// Brand/project name
.navbar-brand {
	float: left;
	padding: @navbar-padding-vertical @navbar-padding-horizontal;
	font-size: @font-size-large;
	line-height: @line-height-computed;
	height: @navbar-height;
	&:hover,
	&:focus {
		text-decoration: none;
	}
	
	>img {
		display: block;
	}
	
	@media (min-width: @grid-float-breakpoint) {
		.navbar>.container &,
		.navbar>.container-fluid & {
			margin-left: -@navbar-padding-horizontal;
		}
	}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggle {
	position: relative;
	float: right;
	margin-right: @navbar-padding-horizontal;
	padding: 9px 10px;
	.navbar-vertical-align(34px);
	background-color: transparent;
	background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
	border: 1px solid transparent;
	border-radius: @border-radius-base;
	// We remove the `outline` here, but later compensate by attaching `:hover`
	// styles to `:focus`.
	&:focus {
		outline: 0;
	}
	
	// Bars
	.icon-bar {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 1px;
	}
	
	.icon-bar+.icon-bar {
		margin-top: 4px;
	}
	
	@media (min-width: @grid-float-breakpoint) {
		display: none;
	}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
	margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
	>li>a {
		padding-top: 10px;
		padding-bottom: 10px;
		line-height: @line-height-computed;
	}
	
	@media (max-width: @grid-float-breakpoint-max) {
		// Dropdowns get custom display when collapsed
		.open .dropdown-menu {
			position: static;
			float: none;
			width: auto;
			margin-top: 0;
			background-color: transparent;
			border: 0;
			box-shadow: none;
			>li>a,
			.dropdown-header {
				padding: 5px 15px 5px 25px;
			}
			>li>a {
				line-height: @line-height-computed;
				&:hover,
				&:focus {
					background-image: none;
				}
			}
		}
	}
	
	// Uncollapse the nav
	@media (min-width: @grid-float-breakpoint) {
		float: left;
		margin: 0;
		>li {
			float: left;
			>a {
				padding-top: @navbar-padding-vertical;
				padding-bottom: @navbar-padding-vertical;
			}
		}
	}
}
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.
.navbar-form {
	margin-left: -@navbar-padding-horizontal;
	margin-right: -@navbar-padding-horizontal;
	padding: 10px @navbar-padding-horizontal;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	@shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
	0 1px 0 rgba(255, 255, 255, .1);
	.box-shadow(@shadow);
	// Mixin behavior for optimum display
	.form-inline();
	.form-group {
		@media (max-width: @grid-float-breakpoint-max) {
			margin-bottom: 5px;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	
	// Vertically center in expanded, horizontal navbar
	.navbar-vertical-align(@input-height-base);
	// Undo 100% width for pull classes
	@media (min-width: @grid-float-breakpoint) {
		width: auto;
		border: 0;
		margin-left: 0;
		margin-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		.box-shadow(none);
	}
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav>li>.dropdown-menu {
	margin-top: 0;
	.border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu {
	margin-bottom: 0;
	.border-top-radius(@navbar-border-radius);
	.border-bottom-radius(0);
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
	.navbar-vertical-align(@input-height-base);
	&.btn-sm {
		.navbar-vertical-align(@input-height-small);
	}
	
	&.btn-xs {
		.navbar-vertical-align(22);
	}
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
	.navbar-vertical-align(@line-height-computed);
	@media (min-width: @grid-float-breakpoint) {
		float: left;
		margin-left: @navbar-padding-horizontal;
		margin-right: @navbar-padding-horizontal;
	}
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
//
// Declared after the navbar components to ensure more specificity on the margins.
@media (min-width: @grid-float-breakpoint) {
	.navbar-left {
		.pull-left();
	}
	
	.navbar-right {
		.pull-right();
		margin-right: -@navbar-padding-horizontal;
		~.navbar-right {
			margin-right: 0;
		}
	}
}
// Alternate navbars
// --------------------------------------------------
// Default navbar
.navbar-default {
	background-color: @navbar-default-bg;
	border-color: @navbar-default-border;
	.navbar-brand {
		color: @navbar-default-brand-color;
		&:hover,
		&:focus {
			color: @navbar-default-brand-hover-color;
			background-color: @navbar-default-brand-hover-bg;
		}
	}
	
	.navbar-text {
		color: @navbar-default-color;
	}
	
	.navbar-nav {
		>li>a {
			color: @navbar-default-link-color;
			&:hover,
			&:focus {
				color: @navbar-default-link-hover-color;
				background-color: @navbar-default-link-hover-bg;
			}
		}
		>.active>a {
			&,
			&:hover,
			&:focus {
				color: @navbar-default-link-active-color;
				background-color: @navbar-default-link-active-bg;
			}
		}
		>.disabled>a {
			&,
			&:hover,
			&:focus {
				color: @navbar-default-link-disabled-color;
				background-color: @navbar-default-link-disabled-bg;
			}
		}
	}
	
	.navbar-toggle {
		border-color: @navbar-default-toggle-border-color;
		&:hover,
		&:focus {
			background-color: @navbar-default-toggle-hover-bg;
		}
		.icon-bar {
			background-color: @navbar-default-toggle-icon-bar-bg;
		}
	}
	
	.navbar-collapse,
	.navbar-form {
		border-color: @navbar-default-border;
	}
	
	// Dropdown menu items
	.navbar-nav {
		// Remove background color from open dropdown
		>.open>a {
			&,
			&:hover,
			&:focus {
				background-color: @navbar-default-link-active-bg;
				color: @navbar-default-link-active-color;
			}
		}
		@media (max-width: @grid-float-breakpoint-max) {
			// Dropdowns get custom display when collapsed
			.open .dropdown-menu {
				>li>a {
					color: @navbar-default-link-color;
					&:hover,
					&:focus {
						color: @navbar-default-link-hover-color;
						background-color: @navbar-default-link-hover-bg;
					}
				}
				>.active>a {
					&,
					&:hover,
					&:focus {
						color: @navbar-default-link-active-color;
						background-color: @navbar-default-link-active-bg;
					}
				}
				>.disabled>a {
					&,
					&:hover,
					&:focus {
						color: @navbar-default-link-disabled-color;
						background-color: @navbar-default-link-disabled-bg;
					}
				}
			}
		}
	}
	
	// Links in navbars
	//
	// Add a class to ensure links outside the navbar nav are colored correctly.
	.navbar-link {
		color: @navbar-default-link-color;
		&:hover {
			color: @navbar-default-link-hover-color;
		}
	}
	
	.btn-link {
		color: @navbar-default-link-color;
		&:hover,
		&:focus {
			color: @navbar-default-link-hover-color;
		}
		&[disabled],
		fieldset[disabled] & {
			&:hover,
			&:focus {
				color: @navbar-default-link-disabled-color;
			}
		}
	}
}
// Inverse navbar
.navbar-inverse {
	background-color: @navbar-inverse-bg;
	border-color: @navbar-inverse-border;
	.navbar-brand {
		color: @navbar-inverse-brand-color;
		&:hover,
		&:focus {
			color: @navbar-inverse-brand-hover-color;
			background-color: @navbar-inverse-brand-hover-bg;
		}
	}
	
	.navbar-text {
		color: @navbar-inverse-color;
	}
	
	.navbar-nav {
		>li>a {
			color: @navbar-inverse-link-color;
			&:hover,
			&:focus {
				color: @navbar-inverse-link-hover-color;
				background-color: @navbar-inverse-link-hover-bg;
			}
		}
		>.active>a {
			&,
			&:hover,
			&:focus {
				color: @navbar-inverse-link-active-color;
				background-color: @navbar-inverse-link-active-bg;
			}
		}
		>.disabled>a {
			&,
			&:hover,
			&:focus {
				color: @navbar-inverse-link-disabled-color;
				background-color: @navbar-inverse-link-disabled-bg;
			}
		}
	}
	
	// Darken the responsive nav toggle
	.navbar-toggle {
		border-color: @navbar-inverse-toggle-border-color;
		&:hover,
		&:focus {
			background-color: @navbar-inverse-toggle-hover-bg;
		}
		.icon-bar {
			background-color: @navbar-inverse-toggle-icon-bar-bg;
		}
	}
	
	.navbar-collapse,
	.navbar-form {
		border-color: darken(@navbar-inverse-bg, 7%);
	}
	
	// Dropdowns
	.navbar-nav {
		>.open>a {
			&,
			&:hover,
			&:focus {
				background-color: @navbar-inverse-link-active-bg;
				color: @navbar-inverse-link-active-color;
			}
		}
		@media (max-width: @grid-float-breakpoint-max) {
			// Dropdowns get custom display
			.open .dropdown-menu {
				>.dropdown-header {
					border-color: @navbar-inverse-border;
				}
				.divider {
					background-color: @navbar-inverse-border;
				}
				>li>a {
					color: @navbar-inverse-link-color;
					&:hover,
					&:focus {
						color: @navbar-inverse-link-hover-color;
						background-color: @navbar-inverse-link-hover-bg;
					}
				}
				>.active>a {
					&,
					&:hover,
					&:focus {
						color: @navbar-inverse-link-active-color;
						background-color: @navbar-inverse-link-active-bg;
					}
				}
				>.disabled>a {
					&,
					&:hover,
					&:focus {
						color: @navbar-inverse-link-disabled-color;
						background-color: @navbar-inverse-link-disabled-bg;
					}
				}
			}
		}
	}
	
	.navbar-link {
		color: @navbar-inverse-link-color;
		&:hover {
			color: @navbar-inverse-link-hover-color;
		}
	}
	
	.btn-link {
		color: @navbar-inverse-link-color;
		&:hover,
		&:focus {
			color: @navbar-inverse-link-hover-color;
		}
		&[disabled],
		fieldset[disabled] & {
			&:hover,
			&:focus {
				color: @navbar-inverse-link-disabled-color;
			}
		}
	}
}