/*
Theme Name: GetPressed Custom Theme
Author: Mario from GetPressed Inc.
Description: A custom theme for GetPressed.ca developed by GetPressed Inc.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Move down content because we have a fixed navbar that is 50px tall */

@import url('fonts.css');

body {
	padding-top: 64px;
	/*padding-bottom: 20px;*/
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, arial, sans-serif;

}

body p {
	font-size: 16px;
	line-height: 1.55em;
}

.clear {
	clear: both;
}

/* use a descendant selector here to target the .nav-bar-fixed-top class (our navbar) while it exists under the .admin-bar class (only while logged in, we used the body_class to
	add this class to our body tag). by this we can tell our nav to sit lower on the page in order to make room for the admin-bar only while the admin-bar is showing. */
.admin-bar .navbar-fixed-top {
	margin-top: 30px;
}

/* need to use wordpress's .current-menu-item class instead of bootstrap's .active class to style nav link text of current page. also add more specificity
   make nav links prettier with a background color */
.navbar-inverse .navbar-nav .current-menu-item > a {
	background-color: #515151;
	color: #FFF;
}

.navbar-inverse .navbar-nav .current-menu-item > a:hover {
	background-color: #515151;
	color: #FFF;
}

.navbar a {
	/* fix gab in bottom of menu items when active */
  	height: 51px;
}

/* add unicode arrow for any nav link with a sub mnenu. wordpress automatically signs a class .menu-item-has-children to any parent menu item.
   you create parent and child menu items from within the wordpress menu editor */
.menu-item-has-children > a:after {
	content: "\25BC";
	font-size: 0.8em;
	padding-left: 1em;
/*		position: relative;
		top: 36%;
		right: 3%;*/
}

@media (min-width: 768px) {
	.sub-menu {
		display: none;
		position: absolute;
		background: #222;
		padding: 10px 15px;
		width: 200px;		
	}
	li:hover .sub-menu {
		display: block;
	}
}

.sub-menu li {
	margin-bottom: 10px;
	list-style: none;
}

.sub-menu li:last-child {
	margin-bottom: 0;
}

.sub-menu a  {
	color: #999;
	text-decoration: none;
}

.sub-menu a:hover  {
	color: #fff;	
}	

.current-menu-item > a, .current-menu-parent > a {
	background: #000;	
}

.current-menu-parent li a {
	background: inherit;
}

.current-menu-parent .current-menu-item a {
	color: #fff;
	font-weight: bold;
}

.sidebar {
	margin-top: 30px;
	color: #444;
}

.sidebar h3 {
	color: #888;
}

.widget {
	margin-top: 25px;
}

article.post hr {
	margin: 50px 0;
}

.portfolio-piece img {
	/* here we set the width and height so the post thumbnails fit properly inside their containers. for some reason height doesnt need to be 100%, just need to be something higher than 0%. */
	/* but this simple trick looks like it works in place of the more complex hack used in the tutorial */
	width: 100%;
	height: 100%;
}

.aligncenter {
	display: block;
	margin: 0 auto;
}

.page-header {
	margin-top: 0;
}


/**********************
        SPACERS         ******************************************************************************************************
 **********************/

