/** ----------------------------------------------------------
 *
 * Contains the main layout of the page and the individual styles.
 * Acts as the main stylesheet for theme.
 *
 *		Include your notes or table of contents below....
 *		Include color hex's or values of your grid
 *
 *		Yellow Color 	: ffb400
 *		Blue Color : 65c6cc
 *		Dark Color : 18383A
 *		
 *
 * @author Your Name <hamish@beyondandco.co.nz>
 * ------------------------------------------------------- */





/* ==============================================================
 *		Main Layout
 ================================================================ */
 
 
 

body {
    margin: 0;
    background-color: #F1F6F9;
    min-width: 1100px; 
    -webkit-text-size-adjust: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box; }
	
	.main {
	    padding: 80px 0 0 0; 
	    width: 100%;
	    min-height: 300px;
	    background-color: #F1F6F9;
	    margin-bottom: 480px;
	    overflow: hidden;
	    border-bottom: 2px solid rgba(34, 96, 100, 1); }
				
		.section { 
			display: inline-block;
			position: relative;
			float: left;
			padding: 40px 0; 
			width:100%;
			z-index: 1;
			overflow: visible;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center; }
			
			.section .inner { z-index: 1; }
			
			.inner {
			    width: 1100px;
			    position: relative;
			    margin: 0 auto;
			    padding: 0 10px;
			    box-sizing: border-box; }
				
				.content-container {
				    float: left;
				    width:100%;
				    padding: 60px 0; }
				    
				
	.v-align { display: table; width: 100%; height: 100%; }
		.v-align-inner { display: table-cell; height: 100%; width: 100%; vertical-align: middle; z-index: 1; position: relative; }	
	
	



.unit { 
	float:left;
	padding:0 10px;
	position: relative;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box; 
}

.line { width: 100%; float: left; }

.sizeFull { width:100%; }
.sizeSetWidth { width:1100px; }
.size1of1 {	float:none; }
.size1of2 {	width:50%; }
.size1of3 {	width:33.33333%; }
.size2of3 {	width:66.66666%; }
.size1of4 {	width:25%; }
.size3of4 {	width:75%; }
.size1of5 {	width:20%; }
.size2of5 {	width:40%; }
.size3of5 {	width:60%; }
.size4of5 {	width:80%; }
.size1of6 {	width:16.66666%; }
.size5of6 {	width:83.33333%; }

.over1of2 {	margin-left:50%; }
.over1of3 {	margin-left:33.33333%; }
.over2of3 {	margin-left:66.66666%; }
.over1of4 {	margin-left:25%; }
.over3of4 {	margin-left:75%; }
.over1of5 {	margin-left:20%; }
.over2of5 {	margin-left:40%; }
.over3of5 {	margin-left:60%; }
.over4of5 {	margin-left:80%; }
.over1of6 {	margin-left:16.66666%; }
.over5of6 {	margin-left:83.33333%; }
.over1of8 {	margin-left:12.5%; }
.over7of8 {	margin-left:87.5%; }





