/*
Theme Name: GKS Consulting
Author: Steve Starr & Ellytronic Media
Author URI: http://stephenbstarrdesign.com
Description: GKS Consulting
Version: 1.0
Text Domain: gks


TABLE OF CONTENTS:
# GENERAL #
1) Eric Meyer's CSS Reset 
2) Standard HTML Tags (except hyperlinks, forms, p, h1-h6 )
3) Hyperlinks
4) Forms
5) Primary Site Structure
6) Other structural & typography 
7) Sprites
8) One P CSS Grid

# PAGES #
10) Home Page
11) Secondary Pages
12) Blog 
13) Contact

# Browser Fixes #
30) IE
31) Safari < 7

# Media Queries #
50) Responsive
51) Print Layout

*/


/* #######################
# 1. RESET
####################### */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* #######################
# 2. Standard HTML Tags (except hyperlinks, forms, p, h1-h6 )
####################### */
html,
body {
	height: 100%;
}

body {
	background: #717171;
	color: #333333;
	min-width: 300px;

	/* base font settings */
	font-family: 'Open Sans', 'Arial', sans-serif;
	font-size: 90%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
}

section {
	padding: 45px 0 60px 0;
}

img {
	max-width: 100%;
}

strong,
b {
	font-weight: 700;
}

em,
i {
	font-style: italic;
}

blockquote {
	font-style: italic;
	padding: 1.5em;
}

pre,
code {
	font-family: serif;
}


/* #######################
# 3. Hyperlinks
####################### */
a,
a:link,
a:visited {
	color: #999;
	text-decoration: none;
}
a:active,
a:hover,
a:focus {
	color: #fff;
	text-decoration: none;
}

#header-primary li.current_page_item a,
#footer-primary li.current_page_item a {
	color: #fff;
}

.bg-primary a,
.bg-primary a:link,
.bg-primary a:visited {
	color: #000;
}
.bg-primary a:hover,
.bg-primary a:active,
.bg-primary a:focus {
	color: #fff;
}
.bg-content a,
.bg-content a:link,
.bg-content a:visited ,
.bg-white a,
.bg-white a:link,
.bg-white a:visited {
	color: #de2734;
}
.bg-content a:hover,
.bg-content a:active,
.bg-content a:focus,
.bg-white a:hover,
.bg-white a:active,
.bg-white a:focus {
	color: #000;
}

a img {
	border:none;
}

a.blog-title:hover h5,
a.blog-title:focus h5,
a.blog-title:active h5 {
	text-decoration: underline;
}


/* #######################
# 4. Forms
####################### */
input,
select,
textarea {
	background: transparent;
	border: 1px solid #000;
	padding: 17px 12px;
	box-sizing: border-box;
	color: #333;
}

input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
   text-transform: uppercase;
   color: #858585;
}
input:-moz-placeholder,
select:-moz-placeholder,
textarea:-moz-placeholder { /* Firefox 18- */
   text-transform: uppercase;
   color: #858585;
}
input::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder {  /* Firefox 19+ */
   text-transform: uppercase;
   color: #858585;
}
input:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder {
   text-transform: uppercase;
   color: #858585;
}


/* #######################
# 5. Primary Site Structure
####################### */

body.mobile #wpadminbar {
	/*display: none!important;*/
}

ul#mobile-social-search {
	background: #717171;
	width: 100%;
	box-sizing: border-box;
	padding: 1em 0;
	text-align: center;
}
	ul#mobile-social-search li {
		width: 30%;
		text-align: center;
		display: inline-block
	}
	ul#mobile-social-search li#mobile-search {
		width: 100%;
		padding: 0.5em 0.5em 0 0.5em;
		box-sizing: border-box;
	}
		li#mobile-search form {
			position: relative;
		}
			#mobile-search input#s {
				/*background: transparent url('images/search.png') no-repeat 5px 50%;*/
				border-radius: 25px;
				border: 1px solid #fff;
				outline: none;
				padding: 5px 10px 5px 10px;
				color: #fff;
				width: 90%;
				box-sizing: border-box;
			}
			#mobile-search button {
				background: transparent;
				border: 0;
				display: inline-block;
			    position: absolute;
			    right: 1.8em;
			    top: 0.15em;
			    padding: 0.2em 0.5em 0.1em 0.5em;
			    border-left: 1px solid #fff;
			    cursor: pointer;
			}

