h1 {
  margin-bottom: 1em; }

h2.hidden {
  max-height: 0px;
  display: none; }

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none; }

ul li.nail {
  border-bottom: 1px solid #3f3f3f; }

.container {
  width: 1200px;
  margin: auto; }

.button {
  position: relative; }
  .button .loading {
    width: 64px;
    height: 64px;
    top: 50%;
    left: 50%;
    margin-left: -16px;
    margin-top: -16px; }
  .button .buttonlabel {
    font-size: 16px; }
  .button .imagecontainer {
    text-align: center; }
    .button .imagecontainer img {
      height: 64px;
      margin: auto; }
    .button .imagecontainer.kloss img {
      height: 64px;
      margin: auto; }

.nail-family-container {
  display: none;
  max-height: 0px;
  opacity: 0;
  transition: all 0.5s;
  padding-top: 40px;
  clear: both; }
  .nail-family-container.visible {
    display: block;
    opacity: 1; }

.filter-container {
  font-size: 0px;
  overflow: hidden;
  transition: all 0.5s;
  -webkit-transition: all 0.5s; }
  .filter-container.hidden {
    max-height: 0px;
    display: none !important; }
  .filter-container.input-filter {
    font-size: 18px;
    background-color: #0078b0;
    border-radius: 0;
    border: 0;
    padding: 20px 8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 50%;
    display: inline-block;
    border-top: 1px solid #0094d9;
    border-left: 1px solid #0094d9;
    border-right: 1px solid #005c87;
    border-bottom: 1px solid #005c87; }
    .filter-container.input-filter label {
      font-size: 16px !important;
      color: #fdfcfb;
      text-shadow: 1px 1px 2px #000;
      text-transform: uppercase; }
    .filter-container.input-filter .block {
      width: 35% !important;
      display: inline-block !important; }
      .filter-container.input-filter .block img {
        width: 100%; }
    .filter-container.input-filter input[type="number"] {
      border: none;
      width: 20%;
      text-align: center;
      color: #000;
      font-size: 1.4em;
      font-weight: 300;
      background-color: #fff; }
    .filter-container.input-filter ul.quick-thickness {
      border-bottom: 1px solid #fdfcfb;
      margin-bottom: 16px;
      display: none; }
      .filter-container.input-filter ul.quick-thickness.visible {
        display: block; }
      .filter-container.input-filter ul.quick-thickness li {
        display: inline-block;
        padding: 8px 12px;
        margin: 4px 4px 16px 4px;
        /*        border-top: 1px solid #fdfcfb;
                border-left: 1px solid #fdfcfb;
                border-right: 1px solid #b2b1b1;
                border-bottom: 1px solid #b2b1b1;*/
        font-size: 12px !important;
        color: #fdfcfb;
        border-radius: 1px;
        box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3) inset, -1px -1px 0px rgba(0, 0, 0, 0.3) inset, -1px -1px 0px rgba(0, 0, 0, 0.3), 1px 1px 0px rgba(255, 255, 255, 0.3);
        -moz-box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3) inset, -1px -1px 0px rgba(0, 0, 0, 0.3) inset, -1px -1px 0px rgba(0, 0, 0, 0.3), 1px 1px 0px rgba(255, 255, 255, 0.3); }
        .filter-container.input-filter ul.quick-thickness li a {
          color: #fdfcfb; }
    .filter-container.input-filter input.input-slider {
      width: 40%; }

.filter-list {
  margin-bottom: 24px; }
  .filter-list li.filter-button, .filter-list li.toggle-button {
    padding: 8px; }
    .filter-list li.filter-button.filter-available, .filter-list li.toggle-button.filter-available {
      background-color: #0078b0; }
      .filter-list li.filter-button.filter-available .buttonlabel, .filter-list li.toggle-button.filter-available .buttonlabel {
        opacity: 1; }
    .filter-list li.filter-button .buttonlabel, .filter-list li.toggle-button .buttonlabel {
      display: inline-block;
      padding: 16px 0px;
      text-align: center;
      opacity: 0.3; }
  .filter-list li.toggle-button .imagecontainer img {
    height: 80px;
    width: auto !important; }
  .filter-list li.toggle-button .buttonlabel {
    opacity: 1 !important; }
  .filter-list li.toggle-button .no {
    display: inline; }
  .filter-list li.toggle-button .yes {
    display: none; }
  .filter-list li.toggle-button.highlight .no {
    display: none; }
  .filter-list li.toggle-button.highlight .yes {
    display: inline; }

.do-filter {
  display: block;
  width: 200px;
  padding: 20px;
  background-color: green;
  margin-bottom: 30px; }

.filter-area {
  font-size: 22px; }
  .filter-area .middle-layer-only {
    display: none; }
  .filter-area.middle-layer-enabled .middle-layer-only {
    display: block; }
  .filter-area.handspik-stenmaterial .filter-for-field .filter-unavailable {
    display: none !important; }

.main-guide-container {
  padding-bottom: 40px;
  padding-top: 40px;
  clear: both; }

#guide-content .guide-section h2 {
  margin-bottom: 0.5em; }
#guide-content .button.filter-button {
  float: left; }
#guide-content .second-level .imagecontainer img {
  height: 32px !important; }
