.cta {
  color: white;
  background-color: var(--color-primary);
  border: none;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  font-family: Lato-Regular;
  font-size: 14px;
  line-height: 45px;
  height: 50px;
  padding: 0 30px;
  position: relative;
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  -webkit-transition: all .3s;
  transition: all .3s;
  display: inline-block;

  &:hover {
    background-color: var(--blue-600);
  }

  &.outline {
    color: var(--blue-500);
    background-color: transparent;
    border: 1px solid var(--blue-500);

    &:hover {
      color: white;
      background-color: var(--blue-500);
    }
  }

  &.blue {
    color: white;
    background-color: var(--blue-500);

    &:hover {
      background-color: var(--blue-600);
    }

    &.cta-phone {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAnCAQAAADNnSK9AAABoklEQVR4Ad3BP0vUcQAH4A8EPzhwdXGKoJcQLUHvoINeQURDuDZIa0RBQTT0ClqDoAYph/4QOERjCQ1Zkob0B4Ok86y7J74d6s+8U3+69TxRmbfdF+Npzrydvqc5xaNsckMxlqYUp1Kjj3aa0sdUaqzhVprSxb3UWMLLNGUFc6nxFD/SlFfopMYlSFMmITUqRTvNqBTHUmMFb9OUHh6nxjX005Q5dLKN4k6a0Va0sklLF900pY/p/KXyzEAnTZlDL1F5bsOsKk2ZULyzYVaVg/HFhheqHJwziiWtHJZl/M7hmVDM5PDMKI7m8PSwmpFMZH9cULzOUJax7q4j2Zt7itvZwVlbPruYvXivOJd/+Ik1H23pWjTtvCrD6SimUmNS0U6Meahju+/Gs5NxvxS3s8k6vmWTMZe9seq3ga8ZRsuqYjZ/uao4maHchIzig6LrRKKHTxkJMponBpYUxzMSZDfafhlYzi4gezFtYM2VjADZm+NWDPS9czE7QPbHKZ9sWbfsqevOO23Cfcj+GffAquEW0pQjzpm2aE1P38CCVv5ffwBdmVBm74+z+gAAAABJRU5ErkJggg==);
    }

    &.outline {
      color: var(--blue-500);
      background-color: transparent;
      border: 1px solid var(--blue-500);

      &:hover {
        color: white;
        background-color: var(--blue-500);
      }
    }
  }

  &.white {
    color: var(--color-primary);
    background-color: white;

    &:hover {
      background-color: var(--grey-100);
    }

    &.cta-phone {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAnCAYAAABnlOo2AAAB9ElEQVR4AcSXA4xdQRSGb824DurYqRm7jFkzrhvXdmNWQW1by3Bt2/bOnk3+bP5M7pvMYuYl+Z7O/+Z8yZyrIFj7aLyQKygDVcJ0IXCOSUaj3peQAh8jhC5TZqpPoTWGYC8ym1wLcbPjhmA7Mtd9CHWg2RNDsASZeB9CdWiWagj+QKbJh1AimrUZgoeRUT6EDlo0G4+688HWmy0whOuQyXAt1E8Pmn0yhM8j0+tDKNUwR4wCd10LbaJmkyKEJ9EposO1EJ8g34cM9E9BEW3OhWjbekjkF4uA/6g5F5pDTXO8i5AQUxUi8odFfAttJJESHnDfQkw5hLr9iZiFeJY+R10IfCapedEW0i8nzUNcfM5IC+0WFEg25Exz2CncF8YMWwg8IamblotuRV6nUtg/LCGQR4tut8i3ItsuFEWQ6xCKcZnaKYy3FgJttNhxQ+5gyI3cVOG10Gbx3DfdVmi60GWxfZ2o1+g1kjsppOBg6dakqhG0YhIW4Wsb189SbTnXLLgy8F8uWJKvzcJS7TRRynl7higEvguKKKHPi70LgU08V6AcNe9CzHtNql047V2IwTbVaWK9uNHb71uIWYOhViF0Ykt/CBdwQlyPa95zV0J83npFpwlbClwJMWNwyXmPy0U7ThG9uowwKegbkBhUeNRBhDAAoZ7hU/gnFJ0AAAAASUVORK5CYII=);
    }

    &.outline {
      color: white;
      background-color: transparent;
      border: 1px solid white;

      &:hover {
        color: var(--color-primary);
        background-color: white;
      }
    }
  }

  &.cta-video {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNS40MTgiIGhlaWdodD0iMTUuNDE4IiB2aWV3Qm94PSIwIDAgMTUuNDE4IDE1LjQxOCI+DQogIDxwYXRoIGlkPSJTb3VzdHJhY3Rpb25fMzciIGRhdGEtbmFtZT0iU291c3RyYWN0aW9uIDM3IiBkPSJNNy43MDksMTUuNDE4QTcuNzA3LDcuNzA3LDAsMCwxLDIuMjU4LDIuMjU4LDcuNzA5LDcuNzA5LDAsMSwxLDEwLjcxLDE0LjgxMiw3LjY1NCw3LjY1NCwwLDAsMSw3LjcwOSwxNS40MThaTTUuOTc4LDQuMDloMHY3LjU1Mmw1LjM0OS0zLjc3Nkw1Ljk3OCw0LjA5WiIgZmlsbD0iI2ZmZiIvPg0KPC9zdmc+DQo=);
    background-position: right 15px center;
    background-repeat: no-repeat;
    padding: 0 60px 0 25px;
    background-size: 22px;
  }

  &.cta-phone {
    background-position: left 15px center;
    background-repeat: no-repeat;
    background-size: 20px auto;
    padding: 0 30px 0 50px;
  }
}