/* Reset */

* {
  margin: 0;
  padding: 0;
}

/* Fonts */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);

/* Elements */

body {
  background: #ffffff;
  font-family: "Open Sans", sans-serif;
  color: #7f8c8d;
  font-size: 16px;
  line-height: 1;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 6.770833333333333% 0 4.166666666666666% 0;
}

a {
  border: none;
  text-decoration: none;
}

p {
  font-size: 1.5em;
  font-weight: 300;
  padding: 0 0 5.208333333333334% 0;
  line-height: 1.6;
}

hr {
  padding: 0;
  margin: 0.5208333333333333% auto;
  width: 84.375%;
  border: none;
  padding: 0.15625% 0;
}

/* Classes */

ul.guides-list {
  padding-left: 2.5%;
  padding-bottom: 5%;
  list-style-type: none;
}

ul.guides-list li {
  padding: 1.5% 0;
  font-size: 1.2em;
}

ul.guides-list li a {
  color: #a8d05d;
  transition: all 0.3s ease;
}

ul.guides-list li a:hover {
  color: #6c8b3c;
}

.terms p,
.help p {
  text-align: left;
}

p.content-no-image {
  padding: 5% 0;
}

h1.title {
  font-size: 3.5em;
  font-weight: 700;
  padding: 3% 0;
  line-height: 1;
  margin-top: 2.55%;
}

h1.title .light {
  font-weight: 300;
  padding: 6.770833333333333% 0 2.604166666666667% 0;
}

h1.subpage-title {
  font-size: 2.25em;
  font-weight: 700;
  padding: 6% 0 8% 0;
  line-height: 0.7;
}

h2.subtitle {
  font-size: 2.25em;
  font-weight: 400;
  padding: 0;
  line-height: 0.81;
}

h3.section-title {
  font-size: 2.75em;
  font-weight: 300;
  padding: 4.166666666666% 0;
}

h4.subsection-title {
  font-size: 1.8em;
  font-weight: 300;
  position: relative;
  margin: 0 0 4.166666666666666% 0;
  padding: 0;
}

h4.subsection-title:before,
h4.subsection-title:after {
  content: "";
  position: absolute;
  height: 10.344827586206897%;
  width: 30%;
  top: 55%;
  background: #2c3e50;
}

h4.subsection-title:before {
  font-size: 1.8em;
  font-weight: 300;
  left: 0;
}

h4.subsection-title:after {
  font-size: 1.8em;
  font-weight: 300;
  right: 0;
}

h5 {
}

h6 {
}

.wrapper {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
}

.download-wrapper {
  /* width:85%; */
  /* max-width:1200px; */
  width: auto;
  max-width: fit-content;
  margin: 0 5%;
}

.header {
  padding: 1.5625% 0;
  width: 100%;
  overflow: hidden;
}

.footer {
  padding: 5% 0 1.5625% 0;
  width: 100%;
  overflow: hidden;
}

.header-left,
.header-right,
.footer-left,
.footer-right {
  width: 50%;
  float: left;
  height: 7.187499999999999%;
}

.header-left,
.footer-left {
  text-align: left;
}

.header-right,
.footer-right {
  text-align: right;
}

.logo {
  max-width: 400px;
  width: 62.5%;
  display: block;
  margin: 0 auto;
}

.logo img {
  width: 100%;
}

.page-logo {
  width: 46.875%;
  max-width: 450px;
  margin: 0 auto;
  display: block;
  padding: 5% 0;
}

.color-container .phone-number {
  color: #ffffff;
}

ul.nav {
  list-style-type: none;
  width: 77.60416666666666%;
  overflow: hidden;
  padding: 1.5625% 0;
  margin: 0 auto;
}

.color-container ul.nav {
  padding: 2.5% 0 5% 0;
}

ul.nav li a {
  color: #7f8c8d;
  transition: all 0.3s ease;
  font-size: 1.125em;
}

.color-container ul.nav li a {
  color: #ffffff;
}

ul.nav li a:hover {
  color: #a073b2;
  font-size: 1.2em;
}

.color-container ul.nav li a:hover {
  color: #ffffff;
}

ul.nav li {
  width: 33.333333%;
  float: left;
  text-align: center;
  font-weight: 400;
  padding: 1.342281879194631% 0;
}

ul.nav li.active {
  font-weight: 700;
  font-size: 1.2em;
  position: relative;
}

.color-container ul.nav li.active {
  color: #ffffff;
}
.mobile-icon {
  font-size: 31px;
  margin: 0 5px;
}
ul.nav li.active:after {
  content: "";
  margin: 0 auto;
  height: 8%;
  position: absolute;
  left: 25%;
  right: 25%;
  top: 90%;
  background: #0061a4;
}

