.catch-a-can {
	background-image:url(/resources/img/catch-a-can/bg-1920_v2_cropped.jpg);
/*	background-image:url(/resources/img/catch-a-can/guide2.jpg);*/
	background-position:top center;
}

.catch-a-can .intro .catch-a-can-title {
	display:block;
	position:relative;
	z-index:0;
	width:71%;
	margin:0 auto;
}

.catch-a-can .intro .cans {
	display:block;
	width:13.47%;
	margin:0 auto;
	position:relative;
	z-index:1;
	margin-top:-6.5%;
}

.catch-a-can .intro .text {
	margin-top:2%;
	padding:0 20px;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
}

.catch-a-can .intro .text h3 {
	font-size:2em;
}

.catch-a-can .scaling-text p {
	font-size:1.1em;
	line-height:1.4;
}

.catch-a-can .intro .carret-down {
	display:block;
	width:3.68%;
	margin:4.4% auto 0;
	cursor:pointer;
	transition:transform .15s ease-out;
}

.catch-a-can .intro .carret-down:hover {
	transform:scale(1.15);
}

.catch-a-can .hand-hazy {
	display:block;
	width:100%;
	position:absolute;
	top:20%;
}

@media(min-width:768px) {
	
	.desktop-ratio-height {
	  position: relative;
	}

	.desktop-ratio-height:before {
	  display: block;
	  content: "";
	  width: 100%;
	}
	
	.desktop-ratio-height > .content {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  margin: 0;
	  padding: 0;
	}
	
	.catch-a-can:before {
		padding-top:379%;
	}

	.catch-a-can-inner {
		position:absolute;
		z-index:0;
		top:0;
		right:0;
		bottom:0;
		left:0;
	}

	.catch-a-can .intro {
		position:absolute;
		margin-top:15.3%;
		top:0;
		left:0;
		right:0;
	}
	
	.catch-a-can .beer-text {
		display:block;
		position:absolute;
		z-index:2;
		width:35%;
	}
	
	.catch-a-can .beer-text.hazy-ipa-text {
		top:19.2%;
		left:56%;
	}
	
	.catch-a-can .beer-text.pale-ale-text {
		top:35.5%;
		left:12%;
	}
	
	.catch-a-can .beer-text.ipa-text {
		top:51.1%;
		left:56%;
	}
	
	.catch-a-can .beer-text.pilsner-text {
		top:68.8%;
		left:12%;
	}
	
	.catch-a-can .video-cta {
		display:block;
		position:absolute;
		background-image:url(/resources/img/catch-a-can/Catch-A-Can.jpg);
		border:#8d7249 .25em solid;
		width:61%;
		z-index:0;
		bottom:6.5%;
		left:19.5%;
		cursor:pointer;
		box-sizing:border-box;
	}
	
	.catch-a-can .beer-text .inner {
		margin-top:45%;
	}
}

#hazy-ipa-section-top {
	position:absolute;
	top:24%;
	left:50%;
/*	width:100px;
	height:10px;
	background:#000;*/
}

.catch-a-can .beer-text .beer-title {
	display:block;
	width:90%;
}

.catch-a-can .beer-text .beer-title.ipa-title {
	width:35%;
}

.catch-a-can .beer-text .beer-title.pilsner-title {
	width:78%;
}

.catch-a-can .beer-text p {
	margin:2em 0;
}

.catch-a-can .beer-text.pilsner-text p {
	color:#fff;
}

.catch-a-can .button {
	border:none;
	border-radius:10px;
}

.can-animation:before {
	padding-top:100%;
}

.can-animation {
	pointer-events:none;
	position:fixed;
	z-index:1;
	top:50%;
	left:0;
	width:100%;
	transform:translateY(-50%);
}

.paw-animation {
	pointer-events:none;
	position:absolute;
	z-index:1;
	bottom:0;
	left:0;
	width:100%;
}

.paw-animation:before {
	padding-top:56.25%;
}

.can-animation canvas, .paw-animation canvas {
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important;
}

.catch-a-can .abv-ibu h3 {
	display:inline-block;
	margin:0;
	vertical-align:middle;
	font-size:1.6em;
	color:#000;
}

