body {
  color: #453F3C;
  display: flex;
  flex-flow: column;
  width: 100%;
  font-family: 'Montserrat Alternates', sans-serif;
}

h1 {
  font-size: 4em;
}

h2,
h3 {
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 600;
}

p, ul {
  line-height: 1.6em;
  text-align: justify;
}

.full-view {
  height: 100vh;
}

.full-view-header {
  flex: 0 1 auto;
}

.full-view-content {
  flex: 1 1 auto;
}

ul.iconify-bullets {
  list-style: none;
  padding: 0;
}

ul.iconify-bullets > li > svg {
  margin-right: 0.5em;
}

/*
 * Menu
 */
nav {
  padding: 0.5em 0;
}

nav, nav ul {
  display: flex;
  flex-flow: column;
}

nav h1 {
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  padding: 0.5em 1em;
  margin: 0;
  line-height: 1.6em;

  display: flex;
  flex-flow: row;
}

nav h1 span {
  flex-grow: 1;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-toggle ~ ul {
  display: none;
}

#menu-toggle:checked ~ ul {
  display: flex;
}

nav a {
  text-decoration: none;
  padding: 0.5em 1em;
  color: #777;
  display: block;
}

nav a:hover {
  background-color: #eee;
}

nav a.selected {
  color: #000;
}

#menu-toggle {
  display: none;
}

#menu-toggle-button-container {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#menu-toggle-button, #menu-toggle-button::before, #menu-toggle-button::after {
  height: 0.25em;
  width: 2em;
  border-radius: 0.25em;
  background-color: #453F3C;
  display: block;
  transition: transform 400ms;
}

#menu-toggle-button::before {
  content: "";
  margin-top: -0.5em;
}

#menu-toggle-button::after {
  content: "";
  margin-top: 0.75em;
}

#menu-toggle:checked ~ h1 label #menu-toggle-button {
  background-color: transparent;
}

#menu-toggle:checked ~ h1 label #menu-toggle-button::before {
  transform: translateY(0.5em) rotate(45deg);
}

#menu-toggle:checked ~ h1 label #menu-toggle-button::after {
  transform: translateY(-0.5em) rotate(-45deg);
}

@media screen and (min-width: 48em) {
  nav, nav ul {
    flex-flow: row;
  }

  #menu-toggle-button-container {
    display: none;
    flex-flow: column;
  }
  
  input#menu-toggle ~ ul {
    display: flex;
  }
}

/*
 * Landing page
 */

#logo {
  width: 75vw;
  max-width: 25em;
  padding-top: 1em;
  padding-bottom: 5em;
}

#division-picker {
  background-image: url("../img/201909-XT20-6296.website.jpg");
  background-size: cover;
  background-position: 50% 50%;
  text-align: center;
  display: flex;
  flex-flow: row;
}

#division-picker-options {
  margin: 0 auto;
  align-self: center;
}

.division-picker-option {
  box-sizing: border-box;
  padding: 1em;
}

.division-picker-option > a {
  display: flex;
  flex-flow: row;
  justify-content: center;
  gap: 1em;
  padding: 2em;
  align-items: center;
  text-decoration: none;
  color: white;
  border-radius: 5em;
}

.division-picker-option h2 {
  margin-block-start: 0;
  margin-block-end: 0;
}

@media screen and (max-width: 30em) {
  .division-picker-option h2 {
    font-size: 5vmin;
  }
  .division-picker-option .iconify {
    font-size: 6vmin;
  }
}

#division-picker-option-it {
  background-color: #1B998B;
}

#division-picker-option-it:hover {
  background-color: #1FAD9D;
}

#division-picker-option-vet {
  background-color: #C9620E;
}

#division-picker-option-vet:hover {
  background-color: #E57010;
}

.division-picker-option .iconify {
  font-size: 2em;
}

/*
 * Division pages
 */
#banner {
  background-size: cover;
  background-attachment: fixed;
  background-position: 50% 0;
  width: 100%;
  color: white;
  text-shadow: 0 1px 1px black;
  display: flex;
  flex-flow: column;
  justify-content: center;
  text-align: center;
  height: 60vh;
  margin-bottom: 2em;
}

#content {
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
  padding: 0 1em;
}

#content section {
  clear: both;
}

#me {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 1em;
}

#me img {
  max-width: 33vw;
}

