/* colors */
/* site palette */
/* mixins */
html,
body {
  background-color: #1a1a1a;
  font-family: 'SST-Light', 'SST', Arial, sans-serif;
  position: relative;
  color: #212121; }

main {
  background-color: #E3E3E3; }
  main h1,
  main h2,
  main h3 {
    font-family: 'SST-Light', 'SST', Arial, sans-serif;
    text-transform: none;
    font-weight: normal; }

p {
  color: #212121;
  line-height: 1.5em;
  font-family: 'SST-Light', 'SST', Arial, sans-serif;
  font-size: 1em; }
  @media (min-width: 998px) {
    p {
      font-size: 1.25em; } }

a.button {
  font-family: 'SST-Heavy', 'SST', Arial, sans-serif;
  transition: all 0.3s ease; }
  a.button.inverse {
    background-color: #fff;
    color: #000;
    padding: 1.5em; }
  a.button:hover {
    color: #fff;
    background-color: #be3216;
    text-decoration: underline;
    transition: all 0.3s ease; }

.m-section .container {
  max-width: 1350px; }

.expandable-section {
  display: none; }

/* slider styles */
.slick-dots li button:before {
  font-size: 12px; }

/* sticky nav styles */
#accy-nav {
  position: fixed;
  top: 56px;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 5;
  overflow: auto;
  padding: 0.5em 0;
  display: none; }
  #accy-nav ul {
    list-style: none;
    display: inline-block;
    min-width: 800px;
    padding-left: 0; }
    #accy-nav ul li {
      display: inline-block;
      padding: 0 1em; }
      #accy-nav ul li a {
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1em; }
  @media (min-width: 768px) {
    #accy-nav {
      top: 56px; } }
  @media (min-width: 900px) {
    #accy-nav {
      text-align: center; } }
  @media (min-width: 992px) {
    #accy-nav {
      top: 85px; } }

/* banner styles */
#accy-hero-banner {
  background: url("../images/banner-accessories-v2.jpg") center center no-repeat;
  background-size: cover;
  min-height: 600px; }
  #accy-hero-banner .banner-container {
    display: flex;
    align-items: center; }
    #accy-hero-banner .banner-container .caption {
      margin: 0 auto;
      padding: 0 1em; }
      #accy-hero-banner .banner-container .caption h1 {
        color: #fff; }
      #accy-hero-banner .banner-container .caption p {
        color: #fff;
        margin-top: 1.5em;
        font-size: 1.25em; }
  #accy-hero-banner .button {
    color: #000;
    background-color: #fff;
    width: 80%;
    padding: 1.5em;
    display: block;
    margin: 1.5em auto; }
  #accy-hero-banner .button-row {
    margin-top: 2em; }
  #accy-hero-banner::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 0; }
  @media (min-width: 600px) {
    #accy-hero-banner .button {
      width: auto;
      display: inline-block;
      margin: 1em;
      min-width: 300px; } }
  @media (min-width: 768px) {
    #accy-hero-banner {
      background: url("../images/banner-accessories-v2.jpg") center center no-repeat;
      background-size: cover;
      height: 100vh; }
      #accy-hero-banner .banner-container .caption h1 {
        font-size: 4em;
        margin-bottom: 0; }
      #accy-hero-banner .banner-container .caption p {
        max-width: 80%;
        margin: 1.5em auto; } }

