/******
Fix main dropdown styling alignment
*******/
a.dropdown-trigger.btn.right i.material-icons {
	vertical-align: middle;
	top:  -2px;
}
a.dropdown-trigger.btn.right {
	line-height: 1.2;
    height: auto;
    padding-top: 0.65em;
    padding-bottom: 0.5em;
}

/******
Let buttons be navigation items in the same style
*******/
nav ul button {
	border:  none;
	-webkit-transition: background-color .3s;
    transition: background-color .3s;
    font-size: 1rem;
    color: #fff;
    display: block;
    padding: 0 15px;
    width:  100%;
    text-align:  left;
    cursor: pointer;
}

.menu-item-has-children > button {
    padding-right: 30px;
    background-image: url(../img/arrow-down.png) !important;
    background-size: 10px !important;
    background-position: 90% center !important;
    background-repeat: no-repeat !important;
}

.menu-item-has-children > button[aria-pressed="true"] {

    background-image: url(../img/arrow-up.png) !important;
}

.sidenav li > button {
	color: rgba(0,0,0,0.87);
    display: block;
    font-size: 14px;
    font-weight: 500;
    height: 48px;
    line-height: 48px;
    padding: 0 32px;
    background:  transparent;
    width:  100%;
    border:  none;
    text-align:  left;
}

.sidenav li > button:hover,
.sidenav li > button:focus {
    background-color: rgba(0,0,0,0.05);
}

/******
Don't use line-height to force heights, you never know when text will wrap
*******/
nav.cd-side-navigation .menu a,
nav.cd-side-navigation .menu button {
	line-height: 1.2;
    padding-top: 1.35em;
    padding-bottom: 1.35em;
}


/******
Force the submenus to be a certain width
*******/
nav.cd-side-navigation ul li {
	position: relative;
	background:  rgba(152, 152, 152,1);
	max-width:  7em;
}

.menu-item ul.sub-menu {
	display: block;
	width: auto;
	min-width:  100%;
    position: relative;
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.3s 0.3s, max-height 0s 0.3s, opacity 0.3s;
    transition: all 0.3s 0.3s, max-height 0s 0.3s, opacity 0.3s;

    -webkit-transform:  translateX(-1em);
	transform:  translateX(-1em);
	opacity: 0;
}



.menu-item ul.sub-menu li {
	max-width: none;
}


/******
Browser bug means we have to seperate these despite them being identical
*******/
.menu-item-has-children:focus-within .sub-menu {
	max-height:  100em;
	-webkit-transform:  translateX(0);
	transform:  translateX(0);
	opacity: 1;
	-webkit-transition: 0.3s, max-height 0s;
    transition: 0.3s, max-height 0s;
}

.menu-item-has-children:hover .sub-menu {
	max-height:  100em;
	-webkit-transform:  translateX(0);
	transform:  translateX(0);
	opacity: 1;
	-webkit-transition: 0.3s, max-height 0s;
    transition: 0.3s, max-height 0s;
}

@media only screen and (max-width: 1096px) {
	.menu-item ul.sub-menu {
		-webkit-transition: 0.3s;
		transition:  0.3s;
	}
}


/******
This adds a purple wash over effect as the sub menu slides in during desktop context
*******/
/*
@media only screen and (min-width: 1097px) {
	.menu-item ul.sub-menu:after {
		content: "";
		display: block;
		position:  absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgb(91, 31, 105);
		-webkit-transition: 0.3s 0.3s;
	    transition: 0.3s 0.3s;
	    -webkit-transform:  translateX(0);
		transform:  translateX(0);
	}


	.menu-item-has-children:hover .sub-menu:after {
		-webkit-transition: 0.4s 0.15s;
	    transition: 0.4s 0.15s;
		-webkit-transform:  translateX(100%);
		transform:  translateX(101%);
	}
}
*/





/******
Toggle buttons are enabled? Don't let hover styles take over
*******/

@media only screen and (max-width: 1096px) {
	.toggle-button-mode .menu-item-has-children:focus-within .sub-menu {
		max-height:  0;
		-webkit-transform:  translateX(-1em);
		transform:  translateX(-1em);
		opacity: 0;
		-webkit-transition: 0.3s;
	    transition:  0.3s;
	}

	.toggle-button-mode .menu-item-has-children:hover .sub-menu {
		max-height:  0;
		-webkit-transform:  translateX(-1em);
		transform:  translateX(-1em);
		opacity: 0;
		-webkit-transition:  0.3s;
	    transition: 0.3s;
	}

	.toggle-button-mode .menu-item-has-children [aria-pressed="true"] + .sub-menu {
		max-height:  30em;
		-webkit-transform:  translateX(0);
		transform:  translateX(0);
		opacity: 1;
		-webkit-transition: 0.3s;
	    transition: 0.3s;
	}
}

