/* This is use to dynamically handle template styles */

:root {
  --primary: #000000de;
  --secondary: #5b5b5b;
  --hover_primary: #534e4e;
  --hover_secondary: #838383;
}

/* ::selection {
  background-color: var(--primary);
} */

body,
.ui.header,
.ui.menu .active.item,
.ui.menu .item {
  color: var(--primary);
}
a.hover-color:hover {
  color: var(--hover_primary);
}

.ui.menu .active.item:hover,
.ui.vertical.menu .active.item:hover {
  color: var(--hover_primary);
}
.ui.link.menu .item:hover,
.ui.menu .dropdown.item:hover,
.ui.menu .link.item:hover,
.ui.menu a.item:hover {
  color: var(--hover_primary);
}

.ui.primary.button,
.ui.primary.buttons .button {
  background-color: var(--primary);
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover,
.ui.primary.button:focus,
.ui.primary.buttons .button:focus {
  background-color: var(--hover_primary);
}

.ui.grey.button,
.ui.grey.buttons .button,
.newsletter {
  background-color: var(--secondary);
}
.ui.grey.button:hover,
.ui.grey.buttons .button:hover,
.ui.grey.button:focus,
.ui.grey.buttons .button:focus {
  background-color: var(--hover_secondary);
}
/* .ui.button{
    background: var(--hover_secondary);
} */

.ui.list .list > a.item,
.ui.list > a.item {
  color: var(--secondary);
}
.ui.list .list > a.item:hover,
.ui.list > a.item:hover {
  color: var(--hover_secondary);
}
a {
  color: var(--secondary);
}
a:hover {
  color: var(--hover_secondary);
}
.ui.breadcrumb a {
  color: var(--secondary);
}
.ui.breadcrumb a:hover {
  color: var(--hover_secondary);
}