Viewing File: /home/maglabs/2vsa/wp-content/themes/cargohub/css/nav.less

.nav {
	line-height: 40px;

	a {
		font-weight: 600;
		font-size: 14px;
		color: @heading-color;
		display: block;
		font-family: @font-family-secondary;
	}

	ul {
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;

		ul {
			transition: top 0.3s ease 0s, opacity 0.3s;
			position: absolute;
			top: 110%;
			left: 8px;
			width: 270px;
			transform: scaleX(0);
			background-color: #fff;
			margin-top: 31px;
			padding: 15px 0;
			z-index: 9999;

			&:before {
				content: '';
				width: 100%;
				height: 40px;
				position: absolute;
				background-color: transparent;
				left: 0;
				top: -40px;
			}

			ul {
				transition: left 0.3s ease 0s, opacity 0.3s;
				left: 115%;
				top: 0;
				box-shadow: none;
				margin-top: 0;
				z-index: 9999;

				&:before {
					content: '';
					width: 10px;
					height: 100%;
					position: absolute;
					background-color: transparent;
					top: 0;
					left: -10px;
				}
			}
		}
	}

	li {
		display: inline-block;
		position: relative;

		&:hover {
			& > ul {
				opacity: 1;
				top: 92%;
				transform: scaleX(1);
			}
		}

		li {
			padding: 12px 30px;
			display: block;
			line-height: 1.2;
			transition: all 0.5s;
			position: relative;

			&:last-child {
				border-bottom: 0;
			}

			&:hover {
				background-color: @secondary-color;

				& > a {
					color: #fff;
				}

				& > ul {
					top: 0;
					left: calc(~ '100% + 10px' );
				}
			}
		}
	}

	ul.menu {
		.clearfix();

		& > li {
			display: block;
			float: left;
			position: relative;
			padding: 9px 19px;

			& > a {
				text-transform: uppercase;
				padding-top: 0;
				padding-bottom: 0;
				position: relative;
				z-index: 99;
			}

			&:first-child {
				& > ul {
					left: 0;
				}
			}

			&:last-child {
				border: none;
			}

			&.menu-item-has-children {
				& > a {
					&:before {
						content: '\f107';
						font-family: FontAweSome;
						position: absolute;
						top: 50%;
						right: -13px;
						transform: translateY(-50%);
					}
				}
			}

			&:hover,
			&.current-menu-item,
			&.current-menu-parent,
			&.current_page_item {
				& > a {
					color: @primary-color;
				}
			}
		}
	}

	div.menu {
		& > ul {
			.clearfix();

			& > li {
				display: block;
				float: left;
				position: relative;
				padding: 9px 19px;

				& > a {
					text-transform: uppercase;
					padding-top: 0;
					padding-bottom: 0;
					position: relative;
					z-index: 99;
				}

				&:first-child {
					& > ul {
						left: 0;
					}
				}

				&.page_item_has_children {
					& > a {
						&:before {
							content: '\f107';
							font-family: FontAweSome;
							position: absolute;
							top: 50%;
							right: -13px;
							transform: translateY(-50%);
						}
					}
				}

				&.current-menu-item,
				&.current-menu-parent,
				&.current_page_item,
				&.current_page_parent,
				&:hover {
					& > a {
						color: @primary-color;
					}
				}
			}
		}
	}

	.menu li.extra-menu-item {
		float: right;

		&.menu-item-button-link {
			padding: 0;

			a {
				color: #fff;
				font-weight: 500;
				font-size: 15px;
				margin-top: 4px;
				text-transform: inherit;

				&:hover {
					color: #fff;
				}
			}
		}

		&.menu-item-search {
			position: relative;
			text-align: right;
			padding-right: 0;

			.toggle-search {
				color: @primary-color;

				&:before {
					content: '\f00d';
					font-family: FontAweSome;
					position: absolute;
					top: 50%;
					left: 0;
					font-size: 15px;
					transform: translateY(-50%);
					opacity: 0;
				}

				&:after {
					content: '';
					position: absolute;
					top: 50%;
					left: -25px;
					transform: translateY(-50%);
					background-color: rgba( 255, 255, 255, 0.1 );
					width: 1px;
					height: 22px;
				}
			}

			.search-form {
				position: absolute;
				top: 130%;
				right: 0;
				width: 250px;
				border: 1px solid #f4f4f4;
				background-color: transparent;
				transition: top 0.3s ease 0s;
				z-index: 99;
				transform: scaleX(0);

				i {
					position: absolute;
					top: 50%;
					right: 16px;
					color: @heading-color;
					font-size: 14px;
					z-index: 99;
					transform: translateY(-50%);
				}

				.search-submit {
					position: absolute;
					top: 0;
					right: 0;
					width: 50px;
					height: 50px;
					opacity: 0;
					z-index: 9999;
				}

				input[type="search"] {
					height: 50px;
					line-height: 50px;
					width: 100%;
					padding: 0 40px 0 15px;
					background-color: #fff;
					border: none;

					&:focus {
						outline: none;
						border: none;
					}
				}
			}

			&.display-search {
				.toggle-search {
					i {
						opacity: 0;
					}

					&:before {
						opacity: 1;
					}
				}

				.search-form {
					top: 110%;
					transform: scaleX(1);
				}
			}
		}
	}
}