#faves {
  background-color: #42433E; }
  #faves h2 {
    font-size: 2em;
    color: #fff;
    text-align: center; }
  #faves #accy-nav-slider .slide {
    padding: 1em; }
    #faves #accy-nav-slider .slide .inner {
      height: 200px;
      position: relative; }
      #faves #accy-nav-slider .slide .inner a {
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
        transition: all 0.3s ease; }
        #faves #accy-nav-slider .slide .inner a span {
          position: absolute;
          display: block;
          width: 100%;
          bottom: 0;
          left: 0;
          padding: 1em;
          background-color: rgba(0, 0, 0, 0.85);
          color: #fff;
          text-transform: uppercase;
          text-align: center;
          transition: all 0.3s ease; }
        #faves #accy-nav-slider .slide .inner a:hover, #faves #accy-nav-slider .slide .inner a:focus {
          background-color: rgba(255, 255, 255, 0.2);
          transition: all 0.3s ease; }
          #faves #accy-nav-slider .slide .inner a:hover span, #faves #accy-nav-slider .slide .inner a:focus span {
            background-color: black;
            transition: all 0.3s ease; }
    #faves #accy-nav-slider .slide #slide-mic {
      background: url("../images/nav-mic.jpg") center center no-repeat;
      background-size: cover; }
    #faves #accy-nav-slider .slide #slide-flash {
      background: url("../images/nav-flash.jpg") center center no-repeat;
      background-size: cover; }
    #faves #accy-nav-slider .slide #slide-grip {
      background: url("../images/nav-grip.jpg") center center no-repeat;
      background-size: cover; }
    #faves #accy-nav-slider .slide #slide-media {
      background: url("../images/nav-media.jpg") center center no-repeat;
      background-size: cover; }
    #faves #accy-nav-slider .slide #slide-battery {
      background: url("../images/nav-battery.jpg") center center no-repeat;
      background-size: cover; }
    #faves #accy-nav-slider .slide #slide-compat {
      background: url("../images/nav-compat.jpg") center center no-repeat;
      background-size: cover; }
  #faves #accy-nav-slider .slick-dots li button:before {
    font-size: 12px;
    color: #fff; }

.feature-highlights {
  padding-bottom: 3em; }
  .feature-highlights .section-heading {
    text-align: center; }
  .feature-highlights h2 {
    text-transform: none;
    font-size: 2.25em;
    margin-bottom: 1em; }
  .feature-highlights h3 {
    margin-bottom: 0.5em;
    font-size: 1.65em;
    text-transform: uppercase; }
  .feature-highlights .feature-wrapper .feature-container {
    max-width: 1350px; }
  .feature-highlights .feature-wrapper .feature-image {
    min-height: 400px; }
  .feature-highlights .feature-wrapper .feature-copy {
    padding-top: 3em; }
    .feature-highlights .feature-wrapper .feature-copy h3 {
      margin-top: 0;
      font-size: 1.25em; }
    .feature-highlights .feature-wrapper .feature-copy .model {
      font-size: 2em;
      display: block;
      margin: 0.75em 0 1em 0;
      color: #000; }
    .feature-highlights .feature-wrapper .feature-copy .button.more,
    .feature-highlights .feature-wrapper .feature-copy .button.more-mic {
      color: #fff;
      background-color: #000; }
    .feature-highlights .feature-wrapper .feature-copy .button.open-modal .svg-icon {
      display: inline-block;
      vertical-align: middle;
      margin-right: 0.5em; }
  .feature-highlights .more-row {
    display: block;
    text-align: center; }
    .feature-highlights .more-row .button.more-all,
    .feature-highlights .more-row .button.more-mic-all {
      color: #fff;
      background-color: #000;
      padding: 2em;
      width: 100%; }
      .feature-highlights .more-row .button.more-all .svg-icon,
      .feature-highlights .more-row .button.more-mic-all .svg-icon {
        display: inline-block;
        transition: all 0.3s ease;
        vertical-align: middle; }
      .feature-highlights .more-row .button.more-all.open,
      .feature-highlights .more-row .button.more-mic-all.open {
        color: #fff;
        background-color: #dc3a1a; }
        .feature-highlights .more-row .button.more-all.open .svg-icon,
        .feature-highlights .more-row .button.more-mic-all.open .svg-icon {
          transform: rotate(-180deg);
          transition: all 0.3s ease; }
      @media (min-width: 768px) {
        .feature-highlights .more-row .button.more-all,
        .feature-highlights .more-row .button.more-mic-all {
          width: auto; } }
  .feature-highlights .modal h3 {
    margin-bottom: 1em; }
  @media (min-width: 768px) {
    .feature-highlights h2 {
      font-size: 2.5em; }
    .feature-highlights .feature-wrapper .feature-image {
      min-height: 50vh;
      height: 600px; }
    .feature-highlights .more-row .button#mics-button {
      margin-right: 1em; } }
  @media (min-width: 998px) {
    .feature-highlights {
      padding-top: 5em; }
      .feature-highlights h2 {
        margin-bottom: 0; }
      .feature-highlights .feature-wrapper {
        display: flex;
        align-items: center;
        min-height: 50vh;
        height: 650px;
        margin-top: 5em; }
        .feature-highlights .feature-wrapper .feature-copy {
          padding-top: 0; }
        .feature-highlights .feature-wrapper .feature-image {
          min-height: 650px; } }

.accessoriesWithToggles {
  padding: 3em 0;
  background-color: #191919; }
  .accessoriesWithToggles .collapse-row {
    text-align: right; }
    .accessoriesWithToggles .collapse-row .button {
      color: #000;
      background-color: #fff; }
  .accessoriesWithToggles h2 {
    color: #fff;
    font-size: 2em; }
  .accessoriesWithToggles h3 {
    font-size: 1em;
    margin: 0; }
  .accessoriesWithToggles p {
    font-size: 1em;
    color: #fff; }
  .accessoriesWithToggles .feature h4 {
    margin: 0;
    color: #fff; }
  .accessoriesWithToggles .feature .m-col:first-child {
    padding: 0 1em; }
  .accessoriesWithToggles .feature span.note {
    display: block;
    font-size: 0.65em;
    font-style: italic; }

#mic-highlights {
  background-color: #fff; }
  #mic-highlights #ecmb1m .feature-image {
    background: url("../images/highlight-mic-ecm-b1m.jpg") right center no-repeat;
    background-size: cover; }
  #mic-highlights #xlrk3m .feature-image {
    background: url("../images/highlight-mic-xlrk3m.jpg") center center no-repeat;
    background-size: cover; }
  #mic-highlights #ecmw2bt .feature-image {
    background: url("../images/highlight-mic-ecm-w2bt.jpg") bottom left no-repeat;
    background-size: cover; }
  #mic-highlights #mic-video .feature-image {
    background: url("../images/sound-video-poster.JPG") center center no-repeat;
    background-size: cover; }
  #mic-highlights #scenarios .feature-image {
    background: #191919;
    background: url("../images/highlight-scenarios.jpg") center center no-repeat;
    background-size: cover; }

#more-mics .inline-video-w-title > .intro {
  padding: 0 0 3em 0; }
  #more-mics .inline-video-w-title > .intro h2,
  #more-mics .inline-video-w-title > .intro p {
    text-align: center; }
