/*
BASE TYPOGRAPHY
*/

body {
	color: #898989;
	font-family: Arial;
	font-size: 14px;
	line-height: 18px;
}

.clearfix {
	clear: both;
}

h1, h1 a, h2, h3, header p, header dl, footer {
	font-family: 'Open Sans';
}

h1, h1 a, h2, h3, header p, header dl {
	color: #000;
}

h1, h1 a, h2, aside h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 18px 0;
	text-transform: uppercase;
}

h1, h2, aside h3 {
	border-bottom: 1px solid #e1e1e1;
}

h2 {
	margin-top: 30px;
}

h3 {
	font-size: 1em;
}

p, ol, ul {
	margin: 9px 0;
}

em {
	font-style: italic;
}

ol, ul {
	padding: 0;
}

.main article ul,
.main aside ul {
	list-style: disc;
}

.main article ol,
.main aside ol {
	list-style: decimal;
}

.main article ul li,
.main aside ul li {
	margin-left: 27px;
}

.main article ol li,
.main aside ol li {
	margin: 9px 0 9px 27px;
}

a {
	color: #898989;
	font-size: 14px;
	text-decoration: none;
}

a.pdf {
	background: url('../img/template/pdf.jpg') no-repeat left top;
	padding-left: 21px;
}

p a {
	color: #00aeef;
}

.button, 
button {
	border: none;
	background-color: #00aeef;
	color: white;
	font-family: 'Open Sans';
	font-weight: 600;
	padding: 6px 10px;
	text-transform: uppercase;
}

header p {
	font-weight: 600;
	margin: 6px 0;
}

.project header h2 {
	border: none;
	font-size: 14px;
	margin: 24px 0 9px 0;
	text-transform: none;
}

.project section h2,
.about-us section h2 {
	border: none;
	font-family: Arial;
	font-size: 14px;
	text-transform: none;
}

.project section h2 {
	margin: 27px 0 9px 0;
}

.about-us section h2 {
	margin-bottom: 9px;
}

.customer-quote p {
	color: #000;
}

/* ENDS */

div.wrapper > header {
	border-top: 8px solid #000;
	text-align: left;
}

header a.logo {
	background: url('../img/vicinity-gis.png') no-repeat left top;
	display: inline-block;
	height: 76px;
	margin: 20px 0 20px 5px;
	width: 210px;
}

@media only screen and (-moz-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 3/2), 
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min-devicepixel-ratio: 1.5), 
only screen and (min-resolution: 1.5dppx) {
	header a.logo {
		background-image: url('../img/vicinity-gis-2x.png');
		background-size: 210px 76px;
	}
}

nav ul, ul.menu li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav ul li a {
	border-bottom: 1px solid #e1e1e1;
	color: #969696;
	display: block;
	font-family: 'Open Sans';
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity 1s;
}

nav ul li a:hover {
	opacity: 0.4;
}

nav ul li a.selected {
	color: #000;
}

nav ul li a div {
	display: inline-block;
	height: 42px;
	line-height: 42px;
}

nav ul li a.selected div {
	border-bottom: 4px solid #e1e1e1;
	height: 38px;
	line-height: 40px;
}

div.banner {
	border-bottom: 1px solid #e1e1e1;
}

div.banner img {
	max-width: 100%;
}

div.main {
	padding: 30px 20px 0 20px;
}

footer {
	padding: 30px 20px;
}

article, aside {
	overflow: hidden; /* need better solution here - for clearing floated tiles on home page */
	padding-bottom: 30px;
}

aside div.tile {
	float: left;
	padding: 0 20px 20px 0;
}

aside div.tile img {
	display: block;
}

aside div.tile a.text:after {
	content: " >";
}

article header {
	margin-bottom: 18px;
}

#mc_embed_signup {
	margin-top: 20px;
}

#mc_embed_signup label {
	display: block;
}

#mc_embed_signup div:first-child {
	margin-top: 15px;
}

#mc_embed_signup div {
	margin-top: 10px;
}

#mc_embed_signup input[type=email],
#mc_embed_signup input[type=text] {
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
	width: 100%;
}

.asterisk {
	color: #ed1c24;
}

.client-logos {
	box-sizing: border-box;
	overflow: hidden;
	padding: 30px 0;
	width: 100%;
}

.client-logos .label {
	border-bottom: 1px solid #e1e1e1;
	color: #000;
	font-family: 'Open Sans';
	font-size: 16px;
    font-weight: 700;
    margin: 0 0 27px 0;
    text-transform: uppercase;
}

