/*Обнуление*/
*{
	padding: 0;
	margin: 0;
	border: 0;
	-moz-box-sizing: border-box;
}
*,*:before,*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}

nav,footer,header,aside{display: block;}

html,body{
	height: 100%;
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family:inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}

h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/

body{
	font-family: Arial;
	font-size: 15pt;

}


.wrapper{
	display: flex;
	flex-direction: column;
	min-height: 100%;	
	justify-content: center;
	background-image: url(images/screensaver.jpg);
	background-size: cover;
}



.container{
	display: flex;
	max-width: 1170px;
	margin: 0 auto;
	justify-content: center;
	min-height: 562px;	
}

/********************************************************/
h1{
	position: absolute;
	left: 50px;
	top: 20px;
	font-size: 18pt;
	font-weight: 700;
	text-align: left;
	padding: 0 20px;
}

.service_container{
	display: flex;
	flex-direction: column;
	padding-top: 20px;
	flex: 0 1 60%;
	background-color: rgb(31,78,121, 0.75);

}

.service_content{
	margin: 10% auto;
	width: 90%;
	position: relative;

}

h2 {
	margin: 5% 3%;
	font-weight: 700;
	font-size: 16pt;
	color: white;
}

.caption{
	position: absolute;
	top: -70px;
	left: 0px;
}


.string{
	border: 2px solid lightgray;
	margin: 10px 0px;
	text-align: left;
	color: white;
	padding: 15px;
	background-color: transparent;
}

/********************************************************/

.sign_in_container{
	display: flex;
	flex: 0 1 38%;
	background-color: rgb(84,130,53, 0.25);	
	justify-content: center;
	align-items: center;
	position: relative;
}

.mess{
	position: absolute;
	top: 30px;
	left: 4%;
	color: FireBrick;
}

@media(max-width: 386px){
	.mess{
		top: 10px;
	}
}

.sign_in_content{
	width: 80%;	
		
}

.reg{
	border: 2px solid #5B9BD5;
	width: 100%;
	margin: 3px 0;
	border-radius: 7px;
	padding: 13px;
}

input::placeholder{
	color: lightgray;
	font-size: 12pt;
}

.btn_block {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}

.btn {
	user-select: none;
	font-size: 14pt;		
	border-radius: 10px;
	padding: 10px 5px;
	white-space: normal;
	text-align: center;
	cursor: pointer;
}

.ips{
	background-color: #619801;
	color: white;
	padding: 10px 20px;
	width: 100%;
	margin-top: 10px;
}

.green{
	background-color: #619801;
	color: white;
	width: 64%;
	padding-top: 12px;
}

.orange{
	background-color: #FFCD6C;
	color: black;
	width: 34% ;
}
.orange:hover{
	background-color: #d9ae5c;	
}

.orange:active{
	background-color: #bf9a51;
}

.green:hover, .ips:hover{
	background-color: #528101;
}

.green:active, .ips:active{
	background-color: #497201;
}

/***************************************************/
@media(max-width: 1200px) {
	.container{
		max-width: 970px;
	}
	.sign_in_content{
		width: 90%;
	}

}
@media(max-width: 992px){
	.container{
		max-width: 780px;
	}
	.service_container{
		flex: 0 1 38%;
	}
	.sign_in_container{
		flex: 0 1 62%;
	}

}
@media(max-width: 790px) {
	.container{
		flex-direction: column;
		max-width: 530px;
		overflow: auto;
		margin-top: 80px;
	}

	.service_content{
		margin: 10% 5% 15% 5%;
	}

	.sign_in_content{
		margin: 15% 5%;
	}

	h1{
		left: 0;
		text-align: center;
	}

	h2{
		text-align: center;
	}
	.reg{
		margin: 5px 0;
		padding: 17px;
	}
}

@media(max-width:  500px) {

	.container{
		overflow: auto ;
		max-width: none;
	}
	.wrapper{
		display: block;
	}
	.btn_block{
		flex-direction: column;
	}
	.orange, .green, .ips{
		margin-bottom: 10px;
		width: 100%;
		padding: 15px;
	}
	.ips{
		margin: 0;
	}
	
}
@media(max-width: 355px){
	.ips{
		font-size: 13pt;
	}

	h1{
		font-size: 15pt;
	}
}