.header-v1 {
	.nav {
		ul {
			ul {
				ul {
					left: 110%;
					top: 0;
				}
			}
		}

		li {
			&:hover > ul {
				top: 92%;
			}

			li {
				&:hover > ul {
					top: 0;
					left: calc(~ '100% + 10px' );
				}
			}
		}

		a {
			color: #fff;
		}

		li li {

			& > a {
				color: @heading-color;
			}

			&:hover {
				& > a {
					color: #fff;
				}
			}
		}

		.menu {
			li.extra-menu-item.menu-item-search {
				.search-form {
					top: 180%;
				}

				&.display-search {
					.search-form {
						top: 160%;
					}
				}
			}
		}
	}
}

.header-v2 {
	.nav {
		.menu {
			li.extra-menu-item.menu-item-search {
				.search-form {
					top: 180%;
				}

				&.display-search {
					.search-form {
						top: 160%;
					}
				}
			}
		}
	}
}

.header-v3 {
	.site-menu {
		background-color: @secondary-color;
	}

	.nav {
		ul {
			ul {
				top: 85%;

				&:before {
					height: 5px;
					top: -5px;
				}

				ul {
					&:before {
						height: 100%;
						left: -10px;
					}
				}
			}
		}

		li {
			&:hover > ul {
				top: 55%;
			}

			li {
				&:hover > ul {
					top: 0;
					left: calc(~ '100% + 10px' );
				}
			}
		}

		a {
			color: #fff;
		}

		li li {

			& > a {
				color: @heading-color;
			}

			&:hover {
				& > a {
					color: #fff;
				}
			}
		}

		ul.menu {
			& > li {
				padding: 15px 27px;

				&:last-child {
					padding-right: 0;
				}

				&:first-child {
					padding-left: 0;
				}
			}

			.menu-item-button-link {
				padding: 6px 0;
			}
		}
	}
}

.header-v4 {
	.site-menu {
		background-color: @secondary-color;
	}

	.nav {
		ul {
			ul {
				top: 85%;

				&:before {
					height: 5px;
					top: -5px;
				}

				ul {
					&:before {
						height: 100%;
						left: -10px;
					}
				}
			}
		}

		li {
			&:hover > ul {
				top: 55%;
			}

			li {
				&:hover > ul {
					top: 0;
					left: calc(~ '100% + 10px' );
				}
			}
		}

		a {
			color: #fff;
		}

		li li {

			& > a {
				color: @heading-color;
			}

			&:hover {
				& > a {
					color: #fff;
				}
			}
		}

		ul.menu {
			padding: 0 30px;

			& > li {
				padding: 0 7px 0 17px;

				&:last-child {
					padding-right: 0;
				}

				&:first-child {
					padding-left: 0;
				}

				& > a {
					position: relative;
					padding: 13px 20px 13px 10px;

					&:after {
						content: '';
						position: absolute;
						width: 0;
						height: 5px;
						right: 0;
						bottom: 0;
						background-color: @primary-color;
						transition: 0.5s;
					}
				}

				&.current-menu-item,
				&.current-menu-parent,
				&.current_page_item,
				&:hover {
					& > a:after {
						right: auto;
						left: 0;
						width: 100%;
					}
				}

				&.menu-item-has-children {
					& > a {
						&:before {
							right: 7px;
						}
					}
				}

				&.menu-item-button-link {
					padding: 4px 0;

					a {
						padding: 0;
					}
				}

				&.menu-item-search {
					a {
						padding-left: 0;
						padding-right: 0;
					}
				}
			}
		}

		.menu li.extra-menu-item.menu-item-search .search-form {
			right: -30px;
		}
	}
}