@media only screen and (min-width: 1097px) {
	.toggle-button-mode .menu-item-has-children:focus-within .sub-menu {
		max-height:  0;
		-webkit-transform:  translateX(-1em);
		transform:  translateX(-1em);
		opacity: 0;
		-webkit-transition: all 0.3s 0.3s, max-height 0s 0.3s, opacity 0.3s;
	    transition: all 0.3s 0.3s, max-height 0s 0.3s, opacity 0.3s;
	}

	.toggle-button-mode .menu-item-has-children:hover .sub-menu {
		max-height:  0;
		-webkit-transform:  translateX(-1em);
		transform:  translateX(-1em);
		opacity: 0;
		-webkit-transition: all 0.3s 0.3s, max-height 0s 0.3s, opacity 0.3s;
	    transition: all 0.3s 0.3s, max-height 0s 0.3s, opacity 0.3s;
	}

	.toggle-button-mode .menu-item-has-children [aria-pressed="true"] + .sub-menu {
		max-height:  100em;
		-webkit-transform:  translateX(0);
		transform:  translateX(0);
		opacity: 1;
		-webkit-transition: 0.3s, max-height 0s;
	    transition: 0.3s, max-height 0s;
	}
}


/******
There must be focus styles as well as hover styles!
*******/
nav ul button:hover,
nav ul a:focus,
nav ul button:focus {
    background-color: #6C6F70 !important;
}

.sidenav li > a:focus {
    background-color: rgba(0,0,0,0.05);
}



ul#mobile-demo .menu-item-has-children .sub-menu {
	background:  rgba(255,255,255,0.05);
}

ul#mobile-demo .menu-item-has-children:hover .sub-menu {
	padding:  0;

}



/******
Ensure that sub menus don't inherit their parent's background
*******/

nav.cd-side-navigation ul li > a,
nav.cd-side-navigation ul li > button {
	background: transparent;
}

.current-page-parent,
.current-menu-item,
.current-menu-parent {
	background-color: transparent !important;
}

.current-page-parent > a,
.current-menu-item > a,
.current-menu-parent > a,
.current-page-parent > button,
.current-menu-item > button,
.current-menu-parent > button {
    background-color: rgba(91, 31, 105, 0.7686274509803922) !important;
}

.sub-menu .current-page-parent > a,
.sub-menu .current-page-parent > button {
	background: rgba(152, 152, 152, 0.7686274509803922) !important;
}
.sub-menu .current-page-parent > a:hover,
.sub-menu .current-page-parent > a:focus,
.sub-menu .current-page-parent > button:hover,
.sub-menu .current-page-parent > button:focus {
    background-color: #6C6F70 !important;
}





/******
Fix issues with the mobile menu button being incorrectly positioned against the logo
*******/
nav .sidenav-trigger,
nav .sidenav-trigger i[class] {
	height:  34px;
	line-height: 34px;
}
@media only screen and (min-width: 601px) {
	nav .sidenav-trigger,
	nav .sidenav-trigger i[class] {
		height:  34px;
		line-height: 34px;
	}
}


/******
Only target modern browsers
*******/
@supports (display: grid) {

	/******
	Avoid the strict overflow rules that stop a more dynamic experience
	*******/
	.cd-side-navigation,
	.cd-side-navigation .nav-wrapper,
	.cd-side-navigation .nav-wrapper > ul,
	.cd-side-navigation ul div,
	.cd-side-navigation ul.menu,
	.menu-item-has-children {
		overflow: visible;
	}

	/******
	Try to force submenus to stay consistent in item height (may need to be in a media query)
	*******/
	nav.cd-side-navigation a,
	nav.cd-side-navigation button {
		white-space:  nowrap;
	}

	/******
	Make the sub menu positioning and sizing more interesting
	*******/
	@media only screen and (min-width: 1097px) {
		.menu-item ul.sub-menu {
			width: auto;
			position: absolute;
			top: 2.45em;
			right: 0;
			min-width:  120%;
    		min-width: calc(100% + 0.75em);
		}
	}
}


/******
Change breakpoints to sizes that work with the content
*******/

@media only screen and (max-width: 992px) {
	nav[class] .brand-logo {
	    left: 0%;
	    -webkit-transform: translateX(0%);
	    transform: translateX(0%);
	}
}

@media only screen and (min-width: 993px) {
	nav[class] a.sidenav-trigger {
	    display: block !important;
	}
}


@media only screen and (min-width: 1097px) {
	nav[class] a.sidenav-trigger {
	    display: none !important;
	}
	.sidenav,
	.sidenav-overlay {
	    display: none !important;
	}
}

@media only screen and (max-width: 1096px) {
	.hide-on-med-and-down {
	    display: none;
	}


	nav[class] .brand-logo {
	    left: 50%;
	    -webkit-transform: translateX(-50%);
	    transform: translateX(-50%);
	    position:  absolute !important;
	}
}


/******
Allow small mobile devices to still have the button side by side with the logo
*******/
@media only screen and (max-width: 400px) {
	nav .sidenav-trigger {
		margin-left:  0;
	}
	nav[class] .brand-logo {
	    left: auto;
	    right:  0;
	    -webkit-transform: translateX(0%);
	    transform: translateX(0%);
	}
}