/**
 * @package Helix V3 Framework
 * @author JoomShaper http://www.joomshaper.com
 * @copyright Copyright (c) 2010 - 2015 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */

/*=========================================
 *======= 	 Megamenu	   ============
 *=======================================*/
.sp-megamenu-parent {
	list-style: none;
	padding: 0;
	margin: 0;
	z-index: 9;
	display: block;
	height: 60px;
	>li {
		display: inline-block;
		position: relative;
		padding: 0;

		&.menu-justify {
			position: static;
		}
		
		>a {
			display: inline-block;
			padding: 0 15px;
			line-height: 60px;
			height: 60px;
			font-size: 14px;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 1px;
			color: #fff;
			position: relative;
		}

		&.sp-has-child>a:after{
			font-family: "FontAwesome";
			content: " \f107";
		}

		&.sp-has-child > a:before {

			content: '';
			position: absolute;
			opacity: 0;
			left: 50%;
			bottom: -15px;
			z-index: 999;
			width: 0;
			height: 0;
			border-width: 5px;
			border-color: #ededed #ededed transparent transparent;
			border-style: solid;
			transform: rotate(-45deg);
			transform-origin: 0 0;
			box-sizing: border-box;
			margin-left: -15px;
			z-index: -999;
		}

		&.sp-has-child:hover > a:before {
			opacity: 1;
			bottom: -10px;
			z-index: 1;
		}
	}

	.sp-module {
		padding: 10px;
	}

	.sp-mega-group {
		list-style: none;
		padding: 0;
		margin: 0;

		.sp-mega-group-child {
			list-style: none;
			padding: 0;
			margin: 0;
		}
	}

	.sp-dropdown {
		margin: 0;
		padding: 0;
		position: absolute;
		z-index: 10;
		display: none;
		.sp-dropdown-inner {
			background-color: #ededed;
			box-shadow: 0px 18px 27px 0px rgba(0, 0, 0, 0.2);
			position: relative;
		}

		.sp-dropdown-items {
			list-style: none;
			padding: 0;
			margin: 0;
			border-radius: 2px;
			.sp-has-child>a:after{
				font-family: "FontAwesome";
				content: " \f105";
				float: right;
			}
		}

		&.sp-menu-center {
			margin-left: 45px;
		}
		
		&.sp-dropdown-main {
			top: 100%;
			&.sp-menu-right,
			&.sp-menu-full {
				left: 0;
			}

			&.sp-menu-left {
				right: 0;
			}
		}

		&.sp-dropdown-sub {
			top: 0;
			left: 100%;
			.sp-dropdown-inner {
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
			}
		}

		//List Item
		li.sp-menu-item { //child sub
			display: block;
			padding: 0;
			position: relative;
			>a {
				display: block;
				padding: 0 25px;
				line-height: 45px;
				border-bottom: 1px solid #e0e0e0;
				color: #333;
				cursor: pointer;
				&:not(.sp-group-title):hover {
					background: #f7f7f7;
				}
				&.sp-group-title {
					text-transform: uppercase;
					font-weight: bold;
					padding: 15px 25px 0 25px;
				}
			}
			&:last-child>a{
				border-bottom: none;
			}
		}
	}

	.sp-dropdown-mega {
		>.row {
			margin-top: 30px;
			&:first-child {
				margin-top: 0;
			}
		}
	}

	//Has Child
	.sp-has-child {
		&:hover {
			>.sp-dropdown {
				display: block;
			}
		}
	}

	//Fade Animation
	&.menu-fade {
		.sp-has-child:hover {
			>.sp-dropdown {
				-webkit-animation: spMenuFadeIn 400ms;
				animation: spMenuFadeIn 400ms;
			}
		}
	}

	//Zoom Animation
	&.menu-zoom {
		.sp-has-child:hover {
			>.sp-dropdown {
				-webkit-animation: spMenuZoom 400ms;
				animation: spMenuZoom 400ms;
			}
		}
	}

	//Fade in up Animation
	&.menu-fade-up {
		.sp-has-child:hover {
			>.sp-dropdown {
				-webkit-animation: spMenuFadeInUp 400ms;
				animation: spMenuFadeInUp 400ms;
			}
		}
	}
}


