/*
Theme Name:   Jet-Oil-Tools
Theme URI:    http://JetOilTools.com/jet-oil-tools
Description:  Customized Theme for Jet Oil Tools
Author:       Kurtis Kronk
Author URI:   https://kurtiskronk.com
Template:     salient
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  jetoiltools
ASCII Art:    https://patorjk.com/software/taag/#p=display&h=0&v=0&f=Old%20Banner
*/





/*

#     # #     # ### #     # ####### ######   #####     #    #       
#     # ##    #  #  #     # #       #     # #     #   # #   #       
#     # # #   #  #  #     # #       #     # #        #   #  #       
#     # #  #  #  #  #     # #####   ######   #####  #     # #       
#     # #   # #  #   #   #  #       #   #         # ####### #       
#     # #    ##  #    # #   #       #    #  #     # #     # #       
 #####  #     # ###    #    ####### #     #  #####  #     # #######  */

/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */


/* This removes the unwanted default padding on content containers */
div.container {padding: 0px !important;}

.toUpper {text-transform: uppercase;}

.testimonial-name {font-size: 0.9em !important;}
.testimonial_slider[data-style="minimal"] .testimonial-next-prev .prev:after{
	background-color:none !important;
	opacity:0!important;
	transform:none !important;
	transition:none !important;
}
.testimonial_slider[data-style="minimal"] .testimonial-next-prev .next:after{
	background-color:none !important;
	opacity:0!important;
	transform:none !important;
	transition:none !important;
}
body .subject {font-size: 12px !important;}

/*  To get the overlapping logo look, I had to apply -30px padding to Header Padding under Salient > Header Navigation.
Then to counteract that and get the logo to display even with the top of the site
(minus a couple pixels to account for the angled shadow I don't want to show), position it 30px lower */

#logo {position: relative !important; top: 28px !important;}

/* When resizing browser, the mobile menu was doing an animated transition that was unwanted - this stops it */
i.lines-button {animation: none !important;	transform: none !important;	transition: none !important;}
nav.menu-item {animation: none !important; transform: none !important; transition: none !important;}


/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */





/*

######  #######  #####  ######  ####### #     #  #####  ### #     # ####### 
#     # #       #     # #     # #     # ##    # #     #  #  #     # #       
#     # #       #       #     # #     # # #   # #        #  #     # #       
######  #####    #####  ######  #     # #  #  #  #####   #  #     # #####   
#   #   #             # #       #     # #   # #       #  #   #   #  #       
#    #  #       #     # #       #     # #    ## #     #  #    # #   #       
#     # #######  #####  #       ####### #     #  #####  ###    #    #######   */

/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */


/* Resolution References (2024):

	PHONES - - - - - - - - - - - - - - 
	Galaxy Fold:			280 x 653
	Samsung Galaxy S8+:		360 x 740
	iPhone SE:				375 x 667
	Pixel 7:				412 x 915
	iPhone 14 Pro Max:		430 x 932
	
	TABLETS - - - - - - - - - - - - - -
	Surface Duo:			540 x 720
	iPad Mini:				768 x 1024
	iPad Air:				820 x 1180
	Surface Pro 7:			912 x 1368
	iPad Pro:				1024 x 1366
	
	LAPTOPS - - - - - - - - - - - - - -
	Acer Chromebook:		1366 x 768
	MacBook Air:			1440 x 900

*/


.vc_row.bottom_padding_tablet_30pct {padding-bottom: 5%!important;}
.vc_row.top_padding_phone_50pct {padding-top: 35%!important;}

