/* UNIVERSAL 
---------------------------------------------- */
@font-face {
  font-family: "acherusgrotesque";
  src: url("../../fonts/acherusgrotesque-black-webfont.woff2") format("woff2"),
       url("../../fonts/acherusgrotesque-black-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham Narrow SSm A';
  src: url("../../fonts/gothamnarrow-medium-webfont.eot");
  src: local("☺"), url("../../fonts/gothamnarrow-medium-webfont.otf") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tungsten A';
  src: url("../../fonts/Tungsten-Medium.otf");
  src: local("☺"), url("../../fonts/Tungsten-Medium.otf") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tungsten Light';
  src: url("../../fonts/Tungsten-Light.otf");
  src: local("☺"), url("../../fonts/Tungsten-Light.otf") format("woff");
  font-weight: normal;
  font-style: normal;
}
html{z-index: -1;height: 100%;overflow-x: hidden;}
html.fixed{overflow: hidden;}
body{margin: 0;padding:0px;background: #000000;overflow-x: hidden;height:auto !important;}
body.noscroll{height: 100% !important;overflow: hidden;}
/*#scrollable{position: absolute;}*/
#scrollable img{max-width: inherit;}
#scrollable video {border: none;max-width: inherit;}
b{font-weight: 600;}
a{text-decoration: none;transition: all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-webkit-transition: all 0.3s ease 0s;}
a:hover {cursor: pointer;}
.main-wrap p{color: white;font-size: 14px;line-height: 30px;letter-spacing: 0.7px;margin-bottom:0px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;line-height: 24px;letter-spacing: 1px;}
#scrollable p{color:white;font-size:14px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;font-weight: 400;font-style: normal;line-height: 24px;letter-spacing: 1px;}
#scrollable h1{margin: 0;padding: 0;font-size: 51.5px;color: white;padding: 10px 0px;text-transform: uppercase;font-family: 'klavika-web', Arial, Helvetica, sans-serif;}
#scrollable h2{margin: 0;padding: 0px;font-size: 72px;color: #ffffff;text-transform: uppercase;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;font-weight: 700;font-style: normal;letter-spacing: 4px;line-height:76px}
#scrollable h3{margin: 0;padding: 0px;font-size: 38px;color: #ffffff;text-transform: uppercase;font-family: "Tungsten A", "Tungsten B";font-weight: 600;font-style: normal;letter-spacing: 3px;line-height:34px}
#scrollable h4{margin: 0;padding: 0px;font-size: 16px;color: black;text-transform: uppercase;font-family: "Tungsten A", "Tungsten B";
font-weight: 600;font-style: normal;letter-spacing: 3px;line-height:34px}
#scrollable h5{margin: 0;padding: 0px;font-size: 12.36px;color: white;text-transform: uppercase;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;font-weight: 500;font-style: normal;letter-spacing: 5px;line-height:34px}
#scrollable h6{font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;font-weight: 300;font-style: normal;}
#scrollable h2 span{color:#ff0000;}
sup{font-size: 10px;vertical-align: super;top: 9px;position: relative;}
.clearfix{clear: both}
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;font-size:0;}
section,article,header,footer,nav,aside,hgroup,figure,figcaption {display: block;padding: 0;margin: 0;}
.scrolling{position: relative!important;z-index: 1!important;-webkit-overflow-scrolling: touch;}
#wrapper{width:1600px;margin:0 auto;}
.container{margin:0 auto;display:block;position:relative;max-width:1170px;width:90%;}
#scrollable ul li{font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;font-weight: 300;font-style: normal;}
.btn{
    font-size: 14px;
    padding: 16px 28px;
    background: white;
    font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;
  font-weight: 700;
    font-style: normal;
    width: auto;
    text-align: center;
    text-transform: uppercase;
    transition: 0.1s ease all;
    -moz-transition: 0.1s;
    -webkit-transition: 0.1s;
    color: black !important;
    border-radius: 300px;
    border: 2px solid black;
    letter-spacing: 0.5px;
    position: relative;
}
.btn:hover{
  background:black;
  color: white !important;
}
.btn.black{
  background:black;
  color: white !important;
}
.btn.black:hover{
  color: black !important;
  background:white !important;
}
.btn.sticky{
  font-size: 16px;
    position: fixed;
    z-index: 99;
    right: -44px;
    top: 200px;
    border-radius: 0px;
    transform: rotate(-90deg);
    border: 2px solid white;
    -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.45);
    box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.45);
}
.btn.sticky:hover{
  border:2px solid black;
}
#scrollable .product-item{
  display: inline-block;
}
#scrollable .product-item-inner{
  display: inline-block;
}
#scrollable .product-item-actions{
  display: inline-block;
}
#scrollable .product-item-actions .actions-primary{
  display: inline-block;
}
#scrollable .product-item .action.primary.tocart{
  border: none;
  display: inline-block;
  padding: 0px;
}
#scrollable .product-item .action.primary.tocart:hover{
  padding: 0px;
}