.spacer5 { height: 5px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer10 { height: 10px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer15 { height: 15px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer20 { height: 20px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer25 { height: 25px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer30 { height: 30px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer35 { height: 35px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer40 { height: 40px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer45 { height: 45px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer50 { height: 50px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer100 { height: 100px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer200 { height: 200px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }

/**********************
 START CUSTOM THEME CSS ******************************************************************************************************
 **********************/

.navbar-nav {
	float: right;
}

 /* create larger navbar so that it can fit a larger brand image. using min-hieght instead of height allows the mobile nav to remain intact. using .navbar-header instead of .navbar also allows the mobile menu to be larger and display correctly */
.navbar-header {
	min-height: 65px;
}

.navbar-brand img {
	width: 175px;
}

.navbar li>a {
	font: 1.5em 'bebas_neue';
	letter-spacing: 1px;
	padding-top: 25px;
	padding-bottom: 40px;
}

.navbar-nav>li.menu-item-48 a {
	background: #0b9bd5;
    color: #FFF;
    border-radius: 6px;
    padding-top: 9px;
    padding-bottom: 0;
    margin-top: 16px;
    margin-left: 10px;
    height: 40px;
}

.navbar-nav>li.menu-item-48 a:hover {
	background: #1CBBFB;
}

.section1 {
	background: url('images/bg1.jpg') no-repeat top center fixed;
	background-size: cover;
	padding-bottom: 1%;
}

.section1 img, .section2 img {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 800px;
}

.section2 img {
	max-width: 200px;
	margin-top: 2%;
	margin-bottom: 2%;
}

.section2, .section3 {
	padding-top: 3em;
	padding-bottom: 3em;
}

.section2 h2 {
	margin-bottom: 3%;
}

.g-recaptcha {
	margin-bottom: 15px;
}

.success {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
}

.error {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid rgba(185, 74, 72, 0.3);
  border-radius: 4px;
}

.section3 {
	/*background: url('bg2.png') repeat;*/
	background-color: #DDD;
	color: #FFF;
	min-height: 400px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.section3 h2 {
	margin-top: 3%;
	font-size: 400%;
	/*font-weight: 100;*/
	/*color: #D0D0D0;*/
	color: #0296b9;
	/*text-shadow: 0px 2px 3px #555;*/
}

.section3 p.lead {
	margin-bottom: 8%;
	color: #555;
}

.section3 img {
	max-width: 250px;
	display: block;
	margin: 0 auto;
	/*border-radius: 50%;*/
}

.section3 .col-xs-6 {
	margin-bottom: 2.5em;
}

.tab-pane {
	padding-top: 20px;
}

.archiveGrid h3 {
	font-size: 1em;
	text-align: center;
	height: 40px;
}

.archiveGrid img {
	display: block;
	margin: 0 auto;
}

footer {
	background-color: #0296b9;
	color: #FFF;
	padding: 10px 0;
	width: 100%;
	font: 1.5em 'bebas_neue';
}

.page-id-49 h2 {
	font: 4em "bebas_neue_book";
	text-align: center;
}

.pagination span a {
	color: #FFF;
}

nav.pagination {
	width: 100%;
}

/*rules for artwork page*/
.page-id-37 img {

	max-width: 100%;
	height: auto;
}

.guide-purpose img {
	width: 100%;
	max-width: 640px;
}

.guide-purpose {
	max-width: 700px;
	padding-left: 0;
}

.guide-purpose li {
	padding: 10px 10px;
}

.guide-style p {
	text-align: center;
	margin: 0 auto;
}

.guide-style img, .guide-brand img {
	max-width: 100%;
	margin: 0 auto;
	display: block;
}

.blueButton {
	background: #0b9bd5;
	color: #FFF;
	border-radius: 5px;
	padding: 8px;
	display: inline-block;
}

.retailbg {
	background: url('images/retail_branding.jpg') center center;
	background-size: cover;
}

.functionsbg {
	background: url('images/functions_events.jpg') center center;
	background-size: cover;
}

.promotionalbg {
	background: url('images/promotional.jpg') center center;
	background-size: cover;
}

.workwearbg {
	background: url('images/workwear.jpg') center center;
	background-size: cover;
}

.performancebg {
	background: url('images/performance.jpg') center center;
	background-size: cover;
}

.apparelbg {
	background: url('images/apparel.jpg') center center;
	background-size: cover;
}

.printingbg {
	background: url('images/printing.jpg') center center;
	background-size: cover;
}

.processbg {
	background: url('images/process.jpg') center center;
	background-size: cover;
}

.quotebg {
	background: url('images/quote.jpg') center center;
	background-size: cover;
}

/****************************
      FORMS CUSTOM CSS        ******************************************************************************************************
 ****************************/

 .formProducts li {
 	float: left;
 }

 input[type="text"], input[type="email"], textarea {
   background-color : #F7EFD7;
   height: 34px;
   border-radius: 4px;
 }

 label {
 	font-size: 1.1em;
 }

 input.form-control {
 	padding: 1.5em 1.5em;
 }

 textarea.form-control {
 	height: 200px;
 }

.gform_wrapper #gform_1 h2.gsection_title {
 	font-size: 2em;
 }

.gform_wrapper {
	max-width: 100% !important;
 }

/* styles for gravity forms */
.gf_style input[type="text"], input[type="email"], textarea {
 	padding: 1.5em 1.5em !important;
 	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
 	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
 	border: 1px solid #ccc;
 	border-radius: 4px;
 	font-size: 14px;
    line-height: 1.42857143;
 }

.formProductTitle {
	width: 100%;
    max-width: 150px;
    height: 60px;
    text-align: center;
 }

#input_1_34 img {
	display: block;
	margin: 0 auto;
}

#input_1_34 p {
	font-size: 14px;
}

#gform_1 h2 {
	font-family: 'Bitter';
}

#gform_1 .ginput_container ul li img {
	display: block;
	margin: 0 auto;
}

#field_1_33 .gfield_label, #field_1_9 .gfield_label, #field_1_24 .gfield_label, #field_1_20 .gfield_label, #field_1_22 .gfield_label, #field_1_48 .gfield_label {
	background: #0b9bd5;
	color: #FFF;
	font: 1.5em 'bebas_neue';
	border-radius: 5px;
	padding: 8px;
}


/****************************
 APPAREL CUSTOM POST TYPE CSS ******************************************************************************************************
 ****************************/

.featuredImageContainer .wp-post-image {
	margin: 0 auto;
	display: block;
	max-width: 90%;
	height: auto;
}

.featuredImageContainer {
	min-height: 650px;
}

.apparelTitle {
	font-family: 'bebas_neue_book';
	font-size: 5em;
	margin-top: 40px;
}

.apparelGallery a {
	float: left;
}

.apparelGallery img {
	height: 75px;
	padding-right: 5px;
}

.apparelTabs {
	margin-top: 15px;
}

.ekko-lightbox-nav-overlay > .glyphicon {
	color: #A8A8A8;
} 

.apparelSidebarLeft {
	background-color: #E9E9E9;
	border-radius: 5px;
	width: 90%;
}

.apparelSidebarRight {
	/*position: relative;*/
	font: 1.75em 'league_gothic';
	min-height: 600px;
	padding-left: 0;
}

.apparelSidebarRight .colors {
	position: relative;
	bottom: -30px;
	left: 0;
}

.apparelSidebarRight ul {
	list-style: none;
	padding: 0;
}

.apparelSidebarRight ul li {
	padding: 0 0 10px 0;
}

.apparelShortDesc {
	font: 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.35em;
}

.apparelColor {
	height: 30px;
	width: 30px;
	background: #000;
	/*border: 1px solid #333;*/
	border-radius: 50%;
	border: 1px solid grey;
	float: left;
	margin: 0 5px 5px 0;
}

.sizeChartTable {
	width: 50%;
	float: left;
}

.sizeChartTable table {
	width: 85%;
	float: right;
}

.sizeChartImg {
	width: 50%;
	float: left;
}

.sizeChartImg img {
	max-width: 100%;
	width: 200px;
}

.priceButtons {
	padding:  10px;
}

.priceButton {
	margin: 5px 0;
}

ul.bestUse {
	margin-left: 28px;
}

.bestUse li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e013";
    font-family: 'Glyphicons Halflings';
    font-size: 18px;
    /*float: left;*/
    margin-top: 4px;
    margin-left: -28px;
    padding-right: 10px;
    color: #009A12;
}

#letsOrderModal img {
	max-width: 175px;
    height: auto;
    margin: 0 auto;
    display: block;
}

#detailedQuoteModal .modal-dialog {
	width: 900px;
	max-width: 90%;
}


/****************************
        APPAREL LIST          ******************************************************************************************************
 ****************************/

.apparelList ul {
	margin: 0;
	padding: 0;
}

.apparelList li {
	display: block;
	position: relative;
	top: 10px;
	margin: 5px 0 0 0;
}

.apparelList li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e013";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: #009A12;
}
 
.apparelList img {
	display: block;
	float: left;
	width: 115px;
	height: auto;
}

.apparelList table {
	margin: 0 auto;
}

.apparelList table td {
	text-align: center;
}

.apparelList table td.title {
	font: 1.5em "bebas_neue";
	max-width: 100px;
}

.apparelList .tearaway img {
	float: none;
	width: 100px;
}

.apparelList .tearawayMobile {
	float: none;
	width: 90px;
	margin: 0 auto;
}

.apparelListItem {
	position: relative;
}

.apparelList li.tearaway {
	position: absolute;
	top: 0;
	right: 0;
}

.apparelList li.tearaway:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "";
}


/*for retail and branding page, this will have the hero header fixed while allowing the bottom content to scroll above it. seems a bit screwy on actual mobile device. needs more testing*/

/*.hero {
	height: 100px;
    width: 100%;    
    position: fixed;
    top: 96px;
    left: 0;
    z-index: 500;
}

.other {   
    top: 281px;
    z-index: 600;
    position: relative;
    background: #FFF;
}*/

.heroTitle {
	padding: 4em 1em;
	text-align: center;
}

.heroTitle h1 {
	font: 4em 'Bitter';
	color: #FFF;
	text-shadow: 2px 2px rgba(0,0,0,0.5);
}

.heroTitle p {
	color: #FFF;
	text-shadow: 1px 1px rgba(0,0,0,0.5);
}

.priceAlert {
	color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    border: 1px solid rgba(17, 89, 23, 0.15);
    border-radius: 4px;
    display: inline-block;
    padding: 0 2px;
}


/****************************
      GOOGLE MAPS             ******************************************************************************************************
 ****************************/

#getpressed_map {
    height:300px;
    width:100%;
}
.gm-style-iw * {
    display: block;
    /*width: 100%;*/
}
.gm-style-iw h4, .gm-style-iw p {
    margin: 0;
    padding: 0;
}
.gm-style-iw a {
    color: #4272db;
}

