/* 
	CSS Modifications to the Multi Level Push Menu, specific to the ESSC implementation
	Also contains modifications to the left sidebar, which disappears when the mobile menu is present
 */

#menu-button-small:after {content: '\f419'; /* menu */
    font-family: "Genericons";
	position: absolute;
	right: 10px;
	font-size: 1.9em;
    font-weight: 300;
	color: #f4efbd}
#menu-button-small:hover:after, #menu-button-small:focus:after  { color: #007f96}
#menu-button-small {     position: absolute;
    top: 107px;
    right: 32px;
    color: transparent}
.container#bigUn {width: auto !important}
#left-nav, #access div.menu ul#left, #access div.menu ul#right {display: none}

 .mp-menu ul#RespNavUl li.expanded  {display: block;     width: 100%;}
.mp-menu ul#RespNavUl li.expanded > a.down {    float: left;    display: block    }
.mp-menu ul#RespNavUl li.expanded > a.down::before {      display: inline-block; transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transition: 300ms ease all;
    -moz-transition: 300ms ease all;
    -o-transition: 300ms ease all;
    transition: 300ms ease all;
}
	.mp-menu ul#RespNavUl li.expanded > a.lp { width: -webkit-calc(100% - 68px);      width: calc(100% - 68px);
    float: left;
    display: block;}
.mp-menu ul#RespNavUl li.expanded > .mp-level {float: left;     clear: left}	
.mp-menu ul#RespNavUl li.expanded > .mp-level  h2, .mp-menu ul#RespNavUl li.expanded > .mp-level  .mp-back , .mp-menu ul#RespNavUl li.expanded > .mp-level  ul
{display: none;  -webkit-transform: none;
    -moz-transform: none;
    transform: none; -webkit-transition: none;
    -moz-transition: none;
    transition: none;}
.mp-menu ul#RespNavUl li.expanded > .mp-level	{border-right: none;
    position: unset;
    top: unset;
    left: unset;
    width: -webkit-calc(100% - 1px);
    width: calc(100% - 1px);
    height: 100%;
    background: #D7DDE3;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;}
.mp-menu ul#RespNavUl li.expanded > .mp-level >ul > li > a	{color: #0d1d3e;     font-weight: 400;}
.mp-menu ul#RespNavUl li.expanded  .mp-level ul  li  a.down	{color: transparent !important}
.mp-menu ul#RespNavUl li.expanded .mp-level  .mp-level  a.down::before {    color: #fff}
.mp-menu ul#RespNavUl li.expanded > .mp-level  .mp-level	{    background: #0d1d3e}
.mp-menu ul#RespNavUl li.expanded > .mp-level  .mp-level >ul > li > a:not(.down):not(.lp)	{  padding-left: 75px;   }
.mp-menu ul#RespNavUl li.expanded > .mp-level  .mp-level >ul > li > a:not(.down)	{color: #fff;   font-size: 16px;   font-weight: 400;  }
.mp-menu ul#RespNavUl li.expanded > .mp-level  .mp-level >ul > li > a.lp	{  padding-left: 38px; width: -webkit-calc(100% - 106px); width: calc(100% - 106px);  }
.mp-menu ul#RespNavUl li.expanded > .mp-level .mp-level .mp-level >ul > li > a:not(.down):not(.lp)	{ padding-left: 100px; font-size: 13px;
    text-transform: uppercase;  }
.mp-menu ul#RespNavUl li.expanded  .mp-level  .mp-level ul  li  a.down	{color: transparent !important}


.mp-menu ul#RespNavUl li.expanded > .mp-level > ul {display: block; width: 100%}

/*.mp-level , .mp-cover .mp-level.mp-level-open {
    -webkit-transform: none !important;
    -moz-transform: none !important;
    transform: none !important;
}*/
#mp-menu > .mp-level, #mp-menu > .mp-level.mp-level-open, #mp-menu.mp-overlap > .mp-level, #mp-menu.mp-overlap > .mp-level.mp-level-open {
    -webkit-transform: translate3d(0, 0, 0) !important;
    -moz-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}

/* Mobile version of featured links nav */
#mobile-featured-nav {float: left; border: 3px solid #d4d0a3;
    margin-right: 45px;
    margin-bottom: 10px;
    margin-top: 5px;
    width: 100%}
.page-template-audience	#mobile-featured-nav {border: none; margin-right: 0;
       width: -webkit-calc(100% - 20px);    width: calc(100% - 20px);
    padding: 0 10px 0 6px;
    max-width: 682px;}
.page-template-audience		#audience_side_box, .page-template-audience		#audience_side_box_mobile {
    max-width: 100%;
    width: 100%;
}
#mobile-featured-nav .links {
    background-color: #F4EFBD;
    border: none;
    float: left;
    padding: 10px;
    width: -webkit-calc(100% - 20px); width: calc(100% - 20px)
}	
#mobile-featured-nav .links ul {margin: 10px 25px;}
#mobile-featured-nav .links li {
    line-height: 1.4em;
    padding: 0;
}
#mobile-featured-nav .links a {
    color: #004068;
    font-size: 14px;
    font-weight: 400;
}

@media screen  and (min-width : 820px) {
	#menu-button-small {display: none}
	#left-nav, #access div.menu ul#left, #access div.menu ul#right {display: block}
	#mobile-featured-nav {display:none}	 
}

@media screen  and (max-width : 819px) {
	#dinkylinks {position: relative;
    top: 1px;}
	#dinkylinks div.menu {margin: 0;
    width: 100%;
    top: 0;
    left: 0;
    display: block;}
	#dinkylinks ul {    position: relative !important;
    LEFT: 0 !important;
    display: block !important;
    width: 100%;
    top: -74px !important;
}
}

@media screen  and (min-width : 769px) and (max-width : 819px) {
	div.menu li:not(.menu-item)/* the search form */ {    float: right;  margin-top: 10px;   margin-right: 10px}
}

@media screen  and (max-width : 768px) {
		#audience form#searchform {    margin-left: 1px !important}
	form.tinynav select  option	{color: #007f96; background-color: white}
	form.tinynav select {
    background-color: transparent;
    border: 0;
    border-radius: 3px 3px 3px 3px;
    box-shadow: none;
    color: white;
    font-family: 'Lato';
    font-size: 16px;
    font-weight: 600;
    height: 22px;
    padding: 3px 3px 0 5px;
    width: 175px;
}
}

@media screen  and (max-width : 500px) {
		#audience form#searchform {    margin-left: -27px !important}
}

@media screen  and (max-width : 400px) {
		form.tinynav {   top: 12px !important}
		#audience form#searchform {    width: 175px !important;  margin-left: 11px !important}
		#audience #s {    width: 126px !important}
		#menu-button-small {    top: 23px;    right: 16px;}
}

@media screen  and (min-width : 401px) and (max-width : 768px) {
	#access {    width: 100% !important}
	form.tinynav {    left: auto !important;    right: 32px;}
	

}