body {
	margin: 0px;
}

#container {
	background-color: black;
	cursor: pointer;
	display: none;
	overflow: hidden;
	position: absolute;
	pointer-events: none;
	width: 300px;
	height: 600px;
}

#container * {
	position: absolute;
}

#container > svg#CopyF3 {
	top: -15px;
}

#border {
	border: 1px solid gray;
	width: 100%;
	height: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#clickthru {
	width: 100%;
	height: 100%;
	pointer-events: auto;
}

/*-------------- SPRITE -------------*/
.sprite {
	background: url("sprite.png") no-repeat top left;
	width: 300px;
	height: 1856px;
	background-size: 300px 1856px;
}
.sprite.cta-text2 {
	background-position: 0 0;
	width: 101px;
	height: 18px;
}
.sprite.cta-text1 {
	background-position: 0 -23px;
	width: 101px;
	height: 18px;
}
.sprite.logo {
	width: 300px;
	height: 60px;
	transform: scale(0.8);
	transform-origin: top left;
	background-position: 0 -46px;
}
.sprite.t1-1 {
	background-position: 0 -651px;
	width: 300px;
	height: 600px;
}
.sprite.t2-1 {
	background-position: 0 -1256px;
	width: 300px;
	height: 600px;
}

/*--------- SPRITE POSITION ---------*/
.cta-text1,
.cta-text2 {
	top: 6px;
	left: 10px;
}
.cta-text2 {
	opacity: 0;
}
.logo {
	top: 12px;
	left: 18px;
}
.t1-1 {
	top: 0px;
	left: 0px;
}
.t2-1 {
	top: 0px;
	left: 0px;
}
.shadow1,
.t-shadow {
	mix-blend-mode: soft-light;
}
.shadow2 {
	mix-blend-mode: soft-light;
}

/*-------- IMAGES | POSITION --------*/
img {
	width: 100%;
	height: auto;
	display: block;
}
.bg {
	width: 300px;
	height: 600px;
}
.gradient {
	width: 100%;
	height: 320px;
	position: absolute;
	bottom: 0;
	left: 0;
}

.cta {
	width: 120px;
	height: 32px;
	background-color: #00e4a5;
	border: 2px solid #00e4a5;
	border-radius: 15px 0 15px 0;
}
#canvas,
.cta {
	top: 524px;
	left: 49px;
}