/*#######################################
	Mobile Menu
	-everywhere-
	14.03.2016
	Last update: <!--%DateStamp%-->22.01.2018<!---->
#######################################*/


.mobile-menu-icon
	{
		position: absolute;
		top: 15px; right: 20px;
	}

.navbox
	{
		position: relative;
		width: 100%;
		z-index: 50;
	}



/* Strip the ul of padding and list styling */
ul#menu
	{
		position: relative;
		width: 100%;
		margin: 0px auto;
		padding: 0px;
		text-align: center;
		list-style-type: none;
		background-color: #595B5C;
	}

.navbox ul li a,
ul#menu li:hover ul a
	{
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		-ms-transition: all 0.2s;
		-o-transition: all 0.2s;
		transition: all 0.2s;
	}


/* Create a horizontal list with spacing */
ul#menu li
	{
		position: relative;
		margin: 0px 0px 0px;
		display: inline-block;
		box-sizing: content-box;
	}

li.branch i
	{
		position: absolute;
		left: 50%;
		bottom: 0px;
		margin-left: -5px;
		color: #333333;
		font-size: 18px;
		font-weight: bold;
		pointer-events: none;
	}

li.branch:hover i
	{
		color: #F7F7F7;
	}

ul#menu li ul.hidden li
	{
		margin: 0px;
		text-align: left;
		box-sizing: content-box;
	}

ul.hidden
	{
		/* Creates a gap betwen main and sub navigation */
		border-top: 5px solid transparent;
	}

ul#menu li.home
	{
		background-color: #C5A6A6;
		display: none;
	}

/*Style for menu links*/
ul#menu li a
	{
		padding: 16px 10px;
		color: #F7F7F7;
		font-size: 20px;
		font-weight: bold;
		text-decoration: none;
		background-color: transparent;
		-moz-border-radius: 0px;
	    -webkit-border-radius: 0px;
	    -khtml-border-radius: 0px;
	    border-radius: 0px;
		display: block;
	}

ul#menu li.branch ul.hidden li a
	{
		padding: 10px 8px;
	}

/* Link highlight */
ul#menu li a.hilight
	{
		color: #FFFFFF;
		background-color: #C9BDA7;
	}

ul#menu li a.hilight:hover
	{
		color: #FFFFFF;
		background-color: #DCD4C6;
	}

/* Cart highlight */
ul#menu li a.cart
	{
		color: #FFFFFF;
		background-color: #0FD21C;
	}

ul#menu li a.cart:hover
	{
		color: #FFFFFF;
		background-color: #24F031;
	}

ul#menu li a.cart span.cart-number
	{
		position: absolute;
		top: -6px;
		right: -13px;
		width: 26px;
		height: 26px;
		color: #FFFFFF;
		font-size: 14px;
		background-color: #D10000;
		text-align: center;
		line-height: 27px;
		border-radius: 50%;
	}



/* Hover state for top level links */
ul#menu li:hover a,
ul#menu li a.active
	{
		color: #F3F3F3;
		background-color: #8C8C8C;
	}

/*Style for dropdown links*/
ul#menu li:hover ul a
	{
		padding: 5px 4px;
		color: #333333;
		background-color: #EDEDED;
	}

/* Hover state for dropdown links */
ul#menu li:hover ul a:hover
	{
		color: #F3F3F3;
		background-color: #8C8C8C;
	}


/* Hide dropdown links until they are needed */
li ul
	{
		position: absolute;
		margin: 0px;
		display: none;
	}

/* Make dropdown links vertical */
ul#menu li ul li
	{
		display: block;
		float: none;
	}

/*Prevent text wrapping*/
ul#menu li ul li a
	{
		width: auto;
		min-width: 100px;
		font-size: 16px;
		padding: 0px 5px;
		white-space: nowrap;
	}

/*Display the dropdown on hover*/
ul#menu li a:hover + .hidden,
.hidden:hover
	{
		display: block;
	}

/*Style 'show menu' label button and hide it by default*/
.show-menu
	{
		padding: 10px 0px;
		color: #F7F7F7;
		text-align: center;
		text-decoration: none;
		background-color: #707070;
		-moz-border-radius: 0px;
	    -webkit-border-radius: 0px;
	    -khtml-border-radius: 0px;
	    border-radius: 0px;
		display: none;
	}

/*Hide checkbox*/
input[type=checkbox]#show-menu
	{
	    display: none;
	}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]#show-menu:checked ~ #menu
	{
	    display: block;
	}


/* ---------------------------------------------------------------------------------------
** Mobile layout
---------------------------------------------------------------------------------------- */

/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) iPad landscape */
@media only screen and (max-width: 959px)
	{

	}

