#topbar {
	position: relative;
	top: 0;
	left:0;
	z-index: 999;
	width: 100%;
	height: 90px;
	background-color: #2c2d30 !important;
}

.topbar-clearer{
	display:none;

}

.topbar-button{
  position: absolute;
  bottom: 27px;
  right: 3.5%;
  height: 55px;
  width: 20%;
  margin: 0;
  background: transparent;
  padding-top: 12px;
  padding-left: 0;
  text-align: center;
}
.topbar-button.scrolled{
	bottom:14px;
}

	@media (max-width: 1100px) {
		#topbar{
			position: fixed;
		}
	.topbar-clearer{
		display:block !important;
		height:90px;
		}
	.topbar-button{
		right:50px;
		width:35%;
		bottom:35px;
	}
}

	@media (max-width: 978px) {
	.topbar-button{
		right:110px;

	}
}

	@media (max-width: 750px) {
	.topbar-button{
		display:none;
		visibility: hidden;
	}
}

.topbar-clearer{
	display:none;
}

#topbar .row{
	height: 100%;
	position: relative;
}
.new-logo {
	position: absolute;
	top:18px;
	left: 0;
	transform: translateY(0);
	width: 210px;
	z-index:999999;
}
.new-logo .logo-text {
 	fill: #fff !important;
}
.new-logo .logo-wave {
 	fill: #98c55c !important;
}
@media (max-width: 1200px) {
	.new-logo {

		left: 1rem;

	}
}

/* ACTIVE LOGO 
------------------------------ */

