@import url(/css/reset.css);
@import url(/css/text.css);
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
html {
	height:100%
}
body {
	font: 20px/30px 'Booton-Regular', Arial, sans-serif;
	color: #001431;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	height:100%;
}

.resizeimg {max-width: 100%;height: auto;}
a {color:#0E49BD}
a:hover {text-decoration: none;}
h1 {font-size:24px;margin-bottom:48px;font-weight:normal;font-family: 'Booton-Semibold', Arial, sans-serif;}
h3 {font-size:16px;margin-bottom:48px;font-weight:normal;font-family: 'Booton-Medium', Arial, sans-serif;}
i {font-family: 'Booton-RegularItalic', Arial, sans-serif;font-style: normal;}

.animatein {visibility:hidden}

/**** nav ****/
.nav {background: #fff;height:calc(72px + 4vw);font-size:15px;position:absolute;width:100%;overflow: hidden;transition:opacity 0.2s, height 0.2s;z-index:1000}
.nav .container {height:72px;padding:2vw 0}
.navinner {display:flex;justify-content: space-between;}
.nav a {text-decoration: none;color:#001431}
.nav a:hover {text-decoration: underline;}
.nav img {display: block;}
.nav ul {display:flex;height:72px;justify-content: space-between;align-items: center;margin:0;padding:0;flex:0 0 45%}

body:not(.menuopen) .nav.scrolled:not(.shownav) {height:0;opacity:0;}
.nav.shownav {height:calc(72px + 4vw);opacity:1;position:fixed}

.pic {background: 50% 50% no-repeat;background-size:cover;}
.bluebg {background:#0E49BD}
.greybg {background:#EFF0F2}
.bluetext {color:#0E49BD}
.whitetext {color:#fff}

.wholepage {padding-top:calc(72px + 4vw)}
.paddingsection {padding:5vw 0}
.rounded {border-radius:0 30px 0 30px;}

/* #Page Styles
================================================== */

/**** intro ****/
.intro {height:calc(100vh - 4vw - 72px);display:flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding-bottom:5vw;position: relative;}
.intro .pic {flex:0 0 50%;height:100%;background-position: 50% 55%;}
.intro .text {font-size:30x;line-height:1.3em;text-align: center;box-sizing: border-box;padding:5vw;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.intro .line {background:#0E49BD;height:0.5px;width:4vw;margin-bottom:16px}
.downarrow {position:absolute;bottom:5vw;right:0;width:50%;height:40px;background:url(/img/ui/arrow.svg) bottom center no-repeat;background-size:contain}


/**** services ****/
.services {display:flex}
.services .text {flex:0 0 50%;padding-right:5vw}
.accorditem {border-bottom:0.5px solid #0E49BD;padding:32px 0;cursor: pointer;}
.accorditem h3 {margin:0;position: relative;}
.accorditem:hover h3 {text-decoration: underline;}
.accorditem h3:before {content:'';display:block;width:30px;height:0.5px;background:#001431;position:absolute;top:15px;right:0}
.accorditem h3:after {content:'';display:block;width:0.5px;height:30px;background:#001431;position:absolute;top:0px;right:15px;transform-origin: 50% 50%;transition:transform 0.2s}
.accorditem p {margin:0;overflow: hidden;max-height:0;padding-right:5vw;transition:max-height 0.5s, padding 0.2s}

.accorditem.active h3:after {transform: scaleY(0);}
.accorditem.active p {max-height:200px;padding-top:16px;transition:max-height 0.5s, padding 0.2s}

.servicepic {background-image: url(/img/content/nick2.jpg);flex:1 1;height:75vh}

/**** experience ****/
.sliderholder {overflow-x: hidden;}
.slider {width:100vw}
.slidercontrols {display:flex}
.slidearrows {display:flex;flex:0 0 5vw;margin-right:5vw;justify-content: space-between;}
.slidearrow {flex:0 0 12px;height:24px;background:50% 50% no-repeat;background-size:contain;transition:opacity 0.5s;cursor: pointer;}
.slideprev {background-image:url(/img/ui/leftarrow.svg)}
.slidenext {background-image:url(/img/ui/rightarrow.svg)}
.slidepager {list-style-type: none;margin:0;padding:0;display: flex;justify-content: space-between;flex:1 1;height:24px;align-items: center;font-size:11px;font-family: 'Booton-Medium', Arial, sans-serif;}
.slidepager li {margin:0;padding:0;transition:opacity 0.5s;cursor: pointer;opacity:0.2}
.slidepager li:hover {text-decoration: underline;}

.slidepager li.active {opacity:1}
.slidearrow.inactive {opacity:0.2;pointer-events: none;}

.slider .slide {width:20vw;margin-right:20px}
.slidedate {display:flex;font-size:15px;line-height:15px;margin-bottom:20px;font-family: 'Booton-Medium', Arial, sans-serif;}
.slidedate:after {content:'';height:1px;background: rgba(0, 20, 49, 0.20);flex:1 1;margin:6px 0 0 12px;}
.slidebody {border-right: 1px solid rgba(0, 20, 49, 0.20);padding:0 20px 0 0;height:100%}
.expintro {font-size:22px;line-height:1.3em;height:140px;}
.explogo {width:140px;height:46px;background:left center no-repeat;background-size:contain;margin-bottom:20px}
.expquote {font-size:16px;line-height:1.3em;padding-left:20px;position: relative;}
.expquote:before {content:'“';position:absolute;top:10px;left:0;font-size:45px}

.quote {position:relative;padding-left:28px}
.quote:before {content:'“';position:absolute;top:10px;left:0;font-size:40px}
.quotename {font-size:16px}
.bigpic {height:80vh;margin-top:5vw}

.footer {padding-bottom: 10vw;}
.footer p {margin-bottom:48px}
.footerlinks {display:flex;align-items: center;font-size:16px}
.footerlinks .footerline {width:0.5px;height:28px;background: #001431;margin:0 16px}



/****************************************************
* Misc
****************************/
/*hide social stuff and headings on prettyphoto*/
.ppt {display:none !important}
.pp_social {display:none !important}
.pp_description {display:none !important}

.smallText { font-size: 11px; }
.smallprint {
	font-size: 11px;
	color: #BBBDC0;
}
.smallprint a { color: #BBBDC0; }
.padTop { margin-top: 30px; }
.largeText { font-size: 13px; }

.superscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: -0.4em;}
.subscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: 0.4em;}
	
.vmiddle {position: relative;top: 50%;  -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);}

.caps {text-transform:uppercase;letter-spacing:0.1em}
.num {text-align:right}



/* #Media Queries
================================================== */
	
	/* biggest desktop */
	@media only screen and (max-width: 1230px) {
		.slider .slide {width:25vw}
	}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {
		.slider .slide {width:30vw}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.intro .pic {height:50vh}
		.bigpic {height:55vh}
		.servicepic {height:55vh}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		body {font-size:16px;line-height:1.3em}
		
		.nav {overflow:unset;position:fixed}
		.nav img {height:50px}
		.navinner {height:calc(72px);align-items:center}
		.nav ul {position:fixed;top:0;padding:calc(72px + 4vw) 20px 20px 20px;right:0vw;background:#fff;z-index:-1;width:100vw;flex-direction:column;justify-content: center;height:auto;box-sizing: border-box;transition:opacity 0.2s;opacity:0;pointer-events: none;}
		.menuopen .nav ul {opacity:1;pointer-events: all;}
		.nav ul a {padding:20px}
		
		.navbutton {display:block;position: fixed;width:30px;height:30px;padding:10px 10px;top:15px;right:10px;z-index:10000;cursor:pointer;background:#fff;border-radius:30px}
		.navbutton .navicon {position: relative;width:24px;height:100%;margin-left:3px}
		.navbutton .navicon span {display:block;width:100%;height:1px;background:#001431;position:absolute;transition:top 0.2s 0.2s, transform 0.2s, opacity 0.2s}
		.navbutton .navicon span:nth-child(1) {top:8px}
		.navbutton .navicon span:nth-child(2) {top:14px;transform-origin:50% 50%}
		.navbutton .navicon span:nth-child(3) {top:20px;transform-origin:50% 50%}

		.menuopen .navbutton .navicon span {transition:top 0.2s, transform 0.2s 0.2s, opacity 0s 0.2s}
		.menuopen .navbutton .navicon span:nth-child(1) {top:14px;opacity:0}
		.menuopen .navbutton .navicon span:nth-child(2) {top:14px;transform: rotate(-45deg);}
		.menuopen .navbutton .navicon span:nth-child(3) {top:14px;transform: rotate(45deg);}
		
		
		.intro {flex-direction: column;}
		.intro .pic {flex:0 0 40vh;width:100%}
		.intro .text {padding-left:0;padding-right:0;flex:1 1;padding-bottom:15vw}
		.downarrow {width:100%}
		
		.paddingsection {padding:10vw 0}
		
		.services {flex-direction:column-reverse}
		.servicepic {width:100%;flex:0 0 40vh;margin-bottom:10vw}
		.accorditem {padding:24px 0}
		.accorditem h3:before {top:10px;}
		.accorditem h3:after {top:-5px}
		
		.slider .slide {width:85vw}
		
		.slidearrows {display:none}
		
		.quote {margin-top:24px}
		.bigpic {height:40vh}
		
		.footer {padding-bottom:20vw}
		.footerlinks {font-size:14px}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

@font-face {
	font-family: 'Booton-Regular';
	src: url('/webfonts/Booton-Regular.woff') format('woff'),
			url('/webfonts/Booton-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal; }
	
@font-face {
	font-family: 'Booton-Medium';
	src: url('/webfonts/Booton-Medium.woff') format('woff'),
			url('/webfonts/Booton-Medium.woff2') format('woff2');
	font-weight: normal;
	font-style: normal; }
	
@font-face {
	font-family: 'Booton-Semibold';
	src: url('/webfonts/Booton-Semibold.woff') format('woff'),
			url('/webfonts/Booton-Semibold.woff2') format('woff2');
	font-weight: normal;
	font-style: normal; }
	
@font-face {
	font-family: 'Booton-RegularItalic';
	src: url('/webfonts/Booton-RegularItalic.woff') format('woff'),
			url('/webfonts/Booton-RegularItalic.woff2') format('woff2');
	font-weight: normal;
	font-style: normal; }