:root {
  --telemagenta: #d62b72;
  --flirt: #8e0b5c;
  --thistle: #dbc0e8;
  --wisteria: #af98d5;
  --fluorescent-blue: #04f1ed;
  --sky-blue-crayola: #2ed2ef;
  --mint-green: #9affb8;
  --green-pantone: #0caa3b;
  --indigo-dye: #024c6d;
  --blue-munsell: #028cb0;
  --telemagenta: #d62971;
  --flirt: #8e0b5c;
  --thistle: #dbbfe8;
  --wisteria: #b19ad6;
  --darkerwisteria: #806f9be6;
  --fluorescent-blue: #04f1ed;
  --sky-blue-crayola: #2ed2ef;
  --mint-green: #99ffb8;
  --green-pantone: #0cac3c;
  --indigo-dye: #024c6e;
  --blue-munsell: #028eb1;
  --dark-color: hsla(var(--hue), 100%, 9%);
  --light-color: hsla(var(--hue), 95%, 98%);
  --base: hsla(var(--hue), 95%, 50%);
  --complimentary1: hsla(var(--hue-complimentary1), 95%, 50%);
  --complimentary2: hsla(var(--hue-complimentary2), 95%, 50%);
  --bg-gradient: linear-gradient(to bottom, hsl(var(--hue), 95%, 99%), hsl(var(--hue), 95%, 84%));
  --opaque1: hsla(var(--hue-opaque1), 95%, 50%);
  --opaque2: hsla(var(--hue-opaque2), 95%, 50%);
  --base-hue: 265;
  --base-sat: 40%;
  --semi-transparent: hsla(var(--base-hue), var(--base-sat), 99%, 65%);
}

body {
  -webkit-font-smoothing: antialiased;
  padding: unset;
  margin: unset;
  background-position: 50%;
  background-attachment: fixed;
  font-family: articulat-cf, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}

.portfoliogrid__wrapper {
  margin-top: 1vh;
  display: grid;
  position: relative;
}

.main__grid--hexagon {
  grid-gap: 20px;
  width: 70vw;
  margin: 0 auto;
  padding: 50px 0;
  display: grid;
  position: relative;
}

.main__grid--hexagon-Item {
  grid-column-end: span 2;
  position: relative;
}

.main__grid--hexagon-Item-Content {
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  border-radius: 100%;
  width: 100%;
  padding-bottom: 115.602%;
  transition: all .4s ease-in;
  position: absolute;
  transform: scale(1);
}

.main__grid--hexagon-Item-Content:hover {
  z-index: 2;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transition: all .4s ease-in;
  transform: scale(1.1);
  box-shadow: 0 0 150px #000;
}

.main__grid--hexagon-Item-Content {
  border-radius: 0;
}

.main__grid--hexagon-Item:after {
  content: "";
  padding-bottom: 86.602%;
  display: block;
}

