/*
These are styles for the mobile menu.
By themselves, they provide a mobile menu that is at least minimally functional, even with JS disabled.
The hamburger should look like this:

<a class="hamburger" href="#top">
	<div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</a>

and goes inside the .dp-navigation .header-wrapper

*/

.dp-navigation a.hamburger {
	display: none;
}

.menu-arrow {
	display: none;
}

@media screen and (max-width: 1024px) {
	
	#dp-social-widget{
		display: none;
	}

	.js .dp-navigation li:hover > ul, 
	.dp-navigation li:hover > ul,
	.dp-navigation-right > ul {
		display: none;
		text-align: left;
	}

	.dp-navigation .header-wrapper:target > ul {
		display: block;
	}

	.dp-navigation > ul > li {
		display: block;
	}

	.dp-navigation > ul > li ul, .dp-navigation > ul > li ul {
		position: relative;
		padding-left: 20px;
		margin-bottom: 0;
	}

	.menu-arrow {
		display: inline-block;
		float: right;
	}

	.dp-navigation .menu > li:after {
		content: none;
	}

	.no-js ul#menu-main-menu li.menu-item-has-children > a:after,
	.menu-arrow div {
		width: 0;
		height: 0;
		content: '+';
		display: inline-block;
		margin-right: 10px;
		margin-top: 10px;
		padding-right: 10px;
		color: #59595c;
	}

	.main-nav ul#menu-main-menu li.menu-item:hover,
	.main-nav ul#menu-main-menu li.menu-item ul.sub-menu li.menu-item:hover {
		background-color: transparent;
	}
	
	.dp-navigation li.menu-item-has-children > a {
		display: inline-block;
	}
	
	.dp-navigation ul.sub-menu ul.sub-menu {
		right: auto;
	}

	.dp-navigation li:not(.menu-item-has-children):hover > a {
		display: block;
	}

	.no-js .dp-navigation li:hover > a {
		background: #ffd953;
		display: block;	
	}

	.dp-navigation a.hamburger {
		height: 40px;
		display: block;
		padding: 5px;
		position: fixed;
		top: 3%;
		right: 2%;
		box-sizing: border-box;
		background-color: #d0d2d3;
		border-radius: 2px;
	}

	.dp-navigation.opened .hamburger > div > div:not(:first-child):not(:last-child) {
		opacity: 0;
	}

	.dp-navigation.opened .hamburger > div > div:first-child {
		-webkit-transform: translate(-3px) rotate(-45deg) translate(-4px, 6px);
		-moz-transform: translate(-3px) rotate(-45deg) translate(-4px, 6px);
		-o-transform: translate(-3px) rotate(-45deg) translate(-4px, 6px);
		-ms-transform: translate(-3px) rotate(-45deg) translate(-4px, 6px);
		transform: translate(-3px) rotate(-45deg) translate(-4px, 6px);
	}

	.dp-navigation.opened .hamburger > div > div:last-child {
		-webkit-transform: translate(-3px) rotate(45deg) translate(-4px, -8px);
		-moz-transform: translate(-3px) rotate(45deg) translate(-4px, -8px);
		-o-transform: translate(-3px) rotate(45deg) translate(-4px, -8px);
		-ms-transform: translate(-3px) rotate(45deg) translate(-4px, -8px);
		transform: translate(-3px) rotate(45deg) translate(-4px, -8px);		
	}

	.hamburger > div {
		float: right;
	}

	.hamburger div div {
		width: 40px;
		height: 2px;
		background-color: #000000;
		margin: 5.5px 0px;
		-webkit-transition: .5s;
		-moz-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
	}

	.no-js #top:target .dp-navigation > ul {
		display: block;
	}
}

@media screen and (max-width: 600px) {
	.dp-navigation a.hamburger {
		top: 1%;
		right: 2%;
	}
}

@media screen and (max-width: 320px) {
	.dp-navigation a.hamburger {
		top: 5px;
	}
}