body {
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: 'latoregular';
	src: url('../fonts/lato/lato-regular-webfont.eot');
	src: url('../fonts/lato/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/lato/lato-regular-webfont.woff2') format('woff2'),
		url('../fonts/lato/lato-regular-webfont.woff') format('woff'),
		url('../fonts/lato/lato-regular-webfont.ttf') format('truetype'),
		url('../fonts/lato/lato-regular-webfont.svg#latoregular') format('svg');
	font-weight: normal;
	font-style: normal;
	-webkit-font-smoothing: antialiased;

}

@font-face {
	font-family: 'latolight';
	src: url('../fonts/lato/lato-light-webfont.eot');
	src: url('../fonts/lato/lato-light-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/lato/lato-light-webfont.woff2') format('woff2'),
		url('../fonts/lato/lato-light-webfont.woff') format('woff'),
		url('../fonts/lato/lato-light-webfont.ttf') format('truetype'),
		url('../fonts/lato/lato-light-webfont.svg#latolight') format('svg');
	font-weight: normal;
	font-style: normal;
	-webkit-font-smoothing: antialiased;

}

@font-face {
	font-family: 'thin';
	src: url('../fonts/work-sans/Work-Sans-ExtraLight.eot');
	src: url('../fonts/work-sans/Work-Sans-ExtraLight.eot?#iefix') format('embedded-opentype'),
		url('../fonts/work-sans/Work-Sans-ExtraLight.woff') format('woff'),
		url('../fonts/work-sans/WorkSans-ExtraLight.ttf') format('truetype'),
		url('../fonts/work-sans/Work-Sans-ExtraLight.svg#Work-Sans-ExtraLight') format('svg');
	font-weight: normal;
	font-style: normal;
}

#app {
	font-family: 'latoregular';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	hyphens: none;
}

h1,
h2 {
	font-family: 'thin';
	font-weight: normal;
	padding: 0;
	margin: 0;
	padding-bottom: 10px;
}

h1 {
	font-size: 30px;
}

h2 {
	font-size: 20px;
}

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

	#app {
		font-family: 'latolight';
	}

}

/*--nav--*/

.nav {
	position: fixed;
	padding-top: 11px;
	width: 100%;
	height: 29px;
	background: #333333;
	font-family: 'latolight';
	color: #999999;
	z-index: 2;
	-webkit-box-shadow: 0px 0px 29px -4px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 0px 29px -4px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 0px 29px -4px rgba(0, 0, 0, 0.75);
}

.nav a {
	color: #cccccc;
	text-decoration: none;
}

.nav span {
	font-family: 'thin';
}

.nav a:focus {
	outline: none;
}

.nav .logo {
	position: fixed;
	left: 10px;
	top: 10px;
}

.nav .menu {
	position: fixed;
	right: 10px;
	top: 10px;
	display: none;
}

@media only screen and (min-width: 800px) {

	.nav a:hover {
		color: #b4d433;
	}

}


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

	.nav span {
		display: none;
	}

	.nav .menu {
		display: block;
	}

	.nav a {
		display: block;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 20px;
		background: #333333;
		-webkit-box-shadow: 0px 0px 29px -4px rgba(0, 0, 0, 0.30);
		-moz-box-shadow: 0px 0px 29px -4px rgba(0, 0, 0, 0.30);
		box-shadow: 0px 0px 29px -4px rgba(0, 0, 0, 0.30);
		visibility: hidden;
	}

	.nav a:first-of-type {

		margin-top: 29px;


	}

}

/*--Masthead--*/

.masthead {
	float: left;
	width: 100%;
	background-image: url(../img/header/masthead.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-color: #333333;

}

.masthead .mastheadContent {
	width: 100%;
	visibility: hidden;
}

.masthead .strap {
	font-family: 'thin';
	font-size: 30px;
}

.masthead .strap span {
	color: #ffffff;
}

.masthead .strap span span {
	color: #999999;
}

.masthead .strap span .tw {
	color: #ffffff;
}

.masthead .icons {
	margin-top: 30px;
}

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

	.masthead .mastheadContent {
		position: reletive;
		margin: auto;
		width: 550px;
	}

	.masthead .strap {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.masthead .icons {
		width: 100%;
		margin-bottom: 30px;
	}

}

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

	.masthead .mastheadContent {
		width: 100%;
	}

	.masthead .strap span {
		float: left;
		padding-top: 10px;
		padding-bottom: 10px;
		width: 100%;
		font-size: 25px;
	}

	.masthead .strap span span {
		display: none;
	}

}