div.header-image {
  text-align: center;
  margin-top: 6.770833333333333%;
}

div.header-image img {
  margin: 0 auto;
  max-width: 1400px;
  margin-top: -6.770833333333333%;
  width: 72.91666666666666%;
  padding: 1.5625% 0;
}

div.resources-image {
  text-align: center;
  margin-top: 6.770833333333333%;
}

div.resources-image img {
  margin: 0 auto;
  max-width: 1400px;
  margin-top: -6.770833333333333%;
  width: 72.91666666666666%;
  padding: 1.5625% 0 0 0;
  margin-bottom: -0.13416666666666666%;
}

div.contact-image {
  text-align: center;
  margin-top: 6.770833333333333%;
}

div.contact-image img {
  margin: 0 auto;
  max-width: 1400px;
  margin-top: -6.770833333333333%;
  width: 72.91666666666666%;
  padding: 1.5625% 0 0 0;
  margin-bottom: -0.13416666666666666%;
}

a.color-button {
  width: 50%;
  text-align: center;
  display: block;
  background: #00954b;
  border-radius: 5px;
  padding: 1.5625% 0;
  color: #ffffff;
  font-weight: 300;
  margin: 6.25% auto;
  transition: all 0.3s ease;
}

a.color-button:hover {
  background: #45b978;
}

ul.features {
  list-style-type: none;
  padding: 10% 0 9.5% 0;
  overflow: hidden;
}

ul.features li {
  width: 31.25%;
  color: #ffffff;
  float: left;
  text-align: center;
}

ul.features li i.feature-icon {
  color: #0061a4;
}

ul.features li i.fa-mobile {
  font-size: 1.25em;
}

ul.features li i.fa-users {
  font-size: 0.8em;
}

ul.features li .feature-title {
  font-weight: 400;
  font-size: 1.5em;
  display: block;
  padding-bottom: 5%;
}

ul.features li .feature-description {
  color: #ffffff;
  font-size: 1.125em;
  line-height: 1.5;
}

ul.features li {
  width: 31.25%;
  color: #ffffff;
  float: left;
}

ul.features li.feature-1-of-3,
ul.features li.feature-2-of-3 {
  margin-right: 3.125%;
}

ul.platforms {
  list-style-type: none;
  overflow: hidden;
  padding: 0 0 5% 0;
}

ul.platforms a li {
  /*  width:13.875%;*/
  width: 24.875%;
  /* padding: 1.083333333333333%; */
  padding: 12px;
  /* font-size: 1.1em; */
  font-size: 15px;
  color: #ffffff;
  float: left;
  background: #a8d05d;
  font-weight: 300;
  margin-bottom: 1.125%;
  transition: all 0.3s ease;
}

ul.platforms a:hover li {
  background: #6c8b3c;
}

ul.platforms li .platform-icon {
  display: inline-block;
  vertical-align: middle;
  /* margin-right: 10px; */
}

ul.platforms li .platform-label {
  display: inline-block;
  vertical-align: middle;
}

ul.platforms li.platform-1-of-4,
ul.platforms li.platform-2-of-4,
ul.platforms li.platform-3-of-4,
ul.platforms li.platform-4-of-4 {
  margin-right: 1.125%;
}

ul.comparison-table {
  margin-bottom: 10%;
}

ul.comparison-table:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

ul.comparison-table,
ul.comparison-table li ul {
  list-style-type: none;
}

ul.comparison-table > li {
  float: left;
  position: relative;
}

ul.comparison-table li.comparison-table-1-of-3,
ul.comparison-table li.comparison-table-3-of-3 {
  width: 32.29166666666667%;
  margin-top: 3.1%;
}

