
@font-face {
  font-family: "Frutiger LT W04_55 Roman";
  src: url("/fonts/3c1542d6-dbb8-4bb3-85e5-730bbf131fcc.eot?#iefix");
  src: url("/fonts/3c1542d6-dbb8-4bb3-85e5-730bbf131fcc.eot?#iefix") format("eot"), url("/fonts/61381871-0847-435e-9498-63b7c3d9c071.woff2") format("woff2"), url("/fonts/b33c9c65-2311-4db9-a364-ae857e998b70.woff") format("woff"), url("/fonts/72290e69-f361-42ef-adc2-ed908eb88cb5.ttf") format("truetype"); }

@font-face {
  font-family: "Frutiger LT W04_65 Bold";
  src: url("/fonts/92fb90f3-a8af-48d1-aac0-52c736cdc532.eot?#iefix");
  src: url("/fonts/92fb90f3-a8af-48d1-aac0-52c736cdc532.eot?#iefix") format("eot"), url("/fonts/63541a87-effb-4b23-a1e5-aded6ef8e33d.woff2") format("woff2"), url("/fonts/ede01147-5581-4d28-afc0-303f4c771fd2.woff") format("woff"), url("/fonts/a098af66-fef8-439d-abf2-0d61674a33f9.ttf") format("truetype"); }

:root {
  font-size: 62.5%; }

body {
  margin: 2rem;
  font-family: "Frutiger LT W04_55 Roman", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.6rem; }

.clearfix::after {
  content: '';
  clear: both;
  display: table; }

