body {
	background: #01062B url('../sgz/sgz_background.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow-y: scroll;
    overflow-x: hidden;
	}
 
	.flex-container {
	  display: flex;
	  justify-content: center;
	  transform: translate(0%, 10%);
	}

	.flex-container > div {
	  margin: 10px;
	  padding: 20px;
	}

	.login_container {
		font-family: Arial, Tahoma, Verdana, sans-serif;
		font-size: 75%;
		font-size: 12px;
		color: #cfcfcf;
		width: 484px;
	}

	.login_container .formframe {
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		border: 8px solid rgba(255, 255, 255, 0.3);
		display: block;
		width: 484px;
	}

	.login_container .formarea {
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		background: #333;
		color: #cfcfcf;
		display: block;
		padding: 25px 50px 25px 50px;
	}

	.login_container .titlearea {
		width: 100%;
		display:block;
	}

	.login_container .titlename {
		/* text-align: left; */
		margin-top: 12px;
		color: #222;
		font-size: 40px;
		font-weight: bold;
		text-shadow: 0px 1px 2px #4f4f4f;
		background-color: #333;
		white-space: nowrap;
		display: inline;
		z-index: 99;
	}

	.login_container .titleruler {
		display: block;
		border-right: 0;
		border-top: 0;
		border-left: 0;
		border-bottom: 2px solid #222;
		width: 100%;
		margin-top: -10px;
	}

	.login_container .prodinfo {
		display:block;
		margin-top: 12px;
		margin-bottom: 12px;
	}

	.login_container .prodname {
		/* text-align: left; */
		font-size: 20px;
		font-weight: bold;
		text-shadow: 1px 1px 2px #111;
	}

	.login_container .prodver {
		font-size: 16px;
	}

	.login_container .fieldlabel {
		margin-top: 12px;
		margin-bottom: 4px;
		/* text-align: left; */
		padding: 0 8px 0 8px;;
	}

	.login_container .inputfield {
		background: #222;
		border-bottom: 2px solid #444;
		border-right: 2px solid #444;
		border-top: 2px solid #222;
		border-left: 2px solid #222;
		color: #fafafa;
		/* text-align: left; */
		display: block;
		/* height: 36px; */
		padding: 8px;
		width: 360px; /* 480 - L&R padding (50 - 50) = 380 - L&R padding (8 - 8) = 364 - border-spacing (2 - 2) = 360 px */
		margin-bottom: 12px;
	}

	.login_container  input:-webkit-autofill {
		background: #222;
		color: #fafafa;
	}

	.login_container .inputbutton {
		display:block;
		padding-left: 10px;
		padding-right:10px;
		text-align:center;
		height: 32px;
		float: right;
		background: #499dc3;
		color: #cfcfcf;
		text-decoration:none;
		text-shadow:1px 1px 1px #000111;
		border: 2px solid #008abf;
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #499cc3), color-stop(1, #0089bf) );
		background:-moz-linear-gradient( center top, #499cc3 5%, #0089bf 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#499cc3', endColorstr='#0089bf');
		background-color:#499cc3;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		border:1px solid #0089bf;
	}

	.dj_rtl .login_container .inputbutton {
		float: left;
	}	

	.login_container .inputbutton:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0089bf), color-stop(1, #499cc3) );
		background:-moz-linear-gradient( center top, #0089bf 5%, #499cc3 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0089bf', endColorstr='#499cc3');
		background-color:#0089bf;
	}

	.login_container .inputbutton:active {
		position:relative;
		top:1px;
	}

	.login_container .copyright {
		color: #fff;
	}

	.login_container .error {
		color: #F77;
		font-weight: bold;
		margin-top: 1em;
	}

	.login_container .reset_flow {
		clear: both;
		display: block;
	}

	.login_container #reset a {
		color: #cfcfcf;
	}

	.login_container .sgzlogo {
		background: url('../sgz/sgz_logo.png') no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		display: block;
		height: 40px;
		width: 105px;
		margin-bottom: 20px; 
	}

	.login_container .sgzlogo_hml {
		background: url('../sgz/sgz_logo_hml.png') no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		display: block;
		height: 40px;
		width: 105px;
		margin-bottom: 20px;
	}	

	.login_container .sgzlogo .alttext {
		display: none;
	}	

	.login_container .sgzlogo_hml .alttext {
		display: none;
	}	

	#sp > img {
		margin-top: 60%;
	}

	#prodam > img {
		margin-top: 10%;
	}	

	body {
		width: 90%;
		margin: auto;
	}
	.flex-container.prodamExit {
		margin-top: 10%;
	}
	@media only screen and (max-width: 600px) {
		.login_container {
			width: 325px;
		}

		.login_container .formframe {
			width: 325px;
		}

		.login_container .formarea {
			padding: 15px 15px 15px 15px;
		}	

		.login_container .inputfield {
			width: 275px;
		}

		#prodam > img {
			
		margin-top: 10%;}

		#sp > img {
			margin-top: 10%;
		}
		div#sp, div#prodam {
			align-items: center;
			display: flex;
		}	
		.prodamExit {
			margin-top: 10%;
		}
	}


	@media only screen and (max-width: 800px) {
		.flex-container {
			transform: translate(0%, 0%);
	  		flex-wrap: wrap;
	  		flex-direction: row;
		}
		#prodam {
			order: -1;
	    	/* margin-right: 10px; */
		}

		#prodam > img {
			width: 100px;
		}

		#sp {
			order: -1;
	    	/* margin-left: 10px; */
		}	

		#sp > img {
			width: 100px;
		}
		#sp > img {
			margin-top: 60%;
		}
		div#sp, div#prodam {
			align-items: center;
			display: flex;
		}
	}

	@media (min-width: 801px) and (max-width:1026px){ 
		img {width: 100px;}
	
		div#prodam {order: -1;position: absolute;top: -23px;right: 20%;float: right;margin-top: -10%;}
	
		div#form {}
	
		div#sp {
		position: absolute;
		
		left: 20%;padding-top: 5%;height: 20px;top: 0;margin-top: -10%;}
	
		div#form {}
		
		body {width: 90%;margin: auto;}
		
		div#form {margin: auto;}
		
		#sp > img ,#prodam > img {
			margin-top: 10%;
		}
		.flex-container.row {
			margin-top: 5%;
		}
		div#sp, div#prodam {
			align-items: center;
			display: flex;
		}
	} 
	@media only screen and (min-width:1026px) and (max-width:1027px){
		#sp > img {
			margin-top: 0%;
		}
	}

	@media only screen and (min-width: 1028px) {
		body {
			width: 1%;
			margin: auto;
			overflow-y: scroll;
			overflow-x: hidden;
		margin-top: 8px;}
		#prodam {
	    	margin-left: 5%;
		}
		#sp {
	    	margin-right: 5%;
		}	
		#sp > img {
			margin-top: 10%;
		}
	}	

	@media (min-width: 82em) {
		#prodam {
	    	margin-left: 150px;
		}
		#sp {
	    	margin-right: 150px;
		}		
	}