/* HEADER 
---------------------------------------------- */
.stx-logo{
  position: absolute;
  top:30px;
  left:30px;
  z-index: 4;
}
#scrollable .header{
  position: relative;
  display: block;
  text-align: center;
  padding:200px 50px 230px;
  background-image:url('../../images/stallion-hpr2-ice-hockey-stick/hero-bg.png');
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
#scrollable .header #video{
  position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    z-index: 2;
}
#scrollable .header h3{
  text-align: center;
  margin: 0 auto;
}
#scrollable .header .logo{
  margin: 50px auto;
  max-width: 100%;
  width: 800px;
  display: block;
  position: relative;
  z-index: 4;
  float: none;
}
#scrollable .header .hero{
    width: 95%;
    position: absolute;
    z-index: 2;
    left: -1000px;
    opacity: 0;
    transition:0.5s ease all;
    bottom: 40px;
    pointer-events: none;
    z-index: 4;
}
#scrollable .header .hero.active{
  left:0px;
  opacity: 1;
}
#scrollable .header .gradient{
  position: absolute;
  bottom:0px;
  left: 0px;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  z-index: 3;
}
#scrollable .header .btn{
  background: none;
  border: 2px solid white;
  color: white !important;
  z-index: 2;
}
#scrollable .header .btn:hover{
  background:white;
  color: black !important;
}
#scrollable .header .content{
  opacity: 0;
  position: relative;
  top:-100px;
  transition:0.3s ease all;
  z-index: 4;
}
#scrollable .header .content.active{
  top:0px;
  opacity: 1;
}
.glitch {
  text-align: center;
    width: 300px;
    margin: 0 auto;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  background: #5a5a5a85;
  color: #fff;
  clip: rect(0, 900px, 0, 0);
}
.glitch::before {
  left: 7px;
  text-shadow: 1px 0 green;
  animation: glitch-effect 3s infinite linear alternate-reverse;
}
.glitch::after {
  left: 3px;
  text-shadow: -1px 0 red;
  animation: glitch-effect 2s infinite linear alternate-reverse;
}

@-webkit-keyframes glitch-effect {
  0% {
    clip: rect(27px, 9999px, 59px, 0);
  }
  5% {
    clip: rect(86px, 9999px, 81px, 0);
  }
  10% {
    clip: rect(35px, 9999px, 34px, 0);
  }
  15% {
    clip: rect(48px, 9999px, 96px, 0);
  }
  20% {
    clip: rect(75px, 9999px, 8px, 0);
  }
  25% {
    clip: rect(85px, 9999px, 100px, 0);
  }
  30% {
    clip: rect(75px, 9999px, 64px, 0);
  }
  35% {
    clip: rect(69px, 9999px, 24px, 0);
  }
  40% {
    clip: rect(27px, 9999px, 100px, 0);
  }
  45% {
    clip: rect(38px, 9999px, 76px, 0);
  }
  50% {
    clip: rect(7px, 9999px, 94px, 0);
  }
  55% {
    clip: rect(49px, 9999px, 6px, 0);
  }
  60% {
    clip: rect(89px, 9999px, 2px, 0);
  }
  65% {
    clip: rect(96px, 9999px, 85px, 0);
  }
  70% {
    clip: rect(36px, 9999px, 53px, 0);
  }
  75% {
    clip: rect(25px, 9999px, 33px, 0);
  }
  80% {
    clip: rect(45px, 9999px, 14px, 0);
  }
  85% {
    clip: rect(55px, 9999px, 36px, 0);
  }
  90% {
    clip: rect(16px, 9999px, 95px, 0);
  }
  95% {
    clip: rect(92px, 9999px, 84px, 0);
  }
  100% {
    clip: rect(25px, 9999px, 89px, 0);
  }
}

