/*CONTAINER

.container {
  width: 1180px;
  height: 240px;
  margin: 0 auto;
  background-color: #044154;
  position: relative;
  overflow: hidden;
}
 END*/
 
/*MAP BEGIN*/
.mapAnimated {
  width: 300px;
  height: 400px;
  position: absolute;
  bottom: 20px;
  right: 0px;
  font-size: 16px;
  animation: mapAnimated 1.3s ease-out forwards;
}

@keyframes mapAnimated {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(35%);
  }
}

@keyframes comOpacity {
  0% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.mapSVG {
  width: 20em;
  height: 20em;
  position: absolute;
  bottom: 0;
  transform: rotate(30deg);
  z-index: 1;
}

.lineSVG {
  width: 3.08em;
  position: absolute;
  bottom: 2.1em;
  left: 8.8em;
  transform: rotate(30deg);
  z-index: 3;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: mapPath 3.5s linear forwards;
}

@keyframes mapPath {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.mapMarker {
  width: 0;
  top: 6.4em;
  left: 14.5em;
  transform-origin: 50% 100%;
  position: absolute;
  z-index: 2;
  animation: mapMarker 600ms ease forwards;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@keyframes mapMarker {
  0% {
    width: 0;
    transform: rotate(-180deg);
  }
  100% {
    width: 1em;
    transform: rotate(0deg);
  }
}
/*MAP END*/


/*how it works*/
.comAnimated {
  width: 250px;
  height: 155px;
  position: absolute;
  bottom: 16px;
  left: -140px; top:120px;
  font-size: 16px;
  z-index: 4;
  animation: comAnimated 1s ease-out forwards;
}

@keyframes comAnimated {
  0% {
    transform: translateY(160%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes comOpacity {
  0% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.blueChat {
  width: 0;
  opacity: 100%;
  position: absolute;
  left: 2.3em;
  top: 3em;
  z-index: 3;
  animation: comChat 1s ease forwards;
  animation-delay: 700ms;
  /* -webkit-filter: sepia(50%) hue-rotate(90deg) saturate(400%);
  filter: sepia(50%) hue-rotate(90deg) saturate(400%);*/
}

@keyframes comChat {
  0% {
    width: 0em;
  }
  100% {
    width: 2em;
  }
}

.paper {
  width: 7.5em;
  opacity: 100%;
  position: relative;
  left: 0em;
  top: 5em;
  z-index: 4;
  animation: paperFloat 1s ease forwards;
  animation-delay: 500ms;
}

@keyframes paperFloat {
  0% {
    top: 15em;
  }
  100% {
    top: 3.6em;
  }
}

.mask {
  overflow: hidden;
  position: relative;
  height: 13.2em;
  left: 7.8em;
  top: -8em;
  z-index: 3;
}

.whiteChat {
  width: 0;
  opacity: 100%;
  position: absolute;
  left: 4em;
  top: -1.9em;
  z-index: 3;
  animation: whiteChat 1s ease forwards;
  animation-delay: 900ms;
}

@keyframes whiteChat {
  0% {
    width: 0em;
  }
  100% {
    width: 3em;
  }
}

.laptop {
  width: 100%;
  opacity: 100%;
  position: relative;
  left: 0;
  top: 0;
  z-index: 1;
}

.mask {
  position: absolute;
}
/*ANALYTICS*/

.analyticsAnimated {
  width: 250px;
  height: 155px;
  position: absolute;
  bottom: 30px;
  left: 70px;
  font-size: 16px;
  z-index: 10;
  animation: analyticsAnimated 2s ease-out forwards; z-index:100;
}

@keyframes analyticsAnimated {
  0% {
    transform: translateY(160%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes analyticsOpacity {
  0% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.laptoptwo {
  width: 100%;
  opacity: 100%;
  position: relative;
  left: 0;
  top: 0;
  z-index: 9;
}

.magnifyingGlass {
  width: 5em;
  height: 5em;
  transform: scale(0);
  opacity: 100%;
  position: absolute;
  right: .39em;
  top: .7em;
  z-index: 12;
  animation: magGlass 1s ease forwards;
  animation-delay: 2s;
}

@keyframes magGlass {
  0% {
    transform: scale(0)
  }
  100% {
    transform: scale(1)
  }
}

.magGlassTwo {
  width: 5em;
  opacity: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}

.magCurvePathOne {
  width: 3em;
  opacity: 100%;
  position: absolute;
  left: .1em;
  top: 2.8em;
  z-index: 11;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: pathOne 4.2s linear forwards;
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

@keyframes pathOne {
  0% {
    stroke-dashoffset: 500;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.magCurvePathTwo {
  width: 3em;
  opacity: 100%;
  position: absolute;
  left: .1em;
  top: 1.1em;
  z-index: 11;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: magCurvePathTwoSVG 1s linear forwards;
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

@keyframes magCurvePathTwoSVG {
  0% {
    stroke-dashoffset: 200;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.magGlass {
  width: 5em;
  opacity: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 12;
}

.pathOne {
  width: 8em;
  opacity: 100%;
  position: absolute;
  left: 3.5em;
  top: 3.5em;
  z-index: 10;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: pathOne 4.2s linear forwards;
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
}

@keyframes pathOne {
  0% {
    stroke-dashoffset: 500;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.pathTwo {
  width: 8em;
  opacity: 100%;
  position: absolute;
  left: 3.5em;
  top: 3.3em;
  z-index: 10;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: pathTwo 4.2s linear forwards;
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
}

@keyframes pathTwo {
  0% {
    stroke-dashoffset: 500;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.pointAnim {
  width: 0;
  z-index: 11;
  animation: pointOne 400ms ease forwards;
}

@keyframes pointOne {
  0% {
    width: 0;
  }
  100% {
    width: .4em;
  }
}

.p1 {
  position: absolute;
  left: 3.2em;
  top: 4.2em;
  animation: pointOne 400ms ease forwards;
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
}

.p2 {
  position: absolute;
  left: 4.8em;
  top: 3.5em;
  animation: pointOne 400ms ease forwards;
  animation-delay: 1.8s;
  -webkit-animation-delay: 1.8s;
}

.p3 {
  position: absolute;
  left: 6.8em;
  top: 4.8em;
  animation: pointOne 400ms ease forwards;
  animation-delay: 2.3s;
  -webkit-animation-delay: 2.3s;
}

.p4 {
  position: absolute;
  left: 9.5em;
  top: 3.38em;
  animation: pointOne 400ms ease forwards;
  animation-delay: 2.8s;
  -webkit-animation-delay: 2.8s;
}

.p5 {
  position: absolute;
  left: 2.8em;
  top: 2.9em;
  animation-delay: 0;
  -webkit-animation-delay: 0;
  width: 0%;
  opacity: 100%;
  position: absolute;
  z-index: 14;
  animation: pointOneMag 400ms ease forwards;
  animation-delay: 3.8s;
  -webkit-animation-delay: 3.8s;
}

@keyframes pointOneMag {
  0% {
    width: 0;
  }
  100% {
    width: 1em;
  }
}

.p6 {
  position: absolute;
  left: 3.2em;
  top: 6em;
  animation: pointOne 400ms ease forwards;
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
}

.p7 {
  position: absolute;
  left: 4.8em;
  top: 4.87em;
  animation: pointOne 400ms ease forwards;
  animation-delay: 1.8s;
  -webkit-animation-delay: 1.8s;
}

.p8 {
  position: absolute;
  left: 6.8em;
  top: 5.4em;
  animation: pointOne 400ms ease forwards;
  animation-delay: 2.3s;
  -webkit-animation-delay: 2.3s;
}

.p9 {
  position: absolute;
  left: 9.5em;
  top: 4.5em;
  animation: pointOne 400ms ease forwards;
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

.p10 {
  position: absolute;
  left: 2.8em;
  top: .6em;
  animation-delay: 0;
  -webkit-animation-delay: 0;
  width: 0%;
  opacity: 100%;
  position: absolute;
  z-index: 13;
  animation: pointOneMag 400ms ease forwards;
  animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
}