﻿/* Styles for blocks are used in both the frontend and admin - so be specific */

.mbgstickymenu-wrap { background-color: black; }
nav.mbgstickymenu { text-align: center; padding: 0; }

nav.mbgstickymenu { background-color: black; text-align: center; padding: 0; }
nav.mbgstickymenu ul,
nav.mbgstickymenu li { list-style-type: none; display: inline-block; padding: 0; margin: 0; }
nav.mbgstickymenu ul { padding-left: 0; }
nav.mbgstickymenu li a { display: inline-block; padding: .5em 1.5em; color: #fff; text-decoration: none; line-height: 1.5; opacity: .7; font-size:.9em; }
nav.mbgstickymenu li a:hover,
nav.mbgstickymenu li a:focus,
nav.mbgstickymenu li a:active { text-decoration: underline; opacity: 1; }
nav.mbgstickymenu li a img { display: inline-block; height: 1em; padding: .25em 0 .25em .25em; }
nav.mbgstickymenu li.mbgstickyspacer { min-width: 5em; }

nav.mbgstickymenu.offscreen { position: fixed; width: 100%; top:0; padding-top: 66px; z-index: 2; background-color: black; }
.customize-support nav.mbgstickymenu.offscreen { padding-top: 96px; }
.customize-support nav.mbgstickymenu.offscreen ul { margin: 0; }

.mbgstickymenu-wrap .mbgstickytitle { font-weight: bold; color: #fff; padding: .5em 0; margin: 0; max-width: 0; display: inline-block; overflow: hidden; transition: .3s ease; white-space: nowrap; vertical-align: bottom; opacity: 0; }
.mbgstickymenu-wrap nav.mbgstickymenu.offscreen .mbgstickytitle { padding: .5em 1.5em; max-width: 400px; opacity: 1; }


@media (max-width: 1500px) {
	nav.mbgstickymenu { padding-left: 14px; padding-right: 14px; }
}

@media only screen and (min-width:783px) {
}

@media only screen and (max-width:782px) {
	.mbgstickymenu-wrap .mbgstickytitle { vertical-align: middle; padding: .25em .7em 0; }
	nav.mbgstickymenu.offscreen { padding-top: 56px; }
	.customize-support nav.mbgstickymenu.offscreen { padding-top: 102px }
	nav.mbgstickymenu ul { margin: 0; }
	nav.mbgstickymenu li a { font-size: .8rem; padding: .25em .7em; }
	nav.mbgstickymenu li.mbgstickyspacer { display: none; }
}