#pdp .cta-yellow {
    padding: 1em 2em;
    font-weight: 600;
    font-size: 1em;
    letter-spacing: 0.12em;
    display: inline-block;
    background: #e9e600;
    color: #000 !important;
    margin: 1em 0;
    transition: all 200ms ease;
    -webkit-transition: all 200ms ease;
}

/* ============================== 
HERO
============================== */

#pdp #panel-hero {
  background-size: cover;
  display: table;
  padding: 0;
  min-height: 500px;
  margin-top: 0px;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
#pdp #panel-hero video {
  display: block;
  left: 50%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
#pdp #panel-hero .background img {
  height: 100%;
  position: relative;
  z-index: 1;
}
#pdp #panel-hero.panel-template .yellow-subtext {
  font-size: 1.5rem;
  line-height: 2rem;
--tw-text-opacity: 1;
  color: rgba(236, 232, 26, var(--tw-text-opacity))
}
#pdp #panel-hero .hero-content-container {
  display: table;
  min-height: 500px;
  position: relative;
  width: 100%;
  background-color: rgba(0, 0, 0, .5);
}
#pdp #panel-hero.panel-template .wrapper {
  display: table-cell;
  padding: 15vw 0;
  min-height: 0;
}
@media only screen and (max-width: 768px) {
  #pdp .panel-template.text-center-mobile {
    text-align: center;
  }
  /* ============================== 
    HERO
    ============================== */
  #pdp #panel-hero.panel-template .wrapper {
    background: rgba(0, 0, 0, .4);
  }
  #pdp #panel-hero video {
    display: none !important;
  }
  #pdp #panel-hero .product-container {
    height: auto;
    width: 100%;
  }
  #pdp #panel-hero .product-container .relative-container {
    height: auto;
  }
  #pdp #panel-hero .background {
    display: block;
  }
  #pdp #panel-hero .background img {
    height: auto;
    width: 100%;
  }
}

.black {
  color: #000
}
.yellow {
  --tw-text-opacity: 1;
  color: rgba(236, 232, 26, var(--tw-text-opacity))
}
.verveine {
  font-family: 'verveine';
  font-size: 3rem;
  line-height: 1;
}
@media (min-width:768px) {
  .verveine {
    font-size: 3.75rem;
    line-height: 1;
  }
}

#pdp #panel-hero.panel-template h2 {
  font-family: Helvetica Neue LT Pro R;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: 0em;
  margin-bottom: 2rem;
}

#pdp #panel-hero.panel-template h1 {
  font-family: 'BebasNeuePro-SmEBd', sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 7rem;
  line-height: 7.5rem;
  letter-spacing: .0em;
}
#pdp .panel-template h2 {
  font-family: 'BebasNeuePro-SmEBd', sans-serif;
  font-weight: 500;
  font-size: 3.75rem;
  letter-spacing: 0.1rem;
  line-height: 3.75rem;
}
#pdp .panel-template p {
  font-family: Helvetica Neue LT Pro R;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 2.25rem;
}


@media (max-width:768px) {
  #pdp #panel-hero.panel-template h1 {
    font-size: 3.5rem;
    line-height: 4rem;
    padding-bottom: 1rem;
  }
  #pdp #panel-hero.panel-template h2 {
    font-size: 1.2rem;
    line-height: 3.25rem;
  }
  #pdp .panel-template h2 {
    font-size: 2.75rem;
  }

  #pdp .panel-template p {
    font-size: 1.1rem;
    line-height: 1.75rem;
  }
}
@media (min-width:1024px) {

}

/* ============================== 
LIGHTING
============================== */
#pdp .lighting {
  padding:7vw;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e2e2e2+0,dfdfdf+100 */
  background: #000; 
}

#pdp .lighting .dots-container{
  margin-top:0em;
  position:relative;
}

#pdp .lighting .dots-container ul{
  padding-left:0;
}

#pdp .lighting .dots-container li{
  cursor:pointer;
  display:inline-block;
  height:1em;
  padding: 1rem;
  margin-right:18px;
  position:static;
}
#pdp .lighting .dots-container li .tag-text{
  font-size:0.7em;
  letter-spacing:0.2em;
  left:0;
  margin-top:-4px !important;
  opacity:0;
  position:absolute;
  text-transform:uppercase;
  top:5em;
  transition:250ms opacity;
  white-space:nowrap;
}

.no-touch #pdp .lighting .dots-container li:hover:not(.active) .tag-text{
  opacity:0;
}

#pdp .lighting .dots-container li.active .tag-text{
  opacity:1;
}

#pdp .lighting .dots-container li .dot{
  background:#39b5fb;
  border:none;
  border-radius:50%;
  display:inline-block;
  font-size:0px;
  height:12px;
  outline:none;
  width:12px;
}

#pdp .lighting .dots-container li:not(.active) .dot{
  background:#6d6d6d !important;
}

#pdp .lighting .content_wrapper{
  margin:0 auto;
  max-width:1200px;
  width:100%;
}

#pdp .lighting .content_wrapper .half{
  display:inline-block;
  vertical-align:middle;
  width:55%;
}


#pdp .lighting .content_wrapper .left {
  height:100%;
  left:0;
  overflow:hidden;
  position:absolute;
  top:50%;
  width:65%;
  transform:translateY(-50%);
}

