@import "../../../../Base/Content/sass/compass";
@import "../../../../Base/Content/sass/bootstrap/variables";

@import "Mixins/Wizdom-Service";

#suiteBarDelta ~#s4-ribbonrow { // O365 Ribbon row
    .wizdom-search-mobile-container {
        top:-42px;
    }
    #wizdom-mobile-container {
        top: -42px;
    }
}

#suiteBar ~#s4-ribbonrow { // On-Prem Ribbon row
    .wizdom-search-mobile-container {
        top: -34px;
    }
    #wizdom-mobile-container {
        top: -34px;
    }
}

#O365_NavHeader {
	.goMobileNow & {
		padding-right: 60px;
	}

	.servicemenuEnabled.goMobileNow &,
	.searchEnabled.goMobileNow & {
		padding-right: 100px;
	}

	.searchEnabled.servicemenuEnabled.goMobileNow & {
		padding-right: 140px;
	}

	@media (max-width: $screen-desktop) {
		padding-right: 60px;

		.servicemenuEnabled &,
		.searchEnabled & {
			padding-right: 100px;
		}

		.searchEnabled.servicemenuEnabled & {
			padding-right: 140px;
		}

		.active_mobile_menu &,
		.active_mobile_menu.servicemenuEnabled &,
		.active_mobile_menu.searchEnabled & {
			padding-right: 0;
		}
	}
}


.wizdomEnvironmentIsOnPrem2013 {
	#s4-ribbonrow {
		.wizdom-search-mobile-container {
			.goMobileNow & {
				top: -39px !important;
			}
		}

		.wizdom-mobile-container {
			.goMobileNow & {
				top: -39px !important;
			}
		}

		.wizdom-dot-mobile-container {
			.goMobileNow & {
				top: -44px !important;
			}
		}
	}

	#suiteBar {
		#suiteBarRight {
			.goMobileNow & {
				width: 0;
				visibility: hidden;
				display: inline-block;
			}
		}

		#suiteBarLeft {
			.goMobileNow & {
				padding-right: 120px;
			}
		}
	}
}