#getpressed_map h4 {
	font-family: "bebas_neue_book";
	color: #009E8D;
}

.map_wrapper p {
	font-size: 13px;
}


/* Custom Media Queries *******************************************************************************************************/

@media (max-width: 768px) {

	body {
		padding-top: 52px;
	}

	.navbar-collapse li>a {
		font-size: 1em;
		padding-top: 15px;
		padding-bottom: initial;
	}

	.navbar-nav {
		float: none;
		display: inline-block;
		vertical-align: top;
	}

	.navbar .navbar-collapse {
	  text-align: center;
	}

	.section2 img {
		max-width: 135px;
		}

	.section3 img {
		/* make images the max container width when the container is smaller than the image, but never scale the image up above their original width */
		max-width: 100%;
		}

	.section3 p.lead {
		font-size: 1.5em;
		margin-bottom: 4em;
		}

	.section2 .row .col-md-12 {
			margin-bottom: 10%;
		}
	.navbar-nav>li.menu-item-48 a {
	    padding-top: 13px;
	    margin-left: 0px;
	}
	.navbar-header {
	    min-height: 0;
	}
	.navbar-brand img {
	    width: 130px;
	    margin-top: -4px;
	}
	.apparelListMeta {
		padding: 0 15px;
	}
	.apparelList img {
		width: 140px;
		height: auto;
	}
	.featuredImageContainer .wp-post-image {
		min-width: 0;
	}
	.featuredImageContainer {
		min-height: 0;
	}
	.slider-pro p.sp-layer {
		font-size: 2vw;
	}
	#getpressed_map {
		height: 300px !important;
	}

}