/*=========================================
 *======= 	Off Canvas   ============
 *=======================================*/

 #offcanvas-toggler {
 	float: right;
 	line-height: 60px;
 	>i {
 		color: #fff;
 		display: inline-block;
 		padding: 0 0 0 10px;
 		font-size: 18px;
 		background: transparent;
 		border-radius: 3px;
 		cursor: pointer;
 		.transition(~'color 400ms, background-color 400ms');
 		&:hover {
 			color: #fff;
 		}
 	}
 }

 .offcanvas-overlay {
 	opacity: 0;
 	-webkit-transition: all .4s;
 	transition: all .4s;
 }

 .body-innerwrapper{
 	.transition(400ms);
 }

 body.offcanvas {
 	.offcanvas-overlay {
 		position: absolute;
 		top: 0;
 		left: 0;
 		bottom: 0;
 		right: 0;
 		background: rgba(0, 0, 0, 0.6);
 		opacity: 1;
 		z-index: 9999;
 	}
 }


 .close-offcanvas {
 	position: absolute;
 	top: 15px;
 	right: 20px;
 	z-index: 1;
 	color: #fff;
 	border-radius: 100%;
 	width: 22px;
 	height: 22px;
 	line-height: 22px;
 	text-align: center;
 	font-size: 12px;
 	background: rgba(0, 0, 0, .3);

 	&:hover {
 		background: rgba(0, 0, 0, .5);
 		color:#fff;
 	}
 }

 .offcanvas-menu {
 	width:  320px;
 	height: 100%;
 	color: #5f5f5f;
 	position: fixed;
 	top: 0;
 	opacity: 0;
 	z-index: 99999;
 	overflow-y: auto;

 	.offcanvas-inner {
 		padding: 20px;
 		.sp-module {
 			margin-top: 20px;

 			.sp-module-title {
 				font-size: 16px;
 				line-height: 1;
 				text-transform: uppercase;
 			}

 			ul {
 				> li{
 					border: 0;
 					position: relative;
 					a {
 						.transition(300ms);
 						padding:10px 20px;
 						font-size: 14px;
 						text-transform: uppercase;
 						color: #fff;
 						font-weight: 400;
 						line-height: 28px;
						border-bottom: 1px solid rgba(0,0,0,0.1);
 						&:before{
 							display: none;
 						}
 					}
 					&:hover, &.active{
 						>a{
 							background: rgba(0,0,0,0.15);
 						}
 					}

 					.offcanvas-menu-toggler {
 						display: inline-block;
 						position: absolute;
 						top: 0;
 						right: 0;
 						padding:13px 20px;
 						cursor: pointer;
 						color: #fff;
 						.open-icon {
 							display: none;
 						}

 						.close-icon {
 							display: inline;
 						}

 						&.collapsed {
 							.open-icon {
 								display: inline;
 							}
 							.close-icon {
 								display: none;
 							}
 						}
 					}

 					>a:after  {
 						display: none;
 					}

 					ul {
 						background: rgba(255,255,255,.07);
 						overflow: hidden;
 						>li{
 							&.active{
 								>a{
 									background: #f7f7f7 !important;
 								}
 							}
 							&:hover{
 								>a{
 									background: #f7f7f7 !important;
 								}
 								.offcanvas-menu-toggler{
 									color: #333;
 								}
 							}
 							> a{
 								padding-left: 30px;
 								color: #fff;
 								border-bottom: 1px solid rgba(0,0,0,0.1);
 								&:hover{
 									background: #f7f7f7 !important;
 								}
 							}
 						}
 					}
 				}
 			}

 			&:first-child {
 				margin-top: 0;
 			}			
 		}	
 		.sp-module .sp-module-content > ul {
 			margin:0 -20px;
 		}
 		.search {
 			margin-top: 25px;
 			input {
 				width: 100%;
 				border-radius: 0;
 				border: 0; 
 				box-shadow: none;
 				-webkit-box-shadow: none;
 				border: 1px solid #999;
 			}
 		}
 	}
 }

 .ltr {

 	.offcanvas-menu {
 		.transition(.4s);
 	}

 	.body-innerwrapper:after {
 		right: 0;
 	}

 	.offcanvas-menu {
 		right: -340px;
 	}

 	&.offcanvas {
 		.offcanvas-menu {
 			right: 0;
 		}
 	}
 }

 .offcanvas {
 	width: 100%;
 	height: 100%;
 	position: relative;

 	.body-innerwrapper:after {
 		width: 100%;
 		height: 100%;
 		opacity: 1;
 		-webkit-transition: opacity 0.5s;
 		transition: opacity 0.5s;
 	}

 	.offcanvas-menu {
 		opacity: 1;

 		ul.nav-child li {
 			padding-left: 10px;
 		}
 	}
 }

 .menu .nav-child.small {
 	font-size: inherit;
 }


/*=========================================
 *======= 	Menu Animation   ============
 *=======================================*/
@-webkit-keyframes spMenuFadeIn {
  0% {
  	opacity: 0;
  }

  100% {
  	opacity: 1;
  }
}

@keyframes spMenuFadeIn {
  0% {
  	opacity: 0;
  }

  100% {
  	opacity: 1;
  }
}

@-webkit-keyframes spMenuZoom {
  0% {
  	opacity: 0;
  	-webkit-transform: scale(.8);
  }

  100% {
  	opacity: 1;
  	-webkit-transform: scale(1);
  }
}

@keyframes spMenuZoom {
  0% {
  	opacity: 0;
  	transform: scale(.8);
  	-webkit-transform: scale(.8);
  }

  100% {
  	opacity: 1;
  	transform: scale(1);
  	-webkit-transform: scale(1);
  }
}

@-webkit-keyframes spMenuFadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
  }
}

@keyframes spMenuFadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

//Box Layout Mega Menu
.layout-boxed #sp-main-menu .container.sp-dropdown-mega{
	position: absolute;
}
.layout-boxed .is-sticky #sp-main-menu > .container > .row:first-child:before,
.layout-boxed .is-sticky #sp-main-menu > .container > .row:first-child:after{
	display: none;
}
.layout-boxed .is-sticky #sp-main-menu > .container{
	width: 100%;
}
.layout-boxed .is-sticky #sp-main-menu .container.sp-dropdown-mega{
	margin: 0 35px;
}