// Navigation

.nav-sidebar {
	position: fixed;
	display: flex;
	flex-direction: column;
  justify-content: center;
	right: -270px;
	top: 0;
	bottom: 0;
	width: 270px;
	z-index: 9998;
	padding: 140px 40px;
	background: $primary;
	box-shadow: $shadow;
	&.open {
		right: 0;
	}
	nav {
		.nav-link {
			color: $white;
			font-weight: $bold;
			border-bottom: 1px solid rgba(255,255,255, .1);
			padding: 1rem 0;
			&:hover, &.active {
				color: $secondary;
			}
		}
	}
}

.nav-style-2 {
	margin-bottom: -114px;
	z-index: 999;
	position: relative;
}

.nav-toggler {
	background: $white;
	box-shadow: $shadow;
	border-radius: $circle;
	padding: 21px 19px 19px;
	z-index: 9999;
	position: fixed;
	width: 60px;
	height: 60px;
	text-align:center;
  top: 35px;
  right: 35px;
	cursor: pointer;
	@include transition(all 1s ease);
	&:hover {
		box-shadow: $shadow-hover;
		@include transition(all 1s ease);
	}
}

	#nav-icon {
	  width: 22px;
	  height: 16px;
	  position: relative;
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	  -webkit-transition: .5s ease-in-out;
	  -moz-transition: .5s ease-in-out;
	  -o-transition: .5s ease-in-out;
	  transition: .5s ease-in-out;
	  cursor: pointer;
	}

	#nav-icon span {
	  display: block;
	  position: absolute;
	  height: 0.12rem;
	  width: 100%;
	  background: $body-color;
	  border-radius: 9px;
	  opacity: 1;
	  left: 0;
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	  -webkit-transition: .25s ease-in-out;
	  -moz-transition: .25s ease-in-out;
	  -o-transition: .25s ease-in-out;
	  transition: .25s ease-in-out;
	}

	#nav-icon span:nth-child(1) {
	  top: 0px;
	  left: 0px;
	}

	#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
	  top: 8px;
	}

	#nav-icon span:nth-child(4) {
	  top: 16px;
	  left: 0px;
	}

	#nav-icon.open span:nth-child(1) {
	  top: 8px;
	  width: 0%;
	  left: 50%;
	}

	#nav-icon.open span:nth-child(2) {
	  -webkit-transform: rotate(45deg);
	  -moz-transform: rotate(45deg);
	  -o-transform: rotate(45deg);
	  transform: rotate(45deg);
	}

	#nav-icon.open span:nth-child(3) {
	  -webkit-transform: rotate(-45deg);
	  -moz-transform: rotate(-45deg);
	  -o-transform: rotate(-45deg);
	  transform: rotate(-45deg);
	}

	#nav-icon.open span:nth-child(4) {
	  top: 8px;
	  width: 0%;
	  left: 50%;
	}


.nav-style-3 {
	nav.navbar-light {
		@include transition(all .4 ease-in-out);
		box-shadow: none;
		margin-bottom: -115px;
		z-index: 9999;
	  ul.navbar-nav {
	    li {
				&.active > a.nav-link {
					color: $white;
				}
	      padding-right: 10px;
	    	padding-left: 10px;
	      a.nav-link {
	        color: $white;
	        letter-spacing: 0.07em;
	        font-weight: $bold;
					padding: 1.7rem 0.5rem;
					&:hover {
						color: $yellow;
						background: none;
					}
	      }
				&.dropdown {
					.dropdown-item {
						margin-left: 0px;
						@include transition(all .4 ease-in-out);
					}
					.dropdown-item.active, .dropdown-item:active {
					   color: $primary;
						 text-decoration: none;
					   background: none;
					}
					.dropdown-item:focus,
					.dropdown-item:hover {
						background: none;
						color: $primary;
						margin-left: 5px;
						@include transition(all .4 ease-in-out);
					}
					.megamenu {
						position: absolute;
						width: 100%;
						left: 0;
						right: 0;
						padding: 2rem 0;
						margin: 0;
						box-shadow: $shadow;
						h1, h2, h3, h4, h5, h6 {
							font-size: $body-size;
							margin: 0;
							padding: 0.75rem 1.5rem;
						}
						.row {
							min-width: 100%;
						}
					}
					.dropdown-menu {
						top: auto;
						margin: 0;
						border: none;
						border-radius: 0;
						box-shadow: $shadow;
						li {
							a.nav-link {
								padding: 0.5rem 1rem;
							}
						}
					}
					&:hover {
						.dropdown-menu {
							display: block;
							top: 100%;
							animation: menuanim ease-in-out 0.4s ;
						}
					}
				}
	    }
	  }
	}
	.megamenu-li {
		position: static;
	}
}

nav.navbar-light {
	@include transition(all .4 ease-in-out);
	box-shadow: none;
	&.navbar {
		padding: 0rem 1rem;
	}
	&.white-bg {
		background: $white;
		box-shadow: $shadow;
		@include transition(all .4 ease-in-out);
	}
  ul.navbar-nav {
    li {
			&.active > a.nav-link {
				color: $primary;
			}
      padding-right: 10px;
    	padding-left: 10px;
      a.nav-link {
        color: $heading-color;
        letter-spacing: 0.07em;
        font-weight: $bold;
				padding: 1.7rem 0.5rem;
				&:hover {
					color: $primary;
					background: none;
				}
      }
			&.dropdown {
				.dropdown-item {
					margin-left: 0px;
					@include transition(all .4 ease-in-out);
				}
				.dropdown-item.active,
				.dropdown-item:active {
					 color: $primary;
					 text-decoration: none;
					 background: none;
				}
				.dropdown-item:focus,
				.dropdown-item:hover {
					background: none;
					color: $primary;
					margin-left: 5px;
					@include transition(all .4 ease-in-out);
				}
				.megamenu {
					width: 100%;
					left: 0;
					right: 0;
					padding: 2rem 0;
					margin: 0;
					box-shadow: $shadow;
					h1, h2, h3, h4, h5, h6 {
						font-size: $body-size;
						margin: 0;
						padding: 0.75rem 1.5rem;
					}
					.row {
						min-width: 100%;
					}
				}
				.dropdown-menu {
					top: auto;
					margin: 0;
					border: none;
					border-radius: 0;
					box-shadow: $shadow;
					li {
						a.nav-link {
							padding: 0.5rem 1rem;
						}
					}
				}
				&:hover {
					.dropdown-menu {
						display: block;
						top: 100%;
						animation: menuanim ease-in-out 0.4s ;
					}
				}
			}
    }
  }
}
.megamenu-li {
	position: static;
}

@keyframes menuanim {
	0% {
		top: 110%;
		opacity: 0;
	}
	100% {
		top: 100%;
		opacity: 1;
	}
}
