ul#navigation {
	position:relative;
	text-align:left;
	margin:0;
	padding:0;
	border:0;
	width:650px;
	}

ul#navigation li {
	position:relative;
	display:inline;
	word-wrap:normal;
	white-space:nowrap;
	text-align:left;
	margin:0;
	padding:0;
	border:0;
	}

ul#navigation>li a {
	width:100%;
	height:100%;
	text-align:left;
	margin:0;
	padding:5px 0;
	border:0;
	}

ul#navigation>li:last-child {
	float:right;
}

ul#navigation>li:last-child input[type='text'] {
	float:right;
	margin:8px 0 0 0;
}

#searchbutton {
	float:right;
	width:16px;
	height:21px;
	margin:8px 10px 0 0;
}

ul#navigation ul {
	display:none;
	position:absolute;
	top:25px;
	left:0;
	background:#fff;
	text-align:left;
	margin:0;
	padding:0;
	border:0;
	overflow:hidden;
	}

ul#navigation ul li {
	position:relative;
	display:block;
	word-wrap:normal;
	white-space:nowrap;
	text-align:left;
	margin:0;
	padding:0;
	border:0;
	}

ul#navigation ul li a {
	padding:5px 0;
}

/* gaysite specific */

ul#navigation {
	float:left;
	/* margin:119px 0 0 162px;
	margin:89px 0 0 162px; */
	margin:6px 0 0 140px;
	color:#fff;
	}

ul#navigation li a, ul#navigation li a:link, ul#navigation li a:visited, ul#navigation li a:hover, ul#navigation li a:active {
	color:#fff;
	text-decoration:none;
	}

ul#navigation ul {
	background:#fff;
	-webkit-border-bottom-right-radius: 9px;
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomright: 9px;
	-moz-border-radius-bottomleft: 9px;
	border-bottom-right-radius: 9px;
	border-bottom-left-radius: 9px;
	-webkit-border-top-left-radius: 0;
	-webkit-border-top-right-radius: 0;
	-moz-border-radius-topleft: 0;
	-moz-border-radius-topright: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	border-left:1px solid #000;
	border-top:0;
	top:22px;
	left:0px;
	}

ul#navigation>li {
	color:#fff;
	}

ul#navigation>li:after {
	content:"|";
	color:#fff;
	}

ul#navigation>li:last-child:after {
	content:"";
	}

ul#navigation li ul li a {
	display:block;
	width:100%;
	height:100%;
	padding:0 9px 0 9px;
	}

ul#navigation li ul li a:hover {
	background:#c50000;
	color:#fff;
	}

/* -------------------------------------- redesign jan 2018 ---------------------------------------- */


ul#navigation {
	box-sizing:border-box;
	width:100%;
	height:38px;
	line-height:38px;
	margin:0;
	background:#fff;
	color:#000;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
}

ul#navigation>li {
	font-size:16px;
	color:#000;
	text-transform:uppercase;
}

ul#navigation>li::after {
	font-size:16px;
	color:#000;
	margin:0 6px 0 6px;
	content: "|";
}

ul#navigation>li a, ul#navigation>li a:link, ul#navigation>li a:visited, ul#navigation>li a:hover, ul#navigation>li a:active {
	font-size:16px;
	color:#000;
}

ul#navigation ul {
	box-sizing:border-box;
	top:29px;
	background:#fff;
	z-index:1;
}

@-moz-document url-prefix() {
	ul#navigation ul {
		top:28px;
	}
}

/**
 * Conditional CSS for Edge 12+.
 * @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
 */
@supports (-ms-ime-align:auto) {
	/* Conditional Edge styles */
	ul#navigation ul {
		top:28px;
	}
}

/**
 * Conditional CSS for IE 8+ (and old Firefox 1.x).
 * @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
 */
@media screen\0 {
	/* Conditional IE styles */
	ul#navigation ul {
		top:28px;
	}
}



ul#navigation ul li {
	font-size:12px;
	line-height:24px;
	height:24px;
	padding:0;
	margin:0;
}

ul#navigation ul li::first {
	padding-top:10px;
}

ul#navigation ul li a {
	box-sizing:border-box;
	display:block;
	width:100%;
	height:100%;
	font-size:12px;
	line-height:24px;
	padding:5px 0 5px 0;
}

ul#navigation ul li a, ul#navigation ul li a:link, ul#navigation ul li a:visited, ul#navigation ul li a:hover, ul#navigation ul li a:active {
	font-size:12px;
	color:#000;
}

ul#navigation li.limobileonly {
	display:none;
}

/* ------------------------------ START RESPONSIVE ------------------------------- */

