@charset "utf-8";


:root {
  /* menu */
  --menu-item-bg: #222; /* transparent; */
  --menu-item-color: rgba(255,255,255,0.96); /* purple; /* #111111; */ 
  --menu-item-active-bg: white; /* #222; /* purple; /* #111111; */
  --menu-item-active-color: #222; /* rgba(255,255,255,0.96); */
  --menu-item-hover-bg: white; /* purple; */
  /* submenu */
  --text-color: #333333;
  --hover-color: #666666;
  --bg-color: #FFFFFF;
  --greyDot-color: grey; /* rgba(0,0,0,0.25); */
  --CVgreyDot-color: rgba(0,0,0,0.175);  
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* THERE ARE STYLESHEETS ATTACHED TO THIS formatting */

/* grids */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen {

  .burgerWrapper {
    position: fixed;
    top: 0px;
    right: 0px;
    display: block;
    padding: 0px; /* 0.5em 0.65em; */
    margin-bottom: 0em;
    background-color: white;
    width: 100%;
    z-index: 999;
  }
  .burgerWrapper:after {
    content: "";
    display: table;
    clear: both;
  }

  body[class*="toolbar"] .burgerWrapper {
    position: absolute;
    z-index: 10;
  }


  .burgerWrapper a#burger {
    display: block;
    float: right;
    /* text-align: right; */
    padding: 5px .45em; /* 1px 0.25em; */
    margin: 0px; /* -0.5rem -0.375rem 0px 0px; */
    color: var(--menu-item-active-bg);
    height: 41px;
  }

  .burgerWrapper a#burger #burgerIcon svg,
  .burgerWrapper a#burger #crossIcon svg {
    width: 1.9rem; /* 2.5em; /* 46px; */
    height: 1.9rem; /* 2.5em; /* 46px; */
  }  

  .burgerWrapper a#burger #burgerIcon.hide,
  .burgerWrapper a#burger #crossIcon.hide {
    display: none;
  }

  #mobileNavWrapper.hide {
    max-height: 0px;
    /* border-bottom: 1px solid transparent; */
    border-bottom: 2px dotted transparent;
  }

  #mobileNavWrapper {
    display: block;
    float: right;
    width: 100%;
    overflow: hidden;
    height: auto;
    max-height: 420px;
    transition: max-height 0.2s ease;
    padding: 0px; /* 0px 0.5em; */
    border-bottom: 2px dotted var(--greyDot-color);
  }  



  #mobileNavWrapper ul.menu {
    list-style: none;
    height: auto;
    overflow: hidden;
    transition: max-height 0.2s ease;
    padding: 0px;
    margin: 0px; /* 5px 0px 5px 0px; /* 0px 0px 1rem 0px; */
    display: grid;
    grid-template-columns: auto;
    grid-gap: 0px; /* 5px; */
    padding: 2rem;
    line-height: 1.65em;    
  }

  #mobileNavWrapper ul.menu li {
  }

  #mobileNavWrapper ul.menu li a {
    display: inline-block;
    width: auto;
    font-size: 1em; /* 27px; */
    line-height: 1.2em;
    text-align: left; /* center; */
    padding: 0px; /* 0.65em 1em; */
    margin-right: 5px;
    font-weight: 500; /* 400; */
    text-transform: uppercase; /* lowercase; */
    color: var(--menu-item-active-color);
    background: var(--menu-item-active-bg);
    text-decoration: none;
  }
  #mobileNavWrapper ul.menu li a:hover {
    text-decoration: underline;
  }

  #mobileNavWrapper ul.menu ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px; /* 5px; */
    margin-bottom: 0px; /* -5px; */
  }

  #mobileNavWrapper ul.menu ul li {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 0px; /* 5px; */
  }  

  #mobileNavWrapper ul.menu ul li a {
    word-break: keep-all;
    text-transform: lowercase;
  }

  /* #mobileNavWrapper nav > ul.menu > li > a { */
  #mobileNavWrapper nav > ul.menu > li {
    display: block;
    border-bottom: 2px dotted var(--greyDot-color);
  }

}


/* ***************************************************** */
/* VERY small screen */

@media (min-width: 400px) {

  #mobileNavWrapper.hide {
    border-bottom: 2px dotted var(--greyDot-color);
  }  

}


/* ***************************************************** */
/* BREAK MEDIUM */

@media (min-width: 800px) {

  .burgerWrapper {
    display: none;
  }


  #mobileNavWrapper ul.menu {
    margin: 5px 0px 5px 0px; /* 0px 0px 1rem 0px; */
    grid-gap: 5px;   
  }  

  #mobileNavWrapper ul.menu li a {
    padding: 0.65em 1em;
  }


  #mobileNavWrapper ul.menu ul {
    margin-bottom: -5px;
  }

  #mobileNavWrapper ul.menu ul li {
    margin-bottom: 5px;
  }    

}


/* ***************************************************** */
/* BREAK MEDIUM */

@media (min-width: 1200px) {


}


/* ***************************************************** */
/* BREAK MEDIUM */

@media (min-width: 1600px) {


}