.catch-a-can .pilsner-text .abv-ibu h3 {
	color:#fff;
}

.catch-a-can .abv-ibu {
	margin-bottom:2.5em;
}

.catch-a-can .abv-ibu .vertical-divider {
	display:inline-block;
	margin:0 18px;
	vertical-align:middle;
	background:#000;
	width:.2em;
	height:1.4em;
}

.catch-a-can .pilsner-text .abv-ibu .vertical-divider {
	background:#fff;
}

.catch-a-can .video-cta .video-arrow {
	display:block;
	width:12%;
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	transition: width .2s ease-out;
}

.catch-a-can .video-cta:hover .video-arrow {
	width:14%;
}

.catch-a-can .video-cta:before {
	padding-top:56%;
}

/*
.catch-a-can .video-cta:after {
	content:'';
	display:block;
	background:#000;
	position:absolute;
	z-index:0;
	top:0;
	right:0;
	bottom:0;
	left:0;
	opacity:.3;
}
*/

@media(max-width:767px) {
	
	.catch-a-can {
		background-image:url(/resources/img/catch-a-can/bg-767_v2_cropped.jpg);
	}
	
	.catch-a-can {
		padding:1px 0 10%;
		overflow:hidden;
		position:relative;
	}
	
	.catch-a-can .intro {
		position:relative;
		margin-top:20%;
	}
	
	.catch-a-can .scaling-text p {
		font-size:16px !important;
		line-height:1.4;
	}
	
	.catch-a-can .beer-text {
		display:block;
		position:relative;
		z-index:2;
		width:80%;
		max-width:400px;
		margin:10%;
	}
	
	.catch-a-can .beer-text-wrap {
		position:relative;
		margin-top:6%;
	}
	
	.catch-a-can .beer-text.hazy-ipa-text,
	.catch-a-can .beer-text.ipa-text {
		float:right;
		width:50%;
		margin-left:30%;
	}
	
	.catch-a-can .beer-text.pale-ale-text,
	.catch-a-can .beer-text.pilsner-text {
		width:50%;
		margin-right:30%;
		margin-bottom:0;
	}
	
	.catch-a-can .beer-text .inner {
		transform:none !important;
	}
	
	.catch-a-can .beer-text .beer-title {
		width:80%;
	}
	
	.catch-a-can .beer-text .beer-title.ipa-title {
		width:32%;
	}
	
	.catch-a-can .beer-text .beer-title.pilsner-title {
		width:79%;
	}
	
	.catch-a-can .abv-ibu h3,
	.catch-a-can .intro .text h3 {
		font-size:18px;
	}

	.catch-a-can .abv-ibu {
		margin-bottom:20px;
	}
	
	.can-animation, .paw-animation { 
		display:none !important;
	}
	
	.catch-a-can .video-cta {
		display:block;
		background-image:url(/resources/img/catch-a-can/Catch-A-Can.jpg);
		border:#8d7249 .25em solid;
		width:80%;
		margin:10%;
		z-index:0;
		cursor:pointer;
		box-sizing:border-box;
	}
	
	.can-image:before, .paw-image:before {
		padding-top:56%;
	}
	
	.can-image.hazy-image {
		position:absolute;
		top:0;
		left:-12%;
		width:100%;
		background-image:url(/resources/img/catch-a-can/sequences/hand_hazy/hand_hazy_00023.png);
	}
	
	.can-image.pale-image {
		position:absolute;
		top:-10%;
		right:-8%;
		width:100%;
		background-image:url(/resources/img/catch-a-can/sequences/hand_pale/hand_pale_00022.png);
	}
	
	.can-image.ipa-image {
		position:absolute;
		top:0;
		left:-12%;
		width:100%;
		background-image:url(/resources/img/catch-a-can/sequences/hand_ipa/hand_ipa_00023.png);
	}
	
	.can-image.pilsner-image {
		position:absolute;
		top:-10%;
		right:-15%;
		width:100%;
		background-image:url(/resources/img/catch-a-can/sequences/bear_hand_pils/bear_hand_pils_00022.png);
	}
	
	.paw-image {
		pointer-events:none;
		position:absolute;
		z-index:1;
		bottom:0;
		left:0;
		width:100%;
		background-image:url(/resources/img/catch-a-can/sequences/NetPanHandPaw/NetPanHandPaw_00073.png);
	}
}