/*--About--*/

.about {
	float: left;
	width: 100%;
	background: #333333;
}

.about .aboutContent {
	margin: auto;
	width: 1060px;
	color: #cccccc;
	font-size: 14px;
	line-height: 1.4;
}

.about .aboutInnerWrap {
	float: left;
}

.about .aboutIntro {
	float: left;
	width: 100%;
	font-size: 16px;
}

.about .column {
	float: left;
	padding-top: 20px;
	width: 24%;
	padding-right: 1%;
	text-align: left;
}

.about .column h1 {
	padding-left: 35px;
	color: #666666;
	white-space: nowrap;
	background-repeat: no-repeat;
	background-size: 35px 35px;
}

.about .aboutSoftware h1 {
	background-image: url(../img/about/software.png);
}

.about .aboutData h1 {
	background-image: url(../img/about/data.png);
}

.about .aboutVisual h1 {
	background-image: url(../img/about/visual.png);
}

.about .aboutTactical h1 {
	background-image: url(../img/about/genai.png);
}

.about .column span {
	color: #8fa533;
}

.about .column a {
	float: left;
	margin-top: 10px;
	margin-bottom: 5px;
	background-color: #758435;
	font-size: 14px;
	color: #000000;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	border-radius: 2px;
}

@media only screen and (min-width: 1100px) {

	.about .column a:hover {
		background-color: #b4d433;
	}

}

@media only screen and (max-width: 1100px) {
	.about .aboutContent {
		padding-left: 5%;
		padding-right: 5%;
		width: 90%;
	}
}

@media only screen and (max-width: 950px) {
	.about .column {
		width: 100%;
		padding-right: 0%;
		padding-top: 30px;
	}

	.about .aboutIntro span {
		display: none;
	}
}

@media only screen and (max-width: 800px) {
	.about .aboutContent {
		font-size: 17px;
	}

	.about .aboutIntro {
		text-align: left;
		font-size: 19px;
	}

	.about .column a {
		font-family: 'latoregular';
		font-size: 18px;
	}


}

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

	.about .column span span {
		display: none;
	}
}


/*--Lifecycle--*/

.lifecycle {
	float: left;
	width: 100%;
	background-color: #b4d433;
}

.lifecycle .lifecycleContent {
	margin: auto;
	width: 600px;
	color: #666666;
}

.lifecycle .lifecycleInnerWrap {
	float: left;
	width: 100%;
}

.lifecycle span {
	font-family: 'thin';
	color: #333333;
	padding-right: 3px;
}

.lifecycleServices li {
	text-align: left;
	font-family: 'thin';
	color: #333333;

}

.lifecycleServices li .solutionSmall {
	font-size: 15px;
}

@media only screen and (min-width: 670px) {

	.lifecycle .lifecycleServices {
		position: relative;
		width: 100%;
		height: 220px;
		margin: 0;
		padding: 0;
		margin-bottom: 15px;
		padding-bottom: 15px;
		background-image: url(../img/lifecycle/agile.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 95%;

	}

	.lifecycleServices li {
		position: absolute;
		list-style-type: none;
		width: 100px;

	}

	.lifecycleServices li:nth-child(1) {
		top: 0px;
		left: 155px;
		width: 300px;
	}

	.lifecycleServices li:nth-child(2) {
		top: 110px;
		left: 73px;
	}

	.lifecycleServices li:nth-child(3) {
		top: 225px;
		left: 170px;
		width: 300px;
	}

	.lifecycleServices li:nth-child(4) {
		top: 0px;
		left: 370px;
	}

	.lifecycleServices li:nth-child(5) {
		top: 110px;
		left: 430px;
	}

	.lifecycleServices li:nth-child(6) {
		top: 225px;
		left: 360px;
	}

	.lifecycleServices li:nth-child(7) {
		top: 110px;
		left: 250px;
	}

	.lifecycleServices li .solutionHide {
		display: none;

	}

	.lifecycleServices li .solutionSmall {
		font-size: 9px;
	}

}

.lifecycle h1 {
	color: #8fa533;
}


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

	.lifecycle {
		display: none;
	}

}

/*--Capabilities--*/

