@font-face {
  font-family: apercu condensed pro; src: url("../fonts/apercu-condensed-bold-pro.woff");
}

@font-face {
  font-family: apercu pro; src: url("../fonts/apercu-regular-pro.woff");
}

html, body{
	overflow: hidden;
}

body{
	height: 1920px; width: 1080px;  font-family: "apercu pro", "Arial", sans-serif; position: relative; 
}

img{
	max-width: 100%;
}

.d-none{
	display: none;
}

.d-block{
	display: block;
}

#products{
	width: 100%; height: 100%; background-size: cover; transition: all 0.75s ease;
}

#screen-1 #products{
	background:url("../images/shelf-left.png") center no-repeat;
}

#screen-2 #products,
#screen-3 #products{
	background:url("../images/shelf-center.png") center no-repeat;
}

#screen-4 #products{
	background:url("../images/shelf-right.png") center no-repeat;
}

.shelf{
	position: absolute; left: 0;  height: 390px; display: flex; align-items:end; justify-content: space-between; padding: 20px 60px;
}

#screen-1 .shelf{
	padding-left: 130px;
}

#screen-4 .shelf{
	padding-right: 130px;
}

.shelf:after{
	content: ""; position: absolute; width: 100%; left: 0; right: 0; bottom: 0;
}

.shelf.w-100{
	right: 0;
}

.shelf.w-75{
	right: 25%;
}

.shelf.w-50{
	right: 50%;
}

#shelf-1{
	top: 110px; padding-bottom: 10px;
}

	#shelf-1 .stack{
		margin-bottom: -15px;
	}

	#shelf-1 .stack .can{
		margin-top: -27px;
	}

	#shelf-1 .stack .can._16oz_short,
	#shelf-1 .stack .can._15_8oz_short{
		margin-top: -33px;
	}

#shelf-2{
	top: 575px; padding-bottom: 20px;
}
	#shelf-2 .stack .can{
		margin-top: -25px;
	}
	
#shelf-3{
	top: 1021px; padding-bottom: 15px;
}
	#shelf-3 .stack .can{
		margin-top: -25px;
	}

#shelf-4{
	top: 1465px; padding-bottom: 20px;
}
	#shelf-4 .stack .can{
		margin-top: -25px;
	}

	#shelf-4 .stack .can._9_5oz{
		margin-top: -50px;
	}

#shelf-2 .stack .can:nth-child(1),
#shelf-3 .stack .can:nth-child(1),
#shelf-4 .stack .can:nth-child(1){
	z-index: 3;
}
#shelf-2 .stack .can:nth-child(2),
#shelf-3 .stack .can:nth-child(2),
#shelf-4 .stack .can:nth-child(2){
	z-index: 2;
}
#shelf-2 .stack .can:nth-child(3),
#shelf-3 .stack .can:nth-child(3),
#shelf-4 .stack .can:nth-child(3){
	z-index: 1;
}

#shelf-header{
	position: absolute; top: 0; left: 0; right: 0; pointer-events: none;
}

#shelf-fronts{
	position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
}

#shelf-fronts img{
	position: absolute; z-index: 3;
}

#shelf-fronts img:nth-child(1){
	top: 480px;
}

#shelf-fronts img:nth-child(2){
	top: 950px;
}

#shelf-fronts img:nth-child(3){
	top: 1400px;
}

#shelf-fronts img:nth-child(4){
	top: 1845px;
}

.stack{
	display: flex; flex-direction: column; align-items:center; justify-content:end;
}

.can{
	/*background:#ccc;*/ position: relative; z-index: 0;/*border-bottom: 2px solid;*/
}

.gap{
	background: transparent;
}

.half-can{
	width: 59px;
}
 
._9_5oz{
	width: 129px; height: 124px;
}

._15oz,
._15_1oz,
._15_2oz,
._15_5oz,
._15_7oz,
._15_8oz,
._16oz{
	width:113px; height: 184px; 
}


._16oz_short,
._15_5oz_short,
._15_8oz_short{
	/*width: 113px; height: 136px;*/
	width: 125px; height: 150px;
}

._21_5oz,
._22oz{
	width: 112px; height: 166px;
}

._28oz{
	width: 135px; height: 252px;
}

#callouts{
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
}

