/* Styles that make the two step verification article (180744) look good. */
.two-step-wrapper {
  position: relative;
}

.two-step-wrapper .two-step-header {
  background-color: #f5f5f5;
  border-bottom: 5px #ff6565 solid;
  color: #333;
  display: block;
  font-size: 16px;
  margin: 0;
  overflow: auto;
  padding: 20px;
}

.two-step-wrapper .two-step-header h1 {
  color: #ff2f34;
  font-size: 22px;
  font-weight: normal;
  margin: 0;
}

.two-step-wrapper .two-step-header p {
  margin: 25px 0;
}

.two-step-wrapper .header-content {
  display: block;
  float: left;
  margin: 0;
  width: 200px;
}

.two-step-wrapper .header-image {
  display: block;
  float: right;
  height: 162px;
  margin-top: 2em;
  width: 265px;
}

.two-step-wrapper .two-step-content-wrapper {
  display: block;
  font-size: 13px;
  padding: 20px;
}

.two-step-wrapper .two-step-content-wrapper h2 {
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

.two-step-wrapper .two-step-how-it-works {
  border-top: 1px #ddd solid;
  float: left;
}

.two-step-wrapper .steps {
  display: block;
  float: left;
  margin-top: 20px;
}

.two-step-wrapper .numbers {
  color: #00c073;
  display: block;
  float: left;
  font-size: 44px;
  font-weight: bold;
  padding: 10px 0 50px 0;
  text-align: center;
  width: 100px;
}

/* On mobile screens, hides callout image and linearizes content. */
@media (max-width: 770px) {
  .two-step-wrapper .header-image {
    display: none;
  }

  .two-step-wrapper .two-step-content-wrapper {
    padding: 1em 0;
  }
}