html, body {
    overscroll-behavior-x: none;
}

/* section { margin:0;  padding:2em 0; } */
/* h1,h2 { font-size:2em; line-height:1.25; margin:0 auto 1rem; letter-spacing:0.05em;  } */
/* h3 { color:#EA002A; margin:1em auto 0; letter-spacing:0.05em; text-align:center; } */
@media (min-width:48em) {
	/* section {  padding:2em 0; } */
	.hero-canhands .icon--player { font-size:3vw; }
}
@media (min-width:64em) {
	.hero-canhands h1 { font-size:3em; }
}
@media (min-width:75em) {
	/* h1,h2 { font-size:3em; } */
}
.hero-canhands h1 { font-size:2em; }
.hero-canhands { background:#000; overflow:hidden;  }

.hero-canhands  .ytplayer img { object-fit:cover; }
.hero-canhands section { padding:0; }
.hero-canhands .ytplayer-wrapper { max-width:calc(177vh - 16em); margin:auto; min-width:50vw; }
@media (min-width:100em) {
	.hero-canhands .ytplayer-wrapper { max-width:100em; }
}

.hero-canhands .icon--player { color:#ffc533; }


.canhands-tweets { background:#EA002A; color:#ffc533; overflow:hidden; }
.canhands-tweets h1,
.canhands-tweets h2 { color:#fff; }
.canhands-filter { background:#ffc533; color:#EA002A; }

.tweet-slide { width:100vw; }
.tweet-wrapper { padding:0 1em; max-width:26em; margin:0 auto; min-height:20em;  }
.tweet-wrapper-w-image { width:70%; max-width:18em; }

.tweet-slide iframe { max-height:36em; max-width: 100%; }

.canhands-tweets blockquote { opacity:0.8; background:#fff; margin:0; padding:1.5em; border-radius:1em; color:#000;   }

.hero--getstuckin.hero--biggame{
	height: 100vw;
}

.hero--getstuckin.hero--biggame .ytplayer-wrapper{
	background: none;
	box-shadow: none;
	    z-index: 1;
}
.hero--getstuckin.hero--biggame .ytplayer{
	box-shadow: none;
}

.hero--getstuckin.hero--biggame .icon--player {
    color: #fff;
    border: 0.25em solid currentcolor;
	z-index: 1;
	left: 25%;
	top: 64%;
}

.hero--getstuckin.hero--biggame > section > img{
	    transform: translate(63%, -50%);
}


.hero--getstuckin.hero--biggame .content_wrapper::before {
    height: 72%;
}
.hero--getstuckin.hero--biggame h1 {
	text-shadow: none;
	line-height: 1;
}
.hero--getstuckin.hero--biggame .content_wrapper{
	position: relative;
    top: -61vw;
}
.hero--getstuckin.hero--biggame .rich-text {
    padding-left: 40%;
	padding-right: 0;
	top: 3vw;
}

.hero--getstuckin .checkoutour {
	text-align: center;
	color: #fdc71f;
	margin:  0 auto;
	position: relative;
	text-transform: uppercase;
	font-family: "Pinup";
	top: -4vw;
    white-space: pre-wrap;
	line-height: .9;
}

.hero--getstuckin .checkoutour img{
	width: 1em;
	display: block;
	margin: 0 auto;
}

.stuckin-footballcta{
	background-color: #339f3c;
	min-height: 25em;
	background-image: url(./canhand2-mobile.png), url(./football-player-mobile.png);
  	background-position: left bottom, right bottom;
  	background-repeat: no-repeat, no-repeat;
	background-size: 30%, 90%;
    padding-top: 7em;
    height: 136vw;
}
.stuckin-footballcta h2{
	font-size: calc(1em + 5vw);
	color: #fff;
	line-height: 1;
	margin: 0;
}

.stuckin-footballcta h2:nth-of-type(2){
	font-size: calc(.9em + 5vw);
	display: block;
}

.stuckin-footballcta h2:nth-of-type(3){
	font-size: calc(1em + 7vw);
	display: block;
}

.stuckin-footballcta p{
	font-family: "Pinup";
	font-size: .9em;
	color: #fff;
	line-height: 1;
	position: relative;
    bottom: -66vw;
	left: 29vw;
}

.stuckin-percentage{
	background-color: #e30327;
}

.page--home .hero--getstuckin .button-cta, .stuckin-footballcta .button-cta {
    box-shadow: 0.25em 0.25em 0em #fdc71f;
}

.stuckin-footballcta .button-cta {
	bottom: -66vw;
	left: 29vw;

}

.stuckin-percentage{
	text-align: center;
	padding: 7em 0 2em
}


.stuckin-percentage h2{
	font-size: calc(1em + 8vw);
	color: #fff;
	line-height: 1;
	letter-spacing: normal;
	vertical-align: top;
	text-shadow: 0.04em 0.04em 0em #fdc71f;
}
.stuckin-percentage h2 span{
	display: inline-block;
	font-size: .29em;
    width: 50%;
    white-space: pre-wrap;
    text-align: left;
	vertical-align: top;
	text-shadow:none;
	margin-top: .2em;
}

.stuckin-percentage h3{
	color: #fdc71f;
	font-size: 1em;
}

.stuckin-percentage p{
	color: #fff;
	font-size: .8em;
	font-family: "Pinup";
	text-transform: uppercase;
}

@media (min-width:48em) {
	.canhands-tweets h1,
	.canhands-tweets h2 { max-width:16em; }
	.tweet-slide { width:38em; }
	.tweet-wrapper { width:80%; padding-bottom:2em; position:relative; }
	.tns-outer::after { content:''; bottom:0; width:100%; position:absolute; height:3em; pointer-events:none; left:0; }
	.tweet-wrapper-w-image { width:60%; max-width:18em; }
	.hero--getstuckin.hero--biggame{
		height: 48vw;
	}
	.stuckin-footballcta{
		max-height: 55em;
		background-image: url(./canhand2-desktop.png), url(./football-player-desktop.png);
		background-size: 16%, 52%;
		padding-top: 11vw;
		height: 35vw;
	}
	.stuckin-footballcta h2{
		font-size: calc(1em + 4.5vw);
		left: -8vw;
    	position: relative;
	}

	.stuckin-footballcta p{
		bottom: 0vw;
		left: 20vw;
	}

	.stuckin-footballcta .button-cta {
		bottom: 0vw;
		left: 20vw;
	
	}
	.stuckin-percentage h2{
		font-size: calc(1em + 10vw);
	}
	.stuckin-percentage h3{
		color: #fdc71f;
		font-size: 2em;
	}
	.stuckin-percentage{
		padding: 10vw 0 2em
	}
	
	.stuckin-percentage p{
		color: #fff;
		font-size: 1em;
		font-family: "Pinup";
		text-transform: uppercase;
	}
	.hero--getstuckin.hero--biggame .icon--player {
		top: 17vw;
		left: 5vw;
	}
	.hero--getstuckin.hero--biggame .ytplayer-wrapper {
		width: 60%;
		margin: 0 auto;
	}
	.hero--getstuckin.hero--biggame .content_wrapper{
		top: -37vw;
	}
	.hero--getstuckin.hero--biggame > section > img{
		transform: translate(50%, -50%);
	}
}
.tns-controls button[data-controls] { padding:0; font-size:66%;  }
.tns-controls button[data-controls]::before, 
.tns-controls button[data-controls]::after {
	color:#ffc533;
}
.tns-nav { box-shadow:inset 0 -4em 1.5em -2.66em #ea002a;  }
.tns-nav ~ div + div {	 }
.tns-controls { position:absolute; bottom:0; height:0; z-index:2;  left:50%; width:16em;  transform:translate(-50%,0); }
.tns-controls button[data-controls="prev"] { margin-top:-3.25em; left:-3em; }
.tns-controls button[data-controls="next"] { margin-top:-3.25em; right:-3em; }

.tns-outer { position: relative; }
.tns-nav { bottom:0;  z-index:1; }
.tns-nav button:hover:focus, 
.tns-nav button:hover:active { outline:none; box-shadow:none; } 
.tns-nav button { font-size:1.5em; background:url(./indicator.svg) center / 70% auto no-repeat; }
.tns-nav button::before { color:transparent; }
.tns-nav button.tns-nav-active { background-image:url(./indicator-active.svg)  }

.canhands-filter .button-cta { box-shadow: 0.25em 0.25em 0em #fff; }
.canhands-filter .button-cta:hover { box-shadow: 0.3em 0.3em 0.05em rgba(255,255,255,0.8); }
.canhands-filter .button-cta:focus{
	outline: 2px solid #000;
}
.canhands-filter { overflow:hidden;	position: relative; }
.canhands-filter section { padding-bottom:0; text-align:center; overflow:hidden; }
.canhands-filter .eyebrow { padding-bottom:0; font-weight:bold; font-size:1.5em; }
.canhands-filter h2 { color:#fff; text-shadow:0.1em 0.1em 0 #EA002A; }
.canhands-filter .rich-text { padding:2em 0; }
.gsap-anim { margin:0 -4% -4%;  }
.gsap-anim::before { content:''; display:block; padding-top:70% }
.gsap-tiktok {position:absolute;width: 104%;background:url(./tiktok.png) center bottom -2% / contain no-repeat;transform-origin:10% 90%;left: -15%;}
.gsap-canhand { position:relative; background:url(./canhand.png) right bottom / contain no-repeat;transform-origin:90% 90%; left:5%; margin:0 -2% -2%; }
.products-featured-row { margin-bottom:0; }


@media (max-width:36em) {
	.canhands-filter { font-size:2vw; }
}
@media (min-width:48em) {
	#gsap-trigger1,
	#gsap-trigger2 { 
		border-top:1px solid red;
		position:absolute;
		margin-top:10%; 
	}
	.gsap-wrappy { max-width:48em; margin:0 auto; position:relative; }
}
@media (min-width:75em) {
	.canhands-filter .rich-text { position:absolute; right:50%; width:50%; max-width:36em; transform:translate(0,-50%); top:50%;  z-index:1; }
	.gsap-wrappy {margin-left: 45%;margin-top:10em;}
}
@media (min-width:100em) {
	.gsap-wrappy {position:relative;max-width: 70em;}
}
@media (max-width:36em) {
	.canhands-filter h2,
	.canhands-tweets h1 { font-size:6vw; }
}
@media (max-width:20em) {
	.canhands-filter h2,
	.canhands-tweets h1 { font-size:1.5em; }
}