.client-logos div a {
	display: block;
	height: 41px;
	margin: 0 auto;

	filter: gray;
 	filter: grayscale(1);
 	-webkit-filter: grayscale(1);
 	transition-property: filter;
	transition-property: -webkit-filter;
	transition-duration: 1s;

	opacity: 0.45;
	transition-property: opacity;
	transition-duration: 1s;
}

.client-logos div a:hover {
 	filter: none;
 	-webkit-filter: grayscale(0);
	opacity: 1;
}

.client-logos div a.linz {
	background: url(../img/clients/linz-on.jpg) no-repeat left top;
	width: 117px;
}

.client-logos div a.mnz {
	background: url(../img/clients/mnz-on.jpg) no-repeat left top;
	width: 134px;
}

.client-logos div a.sdc {
	background: url(../img/clients/sdc-on.jpg) no-repeat left top;
	width: 90px;
}

.client-logos div a.st-john {
	background: url(../img/clients/st-john-on.jpg) no-repeat left top;
	width: 48px;
}

.client-logos div a.tennis {
	background: url(../img/clients/tennis-on.jpg) no-repeat left top;
	width: 102px;
}

.client-logos div a.victoria {
	background: url(../img/clients/victoria-on.jpg) no-repeat left top;
	width: 63px;
}

.client-logos div a.waikato-dc {
	background: url(../img/clients/waikato-dc-on.png) no-repeat left top;
	width: 60px;
}

.client-logos div a.waimak {
	background: url(../img/clients/waimak-on.jpg) no-repeat left top;
	width: 133px;
}

.client-logos div a.waitaki {
	background: url(../img/clients/waitaki-on.jpg) no-repeat left top;
	width: 110px;
}

.client-logos div a.wel {
	background: url(../img/clients/wel-on.jpg) no-repeat left top;
	width: 58px;
}

.slick-container {
	padding: 0 25px;
}

.slick-prev:before, .slick-next:before {
	color: #00aeef;
}

dl {
	margin: 9px 0;
	overflow: hidden;
}

dt, dd {
	margin: 0;
}

dt {
	float: left;
	margin-right: 5px;
}

dl.person dt.name {
	margin: 0;
	width: 55px;
}

.main ul.menu {
	border-top: 1px solid #e1e1e1;
	list-style: none;
}

.main ul.menu li {
	border-bottom: 1px solid #e1e1e1;
	margin: 0;
}

.main ul.menu li a {
	color: #969696;
	display: block;
	font-family: 'Open Sans';
	font-size: 14px;
	font-weight: 600;
	margin: 5px 0;
	transition: opacity 1s;
}

.main ul.menu li a:hover {
	opacity: 0.4;
}

.main ul.menu li a.selected {
	background: url(../img/template/arrow-down.jpg) no-repeat right center;
	color: #000;
}

.customer-quote {
	border: 1px solid #e1e1e1;
	margin: 27px 0;
	overflow: hidden;
	padding: 9px 18px 18px 18px;
}

.project .customer-quote .logo {
	float: right;
}

.project.st-john .customer-quote .logo {
	background: url(../img/projects/st-john/st-john.jpg) no-repeat top left;
	height: 70px;
	width: 86px;
}

.project.waimak .customer-quote .logo {
	background: url(../img/projects/waimakariri/waimakariri-district-council.jpg) no-repeat top left;
	height: 50px;
	width: 199px;
}

.project.tennis .customer-quote .logo {
	background: url(../img/projects/tennis-canterbury/tennis-canterbury.jpg) no-repeat top left;
	height: 60px;
	width: 162px;
}

.project.waikato .customer-quote .logo {
	background: url(../img/projects/waikato/waikato-regional-council.jpg) no-repeat top left;
	height: 70px;
	width: 100px;
}

div.ri, 
img.ri {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

div.ri.full,
img.ri.full {
	width: 100%;
}

div.ri,
img.ri {
	border: 1px solid #e1e1e1;
}

.thumb-item {
	margin-top: 27px;
	overflow: hidden;
}


.thumb-list h2 {
	border: none;
	font-size: 15px;
	margin-top: 0;
	text-transform: none;
}

.profile {
	overflow: hidden;
}

.profile img {
	float: left;
}

.profile h2,
.profile p {
	margin: 0 0 9px 170px;
}

.profile,
.contact {
	margin-top: 27px;
}

.contact a {
	color: #00aeef;
}

.contact div {
	margin-bottom: 7px;
}

.contacts {
	border-top: 1px solid #e1e1e1;
	margin-top: 45px;
}

/*.contact-map {
  height: 0;
  padding-bottom: 60%;
  position: relative;
  overflow: hidden;
}

.contact-map iframe {
	width: 100%;
	height: 100%; /* had to specify height/width */
	/*position: absolute;
	top: 0; right: 0;
	left: 0; bottom: 0;   
}*/

#submit-success,
#fatal-error {
	display: none;
}