/* PetrolBlue variations */
.page-petrolblue .new-logo .logo-wave	{ fill: #28afbc !important; }
.page-petrolblue2 .new-logo .logo-wave	{ fill: #6cbdbe !important; }
.page-petrolblue3 .new-logo .logo-wave	{ fill: #227887 !important; }


/* Oranges variations */
.page-orange .new-logo .logo-wave			{ fill: #f08c4a !important; }
.page-orange2 .new-logo .logo-wave		{ fill: #ff6300 !important; }

/* Purple  variations */
.page-purple .new-logo .logo-wave			{ fill: #8c2475 !important; }
.page-purple2 .new-logo .logo-wave		{ fill: #c63667 !important; }
.page-purple3 .new-logo .logo-wave 		{ fill: #ee659b !important; }
.page-purple4 .new-logo .logo-wave 		{ fill: #877cff !important; }

.page-yellow .new-logo .logo-wave 		{ fill: #fccf3c !important; }


/* Red variations */
.page-red .new-logo .logo-wave				{ fill: #f5354b !important; }
.page-red2 .new-logo .logo-wave 			{ fill: #a50005 !important; }

/* Caramel variations */
.page-caramel .new-logo .logo-wave		{ fill: #c77222 !important; }
.page-caramel2 .new-logo .logo-wave		{ fill: #e3bf45 !important; }
.page-caramel3 .new-logo .logo-wave		{ fill: #d0a767 !important; }

/* Green variations */
.page-limegreen .new-logo .logo-wave		{ fill: #c5dc4b !important; }
.page-green .new-logo .logo-wave			{ fill: #88ce46 !important; }
.page-green2 .new-logo .logo-wave 		{ fill: #1ba886 !important; }
.page-green3 .new-logo .logo-wave			{ fill: #1ba886 !important; }

/* Magenta variations */
.page-magenta .new-logo .logo-wave		{ fill: #f10067 !important; }
.page-magenta2 .new-logo .logo-wave		{ fill: #f92f47 !important; }
.page-magenta3 .new-logo .logo-wave		{ fill: #ff5a60 !important; }

/* Blue variations */
.page-blue .new-logo .logo-wave				{ fill: #4da8ef !important; }
.page-blue2 .new-logo .logo-wave			{ fill: #415d9e !important; }
.page-blue3 .new-logo .logo-wave			{ fill: #0a019c !important; }

/* Gray variations */
.page-dark .new-logo .logo-wave				{ fill: #404144 !important; }
.page-dark2 .new-logo .logo-wave			{ fill: #5c5d5f !important; }
.page-dark3 .new-logo .logo-wave			{ fill: #8f8f92 !important; }


#shortcuts {
	position: absolute;
	top:26px;
	right:-5px;
	margin-right: 0em;
	z-index: 99;
}

#topbar.scrolled #shortcuts {

}


#shortcuts .inline-list>li {
	margin-left:0;
}

#shortcuts ul.dingen {
	float:left;
	height:25px;
	margin:0 0px 0 0;
	padding:0px 0 0;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 400;
}

#shortcuts ul.dingen li {
	float: left;
	border:0;
	list-style: none !important;
}

#shortcuts ul.dingen li a.direct span {
	margin:0 0 0 4px;
}

#shortcuts ul.dingen li a.direct {
	float:left;
	width: 24px;
	height: 24px;

	text-indent: -99999px;
	display:block;
	color:#c3c5c8;
	font-size:11px;
	line-height:24px;
	text-decoration:none;
	padding:5px 0px 5px 0px;
	margin:0;
	-moz-transition:all .2s ease-out;
/* 	background:  url("../images/flags.png") no-repeat -5px -5px; */
	background: transparent;

}
#shortcuts ul.dingen li a.direct span  {
	position: absolute;
	top: 8px;
	right: 0px;
	width: 22px;
	height: 22px;
}


#shortcuts ul.dingen li a.direct:hover {
	color:#fa961e;
	text-decoration:none;
	background-position: -5px -43px;
}
#shortcuts ul.dingen li a.direct img {
	float: right;
	margin-right: 10px;
	width: 24px !important;
	max-width: 24px;
}


#hoofdmenu > ul {
	text-align: right;
	padding-right: 35px;
}

.new-nav-wrapper {
	position: absolute;
	bottom: 13px;
	left: -12%;
	height: 55px;
	width: 90%;
	margin: 0;
	
	background: transparent;
	padding-top: 12px;
	padding-left: 0;
	text-align: left;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow:none;
	z-index: 98;
	  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.scrolled-nav-wrapper {
	position: fixed;
	top:0px;
	left: 0;
	transform: translateY(-55px);
	height: 55px;
	width: 100%;
	margin: 0;
	background: #2c2d30;
	padding-top: 12px;
	padding-left: 0;
	text-align: left;
	visibility: hidden;
	opacity: 0;
	z-index: 98;
	  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.scrolled-nav-wrapper .row {
	position: relative;
	margin:auto;
}

#topbar.scrolled .scrolled-nav-wrapper {
	transform: translateY(0px);
	visibility: visible;
	opacity: 1;
}

#topbar.scrolled .scrolled-nav-wrapper .new-logo {
	position: absolute;
	top:-10px;
	left: 2.5rem;
	transform: scale(0.6);
	z-index: 999;
	
}


#topbar.scrolled #hoofdmenu > ul {
	text-align: right;
	margin-right: 250px;
}
#nav li {
	padding:0 !important;
}

#nav a{
	float: left;
	display:block;
	font-weight: 500;
	font-family: 'Ubuntu', sans-serif;
	text-align: center;
	text-transform: uppercase;
	line-height: 18px;
	padding: 6px 0px 7px 0px;
	margin: 0 8px;
	font-size: 13px;
	letter-spacing: 0px;
	color: #fff !important;
	text-decoration:none;
	border-bottom: 4px solid rgba(255, 255, 255, 0);
	z-index: 998;
	border-radius: 0px;

  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

#nav.menu-level-1 > li.item-number-1 > a {
	display:inline-block;
	width: 36px;
	height: 30px;
	overflow: hidden;
	text-indent: -999999px;
	background:	url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4Ij4KPGc+Cgk8Zz4KCQk8cG9seWdvbiBwb2ludHM9IjI1NiwxNTIuOTYgNzkuODk0LDI4OC40NjkgNzkuODk0LDQ3MC4wMTggMjIxLjQwMSw0NzAuMDE4IDIyMS40MDEsMzM2Ljk3MyAyOTYuNTc2LDMzNi45NzMgMjk2LjU3Niw0NzAuMDE4ICAgICA0MzIuMTA3LDQ3MC4wMTggNDMyLjEwNywyODguNDY5ICAgIiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cG9seWdvbiBwb2ludHM9IjQzOS40ODIsMTgzLjEzMiA0MzkuNDgyLDkwLjMwNyAzNjUuMzE2LDkwLjMwNyAzNjUuMzE2LDEyNi4wNzcgMjU2LDQxLjk4MiAwLDIzOC45MTkgMzUuMzM5LDI4NC44NTUgICAgIDI1NiwxMTUuMDYyIDQ3Ni42NjIsMjg0Ljg1NiA1MTIsMjM4LjkyICAgIiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==') no-repeat 50% 50%;
	background-size: 16px 16px; 
	background-position: top center;
	margin-right: 0px;
	padding: 9px 10px 3px 10px;
}

#nav a:hover{
	color: #fff !important;
}
#nav li.item-breadcrumb > a {
	color: #fff !important;
}
#nav.menu-level-1 > li:first-child {
	display: none;
} 

.phonenr {
	display: none;
}

.topicons {
	position: fixed;
	left:auto;
	right: 5%;
	top: 160px;
	width: 50px;
	z-index: 989 !important;
}
.topicons .follow {
	float: right;
	margin-right: 0px;
	margin-top: 0;
}

.topicons > .follow a.icon {
	width: 36px;
	height: 36px;
	font-size:18px;
	line-height: 36px;
	margin-right: 0;
	margin-bottom: 10px;
	color: #505153 !important;
	background: #fff;
	box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.2);
	
}
.topicons > .follow a.icon.mail {
	line-height: 34px;
}
.topicons > .follow a.icon.whatsapp {
	font-size:22px;
	line-height: 32px;
	padding-left: 2px;
}

.topicons > .follow a.icon:hover {
	background: #ddd;
}
.topicons .follow a.icon.mail img {
	opacity: 0.8;
}


/* Mobile Menu */
.nav-trigger {
	position: absolute;
	top: 20px;
	left:auto;
	right: 0em ;
	display: none;
	width: 46px;
	height: 44px;
	line-height: 38px;
	background: #fff;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-radius: 5px !important;

}

	@media (max-width: 1100px) {
		.new-nav-wrapper {
			display: none;
		}
		.scrolled-nav-wrapper {
			display: none;
		}
		.nav-trigger {
			display: block;
		}
		.nav-trigger span, .nav-trigger span::before, .nav-trigger span::after {
			/* hamburger icon in CSS */
			position: absolute;
			display: inline-block;
			height: 3px;
			width: 22px;
			background: #2c2d30;
		}
		.nav-trigger span {
			/* line in the center */
			position: absolute;
			top: 50%;
			right: 10px;
			margin-top: -1px;
		}
		#shortcuts {
			position: absolute;
			top:15px;
			right:60px;
			margin-right: 0em;
			z-index: 99;
		}
		#shortcuts ul.dingen li a.direct img {
			float: right;
			margin-right: 10px;
			width: 32px !important;
			max-width: 32px;
		}
		.topicons {
			right: 2%;
		}
		
	}
	@media (max-width: 970px) {
		.new-logo {
			left: 1rem;
		}
		.nav-trigger {
			right: 1rem;
		}
		#shortcuts {
			right:70px;
		}
	}
	@media (max-width: 640px) {
		.topicons {
			width: 40px;
			top: 100px;
			right: 0%;
		}
	}
	@media (max-width: 370px) {
		.new-logo {
			left: -10px;
			transform: scale(0.7)
		}
		
	}


/* HOVER STATE 
------------------------------ */

/* PetrolBlue variations */
#nav > li.nav-petrolblue a:hover, #nav > li.nav-petrolblue.sfHover a	{ border-bottom: 4px solid #28afbc !important; background-color: transparent !important; }
#nav > li.nav-petrolblue2 a:hover, #nav > li.nav-petrolblue2.sfHover a	{ border-bottom: 4px solid #6cbdbe !important; background-color: transparent !important; }
#nav > li.nav-petrolblue3 a:hover, #nav > li.nav-petrolblue3.sfHover a	{ border-bottom: 4px solid #227887 !important; background-color: transparent !important; }

/* Oranges variations */
#nav > li.nav-orange a:hover, #nav > li.nav-orange.sfHover a			{ border-bottom: 4px solid #f08c4a !important; background-color: transparent !important; }
#nav > li.nav-orange2 a:hover, #nav > li.nav-orange2.sfHover a			{ border-bottom: 4px solid #ff6300 !important; background-color: transparent !important; }

/* Purple  variations */
#nav > li.nav-purple a:hover, #nav > li.nav-purple.sfHover a			{ border-bottom: 4px solid #8c2475 !important; background-color: transparent !important; }
#nav > li.nav-purple2 a:hover, #nav > li.nav-purple2.sfHover a			{ border-bottom: 4px solid #c63667 !important; background-color: transparent !important; }
#nav > li.nav-purple3 a:hover, #nav > li.nav-purple3.sfHover a 			{ border-bottom: 4px solid #ee659b !important; background-color: transparent !important; }
#nav > li.nav-purple4 a:hover, #nav > li.nav-purple4.sfHover a 			{ border-bottom: 4px solid #877cff !important; background-color: transparent !important; }

#nav > li.nav-yellow a:hover, #nav > li.nav-yellow.sfHover a 			{ border-bottom: 4px solid #fccf3c !important; background-color: transparent !important; }


/* Red variations */
#nav > li.nav-red a:hover, #nav > li.nav-red.sfHover a					{ border-bottom: 4px solid #f5354b !important; background-color: transparent !important; }
#nav > li.nav-red2 a:hover, #nav > li.nav-red2.sfHover a 				{ border-bottom: 4px solid #a50005 !important; background-color: transparent !important; }

/* Caramel variations */
#nav > li.nav-caramel a:hover, #nav > li.nav-caramel.sfHover a			{ border-bottom: 4px solid #c77222 !important; background-color: transparent !important; }
#nav > li.nav-caramel2 a:hover, #nav > li.nav-caramel2.sfHover a		{ border-bottom: 4px solid #e3bf45 !important; background-color: transparent !important; }
#nav > li.nav-caramel3 a:hover, #nav > li.nav-caramel3.sfHover a		{ border-bottom: 4px solid #d0a767 !important; background-color: transparent !important; }

/* Green variations */
#nav > li.nav-limegreen a:hover, #nav > li.nav-limegreen.sfHover a		{ border-bottom: 4px solid #c5dc4b !important; background-color: transparent !important; }
#nav > li.nav-green a:hover, #nav > li.nav-green.sfHover a				{ border-bottom: 4px solid #88ce46 !important; background-color: transparent !important; }
#nav > li.nav-green2 a:hover, #nav > li.nav-green2.sfHover a 			{ border-bottom: 4px solid #1ba886 !important; background-color: transparent !important; }
#nav > li.nav-green3 a:hover, #nav > li.nav-green3.sfHover a			{ border-bottom: 4px solid #1ba886 !important; background-color: transparent !important; }

/* Magenta variations */
#nav > li.nav-magenta a:hover, #nav > li.nav-magenta.sfHover a			{ border-bottom: 4px solid #f10067 !important; background-color: transparent !important; }
#nav > li.nav-magenta2 a:hover, #nav > li.nav-magenta2.sfHover a		{ border-bottom: 4px solid #f92f47 !important; background-color: transparent !important; }
#nav > li.nav-magenta3 a:hover, #nav > li.nav-magenta3.sfHover a		{ border-bottom: 4px solid #ff5a60 !important; background-color: transparent !important; }

/* Blue variations */
#nav > li.nav-blue a:hover, #nav > li.nav-blue.sfHover a				{ border-bottom: 4px solid #4da8ef !important; background-color: transparent !important; }
#nav > li.nav-blue2 a:hover, #nav > li.nav-blue2.sfHover a				{ border-bottom: 4px solid #415d9e !important; background-color: transparent !important; }
#nav > li.nav-blue3 a:hover, #nav > li.nav-blue3.sfHover a				{ border-bottom: 4px solid #0a019c !important; background-color: transparent !important; }

/* Gray variations */
#nav > li.nav-dark a:hover, #nav > li.nav-dark.sfHover a				{ border-bottom: 4px solid #404144 !important; background-color: transparent !important; }
#nav > li.nav-dark2 a:hover, #nav > li.nav-dark2.sfHover a				{ border-bottom: 4px solid #5c5d5f !important; background-color: transparent !important; }
#nav > li.nav-dark3 a:hover, #nav > li.nav-dark3.sfHover a				{ border-bottom: 4px solid #8f8f92 !important; background-color: transparent !important; }





/* ACTIVE STATE 
------------------------------ */

/* PetrolBlue variations */
.page-petrolblue #nav > li.item-breadcrumb a	{ border-bottom: 4px solid #28afbc !important; background-color: transparent !important; }
.page-petrolblue2 #nav > li.item-breadcrumb a	{ border-bottom: 4px solid #6cbdbe !important; background-color: transparent !important; }
.page-petrolblue3 #nav > li.item-breadcrumb a	{ border-bottom: 4px solid #227887 !important; background-color: transparent !important; }

/* Oranges variations */
.page-orange #nav > li.item-breadcrumb a		{ border-bottom: 4px solid #f08c4a !important; background-color: transparent !important; }
.page-orange2 #nav > li.item-breadcrumb a		{ border-bottom: 4px solid #ff6300 !important; background-color: transparent !important; }

/* Purple  variations */
.page-purple #nav > li.item-breadcrumb a		{ border-bottom: 4px solid #8c2475 !important; background-color: transparent !important; }
.page-purple2 #nav > li.item-breadcrumb a		{ border-bottom: 4px solid #c63667 !important; background-color: transparent !important; }
.page-purple3 #nav > li.item-breadcrumb a 		{ border-bottom: 4px solid #ee659b !important; background-color: transparent !important; }
.page-purple4 #nav > li.item-breadcrumb a 		{ border-bottom: 4px solid #877cff !important; background-color: transparent !important; }

.page-yellow #nav > li.item-breadcrumb a 		{ border-bottom: 4px solid #fccf3c !important; background-color: transparent !important; }


/* Red variations */
.page-red #nav > li.item-breadcrumb a			{ border-bottom: 4px solid #f5354b !important; background-color: transparent !important; }
.page-red2 #nav > li.item-breadcrumb a 			{ border-bottom: 4px solid #a50005 !important; background-color: transparent !important; }

/* Caramel variations */
.page-caramel #nav > li.item-breadcrumb a		{ border-bottom: 4px solid #c77222 !important; background-color: transparent !important; }
.page-caramel2 #nav > li.item-breadcrumb a		{ border-bottom: 4px solid #e3bf45 !important; background-color: transparent !important; }
.page-caramel3 #nav > li.item-breadcrumb a		{ border-bottom: 4px solid #d0a767 !important; background-color: transparent !important; }

/* Green variations */
.page-limegreen #nav > li.item-breadcrumb a		{ border-bottom: 4px solid #c5dc4b !important; background-color: transparent !important; }
.page-green #nav > li.item-breadcrumb a			{ border-bottom: 4px solid #88ce46 !important; background-color: transparent !important; }
.page-green2 #nav > li.item-breadcrumb a 		{ border-bottom: 4px solid #1ba886 !important; background-color: transparent !important; }
.page-green3 #nav > li.item-breadcrumb a		{ border-bottom: 4px solid #1ba886 !important; background-color: transparent !important; }

/* Magenta variations */
.page-magenta #nav > li.item-breadcrumb a		{ border-bottom: 4px solid #f10067 !important; background-color: transparent !important; }
.page-magenta2 #nav > li.item-breadcrumb a		{ border-bottom: 4px solid #f92f47 !important; background-color: transparent !important; }
.page-magenta3 #nav > li.item-breadcrumb a		{ border-bottom: 4px solid #ff5a60 !important; background-color: transparent !important; }

/* Blue variations */
.page-blue #nav > li.item-breadcrumb a			{ border-bottom: 4px solid #4da8ef !important; background-color: transparent !important; }
.page-blue2 #nav > li.item-breadcrumb a			{ border-bottom: 4px solid #415d9e !important; background-color: transparent !important; }
.page-blue3 #nav > li.item-breadcrumb a			{ border-bottom: 4px solid #0a019c !important; background-color: transparent !important; }

/* Gray variations */
.page-dark #nav > li.item-breadcrumb a			{ border-bottom: 4px solid #404144 !important; background-color: transparent !important; }
.page-dark2 #nav > li.item-breadcrumb a			{ border-bottom: 4px solid #5c5d5f !important; background-color: transparent !important; }
.page-dark3 #nav > li.item-breadcrumb a			{ border-bottom: 4px solid #8f8f92 !important; background-color: transparent !important; }

#nav > li.item-breadcrumb a.item-first {
	border: 0 !important;
}