/*
This stylesheet handles all the changes related to switching to mobile nav.
*/

/*========================================================================================================================
	responsive menu pro
========================================================================================================================*/	

/* responsive menu pro button */

#responsive-menu-pro-button {
	position: static !important;
	display: block !important;
	float: left !important;
	width: auto !important;
	height: 50px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	top: 0 !important;
	right: auto !important;
	bottom: auto !important;
	left: 0 !important;
}	

#responsive-menu-pro-button .responsive-menu-pro-label {
	font-size: 18px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	color: #fff !important;
	margin: 2px 0 0 6px !important;
}

#responsive-menu-pro-button .responsive-menu-pro-box {
	display: block !important;
	width: 32px !important;
	height: 32px !important;
}

#responsive-menu-pro-button .responsive-menu-pro-box img {
	vertical-align: top !important;
}

/* responsive menu pro slideout */

#responsive-menu-pro-container,
#responsive-menu-pro {
	background-color: #rgba(76, 156, 152, 1) !important;
}

#responsive-menu-pro-container {
	margin: 50px 0 0 !important; /* match height of mobile user bar */
	font-weight: 400 !important;
	letter-spacing: 0.4px !important;
	color: #fff !important;
}

body.admin-bar #responsive-menu-pro-container {
	margin-top: 82px !important; /* match height of wp admin bar + mobile user bar */
}

#responsive-menu-pro-container .responsive-menu-pro-subarrow {
	background: none !important;
	border: none !important;
}

#responsive-menu-pro-container .responsive-menu-pro-subarrow img {
	width: 20px !important;
	height: auto !important;
	display: block !important; 
	margin: 20px auto 0 !important; 
}

/*
#responsive-menu-pro-container #responsive-menu-pro-item-7094 .responsive-menu-pro-item-link {
	margin-top: 20px !important;
}
#responsive-menu-pro-container #responsive-menu-pro-item-7092 .responsive-menu-pro-item-link,
#responsive-menu-pro-container #responsive-menu-pro-item-7093 .responsive-menu-pro-item-link,
#responsive-menu-pro-container #responsive-menu-pro-item-7094 .responsive-menu-pro-item-link {
	font-size: 20px !important;
}
#responsive-menu-pro-container #responsive-menu-pro-item-7092 .responsive-menu-pro-item-link {
	padding-left: 44px !important;
	background-image: url(img/nav-pin-80.png) !important;
	background-size: 16px auto !important;
	background-position: 20px center !important;
	background-repeat: no-repeat !important;
}
#responsive-menu-pro-container #responsive-menu-pro-item-7093 .responsive-menu-pro-item-link {
	padding-left: 44px !important;
	background-image: url(img/nav-shirt-80.png) !important;
	background-size: 14px auto !important;
	background-position: 21px center !important;
	background-repeat: no-repeat !important;
}
#responsive-menu-pro-container #responsive-menu-pro-item-7094 .responsive-menu-pro-item-link {
	padding-left: 44px !important;
	background-image: url(img/nav-bottle-80.png) !important;
	background-size: 16px auto !important;
	background-position: 20px center !important;
	background-repeat: no-repeat !important;
}
*/

/*========================================================================================================================
	mobile user bar
========================================================================================================================*/	

.mobile-user-bar {
	display: none; /* hidden by default for large screens */
	position: fixed;
	z-index: 99; /* set z-index below popups */
	top: 0;
	right: auto;
	bottom: auto;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: #38382d;
	color: #fff;	
	font-size: 18px;
	font-weight: 500;
}

body.admin-bar .mobile-user-bar {
	top: 32px; /* match height of wp admin bar */
}

.mobile-user-bar-left-area {
	float: left;
}

.mobile-user-bar-right-area {
	float: right;
}

#page .mobile-user-bar .cta-link {
	margin: 5px 0 0;
	display: inline-block;
	height: 40px; /* match height of mobile user bar */
	font-size: 21px;
	font-weight: 500;
	line-height: 40px; /* match height of button */
	padding: 0 24px;
	border-radius: 0 !important;
} 
#page .mobile-user-bar .cta-link:hover,
#page .mobile-user-bar .cta-link:focus {

} 

@media only screen and (max-width: 991px) { /* breakpoint to switch to mobile nav */

	.site {
		margin-top: 50px; /* match height of mobile user bar */
	}
	.mobile-user-bar {
		display: block;
	}
	.primary-nav { /* regular menu to hide */
		display: none; 
	}
} /* end media query */

@media only screen and (max-width: 782px) { /* wp admin bar changes height at this breakpoint */
	
	body.admin-bar .mobile-user-bar {
		top: 46px; /* match height of wp admin bar */
	}
	body.admin-bar #responsive-menu-pro-container {
		margin-top: 96px !important; /* match height of wp admin bar + mobile user bar */
	}
} /* end media query */

@media only screen and (max-width: 600px) {  /* wp admin bar height becomes unpredictable at this breakpoint */
	#wpadminbar {
		position: fixed !important;
	}
} /* end media query */