:root {
  /* Background colors */
  --practiceContentBGColor: #888888;

  /* Text colors */
  --practiceContentColor: white;
  --linkUnderlineColor: #8ea9db;

  /* Widths, heights and positions */
  --containerWidth: 98%;
  --containerLeft: calc((100% - var(--containerWidth)) / 2);
  --minWidth: 300px;
  --minFormWidth: calc(var(--minWidth) - 2 * var(--parMarginLR) - 3em);

  --menuBtnWidth: calc(var(--logoWidth) * 3 / 4);
  --menuBtnHeight: calc(var(--logoHeight) * 3 / 4);
  --menuWidth: 15em;
  --menuHeight: 100%;

  /* Margins and padding */
  --menuBtnPadding: 20px;
  --subMenuLPadding: calc(var(--menuBtnPadding) * 2.25);
  --menuTxtLeftPadding: calc((var(--menuWidth) - 100px) / 2);
  --menuEntryTBPadding: 7px;
  --menuEntryRPadding: 7px;
  --largeMargin: 8px;

  /* URLs */
  --APLawLogo:  url('../images/APLawLogo.png');
  --APLawLogoInv:  url('../images/APLawLogoInverted.png');
}


/* PAGE LAYOUT */

div.container {
  position: absolute;

  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-flow: column nowrap;

  height: 100vh;
  min-height: 100vh;
  width: var(--containerWidth);
  left: var(--containerLeft);
  max-width: var(--maxWidth);
  min-width: var(--minWidth);
  margin-top: 0px;

  background: var(--containerBGColor);
}

div.background {
  margin-top: 0px;
}

header {
  padding-top: 2px;
  padding-bottom: 2px;
}

main {
  margin-top: var(--logoHeight);
  margin-bottom: auto;
}

div.consult {
  display: block;
  position: relative;
  left: 50%;
  margin-top: auto;
  margin-bottom: auto;
  transform: translate(-50%);
  font-size: 0.8em;
}

nav {
  position: absolute;
  z-index: 10;
}

div.logo {
  display: block;

  background-image: var(--APLawLogo);
  background-size: contain;
  height: calc(var(--logoHeight) * 3 / 4);
  width: calc(var(--logoWidth) * 3 / 4);
}

div.logo:hover, div.logo:focus {
  background-image: var(--APLawLogoInv);
}

h2 {
  margin-left: 0px;
  margin-right: 0px;
}

h2.top {
  margin-bottom: 5px;
  margin-top: 5px;
}

h2.paTop {
  margin-bottom: calc(5px + (var(--PAIconSize) / 2));
  margin-top: 5px;
}

footer {
  padding-top: 3px;
}

footer.practice {
  margin-top: 1px;
}

div.practiceBackground {
  position: relative;
  display: block;
  margin: 1px 0px 0px 0px;
  background-color: var(--practiceContentBGColor);
  overflow: clip;
  max-width: 800px;
}

div.practiceContent {
  position: absolute;
  display: block;
  z-index: 2;

  top: 0px;
  margin: 10px 8px 0px 10px;
  padding: var(--parMarginTB) 0px;

  color: var(--practiceContentColor);
  font-weight: 500;
}

div.column, div.whyCol {
  position: relative;
  display: block;

  margin: 10px 8px 0px 10px;
  padding: var(--parMarginTB) 0px;
}

div.whyCol {
  margin-top: 0px;
  padding-top: 0px;
}

