/* 300x250 */

/* Foundation */

* {
	margin: 0;
	padding: 0;
}

#container,
#container div {
	position: absolute;
}

#container {
	cursor: pointer;
	pointer-events: none;
	border: 2px #e8a642 solid;
	box-sizing: border-box;
	display: block;
	overflow: hidden;
	visibility: hidden;
	background-color: #000;
}

#container * {
	pointer-events: none;
}

#background-click {
	width: 100%;
	height: 100%;
	pointer-events: auto !important;
}

.fade {
	opacity: 0;
}

.hide {
    display: none;
}

.date-swap,
.get-tickets,
.watch-video {
    width: 100%;
    height: 100%;
}

.background {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
}

/* Video */

#end,
#video  {
    width: 100%;
    height: 100%;
    background-color: #43ceff;
}

#video-player {
   width: 100%;
    object-fit: cover;
    left: 50%;
    top: 50%;
    z-index: -1;
}

#video-holder {
    top: 0;
    right: 0;
    background-color: #000000;
}

/* Video: Controls*/

.buttons {
	background: url('images/buttons.png') no-repeat top left;
	width: 23px;
	height: 19px;
}

.buttons.sound-off-over {
	background-position: 0 0;
}

.buttons.end-replay {
	background-position: 0 -29px;
	width: 16px;
	height: 16px;
}

.buttons.sound-off {
	background-position: 0 -55px;
}

.buttons.sound-on-over {
	background-position: 0 -84px;
	width: 26px;
}

.buttons.sound-on {
	background-position: 0 -113px;
	width: 26px;
}

.button-sound {
    width: 26px;
    height: 19px;
    top: 7px;
    right: 7px;
    pointer-events: auto !important;
}

.sound-on-over,
.sound-off-over {
    opacity: 0;
}

.button-replay{
    right: 5px;
    top: 5px;
    width: 26px;
    height: 26px;
    pointer-events: auto !important;
}

.buttons.end-replay {
    top: 5px;
    left: 5px;
}

/* Artwork */

.background {
	background: url('images/pof-background-payoff-300x250.png') no-repeat center center;
}

.character {
	background: url('images/pof-characters-title-center.png') no-repeat center center;
}

.cta-button {
	background-repeat: no-repeat;
	background-position: center center;
}

.cta-button.color {
	z-index: 0;
}

.cta-button.color.off {
	background-image: url('images/pof-cta-button-off.png');
}

.cta-button.color.on {
	background-image: url('images/pof-cta-button-on.png');
}

.cta-button.label {
	z-index: 1;
}

.cta-button.tickets.off {
	background-image: url('images/pof-cta-tickets-off.png');
}

.cta-button.tickets.on {
	background-image: url('images/pof-cta-tickets-on.png');
}

.cta-button.video.off {
	background-image: url('images/pof-cta-video-off.png');
}

.cta-button.video.on {
	background-image: url('images/pof-cta-video-on.png');
}

.date-message {
	background-repeat: no-repeat;
	background-position: center center;
}

#end .date-message.july {
	background-image: url('images/pof-date-july-15-white-blue-vertical.png');
}

#end .date-message.thursday {
	background-image: url('images/pof-date-thursday-white-blue-column.png');
}

#end .date-message.tomorrow {
	background-image: url('images/pof-date-tomorrow-white-blue-vertical.png');
}

#end .date-message.now-playing {
	background-image: url('images/pof-date-now-playing-white-blue-vertical.png');
}

#video .date-message.july {
	background-image: url('images/pof-date-july-15-white-blue-vertical.png');
}

#video .date-message.thursday {
	background-image: url('images/pof-date-thursday-white-blue-column.png');
}

#video .date-message.tomorrow {
	background-image: url('images/pof-date-tomorrow-white-blue-vertical.png');
}

#video .date-message.now-playing {
	background-image: url('images/pof-date-now-playing-white-blue-vertical.png');
}

.intro {
	background-image: rgb(12,107,255,1);
	background-image: linear-gradient(-90deg, rgba(12,107,255,0.7) 25%, rgba(74,218,255,1) 70%, rgba(74,218,255,0) 90%), url('images/pof-intro-blue.png');
	background-repeat: no-repeat;
 	background-postion: center center;
}

.legal {
	background: url('images/pof-legal.png') no-repeat center center;
}

.rating {
	background: url('images/pof-rating.png') no-repeat center center;
}

.tagline {
	background: url('images/pof-tagline-territory-h.png') no-repeat center center;
}

.title {
	background: url('images/pof-title-white.png') no-repeat center center;
}

/* Sizes */

#container {
	width: 300px;
	height: 250px;
}

#end .background {
	background-size: 300px 250px;
	width: 300px;
	height: 250px;
}

#end .character {
	background-size: calc((300px * 76) / 100) calc((350px * 76) / 100);
	width: calc((300px * 76) / 100);
	height: calc((350px * 76) / 100);
}

#end .cta,
#end .cta-button {
	background-size: calc((380px * 28) / 100) calc((150px * 28) / 100);
	width: calc((380px * 28) / 100);
	height: calc((150px * 28) / 100);
	pointer-events: auto!important;
}

#end .date,
#end .date-message {
	background-size: calc((600px * 20) / 100) calc((200px * 20) / 100);
	width: calc((600px * 20) / 100);
	height: calc((200px * 20) / 100);
}

#end .legal {
	background-size: calc((112px * 50) / 100) calc((20px * 50) / 100);
	width: calc((112px * 50) / 100);
	height: calc((20px * 50) / 100);
}

#end .rating {
	background-size: calc((72px * 30) / 100) calc((46px * 30) / 100);
	width: calc((72px * 30) / 100);
	height: calc((46px * 30) / 100);
	opacity: 0.5;
}

#end .tagline {
	background-size: calc((1060px * 25) / 100) calc((50px * 25) / 100);
	width: calc((1060px * 25) / 100);
	height: calc((50px * 25) / 100);
}

#end .title {
	background-size: calc((800px * 23) / 100) calc((300px * 23) / 100);
	width: calc((800px * 23) / 100);
	height: calc((300px * 23) / 100);
}

#video .date,
#video .date-message {
	background-size: calc((600px * 22) / 100)  calc((200px * 22) / 100);
	width: calc((600px * 22) / 100);
	height: calc((200px * 22) / 100);
}

#video .intro {
	background-size: 300px 150px;
	width: 300px;
	height: 60px;
	margin-top: 190px;
}

#video .title {
	background-size:  calc((800px * 16) / 100)  calc((300px * 16) / 100);
	width: calc((800px * 16) / 100);
	height: calc((300px * 16) / 100);
}

#video-holder,
#video-player {
    width: 300px;
    height: 190px;
}

/* Positions */

#end .background {
    top: 0px;
    left: 0px;
}

#end .character {
	top: 45px;
	left: 115px;
}

#end .cta {
	top: 170px;
	left: 10px;
}

#end .date {
	top: 125px;
	left: 5px;
}

#end .legal {
	top: 235px;
	left: 35px;
}

#end .rating {
	top: 230px;
	left: 4px;
}

#end .tagline {
	top: 10px;
	left: 5px;
}

#end .title {
	top: 15px;
	left: 2px;
}

#video .date {
	top: 8px;
	left: 150px;
}

#video .title {
	top: 5px;
	left: 10px;
}