.step-popup {
  width: 300px;
  height: 80px;
  position: fixed;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  top: 10px;
  left: -300px;
  opacity: 1; }
  .step-popup .img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: 0% 0% no-repeat padding-box;
    display: flex;
    align-content: center;
    background-position: center;
    background-size: cover; }
  .step-popup .text-block {
    font-family: 'Barlow', sans-serif;
    width: 210px;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    text-align: left; }
    .step-popup .text-block h2 {
      color: #FFFFFF;
      line-height: 17px;
      font-size: 14px;
      margin-bottom: 5px; }
    .step-popup .text-block p {
      color: #FFFFFFB3;
      line-height: 14px;
      font-size: 12px; }
  @media only screen and (max-width: 767px) {
    .step-popup {
      right: auto;
      left: -300px;
      top: 10px;
      bottom: auto; } }

.showPopup {
  left: 50%;
  right: auto;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  /** Safari & Chrome **/
  -o-transform: translate(-50%, 0);
  /** Opera **/
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out; }

.hidePopup {
  left: -300px;
  right: auto;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  /** Safari & Chrome **/
  -o-transform: translate(-50%, 0);
  /** Opera **/
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out; }

.red-popup {
  background-color: #702223; }
  .red-popup .img {
    background-color: #C51324;
    background-size: inherit; }

.yellow-popup {
  background-color: #8F771A; }

.green-popup {
  background-color: #0D482F; }
  .green-popup .img {
    background-color: #00000087; }

/*# sourceMappingURL=steps-popups.css.map */