/* Pro team colors */
/* https://teamcolors.jim-nielsen.com/ */

/* Import Google Font  */
/* @import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,700,700i,900,900i'); */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i");

:root {
  /* Fonts */
  --font: "Roboto", sans-serif;
  --font-light: 300;
  --font-bold: 500;

  /* // Colors */
  --black: #353535;
  --gray: #4f4f4f;
  --gray: rgb(76, 79, 82);
  --almost-black: #2d2d2d;
  --darker-gray: #5c5c5c;
  --medium-gray: #7c7c7c;
  --light-gray: hsl(0, 0%, 81%);
  --orange: #f96855;
  --cadetblue: #5f9ea0;

  --color0: #535257;
  --color1: #5d5c61;
  --color2: #379683;
  --color3: #7395ae;
  --color4: #557a95;
  --color5: #b1a296;

  /* // Semantic color names */
  --accent: var(--color3);
  --accent2: var(--color4);

  --menu-background: var(--gray);
  --body-background: var(--gray);

  --main-font-color: var(--light-gray);
  --font-color-darker: var(--almost-black);
  --menu-active-color: var(--light-gray);
  --menu-font-color: var(--light-gray);
  --link-color: var(--accent);
  --separator: var(--accent);

  --gradient-lightR: linear-gradient(145deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.1));

  --gradient-light: linear-gradient(145deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.1));
  --gradient-dark: linear-gradient(145deg,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.15));

  /* color1 is when hamburger is open / menu expanded*/
  --hamburger-color1: var(--accent);
  --hamburger-color2: var(--accent);
  --hamburger-bar-width: 35px;
  --hamburger-bar-height: 6px;
  --hamburger-gap: 6px;
  --hamburger-foreground: var(--hamburger-color2);
  --hamburger-background: var(--hamburger-color1);
  --hamburger-margin: 18px;
  --hamburger-animation-timing: 250ms ease-in-out;
  --hamburger-height: calc(var(--hamburger-bar-height) * 3 + var(--hamburger-gap) * 2);
}

::selection {
  background: var(--color5);
}

::-moz-selection {
  background: var(--color5);
}

/* ===================
// General styles
// =================== */

* {
  box-sizing: border-box;
}

body {
  background: var(--body-background);
  color: var(--main-font-color);
  font-family: var(--font);
  font-size: 1.1rem;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin: 1px;
  padding: 0;
  border: 0;
}

a.link,
h1.title a {
  text-decoration: none;
  color: var(--main-font-color);
  font-weight: 200;
  position: relative;
  white-space: nowrap;
}

a.upper {
  text-transform: uppercase;
}

a.lower {
  text-transform: lowercase;
}

a.link:hover {
  font-style: normal;
}

h1.title {
  font-weight: 200;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  font-size: 2em;
}

a.fancy:hover {
  /* color: var(--light-gray); */
  text-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  transition: all ease-out 350ms;
  text-decoration: none;
}

a.fancy::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: right;
  transform-origin: right;
  transition: -webkit-transform 250ms ease-in;
  transition: transform 250ms ease-in;
  transition: transform 250ms ease-in, -webkit-transform 250ms ease-in;
}

a.fancy:hover::after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: left;
  transform-origin: left;
}

.fancy-button {
  cursor: pointer;
  position: relative;
  z-index: 1;

  overflow: hidden;
  outline: none;
}

.fancy-button+.fancy-button {
  margin-left: 0.4em;
}

.fancy-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  z-index: -1;
  transition: -webkit-transform 200ms ease-in;
  transition: transform 200ms ease-in;
  transition: transform 200ms ease-in, -webkit-transform 200ms ease-in;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: right;
  transform-origin: right;
}

.fancy-button:hover::after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: left;
  transform-origin: left;
}

/* ===================
// Navigation
// =================== */
/* https://github.com/WebDevSimplified/css-only-hamburger-menu/blob/main/styles.css */
.hamburger-menu {
  --x-width: calc(var(--hamburger-height) * 1.41421356237);
  display: flex;
  flex-direction: column;
  gap: var(--hamburger-gap);
  width: max-content;
  position: absolute;
  top: var(--hamburger-margin);
  left: var(--hamburger-margin);
  z-index: 2;
  cursor: pointer;
}

