/*

WARNING! DO NOT EDIT THEME FILES IF YOU PLAN ON UPDATING!

Theme files will be overwritten and your changes will be lost
when updating. Instead, add custom code in the admin under
Appearance > Theme Settings > Code or create a child theme.

*/

/* Offcanvas Layout for Responsive Nav
----------------------------------------------------------- */

.fl-nav-mobile-offcanvas.fl-responsive-nav-enabled {

	overflow-x: hidden; /* Prevent scroll on narrow devices */

 	.fl-page {
		-webkit-transition: left .20s ease-in-out, right .20s ease-in-out;
		     -o-transition: left .20s ease-in-out, right .20s ease-in-out;
		        transition: left .20s ease-in-out, right .20s ease-in-out;
		overflow-x: hidden;
	}

	.fl-page-bar {
		-webkit-transition: padding .20s ease-in;
		     -o-transition: padding .20s ease-in;
		        transition: padding .20s ease-in;
	}

	.fl-page-header-container,
	.fl-page-nav-col,
	.fl-page-nav {
		position: static;
	}

	&.fl-offcanvas-push-right .fl-page,
	&.fl-offcanvas-push-opacity-right .fl-page {
		right: 0;

		.fl-nav-offcanvas-collapse {
			right: -255px;
		}

		&.fl-nav-offcanvas-active {
			right: 250px;

			.fl-nav-offcanvas-collapse {
				right: 0;
			}
		}

		.fl-button-close {
			text-align: left;
		}
	}

	&.fl-offcanvas-push-left .fl-page,
	&.fl-offcanvas-push-opacity-left .fl-page {
		left: 0;

		.fl-nav-offcanvas-collapse {
			left: -255px;
		}

		&.fl-nav-offcanvas-active {
			left: 250px;

			.fl-nav-offcanvas-collapse {
				left: 0;
			}
		}

		.fl-button-close {
			text-align: right;
		}
	}

	&.fl-offcanvas-overlay-left .fl-page {
		.fl-nav-offcanvas-collapse {
			left: -255px;
		}

		&.fl-nav-offcanvas-active {
			.fl-nav-offcanvas-collapse {
				left: 0;
			}
		}

		.fl-button-close {
			text-align: right;
		}
	}

	&.fl-offcanvas-overlay-right .fl-page {
		.fl-nav-offcanvas-collapse {
			right: -255px;
		}

		&.fl-nav-offcanvas-active {
			.fl-nav-offcanvas-collapse {
				right: 0;
			}
		}

		.fl-button-close {
			text-align: left;
		}
	}

	header[class*=" fl-page-nav-toggle-visible-"].fl-page-header .fl-nav-offcanvas-collapse {
		padding: 0;
		-moz-box-shadow: @nav-shadow;
		-webkit-box-shadow: @nav-shadow;
		box-shadow: @nav-shadow;

		.fl-change-row-color(
			fade(@header-bg-color, @header-bg-opacity),
			@header-fg-color,
			@header-fg-link-color,
			@header-fg-hover-color,
			@header-border-color
		);
	}

	.fl-nav-offcanvas-collapse.navbar-collapse {
		display: block !important;
		visibility: visible !important;
		overflow-y: auto !important;
		position: fixed;
		top: 0;
		height: 100% !important;
		width: 250px;
		z-index: 999999;
		opacity: 0;

		-webkit-transition: left .20s ease-in-out, right .20s ease-in-out;
		     -o-transition: left .20s ease-in-out, right .20s ease-in-out;
		        transition: left .20s ease-in-out, right .20s ease-in-out;
	}

	.fl-button-close {
		display: block;
	}

	.fl-offcanvas-close {
		display: inline-block;
		font-size: 18px;
		border: 0 none;
		background: transparent;
		cursor: pointer;
		&:hover,
		&:focus {
			background: transparent;
		}
	}

	.fl-nav-offcanvas-active {
		header[class*=" fl-page-nav-toggle-visible-"].fl-page-header .fl-nav-offcanvas-collapse {
			display: block !important;
			visibility: visible !important;
		}
		.fl-offcanvas-opacity {
			opacity: 1;
			width: auto;
		}
		.fl-nav-offcanvas-collapse.navbar-collapse {
			opacity: 1;
		}
		overflow: visible;
	}

	.fl-offcanvas-opacity {
		opacity: 0;
		position: fixed;
		width: 0;
	    height: 100%;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-color: rgba(0,0,0,0.4);
	    z-index: 110;
	    cursor: pointer;
		-webkit-transition: left .20s ease-in-out, right .20s ease-in-out;
		     -o-transition: left .20s ease-in-out, right .20s ease-in-out;
		        transition: left .20s ease-in-out, right .20s ease-in-out;
	}

	/* Shrink Header */
	&.fl-shrink-header-enabled {

		.fl-page {
			padding-top: 0!important;
		}

		.fl-page-header {
			position: relative;

			&.fl-shrink-header {
				.fl-page-header-wrap {
					background: inherit;
					min-width: 100%;
					max-width: 90%;
					position: fixed;

					-webkit-transition: all .25s ease-out;
					     -o-transition: all .25s ease-out;
					        transition: all .25s ease-out;
				}
			}
		}

		.fl-shrink-header .navbar-toggle {
			position: fixed;
			top: 15px;
		}

		.fl-page-bar ~ .fl-shrink-header .navbar-toggle {
			top: 45px;
		}

		&.admin-bar {
			.fl-page-bar ~ .fl-shrink-header .navbar-toggle {
				top: 80px;
			}

			.fl-shrink-header .navbar-toggle {
				top: 45px;
			}
		}

		.fl-nav-offcanvas-active {
			.fl-offcanvas-opacity {
				position: absolute;
				z-index: 110;
			}

			.fl-page-bar {
				z-index: 100;
			}
		}

		&.fl-offcanvas-push-left,
		&.fl-offcanvas-push-opacity-left {
			.fl-nav-offcanvas-active {
				.fl-page-bar {
					padding-left: 250px;
				}
				.fl-shrink-header .navbar-toggle {
					position: absolute;
				}
			}
		}

		&.fl-offcanvas-push-right,
		&.fl-offcanvas-push-opacity-right {
			.fl-nav-offcanvas-active {
				.fl-page-bar {
					padding-right: 250px;
				}
				.fl-shrink-header .navbar-toggle {
					right: 270px;
				}
			}
		}
	}

	/* Fixed Header */
	&.fl-fixed-header {

		.navbar-toggle {
			top: 15px;
		}

		.fl-nav-offcanvas-active {
			.fl-offcanvas-opacity {
				z-index: 110;
			}

			.fl-page-bar {
				z-index: 100;
			}

			.fl-nav-offcanvas-collapse {
				height: 100vh !important;
			}
		}

		&.fl-offcanvas-push-left,
		&.fl-offcanvas-push-opacity-left {
			.fl-nav-offcanvas-active {

				.navbar-toggle {
					position: absolute;
				}

				.fl-offcanvas-opacity {
					left: 250px;
				}
			}
		}

		&.fl-offcanvas-push-right,
		&.fl-offcanvas-push-opacity-right {
			.fl-nav-offcanvas-active {
				.fl-offcanvas-opacity {
					right: 250px;
				}
			}
		}
	}

	/* Hide Header Until Scroll */
	&.fl-scroll-header {
		.fl-page-header-primary {
			&.fl-show .fl-nav-offcanvas-collapse {
				-webkit-transform: translateY(0) !important;
				-ms-transform: translateY(0) !important;
				transform: translateY(0) !important;
			}
		}
	}

	&.admin-bar {
		.fl-nav-offcanvas-collapse {
			top: 32px;
		}
	}
}

