@charset "UTF-8";
/* CSS Document */

/* CSS Document *//* Div layer for the entire banner. */
body, html{
	margin: 0;
	padding: 0;
	font:0;
}
.noselect {
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-user-select:; none;
}
.banner-container, 
.banner-container .container,
.banner-container #border,
.banner-container .block{
	width: 300px;
	height: 250px;
}
.banner-container{
	overflow: hidden;
	top:0px;
	left:0px;
	background: #0D1C35;
	background: linear-gradient(0deg,rgba(13, 28, 53, 1) 0%, rgba(33, 64, 122, 1) 30%, rgba(13, 28, 53, 1) 100%);
}
.banner-container #clickThrough{
	width: 100%;
	height: 100%;
	border: 0;
	opacity: 0;
	z-index: 2000;
	cursor: pointer;
}
.banner-container #border{
	position: absolute;
	border: 1px solid #000;
	z-index: 1999;
	box-sizing: border-box;
}
.banner-container,  #clickThrough, .border, .btn,
.txt, .txt-container, .txt-cont, .logo, .img,
.tc, .block, .pos_absolute,
.text-tc, .block, .tc-cont, .tc-float{
	position: absolute;
}

.animation{
	-webkit-transition:	all 0.3s ease-in-out;
	-moz-transition:	all 0.3s ease-in-out;
	-ms-transition:		all 0.3s ease-in-out;
	-o-transition:		all 0.3s ease-in-out;
	transition:			all 0.3s ease-in-out;
}

.block{
	background-color: #000000;
	opacity: 0;
}


/*//////////////////////
	TEXT
//////////////////////*/
.banner-container .txt{
	font-family: Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
/*	color: #001e50;*/
	color: #00305F;
	white-space: nowrap;
	opacity: 0;
	font-size: 28px;
	line-height: 28px;
	text-align: center;
}

.banner-container #txt_cont{
	top: 129px;
	left: 37px;
	width: 220px;
}

.banner-container #txt1{
	width: 100%;
}

.banner-container #text_splash {
	width: 24px;
	left: 199px;
	top: 29px;
	transform-origin: left center;
}

.banner-container #tc{
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	bottom: 7px;
	left: 8px;
	width: 223px;
	font-size: 7px;
	line-height: 7px;
	white-space: normal;
	text-align: left;
}


/*//////////////////////
	IMAGES
//////////////////////*/
.banner-container .img{
	opacity: 0;
}

.banner-container #logo{
	width: 30px;
	top: 15px;
	left: 15px;
}

.banner-container #partner{
	width: 30px;
	top: 15px;
	right: 15px;
}

/*.banner-container #stamp{
	width: 100px;
	top: 452px;
	left: 20px;
}*/

.banner-container #lockup_cont {
	width: 230px;
	top: 60px;
	left: 41px;
	transform: rotate(6deg);
}

.banner-container #lockup_cont #lockup {
	width: 100%;
}
.banner-container #lockup_cont #lockup_splash01 {
	width: 10px;
	right: 99%;
	top: 35px;
	transform-origin: right bottom;
}
.banner-container #lockup_cont #lockup_splash02 {
	width: 15px;
	left: 99%;
	top: -17px;
	transform-origin: left bottom;
}

.banner-container #roundal01{
	top: 143px;
	left: 39px;
	width: 88px;
	/*transform: rotate(22.41deg);*/
}
.banner-container #roundal02{
	top: 150px;
	left: 201px;
	width: 92px;
	/*transform: rotate(-6.45deg);*/
}

.banner-container #f1_01 {
	top: 200px;
	left: 113px;
	width: 55px;
	transform: rotate(14.84deg);
}
.banner-container #f1_02 {
	top: 177px;
	left: 5px;
	width: 40px;
	transform: rotate(-12.93deg);
}
.banner-container #f1_03 {
	top: 128px;
	left: 198px;
	width: 29px;
	/*transform: rotate(204.43deg);*/
}
.banner-container #f1_04 {
	top: 219px;
	left: 237px;
	width: 49px;
	/*transform: rotate(-27.58deg) ;*/
}
.banner-container #f1_05 {
	top: 125px;
	left: 255px;
	width: 35px;
	/*transform: rotate(33deg);*/
	transform-origin: left center;
}

.banner-container #splash01 {
	top: 71px;
	left: 120px;
	width: 222px;
	transform: rotate(139deg);
	transform-origin: left center;
}

.banner-container .splash02 {
	top: 226px;
	left: 323px;
	width: 184px;
	transform: rotate(33deg) scaleX(-1.0);
	transform-origin: left center;
}
.banner-container #splash02t {
	clip-path: polygon(70% 0, 100% 0, 100% 60%, 60% 60%);
	/*background-color: red;*/
}

.banner-container #splash11 {
	left: 46px;
	top: -27px;
	width: 125px;
	transform: rotate(-0.57deg);
}
.banner-container #splash12{
	left: -43px;
	top: 187px;
	width: 116px;
	transform: rotate(15.43deg);
}
.banner-container #splash13 {
	left: 223px;
	top: 221px;
	width: 81px;
	transform: rotate(138.43deg);
}



/*//////////////////////
	TERMS & CONDITIONS 
//////////////////////*/
.westpac-container .t-c-cont{
	z-index: 2001;
}
.tc-cont, .tc-float{
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: #ffffff;
	font-size: 8px;
}
.tc-cont{
	opacity: 0;
	bottom: 0px;
	left: 1px;
	height: 14px;
	text-align: left;
	padding: 0px 0px;
	z-index: 2001;
	/*border-right: 1px #000 solid;*/
}
.tc-cont .tc-roll{
	padding-left: 5px;
	top: 0px;
	position: relative;
}
.tc-cont .tc-roll,
.tc-cont img{
	display: inline-block;
}
.tc-cont img{
	padding-right: 3px;
}
.tc-cont .tc{
color: #ffffff;
  background-color: #003c79;
  text-align: left;
  margin-top: 5px;
  width: 300px;
  padding: 9px 10px 20px;
  font-size: 9px;
  box-sizing: border-box;
  width: 298px;
  left: 0px;
}
div.tc-cont.rollover{
	bottom: 49px;
	-webkit-transition:	all 0.5s ease-in-out;
	-moz-transition:	all 0.5s ease-in-out;
	-ms-transition:		all 0.5s ease-in-out;
	-o-transition:		all 0.5s ease-in-out;
	transition:			all 0.5s ease-in-out;
}
div.tc-cont.rollover .tc-roll,
div.tc-cont.rollover img{
	opacity: 0;
	-webkit-transition:	all 0.3s ease-in-out;
	-moz-transition:	all 0.3s ease-in-out;
	-ms-transition:		all 0.3s ease-in-out;
	-o-transition:		all 0.3s ease-in-out;
	transition:			all 0.3s ease-in-out;
}
#border-bottom{
	width: 300px;
	position: absolute;
	top: 249px;
	height: 1px;
	background-color: #000;
	z-index: 3000;
}
.tc-float{
	top: 410px;
	left: 10px;
	width: 140px;
}



/*//////////////////////
	BUTTON ANIMATION
//////////////////////*/
.banner-container .btn{
	/*font-family: Arial, Helvetica, sans-serif;*/
width: 120px;
  top: 175px;
  left: 95px;
	opacity: 0;
}

.banner-container .btn img{
	width: 100%;
	position: absolute;
}

.banner-container .btn #btn2{
	opacity: 0;
}

.banner-container .btn.rollover #btn{
	opacity: 0;
}

.banner-container .btn.rollover #btn2{
	opacity: 1;
}