form {
}

form .field {
	display: block;
	margin-bottom: 15px;
}

input[type=text],
input[type=email],
textarea {
	border: 1px solid #898989;
	box-sizing: border-box;
	display: block;
	width: 100%;
}

.error input[type=text],
.error input[type=email],
.error textarea {
	border-color: #cc0000;
}

.error .validation-message {
	color: #cc0000;
	font-size: 11px;
}

footer {
	background-color: #999;
}

footer a {
	color: #fff;
}

.no-border {
	border: none !important;
}

.pagination {
	border-top: 1px solid #e1e1e1;
	margin: 18px 0;
	padding-top: 10px;
}

.pagination a {
	color: #000;
	font-family: 'Open Sans';
	font-weight: 600;
	padding: 3px 10px 3px 0; 
	text-transform: uppercase;
}

.pagination a + a {
	border-left: 1px solid #b2b2b2;
	padding-left: 10px;
}

.news article {
	padding-bottom: 60px;
}

.news section h1,
.news section h2 {
	border: none;
    font-size: 15px;
    margin-top: 0;
    text-transform: none;
}

.news section h2 {
    font-weight: 600;
    margin: 18px 0;
}

.news section h3 {
    font-weight: normal;
    margin: 18px 0;
}

.news section h4,
.news section h5,
.news section h6 {
	color: #000;
	font-size: 14px;
	margin: 18px 0;
}

.news section h4 {
	font-weight: bold;
}

.news section h5 {
	font-weight: normal;
}

.news section h6 {
	color: #898989;
	font-weight: bold;
}

.blog-list .blog-summary {
	margin-bottom: 18px;
}

.blog-list .blog-summary .title a {
	color: #000;
	font-family: 'Open Sans';
	font-weight: 600;
	transition: opacity 1s;
}

.blog-list .blog-summary .title a:hover {
	opacity: 0.4;
}

.blog-list .blog-summary .date {
	font-size: 10px;
}

.blog-list .blog-summary.detail .title a {
	color: #898989;
}

.blog-list .blog-summary.detail .title a.selected {
	color: #000;
}

#sharing {
	top: 25px !important;
	right: 5px !important;
	z-index: 10000;
}

.banner .heading {
	font-size: 23px;
	line-height: 24px;
	margin-bottom: 15px;
	text-transform: uppercase;
}

.banner .content {
	line-height: 17px;
	margin-bottom: 20px;
}

.banner .action,
.banner .action a {
	font-size: 13px;
}

.banner .subtext {
	font-size: 13px;
	line-height: 15px;
	margin-top: 6px;
}

.banner.business {
	background-image: url(../img/cta-banners/green.jpg);
}

.banner.business .inset {
	padding: 15px;
}

.banner.business,
.banner.business a {
	color: #ffffff;
}

.banner.business a,
.banner.geospatial a {
	background-image: url(../img/template/chevron-white-right.png);
	background-position: top right;
	background-repeat: no-repeat;
	padding-right: 15px;
}

.banner.geospatial {
	background-image: url(../img/cta-banners/blue.jpg);
}

.banner.geospatial .inset {
	padding: 15px;
}

.banner.geospatial .heading {
	font-size: 19px;
}

.banner.geospatial,
.banner.geospatial a {
	color: #ffffff;
}

.cycle {
	position: relative;
}

.cycle img {
	position: absolute;
	z-index: 100;
}

.cycle img.active {
	z-index: 103
}

@media (min-width: 768px) {
	.banner.business .outer {
		background-image: url(../img/cta-banners/business.jpg);
		background-position: top right;
		background-repeat: no-repeat;
	}

	.banner.business .inset {
		padding: 28px 190px 28px 45px;
	}

	.banner.geospatial .outer {
		background-image: url(../img/cta-banners/geospatial.jpg);
		background-position: top right;
		background-repeat: no-repeat;
	}

	.banner.geospatial .inset {
		padding: 25px 190px 25px 45px;
	}

	.banner.geospatial .heading {
		margin-bottom: 10px;
	}

	.banner .content {
		margin-bottom: 10px;
	}

	form input[type=text],
	form input[type=email] {
		width: 50%;
	}
}

@media (min-width: 940px) {
	.banner.business .inset {
		padding: 30px 360px 30px 45px;
	}

	.banner.geospatial .inset {
		padding: 17px 420px 17px 45px;
	}
}


/*
RESPONSIVE
*/

@media (min-width: 400px) {

	div.wrapper > header {
		text-align: center;
	}

	header a.logo {
		margin: 20px 0;
	}

}