.main__grid--hexagon-Item-Content-Inner {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.overlay__title {
  letter-spacing: -.025em;
  margin-bottom: 2rem;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.75rem;
}

.overlay__btn {
  color: hsla(var(--hue-complimentary1), 95%, 50%);
  opacity: .8;
  border: none;
  transition: transform .15s;
}

.overlay__btn--transparent {
  border: 2px solid hsla(var(--hue), 100%, 9%);
  border: 2px solid var(--dark-color);
  color: linear-gradient(to right, var(--complimentary1), var(--complimentary2));
  background: none;
  border-width: 2px;
  margin-right: .75rem;
}

.overlay__btn-emoji {
  margin-left: .375rem;
}

.panel__title:before:hover {
  color: #000;
  opacity: .8;
  background-repeat: repeat-x;
  width: 100%;
  transform: translateY(150px);
}

.main__grid--hexagon-Item-Content-Inner:hover {
  z-index: 3;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -webkit-backdrop-filter: blur;
  backdrop-filter: blur;
  filter: blur(10px);
  border: 1px solid #fff;
  transition: all .4s ease-in;
  transform: scale(1.05);
}

.cc__promoleadwrapper--outer {
  place-content: center;
  place-self: center;
  place-items: center;
  margin-top: 52px;
  display: grid;
  position: relative;
}

.promo__leadwrapper {
  max-height: 33vh;
  margin: 0 auto;
  display: grid;
}

.cc__promoleadwrapper--inner--text {
  margin: 0 auto;
  padding: 4vh;
}

.cc__serviceswrapper--outer {
  background: radial-gradient(#000000b3 0%, #000000e6 100%), url("https://colorincode.me/assets/hexagon-background-dark-assym-filtered.jpg") top / cover;
  place-content: center;
  place-self: center;
  place-items: center;
  width: 100vw;
  display: grid;
  position: relative;
}

.cc__serviceswrapper--inner {
  margin: 0 auto;
}

.cc__serviceswrapper--inner--text {
  margin: 0 auto;
  padding: 4vh;
}

.cc__serviceswrapper--inner--text--title, .cc__serviceswrapper--inner--text--paragraph {
  color: #fff;
  text-align: center;
  margin: 0 auto;
}

.cc__serviceswrapper--inner--text--paragraph {
  padding: 2vh 0;
  font-size: 1.5rem;
}

.cc__serviceswrapper--inner--text--title {
  padding: 2vh 0;
  font-size: 2.5rem;
}

.cc__abouthome--outer {
  background-attachment: fixed;
  place-content: center;
  place-self: center;
  place-items: center;
  width: 100vw;
  display: grid;
  position: relative;
}

.cc__abouthome--inner, .cc__abouthome--inner--text {
  margin: 0 auto;
}

.cc__abouthome--inner--text--title, .cc__abouthome--inner--text--paragraph {
  color: #333;
  text-align: center;
  margin: 0 auto;
}

.cc__abouthome--inner--text--paragraph {
  padding: 4vh 0;
  font-size: 1.5rem;
}

.cc__abouthome--inner--text--title {
  padding: 4vh 0;
  font-size: 2.5rem;
}

.cc__portfoliohome--outer {
  background-color: #028eb1;
  background-color: var(--blue-munsell);
  place-content: center;
  place-self: center;
  place-items: center;
  width: 100vw;
  display: grid;
  position: relative;
}

.cc__portfoliohome--inner {
  margin: 0 auto;
}

.cc__portfoliohome--inner--text {
  margin: 0 auto;
  padding: 4vh;
}

.cc__portfoliohome--inner--text--title, .cc__portfoliohome--inner--text--paragraph {
  color: #333;
  text-align: center;
  margin: 0 auto;
}

.cc__portfoliohome--inner--text--paragraph {
  padding: 2vh 0;
  font-size: 1.5rem;
}

.cc__portfoliohome--inner--text--title {
  padding: 2vh 0;
  font-size: 2.5rem;
}

.cc__pricinghome--outer {
  background: radial-gradient(#ffffffe6 0%, #fffffff2 100%), url("https://colorincode.me/assets/hexagon-background-dark-assym-filtered.jpg") top / cover;
  place-content: center;
  place-self: center;
  place-items: center;
  width: 100vw;
  display: grid;
  position: relative;
}

.cc__pricinghome--inner {
  margin: 0 auto;
}

.cc__pricinghome--inner--text {
  margin: 0 auto;
  padding: 4vh;
}

.cc__pricinghome--inner--text--title, .cc__pricinghome--inner--text--paragraph {
  color: #333;
  text-align: center;
  margin: 0 auto;
}

.cc__pricinghome--inner--text--paragraph {
  padding: 2vh 0;
  font-size: 1.5rem;
}

.cc__pricinghome--inner--text--title {
  padding: 2vh 0;
  font-size: 2.5rem;
}

.cc__getintouchhome--outer {
  background: #806f9be6;
  background: var(--darkerwisteria);
  place-content: center;
  place-self: center;
  place-items: center;
  width: 100vw;
  display: grid;
  position: relative;
}

.cc__getintouchhome--inner {
  margin: 0 auto;
}

.cc__getintouchhome--inner--text {
  margin: 0 auto;
  padding: 4vh;
}

.cc__getintouchhome--inner--text--title, .cc__getintouchhome--inner--text--paragraph {
  color: #333;
  text-align: center;
  margin: 0 auto;
}

.cc__getintouchhome--inner--text--paragraph {
  padding: 2vh 0;
  font-size: 1.5rem;
}

.cc__getintouchhome--inner--text--title {
  padding: 2vh 0;
  font-size: 2.5rem;
}

.promo__textwrapper:hover:after {
  filter: blur(10px);
}

.cc__promoleadwrapper--inner--text--title {
  z-index: 9;
  color: #dbc0e8;
  text-align: center;
  padding: 3%;
  font-size: 2.5rem;
  position: relative;
}

.gradient-overlay:before {
  content: "";
  object-fit: contain;
  z-index: 1;
  background-blend-mode: multiply;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3ClinearGradient gradientTransform='rotate(150  0.5  0.5)' x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='ffflux-gradient'%3E%3Cstop stop-color='hsl(195  100%25  72%25)' stop-opacity='1' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='hsl(263  100%25  50%25)' stop-opacity='1' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3Cfilter id='ffflux-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.003' numOctaves='2' seed='2' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeGaussianBlur stdDeviation='20 0' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' edgeMode='duplicate' result='blur'%3E%3C/feGaussianBlur%3E%3CfeBlend mode='overlay' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' in2='blur' result='blend'%3E%3C/feBlend%3E%3C/filter%3E%3C/defs%3E%3Crect width='2400' height='1400' fill='url(%23ffflux-gradient)' filter='url(%23ffflux-filter)'%3E%3C/rect%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-origin: padding-box, padding-box;
  background-clip: border-box, border-box;
  max-height: 14vh;
  transition: all 50ms linear;
  display: block;
  position: fixed;
  inset: -64px;
}

.portfolio-bgoverlay {
  -webkit-backdrop-filter: blur(14px) saturate();
  backdrop-filter: blur(14px) saturate();
  background-color: #fcfbfda6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.67'%3E%3Cdefs%3E%3ClinearGradient gradientTransform='rotate(150  0.5  0.5)' x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='ffflux-gradient'%3E%3Cstop stop-color='hsl(281  47%25  83%25)' stop-opacity='1' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='hsl(0  0%25  100%25)' stop-opacity='1' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3Cfilter id='ffflux-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.003' numOctaves='1' seed='2' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeGaussianBlur stdDeviation='13 13' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' edgeMode='duplicate' result='blur'%3E%3C/feGaussianBlur%3E%3CfeBlend mode='overlay' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' in2='blur' result='blend'%3E%3C/feBlend%3E%3C/filter%3E%3C/defs%3E%3Crect width='2400' height='700' fill='url(%23ffflux-gradient)' filter='url(%23ffflux-filter)'%3E%3C/rect%3E%3C/svg%3E");
  background-color: var(--semi-transparent);
  background-repeat: no-repeat;
  background-size: cover;
}

.slide-in-top {
  animation: .7s cubic-bezier(.455, .03, .515, .955) both slide-in-top;
}

.transitionsheet__block {
  text-align: center;
  background: #fff;
  flex-direction: column;
  place-content: center;
  align-self: center;
  width: 100%;
  margin: 0 auto;
  display: flex;
}

.transitionsheet__block a {
  text-decoration: none;
}

@keyframes slide-in-top {
  0% {
    opacity: 0;
    transform: translateY(-1000px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}