/*** Navigation / #top-nav, .page-border, .ext-nav, .ext-nav-toggle, .responsive-nav, .sidebar ***/
@page-border-w: 25px;
@page-border-padding-b: 15px;
@upper: 20px;
@state2-line-h: 28px;
@state2-line-h-b: 40px;
@state1-line-h: 2 * @upper + @state2-line-h;
@state1-line-h-b: 45px;
@top-nav-padding: 10px;
@top-nav-padding-b: 0px;
@state1-h: @state1-line-h + (2 * @top-nav-padding);
@state1-h-b: @page-border-w + @page-border-padding-b;
@state2-h: @state2-line-h + (2 * @top-nav-padding);
@state2-h-b: @state2-line-h-b + (2 * @top-nav-padding-b);
@admin-bar-h: 32px;
.top-nav-line(@h){
	line-height: @h;
	.sub-menu li{
		line-height: 20px;
	}
}
#top-nav{
	position: fixed;
	right: 0;
	left: 0;
	z-index: 1030;
	top: 0;
	min-height: 0px;
	margin: 0;
	border: none;
	font-weight: @fw-800;
	a, a span{
		.transition(~"color 0.2s");
	}
	.full .logo{
		padding-left: 15px;
		padding-right: 15px;
	}
	nav, h3{
		line-height: inherit;
	}
	.top-nav-inner{
		padding-top: @top-nav-padding;
		padding-bottom: @top-nav-padding;
		padding-left: @page-border-w + 15px;
		padding-right: @page-border-w + 15px;
		&.layout-boxed{
			padding-left: 15px;
			padding-right: 15px;
		}
	}
	.dropdown-menu>li>a{
		font-weight: @fw-800;
	}
	li{
		text-transform: uppercase;
	}
	li{
		.resp-prop-big(font-size, 12px, 9px);
		.resp-prop-big(margin-left, 15px, 7px);
		.resp-prop-big(margin-right, 15px, 7px);
	}
	.navbar-brand{
		font-weight: @fw-800;
		height: auto;
		.resp-prop-big(font-size, 20px, 16px);
	}
	.dom-ready &{//.dom-ready for IE Fix
		.transition(~"line-height 0.5s, top 0.5s, right 0.5s, left 0.5s, bottom 0.5s");
	}
	.logo .custom-logo-link{
		line-height: 1px;
	}
	.state1 &{
		.top-nav-line(@state1-line-h);
	}
	.state2 &{
		.top-nav-line(@state2-line-h);
	}
	.ext-nav-toggle, .responsive-nav{
		margin-left: 15px;
		margin-right: 15px;
		.dom-ready &{//.dom-ready for IE Fix
			.transition(~"height 0.5s");
		}
		.state1 &{
			height: @state1-h - 20px;
		}
		.state2 &{
			height: @state2-h - 20px;
		}
	}
	.logo{
		font-size: 0px;
		h3.sitename{
			font-size: 20px;
			font-weight: @fw-800;
			text-transform: inherit;
			margin-top: 0;
			margin-bottom: 0;
			letter-spacing: .9px;
			.resp-prop-big(font-size, 20px, 15px);
		}
	}
	.site-logo-link img{
		max-height: 28px;
	}
	&.top-nav-logo-left{
		.logo{
			float: left;
		}
		.nav{
			float: right;
		}
		.menu-toggle{
			float: right;
		}
	}
	&.top-nav-logo-right{
		.logo{
			float: right;
		}
		.nav{
			float: left;
			@media (max-width: 767px){
				float: right;
			}
		}
		.menu-toggle{
			float: right;
		}
	}
}
.nav li {
    margin-right: 15px;
    margin-left: 15px;
}
.page-border{
	z-index: 1030;
	position: fixed;
	&.left{
		left: 0;
		top: @state2-h;
		.state1 &{
			top: @state1-h;
		}
		bottom: @page-border-w;
		width: @page-border-w;
		.transition(~"top 0.5s, right 0.5s, left 0.5s, bottom 0.5s, height 0.5s");
		*{
			background-color: transparent !important;
		}
		ul{
			position: fixed;
			width: @page-border-w;
			top: 50%;
			left: 0;
			.transform(~"translateY(-50%)");
			padding-left: 0;
			list-style: none;
			.transition(~"top 0.5s, right 0.5s, left 0.5s, bottom 0.5s");
			&>li{
				text-align: center;
				padding: 3px 0;
			}
		}
	}
	&.right{
		right: 0;
		top: @state2-h;
		.state1 &{
			top: @state1-h;
		}
		bottom: @page-border-w;
		width: @page-border-w;
		.transition(~"top 0.5s, right 0.5s, left 0.5s, bottom 0.5s, height 0.5s");
	}
	&.bottom{
		bottom: 0;
		right: 0;
		left: 0;
		height: @page-border-w;
		text-align: center;
		font-weight: @fw-800;
		text-transform: uppercase;
		padding-top: round((@page-border-w - 21px)/2);
		font-size: 12px;
		letter-spacing: 1px;
		.transition(~"top 0.5s, right 0.5s, left 0.5s, bottom 0.5s");
		a{
			line-height: 15px;
			text-decoration: none;
		}
		.to-top{
			display: inline;
		}
		.scroll-down{
			display: none;
		}
		.on-top &{
			.to-top{
				display: none;
			}
			.scroll-down{
				display: inline;
			}
		}
	}
	&.top{
		display: none;
		.transition(~"height 0.5s, top 0.5s, right 0.5s, left 0.5s, bottom 0.5s");
	}
	&.border-pad{
		height: 100px;
		top: auto !important;
		bottom: @page-border-w - 10px;
		.state1 &{
			bottom: @page-border-w - 10px;
		}
	}
}
.wrapper-content{
	padding-left: @page-border-w;
	padding-right: @page-border-w;
	padding-top: @state2-h;
}
#footer{
	padding: 0 @page-border-w @page-border-w @page-border-w;
	.ie10 &{
		padding: 0 @page-border-w (@page-border-w - 1px) @page-border-w;
	}
	.footer-menu{
		padding-bottom: 11px;
		nav{
			ul{
				float: left;
				 &>li{
					float: left;
					margin: 0 10px;
					a{
						display: block;
						text-align: center;
						font-weight: @fw-700;
						text-transform: uppercase;
						letter-spacing: 3px;
					}
				}
			}
		}
	}
}
@media only screen and (min-width: 1100px){
	.created-using-layers{
		bottom: 40px;
		right: 40px;
	}
}
.admin-bar{
	#top-nav, .page-border.left, .page-border.right{
		top: @admin-bar-h;
	}
}
@media (max-width: 767px) {
	.wrapper-content{
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;
	}
	#footer{
		padding: 0;
	}
	.page-border.left, .page-border.right, .page-border.bottom{
		display: none;
	}
	#top-nav{
		margin: 0;
	}
}
.ext-nav{
	position: fixed;
	z-index: 1030;
	bottom: 0px;
	bottom: @page-border-w;
	left: @page-border-w;
	right: @page-border-w;
	top: @state2-h;
	opacity: 0;
	visibility: hidden;
	overflow: auto;
	&>.full-height>.row>a{
		&.span-1, &.span-2, &.span-3, &.span-4{
			@media (max-width: 1023px) {
				width: 50%;
				max-width: 50%;
			}
			@media (max-width: 480px) {
				width: 100%;
				max-width: 100%;
			}
		}
	}
	&.show{
		opacity: 1;
		visibility: visible;
	}
	a{
		div{
			position: absolute;
			top: 50%;
			left: 50%;
			.transform(~"translate(-50%, -50%)");
			max-width: none;
			line-height: 30px;
			span{
				display: block;
			}
			.side-title{
				font-size: 30px;
				line-height: 39px;
				font-weight: @fw-800;
				.hover-effect-nonhover(20px, 5px);
			}
		}
	}
	a:hover{
		div{
			.side-title{
				.hover-effect-hover();
			}
		}
	}
	.transition(~"all 0.5s ease-in-out");
	@media (max-width: 767px) {
		bottom: 0;
		left: 0;
		right: 0;
	}
	@media (max-width: 1023px) {
		.full-height{
			height: auto;
		}
		.half-height{
			height: auto;
		}
		a{
			height: 250px !important;
		}
	}
}
.ext-nav-toggle, .responsive-nav{
	@menu-toggle-w: 22px;
	display: block;
	background: 0 0;
	width: @menu-toggle-w;
	height: 20px;
	position: relative;
	text-decoration: none;
	cursor: pointer;
	span{
		display: inline-block;
		position: absolute;
		left: 50%;
		top: 50%;
		bottom: auto;
		right: auto;
		.transform(~"translateX(-50%) translateY(-50%)");
		width: @menu-toggle-w;
		height: 2px;
		.transition(~"all .3s");
		&:before, &:after{
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #fff;
			right: 0;
			.transform(~"translateZ(0)");
			backface-visibility: hidden;
			.transition(~"all .3s");
		}
		&:after{
			.transform(~"translateY(6px) rotate(0deg)");
		}
		&:before{
			.transform(~"translateY(-6px) rotate(0deg)");
		}
	}
	&:hover{
		span{
			&:after{
				.transform(~"translateY(8px) rotate(0deg)");
			}
			&:before{
				.transform(~"translateY(-8px) rotate(0deg)");
			}
		}
	}
	&.show{
		span{
			&:after{
				.transform(~"translateY(0px) rotate(45deg)");
			}
			&:before{
				.transform(~"translateY(0px) rotate(-45deg)");
			}
		}
	}
}
.responsive-nav {
	border: none;
	margin: 0;
	@media (min-width: 769px){
		display: none;
	}
}
.ext-nav-toggle, .responsive-nav{
	&.show{
		span{
			background-color: transparent !important;
		}
	}
}
.main-navigation{
	*:not(span){
		color: inherit;
		&:hover{
			color: inherit;
		}
	}
}