@media only screen and (min-width:2000px) {
	#homeHeaderTextLine1v2 h2.heading {padding-top: 45%; width: 1200px !important; background-color:rgba(0, 0, 0, 0) !important; margin:0px !important;}
	#homeHeaderTextLine2v2 h2.heading {width: 1200px !important; background-color:rgba(0, 0, 0, 0) !important; margin:0px !important;}
	#homeHeaderTextLine1v2 h2 {font-size: 5.0em; display: inline-block; max-width: 100%;}
	#homeHeaderTextLine2v2 h2 {font-size: 5.0em; padding-right: 2%;}
}
@media only screen and (max-width: 1999px) and (min-width:1200px) {
	#homeHeaderTextLine1v2 h2.heading {padding-top: 45%; width: 1200px !important; background-color:rgba(0, 0, 0, 0) !important; margin:0px !important;}
	#homeHeaderTextLine2v2 h2.heading {width: 1200px !important; background-color:rgba(0, 0, 0, 0) !important; margin:0px !important;}
	#homeHeaderTextLine1v2 h2 {font-size: 4.0em; display: inline-block; max-width: 100%;}
	#homeHeaderTextLine2v2 h2 {font-size: 4.0em; padding-right: 2%;}
}
@media only screen and (max-width: 1199px) and (min-width:1000px) {
	#homeHeaderTextLine1v2 h2.heading {padding-top: 45%; width: 1200px !important; background-color:rgba(0, 0, 0, 0) !important; margin:0px !important;}
	#homeHeaderTextLine2v2 h2.heading {width: 1200px !important; background-color:rgba(0, 0, 0, 0) !important; margin:0px !important;}
	#homeHeaderTextLine1v2 h2 {font-size: 3.0em; display: inline-block; max-width: 100%;}
	#homeHeaderTextLine2v2 h2 {font-size: 3.0em; padding-right: 2%;}
}
@media only screen and (max-width: 539px) and (min-width:400px) {
	#homeHeaderTextLine1v2 h2.heading { padding-right: 10% !important; padding-top: 25%; text-align: right !important;}
	#homeHeaderTextLine2v2 h2.heading {padding-right: 10% !important; text-align: right !important;}
	#homeHeaderTextLine1v2 h2 {font-size: 1.2em;}
	#homeHeaderTextLine2v2 h2 {font-size: 1.2em;}
}
@media only screen and (max-width: 399px) and (min-width:1px) {
	#homeHeaderTextLine1v2 h2.heading {width: 100% !important; padding-top: 45%; padding-right: 10% !important; text-align: right !important;}
	#homeHeaderTextLine2v2 h2.heading {padding-right: 10% !important; text-align: right !important;}
	#homeHeaderTextLine1v2 h2 {font-size: 1.0em; display: inline-block; max-width: 100%;}
	#homeHeaderTextLine2v2 h2 {font-size: 1.0em;}
}


/* DEPRECATED ****************** */
/* Disabled this code as after updating it's causing mobile menu to shift */
/* Addresses header and menu appearance between 1px-539px wide to make logo and header smaller */
/*
@media only screen and (max-width: 539px) {
	header#top {
		position: static !important;
		top: -30px !important;
		left: 0px !important;
		transform: scale(0.75) !important;
		display: block !important;
		float: left !important;
		margin: 0px !important;
	}
	div.container-wrap {margin-top:-20px!important;}
	a#logo {position: relative !important; top: 50px !important; left: -18% !important;}
	div#header-outer {position: relative !important; top: -25px !important;}
	#header-outer:not([data-format=left-header]) #top>.container>.row nav {padding-top: 0px;}
	i.lines-button {margin: 25px 0px 0px 0px;}
	.productDescription2 {font-size: 8px !important;}

}
/* DEPRECATED ****************** */


@media only screen and (max-width: 766px) and (min-width:1px) {
	blockquote {font-size: 1.2em !important; line-height: 1.2em !important;}
	.fa {transform:scale(0.75) !important;}
	.toggle>div .wpb_wrapper {font-size: 1.2em !important; line-height: 1.5em !important;}

}


/* Addresses header, menu, testimonials, FAQs appearance between 767-999px wide */
@media only screen and (max-width: 999px) and (min-width:767px) {
	#header-outer:not([data-format=left-header]) #top>.container>.row, #header-outer:not([data-format=left-header]) #top>.container>.row nav, #header-outer:not([data-format=left-header]) #top>.container>.row nav>ul, #header-outer:not([data-format=left-header]) #top>.container>.row nav>ul>li {
		display: -webkit-flex !important;
		display: -ms-flexbox;
		display: flex !important;
		align-items: baseline;
	}
	body[data-slide-out-widget-area=true] #top .col.span_3 {width: auto;}
	#header-outer[data-format=menu-left-aligned] .row .col.span_9 {position: relative !important;}
	#top nav>ul ul {position: absolute !important;}
	#header-outer:not([data-format=left-header]) #top>.container>.row nav {padding-top: 20px;}
	#logo {margin-right: 48px!important;}

