html {
    line-height : 1.15;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
    
  .containerNav {
    margin-right : auto;
    margin-left  : auto;
    width        : 100%;
    max-width    : 1700px;  
  }
  
  .displayItems {
    flex-basis   : 100%;
    align-items  : center;
  }
  
 .scrollN,
 .scrollN:hover {
    font-size      : 16px;
    font-family    : 'Gravity-Light';
    text-decoration: none;
    display        : flex;
    margin-top    : 0;
  }
  
  ul {
    margin-top     : 0;
    margin-bottom  : 1rem
  }
  
  .navbar {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : .5rem 1rem;
    position       : fixed;
    top            : 0;
    right          : 0;
    left           : 0;
    z-index        : 1030;
  }
  
  .navbar-nav {
    display           : flex;
    flex-direction    : column;
    text-decoration   : none;
    padding-left      : 0;
    padding-right     : 0;
    margin-bottom     : 0;
    list-style        : none;
    position          : static;
    float             : none;
  }
  
  .navbar-nav li:hover,
  .navbar-brand:hover {
    text-decoration: none;
    background-color: rgba(215,215,215,0.35);
    transition: background-color .75s ease-out;
  }
  
  .navbar-brand {
    line-height   : inherit;
    white-space   : nowrap;
  }
  
  .nav-link,
  .nav-link-c {
    padding-right: 0;
    padding-left : 0;
    display      : block;
  }
  
  .mr-auto {
    margin-right: auto !important
  }
  
  .navbar>.containerNav{
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    justify-content: space-between;
  }
  
  /* Medium devices and smaller (tablets, 1400px and lower width) For the navbar toggle mode */
  @media (max-width: 1399px) {
    .navbar{
        min-height: 54px !important;
      }
  
    .collapsing {
      position  : relative;
      height    : 0;
      overflow  : hidden !important;
      transition: height .35s ease
    }
  }
  
  /* Large devices (desktops, 1400px and up) */
  @media (min-width: 1400px) {
    .scrollN,
    .scrollN:hover{
      font-size: 18px; 
      padding-left: 18px;
      padding-right: 18px   }

    .navbar, .navbar-nav {
        flex-direction    : row;}
  
    .navbar .navbar-nav{
        right: 0;
        left : auto;}
  
    .nav-link,
    .nav-link-c {
        padding-left : 18px;}
  
    .nav-link,
    .navbar-brand{
        padding-right: 18px;}
  
    .navbar>.containerNav{
        flex-wrap    : nowrap;
        width: 92%;}
  
    .navbar .displayItems {
        display: flex !important}
  
    .navbar .menu-btn{
        display: none;}
  
    .navbar{
        height: 120px;
        transition: height .5s, line-height .5s;}
        
    .scrolled-nav {
        height: 54px !important;
        line-height: 54px;
        border-bottom  : 1px solid var(--color-nav-border);
      }
  }
  
  
  /*/////////////////////////// button transition ///////////////////////////*/
  
  .menu-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: all 0.35s ease-in-out;
  }
  
  .menu-btn_burger,
  .menu-btn_burger::before,
  .menu-btn_burger::after {
    width: 30px;
    height: 2px;
    padding: 0;
    content: '';
    position: absolute;
    border-radius: 1px;
    transition: all .35s ease-in-out;
    /* background: rgb(150,150,150); */
  }
  
  .menu-btn_burger::before{
    transform: translateY(-9px);
  }
  
  .menu-btn_burger::after{
    transform: translateY(9px)
  }
  
  /* ANIMATION */
  .menu-btn.navExpanded .menu-btn_burger{
    transform: translateX(-7px);
    background: transparent;
    box-shadow: none;
  }
  
  .menu-btn.navExpanded .menu-btn_burger::before{
    transform: rotate(45deg) translate(5px,-5px);
  }
  
  .menu-btn.navExpanded .menu-btn_burger::after{
    transform: rotate(-45deg) translate(5px,5px);
  }