#pdp .lighting .content_wrapper .left .item-rotation{
  height:100%;
  position:relative;
  width:100%;
}

#pdp .lighting .content_wrapper .left .item-rotation .spacer{
  width:100%;
}


#pdp .lighting .content_wrapper .left .video-gradient {
  background:none;
  display:block;
  height:100%;
  right:0;
  position:absolute;
  top:0;
  width:100%;
  z-index:1;
}



#pdp .lighting .content_wrapper .left .item-rotation .mobile{
  display:none;
}

#pdp .lighting .content_wrapper .left .item-rotation video{
  height:100%;
  width:auto;
}

#pdp .lighting .content_wrapper .left .item-rotation .fan-colors {
  height:50%;
  left: 0;
  opacity:0;
  position:absolute;
  top:25%;
  width:auto;
}

#pdp .lighting .content_wrapper .left .item-rotation .fan-colors.active {
  opacity:1;
}

#pdp .lighting .content_wrapper .right{
  box-sizing:border-box !important;
  margin-left:55%;
  width:44%;
  z-index:2;
}

#pdp .lighting .content_wrapper .right p{
  font-weight:100;
  margin-top:2em;
}

#pdp .lighting .content_wrapper .right .dots-container p{
  color:#fff;
}

#pdp .lighting .content_wrapper .right .body-text{
  width:75%;
}

#pdp .lighting .content_wrapper .right .disclaimer{
  font-size:0.85em;
  font-weight:400;
  line-height:1.6em;
  margin-top:0;
  width:90%;
}

@media only screen and (max-width: 2500px) {

  /* ============================== 
  SMARTER
  ============================== */
  #pdp .lighting {
      overflow:hidden;
  }

  #pdp .lighting .content_wrapper{
      margin:0 auto;
  }
}



@media only screen and (max-width: 1600px) {

  /* ============================== 
  SMARTER 
  ============================== */
  

  #pdp .lighting .content_wrapper{
      margin:0 auto;
  }

  #pdp .lighting .content_wrapper .left {
      width:50%;
  }

  #pdp .lighting .content_wrapper .left .item-rotation .fan-colors {
      left:auto;
      right:-20vh;
  }
}
@media only screen and (max-width: 1362px) {
  #pdp .lighting .dots-container li .tag-text {
    top: 9em;
  }
}
@media only screen and (max-width: 960px){
  /* ============================== 
  LIGHTING 
  ============================== */
  #pdp .lighting{
      padding:7em 0 2em;
      position:relative;
  }

  #pdp .lighting:before{
      content:"";
      height:100%;
      left:0;
      opacity:0.6;
      position:absolute;
      top:0;
      width:100%;
  }

  #pdp .lighting .slick-dots{
      margin-top:3em;
  }

  #pdp .lighting .content_wrapper{
      margin:0;
      position:relative;
      z-index:1;
  }

  #pdp .lighting .content_wrapper .half{
      
      margin-top:5%;
      width:auto;
  }

  #pdp .lighting .content_wrapper .left{
      display:block;
      height:auto;
      margin:0 auto;
      padding-top:0;
      position:relative;
      transform: none !important;
      width:100%;
  }

  #pdp .lighting .content_wrapper .left .item-rotation{
      height:auto;
      margin:0 auto;
      max-width:90vw;
  }

  #pdp .lighting .content_wrapper .left .video-gradient {
      display:none;
  }

  #pdp .lighting .content_wrapper .left .item-rotation .mobile{
      display:block;
  }

  #pdp .lighting .content_wrapper .left .item-rotation .mobile .gif{
      left:0;
      opacity:0;
      position:absolute;
      top:0;
      width:100%;
      transition:500ms opacity;
  }

  #pdp .lighting .content_wrapper .left .item-rotation .mobile .gif img{
      width:100%;
  }

  #pdp .lighting .content_wrapper .left .item-rotation .mobile .gif.active{
      opacity:1;
  }

  #pdp .lighting .content_wrapper .left .item-rotation video{
      display:none;
  }

  #pdp .lighting .content_wrapper .right{
      margin-bottom:4em;
      margin-left:15px;
      margin-top:32vw;
      position:relative;
      text-align:center;
      transform: none !important;
      width: calc(100% - 30px);
  }

  #pdp .lighting .content_wrapper .right h1{
      margin-top:5em;
  }

  #pdp .lighting .content_wrapper .right .center{
      position:relative;
      text-align:center;
  }

  #pdp .lighting .content_wrapper .right p{
      margin-top:0;
      width:auto;
  }

  #pdp .lighting .content_wrapper .right p.description{
      margin-top:2em;
  }

  #pdp .lighting .content_wrapper .right .body-text{
      color: #b1b1b1 !important;
      width:100%;
  }

  #pdp .lighting .content_wrapper .right .dots-container{
      position:absolute;
      top:-13em;
      width:calc( 100vw - 50px );
  }

  #pdp .lighting .dots-container li{
      position:static;
      padding: .5rem;
  }

  #pdp .lighting .dots-container li .tag-text{
      left:50%;
      position:absolute;
      top:8em;
      transform:translateX(-50%);
  }

  .no-touch #pdp .lighting .dots-container li:hover:not(.active) .tag-text{
      opacity:0;
  }
}