#guide-content .type-select {
  margin-bottom: 32px !important; }
  #guide-content .type-select a.type-select {
    width: 50% !important;
    float: left;
    display: block; }
  #guide-content .type-select .clearfix {
    float: left !important;
    display: block !important;
    width: 100% !important;
    clear: both !important; }
  #guide-content .type-select .buttonlabel {
    line-height: 1.4em;
    height: 2.4em; }
#guide-content .category-select {
  display: none; }
  #guide-content .category-select.visible {
    display: block; }
  #guide-content .category-select .buttonlabel {
    line-height: 1.4em;
    height: 2.4em; }
#guide-content .nail-area {
  margin-top: 40px;
  display: none; }
  #guide-content .nail-area.visible {
    display: block; }
  #guide-content .nail-area .result-list {
    display: none;
    display: block; }
    #guide-content .nail-area .result-list.visible {
      display: block; }
  #guide-content .nail-area.handspik-trad-stangsel .filtered-in {
    display: none !important; }
    #guide-content .nail-area.handspik-trad-stangsel .filtered-in.thickness-match {
      display: block !important; }
  #guide-content .nail-area.handspik-stenmaterial.no-thickness .filtered-in {
    display: block !important; }
  #guide-content .nail-area.handspik-stenmaterial .filtered-in {
    display: none !important; }
    #guide-content .nail-area.handspik-stenmaterial .filtered-in.thickness-match {
      display: block !important; }
  #guide-content .nail-area li.desktop-header.sub-header {
    display: none !important; }
    #guide-content .nail-area li.desktop-header.sub-header.visible {
      display: inline-block !important; }
  #guide-content .nail-area li.desktop-header ul li {
    padding-top: 0px !important;
    padding-bottom: 0px !important; }
    #guide-content .nail-area li.desktop-header ul li span.header {
      color: #fdfcfb;
      display: block !important;
      line-height: 1.3em !important;
      overflow: hidden;
      height: 1.3em !important; }
    #guide-content .nail-area li.desktop-header ul li span.header-placeholder {
      line-height: 1px !important;
      overflow: hidden !important;
      height: 0px !important;
      display: block;
      color: transparent; }
  #guide-content .nail-area li.nail {
    display: inline-block;
    width: 100%;
    float: left;
    margin: 0px 0px 0px;
    font-size: 9px;
    padding: 8px 0px; }
    #guide-content .nail-area li.nail ul.sub-nail {
      width: 100%;
      display: block; }
      #guide-content .nail-area li.nail ul.sub-nail li {
        display: block;
        float: left;
        margin: 0px;
        padding: 4px 8px;
        font-size: 12px;
        line-height: 1.3em;
        text-align: left; }
        #guide-content .nail-area li.nail ul.sub-nail li a {
          font-size: 12px; }
        #guide-content .nail-area li.nail ul.sub-nail li.col-productname {
          width: 19%; }
        #guide-content .nail-area li.nail ul.sub-nail li.col-dimension {
          width: 8%; }
        #guide-content .nail-area li.nail ul.sub-nail li.col-material {
          width: 16.5%; }
        #guide-content .nail-area li.nail ul.sub-nail li.col-profile {
          width: 10%; }
        #guide-content .nail-area li.nail ul.sub-nail li.col-headshape {
          width: 16.5%; }
        #guide-content .nail-area li.nail ul.sub-nail li.col-artnr {
          display: none; }
        #guide-content .nail-area li.nail ul.sub-nail li span.header {
          display: block;
          font-size: 16px;
          height: 1.4em;
          font-weight: 700;
          line-height: 0px;
          overflow: hidden;
          height: 0px; }
        #guide-content .nail-area li.nail ul.sub-nail li.degree-indicator-container {
          text-align: center;
          margin-right: 8px; }
          #guide-content .nail-area li.nail ul.sub-nail li.degree-indicator-container .degree-image {
            height: 21px;
            width: 22px; }
          #guide-content .nail-area li.nail ul.sub-nail li.degree-indicator-container .degree-indicator img {
            width: 16px;
            height: 16px; }
        #guide-content .nail-area li.nail ul.sub-nail li span.product-name {
          text-transform: capitalize; }
        #guide-content .nail-area li.nail ul.sub-nail li.extra-info {
          position: relative; }
          #guide-content .nail-area li.nail ul.sub-nail li.extra-info .header {
            opacity: 0; }
          #guide-content .nail-area li.nail ul.sub-nail li.extra-info a {
            font-size: 10px; }
        #guide-content .nail-area li.nail ul.sub-nail li.extra-info-panel {
          width: 100%;
          display: none; }
          #guide-content .nail-area li.nail ul.sub-nail li.extra-info-panel p {
            font-size: 12px;
            margin-bottom: 0px;
            margin-top: 2px; }
          #guide-content .nail-area li.nail ul.sub-nail li.extra-info-panel.visible {
            display: block; }
        #guide-content .nail-area li.nail ul.sub-nail li.admin-options {
          opacity: 0.8; }
    #guide-content .nail-area li.nail.filterable {
      display: none;
      padding: 0px;
      background-color: #FFF; }
      #guide-content .nail-area li.nail.filterable.filtered-in {
        display: block;
        padding: 8px 0px; }
  #guide-content .nail-area.byggbeslag .filterable {
    display: none !important; }
  #guide-content .nail-area.byggbeslag .filtered-in {
    display: none !important; }
  #guide-content .nail-area.byggbeslag.compatible-against .filtered-in.compatible-against {
    display: block !important; }
  #guide-content .nail-area.byggbeslag.compatible-through .filtered-in.compatible-through {
    display: block !important; }
  #guide-content .nail-area.allmanna-byggnadskonstruktioner .filterable {
    display: none !important; }
  #guide-content .nail-area.allmanna-byggnadskonstruktioner.clinch-only .filtered-in.compat-clinch {
    display: block !important; }
  #guide-content .nail-area.allmanna-byggnadskonstruktioner.non-clinch-only .filtered-in.compat-non-clinch {
    display: block !important; }
  #guide-content .nail-area.allmanna-byggnadskonstruktioner.bandad-spik-allmanna-byggnadskonstruktioner .filtered-in.compat-clinch {
    display: block !important; }
  #guide-content .nail-area.allmanna-byggnadskonstruktioner.bandad-spik-allmanna-byggnadskonstruktioner .filtered-in.compat-non-clinch {
    display: block !important; }
  #guide-content .nail-area.handspik-tegelfasad.thickness-dependent .filterable {
    display: none !important; }
    #guide-content .nail-area.handspik-tegelfasad.thickness-dependent .filterable.compatible {
      display: block !important; }
  #guide-content .nail-area.handspik-tegelfasad .spacing-info {
    display: block;
    width: 100%; }
  #guide-content .nail-area.handspik-tegelfasad .tegel-extra-info {
    display: block;
    width: 100%; }
  #guide-content .nail-area.handspik-skivmaterial .filterable {
    display: none !important; }
    #guide-content .nail-area.handspik-skivmaterial .filterable.compatible {
      display: block !important; }
  #guide-content .nail-area.bandad-spik-raspont .filterable.filtered-in {
    display: none !important; }
    #guide-content .nail-area.bandad-spik-raspont .filterable.filtered-in.compatible {
      display: block !important; }

