/*
Project Name: Ericsson App
Project URI: http://www.thinkharleys.com/
Author: Harleys
Author URI: http://www.thinkharleys.com/
Description: Ericsson App
Version: 1.0.0
*/
/*
===============================================================================
CONTENTS
===============================================================================
*/
/*
 * TOOLS................any mixins or functions required.
 * PACE ................preloader styling.
 * CSS RESET............global css reset.
 * FONTS................local fonts for project.
 * ERICSSON.............global ericsson elements and stylesheet.
 * CONFIG...............common customisations needed for each individual project.
 * GRID.................grid system
 * STYLES...............individual styles for the app
 */
/*
===============================================================================
TOOLS
===============================================================================
*/
/*
===============================================================================
PACE
===============================================================================
*/
/*
===============================================================================
CSS RESET
===============================================================================
*/
/* Normalise
------------------------------------------------------------------------------------ */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
code,
del,
dfn,
em,
img,
q,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline; }

body {
  line-height: 1; }

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1; }

table {
  border-collapse: separate;
  border-spacing: 0; }

caption,
th,
td {
  text-align: left;
  font-weight: normal; }

table,
td,
th {
  vertical-align: middle; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: ""; }

blockquote,
q {
  quotes: "" ""; }

a img {
  border: none; }

img {
  max-width: 100%;
  height: auto; }

