* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

a.parent:after {
  content: "\\f107";
  margin: 0px 0px 0px 7px;
  font-family: FontAwesome; }

.viewer {
  position: relative; }
  @media screen and (min-width: 55em) {
    .viewer {
      margin-bottom: 2em;
      position: relative; }
      .viewer .container {
        background-color: #d9d9d9;
        padding: 0; } }

.main.viewer .container {
  padding: 0; }

.main-nav .ctas a.login {
  background-color: #6699cc; }
  .main-nav .ctas a.login.logged-in {
    background-color: #990000; }

.main .viewer-content {
  padding: 2em;
  margin-bottom: 2em;
  position: relative; }
  .main .viewer-content h1, .main .viewer-content h2, .main .viewer-content h3, .main .viewer-content h4 {
    color: #000; }

.main-footer .appendix p {
  font-family: "proxima-nova", "Helvetica", "Arial", sans-serif;
  padding: 0 1em 1em;
  display: block;
  float: none;
  background-color: #fff; }

.viewer-intro {
  position: relative; }
  .viewer-intro .container {
    background-color: #b3b3b3;
    padding-top: 1em;
    padding-bottom: 1em; }
  .viewer-intro .title-icon {
    display: block;
    float: left;
    width: 15%;
    margin-right: 1em;
    position: relative; }
    .viewer-intro .title-icon img {
      width: 100%; }
  .viewer-intro h3 {
    color: #333333;
    font-family: "proxima-nova", "Helvetica", "Arial", sans-serif;
    text-transform: none;
    font-size: 1em;
    margin-bottom: 0; }
  .viewer-intro h2 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 0; }
  @media screen and (min-width: 35em) {
    .viewer-intro .title-icon {
      width: 10%; } }
  @media screen and (min-width: 45em) {
    .viewer-intro header {
      margin-left: 17.0596085997%;
      padding-left: 2em;
      margin-bottom: .75em; }
    .viewer-intro .title-icon {
      width: 10%;
      margin-right: .5em; }
    .viewer-intro .container {
      background-color: #6699cc; } }
  @media screen and (min-width: 55em) {
    .viewer-intro header {
      margin-left: 25.5894128995%;
      padding-left: 0;
      padding-bottom: 1em; }
    .viewer-intro .title-icon {
      margin-right: 1em; } }
  @media screen and (min-width: 65em) {
    .viewer-intro .container {
      padding-top: 2em;
      padding-bottom: 2em; }
    .viewer-intro header {
      margin-bottom: 0;
      padding-bottom: .5em; }
    .viewer-intro h3 {
      font-size: 1.5em; }
    .viewer-intro h2 {
      font-size: 2.4em; } }

.viewer-menu {
  background-color: #8c8c8c;
  color: #fff;
  padding: .5em 2em;
  margin: 0; }
  .viewer-menu .toggle {
    font-weight: bold;
    cursor: pointer; }
    .viewer-menu .toggle img {
      height: .8em;
      margin-right: .5em; }
      .viewer-menu .toggle img.section-icon {
        height: 2.5em; }
  .viewer-menu ul {
    list-style: none;
    padding-left: 0;
    display: none;
    margin-bottom: 0; }
    .viewer-menu ul.open {
      display: block; }
    .viewer-menu ul li {
      line-height: 1.2em;
      border-bottom: 1px solid #8c8c8c; }
      .viewer-menu ul li:last-child {
        border-bottom: none; }
    .viewer-menu ul a {
      display: block;
      padding: .5em 0;
      color: #fff; }
  @media screen and (min-width: 55em) {
    .viewer-menu {
      background-color: #d9d9d9;
      padding: 2em 0 0;
      float: left;
      display: block;
      margin-right: 2.3576515979%;
      width: 23.2317613015%;
      margin-right: 0; }
      .viewer-menu:last-child {
        margin-right: 0; }
      .viewer-menu .toggle {
        padding: 0 2em;
        font-weight: normal;
        color: #666666;
        display: block; }
        .viewer-menu .toggle img.section-icon {
          width: 30%;
          display: block;
          height: auto; }
        .viewer-menu .toggle .count {
          display: none; }
      .viewer-menu ul {
        display: block;
        border-top: 1px solid #bfbfbf;
        border-bottom: 1px solid #bfbfbf; }
        .viewer-menu ul li {
          border-bottom: 1px solid #bfbfbf; }
        .viewer-menu ul a {
          padding: .6em 2em;
          font-weight: bold;
          color: #6699cc;
          -webkit-transition: color, 0.2s ease;
          -moz-transition: color, 0.2s ease;
          transition: color, 0.2s ease; }
          .viewer-menu ul a.current {
            color: #333333;
            background-color: #f2f2f2; }
          .viewer-menu ul a:hover {
            color: #333333; } }
  @media screen and (min-width: 75em) {
    .viewer-menu .toggle img.section-icon {
      width: 30%;
      display: inline;
      height: auto; }
    .viewer-menu .toggle .count {
      display: none; } }

.main .infographic {
  margin-bottom: 0;
  padding-bottom: 0; }
.main .features {
  position: relative;
  padding: 0;
  clear: both; }
  .main .features .container {
    position: relative; }
  .main .features h2 {
    text-transform: uppercase;
    font-weight: normal;
    color: #fff;
    font-size: 1.2em;
    letter-spacing: .4em; }
@media screen and (min-width: 45em) {
  .main .infographic .container {
    padding: 2em; }
  .main .features {
    padding-top: 2em; }
  .main .feature {
    float: left;
    display: block;
    margin-right: 4.8291579146%;
    width: 30.1138947236%;
    margin-bottom: 0; }
    .main .feature:last-child {
      margin-right: 0; }
    .main .feature:last-child {
      margin-right: 0; } }
@media screen and (min-width: 55em) {
  .main .infographic {
    margin: 0; }
  .main .feature {
    float: left;
    display: block;
    margin-right: 2.3576515979%;
    width: 31.7615656014%; }
    .main .feature:last-child {
      margin-right: 0; }
    .main .feature:last-child {
      margin-right: 0; } }
@media screen and (min-width: 65em) {
  .main .features .container {
    padding: 0 2em 2em; } }
@media screen and (min-width: 75em) {
  .main .features .container {
    padding: 0 0 2em; }
  .main .features .more {
    right: 0; } }

/* As now infographics will be used in sectionfront-flexible template as well, so adding here */
.infographic {
  padding: 0;
  color: #fff;
  position: relative;
  z-index: 10; }
  .infographic .container {
    background: #1b3149; }
  .infographic ul {
    list-style: none;
    padding-left: 0;
    margin: 0; }
    .infographic ul::after {
      clear: both;
      content: "";
      display: table; }
  .infographic li {
    display: block;
    position: relative;
    text-transform: uppercase;
    margin-bottom: 1em; }
    .infographic li::after {
      clear: both;
      content: "";
      display: table; }
  .infographic b {
    line-height: 1em;
    position: relative;
    display: block; }
  .infographic span {
    line-height: 1em;
    position: relative;
    font-size: .8em;
    display: block; }
  .infographic .houses b {
    color: #6699cc;
    font-size: 4em; }
  .infographic .families b {
    color: #EE3124;
    font-size: 4em; }
  .infographic .savings b {
    color: #f1b03b;
    font-size: 2.5em; }
  .infographic .days b {
    color: #6699cc;
    font-size: 3em; }
  @media screen and (min-width: 45em) {
    .infographic li {
      float: left;
      margin-bottom: 0; }
    .infographic .houses {
      width: 12%;
      margin-right: 4%; }
      .infographic .houses b {
        color: #6699cc;
        font-size: 2em; }
    .infographic .families {
      width: 15%;
      margin-right: 4%; }
      .infographic .families b {
        color: #EE3124;
        font-size: 2em; }
    .infographic .savings {
      width: 35%;
      margin-right: 4%; }
      .infographic .savings b {
        color: #f1b03b;
        font-size: 2em; }
    .infographic .days {
      width: 25%;
      margin-right: 0; }
      .infographic .days b {
        color: #6699cc;
        font-size: 2em; } }
  @media screen and (min-width: 55em) {
    .infographic .houses {
      width: 12%;
      margin-right: 4%; }
      .infographic .houses b {
        color: #6699cc;
        font-size: 3em; }
    .infographic .families {
      width: 15%;
      margin-right: 4%; }
      .infographic .families b {
        color: #EE3124;
        font-size: 3em; }
    .infographic .savings {
      width: 35%;
      margin-right: 4%; }
      .infographic .savings b {
        color: #f1b03b;
        font-size: 3em; }
    .infographic .days {
      width: 25%;
      margin-right: 0; }
      .infographic .days b {
        color: #6699cc;
        font-size: 3em; } }

.viewer-content {
  background-color: #fff; }
  @media screen and (min-width: 55em) {
    .viewer-content {
      float: left;
      display: block;
      margin-right: 2.3576515979%;
      width: 74.4105871005%;
      margin-right: 0;
      margin-bottom: .75em !important;
      margin-top: -.75em; }
      .viewer-content:last-child {
        margin-right: 0; } }
.news .intro {
  position: relative; }
  .news .intro .container {
    margin: 0 auto;
    padding: 0;
    position: relative; }
  .news .intro img {
    width: 100%;
    height: auto; }
  .news .intro h1 {
    font-size: 2.4em;
    color: #fff;
    padding: .2em 1em .2em .8em;
    margin: 0;
    background-color: #6699cc; }
    .news .intro h1.gethelp {
      background-color: #990000; }
  .news .intro.no-hero h1 {
    position: relative;
    background-color: #6699cc; }
  @media screen and (min-width: 45em) {
    .news .intro {
      margin-bottom: 2em; }
      .news .intro h1 {
        font-size: 2em;
        border-bottom: none;
        padding: .4em 1em;
        text-shadow: none;
        position: absolute;
        bottom: 0;
        left: 0; }
      .news .intro.no-hero h1 {
        position: relative;
        padding-top: 2.2em; } }
  @media screen and (min-width: 65em) {
    .news .intro h1 {
      font-size: 2.4em;
      padding: .4em .8em; } }
.social li a.linkedin {
    background-image: url(../img/linkedin.svg);
}
.social li a.linkedin {
    background-image: url(../img/linkedin.svg);
}
.socialStats{
  padding: 0 0 10px;
}

.ff-img-holder.ff-img-loading {
    display: none !important;
}
.ff-layout-grid .ff-item .ff-img-holder img {
    height: 100%;
}
#ff-stream-1, .ff-stream {
    min-height: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 0 30px !important;
}
.ff-stream-wrapper {
    margin: 0 -13px !important;
}
.ff-loadmore-wrapper .ff-btn {
    background-color: #223D5B !important;
    color: #fff !important;
    font-family: "proxima-nova", "Helvetica", "Arial", sans-serif !important;
    font-weight: bold !important;
}
.ff-loadmore-wrapper .ff-btn:hover {
    text-decoration: none !important;
    background-color: #6699cc !important;
}
.ff-slideshow nav span.ff-nav-close {
    color: #fff !important;
}

.ff-slideshow nav span
{
    color: #fff !important;
}

.socialmedia h2 {
    text-transform: uppercase;
    font-weight: normal;
    color: #fff !important;
    font-size: 1.2em;
    letter-spacing: .4em;
}
.supporting .socialmedia h2 {
    margin-bottom: 1em;
}

@media screen and (min-width: 65em){
  .patriot input[type=text] {
    margin-right: 2.851505%;
    width: 46.659398%;
    margin-bottom: .8em;
  }
  .patriot input[type=email]{
    width:65%;
    margin-bottom: .8em;
    margin-right: 2.851505%!important;
  }
  .patriot input[type=submit]:last-child {
    margin-right: 0;
    width: 28.5%;
  }
}

@media screen and (min-width: 55em){
.patriot .magazine .instructions {
      padding: 3em 1em 4em 0;
      }
    }

@media screen and (max-width: 35em){
  .patriot input{
    width: 100%;
  }
}

.no-padding {
  padding: 0;
}