/*
Theme Name: K9 Ventures
Theme URI: http://www.k9ventures.com/
Description: A custom Wordpress theme for K9 Ventures
Version: 99999.0
Author: Joshua Merrill
Author URI: http://josh.io
*/

/* --------------- [CONVENIENCE] --------------- */
.pull-left {
  float:left;
}
.pull-right {
  float:right;
}
.reset-margins {
  margin:0;
}
.text-center {
  text-align:center;
}
.text-right {
  text-align:right;
}
.hidden {
  display:none;
}
.bold, strong {
	font-weight:600;	
}

/* --------------- [GLOBAL STYLES] --------------- */
body {
  background-color:#161A1C;
  font-family:'Lato','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:14px;
  color:#555555;
  -webkit-text-size-adjust: none;  /* prevent font sizes from changing in iphone landscape mode */
  overflow-x:hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}
img {
  max-width:100%;
}

body #wrapper {
	-webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
	-moz-transition: -moz-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
	-o-transition: -o-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
	-ms-transition: -ms-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
	transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
    position:relative;
    margin-left:80px;
	-webkit-transform:translateX(0px);
	-moz-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
	opacity:1;
	box-shadow:0px 0px 20px rgba(0,0,0,0.3);
	background-color:#212528;
	left:0;
}
@media (max-width: 1024px) {
	body #wrapper { margin-left:0; }
}
body.shownav #wrapper {
	-webkit-transform:translateX(280px);
	-moz-transform:translateX(280px);
	-o-transform:translateX(280px);
	-ms-transform:translateX(280px);
	transform:translateX(280px);
	opacity:0.5;
}
@media (min-width: 768px) and (max-width: 1024px) {
	body.shownav #wrapper {
		-webkit-transform:translateX(295px);
		-moz-transform:translateX(295px);
		-o-transform:translateX(295px);
		-ms-transform:translateX(295px);
		transform:translateX(295px);	
	}
}
@media (max-width: 767px) {
	body.shownav #wrapper {
		-webkit-transform:translateX(240px);
		-moz-transform:translateX(240px);
		-o-transform:translateX(240px);
		-ms-transform:translateX(240px);
		transform:translateX(240px);	
	}
}

/* --------------- [TYPOGRAPHY] --------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight:300;
  margin-bottom:1em;
  line-height:1.3;
}
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 16px; font-weight:600; letter-spacing:2px; line-height:2; text-transform:uppercase; }
h4 { font-size: 14px; letter-spacing:1px; }
h5 { font-size: 13px; }
h6 { font-size: 11px; }

@media (min-width: 768px) and (max-width: 1024px) {
	h1 { font-size: 22px; }
	h2 { font-size: 16px; }
	h3 { font-size: 14px; font-weight:600; letter-spacing:2px; line-height:2; text-transform:uppercase; }
	h4 { font-size: 13px; letter-spacing:1px; }
	h5 { font-size: 12px; }
	h6 { font-size: 11px; }
}
@media (max-width: 767px) {
	h1 { font-size: 18px; }
	h2 { font-size: 14px; }
	h3 { font-size: 13px; font-weight:600; letter-spacing:2px; line-height:2; text-transform:uppercase; }
	h4 { font-size: 12px; letter-spacing:1px; }
	h5 { font-size: 11px; }
	h6 { font-size: 10px; }
}

b, strong {
	font-weight:600;
}

p {
  line-height:2;
  font-size:14px;
  color:#666668;
  font-weight:300;
  margin-bottom:30px;
  letter-spacing:1px;
}
a {
	text-decoration:none;	
	color:#666668;
	font-weight:400;
}
.content.slate a {
	color:white;  /* make links white on dark backgrounds */
}
a:hover {
	text-decoration:underline;	
}
em { 
	font-style:italic;
}
ul.bulleted {
	margin-bottom:20px;
}
ul.bulleted li {
	margin-left:20px;	
    /* color: #666668; */
    color:#BBBBBB;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 2;
}
ul.bulleted li:before {
	content: "\25BA \0020";
    float: left;
    font-size: 8px;
    margin: 5px 0 0 -20px;
    color:#BBBBBB;
}
blockquote {
	margin-left:20px;
}