/*
ul#menu-mobile {
	width: 95%;
	padding: 0.5em 1em 1em 1em;
	box-sizing: border-box;
}
	ul#menu-mobile > li {
		color: #333;
	}
		ul#menu-mobile li {
		}
		ul#menu-mobile li a {
			display: block;
			padding: 4px 0;
			margin: 4px 0;
			color: #333;
		}
		ul#menu-mobile li a:hover,
		ul#menu-mobile li a:active,
		ul#menu-mobile li a:focus {
			color: #de2734
		}
		ul#menu-mobile li.menu-item-has-children > a::before {
		}
		ul#menu-mobile > li.active a::before {
		}
		ul#menu-mobile > li a {
		}
			ul#menu-mobile li.menu-item-has-children ul {
				display: none;
				padding-left: 1em;
			    list-style-type: none;
			    position: relative;
			    z-index: 6;
			}
			ul#menu-mobile li.active > ul {
				display: block !important;
			}
			ul#menu-mobile li ul li {
				display: block;
				padding: 10px 5px;
			}
				ul#menu-mobile li.menu-item-has-children ul.sub-menu li:last-child {
					border-bottom: 0;
				}
*/


header#header-primary {
	background-color: #000;
	height: 100px;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
}

	#mobile-menu-toggle {
		display: none;
		position: absolute;
		top: 0.8em;
		right: 0.8em;
		z-index: 50;
	}

	div#header-primary-gradient {
		/* fall back for older browsers */
		background-image: url('images/gradient-gray-tall.jpg');
		background-repeat: repeat-x;

		background-image: -moz-linear-gradient( 90deg, rgb(215,215,215) 0%, rgb(92,92,92) 100%);
		background-image: -webkit-linear-gradient( 90deg, rgb(215,215,215) 0%, rgb(92,92,92) 100%);
		background-image: -ms-linear-gradient( 90deg, rgb(215,215,215) 0%, rgb(92,92,92) 100%);
		height: 100%;
		width: 50%;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;

	}
	div#wrapper-header-content {
		position: relative;
		z-index: 3;	
		height: 100%;
		box-sizing: border-box;
	}


		#row-nav {
			position: absolute;
			top: 23px;
			width: 100%;
		}

			a#logo {
				display: inline-block;
				margin-right: 20px;
			}
				a#logo img {
					border-bottom: 3px solid #de2734;
					padding-bottom: 12px;
				}
			nav#nav-primary { 
				display: inline-block;
				position: relative;
			    top: -0.9em;
			    font-size: 90%
			}
				nav#nav-primary ul {
					list-style-type: none;
					display: inline-block;
				}
					nav#nav-primary ul li {
						display: inline-block;
						padding-right: 20px;
						margin-left: 0;
					}
						nav#nav-primary ul li:last-child {
							padding-right: 0;
						}

						nav#nav-primary ul li a {
							color: #ccc;

						}
                            nav#nav-primary ul li a:hover,
                            nav#nav-primary ul li a:focus,
                            nav#nav-primary ul li a:active {
                                color: #fff;
                            }
			ul#social-search {
				display: inline-block;
				list-style-type: none;
				float: right;
			}
				ul#social-search li {
					display: inline-block;
					margin-right: 10px;
					margin-left: 0;
				}
					ul#social-search li:last-child {
						margin-left: 10px;
						margin-right: 0;
					}
				ul#social-search input#s {
					background: transparent url('images/search.png') no-repeat 5px 50%;
					border-radius: 25px;
					border: 1px solid #fff;
					outline: none;
					padding: 5px 10px 5px 25px;
					color: #fff;
				}

#content-primary {
	padding-top: 85px;
	padding-bottom: 135px;
}

	#content-primary ul {
		list-style-type: disc;
	}
		#content-primary ul li {
			display: list-item;
			margin-left: 1.2em;
		}