html {
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*
===============================================================================
FONTS
===============================================================================
*/
@font-face {
  font-family: aktivgroteskBold;
  src: url(../fonts/aktivgrotesk-bold-webfont.woff) format("woff"); }
@font-face {
  font-family: aktivgroteskMedium;
  src: url(../fonts/aktivgrotesk-medium-webfont.woff) format("woff"); }
@font-face {
  font-family: aktivgroteskThin;
  src: url(../fonts/aktivgrotesk-thin-webfont.woff) format("woff"); }
/*
===============================================================================
CONFIG
===============================================================================
*/
body {
  font-size: 16px;
  font-size: 1.6rem;
  color: #000000;
  font-family: aktivgroteskMedium, times, sans-serif; }

h1,
h2,
h3,
h4 {
  margin: 1.46484vw 0 1.46484vw 0;
  font-family: aktivgroteskMedium, times, sans-serif; }

h1 {
  font-size: 6.83594vw;
  line-height: 0.9;
  margin: 0;
  margin-bottom: 1.709vw; }

h2 {
  font-size: 5vw;
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0;
  margin-bottom: 1.709vw; }

h3 {
  font-size: 2.34375vw;
  text-transform: uppercase; }

h4 {
  font-size: 1.171871vw;
  text-transform: uppercase; }

p {
  font-size: 1.70394vw;
  margin-bottom: 1.4648vw;
  max-width: 59vw;
  color: #3a3531;
  font-size: 1.3vw;
  margin-bottom: 0.5em; }
  p:last-child {
    margin-bottom: 0; }

ul {
  font-size: 1.70394vw;
  margin-left: 36px;
  margin-bottom: 1.5rem; }

ol {
  font-size: 1.70394vw;
  margin-left: 36px;
  margin-bottom: 1.5rem; }

a {
  color: #4997c0;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

em {
  font-family: HelveticaNeueItalic, arial, sans-serif; }

/*
===============================================================================
UTILITIES
===============================================================================
*/
.centerText {
  text-align: center; }

.red {
  color: #cc0000; }

/*
===============================================================================
GRID
===============================================================================
*/
/*
===============================================================================
The grid is designed to be mobile first.
Code for small screens first, and larger screens will inherit those styles.
Customise for larger screens as necessary
===============================================================================
*/
.grid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px; }
  .grid__row {
    margin-left: -15px;
    margin-right: -15px; }
    .grid__row:before, .grid__row:after {
      content: "";
      display: table; }
    .grid__row:after {
      clear: both; }
    .grid__row--spacing {
      margin-bottom: 1.5rem; }
  .grid__column {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left; }
    .grid__column--span12 {
      width: 100%; }
    .grid__column--span11 {
      width: 91.66666667%; }
    .grid__column--span10 {
      width: 83.33333333%; }
    .grid__column--span9 {
      width: 75%; }
    .grid__column--span8 {
      width: 66.66666667%; }
    .grid__column--span7 {
      width: 58.33333333%; }
    .grid__column--span6 {
      width: 50%; }
    .grid__column--span5 {
      width: 41.66666667%; }
    .grid__column--span4 {
      width: 33.33333333%; }
    .grid__column--span3 {
      width: 25%; }
    .grid__column--span2 {
      width: 16.66666667%; }
    .grid__column--span1 {
      width: 8.33333333%; }
    .grid__column--pull12 {
      right: 100%; }
    .grid__column--pull11 {
      right: 91.66666667%; }
    .grid__column--pull10 {
      right: 83.33333333%; }
    .grid__column--pull9 {
      right: 75%; }
    .grid__column--pull8 {
      right: 66.66666667%; }
    .grid__column--pull7 {
      right: 58.33333333%; }
    .grid__column--pull6 {
      right: 50%; }
    .grid__column--pull5 {
      right: 41.66666667%; }
    .grid__column--pull4 {
      right: 33.33333333%; }
    .grid__column--pull3 {
      right: 25%; }
    .grid__column--pull2 {
      right: 16.66666667%; }
    .grid__column--pull1 {
      right: 8.33333333%; }
    .grid__column--pull0 {
      right: auto; }
    .grid__column--push12 {
      left: 100%; }
    .grid__column--push11 {
      left: 91.66666667%; }
    .grid__column--push10 {
      left: 83.33333333%; }
    .grid__column--push9 {
      left: 75%; }
    .grid__column--push8 {
      left: 66.66666667%; }
    .grid__column--push7 {
      left: 58.33333333%; }
    .grid__column--push6 {
      left: 50%; }
    .grid__column--push5 {
      left: 41.66666667%; }
    .grid__column--push4 {
      left: 33.33333333%; }
    .grid__column--push3 {
      left: 25%; }
    .grid__column--push2 {
      left: 16.66666667%; }
    .grid__column--push1 {
      left: 8.33333333%; }
    .grid__column--push0 {
      left: auto; }
    .grid__column--offset12 {
      margin-left: 100%; }
    .grid__column--offset11 {
      margin-left: 91.66666667%; }
    .grid__column--offset10 {
      margin-left: 83.33333333%; }
    .grid__column--offset9 {
      margin-left: 75%; }
    .grid__column--offset8 {
      margin-left: 66.66666667%; }
    .grid__column--offset7 {
      margin-left: 58.33333333%; }
    .grid__column--offset6 {
      margin-left: 50%; }
    .grid__column--offset5 {
      margin-left: 41.66666667%; }
    .grid__column--offset4 {
      margin-left: 33.33333333%; }
    .grid__column--offset3 {
      margin-left: 25%; }
    .grid__column--offset2 {
      margin-left: 16.66666667%; }
    .grid__column--offset1 {
      margin-left: 8.33333333%; }
    .grid__column--offset0 {
      margin-left: 0; }
  @media (min-width: 768px) {
    .grid__tabletColumn--span12 {
      width: 100%; }
    .grid__tabletColumn--span11 {
      width: 91.66666667%; }
    .grid__tabletColumn--span10 {
      width: 83.33333333%; }
    .grid__tabletColumn--span9 {
      width: 75%; }
    .grid__tabletColumn--span8 {
      width: 66.66666667%; }
    .grid__tabletColumn--span7 {
      width: 58.33333333%; }
    .grid__tabletColumn--span6 {
      width: 50%; }
    .grid__tabletColumn--span5 {
      width: 41.66666667%; }
    .grid__tabletColumn--span4 {
      width: 33.33333333%; }
    .grid__tabletColumn--span3 {
      width: 25%; }
    .grid__tabletColumn--span2 {
      width: 16.66666667%; }
    .grid__tabletColumn--span1 {
      width: 8.33333333%; }
    .grid__tabletColumn--pull12 {
      right: 100%; }
    .grid__tabletColumn--pull11 {
      right: 91.66666667%; }
    .grid__tabletColumn--pull10 {
      right: 83.33333333%; }
    .grid__tabletColumn--pull9 {
      right: 75%; }
    .grid__tabletColumn--pull8 {
      right: 66.66666667%; }
    .grid__tabletColumn--pull7 {
      right: 58.33333333%; }
    .grid__tabletColumn--pull6 {
      right: 50%; }
    .grid__tabletColumn--pull5 {
      right: 41.66666667%; }
    .grid__tabletColumn--pull4 {
      right: 33.33333333%; }
    .grid__tabletColumn--pull3 {
      right: 25%; }
    .grid__tabletColumn--pull2 {
      right: 16.66666667%; }
    .grid__tabletColumn--pull1 {
      right: 8.33333333%; }
    .grid__tabletColumn--pull0 {
      right: auto; }
    .grid__tabletColumn--push12 {
      left: 100%; }
    .grid__tabletColumn--push11 {
      left: 91.66666667%; }
    .grid__tabletColumn--push10 {
      left: 83.33333333%; }
    .grid__tabletColumn--push9 {
      left: 75%; }
    .grid__tabletColumn--push8 {
      left: 66.66666667%; }
    .grid__tabletColumn--push7 {
      left: 58.33333333%; }
    .grid__tabletColumn--push6 {
      left: 50%; }
    .grid__tabletColumn--push5 {
      left: 41.66666667%; }
    .grid__tabletColumn--push4 {
      left: 33.33333333%; }
    .grid__tabletColumn--push3 {
      left: 25%; }
    .grid__tabletColumn--push2 {
      left: 16.66666667%; }
    .grid__tabletColumn--push1 {
      left: 8.33333333%; }
    .grid__tabletColumn--push0 {
      left: auto; }
    .grid__tabletColumn--offset12 {
      margin-left: 100%; }
    .grid__tabletColumn--offset11 {
      margin-left: 91.66666667%; }
    .grid__tabletColumn--offset10 {
      margin-left: 83.33333333%; }
    .grid__tabletColumn--offset9 {
      margin-left: 75%; }
    .grid__tabletColumn--offset8 {
      margin-left: 66.66666667%; }
    .grid__tabletColumn--offset7 {
      margin-left: 58.33333333%; }
    .grid__tabletColumn--offset6 {
      margin-left: 50%; }
    .grid__tabletColumn--offset5 {
      margin-left: 41.66666667%; }
    .grid__tabletColumn--offset4 {
      margin-left: 33.33333333%; }
    .grid__tabletColumn--offset3 {
      margin-left: 25%; }
    .grid__tabletColumn--offset2 {
      margin-left: 16.66666667%; }
    .grid__tabletColumn--offset1 {
      margin-left: 8.33333333%; }
    .grid__tabletColumn--offset0 {
      margin-left: 0; } }
  @media (min-width: 992px) {
    .grid__desktopColumn--span12 {
      width: 100%; }
    .grid__desktopColumn--span11 {
      width: 91.66666667%; }
    .grid__desktopColumn--span10 {
      width: 83.33333333%; }
    .grid__desktopColumn--span9 {
      width: 75%; }
    .grid__desktopColumn--span8 {
      width: 66.66666667%; }
    .grid__desktopColumn--span7 {
      width: 58.33333333%; }
    .grid__desktopColumn--span6 {
      width: 50%; }
    .grid__desktopColumn--span5 {
      width: 41.66666667%; }
    .grid__desktopColumn--span4 {
      width: 33.33333333%; }
    .grid__desktopColumn--span3 {
      width: 25%; }
    .grid__desktopColumn--span2 {
      width: 16.66666667%; }
    .grid__desktopColumn--span1 {
      width: 8.33333333%; }
    .grid__desktopColumn--pull12 {
      right: 100%; }
    .grid__desktopColumn--pull11 {
      right: 91.66666667%; }
    .grid__desktopColumn--pull10 {
      right: 83.33333333%; }
    .grid__desktopColumn--pull9 {
      right: 75%; }
    .grid__desktopColumn--pull8 {
      right: 66.66666667%; }
    .grid__desktopColumn--pull7 {
      right: 58.33333333%; }
    .grid__desktopColumn--pull6 {
      right: 50%; }
    .grid__desktopColumn--pull5 {
      right: 41.66666667%; }
    .grid__desktopColumn--pull4 {
      right: 33.33333333%; }
    .grid__desktopColumn--pull3 {
      right: 25%; }
    .grid__desktopColumn--pull2 {
      right: 16.66666667%; }
    .grid__desktopColumn--pull1 {
      right: 8.33333333%; }
    .grid__desktopColumn--pull0 {
      right: auto; }
    .grid__desktopColumn--push12 {
      left: 100%; }
    .grid__desktopColumn--push11 {
      left: 91.66666667%; }
    .grid__desktopColumn--push10 {
      left: 83.33333333%; }
    .grid__desktopColumn--push9 {
      left: 75%; }
    .grid__desktopColumn--push8 {
      left: 66.66666667%; }
    .grid__desktopColumn--push7 {
      left: 58.33333333%; }
    .grid__desktopColumn--push6 {
      left: 50%; }
    .grid__desktopColumn--push5 {
      left: 41.66666667%; }
    .grid__desktopColumn--push4 {
      left: 33.33333333%; }
    .grid__desktopColumn--push3 {
      left: 25%; }
    .grid__desktopColumn--push2 {
      left: 16.66666667%; }
    .grid__desktopColumn--push1 {
      left: 8.33333333%; }
    .grid__desktopColumn--push0 {
      left: auto; }
    .grid__desktopColumn--offset12 {
      margin-left: 100%; }
    .grid__desktopColumn--offset11 {
      margin-left: 91.66666667%; }
    .grid__desktopColumn--offset10 {
      margin-left: 83.33333333%; }
    .grid__desktopColumn--offset9 {
      margin-left: 75%; }
    .grid__desktopColumn--offset8 {
      margin-left: 66.66666667%; }
    .grid__desktopColumn--offset7 {
      margin-left: 58.33333333%; }
    .grid__desktopColumn--offset6 {
      margin-left: 50%; }
    .grid__desktopColumn--offset5 {
      margin-left: 41.66666667%; }
    .grid__desktopColumn--offset4 {
      margin-left: 33.33333333%; }
    .grid__desktopColumn--offset3 {
      margin-left: 25%; }
    .grid__desktopColumn--offset2 {
      margin-left: 16.66666667%; }
    .grid__desktopColumn--offset1 {
      margin-left: 8.33333333%; }
    .grid__desktopColumn--offset0 {
      margin-left: 0; } }
  @media (min-width: 1200px) {
    .grid__widescreenColumn--span12 {
      width: 100%; }
    .grid__widescreenColumn--span11 {
      width: 91.66666667%; }
    .grid__widescreenColumn--span10 {
      width: 83.33333333%; }
    .grid__widescreenColumn--span9 {
      width: 75%; }
    .grid__widescreenColumn--span8 {
      width: 66.66666667%; }
    .grid__widescreenColumn--span7 {
      width: 58.33333333%; }
    .grid__widescreenColumn--span6 {
      width: 50%; }
    .grid__widescreenColumn--span5 {
      width: 41.66666667%; }
    .grid__widescreenColumn--span4 {
      width: 33.33333333%; }
    .grid__widescreenColumn--span3 {
      width: 25%; }
    .grid__widescreenColumn--span2 {
      width: 16.66666667%; }
    .grid__widescreenColumn--span1 {
      width: 8.33333333%; }
    .grid__widescreenColumn--pull12 {
      right: 100%; }
    .grid__widescreenColumn--pull11 {
      right: 91.66666667%; }
    .grid__widescreenColumn--pull10 {
      right: 83.33333333%; }
    .grid__widescreenColumn--pull9 {
      right: 75%; }
    .grid__widescreenColumn--pull8 {
      right: 66.66666667%; }
    .grid__widescreenColumn--pull7 {
      right: 58.33333333%; }
    .grid__widescreenColumn--pull6 {
      right: 50%; }
    .grid__widescreenColumn--pull5 {
      right: 41.66666667%; }
    .grid__widescreenColumn--pull4 {
      right: 33.33333333%; }
    .grid__widescreenColumn--pull3 {
      right: 25%; }
    .grid__widescreenColumn--pull2 {
      right: 16.66666667%; }
    .grid__widescreenColumn--pull1 {
      right: 8.33333333%; }
    .grid__widescreenColumn--pull0 {
      right: auto; }
    .grid__widescreenColumn--push12 {
      left: 100%; }
    .grid__widescreenColumn--push11 {
      left: 91.66666667%; }
    .grid__widescreenColumn--push10 {
      left: 83.33333333%; }
    .grid__widescreenColumn--push9 {
      left: 75%; }
    .grid__widescreenColumn--push8 {
      left: 66.66666667%; }
    .grid__widescreenColumn--push7 {
      left: 58.33333333%; }
    .grid__widescreenColumn--push6 {
      left: 50%; }
    .grid__widescreenColumn--push5 {
      left: 41.66666667%; }
    .grid__widescreenColumn--push4 {
      left: 33.33333333%; }
    .grid__widescreenColumn--push3 {
      left: 25%; }
    .grid__widescreenColumn--push2 {
      left: 16.66666667%; }
    .grid__widescreenColumn--push1 {
      left: 8.33333333%; }
    .grid__widescreenColumn--push0 {
      left: auto; }
    .grid__widescreenColumn--offset12 {
      margin-left: 100%; }
    .grid__widescreenColumn--offset11 {
      margin-left: 91.66666667%; }
    .grid__widescreenColumn--offset10 {
      margin-left: 83.33333333%; }
    .grid__widescreenColumn--offset9 {
      margin-left: 75%; }
    .grid__widescreenColumn--offset8 {
      margin-left: 66.66666667%; }
    .grid__widescreenColumn--offset7 {
      margin-left: 58.33333333%; }
    .grid__widescreenColumn--offset6 {
      margin-left: 50%; }
    .grid__widescreenColumn--offset5 {
      margin-left: 41.66666667%; }
    .grid__widescreenColumn--offset4 {
      margin-left: 33.33333333%; }
    .grid__widescreenColumn--offset3 {
      margin-left: 25%; }
    .grid__widescreenColumn--offset2 {
      margin-left: 16.66666667%; }
    .grid__widescreenColumn--offset1 {
      margin-left: 8.33333333%; }
    .grid__widescreenColumn--offset0 {
      margin-left: 0; } }

/*
===============================================================================
STYLES
===============================================================================
*/
* {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

body {
  background-color: #fff; }

.footer {
  bottom: 0;
  padding: 4.85vw 4.85vw 0 4.85vw;
  position: relative;
  color: #ffffff; }
  .footer h1 {
    font-size: 3.5vw;
    color: #fbbd2f;
    margin-bottom: 2.5vw; }
  .footer p {
    font-size: 2.5vw; }
  .footer__link {
    color: #ffffff;
    font-size: 2.66335vw; }
  .footer__list {
    margin: 0;
    font-family: HelveticaNeueMedium, arial, sans-serif;
    margin-bottom: 2.5vw;
    margin-left: 1.2em;
    float: left;
    font-size: 1.5vw; }
    .footer__list li {
      position: relative;
      margin-bottom: 0.4vw; }
  .footer__buttons {
    position: absolute;
    right: auto;
    left: 4.85vw;
    top: 110%; }
  .footer__button {
    border: 0;
    background-color: #fbbd2f;
    color: #3a3531;
    font-family: aktivgroteskMedium, times, sans-serif;
    text-transform: uppercase;
    font-size: 1vw;
    position: relative;
    z-index: 10;
    float: left;
    clear: both;
    margin-bottom: 0.3vw;
    display: block;
    height: 1.7vw;
    line-height: 1.7vw;
    padding: 0 1.5vw; }
    .footer__button:hover {
      cursor: pointer; }
    .footer__button:before {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      z-index: -1;
      left: auto;
      right: -0.7vw;
      border-left: 1.7vw solid transparent;
      border-right: 0.7vw solid transparent;
      border-top: 1.7vw solid #fbbd2f; }
    .footer__button--active {
      background-color: #dfdfd9; }
      .footer__button--active:before {
        border-top: 1.7vw solid #dfdfd9; }
  .footer__webAddress {
    clear: both;
    color: inherit;
    text-transform: lowercase; }

#renderCanvas {
  width: 100%;
  outline: none;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+24 */ }

#drawCanvas {
  width: 100%;
  outline: none;
  position: absolute;
  pointer-events: none; }

.canvasOverlay {
  position: absolute;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s;
  color: #3a3531; }
  .canvasOverlay--active {
    opacity: 1;
    transition: opacity 1s 1s; }
  .canvasOverlay__targetSeekerText {
    text-align: center;
    position: absolute;
    top: 8.5vw;
    font-family: HelveticaNeueMedium, arial, sans-serif;
    font-size: 1.28vw;
    text-transform: uppercase;
    left: 58vw; }
  .canvasOverlay__targetSeekerTextUnderline {
    position: absolute;
    width: 27.6vw;
    height: 1vw;
    border-top: 1px solid #fbbd2f;
    left: 58vw;
    top: 10.2vw; }
  .canvasOverlay__targetSeekerLine {
    position: absolute;
    width: 1vw;
    height: 10.95vw;
    border-left: 1px solid #fbbd2f;
    left: 71vw;
    top: 10.2vw; }
  .canvasOverlay__targetSeekerPoint {
    width: 0.75vw;
    height: 0.75vw;
    border-radius: 50%;
    background-color: #fbbd2f;
    position: absolute;
    top: 21vw;
    left: 70.66vw; }
  .canvasOverlay__wingspanText {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 10vw;
    font-family: aktivgroteskMedium, times, sans-serif;
    font-size: 1.28vw;
    text-transform: uppercase; }
  .canvasOverlay__wingspanMeasure {
    position: absolute;
    width: 15vw;
    height: 4vw;
    border: 1px solid #fbbd2f;
    left: 42.22%;
    border-bottom: 0;
    top: 12vw; }
  .canvasOverlay__warheadText {
    text-align: center;
    position: absolute;
    top: 13.5vw;
    font-family: HelveticaNeueMedium, arial, sans-serif;
    font-size: 1.28vw;
    text-transform: uppercase;
    left: 44vw; }
  .canvasOverlay__warheadTextUnderline {
    position: absolute;
    width: 13vw;
    height: 1vw;
    border-top: 1px solid #fbbd2f;
    left: 44vw;
    top: 15.2vw; }
  .canvasOverlay__warheadLine {
    position: absolute;
    width: 1vw;
    height: 7.3vw;
    border-left: 1px solid #fbbd2f;
    left: 50.7vw;
    top: 15.2vw; }
  .canvasOverlay__warheadPoint {
    width: 0.75vw;
    height: 0.75vw;
    border-radius: 50%;
    background-color: #fbbd2f;
    position: absolute;
    top: 22vw;
    left: 50.34vw; }
  .canvasOverlay__lengthText {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 10vw;
    font-family: aktivgroteskMedium, times, sans-serif;
    font-size: 1.28vw;
    text-transform: uppercase; }
  .canvasOverlay__lengthMeasure {
    position: absolute;
    width: 65vw;
    height: 4vw;
    border: 1px solid #fbbd2f;
    left: 17.4%;
    border-bottom: 0;
    top: 12vw; }
  .canvasOverlay__weightText {
    text-align: center;
    position: absolute;
    top: 14.5vw;
    font-family: HelveticaNeueMedium, arial, sans-serif;
    font-size: 1.28vw;
    text-transform: uppercase;
    left: 50vw; }
  .canvasOverlay__weightTextUnderline {
    position: absolute;
    width: 20.5vw;
    height: 1vw;
    border-top: 1px solid #fbbd2f;
    left: 50vw;
    top: 16.2vw; }
  .canvasOverlay__weightLine {
    position: absolute;
    width: 1vw;
    height: 10.4vw;
    border-left: 1px solid #fbbd2f;
    left: 60vw;
    top: 16.2vw; }
  .canvasOverlay__weightPoint {
    width: 0.75vw;
    height: 0.75vw;
    border-radius: 50%;
    background-color: #fbbd2f;
    position: absolute;
    top: 26vw;
    left: 59.66vw; }
  .canvasOverlay__rangeText {
    text-align: center;
    position: absolute;
    top: 7.5vw;
    font-family: HelveticaNeueMedium, arial, sans-serif;
    font-size: 1.28vw;
    text-transform: uppercase;
    left: 51vw; }
  .canvasOverlay__rangeTextUnderline {
    position: absolute;
    width: 11.2vw;
    height: 1vw;
    border-top: 1px solid #fbbd2f;
    left: 51vw;
    top: 9.2vw; }
  .canvasOverlay__rangeLine {
    position: absolute;
    width: 1vw;
    height: 7.9vw;
    border-left: 1px solid #fbbd2f;
    left: 56.4vw;
    top: 9.2vw; }
  .canvasOverlay__rangePoint {
    width: 0.75vw;
    height: 0.75vw;
    border-radius: 50%;
    background-color: #fbbd2f;
    position: absolute;
    top: 17vw;
    left: 56.05vw; }
  .canvasOverlay__speedText {
    text-align: center;
    position: absolute;
    top: 21.5vw;
    font-family: HelveticaNeueMedium, arial, sans-serif;
    font-size: 1.28vw;
    text-transform: uppercase;
    left: 61vw; }
  .canvasOverlay__speedTextUnderline {
    position: absolute;
    width: 30.5vw;
    height: 1vw;
    border-top: 1px solid #fbbd2f;
    left: 54.95vw;
    top: 23.2vw; }
  .canvasOverlay__speedPoint {
    width: 0.75vw;
    height: 0.75vw;
    border-radius: 50%;
    background-color: #fbbd2f;
    position: absolute;
    top: 22.87vw;
    left: 54.4vw; }

/*# sourceMappingURL=style.css.map */