.box { padding: 0; float: left; position: relative; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; display: table; height: 180px; background-color: #fff; }
	.box .box-inner { 
		display: table-cell; vertical-align: middle; 
		width: 100%; height: 100%; padding: 20px; z-index: 1; position: relative;
		-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }



/* ==============================================================
 *		Quick Styles
 ================================================================ */


hr { border-top:1px solid rgba(0,0,0,0.1); width:100%; margin: 20px 0; float: left; }
hr.center, .center hr { margin: 20px auto; float: none; width: 60px; }
hr.thick { border-width: 3px; }
hr.left { width: 60px; float: none; margin: 40px 0; }
hr.first { margin-top: 0; }

.dark hr { border-color: rgba(255, 255, 255, 0.1); }
.dark.blue hr, .blue hr { border-color: rgba(0,0,0,0.1); }



.ovh { overflow: hidden; }
.nopadding {padding:0 !important;}
.nomargin {margin:0 !important;}
.floatR { float:right; }
.floatL { float:left; }
.margincenter { margin-left: auto;margin-right: auto; float: none; }
.center { text-align: center;}


.black10 { background-color:rgba(0,0,0,0.1); }
.black20 { background-color:rgba(0,0,0,0.2); }
.black30 { background-color:rgba(0,0,0,0.3); }
.black40 { background-color:rgba(0,0,0,0.4); }
.black50 { background-color:rgba(0,0,0,0.5); }
.black60 { background-color:rgba(0,0,0,0.6); }
.black70 { background-color:rgba(0,0,0,0.7); }
.black80 { background-color:rgba(0,0,0,0.8); }
.black90 { background-color:rgba(0,0,0,0.9); }
.black { background-color:#000; }



.dark {color: #E9F7FD;}
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p { color: #E9F7FD;}
.dark .num-word { border-color: #E9F7FD; }
.dark p.intro { color: #ffb400; }


ul.meta {list-style: none; margin-left: 0;}
ul.meta li {list-style: none; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 10px 0 5px; margin-bottom: 0;}
ul.meta li:first-child { padding-top:0;}

::selection {color:white;background:#3EBAEB;}
::-moz-selection {color:white;background:#3EBAEB;}


.content { position: relative; z-index: 1; }
.overlay { width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: 0; opacity: 0.75; filter: alpha(opacity="75"); background-color: #18383A; }


.circle, .circle-med, .circle-sml { float: left; overflow: hidden; margin-right: 20px; }
.circle { width: 280px; height: 280px; border-radius: 280px; }
.circle-med { width: 120px; height: 120px; border-radius: 120px; }
.circle-sml { width: 80px; height: 80px; border-radius: 80px; }

	.circle img, .circle-med img, .circle-sml img { float: left; width: 100%; height: 100%; }


/*=================================================* 
 *		SECTIONS
 *=================================================*/
 
 
 
.section.white { background-color: #fff; } 

 
 
.section.blue { background-color: #65c6cc; color: #18383A; }
	
	.section.blue input[type="submit"], .section.blue .button { background-color: #091718; }
	.section.blue a:hover { color: #0f292b; }
 
 
.section.darkblue { background-color: #091718; }
 
 
 
.section.charcoal { background-color: #222222; color: #E9F7FD; }
	.section.charcoal h1,
	.section.charcoal h2,
	.section.charcoal h3,
	.section.charcoal h4,
	.section.charcoal h5,
	.section.charcoal h6,
	.section.charcoal p { color: #E9F7FD;}



/* ==============================================================
 *		Header
 ================================================================ */
 


.header .primary, .header .primary li a {
	-moz-transition: all 300ms cubic-bezier(0.35, 0.000, 0.65, 0.995); 
	-o-transition: all 300ms cubic-bezier(0.35, 0.000, 0.65, 0.995); 
	transition: all 300ms cubic-bezier(0.35, 0.000, 0.65, 0.995); }
 
.header {
	background-color: #F1F6F9;
    position: absolute; left: 0; top: 500px;
    width: 100%; height: 80px;
    z-index: 1000; overflow: hidden; }
	
	.header.stuck { position: fixed; top: 0 !important; }
	.header.permstuck { position: fixed !important; top: 0 !important; }
		
	.header .inner, .header .unit { height: 100%; }


	.header .brand { display: inline-block; padding: 20px; }
		.header .brand img { width: 100px; }
	
	 
	 /*		Primary Navigation
	 =============================*/


	
	.header .primary { 
		position: relative; float: right; margin-right: 20px; height: 100%;  }
		
	.header .primary.up { bottom: 40px; }
	
		.header .primary ul { height: 100%; list-style: none; margin: 0; }
		.header .primary li {
			list-style: none;
			height: 100%; float: left;
		    position: relative;
		    border-left: 1px solid rgba(255,255,255,0.05); }
		    
		    .header .primary li:last-child { border-right: 1px solid rgba(255,255,255,0.1); }
		
			.header .primary li a {
			    color: #18383A;
			    padding: 28px 12px;
			    font-family: "National Bold", Helvetica, Arial, sans-serif;
			    text-transform: uppercase;
			    font-size: 20px;
			    display: block; }
			    
			.header .primary li a:hover { color: #E8A200; text-decoration: none; font-size:22px; }
			
			    .header .primary li a h5 { margin-bottom: 0; }
			
			.header .primary li.section a,
			.header .primary li.current a { color: #18383A; }
			
			

/* ==============================================================
 *		Footer
 ================================================================ */
 
 
.footer { background-color: #091718; color: #E9F7FD; padding: 60px 0; position: fixed; z-index: -1; width: 100%; height: 380px; bottom: 0; }

	.footer a { color: #E9F7FD; }
	.footer a:hover { color: #FFB400; }
	
	.footer h5, .footer .h5 { font-size: 1em; margin: 0; }
	
	.footer ul { list-style: none; margin: 0; }
	
		
		
	.footer-nav { width: 100%; }
		.footer-nav li { width: auto; float: left; margin-right: 20px; list-style: none; }
		.footer-nav li.social { float: right; margin-right: 0; margin-left: 40px; }
		
		

/* ==============================================================
 *		Banner
 ================================================================ */



.banner { 
	position: relative; overflow: hidden; min-height: 500px; height: 500px; z-index: 1;
	background-color: #16172e; 
	background-repeat: no-repeat; 
	background-position: 50% 0; 
	background-size: cover; 
	background-attachment: fixed;
	background-image: url(../images/bg-default.jpg); }
	
	.banner .content { position: relative; z-index: 10; }
	.banner h1 img { height: 180px; }
		
		.banner .content h1,
		.banner .content h2.thin { font-family: 'National Italic', Arial, Helvetica, sans-serif; }
		.banner .content h2 { text-shadow: 1px 1px 2px rgba(0,0,0,0.5); margin-bottom: 50px; }
		
		.banner a.button { background-color: #65c6cc; }
		.banner a.button:hover { background-color: #58abaf; }
		
		.banner a.button.alt { background-color: #ffb400; }
		.banner a.button.alt:hover { background-color: #e8a200; }
		
	.banner video { position: absolute; left: 0; z-index: -1; top: 0; opacity: 0.7; filter: alpha(opacity="70");
	    -webkit-transition: all 250ms cubic-bezier(0.35, 0.000, 0.65, 0.995); 
	    -moz-transition: all 250ms cubic-bezier(0.35, 0.000, 0.65, 0.995); 
	    -o-transition: all 250ms cubic-bezier(0.35, 0.000, 0.65, 0.995); 
	    transition: all 250ms cubic-bezier(0.35, 0.000, 0.65, 0.995); }
		.banner video.ended,
		.banner.paused video { opacity: 0.3; filter: alpha(opacity="30"); }
		
		.banner .controls { position: absolute; z-index: 10000; bottom: 40px; left: 55px; }
		
			.banner .controls a { display: none; }
			.banner .controls a.videoPause { display: block; }
			.banner.paused .controls a.videoPause { display: none; }
			.banner.paused .controls a.videoPlay { display: block; }
			
	.FeaturePage .banner .controls { display: none; }
	.FeaturePage .banner video { display: none; }

	
	
/* ==============================================================
 *		Cycle2
 ================================================================ */


.cycle-nav { box-shadow: 1px 1px 6px rgba(0,0,0,0.2); position: absolute; color: #fff; top: 50%; margin-top: -30px; height: 60px; width: 60px; z-index: 100; background-color: transparent; padding: 18px; box-sizing: border-box; }

	.cycle-nav.next, .cycle-nav#next, .cycle-nav#nextTestimonial { right: 0; }
	.cycle-nav.prev, .cycle-nav#prev, .cycle-nav#prevTestimonial { left: 0; }



/* ==============================================================
 *		Features
 ================================================================ */


	.feature .box-inner p, .feature .icon, .feature:after {
		-webkit-transition: all 250ms cubic-bezier(0.35, 0.000, 0.65, 0.995); 
	    -moz-transition: all 250ms cubic-bezier(0.35, 0.000, 0.65, 0.995); 
	    -o-transition: all 250ms cubic-bezier(0.35, 0.000, 0.65, 0.995); 
	    transition: all 250ms cubic-bezier(0.35, 0.000, 0.65, 0.995); }	



#Services { padding: 0 0 20px; margin-top: -40px; z-index: 10; }

.feature { display: block; background-position: center; background-repeat: no-repeat; background-size: cover; width: 355px; margin-bottom: 5px; float: none; }

	.feature.height2 { height: 365px; }
	.feature .box-inner p, .feature .box-inner h1, .feature .box-inner h2, .feature .box-inner h3, .feature .box-inner h4, .feature .box-inner h5, .feature .box-inner h6 
		{ color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
	    
		.feature:hover .box-inner p { margin-bottom: 10px; }
	.feature .box-inner .num-word { padding-top: 0; }
	.feature .box-inner a:hover { text-decoration: none; }
	
	.feature .icon { opacity: 0.75; filter: alpha(opacity="75"); margin-bottom: 5px; display: block; }
	.feature:hover .icon { opacity: 1; filter: alpha(opacity="100"); }
	
	.feature:after { 
		content: ''; position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
		opacity: .7; }

	.feature:hover:after, .feature.height2:after { opacity: 0.9; }
	
	.feature.f1:after,
	.feature.f5:after,
	.feature.f6:after {		
		background-color: #292484;
		background-image: -webkit-linear-gradient(135deg,#292484,#dc4225);
		background-image: -moz-linear-gradient(135deg,#292484,#dc4225);
		background-image: -o-linear-gradient(135deg,#292484,#dc4225);
		background-image: linear-gradient(135deg,#292484,#dc4225); }
	
	.feature.f2:after,
	.feature.f4:after {		
		background-color: #000E54;
		background-image: -webkit-linear-gradient(135deg,#000E54,#00A602);
		background-image: -moz-linear-gradient(135deg,#000E54,#00A602);
		background-image: -o-linear-gradient(135deg,#000E54,#00A602);
		background-image: linear-gradient(135deg,#000E54,#00A602); }
	
	.feature.f3:after,
	.feature.f7:after {		
		background-color: #F2C100;
		background-image: -webkit-linear-gradient(135deg,#F2C100,#011018);
		background-image: -moz-linear-gradient(135deg,#F2C100,#011018);
		background-image: -o-linear-gradient(135deg,#F2C100,#011018);
		background-image: linear-gradient(135deg,#F2C100,#011018); }







.featurePop-container { 
	position: fixed; z-index: 999; 
	top: 0; bottom: 0; left: 0; right: 0; 
	overflow: hidden; border-radius: 0;
	background-color: #18383A;
	
    -webkit-transition: 
    	right 300ms cubic-bezier(.35,0,.55,1), 
    	left 300ms cubic-bezier(.35,0,.55,1), 
    	top 300ms cubic-bezier(.23,0,.57,1), 
    	bottom 300ms cubic-bezier(.23,0,.57,1),
    	border-radius 500ms cubic-bezier(.35,0,.65,1);
    transition: 
    	right 300ms cubic-bezier(.35,0,.55,1), 
    	left 300ms cubic-bezier(.35,0,.55,1), 
    	top 300ms cubic-bezier(.23,0,.57,1), 
    	bottom 300ms cubic-bezier(.23,0,.57,1),
    	border-radius 500ms cubic-bezier(.35,0,.65,1); }
    	
    	
	
	.featurePop-container.hide { top: 50%; bottom: 50%; left: 50%; right: 50%; border-radius: 1000px; }
		.featurePop-cycle { width: 100%; position: absolute; height: 100%; }
			.featurePop { width: 100%; height: 100%; overflow: scroll; float: left; white-space: normal; padding: 20px 80px; box-sizing: border-box; }
				.featurePop .inner { z-index: 1000; padding: 120px 0; overflow: hidden; }
					.featurePop .inner .icon { margin: 20px 0; }
					
				.featurePop-container .cycle-close { 
					position: absolute; display: block; height: 60px; padding: 18px 0; box-sizing: border-box; 
					bottom: 0; text-align: center; width: 100%; background-color: rgba(255,179,0,0.9); color: #65c6cc; z-index: 1000; }
					.featurePop-container .cycle-close:hover { background-color: #ffb400; }
					
				.featurePop-container .cycle-nav { z-index: 101; background-color: #ffb400; }
					.featurePop-container .cycle-nav.next { text-align: right; }




.featured-work { background-size: cover; background-repeat: no-repeat; background-position: center; }

.featured-work h1,
.featured-work h2,
.featured-work h3,
.featured-work h4,
.featured-work h5,
.featured-work h6,
.featured-work p,
.featured-work a { color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5)); text-decoration: none; }



/* ==============================================================
 *		Mission Statements
 ================================================================ */


#ManifestoSlider { overflow: hidden; padding: 0; }

.flagbox { height: 420px; width: 300px; padding: 60px 10px 32px; margin-bottom: 60px; position: relative !important; float: left; }
/*.flagbox:after { content: url(../images/manifesto-after.png); position: absolute; bottom: 0; left: 0; width: 100%; }
*/

	.flagbox p { font-family: 'National Italic', Arial, Helvetica, sans-serif; }
	.flagbox .flagbox-inner { 
		border: 1px solid rgba(0,0,0,0.1);
		white-space: normal !important;
		height: 100%; padding: 40px 20px; background-color: #EAEEEE; 
		box-sizing: border-box; -moz-box-sizing: border-box;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
		
	.flagbox .flagbox-num {
		font-size: 24px;
		line-height: 24px;
		position: absolute;
		padding-top: 5px;
		top: 40px;
		width: 40px;
		height: 35px;
		text-align: center;
		background-color: #fff;
		left: 50%;
		margin-left: -25px;
		border-radius: 80px;
		border: 2px solid rgba(0,0,0,0.1); }
		
	
	#ManifestoSlider .cycle-nav { background-color: #ffb400; color: #E9F7FD; }


/* ==============================================================
 *		Subscribers
 ================================================================ */

#Subscribers {}
	#Subscribers .subscribers-content { position: absolute; left: 50%; margin-left: -550px; top: 120px; pointer-events: none; z-index: 100; }
	#Subscribers #map { height: 600px; overflow: hidden; width: 100%; }
	
	
	.formbox { 
		position: absolute; width: 360px; left: 50%; margin-left: -550px; padding: 30px 40px; top: 80px;
		z-index: 10; background-color: #fff; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }


/* ==============================================================
 *		Partners
 ================================================================ */


.staff .staff-title { margin-top: 10px; margin-bottom: 0; }
.partner { margin: 2px; padding: 20px; float: left; }



/* ==============================================================
 *		Section IDs
 ================================================================ */


#Welcome { background-image: url(../images/bg-icons.png); background-repeat: repeat-x; background-position: bottom; background-size: auto; padding: 40px 0 70px; }



/* ==============================================================
 *		Testimonials
 ================================================================ */



#Testimonials { 
	background-repeat: no-repeat; 
	background-position: 50% 0; 
	background-size: cover; 
	background-image: url(../images/bg-default.jpg); }


/* ==============================================================
 *		Feature
 ================================================================ */
 
 
#Feature { 
	padding: 40px; 
	background-color: #18383A; background-size: cover; background-repeat: no-repeat; background-position: center; 
	border-radius: 3px; box-shadow: 2px 2px 1px rgba(0,0,0,0.4); overflow: hidden; }
	.cornerlabel { position: absolute; top: 0; left: 0; padding: 4px 5px; background-color: #ffb400; }
		.cornerlabel h6 { color: #18383A; }
		
	#Feature a, #Feature a:hover { text-decoration: none;}
	#Feature a:hover { text-shadow: 0 2px 2px rgba(0,0,0,0.3); }
 

/* ==============================================================
 *		Dialog
 ================================================================ */

.dialogwrap { background-color: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; z-index: 5000; display: none; }
.dialogwrap.show { display: block; }

	.dialog {   
		display: none;
		width: 960px;
		margin: auto;
		background-color: #FFF;
		border-radius: 5px;
		box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
		padding: 40px;
		box-sizing: border-box;
		overflow: hidden;
		position: absolute;
		margin-left: -480px;
		top: 80px;
		left: 50%; }
	
		.dialogclose { position: relative; float: right; cursor: pointer; text-decoration: none; border: 0; }
		
@media only screen and (max-width: 700px) { 
		.dialog {   
		display: none;
		width: 100%;
		margin: auto;
		background-color: #FFF;
		border-radius: 5px;
		box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
		padding: 40px;
		box-sizing: border-box;
		overflow: hidden;
		position: absolute;
		top: 80px;
		left:0;
		}
		.size2of5, .size3of5 {
			width:100%;	
		}
}
/* ==============================================================
 *		flash messages
 ================================================================ */		
p.message {
    padding:10px;
    margin: 10px 10px 0;
    border: 1px solid #FFF;
}
 
p#SuccessMessage {
    color:#3E933A;
    background:#E2F7D8;
    border-color:#9FDE9C;
}
 
p#NoticeMessage {
    color:#CCBD00;
    background:#FFF8D7;
    border-color:#F1E988;
}
 
p#ErrorMessage {
    color: #DA1D1D;
    background: #FFDFDF;
    border-color: #FFBBBB;
}