/* logo en menu instellingen */

.et_menu_container, 
.logo_container a{
    height: 112px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.logo_container a::after{
	content:'SDG Nederland';
	font-size: 48px;
	line-height: 48px;
	display: inline-block;
	margin-left: 23px;
	color: #333333;
}
#et-top-navigation{
	    margin-left: auto;
}
#top-menu li {
    display: inline-block;
    padding-left: 56px;
	  padding-right: 0px;
}
#top-menu li a{
    font-size: 32px;
		line-height: 36px;
	font-weight: normal;
	text-transform: lowercase;
}
#top-menu li:last-child {
    display: inline-block;
    font-size: 16px;
		line-height: 20px;
    padding-left: 228px;
	  padding-right: 64px;
}

#top-menu li:last-child a{
    font-size: 16px;
		line-height: 20px;
}
#et_top_search{
	position: absolute;
	/*right: 177px;*/
	right: 217px;
    position: absolute;
    top: 24px;
		border-radius: 32px;
	background-color: #F0F0F0;
	   height: 64px;
		width: 64px;
}
#et_search_icon:before {
   content: "";
	height: 64px;
	width: 64px;
	background-image:url('/wp-content/themes/SDGNederland2021/icons/search.svg');
	background-repeat: no-repeat;
	background-position: center center;
}

body#body .et_pb_menu_hidden #et_search_icon::before,
body#body .et_pb_menu_hidden #top-menu,
body#body .et_pb_menu_visible #et_search_icon::before,
body#body .et_pb_menu_visible #top-menu {
	opacity: 1;
	-webkit-animation: none !important;
	-moz-animation: none !important;
	-o-animation: none !important;
	animation: none !important;
}
body#body .et_search_outer {
	overflow: visible;
	max-width: 1440px;
	left: 0px;
	right: 0px;
	margin: 0px auto;
}

body#body .et_search_form_container {
	/*right: 177px;*/
	right: 217px;
	position: absolute;
	top: 24px;
	border-radius: 32px;
	background-color: #F0F0F0;
	height: 64px !important;
	margin-top: 3px;
}
body#body .et_search_form_container.et_pb_search_form_hidden {
	width: 60px;
}
body#body .et_search_form_container.et_pb_search_visible {
	/*width: 650px;*/
	width: 610px;
	opacity: 1;
}
body#body .et_search_form_container.et_pb_search_visible.et_pb_is_animating {
	animation: grow-search-width 1000ms ease-in-out !important;
	opacity: 1;
	z-index: 999 !important;
}
body#body .et_search_form_container.et_pb_search_visible.et_pb_is_animating > * {
	animation: fade-in-search 1000ms ease-in-out !important;
}
body#body .et_search_form_container.et_pb_search_form_hidden.et_pb_is_animating {
	animation: grow-search-width 1000ms ease-in-out reverse !important;
	opacity: 1;
	z-index: 999 !important;
}
body#body .et_search_form_container.et_pb_search_form_hidden.et_pb_is_animating > * {
	animation: fade-in-search 1000ms ease-in-out reverse !important;
}
@keyframes grow-search-width{ 
	0% { width: 60px; }
	50% { width: 610px;	}
	100% { width: 610px;	}
}
@keyframes fade-in-search { 
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

body#body .et_search_form_container .et-search-form {
	right: 20px;
	width: calc( 100% - 20px );
}
body#body .et_search_form_container::before {
	content: "";
	display: block;
	height: 64px;
	width: 64px;
	position: absolute;
	top: -3px;
	left: -4px;
	background-image: url('icons/search.svg');
	background-repeat: no-repeat;
	background-position: center center;
}
body#body .et_search_form_container .et-search-form input {
	left: 50px;
	right: 30px;
	width: calc( 100% - 50px );
}
body#body .et_search_form_container  .et-search-form input::placeholder {
	text-transform: lowercase;
}
body#body .et_search_form_container .et_close_search_field {
	right: 20px;
}

/* main header. All elements positioned horizonally using 'flex', overriding all weird other CSS positional thingies  */
#main-header {
	background-color: white;
	height: 112px;
	min-width: 1440px;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 5;
}
#main-header + * {
	border-top: 112px solid transparent;
}
#main-header > .container,
#main-header > .container > .logo_container,
#main-header > .container > #et-top-navigation {
	height: 100%;
	display: flex;
	align-items: center;
	position: relative;
	width: auto;
	float: none;
}
#main-header #et-top-navigation { 
	padding-top: 0px;
	padding-left: 0px !important;
}
#main-header #et-top-navigation #top-menu { 
	line-height: 36px;
}
#main-header #et-top-navigation #top-menu li { 
	line-height: 100%;
}
#main-header #et-top-navigation #top-menu li:first-child { 
	padding-left: 0px;
}
#main-header #et-top-navigation #top-menu li a {
	font-size: 32px;
	font-weight: normal;
	padding-bottom: 0px;
	line-height: 100%;
}
#main-header #et-top-navigation #top-menu li:last-child a {
	font-size: 16px;
}

