.navigation {
  height: 70px;
  background: white;
}


.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}

.main-nav {
  float: right;
}
.main-nav ul {
    list-style: none;
    margin: 0;
}
.main-nav ul li {
      float: left;
      position: relative;
    }
    .main-nav ul li a,
    .main-nav ul li a:visited {
        display: block;
        padding: 20px 15px;
        font-size: 1.6rem;
        color: var(--clr-menuicon);
        text-decoration: none;
        cursor: pointer;
      }
      .main-nav ul li a:hover {
          color: black;
        }
        .main-nav ul li a:not(:only-child):after {
          padding-left: 4px;
          content: ' ▾';
        }
        .main-nav ul li ul li {
        min-width: 270px;
      }
      .main-nav ul li ul li a {
          padding: 15px;
        }


.sub-menu {
  position: absolute;
  display: none;
  width:auto;
  z-index: 1;
  padding:20px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}


@media only screen and (max-width: 798px) {
 .sub-menu {
  width:100%;
  flex-direction: column;
  display: none;
 }
 .main-nav .navbar-nav {
  width:100%;
  display: flex;
flex-direction: column;
align-items: center;
 }

 .main-nav ul li {
  width:100%;
  float:none;
  text-align:center;
 }

 .main-nav ul li a {
  background: none;
  padding: 20px 20px;
 }
  
}