/**
 * Add an arrow element
 *
 * Accepts:
 * - $direction: {String} Positioning method for element
 * - $size: {String}
 * - $stroke: {String}
 *
 * Usage:
 * .selector {
 *   @include visually-shown(relative);
 * }
 */
@media only screen and (max-width: 991px) {
  .section-canvas {
    display: none;
  }
}

.canvas {
  user-select: none;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 2vw 0;
}
.canvas-image {
  position: relative;
  margin-bottom: 50px;
}
@media only screen and (min-width: 992px) {
  .canvas-image {
    margin-bottom: calc(50px + 14 * (100vw - 992px) / 308);
  }
}
@media only screen and (min-width: 1300px) {
  .canvas-image {
    margin-bottom: 64px;
  }
}
.canvas-image img {
  max-height: 35vw;
}
.canvas-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.canvas-content-resting {
  transition: all 0.4s ease;
  padding: 0 24% 0 20%;
  width: 100%;
}
.canvas-content-resting h2 {
  font-size: 20px;
}
@media only screen and (min-width: 992px) {
  .canvas-content-resting h2 {
    font-size: calc(20px + 30 * (100vw - 992px) / 928);
  }
}
@media only screen and (min-width: 1920px) {
  .canvas-content-resting h2 {
    font-size: 50px;
  }
}
.canvas-content-active {
  transition: opacity 0.5s linear;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.canvas-content-active.active {
  opacity: 1;
  z-index: 10;
}
.canvas-content-active, .canvas-content-active-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.canvas-content-active-circle {
  position: relative;
  width: 60%;
  max-width: 18vw;
  border-radius: 50%;
  margin-left: -5%;
}
.canvas-content-active-circle .fill {
  position: relative;
  padding-top: 100%;
}
.canvas-content-active-circle .fill .wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.canvas-content-active-circle .fill .title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.canvas-content-active-circle .fill .legend-3 {
  line-height: 0.82em;
  font-size: 70px;
  margin-top: -0.15em;
}
@media only screen and (min-width: 1600px) {
  .canvas-content-active-circle .fill .legend-3 {
    line-height: calc(0.82em + -0.04 * (100vw - 1600px) / 320);
  }
}
@media only screen and (min-width: 1920px) {
  .canvas-content-active-circle .fill .legend-3 {
    line-height: 0.78em;
  }
}
@media only screen and (max-width: 1599px) {
  .canvas-content-active-circle .fill .legend-3 {
    line-height: 0.85em;
  }
}
@media only screen and (max-width: 1599px) and (min-width: 1366px) {
  .canvas-content-active-circle .fill .legend-3 {
    line-height: calc(0.85em + -0.03 * (100vw - 1366px) / 234);
  }
}
@media only screen and (max-width: 1599px) and (min-width: 1600px) {
  .canvas-content-active-circle .fill .legend-3 {
    line-height: 0.82em;
  }
}
@media only screen and (max-width: 1365px) {
  .canvas-content-active-circle .fill .legend-3 {
    line-height: 0.9em;
  }
}
@media only screen and (max-width: 1365px) and (min-width: 1140px) {
  .canvas-content-active-circle .fill .legend-3 {
    line-height: calc(0.9em + -0.05 * (100vw - 1140px) / 226);
  }
}
@media only screen and (max-width: 1365px) and (min-width: 1366px) {
  .canvas-content-active-circle .fill .legend-3 {
    line-height: 0.85em;
  }
}
@media only screen and (max-width: 1169px) {
  .canvas-content-active-circle .fill .legend-3 {
    line-height: 0.96em;
  }
}
@media only screen and (max-width: 1169px) and (min-width: 992px) {
  .canvas-content-active-circle .fill .legend-3 {
    line-height: calc(0.96em + -0.06 * (100vw - 992px) / 148);
  }
}
@media only screen and (max-width: 1169px) and (min-width: 1140px) {
  .canvas-content-active-circle .fill .legend-3 {
    line-height: 0.9em;
  }
}
@media only screen and (min-width: 992px) {
  .canvas-content-active-circle .fill .legend-3 {
    font-size: calc(70px + 75 * (100vw - 992px) / 928);
  }
}
@media only screen and (min-width: 1920px) {
  .canvas-content-active-circle .fill .legend-3 {
    font-size: 145px;
  }
}
.canvas-content-active-circle h4 {
  font-size: 18px;
}
@media only screen and (min-width: 992px) {
  .canvas-content-active-circle h4 {
    font-size: calc(18px + 7 * (100vw - 992px) / 928);
  }
}
@media only screen and (min-width: 1920px) {
  .canvas-content-active-circle h4 {
    font-size: 25px;
  }
}
.canvas-content-active-circle p {
  margin: 0;
  font-size: 11px;
}
@media only screen and (min-width: 992px) {
  .canvas-content-active-circle p {
    font-size: calc(11px + 10 * (100vw - 992px) / 928);
  }
}
@media only screen and (min-width: 1920px) {
  .canvas-content-active-circle p {
    font-size: 21px;
  }
}
.canvas-content-active img {
  position: absolute;
  top: 0;
  max-width: 100%;
}
.canvas-navigation {
  position: absolute;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
}
.canvas-navigation .button-slideshow:first-child {
  margin-right: 21px;
}
.canvas-render {
  position: absolute;
  width: 100%;
  height: 1000%;
  left: 0;
  top: -450%;
}
.canvas-render .label {
  cursor: pointer;
  position: absolute;
  z-index: 100;
  left: 300px;
  top: 300px;
  width: 40px;
  height: 40px;
  transform: translate(-20px, -20px);
  animation: fade-in 0.4s ease;
}
.canvas-render .label--hidden {
  display: none;
}
.canvas-render .label-fill {
  transition: all 0.4s ease;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  margin-left: 25%;
  margin-top: 25%;
}
.canvas-render .label-content {
  transition: all 0.4s ease;
  text-align: center;
  position: absolute;
  text-transform: uppercase;
  white-space: nowrap;
  left: 20px;
  top: -69px;
  padding: 27px 38px;
  border-radius: 40px;
  transform: translateX(-50%) translateY(0%) scale(1, 0);
  opacity: 0;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 18px;
}
@media only screen and (min-width: 992px) {
  .canvas-render .label-content {
    font-size: calc(18px + 7 * (100vw - 992px) / 308);
  }
}
@media only screen and (min-width: 1300px) {
  .canvas-render .label-content {
    font-size: 25px;
  }
}
.canvas-render .label.active {
  z-index: 101;
}
.canvas-render .label:hover {
  z-index: 102;
}
.canvas-render .label:hover .label-fill, .canvas-render .label.active .label-fill {
  margin: 0;
  width: 100%;
  height: 100%;
}
.canvas-render .label:hover .label-content, .canvas-render .label.active .label-content {
  transform: translateX(-50%) translateY(-100%) scale(1, 1);
  opacity: 1;
}
.canvas-render .label-triangle {
  position: absolute;
  left: calc(50% - 18px);
  bottom: -60px;
  width: 0;
  height: 0;
  border-width: 60px 18px 0;
  border-style: solid;
}
.canvas.started .canvas-content-resting {
  opacity: 0;
}
.canvas canvas {
  width: 100%;
  height: 100%;
}
/*# sourceMappingURL=canvas-section.css.map*/