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

  .sub-menu{ display: none};

  .grid-menu {
    a{
      color:  #FFF;
      font-size: 20px;
      font-weight: 700;
    }



    // level 1
    pages-menu{
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      align-content: normal;
      grid-gap: 20px;
      margin-top: 20px; 
               
      
      pages-menu-item {

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
        a {
          flex-basis:50%;
          flex-grow: 1;

          flex-grow: 1;
          flex-shrink: 1;
          align-self: auto;
          order: 0;
        }

        pages-menu{
          padding-left: 40px;
          flex-basis: 100%;
          &.hide-children{display: none;}
          pages-menu-item {

            a{
              font-weight: 400;
              
            }
            pages-menu{
              pages-menu-item {
                a{
                  color: rgba(255, 255, 255, 0.63);
                }
              }
            }
          }



        }
  
  
      
        .expand{
          flex-shrink: 0;
          flex-basis:24px;
          height: 24px;
          display: inline-block; 
          margin-right: 16px;
        }
        .toggle{
            background: url('~src/assets/images/icons/chevron_cirle_right_24dp.svg') center no-repeat;
            transition: transform 0.3s;
        }
        .open {
            transform: rotateZ(90deg);
        }
    
        
        a.current-item span{
          border-bottom: 2px solid  rgba(255, 255, 255, 0.63);
        }
      }
    }
  }
}



@media  screen and (min-width: 1330px){
  pages-menu {
    display: none;
  }

  // level 1
  .grid-menu>pages-menu {
    width: 100%;
    display: flex;
    align-items: stretch;
    overflow: hidden;    
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0;
    
    >pages-menu-item {
      animation: slide-from-top-and-fade-in 0.2s;            
      padding: 0 20px;
      margin: 0 -4px;      
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;      
  
      a {
        color:  #0070BA;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 32px;
        &.parent-item{
          >span{
            display: inline-block;
            border-bottom: 2px solid #0070BA;
          }
        }
      }

      // level 2

      &.depth{
        >a::after{
          content:"";
          display: inline-block;
          width: 24px;
          height: 24px;
          background-image: url('~src/assets/images/icons/chevron_right_24dp.svg');
          transform: rotateZ(90deg);
          transition: transform 0.3s;
          vertical-align: -6px;
          margin-left: 4px;
        }
        &.hover {
          >a::after{
            transform: rotateZ(-90deg);
          }          
          >pages-menu {
            position:absolute ;
            height: 68px;
            background-color: #FFF;
            top:104px;
            left: 0;
            width: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            overflow: hidden;    
            flex-grow: 0;
            flex-shrink: 0;
            >pages-menu-item{
              animation: slide-from-top-and-fade-in 0.2s;            
              padding: 0 20px;
              margin: 0 -4px;      
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;      
            }
          }
        }
      }


    }
  }

  .sub-menu{
    a{
      display: block;
      padding: 10px 20px;
    }   

    >pages-menu{
      display: block;
      padding: 20px;
      border-radius: 8px;
      background: #FFF;
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);


      >pages-menu-item{



        >a.active>span{
          color: var(--blue-1)
        }

        a{
          span{
          color: #6C6C6C;
          font-family: PT Sans Narrow;
          font-size: 24px;
          font-style: normal;
          font-weight: 700;
          line-height: 32px; /* 133.333% */
          letter-spacing: 0.24px;
          }
        }

        :hover{
          color:var(--blue-2)
        }
        .current-item{
          color:var(--blue-1)
        }

        >pages-menu.parent-item{ //second level
          display: block;
          >pages-menu-item{
            >a{
              
              >span{
                font-size: 20px;
                font-family: PT Sans;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
              }
            }
            >a.active{
              background-color: #EDEDED;
              border-radius: 8px;
              span{
                color:#2D2D2D
              }
            }
          }
        }
      }
    }

  
  }
}