@media (min-width: @medium-breakpoint) {
	.fl-responsive-nav-enabled {
		&.fl-shrink-header-enabled {
			&.admin-bar {
				.fl-page-bar ~ .fl-page-header {
					top: 35px!important;
				}

				.fl-page-header {
					top: 0;
				}
			}
		}

		/* Hide Header Until Scroll */
		&.fl-scroll-header {
			&.fl-offcanvas-push-right .fl-page,
			&.fl-offcanvas-push-opacity-right .fl-page {

				&.fl-nav-offcanvas-active {
					.fl-nav-offcanvas-collapse {
						right: -250px;
					}

					.fl-page-nav-bottom .fl-nav-offcanvas-collapse {
						right: 0;
					}
				}
			}

			&.fl-offcanvas-push-left .fl-page,
			&.fl-offcanvas-push-opacity-left .fl-page {

				&.fl-nav-offcanvas-active {
					.fl-nav-offcanvas-collapse {
						left: -250px;
					}

					.fl-page-nav-bottom .fl-nav-offcanvas-collapse {
						left: 0;
					}
				}
			}
		}

		/* Fixed Header */
		&.fl-fixed-header {
			&.fl-offcanvas-push-left,
			&.fl-offcanvas-push-opacity-left {
				.fl-nav-offcanvas-active .fl-page-bar {
					padding-left: 250px;
				}
			}

			&.fl-offcanvas-push-right,
			&.fl-offcanvas-push-opacity-right {
				.fl-nav-offcanvas-active .fl-page-bar {
					padding-right: 250px;
				}
			}
		}

		/* Fixed Header - Fade In */
		.fl-page-header-fixed {
			.fl-page-nav-collapse {
				display: none !important;
			}

			-webkit-transition: left .20s ease-in-out, right .20s ease-in-out;
			     -o-transition: left .20s ease-in-out, right .20s ease-in-out;
			        transition: left .20s ease-in-out, right .20s ease-in-out;
		}

		&.fl-offcanvas-push-left,
		&.fl-offcanvas-push-opacity-left {
			.fl-nav-offcanvas-active {
				.fl-page-header-fixed {
					left: 250px;
				}
			}
		}

		&.fl-offcanvas-push-right,
		&.fl-offcanvas-push-opacity-right {
			.fl-nav-offcanvas-active {
				.fl-page-header-fixed {
					right: 250px;
					left: auto;
				}
			}
		}
	}
}

@media (max-width: 782px) {
	.fl-responsive-nav-enabled.admin-bar {
		.fl-nav-offcanvas-collapse.navbar-collapse {
			top: 46px;
		}
	}
}

@media (max-width: 600px) {
	.fl-responsive-nav-enabled.admin-bar {
		.fl-nav-offcanvas-collapse.navbar-collapse {
			top: 0;
		}
	}
}