// Side Header
@media (min-width: 992px) {
	html {
		&.side-header {
			.main, #footer {
				.container {
					padding: 0 35px;
					width: auto !important;
					max-width: 1210px;
				}
			}
			&:not(.side-header-above) {
				body > .body {
					margin: 0 0 0 255px;
					width: auto;
					overflow-x: hidden;
					overflow-y: visible;
					.forcefullwidth_wrapper_tp_banner {
						.rev_slider_wrapper {
							width: 100% !important;
							#{$left}: auto !important;
						}
					}
				}
			}

			&.side-header-above {
				#header.side-header {
					transition: cubic-bezier(.55,0,.1,1) transform 300ms;
				}
			}

			// Side Header Change Container
			&.side-header-change-container {
				.main, #footer {
					@media(min-width: 1200px) {
						.container {
							transform: translateX(125px);
						}
					}

					@media(max-width: 1440px) {
						.container {
							max-width: 960px;
						}	
					}
				}

				@media(min-width: 1200px) {
					.home-concept {
						transform: translateX(125px);
						.container {
							transform: translateX(0);
						}
					}
				}

				@media(min-width: 1200px) and (max-width: 1440px) {
					.home-concept {
						.container {
							> .row {
								margin-#{$left}: -6rem;
							}
						}
					}
				}

				// Side Header Right
				&.side-header-right {
					.main, #footer {
						@media(min-width: 1200px) {
							.container {
								transform: translateX(-125px);
							}
						}
					}

					@media(min-width: 1200px) {
						.home-concept {
							transform: translateX(-125px);
						}
					}

					@media(min-width: 1200px) and (max-width: 1440px) {
						.home-concept {
							.container {
								> .row {
									margin-#{$left}: -6rem;
								}
							}
						}
					}
				}
			}

			#header.side-header {
				position: fixed;
				box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
				top: 0;
				#{$left}: 0;
				max-width: 255px;
				width: 100%;
				height: 100%;
				transform: translateX(0);
				transition: cubic-bezier(.55,0,.1,1) transform 300ms;

				&:not(.header-transparent) {
					background: var(--light);
				}

				&.side-header-lg {
					max-width: 355px;
				}

				&.side-header-hide {
				    transform: translateX(100%);
				}

				.header-body {
					border-top: 0;
				}
				.header-container {
					width: 100%;
				}
				.header-row {
					flex-direction: column;
				}
				.header-search {
					width: 100%;
				    margin: 0.7rem 0;
				}
				.header-nav-top {
					.nav {
						> li {
							> a, > span {
								display: block;
							}
						}
					}
				}
				.header-logo {
					margin: 2rem 0;
				}
				.header-nav {
					flex-direction: column;
					&.header-nav-links {
						nav {
							> ul {
								> li {
									> a {
										height: auto;
									}
								}
							}
						}
					}
					&.header-nav-links-vertical-expand {
						.header-nav-main {
							overflow: hidden;
						}
					}
				}
				.header-nav-main,
				.header-nav-main nav,
				.header-nav-main .nav {
					width: 100%;
				}
				.nav {
					flex-direction: column;
					width: 100%;
				}
				.header-nav-main {
					nav > ul > {
						li.dropdown {
							> a.dropdown-toggle:after {
								content: "";
								border-color: transparent transparent transparent var(--grey-500);
								position: absolute;
								#{$right}: 15px;
							    top: 50%;
							    border-top: .3em solid;
							    border-bottom: .3em solid transparent;
							    border-#{$left}: .3em solid transparent;
							    border-#{$right}: 0;
							    transform: translate3d(0, -50%, 0);
							}
							&.open > .dropdown-menu,
							&.accessibility-open > .dropdown-menu,
							&:hover > .dropdown-menu {
								top: 3px;
								#{$left}: 100%;
								border-top: 0;
								border-#{$left}: 5px solid var(--grey-500);
								margin-#{$left}: -5px;
							}
							li.dropdown-submenu:hover > .dropdown-menu {
								margin-top: -5px;
								border-top: 0;
							}
							&.open, &.accessibility-open, &:hover {
								> a {
									padding-bottom: 0.5rem;
									&:before {
										content: none;
									}
								}
							}
						}
						li.dropdown-mega {
							position: relative !important;
							.dropdown-menu {
								min-width: 720px;
							}
						}
						li {
							margin-top: 1px;
							> a {
								display: flex;
							}
							.dropdown-menu {
								&.dropdown-reverse {
									li {
										a {
											padding-#{$right}: 8px;
											padding-#{$left}: 20px;
										}
										&.dropdown-submenu > a {
											&:after {
												border-width: 4px 4px 4px 0;
											}
										}									
									}
								}
							}
						}
					}
				}
			}
		}

		&.side-header-right {
			&:not(.side-header-above) {
				body > .body {
					margin: 0 255px 0 0;
				}
			}
			#header.side-header {
				#{$left}: auto;
				#{$right}: 0;
				.header-nav:not(.header-nav-links-vertical-slide):not(.header-nav-links-vertical-expand) {
					.header-nav-main {
						nav > ul > {
							li.dropdown {
								> a.dropdown-toggle {
									padding-#{$right}: 0px;
									padding-#{$left}: 30px;
									&:after {
										#{$left}: 15px;
										#{$right}: auto;
									    border-#{$right}: .3em solid transparent;
									    border-#{$left}: 0;
									}
								}
								&.open > .dropdown-menu,
								&.accessibility-open > .dropdown-menu,
								&:hover > .dropdown-menu {
								    display: flex;
								    justify-content: center;
								    flex-direction: column;
									#{$right}: 100%;
									#{$left}: auto;
									border-#{$right}: 5px solid var(--grey-500);
									border-#{$left}: 0;
									margin-#{$left}: 0;
									margin-#{$right}: -5px;
									border-radius: var(--border-radius) 0 0 var(--border-radius);
									opacity: 1;
								}
							}
						}
					}

					&.header-nav-links-vertical-columns {
						.header-nav-main {
							nav > ul > {
								li.dropdown {
									&.open > .dropdown-menu,
									&.accessibility-open > .dropdown-menu,
									&:hover > .dropdown-menu {
									    height: 100vh;
									}
								}
							}
						}
					}
				}

				&.side-header-hide {
				    transform: translateX(-100%);
				}
			}
			&.side-header-right-no-reverse {
				#header.side-header {

					.header-nav:not(.header-nav-links-vertical-slide) {
						.header-nav-main {
							nav > ul > {
								li.dropdown {
									.dropdown-menu {
										li.dropdown-submenu {
											> a {
												padding-#{$left}: 25px;
												&:after {
													#{$left}: initial;
													#{$right}: 20px;
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}

		&.side-header-semi-transparent {
			body > .body {
				margin: 0;
			}
			#header.side-header {
				background: rgba(0, 0, 0, 0.3);
				.header-body {
					background: transparent !important;
				}
			}
		}
	}
}

@media (min-width: 1200px) {
	html {
		&.side-header {
			&.side-header-hide {
				#header.side-header {
					left: 0;
					transform: translateX(0);
				}
			}
		}

		&.side-header.side-header-right {
			&.side-header-hide {
				#header.side-header {
					left: auto;
					right: 0;
					transform: translateX(0);
				}
			}
		}
	}
}

// Side Header Mobile
@media (max-width: 991px) {
	html {
		&.side-header {
			#header.side-header {
				.header-container {
					height: auto !important;
				}
			}
		}
	}
}

@media (max-height: 768px) {
	html {
		&.side-header {
			#header {
				.header-nav-main {
					nav > ul > {
						li.dropdown {
							&.open > .dropdown-menu,
							&.accessibility-open > .dropdown-menu,
							&:hover > .dropdown-menu {
								// bottom: 0;
								top: auto;
							}
						}
					}
				}
			}
		}
	}
}

// Side Header Hamburguer Sidebar
html {
	&.side-header-hamburguer-sidebar {
		.main, #footer {
			.container {
				padding: 0 35px;
				width: auto !important;
				max-width: 1210px;
			}
		}
		&:not(.side-header-above) {
			body > .body {
				margin: 0 0 0 255px;
				width: auto;
				overflow-x: hidden;
				overflow-y: visible;
				.forcefullwidth_wrapper_tp_banner {
					.rev_slider_wrapper {
						width: 100% !important;
						#{$left}: auto !important;
					}
				}
			}
		}

		&.side-header-above {
			#header.side-header {
				transition: cubic-bezier(.55,0,.1,1) transform 300ms;
			}
		}

		#header.side-header {
			background: var(--light);
			position: fixed;
			box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
			top: 0;
			#{$left}: 0;
			max-width: 255px;
			width: 100%;
			height: 100%;
			transform: translateX(0);
		    z-index: 9991;

			&.side-header-lg {
				max-width: 355px;
			}

			&.side-header-hide {
			    transform: translateX(-100%);
			}

			&.header-transparent {
				background: transparent;
			}

			.side-header-scrollable {
				height: 100%;
			}

			.header-body {
				border-top: 0;
				height: 100% !important;
			}
			.header-container {
				width: 100%;
				height: 100% !important;
			}
			.header-row {
				flex-direction: column;
			}
			.header-search {
				width: 100%;
			    margin: 0.7rem 0;
			}
			.header-nav-top {
				.nav {
					> li {
						> a, > span {
							display: block;
						}
					}
				}
			}
			.header-logo {
				margin: 2rem 0;
			}
			.header-nav {
				flex-direction: column;
				&.header-nav-links {
					nav {
						> ul {
							> li {
								> a {
									height: auto;
								}
							}
						}
					}
				}
			}
			.header-nav-main,
			.header-nav-main nav,
			.header-nav-main .nav {
				width: 100%;
			}
			.nav {
				flex-direction: column;
				width: 100%;
			}

		}

		// Side Header Hamburguer Right
		&.side-header-hamburguer-sidebar-right {
			#header.side-header {
				#{$left}: auto;
				#{$right}: 0;
				&.side-header-hide {
				    transform: translateX(100%);
				}
			}
		}

		// Side Header Hamburguer Push
		&.side-header-hamburguer-sidebar-push {
			body > .body {
				margin: 0;
				overflow: visible;
				transition: ease right 300ms;
				#{$right}: 0;
			}
			.body-overlay {
				content: "";
				width: 100%;
				height: 0;
				top: 0;
				bottom: 0;
				#{$left}: 0;
				#{$right}: 0;
				background: rgba(0, 0, 0, 0.8);
				position: absolute;
				z-index: 10;
				opacity: 0;
			}
			#header.side-header {
				transform: none;
				transition: ease left 300ms;
				#{$left}: -355px;
			}
		}

		// Side Header Right Hamburguer Push
		&.side-header-hamburguer-sidebar-right {
			&.side-header-hamburguer-sidebar-push {
				body > .body {
					position: relative;
					transition: ease left 300ms;
					#{$left}: 0;
					#{$right}: auto;
				}
				#header.side-header {
					transition: ease right 300ms, ease transform 300ms;
					#{$right}: -355px;
					#{$left}: auto;
				}
			}
		}
	}
}

