@media only screen and (min-width:1600px) { /* 15in. Macbook Pro */
	body {
		font-size: 100%;
	}
	/* --- login form --- */
	.index {
		padding: 8% 12% 0;
	}
	.index main {
		height: 680px;
		background: rgba(255,255,255,0.85);
	}
	.index .developer .logoWrap img {
		width: 230px;
	}
	.index .developer p.info {
		width: 68%;
		margin: 0 16%;
	}
	.index .developer .sostecWrap {
		margin-top: 4em;
	}
	.index .developer .social {
		width: 34%;
		margin: 10% 33% 0;
	}
	.index .developer .social .box span {
		width: 46px;
		height: 46px; line-height: 46px;
	}
	/* -- */
	.index aside div.record.borderless {
		margin-top: 4%;
	}
	.index aside div.record span#icon {
		height: 32px; line-height: 32px;
	}
	.index aside div.record input.loginText {
		height: 32px;
	}
	.index aside div.tooltip {
		padding: 6px 20px;
	}
	.index aside label.error {
		padding: 0 0 0 5%;
	}
	.index aside div.record div.switch {
		margin-right: 16px;
	}
	.index aside div.record #submitBtn {
		height: 42px;
	}
	.index aside div.record label#copyRight {
		font-size: 0.95em;
	}
	/* --- dashboard --- */
	#middlebar #topIcons div.dropDown {
		left: -7%;
		width: 100%;
		top: 52px;
	}
	#dashboard div.bars.bottom div.box {
		min-height: 300px;
	}
	#dashboard div.bars div.box.receivable {
		padding-top: 20px;
	}
	#dashboard div.bars div.box.receivable p.title:nth-child(2) {
		margin-bottom: 15px;
	}
	/* --- the form --- */
	div.workplace .theForm .innerRow span.hinter.xmedium {
		width: 18.1%;
	}
	div.workplace .theForm .innerRow span.hinter.medium {
		width: 13.6%;
	}
	div.workplace .theForm fieldset.second .innerRow .innerColumn input.inputText.small {
		width: 20%;
	}
	div.workplace .theForm div.innerRow div.suggest {
	    /*margin-left: 9.75%;*/
	}
	.workplace .reportArea .suggest {
		width: 73% !important;
		margin-left: 15.2%;
	}
	.workplace .reportArea div#filterWrap div.filter label {
		width: 15%;
	}
	.workplace .reportArea div#filterWrap div.filter label.second {
		width: 13%;
	}
	.workplace .reportArea button {
		margin-left: 11.1%;
		width: 10%;
	}
}



@media only screen and (min-width:768px) and (max-width:1024px) {  /* iPad (Landscape) */
	.index {
		padding: 6% 6.5% 0;
	}
	.index main {
		height: 640px;
	}
	.index .developer {
		flex-basis: 50%;
	}
	.index aside {
		flex-basis: 50%;
		height: 84%;
	}
	.index .developer .compWrap img {
		width: 200px;
	}
	.index .developer .social {
		margin: 24% 26% 0;
	}
	.index .developer .social .box span {
		width: 49px;
		height: 49px;
		line-height: 49px;
	}
	.index aside h2 {
		font-size: 1.6em;
	}
	.index aside p {
		font-size: 0.95em;
	}
}



@media only screen and (max-width:768px) {  /* testing 900px, upload 768px s3 jiif */
	.index {
		padding: 5% 6%;
	}
	.index main {
		height: 92vh;
		flex-wrap: wrap;
	}
	.index .developer {
		flex-basis: 100%;
	}
	.index aside {
		flex-basis: 100%;
		margin: 2% 6%;
		border-left: none;
	}
	.index .developer .social,
	.index aside h2,
	.index aside p {
		display: none;
	}
	.index aside .record {
		width: 100%;
		margin-bottom: 1%;
		padding: 3% 0;
		border: 1px solid #ccc;
	}
	.index aside .record:nth-child(1) {
		border: 1px solid #ccc;
	}
	.index aside .record .icon {
		font-size: 1.7em;
	}
	.index aside .record .loginText {
		font-size: 1.1em;
	}
	.index aside .error {
		font-size: 1.2em;
	}
	.index aside .record .switch {
		margin-right: 16px;
		width: 82px;
		height: 44px;
	}
	.index aside .record .switch:after {
		height: 39px;
		width: 40px;
	}
	.index aside .record .switch.switchOn:after {
		left: 39px;
	}
	.index aside .record .switchLabel {
		font-size: 1.2em;
	}
	.index aside .record .forgot {
		font-size: 1.2em;
	}
	.index aside .record .submitBtn {
		height: 56px;
		font-size: 1.2em;
		font-weight: 500;
		letter-spacing: 0.8px;
	}
	.index aside .record .copy-right {
		font-size: 1.2em;
	}
	.index aside .record .version {
		font-size: 1.2em;
	}

}