﻿/*TWO LEVEL NAV*/
#two-level-nav-wrapper {
  display: flex;
  flex-direction: row;
  /*border-bottom: 1px solid gainsboro;*/
  width: 40%; }

#nav-left {
  display: inline-flex;
  flex-direction: column;
  width: 50%;
  background: white;
  padding: 10px 0;
  border: 1px solid gainsboro;
  z-index: 9999;
  /*box-shadow: 10px 0 5px -2px #888;*/ }

.nav-left-link {
  font-size: 10pt;
  padding: 10px;
  cursor: pointer;
  text-transform: uppercase; }

.indent {
  padding-left: 30px; }

.nav-left-header {
  font-size: 10pt;
  padding: 10px;
  text-transform: uppercase; }

#nav-right {
  display: inline-flex;
  /*transform:translateX(-100%);*/
  z-index: 0;
  /*opacity:0;*/
  transition: transform 0.4s ease, opacity 0.4s ease;
  flex-direction: row;
  flex-wrap: wrap;
  width: 50%;
  border: 1px solid gainsboro;
  background: white; }
  #nav-right #nav-right-header {
    width: 100%;
    margin: 15px 5%;
    text-transform: uppercase;
    font-size: 13pt;
    display: none; }

.nav-right-inactive {
  transform: translateX(-100%);
  opacity: 0; }

.nav-right-active {
  transform: translateX(0);
  opacity: 1; }

.nav-right-image-link {
  width: 100%;
  cursor: pointer;
  padding: 15px 0;
  display: block;
  /*flex-direction: column;*/
  /*justify-content:center;*/
  /*align-items: center;
    text-align: center;*/ }
  .nav-right-image-link a {
    color: black; }

.nav-right-title {
  font-size: 10pt;
  text-transform: uppercase; }

#nav-right-link-list {
  /*columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;*/
  list-style: none;
  margin: 15px 0;
  width: 100%; }
  #nav-right-link-list li {
    /*text-align: center;*/
    font-size: 10pt;
    text-transform: uppercase; }
  #nav-right-link-list li:not(:first-of-type) {
    /*width:20%;*/
    margin: 15px 0;
    /*span:not(:){
            padding:15px 0;
        }*/ }
  #nav-right-link-list a {
    color: black; }

@media only screen and (max-width: 1400px) {
  #two-level-nav-wrapper {
    width: 50%; } }

@media only screen and (max-width: 1200px) {
  #two-level-nav-wrapper {
    width: 60%; } }

@media only screen and (max-width: 900px) {
  #two-level-nav-wrapper {
    width: 70%; } }