@media screen and (max-device-width: 888px) {

	.nav-up {
		top: -60px; // same as header height. use variables in LESS/SASS
	}

	#header {
		margin-top:0;
	}
	#socmed {
		display:none;
	}

	#menuToggle input, #menuToggle span {
		/* display:none; */
	}

	#menuToggle input[type="checkbox"] {
		display:block;
	}

	ul#navigation {
		height:auto;
		position:absolute;
		padding:60px 0 0 15px;
		top:-20px;
		left:-20px;
		border-top:0;
		border-right:1px solid #ccc;
		border-bottom:1px solid #ccc;
		border-left:0;
	}

	ul#navigation li {
		display:block;
		line-height:30px;
	}

	ul#navigation > li::after {
		margin:0;
		content:"";
	}

	ul#navigation ul {
		position:relative;
		top:0;
		left:0;
		z-index:1;
		background:transparent;
		border:0;
	}

	ul#navigation ul li {
		line-height:30px;
	}

	/* version 2 */

	#header {
		height:100px;
		margin-left:-10px;/* step out of container */
		background-color:#fff;
		position:fixed;
		z-index:1000;
		-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);
		box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);
		/*
		-webkit-transition: top 1.0s ease-in-out;
		-moz-transition: top 1.0s ease-in-out;
		-o-transition: top 1.0s ease-in-out;
		transition: top 1.0s ease-in-out;
		*/
	}

	#logo2 {
		float:right;
		margin-right:10px;
	}

	#menuToggle {
		top:40px;
	}

	#inlogformcontainer {
		display:none;
	}

	#main {
		padding-top:130px;
	}


	/* ------------------------------ START HAMBURGER MENU ------------------------------- */

	ul#navigation li.limobileonly {
		display:inline;
	}

	#menuToggle span {
		display:inline;
	}


	#menuToggle {
		display: block;
		position: relative;
		left: 10px;  
		z-index: 1;  
		-webkit-user-select: none;
		user-select: none;
		width:210px;
	}

	#menuToggle input {
		display: block;
		width: 40px;
		height: 32px;
		position: absolute;
		top: -7px;
		left: -5px;  
		cursor: pointer;  
		opacity: 0; /* hide this */
		z-index: 2; /* and place it over the hamburger */  
		-webkit-touch-callout: none;
	}

	/*
	 * Just a quick hamburger
	 */
	#menuToggle span {
		display: block;
		width: 33px;
		height: 4px;
		margin-bottom: 5px;
		position: relative;  
		background: #000;
		border-radius: 3px;  
		z-index: 1;  
		transform-origin: 4px 0px;  
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
		background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
		opacity 0.55s ease;
	}

	#menuToggle span:first-child {
		transform-origin: 0% 0%;
	}

	#menuToggle span:nth-last-child(2) {
		transform-origin: 0% 100%;
	}

	/* 
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	#menuToggle input:checked ~ span {
		opacity: 1;
		-webkit-transform: rotate(45deg) translate(-2px, -1px);
		-ms-transform: rotate(45deg) translate(-2px, -1px);
		transform: rotate(45deg) translate(-2px, -1px);
		background: #232323;
	}

	/*
	 * But let's hide the middle one.
	 */
	#menuToggle input:checked ~ span:nth-last-child(3) {
		opacity: 0;
		-webkit-transform: rotate(0deg) scale(0.2, 0.2);
		-ms-transform: rotate(0deg) scale(0.2, 0.2);
		transform: rotate(0deg) scale(0.2, 0.2);
	}

	/*
	 * Ohyeah and the last one should go the other direction
	 */
	#menuToggle input:checked ~ span:nth-last-child(2) {
		-webkit-transform: rotate(-45deg) translate(0, -1px);
		-ms-transform: rotate(-45deg) translate(0, -1px);
		transform: rotate(-45deg) translate(0, -1px);
	}

	/*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
	#navigation {
		position: absolute;
		width: 300px;
		margin: -100px 0 0 -50px;
		padding: 50px;
		padding-top: 125px;
  		background: #ededed;
		list-style-type: none;
		-webkit-font-smoothing: antialiased;
		/* to stop flickering of text in safari */
		transform-origin: 0% 0%;
		-webkit-transform: translate(-100%, 0);
		-ms-transform: translate(-100%, 0);
		transform: translate(-100%, 0);  
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}

	#navigation li {
		padding: 10px 0;
		font-size: 22px;
	}

	/*
	 * And let's slide it in from the left
	 */
	#menuToggle input:checked ~ ul {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}

	/* ------------------------------ EINDE HAMBURGER MENU ------------------------------- */

}

@media screen and (max-device-width: 450px) {
	#logo2 {
		width:75%;
		height:60px;
		position:absolute;
		right:10px;
		z-index:1010;
	}
	#header {
		height:60px;
	}
	#menuToggle {
		top:20px;
	}
	#main {
		padding-top:80px;
	}
}