footer#footer-primary {
	padding-top: 35px;
	padding-bottom: 80px;
	color: #fff;
	font-size: 95%;
}
	footer#footer-primary a {
		color: #fff;
	}



/* #######################
# 6. Other Structural & Typography
####################### */
#wrapper-header-content,
.wrapper-content {
	width: 1000px;
	margin: 0 auto;
}

.clearfix {
	clear: both;
}

/* Psuedo tables */
.table-row {
	display: table-row;
}
.table-cell {
	display: table-cell;
}
.valign-top {
	vertical-align: top;
}
.valign-middle {
	vertical-align: middle;
}
.valign-bot {
	vertical-align: bottom;
}


.row {
	display: block;
}

.block {
	display: block !important;
}
.inline-block {
	display: inline-block !important;
}
.inline {
	display: inline !important;
}


.alignleft {
	float: left;
	margin: 10px 10px 10px 0;
}
.alignright {
	float: right;
	margin: 10px 0 10px 10px;
}
.aligncenter,
.alignmiddle {
	float: none;
	display: block;
	margin:10px 0;
}

.center-text {
	text-align: center !important;
}

.marg-top-35 {
	margin-top: 35px!important;
}
.marg-top-45 {
	margin-top: 45px!important;
}
.marg-bot-25 {
	margin-bottom: 25px!important;
}
.marg-bot-35 {
	margin-bottom: 35px!important;
}
.marg-bot-45 {
	margin-bottom: 45px!important;
}

.padding-0 {
	padding:0 0 0 0!important;
}

#content-primary p,
#content-primary li {
	line-height: 1.6em;
	margin-bottom: 25px;
}
#footer-primary li {
	line-height: 1.8em;
}
#footer-primary p {
	line-height: 1.8em;
	margin-bottom: 25px;
}
h1 {
	text-align: center;
	color: #de2734;
	margin-bottom: 25px;
	font-weight: 400;
	font-size: 280%;
	letter-spacing: 1px;
}
h2 {
	text-align: center;
	color: #de2734;
	margin-bottom: 25px;
	font-weight: 400;
	font-size: 210%;
	letter-spacing: 0.1em;
}
h3 {
	text-align: center;
	color: #333;
	font-weight: 400;
	font-size: 150%;
	letter-spacing: 0.1em;
	line-height: 1.8em;
}
h4 {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 90%; /* should match primary nav */
	letter-spacing: 1px;
	line-height: 2.4em;
}
h5 {
	font-size: 120%;
	color: #333;
	font-weight: 600;
	line-height: 1.5em;
	margin-bottom: 10px;
}
h6 {
	text-transform: uppercase;
	font-size: 110%;
	color: #de2734;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 2em;
}

small {
	font-size: 95%;
	line-height: 1.5em;
}

a.button,
button.button {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	letter-spacing: 4px;

	display: inline-block;
	padding: 17px 5px;
	width: 280px;
	border-radius: 25px;
	border: 1px solid #fff;
	outline: none;
	box-sizing: border-box;

	cursor: pointer;
}
	.button:hover,
	.button:active,
	.button:focus {
		background: #717171 !important;
		border: 1px solid #fff!important;
	}

ol.no-bullets,
ul.no-bullets {
	list-style-type: none !important;
}
	ol.no-bullets li,
	ul.no-bullets li {
		display: block !important;
		margin-left: 0! important;
	}


.response {
    display: inline-block;
    margin: 1em auto;
    text-align: left;
    padding: 1em;
    min-width: 250px; /* should be near the width of the button */
}
.success {
	border-left: 5px solid #65B18D;
    background: rgba(101, 177, 141, 0.3);
}
.error {
	border-left: 5px solid #C70034;
    background: rgba(199, 0, 52, 0.3);
}

.date {
	text-transform: uppercase;
	color: #de2734;
	font-weight: 700;
	letter-spacing: 1px;
}


.color-primary {
	color: #de2734;
}
.color-secondary {
	color: #000;
}

