.underlined, .circled {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.underlined::before,
.underlined > svg,
.circled::before,
.circled > svg {
  content: '';
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.underlined::before,
.circled::before {
  background-color: var(--gold);
  -webkit-mask: url() no-repeat center/100% 100%;
          mask: url() no-repeat center/100% 100%;
}

.underlined.fx::before,
.underlined.fx > svg,
.circled.fx::before,
.circled.fx > svg {
  content: none;
  padding-top: 0 !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

.js .underlined::before,
.js .circled::before {
  content: none;
}

.fx.done > svg path {
  stroke: var(--gold);
  stroke-dashoffset: 0 !important;
}

a.no-observe.fx:hover > svg path,
a.no-observe:hover .fx > svg path {
  stroke: var(--gold);
  stroke-dashoffset: 0 !important;
}

.fx > svg path {
  stroke-width: 2px;
  stroke: transparent;
  transition: stroke-dashoffset 0.5s;
}

h3 .fx > svg path,
.h3 .fx > svg path,
h2 .fx > svg path,
.h2 .fx > svg path {
  stroke-width: 5px;
}

h1 .fx > svg path,
.h1 .fx > svg path {
  stroke-width: 7px;
}

.main-menu .fx > svg path {
  stroke-width: .11em;
}

@media screen and (max-width: 1023px) {
  h3 .fx > svg path,
  .h3 .fx > svg path,
  h2 .fx > svg path,
  .h2 .fx > svg path {
    stroke-width: 4px;
  }
  
  h1 .fx > svg path,
  .h1 .fx > svg path {
    stroke-width: 6px;
  }
}

@media screen and (max-width: 767px) {
  h3 .fx > svg path,
  .h3 .fx > svg path,
  h2 .fx > svg path,
  .h2 .fx > svg path {
    stroke-width: 3px;
  }
  
  h1 .fx > svg path,
  .h1 .fx > svg path {
    stroke-width: 5px;
  }
}

.circled::before, .circled > svg,
.circled.circled-1::before, .circled.circled-1 > svg {
  top: -25%;
  left: -15%;
  width: 130%;
  height: 130%;
}

.main-menu .circled::before, .circled > svg,
.main-menu .circled.circled-1::before, .circled.circled-1 > svg {
  top: -35%;
  left: -15%;
  width: 130%;
  height: 150%;
}

.circled::before, .circled.circled-1::before {
  -webkit-mask-image: url(../img/scribbles/circled-1.svg);
          mask-image: url(../img/scribbles/circled-1.svg);
}

.circled.circled-2::before {
  -webkit-mask-image: url(../img/scribbles/circled-2.svg);
          mask-image: url(../img/scribbles/circled-2.svg);
}

.circled.circled-3::before {
  -webkit-mask-image: url(../img/scribbles/circled-3.svg);
          mask-image: url(../img/scribbles/circled-3.svg);
}

.circled.circled-4::before {
  -webkit-mask-image: url(../img/scribbles/circled-4.svg);
          mask-image: url(../img/scribbles/circled-4.svg);
}

.underlined::before,
.underlined > svg {
  top: 50%;
  left: -2.5%;
  width: 105%;
  transform: translateY(calc(-50% + 0.6em));
}

.underlined::before, .underlined.underlined-1::before,
.underlined > svg, .underlined.underlined-1 > svg {
  padding-top: 7%;
  -webkit-mask-image: url(../img/scribbles/underlined-1.svg);
          mask-image: url(../img/scribbles/underlined-1.svg);
}

.underlined.underlined-2::before,
.underlined.underlined-2 > svg {
  padding-top: 10.2%;
  -webkit-mask-image: url(../img/scribbles/underlined-2.svg);
          mask-image: url(../img/scribbles/underlined-2.svg);
}

.underlined.underlined-3::before,
.underlined.underlined-3 > svg {
  transform: translateY(calc(-50% + 0.75em));
  left: -5%;
  width: 110%;
  padding-top: 15%;
  -webkit-mask-image: url(../img/scribbles/underlined-3.svg);
          mask-image: url(../img/scribbles/underlined-3.svg);
}


.underlined.underlined-4::before,
.underlined.underlined-4 > svg {
  padding-top: 6.3%;
  -webkit-mask-image: url(../img/scribbles/underlined-4.svg);
          mask-image: url(../img/scribbles/underlined-4.svg);
}