#more-mics .inline-video-w-title .videoOuterWrapper {
  max-width: 80%;
  margin: 0 auto; }
@media (min-width: 768px) {
  #more-mics .inline-video-w-title > .intro {
    max-width: 80%;
    margin: 0 auto; } }

#hear-the-difference .scenarios > .intro {
  padding-bottom: 3em; }
  #hear-the-difference .scenarios > .intro h2,
  #hear-the-difference .scenarios > .intro p {
    text-align: center; }
#hear-the-difference .item-list li:first-child {
  border-top: solid 1px #fff; }
#hear-the-difference .item-list .thumb {
  display: none; }
@media (min-width: 768px) {
  #hear-the-difference .item-list .thumb {
    display: block; } }
#hear-the-difference .item-details .intro {
  padding: 1em 0; }
#hear-the-difference .item-details .m-col-wrapper {
  padding-top: 0; }
#hear-the-difference .item-details .image-container {
  position: relative;
  padding: 3px; }
  #hear-the-difference .item-details .image-container img {
    width: 100%;
    height: 100%; }
  #hear-the-difference .item-details .image-container .tip-wrapper {
    z-index: 3;
    position: absolute;
    display: inline-block; }
    #hear-the-difference .item-details .image-container .tip-wrapper a.hotspot {
      position: relative;
      display: inline-block;
      color: #fff;
      display: flex;
      align-items: center;
      width: 250px;
      padding: 1em;
      background-color: rgba(0, 0, 0, 0.6); }
      #hear-the-difference .item-details .image-container .tip-wrapper a.hotspot span {
        margin-left: 1em; }
      #hear-the-difference .item-details .image-container .tip-wrapper a.hotspot svg {
        width: 32px;
        height: 32px;
        transition: transform 0.2s ease; }
      #hear-the-difference .item-details .image-container .tip-wrapper a.hotspot:focus {
        outline: none; }
      #hear-the-difference .item-details .image-container .tip-wrapper a.hotspot.active {
        background-color: rgba(0, 0, 0, 0.6); }
        #hear-the-difference .item-details .image-container .tip-wrapper a.hotspot.active svg {
          transform: rotate(45deg);
          transition: transform 0.2s ease; }
          #hear-the-difference .item-details .image-container .tip-wrapper a.hotspot.active svg .st0 {
            fill: #be3216; }
          #hear-the-difference .item-details .image-container .tip-wrapper a.hotspot.active svg .st41 {
            fill: #fff; }
        #hear-the-difference .item-details .image-container .tip-wrapper a.hotspot.active span {
          opacity: 1; }
      #hear-the-difference .item-details .image-container .tip-wrapper a.hotspot + div.tooltip-text {
        position: absolute;
        display: none;
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        z-index: 4;
        padding: 1em;
        width: 250px; }
        #hear-the-difference .item-details .image-container .tip-wrapper a.hotspot + div.tooltip-text audio {
          width: 100%; }
  #hear-the-difference .item-details .image-container #performance-noMic {
    position: absolute;
    bottom: 20%;
    right: 5%; }
  #hear-the-difference .item-details .image-container #performance-mic {
    position: absolute;
    bottom: 20%;
    right: 5%; }
  #hear-the-difference .item-details .image-container #outdoor-noMic {
    position: absolute;
    top: 40%;
    left: 22%; }
  #hear-the-difference .item-details .image-container #outdoor-mic {
    position: absolute;
    top: 40%;
    left: 22%; }
  #hear-the-difference .item-details .image-container #event-noMic {
    position: absolute;
    top: 55%;
    left: 18%; }
  #hear-the-difference .item-details .image-container #event-mic {
    position: absolute;
    top: 55%;
    left: 18%; }
  #hear-the-difference .item-details .image-container #wedding-noMic {
    position: absolute;
    top: 55%;
    left: 22%; }
  #hear-the-difference .item-details .image-container #wedding-mic {
    position: absolute;
    top: 55%;
    left: 22%; }