.capabilities {
	float: left;
	width: 100%;
	text-align: center;
}

.capabilities .capabilitiesContent {
	margin: auto;
	width: 900px;
}

.capabilities .capabilitiesInnerWrap {
	float: left;
	width: 900px;
}

.capabilities h1 {
	color: #8fa533;
}

.capabilities h2 {
	padding-bottom: 5px;
}

.capabilities span {
	color: #333333;
}

.capabilities .capLines {
	float: left;
	width: 100%;
}

.capabilities .capLine {
	float: left;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
	height: 50px;
	display: none;

}

.capabilities .capLine1 {
	display: block;
}

.capabilities .capImages {
	float: left;
	width: 100%;
	height: 50px;
}

.capabilities img {
	margin-left: 7px;
	margin-right: 7px;
	display: none;
}

.capabilities .capLine1 img {
	display: inline;
}

.capabilities .capList {
	float: left;
	padding-top: 30px;
	padding-left: 5%;
	width: 90%;
	font-size: 10px;
	color: #999999;
	line-height: 1.4;
	font-family: 'latoregular';
	text-align: justify;
	-moz-text-align-last: center;
	text-align-last: center;
}


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

	.capabilities .capabilitiesContent {
		width: 100%;
	}

	.capabilities .capabilitiesInnerWrap {
		width: 100%;
	}

	.capabilities .capImages img.mobHide {
		display: none !important;
	}


}

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

	.capabilities .capLine {
		padding-top: 0;
		padding-bottom: 0;
		height: auto;
	}

	.capabilities .capImages {
		height: auto;
	}

	.capabilities img {
		margin-left: 0;
		margin-right: 0;
		width: 13%;
	}

	.capabilities .capList {

		padding-top: 20px;
		font-size: 11px;

	}

}

/*--Teams--*/

.teams {
	float: left;
	width: 100%;
	background: #333333;
	color: #ffffff;
}

.teams .teamsContent {
	margin: auto;
	width: 660px;
	color: #999999;
}

.teams .teamsInnerWrap {
	float: left;
}

.teams h1 {
	color: #666666;
}

.teams h1 .teamsBr {
	display: none;
}

.teams h2 {
	font-family: 'latolight';
	padding-bottom: 30px;
}


.teams span {
	color: #8fa533;
}

.teams .teamsTeam {
	float: left;
	margin-left: 7px;
	margin-right: 7px;
	font-family: 'latolight';
}

.teams .teamsText {
	float: left;
	margin-top: 20px;
	width: 100%;
	font-size: 14px;
	color: #cccccc;
	line-height: 1.4;
}

.teams .teamsText span,
.teams h2 span {
	display: none;
}

.teams .teamsText a {
	float: left;
	margin-top: 10px;
	margin-left: 270px;
	margin-right: 250px;
	margin-bottom: 5px;
	background-color: #b4d433;
	font-size: 16px;
	color: #000000;
	padding: 2px;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
	border-radius: 2px;
}

@media only screen and (min-width: 700px) {

	.teams .teamsText a:hover {
		background-color: #ffffff;
	}

}

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

	.teams h2 {
		padding-bottom: 10px;
	}

	.teams .teamsContent {
		width: 100%;
	}

	.teams .teamsTeam {
		float: left;
		margin: 1%;
		width: 22%;
	}

	.teams .teamsTeam img {
		width: 100%;
	}

	.teams .teamsText a {
		width: 70%;
		font-family: 'latoregular';
		font-size: 23px;
		margin: 0;
		margin-left: 15%;
		margin-top: 15px;
		padding-left: 0;
		padding-right: 0;
	}


}

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

	.teams h2 {
		padding-bottom: 0px;
	}

	.teams h1 .teamsBr {
		display: inline;
	}


	.teams .teamsTeam {
		float: left;
		margin: 5%;
		width: 40%;
	}

	.teams .teamsText {
		font-size: 16px;
		width: 90%;
		padding-left: 5%;
	}

	.teams .teamsText span,
	.teams h2 span {
		display: inline;
	}

	.teams .teamsText a {
		width: 94%;
		margin-left: 3%;

	}


}

/*--Clients--*/

.clients {
	float: left;
	width: 100%;
	background-color: #b4d433;
}

.clients .clientsContent {
	margin: auto;
	width: 1060px;
	color: #666666;
}

