/*
Colors that are used across this page
These colors should of course match the colors
that are used in other parts of the front end
 */
/**
Styles a list according to the Daikin styling
 */
/**
Creates a cross browser transition
 */
/**
Desktop dynamic infographic
This design file is not DESKTOP FIRST
 */
.dynamic-infographic {
  background: #f5f5f5; }
  .dynamic-infographic .dynamic-infographic-wrapper {
    position: relative;
    z-index: 1;
    margin: 40px auto 0; }
    .dynamic-infographic .dynamic-infographic-wrapper .modal-link {
      font-family: 'OpenSans-Bold';
      position: absolute;
      z-index: 2;
      width: 2.5em;
      height: 2.5em;
      display: block;
      background: #0099cc;
      border-radius: 100px;
      color: white;
      font-size: 18pt;
      line-height: 25px;
      padding: 0.6em;
      text-align: center;
      box-shadow: none;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s; }
      .dynamic-infographic .dynamic-infographic-wrapper .modal-link:hover, .dynamic-infographic .dynamic-infographic-wrapper .modal-link:focus, .dynamic-infographic .dynamic-infographic-wrapper .modal-link:active {
        text-decoration: none;
        -webkit-box-shadow: 0px 6px 16px -8px black;
        -moz-box-shadow: 0px 6px 16px -8px black;
        box-shadow: 0px 6px 16px -8px black; }
  .dynamic-infographic .dynamic-infographic-results {
    box-shadow: -1px 3px 42px rgba(0, 0, 0, 0.03); }
    .dynamic-infographic .dynamic-infographic-results .infographic-item h3 {
      background: #f5f5f5;
      color: #0099cc;
      margin: 0;
      padding-bottom: 0; }
      .dynamic-infographic .dynamic-infographic-results .infographic-item h3 span {
        width: 90%;
        float: left; }
      .dynamic-infographic .dynamic-infographic-results .infographic-item h3 i {
        color: #515151;
        text-align: center;
        display: block;
        background: #f0f0f0; }
    .dynamic-infographic .dynamic-infographic-results .infographic-item .item-description {
      display: none;
      padding: 10px; }
      .dynamic-infographic .dynamic-infographic-results .infographic-item .item-description ul {
        padding-left: 0; }
        .dynamic-infographic .dynamic-infographic-results .infographic-item .item-description ul li {
          margin: 12px 0;
          list-style: none;
          padding-left: 20px;
          font-size: 14px;
          line-height: 28px; }
          .dynamic-infographic .dynamic-infographic-results .infographic-item .item-description ul li:before {
            /*
            Styles for the blue bullets on the lists
             */
            content: "";
            width: 5px;
            background: #33ccff;
            display: block;
            position: absolute;
            left: 0;
            top: 0.8em; }
          .dynamic-infographic .dynamic-infographic-results .infographic-item .item-description ul li img {
            padding: 7px 10px 10px;
            max-width: 55px;
            display: inline-block;
            float: left; }
          .dynamic-infographic .dynamic-infographic-results .infographic-item .item-description ul li div {
            width: 83%;
            float: left; }
        .dynamic-infographic .dynamic-infographic-results .infographic-item .item-description ul.no-styling li {
          padding-left: 0; }
          .dynamic-infographic .dynamic-infographic-results .infographic-item .item-description ul.no-styling li:before {
            display: none; }
      .dynamic-infographic .dynamic-infographic-results .infographic-item .item-description.block {
        display: block; }
      .dynamic-infographic .dynamic-infographic-results .infographic-item .item-description .text-link {
        display: none;
        margin: 10px 0; }

.infographic-modal ul {
  padding-left: 0; }
  .infographic-modal ul li {
    margin: 12px 0;
    list-style: none;
    padding-left: 20px;
    font-size: 14px;
    line-height: 28px; }
    .infographic-modal ul li:before {
      /*
      Styles for the blue bullets on the lists
       */
      content: "";
      width: 5px;
      background: #33ccff;
      display: block;
      position: absolute;
      left: 0;
      top: 0.8em; }
    .infographic-modal ul li img {
      padding: 7px 10px 10px;
      max-width: 55px;
      display: inline-block;
      float: left; }
    .infographic-modal ul li div {
      width: 83%;
      float: left; }
  .infographic-modal ul.no-styling li {
    padding-left: 0; }
    .infographic-modal ul.no-styling li:before {
      display: none; }
.infographic-modal img {
  padding-top: 20px;
  padding-bottom: 30px; }

@media (max-width: 767px) {
  /**
  Small devices
   */
  .dynamic-infographic {
    background: white; }
    .dynamic-infographic .dynamic-infographic-wrapper .modal-link {
      font-size: 12pt;
      padding-top: 0.2em;
      width: 2em;
      height: 2em; }
      .dynamic-infographic .dynamic-infographic-wrapper .modal-link:hover, .dynamic-infographic .dynamic-infographic-wrapper .modal-link:focus, .dynamic-infographic .dynamic-infographic-wrapper .modal-link:active {
        box-shadow: none;
        cursor: default; }
    .dynamic-infographic .dynamic-infographic-results {
      padding-top: 1em;
      margin-top: 0.5em; }
      .dynamic-infographic .dynamic-infographic-results .infographic-item .title {
        color: #0099cc; }
      .dynamic-infographic .dynamic-infographic-results .infographic-item .text {
        display: none; }
      .dynamic-infographic .dynamic-infographic-results .infographic-item h3 {
        background: none !important; }
      .dynamic-infographic .dynamic-infographic-results .infographic-item .collapse-icon {
        cursor: pointer;
        height: 4em !important; } }

/*# sourceMappingURL=styles.css.map */