#title-box {
  font-family: 'Montserrat', sans-serif;
}

#title-box #title {
  display: block;
  font-size: 1.5em;
}

#title-box #name {
  display: block;
  font-size: 2em;
  margin-top: 0.2em;
  margin-bottom: 0.1em;
}

#title-box #abbrevs {
  display: block;
  font-size: 1em;
}

#clients img {
  max-width: 10em;
  height: fit-content;
  box-sizing: border-box;
  padding-right: 1em;
  padding-bottom: 1em;
}

@media screen and (min-width: 48em) {
  #clients img {
    padding-bottom: unset;
  }
}

#client-list {
  display: flex;
  flex-flow: column;
  gap: 1.5em;
}

.client {
  align-items: center;
  justify-content: center;
}

.client ul {
  margin: 0;
}

/*
 * Veterinary Services
 */
#page-veterinary #banner {
  background-image: url("../img/201909-XT20-6335.small.jpg");
  background-position: 0% 70%;
}

#page-veterinary #coming-soon {
  background-image: url("../img/201909-XT20-6335.small.jpg");
  background-position: 0% 70%;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  color: white;
  text-shadow: 0 1px 1px black;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 60vh;
  margin-bottom: 2em;
}

#clock-text {
  position: absolute;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

#clock {
  --clock-size: calc(min(50vh, 90vmin));
  height: var(--clock-size);
  width: var(--clock-size);
  position: relative;
}

#clock #hand_hour, #clock #hand_minute, #clock #hand_second {
  position: absolute;
  background-color: #bbb;
  width: 4px;
  height: 45%;
  margin-top: 5%;
  transform-origin: bottom center;
  left: calc(50% - 2px);
  border-radius: 2px;
}

#clock #hand_hour {
  height: 25%;
  margin-top: 25%;
  animation: clock_hands_rotate 43200s linear infinite;
}

#clock #hand_minute {
  animation: clock_hands_rotate 3600s linear infinite;
}

#clock #hand_second {
  background-color: #C9620E;
  animation: clock_hands_rotate 60s linear infinite;
}

#clock .hour {
  position: absolute;
  background-color: white;
  width: 3px;
  height: 8%;
  transform-origin: 0 calc(var(--clock-size) / 2);
  left: calc(50% - 1.5px);
}

#clock .hour:nth-of-type(1) {
  transform: rotateZ(30deg);
}
#clock .hour:nth-of-type(2) {
  transform: rotateZ(60deg);
}
#clock .hour:nth-of-type(3) {
  transform: rotateZ(90deg);
}
#clock .hour:nth-of-type(4) {
  transform: rotateZ(120deg);
}
#clock .hour:nth-of-type(5) {
  transform: rotateZ(150deg);
}
#clock .hour:nth-of-type(6) {
  transform: rotateZ(180deg);
}
#clock .hour:nth-of-type(7) {
  transform: rotateZ(210deg);
}
#clock .hour:nth-of-type(8) {
  transform: rotateZ(240deg);
}
#clock .hour:nth-of-type(9) {
  transform: rotateZ(270deg);
}
#clock .hour:nth-of-type(10) {
  transform: rotateZ(300deg);
}
#clock .hour:nth-of-type(11) {
  transform: rotateZ(330deg);
}

@keyframes clock_hands_rotate {
  to {
    transform: rotateZ(360deg);
  }
}

#client-list.only-logos {
  flex-flow: row wrap;
}

#client-list.only-logos .logo-with-description {
  height: 10em;
  border-radius: 0.25em;
  display: flex;
  align-items: center;
}

#client-list.only-logos .logo-with-description ul {
  margin: 0;
  padding: 0;
  padding-left: 1em;
}

#client-list.only-logos .logo-with-description:hover {
  background-color: #ddd;
}

#client-list.only-logos img {
  width: 10em;
  padding: 0.5em;
}

#client-list.only-logos .logo-with-description .logo-description {
  display: none;
}

#client-list.only-logos .logo-with-description:hover .logo-description {
  display: block;
  position: absolute;
  padding: 0.5em;
  background-color: #C9620E;
  color: white;
  border-radius: 0.25em;
  margin-left: 1em;
  margin-top: 9em;
}

/**
 * Software Services
 */
#page-software #banner {
  background-image: url("../img/201908-XT20-5498.small.jpg");
  background-position: 0% 70%;
}