#s4-ribbonrow { // Shared Ribbon row
	#globalNavBox, .ms-clientcontrol-chromeheader {
		background-color: lighten(#000, 20%);
	}

	.wizdom-search-mobile-container {
		&:hover {
			cursor: pointer;
		}

		position: absolute;
		/*right:95px;*/
		right: 55px;
		//color:white;
		font-size: 20px;

		.glyphicon, .ms-Icon {
			color: white;
		}

		.goMobileNow & {
			display: block;
		}

		@media (max-width:$screen-desktop) {
			display: block;
		}

		.wizdom-search {
			& > a {

				@include box-sizing(border-box);
				@include inline-block();
				/*background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxkZWZzPgogICAgPHN0eWxlPgoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIG9wYWNpdHk6IDE7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGQ9Ik0xNS40NzksMTMuNDMyIEMxNS40NzksMTMuNDMyIDExLjkwNiwxMC4xODQgMTEuOTA2LDEwLjE4NCBDMTEuNjAzLDkuOTA5IDExLjUyNiw5LjQ2NiAxMS43MTYsOS4xMDUgQzEyLjI4OCw4LjAxOSAxMi41NDgsNi43NDMgMTIuMzc3LDUuMzk2IEMxMi4wMzcsMi43MjAgOS45MjcsMC41MTggNy4yNjYsMC4wODEgQzMuMDE1LC0wLjYxNyAtMC42MDksMy4wMDYgMC4wODQsNy4yNTggQzAuNTE3LDkuOTE3IDIuNzEyLDEyLjAyNyA1LjM4MiwxMi4zNzQgQzYuNzI2LDEyLjU0OSA4LjAwMCwxMi4yOTMgOS4wODUsMTEuNzI1IEM5LjQ0MywxMS41MzkgOS44ODAsMTEuNjE1IDEwLjE1NSwxMS45MTEgQzEwLjE1NSwxMS45MTEgMTMuNTE1LDE1LjU0MCAxMy41MTUsMTUuNTQwIEMxNC4xMDMsMTYuMTc1IDE1LjE1MiwxNi4xMjkgMTUuNzA1LDE1LjQzNCBDMTYuMTgzLDE0LjgzNCAxNi4wNDcsMTMuOTQ4IDE1LjQ3OSwxMy40MzIgWk0xLjU5OSw2LjIxMiBDMS41OTksMy42NjIgMy42NjUsMS41OTUgNi4yMTQsMS41OTUgQzguNzYyLDEuNTk1IDEwLjgyOSwzLjY2MiAxMC44MjksNi4yMTIgQzEwLjgyOSw4Ljc2MSA4Ljc2MiwxMC44MjggNi4yMTQsMTAuODI4IEMzLjY2NSwxMC44MjggMS41OTksOC43NjEgMS41OTksNi4yMTIgWiIgaWQ9InBhdGgtMSIgY2xhc3M9ImNscy0yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+Cg==) no-repeat;*/
				background-position: center center;
				@include single-transition(background, 0.5s);

				.active_search_menu & {
					@include single-transition(background, 0.5s);
					/*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFGREM2MDY5QTM1QzExRTQ5RUFDOEM4QTVDQjhCQjg4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFGREM2MDZBQTM1QzExRTQ5RUFDOEM4QTVDQjhCQjg4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUZEQzYwNjdBMzVDMTFFNDlFQUM4QzhBNUNCOEJCODgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUZEQzYwNjhBMzVDMTFFNDlFQUM4QzhBNUNCOEJCODgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Fm3WdAAAArUlEQVR42lyQzQ4BQRCE2xocxXvhxpI44knmFSTcNoS1frNPJV5h90BVUqSp5JuZ9NR0qqcRY9yaWR/Mwc1+lYIN6wmWIeiBAoycaQr2oAsGAcsCHEDQbjrvQBNUYMnCWZfenIhKne9BJppf4CgzVYMJTaZXH3X+BuFd21wWagYyZapVa2kYqgjKkLngqcv6NbOwdqYxKNWFmXOZV8xxAQ/9YekyXtX9CU5vAQYA+polIueOcuUAAAAASUVORK5CYII=) no-repeat;*/
					background-position: center center;
				}

				width: 25px;
				height: 23px;
				font-size: 20px;
			}
		}

		a {
			color: white;
		}

		display: none;
	}

	.wizdom-dot-mobile-container {
		position: absolute;
		top: -48px;
		/*right:45px;*/
		right: 85px;
		display: block;
		z-index: 1040;

		.glyphicon, .ms-Icon {
			color: white;
		}


		@media (min-width:$screen-desktop) {
			display: none;
		}

		@media (max-width:$screen-desktop) {
			display: block;
		}

		.goMobileNow & {
			display: block;
		}

		.wizdom-service {
			@include wizdom-service;
			padding-top: 6px;
		}

		&:hover {
			cursor: pointer;
		}

		&.v2 {
			transition: all .8s cubic-bezier(0.86,0,0.07,1);
			height: auto;
		}

		&.v2.is-active {
			height: 50px;
			top: -50px;
			right: 320px;
			right: calc(100% - 50px);
			background-color: #1775bc; // #9ed208;
			.powerPanelEnabled & {
				right: calc(100%);
			}
		}
	}

	#wizdom-mobile-container {
		@media (max-width:$screen-desktop) {
			display: block;
		}

		position: absolute;
		right: 15px;
		//color:white;
		font-size: 20px;

		.glyphicon, .ms-Icon {
			color: white;
		}

		.goMobileNow & {
			display: block;
		}

		.wizdom-mobile {
			& > a {

				@include box-sizing(border-box);
				@include inline-block();
				/*background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjI1IiBoZWlnaHQ9IjIzIiB2aWV3Qm94PSIwIDAgMjUgMjMiPgogIDxkZWZzPgogICAgPHN0eWxlPgoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjMDAwMDAwOwogICAgICAgIGZpbHRlcjogdXJsKCNjb2xvci1vdmVybGF5LTEpOwogICAgICB9CiAgICA8L3N0eWxlPgoKICAgIDxmaWx0ZXIgaWQ9ImNvbG9yLW92ZXJsYXktMSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPGZlRmxvb2QgZmxvb2QtY29sb3I9IiNmZmZmZmYiIGZsb29kLW9wYWNpdHk9IjEiLz4KICAgICAgPGZlQ29tcG9zaXRlIG9wZXJhdG9yPSJpbiIgaW4yPSJTb3VyY2VHcmFwaGljIi8+CiAgICAgIDxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJTb3VyY2VHcmFwaGljIiByZXN1bHQ9ImNvbG9yT3ZlcmxheSIvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxwYXRoIGQ9Ik0yMi40NDQsMjIuOTk1IEMyMi40NDQsMjIuOTk1IDEuNTY2LDIyLjk5NSAxLjU2NiwyMi45OTUgQzAuNjk4LDIyLjk5NSAtMC4wMDYsMjIuMjc5IC0wLjAwNiwyMS4zOTUgQy0wLjAwNiwyMS4zOTUgLTAuMDA2LDE5LjE4OCAtMC4wMDYsMTkuMTg4IEMtMC4wMDYsMTguMzA0IDAuNjk4LDE3LjU4OCAxLjU2NiwxNy41ODggQzEuNTY2LDE3LjU4OCAyMi40NDQsMTcuNTg4IDIyLjQ0NCwxNy41ODggQzIzLjMxMiwxNy41ODggMjQuMDE2LDE4LjMwNCAyNC4wMTYsMTkuMTg4IEMyNC4wMTYsMTkuMTg4IDI0LjAxNiwyMS4zOTUgMjQuMDE2LDIxLjM5NSBDMjQuMDE2LDIyLjI3OSAyMy4zMTIsMjIuOTk1IDIyLjQ0NCwyMi45OTUgWk0yMi40NDQsMTQuMTk4IEMyMi40NDQsMTQuMTk4IDEuNTY2LDE0LjE5OCAxLjU2NiwxNC4xOTggQzAuNjk4LDE0LjE5OCAtMC4wMDYsMTMuNDgxIC0wLjAwNiwxMi41OTggQy0wLjAwNiwxMi41OTggLTAuMDA2LDEwLjM5MSAtMC4wMDYsMTAuMzkxIEMtMC4wMDYsOS41MDcgMC42OTgsOC43OTEgMS41NjYsOC43OTEgQzEuNTY2LDguNzkxIDIyLjQ0NCw4Ljc5MSAyMi40NDQsOC43OTEgQzIzLjMxMiw4Ljc5MSAyNC4wMTYsOS41MDcgMjQuMDE2LDEwLjM5MSBDMjQuMDE2LDEwLjM5MSAyNC4wMTYsMTIuNTk4IDI0LjAxNiwxMi41OTggQzI0LjAxNiwxMy40ODEgMjMuMzEyLDE0LjE5OCAyMi40NDQsMTQuMTk4IFpNMjIuNDQ0LDUuNDAxIEMyMi40NDQsNS40MDEgMS41NjYsNS40MDEgMS41NjYsNS40MDEgQzAuNjk4LDUuNDAxIC0wLjAwNiw0LjY4NCAtMC4wMDYsMy44MDEgQy0wLjAwNiwzLjgwMSAtMC4wMDYsMS41OTMgLTAuMDA2LDEuNTkzIEMtMC4wMDYsMC43MTAgMC42OTgsLTAuMDA2IDEuNTY2LC0wLjAwNiBDMS41NjYsLTAuMDA2IDIyLjQ0NCwtMC4wMDYgMjIuNDQ0LC0wLjAwNiBDMjMuMzEyLC0wLjAwNiAyNC4wMTYsMC43MTAgMjQuMDE2LDEuNTkzIEMyNC4wMTYsMS41OTMgMjQuMDE2LDMuODAxIDI0LjAxNiwzLjgwMSBDMjQuMDE2LDQuNjg0IDIzLjMxMiw1LjQwMSAyMi40NDQsNS40MDEgWiIgaWQ9InBhdGgtMSIgY2xhc3M9ImNscy0yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+Cg==) no-repeat;*/
				background-position: center center;
				@include single-transition(background, 0.5s);

				.active_mobile_menu & {
					@include single-transition(background, 0.5s);
					/*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFGREM2MDY5QTM1QzExRTQ5RUFDOEM4QTVDQjhCQjg4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFGREM2MDZBQTM1QzExRTQ5RUFDOEM4QTVDQjhCQjg4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUZEQzYwNjdBMzVDMTFFNDlFQUM4QzhBNUNCOEJCODgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUZEQzYwNjhBMzVDMTFFNDlFQUM4QzhBNUNCOEJCODgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Fm3WdAAAArUlEQVR42lyQzQ4BQRCE2xocxXvhxpI44knmFSTcNoS1frNPJV5h90BVUqSp5JuZ9NR0qqcRY9yaWR/Mwc1+lYIN6wmWIeiBAoycaQr2oAsGAcsCHEDQbjrvQBNUYMnCWZfenIhKne9BJppf4CgzVYMJTaZXH3X+BuFd21wWagYyZapVa2kYqgjKkLngqcv6NbOwdqYxKNWFmXOZV8xxAQ/9YekyXtX9CU5vAQYA+polIueOcuUAAAAASUVORK5CYII=) no-repeat;*/
					background-position: center center;
				}

				width: 25px;
				height: 23px;
				font-size: 20px;
			}
		}

		a {
			color: white;
		}

		display: none;
	}
}