.homeHeaderRowV2 {padding-bottom: 2px !important; height: auto !important;}


}


@media only screen and (max-width: 440px) {
	/* 1st Column on right side of page footer, containing extended navigation menu */
	.footerRightColumn1 {margin-left: 10%; padding: 10% 0% 0% 20% !important;}
	/* 2nd column on right side of page footer, containing contact information */
	.footerRightColumn2 {margin-left: 10%; padding: 10% 0% 0% 20% !important;}
}


/* References inner rows on Home page. Colored bars across screen with dynamic text. */
@media only screen and (max-width: 690px) and (min-width: 540px) {
	#homeHeaderTextLine1,#homeHeaderTextLine2 {
		height:30px!important;
		font-size:16px!important;
		margin-top:-8px!important;
		right:20px!important;
		text-align:right!important;}
	
	#homeHeaderTextLine1v2 h2.heading {padding-right: 0% !important; text-align: right !important;}
	#homeHeaderTextLine2v2 h2.heading {padding-right: 0% !important; text-align: right !important;}
	#homeHeaderTextLine1v2 h2 {font-size: 1.5em;}
	#homeHeaderTextLine2v2 h2 {font-size: 1.5em;}

}


/* Over 767px change to regular menu and increase size of testimonials and FAQs  */
@media only screen and (min-width: 767px) {
	div.slide-out-widget-area-toggle {display:none!important;}
	.fa {transform: scale(1.0) !important;}
	.toggle>div .wpb_wrapper {font-size: 1.2em; line-height: 1.8em;}
	blockquote{font-size: 1.2em !important;	line-height: 1.2em !important;}

}
@media only screen and (max-width: 819px) {
	div.topRightHeaderContainer{display:none!important;}
	/* References inner rows on Home page. Colored bars across screen with dynamic text. */
	#homeHeaderTextLine1,#homeHeaderTextLine2 {height:30px!important; font-size:16px!important; margin-top:-8px!important; right:20px!important; text-align:right!important;margin-bottom:12px!important;}
}


@media only screen and (max-width: 1299px) {
	main-content .container {max-width: 1100px !important;}
}
@media only screen and (max-width: 1199px) {
	main-content .container {max-width: 1000px !important;}
}
@media only screen and (max-width: 1050px) {
	main-content .container {max-width: 900px !important;}
	.productsComparisonChart h3, {font-size: 1em !important;}
	.productsComparisonChart li {font-size: 1em !important;}
}
@media only screen and (max-width: 950px) {
	main-content .container {max-width: 90% !important;}
}


@media only screen and (min-width: 1000px) {
	.pricing-table[data-style=flat-alternative] .pricing-column {padding: 40px 15px 25px 35px !important;}
	.toggle-heading {font-size: 1.0em !important; line-height: 1.2em !important;} /* FAQ titles */
	blockquote {font-size: 1.4em !important; line-height: 1.4em !important;} /* Testimonials */
}


@media only screen and (min-width: 1px) and (max-width: 999px) {
	main-content .container {max-width: 90% !important;}
	.productsComparisonChart {display:none !important;}
	.productsComparisonChartMobile {visibility:visible !important;}
	.toggle-heading {font-size: 0.8em !important; line-height: 1.0em !important;} /* FAQ titles */

}


@media only screen and (max-width: 999px) {
	a#logo{margin-top:17px!important;height:140px!important;}
	div#header-space{height:0px !important;	display:none!important;}
	/* The mobile menu was displaying too far over to the right, let's push it in a bit */
	#header-outer[data-format=centered-menu-bottom-bar] #top .span_9, #top .col.span_9 {right: 40px!important;}
	/* Header size and placement got wonky, this brings it back to be the same as normal */
	body[data-hhun="0"] #header-outer[data-header-resize="0"]:not([data-transparent-header=true]){
		height:140px!important;	margin-top:-60px!important;}
}



