/* CSS */

html, body {
	height: 100%;
}
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
body {
	background: url(../img/squar.png) no-repeat center top, url(../img/back.gif);
	background-size: contain, auto;
	font-family: 'Droid Sans', sans-serif;
}
@media (max-width: 1200px) {
	body {
		background-size: 1100px, auto;
	}
}
@media (max-height: 966px) {
	body {
		background-size: 1080px, auto;
	}
}
.sq {
	background: #fff;
	width: 1000px;
	height: 1000px;
	position: absolute;
	margin-left: -500px;
	left: 50%;
	transform: rotate(-7deg);
	box-shadow: -5px 20px 0 rgba(0,0,0,0.1)
}
.wrapper {
	width: 920px;
	min-height: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.header {
	position: relative;
	width: 920px;
	height: 203px;
	margin-bottom: 50px;
}
.logo {
	width: 410px;
	height: 102px;
	background: url(../img/logo.png) no-repeat;
}
.menu-holder {
	width: 100%;
}
.menu {
	margin: 10px -7px 0 0;
	width: 376px;
	height: 183px;
	background: url(../img/menu-back.png) no-repeat;
}
.menu ol {
	list-style: none;
	text-transform: uppercase;
	font-size: 24px;
	margin: 44px 20px 0 150px;
}
.menu a {
	text-decoration: none;
	color: #000;
}
.menu a:hover {
	color: #397ba6;
}
.menu a:active {
	color: #88d1ff;
}
.menu a:focus {
	border-left: 5px solid #6cb6e5;
	margin-left: -10px;
	padding-left: 5px;
	color: #6cb6e5;
	cursor: default;
}
.menu a:visited {
	color: #999;
}
.menu a:visited:hover {
	color: #397ba6;
}
.menu a:visited:focus {
	color: #6cb6e5;
}
.main {
	position: relative;
	margin: 0 10px 38px 50px;
}
.footer {
	position: absolute;
	width: 314px;
	height: 183px;
	background: url(../img/footer-back.png) no-repeat;
	color: #999;
	font-size: 14px;
	top: 800px;
	left: 50%;
	margin-left: -470px;
}
.ftr-holder {
	border: 1px solid rgba(0,0,0,0);
	margin-left: 80px;
}
.ico-holder {
	margin-top: 35px;
}
.ico-fb, .ico-tw, .ico-in {
	width: 38px;
	height: 38px;
	margin-right: 10px;
}
.ico-fb {
	background: url(../img/ico-fb.png) no-repeat;
}
.ico-tw {
	background: url(../img/ico-tw.png) no-repeat;
}
.ico-in {
	background: url(../img/ico-in.png) no-repeat;
}
.ico-fb, .ico-tw, .ico-in {
	opacity: 0.8;
}
.ico-fb:hover, .ico-tw:hover, .ico-in:hover {
	opacity: 1
}
.copy-sign {
	margin-top: 65px;
}
a {
	color: #6cb6e5;
}
a:hover {
	color: #468cb9;
}

/* Mission styles */
.img-iot {
	padding-right: 70px;
}
.img-tw {
	padding-left: 70px;
}
.txt-iot {
	font-size: 30px;
	color: #397ba6;
	vertical-align: middle;
}
.txt-tw {
	font-size: 24px;
	color: #397ba6;
	vertical-align: middle;
	text-align: right;
}
.txt-list {
	font-size: 18px;
	color: #397ba6;
	padding-left: 30px;
	margin-top: 30px;
}
.txt-list li {
	line-height: 1.3;
}

/* Company styles*/
.inner-image {
	margin-left: -125px;
}
.inner-txt {
	margin-top: 50px;
	font-size: 24px;
}

/* Careers styles*/
.benefits {
	width: 100%;
	text-align: center;
	color: #777;
	font-size: 10px;
}
.benefits img {
	margin-bottom: 10px;
}
.vacancies {
	width: 100%;
	text-align: center;
	margin-top: 30px;
}
.vacancies .circle {
	width: 192px;
	height: 192px;
	border-radius: 100px;
	border: 4px solid #89c5ea;
	box-shadow: 0 10px 0 0 rgba(0,0,0,0.1);
	position: relative;
}
.vacancies-overlay .circle {
	position: absolute;
	top: 40px;
	right: 40px;
	width: 192px;
	height: 192px;
	border-radius: 100px;
	border: 4px solid #89c5ea;
	box-shadow: 0 10px 0 0 rgba(0,0,0,0.1);
}
.vacancy-pm {
	background: url(../img/vacancy-pm.jpg) no-repeat;
}
.vacancy-dev {
	background: url(../img/vacancy-dev.jpg) no-repeat;
}
.vacancy-qa {
	background: url(../img/vacancy-qa.jpg) no-repeat;
}
.vacancy-sa {
	background: url(../img/vacancy-sa.jpg) no-repeat;
}
.circle .details {
	width: 58px;
	height: 58px;
	border-radius: 30px;
	background: url(../img/details.png) no-repeat center center #a5d4f1;
	box-shadow: 0 10px 0 0 rgba(0,0,0,0.1);
	position: absolute;
	bottom: -26px;
	left: 50%;
	margin-left: -29px;
}
.circle .details:hover {
	background-color: #6cb6e5;
	cursor: pointer;
}
.circle .name {
	width: 192px;
	font-size: 22px;
	text-align: center;
	position: absolute;
	bottom: -70px;
}
.fade {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	z-index: 3;
}
.overlay {
	width: 900px;
	position: absolute;
	top: 50%;
	margin-top: -300px;
	left: 50%;
	margin-left: -450px;
	background: #fff;
	z-index: 4;
	border-radius: 10px;
	padding: 40px;
	box-sizing: border-box;
	overflow: auto;
}
.overlay h2 {
	font-size: 48px;
	color: #468cb9;
	margin-bottom: 20px;
}
.overlay h3 {
	font-size: 28px;
	color: #468cb9;
	margin-top: 40px;
	margin-bottom: 20px;
}
.overlay p {
	font-size: 24px;
	margin-bottom: 20px;
}
.overlay ul {
	margin-left: 20px;
	margin-bottom: 40px;
	font-size: 24px;
}
.overlay li {
	margin-bottom: 20px;
}
.overlay .button {
	padding: 20px 50px;
	color: #fff;
	background: #468cb9;
	font-size: 24px;
	text-align: center;
	border-radius: 5px;
	margin-right: 10px;
}
.overlay .button:hover {
	cursor: pointer;
	background: #6cb6e5;
}
.overlay .button:active {
	cursor: pointer;
	background: #89c5ea;
}

/* MISC */
.show {
	border: 1px dotted red;
}
.float {
	float: left;
}
.floatr {
	float: right;
}
.table {
	display: table;
}
.tr {
	display: table-row;
}
.td {
	display: table-cell;
}
.bottom {
	vertical-align: bottom;
}
/* ClearFix */
.cf:before,.cf:after{content:"";display:block;}.cf:after{clear:both;}