@font-face {
  font-family: 'UniversNext-Regular';
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/UniversNextforHSBCW02-Rg.eot');src:url('../fonts/UniversNextforHSBCW02-Rg.eot?#iefix') format('embedded-opentype'),url('../fonts/UniversNextforHSBCW02-Rg.woff') format('woff'),url('../fonts/UniversNextforHSBCW02-Rg.ttf') format('truetype'),url('../fonts/UniversNextforHSBCW02-Rg.svg#universnextregular') format('svg');
}

body {
	font-family: UniversNext-Regular;
}

.container-logon {	width:100%; margin:80px 0 80px 0; overflow: hidden;}
.main-box { float: left;  transition:all 0.50s; overflow: hidden; }
.box-right { margin-left: 30px;}
.main-box > div { position: relative; }
.main-box a {
	display: block;
	float: left;
}
.clear {clear:both;}
.footer { width:auto; }
.footer ul {
	width:60%; float:left;
}

@media screen and (max-width: 1000px) {
	.main-box {width: 45%;}
	.main-box {margin-left: 3%;}
    .box-right { margin-left: 3% } 
    .container-logon { margin: 40px 0;}
}

@media screen and (max-width: 767px) {
	.container-logon {margin-top: 30px; margin: 40px 0;}
    .box-right { margin-left: 0 }
    .main-box {
	    margin-left: 0;
	    clear: left;
	    margin-bottom: 30px;
	    margin: 0 auto;
	    float: none;
		width: 340px;
		margin-bottom: 20px;
	}
	.copy_hsbc {
		display:block;
		margin-top:10px;
		width:100%;
		box-sizing:border-box;
		padding:0px 10px;
	}
	.copy_hsbc span {
		display:block;
	}
}

@media screen and (max-width: 380px) {
    .main-box {width: 90%;}
    
	.footer .span12 ul { width: 55%;}
}