/* DEPRECATED: Decided to keep contact in primary nav in addition to top-right CTA, until responsive removal of CTA */
/* Above 1040px display CTA instead of 'Contact Us' in the topNav menu */
/* This is the Contact Us menu item in the standard top Nav */
/*
@media only screen and (min-width: 1041px) {
		li.menu-item-678 {display:none !important;} 
	}
*/


/* This will get rid of the "Got Questions?" (topRightHeaderChildA) and "Ready to Order?" (topRightHeaderChildB) in the topRightContainer global section */
@media only screen and (max-width: 1070px) {
	div.topRightHeaderChildA{display:none;}
	div.topRightHeaderChildB{display:none;}
	div.topRightHeaderContainer{width:78px!important;}
}


/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */





/*
#     # ####### #     # #     # 
##   ## #       ##    # #     # 
# # # # #       # #   # #     # 
#  #  # #####   #  #  # #     # 
#     # #       #   # # #     # 
#     # #       #    ## #     # 
#     # ####### #     #  #####   */

/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */


/* Sets properties of menu items */
	body header#top nav .sf-menu li a {color: #231F20 !important;}
/* Sets properties of menu items upon hover */
	body header#top nav .sf-menu li a:hover {color: #E51837 !important;}
/* Sets properties of menu item for currently active page */
	body header#top nav .sf-menu li.current_page_item > a, body header#top nav .sf-menu li.current-menu-item > a {
		color: #E51837 !important;
	}
/* Change position and thickness of animated underline below menu items */
	::after {position: relative !important; top: -3px !important; border-top-width: 2px !important;}


/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */





/*

 #####  #       ####### ######     #    #           #####  #######  #####  ####### ### ####### #     # 
#     # #       #     # #     #   # #   #          #     # #       #     #    #     #  #     # ##    # 
#       #       #     # #     #  #   #  #          #       #       #          #     #  #     # # #   # 
#  #### #       #     # ######  #     # #           #####  #####   #          #     #  #     # #  #  # 
#     # #       #     # #     # ####### #                # #       #          #     #  #     # #   # # 
#     # #       #     # #     # #     # #          #     # #       #     #    #     #  #     # #    ## 
 #####  ####### ####### ######  #     # #######     #####  #######  #####     #    ### ####### #     #  */
 
/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */


.topRightHeaderContainer { /* This is where jot_top_right_header global section is called */
	position: fixed; 
	right: 0px;
	top: 20px;
	height: 40px;
	z-index: 999999 !important;
	width: 350px;
	/*	white-space: nowrap; z-index: 999999 !important;	*/
}
.topRightHeaderChildA {
	height: 40px;
	text-align: center;
	background-color: rgba(255, 0, 0, 0);
	float:left;
}
.topRightHeaderChildB {
	height: 40px;
	text-align: center;
	background-color: rgba(255, 0, 0, 0);
	float:left;
}
.topRightHeaderChildC {
	height: 40px;
	text-align: center;
	background-color: rgba(255, 0, 0, 0);
	float:left;
}

/* Styling 3 Columns - Column 1 of 3 */
.column1of3 {
	width: 33% !important;
	display: inline-block !important;
	padding-right: 12px !important;
	background-color:rgba(255, 0, 0, 0);
	height:100% !important;
}

/* Styling 3 Columns - Column 2 of 3 */
.column2of3 {
	width: 33% !important;
	display: inline-block !important;
	padding-left: 12px !important;
	padding-right: 12px !important;
	background-color:rgba(0, 127, 0, 0);
	height:100% !important;
}

/* Styling 3 Columns - Column 3 of 3 */
.column3of3 {
	width: 33% !important;
	display: inline-block !important;
	padding-left: 12px !important;
	background-color:rgba(0, 0, 255, 0);
	height:100% !important;
	padding-top: 12px !important;
}

#headerCTA1,#headerCTA2 {
	font-size: 13px;
	padding: 0px;
	line-height: 1.5em;
	text-transform: uppercase;
	background-color:rgba(255, 255, 0, 0);
}

/* Make the 1st line of text in 1st column a little dimmer */
#headerCTA1 {opacity: 0.7;}

