/* ------------------------
Blue 100% - #2895D5
Blue 60% - #7EBFE6
--------------------------
Green 100% - #6DAF3D
Green 60% - #A7CF8B
--------------------------
Orange 100% - #E67600
Orange 60% - #F0AD66
--------------------------
Violet 100% – #9B2583
Violet 60% - #C37CB5
--------------------------
Gold 100% - #FD9F13
Gold 60% - #FEC571
--------------------------
Red (Button only) - #D92231
--------------------------*/

/* ---------- Tag Styles ---------- */
html {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	line-height: 1.2;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #6DAF3D;
}
sup {
	font-size: 66%;
	position: relative;
	top: -0.1em;
	line-height: 1;
}

/* ---------- Banner Structure ---------- */

/* Div layer for the entire banner. */
#container-dc {
	position: absolute;
	width: 970px;
	height: 250px;
	top: 0;
	left: 0;
	margin: auto;
	background-color: #fff;
	overflow: hidden;
}
/* Invisible button for background clickthrough. */
#background-exit-dc {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	opacity: 1;
	z-index: 400;
	background-color: rgba(255, 255, 255, 0);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 0;
}

/* ---------- General Elements ---------- */
.logo {
	position: absolute;
	left: 842px;
    top: 185px;
    width: 120px;
	opacity: 1;
}
.logo-rev {
	position: absolute;
    left: 842px;
    top: 8px;
    width: 120px;
	opacity: 0;
}

/* ---------- Background Image ---------- */
.image { /* Sets overall display area for the bg image */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 300px;
	overflow: hidden;
}
.page { /* Sets size for each individual tile */
	width: 64px;
	height: 80px;
	opacity: 1;
	background: url("bg_image.png") no-repeat;
	float: left;
}

/* ---------- Set background image offsets ----------- */
.c00 { background-position:  0     0; }
.c01 { background-position: -64px  0; }
.c02 { background-position: -128px 0; }
.c03 { background-position: -192px 0; }
.c04 { background-position: -256px 0; }
.c05 { background-position: -320px 0; }
.c06 { background-position: -384px 0; }
.c07 { background-position: -448px 0; }
.c08 { background-position: -512px 0; }
.c09 { background-position: -576px 0; }
.c10 { background-position: -640px 0; }
.c11 { background-position: -704px 0; }
.c12 { background-position: -768px 0; }
.c13 { background-position: -832px 0; }
.c14 { background-position: -896px 0; }

.c15 { background-position:  0     -80px; }
.c16 { background-position: -64px  -80px; }
.c17 { background-position: -128px -80px; }
.c18 { background-position: -192px -80px; }
.c19 { background-position: -256px -80px; }
.c20 { background-position: -320px -80px; }
.c21 { background-position: -384px -80px; }
.c22 { background-position: -448px -80px; }
.c23 { background-position: -512px -80px; }
.c24 { background-position: -576px -80px; }
.c25 { background-position: -640px -80px; }
.c26 { background-position: -704px -80px; }
.c27 { background-position: -768px -80px; }
.c28 { background-position: -832px -80px; }
.c29 { background-position: -896px -80px; }

.c30 { background-position:  0     -160px; }
.c31 { background-position: -64px  -160px; }
.c32 { background-position: -128px -160px; }
.c33 { background-position: -192px -160px; }
.c34 { background-position: -256px -160px; }
.c35 { background-position: -320px -160px; }
.c36 { background-position: -384px -160px; }
.c37 { background-position: -448px -160px; }
.c38 { background-position: -512px -160px; }
.c39 { background-position: -576px -160px; }
.c40 { background-position: -640px -160px; }
.c41 { background-position: -704px -160px; }
.c42 { background-position: -768px -160px; }
.c43 { background-position: -832px -160px; visibility: hidden; }
.c44 { background-position: -896px -160px; visibility: hidden; }

/* ----------- Copy elements -------------- */
.headline {
	position: absolute;
	left: 150px;
	font-size: 24px;
	color: #6DAF3D;
	opacity: 0;
}
.a {
	top: 96px;
	width: 450px;
}

/* ----------- End frame elements -------------- */
.background {
	width: 100%;
	height: 100%;
}
.product-name {
	position: absolute;
	top: 10px;
	left: 20px;
	font-size: 13px;
	border-bottom: #fff 1px solid;
	color: #aaa;
	opacity: 0;
}
.product-image {
	position: absolute;
    top: 63px;
    left: 537px;
    height: 125px;
	opacity: 0;
}
.end-copy {
	position: absolute;
    top: 62px;
    left: 34px;
    width: 280px;
    font-size: 25px;
	opacity: 0;
}
.offer-panel {
	position: absolute;
    top: 46px;
    left: 326px;
    width: 420px;
    height: 158px;
	background: #6daf3d;
	color: #fff;
	/*border: 1px solid #6daf3d;*/
	opacity: 0;
}
.offer-a {
	position: absolute;
    top: 22px;
    left: 18px;
    width: 184px;
    font-size: 24px;
	/*line-height: 1;*/
	font-weight: 700;
}
.cta {
	position: absolute;
	top: 106px;
	left: 770px;
	width: 160px;
	height: 42px;
    background-color: #db2032;
    color: #fff;
    overflow: hidden;
    opacity: 0;
}
.cta span {
    display: block;
    width: 80%;
    margin: 11px 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-align: left;
}
.cta span:after {
    content: '';
    background-image: url("xerox_arrows.png");
    background-repeat: no-repeat;
    display: inline-block;
    width: 10px;
    background-size: 26px 56px;
    height: 15px;
    background-position: -7px -6px;
    position: absolute;
    top: 12px;
    right: 10px;
}
.cta-band {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 100%;
  opacity: 0.75;
  background: #fff; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, rgba(219,32,50,0), rgba(255,255,255,1), rgba(219,32,50,0)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, rgba(219,32,50,0), rgba(255,255,255,1), rgba(219,32,50,0)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, rgba(219,32,50,0), rgba(255,255,255,1), rgba(219,32,50,0)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, rgba(219,32,50,0), rgba(255,255,255,1), rgba(219,32,50,0)); /* Standard syntax */
}
.white {
	color: #fff;
}
.bg-colour {
	background-color: #6DAF3D;
}
.panel-rev {
	background: #fff;
	color: #6DAF3D;
}