/*
Theme Name: Theme Name
Author: Slick Design
Author URI: http://www.slickdesign.com.au
Description: Website template for ---
Version: 1.0
*/

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Roboto:400,300);
html {zoom:1;}
body, div, article, section, header, footer {padding:0;margin:0;font-family: 'Roboto', sans-serif;font-weight:300;}
body {background:url('images/cream_pixels.png');}
h1, h2, h3 {font-family: 'Droid Sans', sans-serif;}
* { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;	box-sizing: border-box;}
a, a:hover {-webkit-transition: all 0.25s ease-out;-moz-transition: all 0.25s ease-out;-o-transition: all 0.25s ease-out;transition: all 0.25s ease-out;text-decoration:none;}
.full-width-wrapper {width:100%;float:left;}
header, footer, .wrapper {
	width:960px;
	position:relative;
	margin:0 auto;
	padding:0;
}
footer {overflow:hidden;}
header {min-height:534px;}
.top_banner {background:#252625 url('images/top-banner.png') no-repeat center top;}
.top_banner h1 {display:block;clear:both;margin-top:30px;float:left;}
.logo-holder {float:left;margin:40px 0 0 0;width:184px;clear:both;}
.white_txt {color:#FFFFFF;}

/* NAV BAR */
.navigation-bar {
	position: absolute;
	top: 0;
	right: 0;
	width:80px;
	height:230px;
}
.home-position {position:absolute;top:0;left:0;}
.about-position {position:absolute;top:40px;right:0;}
.case-position {position:absolute;top:80px;left:0;}
.work-position {position:absolute;top:120px;right:0;}
.contact-position {position:absolute;top:160px;left:0;}

.nav-flip-container {cursor:pointer;}

/* HOME */
.header-button-holder {float:left;margin:30px 0 0 0;clear:both;cursor:pointer;}
.our-work-holder {position:absolute;right:318px;bottom:78px;width:142px;height:142px;cursor:pointer;}
.casestudies-holder {position:absolute;right:123px;top:199px;width:142px;height:142px;cursor:pointer;}
.contactus-holder {position:absolute;right:59px;bottom:80px;width:142px;height:142px;cursor:pointer;}
.aboutus-holder {position:absolute;right:210px;top:54px;width:142px;height:142px;cursor:pointer;}
.no-overflow {overflow:hidden;}

/* ABOUT */
.about_banner {background:url('images/top-banner.png') no-repeat center bottom;min-height:36px;margin-bottom:50px;}
.about-text {width:620px;float:left;margin-right:20px;margin-bottom:50px;}
.about-icons {float:right;background:url('images/about_nicki.png') no-repeat left center;width:280px;height:300px;padding:20px 0 0 145px;margin-top:400px;}
.about-icons .name {font-size:1.2em;margin:0;}
.work-samples-holder {width:620px;float:left;}
.work-samples-holder a {background:#D94141;color:#FFFFFF;display:inline-block;padding:4px;margin:4px 4px 4px 0;}
.work-samples-holder a:hover {color:#000000;background:#FFFFFF;}

/* CASES */
.case_map_canvas {height:700px;background:#000000;}
.red_bg {background:#D94141;}
.pdf-link {font-family: 'Roboto', sans-serif;font-weight:300;color:#FFFFFF;text-decoration:none;background:url('images/white-dot.png') repeat-x left bottom;position:absolute;top:16px;right:0;background-size:2px;}
.pdf-link:hover {background:#252625 url('images/white-dot.png') repeat-x left bottom;background-size:2px;}

/* SCROLLING BANNER */
#scroller {list-style:none;}
#scroller li {float:left;}
.scroll-bar {width: 100%;overflow: hidden;background: #FFFFFF;margin:0 auto;}
/* Container DIV - automatically generated */
.simply-scroll-container { position: relative;}
/* Clip DIV - automatically generated */
.simply-scroll-clip { position: relative;overflow: hidden;}
/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list { overflow: hidden;margin: 0;padding: 0;list-style: none;}	
.simply-scroll-list li {padding: 0;margin: 0;list-style: none;}	
.simply-scroll-list li img {border: none;display: block;}
.simply-scroll is default base class */
/* Container DIV */
.simply-scroll {width:100%;height:100px;margin-bottom: 1em;}
/* Clip DIV */
.simply-scroll .simply-scroll-clip {width:100%;height: 100px;}	
/* Explicitly set height/width of each list item */	
.simply-scroll .simply-scroll-list li {float:left;width:100px;height: 100px;}

/* OUR WORK */
.our_work {background:#252625;padding-top:40px;}
.hex-grid-holder {height:630px;width:600px;position:relative;float:left;}
.hex-preview {height:500px;width:360px;float:right;}
.ourwork-block {position:absolute;width:150px;height:150px;}
.melcup {top:0;left:0;}
.cruise {top:126px;left:-75px;}
.vinaceous {top:126px;left:75px;}
.hismaj {top:0;left:150px;}
.beargrylls {top:126px;left:225px;}
.lifeline {top:252px;left:150px;}
.revesco {top:252px;left:300px;}
.dannygreen {top:126px;left:374px;}
.captain {top:0;left:448px;}
.capital {top:378px;left:75px;}
.covey {top:378px;left:374px;}
.flws {top:252px;left:448px;}
.sotheycan {top:127px;left:520px;}

.redhex1 {top:256px;left:15px;opacity:0.6;}
.redhex2 {top:383px;left:-58px;opacity:0.2;}
.redhex3 {top:383px;left:535px;opacity:0.4;}
.redhex4 {top:510px;left:462px;opacity:0.2;}
.redhex5 {top:-1px;left:608px;}

.hex-preview {display:none;position:absolute;top:50px;right:0;z-index:101;}
.hex-preview:after {content:"X";color:#FFFFFF;position:absolute;top:10px;left:10px;font-weight:700;width:20px;height:20px;background:#252625;text-align:center;cursor:pointer;z-index:101;}
.hex-preview img {width:400px;border:4px solid #FFFFFF;box-shadow:0 0 200px #000000;}

/* CONTACT */
.contact {background:#D94141;padding-top:40px;padding-bottom:50px;}
.contact-form {width: 200px;height: 266px;float:left;padding-right:20px;}
.contact-form p {color: #AAAAAA;text-size: 0.7em;}
input:focus,
select:focus,
textarea:focus,
button:focus 
{outline: none;}

.wpcf7-text, .wpcf7-textarea {padding:4px;margin-bottom:4px;width:100%;}
.wpcf7-submit {background:transparent;border:0;color:#FFFFFF;font-size:1.1em;text-align:left;cursor:pointer;}
.screen-reader-response {display:none;}

.location-map {width:285px;height:267px;float:left;}

.contact-info {margin-left:20px;float:left;width:355px;}
.contact-info p, .contact-info h2 {margin:0 0 4px 0;}

/* FOOTER */
.footer {background:url('images/cream_pixels.png');;margin-top:40px;padding-top:20px;padding-bottom:50px;}
.author {width:50%;float:right;text-align:right;}
.author a {text-decoration:none;color:#000000;font-size:0.8em;}
.copyright {width:50%;float:left;font-size:0.8em;}

/* Smartphones (portrait and landscape) ----------- */
.mob-menu-icon, .mob-menu, .mob-only-pdf-link, .client-list {display:none;}
.find-us, .call-us, .email-us, .mob-readmore-button {display:none;}
@media
only screen and (max-width : 480px) {
	html, body {
		max-width: 100%;
		overflow-x: hidden;
	}
	.mob-hide {display:none;}
	.mob-menu {
		display:block;
		width:100%;
		display:none;
		padding-top:33px;
	}
	.mob-menu a {
		width:100%;
		display:block;
		clear:both;	
		background:#D94141;
		height:44px;
		text-decoration:none;
		color:#FFFFFF;
		font-weight:400;
		padding:11px 5%;
	}
	.mob-menu-icon {
		display:block;
		width:50%;
		height:80px;
		position:absolute;
		top:7px;right:0;
		cursor:pointer;
		text-align:right;
		z-index:101;
	}
	.mob-menu-icon img {width:64px;margin:5%}
	.wrapper {width:100%;padding:0 5%;}
	header {width:100%;min-height:380px;padding:2.5%;}

	.work-samples-holder{float: none;width: 100%;}
	
	/* HOME */
	.our-work-holder, .contactus-holder, .casestudies-holder, .aboutus-holder, .navigation-bar {display:none;}
	.logo-holder {margin:20px 2.5% 0 2.5%;}
	.top_banner {background:#252625;}
	.top_banner h1 {font-size:2em;margin-left:2.5%;}
	.header-button-holder {display:none;}
	
	/* ABOUT */
	.about_banner {display:none;}
	.about-text {width:100%;margin-bottom:0;}
	.mob-readmore {display:none;}
	.mob-readmore-button {display:block;}
	.about-icons {width:100%;margin-top:10px;}
	
	/* CASE */
	.mob-only-pdf-link {display:block;font-family:'Roboto',sans-serif;font-weight:300;color:#FFFFFF !important;text-decoration:none;background:url('images/white-dot.png') repeat-x left bottom;background-size:2px;width:100%;display:block;margin-bottom:30px;text-align:center;padding:8px;}
	.case_map_canvas {display:none;}
	
	/* OUR WORK */
	.hex-grid-holder {width:100%;}
	.redhex1, .redhex2, .redhex3, .redhex4, .redhex5 {display:none;}
	.ourwork-block {position:relative;top:initial;left:initial;float:left;height:132px;}
	.ourwork-block:nth-of-type(2n) {margin-left:75px;}
	.client-list {position:absolute;top:132px;left:161px;width:148px;height:170px;display:block;}
	.contact-info {width:100%;}
	
	/* CONTACT */
	.location-map {width:100%;}
	.contact-info {margin:30px 0 15px 0;}
	.contact-buttons {display:block;width:100%;float:left;background:#252625;padding:0 2.5% 2.5% 2.5%;}
	.contact-buttons a {text-decoration:none;}
	.contact-form {width:100%;padding:0;}
	.find-us, .call-us, .email-us {display:block;text-decoration:none;color:#FFFFFF;background:#D94141;text-align:center;margin:2.5%;height:40px;padding-top:6px;}
	.find-us {margin-top:5%;}
	.find-us p, .call-us p, .email-us p {margin:0;} 
	.call-us, .email-us {width:45%;float:left;}
	#find-us {padding-bottom: 5px; vertical-align: middle; position: relative; top: initial; left: initial; width: 27px; margin-left: 5px;}
	#call-us {padding-bottom: 5px; padding-top:2px; padding-left:1px; vertical-align: middle; position: relative; top: initial; left: initial; width: 27px; margin-left: 0px;}	
	#email-us {padding-bottom: 5px; vertical-align: middle; position: relative; top: initial; left: initial; width: 27px; margin-left: 5px;}
	
	/* FOOTER */
	footer {width:100%;padding:5%;}
	.footer {margin-top:0;}
	.copyright {padding-top:5px;}
}
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	html {zoom:0.76;}
}

/* Flipping service CSS - David Walsh */
/* entire container, keeps perspective */
.flip-container {-webkit-perspective: 1000;-moz-perspective: 1000;-o-perspective: 1000;-ms-perspective: 1000;perspective: 1000;}
/* flip the pane when hovered */
.flip-container.hover .flipper, .flip-container.flip .flipper {-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-o-transform: rotateY(180deg);-ms-transform: rotateY(180deg);transform: rotateY(180deg);}
.flip-container, .front, .back {width:24px;height:24px;background-size:cover;background-repeat:no-repeat;float:right;}
/* flip speed goes here */
.flipper {-webkit-transition: 0.6s;-webkit-transform-style: preserve-3d;-moz-transition: 0.6s;-moz-transform-style: preserve-3d;-o-transition: 0.6s;-o-transform-style: preserve-3d;-ms-transition: 0.6s;-ms-transform-style: preserve-3d;transition: 0.6s;transform-style: preserve-3d;position: relative;}
/* hide back of pane during swap */
.front, .back {-webkit-backface-visibility: hidden;backface-visibility: hidden;position: absolute;top: 0;left: 0;}
/* back, initially hidden pane */
.back {-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-o-transform: rotateY(180deg);-ms-transform: rotateY(180deg);transform: rotateY(180deg);z-index: 2;}

.nav-flip-container {-webkit-perspective: 1000;-moz-perspective: 1000;-o-perspective: 1000;-ms-perspective: 1000;perspective: 1000;}
/* flip the pane when hovered */
.nav-flip-container.hover .nav-flipper, .nav-flip-container.flip .nav-flipper {-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-o-transform: rotateY(180deg);-ms-transform: rotateY(180deg);transform: rotateY(180deg);}
.nav-flip-container, .nav-front, .nav-back {width:50px;height:50px;}
/* flip speed goes here */
.nav-flipper {-webkit-transition: 0.6s;-webkit-transform-style: preserve-3d;-moz-transition: 0.6s;-moz-transform-style: preserve-3d;-o-transition: 0.6s;-o-transform-style: preserve-3d;-ms-transition: 0.6s;-ms-transform-style: preserve-3d;transition: 0.6s;transform-style: preserve-3d;position: relative;}
/* hide back of pane during swap */
.nav-front, .nav-back {-webkit-backface-visibility: hidden;backface-visibility: hidden;position: absolute;top: 0;left: 0;}
/* back, initially hidden pane */
.nav-back {-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-o-transform: rotateY(180deg);-ms-transform: rotateY(180deg);transform: rotateY(180deg);z-index: 2;}