/* This is padding specifically for the 'contact us' CTA in header */
#headerCTA3 {
	color: #E51837!important;
	font-size: 20px;
	font-weight: 600;
	text-transform: lowercase;
	vertical-align: center;
	position: relative;
	top: 15%;
	padding: 0px 30px 0px 30px;
	background-color:rgba(0, 127, 0, 0);
	display: inline-block;
	transition: .25s;
}
#headerCTA3:hover {
	color: #E51837!important;
	-ms-transform: scale(1.5, 1.5); /* IE 9 */
	-webkit-transform: scale(1.5, 1.5); /* Safari */
	transform: scale(1.075, 1.075);
	transition: .25s;
}
#madeInUSA {
	/* No attributes added for image ID */
}
.fadein {opacity: 0.65;	transition: 1s ease;}
.fadein:hover { /* Further troubleshooting needed, hover is not being recognized. Does not seem to be z-index issue. */
	opacity: 1.0 !important;
	transition: 1s ease;
}


/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */





/*

####### ####### ####### ####### ####### ######  
#       #     # #     #    #    #       #     # 
#       #     # #     #    #    #       #     # 
#####   #     # #     #    #    #####   ######  
#       #     # #     #    #    #       #   #   
#       #     # #     #    #    #       #    #  
#       ####### #######    #    ####### #     #   */

/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */


.footerRightContainer {padding: 10px 50px 30px 30px !important;}
/* 1st Column on right side of page footer, containing extended navigation menu */
.footerRightColumn1 {
	width: 50% !important;
	padding: 10% 0% 0% 10% !important;
	background-color: rgba(255, 0, 0, 0) !important;
	min-width: 300px;
}
/* 2nd column on right side of page footer, containing contact information */
.footerRightColumn2 {
	width: 50% !important;
	padding: 10% 5% 10% 5% !important;
	background-color: rgba(0, 127, 0, 0) !important;
	min-width: 300px;
}
.iwithtext {
}
.footerAddressCompanyName {padding-left: 40px; font-weight: strong !important;}
.iwt-icon {height:100% !important; display: flex !important; align-items: center !important;}
.iwt-icon img {height: 20px !important;	width: 20px !important;}
.iwt-text {line-height: 1.2rem !important; padding-left: 40px !important;}