@keyframes glitch-effect {
  0% {
    clip: rect(27px, 9999px, 59px, 0);
  }
  5% {
    clip: rect(86px, 9999px, 81px, 0);
  }
  10% {
    clip: rect(35px, 9999px, 34px, 0);
  }
  15% {
    clip: rect(48px, 9999px, 96px, 0);
  }
  20% {
    clip: rect(75px, 9999px, 8px, 0);
  }
  25% {
    clip: rect(85px, 9999px, 100px, 0);
  }
  30% {
    clip: rect(75px, 9999px, 64px, 0);
  }
  35% {
    clip: rect(69px, 9999px, 24px, 0);
  }
  40% {
    clip: rect(27px, 9999px, 100px, 0);
  }
  45% {
    clip: rect(38px, 9999px, 76px, 0);
  }
  50% {
    clip: rect(7px, 9999px, 94px, 0);
  }
  55% {
    clip: rect(49px, 9999px, 6px, 0);
  }
  60% {
    clip: rect(89px, 9999px, 2px, 0);
  }
  65% {
    clip: rect(96px, 9999px, 85px, 0);
  }
  70% {
    clip: rect(36px, 9999px, 53px, 0);
  }
  75% {
    clip: rect(25px, 9999px, 33px, 0);
  }
  80% {
    clip: rect(45px, 9999px, 14px, 0);
  }
  85% {
    clip: rect(55px, 9999px, 36px, 0);
  }
  90% {
    clip: rect(16px, 9999px, 95px, 0);
  }
  95% {
    clip: rect(92px, 9999px, 84px, 0);
  }
  100% {
    clip: rect(25px, 9999px, 89px, 0);
  }
}

/* COLORWAYS
---------------------------------------------- */
#hpr-colorways {
  background-image:url('../../images/stallion-hpr2-ice-hockey-stick/colorways-bg.jpg');
  background-color:#ffffff;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:top left;
}
#hpr-colorways .colorways-container {
  margin:0 auto;
  text-align:center;
  padding: 9vw 0;
  box-sizing:border-box;
}
#hpr-colorways .colorways-headline {
  margin:0 auto;
  padding: 0 55px 55px;
}
#hpr-colorways .colorways-headline h1{
	display:inline-block;
	vertical-align:middle;
	margin: 0;
	padding: 0px;
	font-size: 95px;
	line-height: 85px;
	color: #000000;
	text-transform: uppercase;
	font-family: "Tungsten Light", "Tungsten A", "Tungsten B";
	font-weight: 300;
	font-style: normal;
	letter-spacing: 3px;
	padding-top:10px;
}
#hpr-colorways .limited-edition {
  display:inline-block;
	vertical-align:middle;
  width:100%;
  max-width:625px;
  margin:0 auto;
}
#hpr-colorways .headline-mobile {
  display:none;
  width:80%;
  margin:0 auto;
}
#hpr-colorways .glove-colors {
  width:80%;
  max-width:850px;
  margin:0 auto;
}
#hpr-colorways .glove-price {
	margin: -50px auto;
}
#hpr-colorways .stick-price {
	margin: -75px auto 65px;
}
#hpr-colorways .color-price {
  font-size: 60px;
	line-height: 55px;
	color: #000000;
	text-transform: uppercase;
	font-family: "Tungsten A", "Tungsten B";
	font-weight: 400;
	font-style: normal;
	letter-spacing: 3px;
}
#hpr-colorways .color-price span {
  font-size:35px;
  color:#000000;
  position: relative;
    top: -16px;
}
#hpr-colorways .stick-colors {
  width:100%;
  max-width:1220px;
  margin:0 auto;
}
#hpr-colorways .limited-quantity {
	width:100%;
	max-width:375px;
  padding:0 55px;
}

/* HPR 
---------------------------------------------- */
.hpr{
  position: relative;
  display: block;
  padding-top: 100px;
  overflow: hidden;
}
.hpr .bg{
  background-image:url('../../images/stallion-hpr2-ice-hockey-stick/hpr-bg-updated.jpg');
  background-size: 1000px;
  background-position: right top;
  background-repeat: no-repeat;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  display: block;
}
.hpr p{
    max-width: 440px;
    width: 90%;
    margin-left: 120px;
    padding-top: 16px;
}