@media (min-width: 768px) {
  #hear-the-difference .scenarios > .intro {
    max-width: 80%;
    margin: 0 auto; }
  #hear-the-difference .item-details .intro p {
    max-width: 80%; } }

#flash-highlights {
  background-color: #E7E8E9; }
  #flash-highlights #hvlf60rm2 .feature-image {
    background: url("../images/highlight-flash-HVL-F60RM2.jpg") left center no-repeat;
    background-size: cover; }
  #flash-highlights #hvlf46rm .feature-image {
    background: url("../images/highlight-flash-HVL-F46RM.jpg") left center no-repeat;
    background-size: cover; }
  #flash-highlights #hvlf28rm .feature-image {
    background: url("../images/nav-flash.jpg") center center no-repeat;
    background-size: cover; }

#grip-highlights {
  background-color: #fff; }
  #grip-highlights #gpvpt2bt .feature-image {
    background: url("../images/highlight-grip-gpvpt2bt.jpg") center center no-repeat;
    background-size: cover; }
  #grip-highlights #vgc4em .feature-image {
    background: url("../images/highlight-grip-VGC4EM.jpg") bottom right no-repeat;
    background-size: cover;
    background-color: #ececec; }
  @media (min-width: 992px) {
    #grip-highlights .feature-content .feature-wrapper:nth-child(odd) .feature-image {
      position: absolute;
      left: 0;
      top: 0;
      min-height: 600px;
      width: 52.5%; }
    #grip-highlights .feature-content .feature-wrapper:nth-child(odd) .feature-copy {
      width: 47.5%;
      text-align: left;
      float: right;
      padding: 0 0 0 5em; } }

