/************
TAG STYLES
 ************/
html, body{
  width: 320px;
  height: 480px;
}

body {
	margin: 0px;
	background-color: #FFF;
	font-family: Arial, sans-serif;
}

button {
	position: absolute;
	background-color: #0068FF;
	border: none;
	color: #FFF;
	cursor: pointer;
	font-family: Arial, sans-serif;
	font-size: 12px;
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	user-select: none;
}

button:hover, button:active {
	color: #FAF000;
}

button:active {
	font-size: 11px;
}

video {
    width: 100%;	
    height: 100%;
}

/*******************
BANNER STYLES
*******************/
#banner{
	position: absolute;
	display: block;
	width: 320px;
	height: 480px;
	top: 0px;
	left: 0px;
	overflow: hidden;
	border: solid 0px #e3e3e3;	
}

/************************
CREATIVE CONTENT STYLES
************************/
.brand-logo {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 100px;
	height: 26px;
	background-size: 100px 26px;
	background-repeat: no-repeat;
}

.label {
	font-size: 11px;
	color: #0D2A4D;
	position: absolute;
	left: 10px;
	top: 36px;
}

.useraction-button {
	bottom: 10px;
	right: 128px;
	height: 26px;
	width: 108px;
	display: none;
}

.clickthrough-button {
	bottom: 0px;
	right: 0px;
	height: 480px;
	width: 320px;
	opacity: 0;
}

.video-container {
    position: absolute;	
	width: 298px;
    height: 168px;
}

.centered {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

/*************** ANIMATIONS ***************/
@-webkit-keyframes cube-spin {
	from { -webkit-transform: rotateY(360deg); }
	to { -webkit-transform: rotateY(0); }
}

@-ms-keyframes cube-spin {
	from { ms-transform: rotateY(360deg); }
	to { ms-transform: rotateY(0); }
}

@keyframes cube-spin {
	from { transform: rotateY(360deg); }
	to { transform: rotateY(0); }
}

@-webkit-keyframes spin-vertical {
	from { -webkit-transform: rotateX(-360deg); }
	to { -webkit-transform: rotateX(0); }
}

@-ms-keyframes spin-vertical {
	from { ms-transform: rotateX(-360deg); }
	to { ms-transform: rotateX(0); }
}

@keyframes spin-vertical {
	from { transform: rotateX(-360deg); }
	to { transform: rotateX(0); }
}

/*************** STANDARD CUBE ***************/
.cube-wrap {
	-webkit-perspective: 800px;
	-webkit-perspective-origin: 50% 100px;

	-moz-perspective: 800px;
	-moz-perspective-origin: 50% 100px;

	-ms-perspective: 800px;
	-ms-perspective-origin: 50% 100px;

	perspective: 800px;
	perspective-origin: 50% 100px;
}

.cube {
	position: relative;
	width: 200px;
	margin: 0 auto;
	
	-webkit-transform-style: preserve-3d;
	-webkit-animation: cube-spin 12s infinite linear;
	
	-moz-transform-style: preserve-3d;
	-moz-animation: cube-spin 12s infinite linear;

	-ms-transform-style: preserve-3d;
	-ms-animation: cube-spin 12s infinite linear;

	transform-style: preserve-3d;
	animation: cube-spin 12s infinite linear;
}

.cube div {
	position: absolute;
	width: 200px;
	height: 200px;
	background: rgba(255,255,255,0.1);
	box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
	font-size: 20px;
	text-align: center;
	line-height: 200px;
	color: rgba(0,0,0,0.5);
	font-family: sans-serif;
	text-transform: uppercase;
	border:1px;
	border-style: solid;
	border-color: #eee;
}

/*************** DEPTH CUBE ***************/
.depth div.back-pane {
	-webkit-transform: translateZ(-100px) rotateY(180deg);
	-moz-transform: translateZ(-100px) rotateY(180deg);
	-ms-transform: translateZ(-100px) rotateY(180deg);

	transform: translateZ(-100px) rotateY(180deg);
}
.depth div.right-pane {
	-webkit-transform:rotateY(-270deg) translateX(100px);
	-webkit-transform-origin: top right;

	-moz-transform:rotateY(-270deg) translateX(100px);
	-moz-transform-origin: top right;

	-ms-transform:rotateY(-270deg) translateX(100px);
	-ms-transform-origin: top right;

	transform:rotateY(-270deg) translateX(100px);
	transform-origin: top right;
}
.depth div.left-pane {
	-webkit-transform:rotateY(270deg) translateX(-100px);
	-webkit-transform-origin: center left;

	-moz-transform:rotateY(270deg) translateX(-100px);
	-moz-transform-origin: center left;

	-ms-transform:rotateY(270deg) translateX(-100px);
	-ms-transform-origin: center left;

	transform:rotateY(270deg) translateX(-100px);
	transform-origin: center left;
}
.depth div.top-pane {
	-webkit-transform:rotateX(-90deg) translateY(-100px);
	-webkit-transform-origin: top center;

	-moz-transform:rotateX(-90deg) translateY(-100px);
	-moz-transform-origin: top center;

	-ms-transform:rotateX(-90deg) translateY(-100px);
	-ms-transform-origin: top center;

	transform:rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
}
.depth div.bottom-pane {
	-webkit-transform:rotateX(90deg) translateY(100px);
	-webkit-transform-origin: bottom center;

	-moz-transform:rotateX(90deg) translateY(100px);
	-moz-transform-origin: bottom center;

	-ms-transform:rotateX(90deg) translateY(100px);
	-ms-transform-origin: bottom center;

	transform:rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
}
.depth div.front-pane {
	-webkit-transform: translateZ(100px);
	-moz-transform: translateZ(100px);
	-ms-transform: translateZ(100px);

	transform: translateZ(100px);
}