*, ::after, ::before { box-sizing: border-box; }
body { margin: 0; font-size: 1rem; background: url(image/bg_body.jpg); background-repeat: no-repeat; font-family: Open Sans, Verdana, Tahoma, Arial, sans-serif; display: block; min-width: 768px; /*min-height: 825px;*/ }
a { cursor: pointer; text-decoration: none; }

.btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }

.container-fluid, .row { width: 100%; position: relative; margin-right: auto; margin-left: auto; }
.row { display: block; }
content { background: url(image/bg_body.jpg); background-repeat: no-repeat; background-size: 100% 100%; display: inline-block; }
#top { padding: 15px; }
.logo { position: relative; display: block; margin: 10px 0; color: #ffffff; font-size: 2rem; font-family: 'Goblin One', sans-serif; text-align: center; width: 40%; float: left; }
.logo p { margin-bottom: 0; line-height: 1; }
.logo span { color: #2196F3; font-size: 2rem; }
.logo span.desc-logo { font-size: 1.4rem; color: #ffffff; }
.left, .right { position: relative; float: left; }
.left { width: 60%; display: block; padding-top: 15px; }
.contacts-header { position: relative; width: 50%; float: left; }
.contacts-header img { width: 100px; height: 100px; float: left; margin-top: -10px; margin-right: 15px; }
.header-phone, .header-clock { color: #0f122a }
.header-phone { font-size: 1.4rem; font-weight: 900; margin-top: 10px; margin-bottom: 0; }
.header-clock { font-size: 1.1rem; margin-top: 0; }
.header-email { width: 50%; float: left; margin-top: 14px; padding-left: 20px; font-size: 1.4rem; }
.header-email img { float: left; width: 50px; height: 50px; margin-right: 15px; }
.header-email p { line-height: 2.3; }
.left h1 { float: left; font-size: 3rem; font-weight: 500; text-align: center; }
.right { width: 40%; color: #ffffff; }
.right h2 { padding-right: 3em; font-weight: 900; font-size: 1.3rem; margin-top: 0; }
.right ul { list-style: none; max-width: 90%; }
.right ul li { line-height: 1.3; margin-bottom: 15px; }
.right ul li:before { content: ''; position: absolute; margin-top: 7px; left: 0; background: url(image/galka.png) no-repeat; width: 15px; height: 15px; background-size: 100%; }
.content-block { position: relative; display: block; float: left; }
.content-block h1 { text-align: center; font-size: 1.3rem; padding: 0 50px; margin: 20px 0; font-weight: 400; }
.content-block h3 { font-size: 1.2rem; font-weight: 400; text-align: center; float: left; padding: 0 35px; }
.content-block h3 span { font-weight: 900; }
.content-block h4 { font-size: 1.4rem; font-weight: 900; text-align: center; top: 20px; position: relative; }
.buttons-block { position: relative; margin: 50px 0 0 21%; float: left; }
.buttons-block a { color: #ffffff; }
.buttons-block a:hover { color: #ffffff; opacity: .8; }
.test { background: #232c36; border-radius: 4px; padding: 10px 15px 10px 40px; color: #ffffff; font-weight: 600; display: inline; }
.test:before { content: ''; position: absolute; margin-top: 3px; left: 13px; background: url(image/key.png) no-repeat; width: 20px; height: 25px; background-size: 100%; }
.buttons-block .login { background: none; border: 1px solid #232c36; border-radius: 4px; padding: 10px 15px 10px 40px; color: #232c36; display: inline; margin-left: 1em; font-weight: 600; }
.login:before { content: ''; position: absolute; margin-top: 0; margin-left: -25px; background: url(image/zamok.png) no-repeat; width: 20px; height: 25px; background-size: 100% 100%; }
.buttons-block a.login:hover { opacity: .8; color: #232c36; }
.login-password { position: relative; float: right; margin-top: 12px; right: 9em; font-size: .8rem; }
.zabota { position: relative; display: inline-block; text-align: center; width: 100%; margin-top: 30px; font-weight: 700; font-size: 1.4rem; padding-left: 30px; }
#footer { width: 100%; min-height: 50px; margin-top: 1em; position: relative; float: left; background-color: rgba(35, 44, 54, 0.85); color: #ffffff; padding: 15px 0; bottom: -55px; }
.company { width: 60%; padding-left: 20px; float: left; }
.company p { margin-bottom: 0; }

@media screen and (min-width: 1440px) {
	html, body { height: 100%; }
	#content { background-size: 100% 100%; height: 100vh; }
	#top { height: 100%; }
	.login-password { margin-top: 52px; right: 28%; font-size: 1rem; }
	.test, .buttons-block .login { font-size: 1.4rem; }
	.right ul li { font-size: 1.5rem; }
	.test:before, .login:before { margin-top: 5px; }
	#footer { position: absolute; width: 100%; height: 100px; bottom: 0; margin-top: 0; }
	.content-block h4 { float: left; left: 35%; }
	.right h2 { font-size: 1.6rem; margin: 15px 0 20px; }
	.buttons-block { margin: 50px 0 0 15%; }
}

@media screen and (min-width: 1200px) and (max-width: 1439px) {
	#content { background-size: 100% 125%; min-height: 640px; }
	.login-password { right: 10.5em; }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#content { background-size: 100% 125%; }
	.logo, .logo span { font-size: 1.6rem; }
	.logo span.desc-logo { font-size: 1rem; color: #ffffff; }
	.contacts-header img { width: 90px; height: 90px; margin-right: 10px; }
	.header-phone { font-size: 1.2rem; }
	.header-clock { font-size: 1rem; }
	.header-email img { width: 40px; height: 40px; }
	.header-email p { line-height: 2.3; font-size: 1.1rem; }
	.right h2 { padding-right: 1em; font-size: 1.6rem; }
	.right ul { max-width: 100%; }
	.buttons-block { margin: 50px 0 0 8%; }
	.login-password { right: 2.5em; }
	.content-block h4 { top: 0; font-size: 1.2rem; }
	.zabota { margin-top: 40px; margin-bottom: 20px; font-size: 1.4rem; }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	#content { background-size: 100% 100%; }
	.logo { }
	.contacts-header, .header-email { width: 100%; }
	.right h2 { font-size: 1.6rem; padding-right: 0; }
	.right ul { min-width: 100%; }
	.right ul li { padding-left: 0; }
	.content-block { margin-top: 1em; }
	.content-block h1 { padding: 0 30px 0 0; }
	.content-block h3 { padding: 0 35px 0 15px; }
	.login-password { right: 3em; }
	.buttons-block .login { display: block; margin-top: 2em; margin-left: 0; }
	.company { font-size: 1.4rem; }
}

@media screen and (max-width: 767px) {
	#content { background-size: 100% 118%; width: 100%; }
	.contacts-header, .header-email { width: 100%; }
	.right h2 { font-size: 1.4rem; padding-right: 0; }
	.right ul { min-width: 100%; }
	.right ul li { padding-left: 0; }
	.content-block { margin-top: 1em; }
	.content-block h1 { margin-top: 0; padding: 0 30px 0 10px; font-size: 1.6rem; }
	.content-block h3 { font-size: 1.2rem; padding: 0 35px 0 20px; }
	.buttons-block .login { margin-left: 0; margin-top: 1.5em; display: block; }
	.login-password { float: none; margin: 12px auto; right: 0; }
	.zabota { font-size: 1rem; }
	.company { font-size: .7rem; }
	.logo, .logo span { font-size: 1.6rem; }
	.logo span.desc-logo { font-size: 1rem; }

@media screen and (min-width: 320px) and (max-width: 580px) {
	body { background-size: 220% 118%; }
}