/* scaling text based on comp width of 1440px */

@media(min-width:1500px) {
	.scaling-text { font-size:104%; }
}

@media(min-width:1550px) {
	.scaling-text { font-size:107%; }
}

@media(min-width:1600px) {
	.scaling-text { font-size:111%; }
}

@media(min-width:1650px) {
	.scaling-text { font-size:114%; }
}

@media(min-width:1700px) {
	.scaling-text { font-size:118%; }
}

@media(min-width:1750px) {
	.scaling-text { font-size:121%; }
}

@media(min-width:1800px) {
	.scaling-text { font-size:125%; }
}

@media(min-width:1850px) {
	.scaling-text { font-size:128%; }
}

@media(min-width:1900px) {
	.scaling-text { font-size:132%; }
}

@media(min-width:1950px) {
	.scaling-text { font-size:135%; }
}

@media(min-width:2000px) {
	.scaling-text { font-size:138%; }
}

@media(min-width:2050px) {
	.scaling-text { font-size:142%; }
}

@media(min-width:2100px) {
	.scaling-text { font-size:146%; }
}

@media(min-width:2150px) {
	.scaling-text { font-size:149%; }
}

@media(min-width:2200px) {
	.scaling-text { font-size:153%; }
}

@media(min-width:2250px) {
	.scaling-text { font-size:156%; }
}

@media(min-width:2300px) {
	.scaling-text { font-size:159%; }
}

@media(min-width:2350px) {
	.scaling-text { font-size:163%; }
}
@media(min-width:2400px) {
	.scaling-text { font-size:166%; }
}

@media(min-width:2450px) {
	.scaling-text { font-size:170%; }
}

@media(min-width:2500px) {
	.scaling-text { font-size:174%; }
}

@media(min-width:2550px) {
	.scaling-text { font-size:177%; }
}

@media(min-width:2600px) {
	.scaling-text { font-size:180%; }
}

@media(min-width:2650px) {
	.scaling-text { font-size:184%; }
}

@media(min-width:2700px) {
	.scaling-text { font-size:187%; }
}

@media(min-width:2750px) {
	.scaling-text { font-size:190%; }
}

@media(min-width:2800px) {
	.scaling-text { font-size:194%; }
}

/*@media(max-width:1440px) {
	.scaling-text { font-size:100%; }
}*/

@media(max-width:1400px) {
	.scaling-text { font-size:97%; }
}

@media(max-width:1350px) {
	.scaling-text { font-size:93%; }
}

@media(max-width:1300px) {
	.scaling-text { font-size:90%; }
}

@media(max-width:1250px) {
	.scaling-text { font-size:86%; }
}

@media(max-width:1200px) {
	.scaling-text { font-size:83%; }
}

@media(max-width:1150px) {
	.scaling-text { font-size:79%; }
}

@media(max-width:1100px) {
	.scaling-text { font-size:76%; }
}

@media(max-width:1050px) {
	.scaling-text { font-size:73%; }
}

@media(max-width:1024px) {
	.scaling-text { font-size:71%; }
}

@media(max-width:960px) {
	.scaling-text { font-size:66%; }
}

@media(max-width:900px) {
	.scaling-text { font-size:62.5%; }
}

@media(max-width:850px) {
	.scaling-text { font-size:59%; }
}

@media(max-width:812px) {
	.scaling-text { font-size:56%; }
}

@media(max-width:800px) {
	.scaling-text { font-size:55%; }
}

@media(max-width:767px) {
	.scaling-text { font-size:53%; }
}

@media(max-width:667px) {
	.scaling-text { font-size:46%; }
}

@media(max-width:568px) {
	.scaling-text { font-size:39%; }
}

@media(max-width:414px) {
	.scaling-text { font-size:35%; }
}

@media(max-width:375px) {
	.scaling-text { font-size:32%; }
}