/* classes for wordpress image alignment */
.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}
.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}


/* --------------- [INPUT PLACEHOLDERS] --------------- */

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #cccccc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #e7e7e7;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #e7e7e7;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #cccccc;
}

/* --------------- [BUTTONS] --------------- */

.button, 
.form-submit input[type=submit] {  /* second selector is for the button in comments form */
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    border-radius:100px;
    padding:9px 16px;
    font-weight:400;
    display:inline-block;
    border:none;
}
.button:hover,
.form-submit input[type=submit]:hover {
	text-decoration:none;
}
.button:active,
.form-submit input[type=submit]:active {
	padding:10px 16px 8px;
}

/* dark button */
.button.dark,
.form-submit input[type=submit] {  /* post comment button will be dark by default */
	color:#cccccc;
	background-color:#19191C;
}
.button.dark:hover,
.form-submit input[type=submit]:hover {
	background-color:#202024;	
}
.button.dark:active,
.form-submit input[type=submit]:active {
	background-color:#19191C;	
	box-shadow:0px 1px 1px rgba(0,0,0,1) inset;
}

/* light button */
.button.light {
	color:gray;
	background-color:#E2E3E6;
}
.button.light:hover {
	background-color:#EAEBED;	
}
.button.light:active {
	background-color:#E2E3E6;	
	box-shadow:0px 1px 1px rgba(0,0,0,0.1) inset;
}
/* large button */
.button.large {
	font-size:16px;
	padding:12px 20px;
}
.button.large:active {
	padding:13px 20px 11px;
}


/* --------------- [HEADER] --------------- */

header {
	position:relative;
	z-index:2;
}

/* menu button */
header .menu-button {
	display:none;	
}
@media (max-width: 1024px) {
	header .menu-button {
		float:left;
		margin-top:30px;
		height:46px;
		width:46px;
		display:block;
		background-image:url(/wp-content/uploads/2013/06/menu-button.png);
		background-color:#1b1f22;
		background-repeat:no-repeat;
		background-position:center center;
		background-size:100% 100%;
		cursor:pointer;
	}
}
@media (max-width: 767px) {
	header .menu-button { margin-top:10px; margin-left:-10px; height:40px; width:40px; }	
}

/* logo */
header .logo {
	float:left;
	margin-top:40px;
	height:50px;
	width:50px;
	background:url(/wp-content/uploads/2013/06/logo.png) no-repeat center center transparent;
	background-size:100% 100%;
}
@media (min-width: 768px) and (max-width: 1024px) {
	header .logo { float:right; margin-top:30px; height:46px; width:46px; }	
}
@media (max-width: 767px) {
	header .logo { float:right; margin-top:10px; margin-right:-10px; height:40px; width:40px; }	
}
header .logo h1 {
	display:none;	
}

/* search */
header #search-inputs #s {
  background: url(/wp-content/uploads/2013/05/glass.png) no-repeat 8px center rgba(0,0,0,0.1);
  background-size:12px 14px;
  color:white;
  border:none;
  box-shadow:0px 1px 1px rgba(0,0,0,0.2) inset, 0px 1px 0px rgba(255,255,255,0.05);
  border-radius:100px;
  padding:6px 10px 6px 30px;
  font-family:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  margin:52px 0 0 0;
  width:70px;
  font-weight:400;
  -webkit-transition: width 0.4s ease-in-out;
  -moz-transition: width 0.4s ease-in-out;
  -o-transition: width 0.4s ease-in-out;
  -ms-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  letter-spacing:2px;
  font-size:12px;
  outline:none;
  cursor:pointer;
  float:right;
}
header #search-inputs #s:focus {
  width:180px;
  cursor:auto;
}

/* --------------- [NAV] --------------- */

nav {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  z-index:0;
  width:280px;
  -webkit-overflow-scrolling: touch;
  overflow-x:hidden;
  overflow-y:auto;
}

@media (max-width: 1024px) {
	nav {
		-webkit-transition: opacity 0.3s 0s ease-in-out;
		-moz-transition: opacity 0.3s 0s ease-in-out;
		-o-transition: opacity 0.3s 0s ease-in-out;
		-ms-transition: opacity 0.3s 0s ease-in-out;
		transition: opacity 0.3s 0s ease-in-out;
		opacity:0;
	}
	body.shownav nav { opacity:1; }
}