div.center {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

div.paBox {
  gap: 5px;
  margin-top: calc(5px + (var(--PAIconSize) / 2));
}

p.paPar {
  margin: calc(var(--parMarginTB) / 2);
}

p.intro {
  display: block;
  margin-top: 0.5em;
}

/*
h2.home + p.intro {
  margin-top: 0.5em;
}
*/

img.practice {
  position: relative;
  display: block;
  filter: brightness(30%);
  margin: 0px;
  max-width: 100%;
  max-height: 100%;
}

img.founder {
  max-height: 200px;
  margin: 0px;
}

/* MENU STYLES */

div.menuBar {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-flow: row nowrap;
  position: relative;
  z-index: 10;
}


/* hide "Menu" word in the label */
div.menuTxt {
  position: absolute;
  display: none;

  text-transform: uppercase;
  text-decoration: none;
  color: var(--darkThemeTextColor);
  font-size: larger;
  text-align: left;

  min-width: calc(var(--menuWidth) + (var(--menuBtnPadding) * 2) - (var(--menuBtnWidth) / 3) - 41px);
  margin: calc(var(--menuBtnHeight) / 3 - 4px) 0px 0px 0px;
  padding-left: 20px;
}


/* start menu button */
label.menuBtn {
  display: block;
  background-color: var(--darkThemeBGColor);

  color: var(--darkThemeTextColor);

  width: var(--menuBtnWidth);
  margin: 2px 0px 0px 0px;

  cursor: pointer;
  transition: width .3s ease-in-out;
}

/* menu itself */
div.menu {
  position: absolute;
  overflow: hidden;

  font-weight: 500;

  width: 0px;
  border: 0px solid var(--darkThemeBGColor);
  background-color: var(--containerBGColor);

  transition: width .3s ease-in-out;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div.menu ul.menu {
  padding: var(--menuEntryTBPadding) 0px;
}

div.menu ul {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

div.menu ul li {
  padding: 0px;
  margin: 0px;
  padding-left: var(--menuBtnPadding);
}

div.menu ul a, div.menu ul li span.activePage, ul.subMenu,
div.menu ul li.dropdown {
  display: block;
  color: var(--darkThemeBGColor);
  background-color: transparent;
  padding: 0px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  padding: var(--menuEntryTBPadding) 0px;
  font-size: var(--fontSize);
  white-space: normal;
}

div.menu ul li.dropdown, ul.subMenu {
  margin-left: 0px;
  padding: 0px;
}

span.dropdown {
  padding: var(--menuEntryTBPadding) 0px;
  padding-left: var(--menuBtnPadding);
  white-space: nowrap;
}

div.menu ul li ul li {
  padding-left: var(--subMenuLPadding);
  padding-right: var(--menuEntryRPadding);
}

span.dropdown::after, a.dropdown::after {
  background-image: url('/images/droparrow.png');
  display: inline-block;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 8px;
  height: 6px;
  content: ' ';
  margin-left: 6px;
}

div.menu ul a:hover, div.menu ul a:focus {
  background: var(--darkThemeBGColor);
  color: var(--darkThemeTextColor);
}


ul.menu li.active span.activePage {
  opacity: var(--activeMenuOpacity);
}

div.menuBtn {
  margin: 0px 0px 0px calc(var(--menuBtnWidth) / 3);
}

img.menu {
  position: relative;
  margin-top: calc(var(--menuBtnHeight) / 3);
  margin-bottom: calc(var(--menuBtnHeight) / 3 - 4px);
  left: calc((var(--menuBtnWidth) - 13) / 2);
  width: auto;
  height: calc(var(--menuBtnHeight) / 3);
}

/* end menu itself */
/* start animations */
/* initially hide checkbox input at menu top */
#menuCheckBox  {
  display: none;
}


#menuCheckBox:checked + .menuBtn {
  min-width: calc(var(--menuWidth) + (var(--menuBtnPadding) * 2));
  font-weight: 500;
  padding: 0px;
}

/* Show again the word "Menu" in the button */
#menuCheckBox:checked + .menuBtn div.menuTxt, #menuCheckBox:checked ~ div.menu {
  display: inline-block;
}

#menuCheckBox:checked ~ div.menu {
  min-width: calc(var(--menuWidth) + 2 * var(--menuBtnPadding));
  display: inline-block;
  border-width: 1px;
}


/* OTHER */
img.about {
  height: 250px;
  width: auto;
  margin: 0px;
  filter: brightness(80%) contrast(120%);
  border-radius: 10%;
}

a.email, a.terms, a.practiceArea, a.contactPhone, a.phone {
  text-decoration: underline rgb(from var(--darkThemeBGColor) r g b / 60%) dotted auto;
  text-underline-offset: 2px;
  color: var(--lightThemeTextColor);
}

a.pa {
  color: var(--practiceContentColor);
  text-decoration-color: rgb(from var(--practiceContentColor) r g b / 50%);
  background: rgb(from var(--practiceContentColor) r g b / 20%);
  padding: 0.1em 0.2em;
  margin-inline: -0.125em;
  border-radius: 0.5em;
}

span.tel {
  border-bottom: 1px solid var(--linkUnderlineColor);
}