@charset "utf-8";
/* CSS 	MCLAREN*/
@font-face {
	font-family: 'ProximaNova';

src: url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-Regular/ProximaNova-Regular.eot');	
	src: url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-Regular/ProximaNova-Regular.ttf') format('truetype'),url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-Regular/ProximaNova-Regular.woff') format('woff'),url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-Regular/ProximaNova-Regular.otf') format('opentype'),		local('ProximaNova-Regular');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'ProximaNova';

src: url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-Bold/ProximaNova-Bold.eot');	
	src: url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-Bold/ProximaNova-Bold.ttf') format('truetype'),url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-Bold/ProximaNova-Bold.woff') format('woff'),url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-Bold/ProximaNova-Bold.otf') format('opentype'),		local('ProximaNova-Bold');
	font-weight: 700;
	font-style: normal;
}


/*html.authed { padding-top: 100px;}*/
html, body { padding: 0; margin: 0; font-family: 'ProximaNova', sans-serif; font-size: 14px; font-weight: 400; line-height: 19px; color: #666; background-image:url('../images/header-bkgrd.jpg'); background-repeat: repeat-x;}

html, body, form { height: 100%;}

.outer { height: auto; min-height: 100%; }

html.iframe, html.iframe body { background-image: none; }

h1 {color: #006AB6;text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 30px; line-height:32px; }
h2 {color: #006AB6; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 20px; line-height: 20px; padding:  0 15px;}
p { text-align: justify;}
a {color: #006AB6; text-decoration: none;}
a:hover { text-decoration: underline;}

a img { border: none;}
ul { padding-left: 15px; margin: 0;}
li { padding: 0; margin: 0; }

.image-viewer img {max-width: 100%;}

#outer { max-width: 1000px; margin: auto;}
#header { max-width: 960px; padding: 0 20px; position: relative; height: 155px;}

#logo { width: 208px; position: absolute; left: 0; top: 0; z-index: 50;}
#menu { max-width: 752px; position: absolute; right: 0; top: 100px;height: 40px; margin-right: 10px; }
#header-links { width: 70px; height: 30px; position: absolute; right: 20px; top: 40px; }

ul#social { height: 30px; margin: 0; padding: 0; }
ul#social li { float: left; list-style: none; margin:0; height: 30px;}
ul#social li a { display: block; text-decoration: none; background-image: url('../images/icons-social-new.png'); height: 30px;}
ul#social li a span { display: none;}

ul#social li#linked-in a { width: 38px; height: 30px; background-position: 0 0; }
ul#social li#fb a { width: 32px; height: 30px; background-position: -38px 0; }
ul#social li#linked-in a:hover, ul#social li#fb a:hover  { opacity: 0.6;}

.content-viewer ul { margin: 0 0 10px; }


#menu ul#main { height: 40px; margin: 0; padding: 0; }
#menu ul#main li { float: left; list-style: none; position:relative;padding: 0 10px; margin:0; height: 40px;}
#menu ul#main li a { display: block; text-transform: uppercase; color: #fff; text-decoration: none; padding: 4px 8px;}

#menu ul#main li a:hover, ul#main li.sel a { color: #006AB6; background-color: #fff;}

#menu ul#main.menu ul.childmenu { display: block; z-index: 11; }
#menu ul#main.menu li ul.childmenu {display: none;  margin: 0; padding: 20px 0 10px 0; list-style: none; }
#menu ul#main.menu li:hover ul.childmenu {display: block; position: absolute; left: 10px; top: 35px; background-color: #fff;}
#menu ul#main.menu li ul.childmenu li { height: auto; width: auto;  float: none; position: static; padding: 0 10px; }
#menu ul#main.menu li ul.childmenu li a{ display: block; background-image: none; height: auto; text-decoration: none; padding: 4px 0; width: 190px !important; border: none;}
#menu ul#main.menu li ul.childmenu li a:hover { color: #006AB6;}
#menu ul#main.menu li ul.childmenu li a span {display: block; line-height: 26px; color: #333; text-transform: uppercase; text-decoration: none;}
#menu ul#main.menu li ul.childmenu li a:hover span, ul#main.menu li ul.childmenu li.sel a span { color: #006AB6;}

#home-banner { max-width: 1000px; background-image: url('../images/home-banner-shadow.png'); background-repeat: no-repeat; }

#home-left { width: max-960px; margin-left: 20px;}

#content { max-width: 960px; margin: 100px auto 0 auto; }

#current-vacancies { width: 300px; float: right; background-color: #006AB6; position: relative; margin-right: 20px;}
#title { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 17px; text-align: center; width: 220px; height: 30px; position: absolute; left: 0; top: 12px;line-height: 30px; margin-left: 40px;color: #fff; background-color: #006AB6;}
#current-vacancies .inner { width: 230px; margin: 25px 15px 15px 15px; padding: 18px 18px 0 18px; border: solid 2px #fff; color: #fff; }

.vacancies-home { width: 230px;}
.vacancies-home .item { border-bottom: dotted 1px #fff; padding-bottom: 5px; margin: 10px 0;}
.vacancies-home .item a.title { color: #fff; display: block;}
.vacancies-home .item a:hover.title { text-decoration: none; color: #333;} 
.vacancies-home .item:last-child { border-bottom: none; text-transform: uppercase; padding-bottom: 0; }

.vacancies { max-width: 960px; margin: 30px 0;}
.vacancies .item { border-top: solid 1px #ccc; margin: 20px 0; padding-top: 20px;}
.vacancies .item .image { max-width: 150px; margin-left: 30px;}
.vacancies .item .image img { width: 100%; border :none;}
.vacancies .item .image a.apply-button { width: 150px; height: 35px; line-height: 35px; text-transform: uppercase; color: #fff; text-decoration: none; letter-spacing: 1px; font-weight: bold; background-color: #006AB6; text-align: center; display: block; font-size: 22px; margin-bottom: 20px;}
.vacancies .item .image a.apply-button:hover { text-decoration: none; color: #fff; background-color: #333;}
.vacancies .item .info { }
.vacancies .item .info .title { color: #006AB6; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 20px; line-height: 20px;}
.vacancies .item .info .organisation { color: #666; text-transform: uppercase; font-weight: 400; letter-spacing: 1px; font-size: 17px; line-height: 20px; padding-top: 8px;}
.vacancies .item .info .description { margin-top: 20px;}


footer {background-color: #006AB6; width: 100%; color: #fff; position: relative; z-index: 10; margin-top: -100px;}
footer .container { max-width: 960px; margin: auto; padding-top: 20px; height: 100px;}
footer a { color: #fff;}
footer .col-md-3:first-child { border-right: 2px solid #fff;}
footer #social {float: right; margin-bottom: 20px;}

#footer-extend { background-color: #006AB6; height: 90px; margin-top: 40px;}
#footer { max-width: 960px; padding: 0 20px; background-image: url('../images/footer-logo.jpg'); background-repeat: no-repeat; background-position: right top; margin: auto; min-height: 90px; position: relative;}

#footer-left { float: left; }
#footer-links {position: absolute; right: 120px; top: 25px; width: 70px;}

#list-team { max-width: 960px; }
#list-team .item { border-top: solid 1px #006AB6; margin-bottom: 20px; padding:  0 20px;}
#list-team .item .left { max-width: 150px; min-height: 240px; float: left; padding-top: 20px;}
#list-team .item .left .image { width: 150px; height: 200px; margin-bottom: 20px;}
#list-team .item .left .team-linked a { display: block;width: 150px; height: 35px; background-image:url('../images/linked-in-large.png'); background-repeat: no-repeat; padding-bottom: 20px;}
#list-team .item .left .team-linked a:hover { opacity: 0.7;}
#list-team .item .details { max-width: 785px; padding-left: 175px;}
#list-team .item .details .name { color: #006AB6; font-weight: 700; letter-spacing: 1px; font-size: 20px; padding-top: 20px;}
#list-team .item .details .info { text-align: justify;}
#list-team .item .clear { clear: left;} 

.item-no-linkedin { border-top: solid 1px #006AB6; margin-bottom: 20px;  max-width: 960px;}
.item-no-linkedin .left { width: 150px; height: 200px; float: left;  padding-top: 20px;}
.item-no-linkedin .left .image { width: 150px; height: 200px; margin-bottom: 20px;}
.item-no-linkedin .details { max-width: 785px; padding-left: 175px;}
.item-no-linkedin .details .name { color: #006AB6; font-weight: 700; letter-spacing: 1px; font-size: 20px; padding-top: 20px;}
.item-no-linkedin. details .info { text-align: justify;}
.item-no-linkedin .clear { clear: left;} 

.testimonials { max-width: 960px; padding: 10px;}
.testimonials .item { border-top: solid 1px #006AB6; margin-bottom: 20px; padding-top: 20px;} 
.testimonials .item .quote { padding-bottom: 20px; text-align: justify;}
.testimonials .item .name { color: #006AB6; text-transform: uppercase; font-weight: 700;}
.testimonials .item .link { color: #006AB6;}
.testimonials .item .link a {}

.recruitment { max-width: 960px; }
.recruitment .item { float: left; padding: 20px 20px;  background-repeat: no-repeat; background-position: 295px 110px; }
.recruitment .item.last { padding-right: 0; }
.recruitment .item .number { color: #006AB6; width: 280px; font-weight: 700;}
.recruitment .item .title {color: #000; width: 280px; font-weight: 700; text-transform: uppercase;}
.recruitment .item .info { height: 300px; overflow: hidden; line-height: 20px; }
.recruitment .item .info p { margin: 0; }
.recruitment .item .expand { float: right; cursor: pointer; display: block; padding-right: 18px; background-image: url('../images/arrow-blue-down.png'); background-repeat: no-repeat; background-position: right center; text-transform: uppercase; }
.recruitment .item .expand:hover { text-decoration: none; }
.recruitment .item .collapse { float: right; cursor: pointer; display: block; padding-right: 18px; background-image: url('../images/arrow-blue-up.png'); background-repeat: no-repeat; background-position: right center; text-transform: uppercase; }
.recruitment .item .collapse:hover { text-decoration: none; }
.recruitment .seperator { background-image: url('../images/border-arrow.png'); background-repeat: no-repeat; background-position: center 20px; height: 50px; clear: left; }


.job-list { margin-top: 30px; }
.job-list .job { padding-bottom: 20px; border-bottom: solid 1px #f0f0f0; margin-bottom: 20px; }
.job-list .job .title { color: #006AB6; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 20px; line-height: 20px; }
.job-list .job .type { color: #666; text-transform: none; font-weight: 400; letter-spacing: 1px; font-size: 14px; line-height: 20px; padding-top: 4px; }
.job-list .job .summary { margin-top: 8px; }
.job-list .job .read-more { margin-top: 8px; }

.job-details { margin-top: 30px; }
.job-details .back-link { margin-bottom: 15px; float: right; }
.job-details .title { color: #006AB6; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 20px; line-height: 20px; }
.job-details .type { color: #666; text-transform: none; font-weight: 400; letter-spacing: 1px; font-size: 14px; line-height: 20px; padding-top: 4px; padding-bottom: 24px; }
.job-details ul.bullets { margin: 15px 0; }
.job-details .description { margin-top: 8px; }
.job-details .description ul { margin-bottom: 16px; }
.job-details .file { margin-top: 8px; }
.job-details .apply { margin-top: 15px; }
.job-details .apply a { display: inline-block; width: 150px; height: 35px; line-height: 35px; text-transform: uppercase; color: #fff; text-decoration: none; letter-spacing: 1px; font-weight: bold; background-color: #006AB6; text-align: center; font-size: 22px; margin-bottom: 20px;}
.job-details .apply a:hover { text-decoration: none; color: #fff; background-color: #333;}
.job-details .share-this-links { height: 37px; }

html.iframe .job-list { margin-top: 0; }
html.iframe .job-details { margin-top: 0; }

/*COLUMN LAYOUT*/
.layout-columns { max-width: 960px;}


/* 960 wide */

.col_1 { max-width: 960px; border-top: solid 1px #ccc; padding-top: 20px; }
.layout-columns.blank .col_1 { width: 960px; border: none; padding-top: 20px; }

.col_1_2 { border-top: solid 1px #ccc; padding-top: 20px;}
.col_1_2.alpha { padding-right: 20px; }
.col_1_2.omega { padding-left: 20px;}


.layout-columns.blank .col_1_2 { max-width: 960px; border: none; padding-top: 20px;}
.layout-columns.blank .col_1_2.alpha { padding-right: 20px; }
.layout-columns.blank .col_1_2.omega { padding-left: 20px;}


.col_1_3 { width: 245px; }
.col_1_3.alpha { width: 255px; }
.col_1_3.omega { width: 255px; }

.col_2_3 { width: 511px; }
.col_2_3.alpha { width: 521px; }
.col_2_3.omega { width: 521px; }

.col_1_4 { width: 179px; }
.col_1_4.alpha { width: 189px; }
.col_1_4.omega { width: 189px; }


.col_3_4 { width: 577px; }
.col_3_4.alpha { width: 587px; }
.col_3_4.omega { width: 587px; }

.col_1_5 { width: 172px; }
.col_2_5 { width: 364px; }
.col_3_5 { width: 556px; }
.col_4_5 { width: 748px; }

/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }

.row:after,
.clearfix:after {
  clear: both; }

.row,
.clearfix {
  zoom: 1; }

/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
  
  #home-slider 
{	max-width: 1000px; 
	z-index: 2;
	padding: 0;
	margin: 0;
}
	
#home-slider .item 
{ 	
}

#home-slider .item img {
	width: 100%;
	}

#home-slider .item img 
{ 	z-index: 1;
}

.contact-form { width: 100%;}
.contact-form .field { width: 100%; margin-bottom: 14px; clear: left;}
.contact-form .field .title { width: 120px; float: left; line-height: 20px; padding: 3px 0;}
.contact-form .field .input { padding-left: 120px;}
.contact-form .field .input input { width: 100%; background-color: #ececec; border: none; padding: 3px; height: 20px;}
.contact-form .field .input textarea { width: 100%; background-color: #ececec; border: none; padding: 3px;}
.contact-form .field .input select {width: 100%; box-sizing: border-box; }
	
.contact-form .field.field_932 .title { float: none; }
.contact-form .field.field_937 { height: 40px; line-height: 16px;}
.contact-form .field.field_937 .title { height: 40px; line-height: 16px;}
.contact-form .field.field_1035 .title {line-height: 18px; }
.contact-form .field.field_1036 {margin-top: 25px;}
.contact-form .field.field_1049 { height: 40px;}
.contact-form .field.field_1049 .title { line-height: 20px;}
.contact-form .submit { width: 100%; }
.contact-form .submit input { background-color: #999; color: #fff; width: auto; padding: 5px 20px; border: none; text-transform: uppercase; float:right; margin-right: 30px; cursor: pointer; letter-spacing: 1px; font-size: 15px; margin-bottom: 20px;}
.contact-form .submit input:hover { background-color: #006AB6; }
.contact-form .clear { clear: left; margin-bottom: 10px;}
.contact-form .field.field_radiobuttonlist .title { padding: 0; margin: 0; float: none;}
.contact-form .field.field_radiobuttonlist .input { padding: 0 0 10px 0; margin: 0; height: 30px;}
.contact-form .field.field_radiobuttonlist .input ul { padding: 0; margin: 0; height: 30px; }
.contact-form .field.field_radiobuttonlist .input ul li { list-style: none; padding: 10px 10px 0 0; height: 30px;margin: 0; float: left;}
.contact-form .field.field_radiobuttonlist .input ul li input { width: 25px; height: 15px; padding-top: 8px; margin: 0;}
.contact-form .field.field_radiobuttonlist .input ul li label { line-height: 20px;}

/*MOBILE MENU MOBILE MENU MOBILE MENU!!*/
#header-outer-mobile { background-color: #000;}
#header-outer-mobile #header { height: 150px;}
#header-outer-mobile #logo { height: 150px; padding: 50px 0 0 0;}
#header-outer-mobile #logo table { margin-left: auto; margin-right: auto;}
#header-outer-mobile #logo a span { display: none;}

#header-outer-mobile #menu-container .container { padding: 0;}
#header-outer-mobile #menu-container ul.menu { float: none; padding: 20px 40px; background-color: #428bca;}
#header-outer-mobile #menu-container ul.menu { padding: 0; margin: 0; list-style: none;}
#header-outer-mobile #menu-container ul.menu li { line-height: 20px; list-style: none; position: static; float: none; padding: 10px; border-bottom: 1px solid #fff; text-transform: uppercase;}
#header-outer-mobile ul#main li a:hover, ul#main li.sel a { background-color: inherit;}
#header-outer-mobile #menu-container ul.menu li a { color: #fff; font-size: 15px; }
#header-outer-mobile #menu-container ul.menu ul li a:hover,
#header-outer-mobile #menu-container ul.menu ul li.sel a { text-decoration: none; color: #9e0a15; }
#header-outer-mobile #menu-container ul.menu li ul { padding: 0; margin: 0;}
#header-outer-mobile #menu-container ul.menu li ul li {border: 0px; padding: 10px 20px; margin: 0; text-transform: capitalize;}

#header-outer-mobile #menu-container { position: fixed; left:0; top: -488px; right: 0; z-index: 2000; background-color: #006AB6;}
#header-outer-mobile #menu-expander { height: 50px; cursor: pointer; display: block; margin: auto; background-color: #006AB6; padding: 0; border: solid 1px #fff; border-left: 0;  border-right: 0;}
#header-outer-mobile #menu-expander span { text-align: center !important; color: #fff; text-transform: uppercase; line-height: 50px; display: block;}




@media screen and (min-width: 1000px) {
	#header-outer-mobile { display: none;}
	footer #social { padding-right: 70px;}
	.recruitment .item .info { height: 300px;}
	}

@media screen and (max-width: 1000px) {
	footer .col-md-3:first-child { border-right: 0px solid #fff;}
	.content-viewer {padding: 0 20px;}
	#menu {display: none;}
	#outer { margin-top: 40px;}
	.vacancies .item .image { float: left;}
	#logo { width: 170px;}
	#logo img{ width: 100%;}
	.image-viewer { max-width: 300px; margin: auto; padding-right: 20px;}
	.image-viewer img {width: 100%;}
	#list-team .item .details { padding-left: 0; float: left; margin-top: 30px;}
	.item-no-linkedin .details { padding-left: 0; float: left; margin-top: 30px; padding: 0 20px;}
	.recruitment .item .info { height: auto;}
	
	}