.nav-toggle
{
    display: none;
}

#mainheader .mainmenu nav > ul ul
{
	overflow: hidden;
	-webkit-transition: max-height .5s ease;
	-o-transition: max-height .5s ease;
	transition: max-height .5s ease;
}

@media screen and (max-width: 768px)
{
    .resp-menu-wrap
	{
        left: 0;
        position: absolute;
        width: 100%;
    }

    .mod-actions .resp-menu-wrap
    {
        position: fixed;
    }

	.nav-toggle
	{
        display: block;
        width: 28px;
		height: 34px;
        cursor: pointer;
        position: relative;
		z-index: 1001;
    }

	.nav-toggle,
	.nav-toggle:hover
	{
		background-color: transparent;
	}

	.nav-toggle span,
	.nav-toggle span::before,
	.nav-toggle span::after
    {
        position: absolute;
        height: 3px;
        width: 24px;
        background: hsl(0, 0%, 100%);
        padding: 0;
    }

	.nav-toggle span::before,
	.nav-toggle span::after
    {
        content:'';
        right:0;
        -webkit-transform-origin:0 50%;
        -ms-transform-origin:0 50%;
        transform-origin:0 50%;
        transition:-webkit-transform .2s;
        transition:transform .2s;
        transition:transform .2s, -webkit-transform .2s;
    }

	.nav-toggle span::before
    {
        top: -7px;
    }

	.nav-toggle span::after
    {
        top: 7px;
    }

	.nav-toggle.show span
	{
        background:hsla(0,0%,100%,0);
    }

	.nav-toggle.show span::before,
	.nav-toggle.show span::after
    {
        background:hsla(0,0%,100%,1);
    }

	.nav-toggle.show span::before
    {
        -webkit-transform:translateX(4px) translateY(-1px) rotate(45deg);
        -ms-transform:translateX(4px) translateY(-1px) rotate(45deg);
        transform:translateX(4px) translateY(-1px) rotate(45deg);
    }

	.nav-toggle.show span::after
    {
        -webkit-transform:translateX(4px) translateY(2px) rotate(-45deg);
        -ms-transform:translateX(4px) translateY(2px) rotate(-45deg);
        transform:translateX(4px) translateY(2px) rotate(-45deg);
    }

    #mainheader .mainmenu
	{
		display: flex;
		align-items: center;
		gap: 2rem;
	}

	#mainheader .mainmenu nav
	{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #D0D0D0;
		display: none;
		flex-direction: column;
		padding: 80px 0 20px;
		overflow-y: auto;
		z-index: 1000;
	}

    #mainheader .mod-actions .resp-menu-wrap .mainmenu
    {
        top: 75px;
    }

    .mainmenu li {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .mainmenu li a {
        background: #ddd;
        color: #333;
        display: block;
        width: 100%;
        padding: 16px 0;
        opacity: 1;
        border-bottom: 1px solid #333;
		text-align: left;
    }

    .mainmenu a:hover {
        background: #333;
        color: #ddd;
    }

    #mainheader .mainmenu ul
    {
        display: block;
		flex-direction: column;
    }

	#mainheader .mainmenu nav > ul ul
	{
		position: static;
		max-height: 0;
	}

    .mainmenu nav ul li
    {
        text-indent: 20px;
    }

    .mainmenu nav > ul ul.open,
    #mainheader .mainmenu nav > ul ul.open
    {
        max-height: 1000px;
        overflow: visible;
    }
}