// Side Header Hamburguer Push Visible
html {
	&.side-header-hamburguer-sidebar:not(.side-header-hide) {
		&.side-header-hamburguer-sidebar-push {
			.hamburguer-btn:not(.hamburguer-btn-side-header-mobile-show), .sticky-wrapper {
				display: none;
			}
			body > .body {
				position: relative;
				#{$right}: -355px;
			}
			.body-overlay {
				opacity: 1;
				height: 100%;
			}
			#header.side-header {
				z-index: 11;
				#{$left}: 0;
			}
		}

		&.side-header-hamburguer-sidebar-right {
			&.side-header-hamburguer-sidebar-push {
				body > .body {
					#{$left}: -355px;
					#{$right}: auto;
				}
				#header.side-header {
					#{$right}: 0;
					#{$left}: auto;
				}
			}
		}
	}
}

// Side Header Overlay Full Screen
html {
	&.side-header-overlay-full-screen {
		body > .body {
			margin: 0;
			width: auto;
			overflow-x: hidden;
			overflow-y: visible;
			.forcefullwidth_wrapper_tp_banner {
				.rev_slider_wrapper {
					width: 100% !important;
					#{$left}: auto !important;
				}
			}
		}

		#header {
			display: flex;
			align-items: center;
			background-color: rgba(#333, 0.99);
			position: fixed;
			box-shadow: 0 0 18px rgba(#444, 0.07);
			top: 0;
			#{$left}: 0;
			width: 100vw;
			height: 100vh;
			padding-top: 3rem;
			opacity: 0;
			visibility: hidden;
			transition: ease opacity 300ms, ease visibility 300ms;

			&:not(.side-header-hide) {
				opacity: 1;
				visibility: visible;
				transition: ease opacity 300ms, ease visibility 300ms;
			}
			.header-container {
				&:after {
					content: none;
				}
			}
			.header-body {
				background-color: transparent;
				border: 0;
			}
			.header-row-side-header {
			    flex: 0 0 50%;
			    margin: 0 auto;
			}
			.header-nav {
				flex-direction: column;
				&.header-nav-links {
					nav {
						> ul {
							> li {
								> a {
									height: auto;
								}
							}
						}
					}
				}
			}
			.header-nav-main,
			.header-nav-main nav,
			.header-nav-main .nav {
				width: 100%;
			}
			.nav {
				flex-direction: column;
				width: 100%;
			}
			.header-nav-main {
				position: relative;
				&:before {
					content: none;
				}
				nav > ul > {
					li {
						text-align: center;
						position: static;
						margin-top: 1px;
						height: auto;
						> a {
							display: inline-block;
							border: 0;
							font-size: 1.8rem;
							text-transform: none;
							color: var(--light);
							padding: 15px 0 !important;
							font-weight: 600;
							&:after {
								top: -2px !important;
							}
							&.open, &.accessibility-open, &:focus, &:active, &.active {
								background: transparent;
							}
						}
						a {
							.fa-chevron-down {
								display: none !important;
							}
						}
						&.dropdown {
							.dropdown-item {
								transition: ease left 300ms;
								position: relative;
								#{$left}: 0;
								&:after {
									display: none;
								}
								&:before {
									display: none !important;
								}
								&:hover {
									#{$left}: 5px;
								}
							}
							.dropdown-menu {
								position: static;
								background: transparent !important;
								box-shadow: none;
								display: none !important;
								li {
									a {
										border: 0;
										font-size: 1.1rem;
										color: var(--light);
										&:after {
											display: none;
										}
									}
								}
							}
							.dropdown-submenu {
								position: static;
								.dropdown-menu {
									a {
										font-size: 0.75rem;
										opacity: 0.7;
									}
								}
							}
							&.open,
							&.accessibility-open,
							.dropdown-submenu.open {
								> .dropdown-menu {
									display: block !important;
									opacity: 1;
									width: 100%;
									text-align: center;
									padding: 15px 0;
									margin: 0;
									transform: none;
									position: static;
									li {
										a {
											background: transparent;
										}
									}
								}
							}
							&.dropdown-mega {
								.dropdown-mega-content {
								    padding: 1.6rem 0 0;
									> .row {
										flex-direction: column;
										align-items: center;
										> [class*="col-"] {
											max-width: none;
										}
										> [class*="col-"] + [class*="col-"] {
											margin-top: 25px;
										}
									}
								}
								.dropdown-mega-sub-title {
									color: var(--light);
									font-size: 1.2em;
								}
								.dropdown-mega-sub-nav {
									opacity: 0.7;
									> li {
										> a {
											margin: 0 0 8px;
										    padding: 3px 8px 3px 8px;
										}
									}
								}
							}
						}
					}
				}
			}
		}
		
	}
}

// Mobile - Side Header Overlay Full Screen
@media(max-width: 991px) {
	html {
		&.side-header-overlay-full-screen {
			#header {
				.header-row-side-header {
				    flex: 0 0 100%;
				}
				.side-header-scrollable {
					height: 100% !important;
					.scrollable-content {
						#{$right}: 0 !important;
						padding-#{$right}: 10px;
						padding-#{$left}: 10px;
						overflow-y: hidden;
					}
					.scrollable-pane {
						display: none !important;
					}
				}
				.header-nav {
					height: 100%;
				}
				.header-nav-main {
					position: absolute;
				    top: 50%;
				    transform: translate3d(-50%, -50%, 0);
					nav { 
					    max-height: 80vh;
						> ul {
							> li {
								&.dropdown {
									.dropdown-item {
										&:hover {
											#{$left}: 0;
										}
									}
								}
							}
							li {
								border-bottom: 0;
								a {
									text-align: center;
								}
								&.dropdown {
									&.dropdown-mega {
										.dropdown-mega-content {
											padding: 0;
										}
										.dropdown-mega-sub-title {
											font-size: 1.2rem;
											text-align: center;
											margin-bottom: 7px;
										}
										.dropdown-mega-sub-nav {
											margin: 0;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

// Header Narrow Bar
html {
	&.side-header-hamburguer-sidebar-narrow-bar {
		.body {
			margin-#{$left}: 90px;
		}
		#header.side-header {
			transform: translateX(90px);
		}
		.slider-container {
		    left: -45px !important;
		    width: calc(100% + 90px) !important;
		}
	}
}

.side-header-narrow-bar {
	display: flex;
	flex-direction: column;
	background: var(--light);
	width: 90px;
	position: fixed;
	top: 0;
	#{$left}: 0;
	height: 100%;
	z-index: 9992;
	&:after {
		content: "";
		width: 1px;
		height: 100%;
		top: 0;
		bottom: 0;
		#{$left}: auto;
		#{$right}: 0;
		background: rgba(0, 0, 0, 0.06);
		position: absolute;
	}
	.side-header-narrow-bar-logo {

	}
	.side-header-narrow-bar-content {
		.side-header-narrow-bar-content-vertical {
			transform: rotate(-90deg);
			white-space: nowrap;
			text-transform: uppercase;
			margin-#{$left}: -18%;
		}
	}
	.side-header-narrow-bar-bottom {
		
	}
}

@media(max-width: 991px) {
	html {
		&.side-header-hamburguer-sidebar-narrow-bar {
			.body {
				padding-#{$left}: 90px;
				margin-#{$left}: 0;
			}
			#header {
				padding-#{$left}: 90px;
				#{$left}: -90px !important;
			}
		}
	}
}