#mobile-container{
	display: none;
	padding: 10px 30px 30px;
}

#mobile-menu{
	margin-bottom: 20px;
	position: relative;
	padding-top: 15px;

	.hide-mega-headings{
		>a{
			display: none;

			+ul{
				display: block;
			}
		}
	}

	&.hide-menu-icons{
		a span.tie-menu-icon{
			display: none;
		}
	}

	.menu > li{
		border-bottom: 1px solid rgba(0,0,0,0.05);

		.dark-skin &{
			border-color: rgba(255,255,255,0.05);
		}

		li {
			padding-left: 15px;
		}

		&:only-child{
			border-bottom: none;

			// what was the use of this code?
			//> a,
			//> span{
				//display: none;
			//}

			li{
				padding: 0;

				a{
					font-size: 16px;
					font-weight: 600;
				}
			}
		}
	}

	li{
		display: block;
		position: relative;

		.screen-reader-text{
			height: auto;
			width: auto;
			position: initial !important;
			overflow: initial !important;
			clip: initial !important;
			clip-path: initial !important;
		}

		a{
			display: block;
			padding: 15px 50px 15px 0;
			@include font-size(16px);
			line-height: 22px;
			font-weight: 600;

			.dark-skin &{
				color: #ffffff;
			}

			&:hover{
				opacity: 0.7;
			}

			> .tie-menu-icon{
				margin-right: 3px;
				width: 25px;
				text-align: center;
			}
		}

		&.menu-item-has-children > a:before{
			display: none;
		}

		ul,
		.menu-sub-content{
			opacity: 1 !important;
			background-image: none !important;
			padding: 0 !important;
			min-height: unset !important;
		}

		ul{
			padding-left: 15px;
			display: none;

			a{
				font-weight: normal;
				@include font-size(14px);
				padding-top: 10px;
				padding-bottom: 10px;
			}

			.mobile-arrows{
				@include font-size(12px);
			}
		}
	}

	&:not(.hide-menu-icons) li.menu-item-has-icon{
		> ul,
		> div{
			padding-left: 15px !important;
		}
	}

	.mobile-arrows{
		width: 50px;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		padding: 15px 10px;
		line-height: 22px;
		cursor: pointer;
		text-align: center;
		@include font-size(14px);
		transform: rotate(0deg);
		transition: transform 0.3s;

		.dark-skin &{
			color: #ffffff;
		}

		&.is-open{
			transform: rotate(180deg);
		}
	}
}

#mobile-social-icons{
	margin-bottom: 15px;

	ul{
		text-align: center;
		overflow: hidden;

		.social-icons-item{
			float: none;
			display: inline-block;
		}
	}

	.social-icons-item{
		margin: 0;

		.social-link {
			background: transparent;
			border: none;
		 }
	}

	//.light-skin & .social-link:not(:hover) span{
		//color: #777 !important;
	//}
}

#mobile-search{
	.search-form{
		overflow: hidden;
		position: relative;

		&:after{
			position: absolute;
			content: "\f002";
			font-family: 'tiefonticon';
			top: 4px;
			right: 10px;
			line-height: 30px;
			width: 30px;
			font-size: 16px;
			border-radius: 50%;
			text-align: center;
			color: #fff;
		}
	}

	.search-field{
		background-color: rgba(0, 0, 0, 0.05);
		border-color: rgba(255,255,255,0.1);
		color: #ffffff;
		width: 100%;
		border-radius: 50px;
		padding: 7px 45px 7px 20px;

		//.light-skin &{
			//background-color: rgba(0, 0, 0, 0.05);
			//color: $base-color;
		//}
	}

	.search-submit{
		background: transparent;
		font-size: 0;
		width: 35px;
		height: 38px;
		position: absolute;
		top: 0;
		right: 5px;
		z-index: 1;
	}

	input{
		@include placeholder{
			color: rgba(255,255,255,0.6);
		}
	}
}