// service menu v2
.c-mask {
	position: fixed;
	z-index: 1027;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 0;
	height: 0;
	background-color: #000;
	opacity: 0;
	transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
}

.c-mask.is-active {
  width: 100%;
  height: 100%;
  opacity: 0.7;
  transition: opacity 0.3s;
}

#s4-workspace.is-active {
    overflow:hidden;
}




#s4-titlerow {

	.wizdom-dot-container,
	.wizdom-search-container {
		background-color: #fff;


		&.v2 {
			background-color: #1775bc; //#9ed208;
		}

		&:hover {
			cursor: pointer;
		}
	}
	// overflow added here - because s4-workspace cannot have any overflow-x
	/*overflow-x:hidden;*/
	height: auto;
	padding: 0;
	background-color: #fff;
	/*background:none !important;*/
	/*display: block !important;*/
	@include box-shadow(0 5px 10px rgba(0,0,0,0.127));

	@media (max-width: $screen-desktop) {
		/*padding-top:35px;*/
	}



	#DeltaPlaceHolderSearchArea {
		clear: both;
		height: 0;
		overflow: hidden;
		@include single-transition(height, 0.5s);

		.active_search_menu & {
			@include single-transition(height, 0.5s);
		}

		background-color: #fff;
		padding: 0;


		@include clearfix();


		#searchInputBox {
			border-top: 1px solid #cdd0d2;
			width: 100%;
			height: 40px;
			margin-bottom: 0;

			.ms-srch-sb-border {
				border: 0 solid white;
			}

			.ms-srch-sb-borderFocused {
				outline: 0;
				border: 0 solid white;
			}

			.ms-srch-sb-searchLink, .ms-srch-sb-navLink {

				& img {
					&:hover {
						background-color: transparent;
					}

					&:focus {
						background-color: transparent;
						outline: 0;
					}

					&:active {
						background-color: transparent;
					}
				}

				&:hover {
					background-color: transparent;
				}

				&:focus {
					background-color: transparent;
					outline: 0;
				}

				&:active {
					background-color: transparent;
				}
			}

			.ms-qSuggest-container.ms-shadow {
				box-shadow: 0 5px 10px rgba(0,0,0,.127);
			}

			.ms-qSuggest-container {
				margin: 0 0 0 0;
				width: 100%;

				.ms-qSuggest-list {
					width: 100% !important;

					div {
						padding-left: 30px;
					}
				}
			}

			.ms-srch-sb {

				a {
					@include inline-block();
					vertical-align: middle;
					margin-right: 5px;
					float: right;
					margin: 8px;
				}

				width: 100%;
				outline: 0;

				& > input {
					width: calc(100% - 80px);
					height: 40px;
					outline: none;
					padding-left: 25px;

					&:focus {
						outline: 0;
						outline-offset: 0;
					}
				}
			}
		}


		&.v2 {
			background-color: transparent;

			@media (max-width: $screen-desktop) {
				background-color: #fff;
			}

			.goMobileNow & {
				background-color: #fff;
			}

			height: auto;
			clear: none;
			position: absolute;
			top: 0;
			right: 1px;
			left: auto;
			width: 200px;
			z-index: 100;
			overflow: visible;
			transition: all 0.3s ease-out;
			padding-right: 10px;

			#searchInputBox {
				margin-bottom: 0;
				border-top: 0px solid white;
				height: 30px;
				margin-top: 3px;
				border: 1px solid #e4e4e4;
				border-radius: 15px;
				background-color: #fff;

				.ms-srch-sb > input {
					width: 100%;
					height: 25px;
					outline: none;
					padding-left: 10px;
					transition: all 0.3s ease-out;
					margin: 0;
				}

				.ms-srch-sb a {
					position: absolute;
					top: 2px;
					right: 10px;
					margin: 4px;
					transition: all 0.3s ease-out;
				}

				.ms-srch-sb > .ms-srch-sb-navLink {
					opacity: 0 !important;
					position: absolute;
					top: 2px;
					right: 10px;
				}

				&.is-active .ms-srch-sb > .ms-srch-sb-searchLink {
					right: 35px;
				}

				&.is-active .ms-srch-sb > .ms-srch-sb-navLink {
					opacity: 1 !important;
				}
			}

			&.is-active {
				width: 30%;

				@media (max-width: $screen-desktop) {
					opacity: 1;
					transform: translateY(0);
					width: 100%;
					right: 0;
					padding-left: 5px;
					padding-right: 5px;
				}

				@media (max-width: $screen-tablet) {
					transform: translateY(22px);
				}
			}

			.goMobileNow & {
				transform: translateY(-100%);
				opacity: 0;
				transition: all 0.3s ease-out;

				&.is-active {
					opacity: 1;
					transform: translateY(0);
				}
			}

			@media (max-width: $screen-desktop) {
				transform: translateY(-100%);
				opacity: 0;
				transition: all 0.3s ease-out;
			}
		}
	}

	#wt-servicemenu {
		clear: both;

		.tile-styling {
			display: flex;
			text-align: center;
			position: relative;
			height: 110px;
			width: 110px;
			overflow: hidden;
			transition: outline 0.3s;
			outline-color: #555;
			outline-style: solid;
			outline-width: 0;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			align-items: center;
			justify-content: center;
		}

		.link-text {
			position: absolute;
			/*bottom: 0px;*/
			text-align: center;
			width: 100%;
			padding: 5px 3px;
			font-size: 13px;
			max-height: 3em;
			text-overflow: ellipsis;
			overflow: hidden;
			/*line-height: 1;*/
			box-sizing: border-box;
			left: 0;
			bottom: 0;
			/* padding:0 10px; */
			line-height: 15px;
		}

		.round-image {
			margin-bottom: 20px;
			border-radius: 50%;
			height: 50px;
			width: 50px;
		}

		.icon-styling {
			margin-bottom: 20px;
			font-size: 50px;
		}

		& .wtsite-service-list {
			border-top: 1px solid #cdd0d2;
			@include clearfix();
			margin-bottom: 0;

			.personalizationPen {
				display: none;
			}

			&:first-of-type .personalizationPen {
				display: inline-block;
				float: right;
			}
		}

		height: 0;
		overflow: hidden;
		/*@include opacity(0);*/
		@include single-transition(all, 0.5s);

		.active_service_menu & {
			/*height:200px;*/
			/*@include opacity(1);*/
			@include single-transition(all, 0.5s);
		}

		background-color: #fff;
		padding: 0;
		@include clearfix();

		ul {
			padding: 10px;
			list-style-type: none;
			width: 100%;

			li {
				position: relative;
				@include float-left();
				vertical-align: bottom;
				//background-color:#fff; why??
				.wtsite-service-listitem-a {
					background-color: #555;
					display: block;
					margin-bottom: 10px;
					margin-right: 10px;
					text-align: center;
					position: relative;
					height: 110px;
					width: 110px;
					overflow: hidden;
					color: white;

					@include single-transition(outline, 0.3s);
					outline-color: #555;
					outline-style: solid;
					outline-width: 0;

					&:hover {
						@include single-transition(outline, 0.3s);
						outline-width: 2px;
					}

					.wtsite-service-listitem-a-icon {
						margin-top: 20px;
					}

					.wtsite-service-listitem-a-title {
						position: absolute;
						display: block;
						bottom: 4px;
						left: 10px;
					}

					@media (max-width: $screen-tablet) {
						margin-bottom: 5px;
						margin-right: 5px;
						height: 55px;
						width: 55px;
						background-size: 55px 55px !important;
						background-repeat: no-repeat !important;

						&:hover {
							outline-width: 1px;
						}

						.wtsite-service-listitem-a-icon {
							width: 30px;
							height: 30px;
							margin-top: 10px;
						}

						.wtsite-service-listitem-a-title {
							bottom: 2px;
							left: 5px;
						}
					}
				}
			}
		}

		&.v2 {
			clear: both;
			-webkit-transition: all .5s;
			-moz-transition: all .5s;
			-o-transition: all .5s;
			transition: all .5s;
			background-color: #fff;
			padding: 0;
			position: fixed;
			width: 530px;
			right: 0;
			bottom: 0;
			top: 0;
			height: auto;
			z-index: 2000;
			transition: transform 0.3s;
			transform: translateX(100%);

			@media (max-width: $screen-desktop) {
				width: 320px;
				width: calc(100% - 50px);
			}

			&.expanded {
				transform: translateX(0);
			}

			.goMobileNow & {
				width: 320px;
				width: calc(100% - 50px);
			}

			ul {
				padding: 0;

				&.wtsite-service-list {
					border-top: 0 solid white;
					margin-bottom:10px;
				}

				&.wtsite-service-list ul {
					padding: 15px 15px 0 15px;
				}

				&.wtsite-service-list > li {
					width: 100%;
					display: block;
				}

				li.wtsite-service-listitem {
					position: relative;
					float: left;
					vertical-align: bottom;
					//background-color: #fff;
					padding-left: 15px;
					padding-bottom: 15px;
				}

				li ul.items {
					margin-left: -15px;
				}

				li h1 {
					margin: 0;
					font-size: 16px;
					font-weight: 500;
					margin-left: 15px;
					margin-right: 15px;
					padding-bottom: 15px;
					border-bottom: 1px solid #e4e4e4;
				}

				li .wtsite-service-listitem-a {
					background-color: #555;
					display: table-cell;
					vertical-align: bottom;
					text-align: center;
					position: relative;
					height: 110px;
					width: 110px;
					overflow: hidden;
					color: #fff;
					-webkit-transition: outline .3s;
					-moz-transition: outline .3s;
					-o-transition: outline .3s;
					transition: outline .3s;
					outline-color: #555;
					outline-style: solid;
					outline-width: 0;
					margin: 0;
					padding: 3px;

					@media (max-width:768px) {
						background-size: 100% 100% !important;
						background-repeat: no-repeat !important;
					}
				}
			}
		}
	}

	.ms-breadcrumb-box {
		height: auto;

		.ms-breadcrumb-top {
			/*@include box-shadow(0 0 15px rgba(0,0,0,0.4));
			margin-bottom:10px;*/
			color: #000;
			min-height: 37px;
			/*border-bottom:1px solid #cdd0d2;*/
		}
	}

	.wizdom-search-container {
		@media (max-width:$screen-desktop) {
			display: none;
		}

		&.v2 {
			display: none;
		}

		.goMobileNow & {
			display: none;
		}

		position: absolute;
		top: 0;
		right: 0;
		display: block;
		/*z-index:1040;*/
		.wizdom-search {
			width: 50px;

			@media (min-width:$screen-desktop) {
				/*border-left:1px solid #cdd0d2;*/
				/*border-right:1px solid #cdd0d2;*/
			}

			& > a {
				@include box-sizing(border-box);
				@include inline-block();
				width: 100%;
				color: #222;
				text-decoration: none;
				text-align: center;
				line-height: 37px;
				height: 37px;
				font-size: 20px;
				/*background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxkZWZzPgogICAgPHN0eWxlPgoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjNTU1NzU4OwogICAgICAgIG9wYWNpdHk6IDAuNzsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggZD0iTTE1LjQ3OSwxMy40MzIgQzE1LjQ3OSwxMy40MzIgMTEuOTA2LDEwLjE4NCAxMS45MDYsMTAuMTg0IEMxMS42MDMsOS45MDkgMTEuNTI2LDkuNDY2IDExLjcxNiw5LjEwNSBDMTIuMjg4LDguMDE5IDEyLjU0OCw2Ljc0MyAxMi4zNzcsNS4zOTYgQzEyLjAzNywyLjcyMCA5LjkyNywwLjUxOCA3LjI2NiwwLjA4MSBDMy4wMTUsLTAuNjE3IC0wLjYwOSwzLjAwNiAwLjA4NCw3LjI1OCBDMC41MTcsOS45MTcgMi43MTIsMTIuMDI3IDUuMzgyLDEyLjM3NCBDNi43MjYsMTIuNTQ5IDguMDAwLDEyLjI5MyA5LjA4NSwxMS43MjUgQzkuNDQzLDExLjUzOSA5Ljg4MCwxMS42MTUgMTAuMTU1LDExLjkxMSBDMTAuMTU1LDExLjkxMSAxMy41MTUsMTUuNTQwIDEzLjUxNSwxNS41NDAgQzE0LjEwMywxNi4xNzUgMTUuMTUyLDE2LjEyOSAxNS43MDUsMTUuNDM0IEMxNi4xODMsMTQuODM0IDE2LjA0NywxMy45NDggMTUuNDc5LDEzLjQzMiBaTTEuNTk5LDYuMjEyIEMxLjU5OSwzLjY2MiAzLjY2NSwxLjU5NSA2LjIxNCwxLjU5NSBDOC43NjIsMS41OTUgMTAuODI5LDMuNjYyIDEwLjgyOSw2LjIxMiBDMTAuODI5LDguNzYxIDguNzYyLDEwLjgyOCA2LjIxNCwxMC44MjggQzMuNjY1LDEwLjgyOCAxLjU5OSw4Ljc2MSAxLjU5OSw2LjIxMiBaIiBpZD0icGF0aC0xIiBjbGFzcz0iY2xzLTIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K) no-repeat;*/
				background-position: center center;

				@include single-transition(background, 0.5s);

				.active_search_menu & {
					@include single-transition(background, 0.5s);
					/*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFGREM2MDY5QTM1QzExRTQ5RUFDOEM4QTVDQjhCQjg4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFGREM2MDZBQTM1QzExRTQ5RUFDOEM4QTVDQjhCQjg4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUZEQzYwNjdBMzVDMTFFNDlFQUM4QzhBNUNCOEJCODgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUZEQzYwNjhBMzVDMTFFNDlFQUM4QzhBNUNCOEJCODgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Fm3WdAAAArUlEQVR42lyQzQ4BQRCE2xocxXvhxpI44knmFSTcNoS1frNPJV5h90BVUqSp5JuZ9NR0qqcRY9yaWR/Mwc1+lYIN6wmWIeiBAoycaQr2oAsGAcsCHEDQbjrvQBNUYMnCWZfenIhKne9BJppf4CgzVYMJTaZXH3X+BuFd21wWagYyZapVa2kYqgjKkLngqcv6NbOwdqYxKNWFmXOZV8xxAQ/9YekyXtX9CU5vAQYA+polIueOcuUAAAAASUVORK5CYII=) no-repeat;*/
					background-position: center center;
				}
			}

			& > a:hover {
				@media (min-width:$screen-desktop) {
					background-color: #e0e0e0;
				}

				.goMobileNow & {
					background-color: transparent;
				}
			}
		}
	}

	.wizdom-dot-container {
		@media (max-width:$screen-desktop) {
			display: none;
		}

		.goMobileNow & {
			display: none;
		}

		position: absolute;
		top: 0;
		right: 50px;
		display: block;
		/*z-index:1040;*/
		&.v2 {
			position: fixed;
			top: auto;
			bottom: 0;
			right: 50px;
			min-width: 150px;
			transition: all .8s cubic-bezier(0.86,0,0.07,1);
			transform: translateX(0);
			z-index: 1050;
			padding: 0 20px;

			&.is-active {
				transform: translateX(-480px);
			}

			#afterClickDotsIcon,
			#dotIcon {
				color: #fff !important;
			}

			.wizdom-service {
				min-width: 150px;

				i > span {
					padding-left: 10px;
					line-height: 19px;
					display: inline-block;
				}

				& > a:hover {
					background-color: #1775bc; // #9ed208;
				}
			}
		}


		.wizdom-service {
			@include wizdom-service;
		}
	}


	.ms-dialog & {
		display: none !important;
	}

	#titleAreaBox, #titleAreaRow {
		width: 100%;
		/*padding-right:50px;*/
	}

	#titleAreaRow,
	#titleAreaBox .ms-tableCell {
		display: block;
	}

	#titleAreaBox {
		margin-left: 0;

		@media (max-width:$screen-desktop) {
			display: none;
		}

		.goMobileNow & {
			display: none;
		}
	}

	#pageTitle {
		display: none;
	}

	#siteIcon, #DeltaSiteLogo {
		margin: 0;
		padding: 0;
		line-height: normal;
		/*width:100%;
		text-align:left;
		float:none;*/
		&.ms-tableCell {
			display: none;
		}
	}
	// top menu
	#DeltaTopNavigation {
		@media (min-width:$screen-desktop) {
			min-width: 800px;
		}

		&.v2 {
			-webkit-transition: all .5s;
			-moz-transition: all .5s;
			-o-transition: all .5s;
			transition: all .5s;
			opacity: 1;

			&.is-hidden {
				visibility: hidden;
				opacity: 0;
			}
		}
	}

	.ms-displayInline {
		@include inline-block();
	}

	.ms-breadcrumb-top,
	#DeltaTopNavigation {
		/* [ReplaceColor(themeColor:"Accent2")] */
		@media (min-width:$screen-desktop) {
			background-color: #fff;
			color: #222;
		}
	}


	#DeltaTopNavigation li.static {
		background-color: #fff;

		.ms-displayInlineBlock {
			padding-top: 5px;
		}
	}


	#DeltaTopNavigation ul.static > li.static > span.menu-item,
	#DeltaTopNavigation ul.static > li.static > a:link,
	#DeltaTopNavigation ul.static > li.static > a:active,
	#DeltaTopNavigation ul.static > li.static > a:visited,
	#DeltaTopNavigation ul.static > li.static > a:hover {
		color: #000;
		font-weight: 400;
		@include inline-block();
		padding: 10px 30px;
		min-height: 37px;
	}

	#DeltaTopNavigation ul, #DeltaTopNavigation li {
		list-style: none;
		min-height: 37px;
	}

	#DeltaTopNavigation LI.static > span.menu-item,
	#DeltaTopNavigation LI.static > a {
		border: none;
		white-space: nowrap
	}

	#DeltaTopNavigation .dynamic-children .ms-navedit-flyoutArrow {
		/*padding-right: 20px;*/
		display: block;
		width: 100%;
	}

	#DeltaTopNavigation ul.static {
		margin: 0;
		padding: 0;
	}

	#DeltaTopNavigation LI.static > .menu-item {
		position: relative;
		/*height: 26px;*/
		margin: 0;
		/*padding: 0 15px;*/
	}

	li.static > ul.dynamic {
		top: 37px !important;
	}

	#DeltaTopNavigation ul.dynamic {
		border-top: none;
		display: table;
		min-width: 200px;
		padding: 0;
	}

	#DeltaTopNavigation ul.dynamic li {
		/*padding: 5px 5px;*/
		a, span.menu-item {
			display: inline-block;
			min-height: 37px;
			width: 100%;
			padding: 10px 30px;
		}
	}

	#DeltaTopNavigation .ms-navedit-editLinksText {
		line-height: 24px;
	}

	#DeltaTopNavigation .ms-navedit-linkCell {
		padding: 0;
		padding-left: 14px;
		padding-right: 3px;
	}

	#DeltaTopNavigation .ms-navedit-deletelinkCell {
		padding: 0;
	}

	#DeltaTopNavigation .ms-core-listMenuEdit td {
		line-height: 24px;
	}

	#DeltaTopNavigation .ms-navedit-editSpan input {
		margin-top: 3px;
	}

	#DeltaTopNavigation .ms-navedit-addNewLink {
		margin-top: 4px;
	}

	#DeltaTopNavigation .megamenuDesktopView #ClickMegaMenu ul.dynamic {
		display: none !important;
		position: absolute !important;
		top: auto !important;
		left: 0 !important;
		width: auto !important;
		box-shadow: none;
		border: none;
	}

	#DeltaTopNavigation .megamenuDesktopView #ClickMegaMenu LI.static.hover, #DeltaTopNavigation #ClickMegaMenu LI.static.hover-off {
		position: inherit !important;
	}

	#DeltaTopNavigation .megamenuDesktopView #ClickMegaMenu li.shown > ul.dynamic {
		display: block !important;
		width: 100% !important;
	}

	#DeltaTopNavigation .megamenuDesktopView #ClickMegaMenu ul.dynamic > li {
		background: transparent none;
		float: none;
		height: auto;
	}

	#DeltaTopNavigation .megamenuDesktopView #ClickMegaMenu li.dynamic .menu-item {
		padding: 15px 0 15px 15px;
	}

	#DeltaTopNavigation ul.static > li.static > div {
		text-decoration: none;
		color: #000;
		border: none;
		white-space: nowrap;
	}

	#DeltaTopNavigation .megamenuDesktopView .firstItemMM {
		padding-left: 25px !important;
	}
}
