/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400|Oswald:300,700");
.ip_wrapper {
  max-width: 860px;
  margin: auto;
  font-size: 0.9em;
  line-height: 1.3em;
  font-family: "Open Sans", arial, sans-serif;
  font-weight: 100; }
  .ip_wrapper html, .ip_wrapper body, .ip_wrapper div, .ip_wrapper span, .ip_wrapper applet, .ip_wrapper object, .ip_wrapper iframe,
  .ip_wrapper h1, .ip_wrapper h2, .ip_wrapper h3, .ip_wrapper h4, .ip_wrapper h5, .ip_wrapper h6, .ip_wrapper p, .ip_wrapper blockquote, .ip_wrapper pre,
  .ip_wrapper a, .ip_wrapper abbr, .ip_wrapper acronym, .ip_wrapper address, .ip_wrapper big, .ip_wrapper cite, .ip_wrapper code,
  .ip_wrapper del, .ip_wrapper dfn, .ip_wrapper em, .ip_wrapper img, .ip_wrapper ins, .ip_wrapper kbd, .ip_wrapper q, .ip_wrapper s, .ip_wrapper samp,
  .ip_wrapper small, .ip_wrapper strike, .ip_wrapper strong, .ip_wrapper sub, .ip_wrapper sup, .ip_wrapper tt, .ip_wrapper var,
  .ip_wrapper b, .ip_wrapper u, .ip_wrapper i, .ip_wrapper center,
  .ip_wrapper dl, .ip_wrapper dt, .ip_wrapper dd, .ip_wrapper ol, .ip_wrapper ul, .ip_wrapper li,
  .ip_wrapper fieldset, .ip_wrapper form, .ip_wrapper label, .ip_wrapper legend,
  .ip_wrapper table, .ip_wrapper caption, .ip_wrapper tbody, .ip_wrapper tfoot, .ip_wrapper thead, .ip_wrapper tr, .ip_wrapper th, .ip_wrapper td,
  .ip_wrapper article, .ip_wrapper aside, .ip_wrapper canvas, .ip_wrapper details, .ip_wrapper embed,
  .ip_wrapper figure, .ip_wrapper figcaption, .ip_wrapper footer, .ip_wrapper header, .ip_wrapper hgroup,
  .ip_wrapper menu, .ip_wrapper nav, .ip_wrapper output, .ip_wrapper ruby, .ip_wrapper section, .ip_wrapper summary,
  .ip_wrapper time, .ip_wrapper mark, .ip_wrapper audio, .ip_wrapper video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline; }
  .ip_wrapper html {
    line-height: 1; }
  .ip_wrapper ol, .ip_wrapper ul {
    list-style: none; }
  .ip_wrapper table {
    border-collapse: collapse;
    border-spacing: 0; }
  .ip_wrapper caption, .ip_wrapper th, .ip_wrapper td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle; }
  .ip_wrapper q, .ip_wrapper blockquote {
    quotes: none; }
    .ip_wrapper q:before, .ip_wrapper q:after, .ip_wrapper blockquote:before, .ip_wrapper blockquote:after {
      content: "";
      content: none; }
  .ip_wrapper a img {
    border: none; }
  .ip_wrapper article, .ip_wrapper aside, .ip_wrapper details, .ip_wrapper figcaption, .ip_wrapper figure, .ip_wrapper footer, .ip_wrapper header, .ip_wrapper hgroup, .ip_wrapper main, .ip_wrapper menu, .ip_wrapper nav, .ip_wrapper section, .ip_wrapper summary {
    display: block; }
  .ip_wrapper h1 {
    margin: 45px 0;
    font-size: 5em;
    line-height: 1.1em;
    text-shadow: 0px 1px 30px #444; }
    @media screen and (max-width: 425px) {
      .ip_wrapper h1 {
        font-size: 4em; } }
  .ip_wrapper h1, .ip_wrapper li {
    font-family: "Oswald", arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase; }
  .ip_wrapper h2 {
    font-size: 1.2em;
    line-height: 1.3em; }
  .ip_wrapper p, .ip_wrapper h2 {
    margin: 20px 0; }
  .ip_wrapper .color-bar {
    width: 100%;
    display: block; }
    .ip_wrapper .color-bar.top, .ip_wrapper .color-bar.img_footer {
      height: 5px; }
    .ip_wrapper .color-bar.bottom {
      height: 10px; }
  .ip_wrapper header {
    background-image: url("../img/header-bg-pattern.png");
    background-width: 100%; }
    .ip_wrapper header .inner {
      background-image: url("../img/header-bg-overlay.png");
      background-position: bottom;
      background-size: cover;
      background-repeat: no-repeat; }
    .ip_wrapper header h1, .ip_wrapper header p {
      color: #fff; }
    .ip_wrapper header .text {
      max-width: 613px;
      margin: 45px auto;
      padding: 0 20px;
      text-align: center; }
  .ip_wrapper .body {
    background-color: #f1f1f1;
    background-image: url("../img/bg-overlay.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
    overflow: hidden;
    position: relative;
    padding: 40px 20px; }
    .ip_wrapper .body .text {
      max-width: 275px;
      position: absolute;
      right: 40px;
      top: 40px;
      color: #792f91; }
      .ip_wrapper .body .text .key li {
        display: inline-block;
        line-height: 29px; }
        .ip_wrapper .body .text .key li span {
          float: left;
          margin-right: 10px; }
      @media screen and (max-width: 740px) {
        .ip_wrapper .body .text {
          position: relative;
          margin: 0 auto 40px auto;
          max-width: 500px;
          right: 0;
          top: 0;
          text-align: center; } }
  .ip_wrapper .pin {
    display: block;
    cursor: pointer;
    height: 29px;
    width: 29px;
    background-position: 0 29px; }
    .ip_wrapper .pin:hover {
      background-position: 0 0; }
    .ip_wrapper .pin.good {
      background-image: url("../img/pin-good.png"); }
    .ip_wrapper .pin.bad {
      background-image: url("../img/pin-bad.png"); }
    .ip_wrapper .pin.city1 {
      top: 46%;
      left: 16%; }
    .ip_wrapper .pin.city2 {
      top: 55%;
      left: 54%; }
    .ip_wrapper .pin.city3 {
      top: 78%;
      left: 39%; }
    .ip_wrapper .pin.city4 {
      top: 53%;
      left: 57%; }
    .ip_wrapper .pin.city5 {
      top: 60%;
      left: 41%; }
    .ip_wrapper .pin.city6 {
      top: 32%;
      left: 39%; }
    .ip_wrapper .pin.city7 {
      top: 75%;
      left: 60%; }
    .ip_wrapper .pin.city8 {
      top: 72%;
      left: 59%; }
    .ip_wrapper .pin.city9 {
      top: 86%;
      left: 36%; }
    .ip_wrapper .pin.city10 {
      top: 67%;
      left: 75%; }
    .ip_wrapper .pin.city11 {
      top: 79%;
      left: 64%; }
    .ip_wrapper .pin.city12 {
      top: 85%;
      left: 65%; }
    .ip_wrapper .pin.city13 {
      top: 77%;
      left: 55%; }
    .ip_wrapper .pin.city14 {
      top: 80%;
      left: 47%; }
    .ip_wrapper .pin.city15 {
      top: 72%;
      left: 67%; }
    .ip_wrapper .pin.city16 {
      top: 86%;
      left: 51%; }
    .ip_wrapper .pin.city17 {
      top: 81%;
      left: 60%; }
    .ip_wrapper .pin.city18 {
      top: 69%;
      left: 53%; }
    .ip_wrapper .pin.city19 {
      top: 78%;
      left: 45%; }
    .ip_wrapper .pin.city20 {
      top: 79%;
      left: 57%; }
  .ip_wrapper .tables {
    padding: 0 20px; }
    .ip_wrapper .tables img {
      max-width: 100%;
      display: block;
      margin: 40px auto; }
  .ip_wrapper .map-wrap {
    position: relative;
    margin: auto;
    max-width: 639px;
    width: 100%;
    height: 875px; }
    @media screen and (max-width: 639px) {
      .ip_wrapper .map-wrap {
        height: 0;
        padding-bottom: 136.9327073552%; } }
    .ip_wrapper .map-wrap .map_img {
      display: block;
      max-width: 100%; }
    .ip_wrapper .map-wrap .pins {
      position: absolute;
      width: inherit;
      height: inherit;
      top: 0; }
      @media screen and (max-width: 614px) {
        .ip_wrapper .map-wrap .pins {
          height: 0;
          padding-bottom: 136.9327073552%; } }
      .ip_wrapper .map-wrap .pins .pin {
        position: absolute;
        z-index: 99; }
    .ip_wrapper .map-wrap .overlay {
      position: absolute;
      width: inherit;
      height: inherit;
      top: 0; }
      @media screen and (max-width: 614px) {
        .ip_wrapper .map-wrap .overlay {
          height: 0;
          padding-bottom: 136.9327073552%; } }
      .ip_wrapper .map-wrap .overlay .map_info-box {
        max-width: 100%;
        position: absolute;
        top: 0%;
        left: 0%;
        display: none;
        z-index: 99; }
        .ip_wrapper .map-wrap .overlay .map_info-box.show {
          display: block; }
        .ip_wrapper .map-wrap .overlay .map_info-box.mobile {
          width: 100%;
          height: auto;
          display: none !important; }
        @media screen and (max-width: 614px) {
          .ip_wrapper .map-wrap .overlay .map_info-box.mobile.show {
            display: block !important; }
          .ip_wrapper .map-wrap .overlay .map_info-box.desktop {
            display: none !important; } }
  .ip_wrapper footer {
    background-image: url("../img/footer.png");
    background-color: #f1f1f1;
    background-position: bottom;
    overflow: hidden; }
    .ip_wrapper footer img {
      margin-top: 125px; }