/* Styling for the footer menu */
.footerUL ul {margin-left: 0px;}
.footerUL ul li {list-style: none; color:#231F20; font-weight: bold;}
.footerUL ul li a {list-style: none; color:#231F20; }
.footerUL ul li a:hover {color:#E51837; }
.footerUL ul ul {margin-left:.75rem;}
.footerUL ul ul li {list-style: "- "; font-weight: normal; margin-left:0px;}

.footerCopyrightRowText {font-size: .9em;}

/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */





/*

#     # ####### #     # ####### 
#     # #     # ##   ## #       
#     # #     # # # # # #       
####### #     # #  #  # #####   
#     # #     # #     # #       
#     # #     # #     # #       
#     # ####### #     # ####### */

/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */


/* References inner rows on Home page. Colored bars across screen with dynamic text. */
#homeHeaderTextLine1,#homeHeaderTextLine2 {background-color: #e51837; position: relative; left: 0px; height: 36px;}
#homeHeaderTextLine1 {width: 90%;}
#homeHeaderTextLine2 {width: 88%;} /* smaller width than prior line for staggered effect */

#homeHeaderTextLine1v2,#homeHeaderTextLine2v2 {}
#homeHeaderTextLine1v2 {padding-right: 50%;}
#homeHeaderTextLine2v2 {padding-right: 45%; margin-bottom: -8%;} 
#homeHeaderTextLine2v2 .dynamic-words {color: #ff0026 !important; text-shadow: rgba(0, 0, 0, .5) 0px 0px 3px;}



/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */





/*

   #    ######  ####### #     # ####### 
  # #   #     # #     # #     #    #    
 #   #  #     # #     # #     #    #    
#     # ######  #     # #     #    #    
####### #     # #     # #     #    #    
#     # #     # #     # #     #    #    
#     # ######  #######  #####     #  */

/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */


/* Section at top of About page */
.aboutTopLeftTestimonial .nectar_single_testimonial[data-style="bold"] p {
	font-size: 1em;	line-height: 1.2em;	margin: 0px 0 -40px 0;
}
.aboutBadge .nectar-badge__inner {
	background-color: #e51837 !important;	padding: 15px 25px 10px 25px !important; border-radius: 0px !important;
}
.aboutPageTopLeft .nectar-split-heading h2 {
	margin-right: 8% !important; text-align: right !important; font-size: 1.8em !important;
}

/* Adjustments to single testimonial featured under 'Meet the Team' */
.singleTestimonial {font-size: 0.75em !important;}

/* E-mail styling under team member photos */
.aboutPageTeamEmail p {margin-top: -30px; padding: 8px 0 8px 0;	border-top: 1px solid gray; border-bottom: 1px solid gray; max-width: 500px !important;}


/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */





/*

######  ######  ####### ######  #     #  #####  #######  #####  
#     # #     # #     # #     # #     # #     #    #    #     # 
#     # #     # #     # #     # #     # #          #    #       
######  ######  #     # #     # #     # #          #     #####  
#       #   #   #     # #     # #     # #          #          # 
#       #    #  #     # #     # #     # #     #    #    #     # 
#       #     # ####### ######   #####   #####     #     #####  */

/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */


/* Tweaked spacing of the product bullet points in the product page heading above the CTA button */
.productsSubHeading {line-height: 1.5em !important;}

/* Hide pricing section of comparison chart (there is a desktop and mobile version), customize text sizes */
.productsComparisonChart h4, .dollar-sign, .interval {visibility:hidden !important;}
.productsComparisonChart ul.features {margin-top: -60px !important;}
.productsComparisonChart h3 {font-size: 2em !important;}
.productsComparisonChart li {font-size: 1em !important;}
.productsComparisonChartMobile h4, .dollar-sign, .interval {visibility:hidden !important;}
.productsComparisonChartMobile ul.features {margin-top: -60px !important;}
.productsComparisonChartMobile h3 {font-size: 2em !important;}
.productsComparisonChartMobile li {font-size: 1em !important;}

/* Change appearance of icons on Products page highlighting Jet features */
.productFeatures .nectar_icon_wrap[data-style="border-animation"] .nectar_icon {
	line-height: 0;
	border: 0px solid rgba(0,0,0,0.065) !important; 
	text-align: center;
	border-radius: 150px;
	position: relative;
	transition: background-color .45s cubic-bezier(0.25,1,0.33,1),border-color .45s cubic-bezier(0.25,1,0.33,1);
}
.productFeatures .nectar_icon_wrap[data-style="border-animation"] .nectar_icon:hover {background-color:#E51837!important;}

/* Customizing the text under icons for All Our Products Offer feature */
.productFeatures h4 {font-size: .85em !important; line-height: 1.3em !important; padding: 0px 25px 0px 25px !important;}

/* Styles the body of text describing a specific product on the product page */
.productDescription {font-size: 1.2em; line-height: 1.5em; padding: 5% 10% 5% 6%;}

/* DEPRECATED - Styles gray boxes under products - was used in a design concept, now a hidden row */
.productFeature:hover {top:-8px; transition: ease-in 0.5s;}


/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */





/*

 #####  ####### #     # #######    #     #####  ####### 
#     # #     # ##    #    #      # #   #     #    #    
#       #     # # #   #    #     #   #  #          #    
#       #     # #  #  #    #    #     # #          #    
#       #     # #   # #    #    ####### #          #    
#     # #     # #    ##    #    #     # #     #    #    
 #####  ####### #     #    #    #     #  #####     #   */
 
/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */


/* ROTATING TEXT ABOUT DESIGNED DEVELOPED ENGINEERED FABRICATED IN AMERICA - IN BRAND COLORS */
/* I added a class called "contactRotatingText" where the Rotating Words Title element is on this page
	I'm calling that particular class combined with the relevant elements to avoid changing this style site-wide */
.contactRotatingText .beginning-text {color: #231f20 !important;}
.contactRotatingText .dynamic-words {color: #E51837 !important; filter: drop-shadow(0px 0px 20px rgba(229, 24, 55, 0.202));}
.contactRotatingText .ending-text {color: #231f20 !important;}

/* Make sure to add teamImage to Extra Class Name on the appropriate column for each team member in order to show this style */
/* This adds double underline in brand color as a nod to the double underlines in the Jet Oil Tools logo */
.teamImage img {padding-bottom: 0px !important;	border-bottom: 6px double #E51837 !important;}

/* Text overlay on map */
.contactMapText {padding: 4%; background-color: rgba(0, 0, 0, 1); text-align: right;}

/* Proudly Designed/Developed/Engineered/Fabricated In America */
.contactRotatingText h2.heading {
	display: inline-block !important;
	float: right;
	width: 50% !important;
	max-width: 150px !important;
	margin:none !important;
}
.contactRotatingText span.beginning-text, .contactRotatingText span.ending-text {
	display: inline-block !important;
	float: right;
	margin: 0px !important;
	font-size: 0.9em !important;
	margin-bottom: -10px !important;
}
.contactRotatingText span.dynamic-words {
	display: inline-block !important;
	float: right;
	line-height: .9em !important;
	font-size: 0.9em !important;
	margin: 0px !important;
	margin-bottom: -10px !important;
}

.rotatingTextMadeInUSA {width: 49%;}
.rotatingTextMadeInUSA img {width: 49%;	float: left; margin: auto;}
.rotatingTextMadeInUSAFlag {width: 49%;}

/* Text in Areas of Operation section */
.contactAreasOfOperation h4 {
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: 3px solid underline white;
	text-underline-offset: 5px;
	font-size: 18px !important;
}

.contactAreasOfOperation h5, .contactAreasOfOperation p {margin-bottom: 0px !important;}
.contactAreasOfOperation p, .contactAreasOfOperation a {color: white; opacity: 1.0 !important;	font-size: 1.0em;}
.span_12.light .wpb_text_column a:not(:hover) {opacity: 1.0 !important;	font-size: 1.0em;}


.contactAreasOfOperation .wpb_column .vc_col-sm-4 .column_container .vc_column_container .col .child_column .centered-text .no-extra-padding .inherit_tablet .inherit_phone  {
	maximum-width: 230px !important;
	display: block !important;
	float: left !important;
}


/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */





/*

 #####  ####### #     # #######    #     #####  #######    ####### ####### ######  #     # 
#     # #     # ##    #    #      # #   #     #    #       #       #     # #     # ##   ## 
#       #     # # #   #    #     #   #  #          #       #       #     # #     # # # # # 
#       #     # #  #  #    #    #     # #          #       #####   #     # ######  #  #  # 
#       #     # #   # #    #    ####### #          #       #       #     # #   #   #     # 
#     # #     # #    ##    #    #     # #     #    #       #       #     # #    #  #     # 
 #####  ####### #     #    #    #     #  #####     #       #       ####### #     # #     #  */

/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */


/* Style inputs with type="text", select elements and textareas */
input[type=text], input[type=tel], input[type=email], select, textarea {
	width: 100% !important; /* Full width */
	height: 3em !important;
	padding: 12px !important; /* Some padding */ 
	border: 1px solid #ccc !important; /* Gray border */
	border-radius: 4px !important; /* Rounded borders */
	box-sizing: border-box !important; /* Make sure that padding and width stays in place */
	margin-top: 6px !important; /* Add a top margin */
	margin-bottom: 16px !important; /* Bottom margin */
	resize: vertical !important; /* Allow the user to vertically resize the textarea (not horizontally) */
	min-height: 3em !important;
	color: #231F20 !important;
	text-align: left !important;
}

/* Style input fields with a thin red side border when they are required */
input:required, select:required, textarea:required {
	border-left-width: 3px !important;
	border-left-color: rgba(229, 24, 55, 0.701) !important;
	border-left-style: standard !important;
}
/* Style input fields with a thin gray side border when optional */
input:optional, select:optional, textarea:optional {
	border-left-width: 3px !important;
	border-left-color: rgba(67, 67, 67, 0.701) !important;
	border-left-style: standard !important;
}

/* Style input fields with a thin green side border when they are required and contain valid input */
input[type=text]:required:valid, input[type=email]:required:valid, input[type=tel]:required:valid, select:required:valid {
	border-left-width: 3px !important;
	border-left-color: rgba(10, 187, 57, 0.701) !important;
	border-left-style: standard !important;
}

/* Style input fields with a thick green side border when they are required, validated, and currently selected */
input[type=text]:required:valid:focus, input[type=email]:required:valid:focus, input[type=tel]:required:valid:focus, select:required:valid:focus, input:optional:valid:focus, select:optional:valid:focus {
	border-left-width: 10px !important;
	border-left-color: rgba(10, 187, 57, 0.701) !important;
	border-left-style: standard !important;
}

/* Style input fields with a thick red side border when they are invalid and currently selected */
input:focus, select:focus, textarea:focus {
	border-left-width: 10px !important;
	border-left-color: #E51837 !important;
	border-left-style: standard !important;
}

/* Style optional textarea field with a thick gray side border when currently selected because color makes it confusing */
textarea:optional:focus {
	border-left-width: 10px !important;
	border-left-color: rgba(67, 67, 67, 0.701) !important;
	border-left-style: standard !important;
}

/* This is part of ensuring that the placeholder dropdown is not shown and the form cannot be submitted if no selection made when required input */
select > .placeholder {display: none;}



/* Style input fields with a thin green side border when they contain valid input */
/* This is redundant, already located above...
input:valid, select:valid, {
	border-left-width: 3px !important;
	border-left-color: rgba(10, 187, 57, 0.701) !important;
	border-left-style: standard !important;
}
*/



/* Style the submit button with a specific background color etc */
input[type=submit] {
	background-color: #E51837 !important;
	color: #FFFFFF !important;
	padding: 12px 20px !important;
	border: none !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	text-transform: UPPERCASE !important;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
	background-color: #000000 !important;
	color: #FFFFFF !important;
}

/* Add a background color and some padding around the form */
.contactFormContainer {
	/*
	border-radius: 5px !important;
	background-color: #FFFFFF !important;
	padding: 40px !important;
	margin-top: -15%;
	*/
	border-radius: 5px !important;
	background-color: #FFFFFF !important;
	padding: 40px 20px 60px 20px !important;
	margin-top: -15%;	
}

.responsive-one-column-grid {display:block;}

.responsive-one-column-grid > * {padding:0px 10px 0px 10px;	margin:0px;}


.responsive-two-column-grid {display:block;}

.responsive-two-column-grid > * {padding:0px 10px 0px 10px;	margin:0px;}

#SubmitBtn {margin-top: 20px;}

/* tablet breakpoint */
@media (min-width:768px) {
	.responsive-two-column-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin:0px;
	}
}

/* Styling 2 Columns in Contact Form - Column 1 of 2 */
.contactFormColumn1of2 {width: 50% !important; float: left !important; padding-right: 12px !important;}
/* Styling 2 Columns in Contact Form - Column 2 of 2 */
.contactFormColumn2of2 {width: 50% !important; float: left !important; padding-left: 12px !important;}

/* Styling dropdown selection boxes */
select {
	-webkit-appearance: none !important;
	-moz-appearance : none !important;
	border:1px solid #ccc !important;
	border-radius:3px !important;
	padding:5px 10px !important;
}

.textArea {height: 8em !important;}
label {text-align: left !important; color: #231F20 !important;	block: inline !important; float: left !important;}
#phone{size: 10 !important;}
#letsWorkTogether {padding-top: 5% !important; padding-bottom: 10% !important;
}

/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */





/*

######  #######  #####  ####### #     # ######   #####  #######  #####  
#     # #       #     # #     # #     # #     # #     # #       #     # 
#     # #       #       #     # #     # #     # #       #       #       
######  #####    #####  #     # #     # ######  #       #####    #####  
#   #   #             # #     # #     # #   #   #       #             # 
#    #  #       #     # #     # #     # #    #  #     # #       #     # 
#     # #######  #####  #######  #####  #     #  #####  #######  #####   */

/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */













/* <:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:><:> */