/* VIDEO 
---------------------------------------------- */
.hpr .video{
  position: relative;
  display: block;
  background-image:url('../../images/stallion-hpr2-ice-hockey-stick/video-bg.png');
  background-size: cover;
  background-position: right center;
  max-width: 960px;
  height: 540px;
  margin: 70px auto 100px;
}
.hpr .video a img{
  position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 36%;
    transition:0.3s ease all;
    width: 133px;
}
.hpr .video a img:last-of-type{
  opacity: 0;
}
.hpr .video a:hover img{
  opacity: 0;
}
.hpr .video a:hover img.hover{
  opacity: 1;
}
#scrollable .hpr .video p{
    font-family: 'Source Code Pro', monospace;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 62%;
    width: 100%;
    max-width: 100%;
    text-align: center;
    font-size: 19px;
}

/* BADGES
---------------------------------------------- */
.badges{
	display: block;
	position: relative;
	padding-bottom: 90px;
}
#scrollable .badges h4{
	color: white;
	text-align: center;
    font-size: 80px;
    line-height: 85px;
    max-width: 736px;
    margin: 0 auto;
    position: relative;
}
.badges h4 img:first-of-type{
	position: absolute;
    left: -360px;
    top: 6px;
}
.badges h4 img:last-of-type{
	position: absolute;
    right: -360px;
    top: 6px;
}
#scrollable .badges h4:first-of-type{
	font-size: 80px;
	line-height: 85px;
}
#scrollable .badges h4:last-of-type{
    font-size: 30px;
    line-height: 40px;
    max-width: 987px;
    width: 95%;
    margin: 0 auto;
}
.badges .images{
	margin: 45px auto 30px;
	max-width: 987px;
	width: 95%;
}
.badges .images img{
	padding: 1%;
	width: 33%;
}

/* LIGHTBOX
---------------------------------------------- */
#html5-elem-box{
  background: black!important;
}
#html5-elem-wrap{
  background:black!important;
}
#html5-watermark{
  display: none!important;
}
div.pp_default .pp_nav .currentTextHolder{
  display: none;
}
.plus a{
  display:block !important;
}
.top a.pp_previous{
  display: none;
}
.top a.pp_next{
  display: none;
}

/* TECH 
---------------------------------------------- */
.tech{
  background:white;
  display: block;
  position: relative;
}
.tech.desktop{
  display: block;
}
#scrollable .tech p{
  color: black;
}
.tech .columns .col{
  display: inline-block;
  float: left;
  width: 50%;
  height:auto;
}
.tech .columns .col img{
  width: 100%;
  float: none;
  margin: 0px;
}
.tech .columns .col #video{
  width: 100%;
}
#scrollable .tech .columns .col h4{
    position: absolute;
    left: 28vw;
    padding-top: 8vw;
    font-size: 38px;
    padding-left:1vw;
}
.tech .columns .col .power{
  padding: 10vw 10vw 0px;
}
.tech .columns .col .silver{
  padding: 10vw 10vw 0px;
}
.tech .columns .col .pure{
  padding: 10vw 10vw 0px;
}
.tech .columns .col .geo{
  padding: 10vw 10vw 0px;
}
#scrollable .tech .columns .col p{
  padding: 0px 10vw;
}
.tech .columns .col .btn{
  margin: 0 10vw 8vw 10vw;
  display: inline-block;
}
#scrollable .tech .columns .col .padd{
  padding-bottom: 10vw;
}
.tech .columns .col .icon-wrap{
  position: relative;
  left:-4vw;
}
.tech .columns .col img.icon{
  width: initial;
  margin: 0 auto;
  display: block;
  padding:5vw 0px;
}
.tech .columns .col img.logo{
  max-width:100% !important;
  width:initial;
}
.tech .columns .col img.pureblade{
  position: absolute;
  bottom:0px;
  width: 50%;
}
.tech.desktop .accent{
  position: absolute;
    right: 0px;
    top: -36px;
}

