/*
* basic brake points
*/
/*
* browser hacks
*/
/*
* <ul class="flex-container flex-start">
*   <li class="flex-item">1233456</li>
*   <li class="flex-item">2</li>
*   <li class="flex-item">2</li>
* </ul>
*/
main.content.buy-details {
    -ms-box-orient: vertical;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  main.content.buy-details .spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    filter: invert(1);
    margin: auto;
  }
  main.content.buy-details .line {
    display: flex;
    flex-direction: column-reverse;
    flex-grow: 0;
    flex-wrap: nowrap;
  }
  @media (min-width: 900px) {
    main.content.buy-details .line {
      flex-direction: row;
    }
  }
  main.content.buy-details article header {
    position: relative;
    font-weight: 100;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 2em;
    padding-top: 2em;
  }
  @media (max-width: 599px) {
    main.content.buy-details article header {
      padding-bottom: 1em;
      padding-top: 1em;
    }
  }
  main.content.buy-details article .show-mobile {
    display: block;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .show-mobile {
      display: none;
    }
  }
  main.content.buy-details article .hide-mobile {
    display: none;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .hide-mobile {
      display: block;
    }
  }
  main.content.buy-details article .text-centered {
    text-align: center;
  }
  main.content.buy-details article .header1 {
    font-size: 1em;
    font-weight: 200;
    margin: 0;
    text-transform: uppercase;
    font-size: 1.6em;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .header1 {
      font-size: 2em;
    }
  }
  main.content.buy-details article .header2 {
    position: relative;
    font-size: 1.2em;
    font-weight: 500;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .header2 {
      font-size: 1.4em;
    }
  }
  main.content.buy-details article .tagline {
    display: block;
    font-size: 1em;
    font-weight: normal;
    margin: 0;
    padding-top: 10px;
  }
  main.content.buy-details article div.buy {
    padding-top: 1em;
    text-align: center;
  }
  main.content.buy-details article div.buy .price {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
  }
  main.content.buy-details article div.buy .price span {
    color: white;
    font-weight: 700;
  }
  main.content.buy-details article div.buy .add-to-cart {
    cursor: pointer;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 300;
    padding: 5px;
    min-width: 250px;
    border-radius: 2.5px;
    border: none;
    -webkit-transition: All 0.4s ease;
    -moz-transition: All 0.4s ease;
    -o-transition: All 0.4s ease;
    -ms-transition: All 0.4s ease;
    transition: All 0.4s ease;
  }
  main.content.buy-details article img {
    width: 100%;
    max-width: 35em;
  }
  @media (min-width: 1800px) {
    main.content.buy-details article img {
      max-width: 40em;
    }
  }
  main.content.buy-details article .line-wrap {
    display: flex;
    flex-wrap: wrap;
  }
  main.content.buy-details article .product {
    width: 100%;
    padding-top: 2em;
    text-align: center;
    height: 20em;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .product {
      padding-top: 0;
      width: 50%;
      height: 30em;
    }
  }
  main.content.buy-details article .product.show-mobile {
    padding-top: 0;
  }
  main.content.buy-details article .block.colors .option {
    background-size: 100%;
    width: 9em;
  }

  @media (max-width: 599px){
    main.content.buy-details article .block.colors .option {
      width: calc(50% - 2em);
    }
  }
  main.content.buy-details article .block.colors .option .image {
    width: 100%;
    height: 3em;
    border-radius: 0.5em;
    margin-bottom: 0.5em;
    background-color: #000;
    background-size: 100%;
  }
  main.content.buy-details article .options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 1em);
    padding-left: 1em;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .options {
      justify-content: flex-start;
      width: 50%;
      padding-left: 2em;
    }
  }
  main.content.buy-details article .options > div {
    padding-top: 1em;
  }
  main.content.buy-details article .options > div:first-child {
    padding-top: 2em;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .options > div:first-child {
      padding-top: 0;
    }
  }
  main.content.buy-details article .options .header2 {
    padding-bottom: 0.5em;
    text-align: center;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .options .header2 {
      text-align: left;
    }
  }
  main.content.buy-details article .options .option {
    cursor: pointer;
    padding: 0.5em;
    width: calc(50% - 2em);
    min-width: 9em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    text-align: center;
    color: #6c6c6c;
    border: 1px solid #e5e5e5;
    border-radius: 1em;
    -webkit-transition: All 0.2s ease;
    -moz-transition: All 0.2s ease;
    -o-transition: All 0.2s ease;
    -ms-transition: All 0.2s ease;
    transition: All 0.2s ease;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .options .option {
      width: auto;
    }
  }
  main.content.buy-details article .options .option:hover {
    background-color: #e5e5e5;
  }
  main.content.buy-details article .options .option.active {
    color: white;
    background-color: #327b44;
  }
  main.content.buy-details article .options .option .title {
    font-size: 2em;
  }
  main.content.buy-details article .options .option .title.thin {
    font-weight: 100;
  }
  main.content.buy-details article .options .option .title.bold {
    font-weight: 700;
  }
  @media (max-width: 599px) {
  }
  main.content.buy-details article .accessories {
    background-color: #e5e5e5;
    padding-top: 2em;
    padding-bottom: 2em;
    margin-top: 2em;
  }
  @media (max-width: 599px) {
    main.content.buy-details article .accessories {
      padding-top: 1em;
      padding-bottom: 1em;
    }
  }
  main.content.buy-details article .accessories .line {
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .accessories .line {
      flex-direction: row;
    }
  }
  main.content.buy-details article .accessories .block {
    border-radius: 0.5em;
    background-color: #F2F2F2;
    width: calc(100% - 2em);
    margin-bottom: 1em;
    cursor: pointer;
    text-align: center;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .accessories .block {
      width: calc(50% - 1em);
      margin-right: 1em;
      min-height: 12em;
    }
  }
  main.content.buy-details article .accessories .block.active {
    color: white;
    background-color: #327b44;
  }
  main.content.buy-details article .accessories .block.free {
    cursor: auto;
  }
  main.content.buy-details article .accessories .block .image {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    height: 40%;
    width: 40%;
    min-height: 5em;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .accessories .block .image {
      min-height: 12em;
    }
  }
  main.content.buy-details article .accessories .block .image img {
    display: block;
    max-height: 5em;
    width: auto;
    max-width: 100%;
  }
  @media (min-width: 900px) {
    main.content.buy-details article .accessories .block .image img {
      max-height: 12em;
    }
  }
  main.content.buy-details article .accessories .block .title {
    padding-top: 1em;
    padding-right: 1em;
  }
  main.content.buy-details article .accessories .block .price {
    font-weight: 100;
    font-size: 2em;
    padding-top: 0.5em;
  }
  main.content.buy-details article .accessories .block .price span {
    padding-right: 0.25em;
    font-size: 1.2em;
  }
  main.content.buy-details article .accessories .block .description {
    max-height: 10em;
    overflow: hidden;
    line-height: 1.3em;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-right: 1em;
  }
  main.content.buy-details [class^="button-"][disabled] {
    background-color: #9f9f9f;
    color: white;
  }

  main.content.buy-details article .options .option .icon{
    width: 30%;
    mask: url("/images/extend-warranty/br_lens_icon.svg") no-repeat center / contain;
    -webkit-mask: url("/images/extend-warranty/br_lens_icon.svg") no-repeat center / contain;
    height: 100%;
    background-color: #6c6c6c;
  }

  main.content.buy-details article .options .option.br{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
  }

  main.content.buy-details article .options .option.alert{
    border-color: #ef4030;
    color: #ef4030;
  }
  
  main.content.buy-details article .options .option.alert .icon{
    background-color: #ef4030;
  }

  main.content.buy-details article .options .option.active .icon{
    background-color: #ffffff;
  }

  main.content.buy-details article .options #fill-required{
    color: #9F9F9F;
    margin-top: 1%;
  }
  main.content.buy-details article .options #fill-required.alert{
    color: #ef4030;
  }

  main.content.buy-details article .options .colors.dn {
    display: none;
  }