#callouts .callout{
	position: absolute; z-index: 3; pointer-events: all;
}

#product-modal,
#callout-modal{
	position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events:none; perspective: 1000px; z-index: 10;
}

.blocker{
	background: black; position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; transition: all 0.5s ease; background: rgba(0,0,0,0.33); opacity: 0;
}

body.product-modal-open #product-modal .blocker,
body.callout-modal-open #callout-modal .blocker{ 
	opacity: 1; pointer-events: all; backdrop-filter: blur(8px);
}

.modal{
	position: absolute; width: 700px; height: 1100px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; border-radius: 10px; box-shadow:0 0 50px rgba(0,0,0,0.75); padding: 100px 50px; background-repeat: no-repeat; background-position: bottom center; background-size: contain; pointer-events: none;

	transition: transform 0.5s ease; opacity: 0; transform: rotateX(90deg) scale(0.25); transform-style: preserve-3d; backface-visibility: hidden;
}

#callout-modal .modal{
	display: flex; background-image: url("../images/modals/modal-surprise.png"); padding: 0; background-size:cover;
}

#callout-modal .modal img{
	margin: auto 0; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; max-width: 100%;
}

#callout-modal .modal video{
	margin: 0 auto; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; max-width: 100%;
}

body.product-modal-open #product-modal .modal,
body.callout-modal-open #callout-modal .modal{
	opacity: 1; pointer-events: all; transform: rotateX(0deg) scale(1);
}

body.product-modal-open.easy-access  #product-modal .modal,
body.callout-modal-open.easy-access  #callout-modal .modal{
	top: 350px;
}

.modal .close{
	position: absolute; top: 30px; right: 30px; font-size: 24px; text-transform: uppercase; color:#FFCA2E; display: flex; align-items:center; text-decoration:none; z-index: 1;
}

.modal .close:hover,
.modal .close:focus,
.modal .close:active{
	text-decoration:none;
}

.modal .close .icon{
	background: #fff;  font-size: 40px; line-height: 1; display: inline-block; width: 40px; height: 40px; text-align: center; border-radius: 50%; margin-left: 13px; color: #d43631; margin-top: -3px; position: relative;
}

.modal .close .timer-left{
	position: absolute; width: 26px; height: 51px; background: transparent; left: -6px; top: -5px; z-index: -1; overflow:hidden;
}
.modal .close .timer-left:before{
	content: ""; position: absolute; width: 200%; height: 100%; left: 0; background: rgba(0,0,0,0.25); border-radius: 50%;
}
.modal .close .timer-left:after{
	content: ""; position: absolute; top: -1%; left: 0; background: #d43631; width: 100%; height: 102%; transform-origin: center right;
	
}
.modal .close .timer-right{
	position: absolute; width: 26px; height: 51px; background: transparent; right: -6px; top: -5px; z-index: -1; overflow:hidden;
}
.modal .close .timer-right:before{
	content: ""; position: absolute; width: 200%; height: 100%; right: 0; background: rgba(0,0,0,0.25); border-radius: 50%;
}
.modal .close .timer-right:after{
	content: ""; position: absolute; top: -1%; left: 0; background: #d43631; width: 100%; height: 102%; transform-origin: center left;
}

/* Change the time properties below to be half the desired screen timeout in seconds, to sync with auto screen timeout */
.modal-timer-run-30 .modal .close .timer-right:after{
	animation:timerSpin 15s linear; animation-iteration-count: 1; animation-fill-mode: forwards;
}
.modal-timer-run-30 .modal .close .timer-left:after{
	animation:timerSpin 15s linear; animation-delay: 15s; animation-iteration-count: 1; animation-fill-mode: forwards;
}

.modal-timer-run-60 .modal .close .timer-right:after{
	animation:timerSpin 30s linear; animation-iteration-count: 1; animation-fill-mode: forwards;
}
.modal-timer-run-60 .modal .close .timer-left:after{
	animation:timerSpin 30s linear; animation-delay: 30s; animation-iteration-count: 1; animation-fill-mode: forwards;
}

.modal-timer-run-90 .modal .close .timer-right:after{
	animation:timerSpin 45s linear; animation-iteration-count: 1; animation-fill-mode: forwards;
}
.modal-timer-run-90 .modal .close .timer-left:after{
	animation:timerSpin 45s linear; animation-delay: 45s; animation-iteration-count: 1; animation-fill-mode: forwards;
}

