/* Utlity Navigation at the Top */

.utility-nav {
    display: none;
    background-color: #3172AE;
    font-weight: 300;
}

.utility-nav--inner {
    margin-top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    min-height: 56px;
}

ul.menu {
    margin-left: 1em;
    padding: 0;
    list-style: none outside;
    text-align: left;
   
}

ul.menu:not(.footer__primary__navigation) {
  list-style: none;
  margin-left: 0;
}

.utility-nav .menu--utility-links .menu-item {
    margin-right: 24px;
}

.menu-item {
    margin: 0;
    padding-top: 0.2em;
}

.utility-nav ul.menu .menu-item a:not(.toolbar-icon) {
    font-size: calc(0.8125rem * 1.12); /* Adjusted for Proxima Nova */
    font-family: "proxima-nova", sans-serif;
    color: #FFFFFF;
    text-decoration: none;
}

.utility-nav ul.menu .menu-item a:hover:not(.toolbar-icon) {
    background-size: 0 0.0625rem, 100% 0.0625rem;
}

.menu--utility-cta ul.menu .menu-item a:not(.toolbar-icon):hover {
    background-size: 100% 200%;
    color: #3172AE;
}

.menu--resources-for .menu-item--expanded .menu .menu-item {
    padding: 10px 10px 0 10px;
    font-weight: 300;
}

.menu--resources-for .menu-item--expanded .menu .menu-item:last-of-type {
    padding-bottom: 10px;
}

.menu--resources-for {
  padding-left: 16px;
}

.container {
        margin-left: auto;
        margin-right: auto;
        padding: 0 25px;
        max-width: 1280px;
}

.utility-nav ul.menu .menu-item a:not(.toolbar-icon), .menu--resources-for .menu-item--expanded > button {
    text-decoration: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)), -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
    background-image: -moz- oldlinear-gradient(transparent, transparent), -moz- oldlinear-gradient(currentColor, currentColor);
    background-image: linear-gradient(transparent, transparent), linear-gradient(currentColor, currentColor);
    -webkit-transition: background-size .5s ease;
    -moz-transition: background-size .5s ease;
    transition: background-size .5s ease;
    background-size: 100% 0.0625rem, 0 0.0625rem;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
}

@media (min-width: 1025px) {
    .utility-nav {
        display: block;
        z-index: 999;
    }
}

/* Give Button */

.menu--utility-cta {
    border-right: 1px solid;
}

.utility-nav ul.menu .menu-item a:not(.toolbar-icon) {
    font-size: calc(0.8125rem * 1.12); /* Adjusted for Proxima Nova */
    font-family: "proxima-nova", sans-serif;
    color: #FFFFFF;
    text-decoration: none;
}

.menu--utility-cta ul.menu .menu-item a:not(.toolbar-icon) {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #FFFFFF), color-stop(50%, transparent)) no-repeat bottom right;
    background: -moz- oldlinear-gradient(bottom, #FFFFFF 50%, transparent 50%) no-repeat bottom right;
    background: linear-gradient(to top, #FFFFFF 50%, transparent 50%) no-repeat bottom right;
    background-size: 100% 0;
    position: relative;
    font-weight: 500;
    margin-right: 16px;
    padding: 5px 10px;
    text-align: center;
    margin-top: 4px;
    border: 2px solid #FFFFFF;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    transition: all .4s ease-out;
}


.menu--resources-for .menu-item--expanded::after {
    content: '';
    background-image: url(https://live-tufts-edu.pantheonsite.io/themes/custom/tuftsedu_theme/src/images/icons/caret-down.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
    height: 10px;
    width: 10px;
    display: inline-block;
    margin-top: 8px;
    margin-left: 5px;
}

button {
    font-family: "proxima-nova", sans-serif;
    appearance: auto;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
    margin: 0em;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    font-weight: 500;
    font-size: calc(14px * 1.12); /* Adjusted for Proxima Nova */
}

.menu--resources-for .menu-item--expanded > button, .menu--resources-for .menu-item--expanded > span {
    cursor: pointer;
    background-color: transparent;
    border: none;
    padding: 0;
    color: #ffffff;
    
    
}

li.menu-item--expanded {
    cursor: pointer;
    padding: 16px 0px;
}


/* Expanded menu */
.menu--resources-for .menu-item--expanded:hover .menu, .menu--resources-for .menu-item--expanded.open .menu {
    height: auto;
    opacity: 1;
    z-index: 999;
    width: 100%;
    background-color: #203749;
    display: block;
    cursor: pointer;
}

.menu--resources-for .menu-item--expanded:hover .menu, .menu--resources-for .menu-item--expanded.open .menu {
    height: auto;
    opacity: 1;
    z-index: 999;
    width: 100%;
    background-color: #203749;
    display: block;
}

.menu--resources-for .menu-item--expanded .menu {
    position: absolute;
    height: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: height 0.3s ease, opacity 0.3s ease;
    -moz-transition: height 0.3s ease, opacity 0.3s ease;
    transition: height 0.3s ease, opacity 0.3s ease;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 10px;
    left: 0;
    top: 40px;
    min-width: 160px;
    padding: 0;
    top: 56px;
}

.menu--resources-for .menu-item--expanded {
  cursor: pointer;
  position: relative;
  font-weight: 500;
  padding: 16px 0;

}

@media (min-width: 48em) {
    body .sub-navigation-wrapper {
      max-width: 1280px;
      margin-left: auto;
      margin-right: auto;
    }
    body .breadcrumb-wrapper {
      max-width: 1280px;
    }
}

@media (min-width: 1440px) {
  .container {
      padding: 0;
  }
}

/* Mobile Menu Styles */

 @media (max-width:1024px) {
     .utility-nav--inner {
         display: none;
     }
 }

 @media (min-width:1024px) {
     .menu--main {
    display: block;
}
 }