/* 300x250 */

/* Foundation */

* {
	margin: 0;
	padding: 0;
}

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

#container {
	cursor: pointer;
	pointer-events: none;
	border: 1px #000 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: #000;
}

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

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

/* 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: 2px;
    right: 2px;
    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: -2px;
    right: -2px;
}

/* Artwork */

.background {
	-webkit-filter: brightness(1);
	filter: brightness(1);
	will-change: transform;
}

.background.moon-cast {
	background: url('images/killers-flower-moon-moon-art-background-cast-300x250.png') no-repeat center center;
}

.background.moon {
	background: url('images/killers-flower-moon-moon-art-background-moon-300x250.png') no-repeat center center;
}

.background.oil {
	background: url('images/killers-flower-moon-moon-art-background-oil-300x250.jpg') no-repeat center center;
    mix-blend-mode: multiply;
}

.background.art {
	background: url('images/killers-flower-moon-moon-art-background-300x250.jpg') 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-color: #ff0000;
}

.cta-button.color.on {
	background-color: #000;
	/* border: 2px solid #fff;
	box-sizing: border-box; */
	-webkit-filter: brightness(1);
	filter: brightness(1);
	will-change: transform;
}

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

.cta-button.label.off {
	/* filter: drop-shadow(0px 1px 0px #722f00); */
}

.cta-button.label.on {
	/* filter: drop-shadow(0px 1px 0px #722f00); */
	border: 1px solid #ff0000;
	box-sizing: border-box;
	will-change: transform;
}

.cta-button.label.on::after,
.cta-button.label.on::before {
    width: 100%;
    height: 100%;
    position: absolute;
    content: "";
}

.cta-button.label.on::after {
    background-color: #ff0000;
    mix-blend-mode: multiply;
}

.cta-button.label.on::before {
    background-color: #000;
    mix-blend-mode: screen;
}


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

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

.cta-button.video.off {
	background-image: url('images/killers-flower-moon-cta-trailer-off.png');
}

.cta-button.video.on {
	background-image: url('images/killers-flower-moon-cta-trailer-on.png');
}

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

#end .date-message::after,
#end .date-message::before {
    width: 100%;
    height: 100%;
    position: absolute;
    content: "";
}

#end .date-message::after {
    background-color: #b5b5b7;
    mix-blend-mode: multiply;
}

#end .date-message::before {
    background-color: #000;
    mix-blend-mode: screen;
}

#end .date-message.oct-video {
	background-image: url('images/killers-flower-moon-date-oct-20-horizontal-small.png');
}

#end .date-message.oct-tickets {
	background-image: url('images/killers-flower-moon-date-oct-20-horizontal-small.png');
}

#end .date-message.tomorrow {
	background-image: url('images/killers-flower-moon-date-tomorrow-horizontal-small.png');
}

#end .date-message.friday {
	background-image: url('images/killers-flower-moon-date-friday-horizontal-small.png');
}

#end .date-message.now-playing {
	background-image: url('images/killers-flower-moon-date-now-playing-horizontal-small.png');
}

#video .date-message::after,
#video .date-message::before {
    width: 100%;
    height: 100%;
    position: absolute;
    content: "";
}

#video .date-message::after {
    background-color: #e03815;
    mix-blend-mode: multiply;
}

#video .date-message::before {
    background-color: #000;
    mix-blend-mode: screen;
}

#video .date-message.oct-video {
	background-image: url('images/killers-flower-moon-date-oct-20-horizontal.png');
}

#video .date-message.oct-tickets {
	background-image: url('images/killers-flower-moon-date-oct-20-horizontal.png');
}

#video .date-message.tomorrow {
	background-image: url('images/killers-flower-moon-date-tomorrow-horizontal.png');
}

#video .date-message.friday {
	background-image: url('images/killers-flower-moon-date-friday-horizontal.png');
}

#video .date-message.now-playing {
	background-image: url('images/killers-flower-moon-date-now-playing-horizontal.png');
}

.intro {
	background-color: #000000;
}

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

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

.cast.leonardo {
	background: url('images/killers-flower-moon-cast-leonardo-moon.png') no-repeat center center;
}

.cast.robert {
	background: url('images/killers-flower-moon-cast-robert-moon.png') no-repeat center center;
}

.cast.lily {
	background: url('images/killers-flower-moon-cast-lily-moon.png') no-repeat center center;
}

.tagline {
	background: url('images/killers-flower-moon-tagline.png') no-repeat center center;
}

.title {
	-webkit-filter: brightness(1);
	filter: brightness(1);
	will-change: transform;
}

#end .title {
	background: url('images/killers-flower-moon-title-moon-horizontal.png') no-repeat center center;
}

#video .title {
	background: url('images/killers-flower-moon-title-moon-horizontal.png') no-repeat center center;
}

.rotten-tomatoes {
	background: url('images/killers-flower-moon-rotten-tomatoes-moon.png') no-repeat center center;
}

/* Sizes */

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

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

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

#end .date,
#end .date-message {
	background-size: calc((1320px * 12) / 100) calc((150px * 12) / 100);
	width: calc((1320px * 12) / 100);
	height: calc((150px * 12) / 100);
}

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

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

#end .cast {
	background-size: calc((430px * 14) / 100) calc((150px * 14) / 100);
	width: calc((430px * 14) / 100);
	height: calc((150px * 14) / 100);
}

#end .tagline {
	background-size: calc((800px * 22) / 100) calc((70px * 22) / 100);
	width: calc((800px * 22) / 100);
	height: calc((70px * 22) / 100);
}

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

#video .date,
#video .date-message {
	background-size: calc((1320px * 11) / 100) calc((150px * 11) / 100);
	width: calc((1320px * 11) / 100);
	height: calc((150px * 11) / 100);
}

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

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

.rotten-tomatoes {
	background-size:  calc((380px * 28) / 100)  calc((206px * 28) / 100);
	width: calc((380px * 28) / 100);
	height: calc((206px * 28) / 100);
}

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

/* Positions */

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

#end .cta {
	top: 206px;
	left: 146px;
}

#end .date {
	top: 210px;
	left: 30px;
}

#end .legal {
	top: 235px;
	right: 2px;
}

#end .rating {
	bottom: 2px;
	left: 0px;
}

#end .cast {
	left: 16px;
	z-index:2;
}

#end .cast.leonardo {
	top: 13px;
}

#end .cast.robert {
	top: 43px;
}

#end .cast.lily {
	top: 71px;
}

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

#end .title {
	top: 100px;
	left: 26px;
}

#video .date {
	top: 40px;
	left: 75px;
}

#video .title {
	top: -38px;
	left: 50px;
}

.rotten-tomatoes {
	top: 85px;
	left: -7px;
}