/* TECH MOBILE 
---------------------------------------------- */
.tech.mobile{
  display: none;
}
.tech.mobile .columns .col {
    display: block;
    float: none;
    width: 90%;
    margin: 0 auto;
    height: auto;
    padding-top: 50px;
}
.tech.mobile .marker{
  display: none;
}
.tech.mobile .columns .col img.pureblade{
  position: relative;
  width: 100%;
}
.tech.mobile .columns .col img.icon{
  padding:20px 0px;
}
.tech.mobile .columns .col .geo {
    padding: 30px 30px 0px 0px;
}
#scrollable .tech.mobile .columns .col .padd {
    padding: 0px 0px 30px 0px;
    margin: 0px;
}
.tech.mobile .columns .col .power {
    padding: 30px 30px 0px 0px;
}
#scrollable .tech.mobile .columns .col p {
    padding: 0px 0px 0px 0px;
}
.tech.mobile .columns .col .btn {
    margin: 0 0 30px 0px !important;
}
.tech.mobile .columns .col .silver{
  padding: 30px 30px 0px 0px;
}
.tech.mobile .columns .col .pure{
  padding: 30px 30px 0px 0px;
}
.tech.mobile .columns .col .icon-wrap{
  left: auto;
}
#scrollable .tech.mobile .columns .col h4 {
    left: 50vw;
    padding-top: 8vw;
}
#scrollable .tech.mobile .columns .col p{
  padding-top: 12px !important;
}

/* MARKER 
---------------------------------------------- */
.marker{
    position: absolute;
}
.marker .base{
  width: 1vw;
    height: 1vw;
    border: 1px solid #af9803;
    position: relative;
    display: inline-block;
    float: left
}
.marker .base .dot {
    width: 0.4vw;
    height: 0.345vw;
    border-radius: 100vw;
    background: red;
    left: 0.25vw;
    top: 0.24vw;
    position: absolute;
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
.marker .gold-line{
  height: 1px;
    width: 12.45vw;
    background: #af9803;
    display: inline-block;
    float: left;
  top: 0.5vw;
    position: relative;
}
/*
.marker .black-line{
  height: 1px;
    width: 4vw;
    background: black;
    display: inline-block;
    float: left;
    top: 0.5vw;
    position: relative;
}
*/
.logo-wrap{
  position: relative;
}
.logo-wrap.one .base{
  float: right;
}
.logo-wrap.one .marker{
  right: -5vw;
    top: 11vw;
}
.logo-wrap.one .marker .gold-line{
  width: 17.45vw;
  float: right;
}
.logo-wrap.two .marker{
  top: 10vw;
    left: -6.45vw;
}
.logo-wrap.three .marker{
  top: 11vw;
    left: -10vw;
}
.logo-wrap.three .marker .gold-line {
    width: 15.45vw;
}
.logo-wrap.four .marker{
  left: -5vw;
    top: 11vw;
}
.logo-wrap.four .marker .gold-line {
    width: 10.45vw;
}

/* SLIDER 
---------------------------------------------- */
.slider{
  position: relative;
  display: block;
  background-image:url('../../images/stallion-hpr2-ice-hockey-stick/gallery-bg.png');
  background-size: cover;
  background-position: center center;
  background-color: black;
  padding:200px 0px;
}
.slick-initialized .slick-slide{
  padding:0px 20px;
}
.slider .control{
  border:1px solid white;
  padding:30px;
  background:transparent;
  transition:0.3s ease all;
  position: absolute;
    top: 45%
}
.slider .control:hover{
  background:white;
  cursor: pointer;
}
.slider .prev{
  left:50px;
}
.slider .next{
  right:50px;
}
.slider .accent{
  position: absolute;
  top:0px;
  right:0px;
}

/* BOTTOM-BG-WRAP 
---------------------------------------------- */
.bottom-bg-wrap{
  background-image:url('../../images/stallion-hpr2-ice-hockey-stick/bottom-bg.jpg');
  background-size: cover;
  background-position: top center;
}

/* STICKS 
---------------------------------------------- */
.sticks{
  padding:150px 0px 100px 0px;
  position: relative;
}
.sticks .stick{
  position: relative;
  display: block;
  padding-bottom: 100px;
}
.sticks .stick img.main{
  width: 100%;
  position: absolute;
  top:0px;
  left:0px;
  pointer-events: none;
  z-index: 1;
  left:-15px;
}
.sticks .stick .details{
  display: inline-block;
  position: relative;
  float: left;
  width: 33%;
  z-index: 2;
  margin-right: 40px;
}
.sticks .stick .divider{
  display: inline-block;
  position: relative;
  float: left;
  width: auto;
  z-index: 2;
  margin-right: 40px;
}
.sticks .stick .price{
  display: inline-block;
  position: relative;
  float: left;
  width: 33%;
  z-index: 2;
}
#scrollable .sticks p{
  color: black;
  padding-top:23px;
}
#scrollable .price .copy h3{
  font-size: 60px;
  color: black;
  display: inline-block;
}
#scrollable .price .copy h3 sup{
  font-size: 38px;
  top:9px !important;
}
#scrollable .price .copy h4{
  display: inline-block;
  color: #af9803;
  font-size: 35px;
  position: relative;
  top:-8px;
}
.price .copy h4 img{
  position: absolute;
    bottom: -5px;
    left: 0px;
}
.sticks .btn{
  font-size: 12px;
  padding: 12px 26px;
  margin-top: 8px;
  display: inline-block;
}
.sticks .accent{
  position: absolute;
    top: -20px;
    left: 0px;
}