.modal-timer-run-120 .modal .close .timer-right:after{
	animation:timerSpin 60s linear; animation-iteration-count: 1; animation-fill-mode: forwards;
}
.modal-timer-run-120 .modal .close .timer-left:after{
	animation:timerSpin 60s linear; animation-delay: 60s; animation-iteration-count: 1; animation-fill-mode: forwards;
}


@keyframes timerSpin{
	0%{
		transform: rotate(0deg); opacity: 1;
	}
	99.9%{
		transform: rotate(180deg); opacity: 1;
	}
	100%{
		transform: rotate(180deg); opacity: 0;
	}
}

.modal .accessible-close{
	top:unset; bottom:-100px; left:0; right:0; margin: auto; max-width: 160px; justify-content:center; padding:18px 12px; border-radius:10px; background:#d43631;
}

#product-modal .product-title{
	color:#FFCA2E; font-size: 50px; text-transform:uppercase; text-align:center; line-height: 1.125; margin-bottom: 30px;
}

#product-modal .product-text,
#product-modal .product-subtext{
	color: #fff; font-size: 20px; text-align: center;
}

#qr-code{
	display: flex; justify-content: center; align-items: center; width: 75%; margin: 40px auto;
}

#qr-code #qr-code-image{
	margin-right: 30px; transform: translateY(-200px); transition: all 0.5s ease; width: 30%;
}

#qr-code .qr-text{
	color:#FFCA2E; font-size: 20px; margin: 0; width: 50%;
}

#product-image{
	display: block; max-width: 400px; margin: 0 auto; position: relative; z-index: 1; transform: translateY(-200px); transition: all 0.5s ease; max-height: 380px;
}

body.product-modal-open .shelf{
	pointer-events: none;
}

body.product-modal-open #product-modal #product-image{
	transform: translateY(0);
}

body.product-modal-open #product-modal #qr-code #qr-code-image{
	transform: translateY(0);
}

.callout-touch{
	animation: calloutTouch 0.5s ease;
}

.can-touch{
	animation: canTouch 0.33s ease;
}

.duke{
	position: absolute; z-index: -1; height: 110px; width: 100px; left: 0; bottom: 20px; 
	background: url("../images/duke.png") center no-repeat;
	background-size: contain;
}
.duke-left{
	transform-origin: bottom left; animation: duke-left 5s ease; pointer-events:all;
}
.duke-right{
	transform-origin: bottom right; animation: duke-right 5s ease; pointer-events:all;
}

.bluey-1{
	position: absolute; z-index: -1; height: 150px; width: 100px; left: 0; bottom: 20px; 
	background: url("../images/bluey-1.png") center no-repeat; background-size: contain; opacity:0;
}
.bluey-2{
	position: absolute; z-index: -1; height: 150px; width: 100px; left: 0; bottom: 20px; 
	background: url("../images/bluey-2.png") center no-repeat; background-size: contain; opacity:0;
}
.bluey-1-left, .bluey-2-left{
	transform-origin: bottom left; animation: bluey-left 5s ease; pointer-events:all;
}
.bluey-1-right, .bluey-2-right{
	transform-origin: bottom right; animation: bluey-right 5s ease; pointer-events:all;
}

.bingo-1{
	position: absolute; z-index: -1; height: 150px; width: 100px; left: 0; bottom: 20px; 
	background: url("../images/bingo-1.png") center no-repeat; background-size: contain; opacity:0;
}
.bingo-2{
	position: absolute; z-index: -1; height: 150px; width: 100px; left: 0; bottom: 20px; 
	background: url("../images/bingo-2.png") center no-repeat; background-size: contain; opacity:0;
}
.bingo-1-left, .bingo-2-left{
	transform-origin: bottom left; animation: bluey-left 5s ease; pointer-events:all;
}
.bingo-1-right, .bingo-2-right{
	transform-origin: bottom right; animation: bluey-right 5s ease; pointer-events:all;
}

.arm{
	position: absolute; z-index: -1; height: 110px; width: 100px; left: 0; bottom: 15px; 
}
.arm-left{
	background: url("../images/arm-left.png") center no-repeat; background-size: contain; transform-origin: bottom left; animation: arm-left 5s ease; pointer-events:all;
}
.arm-right{
	background: url("../images/arm-right.png") center no-repeat; background-size: contain; transform-origin: bottom right; animation: arm-right 5s ease; pointer-events:all;
}