/* search */
nav #search-inputs #s {
  background: url(/wp-content/uploads/2013/05/glass.png) no-repeat 8px center rgba(0,0,0,0.1);
  background-size:12px 14px;
  color:white;
  border:none;
  box-shadow:0px 1px 1px rgba(0,0,0,0.2) inset, 0px 1px 0px rgba(255,255,255,0.05);
  border-radius:100px;
  padding:6px 10px 6px 30px;
  font-family:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  margin:40px 0 -8px 24px;
  width:182px;
  font-weight:400;
  letter-spacing:2px;
  font-size:12px;
  outline:none;
  cursor:pointer;
}
@media screen and (max-width: 767px) {
	nav #search-inputs #s { margin:20px 0 -6px 12px; width:160px; }
}


/* navigation */
nav .menu > ul > li {
	display:block;
	margin:16px 0 0 32px;
}
@media screen and (max-width: 768px) and (max-width: 1024px) {
	nav .menu > ul > li { margin:10px 0 0 32px; }
}
@media screen and (max-width: 767px) {
	nav .menu > ul > li { margin:2px 0 0 16px; }
}
nav .menu > ul > li:first-child {
	margin-top:34px;
}
@media screen and (max-width: 767px) {
	nav .menu > ul > li:first-child { margin-top:20px; }
}
nav .menu > ul > li > a {
	display:block;
	color:transparent;
	text-decoration:none;
	padding:11px 16px 11px 33px;
	font-size:12px;
	text-transform:uppercase;
	font-weight:400;
	letter-spacing:2px;
	background-repeat:no-repeat;
	background-size:16px 16px;
	background-position:left 9px;
	-webkit-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
 	-ms-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
 	opacity:0.5;
}
@media screen and (max-width: 1024px) {
	nav .menu > ul > li > a { font-weight:600; }
}
@media screen and (max-width: 767px) {
	nav .menu > ul > li > a { text-transform:none; letter-spacing:1px; }
}
nav .menu > ul > li.current_page_item > a {
	opacity:1;
	color:transparent;
}
body.shownav nav .menu > ul > li > a,
body.shownav nav .menu > ul > li > a:active {
	opacity:0.5;
	color:white;
}
body.shownav nav .menu > ul > li.current_page_item > a {
	opacity:1;
	color:white;
	cursor:default;
}
body.shownav nav .menu > ul > li > a:hover,
body.shownav nav .menu > ul > li.current_page_item > a {
	opacity:1;
	color:white;
}

@media (max-width: 1024px) {
	nav .menu > ul > li > a { color: white; }	/* links should not fade in on ipad/iphone */
	nav .menu > ul > li.current_page_item > a { color:white; } /* active page should not fade in */	
}



/* nav icons */
nav .menu > ul > li.page-item-47 > a { background-image:url(/wp-content/uploads/2013/05/icon_home.png); }
nav .menu > ul > li.page-item-2 > a { background-image:url(/wp-content/uploads/2013/05/icon_about.png); }
nav .menu > ul > li.page-item-9 > a { background-image:url(/wp-content/uploads/2013/05/icon_criteria.png); }
nav .menu > ul > li.page-item-43 > a { background-image:url(/wp-content/uploads/2013/05/icon_companies.png); }
nav .menu > ul > li.page-item-11 > a { background-image:url(/wp-content/uploads/2013/05/icon_team.png); }
nav .menu > ul > li.page-item-46 > a { background-image:url(/wp-content/uploads/2013/05/icon_blog.png); }
nav .menu > ul > li.page-item-44 > a { background-image:url(/wp-content/uploads/2013/05/icon_contact.png); }