.show-results {
  display: block;
  margin-top: 2em;
  width: 100% !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  top: 32px;
  padding-top: 1em;
  padding-bottom: 1em; }

.no-results {
  display: none;
  padding-top: 2.2em;
  font-weight: 300;
  font-size: 19px !important;
  text-align: center;
  line-height: 1.3em;
  color: #fdfcfb; }
  .no-results.visible {
    display: block; }

.all-nails-list {
  width: 100%;
  display: block;
  clear: both;
  border-bottom: 2px solid #3f3f3f;
  float: left; }
  .all-nails-list .filterable {
    display: inline-block !important;
    background-color: #fff;
    opacity: 1; }

@media only screen and (max-width: 720px) {
  body #guide-content #section-select-attachment a.button.half, body #guide-content #section-select-attachment a.button.wide {
    padding-top: 10px !important;
    padding-bottom: 10px !important; }
    body #guide-content #section-select-attachment a.button.half.filter-button.nail-selector-link, body #guide-content #section-select-attachment a.button.half.filter-button.category-select, body #guide-content #section-select-attachment a.button.wide.filter-button.nail-selector-link, body #guide-content #section-select-attachment a.button.wide.filter-button.category-select {
      width: 50% !important; }
    body #guide-content #section-select-attachment a.button.half .imagecontainer, body #guide-content #section-select-attachment a.button.wide .imagecontainer {
      height: 40px !important; }
      body #guide-content #section-select-attachment a.button.half .imagecontainer img, body #guide-content #section-select-attachment a.button.wide .imagecontainer img {
        max-height: 20px !important; }
      body #guide-content #section-select-attachment a.button.half .imagecontainer.kloss, body #guide-content #section-select-attachment a.button.wide .imagecontainer.kloss {
        height: 48px !important; }
        body #guide-content #section-select-attachment a.button.half .imagecontainer.kloss img, body #guide-content #section-select-attachment a.button.wide .imagecontainer.kloss img {
          max-height: 48px !important;
          margin: auto; }
  body #guide-content .filter-area ul.filter-list li.toggle-button {
    width: 100% !important; }
  body #guide-content .nail-area ul li.nail.desktop-header {
    display: none; }
  body #guide-content .nail-area ul li.nail ul.sub-nail li {
    text-align: left;
    display: block;
    width: 100% !important; }
    body #guide-content .nail-area ul li.nail ul.sub-nail li span.header {
      display: inline !important;
      margin-right: 0.3em; }
      body #guide-content .nail-area ul li.nail ul.sub-nail li span.header:after {
        content: ':'; }
    body #guide-content .nail-area ul li.nail ul.sub-nail li.degree-indicator-container {
      text-align: left; }
    body #guide-content .nail-area ul li.nail ul.sub-nail li.extra-info {
      display: none !important; }
    body #guide-content .nail-area ul li.nail ul.sub-nail li.extra-info-panel {
      display: block !important; }
  body #guide-content .button .buttonlabel {
    font-size: 12px !important; }
  body #guide-content .filter-button.half {
    width: 100% !important; }
    body #guide-content .filter-button.half .buttonlabel {
      padding: 8px 0px !important; }
  body #guide-content .input-filter {
    width: 100% !important; } }
@media only screen and (max-width: 1025px) {
  input.input-slider {
    margin-top: 32px !important;
    width: 100% !important; } }