/* CLOSING 
---------------------------------------------- */
.closing{
  position: relative;
  display: block;
  padding-top: 135px;
}
#scrollable .closing h3{
  color: black;
  font-size: 33px;
}
.closing .left h3:first-of-type sup{
  top:-5px;
}
.closing .left{
  width: 33%;
  display: inline-block;
  float: left;
}
.closing .left .copy{
  margin:12px 0px;
}
.closing .left .btn{
  margin-top: 10px;
  display: inline-block;
}
.closing img.glove{
    display: inline-block;
    float: left;
    top: -144px;
    position: relative;
    width: initial;
}
.closing img.collage{
    display: inline-block;
    float: left;
    position: absolute;
    right: -100px;
    top: -180px;
}

/* FORM
---------------------------------------------- */
.signup{
  background:rgba(255,255,255,0.05);
  padding:0px 30px 0px 30px;
}
#scrollable .signup h2{
  font-size:40px;
  text-align: center;
}
#scrollable .signup h2:last-of-type{
  font-size:76px;
}
.form{
  display:block;
  position:relative;
}
.form .wrap{
  padding-top:10px;
  padding-bottom:50px;
}
.form .buttons{
  text-align: center;
  margin-top:80px;
}
.form .buttons .btn{
  font-size:20px;
  box-sizing: content-box;
}
.form .buttons .btn.one{
  margin-right:20px;
}
form{
  text-align: center;
}
.form .col {
  width:50%;
  margin: 50px auto;
}
#scrollable .form input{
    background: transparent;
    border: 2px solid #af9803;
    font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;
    xtext-transform: uppercase;
    font-size: 14px;
    color: black;
    /* width: 213px; */
    padding: 8px;
    height: auto;
    border-radius: 0px;
}
#scrollable input[type=submit]{
    font-size: 14px;
    padding: 16px 50px;
    background: #ed1c24;
    font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;
    font-weight: 700;
    font-style: normal;
    width: auto;
    text-align: center;
    text-transform: uppercase;
    transition: 0.3s ease all;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    color: white !important;
    border-radius: 300px;
    border: 2px solid #ed1c24;
    letter-spacing: 0.5px;
    position: relative;
}
#scrollable input[type=submit]:hover{
  background:white;
  color:#ed1c24 !important;
}
#scrollable input[type=submit]:active{
  background:none;
}
.form input[type=text]:focus {
   border: 2px solid black;
}
textarea, input {
   outline: none;
}
.error{
  color: red;
    text-align: center;
    margin-top: 20px;
    line-height: 22px;  
}
.success{
  color: #967b44;
    text-align: center;
    margin-top: 30px;
    line-height: 22px;
    font-size: 24px;
}
.signup .success h3{
  font-size: 40px;
}
.signup .signup-form{
  width:830px;
}
.signup input[type="checkbox"] + label{
  color:black;
}
#scrollable .signup h3{
    text-align: center;
    color: black;
    font-size: 80px;
    line-height: 85px;
}
.signup a{
  color:#ed1c24;
}
.signup a:hover{
  color:black;
}
.signup .nice-select{
  background:transparent;
  line-height: 32px;
  color: #7B797C;
  height: 34px;
  font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;
    xtext-transform: uppercase;
    font-size: 14px;
}
.signup .nice-select .current{
  border: 2px solid #af9803;
  padding-left:8px;
}
.signup .form-table-submit{
  padding-top:0px;
}
.signup input[type="checkbox"] + label:before{
  border: 2px solid #ed1c24;
}
.signup input[type="checkbox"]:checked + label:before{
  border: 2px solid #ed1c24;
    background: url(/_core/images/icon-check.png) no-repeat center center #ed1c24;
}
.signup .signup_privacy{
  margin-top:20px;
}