/* social icons and search box */
nav .social {
	margin:70px 0 30px 32px;
	-webkit-transition: opacity 0.3s 0s ease-in-out;
	-moz-transition: opacity 0.3s 0s ease-in-out;
	-o-transition: opacity 0.3s 0s ease-in-out;
	-ms-transition: opacity 0.3s 0s ease-in-out;
	transition: opacity 0.3s 0s ease-in-out;
	opacity:0;
}
@media (max-width: 1024px) {
	nav .social { opacity:1; }	/* on ipad and iphone, these icons don't need to fade in */
}
body.shownav nav .social {
	opacity:1;	
}
nav .social li {
	float:left;	
	margin-right:16px;
}
@media (max-width: 767px) {  /* tighten up spacing on iphone */
	nav .social { margin: 18px 0 16px 15px; }	
	nav .social li { margin-right:10px; }	
}
nav .social li a {
	height:30px;
	width:30px;
	display:block;
	border-radius:30px;
	background-size:30px 30px;
	background-repeat:no-repeat;
	background-position:center top;
}
nav .social li a em {
	display:none;	
}

nav .social li a:active {
	background-position:center 1px;
	box-shadow:0px 1px 2px rgba(0,0,0,0.3) inset;
}

nav .social li.twitter a { background-image:url('/wp-content/uploads/2013/05/twitter.png');background-color:#1DACED; }
nav .social li.twitter a:hover { background-color:#1FB5FA; }
nav .social li.twitter a:active { background-color:#1BA1DE; }

nav .social li.facebook a { background-image:url('/wp-content/uploads/2013/05/facebook.png');background-color:#3A5998; }
nav .social li.facebook a:hover { background-color:#3F61A6; }
nav .social li.facebook a:active { background-color:#36528C; }

nav .social li.linkedin a { background-image:url('/wp-content/uploads/2013/05/linkedin.png');background-color:#417AA7; }
nav .social li.linkedin a:hover { background-color:#4582B3; }
nav .social li.linkedin a:active { background-color:#3C7099; }

nav .social li.googleplus a { background-image:url('/wp-content/uploads/2013/05/googleplus.png');background-color:#D6492F; }
nav .social li.googleplus a:hover { background-color:#E34D32; }
nav .social li.googleplus a:active { background-color:#C9452C; }

nav .social li.rss a { background-image:url('/wp-content/uploads/2013/05/rss.png');background-color:#E67D2F; }
nav .social li.rss a:hover { background-color:#F28432; }
nav .social li.rss a:active { background-color:#D9762C; }

/* miscellaneous links */
nav .misc {
	margin-left:32px;
	margin-bottom:30px;
}
@media (max-width: 767px) {   /* tighten up spacing on iphone */
	nav .misc { margin-left:16px; }	
}
nav .misc li {
	float:left;
	margin-right:20px;
}
nav .misc li a {
-webkit-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
   color:transparent;
   font-size:12px;
   letter-spacing:1px;
   font-weight:300;
   opacity:0.5;
}
body.shownav nav .misc li a,
body.shownav nav .misc li a:active {
	opacity:0.5;
	color:white;
}
body.shownav nav .misc li a:hover {
	opacity:1;
	color:white;
	text-decoration:none;
}
@media (max-width: 1024px) {
	nav .misc li a { opacity:0.5;color:white; }	/* on ipad/iphone, these links don't need to fade in */
}


/* mini k9 logo at bottom */
@media (min-width: 1025px) {
	nav:after {
		position:fixed;
		bottom:27px;
		content:' ';
		background:url(/wp-content/uploads/2013/05/logo_header.png) no-repeat center center transparent;
		background-size:24px 24px;
		height:24px;
		width:24px;
		left:27px;
		-webkit-transition: opacity 0.3s 0s ease-in-out;
		-moz-transition: opacity 0.3s 0s ease-in-out;
		-o-transition: opacity 0.3s 0s ease-in-out;
		-ms-transition: opacity 0.3s 0s ease-in-out;
		transition: opacity 0.3s 0s ease-in-out;
		opacity:1;
	}
}
body.shownav nav:after {
	opacity:0;	
}

/* copyright */
nav .copyright {
	-webkit-transition: opacity 0.3s 0s ease-in-out;
	-moz-transition: opacity 0.3s 0s ease-in-out;
	-o-transition: opacity 0.3s 0s ease-in-out;
	-ms-transition: opacity 0.3s 0s ease-in-out;
	transition: opacity 0.3s 0s ease-in-out;
	opacity:0;
	font-size:11px;
	font-weight:300;
	letter-spacing:1px;
	color:white;
	position:fixed; 
	bottom:35px; 
	left:27px;
}
body.shownav nav .copyright {
	opacity:0.5;	
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	nav .copyright { display:none; }	
}
@media screen and (max-width: 767px) {
	nav .copyright { display:none; }	
}


/* --------------- [HERO] --------------- */

.hero {
	background-color:black;	
	position:relative;
	background-position:center 0;
	background-repeat:no-repeat;
	background-size:1740px auto;
    z-index:1;
    margin-top:-100px;
    height:500px;
}
@media (min-width: 768px) and (max-width: 1024px) {
	.hero { height:400px; background-size:auto 400px; background-position:center 0 !important; }	
}
@media (max-width: 767px) {
	.hero { height:300px; background-size:auto 300px; background-position:center 0 !important; }	
}
.hero .parallax-content {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
@media (max-width: 1024px) {
	.hero .parallax-content { position:relative; }
}
.hero h1 {
    color: white;
    font-size: 46px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-top: 175px;
    margin-bottom:12px;
    text-transform: uppercase;
	-webkit-transition: opacity 0.6s 0.4s ease-in;
    -moz-transition: opacity 0.6s 0.4s ease-in;
    -o-transition: opacity 0.6s 0.4s ease-in;
    -ms-transition: opacity 0.6s 0.4s ease-in;
    transition: opacity 0.6s 0.4s ease-in;
    opacity:0;
    text-align:center;
}
.hero p {
    color: white;
    font-size: 20px;
    font-weight: 300;
	-webkit-transition: opacity 0.6s 0.8s ease-in;
    -moz-transition: opacity 0.6s 0.8s ease-in;
    -o-transition: opacity 0.6s 0.8s ease-in;
    -ms-transition: opacity 0.6s 0.8s ease-in;
    transition: opacity 0.6s 0.8s ease-in;
    opacity:0;
    text-align:center;
    margin:0 auto;
}
@media (max-width: 1024px) {
	.hero p { font-weight:400; }	
}
.hero a.button {
	margin-top:20px;
	-webkit-transition: opacity 0.6s 1.2s ease-in;
    -moz-transition: opacity 0.6s 1.2s ease-in;
    -o-transition: opacity 0.6s 1.2s ease-in;
    -ms-transition: opacity 0.6s 1.2s ease-in;
    transition: opacity 0.6s 1.2s ease-in;
    opacity:0;
}
.hero.loaded h1, 
.hero.loaded p,
.hero.loaded a.button {
	opacity:1;	
}

@media (min-width: 768px) and (max-width: 1024px) { 
	.hero h1 { font-size:40px; opacity:1; margin-top:145px; }  /* smaller font on ipad - and no fade in effect (it's janky) */
	.hero p { font-size:18px; opacity:1; }
}
@media (max-width: 767px) { 
	.hero h1 { font-size:28px; opacity:1; margin-top:120px; }  /* smallest font on iphone - and no fade in effect (it's janky) */
	.hero p { font-size:16px; opacity:1; }
}


/* --------------- [CONTENT] --------------- */
.content {
	background-color:white;
	padding:90px 0;
	position:relative;
	z-index:1;
}
@media (min-width: 768px) and (max-width: 1024px) { 
	.content { padding:60px 0; }  /* tighten things up on ipad */
}
@media (max-width: 767px) { 
	.content { padding:40px 0; }  /* tighten things up more on iphone */
}
.content h1 {
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0 0 40px;
    text-align: left;
    text-transform: uppercase;	
}

/* silver content */
.content.silver {
	background-color:#f0f0f0;	
}

/* slate content */
.content.slate {
	background-color:#2C2E30;
}
.content.slate h1, .content.slate h2, .content.slate h3, .content.slate h4, .content.slate h5, .content.slate h6 {
	color:white;	
}
.content.slate p {
	color:#BBBBBB;	
}

.content .roundimg {
	height:54px;
	width:54px;
	margin-bottom:20px;
}
@media (min-width: 768px) and (max-width: 1024px) { 
	.content .roundimg { height:50px; width:50px; }  /* smaller images on ipad */
}
@media (max-width: 767px) { 
	.content .roundimg { height:36px; width:36px;float:left;margin:-5px 15px 0 0; }  /* smallest images on iphone */
}

/* --------------- [FOOTER] --------------- */