#media-highlights {
  background-color: #E7E8E9; }
  #media-highlights .container h2 {
    text-align: center; }
  #media-highlights .container > p {
    text-align: center; }
  #media-highlights .slider-container {
    padding: 3em 0; }
  #media-highlights #media-feature-slider .slick-track {
    background-color: #3C3C3C;
    margin-bottom: 1em; }
  #media-highlights #media-feature-slider .slide {
    background-color: #3C3C3C; }
  #media-highlights #media-feature-slider h3 {
    font-size: 1.5em;
    color: #fff; }
  #media-highlights #media-feature-slider p {
    color: #fff; }
  #media-highlights #media-feature-slider .note {
    color: #fff;
    font-style: italic; }
  #media-highlights #media-feature-slider #media-slide-rugged {
    background: url("../images/media-slide-rugged.jpg") center center no-repeat;
    background-size: cover; }
  #media-highlights #media-feature-slider #media-slide-ultra {
    background: url("../images/media-slide-ultra.png") center center no-repeat;
    background-size: cover; }
  #media-highlights #media-feature-slider #media-slide-tough {
    background: url("../images/media-slide-tough.jpg") center center no-repeat;
    background-size: cover; }
  #media-highlights #media-feature-slider #media-slide-waterproof {
    background: url("../images/media-slide-waterproof.jpg") left bottom no-repeat;
    background-size: cover; }
  #media-highlights #media-feature-slider #media-slide-shock {
    background: url("../images/media-slide-shock.jpg") left bottom no-repeat;
    background-size: cover; }
  @media (min-width: 768px) {
    #media-highlights #media-feature-slider .slide {
      display: flex;
      align-items: center;
      height: 75vh;
      min-height: 600px; } }
  #media-highlights #media-prev {
    font-size: 1em;
    z-index: 5;
    position: absolute;
    left: 1em;
    top: 50%; }
  #media-highlights #media-next {
    font-size: 1em;
    position: absolute;
    right: 1em;
    top: 50%; }
  #media-highlights h3 {
    font-size: 2em; }
  #media-highlights #media-product-slider .slide .inner {
    max-width: 600px;
    padding: 2em; }
    #media-highlights #media-product-slider .slide .inner h4 {
      margin-bottom: 0.5em;
      font-size: 1.5em;
      font-weight: normal; }
    #media-highlights #media-product-slider .slide .inner ul li {
      padding: 0.5em 0;
      font-size: 1em; }

#battery-highlights {
  background-color: #fff; }
  #battery-highlights h2 {
    text-align: center; }
  #battery-highlights p {
    text-align: center; }
  #battery-highlights span.note {
    padding-top: 2em;
    display: block; }
  #battery-highlights #battery-features {
    display: block;
    margin: 2em 0 4em 0; }
    #battery-highlights #battery-features .m-col {
      padding: 1em; }
      #battery-highlights #battery-features .m-col img {
        margin-bottom: 1em; }
  #battery-highlights h3 {
    font-size: 2em; }
  #battery-highlights .slide {
    margin-bottom: 2em; }
    #battery-highlights .slide .inner {
      padding: 1em; }

#compatibility {
  background: url("../images/banner-compatibility.jpg") top center no-repeat;
  background-size: cover;
  position: relative;
  padding: 0;
  position: relative; }
  #compatibility .inner {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 5em 0; }
  #compatibility .container {
    text-align: center; }
  #compatibility h2 {
    color: #fff; }
  #compatibility p {
    text-align: center;
    color: #fff; }
  #compatibility .pseudo-form-container {
    /* select2 dropdown appearance */ }
    #compatibility .pseudo-form-container .form-row {
      display: block;
      padding: 2em 0; }
      #compatibility .pseudo-form-container .form-row label {
        display: block;
        color: #fff;
        margin-bottom: 1em;
        font-size: 1.25em; }
      #compatibility .pseudo-form-container .form-row select {
        width: 100%;
        max-width: 500px;
        display: block; }
      #compatibility .pseudo-form-container .form-row .button-row {
        margin: 1.5em; }
        #compatibility .pseudo-form-container .form-row .button-row .button {
          margin: 0 1.5em; }
    #compatibility .pseudo-form-container .select2-container--default .select2-selection--single {
      height: 48px;
      display: flex;
      align-items: center; }
    #compatibility .pseudo-form-container .select2-container--default .select2-selection--single .select2-selection__rendered {
      display: block;
      width: 100%; }
    #compatibility .pseudo-form-container .select2-container--default .select2-selection--single .select2-selection__arrow {
      top: 11px;
      right: 11px; }

/*# sourceMappingURL=main2.css.map */