/* Tablet Portrait size to standard 960 (devices and browsers) iPad portrait */
@media only screen and (min-width: 768px) and (max-width: 959px)
	{
		ul#menu li
			{
				margin: 0px 0px 10px;
			}

		ul#menu li a
			{
				padding: 12px 0px;
			}

		ul#menu li.logo
			{
				display: none;
			}

		ul#menu li.home
			{
				display: block;
			}

		ul#menu li ul.hidden li
			{
				text-align: center;
			}

		ul#menu li.branch ul.hidden li a
			{
				padding: 20px 4px;
			}

		ul#menu li:hover ul a
			{
				height: auto;
				line-height: normal;
			}

		li.branch i
			{
			    position: absolute;
			    right: 0px;
			    top: 12px;
				width: 12px;
				margin-left: 80px;
				font-size: 24px;
				font-weight: bold;
				color: #333333;
				pointer-events: none;
			}

		li.branch:hover i
			{
				color: #F7F7F7;
			}


		/* Make dropdown links appear inline */
		ul#menu
			{
				position: static;
				width: 100%;
				display: none;
			}

		/* Create vertical spacing */
		li
			{
				margin-bottom: 1px;
			}

		li ul
			{
				position: relative;
			}

		/* Make all menu links full width */
		ul li,
		li a
			{
				width: 100%;
			}

		ul.hidden
			{
				border-top: 5px solid transparent;
			}

		ul#menu li ul.hidden li
			{
				margin-bottom: 5px;
			}

		/* Display 'show menu' link */
		.show-menu
			{
				display: block;
			}
	}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px)
	{

	}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) iPhone landscape */
@media only screen and (min-width: 480px) and (max-width: 767px)
	{

		ul#menu li
			{
				margin: 0px 0px 10px;
			}

		ul#menu li a
			{
				padding: 12px 0px;
			}

		ul#menu li.logo
			{
				display: none;
			}

		ul#menu li.home
			{
				display: block;
			}

		ul#menu li ul.hidden li
			{
				text-align: center;
			}

		ul#menu li.branch ul.hidden li a
			{
				padding: 20px 4px;
			}

		ul#menu li:hover ul a
			{
				height: auto;
				line-height: normal;
			}

		li.branch i
			{
			    position: absolute;
			    right: 0px;
			    top: 12px;
				width: 12px;
				margin-left: 80px;
				font-size: 24px;
				font-weight: bold;
				color: #333333;
				pointer-events: none;
			}

		li.branch:hover i
			{
				color: #F7F7F7;
			}

		/* Make dropdown links appear inline */
		ul#menu
			{
				position: static;
				width: 100%;
				display: none;
			}

		/* Create vertical spacing */
		li
			{
				margin-bottom: 1px;
			}

		li ul
			{
				position: relative;
			}

		/* Make all menu links full width */
		ul#menu li,
		li a
			{
				width: 100%;
			}

		ul.hidden
			{
				border-top: 5px solid transparent;
			}

		ul#menu li ul.hidden li
			{
				margin-bottom: 5px;
			}

		/* Display 'show menu' link */
		.show-menu
			{
				margin-bottom: 0px;
				display: block;
			}
	}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) iPhone portrait */
@media only screen and (max-width: 479px)
	{
		ul#menu li
			{
				margin: 0px 0px 10px;
			}

		ul#menu li a
			{
				padding: 12px 0px;
			}

		ul#menu li.logo
			{
				display: none;
			}

		ul#menu li.home
			{
				display: block;
			}

		ul#menu li ul.hidden li
			{
				text-align: center;
			}

		ul#menu li.branch ul.hidden li a
			{
				padding: 20px 4px;
			}

		ul#menu li:hover ul a
			{
				height: auto;
				line-height: normal;
			}

		li.branch i
			{
			    position: absolute;
			    right: 0px;
			    top: 12px;
				width: 12px;
				margin-left: 80px;
				font-size: 24px;
				font-weight: bold;
				color: #333333;
				pointer-events: none;
			}

		li.branch:hover i
			{
				color: #F7F7F7;
			}

		/* Make dropdown links appear inline */
		ul#menu
			{
				position: static;
				width: 100%;
				display: none;
			}

		/* Create vertical spacing */
		li
			{
				margin-bottom: 1px;
			}

		li ul
			{
				position: relative;
			}

		/* Make all menu links full width */
		ul#menu li,
		li a
			{
				width: 100%;
			}

		ul.hidden
			{
				border-top: 5px solid transparent;
			}

		ul#menu li ul.hidden li
			{
				margin-bottom: 5px;
			}

		/* Display 'show menu' link */
		.show-menu
			{
				margin-bottom: 0px;
				display: block;
			}
	}