ul.comparison-table li.comparison-table-2-of-3 {
  width: 35.41666666666667%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

ul.comparison-table li ul li {
  width: 100%;
  text-align: center;
}

ul.comparison-table li ul li.comparison-table-title {
  background: #2c3e50;
  color: #ffffff;
  font-size: 2em;
  font-weight: 300;
  padding: 6.451612903225806% 0;
}

ul.comparison-table li.comparison-table-2-of-3 ul li.comparison-table-title {
  padding: 8.823529411764707% 0 8.823529411764707% 0;
  background: #34495e;
  position: relative;
}

ul.comparison-table li ul li.comparison-table-subtitle {
  background: #16a085;
  color: #ffffff;
  padding: 6.451612903225806% 0;
}

ul.comparison-table li.comparison-table-2-of-3 ul li.comparison-table-subtitle {
  padding: 8.823529411764707% 0;
  background: #a073b2;
}

ul.comparison-table
  li
  ul
  li.comparison-table-subtitle
  .comparison-table-dollar-sign {
  font-size: 2em;
  font-weight: 300;
  vertical-align: top;
}

ul.comparison-table li ul li.comparison-table-subtitle .comparison-table-price {
  font-size: 4em;
  font-weight: 700;
}

ul.comparison-table
  li
  ul
  li.comparison-table-subtitle
  .comparison-table-per-month {
  font-size: 1em;
  font-weight: 300;
}

ul.comparison-table li ul li.comparison-table-item {
  background: #ecf0f1;
  color: #95a5a6;
  padding: 8.064516129032258% 0;
  position: relative;
}

ul.comparison-table li.comparison-table-2-of-3 ul li.comparison-table-item {
  padding: 7.352941176470589% 0;
  background: #f5f7f7;
}

ul.comparison-table li ul li.comparison-table-subtitle a.color-button {
  width: 50%;
  text-align: center;
  display: block;
  background: #00954b;
  border-radius: 5px;
  padding: 3.225806451612903% 0;
  color: #ffffff;
  font-weight: 300;
  margin: 6.451612903225806% auto 0 auto;
  transition: all 0.3s ease;
}

ul.comparison-table
  li.comparison-table-2-of-3
  ul
  li.comparison-table-subtitle
  a.color-button {
  width: 50%;
  text-align: center;
  display: block;
  background: #00954b;
  border-radius: 5px;
  padding: 2.941176470588235% 0;
  color: #ffffff;
  font-weight: 300;
  margin: 5.88235294117647% auto 0 auto;
  transition: all 0.3s ease;
}

ul.comparison-table li ul li.comparison-table-subtitle a.color-button:hover {
  background: #45b978;
}

ul.resources,
ul.resources ul {
  list-style-type: none;
  padding-bottom: 10%;
  overflow: hidden;
}

ul.resources {
  display: block;
  padding: ;
}

ul.resources > li {
  margin: 0 auto;
  text-align: center;
  font-size: 2em;
  font-weight: 300;
  padding-bottom: 2.5%;
  margin-bottom: 1.5%;
  position: relative;
}

ul.resources > li:after {
  content: "";
  position: absolute;
  height: 6%;
  width: 50%;
  top: 75%;
  left: 25%;
  background: #2c3e50;
}

ul.resources ul li {
  float: left;
  width: 42.875%;
  padding: 2%;
  font-size: 1.15em;
  background: #34495e;
  color: #ffffff;
  font-weight: 300;
  margin: 0 1.5625% 3.125% 1.5625%;
  transition: all 0.3s ease;
}

ul.resources ul a:hover li {
  background: #2c3e50;
}

ul.resources ul li .resource-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4%;
}

ul.resources ul li .resource-label {
  display: inline-block;
  vertical-align: middle;
}
/* Class Differentiators For Different Containers */

.white-container {
  background: #ffffff;
}

.white-container h1,
.white-container h2,
.white-container h3,
.white-container h4,
.white-container p {
  color: #7f8c8d;
}

.white-container hr {
  background: #7f8c8d;
}

.color-container {
  background: #0061a4;
}

.color-container h1,
.color-container h2,
.color-container h3,
.color-container h4,
.color-container p {
  color: #ffffff;
}

.color-container hr {
  background: #ffffff;
}

.contact-wrap {
  overflow: hidden;
  margin: 0 0 10% 0;
}

.contact-left {
  width: 48.75%;
  margin: 0 2.5% 0 0;
  padding: 0;
  float: left;
}

.contact-right {
  width: 48.75%;
  margin: 0 0 0 0;
  padding: 0;
  float: right;
}

.contact-header {
  width: 95%;
  padding: 2.5%;
  background: #34495e;
  color: #ffffff;
}

.contact-wrap h2 {
  color: #ffffff;
  font-weight: 300;
  padding: 2.5% 0;
}

.contact-body {
  width: 90%;
  padding: 5%;
  background: #ecf0f1;
}

.contact-item {
  width: 90%;
  padding: 5%;
  background: #ffffff;
  border-radius: 5px;
  margin: 0 0 5% 0;
}

.contact-item:last-child {
  margin: 0;
}

.contact-item h3 {
  padding: 0 0 5% 0;
}

.contact-item span {
  display: block;
  line-height: 2.5;
}

.contact-item span strong {
  margin-right: 1.5%;
}

/* Media Queries */

