@import "compass";
@import "../../../theme_variables";

$parent-item: 48px;
$col-width: 245px;
$title-height: 52px;
$menu_border: #303030;

@media (max-width: $screen-md-max){
	.nav-container{
		clear: both;
	}
}
.pt_custommenu{
	position: relative;
	line-height: 1;
	text-align: left;
	.pt_menu{
		display: inline-block;
		margin: 0 40px 0 0;
		text-align: left;
		vertical-align: bottom;
		@media (max-width: $screen-md-max){
			margin: 0 15px;
		}
		.parentMenu {
			a{
				display: block;
				overflow: hidden;
				position: relative;
				margin: 0;
				padding: 2px 0 0;
				line-height: $parent-item;
				color: $light-text-color;
				text-transform: uppercase;
				letter-spacing: 0.03em;
				font:{
					size: 14px;
					weight: 600;
				}
				i{
					font-size: 11px;
					display: block;
					line-height: ($parent-item - 2px);
					float: right;
					padding: 0 0 0 5px;
					&:before{
						content: "\e5cf";
						font-family: $font-icon2;
					}
				}
			}
		}
		.popup{
			position: absolute;
			z-index: 9;
			background: $light-background;
			@include box-shadow(0px 0px 6px 1px rgba(0,0,0,0.1));
			@media (max-width: 1199px){
				left: 0 !important;
				width: 100% !important;
			}
			.cms_mega a{
				display: block;
				overflow: hidden;
				img{
					@include transition(all 1700ms ease);
				}
				&:hover img{
					@include transform(scale(1.07));
				}
			}
			.block1{
				overflow: hidden;
				float: left;
				padding: 0 0 20px;
				.column{
					float: left;
					width: $col-width;
					padding: 30px 30px;
					margin-bottom: -99999px;
					padding-bottom: 99999px;
					&.blockright{
						margin: -30px -30px -99999px 0;
						width: auto;
					}
					.itemMenuName{
						@extend .oneline;
						color: #333;
						line-height: 35px;
						text-transform: uppercase;
						letter-spacing: 0.02em;
						font:{
							weight: 500;
							size: 13px;
						}
						&:hover{
							color: $sub-color;
						}
					}
					.itemSubMenu{
						padding: 0;
						.itemMenuName{
							color: #666;
							text-transform: capitalize;
							line-height: 26px;
							letter-spacing: 0.02em;
							font:{
								weight: 400;
								size: 13px;
							}
							&:hover{
								color: $sub-color;
							}
						}
					}
				}
			}
		}
		&.act, &.active{
			.parentMenu a{
				
				
			}
		}
	}
}

.pt_custommenu_mobile{
	text-align: left;
	position: relative;
    z-index: 1;
	clear: both;
	padding-top: 20px;
	.navbar{
		min-height: $title-height;
		margin: 0;
		border: 0;
		position: relative;
		overflow: hidden;
		background: $sub-color;
		padding: 2px 15px 0 15px;
		overflow: hidden;
		cursor: pointer;
		@include border-radius(5px 5px 0 0);
		.navbar-inner{
			.btn-navbar{
				display: block;
				overflow: hidden;
				margin: 0;
				color: $light-text-color;
				font-size: 18px;
				font-weight: 600;
				letter-spacing: 0.03em;
				text-transform: uppercase;
				line-height: $title-height;
				&:after{
					display: block;
					position: absolute;
					top: 0;
					right: 0;
					width: $title-height;
					height: $title-height;
					text-align: center;
					color: $light-text-color;
					font:{
						size: 15px;
						weight: 400;
						family: $font-icon;
					}
				}
			}
			&.navbar-inactive .btn-navbar:after{
				content: "\f055";
			}
			&.navbar-active .btn-navbar:after{
				content: "\f056";
			}
		}
	}
}
ul#pt_custommenu_itemmobile{
	overflow: hidden;
	margin: 0 0 15px;
	padding: 0;
	li{
		background: #fff;
		cursor: pointer;
		list-style-type: none;
		padding: 0 20px;
		margin: 0;
		display: block;
		position: relative;
		a{
			@extend .oneline;
			line-height: $title-height;
			color: $dark-color;
			text-transform: capitalize;
			text-decoration: none;
			font:{
				size: 15px;
				weight: 500;
			}
			&:hover{
				color: $sub-color;
			}
		}
		.grower{
			position: absolute;
			top: 0;
			right: 0;
			a:after{
				display: block;
				width: $title-height;
				height: $title-height;
				text-align: center;
				color: $dark-color;
				font:{
					size: 13px;
					weight: 400;
					family: $font-icon;
				}
			}
			&.CLOSE a:after{
				content: "\f055";
			}
			&.OPEN a:after{
				content: "\f056";
			}
		}
	}
}