.hamburger-menu:has(input:checked) {
  --hamburger-foreground: var(--hamburger-color1);
  --hamburger-background: var(--hamburger-color2);
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible {
  border: 1px solid var(--hamburger-background);
  box-shadow: 0 0 0 1px var(--hamburger-foreground);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
  content: "";
  width: var(--hamburger-bar-width);
  height: var(--hamburger-bar-height);
  background-color: var(--hamburger-foreground);
  border-radius: 9999px;
  transform-origin: left center;
  transition: opacity var(--hamburger-animation-timing),
    width var(--hamburger-animation-timing),
    rotate var(--hamburger-animation-timing),
    translate var(--hamburger-animation-timing),
    background-color var(--hamburger-animation-timing);
}

.hamburger-menu input {
  appearance: none;
  padding: 0;
  margin: 0;
  outline: none;
  pointer-events: none;
}

.hamburger-menu:has(input:checked)::before {
  rotate: 45deg;
  width: var(--x-width);
  translate: 0 calc(var(--hamburger-bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after {
  rotate: -45deg;
  width: var(--x-width);
  translate: 0 calc(var(--hamburger-bar-height) / 2);
}

.hamburger-menu input:checked {
  opacity: 0;
  width: 0;
}

.hamburger-menu:has(input:checked)+.sidebar {
  translate: 0;
}

.sidebar {
  transition: translate var(--hamburger-animation-timing);
  translate: -100%;
  padding: 0.5rem 0;
  padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
  max-width: 10em;
  min-height: 100vh;
}

.sideMenu {
  position: absolute;
  text-transform: uppercase;
  margin-bottom: 0.5em;
  font-size: 2em;
  top: 1em;
  left: 0;
  z-index: 101;
}

nav ul {
  padding: 0;
  list-style: none;
  height: 100vh;
}

nav li {
  border-bottom: 1px solid var(--separator);
}

nav li:first-child {
  border-top: 1px solid var(--separator);
}

.nav-item {
  font-size: 1.5rem;
  text-transform: initial;
  color: var(--menu-font-color);
  text-decoration: none;
  display: inline-block;
  padding: 0 1em;
  position: relative;
}

.nav-item:hover {
  color: white;
  text-decoration: none;
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 10%) 15%,
      rgba(255, 255, 255, 10%) 85%,
      rgba(255, 255, 255, 0) 100%);
}

.modal-open .modal {
  outline: none !important;
}

.logo {
  position: absolute;
  text-transform: uppercase;
  font-size: 2.2em;
  top: 1.05em;
  left: 2em;
  z-index: 100;
}

.logo span {
  font-weight: var(--font-bold);
}

/* ===================
// Main Content area
// =================== */
.main-content {
  top: 1em;
  padding: 5% 15% 3% 15%;
  transform: translateX(0vw);
  transition: transform var(--hamburger-animation-timing),
    padding var(--hamburger-animation-timing);
  height: 100vh;
}

.nav-is-open {
  /* transform: translateX(6%);
  transition: transform var(--hamburger-animation-timing); */
  padding: 5% 15% 3% 15%;
  transition: padding var(--hamburger-animation-timing);
}

/* ===================
// Portfolio
// =================== */

.portfolio {
  display: grid;
  height: 100%;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 18px;
}

.portfolio-item {
  background: var(--accent);
  background-image: var(--gradient-light);
  color: var(--gray);
  font-weight: var(--font-bold);
  border-radius: 5px 15px 15px 5px;
  display: flex;
  justify-content: left;
  align-items: center;
  font-size: 1.4em;
  background-size: cover;
  background-position: top left;
  transition: all ease-out 350ms;
  position: relative;
  z-index: 10;
  padding: 0.5em;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
}

.portfolio-item.small {
  grid-row: span 1;
  grid-column: span 1;

  background-position: 2% 5%;
  background-repeat: no-repeat;
}

.portfolio-item.medium {
  grid-row: span 2;
  grid-column: span 2;
  background-position: 2% 5%;
  background-repeat: no-repeat;
}

.portfolio-item.large {
  grid-row: span 3;
  grid-column: span 3;
  background-position: 2% 5%;
  background-repeat: no-repeat;
  /* column-count: 3; */
  /* -webkit-column-count: 3; */
  /* Chrome, Safari, Opera */
  /* -moz-column-count: 3; */
  /* Firefox */
}

.portfolio-item.tall {
  grid-row: span 3;
  grid-column: span 2;
  /* background-size: 10%; */
  background-position: 2% 5%;
  background-repeat: no-repeat;
}

.portfolio-item.wide {
  grid-row: span 2;
  grid-column: span 3;
  background-position: 2% 5%;
  background-repeat: no-repeat;
}

.portfolio-item a {
  text-decoration: none;
  color: var(--gray);
  white-space: nowrap;
  position: relative;
}

.portfolio-item:hover a {
  color: white;
  /* color: var(--gray) .5; */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.portfolio-item:hover .font-covid {
  color: var(--orange);
  /* color: var(--gray) .5; */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.portfolio-item:hover::before {
  opacity: 0.2;
  box-shadow: 0 25px 60px 0 rgba(0, 0, 0, 0.25);
}

.portfolio-item::before {
  content: "";
  display: block;
  background: var(--black);
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all ease-out 350ms;
  z-index: -1;
}

.one {
  /* background-image: url(./assets/images/Webmin_Logo.png);
    background-size: 20% !important; */
}

.two {
  /* background-image: url(./assets/images/google_PNG19644.png); */
}

.three {
  /* background-image: url(./assets/images/icon-solution-smarthome-3.png); */
}

.four {
  /* background-image: url(./assets/images/phpmyadmin.png); */
  /* font-size: 1rem; */
}

.five {
  /* background-image: url(./assets/images/generic_acme_logo_transparent.png); */
}

.six {
  /* background-image: url(./assets/images/UBNT_Alternate_Logo_RGB.png); */
}

.seven {
  /* background-image: url(./assets/images/gears.png);
    background-size: 10% !important; */
}

.eight {
  font-size: 1.2em;
}

#overlay {
  position: fixed;
  /* Sit on top of the page content */
  display: none;
  /* Hidden by default */
  width: 100%;
  /* Full width (cover the whole page) */
  height: 100%;
  /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  /* Black background with opacity */
  z-index: 55;
  /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer;
  /* Add a pointer on hover */
}

#overlay_text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 0.9em;
  color: red;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

/* ----------------
    Carousel
---------------- */

.bx-wrapper img {
  margin: 0 auto;
}

.bx-wrapper {
  border: 0px solid var(--light-gray);
}

.bx-prev,
.bx-next {
  opacity: 0.3;
}

.bx-prev:hover {
  opacity: 0.8;
  transition: all ease-out 250ms;
}

#droughtModal .modal-lg,
#dhcpInfoModal .modal-lg {
  max-width: 45vw;
}

.modal-header {
  border-bottom: 2px solid var(--accent);
}

.modeal-header h2 {
  color: var(--font-color-darker);
}

.close {
  text-shadow: none;
  color: var(--font-color-darker);
}

.modal-footer {
  border-top: 2px solid var(--accent);
}

.modal-content {
  background-color: #f8f6f6;
  border: 1px solid var(--accent);
}

.modal-body {
  padding-bottom: 0;
}

#hpLaserJet200Modal .modal-body,
#droughtModal .modal-body {
  padding-top: 0;
}

#dhcpTable.wrapper {
  display: inline-block;
  width: 100%;
}

/* -------------------------- */
.divTable {
  display: table;
  width: 100%;
  height: 100%;
}

.divTableCell {
  display: table-cell;
  vertical-align: middle;
}

.divTableCell.right {
  align-content: right;
}

.offlinePrinter {
  color: var(--almost-black);
}

.offlinePrinterBOLD {
  font-weight: bold;
  color: var(--accent);
}