@charset "UTF-8";

/*-----------------------------------------------------------------------------------
	
	Menu | Version: 1

-----------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------

	- Luxbar
	- Drop-Down

---------------------------------------------------------------- */

/* ----------------------------------------------------------------
	Luxbar
-----------------------------------------------------------------*/

	.luxbar {}

		.luxbar-default {
			background: #FFF;
			width: 100%;
			position: relative;
			 /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); */
			z-index: 1000;
		}

		.luxbar-static {
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1000;
		}
			.luxbar-static .luxbar-checkbox:checked ~ .luxbar-menu {
				position: absolute; 
			}

		.luxbar-fixed {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
		}

		.luxbar-fixed-bottom {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 1000;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
		}

		.luxbar-hamburger span, .luxbar-hamburger span::before, .luxbar-hamburger span::after {
			display: block;
			width: 26px; height: 2px;
			transition: 0.6s ease;
		}

		.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span {
			background-color: transparent;
		}
		.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::before, .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::after {
			margin-top: 0; 
		}

	.luxbar-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 58px;
	}

		.luxbar-header .luxbar-brand,
		.luxbar-header .luxbar-brand img {
			height: 58px;
		}
			.luxbar-header .luxbar-brand img {
				padding: 5px 0;
			}

		.luxbar-menu-left .luxbar-navigation,
		.luxbar-menu-left .luxbar-header {
			justify-content: flex-start;
		}

		.luxbar-menu-right .luxbar-hamburger {
			margin-left: auto;
		}

		.luxbar-brand {
			font-size: 1.6em;
			/* padding: 18px 24px 18px 24px; */
		}

		.luxbar-menu {
			min-height: 58px;
			transition: 0.6s ease;
			width: 100%;
		}

			.luxbar-navigation {
				/* display: flex; */
				flex-direction: column;
				list-style: none;
				padding-left: 0;
				margin: 0;
			}

			.luxbar-menu a,
			.luxbar-item a {
				text-decoration: none;
				cursor: pointer;
			}

			.luxbar-item {
				height: 58px;
			}
			.luxbar-item a {
				padding: 18px 24px 18px 24px;
				display: block; 
			}

			.luxbar-hamburger {
				padding: 28px 13px 0 0;
				margin: 0;
				position: relative;
				cursor: pointer;
			}
			.luxbar-hamburger span::before, .luxbar-hamburger span::after {
				content: '';
				position: absolute; 
			}
			.luxbar-hamburger span::before {
				margin-top: -8px; 
			}
			.luxbar-hamburger span::after {
				margin-top: 8px; 
			}

			.luxbar-checkbox {
				display: none;
			}
			.luxbar-checkbox:not(:checked) ~ .luxbar-menu {
				overflow: hidden;
				height: 58px; 
			}
			.luxbar-checkbox:checked ~ .luxbar-menu {
				transition: height 0.6s ease;
				height: 100vh;
				overflow: auto; 
			}
		
		/*Link Font Color*/
			.luxbar-item:hover > a,
			.dropdown > ul .luxbar-item:hover a {
				color: #920d1d;
			}

	@media screen and (min-width: 768px) {
		.luxbar-navigation {
			flex-flow: row;
			justify-content: flex-end; 
		}

		.luxbar-hamburger {
			display: none; 
		}

		.luxbar-checkbox:not(:checked) ~ .luxbar-menu {
			overflow: visible; 
		}
		.luxbar-checkbox:checked ~ .luxbar-menu {
			height: 58px; 
		}

		.luxbar-menu .luxbar-item {
			border-top: 0; 
		}

		.luxbar-menu-right .luxbar-header {
			margin-right: auto; 
		}
	}

	.luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-doublespin span::before {
		transform: rotate(225deg);
	}
	.luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-doublespin span::after {
		transform: rotate(-225deg);
	}
	.luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-spin span::before {
		transform: rotate(45deg);
	}
	.luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-spin span::after {
		transform: rotate(-45deg);
	}

	/* Bar Color */

		/*Dark*/
			.luxbar-menu-dark,
			.luxbar-menu-dark .dropdown ul {
				background-color: #212121;
				color: #fff;
			}

			.luxbar-menu-dark .active,
			.luxbar-menu-dark .luxbar-item:hover {
				background-color: #424242;
			}
			.luxbar-menu-dark .luxbar-hamburger span,
			.luxbar-menu-dark .luxbar-hamburger span::before,
			.luxbar-menu-dark .luxbar-hamburger span::after {
				background-color: #fff;
			}
		
		/*Light*/
			.luxbar-menu-light,
			.luxbar-menu-light .dropdown ul {
				background-color: #e0e0e0;
				color: #212121;
			}

			.luxbar-menu-light .active,
			.luxbar-menu-light .luxbar-item:hover {
				background-color: #bdbdbd;
			}
			.luxbar-menu-light .luxbar-hamburger span,
			.luxbar-menu-light .luxbar-hamburger span::before,
			.luxbar-menu-light .luxbar-hamburger span::after {
				background-color: #212121;
			}
		
		/*Red*/
			.luxbar-menu-material-red,
			.luxbar-menu-material-red .dropdown ul {
				background-color: #b71c1c;
				color: #fff;
			}

			.luxbar-menu-material-red .active,
			.luxbar-menu-material-red .luxbar-item:hover {
				background-color: #c62828;
			}
			.luxbar-menu-material-red .luxbar-hamburger span,
			.luxbar-menu-material-red .luxbar-hamburger span::before,
			.luxbar-menu-material-red .luxbar-hamburger span::after {
				background-color: #fff;
			}

		/*Indigo*/
			.luxbar-menu-material-indigo,
			.luxbar-menu-material-indigo .dropdown ul {
				background-color: #1a237e;
				color: #fff;
			}

			.luxbar-menu-material-indigo .active,
			.luxbar-menu-material-indigo .luxbar-item:hover {
				background-color: #283593;
			}
			.luxbar-menu-material-indigo .luxbar-hamburger span,
			.luxbar-menu-material-indigo .luxbar-hamburger span::before,
			.luxbar-menu-material-indigo .luxbar-hamburger span::after {
				background-color: #fff;
			}

		/*Green*/
			.luxbar-menu-material-green,
			.luxbar-menu-material-green .dropdown ul {
				background-color: #1b5e20;
				color: #fff;
			}

			.luxbar-menu-material-green .active,
			.luxbar-menu-material-green .luxbar-item:hover {
				background-color: #2e7d32;
			}
			.luxbar-menu-material-green .luxbar-hamburger span,
			.luxbar-menu-material-green .luxbar-hamburger span::before,
			.luxbar-menu-material-green .luxbar-hamburger span::after {
				background-color: #fff;
			}

		/*Amber*/
			.luxbar-menu-material-amber,
			.luxbar-menu-material-amber .dropdown ul {
				background-color: #ff6f00;
				color: #fff;
			}

			.luxbar-menu-material-amber .active,
			.luxbar-menu-material-amber .luxbar-item:hover {
				background-color: #ff8f00;
			}
			.luxbar-menu-material-amber .luxbar-hamburger span,
			.luxbar-menu-material-amber .luxbar-hamburger span::before,
			.luxbar-menu-material-amber .luxbar-hamburger span::after {
				background-color: #fff;
			}

		/*Brown*/
			.luxbar-menu-material-brown,
			.luxbar-menu-material-brown .dropdown ul {
				background-color: #3e2723;
				color: #fff;
			}

			.luxbar-menu-material-brown .active,
			.luxbar-menu-material-brown .luxbar-item:hover {
				background-color: #4e342e;
			}
			.luxbar-menu-material-brown .luxbar-hamburger span,
			.luxbar-menu-material-brown .luxbar-hamburger span::before,
			.luxbar-menu-material-brown .luxbar-hamburger span::after {
				background-color: #fff;
			}

		/*Bluegrey*/
			.luxbar-menu-material-bluegrey,
			.luxbar-menu-material-bluegrey .dropdown ul {
				background-color: #263238;
				color: #fff;
			}

			.luxbar-menu-material-bluegrey .active,
			.luxbar-menu-material-bluegrey .luxbar-item:hover {
				background-color: #37474f;
			}
			.luxbar-menu-material-bluegrey .luxbar-hamburger span,
			.luxbar-menu-material-bluegrey .luxbar-hamburger span::before,
			.luxbar-menu-material-bluegrey .luxbar-hamburger span::after {
				background-color: #fff;
			}

		/*Cyan*/
			.luxbar-menu-material-cyan,
			.luxbar-menu-material-cyan .dropdown ul {
				background-color: #006064;
				color: #fff;
			}

			.luxbar-menu-material-cyan .active,
			.luxbar-menu-material-cyan .luxbar-item:hover {
				background-color: #00838f;
			}
			.luxbar-menu-material-cyan .luxbar-hamburger span,
			.luxbar-menu-material-cyan .luxbar-hamburger span::before,
			.luxbar-menu-material-cyan .luxbar-hamburger span::after {
				background-color: #fff;
			}