/* main navigation */
.hamburger_menu_container {
	margin-left: 40px;
	width: 105px;
}
.hamburger_menu_container + .logo_container {
	margin-left: 15px;
}
.hamburger_menu_container + .logo_container img{
	max-height: 80px;
	max-width: 80px;
}
body.mega-menu-hamburger_menu-mobile-open #main-header {
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 5;
}
body.mega-menu-hamburger_menu-mobile-open #main-header + * {
	border-top: 112px solid transparent;
}
html.mega-menu-hamburger_menu-off-canvas-open.mega-menu-hamburger_menu-off-canvas-open {
	overflow: auto;
}
#main-header #mega-menu-wrap-hamburger_menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated{
	transform: scale(1);
}
#main-header #mega-menu-wrap-hamburger_menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner, 
#main-header #mega-menu-wrap-hamburger_menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::before, 
#main-header #mega-menu-wrap-hamburger_menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::after{
	height: 2px;
	border-radius: 2px;
}
#mega-menu-wrap-hamburger_menu .mega-menu-toggle + #mega-menu-hamburger_menu {
	top: 112px;
	width: 615px;
	padding-left: 87px;
	padding-top: 10px;
}
#mega-menu-wrap-hamburger_menu .mega-menu-toggle.mega-menu-open::after {
	left: auto;	
	right: 0px;
	width: calc(100% - 615px);
	animation: shrink-to-width 200ms ease-in-out;
}
@keyframes shrink-to-width {
	0% { width: 100%; }
	100% { width: calc(100% - 615px); }
}
@media only screen and ( min-width: 1440px ) {
	#mega-menu-wrap-hamburger_menu .mega-menu-toggle + #mega-menu-hamburger_menu {
		width: calc(50% - 105px);
		left: calc(105px - 50%);
		padding-left: calc(50% - 633px);
	}
	#mega-menu-wrap-hamburger_menu .mega-menu-toggle.mega-menu-open::after {
		width: calc(50% + 105px);
		animation: shrink-to-width-wide 200ms ease-in-out;
	}
	@keyframes shrink-to-width-wide {
		0% { width: 100%; }
		100% { width: calc(50% + 105px); }
	}
}


#mega-menu-wrap-hamburger_menu .mega-menu-toggle .mega-toggle-animated:after {
	content: 'menu';
	display: block;
	font-size: 16px;
	line-height: 20px;
	margin-left: 15px;
}


body#body #mega-menu-wrap-hamburger_menu ul.mega-menu-submenu-open > li {
	display: none;
}
body#body #mega-menu-wrap-hamburger_menu ul.mega-menu-submenu-open > li.mega-toggle-on {
	display: list-item;
}
body#body#body #mega-menu-wrap-hamburger_menu a.mega-menu-link {
	display: flex;
	flex-direction: column;
	min-height: 60px;
	justify-content: center;
	padding-top: 15px;
	padding-bottom: 15px;
	box-sizing: border-box;
}

body#body#body #mega-menu-wrap-hamburger_menu ul.mega-menu-submenu-open > li.mega-toggle-on > a {
	font-size: 30px;
	position: relative;
}

body#body#body #mega-menu-wrap-hamburger_menu li.mega-menu-submenu-open > a.mega-menu-link {
	display: none;
}
body#body#body#body #mega-menu-wrap-hamburger_menu ul.mega-sub-menu a.mega-menu-link { 
	padding-left: 10px;
}
body#body#body #mega-menu-wrap-hamburger_menu a.mega-menu-link span.nav-title {
	line-height: 1.167;
}


/*
body#body #mega-menu-wrap-hamburger_menu ul.mega-menu-submenu-open > li.mega-toggle-on > a::before {
	content: '';
	display: block;
	position: absolute;
	top: 18px;
	left: -42px;
	height: 24px;
	width: 24px;
	background-image: url("icons/left.svg");
}
*/
body#body #mega-menu-wrap-hamburger_menu #mega-menu-hamburger_menu li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
	display: none;
}

body#body #mega-menu-wrap-hamburger_menu #mega-menu-hamburger_menu li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
	float: none;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
}

body#body #mega-menu-wrap-hamburger_menu #mega-menu-hamburger_menu li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator::after {
	content: '';
	display: block;
	position: absolute;
	top: 18px;
	left: -42px;
	height: 24px;
	width: 24px;
	margin: 0px;
	background-image: url("icons/left.svg");
}


.logo_container { 
	font-size: 0px;
}

#top-header{
	display: none;
}
#et_mobile_nav_menu{
	display: block;
	float: left;
}
#et_mobile_nav_menu .hide-in-mobile-menu{
	display: block;
}
#et_mobile_nav_menu .hide-in-mobile-menu{
		display: none;
}
#page-container #main-header .et_mobile_menu .sub-menu{
	display: none !important;
}
#page-container #main-header .et_mobile_menu .current-menu-parent .sub-menu{
	display: block !important;
}


/* temp remove header */
.page-id-43214 header,
.page-id-43214 #preloader{
	display: none;
}

#preloader #status {
	/* Make sure preloader does not interfere with positioning.*/
	line-height: 0px;
}


.et_pb_gallery_item_0_15{
	background-color: #06549D;
}
.et_pb_gallery_item_0_16{
	background-color: #331E98;
}

/* breadcrumbs */
#breadcrumbs{
	position: fixed;
	top: 112px;
	width: 100%;
	z-index: 4;
	background-color: #333333;
	color: #FFFFFF;
	font-family: 'GT Eesti Text Regular',Helvetica,Arial,Lucida,sans-serif;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
	text-transform: lowercase;
	font-weight: 400;
	height: 48px;
	padding: 10px 32px;
	box-sizing: border-box;
}
#breadcrumbs > span{
	display: block;
	max-width: 1440px;
	padding-left: 33px;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}
#breadcrumbs a{
	color: #FFFFFF;
}
#breadcrumbs + * {
	border-top: 48px solid transparent;
}

@media screen and (max-width: 1400px) and (min-width: 1200px) {
	#top-menu li:last-child {
	  padding-left: calc(100vw - 1029px);
	}
	#top-menu li:last-child a{
	  display: none;
	}
	#main-header {
		min-width: 100vw;
	}	
}