.bg-primary {
	background: #de2734;
	color: #fff;
}
	.bg-primary h1,
	.bg-primary h2 {
		color: #fff;
	}
.bg-secondary {
	background: #000;
}
.bg-content {
	background: #ebebeb;
}
.bg-white {
	background: #fff;
}



/* #######################
# 7. Sprites
####################### */
.sprite {
	display: inline-block;
	background-image: url('images/sprites.png');
	background-repeat: no-repeat;
}
.sprite-search {
	background-position: 0 0;
	height: 16px;
	width: 16px;
}
.sprite-phone {
	background-position: -16px 0;
	height: 17px;
	width: 19px;
}
.sprite-email {
	background-position: -35px 0;
	height: 12px;
	width: 19px;
}
.sprite-linkedin {
	background-position: -54px 0;
	height: 21px;
	width: 22px;
}
.sprite-twitter {
	background-position: -76px 0;
	height: 21px; /* should be same height as linked in, even if graphic is shorter */
	width: 26px;
}
.sprite-bullseye-red-large {
	background-position: 0 -21px;
	height: 219px;
	width: 219px;
}
.sprite-bullseye-red-medium {
	background-position: -219px -44px;
	height: 170px;
	width: 170px;
}
.sprite-mobile-menu {
	background-position: -219px 0;
	height: 44px;
	width: 49px;
}


/* #######################
# 8. One P CSS Grid
####################### */
/* *********************************************************************************************************************
	One% CSS Grid - 12 Columns Fluid CSS Grid System

	Why One% ? Let’s count ...
		we have 12 columns (magic number divided by 2, 3, 4, 6)

		for 12 columns we need 11 margins

		so if we count margin 3%, then 3% * 11 margins = 33%

		and if we count width of 1 column 5.5%, than 5.5% * 12 columns = 66%

		in the end we have 33% + 66% = 99% aaand ???

		1% is still here so that's the name - One%

	2 starting options ? Let’s count a bit more ...
		1200px - perfectly fits 1280 screens
			12 columns
			margin 3% / 36px (full-width)
			col1 5.5% / 66px (full-width)

		1000px - perfectly fits 1024 screens
			12 columns
			margin 3% / 30px (full-width)
			col1 5.5% / 55px (full-width)
*/

/* *********************************************************************************************************************
 * Main container for all
 */
.onepcssgrid-1000, .onepcssgrid-1200 {
	margin: 0 auto;
	padding: 0 0 0 1%; /* THAT'S THE NAME ;) */
}

.onepcssgrid-1200 {
	max-width: 1220px;
}

.onepcssgrid-1000 {
	max-width: 1020px;
}

.onerow {
	clear: both;
}


/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
	float: left;
	margin: 0 3% 0 0;
}

.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
	margin: 0;
}

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
	width: 100%;
	height: auto;
	display: block;
}

/* *********************************************************************************************************************
 * Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math
 */
@media all and (min-width: 1024px) {
	.onepcssgrid-1000 {
		max-width: 1000px;
	}

	.onepcssgrid-1000 .onerow {
		padding: 0;
	}
}




/* #######################
# 10. Home Page
####################### */
body.home #click-menu {
	top: 5px;
}

body.home header#header-primary {
	height: 100%;
	width: 100%;
}

#row-branding {
	position: relative;
	top: 50%;
		transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
	img#gks-consulting {
		position: absolute;
		left: 0;
		top: 50%;
			transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}
	img#bullseye-home {
		display: block;
		margin: 0 auto;
	}
	span#gks-subtitle {
		position: absolute;
		left: 59%;
		top: 50%;
			transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		font-size: 180%;
		color: #fff;
		letter-spacing: 0.1em;
	}

