@font-face {
	font-family: "myfont";
	src: url('../../assets/fonts/myfont.eot');
	src: url('../../assets/fonts/myfont.eot?#iefix') format('eot'),
		url('../../assets/fonts/myfont.woff') format('woff'),
		url('../../assets/fonts/myfont.ttf') format('truetype'),
		url('../../assets/fonts/myfont.svg#myfont') format('svg');
	font-weight: normal;
	font-style: normal;
}
.myfont {
	display: inline-block;
	font-family: "myfont";
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.myfont-lg {
	font-size: 1.3333333333333333em;
	line-height: 0.75em;
	vertical-align: -15%;
}
.myfont-2x { font-size: 2em; }
.myfont-3x { font-size: 3em; }
.myfont-4x { font-size: 4em; }
.myfont-5x { font-size: 5em; }
.myfont-fw {
	width: 1.2857142857142858em;
	text-align: center;
}
.myfont-human:before { content: "\EA01" }
.myfont-arrow-right:before { content: "\EA02" }

@layer {
  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
  }

  .icon.icon-arrow-right {
    mask-image: url('/assets/icons/arrow-right.svg');
    -webkit-mask-image: url('/assets/icons/arrow-right.svg');
  }

  .icon.icon-human {
    mask-image: url('/assets/icons/human.svg');
    -webkit-mask-image: url('/assets/icons/human.svg');
  }
}