@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: 14px/20px 'Graphik Web', Arial, sans-serif;
	color: #000000;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	height:100%;
}

h2 {font-weight: normal;font-size:3vw;line-height:1.3em;}
h3 {font-size:24px;line-height:1.3em;}

.resizeimg {max-width: 100%;height: auto;}
.animatein {visibility:hidden}

.enriqueta {font-family: 'Enriqueta', serif;}

.orangetext {color:#F08328}

.lightgreybg {background: #F1F1F1;}

.pic {position: relative;background:50% 50% no-repeat;background-size:cover;}
.icon {position: relative;background:50% 50% no-repeat;background-size:contain;}

.arrowlist {list-style-type: none;margin:0}
.arrowlist li {margin:0 0 15px 0;position:relative;padding-left:20px}
.arrowlist li:before {content:'';display:block;position:absolute;top:3px;left:0;width:10px;height:1em;background:left center url(/img/ui/bullet.svg) no-repeat;background-size:contain}

/**** nav ****/
.navholder {position:fixed;top:0;left:0;width:100%;height:80px;transition:background 0.5s;z-index:2000}
.navholder .navinner {margin:0 5vw;width:calc(100% - 10vw);position:relative;height:100%;display:flex;justify-content: space-between;align-items:center}
.navholder .navinner:after {content:'';display:block;position:absolute;bottom:0;left:0;background:#fff;width:100%;height:1px;background:#fff;transition:all 0.5s;transform-origin: 50% 50%;}
.sitelogo {height:100%;width:120px;background:left center no-repeat url(/img/content/hobart.svg);background-size:contain}
.nav ul {list-style-type: none;display:flex;justify-content: flex-end;margin:0;padding:0;text-transform: uppercase;}
.nav ul li {margin:0 0 0 30px;padding:0}
.nav ul li a {color:#fff;text-decoration: none;}
.nav ul li a:hover {text-decoration: underline;}
.nav ul li a.portal {display:block;border:1px solid #fff;padding:10px 15px;margin-top:-11px;margin-bottom:-11px}
.navholder.scrolled {background:rgba(240,131,40,0.9)}
.navholder.scrolled .navinner:after {transform: scaleX(0);opacity:0;}

.s0 .nav .n0,
.s1 .nav .n1,
.s2 .nav .n2,
.s3 .nav .n3,
.s4 .nav .n4,
.s5 .nav .n5,
.s6 .nav .n6 {text-decoration: underline;}


.pagebanner {width:100%;height:50vh;background:50% 50% no-repeat url(/img/content/home/banner.jpg);background-size:cover;position: relative;display:flex;align-items:flex-end;box-sizing: border-box;padding:80px 5vw 0 5vw;color:#fff}
.orangeoverlay, .bandw {position:relative}
.orangeoverlay:before {content: '';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:#F08328;mix-blend-mode: multiply;z-index:50}
.bandw:after {content: '';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;mix-blend-mode: color;z-index:25}
.pagebanner h1 {position:relative;border-bottom:1px solid #fff;width:100%;box-sizing: border-box;padding-right:20vw;font-weight: normal;font-size:4vw;line-height:1.3em;padding-bottom:0.5em;z-index:100;margin-bottom:30px}
.pagebanner.homebanner h1 {margin-bottom:60px;}
.pagebanner h1 span {font-size:14px;line-height:1.3em;display:block}

.downarrow {position:absolute;bottom:20px;left:0;width:100%;height:20px;background:50% 50% no-repeat url(/img/ui/downarrow.svg);background-size:auto 14px;animation: fade-in-out 3s ease infinite;z-index:200}

@keyframes fade-in-out {
    0% {
        opacity: 0; /* start with 0 opacity */
        bottom:40px; /* start at top of page */
    }
    33% {
        opacity: 1; /* fade in over first third of animation */
        bottom: 20px; /* move down 30px */
    }
    66% {
        opacity: 1; /* stay visible for middle third of animation */
        bottom: 20px; /* keep position */
    }
    100% {
        opacity: 0; /* fade out over final third of animation */
        bottom:0; /* move down another 30px */
    }
}

/**** footer ****/
.footer {padding:5vw;background:50% 50% no-repeat url(/img/content/footerbg.jpg);background-size:cover;position:relative;color:#fff;box-sizing: border-box;}
.footer::before, .footer::after {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%}
.footer:before {background:#F08328;mix-blend-mode: multiply;}
.footer:after {background:transparent linear-gradient(90deg, var(--unnamed-color-000000) 0%, #0000007B 100%) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(90deg, #000000 0%, #0000007B 100%) 0% 0% no-repeat padding-box;
opacity: 0.75;}
.footercontent * {position:relative;z-index:100}
.footer img {margin-bottom:40px}
.footer a {color:#F08328}

.s3 .footer {min-height:100vh;display:flex;align-items:center;justify-content: space-between;position: relative;}
.s3 .smallprint {position:absolute;bottom:5vw;left:5vw;width:80vw}
.s3 .map {flex:0 0 50vw;height:50vh;position:relative;z-index:100;margin-right:5vw}

.smallprint {margin-top:80px;font-size:11px;line-height:13px}
.smallprint a {color:#fff}

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

/**** home ****/
.homebanner {height:95vh}

.homesection {padding:5vw 7.5vw 5vw 5vw;box-sizing: border-box;display:flex;min-height:calc(100vh - 80px);position: relative;}
.homesection.alt {flex-direction: row-reverse;}

.homesection .text {padding-right:5vw;box-sizing: border-box;flex:1 1;}
.homesection.alt .text {padding-right:0;padding-left:5vw}
.sectionheading {border-top:#000000 solid 1px;border-bottom:#000000 solid 1px;padding:10px 0 40px;margin-bottom:40px;min-height:14vw}
.sectionheading h2 {margin:0}
.sectioncontent {padding-right:5vw;font-size:16px;line-height:1.3em}
.homesection h3 {font-weight:600}

.homesection .pic {flex:0 0 55vw;}

.homesection.esg {background:url(/img/content/home/esg.jpg) 50% 50% no-repeat;background-size:cover;color:#fff}
.homesection.esg:before {content:'';display:block;position:absolute;top:0;left:0;width:90vw;height:100%;background: transparent linear-gradient(90deg, var(--unnamed-color-000000) 0%, #00000000 100%) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(90deg, #000000 0%, #00000000 100%) 0% 0% no-repeat padding-box;
opacity: 0.75;}

.esg {font-size:18px;line-height:1.3em;align-items:center}
.esg1 {position:relative;padding-right:5vw}
.esg1 h2 {margin-bottom:40px}
.esglist .esgitem {border-top:1px solid #fff;padding:20px 5vw 20px 0}
.esglist .esgitem:last-child {border-bottom:1px solid #fff}
.esgbig {font-size:4vw;line-height:1.3em;font-weight:500;display:inline-block}

.esg2 {position: relative;flex:0 0 50vw}
.esg2 h3 {padding:2.5vw;border-left:1px solid #fff;font-weight: 500;margin-bottom:40px}
.esgicons {display: flex;flex-wrap: wrap;}
.esgicons .esgitem {background:#fff;position:relative;margin:0 20px 20px 0;flex:0 0;flex-basis:calc(50% - 20px);box-sizing: border-box;padding:20px 80px 20px 20px;color:#000;display:flex;align-items: flex-end;min-height:10vw;}
.esgicons .esgitem .icon {position:absolute;top:20px;right:20px;width:40px;height:40px;background:top right no-repeat;}
.esgicons .esgitem p {margin:0}

.trackrecord {padding:calc(3vw + 60px) 0}
.trackslide {background:#fff;margin:0 10px;width:85vw}
.trackslideinner {position:relative;height:60vh;box-sizing: border-box;padding-left:60px;}

.tracktitle {
  position: absolute;
  box-sizing: border-box;
  padding-left:20px;
  left: 60px;
  bottom: 0;
  width:60vh;
  height:60px;
  transform: rotate(-90deg);
  transform-origin: 0% 100%;
  background:#F08328;
  color:#fff;
  display:flex;align-items:center;font-size:18px;
}

.trackcontent {display:flex;align-items:center;justify-content: center;width:100%;height:100%}
.trackcontent .picholder {flex:0 0 60vh;height:100%;display:flex;align-items:center;justify-content: center;}
.trackcontent .pic {flex:0 0 40vh;height:40vh;margin:10vh;border-radius: 50%;}
.trackcontent .text {display:flex;flex-direction: column;justify-content: center;margin-right:15vh;border-top:1px solid #000;padding-top:10px;}
.tracktext {font-size:20px;line-height:1.3em}
.trackcontent .enriqueta {margin-bottom:40px}

.slick-arrow {box-sizing: border-box;width:60px;height:60px;overflow:hidden;text-indent:-9999px;border:1px solid #F08328;position:absolute;top:calc(60vh - 1px);left:calc((100% - 85vw) / 2);background:#fff 50% 50% no-repeat url(/img/ui/leftorange.svg);cursor: pointer;}

.slick-next {left:calc(((100% - 85vw) / 2) + 60px);background-image:url(/img/ui/rightwhite.svg);background-color:#F08328}

.slick-dots {margin:0;position:absolute;top:60vh;left:0;width:100%;display:flex;justify-content: center;align-items:center;height:60px;list-style: none;pointer-events: none;}
.slick-dots li {margin:0 2px;padding:0;height:4px}
.slick-dots button {border:none;background:#fff;overflow:hidden;text-indent:-9999px;width:80px;height:4px;cursor: pointer;pointer-events: all;transition:background 0.2s}
.slick-dots .slick-active button {background:#F08328}

/**** team ****/
.teampage {display:flex;flex-wrap:wrap;padding:2.5vw}
.teampic {margin:0 2.5vw}
.member {margin:2.5vw;background:#fff;flex:0 0;flex-basis:calc(50% - 5vw);position:relative;}
.member a {color:#F08328}
.member h3 {font-weight:400}
.membersocial {position:absolute;top:0;right:0;display:flex;width:40px;flex-direction:column}
.membersocial a {background:#F08328 50% 50% no-repeat;background-size:18px auto;margin-bottom:1px;flex:0 0 40px;width:40px;transition:background 0.2s}
.membersocial a:hover {background-color:#000}
.membersocial a.linkedin {background-image:url(/img/content/team/linkedin.svg)}
.membersocial a.email {background-image:url(/img/content/team/email.svg)}
.member .pic {height:25vw;width:100%;position:absolute;top:0;left:0}
.member .text {padding:20px 10vw 20px 20px;margin-top:25vw;transition:margin 0.5s;background:#fff;position:relative;z-index:200}
.member.showmember .text {margin-top:0;}
.memberbody {max-height:100px;overflow:hidden;transition:max-height 0.5s}
.member.showmember .memberbody {max-height:1000px}
.memberhead {border-bottom:1px solid #000;margin-bottom:30px}
.moremember {position:relative;display:block;padding-top:5px;cursor: pointer;}
.moremember:hover {text-decoration: underline;}
.moremember:before {content:'';display:block;position:absolute;top:-40px;left:0;width:100%;height:40px;background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);transition:opacity 0.5s}
.moremember:after {content:'Read more »'}
.member.showmember .moremember:after {content:'Hide'}
.member.showmember .moremember:before {opacity:0}

/**** news ****/
.buttonlink {display: inline-block;text-decoration: none;color:#fff !important;background:#F08328;padding:10px 30px;margin-top:10px;transition:background 0.2s}
.buttonlink:hover {background:#000}

.newspage {padding:5vw 5vw 10vw 5vw}
.newspage p, .newspage ul, .newspage ol {max-width:600px}
.newspage li {margin-bottom:5px}
.newspage img {margin:40px 0;max-width:75%;display:block}
.newspage a {color: #F08328;}

/**** privacy ****/
.privacytable {margin-bottom:30px}
.privacytable td {border:1px solid #000;padding:10px;max-width:600px}


/****************************************************
* 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; }

.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) {}
	
	/* bigger desktop */
	@media only screen and (min-width: 1100px) and (max-width: 1229px) {}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (min-width: 959px) and (max-width:1099px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		h2 {font-size:30px;line-height:1.3em}
		
		/**** nav ****/
		.sitelogo {height:80px;position:fixed;top:0;left:20px;pointer-events: all;z-index:3000;transition: opacity 0.2s;}
		.navholder.scrolled .sitelogo {opacity:0}
		.menuopen .navholder.scrolled .sitelogo {opacity:1}
		.navholder {height:100vh;pointer-events: none;position:absolute}
		.navholder.scrolled {background:none}
		.navholder.scrolled .navinner:after {display:none}
		.navholder .navinner {margin:0;padding:0;width: 100vw;}
		.nav {width:100vw;height:0;transition:height 0.5s;overflow: hidden;background:rgba(240,131,40,0.9);position:fixed;top:0}
		.menuopen .nav {height:100vh}
		.nav ul {flex-direction:column;align-items:center;justify-content: center;height:100vh}
		.nav ul li {height:10vh;pointer-events: all;}
		
		.menubutton {display:block;width:26px;height:20px;cursor:pointer;position:fixed;top:20px;right:20px;z-index:3000;background:#F08328;padding:14px 10px 10px 10px}
		.menubutton .menuicon {width:26px;height:15px;position:relative}
		.menubutton .menuicon span {display:block;width:100%;height:2px;background:#fff;position:absolute;transition:transform 0.2s, top 0.2s 0.2s, left 0.2s, right 0.2s, opacity 0.2s 0.2s;transform-origin: 50% 50%;}
		.menubutton .menuicon span:nth-child(1) {top:0;left:0;}
		.menubutton .menuicon span:nth-child(2) {top:7px;left:0;}
		.menubutton .menuicon span:nth-child(3) {top:14px;left:0px}

		.menuopen .menubutton .menuicon span:nth-child(1) {top:7px;transform:rotate(-45deg);transition:transform 0.2s 0.2s, top 0.2s, left 0.2s 0.2s}
		.menuopen .menubutton .menuicon span:nth-child(2) {top:7px;transform:rotate(45deg);transition:transform 0.2s 0.2s, top 0.2s, right 0.2s 0.2s}
		.menuopen .menubutton .menuicon span:nth-child(3) {top:7px;transition:transform 0.2s 0.2s, top 0.2s, opacity 0.2s;opacity:0}
		
		/**** home ****/
		.pagebanner h1 {font-size:48px;line-height:1.3em}
		.homesection, .homesection.alt {flex-direction:column;min-height:auto}
		.homesection .text, .homesection.alt .text {padding:0 0 10vw 0;display:flex}
		.sectionheading {flex:0 0 40%;box-sizing: border-box;margin:0 5vw 0 0;}
		.sectioncontent {padding:0}
		
		.esg2 h3 {border-left:none;padding:0}
		.esgbig {font-size:50px;line-height:1.3em}
		.esglist {margin-bottom:40px}
		
		.esgicons .esgitem {min-height:120px}
		
		.trackcontent {flex-direction: column;align-items:flex-start;justify-content:flex-start}
		.trackcontent .pic {width:25vh;flex:0 0 25vh;margin:5vh}
		.trackcontent .text {margin:0 0 0 5vh;width:calc(100% - 10vh)}
		
		/**** contact ****/
		.s3 .footer {flex-direction: column;align-items:flex-start;justify-content: center;}
		.s3 .map {width:100%;margin-top:40px;flex:0 0 50vh}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
		.footer {padding-top:10vw;padding-bottom:10vw}
	
		/**** home ****/
		.pagebanner h1 {font-size:36px;line-height:1.3em}
		.homesection .text, .homesection.alt .text {flex-direction:column}
		.sectionheading {margin-bottom:40px}
		.esgicons .esgitem {flex:0 0 100%}
		.trackcontent .pic {width:15vh;flex:0 0 15vh}
		.tracktext {font-size:16px;line-height:1.3em}
		.slick-dots {justify-content: flex-end;padding-right:7.5vw;box-sizing: border-box;}
		.slick-dots button {width:20px}
		
		/**** team ****/
		.member {flex:0 0;flex-basis:calc(100% - 5vw)}
		.member .pic {height:200px}
		.member .text {margin-top:200px}
		
		/**** news ****/
		.newspage img {max-width:100%}
		
		/**** contact ****/
		.s3 .map {flex:0 0 40vh}
		.s3 .sitelogo {display:none}
		
	}

	/* 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: 'Graphik Web';
src: url('/fonts/Graphik-Semibold-Web.woff2') format('woff2'),
url('/fonts/Graphik-Semibold-Web.woff') format('woff');
font-weight: 600;
font-style: normal;
font-stretch: normal;
}

@font-face {
font-family: 'Graphik Web';
src: url('/fonts/Graphik-Medium-Web.woff2') format('woff2'),
url('/fonts/Graphik-Medium-Web.woff') format('woff');
font-weight: 500;
font-style: normal;
font-stretch: normal;
}

@font-face {
font-family: 'Graphik Web';
src: url('/fonts/Graphik-Regular-Web.woff2') format('woff2'),
url('/fonts/Graphik-Regular-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}