.can.shake{
	animation: shake 0.33s; animation-iteration-count: 1; animation-direction: alternate;
}

@keyframes calloutTouch{
	0%{transform: scale(1);}
	25%{transform: scale(0.9);}
	50%{transform: scale(1);}
	75%{transform: scale(0.95);}
	100%{transform: scale(1);}
}

@keyframes canTouch{
	0%{ transform: scale(1); }
	50%{ transform: scale(0.95); }
	100%{ transform: scale(1); }
}

@keyframes shake {
  0%{ transform: translate(1px, 1px) rotate(0deg);}
  10%{ transform: translate(-1px, -2px) rotate(-1deg);}
  20%{ transform: translate(-3px, 0px) rotate(1deg);}
  30%{ transform: translate(3px, 2px) rotate(0deg);}
  40%{ transform: translate(1px, -1px) rotate(1deg);}
  50%{ transform: translate(-1px, 2px) rotate(-1deg);}
  60%{ transform: translate(-3px, 1px) rotate(0deg);}
  70%{ transform: translate(3px, 1px) rotate(-1deg);}
  80%{ transform: translate(-1px, -1px) rotate(1deg);}
  90%{ transform: translate(1px, 2px) rotate(0deg);}
  100%{ transform: translate(1px, -2px) rotate(-1deg);}
}

@keyframes duke-left{
	0%{transform: rotate(0) translateX(0); opacity: 0;}
	1%{transform: rotate(0) translateX(0); opacity: 1;}
	20%{transform: rotate(-45deg) translateX(-28px); opacity: 1;}
	80%{transform: rotate(-45deg) translateX(-28px); opacity: 1;}
	99%{transform: rotate(0) translateX(0); opacity: 1;}
	100%{transform: rotate(0) translateX(0); opacity: 0;}
}

@keyframes duke-right{
	0%{transform: rotate(0) translateX(0); opacity: 0;}
	1%{transform: rotate(0) translateX(0); opacity: 1;}
	20%{transform: rotate(70deg) translateX(10px) translateY(-10px); opacity: 1;}
	80%{transform: rotate(70deg) translateX(10px) translateY(-10px); opacity: 1;}
	100%{transform: rotate(0) translateX(0); opacity: 1;}
	100%{transform: rotate(0) translateX(0); opacity: 0;}
}

@keyframes bluey-left{
	0%{transform: rotate(0) translateX(0); opacity: 0;}
	1%{transform: rotate(0) translateX(0); opacity: 1;}
	20%{transform: rotate(-35deg) translateX(-28px); opacity: 1;}
	80%{transform: rotate(-35deg) translateX(-28px); opacity: 1;}
	99%{transform: rotate(0) translateX(0); opacity: 1;}
	100%{transform: rotate(0) translateX(0); opacity: 0;}
}

@keyframes bluey-right{
	0%{transform: rotate(0) translateX(0); opacity: 0;}
	1%{transform: rotate(0) translateX(0); opacity: 1;}
	20%{transform: rotate(50deg) translateX(10px) translateY(-10px); opacity: 1;}
	80%{transform: rotate(50deg) translateX(10px) translateY(-10px); opacity: 1;}
	100%{transform: rotate(0) translateX(0); opacity: 1;}
	100%{transform: rotate(0) translateX(0); opacity: 0;}
}

@keyframes arm-left{
	0%{transform: rotate(0) translateX(0);}
	20%{transform: rotate(-3deg) translateX(-92px);}
	80%{transform: rotate(-3deg) translateX(-92px);}
	100%{transform: rotate(0) translateX(0);}
}

@keyframes arm-right{
	0%{transform: rotate(0) translateX(0);}
	20%{transform: rotate(3deg) translateX(95px);}
	80%{transform: rotate(3deg) translateX(95px);}
	100%{transform: rotate(0) translateX(0);}
}