@media only screen and (min-width: 701px) {
  .contest-entry.newsletter-form .signup-form #signup_email {
    display: inline-block;
    width: 48.5%;
    margin-right: 3%;
    float: left;
  }
  .contest-entry.newsletter-form .signup-form #nice-signup_country {
    margin-right: 0;
  }
}

/* SOCIAL
---------------------------------------------- */
.social{
  padding: 20px 0px 70px;
}
.social .wrap{
  max-width: 213px;
  margin:0 auto;
}
#scrollable .social h3{
  color: #000000;
    font-size: 34px;
    display: inline;
    margin-right:15px;
}
.social a{
  margin-right: 12px;
}
.social a:last-of-type{
  margin-right:0px;
}
.social a img{
  opacity: 1;
  transition:0.3s ease all;
}
.social a img:hover{
  opacity: 0.5;
}

/* MEDIA QUERIES
---------------------------------------------- */
/* stick reposition */
@media (max-width:1170px){
  .sticks .stick img.main {
      top: 30px;
  }
}
@media (max-width:990px){
  .sticks .stick img.main {
      top: 50px;
  }
}
@media (max-width:920px){
  .sticks .stick img.main {
      top: auto;
      bottom: 0px;
      margin-bottom: 30px;
  }
}
/* standard styles */
@media (max-width:1270px){
  .closing img.collage{
    width: 530px;
  }
}
@media (max-width:1180px){
  .closing img.collage{
    width: 500px;
  }
  #hpr-colorways .limited-edition {
	  max-width:500px;
  }
}
@media (max-width:1140px){
  .closing img.collage{
    width: 450px;
  }
  .logo-wrap.one .marker .gold-line{
    width: 12vw;
  }
}
@media (max-width:1070px){
  .closing img.collage{
    width: 400px;
  }
  .closing img.glove{
    width: 280px;
  }
}
@media (max-width:1024px){
  .signup .signup-form{
    width:90%;
  }
  #scrollable .tech .columns .col h4 {
      font-size: 25px;
    line-height: 28px;
    }
    .tech.desktop .accent{
      width: 280px;
    }
    .sticks .accent{
      width: 280px;
    }
    #scrollable .badges h4{
	    max-width: 95%;
    }
    .badges h4 img{
	    display: none;
    }
    #scrollable .badges h4:first-of-type {
	    font-size: 60px;
	    line-height: 65px;
	}
	#scrollable .badges h4:last-of-type {
	    font-size: 25px;
	    line-height: 34px;
    }
    .badges .images{
	    max-width: 95%;
    }
    .badges .images img{
	    padding: 0px;
	    width: 32.5%;
    }
  #hpr-colorways .limited-edition {
	  display:block;
  }
  #hpr-colorways .stick-price {
    margin: -50px auto 65px;
	}
}
@media (max-width:1000px){
  #scrollable .tech .columns .col .padd{
    padding-bottom: 5vw;
  }
  .tech .columns .col .geo{
    padding-top: 15vw;
  }
  .logo-wrap.one .marker{
    top:16vw;
  }
}
@media (max-width:940px){
  .closing .left {
      width: 50%;
  }
  .closing .left .price{
    margin-bottom: 60px;
  }
  .closing img.glove {
      width: 40%;
      margin-left: 5%;
    }
  .closing img.collage {
    display:none;
  }
}
@media (max-width:880px){
  .btn{
    font-size: 9px;
  }
  .details img{
    width: 100%;
  }
}
@media (max-width:800px){
  .closing img.glove{
    top:-60px;
  }
  .closing{
    padding-top: 0px;
  }
  #scrollable .signup h3{
    font-size: 50px;
    line-height: 55px;
  }
  .sticks .accent{
      width: 200px;
    }
}
@media (max-width:768px){
  .lockup{
    max-width: 70% !important;
  }
  .hpr .bg{
    opacity: 0.2;
  }
  .hpr p {
      max-width: 100%;
      width: 100%;
      margin-left: 0%;
      margin-top: 5%;
  }
  .hpr .video{
    height:400px;
  }
  .hpr .video a img{
    width: 90px;
  }
  .slider{
    padding:90px 0px;
  }
  .slider .control{
    width: 50px;
    padding:10px;
  }
  .slider .next{
    right:10px;
  }
  .slider .prev{
    left:10px;
  }
  .sticks .stick .details {
      display: block;
      position: relative;
      float: none;
      width: 100%;
      z-index: 2;
      margin-right: 0px;
  }
  .details img {
      width: initial;
      max-width: 90%;
  }
  .sticks .stick .divider{
    display: none;
  }
  .sticks .stick .price {
      display: block;
      position: relative;
      float: none;
      width: 100%;
      z-index: 2;
  }
  .sticks{
    padding:80px 0px;
  }
  .sticks .stick{
    padding-bottom: 0px;
  }
  .sticks .stick img.main{
    position: relative;
    top:-20px;
  }
  .tech.desktop{
    display: none;
  }
  .tech.mobile{
    display: block;
  }
  .stx-logo {
      position: absolute;
      top: 14px;
      left: 14px;
      width: 50px;
  }
  .btn.sticky{
    display: none;
  }
  #scrollable .hpr .video p{
    top:60%;
    font-size: 13px;
  }
  .slider .accent{
    width: 280px;
  }
}
@media (max-width:700px){
  .signup-form {
      margin: 0 auto;
      padding: 20px 0px;
  }
  .contest-entry.newsletter-form .signup-form input[type="text"]{
    width:100%;
  }
  .contest-entry.newsletter-form .signup-form .nice-select{
    width:100%;
  }
}
@media (max-width:640px){
	#hpr-colorways .glove-price {
		margin: -20px auto;
	}
	#hpr-colorways .stick-price {
    margin: -20px auto 60px;
	}
	#hpr-colorways .colorways-headline h1 {
		font-size:65px;
		line-height:60px;
	}
  .hpr .video{
    height: 300px;
    margin-bottom: 50px;
  }
  .hpr .video a img{
    width: 70px;
  }
  .closing .left {
      width: 100%;
      display: block;
      float: none;
  }
  .closing img.glove {
      width: 50%;
      margin-left: 0px;
      top: auto;
      margin: 0 auto;
      position: relative;
      display: block;
      float: none;
  }
  #scrollable .signup h3{
    font-size: 35px;
    line-height: 38px;
  }
  #scrollable .header{
    padding:100px 30px 100px 30px;
  }
  #scrollable .glitch{
    font-size: 20px;
    line-height: 20px;
    width: 188px;
  }
  .hpr{
    padding-top: 60px;
  }
  .slider{
    padding:60px 0px;
  }
  .sticks{
    padding:60px 0px 0px 0px;
  }
  .signup .signup-form{
    width: 100%;
  }
  .details img{
    max-width: 200px;
  }
  #scrollable .sticks p{
    padding-top: 10px;
  }
  .tech .columns .col img.logo{
    width: 250px;
  }
  .slider .accent{
    width: 200px;
  }
  #scrollable .header .logo{
    margin: 30px auto;
  }
  #scrollable .badges h4:first-of-type {
	 font-size: 50px;
	 line-height: 55px;
	}
}
@media only screen and (max-width: 560px){
  .signup .signup-form{
    padding-bottom: 0px;
  }
}
@media (max-width:550px){
  .closing img.glove {
    width: 80%;
  }
  #scrollable .badges h4:first-of-type {
	    font-size: 40px;
	    line-height: 45px;
	}
	#scrollable .badges .images {
    	margin: 20px auto;
    }
    #scrollable .badges h4:last-of-type {
	    font-size: 22px;
	    line-height: 27px;
	}
	.badges{
		padding-bottom: 40px;
	}
}
@media only screen and (max-width: 500px){
  .signup-form .signup-choices li {
      display: table;
      padding:0px;
    }
    #scrollable .signup h3{
    font-size: 30px;
    line-height: 34px;
  }
}