:root {
  --base: rgb(58, 58, 58); 
  --shadeOne: color-mix(in srgb,var(--base),#fff 10%);
  --shadeTwo: color-mix(in srgb,var(--base),#fff 17%);
  --shadeThree:color-mix(in srgb,var(--base),#fff 27%);
  --shadeFour: color-mix(in srgb,var(--base),#fff 37%);
  --shadeFive:color-mix(in srgb,var(--base),#fff 67%);
  --shadeSix:color-mix(in srgb,var(--base),#fff 76%);
  --bodyBg: #fff;
  
  /*block tints*/
  --tintOne: color-mix(in srgb,var(--base),#fff 16%);
  --tintTwo: color-mix(in srgb,var(--base),#fff 32%);
  --tintThree:color-mix(in srgb,var(--base),#fff 48%);
  --tintFour: color-mix(in srgb,var(--base),#fff 64%);
  --tintFive:color-mix(in srgb,var(--base),#fff 80%);
  --tintSix:color-mix(in srgb,var(--base),#fff 96%);
}
.ui-image, .ui-image img{
  box-shadow: unset !important;
}
/*styles*/
.slide-types{
  width: 1350px;
  user-select: none;
  cursor: grab;
  position: relative;
}
.slide-types button{
  background-color: unset;
  padding: 20px;
  font-family: Tomorrow-Regular;
  color: #fff;
  border: 1px solid #c1c1c1;
  margin-right: 20px;
}
.slide-types button:hover{
  background-color: #a9a9a9;
  cursor: pointer;
}
.slide-types{
  padding-left: 60px;
  margin-top: 40px;
  margin-bottom: 40px;
}
.slide{
  padding-top: 0 !important;
}
.project-active{
  background-color: #b9b9b9 !important;
  border: 1px solid #fff !important;
  font-family: Tomorrow-Medium !important;
}
.hscroll {
    width: -webkit-fill-available;
    overflow: hidden;
    scroll-behavior: smooth;
}