/* Brand Colors */
/*gradient colors*/
/* CTA Text Color */
/* HERO TEXT COLOR */
/* Vertically aligned content

When content is vertically aligned, often times the copy margin is off; these variables correct this issue.

*/
/* CTA COLORS*/
/* Main CTA colors */
.web-refresh-chart {
  background-color: #fff;
  padding: 0; }
  .web-refresh-chart h4 {
    font-weight: 600;
    width: 90%; }
  @media (min-width: 768px) {
    .web-refresh-chart {
      width: 100%; } }
  @media (min-width: 992px) {
    .web-refresh-chart .col2 .cell,
    .web-refresh-chart .col2 .cell-cta,
    .web-refresh-chart .col2 .cell,
    .web-refresh-chart .col2 .cell-cta,
    .web-refresh-chart .col3 .cell,
    .web-refresh-chart .col3 .cell-cta {
      align-items: center; }
    .web-refresh-chart h4 {
      margin: 0;
      font-size: 16px;
      line-height: 1.7; } }
  @media (min-width: 992px) {
    .web-refresh-chart.for-teams .chart-container {
      height: 1200px; }
      .web-refresh-chart.for-teams .chart-container .col3 {
        height: 1280px; } }
  .web-refresh-chart a.cta.text-cta-bttn {
    margin-right: 0;
    color: #1c284c; }
  .web-refresh-chart a.cta.orange-cta-bttn {
    font-size: 18px;
    display: block;
    padding: 10px;
    border-radius: 3px;
    width: 75% !important;
    font-weight: 600; }
  .web-refresh-chart .web-refresh-chart p {
    margin: 0; }
  .web-refresh-chart .chart-title,
  .web-refresh-chart .chart-container {
    margin: auto;
    max-width: 1200px; }
  @media (min-width: 768px) {
    .web-refresh-chart .chart-title p {
      margin: 20px 0px 60px 0; } }
  .web-refresh-chart .chart-container {
    display: flex;
    flex-direction: column;
    margin-top: 30px; }
    @media (min-width: 992px) {
      .web-refresh-chart .chart-container {
        flex-direction: row;
        background-color: #fbfbfb;
        margin-top: 100px;
        height: 1050px; }
        .web-refresh-chart .chart-container .col2 .cell,
        .web-refresh-chart .chart-container .col3 .cell {
          display: flex; } }
    .web-refresh-chart .chart-container h4,
    .web-refresh-chart .chart-container p {
      font-size: 14px;
      line-height: 1.43; }
      @media (min-width: 992px) {
        .web-refresh-chart .chart-container h4,
        .web-refresh-chart .chart-container p {
          font-size: 18px;
          text-align: left;
          line-height: 1.78; } }
    .web-refresh-chart .chart-container .col1,
    .web-refresh-chart .chart-container .col2,
    .web-refresh-chart .chart-container .col3 {
      border: solid 0.8px #8494c1; }
      @media (min-width: 768px) {
        .web-refresh-chart .chart-container .col1,
        .web-refresh-chart .chart-container .col2,
        .web-refresh-chart .chart-container .col3 {
          width: 100%; } }
      @media (min-width: 992px) {
        .web-refresh-chart .chart-container .col1,
        .web-refresh-chart .chart-container .col2,
        .web-refresh-chart .chart-container .col3 {
          border: none;
          display: flex;
          flex-direction: column; } }
    .web-refresh-chart .chart-container .col1 {
      order: 1;
      display: none; }
      @media (min-width: 992px) {
        .web-refresh-chart .chart-container .col1 {
          display: block;
          width: 50%;
          text-align: left; } }
    .web-refresh-chart .chart-container .col2 {
      margin-top: 20px;
      order: 3; }
      @media (min-width: 768px) {
        .web-refresh-chart .chart-container .col2 {
          margin-top: 60px; } }
      @media (min-width: 992px) {
        .web-refresh-chart .chart-container .col2 {
          order: 2;
          width: 25%;
          margin-top: 0; } }
    .web-refresh-chart .chart-container .col3 {
      order: 2; }
      @media (min-width: 992px) {
        .web-refresh-chart .chart-container .col3 {
          box-shadow: 3px 4px 11px 0 rgba(8, 40, 130, 0.3);
          background-image: linear-gradient(to bottom, #f9fcff, #edf3f9 3%);
          order: 3;
          width: 25%;
          position: relative;
          top: -80px;
          border-radius: 8px;
          height: 1130px; }
          .web-refresh-chart .chart-container .col3 .header-cell {
            height: 280px;
            min-height: 280px; } }
    .web-refresh-chart .chart-container .cell,
    .web-refresh-chart .chart-container .cell-cta {
      border-top: solid 0.8px #8494c1; }
    .web-refresh-chart .chart-container .cell {
      padding-left: 20px;
      display: flex;
      align-items: center; }
      @media (min-width: 768px) {
        .web-refresh-chart .chart-container .cell {
          flex-direction: row; }
          .web-refresh-chart .chart-container .cell span {
            height: 100%; } }
      @media (min-width: 992px) {
        .web-refresh-chart .chart-container .cell {
          min-height: 130px;
          height: 130px;
          padding: 20px;
          display: block;
          text-align: center; }
          .web-refresh-chart .chart-container .cell p {
            padding-top: 10px; } }
      .web-refresh-chart .chart-container .cell .mobile-cell-text {
        display: inline-block;
        width: 70%;
        border-right: solid 0.8px #8494c1; }
        @media (min-width: 768px) {
          .web-refresh-chart .chart-container .cell .mobile-cell-text {
            padding-top: 10px; } }
      .web-refresh-chart .chart-container .cell img {
        margin: 0 auto; }
    .web-refresh-chart .chart-container .header-cell {
      text-align: center;
      padding: 20px; }
      @media (min-width: 992px) {
        .web-refresh-chart .chart-container .header-cell {
          min-height: 200px;
          height: 200px; } }
      .web-refresh-chart .chart-container .header-cell h2 {
        margin-bottom: 0; }
        @media (min-width: 992px) {
          .web-refresh-chart .chart-container .header-cell h2 {
            font-size: 22px; } }
      .web-refresh-chart .chart-container .header-cell a.cta.orange-cta-bttn {
        width: 100%;
        margin: 20px auto;
        margin-bottom: 20px; }
    .web-refresh-chart .chart-container .cell-cta {
      text-align: center;
      height: 220px; }
      @media (min-width: 992px) {
        .web-refresh-chart .chart-container .cell-cta {
          padding-top: 20px; } }
      .web-refresh-chart .chart-container .cell-cta p {
        text-align: left;
        margin-top: 10px; }
      .web-refresh-chart .chart-container .cell-cta .cta.orange-cta-bttn {
        width: 70%; }
      .web-refresh-chart .chart-container .cell-cta .windows-only {
        margin-left: 20px; }
      .web-refresh-chart .chart-container .cell-cta .price {
        color: #082882;
        display: inline;
        font-size: 40px;
        line-height: 1.5;
        font-weight: 600; }
      .web-refresh-chart .chart-container .cell-cta .per-year {
        color: #082882;
        font-size: 24px; }
      .web-refresh-chart .chart-container .cell-cta .one-device {
        font-size: 18px;
        color: #0d3ecc;
        text-align: center;
        font-weight: 500; }
    .web-refresh-chart .chart-container span.rec {
      color: #0d3ecc;
      text-align: center;
      width: 100%;
      display: inline-block;
      font-weight: 500; }
      @media (min-width: 992px) {
        .web-refresh-chart .chart-container span.rec {
          margin-bottom: 50px; } }
  .web-refresh-chart .icon {
    margin-right: 20px; }
  .web-refresh-chart [v-cloak] {
    display: none !important; }

.icon {
  width: 20px;
  height: 20px; }

.col3 .price {
  font-size: 1.8em;
  font-weight: 500; }