@media only screen and (min-width:1600px) { /* 15in. Macbook Pro */

	/* --- login form --- */

	body {
		font-size: 98%;
	}
	.index {
		/* height: 100vh; */
		padding: 7% 9% 0;
		/* background: url(../images/system/index-cover.png) no-repeat;
		background-size: cover; */
	}
	.index main {
		/* display: -webkit-box;
		display: -ms-flexbox;
		display: flex; */
		height: 660px;
		/* background: rgba(255,255,255,0.7); */
	}
	.index .developer,
	.index aside {
		/* display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column; */
		-ms-flex-preferred-size: 51%;
		    flex-basis: 51%;
	}
	.index .developer {
		-ms-flex-preferred-size: 49%;
		    flex-basis: 49%;
		/* padding: 5% 0 0; */
	}
	.index aside {
		/*margin: 5% 0;
		padding: 2% 4%;
		height: 80%;
		border-left: 1px solid #09a7e0;*/
	}
	.index .developer .compWrap {
		/* margin-top: 2em;
		text-align: center; */
	}
	.index .developer .compWrap img {
		/* width: 300px; */
	}
	.index .developer .social {
		/* display: -webkit-box;
		display: -ms-flexbox;
		display: flex; */
		margin: 4% 33% 0;
	}
	.index .developer .social .box {
		/* -ms-flex-preferred-size: 25%;
		    flex-basis: 25%;
		text-align: center; */
	}
	.index .developer .social .box span {
		width: 48px;
		height: 48px; line-height: 48px;
		/* font-size: 1.2em;
		color: #fff;
		background-color: #25a8e0;
		border-radius: 99em; */
	}
	.index aside h2 {
		/* font-size: 1.7em;
		color: #09a7e0;
		font-weight: 500;
		letter-spacing: -1px; */
	}
	.index aside p {
		/* margin: 10px 0;
		font-size: 0.95em;*/
	}
	.index aside .record {
		/* position: relative;
		width: 90%;
		padding: 2% 0;
		background: #fff; */
		border: 1px solid #d5d5d5;
		/* display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center; */
	}
	.index aside .record:nth-child(1) {
		/* margin-top: 5%;
		border-bottom: none; */
	}
	.index aside .record.borderless {
		/* margin-top: 3%;
		padding: 0;
		background: transparent;
		border: none;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between; */
	}
	.index aside .record:nth-child(6) {
		margin-top: 4%;
	}
	.index aside .record:nth-child(7) {
		/* -webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column; */
	}
	.index aside .record .icon {
		/* -ms-flex-preferred-size: 15%;
		    flex-basis: 15%;
		-ms-flex-item-align: center;
		    -ms-grid-row-align: center;
		    align-self: center;
		text-align: center;
		color: #999;
		font-size: 1.3em; */
	}
	.index aside .record .loginText {
		/* -ms-flex-preferred-size: 85%;
		    flex-basis: 85%;
		height: 34px;
		padding-left: 3%;
		font-family: GothamPro;
		font-size: 0.9em;
		border: none; */
		border-left: 1px solid #d5d5d5;
	}
	.index aside .tooltip {
		/* position: absolute;
		left: 15%; top: 44px;
		padding: 1.5% 3%;
		background-color: #f1c45a;
		color: #333;
		text-align: center;
		font-size: 0.8em;
		display: none; */
	}
	.index aside .tooltip::after {
		/* content: "";
		position: absolute;
		bottom: 100%;
		left: 16%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent #f1c45a transparent; */
	}
	.index aside .error {
		/* margin: 2% 16.5% 0;
		color: #f00; */
		font-size: 0.95em;
		/* display: none; */
	}
	.index aside .error::before {
		/* font-family: 'Font Awesome 5 Pro';
		content: '\f06a';
		color: #f00;
		margin-right: 8px; */
	}
	.index aside .process {
		/* margin: 2% 16.5%;
		color: #979214;
		font-size: 0.9em;
		display: none; */
	}
	.index aside .process i {
		/* margin-right: 10px;
		-webkit-animation: spinner 1s linear infinite;
		        animation: spinner 1s linear infinite;
		color: #979214; */
	}
	.index aside .switchWrap {
		/* display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center; */
	}
	.index aside .switchWrap input[type='checkbox'] {
		/* opacity: 0;
		filter: alpha(opacity=0);
		display: none; */
	}
	.index aside .record .switch {
		/* position: relative;
		margin-right: 12px;
		width: 62px;
		height: 34px;
		background: #ccc;
		z-index: 0;
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;
		cursor: pointer; */
	}
	.index aside .record .switch:after {
		/* content: ' ';
		height: 29px;
		width: 30px;
		background: #fff;
		position: absolute;
		z-index: 2;
		top: 2px;
		left: 3px;
		-webkit-transition-duration: 300ms;
		     -o-transition-duration: 300ms;
		        transition-duration: 300ms;
		-webkit-box-shadow: 0 2px 5px #999;
		        box-shadow: 0 2px 5px #999; */
	}
	.index aside .record .switch.switchOn:after {
		/* left: 29px; */
	}
	.index aside .record .switchLabel {
		/* font-size: 0.95em; */
	}
	.index aside .record .forgot {
		/* text-decoration: none;
		font-size: 0.95em; */
	}
	.index aside .record .submitBtn {
		/* -ms-flex-preferred-size: 100%;
		    flex-basis: 100%;
		margin: 2% 0 1%; */
		height: 44px;
		/* text-transform: uppercase;
		letter-spacing: 0.5px;
		cursor: pointer;
		font-family: GothamPro;
		color: #fff;
		font-size: 1em;
		background: #8c8512;
		border: none; */
	}
	.index aside .record .copy-right {
		margin: 8% 5% 0;
		/* color: #666; */
		font-size: 1em;
	}
	.index aside .record .version {
		/* margin: 2% 5% 0;
		font-size: 0.95em;
		color: #666; */
	}
	.middlebar .top-bar .drop-down .row .photo {
		-ms-flex-preferred-size: 72px;
		    flex-basis: 72px;
		height: 72px;
	}
	.middlebar .top-bar .drop-down .row .links {
		margin-top: 0;
	}
	.middlebar .top-bar .drop-down .overlay span {
		font-size: 0.95em;
	}
	.middlebar .top-bar .drop-down .row.button .change-pass span {
		font-size: 1em;
	}
	.workplace .the-form .add-new {
		width: 36px;
	}
	.workplace .report-page .buttons .btn-display {
	    width: 26.6%;
	}

}


@media only screen and (max-width: 1024px) {

	/* --- login form --- */

	body {
		font-size: 98%;
	}
	.index {
		/* height: 100vh; */
		padding: 7% 5% 0;
		/* background: url(../images/system/index-cover.png) no-repeat;
		background-size: cover; */
	}
	.index main {
		/* display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		height: 660px;*/
		/* background: rgba(255,255,255,0.7); */
	}
	.index .developer {
		-ms-flex-preferred-size: 46%;
		    flex-basis: 46%;
		/* padding: 5% 0 0; */
	}
	.index aside {
		-ms-flex-preferred-size: 54%;
	    flex-basis: 54%;
		/* margin: 5% 0;
		padding: 2% 4%;
		height: 80%;
		border-left: 1px solid #09a7e0; */
	}


}


@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 603px) {

}

@media only screen and (max-width: 480px) {

}

@media only screen and (max-width: 360px) {

}