@media (min-width: 768px) {

	div.wrapper {
		border-left: 1px solid #e1e1e1;
		border-right: 1px solid #e1e1e1;
		margin: 0 auto;
	}
	
	div.wrapper > header {
		border-bottom: 1px solid #e1e1e1;
	}
	
	nav ul li, nav ul li a div {
		display: inline;
	}
	
	nav ul li a {
		border: none;
		display: inline-block;
		margin: 0 12px;
		padding: 5px 0;
	}

	nav ul li a:not(.selected) {
		margin-bottom: 6px;
	}
	
	nav ul li a.selected {
		border-bottom: 6px solid #e1e1e1;
	}
	
	nav ul li a.selected div {
		border: none;
	}
	
	nav ul li a div, nav ul li a.selected div {
		height: auto;
		line-height: 16px;
	}
	
	.two-col>article,
	.two-col>aside,
	.two-col>.primary,
	.two-col>.secondary {
		float: left;
	}
	
	.two-col.narrow>aside,
	.two-col.narrow>.secondary {
		width: 320px;
	}
	
	.two-col.wide>aside,
	.two-col.wide>.secondary {
		width: 240px;
	}
	
	ul.menu li a.selected {
		background: url(../img/template/arrow-right.jpg) no-repeat right center;
	}
	
	div.left,
	img.left {
		float: left;
	}
	
	div.right,
	img.right {
		float: right;
	}

	.one-col div.left,
	.one-col img.left,
	.one-col div.right, 
	.one-col img.right {
		width: 346px;
	}

	.one-col div.left,
	.one-col img.left {
		margin: 4px 30px 4px 0;
	}

	.one-col div.right, 
	.one-col img.right {
		margin: 4px 0 4px 30px;
	}
	
	.two-col.wide img.left {
		margin: 4px 30px 4px 0;
	}
	
	.two-col.wide img.right {
		margin: 4px 0 4px 30px;
	}
	
	.project section h2 {
		clear: both;
		margin-top: 0;
		padding-top: 27px;
	}
	
	.thumb-list .thumb-item .thumb, .thumb-list .thumb-item .detail {
		float: left;
	}
	
	.thumb-list .thumb-item .thumb {
		width: 71px;
	}
	
	.thumb-list .thumb-item .detail {
		width: 650px;
	}

	.contacts {
		overflow: hidden;
	}

	.contact {
		float: left;
		width: 50%;
	}
	
	footer {
		padding: 0;
		position: relative;
	}
	
	footer a {
		display: block;
		position: absolute;
		text-align: right;
		width: 320px;
	}

	#sharing {
		top: 40% !important;
	}
}

@media (min-width: 768px) and (max-width: 939px) {

	.wrapper {
		width: 766px;
	}
	
	.two-col.narrow>:first-child {
		margin-right: 40px;
	}
	
	.two-col.wide>:first-child {
		margin-right: 30px;
	}
	
	.two-col.narrow>article,
	.two-col.narrow>.primary {
		width: 366px;
	}
	
	.two-col.wide>article,
	.two-col.wide>.primary	{
		width: 456px;
	}
	
	.two-col.wide img.left, .two-col.wide img.right {
		width: 213px;
	}
	
	footer {
		height: 95px;
	}
	
	footer a {
		top: 40px;
		right: 20px;
	}
	
}

@media (min-width: 940px) {

	.wrapper {
		width: 938px;
	}
	
	div.wrapper > header {
		height: 114px;
		position: relative;
		text-align: left;
	}
	
	header a.logo {
		float: right;
		margin: 28px 19px 10px 0;
	}
	
	nav {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	nav ul {
		margin-left: 40px;
	}
	
	div.main {
		padding-bottom: 0;
		padding-left: 50px;
		padding-right: 50px;
	}
	
	.two-col.narrow>:first-child {
		margin-right: 90px;
	}
	
	.two-col.wide>:first-child {
		margin-right: 30px;
	}
	
	.two-col.narrow>article,
	.two-col.narrow>.primary{
		width: 428px;
	}
	
	.two-col.wide>article,
	.two-col.wide>.primary{
		width: 568px;
	}
	
	.two-col.wide img.left, .two-col.wide img.right {
		width: 269px;
	}

	.split {
		overflow: hidden;
	}

	.split .left {
		float: left; 
		margin-right: 30px;
	}

	.split .right {
		float: right;
	}

	.split .left, .split .right {
		width: 269px;
	}
	
	.profile {
		width: 480px;
	}
	
	footer {
		background: #999 url(../img/footer.png) no-repeat left top;
		height: 161px;
	}
	
	footer a {
		top: 45px;
		right: 50px;
	}

	#sharing {
		left: 5px !important;
		right: auto !important;
	}	
}