/* create smaller menu items when viewing at this range so that the brand image and menu items maintain a single row */
@media (min-width: 768px) and (max-width: 1215px) {
	.navbar-collapse li>a {
		font-size: 1em;
		padding-top: 30px;
		padding-bottom: 35px;
	}
	.navbar-nav>li.menu-item-48 a {
	  
	    padding-top: 13px;
	}
}

/* center the brand logo during this viewport range */
@media (min-width: 768px) and (max-width: 1002px) {
	.navbar-collapse li>a {
		font-size: 1em;
		padding-top: 26px;
		padding-bottom: 35px;
	}
	.navbar-brand img {
		display: block;
		margin: 0 auto;
	}
	.navbar-brand {
		float: none;
	}
	.navbar-header {
		float: none;
	}
	body {
		padding-top: 144px;
	}
	.navbar-nav>li.menu-item-48 a {
	    height: 33px;
	    padding-top: 9px;
	}
	.navbar-nav {
		margin: 0 auto;
		float: none;
		display: inline-block;
	}
	.navbar-collapse {
		text-align: center;
	}
	.nav {
		margin-bottom: -5px;
	}

}

@media (max-width: 992px) {
	.apparelSidebarRight ul li {
		float: left;
		padding-right: 10px;
	}
	.apparelSidebarRight {
		position: initial;
		min-height: initial;
		padding-left: 20px;
	}

	.apparelSidebarRight .colors {
		position: initial;
		padding-bottom: 60px;
		/*bottom: 0;
		left: 0;*/
	}
	.row {
		padding-bottom: 20px;
	}
	.apparelShortDesc {
		margin-bottom: initial;
	}
	.apparelSidebarRight ul li {
		float: none;
	}

}