﻿
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.menu-container {
		width: 100%;
		margin: 0 auto;
		background: #fff !important;
		height: 50px !important;
		/*overflow: hidden !important;*/
}

.menu-mobile {
		display: none;
		padding: 20px;
}

		.menu-mobile:after {
				content: "+";
				/*font-family: "Ionicons";*/
				font-size: 2.5rem;
				padding: 0;
				float: right;
				position: relative;
				top: 50%;
				-webkit-transform: translateY(-25%);
				-ms-transform: translateY(-25%);
				transform: translateY(-25%);
		}

.menu-dropdown-icon:before {
		content: "+";
		/*font-family: "Ionicons";*/
		display: none;
		cursor: pointer;
		float: right;
		padding: 1.5em 2em;
		background: #fff;
		color: #333;
		position:absolute;
		right:0 !important;
}

.menu > ul {
		margin: 0 auto;
		width: 100%;
		list-style: none;
		padding: 0;
		position: relative;
		/* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
		box-sizing: border-box;
		z-index: 900 !important;
}

		.menu > ul:before,
		.menu > ul:after {
				content: "";
				display: table;
		}

		.menu > ul:after {
				clear: both;
		}

		.menu > ul > li {
				float: left;
				background: #fff !important;
				padding: 0;
				margin: 0;
		}

				.menu > ul > li a {
						text-decoration: none;
						padding: 1.5em 3em;
						display: block;
				}

				.menu > ul > li:hover {
						background: #f1f1f1 !important;
				}

				.menu > ul > li > ul {
						display: none;
						width: 100%;						
						padding-top: 20px;
						position: absolute;
						z-index: 10000;
						left: 0;
						margin: 0;
						list-style: none;
						box-sizing: border-box;
						background: var(--menubg) !important;
						border-bottom: solid 20px var(--menufont);						
				}

						.menu > ul > li > ul:before,
						.menu > ul > li > ul:after {
								content: "";
								display: table;
						}

						.menu > ul > li > ul:after {
								clear: both;
						}

						.menu > ul > li > ul > li {
								margin: 0;
								padding-bottom: 0;
								list-style: none;
								width: 25%;
								background: none;
								float: left;
						}

								.menu > ul > li > ul > li a {
										color: #000;
										padding: 5px;
										width: 95%;
										display: block;																				
										font-weight: 700 !important;
								}

								.menu > ul > li > ul > li > ul {
										display: block;
										padding: 0;
										margin: 10px 0 0;
										list-style: none;
										box-sizing: border-box;
								}

										.menu > ul > li > ul > li > ul:before,
										.menu > ul > li > ul > li > ul:after {
												content: "";
												display: table;
										}

										.menu > ul > li > ul > li > ul:after {
												clear: both;
										}

										.menu > ul > li > ul > li > ul > li {
												float: left;
												width: 100%;
												padding: 10px 0;
												margin: 0;
												font-size: .8em;
										}

												.menu > ul > li > ul > li > ul > li a {
														border: 0;
												}

						.menu > ul > li > ul.normal-sub {
								width: 300px;
								left: auto;
								padding: 10px 20px;
						}

								.menu > ul > li > ul.normal-sub > li {
										width: 100%;
								}

										.menu > ul > li > ul.normal-sub > li a {
												border: 0;
												padding: 1em 0;
										}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 1024px) {
		.menu-container {
				width: 100%;
		}

		.menu-mobile {
				display: block;
		}

		.menu-dropdown-icon:before {
				display: block;
		}

		.menu > ul {
				display: none;
		}

				.menu > ul > li {
						width: 100%;
						float: none;
						display: block;
				}

						.menu > ul > li a {
								padding: 1.5em;
								
								display: inline-block;
						}

						.menu > ul > li > ul {
								position: relative;
						}

								.menu > ul > li > ul.normal-sub {
										width: 100%;
								}

								.menu > ul > li > ul > li {
										float: none;
										width: 100%;
										margin-top: 20px;
								}

										.menu > ul > li > ul > li:first-child {
												margin: 0;
										}

										.menu > ul > li > ul > li > ul {
												position: relative;
										}

												.menu > ul > li > ul > li > ul > li {
														float: none;
												}

		.menu .show-on-mobile {
				display: block;
				z-index: 10000000 !important;
		}
}

button {
		background-color: var(--buttonbg) !important;
		color: var(--buttonfont) !important;
}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
		background-color: var(--bg);
		color: var(--font);
		border: solid 1px var(--font);
}