/*
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>


*/

a.hamburger {
	display: none;
}

@media all and (max-width: 1024px) {

	nav.social {
		display: none;
	}

	.js .dp-navigation .wrapper li:hover > ul, 
	.dp-navigation li:hover > ul,
	.dp-navigation .wrapper > ul {
		display: none;
	}

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

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

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

	.dp-navigation .wrapper ul ul li > ul,
	/* this next line is specific to Camp Seale Harris, can safely be removed for most sites */
	.dp-navigation .wrapper ul ul li#menu-item-22034 > ul {
		left: 0;
	}

	.main-nav .wrapper ul#menu-main-menu li.menu-item {
		border: none;
	}

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

	.no-js .main-nav .wrapper ul#menu-main-menu li.menu-item-has-children > a:before,
	.menu-arrow div {
		width: 0;
		height: 0;
		content: '';
		display: inline-block;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 10px solid white;
		margin-right: 10px;
		-webkit-transition: transform .5s;
		-moz-transition: transform .5s;
		-o-transition: transform .5s;
		transition: transform .5s;
	}

	.opened > .menu-arrow div {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	.main-nav .wrapper ul#menu-main-menu li.menu-item:hover,
	.main-nav .wrapper ul#menu-main-menu li.menu-item ul.sub-menu li.menu-item:hover {
		background-color: transparent;
	}

	.dp-navigation .wrapper li.menu-item-has-children > a {
		display: inline-block;
	}

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

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

	a.hamburger {
		height: 45px;
		display: block;
		padding: 0;
		float: right;
		margin: 25px 25px 0 0;
	}

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

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

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

	.hamburger > div {
		float: right;
	}

	.hamburger div div {
		width: 50px;
		height:4px;
		background-color: #d8d8d8;
		margin: 10px 0;
		-webkit-transition: .5s;
		-moz-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
	}

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

@media (max-width: 414px){
	a.hamburger{
		margin: 0px 0px 0px 0px;
	}
}