
@media screen and (max-width: 960px){



  .main-menu {

    // level 1
    &>pages-menu{
      display: block;              

      pages-menu-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        align-content: flex-start; 

        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; 
        margin: 16px 0;

        :last-child{
          margin-bottom: 0;
        }
  
  
      
        .expand{
        
          width:24px;
          height: 24px;
          display: inline-block;    
        }
        .toggle{
            background: url('~src/assets/images/icons/expand_less_24.svg') center no-repeat;
            transform: rotateZ(90deg);
            transition: transform 0.3s;
        }
        .open {
            transform: rotateZ(180deg);
        }
    
        a {
          color:  #FFF;
          display: block;
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: calc(100% - 24px);
          align-self: auto;
          order: 0;
          padding-left: 4px;
        }
        a.active-mob span{
          border-bottom: 2px solid #F9B417;
        }

        :host-context(.active){
          border-bottom: none !important;
        }
        pages-menu.hide-children{
          display: none;
        }          
        // level 2 and below
        pages-menu{
          flex-grow: 1;
          flex-shrink: 0;
          flex-basis: 100%;
          align-self: auto;
          order: 0;

          pages-menu-item {
            color: rgba(255, 255, 255, 0.75);
            /* 16-24/Regular */
            font-weight: 400;
            margin-left: 28px;
          }          
        }
      }
    }
  }
}



@media  screen and (min-width: 961px){

  pages-menu {
    animation: slide-from-top-and-fade-in 0.2s;
    pages-menu-item {
      a {
        transition: all 0.3s;
      }
      &:hover {
        &>pages-menu {
          display: flex;
        }
      }
    }
  }

  // level 1
  pages-menu {
    width: 100%;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    margin: 0 4px;
    
    &>pages-menu-item {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: stretch;
      flex-grow: 0;
      flex-shrink: 0;
      text-align: center;
      padding: 0 20px;
      margin: 0 -4px;
      &:hover {
        background-color: #004077;
        a{
          color: #FFF;
        }
      }
      
  
      &>a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color:  #0070BA;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 32px;
        

        &:hover {
          text-decoration: none;
          color:  white;
          background: #004077;
        }
      }

      &>:hover {
        & > pages-menu {
          display: flex;
        }
      }
      &>pages-menu:first-child {
        &>pages-menu {
          display: flex;
        }
      }

      // level 2
      &>pages-menu {
        display: none;
        justify-content: center;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        max-width: 100%;
        background-color: #004077;
        z-index: 1000;
        padding: 24px calc( (100% - 1400px) / 2);;
        margin: 0;

        &>pages-menu-item {
          display: flex;
          flex-direction: column;
          align-items: stretch;
          flex-grow: 0;
          flex-shrink: 1;
          text-align: left;

          // &.hidden {display: none;}

          &>a {
            font-family: PT Sans;
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 32px; /* 160% */
            color: white;

            &>span {
              display: block;
              overflow: hidden;
            }

            &:hover, &.active {
              &:after {
                opacity: 1;
              }
            }
          }
          
          // level 3
          &>pages-menu {
            position: relative;
            padding: 20px 0 0 0;
            top: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: left;
            &>pages-menu-item {
              position: relative;
              display: block;
              padding: 0;
              margin: 20px 0 0 0;
              opacity: 0.63;
            }
          }          
        }
      }
    }
  }
}