/*# sourceMappingURL=luxbar.css.map */

    /*.luxbar-brand, .luxbar-brand img { height: 45px; }*/
    header .luxbar-navigation {
        display: flex;
    }
    .luxbar-navigation {
        /* max-width: 1160px;
        margin: auto; */
    }
    .luxbar-hamburger span, .luxbar-hamburger span::before, .luxbar-hamburger span::after {
        background: #000;
    }
    /* min */
        @media screen and (min-width: 576px) {
            .luxbar-menu {
                max-width: 540px;
            }
        }
        @media screen and (min-width: 768px) {
            .luxbar-menu {
                max-width: 720px;
            }
        }
        @media screen and (min-width: 992px) {
            .luxbar-menu {
                max-width: 960px;
            }
        }
        @media screen and (min-width: 1200px) {
            .luxbar-menu {
                max-width: 1140px;
            }
        }
    /* max */
        @media screen and (max-width: 768px) {
            .luxbar-header {
                display: block;
                /*width: 100%;*/
                /*margin-left: -15px;*/
                /*margin-right: -15px;*/
                position: relative;
            }
                .luxbar-header .luxbar-brand {
                    display: block;
                    position: absolute;
                    top: 0; bottom: 0;
                    left: 10px;
                }
                .luxbar-header .luxbar-hamburger {
                    display: block;
                    position: absolute;
                    top: 0; bottom: 0;
                    right: 0;
                }
        }
    .luxbar-menu {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

/* ----------------------------------------------------------------
	Drop-Down
-----------------------------------------------------------------*/

	.dropdown {
		position: relative;
		height: auto;
		min-height: 58px;
	}
		.dropdown:hover > ul {
			/*position: relative;*/
			display: block;
			min-width: 100%;
		}
		.dropdown > a::after {
			position: absolute;
			content: '';
			right: 10px;
			top: 25px;
			border-width: 5px 5px 0;
			border-color: transparent;
			border-style: solid; 
		}
		.dropdown > ul {
			display: block;
			overflow-x: hidden;
			list-style: none;
			padding: 0;
		}
		.dropdown > ul .luxbar-item {
			min-width: 100%;
			/*min-height: 29px;*/
			height: initial;
			padding: 8px 10px; 
		}
		.dropdown > ul .luxbar-item a {
			font-size: 15px;
			line-height: 20px;
			/*min-height: 29px;*/
			padding: 0; 
		}
		.dropdown > ul .luxbar-item:hover {
			background-color: #f1f1f1;
		}

	/*animation*/
		.dropdown {}
			.dropdown > ul {
				/* close */
				visibility: hidden;
				/* hides sub-menu */
				opacity: 0;
				position: absolute;
				/*top: 100%;*/
				/*top: 58px;*/
				top: 0;
				left: 0;
				width: 140%;
				transform: translateY(-2em);
				z-index: -1;
				transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
			}
			.dropdown:hover > ul {
				/* style */
				position: relative !important;
				background: #f9f9f9;
				/* open */
				visibility: visible;
				/* shows sub-menu */
				opacity: 1;
				z-index: 1;
				transform: translateY(0%);
				transition-delay: 0s, 0s, 0.3s;
				/* this removes the transition delay so the menu will be visible while the other styles transition */
			}
	/* presentational */
		.dropdown > ul {
			background: rgba(255,255,255,1);
			box-shadow: 0 0 10px rgba(0,0,0,0.2);
		}

	/*min*/
	@media screen and (min-width: 768px) {}
	
	/*max*/
	@media screen and (max-width: 768px) {
		.luxbar-menu {
			padding-left: 0;
			padding-right: 0;
		}
		.dropdown > ul {
			width: 100%;
			padding-left: 15px;
			padding-right: 15px;
			box-shadow: 0 0 0 rgba(0,0,0,0);
		}
	}