/* Contains all of the site-specific variables for nokona.com site */

/* this sets the padding of the body tag on desktop layout. The headers are
  slightly different on the two sites due to the logo. */

/**
 * @license
 * MyFonts Webfont Build ID 3774138, 2019-06-14T12:52:51-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: EvelethCleanRegular by Yellow Design Studio
 * URL: https://www.myfonts.com/fonts/yellow-design/eveleth/clean-regular/
 * Copyright: Copyright (c) 2014 by Yellow Design Studio. All rights reserved.
 * Licensed pageviews: 500,000
 * 
 * Webfont: EvelethCleanThin by Yellow Design Studio
 * URL: https://www.myfonts.com/fonts/yellow-design/eveleth/clean-thin/
 * Copyright: Copyright (c) 2014 by Yellow Design Studio. All rights reserved.
 * Licensed pageviews: 500,000
 * 
 * Webfont: Campton-Bold by Rene Bieder
 * URL: https://www.myfonts.com/fonts/rene-bieder/campton/bold/
 * Copyright: Copyright © 2017 by René Bieder. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * Webfont: Campton-Book by Rene Bieder
 * URL: https://www.myfonts.com/fonts/rene-bieder/campton/book/
 * Copyright: Copyright © 2017 by René Bieder. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * Webfont: Campton-ExtraBold by Rene Bieder
 * URL: https://www.myfonts.com/fonts/rene-bieder/campton/extra-bold/
 * Copyright: Copyright © 2017 by René Bieder. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * Webfont: Campton-Light by Rene Bieder
 * URL: https://www.myfonts.com/fonts/rene-bieder/campton/light/
 * Copyright: Copyright © 2017 by René Bieder. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * Webfont: Campton-Medium by Rene Bieder
 * URL: https://www.myfonts.com/fonts/rene-bieder/campton/medium/
 * Copyright: Copyright © 2017 by René Bieder. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * Webfont: Campton-SemiBold by Rene Bieder
 * URL: https://www.myfonts.com/fonts/rene-bieder/campton/semi-bold/
 * Copyright: Copyright © 2017 by René Bieder. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * Webfont: Campton-SemiBoldItalic by Rene Bieder
 * URL: https://www.myfonts.com/fonts/rene-bieder/campton/semi-bold-italic/
 * Copyright: Copyright © 2016 by René Bieder. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3774138
 * 
 * © 2019 MyFonts Inc
*/

/* @import must be at top of file, otherwise CSS will not work */

/* @import url("//hello.myfonts.net/count/3996ba"); */

@font-face {
  font-family: "EvelethClean";
  font-weight: 400;
  font-style: normal;
  src: url(/wp-content/themes/nokona-2019/fonts/3996BA_0_0.woff2) format("woff2"), url(/wp-content/themes/nokona-2019/fonts/3996BA_0_0.woff) format("woff");
}

@font-face {
  font-family: "EvelethClean";
  font-weight: 100;
  font-style: normal;
  src: url(/wp-content/themes/nokona-2019/fonts/3996BA_1_0.woff2) format("woff2"), url(/wp-content/themes/nokona-2019/fonts/3996BA_1_0.woff) format("woff");
}

@font-face {
  font-family: "Campton";
  font-weight: 700;
  font-style: normal;
  src: url(/wp-content/themes/nokona-2019/fonts/3996BA_2_0.woff2) format("woff2"), url(/wp-content/themes/nokona-2019/fonts/3996BA_2_0.woff) format("woff");
}

@font-face {
  font-family: "Campton";
  font-weight: 400;
  font-style: normal;
  src: url(/wp-content/themes/nokona-2019/fonts/3996BA_3_0.woff2) format("woff2"), url(/wp-content/themes/nokona-2019/fonts/3996BA_3_0.woff) format("woff");
}

@font-face {
  font-family: "Campton";
  font-weight: 900;
  font-style: normal;
  src: url(/wp-content/themes/nokona-2019/fonts/3996BA_4_0.woff2) format("woff2"), url(/wp-content/themes/nokona-2019/fonts/3996BA_4_0.woff) format("woff");
}

@font-face {
  font-family: "Campton";
  font-weight: 100;
  font-style: normal;
  src: url(/wp-content/themes/nokona-2019/fonts/3996BA_5_0.woff2) format("woff2"), url(/wp-content/themes/nokona-2019/fonts/3996BA_5_0.woff) format("woff");
}

@font-face {
  font-family: "Campton";
  font-weight: 500;
  font-style: normal;
  src: url(/wp-content/themes/nokona-2019/fonts/3996BA_6_0.woff2) format("woff2"), url(/wp-content/themes/nokona-2019/fonts/3996BA_6_0.woff) format("woff");
}

@font-face {
  font-family: "Campton";
  font-weight: 600;
  font-style: normal;
  src: url(/wp-content/themes/nokona-2019/fonts/3996BA_7_0.woff2) format("woff2"), url(/wp-content/themes/nokona-2019/fonts/3996BA_7_0.woff) format("woff");
}

@font-face {
  font-family: "Campton";
  font-weight: 600;
  font-style: italic;
  src: url(/wp-content/themes/nokona-2019/fonts/3996BA_8_0.woff2) format("woff2"), url(/wp-content/themes/nokona-2019/fonts/3996BA_8_0.woff) format("woff");
}

@font-face {
  font-family: "Filmotype Hickory";
  src: url(/wp-content/themes/nokona-2019/fonts/filmotype.woff2) format("woff2"),
    url(/wp-content/themes/nokona-2019/fonts/filmotype.woff) format("woff");
}

/* html5doctor.com Reset v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) - http://cssreset.com */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #444;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

a,
:focus,
:active,
:hover {
  outline: 0;
}

/* Extra added for font weights on headers. */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

strong {
  font-weight: 700;
}

.container {
  position: relative;
  margin: 0 auto;
  max-width: 1600px;
  box-sizing: border-box;
  padding: 0 40px
}

@media (max-width: 1020px) {

.container {
    padding: 0 3.912vw
}
  }

@media (max-width: 400px) {

.container {
    padding: 0 5.333vw
}
  }

@media (max-width: 600px) {
    .container.small-no-pad {
      padding: 0;
    }
  }

.medium-container {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
  box-sizing: border-box;
  padding: 0 40px
}

@media (max-width: 1020px) {

.medium-container {
    padding: 0 3.912vw
}
  }

@media (max-width: 400px) {

.medium-container {
    padding: 0 5.333vw
}
  }

@media (max-width: 600px) {
    .medium-container.small-no-pad {
      padding: 0;
    }
  }

.narrow-container {
  position: relative;
  margin: 0 auto;
  max-width: 1020px
}

@media (max-width: 1020px) {

.narrow-container {
    padding: 0 3.912vw
}
  }

@media (max-width: 400px) {

.narrow-container {
    padding: 0 5.333vw
}
  }

@media (max-width: 600px) {
    .narrow-container.small-no-pad {
      padding: 0;
    }
  }

/* have to prepend share- on this because .email is used elsewhere already */

.share-email {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-image: url(/wp-content/themes/nokona-2019/img/email.svg);
}

#no-hero-spacer {
  height: 45px;
}

.container select, .medium-container select, .narrow-container select, .variations_form select {
    border: 1px solid #a6a6a6;
    border-radius: 0;
    color: #3b3b3b;
    box-sizing: border-box;
    font: 16px/16px "Campton", sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px 30px 8px 9px;
    background: #fff no-repeat right center/21px 8px
      url(/wp-content/themes/nokona-2019/img/dropdown-arrow.svg);
  }

@media (max-width: 600px) {

.hide-small {
    display: none
}
  }

/************************************************************
 * RADIO BUTTON
 ************************************************************/

.radio {
  display: flex;
  height: 16px;
  align-items: center;
}

.radio label {
    position: relative;
    padding: 0 5px 0 22px;
    cursor: pointer;
    line-height: 122%
  }

.radio label::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 15px;
      height: 15px;
      box-sizing: border-box;
      border: solid 1px #c4c4c4;
      border-radius: 50%;
    }

.radio label::after {
      content: "";
      position: absolute;
      left: 3px;
      top: 3px;
      width: 9px;
      height: 9px;
      background: #ff6b00;
      border-radius: 50%;
      transform: scale(0);
      transition: transform 0.25s ease;
    }

.radio input[type="radio"] {
    visibility: hidden;
    display: none
  }

.radio input[type="radio"]:checked + label::after {
      transform: scale(1);
    }

/************************************************************
 * BREADCRUMB
 ************************************************************/

#breadcrumb {
  margin-bottom: 25px;
}

#breadcrumb .woocommerce-breadcrumb {
    margin-bottom: 5px;
  }

#breadcrumb.tight-spacing {
    margin-bottom: 5px;
  }

#breadcrumb {

  font-size: 10px;
  text-align: left;
}

#breadcrumb span {
    display: inline-block;
    white-space: nowrap;
    text-transform: uppercase;
    margin: 0 6px;
    color: #000;
  }

#breadcrumb a {
    color: #000;
    border-bottom: solid 1px #fff;
    transition: all 0.2s ease;
    font-weight: normal
  }

#breadcrumb a:hover {
      color: #ff6b00;
      border-color: #000;
    }

#breadcrumb span:last-child {
    font-weight: 600;
    color: #777;
  }

@media (max-width: 750px) {

#breadcrumb {
    margin-bottom: 3.333vw
}
  }

.info-icon {
  display: inline-block;
  width: 19px;
  position: relative;
  margin-left: 12px
}

.info-icon::before {
    content: "";
    position: absolute;
    top: calc(50% - 10px);
    left: 0;
    width: 19px;
    height: 19px;
    background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/info-icon.svg);
    cursor: pointer;
  }

.info-icon .info-content {
    display: none;
  }

.container input[type="text"],
  .container input[type="password"],
  .container input[type="email"],
  .container input[type="tel"],
  .container input[type="date"],
  .medium-container input[type="text"],
  .medium-container input[type="password"],
  .medium-container input[type="email"],
  .medium-container input[type="tel"],
  .medium-container input[type="date"],
  .narrow-container input[type="text"],
  .narrow-container input[type="password"],
  .narrow-container input[type="email"],
  .narrow-container input[type="tel"],
  .narrow-container input[type="date"],
  .variations_form input[type="text"],
  .variations_form input[type="password"],
  .variations_form input[type="email"],
  .variations_form input[type="tel"],
  .variations_form input[type="date"] {
    width: 260px;
    height: 35px;
    box-sizing: border-box;
    border: solid 1px #c4c4c4;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 206.25%;
  }

.variations_form textarea {
  box-sizing: border-box;
  border: solid 1px #c4c4c4;
  padding: 0 10px;
  font: 500 16px/1.4em "Campton", sans-serif;
}

/* For sections that are blocks and need to have a standard spacing to the next block */

.block-section {
  margin-bottom: 100px;
  overflow: hidden;
  position: relative
}

@media (max-width: 750px) {

.block-section {
    margin-bottom: 13.333vw
}
  }

.block-section.wp-block-columns {
    flex-wrap: nowrap
  }

@media (max-width: 600px) {

.block-section.wp-block-columns {
      flex-wrap: wrap
  }
    }

.block-section.wp-block-columns.has-2-columns .wp-block-column:nth-of-type(1) {
      flex-basis: 35%
    }

@media (max-width: 750px) {

.block-section.wp-block-columns.has-2-columns .wp-block-column:nth-of-type(1) {
        font-size: 12px
    }
      }

@media (max-width: 600px) {

.block-section.wp-block-columns.has-2-columns .wp-block-column:nth-of-type(1) {
        flex-basis: 100%
    }
      }

.block-section.wp-block-columns.has-2-columns .wp-block-column:nth-of-type(2) {
      flex-basis: 69%;
      margin-left: 20px
    }

@media (max-width: 600px) {

.block-section.wp-block-columns.has-2-columns .wp-block-column:nth-of-type(2) {
        flex-basis: 100%;
        margin-left: 0
    }
      }

.block-section .wp-block-image {
    margin-left: auto;
    margin-right: auto;
  }

.block-section .wp-block-image img {
      height: auto;
    }

@media (max-width: 600px) {
  .block-section .wp-block-image {
      text-align: center
  }
    }

/* if a block section is inside of another, strip out all margins and padding */

.block-section .block-section {
    margin: 0;
    padding: 0;
  }

.block-section h1 {
    text-transform: uppercase;
    font-size: 48px;
    line-height: 108.333%;
    font-family: "EvelethClean", sans-serif;
    margin-bottom: 15px;
    margin-top: 8%
  }

@media (max-width: 1020px) {
  .block-section h1 {
      margin-top: 5.912vw
  }
    }

@media (max-width: 400px) {
  .block-section h1 {
      margin-top: 7.333vw
  }
    }

.block-section h2 {
    text-transform: uppercase;
    font-size: 20px;
    line-height: 120%;
    font-family: "EvelethClean", sans-serif;
    margin-bottom: 7px;
    letter-spacing: 0.037em
  }

@media (max-width: 750px) {
  .block-section h2 {
      font-size: 17px;
      line-height: 123.5294%
  }
    }

/* General styles */

.large-header-style {
  text-align: left;
  text-transform: uppercase;
  font-size: 48px;
  line-height: 108.333%;
  font-family: "EvelethClean", sans-serif;
  margin-bottom: 15px;
  margin-top: 8%;
  color: #000
}

@media (max-width: 1020px) {

.large-header-style {
    margin-top: 5.912vw
}
  }

@media (max-width: 400px) {

.large-header-style {
    margin-top: 7.333vw
}
  }

.medium-header-style {
  text-align: left;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 120%;
  font-family: "EvelethClean", sans-serif;
  margin-bottom: 7px;
  letter-spacing: 0.037em;
  color: #000
}

@media (max-width: 750px) {

.medium-header-style {
    font-size: 17px;
    line-height: 123.5294%
}
  }

.left-align {
  text-align: left;
}

.narrow-p {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

p {
  text-align: left;
  margin-bottom: 31px;
  font-weight: 300
}

@media (max-width: 750px) {

p {
    margin-bottom: 6vw
}
  }

li {
  font-weight: 300;
}

.search-string {
  display: inline-block;
  color: #ff6b00;
}

/* yeah not the best place for this, but feels like a search file is overkill */

.sorter-container form {
    position: relative;
    margin: 0 0 0 14px;
  }

.sorter-container form input[type="text"] {
      box-sizing: border-box;
      height: 40px;
      font: 500 16px/250% "Campton", sans-serif;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 0;
      width: 190px;
      padding: 0 40px 0 15px
    }

.sorter-container form input[type="text"]::-moz-placeholder {
        font-size: 16px;
      }

input[type="text"]::-moz-placeholder {
        font-size: 16px;
      }

.sorter-container form input[type="text"]::placeholder {
        font-size: 16px;
      }

.sorter-container form button {
      -webkit-appearance: none;
      position: absolute;
      top: 0;
      right: 0;
      width: 40px;
      height: 40px;
      background: no-repeat center/13.11px 13.03px url(/wp-content/themes/nokona-2019/img/spyglass.svg);
      font-size: 0;
      border: none;
      padding: 0;
      display: block;
    }

/* this is used for enabling links on blocks so they scroll up to the correct part of the page. */

.link-handle {
  position: absolute;
  left: 0;
  top: -200px;
  /* just going to make sure it is explicitly nowhere to be found, that other styles aren't
     affecting it. */
  width: 0;
  height: 0;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden
}

@media (max-width: 900px) {

.link-handle {
    top: -75px
}
  }

@media (max-width: 600px) {

.link-handle {
    top: -45px
}
  }

@media (min-width: 901px) {

.mobile-menu-only {
    display: none
}
  }

.cmp-reg-price del {
    -webkit-text-decoration-color: #a2a2a2;
            text-decoration-color: #a2a2a2;
  }

.cmp-reg-price ins {
    color: #ff6b00;
    background-color: transparent;
    background-color: initial;
  }

/**************************************
 * TOP SECTION
 **************************************/

.header-utility-bar,
#header-top {
  background: #000;
  color: #fff;
  padding: 10px 0;
  border-bottom: solid 1px rgba(255, 107, 0, 0.9);
  transition: border-color 0.2s linear;
}

body.scroll-down .header-utility-bar, body.scroll-down #header-top {
    border-color: rgba(0,0,0,0);
  }

@media (max-width: 900px) {

.header-utility-bar,
#header-top {
    padding: 0
}
  }

.header-utility-bar .container, #header-top .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    overflow: visible;
    max-width: 1900px
  }

@media (max-width: 900px) {

  .header-utility-bar .container, #header-top .container {
      padding: 0;
      flex-wrap: wrap
  }
    }

.header-utility-bar .header-branding,
  .header-utility-bar .left-links,
  #header-top .header-branding,
  #header-top .left-links {
    display: flex;
    align-items: center;
    grid-gap: 20px;
    grid-gap: 20px;
    gap: 20px
  }

@media (max-width: 900px) {

  .header-utility-bar .header-branding,
  .header-utility-bar .left-links,
  #header-top .header-branding,
  #header-top .left-links {
      display: none
  }
    }

.header-utility-bar .header-branding #logo, .header-utility-bar .left-links #logo, #header-top .header-branding #logo, #header-top .left-links #logo {
      flex-shrink: 0;
      font-size: 0;
      width: 246px;
      height: 58px;
      background: no-repeat center/100% auto url(/wp-content/themes/nokona-2019/img/nokona-dark-bg.svg)
    }

@media (max-width: 600px) {

    .header-utility-bar .header-branding #logo, .header-utility-bar .left-links #logo, #header-top .header-branding #logo, #header-top .left-links #logo {
        width: 120px;
        height: 28px
    }
      }

.header-utility-bar .header-actions,
  .header-utility-bar .right-links,
  #header-top .header-actions,
  #header-top .right-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px 0 0;
    width: 50%;
    grid-gap: 10px;
    grid-gap: 10px;
    gap: 10px
  }

@media (max-width: 900px) {

  .header-utility-bar .header-actions,
  .header-utility-bar .right-links,
  #header-top .header-actions,
  #header-top .right-links {
      display: none
  }
    }

.header-utility-bar .header-actions .links, .header-utility-bar .right-links .links, #header-top .header-actions .links, #header-top .right-links .links {
      display: flex;
      flex-grow: 3;
      flex-direction: column;
      align-items: flex-end;
      grid-gap: 5px;
      grid-gap: 5px;
      gap: 5px;
    }

.header-utility-bar .header-actions #chief-nocona-logo, .header-utility-bar .right-links #chief-nocona-logo, #header-top .header-actions #chief-nocona-logo, #header-top .right-links #chief-nocona-logo {
      width: 64px;
      height: 60px;
      background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/chief-nocona.svg);
      flex-shrink: 0;
    }

.header-utility-bar .header-actions #top-links, .header-utility-bar .right-links #top-links, #header-top .header-actions #top-links, #header-top .right-links #top-links {
      min-height: 40px;
    }

.header-utility-bar .header-secondary-links, #header-top .header-secondary-links {
    display: flex;
    align-items: center;
    padding: 0 19px 5px 0;
    overflow: visible
  }

@media (max-width: 900px) {

  .header-utility-bar .header-secondary-links, #header-top .header-secondary-links {
      display: none
  }
    }

.header-utility-bar .header-secondary-links .header-service-links,
    .header-utility-bar .header-secondary-links #header-services,
    #header-top .header-secondary-links .header-service-links,
    #header-top .header-secondary-links #header-services {
      display: flex;
      align-items: center;
      grid-gap: 15px;
      grid-gap: 15px;
      gap: 15px;
      overflow: visible;
    }

.header-utility-bar .header-secondary-links #customer-service, #header-top .header-secondary-links #customer-service {
      position: relative;
      text-align: left;
      overflow: hidden;
    }

.header-utility-bar .header-secondary-links #customer-service .header, #header-top .header-secondary-links #customer-service .header {
        display: flex;
        align-items: center;
        color: rgb(161, 161, 161);
        font: 500 13px/1em "Campton", sans-serif;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
        position: relative
      }

.header-utility-bar .header-secondary-links #customer-service .header::before, #header-top .header-secondary-links #customer-service .header::before {
          content: "";
          width: 14px;
          aspect-ratio: 1;
          background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/info-circle.svg);
          margin-right: 6px;
          margin-bottom: 2px;
          filter: brightness(0) saturate(100%) invert(73%) sepia(0%)
            saturate(0%) hue-rotate(227deg) brightness(95%) contrast(88%);
        }

.header-utility-bar .header-secondary-links #customer-service .header::after, #header-top .header-secondary-links #customer-service .header::after {
          content: "";
          width: 10.92px;
          height: 6.96px;
          background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/arrow-down-grey.svg);
          filter: brightness(0) saturate(100%) invert(73%) sepia(0%)
            saturate(0%) hue-rotate(227deg) brightness(95%) contrast(88%);
          margin-left: 7px;
          margin-top: -2px;
          position: relative;
          transition: all 0.3s ease;
          transform: translateY(0) rotate(0);
        }

.header-utility-bar .header-secondary-links #customer-service .header:hover::after, #header-top .header-secondary-links #customer-service .header:hover::after {
          transform: translateY(3px) rotate(0);
        }

.header-utility-bar .header-secondary-links #customer-service .header label, #header-top .header-secondary-links #customer-service .header label {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          cursor: pointer;
        }

.header-utility-bar .header-secondary-links #customer-service .dropdown, #header-top .header-secondary-links #customer-service .dropdown {
        position: absolute;
        top: calc(100% + 15px);
        right: -999em;
        border: solid 1px #c4beb6;
        background-color: #fff;
        width: 248px;
        box-sizing: border-box;
        padding: 24px 21px 4px;
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.4s, transform 0.4s ease;
        z-index: 100;
      }

.header-utility-bar .header-secondary-links #customer-service .dropdown h2, #header-top .header-secondary-links #customer-service .dropdown h2 {
          font: 900 15px/18px "Campton", sans-serif;
          letter-spacing: 0.05em;
          color: #ff6b00;
          text-transform: uppercase;
          margin-bottom: 14px;
        }

.header-utility-bar .header-secondary-links #customer-service .dropdown ul, #header-top .header-secondary-links #customer-service .dropdown ul {
          list-style: none;
        }

.header-utility-bar .header-secondary-links #customer-service .dropdown li, #header-top .header-secondary-links #customer-service .dropdown li {
          padding: 14px 0 10px;
          border-bottom: solid 1px #eae8e5;
          letter-spacing: 0.05em;
          color: #000
        }

.header-utility-bar .header-secondary-links #customer-service .dropdown li:last-child, #header-top .header-secondary-links #customer-service .dropdown li:last-child {
            border-bottom: none;
          }

.header-utility-bar .header-secondary-links #customer-service .dropdown li a, #header-top .header-secondary-links #customer-service .dropdown li a {
            transition: color 0.2s ease;
            display: block;
            width: 100%;
            color: inherit
          }

.header-utility-bar .header-secondary-links #customer-service .dropdown li a:hover, #header-top .header-secondary-links #customer-service .dropdown li a:hover {
              color: #ff6b00;
            }

.header-utility-bar .header-secondary-links #customer-service-open,
    .header-utility-bar .header-secondary-links #customer-service-closed,
    .header-utility-bar .header-secondary-links #customer-service .cs-shadow,
    #header-top .header-secondary-links #customer-service-open,
    #header-top .header-secondary-links #customer-service-closed,
    #header-top .header-secondary-links #customer-service .cs-shadow {
      display: none;
    }

.header-utility-bar .header-secondary-links #customer-service-open:checked ~ #customer-service, #header-top .header-secondary-links #customer-service-open:checked ~ #customer-service {
      overflow: visible;
    }

.header-utility-bar .header-secondary-links #customer-service-open:checked ~ #customer-service .header label[for="customer-service-closed"], #header-top .header-secondary-links #customer-service-open:checked ~ #customer-service .header label[for="customer-service-closed"] {
          z-index: 99999;
        }

.header-utility-bar .header-secondary-links #customer-service-open:checked ~ #customer-service .header::after, #header-top .header-secondary-links #customer-service-open:checked ~ #customer-service .header::after {
          transform: translateY(0) rotate(180deg);
        }

.header-utility-bar .header-secondary-links #customer-service-open:checked ~ #customer-service .cs-shadow, #header-top .header-secondary-links #customer-service-open:checked ~ #customer-service .cs-shadow {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0);
        z-index: 99998;
      }

.header-utility-bar .header-secondary-links #customer-service-open:checked ~ #customer-service .dropdown, #header-top .header-secondary-links #customer-service-open:checked ~ #customer-service .dropdown {
        right: -15px;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.3s linear, transform 0.3s ease;
        z-index: 99999;
      }

.header-utility-bar .header-secondary-links .social-links, #header-top .header-secondary-links .social-links {
      display: flex;
      grid-gap: 12px;
      grid-gap: 12px;
      gap: 12px;
    }

.header-utility-bar .header-secondary-links .social-links a, #header-top .header-secondary-links .social-links a {
        width: 19px;
        height: 19px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center
      }

.header-utility-bar .header-secondary-links .social-links a.instagram,
        .header-utility-bar .header-secondary-links .social-links a.facebook,
        #header-top .header-secondary-links .social-links a.instagram,
        #header-top .header-secondary-links .social-links a.facebook {
          filter: brightness(0) saturate(100%) invert(73%) sepia(0%)
            saturate(0%) hue-rotate(227deg) brightness(95%) contrast(88%)
        }

.header-utility-bar .header-secondary-links .social-links a.instagram:hover, .header-utility-bar .header-secondary-links .social-links a.facebook:hover, #header-top .header-secondary-links .social-links a.instagram:hover, #header-top .header-secondary-links .social-links a.facebook:hover {
            opacity: 0.7;
          }

.header-utility-bar .header-secondary-links #made-in-america, #header-top .header-secondary-links #made-in-america {
      font-size: 0;
      width: 56px;
      height: 16px;
      background: no-repeat center/100% 100% url(/wp-content/themes/nokona-2019/img/us-flag.svg);
      border-bottom: none;
      display: inline-block;
    }

.header-utility-bar .header-primary-links,
  .header-utility-bar #top-links,
  #header-top .header-primary-links,
  #header-top #top-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

.header-utility-bar .header-primary-links form, .header-utility-bar #top-links form, #header-top .header-primary-links form, #header-top #top-links form {
      position: relative;
      margin: 0 14px;
    }

.header-utility-bar .header-primary-links form input, .header-utility-bar #top-links form input, #header-top .header-primary-links form input, #header-top #top-links form input {
        -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
        border: none;
        border-radius: 0;
        background: #000 no-repeat center/13.11px 13.03px
          url(/wp-content/themes/nokona-2019/img/spyglass-dark-bg.svg);

        box-sizing: border-box;
        width: 40px;
        height: 40px;
        font: 500 0/40px "Campton", sans-serif;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 0
      }

.header-utility-bar .header-primary-links form input::-moz-placeholder, .header-utility-bar #top-links form input::-moz-placeholder, #header-top .header-primary-links form input::-moz-placeholder, #header-top #top-links form input::-moz-placeholder {
          color: transparent;
        }

input::-moz-placeholder {
          color: transparent;
        }

.header-utility-bar .header-primary-links form input::placeholder, .header-utility-bar #top-links form input::placeholder, #header-top .header-primary-links form input::placeholder, #header-top #top-links form input::placeholder {
          color: transparent;
        }

.header-utility-bar .header-primary-links form button, .header-utility-bar #top-links form button, #header-top .header-primary-links form button, #header-top #top-links form button {
        -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
        background: no-repeat center/13.11px 13.03px url(/wp-content/themes/nokona-2019/img/spyglass.svg);
        font-size: 0;
        border: none;
        padding: 0;
        display: none;
      }

.header-utility-bar .header-primary-links form[focus-within] input, .header-utility-bar #top-links form[focus-within] input, #header-top .header-primary-links form[focus-within] input, #header-top #top-links form[focus-within] input {
          width: 190px;
          padding: 0 40px 0 15px;
          background: #fff;
          font-size: 16px;
          transition: width 0.4s ease, background-color 0.4s ease
        }

.header-utility-bar .header-primary-links form[focus-within] input::-moz-placeholder, .header-utility-bar #top-links form[focus-within] input::-moz-placeholder, #header-top .header-primary-links form[focus-within] input::-moz-placeholder, #header-top #top-links form[focus-within] input::-moz-placeholder {
            color: #999;
          }

input::-moz-placeholder {
            color: #999;
          }

.header-utility-bar .header-primary-links form[focus-within] input::placeholder, .header-utility-bar #top-links form[focus-within] input::placeholder, #header-top .header-primary-links form[focus-within] input::placeholder, #header-top #top-links form[focus-within] input::placeholder {
            color: #999;
          }

.header-utility-bar .header-primary-links form[focus-within] button, .header-utility-bar #top-links form[focus-within] button, #header-top .header-primary-links form[focus-within] button, #header-top #top-links form[focus-within] button {
          display: block;
        }

.header-utility-bar .header-primary-links form[focus-within] input, .header-utility-bar #top-links form[focus-within] input, #header-top .header-primary-links form[focus-within] input, #header-top #top-links form[focus-within] input {
          width: 190px;
          padding: 0 40px 0 15px;
          background: #fff;
          font-size: 16px;
          transition: width 0.4s ease, background-color 0.4s ease
        }

.header-utility-bar .header-primary-links form:focus-within input, .header-utility-bar #top-links form:focus-within input, #header-top .header-primary-links form:focus-within input, #header-top #top-links form:focus-within input {
          width: 190px;
          padding: 0 40px 0 15px;
          background: #fff;
          font-size: 16px;
          transition: width 0.4s ease, background-color 0.4s ease
        }

.header-utility-bar .header-primary-links form[focus-within] input::-moz-placeholder, .header-utility-bar #top-links form[focus-within] input::-moz-placeholder, #header-top .header-primary-links form[focus-within] input::-moz-placeholder, #header-top #top-links form[focus-within] input::-moz-placeholder {
            color: #999;
          }

.header-utility-bar .header-primary-links form:focus-within input::-moz-placeholder, .header-utility-bar #top-links form:focus-within input::-moz-placeholder, #header-top .header-primary-links form:focus-within input::-moz-placeholder, #header-top #top-links form:focus-within input::-moz-placeholder {
            color: #999;
          }

input::-moz-placeholder {
            color: #999;
          }

.header-utility-bar .header-primary-links form[focus-within] input::placeholder, .header-utility-bar #top-links form[focus-within] input::placeholder, #header-top .header-primary-links form[focus-within] input::placeholder, #header-top #top-links form[focus-within] input::placeholder {
            color: #999;
          }

input::-moz-placeholder {
            color: #999;
          }

.header-utility-bar .header-primary-links form:focus-within input::placeholder, .header-utility-bar #top-links form:focus-within input::placeholder, #header-top .header-primary-links form:focus-within input::placeholder, #header-top #top-links form:focus-within input::placeholder {
            color: #999;
          }

.header-utility-bar .header-primary-links form[focus-within] button, .header-utility-bar #top-links form[focus-within] button, #header-top .header-primary-links form[focus-within] button, #header-top #top-links form[focus-within] button {
          display: block;
        }

.header-utility-bar .header-primary-links form:focus-within button, .header-utility-bar #top-links form:focus-within button, #header-top .header-primary-links form:focus-within button, #header-top #top-links form:focus-within button {
          display: block;
        }

@media (max-width: 900px) {

      .header-utility-bar .header-primary-links form[focus-within], .header-utility-bar #top-links form[focus-within], #header-top .header-primary-links form[focus-within], #header-top #top-links form[focus-within] {
          display: none
      }

      .header-utility-bar .header-primary-links form[focus-within], .header-utility-bar #top-links form[focus-within], #header-top .header-primary-links form[focus-within], #header-top #top-links form[focus-within] {
          display: none
      }

      .header-utility-bar .header-primary-links form:focus-within, .header-utility-bar #top-links form:focus-within, #header-top .header-primary-links form:focus-within, #header-top #top-links form:focus-within {
          display: none
      }
        }

@media (max-width: 900px) {

    .header-utility-bar .header-primary-links form, .header-utility-bar #top-links form, #header-top .header-primary-links form, #header-top #top-links form {
        display: none
    }
      }

.header-utility-bar .header-primary-links a, .header-utility-bar #top-links a, #header-top .header-primary-links a, #header-top #top-links a {
      font: 500 12px/1em "Campton", sans-serif;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #fff;
      border-bottom: solid 1px transparent;
      transition: all 0.25s ease;
      margin-right: 19px;
      padding-top: 2px
    }

.header-utility-bar .header-primary-links a:hover, .header-utility-bar #top-links a:hover, #header-top .header-primary-links a:hover, #header-top #top-links a:hover {
        color: #ff6b00;
        border-bottom-color: #ff6b00;
      }

@media (max-width: 900px) {

    .header-utility-bar .header-primary-links a, .header-utility-bar #top-links a, #header-top .header-primary-links a, #header-top #top-links a {
        display: none
    }
      }

.facebook {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(/wp-content/themes/nokona-2019/img/f-icon-facebook.svg);
}

.instagram {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(/wp-content/themes/nokona-2019/img/f-icon-instagram.svg);
}

.twitter {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(/wp-content/themes/nokona-2019/img/f-icon-twitter.svg);
}

.pinterest {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(/wp-content/themes/nokona-2019/img/pinterest-share.svg);
}

.youtube {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(/wp-content/themes/nokona-2019/img/f-icon-youtube.svg);
}

header {
  --header-top: 0px;
  --sticky-wrap-height: calc(var(--body-height) - var(--header-top) - 1px);
  z-index: 2000;
  width: 100%
}

@media (min-width: 901px) {

header {
    position: sticky;
    top: var(--header-top);
    transition: transform 0.25s ease;
}

    /* use header-top on formula to slide header-top out of view*/
    body.scroll-down header {
      transform: translateY(calc(-1 * var(--header-top-height)));
    }

    /* slide back to position on scroll up*/
    body.scroll-up header,
    body:not(.scroll-up):not(.scroll-down) header {
      transform: translateY(0);
    }
  }

@media (max-width: 900px) {

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
}
  }

body.admin-bar header {
    --header-top: 32px;
  }

@media (max-width: 900px) {

.header-wrapper,
#header-mobile-wrapper {
    display: flex;
    flex-direction: column;
    background: #ff6b00
}
  }

.header-wrapper .header-sticky, #header-mobile-wrapper .header-sticky {
    background-color: #fff
  }

@media (max-width: 900px) {

  .header-wrapper .header-sticky, #header-mobile-wrapper .header-sticky {
      display: contents
  }
    }

/* #logo is declared in the site specific main file */

.header-mobile-menu,
#header-main {
  background-color: #fff
}

@media (min-width: 901px) {

.header-mobile-menu,
#header-main {
    display: none
}
  }

.header-mobile-menu .container, #header-main .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 19px 40px 17px 36px;
    background-color: #000;
    transition: background-color 0.2s linear;
  }

body.menu-showing .header-mobile-menu .container, body.menu-showing #header-main .container {
      background-color: #000;
      border-top: solid 1px rgba(255, 107, 0, 0.76);
      border-bottom: solid 1px rgba(255, 107, 0, 0.76);
    }

@media (max-width: 900px) {

  .header-mobile-menu .container, #header-main .container {
      padding: 15px 20px;
      flex-wrap: wrap
  }
    }

@media (max-width: 900px) {

.header-mobile-menu,
#header-main {
    order: 1
}
  }

#logo {
  font-size: 0;
  width: 246px;
  height: 58px;
  background: no-repeat center/100% auto url(/wp-content/themes/nokona-2019/img/nokona-dark-bg.svg)
}

@media (max-width: 600px) {

#logo {
    width: 120px;
    height: 28px
}
  }

#email-logo {
  background-image: url(/wp-content/themes/nokona-2019/img/nokona.svg);
  width: 26.27%;
  padding-top: 4.75%;
}

.header-service-links,
#header-services {
  display: flex
}

@media (max-width: 900px) {

.header-service-links,
#header-services {
    display: none
}
  }

header .social-links {
    display: flex;
  }

header .social-links a {
      font-size: 0;
      width: 19px;
      height: 19px;
      transform: scale(1);
      transition: all 0.25s ease
    }

header .social-links a:hover {
        transform: scale(1.1);
      }

#customer-service {
  position: relative;
  text-align: left;
  margin-right: 10px;
  overflow: hidden;
}

#customer-service .dropdown {
    position: absolute;
    top: calc(100% + 15px);
    right: -999em;
    border: solid 1px #c4beb6;
    background-color: #fff;
    width: 248px;
    box-sizing: border-box;
    padding: 24px 21px 4px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s, transform 0.4s ease;
    z-index: 100;
  }

#customer-service .dropdown h2 {
      font: 900 15px/18px "Campton", sans-serif;
      letter-spacing: 0.05em;
      color: #ff6b00;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

#customer-service .dropdown ul {
      list-style: none;
    }

#customer-service .dropdown li {
      padding: 14px 0 10px;
      border-bottom: solid 1px #eae8e5;
      letter-spacing: 0.05em
    }

#customer-service .dropdown li:last-child {
        border-bottom: none;
      }

#customer-service .dropdown li a {
        color: #000;
        transition: color 0.2s ease
      }

#customer-service .dropdown li a:hover {
          color: #ff6b00;
        }

#customer-service.showing {
    overflow: visible;
  }

#customer-service.showing .header::after {
      transform: translateY(0) rotate(180deg);
    }

#customer-service.showing .dropdown {
      right: -15px;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.3s linear, transform 0.3s ease;
      z-index: 99999;
    }

#mobile-search {
  display: block;
  position: relative;
  width: 100%; /* account for the padding */
  flex-shrink: 0;
  padding: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

.menu-showing #mobile-search {
    padding-top: 20px;
    margin-bottom: 3px;
    height: 34px;
    opacity: 1;
  }

#mobile-search input {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    border: solid 1px #999;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    font: 500 16px/34px "Campton", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0 34px 0 15px;
  }

#mobile-search button {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    position: absolute;
    bottom: 6px;
    right: 0;
    width: 34px;
    height: 34px;
    background: no-repeat center/13.11px 13.03px
      url(/wp-content/themes/nokona-2019/img/spyglass-dark-bg.svg);
    font-size: 0;
    border: none;
    padding: 0;
  }

@media (min-width: 601px) {

#mobile-search {
    display: none
}
  }

/**************************************
 * BOTTOM (NAV) SECTION
 **************************************/

.header-navigation,
#header-nav {
  background: #000
}

@media (max-width: 900px) {

.header-navigation,
#header-nav {
    order: 2
}
  }

.header-navigation .container, #header-nav .container {
    padding: 0 40px 0 20px;
    max-width: 1900px
  }

@media (max-width: 1020px) {

  .header-navigation .container, #header-nav .container {
      padding-left: 3.529vw;
      padding-right: 3.921vw
  }
    }

@media (max-width: 900px) {

  .header-navigation .container, #header-nav .container {
      padding: 0;
      overflow: hidden
  }
    }

.header-navigation nav, #header-nav nav {
    display: flex;
    justify-content: center
  }

@media (max-width: 900px) {

  .header-navigation nav, #header-nav nav {
      flex-direction: column;
      overflow: hidden;
      position: absolute;
      left: 100%
  }

      .header-navigation nav.sized, #header-nav nav.sized {
        position: relative;
        left: 0;
        height: 0;
        transition: all 0.4s ease;
      }

      .menu-showing .header-navigation nav, .menu-showing #header-nav nav {
        opacity: 1;
        height: auto;
      }
    }

.header-navigation .main-link, #header-nav .main-link {
    display: block;
    color: #fff;
    font: 500 14px/1em "Campton", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.25s ease;
    padding: 14px 20px;
    position: relative
  }

@media (max-width: 900px) {
  .header-navigation .main-link, #header-nav .main-link {
      font-size: 18px;
      line-height: 1em;
      padding: 20px 20px;
      height: 16px
  }
    }

@media (min-width: 901px) {
      .header-navigation .has-menu .main-link::after, #header-nav .has-menu .main-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: calc(50% - 6px);
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 6px 7px 6px;
        border-color: transparent transparent #fff transparent;
        transition: opacity 0.25s ease;
        opacity: 0;
      }
      .header-navigation .has-menu .main-link.current::after, #header-nav .has-menu .main-link.current::after {
        opacity: 1;
      }
    .header-navigation .main-link:hover,
    .header-navigation .current-menu-parent .main-link,
    .header-navigation .current-menu-ancestor .main-link,
    .header-navigation .current-menu-item .main-link,
    #header-nav .main-link:hover,
    #header-nav .current-menu-parent .main-link,
    #header-nav .current-menu-ancestor .main-link,
    #header-nav .current-menu-item .main-link {
      color: #ff6b00;
    }
    .header-navigation .current-menu-parent + .current-menu-parent .main-link,
    .header-navigation .current-menu-parent + .current-menu-ancestor .main-link,
    .header-navigation .current-menu-ancestor + .current-menu-ancestor .main-link,
    .header-navigation .current-menu-ancestor + .current-menu-parent .main-link,
    #header-nav .current-menu-parent + .current-menu-parent .main-link,
    #header-nav .current-menu-parent + .current-menu-ancestor .main-link,
    #header-nav .current-menu-ancestor + .current-menu-ancestor .main-link,
    #header-nav .current-menu-ancestor + .current-menu-parent .main-link {
      color: #fff
    }

      .header-navigation .current-menu-parent + .current-menu-parent .main-link:hover, .header-navigation .current-menu-parent + .current-menu-ancestor .main-link:hover, .header-navigation .current-menu-ancestor + .current-menu-ancestor .main-link:hover, .header-navigation .current-menu-ancestor + .current-menu-parent .main-link:hover, #header-nav .current-menu-parent + .current-menu-parent .main-link:hover, #header-nav .current-menu-parent + .current-menu-ancestor .main-link:hover, #header-nav .current-menu-ancestor + .current-menu-ancestor .main-link:hover, #header-nav .current-menu-ancestor + .current-menu-parent .main-link:hover {
        color: #ff6b00;
      }
    .header-navigation .mobile-expand, #header-nav .mobile-expand {
      display: none;
    }
  }

@media (max-width: 900px) {
    .header-navigation .nav-section, #header-nav .nav-section {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      border-bottom: solid 1px #4d4d4d;
    }
    .header-navigation .mobile-expand, #header-nav .mobile-expand {
      display: block;
      color: #fff;
      padding: 12px 20px;
      height: 32px;
      font: 100 32px/1em "Campton", sans-serif;
    }
    .header-navigation .megamenu .mobile-expand, #header-nav .megamenu .mobile-expand {
      color: #000;
    }
    .header-navigation .expanded > .mobile-expand, #header-nav .expanded > .mobile-expand {
      color: #ff6b00;
    }
  }

.header-navigation .nav-section:hover:not(.dont-open) .main-link::after, #header-nav .nav-section:hover:not(.dont-open) .main-link::after {
      opacity: 1;
    }

@media (min-width: 901px) {

.megamenu {
    display: flex;
    justify-content: center;
    position: absolute;
    top: -999em;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    padding: 12px 10px 40px;
    align-items: flex-start;
    text-align: left;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    transition: opacity 0.4s ease, transform 0.4s ease, top 0s linear 0.4s;
    opacity: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
    z-index: 100;
}

    .no-menu-touch .nav-section:hover .megamenu,
    .show-mega-menu .megamenu {
      opacity: 1;
      transform: scaleY(1);
      top: 100%;
      transition: opacity 0.4s ease, transform 0.4s ease, top 0s linear 0s;
    }
  }

@media (min-width: 1021px) {
    .megamenu::before {
      content: "";
      position: absolute;
      top: 0;
      right: calc(100% - 2px);
      bottom: 0;
      width: calc(50vw - (1900px / 2 + 8px));
      background-color: #fff;
      box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1);
      z-index: 1;
    }

    .megamenu::after {
      content: "";
      position: absolute;
      top: 0;
      left: calc(100% - 2px);
      bottom: 0;
      width: calc(50vw - (1900px / 2 + 8px));
      background-color: #fff;
      box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
      z-index: 1;
    }
  }

@media (max-width: 900px) {

.megamenu {
    padding: 12px 20px 40px
}
  }

.megamenu img {
    margin-right: 30px
  }

@media (max-width: 900px) {

  .megamenu img {
      display: none
  }
    }

@media (max-width: 900px) {

.megamenu {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100vw;
    flex-shrink: 0;
    position: absolute;
    left: 100%;
    overflow: hidden;
    transition: opacity 0.4s ease, height 0.4s ease
}

    .megamenu.sized {
      height: 0;
      opacity: 0;
      position: relative;
      left: auto;
    }
    .expanded .megamenu {
      opacity: 1;
      height: auto;
    }
  }

.menu-group {
  width: 145px;
  padding-top: 10px;
  margin-right: 15px;
  overflow: hidden
}

@media (max-width: 900px) {

.menu-group {
    width: auto;
    padding: 0;
    margin-right: 0;
    font-size: 18px
}
  }

@media (min-width: 901px) {
    .menu-group:last-child {
      margin-right: 0;
    }

    .menu-group a {
      color: #000;
      border-bottom: solid 1px #fff;
      transition: all 0.25s ease;
      font-family: "Campton", sans-serif;
      font-weight: 700;
      letter-spacing: 0.05em
    }

      .menu-group a:hover {
        color: #ff6b00;
        border-color: #000;
      }
    .menu-group .current-menu-item > a {
      color: #ff6b00;
      border-color: #000;
    }
    .menu-group .current-menu-item.current-menu-ancestor > a,
    .menu-group .current-menu-item.current-menu-parent > a {
      color: #000;
      border-color: #fff;
    }

    .menu-group li {
      padding-bottom: 10px;
    }

    .menu-group .submenu {
      border-left: solid 1px #eae8e5;
      margin-top: 10px;
    }

      .menu-group .submenu li {
        padding-left: 10px;
      }
      .menu-group .submenu a {
        font-family: "Campton", sans-serif;
        font-weight: normal;
      }
  }

@media (max-width: 900px) {
      .menu-group > ul > li {
        border-bottom: solid 1px #e6e6e6;
      }
    .menu-group li {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .menu-group a {
      padding: 19px 16px;
      font: 500 18px/1em "Campton", sans-serif;
      color: #000;
      text-transform: uppercase;
      text-align: left;
    }

    .menu-group .submenu {
      width: 100vw;
      flex-shrink: 0;
      border-top: solid 1px #e6e6e6;
      padding-left: 16px;
      position: absolute;
      left: 100%;
      transition: all 0.4s ease
    }

      .menu-group .submenu.sized {
        height: 0;
        opacity: 0;
        position: relative;
        left: auto;
      }

      .menu-group .submenu a {
        text-transform: none;
      }
      .menu-group .expanded > a {
        color: #ff6b00;
      }
      .menu-group .expanded .submenu {
        opacity: 1;
        height: auto;
      }
  }

.nokona-show-menu > .megamenu > .menu-group {
    overflow: auto
  }

@media (min-width: 901px) {
  .nokona-show-menu > .megamenu > .menu-group {
      max-height: calc(100vh - 36px - var(--header-height))
  }
    }

.nokona-show-menu li.nokona-show-menu-item {
    flex: 0 1 max(260px, 260px);
    flex: 0 1 max(260px, 260px);
    flex: 0 1 max(260px, var(--menu-item-img-width, 260px));
    border-bottom-width: 0
  }

.nokona-show-menu li.nokona-show-menu-item.show-wide {
      width: 342px;
    }

.nokona-show-menu li.nokona-show-menu-item img {
      display: block;
      margin: 0;
      max-width: 100%;
      height: auto;
    }

.nokona-show-menu li.nokona-show-menu-item a {
      width: 100%;
      text-align: center;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.nokona-show-menu li.nokona-show-menu-item .pre-title {
      display: none;
    }

.nokona-show-menu li.nokona-show-menu-item .title {
      font: 500 15px/120% "Campton", sans-serif;
      letter-spacing: 0.05em;
      position: relative;
      transition: color 0.2s ease;
      text-transform: uppercase
    }

@media (max-width: 900px) {
    .nokona-show-menu li.nokona-show-menu-item .title {
        padding-bottom: 16px;
        padding-top: 10px;
        font-size: 19px
    }
      }

.nokona-show-menu .menu-group {
    width: 100%;
  }

.nokona-show-menu .menu-group > ul {
    display: flex;
    flex-wrap: wrap;
    padding: 110px 18px 24px;
    box-sizing: content-box;
    position: relative;
    justify-content: center;
    grid-column-gap: min(40px, 6vw);
    -moz-column-gap: min(40px, 6vw);
         grid-column-gap: min(40px, 6vw);
         column-gap: min(40px, 6vw)
  }

@media (max-width: 900px) {
  .nokona-show-menu .menu-group > ul {
      flex-wrap: wrap
  }
    }

.nokona-show-menu .menu-group > ul::before {
      content: "";
      background: url(/wp-content/themes/nokona-2019/img/show-menu-logo.svg) no-repeat center/contain;
      width: 142px;
      height: 52px;
      position: absolute;
      left: 50%;
      top: 36px;
      transform: translateX(-50%);
    }

.nokona-show-menu .menu-group > ul .inserted-show-menu-item {
      width: 100%;
      text-transform: uppercase;
      font: 500 26px/1.2 "Campton", sans-serif;
      letter-spacing: 0.05em;
      text-align: center;
      padding-top: 1.3846em;
      padding-bottom: 0.7692em;
      margin-top: 1em;
      border-top: 1px solid #231f20;
      border-bottom: none
    }

@media (max-width: 900px) {

    .nokona-show-menu .menu-group > ul .inserted-show-menu-item {
        justify-content: center;
        font-size: 26px
    }
      }

.nokona-show-menu .menu-group > ul .inserted-show-menu-item a[href] {
        display: inline-block;
        position: relative;
        padding-left: 1em;
        padding-right: 1em;
        cursor: pointer;
        border-bottom: none !important;
        font-weight: inherit;
        font-size: inherit
      }

.nokona-show-menu .menu-group > ul .inserted-show-menu-item a[href]::after {
          content: "";
          position: absolute;
          top: 50%;
          right: 0;
          width: 0.6538em;
          aspect-ratio: 1;
          border: 1px solid #2babe2;
          border-width: 0 2px 2px 0;
          transform: translate(-20%, -66%) rotate(-45deg);
          transition: transform 0.2s ease;
        }

.nokona-show-menu .menu-group > ul .inserted-show-menu-item a[href]:hover {
          color: #000;
          text-decoration: none;
          border-bottom: none
        }

.nokona-show-menu .menu-group > ul .inserted-show-menu-item a[href]:hover::after {
            transform: translate(0%, -66%) rotate(-45deg);
          }

@media (min-width: 901px) {
      .nokona-show-menu .nokona-show-menu-item:hover .title {
        color: #2babe2;
      }
      .nokona-show-menu .nokona-show-menu-item a {
        border-bottom: none;
      }
  }

/**************************************
 * MOBILE STUFF
 **************************************/

.mobile-buttons {
  display: flex;
  align-items: center;
  margin-left: auto;
  grid-gap: 30px;
  grid-gap: 30px;
  gap: 30px;
}

#mobile-cart {
  width: 21px;
  height: 19px;
  background-color: #fff;
  -webkit-mask: no-repeat center/100% url(/wp-content/themes/nokona-2019/img/cart.svg);
  mask: no-repeat center/100% url(/wp-content/themes/nokona-2019/img/cart.svg)
}

@media (min-width: 901px) {

#mobile-cart {
    display: none
}
  }

@media (max-width: 900px) {
    /* transition: background-color 0.2s linear;*/
    body:not(.menu-showing) #mobile-cart {
      background-color: #fff;
    }
  }

@media (max-width: 600px) {

#mobile-cart {
    margin-top: 0;
    top: 15px
}
  }

.hamburger-container {
  position: relative;
  width: 22px;
  height: 18px;
  box-sizing: border-box;
}

.mobile-menu-toggle,
#mobile-menu-btn {
  position: absolute;
  width: 22px;
  height: 18px;
  box-sizing: border-box;
  border-top: solid 2px #fff;
  border-bottom: solid 2px #fff;
}

/* transition: all 0.3s ease;*/

.menu-showing .mobile-menu-toggle, .menu-showing #mobile-menu-btn {
    border-color: rgba(255, 255, 255, 0);
  }

.mobile-menu-toggle::before,
  .mobile-menu-toggle::after,
  #mobile-menu-btn::before,
  #mobile-menu-btn::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 100%;
    border-top: solid 2px #fff;
    /* transition: transform 0.3s ease, border-color 0.3s ease;*/
  }

.menu-showing .mobile-menu-toggle::before, .menu-showing #mobile-menu-btn::before {
    border-color: #fff;
    transform: rotate(45deg);
  }

.menu-showing .mobile-menu-toggle::after, .menu-showing #mobile-menu-btn::after {
    border-color: #fff;
    transform: rotate(-45deg);
  }

@media (min-width: 901px) {

.mobile-menu-toggle,
#mobile-menu-btn {
    display: none
}
  }

/**
 * Hero for category pages. See block-hero for other page heroes
 */

@keyframes hero-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

#hero-image {
  overflow: hidden;
  margin-bottom: 35px
}

@media (max-width: 600px) {

#hero-image {
    margin-bottom: 5.833vw
}
  }

#hero-image #plp-hero-banner > * {
    transition: opacity 0.2s ease;
  }

#hero-image.loading #plp-hero-banner {
    position: relative;
  }

#hero-image.loading #plp-hero-banner > * {
      opacity: 0;
    }

#hero-image.loading #plp-hero-banner::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(
        110deg,
        #eaeaea 30%,
        #f7f7f7 50%,
        #eaeaea 70%
      );
      background-size: 200% 100%;
      animation: hero-shimmer 1.6s linear infinite;
    }

#hero-image .container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 442px;
    padding: 57px 60px;
    box-sizing: border-box;
  }

/* due to some bug in chrome that I'm too lazy to research, this has to be 1px inside
    the actual width of the hero space so chrome doesn't render a grey line around the
     edges when the chevron appears at the bottom. */

#hero-image .container .hero-image-holder {
      position: absolute;
      top: 0;
      left: 1px;
      right: 1px;
      bottom: 1px;
      background-position: center top;
      background-size: cover
    }

@media (max-width: 1600px) {
    #hero-image .container .hero-image-holder {
        left: 0;
        right: 0
    }
      }

#hero-image .container .hero-image-holder img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

#hero-image .container .hero-image-holder video {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

@media (max-width: 1600px) {

  #hero-image .container {
      min-height: 27.647vw;
      padding: 3.5625vw 3.75vw
  }
    }

@media (max-width: 600px) {

  #hero-image .container {
      min-height: 245px;
      padding: 21px 23px
  }
    }

#hero-image.cutout {
    margin-bottom: 45px
  }

@media (max-width: 600px) {

#hero-image.cutout {
      margin-bottom: 7.5vw
  }
    }

#hero-image.cutout .hero-image-holder {
      clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
    }

#hero-image.no-image {
    margin-bottom: 45px
  }

@media (max-width: 600px) {

#hero-image.no-image {
      margin-bottom: 7.5vw
  }
    }

#hero-image.no-image .container {
      height: 0;
      overflow: hidden;
    }

#hero-text {
  max-width: 940px;
  font: 62px/64px "Campton", sans-serif;
  color: #fff;
  position: relative;
  text-transform: uppercase;
}

#hero-text .large-text {
    font-family: "EvelethClean", sans-serif;
    display: block;
  }

@media (max-width: 1020px) {

#hero-text {
    font-size: 6.078vw;
    line-height: 6.274vw
}
  }

@media (max-width: 600px) {

#hero-text {
    font-size: 36px;
    line-height: 38px
}
  }

/************************************************************
 * HEAD COPY
 ************************************************************/

#listing-info {
  margin-bottom: 45px
}

@media (max-width: 600px) {

#listing-info {
    margin-bottom: 7.5vw
}
  }

#listing-info .container {
    display: flex;
    text-align: left;
    flex-wrap: wrap
  }

@media (max-width: 600px) {

  #listing-info .container {
      flex-direction: column
  }
    }

#listing-info a {
    color: #ff6b00;
    border-bottom: solid 1px #fff;
    transition: border-color 0.2s ease
  }

#listing-info a:hover {
      border-bottom-color: #000;
    }

#listing-info .main-info {
    width: calc(65% - 40px);
  }

#listing-info .main-info .title {
      font: 28px/32px "Campton", sans-serif;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
      text-transform: uppercase;
    }

#listing-info .main-info p {
      margin-bottom: 1em;
    }

#listing-info .main-info strong {
      font-weight: 700;
    }

@media (max-width: 600px) {

  #listing-info .main-info {
      width: auto
  }
    }

#listing-info .side-info {
    width: calc(38% - 40px);
    padding-left: 30px;
  }

#listing-info .side-info a {
      display: inline;
    }

@media (max-width: 600px) {
  #listing-info .side-info {
      width: auto
  }
    }

#listing-info .side-info ul {
      list-style: none;
      margin-bottom: 1em;
    }

#listing-info .side-info ul li {
        position: relative;
        padding-left: 18px
      }

#listing-info .side-info ul li::before {
          content: "+";
          position: absolute;
          font: 900 19px/19px "Campton", sans-serif;
          color: #ff6b00;
          top: 0;
          left: 0;
        }

#listing-info .side-info ul li p {
          margin-bottom: 10px;
        }

#product-listing {
  margin-bottom: 75px;
  scroll-margin-top: 150px;
}

#product-listing .container {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }

/************************************************************
 * LEFT SIDE FILTERS
 ************************************************************/

#product-filters {
  width: 215px;
  flex-shrink: 0;
  margin-right: 30px;
  border-top: solid 1px #ff6b00;
  text-align: left
}

@media (max-width: 750px) {

#product-filters {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    padding: 10px 20px;
    padding-top: 100px;
    background-color: #fff;
    transform: translateX(-271px);
    transition: transform 0.3s ease;
    border-top: none;
    border-right: solid 1px #646464;
    border-bottom: none;
    z-index: 10;
    -webkit-overflow-scrolling: touch;
}
    .showing-filters #product-filters {
      transform: translateX(0);
    }
  }

@media (max-width: 600px) {

#product-filters {
    padding-top: 80px
}
  }

#product-filters.fetching li > .filter {
    pointer-events: none;
    opacity: 0.5;
  }

#product-filters h3 {
    font: 15px/20px "EvelethClean", sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c7c7c7;
    padding: 15px 0;
    border-bottom: solid 1px #ff6b00;
    position: relative
  }

@media (max-width: 750px) {
      #product-filters h3:first-child::before {
        content: "X";
        position: absolute;
        color: #000;
        top: 0px;
        right: -10px;
      }
    }

#product-filters .shop-nav {
    margin: 18px 0 30px;
  }

#product-filters .shop-nav a {
      font: 600 15px/1.7333 "Campton", sans-serif;
      color: #000;
      transition: -webkit-text-decoration-color 0.2s ease;
      transition: text-decoration-color 0.2s ease;
      transition: text-decoration-color 0.2s ease, -webkit-text-decoration-color 0.2s ease;
      -webkit-text-decoration: underline rgba(0,0,0,0);
              text-decoration: underline rgba(0,0,0,0)
    }

#product-filters .shop-nav a:hover {
        -webkit-text-decoration-color: #ff6b00;
                text-decoration-color: #ff6b00;
      }

#product-filters ul {
    list-style: none;
  }

.mobile-filter-close-wrap {
  display: flex;
  justify-content: flex-end
}

@media (min-width: 751px) {

.mobile-filter-close-wrap {
    display: none
}
  }

.mobile-filter-close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  font-size: 0;
  cursor: pointer;
  position: relative;
  height: 25px;
  aspect-ratio: 1
}

.mobile-filter-close::before,
  .mobile-filter-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ff6b00;
  }

.mobile-filter-close::before {
    transform: translateY(-50%) rotate(45deg);
  }

.mobile-filter-close::after {
    transform: translateY(-50%) rotate(-45deg);
  }

.filter-group {
  padding: 10px 0;
  border-bottom: solid 1px #ff6b00;
}

.filter-group .filter-header {
    font: 700 18px/28px "Campton", sans-serif;
    color: #ababab;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase
  }

.filter-group .filter-header::after {
      content: "";
      display: inline-block;
      margin-right: 7px;
      width: 8px;
      height: 8px;
      border-right: 2px solid #ababab;
      border-bottom: 2px solid #ababab;
      border-radius: 1px;
      transform: translateY(-70%) rotate(45deg);
    }

.filter-group .filter-header .count {
      color: #ff6b00;
      font-weight: 500;
      font-size: 14px;
      margin-right: auto;
      margin-left: 0.4em;
    }

.filter-group .filters {
    padding-left: 14px;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: all 0.3s ease;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

.filter-group .filters .filter {
      position: relative;
      padding-left: 16px;
      font: 100 15px/26px "Campton", sans-serif;
      color: #646464;
      cursor: pointer
    }

.filter-group .filters .filter::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 0;
        display: block;
        width: 10px;
        height: 10px;
        box-sizing: border-box;
        border: solid 1px #c4beb6;
        background-color: #fff;
        transition: background-color 0.2s ease;
      }

.filter-group .filters .filter:hover::before {
        background-color: #eee;
      }

.filter-group .filters .filter.selected {
        transition: color 0.2s ease;
        color: #000
      }

.filter-group .filters .filter.selected::before {
          background-color: #ff6b00;
        }

.filter-group .filters .filter.zero-count {
        display: none;
      }

@media (max-width: 600px) {

    .filter-group .filters .filter {
        padding-top: 8px;
        padding-bottom: 8px
    }
        .filter-group .filters .filter::before {
          top: 13px;
        }
      }

.filter-group.expanded .filters {
      opacity: 1;
      height: auto;
    }

/************************************************************
 * PRODUCTS
 ************************************************************/

#product-list {
  border-top: solid 1px #ff6b00;
  flex-grow: 1;
}

#product-list .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    padding: 11px 0 0;
    margin-bottom: 25px
  }

@media (max-width: 750px) {

  #product-list .header {
      flex-direction: column;
      align-items: stretch;
      text-align: left;

      margin-bottom: 3.125vw
  }
    }

#product-list .header .category {
      color: #000;
      font: 20px "EvelethClean", sans-serif
    }

@media (max-width: 750px) {

    #product-list .header .category {
        display: flex;
        font-size: 15px;
        line-height: 14px;
        justify-content: space-between;
        margin-bottom: 15px
    }
        #product-list .header .category::after {
          content: "+ Options";
          color: #646464;
        }
          .showing-filters #product-list .header .category::after {
            content: "- Options";
          }
      }

#product-list .header .active-filters {
      display: flex;
      flex-wrap: wrap;
      grid-gap: 4px;
      grid-gap: 4px;
      gap: 4px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

#product-list .header .active-filters .active-filter {
        display: inline-flex;
        align-items: center;
        grid-gap: 8px;
        grid-gap: 8px;
        gap: 8px;
        background-color: #e6e6e6;
        border-radius: 4px;
        padding: 4px 8px;
        list-style: none;
      }

#product-list .header .active-filters .active-filter .remove {
          background: none;
          border: none;
          padding: 0;
          margin: 0;
          color: #000;
          font-size: 1.25em;
          line-height: 1;
          cursor: pointer;
        }

#product-list .header .sorter-container {
      display: flex;
      justify-content: flex-end;
      color: #646464;
      padding: 4px 0 4px 10px
    }

@media (max-width: 750px) {
    #product-list .header .sorter-container {
        padding-left: 0;
        margin-bottom: 8px
    }
      }

#product-list .description {
    text-align: left;
  }

#product-list .description p {
      margin-bottom: 1em;
    }

#sorter {
  position: relative;
  margin-left: 4px;
  margin-right: 20px;
  font: bold 15px/14px "EvelethClean", sans-serif;
  z-index: 2;
}

#sorter form {
    margin: 0px;
    text-align: right;
  }

#sorter .orderby {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    position: absolute;
    padding: 0;
    text-transform: uppercase;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font: bold 15px/14px "EvelethClean", sans-serif;
  }

#sorter .orderby option {
      color: #646464;
      font-size: 14px
    }

#sorter .orderby option:hover {
        cursor: pointer;
      }

#sorter .sort-title {
    color: #ff6b00;
  }

#sorter::after {
    content: "";
    display: inline-block;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 5.5px 4px 0 4px;
    border-color: rgb(0, 0, 0) transparent transparent transparent;
    margin: 0 4px 0 8px;
    position: absolute;
    top: 2px;
    right: -20px;
    transition: transform 0.3s ease;
  }

#sorter .label {
    padding: 0 4px 4px;
    color: #646464;
    font-weight: 300;
  }

#sorter .list {
    position: absolute;
    top: 100%;
    right: -999em;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    opacity: 0;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    z-index: 2;
  }

#sorter .list .option {
      text-align: left;
      line-height: 15px;
      padding: 10px 15px;
      white-space: nowrap;
      background-color: #fff;
      transition: background-color 0.2s ease
    }

#sorter .list .option:hover {
        background-color: #eee;
      }

#sorter.expanded::after {
      transform: rotate(180deg);
    }

#sorter.expanded .list {
      right: 2px;
      opacity: 1;
      transform: translateY(0);
    }

/**
 * This is meant to be anywhere a list of products is needed in this format, not just on this page.
 */

.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start
}

@media (max-width: 750px) {

.products {
    justify-content: space-around
}
  }

@media (max-width: 400px) {

.products {
    position: relative;
    left: -5.333vw;
    width: calc(100% + 10.666vw)
}
  }

.products.loading-products .product {
      opacity: 0;
    }

.products.loading-products::after {
      content: "";
      width: 50px;
      height: 50px;
      border: 4px solid #ff6b00;
      border-top-color: rgba(0,0,0,0);
      border-bottom-color: rgba(0,0,0,0);
      border-radius: 1000px;
      position: fixed;
      top: max(0, calc(50vh - 25px));
      top: max(0, calc(50vh - 25px));
      top: max(var(--loading-top-max, 0), calc(50vh - 25px));
      left: calc(50vw - 25px);
      animation: spin 1s linear forwards infinite;
    }

.products .product {
    width: 240px;
    box-sizing: border-box;
    flex-shrink: 0;
    border: solid 1px #fff;
    transition:
      border-color 0.2s ease,
      opacity 0.2s linear;
    font: 500 14px/18px "Campton", sans-serif;
    text-align: left
  }

.products .product.hidden {
      display: none;
    }

.products .product .quick-view-link {
      position: relative;
      background: #f1f1f1;
      height: 30px;
      font: 600 15px/30px "Campton", sans-serif;
      letter-spacing: 0.04em;
      text-align: center;
      text-transform: uppercase;
      color: #b9b9b9;
      margin-bottom: -19px;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.2s ease;
      cursor: pointer;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }

.products .product a {
      display: block;
      color: #000;
      padding: 0 10px 20px
    }

.products .product a:hover {
        cursor: pointer;
      }

.products .product a .prod-image {
        position: relative;
      }

.products .product a .prod-image::before {
          content: "";
          display: block;
          padding-top: 100%;
        }

.products .product a .prod-image {
        border-bottom: solid 1px #e6e6e6;
        margin-bottom: 10px;
        background-size: cover;
      }

.products .product a .primary-image {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

.products .product a .alt-hover-image {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -o-object-fit: cover;
           object-fit: cover;
        opacity: 0;
        transition: opacity 0.3s ease
      }

.products .product a .alt-hover-image:hover {
          opacity: 1;
        }

.products .product .price {
      color: #808080;
    }

.products .product .lace-options {
      padding-bottom: 10px;
      margin-top: 8px;
    }

.products .product .lace-options .options {
        display: flex;
        margin-top: 5px;
        flex-wrap: wrap;
      }

.products .product .lace-options .options .color {
          width: 10px;
          height: 10px;
          margin-right: 5px;
          margin-bottom: 5px;
          background-size: cover;
          border-radius: 50%
        }

.products .product .lace-options .options .color.brown {
            background-image: url(/wp-content/themes/nokona-2019/img/color-brown.jpg);
          }

.products .product .lace-options .options .color.grey {
            background-image: url(/wp-content/themes/nokona-2019/img/color-grey.jpg);
          }

.products .product .lace-options .options .color.white {
            background-image: url(/wp-content/themes/nokona-2019/img/color-white.jpg);
          }

.products .product .lace-options .options .color.black {
            background-image: url(/wp-content/themes/nokona-2019/img/color-black.jpg);
          }

.products .product .lace-options .options .color.navy {
            background-image: url(/wp-content/themes/nokona-2019/img/color-navy.jpg);
          }

.products .product .lace-options .options .color.red {
            background-image: url(/wp-content/themes/nokona-2019/img/color-red.jpg);
          }

.products .product .lace-options .options .color.royal {
            background-image: url(/wp-content/themes/nokona-2019/img/color-royal.jpg);
          }

.products .product .lace-options .options .color.blood {
            background-image: url(/wp-content/themes/nokona-2019/img/color-blood.jpg);
          }

.products .product .lace-options .options .color.green {
            background-image: url(/wp-content/themes/nokona-2019/img/color-green.jpg);
          }

.products .product .lace-options .options .color.purple {
            background-image: url(/wp-content/themes/nokona-2019/img/color-purple.jpg);
          }

.products .product .lace-options .options .color.orange {
            background-image: url(/wp-content/themes/nokona-2019/img/color-orange.jpg);
          }

.products .product .lace-options .options .color.gold {
            background-image: url(/wp-content/themes/nokona-2019/img/color-gold.jpg);
          }

.products .product .lace-options .options .color.pink {
            background-image: url(/wp-content/themes/nokona-2019/img/color-pink.jpg);
          }

.products .product .lace-options .options .color.teal {
            background-image: url(/wp-content/themes/nokona-2019/img/color-teal.jpg);
          }

.products .product .lace-options .options .color.cream {
            background-image: url(/wp-content/themes/nokona-2019/img/color-cream.jpg);
          }

.products .product .lace-options .options .color.blonde {
            background-image: url(/wp-content/themes/nokona-2019/img/color-blonde.jpg);
          }

.products .product .lace-options .options .color.tan {
            background-image: url(/wp-content/themes/nokona-2019/img/color-tan.jpg);
          }

.products .product .lace-options .options .color.charcoal {
            background-image: url(/wp-content/themes/nokona-2019/img/color-charcoal.jpg);
          }

.products .product .lace-options .options .color.skyblue {
            background-image: url(/wp-content/themes/nokona-2019/img/color-skyblue.jpg);
          }

.products .product .web-options {
      margin-top: 8px;
    }

.products .product .web-options .options {
        display: flex;
        margin-top: 10px;
        flex-wrap: wrap;
      }

.products .product .web-options .options .web {
          margin: 0 11px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center top;
          height: 30px;
          margin-bottom: 10px
        }

.products .product .web-options .options .web.option-1 {
            width: 27px;
            background-image: url(/wp-content/themes/nokona-2019/img/web-1.svg);
          }

.products .product .web-options .options .web.option-2 {
            width: 23px;
            background-image: url(/wp-content/themes/nokona-2019/img/web-2.svg);
          }

.products .product .web-options .options .web.option-3 {
            width: 23px;
            background-image: url(/wp-content/themes/nokona-2019/img/web-3.svg);
          }

.products .product .web-options .options .web.option-4 {
            width: 26px;
            background-image: url(/wp-content/themes/nokona-2019/img/web-4.svg);
          }

@media (max-width: 1020px) {

  .products .product {
      width: 33.333%;
  }
      .products .product img {
        max-width: 100%;
        height: auto;
      }
    }

@media (max-width: 500px) {

  .products .product {
      width: 50%
  }
    }

@media (max-width: 400px) {

  .products .product {
      font-size: 12px;
      line-height: 1.285em
  }
    }

@media (min-width: 600px) {
      .products .product:hover {
        border-color: #e6e6e6;
      }

        .products .product:hover .quick-view-link {
          opacity: 1; /* Put me back to 1 when ready */
        }
    }

/************************************************************
 * PAGINATION
 * Styles for product archive pagination (WooCommerce and JS-rendered)
 ************************************************************/

.woocommerce-pagination,
.pagination-container {
  margin: 10px 0;
  text-align: center;
}

.woocommerce-pagination ul.page-numbers, .pagination-container ul.page-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
  }

.woocommerce-pagination ul.page-numbers li, .pagination-container ul.page-numbers li {
      list-style: none;
      padding: 0;
      margin: 0
    }

.woocommerce-pagination ul.page-numbers li::marker, .pagination-container ul.page-numbers li::marker {
        content: none;
        display: none;
      }

.woocommerce-pagination .page-numbers, .pagination-container .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    font: 600 14px/1 "Campton", sans-serif;
    color: #646464;
    text-decoration: none;
    transition:
      color 0.2s ease,
      border-color 0.2s ease
  }

@media (max-width: 400px) {

  .woocommerce-pagination .page-numbers, .pagination-container .page-numbers {
      padding-left: 7px;
      padding-right: 7px
  }
    }

.woocommerce-pagination .page-numbers:hover, .pagination-container .page-numbers:hover {
      color: #ff6b00;
    }

.woocommerce-pagination .page-numbers.current, .pagination-container .page-numbers.current {
      color: #ff6b00;
      font-weight: 700;
    }

.woocommerce-pagination .page-numbers.dots, .pagination-container .page-numbers.dots {
      color: #646464;
      cursor: default;
    }

.woocommerce-pagination .prev,
  .woocommerce-pagination .next,
  .pagination-container .prev,
  .pagination-container .next {
    display: inline-block;
    font: 600 14px/1 "Campton", sans-serif;
    color: #646464;
    transition: color 0.2s ease
  }

.woocommerce-pagination .prev:hover, .woocommerce-pagination .next:hover, .pagination-container .prev:hover, .pagination-container .next:hover {
      color: #ff6b00;
    }

.woocommerce-pagination .prev.placeholder, .woocommerce-pagination .next.placeholder, .pagination-container .prev.placeholder, .pagination-container .next.placeholder {
      display: none;
    }

.woocommerce-pagination .prev, .pagination-container .prev {
    margin-right: 10px;
  }

.woocommerce-pagination .next, .pagination-container .next {
    margin-left: 10px;
  }

#single-product .confirm-overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background-color: rgba(48,47,47,0.84314);
    overflow: auto;
    z-index: 2001;
  }

#single-product .confirm-overlay .confirm-modal {
      position: relative;
      box-sizing: border-box;
      width: calc(100% - 12px);
      max-width: 333px;
      border-radius: 10px;
      background-color: #fff;
      color: #000;
      border: 1px solid #000;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: 25px 35px;
      margin: 25px 0;
      box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.5);
    }

#single-product .confirm-overlay .confirm-modal .confirm-title {
        width: 100%;
        color: #ff6b00;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 5px;
      }

#single-product .confirm-overlay .confirm-modal .confirm-message {
        width: 100%;
      }

#single-product .confirm-overlay .confirm-modal .confirm-button {
        border: 1px solid #ff6b00;
        /* border-radius: 5px; */
        padding: 4px 8px;
        min-width: 72px;
        background-color: #ff6b00;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        cursor: pointer;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        margin: 25px 10px 10px;
        transition: all 0.25s linear
      }

#single-product .confirm-overlay .confirm-modal .confirm-button:hover {
          background-color: #fff;
          color: #ff6b00;
        }

#single-product .review-form-overlay,
  #single-product .review-only-container {
    opacity: 0;
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s linear;
    background-color: rgba(48,47,47,0.84314);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 2001;
  }

#single-product .review-form-overlay .review-form-modal,
    #single-product .review-form-overlay .review-only-wrapper,
    #single-product .review-only-container .review-form-modal,
    #single-product .review-only-container .review-only-wrapper {
      position: relative;
      box-sizing: border-box;
      width: calc(100% - 8px);
      max-width: 512px;
      background-color: #fff;
      border: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 25px 0;
      margin: 80px 0;
    }

body:is(.edgex, .dark-body) #single-product .review-form-overlay .review-form-modal, .background-descriptor-wrapper.dark-theme #single-product .review-form-overlay .review-form-modal, body:is(.edgex, .dark-body) #single-product .review-form-overlay .review-only-wrapper, .background-descriptor-wrapper.dark-theme #single-product .review-form-overlay .review-only-wrapper, body:is(.edgex, .dark-body) #single-product .review-only-container .review-form-modal, .background-descriptor-wrapper.dark-theme #single-product .review-only-container .review-form-modal, body:is(.edgex, .dark-body) #single-product .review-only-container .review-only-wrapper, .background-descriptor-wrapper.dark-theme #single-product .review-only-container .review-only-wrapper {
        background-color: #000;
      }

body:is(.edgex, .dark-body) #single-product .review-form-overlay .review-form-modal .comment-form-rating, .background-descriptor-wrapper.dark-theme #single-product .review-form-overlay .review-form-modal .comment-form-rating, body:is(.edgex, .dark-body) #single-product .review-form-overlay .review-only-wrapper .comment-form-rating, .background-descriptor-wrapper.dark-theme #single-product .review-form-overlay .review-only-wrapper .comment-form-rating, body:is(.edgex, .dark-body) #single-product .review-only-container .review-form-modal .comment-form-rating, .background-descriptor-wrapper.dark-theme #single-product .review-only-container .review-form-modal .comment-form-rating, body:is(.edgex, .dark-body) #single-product .review-only-container .review-only-wrapper .comment-form-rating, .background-descriptor-wrapper.dark-theme #single-product .review-only-container .review-only-wrapper .comment-form-rating {
          filter: invert(100%);
        }

@media (max-width: 750px) {
    #single-product .review-form-overlay .review-form-modal,
    #single-product .review-form-overlay .review-only-wrapper,
    #single-product .review-only-container .review-form-modal,
    #single-product .review-only-container .review-only-wrapper {
        position: absolute
    }
      }

#single-product .review-form-overlay .review-form-modal #exit-button, #single-product .review-form-overlay .review-only-wrapper #exit-button, #single-product .review-only-container .review-form-modal #exit-button, #single-product .review-only-container .review-only-wrapper #exit-button {
        border: 1px solid #ff6b00;
        border-radius: 50%;
        background-color: #ff6b00;
        width: 30px;
        height: 30px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.25s linear;
        top: 12px;
        right: 12px;
        cursor: pointer
      }

#single-product .review-form-overlay .review-form-modal #exit-button::before,
        #single-product .review-form-overlay .review-form-modal #exit-button::after,
        #single-product .review-form-overlay .review-only-wrapper #exit-button::before,
        #single-product .review-form-overlay .review-only-wrapper #exit-button::after,
        #single-product .review-only-container .review-form-modal #exit-button::before,
        #single-product .review-only-container .review-form-modal #exit-button::after,
        #single-product .review-only-container .review-only-wrapper #exit-button::before,
        #single-product .review-only-container .review-only-wrapper #exit-button::after {
          width: 80%;
          height: 4px;
          border-radius: 2px;
          content: "";
          background-color: #fff;
          position: absolute;
          transition: color 0.25s linear;
        }

#single-product .review-form-overlay .review-form-modal #exit-button::before, #single-product .review-form-overlay .review-only-wrapper #exit-button::before, #single-product .review-only-container .review-form-modal #exit-button::before, #single-product .review-only-container .review-only-wrapper #exit-button::before {
          transform: rotate(45deg);
        }

#single-product .review-form-overlay .review-form-modal #exit-button::after, #single-product .review-form-overlay .review-only-wrapper #exit-button::after, #single-product .review-only-container .review-form-modal #exit-button::after, #single-product .review-only-container .review-only-wrapper #exit-button::after {
          transform: rotate(-45deg);
        }

#single-product .review-form-overlay .review-form-modal #exit-button:hover, #single-product .review-form-overlay .review-only-wrapper #exit-button:hover, #single-product .review-only-container .review-form-modal #exit-button:hover, #single-product .review-only-container .review-only-wrapper #exit-button:hover {
          background-color: #fff;
          transition: background-color 0.25s linear
        }

#single-product .review-form-overlay .review-form-modal #exit-button:hover::before,
          #single-product .review-form-overlay .review-form-modal #exit-button:hover::after,
          #single-product .review-form-overlay .review-only-wrapper #exit-button:hover::before,
          #single-product .review-form-overlay .review-only-wrapper #exit-button:hover::after,
          #single-product .review-only-container .review-form-modal #exit-button:hover::before,
          #single-product .review-only-container .review-form-modal #exit-button:hover::after,
          #single-product .review-only-container .review-only-wrapper #exit-button:hover::before,
          #single-product .review-only-container .review-only-wrapper #exit-button:hover::after {
            transition: color 0.25s linear;
            background-color: #ff6b00;
          }

#single-product .review-form-overlay .review-form-modal #review_form_wrapper, #single-product .review-form-overlay .review-only-wrapper #review_form_wrapper, #single-product .review-only-container .review-form-modal #review_form_wrapper, #single-product .review-only-container .review-only-wrapper #review_form_wrapper {
        width: 100%;
      }

#single-product .review-form-overlay .review-form-modal #review_form_wrapper #review_form, #single-product .review-form-overlay .review-only-wrapper #review_form_wrapper #review_form, #single-product .review-only-container .review-form-modal #review_form_wrapper #review_form, #single-product .review-only-container .review-only-wrapper #review_form_wrapper #review_form {
          width: 100%;
        }

#single-product .review-form-overlay .review-form-modal #review_form_wrapper #review_form .comment-respond, #single-product .review-form-overlay .review-only-wrapper #review_form_wrapper #review_form .comment-respond, #single-product .review-only-container .review-form-modal #review_form_wrapper #review_form .comment-respond, #single-product .review-only-container .review-only-wrapper #review_form_wrapper #review_form .comment-respond {
            width: 100%;
          }

#single-product .review-form-overlay .review-form-modal #review_form_wrapper #review_form .comment-respond .comment-reply-title, #single-product .review-form-overlay .review-only-wrapper #review_form_wrapper #review_form .comment-respond .comment-reply-title, #single-product .review-only-container .review-form-modal #review_form_wrapper #review_form .comment-respond .comment-reply-title, #single-product .review-only-container .review-only-wrapper #review_form_wrapper #review_form .comment-respond .comment-reply-title {
              display: block;
              margin: 20px auto;
            }

#single-product .review-form-overlay .review-form-modal .comment-form, #single-product .review-form-overlay .review-only-wrapper .comment-form, #single-product .review-only-container .review-form-modal .comment-form, #single-product .review-only-container .review-only-wrapper .comment-form {
        margin: auto;
        text-transform: uppercase;
        font-weight: bold;
        width: calc(100% - 50px);
      }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-rating, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-rating, #single-product .review-only-container .review-form-modal .comment-form .comment-form-rating, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-rating {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-rating p.stars, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-rating p.stars, #single-product .review-only-container .review-form-modal .comment-form .comment-form-rating p.stars, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-rating p.stars {
            position: relative;
            width: 136px;
            height: 26px;
            background: no-repeat left center / contain
              url(/wp-content/themes/nokona-2019/img/stars-unselected.svg);
          }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-rating p.stars a::before, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-rating p.stars a::before, #single-product .review-only-container .review-form-modal .comment-form .comment-form-rating p.stars a::before, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-rating p.stars a::before {
                top: 1px;
              }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-rating p.stars a, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-rating p.stars a, #single-product .review-only-container .review-form-modal .comment-form .comment-form-rating p.stars a, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-rating p.stars a {
              color: black;
            }

@media (max-width: 400px) {
          #single-product .review-form-overlay .review-form-modal .comment-form .comment-form-rating p.stars, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-rating p.stars, #single-product .review-only-container .review-form-modal .comment-form .comment-form-rating p.stars, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-rating p.stars {
              margin-right: 5px;
              width: 136px;
              background-size: contain
          }
            }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-comment, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-comment, #single-product .review-only-container .review-form-modal .comment-form .comment-form-comment, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-comment {
          width: 100%;
          text-transform: uppercase;
          font-weight: bold;
        }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-comment #comment, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-comment #comment, #single-product .review-only-container .review-form-modal .comment-form .comment-form-comment #comment, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-comment #comment {
            max-width: 100%;
            max-height: 126px;
          }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-author,
        #single-product .review-form-overlay .review-form-modal .comment-form .comment-form-email,
        #single-product .review-form-overlay .review-form-modal .comment-form .comment-form-cookies-consent,
        #single-product .review-form-overlay .review-form-modal .comment-form .comment-notes,
        #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-author,
        #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-email,
        #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-cookies-consent,
        #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-notes,
        #single-product .review-only-container .review-form-modal .comment-form .comment-form-author,
        #single-product .review-only-container .review-form-modal .comment-form .comment-form-email,
        #single-product .review-only-container .review-form-modal .comment-form .comment-form-cookies-consent,
        #single-product .review-only-container .review-form-modal .comment-form .comment-notes,
        #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-author,
        #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-email,
        #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-cookies-consent,
        #single-product .review-only-container .review-only-wrapper .comment-form .comment-notes {
          text-transform: uppercase;
          font-weight: bold;
        }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-author span.required, #single-product .review-form-overlay .review-form-modal .comment-form .comment-form-email span.required, #single-product .review-form-overlay .review-form-modal .comment-form .comment-form-cookies-consent span.required, #single-product .review-form-overlay .review-form-modal .comment-form .comment-notes span.required, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-author span.required, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-email span.required, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-cookies-consent span.required, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-notes span.required, #single-product .review-only-container .review-form-modal .comment-form .comment-form-author span.required, #single-product .review-only-container .review-form-modal .comment-form .comment-form-email span.required, #single-product .review-only-container .review-form-modal .comment-form .comment-form-cookies-consent span.required, #single-product .review-only-container .review-form-modal .comment-form .comment-notes span.required, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-author span.required, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-email span.required, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-cookies-consent span.required, #single-product .review-only-container .review-only-wrapper .comment-form .comment-notes span.required {
            color: #ff6b00;
          }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-author,
        #single-product .review-form-overlay .review-form-modal .comment-form .comment-form-email,
        #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-author,
        #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-email,
        #single-product .review-only-container .review-form-modal .comment-form .comment-form-author,
        #single-product .review-only-container .review-form-modal .comment-form .comment-form-email,
        #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-author,
        #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-email {
          max-width: 306px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
        }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-notes, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-notes, #single-product .review-only-container .review-form-modal .comment-form .comment-notes, #single-product .review-only-container .review-only-wrapper .comment-form .comment-notes {
          text-align: center;
          font-weight: 500;
        }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-cookies-consent, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-cookies-consent, #single-product .review-only-container .review-form-modal .comment-form .comment-form-cookies-consent, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-cookies-consent {
          display: flex;
          align-items: flex-start;
          justify-content: center;
          margin-top: 20px !important;
        }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent, #single-product .review-only-container .review-form-modal .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent {
            box-sizing: border-box;
            -webkit-appearance: none;
            margin: 0 5px 0 0;
            border: 1px solid #a9a9a9;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center
          }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent::after, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent::after, #single-product .review-only-container .review-form-modal .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent::after, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent::after {
              content: "";
              background-color: #ff6b00;
              width: 16px;
              height: 16px;
              transform: scale(0);
              transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
            }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent:checked::after, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent:checked::after, #single-product .review-only-container .review-form-modal .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent:checked::after, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent:checked::after {
                transform: scale(1);
                transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
              }

#single-product .review-form-overlay .review-form-modal .comment-form .comment-form-cookies-consent label, #single-product .review-form-overlay .review-only-wrapper .comment-form .comment-form-cookies-consent label, #single-product .review-only-container .review-form-modal .comment-form .comment-form-cookies-consent label, #single-product .review-only-container .review-only-wrapper .comment-form .comment-form-cookies-consent label {
            width: calc(100% - 28px);
          }

#single-product .review-form-overlay .review-form-modal .comment-form .form-submit #submit.submit, #single-product .review-form-overlay .review-only-wrapper .comment-form .form-submit #submit.submit, #single-product .review-only-container .review-form-modal .comment-form .form-submit #submit.submit, #single-product .review-only-container .review-only-wrapper .comment-form .form-submit #submit.submit {
            box-sizing: border-box;
            width: -moz-fit-content;
            width: fit-content;
            border: 1px solid #ff6b00;
            border-radius: 0px;
            background-color: #ff6b00;
            color: #fff;
            transition: all 0.25s linear;
            padding: 12px;
            text-transform: uppercase
          }

#single-product .review-form-overlay .review-form-modal .comment-form .form-submit #submit.submit:hover, #single-product .review-form-overlay .review-only-wrapper .comment-form .form-submit #submit.submit:hover, #single-product .review-only-container .review-form-modal .comment-form .form-submit #submit.submit:hover, #single-product .review-only-container .review-only-wrapper .comment-form .form-submit #submit.submit:hover {
              background-color: #fff;
              color: #ff6b00;
              transition: all 0.25s linear;
            }

#single-product .review-only-container {
    display: flex;
    position: relative;
    top: auto;
    top: initial;
    bottom: auto;
    bottom: initial;
    left: auto;
    left: initial;
    right: auto;
    right: initial;
    align-items: stretch;
    opacity: 1;
    background-color: #fff;
    height: auto;
    padding: 50px 0 110px;
  }

#single-product .review-only-container .review-only-wrapper {
      margin: 0;
      border-width: 0;
      max-width: none;
      max-width: initial;
      width: 50%
    }

@media (max-width: 1020px) {
    #single-product .review-only-container .review-only-wrapper {
        width: 75%
    }
      }

@media (max-width: 750px) {
    #single-product .review-only-container .review-only-wrapper {
        position: relative
    }
      }

@media (max-width: 600px) {
    #single-product .review-only-container .review-only-wrapper {
        width: auto;
        width: initial
    }
      }

#single-product .custom-form-overlay {
    opacity: 0;
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: flex-start;
    transition: opacity 0.5s linear;
    background-color: rgba(48,47,47,0.84314);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 2001;
    padding: 80px 0;
    box-sizing: border-box
  }

@media (max-width: 750px) {
  #single-product .custom-form-overlay {
      padding: 30px 0
  }
    }

#single-product .custom-form-overlay .custom-form-modal {
      position: relative;
      box-sizing: border-box;
      width: calc(100% - 8px);
      max-width: 656px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 45px;
      margin: auto 0;
      font: 600 38px/115% "Campton", sans-serif
    }

@media (max-width: 750px) {
    #single-product .custom-form-overlay .custom-form-modal {
        position: absolute
    }
      }

@media (max-width: 600px) {
    #single-product .custom-form-overlay .custom-form-modal {
        padding: 45px 7.5vw;
        font-size: 6.33vw
    }
      }

#single-product .custom-form-overlay .custom-form-modal #exit-button {
        width: 26px;
        height: 26px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 19px;
        right: 19px;
        cursor: pointer
      }

#single-product .custom-form-overlay .custom-form-modal #exit-button::before,
        #single-product .custom-form-overlay .custom-form-modal #exit-button::after {
          position: absolute;
          content: "";
          background-color: #88898d;
          width: 4px;
          height: 141%;
        }

#single-product .custom-form-overlay .custom-form-modal #exit-button::before {
          transform: rotate(45deg);
        }

#single-product .custom-form-overlay .custom-form-modal #exit-button::after {
          transform: rotate(-45deg);
        }

#single-product .custom-form-overlay .custom-form-modal .custom-option-list {
        display: flex;
        flex-direction: column;
        font: 300 21px/100% "Campton", sans-serif;
        width: 100%;
        margin-top: 18px;
      }

#single-product .custom-form-overlay .custom-form-modal .custom-option-list .custom-option-item {
          border-bottom: 1px solid #e6e6e6;
          padding: 8px 28px 8px 6px;
          height: 58px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box
        }

#single-product .custom-form-overlay .custom-form-modal .custom-option-list .custom-option-item:last-child {
            border-bottom: none;
          }

#single-product .custom-form-overlay .custom-form-modal .custom-option-list .custom-option-item .option-label .option-value {
              font-weight: bold;
            }

@media (max-width: 600px) {
          #single-product .custom-form-overlay .custom-form-modal .custom-option-list .custom-option-item .option-label {
              font-size: 3.5vw
          }
            }

@media (max-width: 400px) {
          #single-product .custom-form-overlay .custom-form-modal .custom-option-list .custom-option-item .option-label {
              font-size: 14px
          }
            }

#single-product .custom-form-overlay .custom-form-modal .custom-option-list .custom-option-item .option-visual {
            height: 42px;
            width: 42px;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
          }

@media (max-width: 600px) {
        #single-product .custom-form-overlay .custom-form-modal .custom-option-list .custom-option-item {
            padding: 1.33vw 4.67vw 1.33vw 1vw;
            height: 9.67vw;
        }
            #single-product .custom-form-overlay .custom-form-modal .custom-option-list .custom-option-item .option-visual {
              height: 7vw;
              width: 7vw;
            }
          }

@media (max-width: 400px) {
        #single-product .custom-form-overlay .custom-form-modal .custom-option-list .custom-option-item {
            padding: 1.33vw 1vw
        }
          }

#single-product .custom-form-overlay .custom-form-modal .custom-terms {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin: 45px 0;
        font: bold 21px/100% "Campton", sans-serif;
      }

#single-product .custom-form-overlay .custom-form-modal .custom-terms .check-box-container {
          display: flex;
          align-items: flex-start;
          margin-top: 15px;
          font: 400 21px/100% "Campton", sans-serif;
        }

#single-product .custom-form-overlay .custom-form-modal .custom-terms .check-box-container .check-box {
            height: 30px;
            width: 30px;
            box-sizing: border-box;
            -webkit-appearance: none;
            background-color: white;
            border: 2px solid #e6e6e6;
            border-radius: 3px;
            display: inline-block;
            position: relative;
            margin-right: 16px;
            transition: background-color 1.3s linear;
            cursor: pointer
          }

#single-product .custom-form-overlay .custom-form-modal .custom-terms .check-box-container .check-box::before {
              position: absolute;
              content: "";
              background-color: #000;
              width: 20%;
              height: 0;
              border-radius: 3px;
              transform-origin: top;
              transform: rotate(-45deg);
              left: 2px;
              top: 8px;
            }

#single-product .custom-form-overlay .custom-form-modal .custom-terms .check-box-container .check-box::after {
              position: absolute;
              content: "";
              background-color: #000;
              width: 20%;
              height: 0;
              border-radius: 3px;
              transform-origin: top;
              transform: rotate(220deg);
              right: 12px;
              top: 18px;
            }

#single-product .custom-form-overlay .custom-form-modal .custom-terms .check-box-container .check-box:checked::before {
                height: 55%;
                transition: height 0.2s ease-in;
              }

#single-product .custom-form-overlay .custom-form-modal .custom-terms .check-box-container .check-box:checked::after {
                height: 100%;
                transition: height 0.2s ease-out 0.15s;
              }

#single-product .custom-form-overlay .custom-form-modal .custom-terms .check-box-container .check-box.on-err {
              background-color: #e26666;
              transition: background-color 0s linear;
            }

#single-product .custom-form-overlay .custom-form-modal .custom-terms .check-box-container .terms-statement {
            width: 65%;
            text-align: left;
          }

#single-product .custom-form-overlay .custom-form-modal .action-buttons {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }

#single-product .custom-form-overlay .custom-form-modal .action-buttons .edit,
        #single-product .custom-form-overlay .custom-form-modal .action-buttons .add-to-cart {
          width: 48%;
          min-height: 49px;
          border: 1px solid #ff6b00;
          background-color: #ff6b00;
          color: #fff;
          font: bold 16px/133% "Campton", sans-serif;
          text-transform: uppercase;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.25s linear;
          cursor: pointer;
          -webkit-user-select: none;
             -moz-user-select: none;
                  user-select: none;
          white-space: normal
        }

#single-product .custom-form-overlay .custom-form-modal .action-buttons .edit:hover, #single-product .custom-form-overlay .custom-form-modal .action-buttons .add-to-cart:hover {
            background-color: white;
            color: #ff6b00;
            transition: all 0.25s linear;
          }

#single-product .custom-form-overlay .custom-form-modal .action-buttons .add-to-cart.processing {
          cursor: progress;
          opacity: 0.7;
          background-color: #ff6b00;
          color: #fff;
        }

#single-product h1.showbats-review-title {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

#single-product h1.showbats-review-title .brand,
    #single-product h1.showbats-review-title .action {
      display: block;
    }

#single-product h1.showbats-review-title .brand {
      font-size: 0;
      width: 312px;
      max-width: calc(100vw - 24px);
      aspect-ratio: 364 / 50;
      background: url(/wp-content/themes/nokona-2019/img/showbats-logo.svg) no-repeat center/contain;
    }

#single-product h1.showbats-review-title .action {
      font: 600 26px/1.2 "Campton", sans-serif;
      text-transform: uppercase;
      padding-top: 0.5em;
    }

#single-product .medium-container {
    overflow: hidden;
    text-align: left
  }

@media (max-width: 700px) {

  #single-product .medium-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start
  }
    }

#single-product .options-wrap {
    padding-bottom: 18px;
    padding-left: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

#single-product .options-wrap .description {
      padding-top: 12px;
      width: 100%;
    }

#single-product .options-wrap .partition + .description {
      padding-top: 0;
    }

#single-product .options-wrap .option-icon {
      margin-left: 14px;
      max-width: 96px;
      height: auto;
      display: block;
    }

#single-product .standard-radio input[type="radio"], #single-product .partitioned-radio input[type="radio"] {
      display: none;
    }

#single-product .standard-radio .options-wrap {
      width: 100%;
    }

#single-product .standard-radio .radio {
      margin-bottom: 8px;
    }

#single-product .partitioned-radio input[type="radio"] {
      margin: 0;
    }

#single-product .partitioned-radio label.default {
      padding-right: 12px
    }

#single-product .partitioned-radio label.default::after {
        transform: scale(1);
      }

#single-product .partitioned-radio input[type="radio"]:checked ~ .radio label.default::after {
        transform: scale(0);
      }

#single-product .partitioned-radio input[type="radio"]:checked ~ .radio label:not(.default)::after {
        transform: scale(1);
      }

#single-product .partition {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative
  }

#single-product .partition:not(:last-child) {
      padding-bottom: 18px;
    }

#single-product .partition label {
      margin-left: 0;
    }

#single-product .partition-title {
    width: 100%;
    padding-bottom: 16px;
    font: 700 14px/120% "Campton", sans-serif;
    text-transform: uppercase;
  }

.on-review-success {
  background-color: #ff6b00;
  border-radius: 10px;
  padding: 18px;
  width: 445px;
  left: calc(50% - 199px);
  font: bold 14px/180% "Campton", sans-serif;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.5);
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  position: fixed;
  top: -200vw;
  z-index: 10000;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transform: translate(0, 0);
  transition: transform 0.3s ease-in
}

@media (max-width: 900px) {

.on-review-success {
    width: 98%;
    left: 1%;
    padding: 14px
}
  }

.archive .on-review-success {
    transform: translate(0, 45vw)
  }

.archive .on-review-success.visible {
      transform: translate(calc(-12px - 100%), 45vw);
    }

.on-review-success.alive {
    top: 190px;
    left: 100%;
    max-width: 300px;
    width: calc(100vw - 24px)
  }

@media (max-width: 900px) {

.on-review-success.alive {
      top: 40px
  }
    }

.on-review-success.visible {
    transform: translate(calc(-12px - 100%), 0);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }

.on-review-success a {
    color: inherit;
    font: 400 12px/120% "Campton", sans-serif;
    text-decoration: underline;
  }

#product-header {
  width: 320px;
  float: right;
  padding-bottom: 15px;
  padding-left: 8px;
  padding-right: 8px;
  border-bottom: 1px solid #e6e6e6;
  box-sizing: border-box
}

@media (max-width: 700px) {

#product-header {
    width: auto;
    margin-top: 20px;
    padding-bottom: 2.5vw;
    border-bottom: none
}
  }

#product-header h2 {
    font: 100 28px/32px "Campton", sans-serif;
    color: #000;
  }

#product-header h1 {
    font: 700 28px/32px "Campton", sans-serif;
    color: #000;
    margin-bottom: 5px;
  }

#product-header .pre-title-image {
    padding-bottom: 28px;
  }

#product-header .pre-title-image img {
      display: block;
      max-width: 100%;
      height: auto;
    }

@media (max-width: 600px) {
    #product-header h2,
    #product-header h1 {
      font-size: 4.667vw;
      line-height: 5.333vw;
    }
  }

@media (max-width: 450px) {
    #product-header h2,
    #product-header h1 {
      font-size: 21px;
      line-height: 24px;
    }
    #product-header .pre-title-image {
      padding-bottom: 21px;
    }
  }

#price-rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#price-rating .price {
    font-size: 20px;
    line-height: 31px;
    letter-spacing: 0.02em;
  }

#price-rating .price .small {
      color: #aaa;
      font-size: 0.8em;
    }

@media (max-width: 600px) {

  #price-rating .price {
      font-size: 15px
  }
    }

@media (max-width: 400px) {

  #price-rating .price {
      font-size: 12px
  }
    }

#price-rating .price del {
      -webkit-text-decoration-color: #a2a2a2;
              text-decoration-color: #a2a2a2;
    }

#price-rating .price ins {
      color: #ff6b00;
      background-color: transparent;
      background-color: initial;
    }

.rating {
  display: flex;
}

.rating .value {
    font: 100 14px/21px "Campton", sans-serif
  }

@media (max-width: 600px) {

  .rating .value {
      font-size: 12px
  }
    }

@media (max-width: 400px) {

  .rating .value {
      font-size: 10px
  }
    }

#learn-more.affirm-as-low-as {
  margin-top: 10px;
}

#learn-more.affirm-as-low-as a {
    text-decoration: underline;
    color: #999;
  }

#short-description {
  font: 14px/21px "Campton", sans-serif;
  color: #ff6b00;
  margin-top: 25px
}

#short-description.auction-description {
    color: inherit;
    margin-top: 0;
    margin-bottom: 25px;
  }

@media (max-width: 700px) {

#short-description {
    margin-top: 0
}
  }

@media (max-width: 400px) {
    #short-description ul {
      list-style-position: inside;
    }
  }

.stars {
  position: relative;
  width: 85px;
  height: 15px;
  margin-right: 16px;
  background: no-repeat left center/85px 15px url(/wp-content/themes/nokona-2019/img/stars-unselected.svg);
}

.stars .stars-amount {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: no-repeat left center/85px 15px url(/wp-content/themes/nokona-2019/img/stars.svg);
  }

@media (max-width: 600px) {
    .stars .stars {
      margin-right: 10px;
    }
  }

@media (max-width: 400px) {

.stars {
    margin-right: 5px;
    width: 57px;
    background-size: 57px 10px;
}
    .stars .stars-amount {
      background-size: 57px 10px;
    }
  }

/************************************************************
 * IMAGES
 ************************************************************/

#product-images {
  float: left;
  width: calc(100% - 360px);
  max-width: 680px;
  position: relative
}

@media (max-width: 700px) {

#product-images {
    width: 100%;
    margin-bottom: 20px
}
  }

#product-images .main-image {
    position: relative;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    border: solid 2px #e6e6e6;
    margin-bottom: 20px
  }

@media (max-width: 1020px) and (min-width: 701px) {

  #product-images .main-image {
      margin-bottom: 1.906vw
  }
    }

@media (max-width: 700px) {

  #product-images .main-image {
      margin-bottom: 2.14vw
  }
    }

#product-images .main-image::before {
      content: "";
      display: block;
      height: 0;
      padding-top: 100%;
    }

body.status-overlay-product.sold-out-product #product-images .main-image::after, body.status-overlay-product.coming-soon #product-images .main-image::after {
        width: 303px;
        height: 135px;
        background: no-repeat center/contain;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: opacity 0.2s linear, width 0s linear, height 0s linear;
      }

body.status-overlay-product.sold-out-product #product-images .main-image:hover::after, body.status-overlay-product.coming-soon #product-images .main-image:hover::after {
        transition: opacity 0.2s linear, width 0s linear 0.21s,
          height 0s linear 0.21s;
        opacity: 0;
        height: 0;
        width: 0;
      }

body:not(.body-backorder-only).status-overlay-product.sold-out-product
      #product-images .main-image::after {
      content: "";
      background-image: url(/wp-content/themes/nokona-2019/img/sold.svg);
    }

body.status-overlay-product.coming-soon #product-images .main-image::after {
      content: "";
      background-image: url(/wp-content/themes/nokona-2019/img/coming-soon.svg);
    }

#product-images .main-image .zoom-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 160%;
      height: 160%;
      background-position: center;
      background-size: cover;
      opacity: 0;
      transition: opacity 0.2s ease
    }

@media (max-width: 600px) {

    #product-images .main-image .zoom-image {
        display: none
    }
      }

#product-images .main-image .zoom-cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%
    }

@media (max-width: 600px) {
    #product-images .main-image .zoom-cover {
        display: none
    }
      }

#product-images .main-image img.overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
         object-fit: contain;
      transition: opacity 0.2s linear;
      filter: drop-shadow(0 0 5px rgba(0,0,0,0.2))
    }

#product-images .main-image img.overlay.hidden {
        display: none;
      }

#product-images .main-image:hover .zoom-image {
        opacity: 1;
      }

#product-images .main-image:hover img.overlay {
        opacity: 0;
      }

#product-images .thumbnails {
    display: flex;
    flex-wrap: wrap;
  }

#product-images .thumbnails .thumbnail {
      position: relative;
      width: 125px;
      height: 125px;
      margin: 0 11px 16px 0;
      background-position: center;
      background-size: cover;
      cursor: pointer
    }

@media (max-width: 1020px) and (min-width: 701px) {

    #product-images .thumbnails .thumbnail {
        width: 12.25vw;
        height: 12.25vw;
        margin: 0 1.274vw 1.569vw 0
    }
      }

@media (max-width: 700px) {

    #product-images .thumbnails .thumbnail {
        width: 14.286vw;
        height: 14.286vw;
        margin: 0 1.429vw 2vw 0
    }
      }

@media (max-width: 600px) {

    #product-images .thumbnails .thumbnail {
        width: 17.1vw;
        height: 17.1vw;
        margin: 0 1.6vw 1.6vw 0
    }
      }

@media (max-width: 400px) {

    #product-images .thumbnails .thumbnail {
        width: 18vw;
        height: 18vw;
        margin: 0 1.9vw 1.9vw 0
    }
      }

#product-images .thumbnails .thumbnail::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: solid 2px #e6e6e6;
        transition: border-color 0.2s ease;
      }

#product-images .thumbnails .thumbnail::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background-color: #ff6b00;
        opacity: 0;
        transition: opacity 0.2s ease;
      }

#product-images .thumbnails .thumbnail:hover::before {
          border-color: #999;
        }

#product-images .thumbnails .thumbnail.current::after {
          opacity: 1;
        }

#product-images .thumbnails .thumbnail.video-play {
        background-color: #e6e6e6
      }

#product-images .thumbnails .thumbnail.video-play::before {
          display: none;
        }

#product-images .thumbnails .thumbnail.video-play::after {
          opacity: 0.8;
          background: no-repeat center/49.6% 49.6% url(/wp-content/themes/nokona-2019/img/play-btn.svg);
          height: 100%;
        }

#product-images .thumbnails .thumbnail.video-play.no-vid::after {
            display: none;
          }

#product-images .thumbnails .thumbnail.video-play:hover::after {
            opacity: 1;
          }

#product-images .thumbnails .thumbnail {
      /* hide the last thumbnail's right margin so up to 5 can appear on a single line
        when the column is at full width. Otherwise the thumbnail list doesn't match
        up cleanly to the full image above. */
    }

#product-images .thumbnails .thumbnail:last-child {
        margin-right: 0;
      }

#product-images .thumbnails .thumbnail img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

.manufacturing {
  position: absolute;
  font-size: 0;
  width: max(46px, 13.733%);
  aspect-ratio: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  top: 13px;
  left: 13px;
  transition: opacity 0.1s linear 0.01s, width 0s linear;
}

/* MODIFIED STYLES FOR CATEGORY PAGE */

body.archive .manufacturing {
    top: 5px;
    top: 5px;
    width: 18.2%;
  }

.main-image:hover ~ .manufacturing {
    transition: opacity 0.1s linear, width 0s linear 0.11s;
    opacity: 0;
    width: 0;
  }

.manufacturing.assembled-in {
    background-image: url(/wp-content/themes/nokona-2019/img/assemled-in-usa.svg);
  }

.manufacturing.made-in {
    background-image: url(/wp-content/themes/nokona-2019/img/made-in-usa.svg);
  }

.manufacturing.designed-in {
    background-image: url(/wp-content/themes/nokona-2019/img/designed-in-usa.svg);
  }

.category-icon {
  position: absolute;
  font-size: 0;
  width: max(62px, 18.166%);
  aspect-ratio: 646/580;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  top: 13px;
  right: 13px;
  transition: opacity 0.1s linear 0.01s, width 0s linear
}

.category-icon.limited-edition {
    background-image: url(/wp-content/themes/nokona-2019/img/limited-edition-icon.svg);
  }

.category-icon.edgex {
    background-image: url(/wp-content/themes/nokona-2019/img/edgex-icon.svg);
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.66667)) invert(1);
  }

/* MODIFIED STYLES FOR CATEGORY PAGE */

body.archive .category-icon {
    top: 5px;
    top: 5px;
    width: 21.5%;
  }

.main-image:hover ~ .category-icon {
    transition: opacity 0.1s linear, width 0s linear 0.11s;
    opacity: 0;
    width: 0;
  }

.prod-image.dark-image .category-icon.category-icon {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.66667)) invert(1);
}

.prod-image.light-image .category-icon.category-icon {
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.33333));
}

#product-info,
#product-images {
  margin-bottom: 45px;
}

/************************************************************
 * SIDEBAR
 ************************************************************/

#product-info,
.qv-product-info {
  width: 320px;
  float: right
}

@media (max-width: 400px) {

#product-info,
.qv-product-info {
    width: 100%
}
  }

#product-info .leathers, .qv-product-info .leathers {
    margin-left: 4px;
  }

#product-info .leathers > div, .qv-product-info .leathers > div {
      font-size: 0;
      margin-bottom: 25px;
      background-position: left center;
      background-size: auto 100%;
      background-repeat: no-repeat;
    }

#product-info .edgex-content, .qv-product-info .edgex-content {
    padding-bottom: 1em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid #fff;
  }

#product-info {
  padding-top: 20px;
  box-sizing: border-box
}

#product-info.auction-pending #ppcp-recaptcha-v2-container {
      margin-top: 0!important;
      margin-bottom: 0!important;
    }

#product-info .uwa_auction_product_countdown {
    box-shadow: none;
    box-shadow: initial;
  }

#product-info .uwa_auction_product_timezone {
    display: none;
  }

#product-info #placebidbutton {
    margin-top: 18px;
    margin-bottom: 0;
  }

#product-info .wc-pao-addon-radio {
    margin-top: 0;
  }

#product-info .wc-pao-addon-wrap > div[\:has\(.wc-pao-addon-radio\)] {
    display: flex;
    grid-gap: 0.3em;
    grid-gap: 0.3em;
    gap: 0.3em;
  }

#product-info .wc-pao-addon-wrap > div[\:has\(.wc-pao-addon-radio\)] {
    display: flex;
    grid-gap: 0.3em;
    grid-gap: 0.3em;
    gap: 0.3em;
  }

#product-info .wc-pao-addon-wrap > div[\:has\(.wc-pao-addon-radio\)] label {
      margin-top: 0.25em;
    }

#product-info .wc-pao-addon-wrap > div[\:has\(.wc-pao-addon-radio\)] label {
      margin-top: 0.25em;
    }

#product-info .wc-pao-addon-wrap > div[\:has\(.wc-pao-addon-radio\)] {
    display: flex;
    grid-gap: 0.3em;
    grid-gap: 0.3em;
    gap: 0.3em;
  }

#product-info .wc-pao-addon-wrap > div:has(.wc-pao-addon-radio) {
    display: flex;
    grid-gap: 0.3em;
    grid-gap: 0.3em;
    gap: 0.3em;
  }

#product-info .wc-pao-addon-wrap > div[\:has\(.wc-pao-addon-radio\)] label {
      margin-top: 0.25em;
    }

#product-info .wc-pao-addon-wrap > div:has(.wc-pao-addon-radio) label {
      margin-top: 0.25em;
    }

#product-info .uwa-main-auction-product.uwa_auction_product_countdown {
    margin-bottom: 25px;
  }

#product-info .uwa_auction_reserve_not_met {
    color: #ff6b00;
  }

#product-info .uwa_auction_reserve_met {
    color: #636363;
  }

#product-info form.buy-now .single_add_to_cart_button {
    background-color: rgba(255,0,0,0);
    color: #ff6b00
  }

#product-info form.buy-now .single_add_to_cart_button:hover {
      background-color: rgba(255,107,0,0.2902);
    }

#product-info .uwa_pay_now {
    margin-bottom: 30px;
  }

#product-info .uwa_imgtext, #product-info .uwa_losing, #product-info .uwa_winning {
    position: static;
    position: initial;
    font-size: 20px;
    font-weight: 700;
  }

#product-info .uwa_imgtext {
    margin-bottom: 0.6em;
    display: block;
  }

#product-info .uwa_losing, #product-info .uwa_winning {
    background-color: rgba(0,0,0,0);
    padding: 0;
    color: #ff6b00;
  }

#product-info .uwa_winning {
    font-size: 17px;
  }

#product-info .uwa_detailtext {
    display: none;
  }

.standard-options {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 150%;
}

.standard-options .standard-options-title {
    height: 35px;
    width: 100%;
    padding-left: 10px;
    background-color: #f2f2f2;
    font: bold 19px/150% "Campton", sans-serif;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    box-sizing: border-box;
    color: #ff6b00;
  }

body:is(.edgex, .dark-body) .standard-options .standard-options-title, .background-descriptor-wrapper.dark-theme .standard-options .standard-options-title {
      background: #262626;
    }

.standard-options .standard-options-title-desc {
    padding: 16px 12px;
    border-bottom: 2px solid #f2f2f2;
  }

.standard-options form {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

.standard-options .option {
    width: 50%;
    margin-bottom: 20px;
    white-space: normal
  }

.standard-options .option.full-size {
      width: 100%;
    }

.standard-options .option.full-size .title {
        margin-bottom: 11px;
        text-transform: uppercase;
        font-weight: bold;
        display: flex;
      }

.standard-options .option.full-size .title .size-guide-opener {
          text-transform: none;
          font-weight: normal;
          margin-right: 14px;
        }

.standard-options .option.full-size .title.belt-size-title {
          justify-content: space-between;
        }

.standard-options .option.full-size .size-product-option {
        margin: 0 6px 6px 0;
      }

.standard-options .option.full-size .size-category,
      .standard-options .option.full-size .color-category {
        margin-left: 0px;
      }

.standard-options .option.full-size .disc-title-2 {
        display: none;
      }

.standard-options .option label {
      display: block;
      margin-bottom: 7px;
    }

.standard-options .option select {
      margin: 0px;
    }

.standard-options .standard-description {
    padding-top: 16px;
  }

.standard-options .wide-option {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 20px
  }

.standard-options .wide-option.no-marg {
      margin-bottom: 0px;
    }

.standard-options .wide-option .title {
      display: flex;
      align-items: center;
      font-weight: 700;
      text-transform: uppercase;
      width: 100%;
      margin-bottom: 12px;
    }

.standard-options .wide-option .title img {
        margin-left: 16px;
        margin-top: -1px;
        margin-bottom: 1px;
        height: 30px;
      }

.standard-options .custom-price {
    max-height: 0px;
    padding-left: 10px;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

.standard-options .custom-price .custom-text {
      font: 21px/150% "Campton", sans-serif;
    }

.standard-options .custom-price.opened {
      max-height: 75px;
      padding: 0px 10px 15px;
      transition: all 0.4s ease-in-out;
    }

.standard-options .custom-price::after {
      content: "";
      background: linear-gradient(to top, white, transparent);
      width: 100%;
      height: 1em;
      position: absolute;
      bottom: 0;
      left: 0;
    }

.standard-options .ship-text {
    width: 100%;
    font: 14px/150% "Campton", sans-serif;
    padding: 0px 8px 18px;
  }

.drop-down-option {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
  border-bottom: 2px solid #f2f2f2;
  max-height: 55px;
  transition: max-height 0.5s cubic-bezier(0, 0, 0.58, 1)
}

.drop-down-option.disabled {
    pointer-events: none;
  }

.drop-down-option.disabled .title::after {
      opacity: 0;
    }

.drop-down-option.hidden {
    display: none;
  }

.drop-down-option .drop-down-select {
    width: 100%;
    display: flex;
    position: relative
  }

.drop-down-option .drop-down-select.style-category {
      justify-content: center;
      padding-bottom: 20px;
    }

.drop-down-option .drop-down-select .disc-title-2 {
      position: absolute;
      top: -34px;
      right: 6px;
      transition: opacity 0.3s linear;
      opacity: 0;
    }

.drop-down-option .title {
    display: flex;
    align-items: center;
    font: 700 14px/150% "Campton", sans-serif;
    text-transform: uppercase;
    width: 100%;
    height: 55px;
    padding-bottom: 12px;
    position: relative;
    padding-left: 8px;
    color: #000;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

body:is(.edgex, .dark-body) .drop-down-option .title, .background-descriptor-wrapper.dark-theme .drop-down-option .title {
      color: #fff;
    }

.drop-down-option .title::after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 9px 6px 0 6px;
      border-color: #ff6b00 transparent transparent transparent;
      position: absolute;
      top: 24px;
      right: 8px;
      transition: transform 0.5s ease-in-out;
    }

.drop-down-option .title.belt-size-title {
      margin-bottom: 28px;
      justify-content: space-between;
    }

.drop-down-option .title .disc-title {
      display: none;
    }

.drop-down-option .title .selected-label {
      font-weight: 400;
      text-transform: capitalize;
    }

.drop-down-option .title span.title-literal {
      text-transform: capitalize;
      font-weight: 600;
    }

.drop-down-option .title h3.title-literal {
      text-transform: uppercase;
      font-weight: 700;
    }

.drop-down-option.standard-images .style-category {
      justify-content: flex-start;
    }

form.form-e-2_0 .drop-down-option.pa_bag-embroidery .title {
    text-transform: inherit;
    font-weight: 500;
  }

.drop-down-option .embroid-input,
  .drop-down-option .gift-msg-input {
    width: 100%;
    margin: 2px 4px 15px;
    border: 2px solid #e6e6e6;
    color: #6b6b6b;
    font: 500 16px/100% "Campton", sans-serif;
  }

.drop-down-option.expanded {
    max-height: 600px;
    transition: max-height 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  }

.drop-down-option.expanded .title::after {
      transform: rotate(-180deg);
      transition: transform 0.5s ease-in-out;
    }

.drop-down-option.expanded .disc-title-2 {
      transition: opacity 0.3s linear;
      opacity: 1;
    }

form:not(.form-e-2_0) .drop-down-option.expanded.auto-close:not(.tall) {
      max-height: 200px;
    }

.drop-down-option.expanded.tall {
      max-height: 900px;
    }

.drop-down-option.expanded.e-2_0.e-2_0.e-2_0 {
      height: auto;
    }

.drop-down-option.e-2_0.e-2_0.e-2_0 {
    max-height: none;
    max-height: initial;
    height: 55px;
    transition: max-height 0.5s cubic-bezier(0.77, 0, 0.175, 1),
      height 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  }

.drop-down-option.last-drop {
    margin-bottom: 30px;
  }

.drop-down-option:last-of-type {
    margin-bottom: 30px;
  }

.drop-down-option .drop-down-expand {
    cursor: pointer;
  }

.narrow-options {
  display: flex;
  max-width: 264px;
  flex-wrap: wrap;
}

.narrow-options .style-option-container {
    margin-bottom: 10px;
  }

.option-indv[data-hide-if] {
  display: none
}

.option-indv[data-hide-if].conditionally-visible {
    display: inline;
    display: initial;
  }

#single-product .option-indv {
  padding-left: 8px;
  padding-right: 8px
}

#single-product .option-indv.pa_throwing-hand,
  #single-product .option-indv.quantity {
    padding-top: 20px;
    position: relative;
    border-top: 1px solid #e6e6e6;
    box-sizing: border-box;
  }

#single-product .option-indv.pa_throwing-hand:not(.full-size) {
    padding-right: 0;
  }

#single-product .option-indv.quantity:not(.full-size) {
    padding-left: 0;
  }

#single-product .option-indv .wide-option {
    margin-bottom: 0;
  }

#single-product .option-indv .options-wrap {
    margin-bottom: 0;
    padding-bottom: 0;
  }

.ship-text .out-of-stock-title {
    display: none;
    color: #ff6b00;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
  }

.ship-text .out-of-stock-message {
    display: none;
  }

form.backorder-only .ship-text .in-stock-title,
    form.backorder-only .ship-text .in-stock-message {
      display: none;
    }

form.backorder-only .ship-text .backorder.out-of-stock-title,
    form.backorder-only .ship-text .backorder.out-of-stock-message {
      display: block;
    }

form.out-of-stock .ship-text .in-stock-title,
    form.out-of-stock .ship-text .in-stock-message {
      display: none;
    }

form.out-of-stock .ship-text ~ .real-out-of-stock-text {
      display: block;
    }

.real-out-of-stock-text {
  font: 14px/150% "Campton", sans-serif;
  padding: 0px 10px 15px;
  display: none;
}

.real-out-of-stock-text .real-out-of-stock-title {
    color: #ff6b00;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
  }

.leather-icon {
  height: 35px;
  margin-bottom: 25px;
}

.variations_button {
  width: 100%;
}

.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button,
#placebidbutton.bid_button.bid_button,
.uwa_pay_now.uwa_pay_now.uwa_pay_now {
  border: solid 1px #ff6b00;
  border-radius: 0;
  background: #ff6b00;
  box-sizing: border-box;
  height: 50px;
  width: 100%;
  font: 700 16px/100% "Campton", sans-serif;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  margin-bottom: 18px;
  margin-top: 16px;
  transition: all 0.25s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none
}

.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button:hover, #placebidbutton.bid_button.bid_button:hover, .uwa_pay_now.uwa_pay_now.uwa_pay_now:hover {
    background-color: #fff;
    color: #ff6b00;
  }

.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.processing, #placebidbutton.bid_button.bid_button.processing, .uwa_pay_now.uwa_pay_now.uwa_pay_now.processing {
    cursor: progress;
    opacity: 0.7;
    background-color: #ff6b00;
    color: #fff;
  }

.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.hide, #placebidbutton.bid_button.bid_button.hide, .uwa_pay_now.uwa_pay_now.uwa_pay_now.hide {
    display: none;
  }

.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button[disabled], #placebidbutton.bid_button.bid_button[disabled], .uwa_pay_now.uwa_pay_now.uwa_pay_now[disabled] {
    opacity: 0.5;
    pointer-events: none;
  }

.formidable-form-uploader {
  max-width: 320px;
}

.formidable-form-uploader .frm_dropzone.frm_dropzone {
    max-width: none;
    max-width: initial;
  }

.formidable-form-uploader :is(.frm_primary_label, .frm_submit) {
    display: none !important;
  }

.formidable-form-uploader .dz-preview .dz-image.dz-image {
      display: none !important;
    }

.formidable-form-uploader .dz-preview .dz-column.dz-column {
      float: none;
      float: initial;
    }

.formidable-form-uploader .frm_form_field.frm_form_field,
  .formidable-form-uploader form.frm-show-form {
    margin-bottom: 0;
  }

.formidable-form-uploader form.frm-show-form fieldset {
    padding-bottom: 0;
  }

.pseudo-items {
  display: flex;
  grid-gap: 12px;
  grid-gap: 12px;
  gap: 12px;
  margin-left: auto;
  padding-left: 8px;
  margin-top: -2px;
}

.pseudo-items > a {
    font-size: 0;
    width: 20px;
    height: 20px;
    display: block;
  }

.pseudo-items .pseudo-video {
    background: url(/wp-content/themes/nokona-2019/img/pseudo-icon-video.svg) no-repeat center/contain;
  }

.pseudo-items .pseudo-common {
    background: url(/wp-content/themes/nokona-2019/img/pseudo-icon-common.svg) no-repeat center/contain;
  }

.specs {
  margin-bottom: 30px;
  margin-left: 8px;
}

.spec {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 15px;
}

.spec .low,
  .spec .high {
    font-size: 13px;
    line-height: 14px;
    width: 68px;
    flex-grow: 0;
    text-transform: uppercase;
  }

.spec .scale {
    position: relative;
    width: 147px;
    height: 22px;
    flex-shrink: 0;
    margin: 0 20px;
    font-size: 0;
    background: no-repeat center/100% auto url(/wp-content/themes/nokona-2019/img/slider.svg)
  }

.spec .scale::before {
      content: "";
      position: absolute;
      top: 0;
      width: 22px;
      height: 22px;
      background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/slider-button.svg);
    }

.spec .scale.first::before {
      left: -7px;
    }

.spec .scale.second::before {
      left: 39px;
    }

.spec .scale.third::before {
      right: 39px;
    }

.spec .scale.fourth::before {
      right: -7px;
    }

.info-sections {
  border-top: solid 1px #e6e6e6;
}

.info-section {
  padding: 16px 10px 14px;
  border-bottom: solid 1px #e6e6e6;
}

.info-section .info-header {
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    padding-right: 26px;
    display: flex;
    justify-content: space-between;
    color: #000;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

.info-section .info-header .stars {
      margin-right: 0;
    }

.info-section .info-header::before {
      content: "+";
      position: absolute;
      right: 0;
      font-size: 1.3em;
      font-weight: 300;
    }

.info-section .info {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
  }

.info-section .info p,
    .info-section .info ul,
    .info-section .info ol {
      margin-bottom: 1em;
    }

.info-section .info ul,
    .info-section .info ol {
      margin-left: 1.2em;
    }

.info-section .info .info-wrapper {
      padding: 10px 0;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    }

.info-section .info .stars {
      margin: 0 6px 12px 0;
    }

.info-section .info .no-review-prompt {
      margin-bottom: 12px;
    }

.info-section .info a {
      font-family: "Campton", sans-serif;
      font-weight: 500;
      text-decoration: underline;
      color: #000;
    }

.info-section .info #new-review-button,
    .info-section .info #more-reviews-button {
      cursor: pointer;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }

.info-section.expanded .info-header::before {
      content: "-";
    }

.info-section.expanded .info {
      opacity: 1;
      height: auto;
    }

.reviews-header {
  padding-bottom: 18px;
}

.reviews-footer {
  padding-top: 18px;
}

.commentlist.rotating {
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1),
      opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

.review {
  margin-bottom: 20px;
}

.review .title {
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
  }

.review .rating {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
  }

.review .rating .stars {
      position: relative;
      width: 54px;
      height: 9px;
      margin: 0 12px 4px 0;
      background: no-repeat left center/54px 8.5px
        url(/wp-content/themes/nokona-2019/img/stars-unselected.svg);
    }

.review .rating .stars .stars-amount {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background: no-repeat left center/54px 8.5px url(/wp-content/themes/nokona-2019/img/stars.svg);
      }

@media (max-width: 600px) {
        .review .rating .stars .stars {
          margin-right: 10px;
        }
      }

.qa-header {
  margin-bottom: 20px;
}

#qa-section .info-wrapper {
  display: flex;
  flex-direction: column;
}

.qa {
  padding-bottom: 20px;
  line-height: 28px;
  display: none;
  opacity: 0;
  transition: opacity 0.2s linear
}

.qa.viewable {
    display: block;
    opacity: 1;
  }

.qa.fade-out {
    opacity: 0;
    transition: opacity 0.2s linear;
  }

.qa.fade-in {
    opacity: 1;
    transition: opacity 0.2s linear;
  }

.qa .question::before {
      content: "Q: ";
      font-weight: 700;
    }

.qa .answer.answer::before, .qa .answer[\:has\(p\:first-child\)] p:first-child::before {
        content: "A: ";
        font-weight: 700;
      }

.qa .answer.answer::before, .qa .answer[\:has\(p\:first-child\)] p:first-child::before {
        content: "A: ";
        font-weight: 700;
      }

.qa .answer.answer::before, .qa .answer[\:has\(p\:first-child\)] p:first-child::before {
        content: "A: ";
        font-weight: 700;
      }

.qa .answer.answer::before, .qa .answer:has(p:first-child) p:first-child::before {
        content: "A: ";
        font-weight: 700;
      }

.qa .answer[\:has\(p\:first-child\)]::before {
      content: normal;
      content: initial;
    }

.qa .answer[\:has\(p\:first-child\)]::before {
      content: normal;
      content: initial;
    }

.qa .answer[\:has\(p\:first-child\)]::before {
      content: normal;
      content: initial;
    }

.qa .answer:has(p:first-child)::before {
      content: normal;
      content: initial;
    }

.qa-footer {
  padding-top: 20px;
  order: 99999;
}

:is(#ask-question-form, .question-submission-response) {
  margin: 18px;
  display: flex;
  flex-direction: column;
  width: 600px;
  max-width: calc(100vw - 64px);
  grid-gap: 12px;
  grid-gap: 12px;
  gap: 12px;
  font: 500 16px/1.2 "Campton", sans-serif;
  text-align: left;
}

:is(#ask-question-form, .question-submission-response) h2 {
    font-size: 20px;
    font-weight: 700;
    padding-right: 24px;
  }

:is(#ask-question-form, .question-submission-response) .form-group {
    display: flex;
    flex-wrap: wrap;
    grid-column-gap: 4px;
    -moz-column-gap: 4px;
         grid-column-gap: 4px;
         column-gap: 4px;
    grid-row-gap: 12px;
    grid-row-gap: 12px;
    row-gap: 12px;
  }

:is(#ask-question-form, .question-submission-response) .form-field {
    flex: 1 1 48%;
    min-width: 220px;
    display: flex;
    flex-direction: column
  }

:is(#ask-question-form, .question-submission-response) .form-field.full-width {
      min-width: 100%;
    }

:is(#ask-question-form, .question-submission-response) .form-field .required {
      color: #ff6b00;
    }

:is(#ask-question-form, .question-submission-response) label {
    padding-bottom: 4px;
  }

:is(#ask-question-form, .question-submission-response) input:is([type="text"], [type="email"]), :is(#ask-question-form, .question-submission-response) textarea {
    border: 1px solid #aeaeae;
    border-radius: 0;
    padding: 8px;
    font: 400 16px/1.2 "Campton", sans-serif;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
  }

:is(#ask-question-form, .question-submission-response) .submit-question-button,
  :is(#ask-question-form, .question-submission-response) .exit-popup {
    align-self: flex-start;
    border: solid 1px #ff6b00;
    border-radius: 0;
    background-color: #ff6b00;
    box-sizing: border-box;
    height: 40px;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 24px;
    font: 700 16px/100% "Campton", sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    margin-top: 12px;
    transition: background-color 0.2s linear, color 0.2s linear;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    display: flex;
    align-items: center
  }

:is(#ask-question-form, .question-submission-response) .submit-question-button:hover, :is(#ask-question-form, .question-submission-response) .exit-popup:hover {
      background-color: #fff;
      color: #ff6b00;
    }

:is(#ask-question-form, .question-submission-response).submitting .submit-question-button {
    font-size: 0;
    cursor: progress;
    opacity: 0.7;
    background-color: #ff6b00;
    color: #fff
  }

:is(#ask-question-form, .question-submission-response).submitting .submit-question-button::before {
      content: "Processing";
      font-size: 16px;
      line-height: 1.2em;
      margin-right: 0.5em;
    }

:is(#ask-question-form, .question-submission-response).submitting .submit-question-button::after {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #fff;
      border-top: 2px solid transparent;
      border-radius: 1000px;
      animation: spin 1s linear infinite;
    }

.nokona-global-popup.ask-question-form-popup {
  animation: fade-in 0.2s linear forwards;
}

.drop-down-wrapper .quantity,
  .drop-down-wrapper .pa_throwing-hand {
    margin-bottom: 15px;
  }

.drop-down-wrapper .quantity select, .drop-down-wrapper .pa_throwing-hand select {
      margin-left: 0;
      margin-right: 0;
    }

.share-links {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.share-links a {
    width: 29px;
    height: 29px;
    margin: 0 0 0 12px;
    box-sizing: border-box;
  }

.share-links .facebook,
  .share-links .share-email {
    border: solid 1px #000;
    border-radius: 50%;
  }

.size-guide-opener {
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s linear
}

.size-guide-opener:hover {
    border-color: black;
    transition: border-color 0.25s linear;
  }

.bag-initials.wide-option,
.bag-initials .wide-option {
  margin-bottom: 15px;
}

/************************************************************
 * ENGRAVING OPTIONS
 ************************************************************/

.engraving-options {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease
}

.engraving-options.engraving-showing {
    max-height: 330px;
    opacity: 1;
  }

.engraving-options.bag-numbers-initials {
    padding-left: 8px
  }

.engraving-options.bag-numbers-initials.engraving-showing {
      max-height: 0;
      opacity: 0;
    }

.engraving-options.bag-numbers-initials.initials-showing {
      max-height: 330px;
      opacity: 1;
    }

.engraving-options.bag-numbers-initials .color-title {
      text-transform: uppercase;
    }

.engraving-options .engraving-notice {
    margin-bottom: 15px;
    font-weight: 500;
  }

.engraving-options .option-container {
    padding-bottom: 30px
  }

.engraving-options .option-container.reduce-padding {
      padding-bottom: 15px;
    }

.engraving-options .option-container .color-title {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 7px;
      margin-top: 24px;
    }

.engraving-options .select-font-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 7px;
  }

.engraving-options .select-font-title span {
      font-weight: normal;
      border-bottom: solid 1px #ff6b00;
    }

.engraving-options .font-options {
    margin-bottom: 18px;
    display: flex;
  }

.engraving-options .font-options .font-option {
      width: 60px;
      height: 60px;
      font-size: 0;
      padding: 3px;
      border: solid 1px #fff;
      margin-right: 5px;
      transition: border-color 0.25s ease;
      cursor: pointer;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat
    }

.engraving-options .font-options .font-option:hover {
        border-color: #c4c4c4;
      }

.engraving-options .font-options .font-option.selected {
        border-color: #ff6b00;
      }

.engraving-options .font-options .font-option img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

.engraving-letters {
  margin-bottom: 14px;
}

a.sample-link {
  font-weight: 600;
  color: #000;
  border-bottom: solid 1px #fff;
  transition: border-color 0.25s ease;
  color: #ff6b00
}

a.sample-link::after {
    content: ">";
    display: inline-block;
    margin-left: 4px;
  }

a.sample-link:hover {
    border-color: black;
  }

/************************************************************
 * EXTRA EDGE X DETAILS
 ************************************************************/

.edgex-details-container {
  clear: both;
  color: #808080;
}

.edgex-details-container .main-paragraph {
    font: 300 28px/132.142% "Campton", sans-serif;
    text-align: center;
    max-width: 768px;
    margin: 20px auto 98px
  }

@media (max-width: 700px) {
  .edgex-details-container .main-paragraph {
      font-size: 4vw
  }
    }

@media (max-width: 450px) {
  .edgex-details-container .main-paragraph {
      font-size: 18px
  }
    }

.edgex-details-container .content-items {
    display: flex;
    justify-content: space-between
  }

@media (max-width: 700px) {
  .edgex-details-container .content-items {
      flex-direction: column;
      justify-content: flex-start
  }
    }

.edgex-details-container .content-item {
    width: 27.8473%;
    letter-spacing: 0.09em;
    margin-bottom: 70px
  }

@media (max-width: 700px) {
  .edgex-details-container .content-item {
      width: 100%
  }
    }

.edgex-details-container .content-item .item-title {
      text-transform: uppercase;
      margin-bottom: 1em;
      font: 700 14px/150% "EvelethClean", sans-serif;
    }

.edgex-details-container .content-item .item-body {
      color: #fff;
      margin-bottom: 1em;
      font: 14px/150% "Campton", sans-serif;
    }

/************************************************************
 * LEATHER INFO
 ************************************************************/

#leather-info {
  color: #fff;
  clear: both;
  margin-bottom: 10px;
  margin-top: 20px;
  position: relative;
  display: flex;
}

#leather-info .leather-info-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

#leather-info .content-wrap {
    padding: 35px 32px;
    position: relative
  }

@media (max-width: 600px) {

  #leather-info .content-wrap {
      padding: 5.833vw 5.333vw
  }
    }

#leather-info .series-title {
    font: 50px/1em "EvelethClean", sans-serif;
    margin-bottom: 50px
  }

@media (max-width: 600px) {

  #leather-info .series-title {
      font-size: 8.333vw;
      margin-bottom: 8.333vw
  }
    }

#leather-info .leathers {
    display: flex;
    flex-wrap: wrap
  }

@media (max-width: 600px) {

  #leather-info .leathers {
      flex-direction: column
  }
    }

#leather-info .leather {
    width: 44.5%;
    margin-right: 5.5%;
    margin-top: 5.5%;
    padding-top: 60px;
    position: relative
  }

#leather-info .leather:first-child,
    #leather-info .leather:nth-child(2) {
      margin-top: 0px;
    }

@media (max-width: 600px) {
  #leather-info .leather {
      width: 100%;
      margin-right: 0
  }
      #leather-info .leather:nth-child(2) {
        margin-top: 5.5%;
      }
    }

#leather-info .leather .title {
      font-weight: bold;
      font-size: 26px;
      line-height: 26px;
    }

#leather-info .leather .title span {
        font-size: 17px;
        line-height: 21px;
        font-weight: 100;
        text-transform: uppercase;
        display: block;
      }

#leather-info .leather .icon {
      position: absolute;
      display: block;
      width: auto;
      height: 44px;
      top: 0;
      left: 0;
    }

#leather-info[data-altlayout] {
    display: flex;
    margin-top: 0;
    margin-bottom: 0;
  }

#leather-info .img-wrap {
    width: 0px;
  }

#leather-info .img-wrap img {
      display: block;
    }

#leather-horse {
  background-image: url(/wp-content/themes/nokona-2019/img/full-grain-horse-icon-white.svg);
}

#leather-cordovan {
  background-image: url(/wp-content/themes/nokona-2019/img/genuine-cordovan-icon-white.svg);
}

#leather-americankip {
  background-image: url(/wp-content/themes/nokona-2019/img/full-grain-americankip-icon-white.svg);
}

#leather-supersoft {
  background-image: url(/wp-content/themes/nokona-2019/img/nokona-supersoft-icon-white.svg);
}

#leather-steerhide {
  background-image: url(/wp-content/themes/nokona-2019/img/full-grain-steerhide-icon-white.svg);
}

#leather-bison {
  background-image: url(/wp-content/themes/nokona-2019/img/american-bison-icon-white.svg);
}

#leather-kangaroo {
  background-image: url(/wp-content/themes/nokona-2019/img/australian-kangaroo-icon-white.svg);
}

#leather-calfskn {
  background-image: url(/wp-content/themes/nokona-2019/img/japanese-calfskn-icon-white.svg);
}

#leather-caiman {
  background-image: url(/wp-content/themes/nokona-2019/img/american-caiman-icon-white.svg);
}

/************************************************************
 * LIFESTYLE IMAGES
 ************************************************************/

#lifestyle-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  margin-bottom: 60px;
  width: 100%
}

@media (max-width: 600px) {

#lifestyle-images {
    grid-row-gap: 1.667vw;
    grid-column-gap: 1.667vw;
    margin-bottom: 10vw
}
  }

#lifestyle-images .image {
    min-height: 366.66px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative
  }

@media (max-width: 1200px) {

  #lifestyle-images .image {
      min-height: 30.55vw
  }
    }

#lifestyle-images .image img {
      -o-object-fit: cover;
         object-fit: cover;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
    }

#lifestyle-images .image-1 {
    grid-row: 1;
    grid-column: 1 / 3;
  }

#lifestyle-images .image-2 {
    grid-row: 1 / 3;
    grid-column: 3;
  }

#lifestyle-images .image-3 {
    grid-row: 2;
    grid-column: 1;
  }

#lifestyle-images .image-4 {
    grid-row: 2;
    grid-column: 2;
  }

@media (max-width: 550px) {

#lifestyle-images-alt {
    position: relative;
    width: 100vw;
    left: calc(50% - 50vw)
}
  }

#lifestyle-images-alt img {
    display: block;
  }

#lifestyle-images-alt .image-single img {
    width: 100%;
    height: auto;
  }

@media (min-width: 401px) {
  #lifestyle-images-alt .image-double {
      display: flex
  }
    }

#lifestyle-images-alt .image-double img {
      aspect-ratio: 1;
      -o-object-fit: cover;
         object-fit: cover;
      width: 100%
    }

@media (min-width: 401px) {
    #lifestyle-images-alt .image-double img {
        width: 50%
    }
      }

/************************************************************
 * SUGGESTIONS
 ************************************************************/

#suggestions {
  margin-bottom: 30px;
}

#suggestions .title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 30px;
    text-transform: uppercase;
  }

#suggestions .products {
    justify-content: center;
  }

/************************************************************
 * LACE COLOR OPTIONS
 ************************************************************/

.color-category,
.style-category,
.size-category,
.icon-category {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  margin-bottom: 10px;
}

.color-category .category-title, .style-category .category-title, .size-category .category-title, .icon-category .category-title {
    width: 100%;
    font: 14px/150% "Campton", sans-serif;
    margin-bottom: 5px;
  }

.color-category .color-product-option,
  .color-category .icon-product-option,
  .color-category .color-embroid-option,
  .color-category .edge-color-option,
  .style-category .color-product-option,
  .style-category .icon-product-option,
  .style-category .color-embroid-option,
  .style-category .edge-color-option,
  .size-category .color-product-option,
  .size-category .icon-product-option,
  .size-category .color-embroid-option,
  .size-category .edge-color-option,
  .icon-category .color-product-option,
  .icon-category .icon-product-option,
  .icon-category .color-embroid-option,
  .icon-category .edge-color-option {
    width: 24px;
    height: 24px;
    margin: 0 3px 5px;
    position: relative;
    cursor: pointer
  }

.color-category .color-product-option.icon-product-option, .color-category .icon-product-option.icon-product-option, .color-category .color-embroid-option.icon-product-option, .color-category .edge-color-option.icon-product-option, .style-category .color-product-option.icon-product-option, .style-category .icon-product-option.icon-product-option, .style-category .color-embroid-option.icon-product-option, .style-category .edge-color-option.icon-product-option, .size-category .color-product-option.icon-product-option, .size-category .icon-product-option.icon-product-option, .size-category .color-embroid-option.icon-product-option, .size-category .edge-color-option.icon-product-option, .icon-category .color-product-option.icon-product-option, .icon-category .icon-product-option.icon-product-option, .icon-category .color-embroid-option.icon-product-option, .icon-category .edge-color-option.icon-product-option {
      width: 54px;
      height: 54px;
      padding: 6px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }

.color-category .color-product-option::after, .color-category .icon-product-option::after, .color-category .color-embroid-option::after, .color-category .edge-color-option::after, .style-category .color-product-option::after, .style-category .icon-product-option::after, .style-category .color-embroid-option::after, .style-category .edge-color-option::after, .size-category .color-product-option::after, .size-category .icon-product-option::after, .size-category .color-embroid-option::after, .size-category .edge-color-option::after, .icon-category .color-product-option::after, .icon-category .icon-product-option::after, .icon-category .color-embroid-option::after, .icon-category .edge-color-option::after {
      content: "";
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      position: absolute;
      top: -2px;
      left: -2px;
      border: 1px solid transparent;
      transition: border-color 0.25s ease;
    }

.color-category .color-product-option:hover::after, .color-category .icon-product-option:hover::after, .color-category .color-embroid-option:hover::after, .color-category .edge-color-option:hover::after, .style-category .color-product-option:hover::after, .style-category .icon-product-option:hover::after, .style-category .color-embroid-option:hover::after, .style-category .edge-color-option:hover::after, .size-category .color-product-option:hover::after, .size-category .icon-product-option:hover::after, .size-category .color-embroid-option:hover::after, .size-category .edge-color-option:hover::after, .icon-category .color-product-option:hover::after, .icon-category .icon-product-option:hover::after, .icon-category .color-embroid-option:hover::after, .icon-category .edge-color-option:hover::after {
        border-color: #c4c4c4;
        transition: border-color 0.25s ease;
      }

.color-category .color-product-option.selected::after, .color-category .icon-product-option.selected::after, .color-category .color-embroid-option.selected::after, .color-category .edge-color-option.selected::after, .style-category .color-product-option.selected::after, .style-category .icon-product-option.selected::after, .style-category .color-embroid-option.selected::after, .style-category .edge-color-option.selected::after, .size-category .color-product-option.selected::after, .size-category .icon-product-option.selected::after, .size-category .color-embroid-option.selected::after, .size-category .edge-color-option.selected::after, .icon-category .color-product-option.selected::after, .icon-category .icon-product-option.selected::after, .icon-category .color-embroid-option.selected::after, .icon-category .edge-color-option.selected::after {
        border-color: #ff6b00;
        transition: border-color 0.25s ease;
      }

.color-category .style-option-container, .style-category .style-option-container, .size-category .style-option-container, .icon-category .style-option-container {
    display: flex;
    flex-direction: column;
  }

.color-category .style-option-container .style-product-option, .style-category .style-option-container .style-product-option, .size-category .style-option-container .style-product-option, .icon-category .style-option-container .style-product-option {
      width: 54px;
      height: 54px;
      margin: 0 2px 3px;
      padding: 3px;
      border: 1px solid transparent;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      transition: border-color 0.25s ease
    }

.color-category .style-option-container .style-product-option:hover, .style-category .style-option-container .style-product-option:hover, .size-category .style-option-container .style-product-option:hover, .icon-category .style-option-container .style-product-option:hover {
        border-color: #c4c4c4;
        transition: border-color 0.25s ease;
      }

.color-category .style-option-container .style-product-option.selected, .style-category .style-option-container .style-product-option.selected, .size-category .style-option-container .style-product-option.selected, .icon-category .style-option-container .style-product-option.selected {
        border-color: #ff6b00;
        transition: border-color 0.25s ease;
      }

.color-category .style-option-container img.style-product-option, .style-category .style-option-container img.style-product-option, .size-category .style-option-container img.style-product-option, .icon-category .style-option-container img.style-product-option {
      -o-object-fit: contain;
         object-fit: contain;
    }

.color-category .style-option-container .option-title, .style-category .style-option-container .option-title, .size-category .style-option-container .option-title, .icon-category .style-option-container .option-title {
      width: 65px;
      text-align: center;
      font-size: 13px;
      line-height: 1.3em;
    }

.color-category .size-product-option, .style-category .size-product-option, .size-category .size-product-option, .icon-category .size-product-option {
    min-width: 54px;
    height: 38px;
    border: 1px solid #c8c8c8;
    padding: 0 5px;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    margin: 0 3px 6px 3px;
    color: #6b6b6b;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: pointer;
    transition: border-color 0.2s linear;
    position: relative;
    line-height: 38px;
    text-align: center
  }

.color-category .size-product-option::after, .style-category .size-product-option::after, .size-category .size-product-option::after, .icon-category .size-product-option::after {
      position: absolute;
      bottom: 0px;
      left: calc(50% - 5.5px);
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 5.5px 9px 5.5px;
      border-color: transparent transparent #000000 transparent;
      transform-origin: bottom;
      transition: transform 0.3s ease-in-out;
      transform: scale(0);
    }

.color-category .size-product-option:hover, .style-category .size-product-option:hover, .size-category .size-product-option:hover, .icon-category .size-product-option:hover {
      border-color: #000;
      transition: border-color 0.2s linear;
    }

.color-category .size-product-option.selected, .style-category .size-product-option.selected, .size-category .size-product-option.selected, .icon-category .size-product-option.selected {
      border-color: #000
    }

.color-category .size-product-option.selected::after, .style-category .size-product-option.selected::after, .size-category .size-product-option.selected::after, .icon-category .size-product-option.selected::after {
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transform: scale(1);
      }

.color-category:nth-child(1), .style-category:nth-child(1), .size-category:nth-child(1), .icon-category:nth-child(1) {
    width: 49%;
    margin-left: 2%;
  }

.color-category:nth-child(2), .style-category:nth-child(2), .size-category:nth-child(2), .icon-category:nth-child(2) {
    width: 49%;
  }

.color-category:nth-child(2) .category-title, .style-category:nth-child(2) .category-title, .size-category:nth-child(2) .category-title, .icon-category:nth-child(2) .category-title {
      margin-left: 3px;
    }

.color-category.icon-category, .style-category.icon-category, .size-category.icon-category, .icon-category.icon-category {
    justify-content: space-evenly;
  }

.color-category.single, .style-category.single, .size-category.single, .icon-category.single {
    width: 66.5%;
  }

.color-category.full, .style-category.full, .size-category.full, .icon-category.full {
    width: calc(100% - 6px);
    margin-left: 6px;
  }

.drop-down-select.multi-layout {
  display: flex;
  flex-direction: column;
}

.drop-down-select.multi-layout :is(.color-category, .style-category, .size-category, .icon-category) {
    margin-left: 2%;
    width: 100%;
  }

.drop-down-select.multi-layout :is(.color-category, .style-category, .size-category, .icon-category) .category-title.category-title {
      margin-left: 0;
    }

@media (max-width: 400px) {

.medium-container.product-med-cont {
    padding: 0 4px
}
  }

body.review {
  overflow: hidden;
}

body.review #single-product .review-form-overlay {
    opacity: 1;
    display: flex;
  }

body.custom {
  overflow: hidden;
}

body.custom #single-product .custom-form-overlay {
    opacity: 1;
    display: flex;
  }

body.backorder-confirm {
  overflow: hidden;
}

body.backorder-confirm #single-product .confirm-overlay {
    display: flex;
  }

/************************************************************
 * AUCTION STYLES
 ************************************************************/

.auction-hide {
  display: none !important;
}

#auction-product-type {
  flex-grow: 1;
  width: 100%;
}

#auction-product-type p {
    font-weight: 400;
  }

#auction-product-type strong {
    text-transform: uppercase;
  }

#auction-product-type .hasCountdown {
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #e6e6e6;
    background: #fff;
    color: #ff6b00;
    padding: 10px;
    font-size: 20px;
  }

#auction-product-type .hasCountdown .countdown_row {
      display: flex;
      flex-grow: 1;
    }

#auction-product-type .hasCountdown .countdown_amount {
      padding-top: 10px;
      display: inline-block;
    }

#auction-product-type .max-bid {
    font-weight: bold;
  }

#auction-product-type .max-bid .amount {
      font-size: 1.2em;
      color: #ff6b00;
    }

.buy-now.cart {
  padding-top: 8px;
}

.buy-now.cart .single_add_to_cart_button {
    margin-bottom: 6px;
    margin-bottom: 30px;
  }

.uwa_auction_condition {
  width: 100%;
  margin-bottom: 10px;
}

.uwa_auction_time {
  width: 100%;
}

.uwa_auction_time strong {
    text-transform: uppercase;
  }

.uwa_buttons {
  display: flex;
  flex-direction: column;
}

.uwa_buttons .single_add_to_cart_button {
    order: -1;
    flex-direction: column;
  }

.uwa_buttons .buy-now-message {
    order: -1;
    font-weight: 400;
  }

.uwa_buttons .ship-text {
    order: -1;
    padding-left: 0;
  }

.watchlist-error {
  display: block;
  margin-bottom: 5px;
}

.login-notice {
  font-weight: 700;
  margin-bottom: 30px;
}

.login-notice span {
    font-weight: normal;
  }

.woocommerce a.button,
.woocommerce button.button {
  border-radius: 0;
  border: solid 1px #ff6b00;
  background-color: #ff6b00;
  color: #fff;
  font-weight: normal;
  transition: all 0.25s ease
}

.woocommerce a.button:hover, .woocommerce button.button:hover {
    background: #fff;
    color: #ff6b00;
  }

.woocommerce a.button:disabled,
  .woocommerce a.button:disabled[disabled],
  .woocommerce button.button:disabled,
  .woocommerce button.button:disabled[disabled] {
    background: #e6e6e6;
    border-color: #e6e6e6;
  }

.woocommerce button.button {
  padding: 1em;
}

/************************************************************
 * EDGE X STYLES
 ************************************************************/

body.edgex:not(.stock-edgex) #product-info .standard-options form > .option:not(.pa_personalized-engraving):not(.pa_break-in), body.edgex:not(.stock-edgex) #product-info .standard-options form > .wide-option:not(.pa_personalized-engraving):not(.pa_break-in) {
          display: none;
        }

body:is(.edgex, .dark-body):not(.browser-ie) {
    background-color: #000;
  }

body:is(.edgex, .dark-body):not(.browser-ie) main {
      color: #fff;
    }

body:is(.edgex, .dark-body):not(.browser-ie).term-books {
      background-color: #fff;
    }

body:is(.edgex, .dark-body):not(.browser-ie) #breadcrumb a {
        color: #6b6b6b;
        border-bottom-color: #000
      }

body:is(.edgex, .dark-body):not(.browser-ie) #breadcrumb a:hover {
          color: #ff6b00;
          border-bottom-color: #fff;
        }

body:is(.edgex, .dark-body):not(.browser-ie) #product-header h1,
      body:is(.edgex, .dark-body):not(.browser-ie) #product-header h2 {
        color: #fff;
      }

body:is(.edgex, .dark-body):not(.browser-ie) #product-header .stars {
        filter: invert(100%);
      }

body:is(.edgex, .dark-body):not(.browser-ie) #product-images .main-image {
        border-color: #000;
      }

body:is(.edgex, .dark-body):not(.browser-ie) #product-images .thumbnail::before {
        border-color: #6b6b6b;
      }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .standard-options .radio {
          color: #6b6b6b;
        }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .standard-options .radio label {
          color: #fff;
        }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .standard-options a.sample-link {
          border-bottom-color: #000
        }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .standard-options a.sample-link:hover {
            border-bottom-color: #fff;
          }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .standard-options .custom-price::after {
          background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
        }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .standard-options .engraving-letters {
          background-color: #fff;
        }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .leathers {
        filter: invert(100%);
      }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .specs .spec .scale {
          filter: invert(100%)
        }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .specs .spec .scale::before {
            filter: hue-rotate(180deg);
          }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .specs .spec .low,
        body:is(.edgex, .dark-body):not(.browser-ie) #product-info .specs .spec .high {
          color: #6b6b6b;
        }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .info-sections .info-header {
          color: #fff;
        }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .info-sections .stars-amount {
          filter: invert(100%);
        }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .info-sections a {
          color: #fff;
        }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .share-links {
        padding-left: 0;
      }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .share-links a {
          filter: invert(100%) grayscale(100%);
        }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .uwa_auction_product_countdown {
        background-color: #000;
        color: #fff;
      }

body:is(.edgex, .dark-body):not(.browser-ie) #product-info .uwa_auction_product_countdown * {
          color: inherit;
        }

body:is(.edgex, .dark-body):not(.browser-ie) #nokona-prod-group-single-product-upsells .product-unit .product-details {
        color: #fff;
      }

body:is(.edgex, .dark-body):not(.browser-ie) .custom-form-overlay {
      color: #000;
    }

body:is(.edgex, .dark-body) div[data-pp-message] {
    filter: brightness(300%) saturate(66%);
  }

.glove-brand-prompt {
  display: none;
  isolation: isolate;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  z-index: 10000
}

.glove-brand-prompt.show {
    display: flex;
  }

.glove-brand-prompt .prompt-shadow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(48, 47, 47, 0.84314);
  }

.glove-brand-prompt .prompt-modal {
    width: calc(100vw - 48px);
    max-width: 600px;
    padding: 70px 64px;
    background-color: #fff;
    position: relative;
  }

.glove-brand-prompt .prompt-start,
  .glove-brand-prompt label {
    color: #707070;
    font: 400 28px/125% "Campton", sans-serif;
    letter-spacing: -0.007em;
  }

.glove-brand-prompt .prompt-start {
    font-weight: 700;
    padding-bottom: 16px;
  }

.glove-brand-prompt label {
    padding-left: 36px;
    position: relative;
    cursor: pointer
  }

.glove-brand-prompt label::before,
    .glove-brand-prompt label::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      box-sizing: border-boxw;
    }

.glove-brand-prompt label::before {
      border: solid 1px #707070;
      top: calc(50% - 0.5em);
      left: 0;
      width: 0.66em;
      height: 0.66em;
    }

.glove-brand-prompt label::after {
      top: calc(50% - 0.5em + 3px);
      left: 3px;
      width: calc(0.66em - 4px);
      height: calc(0.66em - 4px);
      background-color: #ff6b00;
      transform: scale(0);
      transition: transform 0.2s ease;
    }

.glove-brand-prompt label.current::after {
        transform: scale(1);
      }

.glove-brand-prompt .prompt-split {
    font: 700 14px/21px "Campton", sans-serif;
    text-transform: uppercase;
    padding: 4px 0 4px 36px;
  }

.glove-brand-prompt .add-to-cart {
    margin-top: 36px;
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid #ff6b00;
    background-color: #ff6b00;
    box-sizing: border-box;
    color: #fff;
    font: 700 16px/ 100% "Campton", sans-serif;
    padding: 1.1em 1em 0.9em;
    width: min(320px, 100%);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase
  }

.glove-brand-prompt .add-to-cart:not(.disabled):hover {
      background-color: #fff;
      color: #ff6b00;
    }

.glove-brand-prompt .add-to-cart.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

.glove-brand-prompt .prompt-title,
  .glove-brand-prompt .prompt-text {
    font: 400 14px/120% "Campton", sans-serif;
  }

.glove-brand-prompt .prompt-title {
    font-size: 23px;
  }

.glove-brand-prompt .prompt-exit-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    cursor: pointer
  }

.glove-brand-prompt .prompt-exit-btn::before,
    .glove-brand-prompt .prompt-exit-btn::after {
      content: "";
      width: 100%;
      height: 2px;
      background-color: #000;
      position: absolute;
      top: calc(50% - 1px);
      left: 0;
      transition: background-color 0.2s linear;
    }

.glove-brand-prompt .prompt-exit-btn::before {
      transform: rotate(45deg);
    }

.glove-brand-prompt .prompt-exit-btn::after {
      transform: rotate(-45deg);
    }

.glove-brand-prompt .prompt-exit-btn:hover::before,
    .glove-brand-prompt .prompt-exit-btn:hover::after {
      background-color: #ff6b00;
    }

body.single-product .services-steps-block {
  padding-top: 62px;
  margin-bottom: 100px;
}

.prefooter-display {
  padding: 94px 60px 118px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

@media (max-width: 750px) {

.prefooter-display {
    padding: 12.5333vw 8vw 15.7333vw
}
  }

.prefooter-display .pf-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

.prefooter-display .pf-content {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    position: relative;
  }

.save-product-form {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 20000;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 64px 38px 56px;
  box-shadow: 0 0 0 10000px rgba(0,0,0,0.46667);
  text-align: left;
  box-sizing: border-box;
  max-width: 450px;
  color: #000
}

.save-product-form.visible {
    display: block;
    animation: fade-in 0.2s linear forwards;
  }

.save-product-form h2 {
    font: 500 28px/120% "Campton", sans-serif;
    letter-spacing: -0.025em;
    margin-bottom: 1em;
  }

.save-product-form p {
    font: 400 18px/120% "Campton", sans-serif;
    margin-bottom: 1em;
  }

.save-product-form input {
    border: 1px solid #e6e6e6;
    width: 100%;
    font: 600 12px/120% "Campton", sans-serif;
    text-transform: uppercase;
    box-sizing: border-box;
    padding: 1.1em 1em 0.9em;
    margin-bottom: 20px
  }

.save-product-form input::-moz-placeholder {
      font-weight: 400;
    }

input::-moz-placeholder {
      font-weight: 400;
    }

.save-product-form input::placeholder {
      font-weight: 400;
    }

.save-product-form button[type="submit"] {
    background-color: #ff6b00;
    color: #fff;
    font: 700 18px/120% "Campton", sans-serif;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ff6b00;
    padding: 0.9em 0.8em 0.7em;
    cursor: pointer;
    transition: background-color 0.2s linear, color 0.2s linear
  }

.save-product-form button[type="submit"]:hover {
      background-color: #fff;
      color: #ff6b00;
    }

.save-product-form .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
  }

.save-product-form .x-pattern {
    position: relative;
    width: 22px;
    height: 22px
  }

.save-product-form .x-pattern::before,
    .save-product-form .x-pattern::after {
      content: "";
      position: absolute;
      background-color: #898a8d;
      height: 141%;
      width: 3px;
      top: 50%;
      left: 50%;
      border-radius: 1px;
    }

.save-product-form .x-pattern::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

.save-product-form .x-pattern::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

.tmp-save-product {
  font: 700 14px/120% "Campton", sans-serif;
  color: #ff6b00;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  margin-bottom: min(32px, 6vw);
  margin-left: 8px
}

.tmp-save-product::before {
    content: "";
    display: inline-block;
    width: 1.92857em;
    height: 1.71428em;
    margin-right: 8px;
    background: url(/wp-content/themes/nokona-2019/img/nokona-orange-heart.svg) no-repeat center/contain;
  }

.textfield .input-wrap, .textarea .input-wrap, .datefield .input-wrap {
    width: 100%;
    padding: 0 12px 16px;
  }

.textfield textarea, .textarea textarea, .datefield textarea {
    display: block;
  }

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

footer {
  background: #e6e6e6;
}

footer .container {
    padding: 47px 39px 25px;
    text-align: left;
    overflow: hidden
  }

footer .container::before {
      content: "";
      position: absolute;
      right: 38px;
      bottom: -16px;
      display: block;
      width: 238px;
      height: 199px;
      background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/nokona-mark.svg);
    }

@media (max-width: 1020px) {

  footer .container {
      padding-left: 3.82vw;
      padding-right: 3.82vw
  }
    }

footer .footer-columns {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-bottom: 80px;
    position: relative
  }

@media (max-width: 900px) {

  footer .footer-columns {
      flex-direction: column
  }
    }

footer .footer-address {
    width: 150px;
    margin: 0 60px 45px 0;
    position: relative;
  }

footer .footer-address .vcard {
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0.05em;
      margin-bottom: 25px;
    }

footer .footer-address .vcard a {
        color: #000;
        transition: color 0.25s ease;
        display: block
      }

footer .footer-address .vcard a:hover {
          color: #ff6b00;
        }

footer .footer-address #made-in-america-2 {
      position: absolute;
      bottom: 8px;
      right: -38px;
      font-size: 0;
      width: 56px;
      height: 16px;
      background: no-repeat center/100% 100% url(/wp-content/themes/nokona-2019/img/us-flag.svg);
      border-bottom: none;
      display: none
    }

@media (max-width: 600px) {
    footer .footer-address #made-in-america-2 {
        display: block
    }
      }

footer .social {
    display: flex;
  }

footer .social a {
      font-size: 0;
      width: 30px;
      height: 30px;
      margin-right: 14px;
      transition: all 0.3s ease;
    }

footer h3 {
    font: 900 18px/21.6px "Campton", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 7px;
    white-space: nowrap;
  }

footer .link-group {
    margin-right: 40px;
  }

footer .link-group ul {
      list-style: none;
      margin-bottom: 40px;
    }

footer .link-group li {
      padding-bottom: 10px;
    }

footer .link-group a {
      color: #000;
      border-bottom: solid 1px transparent;
      transition: border-color 0.25s ease;
      white-space: nowrap
    }

footer .link-group a:hover {
        border-color: #ff6b00;
      }

@media (max-width: 900px) {

  footer .shop-col {
      /* display: none;*/
  }
    }

footer .email-signup {
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 1.5s cubic-bezier(0.165, 0.84, 0.44, 1)
  }

footer .email-signup.highlight {
      background-color: rgba(255, 255, 255, 1);
    }

footer .email-signup h3 {
      width: 235px;
      white-space: normal;
      color: #ff6b00;
    }

footer .email-signup p {
      margin-bottom: 1em;
    }

footer .email-signup #mc-embedded-subscribe-form {
      display: flex;
      flex-direction: column;
    }

footer .email-signup input:is([type="email"], [type="tel"]) {
      border: none;
      border-radius: 0;
      background: #fff;
      box-sizing: border-box;
      width: 100%;
      height: 40px;
      font: 16px/40px "Campton", sans-serif;
      letter-spacing: 0.05em;
      padding: 0 15px;
      margin-right: 10px;
      margin-bottom: 10px
    }

footer .email-signup input:is([type="email"], [type="tel"])::-moz-placeholder {
        line-height: 40px;
      }

input:is([type="email"], [type="tel"])::-moz-placeholder {
        line-height: 40px;
      }

footer .email-signup input:is([type="email"], [type="tel"])::placeholder {
        line-height: 40px;
      }

footer .email-signup button {
      height: 40px;
      align-self: flex-start;
      border: solid 1px #000;
      background: #000;
      font-size: 15px;
      text-transform: uppercase;
      line-height: 40px;
      padding: 0 2em;
      color: #fff;
      cursor: pointer;
      transition: all 0.3s ease
    }

footer .email-signup button:hover {
        border-color: #ff6b00;
        background: #fff;
        color: #ff6b00;
      }

footer .copyright {
    font-size: 12px;
    position: relative;
  }

footer .copyright a {
      color: #000;
      transition: color 0.25s ease
    }

footer .copyright a:hover {
        color: #ff6b00;
      }

footer .copyright a::before {
        content: "|";
        margin: 0 14px;
      }

#footer-logo {
  font-size: 0;
  display: block;
  height: 27px;
  background: no-repeat center top/contain url(/wp-content/themes/nokona-2019/img/nokona.svg);
  margin-bottom: 15px
}

#footer-logo.leather {
    background-image: url(/wp-content/themes/nokona-2019/img/nokona-leather-goods.svg);
    height: 38px;
  }

.nokona-global-popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  background-color: rgba(0, 0, 0, 0.479);
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.nokona-global-popup .modal-wrap {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.nokona-global-popup .modal {
    position: relative;
    background-color: #fff;
    border: 1px solid black;
    display: inline-block;
    margin: 32px auto
  }

@media (min-width: 751px) {
  .nokona-global-popup .modal {
      margin: 45px 0
  }
    }

.nokona-global-popup .modal .exit.exit-popup {
      position: absolute;
      z-index: 3;
      top: 7px;
      right: 7px;
      width: 24px;
      height: 24px;
      cursor: pointer
    }

.nokona-global-popup .modal .exit.exit-popup::before,
      .nokona-global-popup .modal .exit.exit-popup::after {
        content: "";
        position: absolute;
        top: calc(50% - 2px);
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #ff6b00;
        transition: background-color 0.25s linear;
      }

.nokona-global-popup .modal .exit.exit-popup::before {
        transform: rotate(45deg);
      }

.nokona-global-popup .modal .exit.exit-popup::after {
        transform: rotate(-45deg);
      }

.nokona-global-popup .modal .exit.exit-popup:hover::before,
        .nokona-global-popup .modal .exit.exit-popup:hover::after {
          background-color: darken(#ff6b00, 10%);
        }

.nokona-global-popup .modal .modal-content .email-signup-container {
        width: 92vw;
        max-width: 800px;
        display: flex;
        flex-wrap: wrap-reverse
      }

@media (max-width: 600px) {
      .nokona-global-popup .modal .modal-content .email-signup-container {
          max-width: 500px
      }
        }

.nokona-global-popup .modal .modal-content .email-signup-container.edgex {
          max-width: 1080px;
        }

.nokona-global-popup .modal .modal-content .email-signup-container.edgex .title {
            margin-bottom: 0;
          }

.nokona-global-popup .modal .modal-content .email-signup-container.holiday #mc-embedded-subscribe-form-popup {
          margin-top: 5%;
          margin-bottom: 5%;
        }

.nokona-global-popup .modal .modal-content .email-signup-image {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 50%;
        padding-top: 52.6%;
        position: relative;
      }

.nokona-global-popup .modal .modal-content .email-signup-image img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
        }

.nokona-global-popup .modal .modal-content .announcement-image {
        position: relative;
      }

.nokona-global-popup .modal .modal-content .announcement-image img {
          display: block;
          max-width: 1000px;
          max-height: 96vh;
          height: auto
        }

@media (max-width: 1042px) {
        .nokona-global-popup .modal .modal-content .announcement-image img {
            max-width: 96vw
        }
          }

.nokona-global-popup .modal .modal-content .announcement-image .cta-link {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }

.nokona-global-popup .modal .modal-content .announcement-image.mobile {
          display: none;
        }

@media (max-width: 600px) {
      .nokona-global-popup .modal .modal-content .announcement-image {
          display: none
      }
          .nokona-global-popup .modal .modal-content .announcement-image.mobile {
            display: block;
          }
        }

.nokona-global-popup .modal .modal-content .before-text,
      .nokona-global-popup .modal .modal-content .after-text {
        font: 300 22px/153.571% "Campton", sans-serif;
        margin: 14px 12%;
      }

.nokona-global-popup .modal .modal-content .email-signup-form,
      .nokona-global-popup .modal .modal-content .announcement-form {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 5.06%;
        padding-bottom: 5.06%;
        position: relative;
      }

.nokona-global-popup .modal .modal-content .email-signup-form #email-logo, .nokona-global-popup .modal .modal-content .announcement-form #email-logo {
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          margin-bottom: 8.2%;
        }

.nokona-global-popup .modal .modal-content .email-signup-form .title, .nokona-global-popup .modal .modal-content .announcement-form .title {
          color: rgb(204, 204, 204);
          font: 300 50px/100% "EvelethClean", sans-serif;
          width: 80%;
          margin-bottom: 5.06%
        }

@media (max-width: 800px) {
        .nokona-global-popup .modal .modal-content .email-signup-form .title, .nokona-global-popup .modal .modal-content .announcement-form .title {
            font-size: 5.81vw
        }
          }

@media (max-width: 600px) {
        .nokona-global-popup .modal .modal-content .email-signup-form .title, .nokona-global-popup .modal .modal-content .announcement-form .title {
            font-size: 8.33vw;
            width: 100%
        }
          }

.nokona-global-popup .modal .modal-content .email-signup-form .message, .nokona-global-popup .modal .modal-content .announcement-form .message {
          color: black;
          font: 16px/114.5% "Campton", sans-serif;
          width: 80%
        }

@media (max-width: 800px) {
        .nokona-global-popup .modal .modal-content .email-signup-form .message, .nokona-global-popup .modal .modal-content .announcement-form .message {
            font-size: 1.85vw
        }
          }

@media (max-width: 600px) {
        .nokona-global-popup .modal .modal-content .email-signup-form .message, .nokona-global-popup .modal .modal-content .announcement-form .message {
            font-size: 2.66vw;
            width: 100%
        }
          }

@media (max-width: 400px) {
        .nokona-global-popup .modal .modal-content .email-signup-form .message, .nokona-global-popup .modal .modal-content .announcement-form .message {
            font-size: 10.6px
        }
          }

.nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup, .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 50%;
          margin-top: 10.12%;
        }

.nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"]), .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"]) {
            vertical-align: middle;
            height: 36px;
            border: 1px solid rgb(218, 218, 218);
            padding: 0 14px;
            box-sizing: border-box;
            margin-bottom: 5.06%;
            line-height: 35px
          }

.nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::-moz-placeholder, .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::-moz-placeholder {
              color: rgb(103, 103, 103);
              font-size: 9px;
              line-height: 35px;
              padding-top: 0px
            }

input:is([type="email"], [type="tel"])::-moz-placeholder {
              color: rgb(103, 103, 103);
              font-size: 9px;
              line-height: 35px;
              padding-top: 0px
            }

.nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::placeholder, .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::placeholder {
              color: rgb(103, 103, 103);
              font-size: 9px;
              line-height: 35px;
              padding-top: 0px
            }

@media (max-width: 750px) {
            .nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::-moz-placeholder, .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::-moz-placeholder {
                line-height: 5.33vw
            }
            input:is([type="email"], [type="tel"])::-moz-placeholder {
                line-height: 5.33vw
            }
            .nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::placeholder, .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::placeholder {
                line-height: 5.33vw
            }
              }

@media (max-width: 750px) {
            .nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::-moz-placeholder, .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::-moz-placeholder {
                line-height: 6.66vw
            }
            input:is([type="email"], [type="tel"])::-moz-placeholder {
                line-height: 6.66vw
            }
            .nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::placeholder, .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::placeholder {
                line-height: 6.66vw
            }
              }

@media (max-width: 400px) {
          .nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"]), .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"]) {
              padding: 0 2vw;
              font-size: 16px
          }
              .nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::-moz-placeholder, .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::-moz-placeholder {
                font-size: 11px;
              }
              input:is([type="email"], [type="tel"])::-moz-placeholder {
                font-size: 11px;
              }
              .nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::placeholder, .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup input:is([type="email"], [type="tel"])::placeholder {
                font-size: 11px;
              }
            }

.nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup button[type="submit"], .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup button[type="submit"] {
            height: 36px;
            border: solid 1px #000;
            background: #000;
            vertical-align: middle;
            cursor: pointer;
            font-size: 15px;
            text-transform: uppercase;
            line-height: 35px;
            padding: 0;
            color: #fff;
            font-size: 10px;
            font-weight: 300;
            transition: all 0.3s ease
          }

.nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup button[type="submit"]:hover, .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup button[type="submit"]:hover {
              border-color: #ff6b00;
              background: #fff;
              color: #ff6b00;
            }

@media (max-width: 600px) {
          .nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup button[type="submit"], .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup button[type="submit"] {
              font-size: 11px
          }
            }

@media (max-width: 750px) {
            .nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup button[type="submit"],
            .nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup input[type="email"],
            .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup button[type="submit"],
            .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup input[type="email"] {
              height: 5.33vw;
              line-height: 5.33vw;
            }
          }

@media (max-width: 600px) {
            .nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup button[type="submit"],
            .nokona-global-popup .modal .modal-content .email-signup-form #mc-embedded-subscribe-form-popup input[type="email"],
            .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup button[type="submit"],
            .nokona-global-popup .modal .modal-content .announcement-form #mc-embedded-subscribe-form-popup input[type="email"] {
              height: 6.66vw;
              line-height: 6.66vw;
            }
          }

@media (max-width: 600px) {
      .nokona-global-popup .modal .modal-content .email-signup-form,
      .nokona-global-popup .modal .modal-content .announcement-form {
          padding-top: 10.12%;
          padding-bottom: 10.12%
      }
        }

.nokona-global-popup .modal .modal-content .announcement-form {
        padding: 7.06% 8%;
        text-align: center;
        box-sizing: border-box;
      }

.nokona-global-popup .modal .modal-content .announcement-form .cta-link {
          display: block;
          width: 85%;
          padding: 5.75% 3.75% 4.75%;
          margin-top: 11.7%;
          background-color: #ff6b00;
          border: 2px solid #ff6b00;
          color: #fff;
          text-transform: uppercase;
          font: 15.5px/116% "Campton", sans-serif;
          letter-spacing: 0.05;
          cursor: pointer;
          box-sizing: border-box;
          transition: background-color 0.25s linear, color 0.25s linear
        }

.nokona-global-popup .modal .modal-content .announcement-form .cta-link:hover {
            color: #ff6b00;
            background-color: #fff;
          }

.nokona-global-popup .modal .modal-content .announcement-form .a-head {
          font: bold 19px/100% "EvelethClean", sans-serif;
          padding: 3.25% 0.7em;
          position: relative
        }

.nokona-global-popup .modal .modal-content .announcement-form .a-head::before,
          .nokona-global-popup .modal .modal-content .announcement-form .a-head::after {
            content: "";
            width: 2.5em;
            height: 1px;
            background-color: #ff6b00;
            position: absolute;
            top: calc(50% - 2px);
          }

.nokona-global-popup .modal .modal-content .announcement-form .a-head::before {
            right: 100%;
          }

.nokona-global-popup .modal .modal-content .announcement-form .a-head::after {
            left: 100%;
          }

.nokona-global-popup .modal .modal-content .announcement-form .a-regular {
          font: 300 47px/109% "EvelethClean", sans-serif;
        }

.nokona-global-popup .modal .modal-content .announcement-form .a-bold {
          font: bold 47px/109% "EvelethClean", sans-serif;
        }

@media (max-width: 870px) {
          .nokona-global-popup .modal .modal-content .announcement-form .a-head {
            font-size: 2.184vw;
          }
          .nokona-global-popup .modal .modal-content .announcement-form .a-regular,
          .nokona-global-popup .modal .modal-content .announcement-form .a-bold {
            font-size: 5.4023vw;
          }
          .nokona-global-popup .modal .modal-content .announcement-form .cta-link {
            font-size: 1.787vw;
          }
        }

.nokona-global-popup .modal .modal-content .nokona-story-video-container {
        width: 96vw;
        max-width: 1120px;
      }

.nokona-global-popup .modal .modal-content .nokona-story-video-container .nokona-story-video-wrapper {
          width: 100%;
          padding-top: 56.25%;
          position: relative;
        }

.nokona-global-popup .modal .modal-content .nokona-story-video-container .nokona-story-video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }

@media (max-width: 600px) {
        .nokona-global-popup .modal .modal-content .email-signup-image {
          width: 100%;
          padding-top: 76%;
        }
        .nokona-global-popup .modal .modal-content .email-signup-form,
        .nokona-global-popup .modal .modal-content .announcement-form {
          width: 100%;
          min-height: 96.77vw;
          box-sizing: border-box;
        }
          .nokona-global-popup .modal .modal-content .email-signup-form .a-head, .nokona-global-popup .modal .modal-content .announcement-form .a-head {
            font-size: 19px;
          }
          .nokona-global-popup .modal .modal-content .email-signup-form .a-regular,
          .nokona-global-popup .modal .modal-content .email-signup-form .a-bold,
          .nokona-global-popup .modal .modal-content .announcement-form .a-regular,
          .nokona-global-popup .modal .modal-content .announcement-form .a-bold {
            font-size: 47px;
          }
          .nokona-global-popup .modal .modal-content .email-signup-form .cta-link, .nokona-global-popup .modal .modal-content .announcement-form .cta-link {
            font-size: 15.5px;
          }
        .nokona-global-popup .modal .modal-content .email-signup-form {
          padding: 5% 5% 8% 5%;
          min-height: 0;
          min-height: initial;
        }
        .nokona-global-popup .modal .modal-content .announcement-form {
          min-height: 84.77vw;
          padding: 12.551% 14.22%;
        }

        .nokona-global-popup .modal .modal-content.glove-modal {
          max-width: 450px;
        }
      }

@media (max-width: 450px) {
          .nokona-global-popup .modal .modal-content .announcement-form .a-head {
            font-size: 4.22vw;
          }
          .nokona-global-popup .modal .modal-content .announcement-form .a-regular,
          .nokona-global-popup .modal .modal-content .announcement-form .a-bold {
            font-size: 10.44vw;
          }
          .nokona-global-popup .modal .modal-content .announcement-form .cta-link {
            font-size: 3.44vw;
          }
      }

.nokona-global-popup .modal .modal-content .dna-popup {
        width: 92vw;
        max-width: 800px;
        display: flex;
        flex-wrap: wrap-reverse
      }

@media (max-width: 600px) {

      .nokona-global-popup .modal .modal-content .dna-popup {
          max-width: 436px
      }
        }

.nokona-global-popup .modal .modal-content .dna-popup form {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-top: 6%;
          font: 300 12em/100% "EvelethClean", sans-serif;
        }

.nokona-global-popup .modal .modal-content .dna-popup form input:is([type="email"], [type="tel"]) {
            max-width: 100%;
            min-width: 202px;
            padding: 0.9em 1em 0.7em;
            font: inherit;
            border: 1px solid #e6e6e6;
            box-sizing: border-box;
            margin-bottom: 10px
          }

.nokona-global-popup .modal .modal-content .dna-popup form input:is([type="email"], [type="tel"])::-moz-placeholder {
              color: #6b6c6c;
              font: inherit;
              font-size: 0.8em;
            }

input:is([type="email"], [type="tel"])::-moz-placeholder {
              color: #6b6c6c;
              font: inherit;
              font-size: 0.8em;
            }

.nokona-global-popup .modal .modal-content .dna-popup form input:is([type="email"], [type="tel"])::placeholder {
              color: #6b6c6c;
              font: inherit;
              font-size: 0.8em;
            }

.nokona-global-popup .modal .modal-content .dna-popup form button[type="submit"] {
            max-width: 100%;
            min-width: 202px;
            padding: 1em;
            font: inherit;
            border: solid 1px #000;
            background: #000;
            cursor: pointer;
            text-transform: uppercase;
            color: #fff;
            transition: all 0.3s ease
          }

.nokona-global-popup .modal .modal-content .dna-popup form button[type="submit"]:hover {
              border-color: #ff6b00;
              background: #fff;
              color: #ff6b00;
            }

.nokona-global-popup .modal .modal-content .dna-popup-content,
      .nokona-global-popup .modal .modal-content .dna-popup-image {
        width: 50%
      }

@media (max-width: 600px) {
      .nokona-global-popup .modal .modal-content .dna-popup-content,
      .nokona-global-popup .modal .modal-content .dna-popup-image {
          width: 100%
      }
        }

.nokona-global-popup .modal .modal-content .dna-popup-image img {
          display: block;
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
        }

.nokona-global-popup .modal .modal-content .dna-popup-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 32px 24px;
        box-sizing: border-box;
        font-size: 1px
      }

@media (max-width: 850px) and (min-width: 601px) {
      .nokona-global-popup .modal .modal-content .dna-popup-content {
          font-size: 0.117647vw
      }
        }

.nokona-global-popup .modal .modal-content .dna-popup-content[data-icon-top]:not([data-icon-top="none"])::before,
        .nokona-global-popup .modal .modal-content .dna-popup-content[data-icon-bottom]:not([data-icon-bottom="none"])::after {
          content: "";
          display: block;
        }

.nokona-global-popup .modal .modal-content .dna-popup-content[data-icon-top="flag"]::before,
        .nokona-global-popup .modal .modal-content .dna-popup-content[data-icon-bottom="flag"]::after {
          background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/us-flag.svg);
          width: 80px;
          height: 25px;
        }

.nokona-global-popup .modal .modal-content .dna-popup-content[data-icon-top="nokona"]::before,
        .nokona-global-popup .modal .modal-content .dna-popup-content[data-icon-bottom="nokona"]::after {
          background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/nokona.svg);
          width: 116px;
          height: 21px;
        }

.nokona-global-popup .modal .modal-content .dna-popup-content[data-icon-top]::before {
          margin: 12em 0 24em;
        }

.nokona-global-popup .modal .modal-content .dna-popup-content[data-icon-top]::after {
          margin: 24em 0 12em;
        }

.nokona-global-popup .modal .modal-content .dna-popup-content .title,
        .nokona-global-popup .modal .modal-content .dna-popup-content .message {
          max-width: 302px;
        }

.nokona-global-popup .modal .modal-content .dna-popup-content .title {
          font: 300 44em/105% "EvelethClean", sans-serif;
          color: #e6e6e6;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          padding-bottom: 6px;
        }

.nokona-global-popup .modal .modal-content .dna-popup-content .message {
          color: #000;
          font: 300 16em/120% "Campton", sans-serif;
          letter-spacing: -0.011em;
          padding-top: 0.75em;
        }

.nokona-global-popup .modal .modal-content .dna-popup-content .message > p {
            text-align: inherit;
            margin-bottom: 1em
          }

.nokona-global-popup .modal .modal-content .dna-popup-content .message > p:last-child {
              margin-bottom: 0;
            }

.nokona-global-popup .modal .modal-content .email-default .title {
          margin-top: auto;
        }

.nokona-global-popup .modal .modal-content .email-default .message {
          padding-bottom: 12px;
        }

.nokona-global-popup .modal .modal-content .email-default form {
          margin-bottom: auto;
        }

.nokona-global-popup .modal .modal-content .thankyou-default .title {
          font-size: 55em;
          margin-top: auto;
        }

.nokona-global-popup .modal .modal-content .thankyou-default .message {
          margin-bottom: auto;
        }

body.nokona-global-pop {
  overflow: hidden;
}

body.nokona-global-pop .nokona-global-popup {
    display: flex
  }

@media (max-width: 600px) {
  body.nokona-global-pop .nokona-global-popup {
      height: 100%;
      overflow: auto;
      display: block
  }
    }

@media (min-width: 751px) {
      body.nokona-global-pop .nokona-global-popup.pseudo-product .exit {
        width: 32px;
        height: 32px
      }
        body.nokona-global-pop .nokona-global-popup.pseudo-product .exit::before,
        body.nokona-global-pop .nokona-global-popup.pseudo-product .exit::after {
          background-color: #000;
        }
    }

body.nokona-global-pop .pseudo-div {
    width: min(98vw, calc(100vw - 32px));
    min-height: calc(100vh - 75px);
    box-sizing: border-box;
    padding: 52px 0;
    text-align: left
  }

@media (max-width: 400px) {

  body.nokona-global-pop .pseudo-div {
      padding-left: 8px;
      padding-right: 8px
  }
    }

body.nokona-global-pop .pseudo-div.loading {
      display: flex;
      justify-content: center;
      align-items: center
    }

body.nokona-global-pop .pseudo-div.loading::before {
        content: "";
        display: block;
        width: 92px;
        height: 92px;
        border-radius: 50%;
        border: 4px solid #ff6b00;
        border-color: #ff6b00 transparent #ff6b00 transparent;
        animation: spin 1.2s linear infinite;
      }

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359.9deg);
  }
}

/**
 * Contains styling for popups: regular and video
 */

#popup-shadow,
#video-shadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.video-showing #video-shadow,
.popup-showing #popup-shadow {
  width: 100%;
  height: 100%;
  opacity: 1;
}

body.popup-showing,
body.video-showing {
  overflow: hidden;
}

/************************
 * GENERAL POPUP
 ************************/

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 450px;
  max-width: 100vw;
  max-height: 100vh;
  box-sizing: border-box;
  padding: 45px 42px;
  background: #fff;
}

#popup iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
  }

@media (max-width: 450px) {

#popup {
    min-width: 100vw;
    padding: 10vw 9.333vw
}
  }

#popup-container {
  position: relative;
}

#popup-container img {
    max-width: 100%;
    height: auto;
  }

#popup-close {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 12px;
  right: 14px;
  background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/close-grey.svg);
  cursor: pointer;
}

/************************
 * VIDEO SPECIFIC POPUP
 ************************/

#video-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  max-height: 100vh
}

#video-popup::before {
    content: "";
    display: block;
    position: relative;
    padding-top: 56.656%;
  }

#video-popup iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
  }

@media (max-width: 1600px) {

#video-popup {
    width: 75vw
}
  }

@media (max-width: 750px) {

#video-popup {
    width: 100vw
}
  }

#video-close {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 11px;
  right: 16px;
  background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/close.svg);
  cursor: pointer;
}

.triad.medium-container {
    padding: 0 30px
  }

@media (max-width: 1020px) {

.triad.medium-container {
      padding: 0 2.941vw
  }
    }

@media (max-width: 600px) {

.triad.medium-container {
      padding: 0 6vw
  }
    }

.triad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.triad .item {
    margin: 0 10px 20px;
    width: calc(33.333% - 20px);
    text-align: center
  }

@media (max-width: 1020px) {

  .triad .item {
      margin: 0 0.98vw 1.96vw;
      width: calc(33.333% - 1.96vw)
  }
    }

@media (max-width: 750px) {

  .triad .item {
      width: calc(50% - 1.96vw)
  }
    }

@media (max-width: 600px) {

  .triad .item {
      width: 100%;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 4vw
  }
    }

.triad .item .image {
      aspect-ratio: 1;
      background-position: center;
      background-size: cover;
      margin-bottom: 15px;
    }

.triad .item .image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        display: block;
      }

.triad .item span {
      font: 900 22px/22px "Campton", sans-serif;
      color: #000;
      text-transform: uppercase;
      transition: color 0.25s ease
    }

@media (max-width: 1020px) and (min-width: 751px) {
    .triad .item span {
        font-size: 2.157vw;
        line-height: 2.157vw
    }
      }

@media (max-width: 667px) and (min-width: 601px) {
    .triad .item span {
        font-size: 3.298vw;
        line-height: 3.298vw
    }
      }

.triad a.item .image {
      position: relative
    }

.triad a.item .image::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 107, 0, 0.76);
        opacity: 0;
        transition: opacity 0.25s linear;
      }

.triad a.item:hover .image::after {
        opacity: 1;
      }

.triad a.item:hover span {
        color: #ff6b00;
      }

/* contains all blocks in one place so it only has to be maintained in one place for both front end and editor */

.hero-block {
  overflow: hidden;
}

.hero-block .container,
  .hero-block .full {
    position: relative;
    padding: 0;
  }

.hero-block .container .hero-image-holder, .hero-block .full .hero-image-holder {
      background: no-repeat center/cover;
      display: block;
      height: 0;
    }

.hero-block .container .hero-image-holder video, .hero-block .full .hero-image-holder video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%);
      }

.hero-block .container .hero-image-holder img, .hero-block .full .hero-image-holder img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

.hero-block .container .hero-image-holder.nokona-media-page-hero img, .hero-block .full .hero-image-holder.nokona-media-page-hero img {
          position: absolute;
          top: 0;
          left: 50%;
          width: auto;
          height: 100%;
          -o-object-fit: unset;
             object-fit: unset;
          transform: translateX(-50%);
        }

.hero-block .container.black-bottom, .hero-block .full.black-bottom {
      border-bottom: 2px solid black;
    }

.hero-block .container.orange-bottom, .hero-block .full.orange-bottom {
      border-bottom: 2px solid #ff6b00;
    }

.hero-block .text-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

.hero-block .hero-text {
    position: absolute;
    color: #fff;
    display: block;
  }

.hero-block .hero-text .main-title {
      color: #fff;
      font-family: "EvelethClean", sans-serif;
    }

.hero-block .hero-text .call-to-action .cta-text {
      color: #fff;
      font-family: "Campton", sans-serif;
    }

.hero-block .hero-text.lower-left {
      left: 40px;
      bottom: 50px;
      text-align: left
    }

@media (max-width: 750px) {

    .hero-block .hero-text.lower-left {
        left: 5.333vw;
        bottom: 6.667vw
    }
      }

.hero-block .hero-text.upper-left {
      left: 40px;
      top: 50px;
      text-align: left
    }

@media (max-width: 750px) {
    .hero-block .hero-text.upper-left {
        left: 5.333vw;
        top: 6.667vw
    }
      }

.hero-block .hero-text.lower-right {
      right: 40px;
      bottom: 50px;
      text-align: right
    }

@media (max-width: 750px) {
    .hero-block .hero-text.lower-right {
        right: 5.333vw;
        bottom: 6.667vw
    }
      }

.hero-block .hero-text.upper-right {
      right: 40px;
      top: 50px;
      text-align: right
    }

@media (max-width: 750px) {
    .hero-block .hero-text.upper-right {
        right: 5.333vw;
        top: 6.667vw
    }
      }

.hero-block .hero-text.centered {
      position: relative;
      text-align: center;
      height: 100%;
    }

.hero-block .hero-text.centered .call-to-action.box {
        padding: 11px 25px 9px;
      }

.hero-block .hero-text.centered .titles-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
      }

.hero-block .hero-text.centered .titles-container .main-title {
          padding-left: 0;
        }

.hero-block .hero-text.centered .hero-title-image {
        max-width: 100%;
        max-height: 95%
      }

@media (max-width: 400px) {
      .hero-block .hero-text.centered .hero-title-image {
          max-height: 100%
      }
        }

.hero-block .hero-text {
    /* So here are the updated classes for positioning the text */
  }

.hero-block .hero-text.upper {
      top: 50px
    }

@media (max-width: 750px) {
    .hero-block .hero-text.upper {
        top: 6.667vw
    }
      }

@media (max-width: 600px) {
        .hero-block .hero-text.upper__m.hero-text {
          bottom: auto;
          bottom: initial;
          top: 6.667vw
        }
          .hero-block .hero-text.upper__m.hero-text:not(.center-h__m):not(.center-v__m) {
            transform: none;
          }
      }

.hero-block .hero-text.lower {
      bottom: 50px
    }

@media (max-width: 750px) {
    .hero-block .hero-text.lower {
        bottom: 6.667vw
    }
      }

@media (max-width: 600px) {
        .hero-block .hero-text.lower__m.hero-text {
          top: auto;
          top: initial;
          bottom: 6.667vw
        }
          .hero-block .hero-text.lower__m.hero-text:not(.center-h__m):not(.center-v__m) {
            transform: none;
          }
      }

.hero-block .hero-text.left {
      left: 40px;
      text-align: left
    }

@media (max-width: 750px) {
    .hero-block .hero-text.left {
        left: 5.333vw
    }
      }

@media (max-width: 600px) {
        .hero-block .hero-text.left__m.hero-text {
          right: auto;
          right: initial;
          left: 5.333vw
        }
          .hero-block .hero-text.left__m.hero-text:not(.center-h__m):not(.center-v__m) {
            transform: none;
          }
      }

.hero-block .hero-text.right {
      right: 40px;
      text-align: right
    }

@media (max-width: 750px) {
    .hero-block .hero-text.right {
        right: 5.333vw
    }
      }

@media (max-width: 600px) {
        .hero-block .hero-text.right__m.hero-text {
          left: auto;
          left: initial;
          right: 5.333vw
        }
          .hero-block .hero-text.right__m.hero-text:not(.center-h__m):not(.center-v__m) {
            transform: none;
          }
      }

.hero-block .hero-text.center-h {
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
      }

@media (max-width: 600px) {
      .hero-block .hero-text.center-h__m.hero-text {
          text-align: center;
          left: 50%;
          transform: translateX(-50%);
          right: auto;
          right: initial
      }
        }

.hero-block .hero-text.center-v {
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
      }

@media (max-width: 600px) {
      .hero-block .hero-text.center-v__m.hero-text {
          text-align: center;
          top: 50%;
          transform: translateY(-50%);
          bottom: auto;
          bottom: initial
      }
        }

.hero-block .hero-text.center-v.center-h {
      text-align: center;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

@media (max-width: 600px) {
    .hero-block .hero-text.center-v__m.center-h__m.hero-text {
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: auto;
        bottom: initial;
        right: auto;
        right: initial
    }
      }

.hero-block .titles-container.black-text .main-title {
        color: #000;
      }

.hero-block .titles-container.black-text .subtitle {
        color: #000;
      }

.hero-block .titles-container .subtitle {
      width: 100%;
      font-size: 28px;
      margin-top: 18px;
      line-height: 32px;
      color: white
    }

@media (max-width: 1020px) {
    .hero-block .titles-container .subtitle {
        margin-top: 0
    }
      }

@media (max-width: 750px) {
    .hero-block .titles-container .subtitle {
        font-size: 3.7vw;
        line-height: 4.2vw;
        margin-top: 2.4vw
    }
      }

.hero-block .titles-container .hero-title-image {
      max-width: 50vw;
      max-width: max(50vw, min(340px, 90vw));
    }

.hero-block .titles-container.text-img.text-img {
      display: flex;
    }

.hero-block .titles-container.text-img.text-img .text-img-wrapper {
        flex-grow: 1;
        position: relative;
      }

.hero-block .titles-container.text-img.text-img .text-img-wrapper > .hero-title-image {
          max-width: 100%;
          max-height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          -o-object-fit: contain;
             object-fit: contain;
          -o-object-position: center;
             object-position: center;
        }

.hero-block .titles-container.text-img.text-img .main-title,
      .hero-block .titles-container.text-img.text-img .subtitle {
        color: rgba(255,255,255,0);
        position: absolute;
      }

.hero-block .main-title {
    font: 48px/48px "EvelethClean", sans-serif;
    text-transform: uppercase;
  }

.hero-block .main-title span {
      font-weight: 100;
      display: block;
    }

@media (max-width: 750px) {
  .hero-block .main-title {
      font-size: 6.4vw;
      line-height: 6.4vw;
      margin-bottom: 2.667vw
  }
    }

.hero-block .main-title.medium {
      font: 62px/62px "EvelethClean", sans-serif
    }

@media (max-width: 750px) {

    .hero-block .main-title.medium {
        font-size: 8.267vw;
        line-height: 8.267vw;
        margin-bottom: 2.667vw
    }
      }

.hero-block .main-title.large {
      font: 76px/76px "EvelethClean", sans-serif
    }

@media (max-width: 750px) {
    .hero-block .main-title.large {
        font-size: 10.133vw;
        line-height: 10.133vw;
        margin-bottom: 2.667vw
    }
      }

.hero-block .call-to-action {
    font-size: 21px;
    line-height: 1em;
    letter-spacing: 0.045em;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 20px
  }

@media (max-width: 1020px) {
  .hero-block .call-to-action {
      margin-top: 2vw
  }
    }

.hero-block .call-to-action.box {
      display: inline-block;
      padding: 11px 18px 9px;
      background: rgba(0, 0, 0, 0.6);
      border: solid 1px #fff;
      min-width: 108px;
    }

.hero-block .call-to-action.box .cta-text {
        display: flex;
        justify-content: center;
      }

@media (max-width: 750px) {
  .hero-block .call-to-action {
      font-size: 2.8vw
  }

      .hero-block .call-to-action.box {
        padding: 1.467vw 2.4vw 1.2vw;
        min-width: 14.4vw;
      }
    }

.hero-block.cutout .hero-image-holder {
      clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
    }

.hero-block.textured-background {
    background-color: #f7f7f4;
    background-image: url(/wp-content/themes/nokona-2019/img/generator-tile-texture.jpg);
    background-size: 250px 250px;
    margin-bottom: 0;
    position: relative
  }

@media (max-width: 600px) {

.hero-block.textured-background {
      overflow: visible
  }
    }

.hero-block.textured-background .container::before,
      .hero-block.textured-background .container::after {
        background-color: #f7f7f4;
        background-image: url(/wp-content/themes/nokona-2019/img/generator-tile-texture.jpg);
      }

/* There are variable hero heights */

/**************************************
 * Tall hero
 **************************************/

.hero-home {
  margin-bottom: 120px
}

@media (max-width: 750px) {

.hero-home {
    margin-bottom: 16vw
}
  }

.hero-home .hero-image-holder {
    padding-top: 626px
  }

@media (max-width: 1020px) {

  .hero-home .hero-image-holder {
      padding-top: 61.373vw
  }
    }

@media (max-width: 600px) {

  .hero-home .hero-image-holder {
      padding-top: 80vw
  }
    }

@media (max-width: 400px) {

  .hero-home .hero-image-holder {
      padding-top: 120vw
  }
    }

@media (max-width: 1600px) {
        .hero-home.has-video .hero-image-holder video {
          max-width: 100%;
        }
      }

@media (max-width: 1280px) {
    .hero-home.has-video .hero-image-holder {
        padding-top: 48.906%;
    }

        .hero-home.has-video .hero-image-holder video {
          width: 100%;
          height: 100%;
        }
      }

.hero-home .hero-text {
    max-height: 626px
  }

@media (max-width: 1020px) {
  .hero-home .hero-text {
      max-height: 61.373vw
  }
    }

@media (max-width: 600px) {
  .hero-home .hero-text {
      max-height: 80vw
  }
    }

@media (max-width: 400px) {
  .hero-home .hero-text {
      max-height: 120vw
  }
    }

/**************************************
 * Short hero
 **************************************/

.hero-short {
  margin-bottom: 65px
}

@media (max-width: 750px) {

.hero-short {
    margin-bottom: 8.666vw
}
  }

.hero-short .hero-image-holder {
    padding-top: 500px
  }

@media (max-width: 1020px) {

  .hero-short .hero-image-holder {
      padding-top: 49.019%
  }
    }

@media (max-width: 600px) {

  .hero-short .hero-image-holder {
      padding-top: 70%
  }
    }

@media (max-width: 400px) {

  .hero-short .hero-image-holder {
      padding-top: 110%
  }
    }

.hero-short .hero-text {
    max-height: 500px
  }

@media (max-width: 1020px) {
  .hero-short .hero-text {
      max-height: 49.019%
  }
    }

@media (max-width: 600px) {
  .hero-short .hero-text {
      max-height: 70%
  }
    }

@media (max-width: 400px) {
  .hero-short .hero-text {
      max-height: 110%
  }
    }

/**************************************
 * Shorter hero
 **************************************/

.hero-shorter {
  margin-bottom: 65px
}

@media (max-width: 750px) {

.hero-shorter {
    margin-bottom: 8.666vw
}
  }

.hero-shorter .hero-image-holder {
    padding-top: 400px
  }

@media (max-width: 1020px) {

  .hero-shorter .hero-image-holder {
      padding-top: 38.215%
  }
    }

@media (max-width: 600px) {

  .hero-shorter .hero-image-holder {
      padding-top: 60%
  }
    }

@media (max-width: 400px) {

  .hero-shorter .hero-image-holder {
      padding-top: 100%
  }
    }

.hero-shorter .hero-text {
    max-height: 400px
  }

@media (max-width: 1020px) {
  .hero-shorter .hero-text {
      max-height: 38.215%
  }
    }

@media (max-width: 600px) {
  .hero-shorter .hero-text {
      max-height: 60%
  }
    }

@media (max-width: 400px) {
  .hero-shorter .hero-text {
      max-height: 100%
  }
    }

/**************************************
 * Shorter hero
 **************************************/

.hero-shorter {
  margin-bottom: 65px
}

@media (max-width: 750px) {

.hero-shorter {
    margin-bottom: 8.666vw
}
  }

.hero-shorter .hero-image-holder {
    padding-top: 400px
  }

@media (max-width: 1020px) {

  .hero-shorter .hero-image-holder {
      padding-top: 38.215%
  }
    }

@media (max-width: 600px) {

  .hero-shorter .hero-image-holder {
      padding-top: 60%
  }
    }

@media (max-width: 400px) {

  .hero-shorter .hero-image-holder {
      padding-top: 100%
  }
    }

.hero-shorter .hero-text {
    max-height: 400px
  }

@media (max-width: 1020px) {
  .hero-shorter .hero-text {
      max-height: 38.215%
  }
    }

@media (max-width: 600px) {
  .hero-shorter .hero-text {
      max-height: 60%
  }
    }

@media (max-width: 400px) {
  .hero-shorter .hero-text {
      max-height: 100%
  }
    }

.stacking-triad,
.paired-duo,
.large-single,
.row-group {
  display: flex;
  align-items: center;
}

.stacking-triad .item-tile, .paired-duo .item-tile, .large-single .item-tile, .row-group .item-tile {
    display: inline-block;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

.stacking-triad .item-tile img, .paired-duo .item-tile img, .large-single .item-tile img, .row-group .item-tile img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      -o-object-fit: cover;
         object-fit: cover;
    }

.stacking-triad .item-content, .paired-duo .item-content, .large-single .item-content, .row-group .item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 30px;
    left: 30px
  }

.stacking-triad .item-content.corner-switch, .paired-duo .item-content.corner-switch, .large-single .item-content.corner-switch, .row-group .item-content.corner-switch {
      bottom: 40px;
      right: 30px;
      align-items: flex-end;
      justify-content: flex-end;
    }

.stacking-triad .item-content.corner-switch .item-title, .paired-duo .item-content.corner-switch .item-title, .large-single .item-content.corner-switch .item-title, .row-group .item-content.corner-switch .item-title {
        text-align: right;
      }

.stacking-triad .item-content.corner-alt, .paired-duo .item-content.corner-alt, .large-single .item-content.corner-alt, .row-group .item-content.corner-alt {
      top: 30px;
      right: 30px;
      align-items: flex-end;
      justify-content: flex-end;
    }

.stacking-triad .item-content.corner-alt .item-title, .paired-duo .item-content.corner-alt .item-title, .large-single .item-content.corner-alt .item-title, .row-group .item-content.corner-alt .item-title {
        text-align: right;
      }

.stacking-triad .item-content.corner-alt-switch, .paired-duo .item-content.corner-alt-switch, .large-single .item-content.corner-alt-switch, .row-group .item-content.corner-alt-switch {
      bottom: 40px;
      left: 30px;
      align-items: flex-start;
      justify-content: flex-end;
    }

.stacking-triad .item-content.corner-alt-switch .item-title, .paired-duo .item-content.corner-alt-switch .item-title, .large-single .item-content.corner-alt-switch .item-title, .row-group .item-content.corner-alt-switch .item-title {
        text-align: left;
      }

@media (max-width: 1020px) {
  .stacking-triad .item-content, .paired-duo .item-content, .large-single .item-content, .row-group .item-content {
      top: 2.8vw;
      left: 2.8vw
  }
      .stacking-triad .item-content.corner-switch, .paired-duo .item-content.corner-switch, .large-single .item-content.corner-switch, .row-group .item-content.corner-switch {
        bottom: 3.7vw;
        right: 2.8vw;
      }
      .stacking-triad .item-content.corner-alt, .paired-duo .item-content.corner-alt, .large-single .item-content.corner-alt, .row-group .item-content.corner-alt {
        top: 2.8vw;
        right: 2.8vw;
      }
      .stacking-triad .item-content.corner-alt-switch, .paired-duo .item-content.corner-alt-switch, .large-single .item-content.corner-alt-switch, .row-group .item-content.corner-alt-switch {
        bottom: 3.7vw;
        left: 2.8vw;
      }
    }

.stacking-triad .item-title, .paired-duo .item-title, .large-single .item-title, .row-group .item-title {
    font: 48px/48px "EvelethClean", sans-serif;
    line-height: 48px;
    color: #fff;
    margin-bottom: 43px;
    word-spacing: 1200px;
    text-align: left
  }

@media (max-width: 1020px) {
  .stacking-triad .item-title, .paired-duo .item-title, .large-single .item-title, .row-group .item-title {
      font-size: 4.6vw;
      line-height: 4.6vw;
      margin-bottom: 4.1vw
  }
    }

.stacking-triad .link-box, .paired-duo .link-box, .large-single .link-box, .row-group .link-box {
    border: 1px solid white;
    padding: 0 18px;
    background: rgba(255, 107, 0, 0.9);
    transition: all 0.25s ease;
    display: block;
    height: 40px;
    font: 14px/42px "EvelethClean", sans-serif;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer
  }

@media (max-width: 1020px) {
  .stacking-triad .link-box, .paired-duo .link-box, .large-single .link-box, .row-group .link-box {
      height: 3.8vw;
      font-size: 1.33vw;
      line-height: 3.8vw;
      padding: 0 1.7vw
  }
    }

@media (max-width: 750px) {
  .stacking-triad .link-box, .paired-duo .link-box, .large-single .link-box, .row-group .link-box {
      padding: 1.2vw 1.7vw;
      font-size: 10px;
      line-height: 1em;
      height: auto
  }
    }

.stacking-triad a .link-box:hover, .paired-duo a .link-box:hover, .large-single a .link-box:hover, .row-group a .link-box:hover {
      color: #ff6b00;
      background-color: rgba(255, 255, 255, 0.9);
      border-color: #ff6b00;
    }

.stacking-triad .horizontal-item, .paired-duo .horizontal-item, .large-single .horizontal-item, .row-group .horizontal-item {
    padding-top: calc(37.4% - 9px);
    width: 100%
  }

@media (max-width: 1020px) {
  .stacking-triad .horizontal-item, .paired-duo .horizontal-item, .large-single .horizontal-item, .row-group .horizontal-item {
      padding-top: calc(37.4% - 0.86vw)
  }
    }

.stacking-triad .large-single-item, .paired-duo .large-single-item, .large-single .large-single-item, .row-group .large-single-item {
    padding-top: 54%;
    width: 100%;
  }

.stacking-triad .large-single-item .item-content .item-title, .paired-duo .large-single-item .item-content .item-title, .large-single .large-single-item .item-content .item-title, .row-group .large-single-item .item-content .item-title {
      word-spacing: 0.1em;
    }

.stacking-triad .vertical-item, .paired-duo .vertical-item, .large-single .vertical-item, .row-group .vertical-item {
    padding-top: 74.8%;
    width: calc(100% - 9px)
  }

@media (max-width: 1020px) {
  .stacking-triad .vertical-item, .paired-duo .vertical-item, .large-single .vertical-item, .row-group .vertical-item {
      width: calc(100% - 0.86vw)
  }
    }

.stacking-triad .small-item-container,
  .stacking-triad .duo-container,
  .paired-duo .small-item-container,
  .paired-duo .duo-container,
  .large-single .small-item-container,
  .large-single .duo-container,
  .row-group .small-item-container,
  .row-group .duo-container {
    width: 100%;
    display: flex;
  }

.stacking-triad .small-item-container .small-item, .stacking-triad .duo-container .small-item, .paired-duo .small-item-container .small-item, .paired-duo .duo-container .small-item, .large-single .small-item-container .small-item, .large-single .duo-container .small-item, .row-group .small-item-container .small-item, .row-group .duo-container .small-item {
      padding-top: calc(29.3% - 9px);
      width: calc(50% - 9px)
    }

@media (max-width: 1020px) {
    .stacking-triad .small-item-container .small-item, .stacking-triad .duo-container .small-item, .paired-duo .small-item-container .small-item, .paired-duo .duo-container .small-item, .large-single .small-item-container .small-item, .large-single .duo-container .small-item, .row-group .small-item-container .small-item, .row-group .duo-container .small-item {
        padding-top: calc(29.3% - 0.86vw);
        width: calc(50% - 0.86vw)
    }
      }

.stacking-triad .row-container, .paired-duo .row-container, .large-single .row-container, .row-group .row-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

.stacking-triad .row-container .row-item, .paired-duo .row-container .row-item, .large-single .row-container .row-item, .row-group .row-container .row-item {
      width: 32.42%;
      padding-top: 32.42%;
    }

.stacking-triad .row-container .row-rect-item, .paired-duo .row-container .row-rect-item, .large-single .row-container .row-rect-item, .row-group .row-container .row-rect-item {
      width: 66.21%;
      padding-top: 32.42%;
    }

@media (max-width: 600px) {
  .stacking-triad .row-container, .paired-duo .row-container, .large-single .row-container, .row-group .row-container {
      flex-direction: column;
  }
      .stacking-triad .row-container .row-item, .paired-duo .row-container .row-item, .large-single .row-container .row-item, .row-group .row-container .row-item {
        width: 100%;
        padding-top: 50%;
        margin: 1.5vw 0;
        background-position: top;
      }
      .stacking-triad .row-container .row-rect-item, .paired-duo .row-container .row-rect-item, .large-single .row-container .row-rect-item, .row-group .row-container .row-rect-item {
        width: 100%;
        padding-top: 48.96%;
        margin: 1.5vw 0;
      }
    }

.stacking-triad.horizontal-layout, .paired-duo.horizontal-layout, .large-single.horizontal-layout, .row-group.horizontal-layout {
    flex-direction: column;
  }

.stacking-triad.horizontal-layout .ma-piece:first-child, .paired-duo.horizontal-layout .ma-piece:first-child, .large-single.horizontal-layout .ma-piece:first-child, .row-group.horizontal-layout .ma-piece:first-child {
      margin-bottom: 9px
    }

@media (max-width: 1020px) {
    .stacking-triad.horizontal-layout .ma-piece:first-child, .paired-duo.horizontal-layout .ma-piece:first-child, .large-single.horizontal-layout .ma-piece:first-child, .row-group.horizontal-layout .ma-piece:first-child {
        margin-bottom: 0.86vw
    }
      }

.stacking-triad.horizontal-layout .ma-piece:last-child, .paired-duo.horizontal-layout .ma-piece:last-child, .large-single.horizontal-layout .ma-piece:last-child, .row-group.horizontal-layout .ma-piece:last-child {
      margin-top: 9px
    }

@media (max-width: 1020px) {
    .stacking-triad.horizontal-layout .ma-piece:last-child, .paired-duo.horizontal-layout .ma-piece:last-child, .large-single.horizontal-layout .ma-piece:last-child, .row-group.horizontal-layout .ma-piece:last-child {
        margin-top: 0.86vw
    }
      }

.stacking-triad.horizontal-layout .small-item-container .small-item:first-child, .stacking-triad.horizontal-layout .duo-container .small-item:first-child, .paired-duo.horizontal-layout .small-item-container .small-item:first-child, .paired-duo.horizontal-layout .duo-container .small-item:first-child, .large-single.horizontal-layout .small-item-container .small-item:first-child, .large-single.horizontal-layout .duo-container .small-item:first-child, .row-group.horizontal-layout .small-item-container .small-item:first-child, .row-group.horizontal-layout .duo-container .small-item:first-child {
          margin-right: 9px
        }

@media (max-width: 1020px) {
        .stacking-triad.horizontal-layout .small-item-container .small-item:first-child, .stacking-triad.horizontal-layout .duo-container .small-item:first-child, .paired-duo.horizontal-layout .small-item-container .small-item:first-child, .paired-duo.horizontal-layout .duo-container .small-item:first-child, .large-single.horizontal-layout .small-item-container .small-item:first-child, .large-single.horizontal-layout .duo-container .small-item:first-child, .row-group.horizontal-layout .small-item-container .small-item:first-child, .row-group.horizontal-layout .duo-container .small-item:first-child {
            margin-right: 0.86vw
        }
          }

.stacking-triad.horizontal-layout .small-item-container .small-item:last-child, .stacking-triad.horizontal-layout .duo-container .small-item:last-child, .paired-duo.horizontal-layout .small-item-container .small-item:last-child, .paired-duo.horizontal-layout .duo-container .small-item:last-child, .large-single.horizontal-layout .small-item-container .small-item:last-child, .large-single.horizontal-layout .duo-container .small-item:last-child, .row-group.horizontal-layout .small-item-container .small-item:last-child, .row-group.horizontal-layout .duo-container .small-item:last-child {
          margin-left: 9px
        }

@media (max-width: 1020px) {
        .stacking-triad.horizontal-layout .small-item-container .small-item:last-child, .stacking-triad.horizontal-layout .duo-container .small-item:last-child, .paired-duo.horizontal-layout .small-item-container .small-item:last-child, .paired-duo.horizontal-layout .duo-container .small-item:last-child, .large-single.horizontal-layout .small-item-container .small-item:last-child, .large-single.horizontal-layout .duo-container .small-item:last-child, .row-group.horizontal-layout .small-item-container .small-item:last-child, .row-group.horizontal-layout .duo-container .small-item:last-child {
            margin-left: 0.86vw
        }
          }

.stacking-triad.vertical-layout .ma-piece:first-child, .paired-duo.vertical-layout .ma-piece:first-child, .large-single.vertical-layout .ma-piece:first-child, .row-group.vertical-layout .ma-piece:first-child {
      margin-right: 9px
    }

@media (max-width: 1020px) {
    .stacking-triad.vertical-layout .ma-piece:first-child, .paired-duo.vertical-layout .ma-piece:first-child, .large-single.vertical-layout .ma-piece:first-child, .row-group.vertical-layout .ma-piece:first-child {
        margin-right: 0.86vw
    }
      }

.stacking-triad.vertical-layout .ma-piece:last-child, .paired-duo.vertical-layout .ma-piece:last-child, .large-single.vertical-layout .ma-piece:last-child, .row-group.vertical-layout .ma-piece:last-child {
      margin-left: 9px
    }

@media (max-width: 1020px) {
    .stacking-triad.vertical-layout .ma-piece:last-child, .paired-duo.vertical-layout .ma-piece:last-child, .large-single.vertical-layout .ma-piece:last-child, .row-group.vertical-layout .ma-piece:last-child {
        margin-left: 0.86vw
    }
      }

.stacking-triad.vertical-layout .small-item-container, .paired-duo.vertical-layout .small-item-container, .large-single.vertical-layout .small-item-container, .row-group.vertical-layout .small-item-container {
      width: calc(100% - 9px)
    }

@media (max-width: 1020px) {
    .stacking-triad.vertical-layout .small-item-container, .paired-duo.vertical-layout .small-item-container, .large-single.vertical-layout .small-item-container, .row-group.vertical-layout .small-item-container {
        width: calc(100% - 0.86vw)
    }
      }

.stacking-triad.vertical-layout .small-item-container, .paired-duo.vertical-layout .small-item-container, .large-single.vertical-layout .small-item-container, .row-group.vertical-layout .small-item-container {
      flex-direction: column;
    }

.stacking-triad.vertical-layout .small-item-container .small-item, .paired-duo.vertical-layout .small-item-container .small-item, .large-single.vertical-layout .small-item-container .small-item, .row-group.vertical-layout .small-item-container .small-item {
        padding-top: calc(74.8% - 2px)
      }

@media (max-width: 1020px) {
      .stacking-triad.vertical-layout .small-item-container .small-item, .paired-duo.vertical-layout .small-item-container .small-item, .large-single.vertical-layout .small-item-container .small-item, .row-group.vertical-layout .small-item-container .small-item {
          padding-top: calc(74.8% - 2px)
      }
        }

.stacking-triad.vertical-layout .small-item-container .small-item, .paired-duo.vertical-layout .small-item-container .small-item, .large-single.vertical-layout .small-item-container .small-item, .row-group.vertical-layout .small-item-container .small-item {
        width: 100%
      }

.stacking-triad.vertical-layout .small-item-container .small-item:first-child, .paired-duo.vertical-layout .small-item-container .small-item:first-child, .large-single.vertical-layout .small-item-container .small-item:first-child, .row-group.vertical-layout .small-item-container .small-item:first-child {
          margin-bottom: 9px
        }

@media (max-width: 1020px) {
        .stacking-triad.vertical-layout .small-item-container .small-item:first-child, .paired-duo.vertical-layout .small-item-container .small-item:first-child, .large-single.vertical-layout .small-item-container .small-item:first-child, .row-group.vertical-layout .small-item-container .small-item:first-child {
            margin-bottom: 0.86vw
        }
          }

.stacking-triad.vertical-layout .small-item-container .small-item:last-child, .paired-duo.vertical-layout .small-item-container .small-item:last-child, .large-single.vertical-layout .small-item-container .small-item:last-child, .row-group.vertical-layout .small-item-container .small-item:last-child {
          margin-top: 9px
        }

@media (max-width: 1020px) {
        .stacking-triad.vertical-layout .small-item-container .small-item:last-child, .paired-duo.vertical-layout .small-item-container .small-item:last-child, .large-single.vertical-layout .small-item-container .small-item:last-child, .row-group.vertical-layout .small-item-container .small-item:last-child {
            margin-top: 0.86vw
        }
          }

@media (max-width: 600px) {

.stacking-triad,
.paired-duo,
.large-single,
.row-group {
    padding: 0 6vw;
}
    .stacking-triad .duo-container, .paired-duo .duo-container, .large-single .duo-container, .row-group .duo-container {
      flex-direction: column;
    }
      .stacking-triad .duo-container .small-item, .paired-duo .duo-container .small-item, .large-single .duo-container .small-item, .row-group .duo-container .small-item {
        width: 100%;
        padding-top: 55.7vw
      }
        .stacking-triad .duo-container .small-item:first-child, .paired-duo .duo-container .small-item:first-child, .large-single .duo-container .small-item:first-child, .row-group .duo-container .small-item:first-child {
          margin: 0 0 0.86vw !important;
        }
        .stacking-triad .duo-container .small-item:last-child, .paired-duo .duo-container .small-item:last-child, .large-single .duo-container .small-item:last-child, .row-group .duo-container .small-item:last-child {
          margin: 0.86vw 0 0 !important;
        }
  }

.composite {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 77px;
  margin-bottom: 63px
}

@media (max-width: 600px) {

.composite {
    flex-direction: column;
    padding: 0px 6vw;
}
    .composite .tall-composite-image:first-child,
    .composite .composite-sub:first-child {
      margin-bottom: 3vw;
    }
      .composite .composite-sub:last-child .composite-sub-sub .square-composite-image {
        position: static;
        position: initial;
      }
        .composite .composite-sub:last-child .composite-sub-sub .square-composite-image .link-text {
          color: black;
          top: calc(100% + 11px);
          width: calc(50% - 9px);
        }
  }

.composite .image-container {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

.composite .image-container img {
      width: auto;
      height: auto;
      min-height: 100%;
      min-width: 100%;
    }

.composite .image-container .link-text {
      position: absolute;
      font: 900 22px/22px "Campton", sans-serif;
      color: #000;
      text-transform: uppercase;
      bottom: -63px;
    }

.composite .image-container .link-text .cta-text {
        display: block;
        text-transform: lowercase;
        font-size: 16px;
        font-weight: 500;
        margin-top: 4px
      }

.composite .image-container .link-text .cta-text::after {
          display: inline-block;
          content: ">";
          transform: translateY(1px);
          transition: transform 0.4s ease-in-out;
          margin-left: 5px;
        }

@media (max-width: 600px) {
  .composite .image-container {
      position: relative;
  }
      .composite .image-container .link-text {
        color: white;
      }
    }

@media (max-width: 500px) {
      .composite .image-container .link-text {
        font-size: 4.4vw
      }
        .composite .image-container .link-text::after {
          font-size: 3.2vw;
          line-height: 3.2vw;
        }
    }

.composite .composite-image img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      display: block;
    }

.composite a.composite-image:hover .link-text .cta-text::after {
            transform: translateX(6px) translateY(1px);
            transition: transform 0.4s ease-in-out;
          }

.composite .tall-composite-image {
    aspect-ratio: 1/2;
    width: 33.33%
  }

@media (max-width: 600px) {
  .composite .tall-composite-image {
      padding-top: 100%;
      width: 100%;
      background-position: center top;
  }
      .composite .tall-composite-image .link-text {
        top: 32px;
        right: 26px;
      }
    }

.composite .wide-composite-image {
    aspect-ratio: 2;
    width: 100%;
    position: relative;
  }

.composite .wide-composite-image .link-text {
      color: white;
      top: 32px;
      left: 26px;
    }

.composite .square-composite-image {
    aspect-ratio: 0.97529373;
    width: calc(50% - 9px)
  }

@media (max-width: 600px) {
  .composite .square-composite-image {
      width: calc(50% - 1.5vw);
  }
      .composite .square-composite-image .link-text {
        bottom: 6px;
      }
    }

.composite .composite-sub {
    height: 100%;
    width: calc(66.66% - 18px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center
  }

@media (max-width: 600px) {
  .composite .composite-sub {
      width: 100%
  }
    }

.composite .composite-sub-sub {
    height: 50%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 18px
  }

@media (max-width: 600px) {
  .composite .composite-sub-sub {
      margin-top: 3vw
  }
    }

.titled-text {
  max-width: 750px;
  font: 100 14px/20px "Campton", sans-serif;
  margin: 0 auto;
  padding: 0;
  text-wrap: pretty;


}

.titled-text a {
    color: #ff6b00;
  }

.titled-text .title {
    /* have to put in the font-weight here to get it to work correctly in the Wordpress editor */
    font-weight: 100;
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-align: center
  }

@media (max-width: 400px) {

  .titled-text .title {
      font-size: 7vw;
      line-height: 8vw;
      margin-bottom: 2.5vw
  }
    }

.titled-text .title.bolded-title {
      font-weight: bold;
      font-family: "Campton", sans-serif;
    }

.titled-text.large-copy{
    font: 100 20px/26px "Campton", sans-serif
  }

@media (max-width: 600px) {

.titled-text.large-copy{
      font: 100 12px/18px "Campton", sans-serif
  }
    }

.text-with-side-content {
  display: flex;
  justify-content: space-between;
}

.text-with-side-content .titled-text {
    text-align: left;
    margin: 0;
  }

.text-with-side-content .titled-text .title {
      text-align: left
    }

.text-with-side-content .titled-text .title.embold {
        font: 20px/70% "EvelethClean", sans-serif;
      }

.text-with-side-content .side-content {
    max-width: 320px;
    margin-left: 30px;
    text-align: left;
  }

.text-with-side-content .side-content p {
      margin-bottom: 8px;
      position: relative
    }

.text-with-side-content .side-content p::before {
        content: "+";
        color: #ff6b00;
        font-weight: bold;
        font-size: 17px;
        position: absolute;
        top: 0px;
        left: -14px;
      }

.text-with-side-content .side-content .side-item-button {
      display: block;
      padding: 13px;
      border: 1px solid #ff6b00;
      background-color: #ff6b00;
      text-transform: uppercase;
      color: white;
      margin: 24px -13px;
      width: -moz-fit-content;
      width: fit-content;
      font: 12px/100% "Campton", sans-serif;
      transition: all 0.25s linear
    }

.text-with-side-content .side-content .side-item-button:hover {
        background-color: #fff;
        color: #ff6b00;
        transition: all 0.25s linear;
      }

@media (max-width: 600px) {

.text-with-side-content {
    flex-direction: column;
}
    .text-with-side-content .side-content {
      margin-top: 25px;
    }
  }

.included-title {
  text-align: left;
  margin-top: 48px !important;
}

.short-cta {
  position: relative;
}

.short-cta img {
    width: 100%;
    height: auto;
    display: block;
  }

.short-cta .text {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    min-width: 144px;
    transform: translate(-50%, -50%);
    font: 62px/62px "EvelethClean", sans-serif;
    text-transform: uppercase;
    padding-bottom: 55px;
    color: #fff
  }

.short-cta .text::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: calc(50% - 72px);
      width: 144px;
      height: 55px;
      background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/cta-arrow-light.svg);
      transition: transform 0.3s ease;
    }

.short-cta .text:hover::after {
      transform: translate(5%, 0);
    }

@media (max-width: 750px) {

  .short-cta .text {
      font-size: 8.267vw;
      line-height: 8.267vw;
      padding-bottom: 7.333vw
  }

      .short-cta .text::after {
        width: 19.2vw;
        height: 7.333vw;
        left: calc(50% - 9.6vw);
      }
    }

.short-cta.dark .text {
      color: #000
    }

.short-cta.dark .text::after {
        background-image: url(/wp-content/themes/nokona-2019/img/cta-arrow-dark.svg);
      }

.instagram-title {
  position: relative;
  height: 0;
  font-size: 0;
  padding-bottom: 23px;
  border-bottom: solid 1px #e6e6e6;
  /* 23 for 2nd half of icon, 72 for spacing to images */
  margin-bottom: calc(23px + 72px)
}

.instagram-title::after {
    content: "";
    position: absolute;
    left: calc(50% - 50px);
    width: 100px;
    height: 47px;
    background: #fff no-repeat center/47px 47px url(/wp-content/themes/nokona-2019/img/instagram-home.svg);
  }

@media (max-width: 1020px) {

.instagram-title {
    margin-bottom: calc(23px + 7.058vw)
}
  }

@media (max-width: 600px) {

.instagram-title {
    padding-bottom: 3.833vw;
    margin-bottom: calc(3.833vw + 7.058vw)
}

    .instagram-title::after {
      left: calc(50% - 8.333vw);
      width: 16.667vw;
      height: 7.833vw;
      background-size: 7.833vw 7.833vw;
    }
  }

/* Overriding sections styles //*/

#sb_instagram {
  max-width: 1440px;
  box-sizing: border-box;

}

#sb_instagram #sbi_images {
  display: grid;
  grid-gap: 20px;
  grid-gap: 20px;
  gap: 20px;
  padding: 30px 90px 70px 90px !important
}

@media (max-width: 900px) {

#sb_instagram #sbi_images {
    grid-gap: 10px;
    grid-gap: 10px;
    gap: 10px;
    padding: 30px 70px 50px 70px !important
}
  }

@media (max-width: 750px) {

#sb_instagram #sbi_images {
    grid-gap: 10px;
    grid-gap: 10px;
    gap: 10px;
    padding: 20px 50px 50px 50px !important
}
  }

@media (max-width: 600px) {

#sb_instagram #sbi_images {
    grid-gap: 10px;
    grid-gap: 10px;
    gap: 10px;
    padding: 10px 20px 50px 20px !important
}
  }

.sbi_item {
  margin: 0 10px;
  width: 16.667%;
  position: relative
}

.sbi_item:first-child {
    margin-left: 0;
  }

.sbi_item:last-child {
    margin-right: 0;
  }

@media (max-width: 1020px) {

.sbi_item {
    margin: 0 0.98vw
}
  }

@media (max-width: 600px) {

.sbi_item {
    width: 31.333%;
    margin-bottom: 1.96vw
}

    .sbi_item:first-child {
      margin-left: 0.98vw;
    }

    .sbi_item:last-child {
      margin-right: 0.98vw;
    }
  }

.sbi_link,
.sbi-screenreader {
  display: none;
}

.sbi_photo {
  display: block;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 0 !important;
  height: auto !important;
}

.sbi_photo img {
    display: none;
  }

.sbi_photo_wrap svg {
  display: none;
}

#sb_instagram .sbi_photo.sbi_photo img {
  position: absolute;
  top: 0;
  height: 100%;
}

.title-three-images-container {
  font: 100 14px/20px "Campton", sans-serif;
  margin: 0 auto;
}

.title-three-images-container .title {
    font-weight: 100;
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 58px;
    text-transform: uppercase;
    position: relative;
    display: inline-block
  }

.title-three-images-container .title::after {
      content: "";
      position: absolute;
      background: rgb(255, 107, 0);
      width: 60%;
      height: 1px;
      margin: 0 auto;
      bottom: -56px;
      left: 20%;
    }

@media (max-width: 1020px) {
      .title-three-images-container .title::after {
        bottom: -5.2vw;
      }
    }

@media (max-width: 400px) {

  .title-three-images-container .title {
      font-size: 7vw;
      line-height: 8vw;
      margin-bottom: 14.5vw
  }
    }

.title-three-images-container .image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 38px;
  }

.title-three-images-container .image .link-text {
      position: absolute;
      bottom: -23px;
      left: 0;
      right: 0;
      text-align: center;
      text-transform: uppercase;
      font: 14px/14px "EvelethClean", sans-serif;
      font-weight: 400;
      line-height: 18px;
      color: #ff6b00;
      letter-spacing: 0.09em
    }

@media (max-width: 1020px) {
    .title-three-images-container .image .link-text {
        line-height: 1.7vw;
        font-size: 1.33vw
    }
      }

@media (max-width: 750px) {
    .title-three-images-container .image .link-text {
        line-height: 12.9px;
        font-size: 10px
    }
      }

@media (max-width: 750px) {
  .title-three-images-container .image {
      margin: 0 5.1vw
  }
    }

.title-three-images-container .images-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

.title-three-images-container .images-container .top-images {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }

.title-three-images-container .images-container .top-images .small-image {
        margin-bottom: 58px;
        width: 25.2vw;
        height: 10.5vw;
      }

.title-three-images-container .images-container .top-images .small-image .link-text::after {
          display: inline-block;
          content: ">";
          transition: transform 0.4s ease-in-out;
          margin-left: 7px;
        }

.title-three-images-container .images-container .top-images .small-image:hover .link-text::after {
              transform: translateX(8px);
              transition: transform 0.4s ease-in-out;
            }

@media (max-width: 600px) {
    .title-three-images-container .images-container .top-images {
        flex-direction: column;
    }
        .title-three-images-container .images-container .top-images .small-image {
          width: 50.4vw;
          height: 21vw;
        }
      }

.title-three-images-container .large-image {
    width: 63vw;
    padding-top: 26%;
    margin-bottom: 5.8vw;
    position: relative
  }

.title-three-images-container .large-image::after {
      position: absolute;
      content: "";
      height: 1px;
      width: 100%;
      background-color: #ff6b00;
      bottom: -4.5vw;
      left: 0;
      right: 0;
    }

.hero-wanna-be.medium-container {
    position: relative;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto
  }

.hero-wanna-be.medium-container::before {
      content: "";
      display: block;
      height: 0;
      padding-top: 828px
    }

@media (max-width: 1020px) {

.hero-wanna-be.medium-container::before {
        padding-top: 61.373%
    }
      }

.hero-wanna-be.medium-container {
    margin-bottom: 40px
  }

@media (max-width: 750px) {

.hero-wanna-be.medium-container {
      margin-bottom: 5.333vw
  }
    }

.hero-wanna-be.medium-container .image-container {
      width: 100%;
      height: 828px;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative
    }

@media (max-width: 1400px) {

    .hero-wanna-be.medium-container .image-container {
        height: 63vw
    }
      }

.hero-wanna-be .hero-text {
    position: absolute;
    display: block;
    color: #fff;
  }

.hero-wanna-be .hero-text h1 {
      color: #fff;
      font-family: "EvelethClean", sans-serif;
    }

.hero-wanna-be .hero-text h2 {
      color: #fff;
      font-family: "Campton", sans-serif;
    }

.hero-wanna-be .hero-text.lower-left {
      left: 40px;
      bottom: 50px;
      text-align: left
    }

@media (max-width: 750px) {

    .hero-wanna-be .hero-text.lower-left {
        left: 5.333vw;
        bottom: 6.667vw
    }
      }

.hero-wanna-be .hero-text.upper-left {
      left: 40px;
      top: 50px;
      text-align: left
    }

@media (max-width: 750px) {
    .hero-wanna-be .hero-text.upper-left {
        left: 5.333vw;
        top: 6.667vw
    }
      }

.hero-wanna-be .hero-text.lower-right {
      right: 40px;
      bottom: 50px;
      text-align: right
    }

@media (max-width: 750px) {
    .hero-wanna-be .hero-text.lower-right {
        right: 5.333vw;
        bottom: 6.667vw
    }
      }

.hero-wanna-be .hero-text.upper-right {
      right: 40px;
      top: 50px;
      text-align: right
    }

@media (max-width: 750px) {
    .hero-wanna-be .hero-text.upper-right {
        right: 5.333vw;
        top: 6.667vw
    }
      }

.hero-wanna-be .hero-text.centered {
      position: relative;
      text-align: center;
    }

.hero-wanna-be .hero-text.centered .titles-container {
        margin-bottom: 36px;
      }

.hero-wanna-be .hero-text.centered .titles-container .main-title {
          font: 98px/98px "EvelethClean", sans-serif;
          line-height: 88px;
        }

@media (max-width: 1020px) {
      .hero-wanna-be .hero-text.centered .titles-container {
          margin-bottom: 3.43vw;
      }
          .hero-wanna-be .hero-text.centered .titles-container .main-title {
            font-size: 9.6vw;
            line-height: 8.6vw;
          }
        }

.hero-wanna-be .hero-text.centered .call-to-action.box {
        padding: 11px 25px 9px
      }

@media (max-width: 750px) {
      .hero-wanna-be .hero-text.centered .call-to-action.box {
          padding: 1.47vw 3.33vw 1.2vw
      }
        }

.hero-wanna-be .titles-container {
    margin-bottom: 20px;
  }

.hero-wanna-be .titles-container .main-title {
      font: 62px/62px "EvelethClean", sans-serif;
      text-transform: uppercase;
    }

.hero-wanna-be .titles-container .main-title span {
        font-weight: 100;
        display: block;
      }

@media (max-width: 750px) {
    .hero-wanna-be .titles-container .main-title {
        font-size: 8.267vw;
        line-height: 8.267vw;
        margin-bottom: 2.667vw
    }
      }

.hero-wanna-be .titles-container.black-text {
      color: black;
    }

.hero-wanna-be .titles-container.black-text h1,
      .hero-wanna-be .titles-container.black-text h2 {
        color: black;
      }

.hero-wanna-be .titles-container .subtitle {
      width: 100%;
      font-size: 28px;
      margin-top: 18px;
      line-height: 32px
    }

@media (max-width: 750px) {
    .hero-wanna-be .titles-container .subtitle {
        font-size: 3.7vw;
        line-height: 4.2vw;
        margin-top: 2.4vw
    }
      }

.hero-wanna-be .call-to-action {
    font-size: 21px;
    line-height: 1em;
    letter-spacing: 0.045em;
    font-weight: bold;
    text-transform: uppercase
  }

.hero-wanna-be .call-to-action.box {
      display: inline-block;
      padding: 11px 18px 9px;
      background: rgba(0, 0, 0, 0.6);
      border: solid 1px #fff;
      min-width: 108px;
    }

.hero-wanna-be .call-to-action.box .cta-text {
        display: flex;
        justify-content: center;
      }

@media (max-width: 750px) {
  .hero-wanna-be .call-to-action {
      font-size: 2.8vw
  }

      .hero-wanna-be .call-to-action.box {
        padding: 1.467vw 2.4vw 1.2vw;
        min-width: 14.4vw;
      }
    }

.prod-group-container .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    margin-bottom: 28px;
    font: 100 15px/14px "Campton", sans-serif;
    text-transform: uppercase;
    padding: 0 40px
  }

@media (max-width: 1020px) {
  .prod-group-container .header-container {
      padding: 0 3.912vw
  }
    }

@media (max-width: 600px) {
  .prod-group-container .header-container {
      font-size: 2.5vw
  }
    }

@media (max-width: 400px) {
  .prod-group-container .header-container {
      padding: 0 5.333vw;
      font-size: 10px
  }
    }

.prod-group-container .header-container .header-link {
      color: black;
      border-bottom: 1px solid transparent;
      transition: border-color 0.4s ease 0.3s
    }

.prod-group-container .header-container .header-link:hover {
        border-color: black;
        transition: border-color 0.4s ease;
      }

.prod-group-container .products-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: scroll
  }

.prod-group-container .products-container.auto-center {
      justify-content: center
    }

@media (max-width: calc(750px + 10px)) {
    .prod-group-container .products-container.auto-center {
        justify-content: flex-start
    }
      }

@media (min-width: 12750px) {
        .prod-group-container .products-container:not(.auto-center) .product-unit {
          margin: 0 calc((100% - 1100px) / 8) 70px;
        }
      }

.prod-group-container .products-container .product-unit {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      margin: 0 1.24vw 6.67vw;
      color: inherit;
    }

.prod-group-container .products-container .product-unit .product-image {
        height: 218px;
        width: 218px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        border-bottom: 1px solid #e6e6e6
      }

@media (max-width: 600px) {

      .prod-group-container .products-container .product-unit .product-image {
          width: 41.9vw;
          height: 41.9vw
      }
        }

.prod-group-container .products-container .product-unit .product-image img {
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
          display: block;
        }

.prod-group-container .products-container .product-unit .product-details {
        width: 218px;
        display: block;
        text-align: left;
        margin-top: 14px;
        padding: 0px 2px;
        box-sizing: border-box;
        font-weight: 600;
      }

.prod-group-container .products-container .product-unit .product-details .price {
          color: #808080;
        }

.prod-group-container .products-container .product-unit .product-details .lace-options {
          padding-bottom: 10px;
          margin-top: 8px;
        }

.prod-group-container .products-container .product-unit .product-details .lace-options .options {
            display: flex;
            margin-top: 5px;
            flex-wrap: wrap;
          }

.prod-group-container .products-container .product-unit .product-details .lace-options .options .color {
              width: 10px;
              height: 10px;
              margin-right: 5px;
              margin-bottom: 5px;
              background-size: cover;
              border-radius: 50%;
            }

@media (max-width: 600px) {
      .prod-group-container .products-container .product-unit .product-details {
          width: 41.9vw
      }
        }

.prod-group-container .products-container .product-unit:first-child {
        margin-left: 0;
      }

.prod-group-container .products-container .product-unit:last-child {
        margin-right: 0;
      }

@media (min-width: 1021px) {
    .prod-group-container .products-container .product-unit {
        margin: 0 12.6px 68px
    }
      }

@media (max-width: 600px) {
    .prod-group-container .products-container .product-unit {
        margin: 0 4.1vw 13.34vw
    }
      }

.prod-group-container .products-container .product-unit.is-preview {
        margin: 0 24px 70px;
      }

.prod-group-container.medium-container {
    padding: 0;
  }

.web-options {
  margin-top: 8px;
}

.web-options .options {
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
  }

.web-options .options .web {
      margin: 0 11px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center top;
      height: 30px;
      margin-bottom: 10px
    }

.web-options .options .web.i-web {
        width: 27px;
        background-image: url(/wp-content/themes/nokona-2019/img/web-1.svg);
      }

.web-options .options .web.h-web {
        width: 23px;
        background-image: url(/wp-content/themes/nokona-2019/img/web-2.svg);
      }

.web-options .options .web.modified-trap {
        width: 23px;
        background-image: url(/wp-content/themes/nokona-2019/img/web-3.svg);
      }

.web-options .options .web.closed-web {
        width: 26px;
        background-image: url(/wp-content/themes/nokona-2019/img/web-4.svg);
      }

.products-container {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  scrollbar-width: thin;
}

/* This class controls what elements have the new fancy scrollbar CSS */

.layout-scrollbar {
  scrollbar-color: black #e6e6e6;
}

.layout-scrollbar::-webkit-scrollbar {
  height: 4px;
  width: 15px;
}

.layout-scrollbar::-webkit-scrollbar-track {
  background-color: #e6e6e6;
  border-radius: 2px;
  margin-left: 100px;
  margin-right: 100px
}

@media (max-width: 1020px) {

.layout-scrollbar::-webkit-scrollbar-track {
    margin-left: 9.52vw;
    margin-right: 9.52vw
}
  }

.layout-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgb(0, 0, 0);
  border-radius: 2px;
}

.layout-scrollbar::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.7);
}

.layout-scrollbar::-webkit-scrollbar-thumb:vertical {
  min-height: 1.5rem;
}

.layout-scrollbar::-webkit-scrollbar-thumb:horizontal {
  min-width: 1.5rem;
}

.series-group-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.series-group-container .series-item {
    width: 100%;
    position: relative;
    margin: 2.12% 0;
  }

.series-group-container .series-section {
    width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(241, 241, 241);
    display: flex;
    flex-direction: column-reverse
  }

@media (min-width: 801px) {
  .series-group-container .series-section {
      flex-direction: row-reverse
  }
      .series-group-container .series-section.reverse {
        flex-direction: row;
      }
    }

.series-group-container .info-container {
    width: 43%;
    margin: 2.5% 3.5%;
    text-align: left;
    color: black;
    display: flex;
    flex-direction: column
  }

@media (max-width: 800px) {
  .series-group-container .info-container {
      width: auto;
      width: initial
  }
    }

.series-group-container .info-container .title {
      font: 48px/100% "EvelethClean", sans-serif;
      text-transform: uppercase;
      margin-bottom: 0.25em
    }

@media (max-width: 1020px) {
    .series-group-container .info-container .title {
        font-size: 4.57vw
    }
      }

@media (max-width: 600px) {
    .series-group-container .info-container .title {
        font-size: 27.42px
    }
      }

.series-group-container .info-container .subtitle {
      font: 22px/100% "EvelethClean", sans-serif;
      margin-bottom: 0.75em
    }

@media (max-width: 1020px) {
    .series-group-container .info-container .subtitle {
        font-size: 2.1vw
    }
      }

@media (max-width: 600px) {
    .series-group-container .info-container .subtitle {
        font-size: 12.6px
    }
      }

.series-group-container .info-container .call-to-action {
      font: 22px/100% "EvelethClean", sans-serif;
      text-transform: uppercase;
      color: #ff6b00;
      margin-bottom: 1.2em
    }

@media (max-width: 1020px) {
    .series-group-container .info-container .call-to-action {
        font-size: 2.1vw
    }
      }

@media (max-width: 600px) {
    .series-group-container .info-container .call-to-action {
        font-size: 12.6px;
        margin-bottom: 0.5em
    }
      }

@media (max-width: 1020px) {
    .series-group-container .info-container .series-content {
        font-size: 1.33vw
    }
      }

@media (max-width: 750px) {
    .series-group-container .info-container .series-content {
        font-size: 10px;
        line-height: 160%
    }
      }

.series-group-container .info-container.anchor-center {
      justify-self: center;
      justify-content: center;
    }

.series-group-container .info-container.anchor-bottom {
      justify-self: flex-end;
      justify-content: flex-end;
    }

.series-group-container .series-image {
    width: 50%;
    height: 100%;
    overflow: hidden
  }

@media (max-width: 800px) {
  .series-group-container .series-image {
      width: 100%
  }
    }

.series-group-container .series-image img {
      max-width: 100%;
      max-height: 100%;
      height: auto;
      width: auto;
      display: block
    }

@media (max-width: 800px) {
    .series-group-container .series-image img {
        max-width: min(560px, 100%);
        margin-left: auto;
        margin-right: auto
    }
      }

.series-group-container .series-image.i-anchor-center {
      align-self: center;
      align-items: center;
    }

.series-group-container .series-image.i-anchor-bottom {
      align-self: flex-end;
      align-items: flex-end;
    }

@media (max-width: 600px) {
    .series-holder:not(.auction-items) .series-group-container .series-section {
      flex-direction: column-reverse
    }
      .series-holder:not(.auction-items) .series-group-container .series-section.shrink-reverse {
        flex-direction: column;
      }
    .series-group-container .info-container {
      width: 93%;
    }
    .series-group-container .series-image {
      width: 100%;
    }
  }

.auction-items .info-container .title {
      font-size: 54px;
      line-height: 1.083;
      margin-bottom: 0em
    }

@media (max-width: 1020px) {
    .auction-items .info-container .title {
        font-size: 5.14125vw
    }
      }

@media (max-width: 600px) {
    .auction-items .info-container .title {
        font-size: 30px
    }
      }

.auction-items .info-container .subtitle {
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: 0.02em;
      margin-bottom: 0.02em;
      margin-bottom: 0
    }

@media (max-width: 1020px) {
    .auction-items .info-container .subtitle {
        font-size: 1.91vw
    }
      }

@media (max-width: 600px) {
    .auction-items .info-container .subtitle {
        font-size: 12px
    }
      }

.auction-items .info-container .call-to-action {
      margin-top: 1em;
      margin-bottom: 1em;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: 0.02em
    }

@media (max-width: 1020px) {
    .auction-items .info-container .call-to-action {
        font-size: 2.3vw
    }
      }

@media (max-width: 600px) {
    .auction-items .info-container .call-to-action {
        font-size: 15px
    }
      }

.auction-items .info-container .series-content {
      font: 400 15px/1.333 "Campton", sans-serif
    }

@media (max-width: 600px) {
    .auction-items .info-container .series-content {
        font-size: 13px
    }
      }

.auction-items .info-container .series-content h3, .auction-items .info-container .series-content h4, .auction-items .info-container .series-content h5 {
        line-height: 1.2;
        letter-spacing: 0.02em;
        font-weight: 500;
      }

.auction-items .info-container .series-content h3 {
        font-size: 24px;
      }

.auction-items .info-container .series-content h3 {
        font-size: 20px;
      }

.auction-items .info-container .series-content p:not(:last-child) {
        margin-bottom: 1.1em;
      }

.auction-items .series-image {
    align-self: stretch;
    height: auto;
    height: initial;
  }

.auction-items .series-image img {
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
         object-fit: contain;
    }

.series-list-container .series-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: scroll
  }

.series-list-container .series-container.auto-center {
      justify-content: center
    }

@media (max-width: 1020px) {
    .series-list-container .series-container.auto-center {
        justify-content: flex-start
    }
      }

@media (min-width: 12750px) {
        .series-list-container .series-container:not(.auto-center) .series-unit {
          margin: 0 calc((100% - 1100px) / 8) 70px;
        }
      }

.series-list-container .series-container .series-unit {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      margin: 0 1.24vw 6.67vw;
    }

.series-list-container .series-container .series-unit .series-image {
        height: 300px;
        width: 300px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat
      }

@media (max-width: 600px) {
      .series-list-container .series-container .series-unit .series-image {
          width: 41.9vw;
          height: 41.9vw
      }
        }

.series-list-container .series-container .series-unit .series-image img {
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
        }

.series-list-container .series-container .series-unit .series-details {
        width: 300px;
        color: #534741;
        display: block;
        margin-top: 14px;
        font-weight: 700;
        font: 20px/100% "EvelethClean", sans-serif;
      }

.series-list-container .series-container .series-unit .series-details .subtitle {
          font-weight: 400;
          font: 16px/20px "Campton", sans-serif;
        }

@media (max-width: 600px) {
      .series-list-container .series-container .series-unit .series-details {
          width: 41.9vw
      }
        }

@media (max-width: 750px) {
      .series-list-container .series-container .series-unit .series-details {
          font-size: 2.67vw;
      }
          .series-list-container .series-container .series-unit .series-details .subtitle {
            font-size: 2.13vw;
            line-height: 2.67vw;
          }
        }

@media (max-width: 470px) {
      .series-list-container .series-container .series-unit .series-details {
          font-size: 12.5px;
      }
          .series-list-container .series-container .series-unit .series-details .subtitle {
            font-size: 10px;
            line-height: 12.5px;
          }
        }

.series-list-container .series-container .series-unit:first-child {
        margin-left: 0;
      }

.series-list-container .series-container .series-unit:last-child {
        margin-right: 0;
      }

@media (min-width: 1021px) {
    .series-list-container .series-container .series-unit {
        margin: 0 12.6px 68px
    }
      }

@media (max-width: 600px) {
    .series-list-container .series-container .series-unit {
        margin: 0 4.1vw 13.34vw
    }
      }

.series-list-container .series-container .series-unit.is-preview {
        margin: 0 24px 70px;
      }

.series-list-container.medium-container {
    padding: 0;
  }

.series-container {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  scrollbar-width: thin;
}

.make-match-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.make-match-container .match-title {
    font: 28px/114.2% "EvelethClean", sans-serif;
    color: black;
    font-weight: 200;
    margin-bottom: 1.36em;
  }

.make-match-container .match-title .bold-stuff {
      font-weight: 700;
    }

@media (max-width: 1020px) {
  .make-match-container .match-title {
      font-size: 2.67vw
  }
    }

@media (max-width: 600px) {
  .make-match-container .match-title {
      font-size: 16px
  }
    }

.make-match-container .call-to-action {
    border: 2px solid #ff6b00;
    background-color: #ff6b00;
    font: 21px/42px "Campton", sans-serif;
    text-transform: uppercase;
    color: white;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: pointer;
    padding: 0 2.33em;
    font-weight: 700;
    height: 40px;
    transition: all 0.25s ease
  }

.make-match-container .call-to-action:hover {
      background-color: white;
      color: #ff6b00;
      transition: all 0.25s ease;
    }

@media (max-width: 1020px) {
  .make-match-container .call-to-action {
      font-size: 2vw;
      line-height: 4.2vw;
      height: 4vw
  }
    }

@media (max-width: 600px) {
  .make-match-container .call-to-action {
      font-size: 12px;
      line-height: 22px;
      height: 20px
  }
    }

.make-match-container .match-image {
    width: 100%;
  }

.make-match-container .match-image img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
    }

.leather-options-container {
  display: flex;
  flex-wrap: wrap;
}

.leather-options-container .leather-container {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    margin-left: 3.33%;
    margin-bottom: 20px
  }

@media (max-width: 800px) {
  .leather-options-container .leather-container {
      width: 46%;
      margin-left: 4%
  }
    }

@media (max-width: 600px) {
  .leather-options-container .leather-container {
      width: 100%;
      margin-left: 0
  }
    }

.leather-options-container .leather-container .animal-image {
      width: auto;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
    }

.leather-options-container .leather-container .animal-image img {
        max-width: 100%;
        max-height: 100px;
        -o-object-fit: contain;
           object-fit: contain;
      }

.leather-options-container .leather-container .detail-list {
      width: 94%;
      display: inherit;
      flex-direction: column;
      margin-left: 6%;
      margin-bottom: 33px;
    }

.leather-options-container .leather-container .detail-list .detail {
        position: relative;
        margin: 3px 0
      }

.leather-options-container .leather-container .detail-list .detail::before {
          content: "+";
          color: #ff6b00;
          font-weight: bold;
          font-size: 17px;
          position: absolute;
          top: 0px;
          left: -7%;
        }

.leather-options-container .leather-container .color-category {
      text-transform: uppercase;
      font: 14px/140% "Campton", sans-serif;
    }

.leather-options-container .leather-container .color-cta {
      text-transform: uppercase;
      font-weight: 700;
      font: 14px/140% "Campton", sans-serif;
      letter-spacing: 0.09em;
      margin-bottom: 13px
    }

.leather-options-container .leather-container .color-cta.arrow-set::after {
          display: inline-block;
          content: ">";
          transition: transform 0.4s ease-in-out;
          margin-left: 5px;
          font-weight: bold;
        }

.leather-options-container .leather-container .color-cta.arrow-set:hover::after {
            transform: translateX(8px);
            transition: transform 0.4s ease-in-out;
          }

.leather-options-container .leather-container .color-options {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-bottom: 30px;
    }

.leather-options-container .leather-container .color-options .color-option {
        height: 18px;
        width: 18px;
        border-radius: 50%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 6px;
        margin-bottom: 6px
      }

.leather-options-container .leather-container .color-options .color-option.color-black {
          background-image: url(/wp-content/themes/nokona-2019/img/color-black.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-blood {
          background-image: url(/wp-content/themes/nokona-2019/img/color-blood.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-brown {
          background-image: url(/wp-content/themes/nokona-2019/img/color-brown.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-gold {
          background-image: url(/wp-content/themes/nokona-2019/img/color-gold.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-green {
          background-image: url(/wp-content/themes/nokona-2019/img/color-green.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-grey {
          background-image: url(/wp-content/themes/nokona-2019/img/color-grey.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-navy {
          background-image: url(/wp-content/themes/nokona-2019/img/color-navy.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-orange {
          background-image: url(/wp-content/themes/nokona-2019/img/color-orange.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-pink {
          background-image: url(/wp-content/themes/nokona-2019/img/color-pink.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-purple {
          background-image: url(/wp-content/themes/nokona-2019/img/color-purple.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-red {
          background-image: url(/wp-content/themes/nokona-2019/img/color-red.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-royal {
          background-image: url(/wp-content/themes/nokona-2019/img/color-royal.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-teal {
          background-image: url(/wp-content/themes/nokona-2019/img/color-teal.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-white {
          background-image: url(/wp-content/themes/nokona-2019/img/color-white.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-cream {
          background-image: url(/wp-content/themes/nokona-2019/img/color-cream.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-blonde {
          background-image: url(/wp-content/themes/nokona-2019/img/color-blonde.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-tan {
          background-image: url(/wp-content/themes/nokona-2019/img/color-tan.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-charcoal {
          background-image: url(/wp-content/themes/nokona-2019/img/color-charcoal.jpg);
        }

.leather-options-container .leather-container .color-options .color-option.color-skyblue {
          background-image: url(/wp-content/themes/nokona-2019/img/color-skyblue.jpg);
        }

.forward-tile-section.close-spacing {
    margin-top: -41px
  }

@media (max-width: 835px) {

.forward-tile-section.close-spacing {
      margin-top: -5.5vw
  }
    }

@media (max-width: 600px) {
  .forward-tile-section .forward-tile-container {
      padding: 0 1.5vw
  }
    }

.forward-tile-section .forward-tile-container .forward-tile {
      width: 100%;
      min-height: 300px;
      padding: 8.9% 9.6% 5.3%;
      box-sizing: border-box;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }

.forward-tile-section .forward-tile-container .forward-tile .item-content {
        color: white;
        font-weight: 100;
      }

.forward-tile-section .forward-tile-container .forward-tile .item-content .item-title {
          font: 48px/100% "EvelethClean", sans-serif;
          font-weight: 500;
          margin-bottom: 2%;
          color: white
        }

@media (max-width: 600px) {
        .forward-tile-section .forward-tile-container .forward-tile .item-content .item-title {
            font-size: 8vw
        }
          }

@media (max-width: 400px) {
        .forward-tile-section .forward-tile-container .forward-tile .item-content .item-title {
            font-size: 32px
        }
          }

.forward-tile-section .forward-tile-container .forward-tile .item-content .item-content {
          margin-bottom: 28px;
        }

.forward-tile-section .forward-tile-container .forward-tile .item-content .forward-arrow {
          width: 28px;
          height: 56px;
          margin: 0 auto 4%;
          position: relative;
          transition: transform 0.3s ease-in-out
        }

.forward-tile-section .forward-tile-container .forward-tile .item-content .forward-arrow::before {
            position: absolute;
            top: 0;
            left: calc(50% - 2px);
            content: "";
            width: 4px;
            height: 102%;
            background-color: #e6e7e7;
          }

.forward-tile-section .forward-tile-container .forward-tile .item-content .forward-arrow::after {
            position: absolute;
            bottom: 0;
            left: 3px;
            content: "";
            width: 66%;
            height: 31.3%;
            border-right: 4px solid #e6e7e7;
            border-bottom: 4px solid #e6e7e7;
            transform: rotate(45deg);
          }

.forward-tile-section .forward-tile-container .forward-tile .item-content .forward-arrow:hover {
            cursor: pointer;
            transform: translateY(6px);
            transition: transform 0.3s ease-in-out;
          }

.forward-tile-section .forward-tile-container .forward-tile .item-content .forward-arrow.pre-adjust::after {
              left: 5px;
            }

@media (max-width: 750px) {
    .title-text-images p {
      margin-bottom: 3vw;
    }
  }

.title-text-images h2 span {
      color: #ff6b00;
    }

.title-text-images .image-row {
    display: flex;
  }

.title-text-images .image-row img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }

.title-text-images .image-wide {
    position: relative;
    width: 65.666%;
    margin-right: 1%;
  }

.title-text-images .image-wide .spacer {
      padding-top: 43.543%;
    }

.title-text-images .image {
    position: relative;
    width: 32.333%;
    margin-left: 1%;
  }

.title-text-images .image .spacer {
      padding-top: 95.62%;
    }

.title-text-images .wide-right .image-wide {
      margin-right: auto;
      margin-left: 1%;
    }

.title-text-images .wide-right .image {
      margin-left: auto;
      margin-right: 1%;
    }

.title-text-images .all-three .image {
      margin-left: 1%;
      margin-right: 1%;
      width: 32.666%;
    }

.title-text-images .all-three .image .spacer {
        padding-top: 91.034%;
      }

.title-text-images .all-three .image:first-of-type {
        margin-left: 0;
      }

.title-text-images .all-three .image:last-of-type {
        margin-right: 0;
      }

.title-text-images .fifty-fifty .image {
      position: relative;
      width: 49%;
      margin-right: 1%;
      margin-left: 1%;
    }

.title-text-images .fifty-fifty .image .spacer {
        padding-top: 123.478%;
      }

.title-text-images .fifty-fifty .image:first-of-type {
        margin-left: 0;
      }

.title-text-images .fifty-fifty .image:last-of-type {
        margin-right: 0;
      }

.nokona-faq-block {
  padding-left: 8%;
  padding-right: 8%;
  margin-bottom: 10px
}

@media (max-width: 900px) {

.nokona-faq-block {
    padding-left: 50px;
    padding-right: 5.555vw
}
  }

.nokona-faq-block dl.faq-block dt {
      position: relative;
      margin-bottom: 31px;
      font-weight: 700
    }

@media (max-width: 750px) {
    .nokona-faq-block dl.faq-block dt {
        margin-bottom: 6vw
    }
      }

.nokona-faq-block dl.faq-block dt:before {
        content: "Q.";
        font-size: 23px;
        font-weight: 700;
        position: absolute;
        left: -43px
      }

@media (max-width: 750px) {
      .nokona-faq-block dl.faq-block dt:before {
          left: -30px;
          font-size: 20px
      }
        }

.nokona-faq-block dl.faq-block dd {
      position: relative;
      margin-bottom: 55px;
      font-weight: 300
    }

@media (max-width: 750px) {
    .nokona-faq-block dl.faq-block dd {
        margin-bottom: 6vw
    }
      }

.nokona-faq-block dl.faq-block dd:before {
        content: "A.";
        font-size: 23px;
        font-weight: 700;
        position: absolute;
        left: -43px
      }

@media (max-width: 750px) {
      .nokona-faq-block dl.faq-block dd:before {
          left: -30px;
          font-size: 20px
      }
        }

.nokona-tour-contact-block dl.pricelist {
    text-align: left;
    display: block;
    margin-bottom: 31px;
    font-weight: 300
  }

@media (max-width: 750px) {
  .nokona-tour-contact-block dl.pricelist {
      margin-bottom: 6vw
  }
    }

.nokona-tour-contact-block dl.pricelist dt {
      float: left;
      width: calc(100% - 60px);
      overflow: hidden;
      white-space: nowrap;
      box-sizing: border-box
    }

.nokona-tour-contact-block dl.pricelist dt:after {
        content: ".................................................................................";
        font-size: 20px;
        letter-spacing: 3px;
      }

.nokona-tour-contact-block dl.pricelist dd {
      float: left;
      width: 60px;
      overflow: hidden;
      padding-left: 8px;
      box-sizing: border-box;
    }

.nokona-tour-contact-block .clearfix {
    clear: both;
  }

/* Google Maps Styles */

.nokona-tour-contact-block #googleMap {
    padding-top: 56%;
  }

.nokona-tour-contact-block #googleInfo span {
      display: block;
      color: #ff6b00;
      font-size: 17px;
    }

.nokona-tour-contact-block #googleInfo a {
      display: block;
      margin: 5px 0;
    }

.nokona-tour-contact-block .wp-block-columns {
    grid-gap: 36px;
    grid-gap: 36px;
    gap: 36px
  }

@media (max-width: 1020px) {
  .nokona-tour-contact-block .wp-block-columns {
      grid-gap: 3.6vw;
      grid-gap: 3.6vw;
      gap: 3.6vw
  }
    }

@media (max-width: 750px) {
  .nokona-tour-contact-block .wp-block-columns {
      grid-gap: 0;
      grid-gap: 0;
      gap: 0
  }
    }

.nokona-title-text-product-block {
  padding: 65px 4%;
  display: flex
}

@media (max-width: 900px) {

.nokona-title-text-product-block.right {
      flex-direction: column
  }
    }

@media (max-width: 900px) {

.nokona-title-text-product-block.left {
      flex-direction: column-reverse
  }
    }

.nokona-title-text-product-block:first-of-type {
    padding-top: 50px;
  }

.nokona-title-text-product-block .text-side {
    width: calc(100% - 263px);
    font-weight: 300;
    box-sizing: border-box
  }

@media (max-width: 900px) {
  .nokona-title-text-product-block .text-side {
      width: 100%
  }
    }

.nokona-title-text-product-block .text-side.left {
      padding-left: 4%;
    }

.nokona-title-text-product-block .text-side.right {
      padding-right: 4%;
    }

.nokona-title-text-product-block .text-side ul {
      list-style-type: none;
      padding-left: 16px;
    }

.nokona-title-text-product-block .text-side ul li {
        position: relative
      }

.nokona-title-text-product-block .text-side ul li:before {
          content: "";
          background: url(/wp-content/themes/nokona-2019/img/list-plus.svg) center no-repeat;
          background-size: contain;
          position: absolute;
          left: -17px;
          width: 11px;
          height: 21px;
        }

.nokona-title-text-product-block .product-side {
    width: 263px;
    text-align: center
  }

@media (max-width: 900px) {
  .nokona-title-text-product-block .product-side {
      margin: 20px auto 0
  }
    }

.nokona-title-text-product-block .product-side .product-image {
      position: relative;
      margin-bottom: 21px;
      background-repeat: no-repeat
    }

.nokona-title-text-product-block .product-side .product-image:after {
        content: "";
        width: 220px;
        height: 1px;
        border-top: 1px solid #e6e6e6;
        position: absolute;
        bottom: -8px;
        left: 50%;
        margin-left: -110px;
      }

.nokona-title-text-product-block .product-side .product-image .spacer {
        padding-top: 44.405%;
      }

.nokona-title-text-product-block .product-side .product-title {
      font-size: 14px;
      line-height: 18px;
      font-weight: 600;
      margin-bottom: 28px;
    }

.nokona-title-text-product-block .product-side .product-title span {
        font-weight: 500;
        color: #808080;
      }

.nokona-title-text-product-block .btn-orange {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    background-color: #ff6b00;
    border: 1px solid #ff6b00;
    box-sizing: border-box;
    width: 223px;
    font-weight: 700
  }

.nokona-title-text-product-block .btn-orange:hover {
      color: #ff6b00;
      background-color: #fff;
    }

.nokona-title-text-product-block .btn-orange.disabled {
      border-color: rgb(185, 184, 184);
      background-color: #fff;
      color: rgb(185, 184, 184);
      opacity: 0.6;
    }

.nokona-branded-video-block {
  padding: 65px 5%;
  position: relative;
}

.nokona-branded-video-block .background {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
  }

.nokona-branded-video-block .iframe-wrapper {
    position: relative;
    width: 66%;
    z-index: 1
  }

@media (max-width: 900px) {
  .nokona-branded-video-block .iframe-wrapper {
      width: 79%
  }
    }

.nokona-branded-video-block .iframe-wrapper iframe {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

.nokona-branded-video-block .iframe-wrapper .spacer {
      padding-top: 56%;
    }

.nokona-branded-video-block.gray-logo:after {
      content: "";
      background-image: url(/wp-content/themes/nokona-2019/img/logo-bg.svg);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      width: 238px;
      height: 199px;
      position: absolute;
      right: 10%;
      top: 50%;
      margin-top: -100px;
    }

.nokona-branded-video-block.color-logo:after {
      content: "";
      background-image: url(/wp-content/themes/nokona-2019/img/logo-color-bg.svg);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      width: 238px;
      height: 199px;
      position: absolute;
      right: 10%;
      top: 50%;
      margin-top: -100px;
    }

.nokona-branded-video-block .clearfix {
    clear: both;
  }

.nokona-branded-video-block.brand-left.color-logo:after, .nokona-branded-video-block.brand-left.gray-logo:after {
        left: 10%;
      }

.nokona-branded-video-block.brand-left .iframe-wrapper {
      float: right;
    }

.nokona-branded-video-block .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
  }

.nokona-wide-image-with-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative
}

.nokona-wide-image-with-title.container:before {
      content: "";
      display: block;
      height: 0;
      padding-top: 421px
    }

@media (max-width: 1020px) {

.nokona-wide-image-with-title.container:before {
        padding-top: 49.019%
    }
      }

.nokona-wide-image-with-title.block-section.no-margin {
      margin-bottom: 0;
    }

.nokona-wide-image-with-title .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

.nokona-wide-image-with-title .centerme {
    text-align: center;
    position: absolute;
  }

.nokona-wide-image-with-title .image-title {
    font-family: "EvelethClean", sans-serif;
    font-weight: 400;
    font-size: 34px;
    line-height: 49px
  }

@media (max-width: 1020px) {
  .nokona-wide-image-with-title .image-title {
      font-size: 2.43em;
      line-height: 1.45em
  }
    }

@media (max-width: 750px) {
  .nokona-wide-image-with-title .image-title {
      font-size: 1.8em
  }
    }

@media (max-width: 600px) {
  .nokona-wide-image-with-title .image-title {
      font-size: 1.3em
  }
    }

@media (max-width: 400px) {
  .nokona-wide-image-with-title .image-title {
      font-size: 0.9em
  }
    }

.nokona-wide-image-with-title .image-subtitle {
    font-family: "EvelethClean", sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 41px
  }

@media (max-width: 1020px) {
  .nokona-wide-image-with-title .image-subtitle {
      font-size: 1.57em;
      line-height: 1.9em
  }
    }

@media (max-width: 750px) {
  .nokona-wide-image-with-title .image-subtitle {
      font-size: 1.2em
  }
    }

@media (max-width: 600px) {
  .nokona-wide-image-with-title .image-subtitle {
      font-size: 0.9em
  }
    }

@media (max-width: 400px) {
  .nokona-wide-image-with-title .image-subtitle {
      font-size: 0.5em
  }
    }

.nokona-wide-image-with-title + .block-section {
    margin-top: 100px
  }

@media (max-width: 750px) {

  .nokona-wide-image-with-title + .block-section {
      margin-top: 13.333vw
  }
    }

.belt-generator-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.belt-console {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 448px;
}

.belt-console .block-title {
    font: bold 28px/114% "Campton", sans-serif;
    text-transform: uppercase;
  }

.belt-console .subtitle {
    font: 14px/150% "Campton", sans-serif;
  }

.belt-console .console-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

.belt-console .console-buttons .console-button {
      width: calc(49% - 2px);
      padding: 14px;
      border: 2px solid #ff6b00;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      text-transform: uppercase;
      background-color: #ff6b00;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
      font: bold 14px/100% "Campton", sans-serif;
      color: white;
      transition: color 0.25s ease, background-color 0.25s ease;
      box-sizing: border-box
    }

.belt-console .console-buttons .console-button:hover {
        cursor: pointer;
        background-color: white;
        color: #ff6b00;
      }

.belt-console .console-buttons .console-button:first-child {
        border-color: #c7c7c7;
        background-color: #c7c7c7
      }

.belt-console .console-buttons .console-button:first-child:hover {
          background-color: white;
          color: #c7c7c7;
        }

@media (max-width: 750px) {
    .belt-console .console-buttons .console-button {
        font-size: 1.87vw;
        padding: 1.87vw
    }
      }

@media (max-width: 600px) {
    .belt-console .console-buttons .console-button {
        font-size: 11.2px;
        padding: 11.2px
    }
      }

@media (max-width: 1020px) {
  .belt-console .console-buttons {
      max-width: 380px
  }
    }

@media (max-width: 1020px) {

.belt-console {
    width: 43.9vw
}
  }

@media (max-width: 600px) {

.belt-console {
    width: 100%
}
  }

.belt-image {
  width: calc(100% - 448px);
  height: auto
}

.belt-image.disappear {
    transition: width 1s ease, transform 1s ease;
    transform: scale(0);
    width: 0;
  }

.belt-image img {
    width: 100%;
    height: auto;
  }

@media (max-width: 1020px) {

.belt-image {
    width: calc(100% - 43.9vw)
}
  }

@media (max-width: 600px) {

.belt-image {
    display: none
}
  }

.showbelts-brand-title {
  background-image: url(/wp-content/themes/nokona-2019/img/showbelts-logo.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 74%;
  padding-top: 10%;
  margin-bottom: 8px;
}

.color-pickers {
  display: flex;
  justify-content: center;
  align-items: center;
}

#modal-overlay {
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.50588);
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  z-index: 102;
}

#modal-overlay.alive,
  #modal-overlay .alive {
    display: flex;
  }

.color-picker {
  font: 12px/186% "Campton", sans-serif;
  margin: 38px 15px 16px;
}

.color-picker .button {
    border: 2px solid #c7c7c7;
    border-radius: 50%;
    position: relative;
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 12px;
    transition: background-color 0.25s linear
  }

.color-picker .button::before {
      content: "";
      width: 38.4%;
      height: 9.2%;
      background-color: #c7c7c7;
      position: absolute;
      border-radius: 2px;
    }

.color-picker .button::after {
      content: "";
      width: 9.2%;
      height: 38.4%;
      background-color: #c7c7c7;
      position: absolute;
      border-radius: 2px;
    }

.color-picker .button:hover {
      cursor: pointer;
    }

.color-picker .button.has-color::before,
      .color-picker .button.has-color::after {
        display: none;
      }

.color-picker .button.flash {
      animation: flash 1s linear;
    }

@media (max-width: 1020px) {
  .color-picker .button {
      width: 6.4vw;
      height: 6.4vw;
      min-width: 55px;
      min-height: 55px
  }
    }

@media (max-width: 600px) {

.color-picker {
    margin-top: 20px
}
  }

.color-modal {
  box-sizing: border-box;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  max-width: 512px;
  max-height: 438px;
  padding: 38px 52px;
  background-color: #fff;
  border: 1px solid black;
  display: none;
  flex-wrap: wrap;
}

.color-modal .select-confirm {
    height: 50px;
    width: 110px;
    border: 2px solid black;
    margin: 7.4% auto 2.7%;
    font: 700 16px/133% "Campton", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: pointer;
  }

@media (max-width: 518px) {

.color-modal {
    max-height: 84.5vw;
    padding: 7.34vw 10.04vw;
}
    .color-modal .select-confirm {
      height: 9.65vw;
      width: 21.24vw;
      font-size: 3.09vw;
    }
  }

@media (max-width: 388.5px) {
    .color-modal .select-confirm {
      font-size: 12px;
    }
  }

.color-modal .color-option {
    width: 14.5%;
    padding-top: 14.5%;
    height: 0;
    border-radius: 50%;
    margin: 2.7%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.25s ease-in-out
  }

.color-modal .color-option::after {
      content: "";
      width: 50%;
      padding-top: 50%;
      background-color: #fff;
      position: absolute;
      top: 25%;
      border-radius: 50%;
      transform: scale(0);
      transition: all 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
    }

.color-modal .color-option:hover {
      cursor: pointer;
      transform: scale(1.07);
      transition: transform 0.25s ease-in-out;
    }

.color-modal .color-option.selected::after {
        transform: scale(1);
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

.belt-generator-background {
  margin-bottom: 45px
}

.belt-generator-background.initaited {
    background-color: #f7f7f4;
    background-image: url(/wp-content/themes/nokona-2019/img/generator-tile-texture.jpg);
    background-size: 250px 250px;
    transition: padding 0.8s ease;
    padding-top: 74px;
    padding-bottom: 64px;
    animation: expand-generator 2.2s linear 0s 1;
    position: relative
  }

.belt-generator-background.initaited::before {
      opacity: 1;
      transition: transform 0.8s ease;
      transform: rotate(4.3deg);
    }

.belt-generator-background.initaited::after {
      opacity: 1;
      transition: transform 0.8s ease;
      transform: rotate(-4.3deg);
    }

@media (max-width: 600px) {

.belt-generator-background.initaited {
      transition-delay: 0s
  }
    }

.belt-generator-background::before {
    content: "";
    height: 64px;
    width: 55%;
    position: absolute;
    background-color: #fff;
    bottom: -64px;
    left: -5%;
    transform-origin: top right;
    opacity: 0;
  }

.belt-generator-background::after {
    content: "";
    height: 64px;
    width: 55%;
    position: absolute;
    background-color: #fff;
    bottom: -64px;
    right: -5%;
    transform-origin: top left;
    opacity: 0;
  }

.generated-belts-container {
  width: 100%;
  max-height: 0;
  margin-bottom: 55px;
  overflow: hidden;
  opacity: 0
}

.generated-belts-container.show {
    max-height: 1500px;
    opacity: 1;
    transition: opacity 0.4s ease;
  }

.generated-belts-container .generated-belts-header {
    margin: 0 auto 60px;
    text-transform: uppercase;
    font: 22px/150% "Campton", sans-serif;
  }

.generated-belts-container .generated-belts-header .header-category {
      margin: 0px 28px;
      font-weight: bold;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }

@media (max-width: 600px) {
  .generated-belts-container .generated-belts-header {
      font-size: 3.7vw;
  }
      .generated-belts-container .generated-belts-header .header-category {
        margin: 0 4.7vw;
      }
    }

.generated-belts-container .generated-belts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

.generated-belts-container .generated-belts .belt {
      width: 300px;
      display: flex;
      flex-wrap: wrap;
      margin: 0 4px 57px;
      position: relative;
      cursor: pointer;
    }

.generated-belts-container .generated-belts .belt .belt-images {
        border-bottom: 1px solid #f2f2f2;
        width: 100%;
        padding-top: 42%;
        background-size: contain;
        background-repeat: no-repeat;
        margin-bottom: 10px;
        position: relative;
        transform-origin: bottom;
        transition: transform 0.4s ease-in-out, opacity 0.4s linear
      }

.generated-belts-container .generated-belts .belt .belt-images.regenerate {
          transition: transform 0s linear 0.4s, opacity 0.4s linear;
          transform: rotateX(90deg);
          opacity: 0;
        }

.generated-belts-container .generated-belts .belt .belt-images .belt-img {
          position: absolute;
          padding-top: 38.36%;
          width: 100%;
          bottom: 0px;
          left: 0px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          image-rendering: smooth;
        }

.generated-belts-container .generated-belts .belt span {
        text-align: left;
        font: normal 14px/130% "Campton", sans-serif;
        color: #808080;
      }

.generated-belts-container .generated-belts .belt::after {
        content: "Customize";
        color: #ff6b00;
        transition: color 0.3s linear;
        font: bold 12px/175% "Campton", sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        position: absolute;
        bottom: -22px;
        left: 0px;
      }

@keyframes expand-generator {
  0% {
    background-color: transparent;
    background-image: none;
  }
  50% {
    background-color: #f7f7f4;
  }
  100% {
    background-color: #f7f7f4;
  }
}

@keyframes flash {
  0% {
    background-color: #ca1e23;
  }
  100% {
    background-color: transparent;
  }
}

.prod-grid-container .products-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    width: 100%;
  }

.prod-grid-container .products-grid .product-unit {
      margin: 0 5px 3px;
      width: 300px;
      display: block;
      position: relative;
      color: inherit
    }

.prod-grid-container .products-grid .product-unit.dummy {
        width: 218px;
        height: 0px;
        margin-bottom: 0
      }

.prod-grid-container .products-grid .product-unit.dummy.product-thumb {
          width: 125px;
        }

.prod-grid-container .products-grid .product-unit.dummy.product-medium {
          width: 500px;
        }

.prod-grid-container .products-grid .product-unit.dummy.product-belt {
          width: 300px;
        }

.prod-grid-container .products-grid .product-unit::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        aspect-ratio: 1/1;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: 0;
        transition: opacity 0.4s linear;
        display: none;
      }

.prod-grid-container .products-grid .product-unit:hover::before {
        opacity: 1;
      }

.prod-grid-container .products-grid .product-unit .image-wrap {
        position: relative
      }

.prod-grid-container .products-grid .product-unit .image-wrap.mode-0 .sold-message,
        .prod-grid-container .products-grid .product-unit .image-wrap.mode-2 .coming-soon-message {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 42.97872%;
        }

.prod-grid-container .products-grid .product-unit .image-wrap.mode-0 .sold-message .background,
          .prod-grid-container .products-grid .product-unit .image-wrap.mode-0 .sold-message .border,
          .prod-grid-container .products-grid .product-unit .image-wrap.mode-2 .coming-soon-message .background,
          .prod-grid-container .products-grid .product-unit .image-wrap.mode-2 .coming-soon-message .border {
            opacity: 0.91;
          }

.prod-grid-container .products-grid .product-unit .image-wrap.mode-0 .sold-message .border, .prod-grid-container .products-grid .product-unit .image-wrap.mode-2 .coming-soon-message .border {
            fill: none;
            stroke: #fff;
            stroke-miterlimit: 10;
            stroke-width: 1.08px;
          }

.prod-grid-container .products-grid .product-unit .image-wrap.mode-0 .sold-message .text {
            font: 300 20px/100% "EvelethClean", sans-serif;
            fill: #fff;
            letter-spacing: 0.21em;
          }

.prod-grid-container .products-grid .product-unit .image-wrap.mode-2 .coming-soon-message .text {
            font: 300 17px/100% "EvelethClean", sans-serif;
            fill: #fff;
            letter-spacing: 0.21em;
          }

.prod-grid-container .products-grid .product-unit .product-image {
        border-bottom: 1px solid #e6e6e6;
        width: auto;
        max-width: 100%;
        padding-bottom: 8px;
      }

.prod-grid-container .products-grid .product-unit .product-image img {
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
          display: block;
        }

.prod-grid-container .products-grid .product-unit .product-details {
        width: 218px;
        display: block;
        text-align: left;
        margin-top: 14px;
        font-weight: 600
      }

.prod-grid-container .products-grid .product-unit .product-details.product-thumb {
          width: 125px;
        }

.prod-grid-container .products-grid .product-unit .product-details .price {
          color: #808080;
        }

.prod-grid-container .products-grid .product-unit .product-details .lace-options {
          padding-bottom: 10px;
          margin-top: 8px;
        }

.prod-grid-container .products-grid .product-unit .product-details .lace-options .options {
            display: flex;
            margin-top: 5px;
            flex-wrap: wrap;
          }

.prod-grid-container .products-grid .product-unit .product-details .lace-options .options .color {
              width: 10px;
              height: 10px;
              margin-right: 5px;
              margin-bottom: 5px;
              background-size: cover;
              border-radius: 50%;
            }

.prod-grid-container .products-grid .product-unit .product-details .web-options {
          margin-top: 8px;
        }

.prod-grid-container .products-grid .product-unit .product-details .web-options .options {
            display: flex;
            margin-top: 10px;
            flex-wrap: wrap;
          }

.prod-grid-container .products-grid .product-unit .product-details .web-options .options .web {
              margin: 0 11px;
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center top;
              height: 30px;
              margin-bottom: 10px
            }

.prod-grid-container .products-grid .product-unit .product-details .web-options .options .web.i-web {
                width: 27px;
                background-image: url(/wp-content/themes/nokona-2019/img/web-1.svg);
              }

.prod-grid-container .products-grid .product-unit .product-details .web-options .options .web.h-web {
                width: 23px;
                background-image: url(/wp-content/themes/nokona-2019/img/web-2.svg);
              }

.prod-grid-container .products-grid .product-unit .product-details .web-options .options .web.modified-trap {
                width: 23px;
                background-image: url(/wp-content/themes/nokona-2019/img/web-3.svg);
              }

.prod-grid-container .products-grid .product-unit .product-details .web-options .options .web.closed-web {
                width: 26px;
                background-image: url(/wp-content/themes/nokona-2019/img/web-4.svg);
              }

.prod-grid-container .products-grid .product-unit-wrap {
      margin-bottom: 38px;
      cursor: pointer;
    }

.prod-grid-container .products-grid .product-unit-wrap .customize-link {
        display: block;
        margin-left: 5px;
        width: 100%;
        text-align: left;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        opacity: 1; /* Link must now stay */
        transition: opacity 0.25s linear, -webkit-text-decoration-color 0.25s linear;
        transition: opacity 0.25s linear, text-decoration-color 0.25s linear;
        transition: opacity 0.25s linear, text-decoration-color 0.25s linear, -webkit-text-decoration-color 0.25s linear;
        text-decoration: underline;
        -webkit-text-decoration-color: transparent;
                text-decoration-color: transparent
      }

.prod-grid-container .products-grid .product-unit-wrap .customize-link:hover {
          -webkit-text-decoration-color: #ff6b00;
                  text-decoration-color: #ff6b00;
        }

.prod-grid-container .products-grid .product-unit-wrap:hover .customize-link {
          opacity: 1;
        }

.prod-grid-container.some-class-that-i-dont-know-yet .products-grid .product-unit::before {
    display: block;
  }

.school-picker-background,
.team-picker-background {
  background-color: #f7f7f4;
  background-image: url(/wp-content/themes/nokona-2019/img/generator-tile-texture.jpg);
  margin-bottom: 38px;
  padding-top: 65px;
  position: relative
}

@media (max-width: 600px) {

.school-picker-background,
.team-picker-background {
    overflow: visible
}
  }

.school-picker-background::after,
  .school-picker-background::before,
  .team-picker-background::after,
  .team-picker-background::before {
    content: "";
    position: absolute;
    top: calc(100% - 3.875vw);
    width: 60%;
    height: 3.875vw;
    background: #fff;
  }

.school-picker-background::before, .team-picker-background::before {
    left: 0;
    transform-origin: left top;
    transform: rotate(4.35deg);
    z-index: 1;
  }

.school-picker-background::after, .team-picker-background::after {
    right: 0;
    transform-origin: right top;
    transform: rotate(-4.35deg);
  }

.team-picker-background {
  padding-bottom: 92px;
}

.school-picker-container,
.team-picker-container {
  text-align: center;
}

.school-picker-container .prompt-text, .team-picker-container .prompt-text {
    font: normal 28px/120% "Campton", sans-serif;
    text-transform: uppercase;
    margin-bottom: 32px;
  }

/*******************************************
 TEAM LIST
 *******************************************/

.team-list-wrapper {
  max-width: 766px;
  margin: auto;
}

.team-options-list {
  font: 18px/194% "Campton", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff6b00;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  cursor: default;
}

.team-option,
.team-option-ps {
  color: black;
  position: relative;
  display: flex;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer
}

.team-option.selected, .team-option-ps.selected {
    color: #ff6b00;
    font-weight: bold;
    transform: scaleY(1.13) translateY(0.92px);
    transform-origin: bottom
  }

.team-option.selected::before, .team-option-ps.selected::before {
      content: "";
      position: absolute;
      animation: triangle-grow 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      top: -1px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 6px 7px 0 7px;
      border-color: #ff6b00 transparent transparent transparent;
    }

/*******************************************
 COLLEGE MAP
 *******************************************/

.usa-map-container {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}

.usa-map {
  padding-top: 70.27%;
  background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/usa-map.png);
  margin-bottom: 58px;
  position: relative
}

@media (max-width: 600px) {

.usa-map {
    display: none
}
  }

.school-primary {
  width: 14px;
  height: 14px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 0;
  margin: -7px 0 0 -7px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.53333)
}

.school-primary.selected,
  .school-primary:hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

.school-primary:hover {
    cursor: pointer;
    transform: scale(1.3);
    z-index: 3;
  }

.school-primary.selected {
    box-shadow: 0 0 17px 12px #fff;
    z-index: 2;
  }

.school-secondary {
  width: 6px;
  height: 6px;
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
}

/*******************************************
 CUSTOM SELECT BOX (for college block)
 *******************************************/

.select-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0 auto 35px;
  border: 1px solid #c6c6c6;
  padding: 9px 40px 9px 9px;
  overflow: visible;
  height: 33px;
  box-sizing: border-box;
  max-width: 100%;
  cursor: pointer;
  color: #6b6b6b;
  font: 14px/31px "Campton", sans-serif;
  background-color: #fff;
  transition: width 0.2s ease;
  z-index: 3
}

.select-wrapper::after,
  .select-wrapper::before {
    content: "";
    background-color: black;
    position: absolute;
    top: 11px;
    width: 2px;
    height: 8px;
    transition: transform 0.3s ease-in-out;
  }

.select-wrapper::before {
    transform: rotate(-45deg);
    right: 15px;
  }

.select-wrapper::after {
    transform: rotate(45deg);
    right: 10px;
  }

.select-wrapper.open::before {
      transition: transform 0.3s ease-in-out;
      transform: rotate(-135deg);
    }

.select-wrapper.open::after {
      transition: transform 0.3s ease-in-out;
      transform: rotate(135deg);
    }

.generated-belts-container .select-wrapper {
    margin-top: 35px;
    margin-bottom: 10px;
  }

@media (max-width: 1020px) {

.select-wrapper {
    max-width: calc(100% - 3.912vw)
}
  }

@media (max-width: 400px) {

.select-wrapper {
    width: 75%;
    margin-left: auto;
    margin-right: auto
}
  }

.select-drop-down {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: -999em;
  top: 31px;
  min-width: 100%;
  max-width: 100vw;
  border: 1px solid #c6c6c6;
  background-color: #fff;
  overflow: hidden;
  transform: translate(-50%, -20px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease
}

.select-drop-down.use-scroll {
    max-height: 420px;
    overflow-y: scroll;
    scroll-behavior: smooth
  }

@media (max-width: 600px) {

.select-drop-down.use-scroll {
      max-height: 64vw
  }
    }

@media (max-width: 400px) {

.select-drop-down.use-scroll {
      max-height: 73vw
  }
    }

.select-drop-down.expanded {
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 1;
  }

@media (max-width: 400px) {

.select-drop-down {
    width: calc(100vw - 32px)
}
  }

.select-drop-down .school-option {
    height: 40px;
    line-height: 40px;
    padding: 0 9px;
    white-space: nowrap;
    text-align: left;
    position: relative;
  }

.select-drop-down .school-option strong {
      text-transform: uppercase;
    }

.select-drop-down .school-option .school-colors {
      text-transform: lowercase;
      white-space: nowrap;
    }

@media (max-width: 600px) {
  .select-drop-down .school-option {
      background-color: #fff
  }
    }

@media (max-width: 400px) {
  .select-drop-down .school-option {
      white-space: nowrap;
      text-align: left;
      position: relative
  }
      .select-drop-down .school-option::before {
        position: absolute;
        content: "";
        height: 100%;
        width: 9px;
        top: 0px;
        left: 0px;
        background: linear-gradient(to right, #fff, rgba(255,255,255,0));
      }
      .select-drop-down .school-option::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 9px;
        top: 0px;
        right: 0px;
        background: linear-gradient(to left, #fff, rgba(255,255,255,0));
      }
        .select-drop-down .school-option:last-child::after {
          display: none;
        }
    }

.select-drop-down .school-option.selected {
      background-color: #ff6b00;
      color: white;
    }

.select-drop-down .school-option:hover {
      background-color: #c6c6c6;
      color: #000;
    }

.psuedo-block-seperator {
  width: 100%;
  max-width: 680px;
  margin: auto;
}

.psuedo-block-seperator .personalize-info {
    width: 100%;
    padding-top: 47.82%;
    background-image: url(/wp-content/themes/nokona-2019/img/personalize-info.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

.selected-school {
  line-height: 1em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  max-width: 100%
}

@media (max-width: 400px) {
    .selected-school .school-colors {
      display: none;
    }
  }

@media (max-width: 600px) {

.selected-school {
    overflow-x: hidden
}
  }

.generated-belts-colors {
  margin: 50px auto 20px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.generated-belts-colors div {
    width: 40%;
    padding-top: 40%;
    border-radius: 50%;
  }

.pro-team-belts-container {
  margin-top: 40px;
}

.color-play-iframe {
  width: 100%;
  display: block;
}

.after-product-unit {
  width: 100%;
  text-align: left;
}

.after-product-unit a {
    color: #ff6b00;
    transition: color 0.25s linear, -webkit-text-decoration-color 0.25s linear;
    transition: color 0.25s linear, text-decoration-color 0.25s linear;
    transition: color 0.25s linear, text-decoration-color 0.25s linear, -webkit-text-decoration-color 0.25s linear;
    font: bold 12px/175% "Campton", sans-serif;
    letter-spacing: 0.09em;
    text-decoration: underline;
    -webkit-text-decoration-color: transparent;
            text-decoration-color: transparent
  }

.after-product-unit a:hover {
      -webkit-text-decoration-color: #ff6b00;
              text-decoration-color: #ff6b00;
    }

.team-picker-page {
  animation: reload-belts 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.team-picker-page .product-details {
    margin-top: 2px !important;
  }

.team-picker-page .product-details .price {
      font-weight: 400;
    }

.select-drop-down.use-scroll {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  scrollbar-width: thin;
}

/* This class controls what elements have the new fancy scrollbar CSS */

.layout-scrollbar-vertical {
  scrollbar-color: black #e6e6e6;
}

.layout-scrollbar-vertical::-webkit-scrollbar {
  height: auto;
  width: 4px;
}

.layout-scrollbar-vertical::-webkit-scrollbar-track {
  background-color: #e6e6e6;
  border-radius: 2px;
  /* margin-left: 100px;
  margin-right: 100px;
  @media (max-width: $large-width) {
    margin-left: 9.52vw;
    margin-right: 9.52vw;
  } */
}

.layout-scrollbar-vertical::-webkit-scrollbar-thumb {
  background-color: rgb(0, 0, 0);
  border-radius: 2px;
}

.layout-scrollbar-vertical::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.7);
}

.layout-scrollbar-vertical::-webkit-scrollbar-thumb:vertical {
  min-height: 1.5rem;
}

.layout-scrollbar-vertical::-webkit-scrollbar-thumb:horizontal {
  min-width: 1.5rem;
}

@keyframes reload-belts {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes triangle-grow {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

.home-banner-block {
  width: 100%;
  background-color: #ff6b00;
  font: 500 12px/120% "Campton", sans-serif;
  padding: 13px;
  color: #fff;
  text-transform: uppercase;
  box-sizing: border-box
}

@media (max-width: 600px) {

.home-banner-block {
      padding-top: 25px
}
  }

.banner-message {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.banner-message p,
  .banner-message ul,
  .banner-message ol {
    margin-bottom: 1em
  }

.banner-message p:last-child, .banner-message ul:last-child, .banner-message ol:last-child {
      margin-bottom: 0;
    }

.single-post-content,
.blog-main {
  padding-top: 24px;
  padding-bottom: 40px;
}

.single-post-content > :not(.block-section), .blog-main > :not(.block-section) {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto
  }

@media (max-width: 1300px) {
  .single-post-content > :not(.block-section), .blog-main > :not(.block-section) {
      margin-left: 12px;
      margin-right: 12px
  }
    }

.single-post-content h2:not(.block-section), .blog-main h2:not(.block-section) {
    font: bold 20px/120% "Campton", sans-serif !important;
    letter-spacing: 0.74px;
  }

.single-post-content .large-header-style, .blog-main .large-header-style {
    padding: 0
  }

@media (max-width: 600px) {
  .single-post-content .large-header-style, .blog-main .large-header-style {
      font: 8vw/108% "EvelethClean", sans-serif
  }
    }

.blog-wrapper .blog-bar {
  padding-top: 24px;
}

.blog-main .read-more:after {
    content: " >";
  }

.blog-main .blog-post {
    overflow: hidden;
  }

.blog-main .blog-post img {
      float: right;
      margin: 0 0 10px 10px;
    }

.blog-main .nav-links {
    font-size: 1.2em;
    margin-bottom: 40px;
  }

.blog-main .page-numbers {
    display: inline-block;
    margin: 0 5px;
  }

.blog-main .prev {
    display: inline-block;
    margin-right: 10px
  }

.blog-main .prev.placeholder {
      display: none;
    }

.blog-main .next {
    display: inline-block;
    margin-left: 10px
  }

.blog-main .next.placeholder {
      display: none;
    }

.mongo-hero {
  position: relative;
  display: block;
}

.mongo-hero .mongo-bg-image {
    width: 100%;
    height: calc(100vh - 187px);
    -o-object-fit: cover;
       object-fit: cover;
    display: block
  }

@media (max-width: 900px) {

  .mongo-hero .mongo-bg-image {
      height: calc(100vh - 75px)
  }
    }

@media (max-width: 600px) {

  .mongo-hero .mongo-bg-image {
      height: calc(100vh - 43px)
  }
    }

.mongo-hero .shadow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0.64;
    mix-blend-mode: multiply;
  }

.mongo-hero .image-container {
    position: absolute;
    left: calc(50% - 500px);
    top: 10%;
    width: 1000px;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
  }

@media (max-width: 1060px) {

  .mongo-hero .image-container {
      left: 2.83%;
      width: 94.34%
  }
    }

@media (max-width: 600px) {

  .mongo-hero .image-container {
      left: 5%;
      width: 90%
  }
    }

.mongo-hero .mongo-overlay-image {
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: 100%;
  }

.mongo-hero-block.sizer-ol-img .image-container {
    position: relative;
    top: auto;
    top: initial;
    left: auto;
    left: initial;
    padding: min(max(36px, 10.4vw), 78px) 24px;
    box-sizing: border-box;
    width: 100%;
  }

.mongo-hero-block.sizer-ol-img .image-container img {
      max-width: 100%;
    }

.mongo-hero-block.sizer-ol-img .mongo-bg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover
  }

@media (max-width: 900px) {
  .mongo-hero-block.sizer-ol-img .mongo-bg-image {
      height: 100%
  }
    }

@media (max-width: 600px) {
  .mongo-hero-block.sizer-ol-img .mongo-bg-image {
      height: 100%
  }
    }

.product-collection-block .full {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 50px
  }

@media (max-width: 750px) {
  .product-collection-block .full {
      justify-content: center
  }
    }

@media (max-width: 600px) {
  .product-collection-block .full {
      padding: 15px 20px
  }
    }

.product-collection-block .full.center-items {
      justify-content: center;
    }

.product-collection-block .product-wrapper {
    margin-bottom: 67px
  }

@media (max-width: 4800px) {
  .product-collection-block .product-wrapper {
      width: 10%
  }
    }

@media (max-width: 4330px) {
  .product-collection-block .product-wrapper {
      width: 11.1111%
  }
    }

@media (max-width: 3860px) {
  .product-collection-block .product-wrapper {
      width: 12.5%
  }
    }

@media (max-width: 3390px) {
  .product-collection-block .product-wrapper {
      width: 14.2857%
  }
    }

@media (max-width: 2920px) {
  .product-collection-block .product-wrapper {
      width: 16.6666%
  }
    }

@media (max-width: 2450px) {
  .product-collection-block .product-wrapper {
      width: 20%
  }
    }

@media (max-width: 1980px) {
  .product-collection-block .product-wrapper {
      width: 25%
  }
    }

@media (max-width: 1510px) {
  .product-collection-block .product-wrapper {
      width: 33.3333%
  }
    }

@media (max-width: 1040px) {
  .product-collection-block .product-wrapper {
      width: 50%
  }
    }

@media (max-width: 750px) {
  .product-collection-block .product-wrapper {
      width: 100%;
      max-width: 470px
  }
    }

.product-collection-block .product-wrapper .product-image {
      display: block;
      position: relative;
      padding-top: 91.4923%;
      margin: 0 4.25532% 16px;
      background: no-repeat center/contain;
      border-bottom: 1px solid #000;
    }

:is(.edgex, .dark-body, .dark-theme) .product-collection-block .product-wrapper .product-image {
        border-bottom-color: #fff;
      }

.product-collection-block .product-wrapper .product-image img {
        transition: opacity 0.2s linear;
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
           object-fit: contain;
        -o-object-position: center;
           object-position: center;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
      }

.product-collection-block .product-wrapper .product-image::before {
        z-index: 2;
        position: absolute;
        font: 500 13px/100% "Campton", sans-serif;
        letter-spacing: 0.02em;
        color: #4d4d4d;
        top: 10px;
        left: 10px;
        text-transform: uppercase;
      }

.product-collection-block .product-wrapper .product-image.mode-0 .sold-message,
      .product-collection-block .product-wrapper .product-image.mode-2 .coming-soon-message {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 42.97872%;
      }

.product-collection-block .product-wrapper .product-image.mode-0 .sold-message .background,
        .product-collection-block .product-wrapper .product-image.mode-0 .sold-message .border,
        .product-collection-block .product-wrapper .product-image.mode-2 .coming-soon-message .background,
        .product-collection-block .product-wrapper .product-image.mode-2 .coming-soon-message .border {
          opacity: 0.91;
        }

.product-collection-block .product-wrapper .product-image.mode-0 .sold-message .border, .product-collection-block .product-wrapper .product-image.mode-2 .coming-soon-message .border {
          fill: none;
          stroke: #fff;
          stroke-miterlimit: 10;
          stroke-width: 1.08px;
        }

.product-collection-block .product-wrapper .product-image.mode-0 .sold-message .text {
          font: 300 20px/100% "EvelethClean", sans-serif;
          fill: #fff;
          letter-spacing: 0.21em;
        }

.product-collection-block .product-wrapper .product-image.mode-2 .coming-soon-message .text {
          font: 300 17px/100% "EvelethClean", sans-serif;
          fill: #fff;
          letter-spacing: 0.21em;
        }

.product-collection-block .product-wrapper .product-image.mode-1:hover .main-image {
      opacity: 0;
    }

.product-collection-block .product-wrapper .product-title {
      display: block;
      margin: 0 4.25532%;
      color: #000;
      text-align: left;
      font: 500 14.4px/128.5515% "Campton", sans-serif;
      letter-spacing: 0.02em;
    }

:is(.edgex, .dark-body, .dark-theme) .product-collection-block .product-wrapper .product-title {
        color: #fff;
      }

.product-collection-block .product-wrapper .product-title .product-price {
        color: #808080;
      }

.product-collection-block .product-wrapper .lace-options {
      padding-bottom: 10px;
      margin-top: 8px;
      margin-left: 4.25532%;
      margin-right: 4.25532%;
    }

.product-collection-block .product-wrapper .lace-options .options {
        display: flex;
        margin-top: 5px;
        flex-wrap: wrap;
      }

.product-collection-block .product-wrapper .lace-options .options .color {
          width: 10px;
          height: 10px;
          margin-right: 5px;
          margin-bottom: 5px;
          background-size: cover;
          border-radius: 50%;
        }

.full-image-block .full {
    position: relative;
  }

.full-image-block .full :is(img, video) {
      display: block;
      width: 100%
    }

@media (max-width: 600px) {
      .full-image-block .full :is(img, video).desktop-media {
          display: none
      }
        }

@media (min-width: 601px) {
      .full-image-block .full :is(img, video).mobile-media {
          display: none
      }
        }

.full-image-block .full .linkie {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

.image-side-text-block .full {
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

.image-side-text-block .full .text-wrapper {
      width: 28.7037%;
      padding-top: 75px;
      font-size: 30px
    }

@media (max-width: 1530px) and (min-width: 1401px) {

    .image-side-text-block .full .text-wrapper {
        margin-left: calc(765px - 50vw)
    }
      }

@media (max-width: 1400px) and (min-width: 1021px) {

    .image-side-text-block .full .text-wrapper {
        margin-left: 65px
    }
      }

@media (max-width: 1020px) and (min-width: 751px) {

    .image-side-text-block .full .text-wrapper {
        margin-left: 6.5vw;
        font-size: 3vw
    }
      }

@media (max-width: 750px) {

    .image-side-text-block .full .text-wrapper {
        width: auto;
        width: initial;
        margin: 0 24px
    }
      }

@media (max-width: 400px) {

    .image-side-text-block .full .text-wrapper {
        font-size: 7.5vw
    }
      }

.image-side-text-block .full .text-wrapper .title {
        font: 700 1em/120% "EvelethClean", sans-serif;
        text-transform: uppercase;
      }

.image-side-text-block .full .text-wrapper .subtitle {
        font: 300 1em/120% "EvelethClean", sans-serif;
        text-transform: uppercase;
        margin-bottom: 1em;
      }

.image-side-text-block .full .text-wrapper .text {
        font: 14px/150% "Campton", sans-serif;
        letter-spacing: 0.02em;
      }

.image-side-text-block .full .image-wrapper {
      width: 56.9444%
    }

@media (max-width: 750px) {
    .image-side-text-block .full .image-wrapper {
        width: 100%
    }
      }

.image-side-text-block .full .image-wrapper img {
        width: 100%;
      }

@media (min-width: 751px) {
        .image-side-text-block.free .full.right {
          flex-direction: row-reverse;
        }
      }

@media (max-width: 750px) {
    .image-side-text-block.free .full {
        flex-direction: column
    }
      }

@media (max-width: 750px) {
      .image-side-text-block.free .text-wrapper .text {
          margin-bottom: 42px
      }
        }

.image-side-text-block.anchored {
    margin-bottom: 0;
  }

.image-side-text-block.anchored .full {
      max-width: 1200px
    }

@media (min-width: 601px) {
        .image-side-text-block.anchored .full.right {
          flex-direction: row-reverse;
        }
      }

@media (max-width: 600px) {
    .image-side-text-block.anchored .full {
        flex-direction: column-reverse
    }
      }

.image-side-text-block.anchored .text-wrapper, .image-side-text-block.anchored .image-wrapper {
      width: 50%
    }

@media (max-width: 600px) {

    .image-side-text-block.anchored .text-wrapper, .image-side-text-block.anchored .image-wrapper {
        width: 100%
    }
      }

.image-side-text-block.anchored .text-wrapper {
      padding: 6.6666% 5.8333%;
      box-sizing: border-box;
      margin-left: 0;
      margin-right: 0;
      font-size: 32px;
    }

.image-side-text-block.anchored .text-wrapper .title {
        font-weight: 300;
        line-height: 1.25;
        text-transform: uppercase;
      }

.image-side-text-block.anchored .text-wrapper .subtitle {
        font: 700 0.5625em/1.2 "EvelethClean", sans-serif;
        text-transform: uppercase;
        margin-top: 1em;
        margin-bottom: 1em;
        letter-spacing: 0.09em;
      }

.image-side-text-block.anchored .text-wrapper .text {
        font: 0.5625em/150% "Campton", sans-serif
      }

@media (max-width: 600px) {
      .image-side-text-block.anchored .text-wrapper .text {
          margin-bottom: 32px
      }
        }

.image-side-text-block.anchored .image-wrapper {
      position: relative;
    }

.image-side-text-block.anchored .image-wrapper img {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

.image-side-text-block.anchored .image-wrapper::before {
        content: "";
        display: block;
        padding-top: 100%;
      }

.nokona-careers-block {
  margin-bottom: 100px;
  overflow: hidden;
  text-align: left;
}

.nokona-careers-block .career-list,
  .nokona-careers-block .application-form {
    max-width: 600px;
    margin: 0 auto
  }

@media (max-width: 1020px) {

  .nokona-careers-block .career-list,
  .nokona-careers-block .application-form {
      padding: 0 3.912vw
  }
    }

@media (max-width: 400px) {

  .nokona-careers-block .career-list,
  .nokona-careers-block .application-form {
      padding: 0 5.333vw
  }
    }

.nokona-careers-block .career-list {
    margin-bottom: 52px;
  }

.nokona-careers-block .position:not(:last-child) {
      margin-bottom: 28px;
    }

.nokona-careers-block .position p,
    .nokona-careers-block .position ul,
    .nokona-careers-block .position ol,
    .nokona-careers-block .position h2,
    .nokona-careers-block .position h3,
    .nokona-careers-block .position h4,
    .nokona-careers-block .position h5 {
      margin-bottom: 14px;
    }

.nokona-careers-block .position ul {
      list-style-position: inside;
    }

.nokona-careers-block .position .career-position-apply {
      text-transform: uppercase;
      font-weight: 700;
      -webkit-text-decoration-line: underline;
              text-decoration-line: underline;
      transition: -webkit-text-decoration-color 0.2s linear;
      transition: text-decoration-color 0.2s linear;
      transition: text-decoration-color 0.2s linear, -webkit-text-decoration-color 0.2s linear
    }

.nokona-careers-block .position .career-position-apply:not(:hover) {
        -webkit-text-decoration-color: rgba(0,0,0,0);
                text-decoration-color: rgba(0,0,0,0);
      }

.nokona-careers-block .application-form .form-title {
      margin-bottom: 14px;
    }

.nokona-careers-block .application-form p.empty {
      display: none;
    }

.nokona-careers-block .application-form .frm_form_field.form-field input[type="tel"]::-moz-placeholder {
      font: 500 12px/100% "Campton", sans-serif;
    }

.frm_form_field.form-field input[type="tel"]::-moz-placeholder {
      font: 500 12px/100% "Campton", sans-serif;
    }

.nokona-careers-block .application-form .frm_form_field.form-field input[type="tel"]::placeholder {
      font: 500 12px/100% "Campton", sans-serif;
    }

.nokona-careers-block .application-form .frm_icon_font.frm_upload_icon {
      margin-bottom: 13px;
    }

.nokona-careers-block .application-form .frm_dropzone .frm_upload_text {
        display: block;
      }

.nokona-careers-block .application-form .frm_dropzone .frm_upload_text button {
          float: none;
          float: initial;
        }

.nokona-careers-block .application-form .frm_dropzone .frm_small_text {
        display: block;
      }

.pro-player-items-block {
  background-color: #fff;
}

.pro-player-items-block .column {
    max-width: 952px;
    margin: 0 auto;
    padding: 100px 24px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

.pro-player-items-block .pro-player {
    display: flex;
    align-items: center;
    grid-gap: 26px;
    grid-gap: 26px;
    gap: 26px;
    margin-bottom: 150px
  }

@media (max-width: 700px) {

  .pro-player-items-block .pro-player {
      flex-direction: column;
      grid-gap: 45px;
      grid-gap: 45px;
      gap: 45px;
      margin-bottom: 21.428vw
  }
    }

.pro-player-items-block .pro-player:last-child {
      margin-bottom: 0;
    }

@media (min-width: 701px) {
    .pro-player-items-block .pro-player:nth-child(even) {
        flex-direction: row-reverse
    }
      }

.pro-player-items-block .pro-player.image-type-large {
      width: 100%;
      justify-content: space-between;
    }

@media (min-width: 701px) {
      .pro-player-items-block .pro-player.image-type-large .portion {
          align-items: flex-end
      }
        }

.pro-player-items-block .pro-player.image-type-small {
      width: 46%
    }

@media (max-width: 950px) {
    .pro-player-items-block .pro-player.image-type-small {
        width: 100%;
    }
        .pro-player-items-block .pro-player.image-type-small .portion {
          width: 100%;
        }
      }

.pro-player-items-block .portion {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

.pro-player-items-block .img-lrg {
    max-width: 430px;
    width: min(430px, max(calc((100vw - 700px) / 1.3333333333 + 205px), 205px));
    height: auto
  }

@media (max-width: 700px) {

  .pro-player-items-block .img-lrg {
      width: 100%
  }
    }

.pro-player-items-block .text {
    text-transform: uppercase;
    text-align: right;
    overflow: hidden;
    margin-bottom: 20px
  }

@media (max-width: 500px) {

  .pro-player-items-block .text {
      text-align: left
  }
    }

.pro-player-items-block .text h2 {
      display: inline;
      font-size: 34px;
      line-height: 120%
    }

@media (max-width: 500px) {

    .pro-player-items-block .text h2 {
        font-size: 6.8vw
    }
      }

.pro-player-items-block .text img {
      float: left;
      shape-outside: polygon(
        56.4% 3.2%,
        95.6% 31.6%,
        60.4% 91.2%,
        27.2% 95.2%,
        18% 60%,
        27.2% 26%
      );
      width: 250px;
      height: auto
    }

@media (max-width: 500px) {
    .pro-player-items-block .text img {
        float: none;
        float: initial;
        display: block;
        margin: 0 auto
    }
      }

.pro-player-items-block .text .name {
      color: #000;
    }

.pro-player-items-block .text .position {
      font-weight: 300;
    }

.pro-player-items-block .text .quote {
      font: 20px/120% "Campton", sans-serif;
      color: #000
    }

@media (max-width: 500px) {
    .pro-player-items-block .text .quote {
        font-size: 4vw
    }
      }

.pro-player-items-block .img-sml {
    margin-bottom: 20px;
    max-width: 100%;
    height: auto;
  }

.pro-player-items-block .prt-btn {
    display: block;
    background-color: #000;
    border: 2px solid #000;
    color: #fff;
    padding: 1em;
    width: -moz-fit-content;
    width: fit-content;
    min-width: min(420px, 100%);
    font: 600 28px/120% "EvelethClean", sans-serif;
    box-sizing: border-box;
    margin-bottom: 0.5em;
    transition: background-color 0.2s, color 0.2s
  }

.pro-player-items-block .prt-btn:hover {
      background-color: #fff;
      color: #000;
    }

@media (max-width: 500px) {

  .pro-player-items-block .prt-btn {
      font-size: 5.6vw
  }
    }

.showbelt-colorplay-block iframe {
    width: 100%;
    height: 660px;
  }

.product-list-services-block {
  padding: 42px 78px 108px
}

@media (max-width: 1020px) {

.product-list-services-block {
    padding-left: 7.8vw;
    padding-right: 7.8vw
}
  }

.product-list-services-block .products {
    display: flex;
    max-width: 926px;
    grid-gap: 2.94703%;
    grid-gap: 2.94703%;
    gap: 2.94703%;
    flex-wrap: wrap;
    margin: 0 auto
  }

@media (max-width: 750px) {

  .product-list-services-block .products {
      flex-direction: column
  }
    }

@media (max-width: 500px) {

  .product-list-services-block .products {
      width: 100%;
      left: 0
  }
    }

.product-list-services-block .product {
    width: 31.35135%;
    padding: 32px 32px 10px;
    margin-bottom: 28px;
    text-align: center;
    color: #000;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.22s linear;
    box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff
  }

.product-list-services-block .product:hover {
      cursor: pointer;
      box-shadow: 0 5px 24px 0 rgba(0, 0, 0, 0.4)
    }

@media (min-width: 600px) {
    .product-list-services-block .product:hover {
        border: none
    }
      }

@media (min-width: 600px) {

  .product-list-services-block .product {
      border: none
  }
    }

@media (max-width: 900px) and (min-width: 751px) {

  .product-list-services-block .product {
      padding-top: 20px;
      padding-left: 20px;
      padding-right: 20px
  }
    }

@media (max-width: 750px) and (min-width: 501px) {

  .product-list-services-block .product {
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      padding-bottom: 32px
  }
    }

@media (max-width: 500px) {

  .product-list-services-block .product {
      width: 100%;
      box-sizing: border-box;
      padding-bottom: 20px
  }
    }

@media (max-width: 750px) and (min-width: 501px) {

    .product-list-services-block .product .image {
        width: 30%
    }
      }

.product-list-services-block .product .image img {
        max-width: 100%;
        height: auto;
        display: block;
      }

.product-list-services-block .product .title {
      font: 700 30px/120% "EvelethClean", sans-serif;
      letter-spacing: 0.02em;
      padding: 0.5em 0
    }

@media (max-width: 1080px) and (min-width: 751px) {
    .product-list-services-block .product .title {
        font-size: 2.77777vw
    }
      }

@media (max-width: 750px) and (min-width: 501px) {
    .product-list-services-block .product .title {
        width: 100%;
        font-size: 21px
    }
      }

@media (max-width: 500px) {
    .product-list-services-block .product .title {
        font-size: 6vw
    }
      }

.product-list-services-block .product .subtitle {
      font: 300 18px/125% "EvelethClean", sans-serif;
      letter-spacing: 0.02em;
      text-transform: uppercase
    }

@media (max-width: 500px) {
    .product-list-services-block .product .subtitle {
        font-size: 3.6vw
    }
      }

.product-list-services-block .product .price {
      padding: 0.8em 0 18px;
      font: 700 17px/120% "EvelethClean", sans-serif;
      letter-spacing: 0.02em;
      color: inherit
    }

@media (max-width: 750px) and (min-width: 501px) {
    .product-list-services-block .product .price {
        padding-top: 1.5px;
        padding-left: 12px;
        font-size: 18px
    }
      }

@media (max-width: 500px) {
    .product-list-services-block .product .price {
        font-size: 3.6vw
    }
      }

.product-list-services-block .product .shop {
      font: 700 16px/100% "Campton", sans-serif;
      border: 2px solid #ff6b00;
      background-color: #ff6b00;
      color: #fff;
      transition: background-color 0.2s linear, color 0.2s linear;
      padding: 0.636em 20px 0.6em;
      margin-top: auto;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      text-transform: uppercase;
      text-align: center
    }

.product-list-services-block .product .shop:hover {
        color: #ff6b00;
        background-color: #fff;
      }

@media (max-width: 900px) and (min-width: 751px) {
    .product-list-services-block .product .shop {
        width: calc(100% - 20px)
    }
      }

@media (max-width: 750px) and (min-width: 501px) {
    .product-list-services-block .product .shop {
        max-width: 220px;
        margin-left: auto;
        left: 0;
        transform: none
    }
      }

@media (max-width: 500px) {
    .product-list-services-block .product .shop {
        left: 0;
        transform: none;
        width: auto;
        width: initial
    }
      }

.product-list-services-block .product .mobile-wrap {
      display: contents
    }

@media (max-width: 750px) and (min-width: 501px) {
    .product-list-services-block .product .mobile-wrap {
        display: flex;
        flex-wrap: wrap;
        width: 70%;
        padding-left: 16px;
        box-sizing: border-box;
        text-align: left
    }
      }

.product-list-services-block .services {
    max-width: 926px;
    margin: 24px auto 0;
    box-sizing: border-box;
    position: relative;
    border-radius: 80px;
    padding: 70px 60px 104px
  }

@media (max-width: 500px) {

  .product-list-services-block .services {
      padding: 60px 36px 80px;
      border-radius: 60px
  }
    }

@media (max-width: 400px) {

  .product-list-services-block .services {
      border-radius: 40px
  }
    }

.product-list-services-block .services::before {
      content: "";
      position: absolute;
      top: -1px;
      right: -1px;
      bottom: -1px;
      left: -1px;
      border: 3px solid #ff6b00;
      z-index: 0;
      border-radius: inherit;
    }

.product-list-services-block .services::after {
      content: "";
      position: absolute;
      top: 14px;
      right: 14px;
      bottom: 14px;
      left: 14px;
      background-color: #000;
      z-index: 0;
      border-radius: inherit;
      mix-blend-mode: multiply;
    }

.product-list-services-block .services > * {
      position: relative;
      z-index: 1;
    }

.product-list-services-block.bg-image .services::before {
      border-color: #fff;
      filter: drop-shadow(0 3px 7px rgba(0,0,0,0.73333));
    }

.product-list-services-block.bg-image .services::after {
      background-color: #482f1c;
    }

.product-list-services-block .services-title {
    font: 700 26px/120% "EvelethClean", sans-serif;
    letter-spacing: 0.07em;
    text-align: center;
    padding-bottom: 0.5em;
    text-transform: uppercase;
    color: #ff6b00
  }

@media (max-width: 500px) {

  .product-list-services-block .services-title {
      font-size: 5.2vw
  }
    }

.product-list-services-block .services-copy {
    font: 300 25px/120% "Campton", sans-serif;
    text-align: center;
    padding-bottom: 3em;
    color: #fff;
    max-width: 646px;
    margin: 0 auto
  }

@media (max-width: 500px) {
  .product-list-services-block .services-copy {
      font-size: 5vw
  }
    }

.product-list-services-block .services-table {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 9.8%;
    grid-gap: 9.8%;
    gap: 9.8%;
    justify-content: center;
    text-align: left
  }

@media (max-width: 750px) {
  .product-list-services-block .services-table {
      grid-gap: 0;
      grid-gap: 0;
      gap: 0;
      flex-direction: column
  }
    }

.product-list-services-block .services-table .service {
      width: 44%;
      max-width: 392px;
      color: #fff;
      padding-bottom: 50px
    }

@media (max-width: 750px) {

    .product-list-services-block .services-table .service {
        max-width: none;
        max-width: initial;
        width: auto;
        width: initial
    }
      }

.product-list-services-block .services-table .title,
    .product-list-services-block .services-table .price {
      font: 700 17px/120% "EvelethClean", sans-serif;
      letter-spacing: 0.07em;
      padding-bottom: 0.25em;
      text-transform: uppercase;
    }

.product-list-services-block .services-table .description {
      font: 300 14px/120% "Campton", sans-serif;
      transform: translateY(12px);
      opacity: 0;
      transition: all 0.6s ease-in-out
    }

.product-list-services-block .services-table .description.viewed {
        transform: translateY(0);
        opacity: 1;
      }

.services-steps-block {
  padding: 42px 52px 68px;
}

.services-steps-block .icon {
    background-color: #fff;
    width: 126px;
    height: 126px;
    margin: 0 auto;
    border-radius: 300px;
    position: relative;
    display: flex;
  }

.services-steps-block .icon svg {
      position: absolute;
      top: -1px;
      right: -1px;
      bottom: -1px;
      left: -1px;
    }

.services-steps-block .icon img {
      width: 125px;
      height: 125px;
      -o-object-fit: cover;
         object-fit: cover;
      display: block;
      position: relative;
      align-items: center;
      justify-content: center;
    }

.services-steps-block .title {
    font: 700 30px/120% "EvelethClean", sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding-bottom: 0.7em;
    padding-top: 0.4em;
    max-width: 650px;
    margin: 0 auto
  }

@media (max-width: 500px) {

  .services-steps-block .title {
      font-size: 6vw
  }
    }

.services-steps-block .step-child {
    max-width: 650px;
    margin: 22px auto 0;
    text-align: center;
  }

.services-steps-block .point {
    position: relative;
    width: 56px;
    height: 56px;
    background-color: #fff;
    border-radius: 300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.services-steps-block .point svg {
      position: absolute;
      top: -1px;
      left: -1px;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
    }

.services-steps-block .point .number {
      font: 900 40px/100% "EvelethClean", sans-serif;
      position: relative;
      top: 0.1em;
      transform: translateY(-10px);
      opacity: 0;
      transition: all 0.6s ease-in-out;
    }

.services-steps-block .step-child.viewed .point .number {
    transform: translateY(0);
    opacity: 1;
  }

.services-steps-block .copy {
    padding-top: 20px;
    font: 400 14px/130% "Campton", sans-serif;
  }

.services-steps-block .copy > p {
      text-align: center;
    }

.services-steps-block .cta-title {
    font: 300 28px/115% "Campton", sans-serif;
    text-transform: uppercase;
    margin: 0 auto;
    max-width: 650px;
    padding-top: 42px;
    padding-bottom: 18px
  }

@media (max-width: 500px) {

  .services-steps-block .cta-title {
      font-size: 6vw
  }
    }

.services-steps-block .cta-copy {
    margin: 0 auto;
    max-width: 800px;
    text-align: center;
    font: 300 14px/130% "Campton", sans-serif;
  }

.services-steps-block .cta-copy a[href] {
      color: #DC4D4A;
    }

.image-2-cta-block {
  position: relative;
  display: flex;
}

.image-2-cta-block .observe-intersection {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
  }

.image-2-cta-block .background-image {
    width: 0px;
  }

.image-2-cta-block .image-wrap {
    width: 100vw;
    height: 100%;
  }

.image-2-cta-block .image-wrap img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }

.image-2-cta-block .cta-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #000;
    padding: 40px;
    opacity: 0;
    transition: opacity 0s linear 5s;
    cursor: default;
    font-size: 100px
  }

@media (max-width: 1020px) {

  .image-2-cta-block .cta-content {
      font-size: 10vw
  }
    }

@media (max-width: 500px) {

  .image-2-cta-block .cta-content {
      font-size: 50px;
      padding: 18px
  }
    }

.image-2-cta-block.in-view .viewed ~ .cta-content {
    opacity: 1;
    transition: opacity 1s linear 0.7s;
  }

.image-2-cta-block .title {
    font: 700 0.58em/110% "EvelethClean", sans-serif;
    letter-spacing: 0.053em;
    color: #fff;
    cursor: pointer
  }

.image-2-cta-block .title.arrow {
      position: relative;
      margin-bottom: 0.8em
    }

.image-2-cta-block .title.arrow::after {
        content: "";
        position: absolute;
        top: calc(50% - 0.35em);
        left: calc(100% + 0.27586em);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0.310345em 0 0.310345em 0.37931em;
        border-color: transparent transparent transparent #fff;
      }

.image-2-cta-block.in-view .viewed ~ .cta-content .title.arrow::after {
    animation: arrow-hello 0.6s ease 2.3s 3 forwards;
  }

.image-2-cta-block .graphic {
    max-width: 2.9em;
    padding-bottom: 0.3em;
  }

.image-2-cta-block .graphic img {
      width: 100%;
      height: auto;
      display: block;
    }

@keyframes arrow-hello {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(40%);
  }
}

.background-descriptor {
  display: none;
}

body.wp-admin .background-descriptor {
    display: block;
  }

.background-descriptor-preview {
  padding: 16px;
  text-align: center;
}

[data-bg-image] .background-descriptor-preview {
    background: no-repeat center/100% 100%;
    background-image: var(--bg-image);
  }

[data-top-bg-color] .background-descriptor-preview {
    background-color: var(--top-bg-color);
  }

[data-bottom-bg-color] .background-descriptor-preview {
    background-color: transparent;
    background-color: initial;
    background-image: linear-gradient(to bottom, var(--top-bg-color), var(--bottom-bg-color));
  }

[data-dark-theme] .background-descriptor-preview {
    color: #fff;
  }

.background-descriptor-preview::after {
    content: '[Background Descriptor]';
  }

.background-descriptor-wrapper {
  background: no-repeat center/100% 100%;
  display: flex;
  flex-direction: column;
  color: #000
}

.background-descriptor-wrapper.dark-theme {
    color: #fff;
  }

.hero-carousel-block .carousel {
    position: relative;
  }

.hero-carousel-block .carousel-nav {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 3;
  }

.hero-carousel-block .carousel-nav-item {
    cursor: pointer;
    width: 30px;
    height: 30px;
    padding: 10px;
    box-sizing: border-box
  }

.hero-carousel-block .carousel-nav-item::after {
      content: "";
      display: block;
      background-color: #ff6b00;
      width: 10px;
      height: 10px;
      opacity: 0.5;
      transition: opacity 0.2s linear;
      border-radius: 100px;
    }

.hero-carousel-block .carousel-nav-item:hover::after,
    .hero-carousel-block .carousel-nav-item.is-active::after {
      opacity: 1;
    }

.hero-carousel-block .carousel-slides {
    position: relative;
  }

.hero-carousel-block .carousel-slide {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s linear;
    top: 0;
    left: 0;
    width: 100%
  }

.hero-carousel-block .carousel-slide.is-active {
      position: relative;
      z-index: 1;
      opacity: 1;
    }

.hero-carousel-block .carousel-slide.incoming {
      z-index: 2;
      opacity: 1;
    }

.hero-carousel-block .carousel-slide.from-left {
      animation: from-left 0.5s ease 0s forwards;
    }

.hero-carousel-block .carousel-slide.from-right {
      animation: from-right 0.5s ease 0s forwards;
    }

.hero-carousel-block .carousel-slide img {
      width: 100%;
      height: auto;
      display: block;
    }

@media (max-width: 600px) {
    .hero-carousel-block .carousel-slide .desktop-img {
        display: none
    }
      }

@media (min-width: 601px) {
    .hero-carousel-block .carousel-slide .mobile-img {
        display: none
    }
      }

.hero-carousel-block .linkie {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    z-index: 2;
  }

@keyframes from-left {
  from {
    transform: translateX(-20%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes from-right {
  from {
    transform: translateX(20%);
  }
  to {
    transform: translateX(0);
  }
}

.trading-cards-block {
  --_card-img-max-width: 400px;
  --_card_col-gap: 65px;
  --_max_cols: 3;
  display: flex;
  flex-wrap: wrap;
  grid-gap: min(123px, 12.3vw) var(--_card_col-gap);
  grid-gap: min(123px, 12.3vw) var(--_card_col-gap);
  gap: min(123px, 12.3vw) var(--_card_col-gap);
  justify-content: center;
  align-items: flex-start;
  padding: 20px clamp(24px, 42px, 8vw);
  /* set the max width of the container enough to fit the max columns*/
  max-width: calc((var(--_card-img-max-width) + var(--_card_col-gap)) * var(--_max_cols));
  margin-left: auto;
  margin-right: auto;

  /* Mobile styles */
}

.trading-cards-block .trading-card {
    display: flex;
    max-width: var(--_card-img-max-width);
    width: 100%;
    flex-direction: column;
    justify-content: flex-end;
  }

.trading-cards-block .trading-card-image-container {
    width: 100%;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

.trading-cards-block .trading-card-image {
    width: 100%;
    height: auto;
    display: block;
  }

.trading-cards-block .trading-card-text-bg-container {
    margin-top: 16px
  }

.trading-cards-block .trading-card-text-bg-container:not(:only-child) {
      flex-grow: 1;
    }

.trading-cards-block .trading-card-text-container {
    color: white;
    font-size: clamp(1.125rem, 1.5rem, 4.8vw);
    line-height: 1.375;
    max-width: min(var(--_card-img-max-width), 100vw);
    padding: 20px 20px 30px;
    margin: 0 auto;
    box-sizing: border-box;
  }

.trading-cards-block .trading-card-text {
    font-weight: 400;
    text-align: center;
    margin-bottom: 16px;
  }

.trading-cards-block .trading-card-name {
    font-family: "EvelethClean", sans-serif;
    font-weight: 800;
    font-size: clamp(1.125rem, 1.25rem, 4.8vw);
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.25px;
    margin: 0;
  }

@media (max-width: 800px) {
    .trading-cards-block .trading-cards-container {
      flex-direction: column;
      align-items: center;
    }
  }

@media (max-width: 600px) {
    .trading-cards-block .trading-card-text-bg-container {
      margin-top: 20px;
      margin: 20px -100px 0;
    }
  }

.showbelts-image-side-content-block .full h1,
    .showbelts-image-side-content-block .full h2,
    .showbelts-image-side-content-block .full h3,
    .showbelts-image-side-content-block .full h4,
    .showbelts-image-side-content-block .full h5,
    .showbelts-image-side-content-block .full h6 {
      margin: 0;
      padding: 0;
    }

.showbelts-image-side-content-block .full {
    display: flex;
    justify-content: center;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    grid-gap: clamp(75px, 10vw, 144px);
    grid-gap: clamp(75px, 10vw, 144px);
    gap: clamp(75px, 10vw, 144px);
    padding: 0 24px;
}

@media (min-width: 751px) {
      .showbelts-image-side-content-block .full.right {
        flex-direction: row-reverse;
      }
    }

@media (max-width: 750px) {
  .showbelts-image-side-content-block .full {
      grid-gap: 40px;
      grid-gap: 40px;
      gap: 40px;
      flex-direction: column
  }
    }

.showbelts-image-side-content-block .full .content-wrapper {
      padding-top: 34px;
      font-size: clamp(24px, 1.94vw, 28px)
    }

@media (max-width: 750px) {

    .showbelts-image-side-content-block .full .content-wrapper {
        padding-top: 0;
        align-self: center;
        width: auto;
        width: initial;
        margin: 0 24px
    }
      }

.showbelts-image-side-content-block .full .content-wrapper .title {
        font: 900 1em/148% "EvelethClean", sans-serif;
        text-transform: uppercase;
        margin-bottom: 18px;
      }

.showbelts-image-side-content-block .full .content-wrapper .text {
        font: 16px/150% "Campton", sans-serif;
        max-width: 402px;
        margin-bottom: 41px
      }

@media (max-width: 750px) {
      .showbelts-image-side-content-block .full .content-wrapper .text {
          font-size: 14px
      }
        }

.showbelts-image-side-content-block .full .content-wrapper .bullet-items {
        max-width: 480px;
        display: flex;
        flex-wrap: wrap;
        font-family: "Campton", sans-serif;
        margin-bottom: 26px
      }

@media (max-width: 750px) {
      .showbelts-image-side-content-block .full .content-wrapper .bullet-items {
          max-width: 300px
      }
        }

.showbelts-image-side-content-block .full .content-wrapper .bullet-items .bullet-item {
          display: flex;
          margin-bottom: 1px;
          align-items: center;
          margin-right: 19px
        }

@media (max-width: 750px) {
        .showbelts-image-side-content-block .full .content-wrapper .bullet-items .bullet-item {
            margin-bottom: 7px
        }
          }

.showbelts-image-side-content-block .full .content-wrapper .bullet-items .bullet-item img {
            width: 24px;
            margin-right: 6px;
          }

.showbelts-image-side-content-block .full .content-wrapper .bullet-items .bullet-item span {
            font-size: 14px;
            font-weight: 700;
            line-height: 139%;
            text-align: center;
          }

.showbelts-image-side-content-block .full .content-wrapper .btn {
        max-width: 480px;
        height: 40px;
        display: flex;
        justify-content: center;
        border: solid 1px #ff6b00;
        background: #ff6b00;
        font-size: clamp(14px, 1.11vw, 16px);
        text-transform: uppercase;
        line-height: 40px;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s ease
      }

.showbelts-image-side-content-block .full .content-wrapper .btn:hover {
          border-color: #ff6b00;
          background: #fff;
          color: #ff6b00;
        }

.showbelts-image-side-content-block .image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }

.showbelts-image-side-content-block .image-wrapper img {
      width: 100%;
      max-width: 440px;
    }

@media (max-width: 750px) {
  .showbelts-image-side-content-block .image-wrapper {
      align-self: center;
      width: auto;
      width: initial;
      margin: 0 24px
  }
    }

.showbelts-form-block .anchor {
    position: absolute;
    z-index: 0;
    margin-top: -180px
  }

@media (max-width: 750px) {
  .showbelts-form-block .anchor {
      margin-top: -50px
  }
    }

.showbelts-form-block .full h1,
    .showbelts-form-block .full h2,
    .showbelts-form-block .full h3,
    .showbelts-form-block .full h4,
    .showbelts-form-block .full h5,
    .showbelts-form-block .full h6 {
      margin: 0;
      padding: 0;
    }

.showbelts-form-block .full {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: "EvelethClean", sans-serif;
    font-weight: 900;
    padding: 0 10px;
}

.showbelts-form-block .full .header {
      text-transform: uppercase;
      margin-bottom: 32px
    }

@media (max-width: 750px) {

    .showbelts-form-block .full .header {
        line-height: 148%;
        margin-bottom: 18px
    }
      }

.showbelts-form-block .full .header .heading {
        font-size: clamp(48px, 4.44vw, 64px);
        line-height: 148%;
        margin: 0;
      }

.showbelts-form-block .full .header .subheading {
        font-size: clamp(24px, 1.94vw, 28px);
        line-height: 100%
      }

@media (max-width: 750px) {
      .showbelts-form-block .full .header .subheading {
          line-height: 148%
      }
        }

.showbelts-form-block .full .header .subheading span {
          font-size: clamp(24px, 2.22vw, 32px);
          color: #ff6b00;
        }

.showbelts-form-block .full .description {
      margin: 0 auto 18px auto;
      display: block;
      max-width: 686px;
      font-size: 16px;
      font-weight: 400;
      font-family: "Campton", sans-serif;
      line-height: 20px;
    }

.showbelts-form-block .full .form-container {
      display: flex;
      padding: 0 10px
    }

@media (max-width: 750px) {
    .showbelts-form-block .full .form-container {
        flex-direction: column
    }
      }

.showbelts-form-block .full .form-container .form-image-container {
        text-transform: uppercase;
        width: 33.66%;
        max-width: 287px;
        margin-right: 73px;
        font-family: "EvelethClean", sans-serif;
        text-align: left
      }

@media (max-width: 750px) {
      .showbelts-form-block .full .form-container .form-image-container {
          width: 100%;
          max-width: none;
          margin-right: 0;
          margin-bottom: 30px;
          text-align: center
      }
        }

.showbelts-form-block .full .form-container .form-image-container img {
          width: 100%
        }

@media (max-width: 750px) {
        .showbelts-form-block .full .form-container .form-image-container img {
            display: none
        }
          }

.showbelts-form-block .full .form-container .form-image-container .heading {
          display: block;
          font-size: 24px;
          font-weight: 900;
          line-height: 148%;
        }

.showbelts-form-block .full .form-container .form-image-container .email,
        .showbelts-form-block .full .form-container .form-image-container .phone {
          font-weight: 300;
          display: block;
          font-size: 14px;
          line-height: 148%;
        }

@media (max-width: 750px) {
          .showbelts-form-block .full .form-container .form-image-container .email {
            margin-bottom: 12px;
          }
        }

.showbelts-form-block .full .form-container .form-shortcode {
        width: 66.44%;
        padding-top: 63px
      }

@media (max-width: 750px) {
      .showbelts-form-block .full .form-container .form-shortcode {
          padding-top: 0;
          width: 100%;
          max-width: none
      }
        }

.full-image-w-gif-header .full {
    position: relative;
  }

.full-image-w-gif-header .full h1,
    .full-image-w-gif-header .full h2,
    .full-image-w-gif-header .full h3,
    .full-image-w-gif-header .full h4,
    .full-image-w-gif-header .full h5,
    .full-image-w-gif-header .full h6 {
      margin: 0;
      padding: 0;
    }

.full-image-w-gif-header .full img {
      display: block;
      width: 100%
    }

@media (max-width: 600px) {
      .full-image-w-gif-header .full img.desktop-img {
          display: none
      }
        }

@media (min-width: 601px) {
      .full-image-w-gif-header .full img.mobile-img {
          display: none
      }
        }

.full-image-w-gif-header .full .linkie {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

.media-list-block {
  text-align: left;
}

.media-list-block .content {
    max-width: 1456px;
    margin-left: auto;
    margin-right: auto;
    padding: 3.7775%;
  }

.media-list-block .list-title {
    color: #ff6b00;
    font: 600 min(48px, max(4.8vw, 26px)) / 1 "Campton", sans-serif;
    padding-bottom: 0.6em;
    text-transform: uppercase;
  }

.media-list-block .media-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    grid-row-gap: min(3.7775vw, 56px);
    grid-row-gap: min(3.7775vw, 56px);
    row-gap: min(3.7775vw, 56px)
  }

@media (max-width: 1020px) {

  .media-list-block .media-list {
      grid-row-gap: 4.5vw;
      grid-row-gap: 4.5vw;
      row-gap: 4.5vw
  }
    }

@media (max-width: 750px) {

  .media-list-block .media-list {
      grid-row-gap: 5.5vw;
      grid-row-gap: 5.5vw;
      row-gap: 5.5vw
  }
    }

@media (max-width: 450px) {

  .media-list-block .media-list {
      flex-direction: column;
      align-items: center
  }
    }

.media-list-block .media-list .media-item {
      width: 23.62637%;
      max-width: 344px;
      display: block;
      color: #000;
      background-color: #fff;
      transition: background-color 0.2s linear, color 0.2s linear;
      border-radius: 0 0 5% 5%;
      font: 400 16px/1.25 "Campton", sans-serif;
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.35)
    }

@media (max-width: 1020px) {

    .media-list-block .media-list .media-item {
        width: 31.62637%
    }
      }

@media (max-width: 750px) {

    .media-list-block .media-list .media-item {
        width: 47.62637%
    }
      }

@media (max-width: 450px) {

    .media-list-block .media-list .media-item {
        width: 100%
    }
      }

.media-list-block .media-list .media-item:hover {
        background-color: #ff6b00;
        color: #fff;
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
      }

.media-list-block .media-list .media-item:hover .media-runtime {
          color: #fff;
        }

.media-list-block .media-list .media-item.dummy.dummy {
        padding: 0;
        align-self: flex-start;
      }

.media-list-block .media-list .media-item.type-image .media-runtime {
          display: none;
        }

.media-list-block .media-list .media-item.type-image .media-description {
          padding-top: 20px;
        }

.media-list-block .media-list .media-image {
      width: 100%;
      aspect-ratio: 100 / 92;
      position: relative;
      overflow: hidden;
    }

.media-list-block .media-list .media-image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        display: block;
      }

.media-list-block .media-list .media-image::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        aspect-ratio: 1;
        aspect-ratio: 1;
        width: 21.51163%;
        background-color: #ff6b00;
        border-top-right-radius: 16%;
        transform: translateY(21%);
      }

.media-list-block .media-list .media-image::after {
        content: "";
        position: absolute;
        width: 7.26744%;
        aspect-ratio: 25 / 26;
        background: url(/wp-content/themes/nokona-2019/img/media-play.svg) no-repeat center/contain;
        left: 7.89535%;
        bottom: 6.94186%;
      }

.media-list-block .media-list .media-runtime,
    .media-list-block .media-list .media-description {
      padding: 0 6.3953%;
      font-weight: 500;
    }

.media-list-block .media-list .media-runtime {
      padding-top: 1em;
      color: #ff6b00;
      transition: color 0.2s linear;
    }

.media-list-block .media-list .media-description {
      padding-top: 0.7em;
      padding-bottom: 10%;
      margin-bottom: 0;
    }

#media-list-block-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: none;
  isolation: isolate;
  align-items: center;
  color: #fff
}

#media-list-block-popup.show {
    display: flex;
    justify-content: center;
    align-items: center;
  }

#media-list-block-popup .media-popup-shadow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }

#media-list-block-popup .media-popup-content {
    background-color: #000;
    position: relative;
    width: 100%;
    max-width: 1440px;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    overflow: auto
  }

#media-list-block-popup .media-popup-content.media-padding {
      padding: 15px;
    }

#media-list-block-popup .media-popup-content .media-wrapper {
      margin-left: auto;
      margin-right: auto;
      position: relative;
      max-width: 1440px;
      display: flex
    }

#media-list-block-popup .media-popup-content .media-wrapper.started .media-image {
          display: none;
        }

#media-list-block-popup .media-popup-content .media-wrapper.playing .media-controls .media-play::after {
          background-image: url(/wp-content/themes/nokona-2019/img/media-pause.svg);
        }

#media-list-block-popup .media-popup-content .media-wrapper.playing:not(.hover) .media-controls {
          opacity: 0;
        }

#media-list-block-popup .media-popup-content .media-video {
      width: 100%;
      position: relative;
      overflow: hidden;
      background-color: #000;
      order: 2;
      display: flex;
      align-items: center;
      justify-content: center;
    }

#media-list-block-popup .media-popup-content .media-video video {
        width: 100%;
        height: auto;
        display: block;
      }

#media-list-block-popup .media-popup-content .media-video iframe {
        aspect-ratio: 16 / 9;
        flex-grow: 1;
      }

#media-list-block-popup .media-popup-content .media-image {
      position: absolute;
      z-index: 3;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
    }

#media-list-block-popup .media-popup-content .media-image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        display: block;
      }

#media-list-block-popup .media-popup-content .media-controls {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transition: opacity 0.2s linear;
      z-index: 99;
    }

#media-list-block-popup .media-popup-content .media-controls .media-play {
        position: absolute;
        background-color: rgba(255,255,255,0);
        padding: 0;
        margin: 0;
        border: none;
        cursor: pointer;
        width: 50%;
        height: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.7))
      }

#media-list-block-popup .media-popup-content .media-controls .media-play::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: max(17%, 42px);
          aspect-ratio: 25 / 26;
          background: url(/wp-content/themes/nokona-2019/img/media-play.svg) no-repeat center/contain;
        }

#media-list-block-popup .media-popup-content .hide-information {
      display: none
    }

#media-list-block-popup .media-popup-content .hide-information.media-information {
        display: block;
        padding: 20px;

        /* this will ensure the longer descriptions have a clear end and also don't get covered by the Chat widget*/
        padding-bottom: 100px;
      }

#media-list-block-popup .media-popup-content .hide-information.media-information .media-description {
          font-size: 18px;
          margin-top: 10px;
        }

#media-list-block-popup .media-popup-content .media-options {
      width: 100%;
      max-width: 1456px;
      display: flex;
      justify-content: space-between;
      padding-right: calc(50% - 569px);
      box-sizing: border-box;
      padding-top: 40px;
    }

#media-list-block-popup .media-popup-content .media-options .close-popup {
        border: none;
        background-color: rgba(255,255,255,0);
        padding: 0;
        margin: 0;
        cursor: pointer;
        font: 400 16px/1.2 "Campton", sans-serif;
        color: #fff
      }

@media (max-width: 400px) {

      #media-list-block-popup .media-popup-content .media-options .close-popup {
          font-size: 12px
      }
        }

#media-list-block-popup .media-popup-content .media-options .close-popup::before {
          content: "< ";
          color: #ff6b00;
        }

#media-list-block-popup .media-popup-content .media-share {
      display: flex;
      grid-gap: 0.2em;
      grid-gap: 0.2em;
      gap: 0.2em;
      align-items: center;
    }

#media-list-block-popup .media-popup-content .media-share span {
        margin-right: 1em;
      }

#media-list-block-popup .media-popup-content .media-share a[href] {
        display: inline-block;
        width: 30px;
        aspect-ratio: 1;
        font-size: 0;
        background: #fff;
        transition: background-color 0.2s linear;
        -webkit-mask: var(--mask-img) no-repeat center/contain;
        mask: var(--mask-img) no-repeat center/contain
      }

#media-list-block-popup .media-popup-content .media-share a[href]:hover {
          background-color: #ff6b00;
        }

#media-list-block-popup .media-popup-content .media-title {
      font-size: min(36px, 7.5vw);
      line-height: 1;
    }

#media-list-block-popup .media-popup-content .orange-title {
      color: #ff6b00;
    }

#media-list-block-popup .media-popup-inner {
    width: 100%;
    max-width: 1440px;
    text-wrap: balance;
  }

#media-list-block-popup .exit-btn {
    position: absolute;
    z-index: 9999;
    top: 16px;
    right: 16px;
    width: 24px;
    aspect-ratio: 1;
    background-color: rgba(255,255,255,0);
    padding: 0;
    margin: 0;
    border: none;
    cursor: pointer;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 1))
  }

#media-list-block-popup .exit-btn::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      -webkit-mask: url(/wp-content/themes/nokona-2019/img/close-grey.svg) no-repeat center/contain;
      mask: url(/wp-content/themes/nokona-2019/img/close-grey.svg) no-repeat center/contain;
      background-color: #fff;
    }

body.admin-bar #media-list-block-popup .exit-btn {
      top: 46px;
    }

#media-list-block-popup.type-external .media-image,
    #media-list-block-popup.type-external .media-controls {
      display: none;
    }

#media-list-block-popup.type-external .media-video {
      aspect-ratio: 16 / 9;
    }

#media-list-block-popup.type-image :is(.media-controls, .media-video) {
      display: none;
    }

#media-list-block-popup.type-image .media-image {
      position: static;
      width: 100%;
      height: auto;
      height: initial;
    }

#media-list-block-popup.type-image .media-image img {
        height: auto;
        -o-object-fit: initial;
           object-fit: initial;
      }

.mega-block {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  /* this is the color for the carousel nav and CTA buttons, configured per slide */
  --mb-overlay-color: #fff;
  /* how far along a slide is in its time to show. Value is 0-1 */
  --mb-slide-completion: 0;
  /* the size of the overlay content area at its max width */
  --mb-container-width: 1440px;
}

.mega-block .bar {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
  }

.mega-block .bar a {
      display: block;
      max-height: 100%;
    }

.mega-block .bar img {
      display: block;
      max-height: 100%;
      width: auto;
      outline: none;
    }

.mega-block .bar.img-stretch a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

.mega-block .bar.img-stretch img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

.mega-block .carousel-container {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
  }

.mega-block.single .carousel-container {
    justify-content: stretch;
  }

.mega-block {
  /* special styling for timed mega-blocks that auto-rotate */
}

/* Carousel track that holds all slides*/

.mega-block .carousel-track {
    display: flex; /* Place slides side by side */
    width: 100%; /* Default width - will expand based on slide count */
    height: 100%;
    transition: transform 0.3s ease; /* Smooth sliding animation */
  }

/* Individual slide styling*/

.mega-block .mega-slide {
    flex: 0 0 100%; /* Each slide takes full width, doesn't shrink */
    width: 100%;
    height: 100%;
    position: relative;
  }

.mega-block .grid-image-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }

.mega-block .grid-image-container video {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center
    }

.mega-block .grid-image-container video.clip,
      .mega-block .grid-image-container video.mobile-clip {
        min-height: 100%;
        width: auto;
        background-size: auto 100%;
      }

.mega-block .grid-image-container video.align-top,
      .mega-block .grid-image-container video.align-mobile-top {
        -o-object-position: center top;
           object-position: center top;
        background-position: center top;
      }

.mega-block .grid-image-container video.align-center,
      .mega-block .grid-image-container video.align-mobile-center {
        -o-object-position: center center;
           object-position: center center;
        background-position: center center;
      }

.mega-block .grid-image-container video.align-bottom,
      .mega-block .grid-image-container video.align-mobile-bottom {
        -o-object-position: center bottom;
           object-position: center bottom;
        background-position: center bottom;
      }

.mega-block .grid-image-container video {

      /* Desktop video: show on desktop, hide on mobile */
    }

.mega-block .grid-image-container video.desktop-video {
        display: block
      }

@media (max-width: 750px) {
      .mega-block .grid-image-container video.desktop-video {
          display: none
      }
        }

.mega-block .grid-image-container video {

      /* Mobile video: hide on desktop, show on mobile */
    }

.mega-block .grid-image-container video.mobile-video {
        display: none
      }

@media (max-width: 750px) {
      .mega-block .grid-image-container video.mobile-video {
          display: block
      }
        }

.mega-block .background-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top center;
       object-position: top center;
    display: block
  }

.mega-block .background-image.clip {
      min-height: 100%;
      width: auto;
    }

.mega-block .background-image.align-top {
      -o-object-position: center top;
         object-position: center top;
    }

.mega-block .background-image.align-center {
      -o-object-position: center center;
         object-position: center center;
    }

.mega-block .background-image.align-bottom {
      -o-object-position: center bottom;
         object-position: center bottom;
    }

.mega-block .background-image {

    /* Desktop image: show on desktop, hide on mobile */
  }

.mega-block .background-image.desktop-image {
      display: block
    }

@media (max-width: 750px) {
    .mega-block .background-image.desktop-image {
        display: none
    }
      }

.mega-block .background-image {

    /* Mobile image: hide on desktop, show on mobile */
  }

.mega-block .background-image.mobile-image {
      display: none
    }

@media (max-width: 750px) {
    .mega-block .background-image.mobile-image {
        display: block
    }
      }

.mega-block .grid-16-col-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: var(--mb-container-width);
    height: 100%;
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    grid-template-rows: repeat(3, 1fr);
    box-sizing: border-box;
  }

.mega-block .grid-item {
    --normalized-alpha: calc((var(--alpha) - 0.5) * 2);
    --normalized-abs: max(
      var(--normalized-alpha),
      calc(var(--normalized-alpha) * -1)
    );
    /* opacity: calc(1 - var(--normalized-abs)); */
    --alpha: 0.5;
  }

.mega-block .grid-item img {
      max-width: 100%;
      height: auto;
      display: block;
    }

/* Responsive overlaying images */

.mega-block .grid-item .overlaying-image {
      max-width: 100%;
      height: auto;
      display: block;
      flex-shrink: 1

      /* Desktop image: show on desktop, hide on mobile */
    }

.mega-block .grid-item .overlaying-image.desktop-image {
        display: block
      }

@media (max-width: 750px) {
      .mega-block .grid-item .overlaying-image.desktop-image {
          display: none
      }
        }

.mega-block .grid-item .overlaying-image {

      /* Mobile image: hide on desktop, show on mobile */
    }

.mega-block .grid-item .overlaying-image.mobile-image {
        display: none
      }

@media (max-width: 750px) {
      .mega-block .grid-item .overlaying-image.mobile-image {
          display: block
      }
        }

.mega-block .grid-item .overlaying-image {

      /* Hide desktop image on mobile when no mobile version exists */
    }

.mega-block .grid-item .overlaying-image.hide-on-mobile {
        display: block
      }

@media (max-width: 750px) {
      .mega-block .grid-item .overlaying-image.hide-on-mobile {
          display: none
      }
        }

.mega-block .btn {
    display: block;
    margin-top: 10px;
    background-color: transparent;
    border-radius: 28px;
    border: 1px solid #fff;
    border: 1px solid #fff;
    border: 1px solid var(--mb-overlay-color, #fff);
    padding: clamp(12px, 3vw, 16px) clamp(19px, 4.75vw, 25px)
      clamp(10px, 2.5vw, 14px);
    color: #fff;
    color: #fff;
    color: var(--mb-overlay-color, #fff);
    text-transform: uppercase;
    white-space: nowrap;
    font-size: clamp(11px, 2.75vw, 14px);
    font-weight: 500;
    letter-spacing: 0.07em;
    line-height: 0.6;
    min-width: min(188px, 18.083vw);
    text-align: center;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    transition: all 0.3s ease
  }

.mega-block .btn:hover {
      background-color: #fff;
      background-color: #fff;
      background-color: var(--mb-overlay-color, #fff);
      /* taking the overlay color and inverting it's lightness. Depending
        on mainly just using really bright or really dark colors to create
        the appropriate contrast. */
      color: #000;
      color: #000;
      color: var(--mb-overlay-inverse-color, #000);
      border-color: #000;
      border-color: #000;
      border-color: var(--mb-overlay-inverse-color, #000);
    }

/* Carousel navigation */

.mega-block .carousel-navigation {
    position: absolute;
    width: min(1440px, 90vw);
    bottom: min(40px, 2.777vw);
    display: flex;
    justify-content: center;
    grid-gap: min(10px, 0.69vw);
    grid-gap: min(10px, 0.69vw);
    gap: min(10px, 0.69vw);
    z-index: 10;
  }

.mega-block .carousel-navigation .carousel-dot {
      width: 100%;
      max-width: 140px;
      height: 20px;
      cursor: pointer;
      position: relative;
      overflow: hidden
    }

.mega-block .carousel-navigation .carousel-dot::before {
        content: "";
        display: block;
        position: absolute;
        top: 9px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--mb-overlay-color);
        border-radius: 2px;
        opacity: 0.3;
        transition: all 0.3s ease;
      }

.mega-block .carousel-navigation .carousel-dot.active::before {
          opacity: 1;
        }

.mega-block .carousel-navigation .carousel-dot .timer {
        position: absolute;
        top: 9px;
        left: 0;
        width: 0;
        height: 2px;
        border-radius: 2px;
        transition: background-color 0.3s ease 0s, width 0s linear 0.1s;
        transform-origin: left center;
      }

/* need to keep the background always at a 0.3 opacity */

.mega-block.timed .carousel-navigation .carousel-dot.active::before {
        opacity: 0.3;
      }

.mega-block.timed .carousel-navigation .carousel-dot.active .timer {
        width: 100%;
        transform: scaleX(0);
        background-color: var(--mb-overlay-color);
        border-color: var(--mb-overlay-color);
        transition: background-color 0.3s ease 0s;
      }

.share-your-story-modal-block {
  text-align: center;
}

.share-your-story-modal-block .share-paragraph {
    font: 300 24px/1.5 "Campton", sans-serif;
    color: #ffffff;
    max-width: 80vw;
    text-align: center;
    margin: 0 auto 30px auto
  }

@media (max-width: 600px) {

  .share-your-story-modal-block .share-paragraph {
      font-size: 14px;
      padding: 0 15px
  }
    }

.share-your-story-modal-block .hidden-form-container {
    display: none;
  }

.share-your-story-modal-block .share-story-trigger-btn {
    display: inline-block;
    padding: 8px 24px;
    font: 300 16px/1.2 "Campton", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background-color: #ff6b00;
    border: 2px solid #ff6b00;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 50px;
    border-radius: 30px
  }

.share-your-story-modal-block .share-story-trigger-btn:hover {
      background-color: darken(#ff6b00, 10%);
      border-color: darken(#ff6b00, 10%);
    }

.share-your-story-modal-block .share-story-trigger-btn:active {
      transform: translateY(0);
    }

@media (max-width: 600px) {

  .share-your-story-modal-block .share-story-trigger-btn {
      padding: 12px 32px;
      font-size: 14px !important
  }
    }

.share-your-story-modal-wrapper {
  max-width: 620px;
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #ff6b00;
  padding: 50px 60px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box
}

@media (max-width: 600px) {

.share-your-story-modal-wrapper {
    width: 90vw;
    padding: 30px
}
  }

.share-your-story-modal-wrapper.drag-over {
    border-color: darken(#ff6b00, 10%);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
  }

/* === Modal Header === */

.share-your-story-modal-wrapper .modal-header {
    position: relative;
    padding: 15px 20px;
    text-align: right;
    /* Exit button styling is now in _footer.scss for all global popups */
  }

/* === Modal Body === */

.share-your-story-modal-wrapper .modal-body {
    text-align: center;
  }

.share-your-story-modal-wrapper .modal-body .modal-titles {
      display: flex;
      flex-direction: column;
      margin-bottom: 50px
    }

@media (max-width: 600px) {

    .share-your-story-modal-wrapper .modal-body .modal-titles {
        margin-bottom: 30px;
        width: 70%;
        min-width: 70%;
        margin-left: auto;
        margin-right: auto
    }
      }

.share-your-story-modal-wrapper .modal-body .modal-title {
      font-weight: 300;
      font-size: 64px;
      line-height: 90%;
      font-family: "Campton", sans-serif;
      text-transform: uppercase;
      color: #ffffff
    }

@media (max-width: 600px) {

    .share-your-story-modal-wrapper .modal-body .modal-title {
        font-size: calc(40px + (64 - 40) * ((100vw - 320px) / (600 - 320)));
        letter-spacing: calc(
          -2px + (-5 - -2) * ((100vw - 320px) / (600 - 320))
        )
    }
      }

@media (max-width: 320px) {

    .share-your-story-modal-wrapper .modal-body .modal-title {
        font-size: 40px;
        letter-spacing: -2px
    }
      }

.share-your-story-modal-wrapper .modal-body .modal-title-nokona {
      font-weight: 700;
      font-size: 72px;
      line-height: 90%;
      font-family: "Campton", sans-serif;
      text-transform: uppercase;
      color: #ff6b00;
      margin-bottom: 15px
    }

@media (max-width: 600px) {

    .share-your-story-modal-wrapper .modal-body .modal-title-nokona {
        font-size: calc(44px + (72 - 44) * ((100vw - 320px) / (600 - 320)));
        letter-spacing: calc(
          -2px + (-5 - -2) * ((100vw - 320px) / (600 - 320))
        )
    }
      }

@media (max-width: 320px) {

    .share-your-story-modal-wrapper .modal-body .modal-title-nokona {
        font-size: 44px;
        letter-spacing: -2px
    }
      }

.share-your-story-modal-wrapper .modal-body .modal-title-success {
      font-weight: 200;
      font-size: 54px;
      line-height: 1.2;
      font-family: "Campton", sans-serif;
      text-transform: uppercase;
      color: #ffffff;
      margin-bottom: 30px
    }

@media (max-width: 600px) {

    .share-your-story-modal-wrapper .modal-body .modal-title-success {
        font-size: calc(32px + (56 - 32) * ((100vw - 320px) / (600 - 320)));
        letter-spacing: calc(
          -2px + (-5 - -2) * ((100vw - 320px) / (600 - 320))
        )
    }
      }

@media (max-width: 320px) {

    .share-your-story-modal-wrapper .modal-body .modal-title-success {
        font-size: 32px;
        letter-spacing: -2px
    }
      }

.share-your-story-modal-wrapper .modal-body .shop-now-btn {
      display: inline-block;
      margin-top: 30px;
      padding: 12px 20px;
      font: 500 14px/1.2 "Campton", sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #fff;
      background-color: #ff6b00;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 25px;
      text-decoration: none
    }

.share-your-story-modal-wrapper .modal-body .shop-now-btn:hover {
        background-color: darken(#ff6b00, 10%);
      }

@media (max-width: 600px) {

    .share-your-story-modal-wrapper .modal-body .shop-now-btn {
        padding: 12px 32px;
        font-size: 14px
    }
      }

.share-your-story-modal-wrapper .modal-body .modal-description {
      font: 400 12px/1.5 "Campton", sans-serif;
      text-align: center;
      color: #ffffff;
      margin: 0 0 30px 0
    }

@media (max-width: 600px) {

    .share-your-story-modal-wrapper .modal-body .modal-description {
        font-size: 14px;
        margin-bottom: 20px
    }
      }

.share-your-story-modal-wrapper .modal-body .success-message-content {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center
    }

@media (max-width: 600px) {

    .share-your-story-modal-wrapper .modal-body .success-message-content {
        margin-left: auto;
        margin-right: auto
    }
      }

.share-your-story-modal-wrapper .modal-body .success-message-content .success-description {
        font: 300 20px/1.6 "Campton", sans-serif;
        color: #ffffff;
        margin: 0 auto;
        text-align: center
      }

@media (max-width: 600px) {

      .share-your-story-modal-wrapper .modal-body .success-message-content .success-description {
          font-size: 16px
      }
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container {
      position: relative;
    }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .form-overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 1000;
        cursor: wait
      }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .form-overlay.active {
          display: block;
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_forms {
        margin: 0;
      }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field label {
          font: 600 14px/1.4 "Campton", sans-serif;
          letter-spacing: 0.03em;
          margin-bottom: 8px;
          display: block;
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field .frm_required {
          color: #ff6b00 !important;
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field input[type="text"],
        .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field input[type="email"],
        .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field input[type="tel"],
        .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field textarea {
          width: 100%;
          padding: 8px 18px !important;
          font: 400 16px/1.4 "Campton", sans-serif !important;
          border: 1px solid #ddd;
          border-radius: 0 !important;
          transition: border-color 0.2s ease;
          margin-bottom: 30px !important
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field input[type="text"]:focus, .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field input[type="email"]:focus, .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field input[type="tel"]:focus, .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field textarea:focus {
            outline: none;
            border-color: #ff6b00;
          }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field input[type="text"]::-moz-placeholder, .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field input[type="email"]::-moz-placeholder, .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field input[type="tel"]::-moz-placeholder, .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field textarea::-moz-placeholder {
            color: #999;
            font: 400 16px/1.4 "Campton", sans-serif !important;
            text-transform: none !important;
          }

input[type="text"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, textarea::-moz-placeholder {
            color: #999;
            font: 400 16px/1.4 "Campton", sans-serif !important;
            text-transform: none !important;
          }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field input[type="text"]::placeholder, .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field input[type="email"]::placeholder, .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field input[type="tel"]::placeholder, .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field textarea::placeholder {
            color: #999;
            font: 400 16px/1.4 "Campton", sans-serif !important;
            text-transform: none !important;
          }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_form_field textarea {
          min-height: 120px;
          resize: vertical;
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_dropzone {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
      }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_primary_label {
        display: none !important;
      }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_fields_container button {
        float: left !important;
      }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .upload-button-container {
        display: flex;
        flex-direction: column;
        width: 100%;
      }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .custom-video-upload-btn {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        grid-gap: 12px;
        grid-gap: 12px;
        gap: 12px;
        font: 600 14px/1.4 "Campton", sans-serif;
        color: #ff6b00;
        background-color: transparent;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
      }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .custom-video-upload-btn svg {
          flex-shrink: 0;
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .custom-video-upload-btn:hover {
          opacity: 0.8;
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .selected-file-display {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        grid-gap: 10px;
        grid-gap: 10px;
        gap: 10px;
        padding: 10px 10px 0 0;
        margin-bottom: 5px;
        border-radius: 4px;
        flex-wrap: wrap;
      }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .selected-file-display .remove-file-btn {
          flex-shrink: 0;
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32px;
          font-weight: 100;
          color: #ffffff;
          background: transparent;
          border: none;
          cursor: pointer;
          transition: all 0.2s ease;
          padding: 0;
          margin: 0
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .selected-file-display .remove-file-btn:hover {
            color: darken(#888888, 15%);
            transform: scale(1.2);
          }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .selected-file-display .story-video-file {
          margin-bottom: 0 !important;
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .selected-file-display .file-name {
          font: 500 14px/1 "Campton", sans-serif;
          color: #ffffff;
          flex: 1;
          word-break: break-word;
          margin: 0;
          padding: 0;
          min-width: 150px;
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .selected-file-display .upload-progress-indicator {
          display: flex;
          align-items: center;
          grid-gap: 8px;
          grid-gap: 8px;
          gap: 8px;
          width: 100%;
          margin-top: 8px;
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .selected-file-display .upload-progress-indicator .progress-spinner {
            display: inline-block;
            width: 12px;
            aspect-ratio: 1/1;
            border: 3px solid rgba(255, 107, 0, 0.2);
            border-top-color: #ff6b00;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            flex-shrink: 0;
          }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .selected-file-display .upload-progress-indicator .progress-text {
            font: 500 13px/1 "Campton", sans-serif;
            color: #ff6b00;
            font-style: italic;
          }

@keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit {
        text-align: center;
        margin-top: 25px;
      }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit button,
        .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit input[type="submit"] {
          display: inline-block;
          padding: 15px 40px;
          font: 700 14px/1.2 "Campton", sans-serif;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          color: #fff;
          background-color: #ff6b00;
          border: none;
          cursor: pointer;
          transition: all 0.3s ease;
          border-radius: 25px;
          box-shadow: none
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit button:hover:not(:disabled), .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit input[type="submit"]:hover:not(:disabled) {
            background-color: darken(#ff6b00, 10%);
          }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit button:disabled, .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit input[type="submit"]:disabled {
            background-color: transparent !important;
            border: 2px solid #fff !important;
            color: #fff !important;
            cursor: not-allowed;
          }

@media (max-width: 600px) {

        .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit button,
        .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit input[type="submit"] {
            padding: 12px 32px;
            font-size: 12px
        }
          }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit .frm_button_submit {
          margin: 0;
          display: inline-block;
          font: 500 16px/1.2 "Campton", sans-serif !important;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          color: #fff;
          background-color: #ff6b00 !important;
          border: none !important;
          cursor: pointer;
          transition: all 0.3s ease;
          border-radius: 25px !important;
          box-shadow: none !important;
          position: relative;
          width: 100%
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit .frm_button_submit:hover:not(:disabled) {
            background-color: darken(#ff6b00, 10%);
          }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit .frm_button_submit:disabled {
            background-color: transparent !important;
            border: 2px solid #fff !important;
            color: #fff !important;
            cursor: not-allowed;
            width: 100%;
          }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit .frm_button_submit.submitting {
            padding-left: 60px
          }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit .frm_button_submit.submitting::before {
              content: "";
              position: absolute;
              left: 20px;
              top: 50%;
              margin-top: -8px;
              display: inline-block;
              width: 16px;
              height: 16px;
              border: 3px solid rgba(255, 255, 255, 0.3);
              border-top-color: #fff;
              border-radius: 50%;
              animation: spin 0.6s linear infinite;
            }

@media (max-width: 600px) {

        .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit .frm_button_submit {
            padding: 12px 32px;
            font-size: 10px;
            white-space: nowrap;
            text-align: center;
            display: inline-flex;
            align-items: center;
            justify-content: center
        }

            .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit .frm_button_submit.submitting {
              padding-left: 50px
            }

              .share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_submit .frm_button_submit.submitting::before {
                width: 14px;
                height: 14px;
                left: 15px;
                margin-top: -7px;
              }
          }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_dropzone .frm_upload_text {
          display: block;
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_dropzone .frm_upload_text button {
            float: none;
            float: initial;
          }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_dropzone .frm_small_text {
          display: block;
          font-size: 12px;
          color: #666;
          margin-top: 8px;
        }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_icon_font.frm_upload_icon {
        margin-bottom: 13px;
      }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_error {
        color: #ff6b00 !important;
        font-size: 12px;
        margin-top: 5px;
      }

.share-your-story-modal-wrapper .modal-body .formidable-form-container .frm_message {
        padding: 15px;
        margin-bottom: 20px;
        background-color: #e8f5e9;
        color: #2e7d32;
        border-radius: 4px;
        font: 500 14px/1.4 "Campton", sans-serif;
        text-align: center;
      }

.product-sets-block {
  padding-bottom: 40px
}

@media (max-width: 600px) {

.product-sets-block {
    padding-bottom: 20px
}
  }

.product-sets-block input[type=radio] {
    display: none;
  }

.product-sets-block .section-head {
    display: flex;
    background-color: #000000;
    grid-gap: 25px;
    grid-gap: 25px;
    gap: 25px;
    color: #fff;
    min-height: 52px;
    padding: 10px 30px;
    box-sizing: border-box
  }

@media (max-width: 600px) {

  .product-sets-block .section-head {
      padding-left: 5vw;
      padding-right: 5vw;
      align-items: center
  }
    }

.product-sets-block .banner-message.banner-message {
    font: 300 14px/1.2 "EvelethClean", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    text-align: right;
    grid-gap: 20px;
    grid-gap: 20px;
    gap: 20px;
    order: 10;
    margin-left: auto
  }

.product-sets-block .banner-message.banner-message::after {
      content: '';
      display: block;
      height: 32px;
      aspect-ratio: 4;
      background: url(/wp-content/themes/nokona-2019/img/us-flag-wide.svg) no-repeat center/contain
    }

@media (max-width: 600px) {
    .product-sets-block .banner-message.banner-message::after {
        height: 5.3333vw
    }
      }

@media (max-width: 460px) {
    .product-sets-block .banner-message.banner-message::after {
        height: 24px
    }
      }

@media (max-width: 750px) {
  .product-sets-block .banner-message.banner-message {
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
      grid-gap: 10px;
      grid-gap: 10px;
      gap: 10px;
  }
      .product-sets-block .banner-message.banner-message .banner-text {
        display: none;
      }
    }

.product-sets-block .set-selection {
    display: flex;
    align-items: center;
    color: #898A8D;
    margin-top: -10px;
    margin-bottom: -10px;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 18px;
    cursor: default
  }

@media (max-width: 600px) {
  .product-sets-block .set-selection {
      font-size: 3vw
  }
    }

@media (max-width: 460px) {
  .product-sets-block .set-selection {
      font-size: 14px
  }
    }

.product-sets-block .set-selection.multiple-sets {
      position: relative
    }

.product-sets-block .set-selection.multiple-sets::after {
        content: '';
        display: inline-block;
        margin-left: 8px;
        font-size: 0.6em;
        line-height: 1;
        vertical-align: middle;
        width: 18px;
        aspect-ratio: 16 / 9;
        background-color: #ff6b00;
        -webkit-mask: url(/wp-content/themes/nokona-2019/img/arrow-down.svg) no-repeat center / contain;
        mask: url(/wp-content/themes/nokona-2019/img/arrow-down.svg) no-repeat center / contain;
      }

.product-sets-block .set-selection.set-selected {
      pointer-events: none;
    }

.product-sets-block .set-selection-title {
    white-space: nowrap;
    font: 1000 1em/1.111 "EvelethClean", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

.product-sets-block .set-selection-sets {
    position: absolute;
    top: 100%;
    left: -20px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.2s ease-in-out;
    background-color: #000;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: calc(100% + 40px);
    z-index: 10
  }

@media (max-width: 600px) {
  .product-sets-block .set-selection-sets {
      left: -3vw;
      min-width: calc(100% + 6vw)
  }
    }

body:not(.is-touch) .product-sets-block .set-selection.multiple-sets:not(.set-selected):hover .set-selection-sets,
  body.is-touch .product-sets-block .set-selection.multiple-sets:not(.set-selected).open .set-selection-sets,
  .product-sets-block .set-selection.multiple-sets:not(.set-selected)[\:has\(.product-set.focus-visible\)] .set-selection-sets {
    transform: scaleY(1);
  }

body:not(.is-touch) .product-sets-block .set-selection.multiple-sets:not(.set-selected):hover .set-selection-sets,
  body.is-touch .product-sets-block .set-selection.multiple-sets:not(.set-selected).open .set-selection-sets,
  .product-sets-block .set-selection.multiple-sets:not(.set-selected)[\:has\(.product-set.focus-visible\)] .set-selection-sets {
    transform: scaleY(1);
  }

body:not(.is-touch) .product-sets-block .set-selection.multiple-sets:not(.set-selected):hover .set-selection-sets,
  body.is-touch .product-sets-block .set-selection.multiple-sets:not(.set-selected).open .set-selection-sets,
  .product-sets-block .set-selection.multiple-sets:not(.set-selected)[\:has\(.product-set.focus-visible\)] .set-selection-sets {
    transform: scaleY(1);
  }

body:not(.is-touch) .product-sets-block .set-selection.multiple-sets:not(.set-selected):hover .set-selection-sets,
  body.is-touch .product-sets-block .set-selection.multiple-sets:not(.set-selected).open .set-selection-sets,
  .product-sets-block .set-selection.multiple-sets:not(.set-selected):has(.product-set.focus-visible) .set-selection-sets {
    transform: scaleY(1);
  }

body:not(.is-touch) .product-sets-block .set-selection.multiple-sets:not(.set-selected):hover .set-selection-sets,
  body.is-touch .product-sets-block .set-selection.multiple-sets:not(.set-selected).open .set-selection-sets,
  .product-sets-block .set-selection.multiple-sets:not(.set-selected)[\:has\(.product-set\.focus-visible\)] .set-selection-sets {
    transform: scaleY(1);
  }

body:not(.is-touch) .product-sets-block .set-selection.multiple-sets:not(.set-selected):hover .set-selection-sets,
  body.is-touch .product-sets-block .set-selection.multiple-sets:not(.set-selected).open .set-selection-sets,
  .product-sets-block .set-selection.multiple-sets:not(.set-selected)[\:has\(.product-set\.focus-visible\)] .set-selection-sets {
    transform: scaleY(1);
  }

body:not(.is-touch) .product-sets-block .set-selection.multiple-sets:not(.set-selected):hover .set-selection-sets,
  body.is-touch .product-sets-block .set-selection.multiple-sets:not(.set-selected).open .set-selection-sets,
  .product-sets-block .set-selection.multiple-sets:not(.set-selected)[\:has\(.product-set\:focus-visible\)] .set-selection-sets {
    transform: scaleY(1);
  }

body:not(.is-touch) .product-sets-block .set-selection.multiple-sets:not(.set-selected):hover .set-selection-sets,
  body.is-touch .product-sets-block .set-selection.multiple-sets:not(.set-selected).open .set-selection-sets,
  .product-sets-block .set-selection.multiple-sets:not(.set-selected)[\:has\(.product-set\:focus-visible\)] .set-selection-sets {
    transform: scaleY(1);
  }

body:not(.is-touch) .product-sets-block .set-selection.multiple-sets:not(.set-selected):hover .set-selection-sets,
  body.is-touch .product-sets-block .set-selection.multiple-sets:not(.set-selected).open .set-selection-sets,
  .product-sets-block .set-selection.multiple-sets:not(.set-selected)[\:has\(.product-set.focus-visible\)] .set-selection-sets {
    transform: scaleY(1);
  }

body:not(.is-touch) .product-sets-block .set-selection.multiple-sets:not(.set-selected):hover .set-selection-sets,
  body.is-touch .product-sets-block .set-selection.multiple-sets:not(.set-selected).open .set-selection-sets,
  .product-sets-block .set-selection.multiple-sets:not(.set-selected):has(.product-set.focus-visible) .set-selection-sets {
    transform: scaleY(1);
  }

body:not(.is-touch) .product-sets-block .set-selection.multiple-sets:not(.set-selected):hover .set-selection-sets,
  body.is-touch .product-sets-block .set-selection.multiple-sets:not(.set-selected).open .set-selection-sets,
  .product-sets-block .set-selection.multiple-sets:not(.set-selected)[\:has\(.product-set\:focus-visible\)] .set-selection-sets {
    transform: scaleY(1);
  }

body:not(.is-touch) .product-sets-block .set-selection.multiple-sets:not(.set-selected):hover .set-selection-sets,
  body.is-touch .product-sets-block .set-selection.multiple-sets:not(.set-selected).open .set-selection-sets,
  .product-sets-block .set-selection.multiple-sets:not(.set-selected):has(.product-set:focus-visible) .set-selection-sets {
    transform: scaleY(1);
  }

.product-sets-block .set-selection-sets li {
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.2s linear;
    font: 500 1em/1.25 "Campton", sans-serif;
    text-transform: capitalize;
    color: #ccc;
  }

.product-sets-block .set-selection-sets li span[data-for] {
      cursor: pointer;
      display: block;
      padding: 8px 20px;
      --indent-val: calc(0.5em * var(--indent, 0));
      padding-left: calc(20px + var(--indent-val))
    }

@media (max-width: 600px) {
    .product-sets-block .set-selection-sets li span[data-for] {
        padding-left: calc(3vw + var(--indent-val));
        padding-right: 3vw
    }
      }

.product-sets-block .set-selection-sets li:hover,
  .product-sets-block .set-selection-sets li.focus-visible {
    background-color: #222;
    cursor: pointer;
  }

.product-sets-block .set-selection-sets li:hover,
  .product-sets-block .set-selection-sets li.focus-visible {
    background-color: #222;
    cursor: pointer;
  }

.product-sets-block .set-selection-sets li:hover,
  .product-sets-block .set-selection-sets li:focus-visible {
    background-color: #222;
    cursor: pointer;
  }

.product-sets-block .global-link {
    font: 300 12px/1.2 "EvelethClean", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ff6b00;
    align-self: center;
    text-decoration: underline;
    white-space: nowrap
  }

.product-sets-block .global-link.hidden {
      display: none;
    }

.product-sets-block .product-set-products {
    overflow-x: auto;
    display: none;
    padding-top: 25px;
    padding-bottom: 18px;
    grid-gap: 30px;
    grid-gap: 30px;
    gap: 30px;
    padding-left: 30px;
    padding-right: 30px
  }

.product-sets-block .product-set-products.only-child, .product-sets-block .product-set-products.le-visible {
      display: flex;
    }

.product-sets-block .product-set-products.viewed {
      animation: fadeIn 0.5s linear forwards;
    }

.product-sets-block .product-set-products.viewed .product-set-product {
        animation: slideIn 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
      }

@media (max-width: 600px) {

  .product-sets-block .product-set-products {
      grid-gap: 5vw;
      grid-gap: 5vw;
      gap: 5vw;
      padding-left: 5vw;
      padding-right: 5vw
  }
    }

.product-sets-block .product-set-product {
    display: flex;
    flex-direction: column;
    color: #000;
    width: 400px;
    max-width: 56vw;
    flex: 0 0 400px;
  }

.product-sets-block .product-set-product > * {
      order: 1;
    }

.product-sets-block .product-set-product:not(.hovering) .product-images img:first-child {
        opacity: 1;
        z-index: 2;
      }

.product-sets-block .product-set-product:not(.hovering) .product-images img:not(:first-child):not(:nth-child(2)):not(.leaving) {
        display: none;
      }

.product-sets-block .product-set-product:not(.multiple-images) .product-images img:first-child {
        opacity: 1;
      }

.product-sets-block .product-images {
    width: 100%;
    aspect-ratio: 1;
    position: relative;
    order: 0;
    background-color: #aeaeae;
  }

.product-sets-block .product-images img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      opacity: 0;
      transition: opacity 0.2s linear
    }

.product-sets-block .product-images img.active {
        opacity: 1;
        z-index: 3;
      }

.product-sets-block .product-images img.leaving {
        opacity: 1;
        z-index: 1;
      }

.product-sets-block .product-set-product:nth-child(odd) .product-images {
    background-color: #bdbdbd;
  }

.product-sets-block .product-title {
    padding-top: 16px;
    max-width: 100%;
    text-align: left;
    box-sizing: border-box;
    font: 500 16px/1.25em "Campton", sans-serif
  }

@media (max-width: 600px) {
  .product-sets-block .product-title {
      font-size: 14px
  }
    }

.product-sets-block .woocommerce-product-review-summary {
    margin-top: 5px;
    text-align: left;
    justify-content: flex-start;
  }

.product-sets-block .cta {
    margin-top: 48px;
    font: 700 16px/1.25 "Campton", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    width: -moz-fit-content;
    width: fit-content;
    order: 6;
    box-sizing: border-box;
    transition: color 0.2s linear
  }

@media (max-width: 600px) {
  .product-sets-block .cta {
      font-size: 14px;
      margin-top: 28px
  }
    }

.product-sets-block .woocommerce-product-review-summary + .cta {
    margin-top: 30px
  }

@media (max-width: 600px) {
  .product-sets-block .woocommerce-product-review-summary + .cta {
      margin-top: 10px
  }
    }

.product-sets-block .product-set-product:is(:hover, .focus-visible) .cta {
    color: #ff6b00;
  }

.product-sets-block .product-set-product:is(:hover, .focus-visible) .cta {
    color: #ff6b00;
  }

.product-sets-block .product-set-product:is(:hover, :focus-visible) .cta {
    color: #ff6b00;
  }

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(min(200px, 50vw));
  }
  to {
    transform: translateX(0);
  }
}

.ticker-block {
  background: #ff6b00;
  color: #000;
  overflow: hidden;
  padding: 0.5em 0;
  margin-bottom: 0;
}

.ticker-block .ticker-track {
    display: flex;
    white-space: nowrap;
    animation: ticker-scroll linear infinite;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    font: 400 33px/1.2 "Filmotype Hickory", sans-serif;
  }

.ticker-block .ticker-list,
  .ticker-block .ticker-extras {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }

.ticker-block .ticker-extras {
    position: absolute;
    left: 100%;
    top: 0;
  }

.ticker-block .ticker-name {
    flex-shrink: 0
  }

.ticker-block .ticker-name::before {
      content: "";
      display: inline-block;
      width: 0.3333em;
      aspect-ratio: 1;
      margin-bottom: 0.175em;
      margin-left: 0.5em;
      margin-right: 0.5em;
      border-radius: 1000px;
      background-color: #fff;
    }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.nokona-resource-pages-breadcrumbs {
  text-align: left;
  list-style-type: none;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 26px;
  margin-bottom: 10px;
}

.nokona-resource-pages-breadcrumbs li {
    display: inline-block;
    padding: 8px 3px
  }

.nokona-resource-pages-breadcrumbs li:first-of-type {
      padding-left: 0;
    }

.nokona-resource-pages-breadcrumbs li a {
      color: #000;
    }

.nokona-resource-pages-breadcrumbs li.current {
      font-weight: bold;
    }

.nokona-resource-pages-breadcrumbs #see-all {
    padding-left: 20px;
    position: relative;
    color: #ff6b00;
    font-weight: 700;
    display: none;
    cursor: pointer;
    transition: all 0.2s ease
  }

@media (max-width: 750px) {
  .nokona-resource-pages-breadcrumbs #see-all {
      display: inline-block
  }
    }

.nokona-resource-pages-breadcrumbs #see-all:after {
      content: "";
      background-image: url(/wp-content/themes/nokona-2019/img/arrow-down-orange.svg);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      width: 9px;
      height: 6px;
      position: absolute;
      right: -13px;
      top: 17px;
      transition: all 0.2s ease;
    }

.nokona-resource-pages-breadcrumbs #see-all:hover:after, .nokona-resource-pages-breadcrumbs #see-all.clicked:after {
        transform: rotate(180deg);
        transition: all 0.2s ease;
      }

.nokona-resource-pages-wrapper {
  text-align: left;
  display: flex;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

.nokona-resource-pages-wrapper h1 {
    margin: 18px 0 40px;
    padding-left: 8%
  }

@media (max-width: 1020px) {
  .nokona-resource-pages-wrapper h1 {
      margin-bottom: 18px
  }
    }

@media (max-width: 900px) {
  .nokona-resource-pages-wrapper h1 {
      padding-left: 50px;
      padding-right: 5.555vw
  }
    }

.nokona-resource-pages-wrapper #sidebar-side {
    width: 18.4%;
    box-sizing: border-box;
    background-color: rgba(230, 230, 230, 0.2);
    min-width: 275px;
    max-height: 10000px;
    padding-bottom: 8%;
    overflow: hidden
  }

@media (max-width: 750px) {
  .nokona-resource-pages-wrapper #sidebar-side {
      width: 275px;
      min-width: 0;
      position: absolute;
      z-index: 2;
      transform: translate(-275px, 0);
      transition: all 0.2s ease;
      background-color: #e6e6e6;
      top: 0px
  }
    }

.nokona-resource-pages-wrapper #sidebar-side.clicked {
      transform: translate(0, 0);
      transition: all 0.2s ease;
    }

.nokona-resource-pages-wrapper #sidebar-side ul {
      list-style-type: none;
      padding: 0 10% 0 15%;
      margin-top: 10px;
    }

.nokona-resource-pages-wrapper #sidebar-side ul li a {
          padding: 3px 0;
          color: #000;
          display: block;
          font-weight: bold;
          letter-spacing: 0.04em
        }

.nokona-resource-pages-wrapper #sidebar-side ul li a:hover {
            color: #ff6b00;
          }

.nokona-resource-pages-wrapper #sidebar-side ul li ul {
          padding-left: 9%;
          margin-top: 0;
        }

.nokona-resource-pages-wrapper #sidebar-side ul li li {
          width: 100%;
          padding: 2px 0;
        }

.nokona-resource-pages-wrapper #sidebar-side ul li li a {
            display: inline;
            font-weight: 300;
            padding: 0
          }

.nokona-resource-pages-wrapper #sidebar-side ul li li a:hover {
              color: #000;
              border-bottom: 1px solid #ff6b00;
            }

.nokona-resource-pages-wrapper #sidebar-side ul li.menu-item-has-children:not(:first-child) .sub-menu {
            height: 0px;
            overflow: hidden;
          }

.nokona-resource-pages-wrapper #sidebar-side ul li.menu-item-has-children:not(:first-child).current-menu-parent .sub-menu {
              height: auto;
            }

.nokona-resource-pages-wrapper #sidebar-side ul li.current_page_item > a, .nokona-resource-pages-wrapper #sidebar-side ul li.current-menu-parent > a, .nokona-resource-pages-wrapper #sidebar-side ul li.current-menu-item > a {
            color: #ff6b00;
          }

.nokona-resource-pages-wrapper #sidebar-side ul li.current-menu-parent ul li.current_page_item > a, .nokona-resource-pages-wrapper #sidebar-side ul li.current-menu-parent ul li.current-menu-item > a {
                  border-bottom: 1px solid #ff6b00;
                }

.nokona-resource-pages-wrapper #sidebar-side ul li.current-menu-parent ul li > a {
                color: #000;
              }

.nokona-resource-pages-wrapper .sidebar-title {
    background-color: #ff6b00;
    color: #fff;
    padding: 17px 10% 13px 15%;
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

.nokona-resource-pages-wrapper .content-side {
    width: 81.6%;
    box-sizing: border-box
  }

@media (max-width: 750px) {
  .nokona-resource-pages-wrapper .content-side {
      width: 100%
  }
    }

.nokona-repair-table .nokona-repair-header {
    display: flex;
    background-color: #000
  }

@media (max-width: 900px) {
  .nokona-repair-table .nokona-repair-header {
      flex-wrap: wrap
  }
    }

.nokona-repair-table .nokona-repair-header .repair-cell {
      color: #fff;
      padding: 14px 20px;
      border-right: 2px solid #fff;
      box-sizing: border-box;
      font-weight: 700;
      font-size: 12px;
      line-height: 15px;
      letter-spacing: 0.05em;
      text-transform: uppercase
    }

.nokona-repair-table .nokona-repair-header .repair-cell:first-of-type {
        text-align: left;
        width: 27.86%
      }

@media (max-width: 900px) {
      .nokona-repair-table .nokona-repair-header .repair-cell:first-of-type {
          width: 100%;
          border-right: 0
      }
        }

.nokona-repair-table .nokona-repair-header .repair-cell:nth-of-type(2) {
        width: 18.06%
      }

@media (max-width: 900px) {
      .nokona-repair-table .nokona-repair-header .repair-cell:nth-of-type(2) {
          display: none
      }
        }

.nokona-repair-table .nokona-repair-header .repair-cell:nth-of-type(3) {
        width: 12.58%
      }

@media (max-width: 900px) {
      .nokona-repair-table .nokona-repair-header .repair-cell:nth-of-type(3) {
          display: none
      }
        }

.nokona-repair-table .nokona-repair-header .repair-cell:nth-of-type(4) {
        width: 12.04%
      }

@media (max-width: 900px) {
      .nokona-repair-table .nokona-repair-header .repair-cell:nth-of-type(4) {
          display: none
      }
        }

.nokona-repair-table .nokona-repair-header .repair-cell:nth-of-type(5) {
        width: 29.46%;
        border-right: none
      }

@media (max-width: 900px) {
      .nokona-repair-table .nokona-repair-header .repair-cell:nth-of-type(5) {
          display: none
      }
        }

.nokona-repair-table .nokona-repair-row {
    display: flex
  }

@media (max-width: 900px) {
  .nokona-repair-table .nokona-repair-row {
      flex-wrap: wrap
  }
    }

.nokona-repair-table .nokona-repair-row:nth-of-type(odd) {
      background-color: #f2f2f2;
    }

.nokona-repair-table .nokona-repair-row .repair-cell {
      padding: 20px;
      box-sizing: border-box;
      position: relative
    }

@media (max-width: 900px) {
    .nokona-repair-table .nokona-repair-row .repair-cell {
        padding-bottom: 10px
    }
      }

.nokona-repair-table .nokona-repair-row .repair-cell:first-of-type {
        width: 27.86%;
        text-align: left
      }

@media (max-width: 900px) {
      .nokona-repair-table .nokona-repair-row .repair-cell:first-of-type {
          width: auto;
          order: 1
      }
        }

@media (max-width: 550px) {
      .nokona-repair-table .nokona-repair-row .repair-cell:first-of-type {
          font-weight: 600;
          width: 100%
      }
        }

.nokona-repair-table .nokona-repair-row .repair-cell:nth-of-type(2) {
        width: 18.06%;
        padding: 10px 20px;
        display: flex;
        align-items: center
      }

@media (max-width: 900px) {
      .nokona-repair-table .nokona-repair-row .repair-cell:nth-of-type(2) {
          width: 50%;
          order: 4
      }
        }

.nokona-repair-table .nokona-repair-row .repair-cell:nth-of-type(3) {
        width: 12.58%
      }

@media (max-width: 900px) {
      .nokona-repair-table .nokona-repair-row .repair-cell:nth-of-type(3) {
          width: 25%;
          order: 3;
          flex-grow: 1;
          text-align: right
      }
        }

@media (max-width: 550px) {
      .nokona-repair-table .nokona-repair-row .repair-cell:nth-of-type(3) {
          width: 50%
      }
        }

.nokona-repair-table .nokona-repair-row .repair-cell:nth-of-type(4) {
        width: 12.04%
      }

@media (max-width: 900px) {
      .nokona-repair-table .nokona-repair-row .repair-cell:nth-of-type(4) {
          width: 25%;
          order: 2
      }
        }

@media (max-width: 550px) {
      .nokona-repair-table .nokona-repair-row .repair-cell:nth-of-type(4) {
          width: 50%
      }
        }

.nokona-repair-table .nokona-repair-row .repair-cell:nth-of-type(5) {
        width: 29.46%;
        padding: 7px 20px
      }

@media (max-width: 900px) {
      .nokona-repair-table .nokona-repair-row .repair-cell:nth-of-type(5) {
          width: 50%;
          order: 5;
          flex-grow: 1
      }
        }

.nokona-repair-table .nokona-repair-row .repair-cell p {
        margin-bottom: 0;
      }

.nokona-repair-table .nokona-repair-row .btn-orange {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      display: inline-block;
      text-transform: uppercase;
      color: #fff;
      padding: 0 8px;
      background-color: #ff6b00;
      border: 1px solid #ff6b00;
      box-sizing: border-box;
      white-space: nowrap;
      width: 100%;
      max-width: 212px;
      min-width: 132px;
      font-weight: 700;
      transition: color 0.2s, background-color 0.2s
    }

.nokona-repair-table .nokona-repair-row .btn-orange:hover {
        color: #ff6b00;
        background-color: #fff;
      }

@media (max-width: 900px) {
    .nokona-repair-table .nokona-repair-row .btn-orange {
        float: right
    }
      }

.nokona-repair-table .nokona-repair-row select {
      cursor: pointer
    }

@media (max-width: 900px) {
    .nokona-repair-table .nokona-repair-row select {
        float: left
    }
      }

.nokona-repair-table .nokona-repair-row .prod-dropdown {
      position: relative;
      width: 140px;
      background-color: #fff;
      border-radius: 2px
    }

.nokona-repair-table .nokona-repair-row .prod-dropdown::after {
        content: "";
        width: 10.92px;
        height: 6.96px;
        background: no-repeat center/contain url(/wp-content/themes/nokona-2019/img/arrow-down-grey.svg);
        position: absolute;
        top: 12px;
        right: 10px;
        transition: all 0.3s ease;
        z-index: 1;
      }

.nokona-repair-table .nokona-repair-row .prod-dropdown:hover::after {
        filter: brightness(0);
      }

.nokona-repair-table .nokona-repair-row .prod-dropdown select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 7px 12px;
        border: 1px solid #333;
        border-radius: 2px;
        width: 100%;
        position: relative;
        z-index: 2;
        background-color: rgba(255,255,255,0);
        cursor: pointer;
      }

.nokona-repair-table .nokona-repair-header,
  .nokona-repair-table .nokona-repair-row {
    padding-left: max(0px, calc(50vw - 620px));
    padding-right: max(0px, calc(50vw - 620px));
  }

.nokona-repair-table .color-options {
    font-weight: 700;
    text-align: left;
    margin: 30px 0 20px;
  }

.nokona-repair-table .color-image-wrapper {
    text-align: left;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 12px 0 48px;
  }

.nokona-repair-table .color-image-wrapper,
  .nokona-repair-table .color-options {
    padding-left: max(calc(50vw - 600px), 20px);
    padding-right: max(calc(50vw - 600px), 20px);
  }

.nokona-repair-table .color-list {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    width: -moz-max-content;
    width: max-content;
    width: 350px;
  }

.nokona-repair-table .color-list .lace-color {
      width: 140px;
      display: flex;
      align-items: flex-start;
      margin-right: 28px;
      margin-left: 0px;
      margin-bottom: 4px;
    }

.nokona-repair-table .color-list .lace-color .color-circle {
        border-radius: 50%;
        margin-right: 14px;
        width: 18px;
        height: 18px;
      }

@media (max-width: 600px) {
  .nokona-repair-table .color-list {
      width: 100%;
      margin-bottom: 35px
  }
    }

@media (max-width: 400px) {
  .nokona-repair-table .color-list {
      height: auto;
  }
      .nokona-repair-table .color-list .lace-color {
        width: 35vw;
        margin-right: 7vw;
        margin-left: 1.75vw;
        margin-bottom: 1vw;
      }
        .nokona-repair-table .color-list .lace-color .color-circle {
          margin-right: 3.5vw;
          width: 4.5vw;
          height: 4.5vw;
        }
        .nokona-repair-table .color-list .lace-color .color-name {
          font-size: 3.5vw;
        }
    }

.nokona-repair-table .color-image2 {
    width: 50%;
    max-width: 329px;
    display: inline-block;
    background: url(/wp-content/themes/nokona-2019/img/colors2.jpg) center no-repeat;
    background-size: cover;
  }

.nokona-repair-table .color-image2 .spacer {
      padding-top: 60.486%;
    }

@media (max-width: 600px) {
  .nokona-repair-table .color-image2 {
      width: 100%
  }
    }

.nokona-repair-table .clearfix {
    clear: both;
  }

/* need to ensure if woocommerce puts this class on the body it doesn't mess layout up */

body .woocommerce {
  padding: 60px 0;
}

body .woocommerce .cross-sells .onsale {
      display: none;
    }

body .woocommerce .cross-sells .product .button.button.button:is(.add_to_cart_button, .product_type_simple) {
        padding: 0.7em 0.8em 0.6em;
        margin-top: 0;
      }

.woocommerce-MyAccount-navigation {
  text-align: left;
}

.woocommerce-MyAccount-navigation li {
    padding: 5px 0;
  }

.woocommerce-MyAccount-navigation a {
    display: inline-block;
    color: #000;
    font-weight: bold;
    letter-spacing: 0.04em;
    border-bottom: solid 1px rgba(0, 0, 0, 0)
  }

.woocommerce-MyAccount-navigation a:hover {
      color: #ff6b00;
    }

.woocommerce-MyAccount-navigation .is-active a {
    color: #ff6b00;
    border-bottom: solid 1px #000;
  }

#customer-details {
  margin-bottom: 30px;
}

.woocommerce-checkout .select2-container--default .select2-selection--single {
    box-sizing: content-box;
    padding: 0 6px;
    border-radius: 0;
  }

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
      top: 7px;
    }

.woocommerce-checkout .order-comments {
    height: 150px;
  }

.woocommerce-checkout h3 {
    font: 900 18px/21.6px "Campton", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 7px;
    white-space: nowrap;
  }

.woocommerce-checkout .woocommerce-error {
    padding: 0;
    position: relative;
    z-index: -1;
    margin-top: -200px;
    padding-top: 200px;
    background-color: transparent;
    background-color: initial;
    border-top: none;
    list-style-type: disc;
    list-style-type: initial;
    list-style-position: inside
  }

.woocommerce-checkout .woocommerce-error::before {
      display: none;
    }

.woocommerce-checkout .woocommerce-error > li {
      padding-left: 3.5em !important;
      padding-right: 2em;
      background-color: #f7f6f7;
      text-align: left;
      list-style-type: disc !important;
      list-style-type: initial !important;
      list-style-position: inside !important
    }

.woocommerce-checkout .woocommerce-error > li:first-child {
        border-top: 3px solid #b81c23;
        padding-top: 1em;
        position: relative
      }

.woocommerce-checkout .woocommerce-error > li:first-child::before {
          font-family: WooCommerce;
          content: "\e016";
          display: inline-block;
          position: absolute;
          top: 1em;
          left: 1.5em;
          color: #b81c23;
          font-weight: 700;
        }

.woocommerce-checkout .woocommerce-error > li:last-child {
        padding-bottom: 1em
      }

.woocommerce-checkout .woocommerce-error > li:last-child::after {
          content: "Incomplete fields are marked below in RED";
          color: #b81c23;
          display: block;
          text-align: center;
          margin-top: 1em;
          font-weight: 600;
        }

.woocommerce-cart-form .variation-AdditionalSessionParameters {
  display: none !important;
}

.sms-marketing-boss {
  text-align: left;
  padding-top: 1.5em;
  padding-bottom: 1em;
}

.sms-marketing-boss p {
    margin-bottom: 6px;
    padding: 3px;
    max-width: 532px;
  }

.sms-marketing-boss .boss {
    font-size: 1.2em;
  }

.sms-marketing-boss .ext {
    font-size: 0.9em;
    line-height: 120%;
  }

.sms-marketing-boss label {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

.sms-marketing-boss input[type="checkbox"] {
    margin: -2px 8px 0px 0px;
  }

.mc-nag-form-cart {
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
  margin-bottom: min(38px, 6.3333vw);
}

.mc-nag-form-cart h2 {
    margin-bottom: 16px;
    text-align: left;
  }

.mc-nag-form-cart .visible {
    display: flex;
    grid-gap: 18px;
    grid-gap: 18px;
    gap: 18px;
  }

.mc-nag-form-cart input[type="email"] {
    width: 275px;
    text-transform: uppercase;
    font: 500 12px/1 "Campton", sans-serif
  }

.mc-nag-form-cart input[type="email"]::-moz-placeholder {
      font-weight: 400;
    }

input[type="email"]::-moz-placeholder {
      font-weight: 400;
    }

.mc-nag-form-cart input[type="email"]::placeholder {
      font-weight: 400;
    }

.mc-nag-form-cart input[type="submit"] {
    --color: #e6e6e6;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: var(--color);
    border: 2px solid var(--color);
    color: #666;
    transition: background-color 0.2s linear, color 0.2s linear;
    font-size: 16px;
    padding-left: 2em;
    padding-right: 2em;
  }

.mc-nag-form-cart input[type="email"]:valid + input[type="submit"]:not(:disabled) {
    --color: #ff6b00;
    color: #fff;
    cursor: pointer
  }

.mc-nag-form-cart input[type="email"]:valid + input[type="submit"]:not(:disabled):hover {
      background-color: #fff;
      color: var(--color);
    }

body:is(.cart, .checkout) .variation-DeviceMeta,
body:is(.cart, .checkout) .variation-SessionMeta,
body:is(.cart, .checkout) .variation-AdditionalSessionParameters {
  display: none !important;
}

input[type="submit"][name="ced_new_return_request"].btn.btn,
input[type="submit"].wps_rma_view_order.btn.btn,
input[type="submit"][name="wps_rma_return_request_submit"].btn.btn {
  border: 2px solid #ff6b00;
  background-color: #ff6b00;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 0.5em 1.5em;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s linear, color 0.2s linear
}

input[type="submit"][name="ced_new_return_request"].btn.btn:hover, input[type="submit"].wps_rma_view_order.btn.btn:hover, input[type="submit"][name="wps_rma_return_request_submit"].btn.btn:hover {
    background-color: #fff;
    color: #ff6b00;
  }

#wps_rma_return_request_container {
  max-width: 1140px;
  margin: 0 auto;
  padding-bottom: 48px;
}

body.refund-request-form #main {
  padding-top: 48px;
}

#wps_rma_return_request_container.wps-rma-form__header {
  padding-bottom: 0;
  background-color: #ff6b00;
}

.woocommerce-product-review-summary {
  display: flex;
  font-size: 11px;
  line-height: 1.2;
  color: #000;
  font-weight: 600;
  margin-top: 0.8em;
  grid-gap: 0.5em;
  grid-gap: 0.5em;
  gap: 0.5em;
  align-items: center;
}

body:is(.edgex, .dark-body, .dark-theme) .woocommerce-product-review-summary {
    color: #fff;
  }

@media (max-width: 400px) {

.woocommerce-product-review-summary {
    font-size: 10px
}
  }

.woocommerce-product-review-summary .rating-num,
  .woocommerce-product-review-summary .review-count {
    height: 1em;
    margin-top: 0.2em;
  }

.woocommerce-product-review-summary .review-stars {
    position: relative;
    height: 11.2321px;
    width: 64px
  }

.woocommerce-product-review-summary .review-stars::before,
    .woocommerce-product-review-summary .review-stars::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      -webkit-mask: url(/wp-content/themes/nokona-2019/img/stars.svg) no-repeat center/auto 100%;
      mask: url(/wp-content/themes/nokona-2019/img/stars.svg) no-repeat center/auto 100%;
    }

.woocommerce-product-review-summary .review-stars::before {
      left: 0;
      width: calc(0 * 100%);
      width: calc(0 * 100%);
      width: calc(var(--alpha, 0) * 100%);
      background-color: #ed732d;
      -webkit-mask-position: left center;
      mask-position: left center;
    }

.woocommerce-product-review-summary .review-stars::after {
      right: 0;
      width: calc((1 - 0) * 100%);
      width: calc((1 - 0) * 100%);
      width: calc((1 - var(--alpha, 0)) * 100%);
      background-color: #afafaf;
      -webkit-mask-position: right center;
      mask-position: right center;
    }

body.woocommerce-page .size-woocommerce_thumbnai[data-session]:not([src]) {
    visibility: hidden;
  }

body.woocommerce-page .cart-image-preview {
    color: #ff6b00;
    font-weight: 500;
    cursor: pointer;
    -webkit-text-decoration: underline rgba(255,255,255,0);
            text-decoration: underline rgba(255,255,255,0);
    transition: -webkit-text-decoration-color 0.14s linear;
    transition: text-decoration-color 0.14s linear;
    transition: text-decoration-color 0.14s linear, -webkit-text-decoration-color 0.14s linear
  }

body.woocommerce-page .cart-image-preview:hover {
      -webkit-text-decoration-color: #ff6b00;
              text-decoration-color: #ff6b00;
    }

body.woocommerce-page .cart_item[data-product-id="125735"] .product-quantity .quantity {
    display: none;
  }

@charset "UTF-8";

/*!
 * Pikaday
 * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
 */

.pika-single {
    z-index: 9999;
    display: block;
    position: relative;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*
clear child float (pika-lendar), using the famous micro clearfix hack
http://nicolasgallagher.com/micro-clearfix-hack/
*/

.pika-single:before,
.pika-single:after {
    content: " ";
    display: table;
}

.pika-single:after { clear: both }

.pika-single.is-hidden {
    display: none;
}

.pika-single.is-bound {
    position: absolute;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
}

.pika-lendar {
    float: left;
    width: 240px;
    margin: 8px;
}

.pika-title {
    position: relative;
    text-align: center;
}

.pika-label {
    display: inline-block;
    position: relative;
    z-index: 9999;
    overflow: hidden;
    margin: 0;
    padding: 5px 3px;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    background-color: #fff;
}

.pika-title select {
    cursor: pointer;
    position: absolute;
    z-index: 9998;
    margin: 0;
    left: 0;
    top: 5px;
    opacity: 0;
}

.pika-prev,
.pika-next {
    display: block;
    cursor: pointer;
    position: relative;
    outline: none;
    border: 0;
    padding: 0;
    width: 20px;
    height: 30px;
    /* hide text using text-indent trick, using width value (it's enough) */
    text-indent: 20px;
    white-space: nowrap;
    overflow: hidden;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    opacity: .5;
}

.pika-prev:hover,
.pika-next:hover {
    opacity: 1;
}

.pika-prev,
.is-rtl .pika-next {
    float: left;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
}

.pika-next,
.is-rtl .pika-prev {
    float: right;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
}

.pika-prev.is-disabled,
.pika-next.is-disabled {
    cursor: default;
    opacity: .2;
}

.pika-select {
    display: inline-block;
}

.pika-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}

.pika-table th,
.pika-table td {
    width: 14.285714285714286%;
    padding: 0;
}

.pika-table th {
    color: #999;
    font-size: 12px;
    line-height: 25px;
    font-weight: bold;
    text-align: center;
}

.pika-button {
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    border: 0;
    margin: 0;
    width: 100%;
    padding: 5px;
    color: #666;
    font-size: 12px;
    line-height: 15px;
    text-align: right;
    background: #f5f5f5;
    height: auto;
    height: initial;
}

.pika-week {
    font-size: 11px;
    color: #999;
}

.is-today .pika-button {
    color: #33aaff;
    font-weight: bold;
}

.is-selected .pika-button,
.has-event .pika-button {
    color: #fff;
    font-weight: bold;
    background: #33aaff;
    box-shadow: inset 0 1px 3px #178fe5;
    border-radius: 3px;
}

.has-event .pika-button {
    background: #005da9;
    box-shadow: inset 0 1px 3px #0076c9;
}

.is-disabled .pika-button,
.is-inrange .pika-button {
    background: #D5E9F7;
}

.is-startrange .pika-button {
    color: #fff;
    background: #6CB31D;
    box-shadow: none;
    border-radius: 3px;
}

.is-endrange .pika-button {
    color: #fff;
    background: #33aaff;
    box-shadow: none;
    border-radius: 3px;
}

.is-disabled .pika-button {
    pointer-events: none;
    cursor: default;
    color: #999;
    opacity: .3;
}

.is-outside-current-month .pika-button {
    color: #999;
    opacity: .3;
}

.is-selection-disabled {
    pointer-events: none;
    cursor: default;
}

.pika-button:hover,
.pika-row.pick-whole-week:hover .pika-button {
    color: #fff;
    background: #ff8000;
    box-shadow: none;
    border-radius: 3px;
}

/* styling for abbr */

.pika-table abbr {
    border-bottom: none;
    cursor: help;
}

.variations_form {
  max-width: 520px;
  margin: 0 auto;
}

.variations_form input[type="text"],
  .variations_form input[type="password"],
  .variations_form input[type="number"],
  .variations_form input[type="email"],
  .variations_form input[type="tel"],
  .variations_form input[type="date"],
  .variations_form textarea {
    width: 100%;
    border-color: #c4c4c4;
    font-size: 16px
  }

.variations_form input[type="text"]::-moz-placeholder, .variations_form input[type="password"]::-moz-placeholder, .variations_form input[type="number"]::-moz-placeholder, .variations_form input[type="email"]::-moz-placeholder, .variations_form input[type="tel"]::-moz-placeholder, .variations_form input[type="date"]::-moz-placeholder, .variations_form textarea::-moz-placeholder {
      color: #c4c4c4;
      font-size: 12px;
      font-weight: 500;
    }

input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="date"]::-moz-placeholder, textarea::-moz-placeholder {
      color: #c4c4c4;
      font-size: 12px;
      font-weight: 500;
    }

.variations_form input[type="text"]::placeholder, .variations_form input[type="password"]::placeholder, .variations_form input[type="number"]::placeholder, .variations_form input[type="email"]::placeholder, .variations_form input[type="tel"]::placeholder, .variations_form input[type="date"]::placeholder, .variations_form textarea::placeholder {
      color: #c4c4c4;
      font-size: 12px;
      font-weight: 500;
    }

.variations_form input[type="number"] {
    height: 35px;
    box-sizing: border-box;
    border: solid 1px #c4c4c4;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 33px;
    margin-bottom: 14px;
  }

.variations_form textarea {
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
  }

.variations_form .variations {
    margin-bottom: 15px;
  }

.variations_form .variations .value {
      position: relative;
      width: 170px;
    }

.variations_form .quantity {
    margin-bottom: 15px;
  }

.variations_form .quantity .value {
      position: relative;
      width: 170px;
    }

.variations_form select {
    margin: 0 15px;
  }

.pwgc-field-container {
  margin-bottom: 14px;
}

.pwgc-label {
  font-weight: 600;
}

.pwgc-subtitle {
  font-size: 11px !important;
  line-height: 1.465 !important;
  color: #767676 !important;
  margin-top: 4px;
}

.pwgc-input-text {
  width: 100%;
}

#pwgc-recipient-count {
  font-weight: 600;
}

#pwgc-quantity-one-per-recipient {
  display: none;
}

#pwgc-message {
  display: block;
  height: 100px;
  width: 100%;
}

.pwgc-hidden {
  display: none;
}

#pwgc-custom-amount-form {
  transition: all 0.3s ease-in-out;
}

/* Don't really need to repeat this on the Product Page */

.woocommerce-variation-description,
.woocommerce-variation-price,
.woocommerce-variation-availability {
  display: none !important;
}

.terms-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 30px;
}

.terms-wrapper #terms-checkbox {
    height: 30px;
    width: 30px;
    box-sizing: border-box;
    -webkit-appearance: none;
    background-color: white;
    border: 2px solid #e6e6ee;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    margin-right: 16px;
    transition: background-color 1.3s linear
  }

.terms-wrapper #terms-checkbox::before {
      position: absolute;
      content: "";
      background-color: #000;
      width: 20%;
      height: 0;
      border-radius: 3px;
      transform-origin: top;
      transform: rotate(-45deg);
      left: 2px;
      top: 8px;
    }

.terms-wrapper #terms-checkbox::after {
      position: absolute;
      content: "";
      background-color: #000;
      width: 20%;
      height: 0;
      border-radius: 3px;
      transform-origin: top;
      transform: rotate(220deg);
      right: 12px;
      top: 18px;
    }

.terms-wrapper #terms-checkbox#terms-checkbox:checked::before {
        height: 55%;
        transition: height 0.2s ease-in;
      }

.terms-wrapper #terms-checkbox#terms-checkbox:checked::after {
        height: 100%;
        transition: height 0.2s ease-out 0.15s;
      }

.terms-wrapper #terms-checkbox.on-err {
      background-color: #e26666;
      transition: background-color 0s linear;
    }

.terms-wrapper .gift-card-terms {
    max-width: calc(100% - 52px);
    text-align: left;
    font: 21px/100% "Campton", sans-serif;
  }

.gift-card-address {
  font: 21px/100% "Campton", sans-serif;
  margin: 30px auto 40px;
}

.color-black {
  background-color: #000;
}

.border-black {
  border-color: #000;
}

.color-white {
  background-color: #e9eaea;
}

.border-white {
  border-color: #e9eaea;
}

.color-navy {
  background-color: #192c4e;
}

.border-navy {
  border-color: #192c4e;
}

.color-red {
  background-color: #ac1e23;
}

.border-red {
  border-color: #ac1e23;
}

.color-royal {
  background-color: #243f8b;
}

.border-royal {
  border-color: #243f8b;
}

.color-maroon {
  background-color: #631719;
}

.border-maroon {
  border-color: #631719;
}

.color-green {
  background-color: #304934;
}

.border-green {
  border-color: #304934;
}

.color-purple {
  background-color: #3d2a71;
}

.border-purple {
  border-color: #3d2a71;
}

.color-columbia {
  background-color: #5baed0;
}

.border-columbia {
  border-color: #5baed0;
}

.color-orange {
  background-color: #f17d21;
}

.border-orange {
  border-color: #f17d21;
}

.color-gold {
  background-color: #f2ad34;
}

.border-gold {
  border-color: #f2ad34;
}

.color-pink {
  background-color: #c64565;
}

.border-pink {
  border-color: #c64565;
}

.color-teal {
  background-color: #138c8d;
}

.border-teal {
  border-color: #138c8d;
}

.color-tx-orange {
  background-color: #c45527;
}

.border-tx-orange {
  border-color: #c45527;
}

.color-vegas {
  background-color: #aca173;
}

.border-vegas {
  border-color: #aca173;
}

.qv-overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  background-color: rgba(48,47,47,0.84314);
  z-index: 103;
}

.qv-overlay .qv-modal {
    width: 700px;
    max-height: 590px;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }

body.show-qv-overlay {
  overflow: hidden;
}

body.show-qv-overlay .qv-overlay {
    display: flex;
  }

.qv-header {
  color: #cccccb;
  border-bottom: 2px solid #e6e6e6;
  height: 52px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font: lighter 21px/125% "Campton", sans-serif;
}

.qv-exit {
  position: absolute;
  right: 24px;
  width: 23px;
  height: 23px;
  cursor: pointer
}

.qv-exit::before,
  .qv-exit::after {
    content: "";
    height: 100%;
    width: 4px;
    background-color: #000;
    position: absolute;
    transition: background-color 0.25s linear;
  }

.qv-exit::before {
    transform: rotate(45deg);
  }

.qv-exit::after {
    transform: rotate(-45deg);
  }

.qv-exit:hover::before,
    .qv-exit:hover::after {
      background-color: #ff6b00;
      transition: background-color 0.25s linear;
    }

.qv-product-container {
  height: 100%;
  width: 100%;
  display: flex
}

.qv-product-container.loading {
    opacity: 0;
  }

.qv-product-images {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: calc(100% - 337px);
}

.qv-product-images .qv-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: solid 2px #e6e6e6;
    margin: 7px;
    position: relative;
  }

.qv-product-images .image-main {
    width: 82%;
    padding-top: 82%;
  }

.qv-product-images .primary-image,
  .qv-product-images .secondary-image {
    width: 38.5%;
    padding-top: 38.5%;
    transition: border-color 0.25s linear;
    position: relative;
    cursor: pointer
  }

.qv-product-images .primary-image:hover, .qv-product-images .secondary-image:hover {
      border-color: #999;
      transition: border-color 0.25s linear;
    }

.qv-product-images .primary-image::after, .qv-product-images .secondary-image::after {
      content: "";
      width: calc(100% + 4px);
      height: 3px;
      position: absolute;
      background-color: #ff6b00;
      left: -2px;
      bottom: -2px;
      opacity: 0;
      transition: opacity 0.25s linear;
    }

.qv-product-images .primary-image.selected::after, .qv-product-images .secondary-image.selected::after {
        opacity: 1;
        transition: opacity 0.25s linear;
      }

.qv-product-images .primary-image.no-content, .qv-product-images .secondary-image.no-content {
      display: none;
    }

.qv-product-images .dummy-image {
    width: 38.5%;
    margin: 0 9px;
  }

.qv-product-info {
  height: calc(100% - 30px);
  width: 337px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-right: 1px;
  padding-right: 27px;
  padding-top: 30px;
}

.qv-product-info .product-specs {
    width: 317px;
    text-align: left
  }

@media (max-width: 700px) {
  .qv-product-info .product-specs {
      width: auto;
      margin-top: 20px
  }
    }

.qv-product-info .product-specs h2 {
      font: 100 28px/32px "Campton", sans-serif;
    }

.qv-product-info .product-specs h1 {
      font: 700 28px/32px "Campton", sans-serif;
      margin-bottom: 5px;
    }

@media (max-width: 600px) {
      .qv-product-info .product-specs h2,
      .qv-product-info .product-specs h1 {
        font-size: 4.667vw;
        line-height: 5.333vw;
      }
    }

@media (max-width: 450px) {
      .qv-product-info .product-specs h2,
      .qv-product-info .product-specs h1 {
        font-size: 21px;
        line-height: 24px;
      }
    }

.qv-product-info .standard-options .option {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

.qv-product-info .standard-options .option select {
        border: 1px solid #a6a6a6;
        border-radius: 0;
        color: #3b3b3b;
        box-sizing: border-box;
        font: 16px/16px "Campton", sans-serif;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding: 10px 30px 8px 9px;
        background: #fff no-repeat right center/21px 8px url(/wp-content/themes/nokona-2019/img/dropdown-arrow.svg);
      }

.qv-product-info .standard-options .option-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

.qv-product-info .standard-options .option-container input[type="text"] {
        width: 260px;
        height: 35px;
        box-sizing: border-box;
        border: solid 1px #c4c4c4;
        padding: 0 10px;
        font-size: 16px;
        font-weight: 500;
        line-height: 33px;
      }

.qv-product-info .standard-options .option-container .sample-link.popup-link {
        display: none;
      }

.qv-product-info .standard-options .custom-price {
      text-align: left;
    }

.qv-footer {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: bold 14px/150% "Campton", sans-serif;
}

.qv-footer a {
    color: black;
    border-bottom: 2px solid transparent;
    transition: border-color 0.25s linear;
    cursor: pointer
  }

.qv-footer a:hover {
      border-color: #ff6b00;
      transition: border-color 0.25s linear;
    }

.qv-product-info.use-scroll {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  scrollbar-width: thin;
}

/* This class controls what elements have the new fancy scrollbar CSS */

.qv-product-info {
  scrollbar-color: black #e6e6e6;
}

.qv-product-info::-webkit-scrollbar {
  height: auto;
  width: 6px;
}

.qv-product-info::-webkit-scrollbar-track {
  background-color: #e6e6e6;
  border-radius: 2px;
}

.qv-product-info::-webkit-scrollbar-thumb {
  background-color: rgb(0, 0, 0);
  border-radius: 2px;
}

.qv-product-info::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.7);
}

.qv-product-info::-webkit-scrollbar-thumb:vertical {
  min-height: 1.5rem;
}

.qv-product-info::-webkit-scrollbar-thumb:horizontal {
  min-width: 1.5rem;
}

.circle-loader {
  position: absolute;
  width: 13%;
  padding-top: 13%
}

.circle-loader.hidden {
    display: none;
  }

.circle-loader .circle-reg,
  .circle-loader .circle-diag {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

.circle-loader .circle-reg .dot, .circle-loader .circle-diag .dot {
      width: 20%;
      height: 20%;
      background-color: #c7c7c7;
      position: absolute;
      border-radius: 50%;
      opacity: 0
    }

.circle-loader .circle-reg .dot:first-child, .circle-loader .circle-diag .dot:first-child {
        top: 0px;
        animation: dot-fade 1s linear 0s infinite;
      }

.circle-loader .circle-reg .dot:nth-child(2), .circle-loader .circle-diag .dot:nth-child(2) {
        right: 0px;
        animation: dot-fade 1s linear 0.25s infinite;
      }

.circle-loader .circle-reg .dot:nth-child(3), .circle-loader .circle-diag .dot:nth-child(3) {
        bottom: 0px;
        animation: dot-fade 1s linear 0.5s infinite;
      }

.circle-loader .circle-reg .dot:nth-child(4), .circle-loader .circle-diag .dot:nth-child(4) {
        left: 0px;
        animation: dot-fade 1s linear 0.75s infinite;
      }

.circle-loader .circle-diag {
    transform: rotate(45deg);
  }

.circle-loader .circle-diag .dot:first-child {
        animation: dot-fade 1s linear 0.125s infinite;
      }

.circle-loader .circle-diag .dot:nth-child(2) {
        animation: dot-fade 1s linear 0.375s infinite;
      }

.circle-loader .circle-diag .dot:nth-child(3) {
        animation: dot-fade 1s linear 0.625s infinite;
      }

.circle-loader .circle-diag .dot:nth-child(4) {
        animation: dot-fade 1s linear 0.875s infinite;
      }

@keyframes dot-fade {
  10% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}

body.page-template-size-guide {
  padding-top: 0;
}

body.page-template-size-guide .size-guide-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }

body.page-template-size-guide .size-guide-container .size-guide-title {
      margin: auto;
    }

body.page-template-size-guide .medium-container {
    padding: 0;
  }

body.page-template-size-guide .medium-container .wp-block-image img,
    body.page-template-size-guide .medium-container img {
      max-width: 100%;
      height: auto;
    }

.show-products-images .show-image-container {
    width: calc(100% - 28px);
    max-width: 1000px;
    margin: 0 auto;
  }

.show-products-images .show-image-container .show-image {
      width: 100%;
    }

.show-products-images .show-image-container.full {
      width: 100%;
      max-width: none;
    }

.show-products-images .show-image-container.full .show-image {
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center;
           object-position: center;
      }

#discount-banner {
  text-transform: uppercase;
  color: #ff6b00;
  background-color: #000;
  position: fixed;
  top: 235px;
  right: 0;
  z-index: 12;
  padding: 35px 67px;
  box-sizing: border-box;
  width: 405px;
  transform: translateX(calc(100% - 75px));
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px
}

#discount-banner.open {
    transform: translateX(0);
  }

#discount-banner.open .banner-title {
      opacity: 0;
      transition: opacity 0.3s linear;
    }

#discount-banner.open .banner-content {
      opacity: 1;
    }

#discount-banner.open .opener::after {
      transform: scale(1);
    }

#discount-banner.open.opening .opener::after {
        transition: transform 0.3s cubic-bezier(0.41, -0.01, 0.6, 1.6) 0.2s;
      }

#discount-banner.open:not(.opening) .opener:hover::after {
        transform: scale(1.16);
        transition: transform 0.3s cubic-bezier(0.41, -0.01, 0.6, 3);
      }

#discount-banner .banner-title {
    font: 300 15px/168% "EvelethClean", sans-serif;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-25%, -50%) rotate(90deg);
    transition: opacity 0.3s linear 0.3s;
  }

#discount-banner .banner-content {
    font: 300 25px/168% "EvelethClean", sans-serif;
    opacity: 0;
    transition: opacity 0.3s linear
  }

@media (max-width: 390px) {
  #discount-banner .banner-content {
      font-size: 6.41vw
  }
    }

#discount-banner .banner-content .number {
      color: #fff;
    }

#discount-banner .opener {
    position: absolute;
    width: 75px;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
  }

#discount-banner .opener::after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 11px 0 11px 14px;
      border-color: transparent transparent transparent #ff6b00;
      transition: transform 0.3s ease-in-out;
      transform: scale(0);
    }

@media (max-width: 600px) {

#discount-banner {
    width: 100vw;
    top: 44px;
    transform: translateY(calc(80px - 100%));
    padding: 23px 67px 70px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}
    #discount-banner.open {
      transform: translateY(0);
    }
      #discount-banner.open .banner-title {
        opacity: 1;
        transition: color 0.3s linear;
      }
        #discount-banner.open .banner-title span {
          width: 0;
          margin-right: 0;
        }
        #discount-banner.open .banner-title::after {
          transform: rotate(0deg) scale(1.3);
        }
      #discount-banner.open .banner-content {
        transition: opacity 0.3s linear 0.2s;
      }
    #discount-banner .banner-title {
      transform: rotate(0deg);
      top: auto;
      bottom: 27.8px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
      #discount-banner .banner-title span {
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        white-space: nowrap;
        margin-right: 7px;
        overflow: hidden;
      }
      #discount-banner .banner-title::after {
        content: "";
        display: block;
        position: relative;
        top: -1px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0px 8px 10px 8px;
        border-color: transparent transparent #ff6b00 transparent;
        transform: rotate(180deg);
        transition: transform 0.3s ease-in-out;
      }
    #discount-banner .opener {
      top: auto;
      bottom: 0;
      width: 100%;
      height: 80px
    }
      #discount-banner .opener::after {
        display: none;
      }
  }

@media (max-width: 390px) {

#discount-banner {
    padding: 6.41vw 17.17vw 20.51vw;
    transform: translateY(calc(20.51vw - 100%));
}
    #discount-banner .banner-title {
      bottom: calc((100vw - 82px) / 11);
    }
  }

@media (max-width: 600px) {

#product-show-teams {
    padding-top: 106px
}
  }

#product-show-content.empty {
    height: 400px;
  }

#product-show-content .loader-anim {
    margin: 15vw auto;
    background-image: url(/wp-content/themes/nokona-2019/img/loading-spinner.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 200px;
    height: 200px
  }

@media (max-width: 600px) {
  #product-show-content .loader-anim {
      width: calc((100vw + 400px) / 5);
      height: calc((100vw + 400px) / 5)
  }
    }

.wwp_wholesaler_registration {
  padding-top: 42px;
}

.wwp_wholesaler_registration_form,
#wholesaler_shipping_address {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 24px;
  grid-gap: 24px;
  gap: 24px;
  padding-top: 18px;
}

.wwp_wholesaler_registration_form h2, #wholesaler_shipping_address h2 {
		width: 100%;
    padding-top: 28px;
  }

.woocommerce-form-row {
  width: auto;
  width: initial;
  flex: 1 1 40%
}

@media (max-width: 600px) {

.woocommerce-form-row {
    flex: 1 0 220px
}
  }

.woocommerce-form-row.woocommerce-form-row.woocommerce-form-row input {
  width: 100%;
}

.wwp-password-toggle,
.wwp-confirm-password-toggle {
  font-size: 0;
width: 24px;
aspect-ratio: 1
}

.wwp-password-toggle::before, .wwp-confirm-password-toggle::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
		transform-origin: 50% 56%;
    background: url(/wp-content/themes/nokona-2019/img/eye-con.svg) no-repeat center/contain;
  }

input[type=text] + :is(.wwp-password-toggle, .wwp-confirm-password-toggle)::before {
		transform: none;
  }

input[type=text] + :is(.wwp-password-toggle, .wwp-confirm-password-toggle)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(50% - 2px);
    width: 4px;
    height: 4px;
    border-radius: 100px;
    background-color: #000;
  }

.woocommerce-Button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #ff6b00;
  border: 2px solid #ff6b00;
  padding: 0.4em 2em 0.5em;
  color: #fff;
  transition: color 0.2s linear, background-color 0.2s linear;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 20px
}

.woocommerce-Button:hover {
    color: #ff6b00;
    background-color: #fff;
  }

.wwp-shipping-address {
  width: 100%;
  flex: initial;
}

.wwp-shipping-address input#wwp_wholesaler_copy_billing_address {
    margin-top: 3px;
    align-self: flex-start;
  }

body {
  height: 100%;
  font: 14px/21px "Campton", sans-serif;
  color: #000;
  text-align: center
}

body.overflow-hidden {
    overflow: hidden;
  }

@media (max-width: 900px) {

body {
    padding-top: 88px
}

    body.menu-showing {
      overflow: hidden;
    }
  }

@media (max-width: 600px) {

body {
    padding-top: 67px
}
  }

body main {
    background-size: 100% auto;
    background-position: bottom;
    background-repeat: no-repeat;
    overflow: hidden;
  }

body .mobile-truncate {
    transition: height 0.4s cubic-bezier(0.77, 0, 0.175, 1)
  }

body .mobile-truncate.truncate {
      position: relative;
      margin-bottom: 1rem;
      overflow: hidden;
      cursor: pointer
    }

body .mobile-truncate.truncate::before {
        content: "";
        z-index: 3;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 4rem;
        background-image: linear-gradient(rgba(255, 255, 255, 0), #fff, #fff);
        transition: opacity 0.4s linear;
      }

body .mobile-truncate.truncate .expander {
        z-index: 3;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        position: absolute;
        bottom: -3px;
        left: 50%;
        transform: translateX(-50%);
        text-decoration: underline;
        -webkit-text-decoration-color: transparent;
                text-decoration-color: transparent;
        transition: -webkit-text-decoration-color 0.25s linear;
        transition: text-decoration-color 0.25s linear;
        transition: text-decoration-color 0.25s linear, -webkit-text-decoration-color 0.25s linear;
      }

body .mobile-truncate.truncate.expanded::before {
          opacity: 0;
          transition: opacity 0.1s linear 0.3s;
        }

body .mobile-truncate.truncate:hover .expander {
          -webkit-text-decoration-color: #ff6b00;
                  text-decoration-color: #ff6b00;
        }

body .mobile-truncate.mask-gradient::before {
        display: none;
      }

body .mobile-truncate.mask-gradient .text-content-wrapper {
        height: 100%;
        overflow: hidden;
        -webkit-mask: linear-gradient(to top, #fff 0%, #fff 1.5rem, #fff 3.5rem, #fff 100%) no-repeat bottom / 100% 100%;
        mask: linear-gradient(to top, #fff 0%, #fff 1.5rem, #fff 1.5rem, #fff 100%) no-repeat bottom / 100% 100%;
        transition: background-image 0.3s linear;
      }

body .mobile-truncate.mask-gradient .text-content-wrapper > p {
          margin-bottom: 0;
          padding-bottom: 1.6em;
        }

body .mobile-truncate.mask-gradient.truncate .text-content-wrapper {
        -webkit-mask: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1.5rem, #fff 3.5rem, #fff 100%) no-repeat bottom / 100% 100%;
        mask: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1.5rem, #fff 1.5rem, #fff 100%) no-repeat bottom / 100% 100%;
      }

.woocommerce-cart table.cart .product-thumbnail {
  width: 125px;
}

.woocommerce-cart table.cart .product-thumbnail img {
    width: auto;
    height: auto;
    max-width: 125px;
    max-height: 125px;
  }

a {
  color: #ff6b00;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
#pwgc-redeem-button {
  background-color: #ff6b00;
  border-radius: 0;
  border: solid 2px #ff6b00;
  transition: all 0.25s ease;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.618em 1em;
  color: #fff
}

.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, #pwgc-redeem-button:hover {
    color: #ff6b00;
    background: #fff;
  }

#pwgc-redeem-button {
  margin-left: auto;
}