#row-buttons {
	position: absolute;
	bottom: 60px;
	width: 100%;
	margin:0 auto;
	text-align: center;
}

	#row-buttons a.button {
		width: 400px;
		display: inline-block;
	}

	#row-buttons .left-buttons {
		box-sizing: border-box;
		display: inline-block;
		width: 49%;
		text-align: right;
		padding-right: 25px;
		float: left;
	}

	#row-buttons .right-buttons {
		box-sizing: border-box;
		display: inline-block;
		width: 49%;
		margin-left: 1%;
		text-align: left;
		padding-left: 25px;
		float: right;
	}


	a#for-your-organization {
		background: #000;
		border: 1px solid #fff;
		/*margin-right: 25px;*/
		margin-bottom: 25px;
	}

	a#agency-partner,
	a#biz-dev-coach {
		background: #de2734;
		border: 1px solid #de2734;
		/*margin-left: 25px;*/
	}

body.home div#content-primary {
	border-top: 10px solid #de2734;
	border-bottom: 10px solid #de2734;
	padding-top: 0;
	padding-bottom: 0;
}

	#gks-description {
		text-align: center;
	}
		#gks-description h3 {
			max-width: 810px;
			margin:0 auto;
		}

	#testimonials {
		text-align: center;
	}
		.testimonial {
			max-width: 285px;
			margin-left: auto;
			margin-right: auto;
		}
		.testimonial-author {
			max-width: 285px;
			margin-left: auto;
			margin-right: auto;
			font-weight: 700;
		}

	#about-gail {
	}
		#about-gail .shaded {
			padding: 1em;
			background: #d6d6d6;
			border-top: 5px solid #de2734;
			box-sizing: border-box;
		}

.home #contact {}
	.home #contact h3 {
		max-width: 810px;
		margin:0 auto;
	}

	.home #contact input {
		width: 225px;
		margin-left: 35px;
		margin-right: 10px;
	}

	.home #contact textarea {
		width: 525px;
		margin-left: 35px;
	}

.home .responsive-home-contact-sm {
	margin-bottom: 0!important;
	display: inline-block;
}


/* #######################
# 11. Secondary Pages (General)
####################### */
body #click-menu {
	top: 1.2em;
}

#header-secondary {
	border-bottom: 10px solid #de2734;
}

	#post-heading-corner {
		width: 300px;
		height: 270px;
		background: #000;
		position: relative;
		text-align: center;
	}
		#post-heading-corner .sprite-bullseye-red-large,
		#post-heading-corner .sprite-bullseye-red-medium {
			position: relative;
			top: -110px; /* half of image height */
			z-index: 5;
			margin-left: auto;
			margin-right: auto;
		}
		#post-heading-corner .sprite-bullseye-red-medium {
			display: none;
		}

		#post-heading-corner h4 {
			color: #fff;
			text-align: left;

			padding: 0 54px;
			position: absolute;
			bottom: 55px;
		}

.header-secondary-content {
	padding-top: 30px;
	padding-bottom: 125px;
    box-sizing: border-box;
}

body.page-template-template-john-strauss .header-secondary-content {
    padding-right: 30px;
}
body.page-template-template-john-strauss .header-secondary-content h1 {
    font-size: 250%;
}

.col-page-sidebar {
	float: left;
}
.col-page-content {
	float: right;
}



/* #######################
# 12. Blog Archive
####################### */

.recent-entries-title {
	border-top: 1px solid #333;
	margin-top: 7px;
	padding-top: 15px;
}

.recent-entries a,
.recent-entries a:link,
.recent-entries a:visited {
	color: #333;
}

.recent-entries a:active,
.recent-entries a:hover,
.recent-entries a:focus {
	color: #de2734;
}

ol.pagination-list {
	display: block !important;
	text-align: center !important;
}
	ol.pagination-list li {
		display: inline-block !important;
		padding: 0.5em;
		margin: 0!important;
	}

.readmore {
	text-transform: uppercase;
	font-weight: 600;
	display: inline-block;
	padding-left: 0.5em;
}




/* #######################
# 13. Content Page
####################### */
.page-template-contact input {
	width: 225px;
}



/* #######################
# 30. MSIE
####################### */
body.ie {}

/* #######################
# 31. Safari < 7
####################### */
body.safari {}


/* #######################
# 50. Responsive
####################### */
/* See responsive.css */



/* #######################
# 51. Print Layout
####################### */