@charset "UTF-8";
/* CSS Document */

/* REFERENCE 
green - #99ca3c
purple - #6e3a96
gray - #353228
*/


/* INITIAL DOCUMENT SETUP */

html, body{height: 100%;}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img { margin: 0; padding: 0; border: 0; }
body{background-image: url(../images/vintage_speckles.png)}
body{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
nav ul{list-style: none;}
input{-moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input:focus, textarea:focus, select:focus {outline: none; }
html{-webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
input, textarea {-webkit-appearance: none; -webkit-border-radius: 0;} 
input[type="submit"]::-moz-focus-inner {padding: 0;border: 0; margin-top:-4px;}
a:focus{outline: none;}
.flipH{-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH;-ms-filter: "FlipH";}
.flipV{-moz-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipH;-ms-filter: "FlipV";}
.hide{opacity:0; filter:alpha(opacity=0); display: none;}
.show{opacity:1; filter:alpha(opacity=100); display: block;}
strong{font-weight: 700;}



/* UNIVERSAL STYLES */

section{width: 100%; padding: 0 2%; position: relative; overflow: hidden; z-index: 1;}
.contentContainer{width:100%; max-width: 920px; margin: 0 auto;}
section h1{font:700 63px/100% 'Ubuntu', sans-serif; text-transform: uppercase;}
section h2{font:25px/160% 'Merriweather', serif; padding: 2% 0; margin: 3% 0; border-top:1px solid #c8c3c3; border-bottom:1px solid #c8c3c3;}
section p{font:300 17px/26px 'Ubuntu', sans-serif; color: #353228;}
section p~p{margin-top: 3%;}
.col-divider{width: 1px; background-color:#c8c3c3; position: absolute; left:0; top:0;}
.stretch{width: 100%; display: inline-block; font-size: 0; line-height: 0}



/* GLOBAL NAV */

#navContainer{width: 100%; height: 60px; background-color: #464840; overflow: visible; position: relative; z-index: 49;}
#globalNav{width: 100%; height: 60px; background-color: #464840; text-align: left;}
#globalNav li{display: inline-block; vertical-align: middle;}
#globalNav a, #globalNav .navspacer{font:500 15px/60px 'Ubuntu', sans-serif; color: #fff;}
#globalNav .navspacer{padding: 0 5.25%;}
#globalNav a{-webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; -o-transition:color 0.2s linear; transition:color 0.2s linear;}
#globalNav a:hover{color: #99ca3c;}
#globalNav a.setOn{color: #99ca3c;}
#navLogo{margin-right: 5.5%; position: relative; width: 80px; height: 100%;}
#navLogo div>div{position:absolute; top:-90px; left:0; width:78px; height: 90px; background-color: #99ca3c; text-align: center; display: table;}
#navLogo span{color: #fff; font-size: 62px; padding-left:10px; display: table-cell; vertical-align: middle;}



/* SIDE NAV */

#sideNav{position: fixed; right: 40px; top:50%; margin-top: -75px; z-index: 50;}
#sideNav-dots{position: relative; width:10px;}
.sidenav-dot{width: 10px; height: 10px; border-radius: 10px; background-color: #8b8b8b; opacity:.5; filter:alpha(opacity=40);}
.sidenav-line{width: 5px; height: 25px; border-right:1px solid #8b8b8b; opacity:.5; filter:alpha(opacity=40);}
.sidenav-dot[data-num="1"]{opacity:1; filter:alpha(opacity=100);}
.sidenav-dot a{width: 100%; height: 100%; display: block;}



/* MOBILE NAV */

#mobile-logo{position: absolute; left: 5%; top: 12px; display: none; cursor: pointer;}
#mobile-g{display: none; cursor: pointer;}
#mobileNavWrap{display:none; width: 100%; height: 44px; overflow: hidden; position:absolute; top:0; left:0; z-index: 2; }
#mobileNav{position:absolute; top:0; left:0; width: 100%; height: 250px; background-color: #6e3a96; padding-left: 5%; padding-top: 10px;}
#mobileNav a{font:700 16px/45px 'Ubuntu', sans-serif; color: #fff;}
.mobile-menuline{width: 24px; height: 3px; background-color: #fff; display: block; margin: 0 auto;}
.mobile-menuline~.mobile-menuline{margin-top: 4px;}


/* HOME HERO */

#hero{width:100%; height:100%; position: relative; z-index: 2; background: url(../images/homebg.jpg) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; opacity: 0;}
#hero .contentContainer{display: table; height: 100%;}
#home-logo{margin-top: -10px;}
#heroContents{width: 100%; display: table-cell; vertical-align: middle;}
#hero h1{font:700 142px/94% 'Ubuntu', sans-serif; color: #fff; text-transform: uppercase; width: 100%; margin: 9% 0 0;}
#hero p{font:25px/175% 'Merriweather', sans-serif; color: #fff; width: 100%; max-width: 785px; margin:3% 0 12%;}
#hero a{font:700 16px/16px 'Ubuntu', sans-serif; color: #fff; text-transform: uppercase; padding: 18px 20px; border: 1px solid #fff;}
#hero a span{font-size: 28px; margin-top: -4px; margin-left: 25px; display: inline-block; vertical-align: middle;}
#hero a{background-color: rgba(255,255,255,0); -webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; -o-transition:background-color 0.2s linear; transition:background-color 0.2s linear;}
#hero a:hover{background-color: rgba(255,255,255,.3);}



/* HOME INTRO */

#introText{padding: 14% 0 11%;}
#intro h1, #intro h2{color: #6e3a96;}
#intro h2{padding: 1.5% 0;}
.intro-cols{position:relative; -moz-column-count: 2; -moz-column-gap: 120px; -webkit-column-count: 2; -webkit-column-gap: 120px;}



/* QUOTES */

#quotes{height: 642px; background: url(../images/quotesbg.jpg) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#quotes .contentContainer{height: 100%; position: relative;}
#quotes p{font:700 27px/44px 'Ubuntu', sans-serif; color: #939393; text-transform: uppercase; text-indent: -18px;}
#quotesWrap{width: 100%; height: 100%; position: relative;}
.quote-wrap{display: table; width: 100%; height: 100%; position: absolute; visibility: hidden;}
.quote-wrap[data-num="1"]{visibility: visible;}
.quote{width: 100%; height: 100%; display: table-cell; vertical-align: middle;}
#quoteDots{position: absolute; bottom: 0; left:0; width: 100%; text-align: center; margin-bottom: 9%;}
.quote-dot{width: 10px; height: 10px; border-radius: 10px; background-color: #fff; display: inline-block; opacity:.25; filter:alpha(opacity=25);} .quote-dot~.quote-dot{margin-left: 10px;}
.quote-dot a{width: 100%; height: 100%; display: block;}
.quote-dot[data-num="1"]{opacity:1; filter:alpha(opacity=100);}



/* SERVICES */

#servicesText{padding: 14% 0 6.5%;}
#services h1, #services h2{color: #99ca3c;}
#services h2 span{display:block; max-width: 830px;}

#servicesBoxes{width: 100%; position: relative; margin: 0 auto; margin-bottom: 13.5%; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines;}
.servicesBox{width: 30%; max-width: 220px; display: inline-block; vertical-align: top; text-align: center; padding-bottom: 0;}
#servicesBoxes img{width:100%; max-width:217px;}
#servicesBoxes ul{list-style: none; padding: 0;}
#servicesBoxes li{font:300 17px/26px 'Ubuntu', sans-serif; color: #353228; text-align: center;} #servicesBoxes li~li{margin-top: 5%;}
#servicesBoxes h2{font:700 23px/44px 'Ubuntu', sans-serif; color: #313131; text-transform: uppercase; text-align: center; padding: 0; margin:12% 0 0; border: none;}



/* STRATEGY */

#strategy{height: 1099px; background: url(../images/strategybg.jpg) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#strategy .contentContainer{height: 100%;}
#strategyText{padding: 11% 0 6.5%; text-align: center;}
#strategyText p{font:300 30px/42px 'Averia Serif Libre', serif; color: #fff; max-width: 720px; margin: 0 auto;}
#strategyText p.ital{font-style: italic; font-size: 22px; margin-top: -1%;}
.strategy-tag{width:100%; max-width:880px; border-top:1px solid #fff; border-bottom:1px solid #fff; padding:20px 0; margin-top: 3%;}
#strategyText p~p{margin-top: 2.5%;}



/* WORK */

#workText{padding: 14% 0 9.5%;}
#work h1, #work h2{color: #6e3a96;}
#work h2{margin-bottom: 5%;}
.intro-cols{position:relative; -moz-column-count: 2; -moz-column-gap: 120px; -webkit-column-count: 2; -webkit-column-gap: 120px;}

#workThumbs{padding-bottom: 17%;}
.thumbsWrap{text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; font-size: 0px;}
.thumbs~.thumbs{margin-top: 3%;}
.thumbs a{width:23.5%; max-width: 210px; display: inline-block; vertical-align: middle; position: relative;}
.thumbs a img{width: 100%; position: relative; z-index: 0;}
.thumb-hover-wrap{width:100%; height:100%; display: table; vertical-align: middle; position: absolute; border-radius:100%; top:0; left:0; z-index: 1; opacity:0; filter:alpha(opacity=0);}
.thumb-hover{width:100%; height:100%; text-align: center; vertical-align: middle; display: table-cell; border-radius:100%; color: #bf6bff; background-color:rgba(110,58,150,.9);}
.thumb-hover .icon-watering{font-size: 82px; margin-left: 5%; width: 100%; display: inline-block;}
.thumb-hover p{font:700 15px 'Ubuntu', sans-serif; text-transform: uppercase; color: #bf6bff; margin-top: 10%; width: 100%; display: inline-block;}

#lightbox{display: none; opacity:0; filter:alpha(opacity=0); position: absolute; top: 0; left: 0; z-index: 50;}
#lb-cover{width: 100%; height: 100%; position: fixed; top:0; left:0; background-color: #353228; opacity:.95; filter:alpha(opacity=95); z-index: 50;}
#lightbox-contents{width: 100%; height: 100%; position: fixed; top:0; left:0; z-index: 51;}
#lightbox .contentContainer{height: 100%;}
#lb-screen{width:90%; height:90%; max-height: 675px; background-color: #fff; border-radius: 8px; box-shadow: 4px 4px 5px rgba(0,0,0,.2); display: block; margin: 0 auto; position: relative; overflow: hidden;}
.lb-screen-holder{display: table; text-align: center; vertical-align: middle; width: 100%; height: 100%; padding: 10%; position: absolute; visibility: hidden;}
.lb-screen-holder[data-num="1"]{visibility: visible;}
.lb-img{width:100%; height: 100%; display: table-cell; text-align: center; vertical-align: middle; }
.lb-screen-holder img{width: 100%; max-width: 660px;}

#lb-controls{position: absolute; top: 0; left: 0; width:100%; height:100%;}
#lb-logo{position:absolute; top:0; left:50%; margin-left: -25px; width: 50px; height: 50px; background-color: #eaeaea; text-align: center;}
#lb-logo span{font-size: 32px; margin-left: 5px; line-height: 50px; color: #c9c9c9;}
#lb-controls a{color: #b0aeaa; width: 100%; height: 100%; display: block; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; -o-transition:color 0.2s linear; transition:color 0.2s linear;}
#lb-controls a:hover{color: #000;}
#lb-close{position:absolute; bottom:12px; left:50%; margin-left: -25px; width: 50px; height: 50px; font-size: 24px; line-height: 50px; text-align: center;}
#lb-back{position:absolute; left:1.5%; top:50%; margin-top: -25px; width: 50px; height: 50px; font-size: 30px; line-height: 50px; text-align: center;}
#lb-next{position:absolute; right:1.5%; top:50%; margin-top: -25px; width: 50px; height: 50px; font-size: 30px; line-height: 50px; text-align: center;}



/* CONTACT */

#contact{height: 1099px; background: url(../images/contactbg.jpg) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#contact .contentContainer{height: 100%;}
#contactText{padding: 16% 0 6.5%;}
#contactText h1{color: #fff; margin-bottom: 2.5%;}
#contactText p{font:300 24px/170% 'Merriweather', serif; color: #fff; margin-bottom: 8%;}
.vline{padding: 0 20px;}
#contactText p a{color: #fff; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear; -o-transition:opacity 0.2s linear; transition:opacity 0.2s linear;} #contactText p a:hover{opacity:.7; filter:alpha(opacity=70);}
#contact-btn{font:700 16px/16px 'Ubuntu', sans-serif; color: #fff; text-transform: uppercase; padding: 18px 20px; border: 1px solid #fff;}
#contact-btn span{font-size: 28px; margin-top: -4px; margin-left: 25px; display: inline-block; vertical-align: middle;}
#contact-btn{background-color: rgba(255,255,255,0); -webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; -o-transition:background-color 0.2s linear; transition:background-color 0.2s linear;}
#contact-btn:hover{background-color: rgba(255,255,255,.3);}


/* FOOTER */

#footerContainer{width: 100%; min-width: 1040px; position: relative;}
#footerContents{width: 1040px; margin:0 auto;}





/* RESPONSIVE ********************************************************************* */

@media screen and (max-width:1000px){
	 #quotes .contentContainer{padding: 0 8%;}
	 #sideNav{right:4%;}
}


/* COLUMN ADJUSTMENTS */

@media screen and (max-width:700px){.intro-cols{-moz-column-gap: 80px;-webkit-column-gap: 80px;}}



/* GLOBAL NAV */

@media screen and (max-width:960px){
	#globalNav .navspacer{padding: 0 4%;}
	#navLogo{margin-right: 4%;}
}
@media screen and (max-width:780px){
	#globalNav .navspacer{padding: 0 3%;}
	#navLogo{margin-right: 3%;}
}
@media screen and (max-width:680px){
	#globalNav .navspacer{padding: 0 2%;}
	#navLogo{margin-right: 2%;}
}
@media screen and (max-width:600px){
	#navLogo{width: 50px;}
	#globalNav a, #globalNav .navspacer{font: 500 14px/60px 'Ubuntu', sans-serif;}
	#navLogo a>div{width: 50px !important;}
	#navLogo div>div{width: 48px; height: 75px;} 
	#navLogo span{font-size: 42px; padding-left: 7px;}
}
@media screen and (max-width:530px){
	#globalNav .navspacer{padding: 0 1%;}
	#navLogo{margin-right: 1%;}
}



/* MOBILE */

@media screen and (max-width:480px){
	#mobile-logo, #mobileNavWrap{display: block;}
	#navContainer{height: 44px; position: relative;}
	#mobile-g{position: absolute; top: 0; right: 0; width: 46px; height: 44px; background-color: #99ca3c; text-align: center; display: table;}
	#mobile-g span{display: table-cell; vertical-align: middle;}
	
	#navContainer{position: fixed; top: 0; left: 0;}
	#globalNav, #home-logo, #sideNav, #navSpacer{display: none;}
	#intro h2, #services h2, #work h2{padding: 4% 0; margin: 5% 0;}
		
	#hero{padding-left: 5%}
	#hero a{width:100%; margin-left:-5%; height: auto; display: block; font:700 13px/45px 'Ubuntu', sans-serif; color: #fff; text-transform: uppercase; padding:0px; border:none; background-color: #99ca3c; position: absolute; bottom:0;}
	#hero a span{font-size: 20px; margin-top: -4px; margin-left: 10px; display: inline-block; vertical-align: middle;}
	
	/* hide all home sections except hero */
	section{display: none;}
	#hero, #navContainer{display: block;}
		
	#intro, #services, #work, #contact{padding:25px 5% 0;}
	section p{font:300 13px/20px 'Ubuntu', sans-serif;}
	
	/* about section */
	.intro-cols{-moz-column-count: 1; -webkit-column-count: 1;}
	.col-divider{display: none;}
	
	/* services section */
	.servicesBox{width: 100%; max-width: 100%; display: inline-block; vertical-align: top; text-align: center; padding-bottom: 0; margin: 0 auto;}
	#servicesBoxes{margin-bottom: 6%;}
	#servicesBoxes img{max-width:150px; margin: 0 auto;}
	#servicesBoxes h2{margin-top: 4%;}
	.servicesBox~.servicesBox{margin-top: 10%;}
	#servicesBoxes li{font:300 13px/20px 'Ubuntu', sans-serif;} #servicesBoxes li~li{margin-top: 3%;}
	
	/* contact section */
	#contact{height: 100%; margin-top: 0; background: url(../images/contactbg.jpg) left top no-repeat; background-size: auto 150%;}
	#contactText{padding: 16% 0 6.5%;}
	#contactText h1{color: #fff; margin-bottom: 3.5%;}
	#contactText p{font:300 24px/130% 'Merriweather', serif; color: #fff; margin-bottom: 14%;}
	.vline{opacity:0; filter:alpha(opacity=0); height:1px; display: block;}
	#contactText p a[href^="mailto"]{margin-bottom: -5px; display: block;}
	
	/* work section */
	.thumbs~.thumbs{margin-top: 0;}
	.thumbs a{width:45.5%; margin-bottom: 3%; max-width: 210px; display: inline-block; vertical-align: middle; position: relative;}

}



/* ADDED FOR RETINA */

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2)
{
}