html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: "PT Sans Narrow";
}
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Narrow Bold'), local('PTSans-NarrowBold'), url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v4/Q_pTky3Sc3ubRibGToTAYiylde52zikAzebNtJS89aM.woff) format('woff');
}
*{
	border:none;
	margin:0;
	padding:0;
	outline: none;
}
body {
	background-color: #0D3144;
	font-size: 18px;
	color: #4f4f4f;
}
a{
	text-decoration:none;
}

.login-table {
	width: 100%;
	height: 100%;
	display:table;
	background-color: #0D3144;
	background-size: cover;
}
.login-table-cell {
	display:table-cell;
	vertical-align:middle;
}
.login {
	width: 200px;
	margin: 60px auto;
	text-align: center;
	padding: 20px 0 1 0px;
	border: 2px solid #124B69;
	border-radius: 5px;
}
.login div,.login input {
	margin:auto;
}
#username, #password, #submit,#pin {
	color: #fff;
	padding: 10px 10px 10px 40px;
	width: 185px;
	background: url(img/input.png) no-repeat;
	height: 37px;
	font-size: 100%;
	margin: 0 auto 15px auto;
	display: block;
}
#password {
	background: url(img/pass.png) no-repeat;
}
#submit {
	background: url(img/login.png) no-repeat;
	padding: 10px;
	color:#004369;
	height: 47px;
}
#pin {
	background: url(img/pin.png) no-repeat;
}

.table {
	width: 500px;
	margin: auto;
	padding: 30px 0 0 0;
	position:relative;
	z-index: 2;
}
.table .head {
	height: 50px;
	background: url(img/head-bg.jpg);
	padding: 0 0px 0 30px;
	vertical-align: middle;
	display: table-cell;
	width: 35em;
	color: #FFF;
	text-shadow: -2px 2px #000;
	font-size: 29px;
	font-weight: bold;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
 /*--------------------------- Signup ----------------------------------------*/
.table .row {
	background-color: #EEE;
	padding: 20px 0 10px 0;
}
.table .row.last {
	text-align: center;
	padding: 20px 0 30px 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.table .label {
	display: inline-block;
	width: 190px;
	padding: 0 0 0 15px;
}
.table .label img {
	height: 35px;
	padding: 0px 5px;
	vertical-align: middle;
	display: inline-block;
}
.table input, .table select {
	background: url(img/input-a.png);
	height: 38px;
	width: 262px;
	padding: 0 0 0 10px;
}
.table select {
	width: 272px;
	background: url(img/drop-down-a.png),url(img/input-a.png);
	-webkit-appearance: searchfield;
	background-position: right 0, 0px 0px;
	background-repeat: no-repeat,no-repeat;
}
.table select:focus { 
	background: url(img/drop-down-b.png),url(img/input-b.png);
	background-position: right 0, 0px 0px;
	background-repeat: no-repeat,no-repeat;
}
.table input:focus { 
	background: url(img/input-b.png);
}
.table .indent {
	background: #000;
	padding: 8px 20px;
	border-top: 1px solid;
	border-bottom: 1px solid;
	color: #FFF;
	font-size: 55%;
	font-family: arial italic;
}
select[name=month],select[name=year]
{
	width: 80px;
}
.links {
	position: absolute;
	left: -71px;
	top: 80px;
	z-index: -1;
}
.links .buttons{
	width: 190px;
	background: #000;
	background-repeat: no-repeat;
	margin-bottom: 7px;
	vertical-align: middle;
	position: relative;
	padding: 20px 0px 20px 90px;
	border-radius: 8px;
	-webkit-transition: left 220ms;
	color: #EEE;
}
.links .buttons.active {
	background-color: #EEE;
	color: #4f4f4f;
}
.buttons[name=credit] {
	background-image: url(img/credit-card.png);
}
.buttons[name=credit]:hover {
	left:-120px;
}
.buttons[name=voucher] {
	background-image: url(img/voucher.png);
}
.buttons[name=voucher]:hover {
	left:-150px;
}
.buttons[name=paypal] {
	background-image: url(img/paypal.png);
}
.buttons[name=paypal]:hover {
	left:-140px;
}
.buttons[name=mtvapp] {
	background-image: url(assets/back.svg);
	background-position: 9px center;
	background-size: 55px;
}
.buttons[name=mtvapp]:hover {
	left:-100px;
}
input[type=checkbox]{
	height: 18px;
	width: 28px;
}
.table .row.last input[type=submit]{
	background: #000 !important;
	font-size: 100% !important;
}
div[name=month-div]{
		margin: 18px 0px 0 15px;
		display: inline-block;
	}

@media all and (max-width:675px) {
	.links {
		position: relative;
		left: 0;
		top: 0;
	}
	.links .buttons {
		width: 111px;
		padding: 5px;
		display: inline-block;
		text-align: center;
		background-size: 0;
		height: 45px;
		-webkit-transition: top 450ms;
	}
	.links .buttons:hover {
		top: -10px;
		left: 0;
	}
	.buttons[name=mtvapp] {
	background-size: 55px !important;
	color: transparent !important;
	background-position: center !important;
}
	
}
@media all and (max-width: 540px) {
	.table {
		width: 95%;
	}
	.links .buttons {
		background-size: initial;
		width: 0px;
		padding: 9px 0px 9px 72px;
		height: 45px;
		overflow: hidden;
	}
	.table input, .table select {
		margin: 5px 0 0 15px;
	}
	.table .label {
		width: 230px;
	}
	div[name=month-div]{
		margin-left: 10px;
		display: inline-block;
	}
	select[name=month],select[name=year]{
		margin: 5px 0 0 5px;
	}
}

 /*------------------------------ Statements ----------------------------------------*/
@media all and (max-width: 540px) {
.statements .table {
	width: 80%;
}
.statements .table .head{
	padding: 0 0px 0 7px;
}
}
.statements .label {
	display:block;
}
.statements .table .row {
	padding: 20px 0 20px 0;
}
.statements .table .row.last {
	padding: 7px;
}
.statements .back-button {
	background-image: url('assets/back.svg');
	-webkit-background-size: 45px,0;
	-moz-background-size: 45px,0;
	background-size: 45px,0;
	display: inline-block;
	background-position: center 0;
	background-repeat: no-repeat,no-repeat;
	width: 60px;
	height: 60px;
	padding-bottom: 10px;
}
.statements .clear-data {
	color: #FFF;
	padding: 10px;
	background: #000;
	margin: 7px 0;
	display: inline-block;
}