@media only screen and (min-width: 1101px) {
  body {
    font-size: 16px;
  }

  ul.platforms {
    margin-left: 4%;
    display: table;
    margin-right: -5%;
  }
}

@media only screen and (min-width: 961px) and (max-width: 1100px) {
  body {
    font-size: 14px;
  }

  ul.platforms {
    margin-right: 0%;
  }
}

@media only screen and (min-width: 641px) and (max-width: 960px) {
  body {
    font-size: 12px;
  }

  ul.platforms {
    margin-right: 0%;
  }

  ul.platforms a li {
    width: 44.270833334%;
    padding: 2.083333333333333%;
  }

  ul.platforms li.platform-2-of-4,
  ul.platforms li.platform-4-of-4 {
    margin-right: 0;
  }

  ul.platforms li.platform-1-of-4,
  ul.platforms li.platform-3-of-4 {
    margin-right: 3.125%;
  }

  a.color-button {
    width: 75%;
    padding: 2% 0;
    font-size: 1.2em;
  }

  ul.comparison-table li ul li.comparison-table-subtitle a.color-button,
  ul.comparison-table
    li.comparison-table-2-of-3
    ul
    li.comparison-table-subtitle
    a.color-button {
    width: 75%;
  }

  ul.comparison-table
    li.comparison-table-2-of-3
    ul
    li.comparison-table-title:after {
    height: 98.436975%;
  }

  ul.resources ul li {
    width: 100%;
    padding: 0;
    margin: 0.5% 0 0.5% 0;
    padding: 2% 0;
  }

  .wrapper {
    width: 95%;
  }
}

@media only screen and (max-width: 640px) {
  body {
    font-size: 12px;
  }

  .wrapper {
    width: 95%;
  }

  ul.platforms {
    margin-right: 0%;
  }

  ul.platforms a li {
    width: 100%;
  }

  ul.platforms li.platform-1-of-4,
  ul.platforms li.platform-2-of-4,
  ul.platforms li.platform-3-of-4,
  ul.platforms li.platform-4-of-4 {
    margin-right: 0;
  }

  ul.platforms li.platform-1-of-4 {
    margin-top: 5%;
  }

  a.color-button {
    width: 100%;
    padding: 3% 0;
    margin: 12.5% 0;
  }

  ul.features li {
    width: 100%;
  }

  ul.features li.feature-1-of-3,
  ul.features li.feature-2-of-3 {
    margin-bottom: 10%;
  }

  ul.features li .feature-title {
    padding-bottom: 3%;
  }

  ul.features li .feature-description {
    padding-bottom: 10%;
  }

  .phone-number {
    font-size: 1.25em;
    line-height: 1.8;
  }

  ul.nav {
    padding-bottom: 10%;
    padding-top: 5%;
  }

  h1.title {
    font-size: 3em;
    padding: 0;
    line-height: 1.5;
  }

  h2.subtitle {
    font-size: 2em;
    padding: 0;
    line-height: 0.81;
  }

  h3.section-title {
    font-size: 2.75em;
    font-weight: 300;
    padding: 4.166666666666% 0;
  }

  h4.subsection-title {
    font-size: 1.8em;
  }

  ul.resources ul li {
    width: 100%;
    padding: 0;
    margin: 0.5% 0 0.5% 0;
    padding: 2% 0;
  }

  ul.resources > li:after {
    content: "";
    position: absolute;
    height: 6%;
    width: 50%;
    top: 85%;
    left: 25%;
    background: #2c3e50;
  }

  .contact-wrap {
    overflow: hidden;
    margin: 0 0 10% 0;
  }

  .contact-left {
    width: 100%;
    margin: 0 0 5% 0;
    padding: 0;
  }

  .contact-right {
    width: 100%;
    margin: 0 0 5% 0;
    padding: 0;
  }

  .contact-header {
    width: 95%;
    padding: 2.5%;
    background: #34495e;
    color: #ffffff;
  }

  .contact-wrap h2 {
    color: #ffffff;
    font-weight: 300;
    padding: 2.5% 0;
  }

  .contact-body {
    width: 90%;
    padding: 5%;
    background: #ecf0f1;
  }

  .contact-item {
    width: 90%;
    padding: 5%;
    background: #ffffff;
    border-radius: 5px;
    margin: 0 0 5% 0;
  }

  .contact-item:last-child {
    margin: 0;
  }

  .contact-item h3 {
    padding: 0 0 5% 0;
  }

  .contact-item span {
    display: block;
    line-height: 2.5;
  }

  .contact-item span strong {
    margin-right: 1.5%;
  }
}
.margreset {
  margin: 0;
}