.clients .clientsInnerWrap {
	float: left;
	width: 100%;
}

.clients h1 {
	color: #778c1f;
}

.clients h1 .clientsBr {
	display: none;
}


.clients span {
	color: #333333;
}

.clients img {
	width: 49%;

}


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

	.clients .clientsContent {
		width: 100%;
	}


}

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

	.clients h1 {
		padding-bottom: 20px;
	}

}

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

	.clients h1 .clientsBr {
		display: inline;
	}

	.clients img {
		width: 100%;
	}


}

/*--Social--*/

.social {
	float: left;
	width: 100%;
	cursor: pointer;
}

.social .socialContent {
	margin: auto;
	width: 1060px;
	color: #666666;
}

.social .socialContent img {
	display: block;
}

.social .socialInnerWrap {
	float: left;
	width: 100%;
}

.social .socialMain {
	float: left;
	width: 100%;
	padding-bottom: 10px;
}

.social h1 {
	padding-top: 20px;
	color: #8fa533;
}

.social h1 .socialBr {
	display: none;
}

.social h1 span {
	color: #333333;
}


.social .socialRow {
	float: left;
	width: 100%;
}

.social .socialColumn {
	float: left;
	width: 32%;
	margin: 0.5%;
}

.social .socialColumn img {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.socialRow {
	display: block;
}

.socialRowMob {
	display: none;
}


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


	.social .socialContent {
		width: 92%;
		padding-left: 1%;

	}

	.social .socialDetails {
		width: 95%;
		margin: 0;
		padding-left: 1%;

	}

	.social .socialBespoke span {
		display: none;
	}

}

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

	.socialRow {
		display: none;
	}

	.socialRowMob {
		display: block;
	}

	.social .socialColumn {
		float: left;
		width: 48%;
		margin: 0.5%;
	}


}

/*--Contact--*/

.contact {
	float: left;
	width: 100%;
	background: #333333;
	font-family: 'thin';
	color: #cccccc;
	font-size: 20px;
	text-align: left;
}

.contact .contactContent {
	margin: auto;
	width: 1060px;
}

.contact .contactInnerWrap {
	float: left;
	width: 100%;
}

.contact .contactColumn {
	float: left;
	padding-top: 20px;
	width: 50%;
}

.contact a {
	color: #cccccc;
	text-decoration: none;
}

.contact span {
	color: #8fa533;
}

.contact input,
.contact textarea {
	float: left;
	width: 96%;
	padding: 2%;
	border: 1px solid #333333;
	color: #000000;
	caret-color: #000000;
	margin-bottom: 10px;
	background-color: #999999;
	font-size: 18px;
	font-family: 'latoregular';
}

.contact input:focus,
.contact textarea:focus {
	background-color: #ffffff;
	outline: none;
}


.contact textarea {
	height: 100px;
}


.contact button {
	float: left;
	border-style: none;
	color: #ffffff;
	background-color: #758435;
	text-decoration: none;
	padding: 2%;
	font-size: 25px;
	font-family: 'thin';
	outline: none;
}

.contact .contactCopyright {
	float: left;
	padding-top: 100px;
	width: 100%;
}

.contact .contactError {

	float: left;
	padding-top: 10px;
	width: 100%;
	height: 30px;
	color: red;
	font-size: 20px;

}

.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2000px;
	background-image: url(../img/loading.gif);
	background-position: center 300px;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-color: #333333;
	z-index: 10;
}

@media only screen and (min-width: 800px) {

	.contact button:hover {
		background-color: #b4d433;
	}

}

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

	.contact {
		font-size: 15px;
	}

	.contact .contactContent {
		float: left;
		padding-left: 5%;
		padding-right: 5%;
		width: 90%;
	}

	.contact .contactColumn {
		float: left;
		width: 100%;
	}

}

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

	.contact {
		font-family: 'latolight';
		background: #b4d433;
		color: #333333;
		line-height: 1.2;
	}

	.contact a,
	.contact h2 {
		font-family: 'latolight';
		color: #000000;
	}

	.contact span {
		color: #778c1f;
	}

	.contact input,
	.contact textarea {
		border: 1px solid #b4d433;
		background: #d9e5a9;
	}

	.contact button {
		background: #414d12;
		color: #cccccc;
	}


}

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

	.loading {
		background-position: center 230px;
	}

}