#bluey-modal-content{
	background:#B3D5F1; height:100%; width:100%; position:relative;
}
#bluey-modal-content img{
	border-radius:0 !important; box-shadow:none !important;
}
#bluey-modal-content video{
	position:absolute; bottom:55px; left:0; right:0; width:550px;
}
#bluey-modal-content #bluey-play{
	position: absolute; bottom: 165px; left: 0; right: 0; margin:auto; width: 80px; height: 80px; font-size: 40px; line-height:90px; background:#012a72; color:#fff; border:none; border-radius:50%; box-shadow:0 0 10px rgba(0,0,0,0.8);
}
#bluey-modal-content p{
	position:absolute; bottom:0; left:0; right:0; color:#fff; text-align:center; font-size:20px;
}

/* Bluey balloon */
.callout[data-callout-id="32"].active{
	animation: float-away 4s ease;
}
@keyframes float-away{
	0%{ transform:translateY(0) scale(1); opacity:1; }
	2%{ transform:translateY(0) scale(0.95); opacity:1; }
	5%{ transform: translateY(0) scale(1); opacity:1; }
	90%{ transform:translateY(-800px); opacity:1; }
	91%{ transform:translateY(-800px); opacity:0; }
	92%{ transform:translateY(0) scale(0); opacity:0; }
	100%{ transform:translateY(0) scale(1); opacity:1; }
}

#product-drawer{
	position: absolute; width: 100%; background: #ffca2e; height: 300px; bottom: 0; z-index: 3; transition: all 0.5s ease; box-shadow: rgba(0, 0, 0, 0.33) 0px -10px 15px; border-top: 3px solid #c19000;
}

#product-drawer.open{
	transform: translateY(0);
}

#product-drawer.closed{
	transform: translateY(300px);
}

#drawer-tab{
	height: 100px; width: 100px; padding: 25px; position: absolute; top: -100px; right: 25px; background: #1471D2; border-radius: 6px 6px 0 0; border: 3px solid #fff; border-bottom: 0;
}

#product-scroll .callout{
	min-width: 200px;
}

#product-scroll{
	height: 100%; padding: 0 50px; display: flex; flex-direction: row; align-items: center; overflow-x: scroll;
}

#product-scroll::-webkit-scrollbar{
	width: 8px;
}

#product-scroll::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.15);
}

#product-scroll::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.50); border-radius:10px;
}

#product-scroll .can{
	flex-shrink:0; margin: 0 20px;
}

#product-scroll .can:first-of-type{
	margin-left: 0;
}

#product-scroll .can:last-of-type{
	margin-right: 0;
}

#scroll-guide{
	position: absolute; width: 900px; height: 200px; z-index: 2; top: 0; bottom: 0; left: 0; right: 0; margin: auto; pointer-events: none;
}

#scroll-guide img{
	width: 100px; position: absolute; top: 0; bottom: 0; margin: auto; opacity: 0; transform-origin: center; transition: all 0.5s ease; 
}

.easy-access #scroll-guide img{
	display: block; animation: swipe 2s ease 2; animation-delay: 0.75s;
}

@keyframes swipe{
	0%{
		opacity: 0; transform: translateX(800px) rotate(45deg);
	}
	10%{
		opacity: 0.5; transform: translateX(800px) rotate(45deg);
	}
	90%{
		opacity: 0.5; transform: translateX(0) rotate(-45deg);
	}
	100%{
		opacity: 0; transform: translateX(0) rotate(-45deg);
	}
}

.surprise{
	position:relative;
}

.duke-location{
	position:absolute; background-size:cover; opacity:0;transition:all 1s ease; background:url("../images/2x/modals/WheresDuke-Found-2x.png") center no-repeat; 
}
.duke-location.valentine{
	background:url("../images/2x/modals/Valentines-card-inside.jpg") center no-repeat;
}

.duke-location.expanded{
	top:0 !important; left:0 !important; width:700px !important; height:1100px !important;  opacity:1; transform:rotate(0deg);
}

#bean-drip{
	opacity:0; pointer-events:none; position:absolute; top:0; bottom:0; left:0; right:0; z-index:9999; transition:all 1s ease;
}

#bean-drip video{
	width:100%; height:100%;
}

#bean-drip.visible{
	opacity:1; pointer-events:all;
}

#duke-location-1{
	top:650px; left:460px; width:60px; height:45px; background-size:contain;
}

#duke-location-valentine{
	top:540px; left:180px; width:130px; height:115px; background-size:contain;
}