a {
  color: #0b51b3; }

p {
  line-height: 2.2rem; }

p,
ul {
  margin: 2rem 0; }

h1,
h2,
h3 {
  font-family: "Frutiger LT W04_65 Bold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: normal; }

h1 {
  font-size: 3rem;
  margin: 3rem 0; }

h2 {
  font-size: 1.6rem;
  background: #eee;
  border-bottom: 1px solid #ddd;
  margin: 1rem 0;
  padding: 0.7em 1rem 0.5em 1rem; }

h3 {
  font-size: 1.6rem; }

.padding {
  padding: 1rem; }

div.tabs > ul {
  padding: 0;
  margin: 2rem 0;
  list-style: none;
  display: none;
  width: 100%;
  font-family: "Frutiger LT W04_65 Bold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: normal; }
  div.tabs > ul li {
    display: table-cell;
    background: #eee;
    padding: 0.7em 1em 0.5em 1em;
    width: 50%;
    cursor: pointer;
    border-bottom: 1px solid #ddd; }
  div.tabs > ul li:hover,
  div.tabs > ul li.active {
    border-bottom: 4px #cf2441 solid; }
  div.tabs > ul li.active {
    background: #fff; }

div.tabs > div.active {
  display: block; }

.button {
  display: inline-block;
  background: #0b51b3;
  color: white;
  text-decoration: none;
  padding: 1rem;
  transition: all .25s;
  border: 1px solid #0b51b3; }
  .button:hover {
    background: white;
    color: #0b51b3; }

ul.icon-list {
  padding: 0;
  list-style: none; }
  ul.icon-list li {
    display: block;
    float: left; }
  ul.icon-list .icon {
    display: block;
    height: 40px;
    width: 40px;
    text-indent: -9999px;
    background: url("/img/spritesheet-feature-icons.png") center 3px no-repeat; }
    ul.icon-list .icon.print {
      background-position: center -87px; }
    ul.icon-list .icon.scan {
      background-position: center -175px; }
    ul.icon-list .icon.fax {
      background-position: center -264px; }
    ul.icon-list .icon.wifi {
      background-position: center -353px; }
    ul.icon-list .icon.usb {
      background-position: center -442px; }
    ul.icon-list .icon.color {
      background-position: center -531px; }
    ul.icon-list .icon.five-color {
      background-position: center -1408px; }
    ul.icon-list .icon.bandw {
      background-position: center -620px; }
    ul.icon-list .icon.a4 {
      background-position: center -708px; }
    ul.icon-list .icon.a3 {
      background-position: center -797px; }
    ul.icon-list .icon.sra3 {
      background-position: center -886px; }
    ul.icon-list .icon.ppm20 {
      background-position: center -977px; }
    ul.icon-list .icon.ppm30 {
      background-position: center -1066px; }
    ul.icon-list .icon.ppm40 {
      background-position: center -1154px; }
    ul.icon-list .icon.award {
      background-position: center -1244px; }
    ul.icon-list .icon.smart-panel {
      background-position: center -1330px; }
    ul.icon-list .icon.ppm {
      border-radius: 50%;
      background: #1BA9E3;
      width: 35px;
      height: 35px;
      text-indent: 0;
      line-height: 35px;
      text-align: center;
      color: #fff;
      font-family: "Frutiger LT W04_55 Roman", Arial, "Helvetica Neue", Helvetica, sans-serif;
      margin: 0 2px; }
      ul.icon-list .icon.ppm span {
        text-indent: -9999px;
        visibility: hidden; }

nav {
  border-bottom: 1px solid #d2d2d2;
  padding-bottom: 1rem; }
  nav ul {
    padding: 0;
    margin: 0;
    list-style: none; }
    nav ul li {
      display: inline-block;
      margin-bottom: 1rem; }
      nav ul li:before {
        content: '';
        display: inline-block;
        background: url(/img/forward-arrow.png) center no-repeat;
        width: 5px;
        height: 16px;
        vertical-align: top;
        margin: 0 10px 0 8px; }
      nav ul li:first-child:before {
        display: none; }

main div.product-list div.product {
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  padding: 2rem; }
  main div.product-list div.product a.product-image {
    display: block; }
    main div.product-list div.product a.product-image img {
      margin: 0 0 1rem 0;
      width: 100%; }
  main div.product-list div.product div.product-description {
    width: 100%; }
    main div.product-list div.product div.product-description h3 a {
      color: black;
      text-decoration: none;
      font-size: 2.4rem; }
    main div.product-list div.product div.product-description h3 a:hover {
      color: #0b51b3; }
    main div.product-list div.product div.product-description p {
      margin: 1rem 0; }
  main div.product-list div.product h3 {
    margin-top: 0; }
  main div.product-list div.product .button {
    float: right;
    margin-top: 2rem; }
  main div.product-list div.product .icon-list {
    margin-bottom: 0;
    float: left; }

@media screen and (min-width: 650px) {
  main div.product-list div.product {
    display: table; }
    main div.product-list div.product a.product-image,
    main div.product-list div.product div.product-description {
      display: table-cell;
      vertical-align: middle; }
    main div.product-list div.product a.product-image img {
      margin: 0 2rem 0 0;
      width: 285px; } }

main div.product-page {
  margin: 2rem 0; }
  main div.product-page div.product-gallery {
    border: 1px solid #ccc;
    padding: 1rem;
    margin: auto; }
    main div.product-page div.product-gallery > img {
      width: 100%; }
    main div.product-page div.product-gallery div.image-choice {
      margin-top: 1rem;
      text-align: center;
      display: none; }
      main div.product-page div.product-gallery div.image-choice img {
        display: inline-block;
        cursor: pointer;
        border-radius: 1rem;
        width: 63px;
        height: 63px; }

main div#specifications h3 {
  background: #f3f3f3;
  padding: 0.7em 1rem 0.6em 1rem;
  font-size: 1.6rem;
  margin: 1rem 0 0 0; }

main div#specifications table {
  width: 100%;
  border-collapse: collapse; }
  main div#specifications table td {
    border: 1px solid #eee;
    width: 50%;
    padding: 1rem; }

@media screen and (min-width: 650px) {
  main div.product-page div.product-gallery,
  main div.product-page div.product-summary {
    display: table-cell;
    vertical-align: middle; }
  main div.product-page div.product-gallery > img {
    width: 252px; }
  main div.product-page div.product-summary {
    padding-right: 2rem;
    width: 100%; } }