.header-sticky {
	.site-header {
		&.minimized {
			.nav {
				.menu {
					& > li {
						a {
							color: @heading-color;
						}

						&.menu-item-button-link {
							a {
								color: #fff;
							}

							&:hover {
								a {
									color: #fff;
								}
							}
						}

						&:hover,
						&.current-menu-item,
						&.current-menu-parent {
							& > a {
								color: @primary-color;
							}
						}

						li {
							&:hover {
								& > a {
									color: #fff;
								}
							}
						}
					}
				}
			}
		}
	}

	&.header-v3,
	&.header-v4 {
		.site-header {
			&.minimized {
				.nav {
					.menu {
						& > li {
							a {
								color: #fff;
							}

							&.menu-item-button-link {
								a {
									color: #fff;
								}

								&:hover {
									a {
										color: #fff;
									}
								}
							}

							&:hover,
							&.current-menu-item,
							&.current-menu-parent {
								& > a {
									color: @primary-color;
								}
							}

							li {
								a {
									color: @heading-color;
								}

								&:hover {
									& > a {
										color: #fff;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.post-navigation {
	float: right;

	.nav-previous,
	.nav-next {
		display: inline-block;
		margin: 5px 0;

		a {
			font-family: @font-family-secondary;
			font-size: 18px;
			font-weight: 500;
		}

		.meta-nav {
			font-size: 14px;
		}
	}

	.nav-previous {
		padding-right: 10px;
		border-right: 0.5px solid #eee;

		.meta-nav {
			padding-right: 12px;
		}
	}

	.nav-next {
		padding-left: 10px;
		border-left: 0.5px solid #eee;

		.meta-nav {
			padding-left: 12px;
		}
	}

	a:hover {
		color: @primary-color;
	}
}

.blog-grid {
	.numeric-navigation {
		border-top: 1px solid #f4f4f4;
		padding-top: 60px;
	}
}

.numeric-navigation {
	clear: both;
	display: block;
	text-align: center;
	float: none;
	padding-top: 0;

	.page-numbers {
		color: @heading-color;
		font-weight: 600;
		font-size: 18px;
		width: 52px;
		height: 52px;
		line-height: 49px;
		border-radius: 50%;
		text-align: center;
		border: 2px solid #f4f4f4;
		display: inline-block;
		margin: 0 3px;
		transition: 0.5s;
		position: relative;

		i {
			color: #b8b8b8;
			transition: 0.5s;
		}

		&:first-child {
			margin-left: 0;
		}

		&:last-child {
			margin-right: 0;
		}

		&:hover,
		&.current {
			color: @light;
			background-color: @primary-color;
			border-color: @primary-color;

			i {
				color: @light;
			}
		}
	}
}

.portfolio-navigation {
	border-top: 1px solid #f4f4f4;
	border-bottom: 1px solid #f4f4f4;
	padding-bottom: 20px;
	padding-top: 21px;
	text-align: center;

	.nav-previous,
	.nav-next {
		padding-top: 7px;

		a {
			font-size: 16px;
			font-weight: 700;
			text-transform: uppercase;
			font-family: @font-family-secondary;
			transition: 0.5s;

			&:hover {
				color: @primary-color;
			}
		}

		.meta-nav {
			&.left {
				padding-right: 10px;
			}

			&.right {
				padding-left: 10px;
			}
		}
	}

	.portfolio-link {
		font-size: 24px;
	}

	.nav-previous {
		float: left;
	}

	.nav-next {
		float: right;
	}
}

.all-project {
	.numeric-navigation {
		margin-top: 0;
		padding-top: 20px;
	}
}

.all-service {
	.numeric-navigation {
		margin-top: 0;
		padding-top: 20px;
	}
}

.project-nav-ajax {
	nav.numeric-navigation {
		text-align: center;

		.page-numbers {
			display: none;

			&.next {
				font-size: 16px;
				font-weight: 700;
				color: @primary-color;
				text-align: center;
				display: inline-block;
				position: relative;
				min-width: 160px;
				min-height: 50px;
				line-height: 49px;
				height: inherit;
				border-radius: 50px;
				padding: 0 20px;
				background-color: #fff;
				text-transform: capitalize;
				border: 2px solid #f7f7f7;
				box-shadow: none;
				font-family: @font-family-secondary;
				transition: 0.5s;

				span {
					display: block;
					transition: 0.5s;
					color: @primary-color;
				}

				.cargohub-loading {
					position: absolute;
					left: 50%;
					top: 0;
					transform: translateX(-50%);
					opacity: 0;
					width: 100%;
				}

				&.loading {
					.cargohub-loading {
						opacity: 1;
					}

					.load-more {
						opacity: 0;
					}
				}

				&:hover,
				&:focus {
					color: @light;
					border-color: @primary-color;
					box-shadow: none;
					outline: none;
					background-color: @primary-color;

					span {
						color: @light;
					}
				}
			}

			&:before {
				display: none;
			}
		}
	}
}

.navbar-toggle {
	padding: 0;
	margin: 0;
	border-radius: 0;
	position: static;
}

.navbar-icon {
	display: inline-block;
	height: 25px;
	width: 27px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);

	.navbars-line {
		display: inline-block;
		width: 27px;
		height: 2px;
		background-color: @heading-color;
		position: absolute;
		top: 50%;
		left: 0;
		cursor: pointer;

		&:before,
		&:after {
			position: absolute;
			width: 100%;
			height: 2px;
			content: '';
			background-color: @heading-color;
		}

		&:before {
			top: -8px;
		}

		&:after {
			bottom: -8px;
		}
	}
}

.header-transparent {
	.navbar-icon {
		.navbars-line,
		.navbars-line:before,
		.navbars-line:after {
			background-color: #fff;
		}
	}
}

.navbars-icon {
    display: inline-block;
    position: relative;

    i {
    	color: @heading-color;
    	font-size: 26px;
    }
}

.admin-bar {
	.primary-mobile-nav {
		top: 32px;
	}
}

.primary-mobile-nav {
	width: 340px;
	transition: 0.4s;
	background-color: @light;
	position: fixed;
	top: 0;
	right: -340px;
	height: 100%;
	overflow-x: hidden;
    overflow-y: auto;
    color: #848484;
    z-index: 99999;
    border: 1px solid #f4f4f4;

    .close-canvas-mobile-panel {
	    padding: 20px;
	    display: inline-block;
	    font-size: 46px;
	}

	ul {
		list-style: none;
		padding-left: 0;
	}

	ul.menu {
		padding-bottom: 30px;

		&.over-submenu {
			height: 0;
			overflow: hidden;
			padding-bottom: 0;
		}

		li {
			padding: 15px 20px;
			position: static;

			.toggle-children {
				float: right;
				position: relative;

				i {
					position: absolute;
					width: 50px;
					height: 50px;
					text-align: center;
				    line-height: 50px;
			        right: -20px;
					top: -12px;
					font-size: 22px;
				}
			}

			& > ul {
			    position: absolute;
			    float: left;
			    right: 0;
			    top: 0;
			    visibility: visible;
			    display: inline-block;
			    width: 100% !important;
			    z-index: 10;
			    margin-top: 0;
			    transform: translateX(100%);
			    transition: 0.35s;
			    background-color: #fff;
			    overflow-y: auto;
			    overflow-x: hidden;
			    height: 100%;

			    .menu-parent-items {
			    	background-color: #f4f4f4;
			    	color: @heading-color;
			    	text-transform: uppercase;
			    }
			}

			&.over-menu {
				& > ul {
					transform: translateX(0);
				}
			}

			&.menu-back {
				padding-left: 40px;
				position: relative;

				&:before {
					content: '\f104';
					font-family: Fontawesome;
					font-size: 22px;
					position: absolute;
					left: 20px;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			&.extra-menu-item {
				margin-top: 40px;
			}

			&.current-menu-item {
				& > a {
					color: @primary-color;
				}
			}
		}
	}

	.menu-item-search {
		.toggle-search {
			display: none;
		}

		.search-form {
			position: relative;
			opacity: 1;
			z-index: 9;
			color: #848484;

			i {
				position: absolute;
				top: 50%;
				right: 16px;
				color: @heading-color;
				font-size: 14px;
				z-index: 99;
				transform: translateY(-50%);
			}

			.screen-reader-text {
				display: none;
			}

			::-webkit-input-placeholder {
				color: #9e9e9e;
			}

			:-moz-placeholder {
				color: #9e9e9e;
			}

			::-moz-placeholder {
				color: #9e9e9e;
			}

			:-ms-input-placeholder {
				color: #9e9e9e;
			}

			.search-submit {
				position: absolute;
				top: 0;
				right: 0;
				width: 50px;
				height: 50px;
				opacity: 0;
				z-index: 9999;
			}

			label {
				width: 100%;
				margin-bottom: 0;
			}

			input[type="search"] {
				height: 50px;
				line-height: 50px;
				width: 100%;
				padding: 0 55px 0 15px;
				border: 1px solid #ececec;

				&:focus {
					outline: none;
				}
			}
		}
	}
}

.display-mobile-menu {
	.primary-mobile-nav {
		right: 0;
		z-index: 99999;
	}
}