/*!
Theme Name: Pilotworkshops
Theme URI:
Author: First Tracks Marketing
Author URI: https://firsttracksmarketing.com/
Description:
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pilotworkshops
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Pilotworkshops is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

*/


/**
 * Colors:
 * Blue - #006ba8
 * Gray - #6d6d6c
 * Yellow - #f4b804
 *
 * background-color: #5D5E5E;
 *
 *
 *
 *
 */

/**
 * Fonts:
 *
 *	font-family: 'Roboto', sans-serif;
 */

/**
 * CSS Vars:
 *
 */
:root {

	/* from invision */
	--blue: #0d6caa;
	--yellow: #f4b822;
	--green: #03b760;
	--red: #cc0000;

	--heading_color: #363e46; /* headings, footer text color */
	--text_color: #5d5e5e; /* regular text */

	--dark_gray: #1e242a; /* sidebar background */
	--gray: #343a3f; /* mobile My Cockpit menu */
	--light_gray: #f3f3f3; /* footer background */

	--separator_color: #e0e0e0; /* between my-cockpit / my-cart links in header */

	/* --box_shadow_header: 0 1px 10px 0 rgba(0,0,0,0.1); /* header */
	--box_shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2); /* dropdown menu, grid posts */
	
	--border_radius: 4px; /* buttons */
	--border_color: #ddd; /* inputs */

	/* from paletton based on blue */
	--lightest_blue: #5396c1;
	--light_blue: #307eb1;
	--dark_blue: #075385;
	--darkest_blue: #054269;

	--lightest_orange: #ff8c65;
	--light_orange: #ff6c3a;
	--orange: #ff4505;
	--dark_orange: #d03500;
	--darkest_orange: #a42a00;

	--lightest_green: #50cb90;
	--light_green: #2bbd77;
	--green: #03b760;
	--dark_green: #00914b;
	--darkest_green: #00723b;

	/* based on yellow (changes to f4b722) */
	--lightest_yellow: #ffd876;
	--light_yellow: #ffcc4e;
	--yellow: #f4b722;
	--dark_yellow: #ca9208;
	--darkest_yellow: #a07200;

	--error: #d03500;

}


/* Utility class to not show elements which don't function without js enabled */
.no-js .js-only {
	display: none;
}


/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior */
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}


body {
	font-size: 16px;
	line-height: 1.5;
	color: #5d5e5e;
	font-family: 'Roboto', sans-serif;
	min-width: 320px;
	position: relative; /* for positioning the overlay and popups */
}
/* this might get used for more than popups? */
.site-overlay {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.75);
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}
body.has-overlay .site-overlay {
	opacity: 1;
	z-index: 33;
}
/* popups */
.ft-popup {
	position: fixed;
	width: 90%;
	width: calc(100% - 40px);
	z-index: 34;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.ft-popup-content {
	position: relative;
	margin: 0 auto;
}
a.close-ft-popup {
	position: absolute;
	top: -1.5em;
	right: 0;
	font-size: 1.5em;
	line-height: 28px;
	padding: 0;
	height: 32px;
	width: 32px;
	text-align: center;
}
.ft-popup-html {
	position: relative;
	overflow: auto;
}
@media screen and ( orientation:landscape ) and (max-height:375px) {
	.ft-popup {
		width: calc(100% - 270px);
	}
}
@media screen and ( orientation:landscape ) and (min-height: 376px) {
	.ft-popup {
		width: calc(100% - 180px);
	}
}
@media (min-width: 48em) and (min-height: 480px) {
	.ft-popup {
		width: calc(100% - 100px);	
	}
}
@media (min-width: 85.375em) {
	/* 1366 */
	.ft-popup {
		width: calc(100% - 360px);
	}
}


/* Some popups are on pages with very little content (leadpage post type). Need to make sure the overlay still covers the viewport. */
html {
	min-height: 100%;
	height: 100%;	
}
body {
	min-height: 100%;	
}



h1,h2,h3,h4,h5,h6 {
	color: #363e46;
}

/* Some h2s get styled like h1s */
.h1 {
	font-size: 2em;
	margin: 0.67em 0;	
}
h2 {
	font-size: 1.6875em;
}
h3 {
	font-size: 1.375em;	
}


hr {
	background-color: #343a3f;
	border: 0;
	height: 1px;
	margin: 1em 0;
}

img {
	max-width: 100%;
	height: auto;
}

p,ul,ol,dl,form {
	margin: 1em 0;
}

.menu,
.sub-menu,
.children {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Lists can use checmarks as bullets */
ul.checkmarks{
	list-style: none;
	padding: 0;
}

ul.checkmarks li:before {
	font-family: 'pilotworkshops' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	
	content: "\f00c";
	display: inline-block;
	color: var(--green);
	position: absolute;
	top: 0.25em;
	left: 0;
}

ul.checkmarks li {
	position: relative;
	padding: 0.25em 0 0.25em 1.5em;
}

b, strong {
	font-weight: bold;
	color: #272727;	
}

[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

@media ( min-width:37.5em ){
	h1, .h1 {
		font-size: 2.5625em;	
	}
	
}
@media ( min-width:48em ){
	h2 {
		font-size: 2em;
		line-height: 1.2;	
	}
}
@media ( min-width:48.5em ){
	h1, .h1 {
		font-size: 3.125em;
		line-height: 1.2;
	}
	
}
@media ( min-width:64em ){
	h2 {
		font-size: 2.5em;	
	}
}

/* 12-17-18 Added expanding content <!-- readmore --> functionality (used in new training block layout) */
.expanding-content-extended > * {
	margin-top: 0;
}
p:empty {
	display: none;	
}
/* The readmore buttons don't look like buttons */
button.link {
	border: none;
	background: none;
	padding: 0;
	font: inherit;
	color: #363e46;
	font-weight: bold;
}


/* 10-18-18 Added progress bar styles to leadpage pot type pop-ups */
.progress {
	height: 20px;
	margin-bottom: 20px;
	overflow: hidden;
	background-color: #f5f5f5;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar {
	float: left;
	width: 0;
	height: 100%;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	text-align: center;
	background-color: #337ab7;
	background-color: var(--blue);
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	-webkit-transition: width .6s ease;
	-o-transition: width .6s ease;
	transition: width .6s ease;	
}
.progress-bar-striped {
	background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	-webkit-background-size: 40px 40px;
	background-size: 40px 40px;	
}
.progress-bar.active {
	-webkit-animation: progress-bar-stripes 2s linear infinite;
	-o-animation: progress-bar-stripes 2s linear infinite;
	animation: progress-bar-stripes 2s linear infinite;	
}
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}


/* Leadpage popup styles */
.leadpage-popup {
	padding: 20px;
	background-color: #fff;	
}
.single-leadpage .ft-popup {
	width: calc(100% - 40px);
	max-width: 51.25em;
}
@media (min-width: 37.5em) {
	/* 600 */
	.has-popup-text.has-popup-media .leadpage-popup-columns {
		display: flex;
		align-items: center;
		justify-content: space-between;	
	}
	.has-popup-text.has-popup-media .leadpage-popup-content {
		padding-left: 40px;	
	}
		
}

.wrapper.width-normal {
	max-width: 1200px;
	margin: 0 auto;	
}
.wrapper.width-wide {
	max-width: 1200px;
	margin: 0 auto;	
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: #0d6caa;
	text-decoration: none;
}

a.arrow {
	display: inline-block;
}	
a.arrow:after {
	 /* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'pilotworkshops' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\f105";
	
	display: inline-block;
	margin-left: 0.5em;
}

nav a,
.menu a {
	color: inherit;
}
button,
.button {
	cursor: pointer;
	font-family: inherit;
}
.button {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	display: inline-block;
	/*white-space: nowrap;*/
	padding: 0.75em 1em;
	background-color: #0d6caa;
	color: #fff;
	text-decoration: none;
	border: 1px solid #0d6caa;
	border-radius: 4px;
	
	text-align: center;
}
.button.yellow,
.button.alt {
	border: 1px solid #f4b822;
	background-color: #f4b822;
}
.button.green {
	border: 1px solid #03b760;
	background-color: #03b760;	
}
.button.white {
	background-color: #fff;
	border: 1px solid #fff;
	color: #0d6caa;	
}
.button.red {
	border: 1px solid #cc0000;
	background-color: #cc0000;	
}
.button.muted {
	border: 1px solid #f3f3f3;
	background-color: #f3f3f3;
	color: #363e46;
}

.button.nocaps {
    text-transform: none;
}

.button small {
	display: block;
	text-transform: none;	
}

/* Mostly for the sales page header button */
.button.box-shadow {
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);	
}
/* which doesn't fit with the logo at the smallest size */
@media (min-width: 30em) {	
	.button.bigger {
		font-size: 1.125em;	
		padding: 0.75em 1.5em;
	}
}



.menu .button {
    color: #fff;
}
.menu .button.muted {
    color: #363e46;
}


/* Some buttons have icons */
.button-icon {
	line-height: inherit;
	vertical-align: bottom;
	margin-right: 0.5em;	
}


/* Same colors might be used on text like headings */
.red:not(.button) {
	color: var(--red);	
}
.blue:not(.button) {
	color: var(--blue);	
}
.yellow:not(.button) {
	color: var(--yellow);	
}
.green:not(.button) {
	color: var(--green);	
}

.uppercase {
	text-transform: uppercase;	
}




ul.checkmark-bullets {
	list-style: none;
	padding: 0;
	line-height: 2;
}

ul.checkmark-bullets li:before {
	content: "\f00c";
	font-family: pilotworkshops;
	font-size: 22px;
	color: green;
	display: inline-block;
	padding-right: 7px;
	position: relative;
	top: 2px;
	line-height: 1;
}




.toggled-off {
	visibility: hidden;
	position: absolute;
	top: -9999em;
	left: -9999em;
	transition: none;
	opacity: 0;
}
.toggled-on {
	visibility: visible;
	position: static;
	opacity: 1;
}


/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/



/* Cockpit menu is right under the site-header */
.cockpit-menu {
	position: relative;
	z-index: 8;
}
.cockpit-nav {
	position: absolute;
	right: 100%;
	top: -9999em;
	width: 100%;
	max-width: 360px;
	transform: translateX(0);
	transition: transform 0.25s ease-out;
	background-color: #1e242a;
	color: #fff;
}
.toggled .cockpit-nav {
	top: 100%;
	transform: translateX(100%);
}


/* cockpit menu styles */
.cockpit-nav h3 {
	color: inherit;
	margin: 0 20px 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid #343a3f;
}

.cockpit-nav li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.cockpit-nav li.toggled {
	background-color: rgba(255,255,255,0.1);
}


.cockpit-nav a {
	color: inherit;
	display: inline-block;
	margin: 1em 20px;
	max-width: calc(100% - 5em);
}
.cockpit-nav button {
	margin-right: 1em;
	margin-left: auto;
	color: inherit;
	border: none;
	background: none;
	padding: 0;
	width: 1.5em;
	height: 1.5em;
}
.cockpit-nav button:focus {
	border-color: #fff;
}

.cockpit-nav .sub-menu {
	visibility: hidden;
	position: absolute;
	left: -9999em;
	transition: all 0.25s ease-out;
	transform-origin: top right;
	transform: scale(0);
	opacity: 0;
	width: 100%;

}

.cockpit-nav .toggled > .sub-menu {
	visibility: visible;
	position: static;
	transform: scale(1);
	opacity: 1;
}

/*
.cockpit-nav .current_page_item > a {
	color: #f4b822;	
}
*/

.cockpit-nav .current-menu-item,
.cockpit-nav .current-menu-ancestor {
	background-color: #343a3f;
}
.cockpit-nav .current-menu-item:before,
.cockpit-nav .current_page_item:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 6px;
	background-color: #f4b822;
}

@media (min-width: 48em) {
	/* 768 */
	
	/* More padding on left/right */
	/*
	.cockpit-nav h3 {
		margin: 0 50px;	
	}
	
	.cockpit-nav a {
		margin: 1em 50px;
		max-width: calc( 100% - 11em );
	}
	
	.cockpit-nav button {
		margin-right: 3em;	
	}
	*/
	
}

@media (min-width: 64em) {

	/* Cockpit nav is always visible now */
	.has-cockpit-nav .site-content {
		display: flex;
	}
	.cockpit-menu {
		padding: 0;
		min-width: 320px;
	}
	.cockpit-menu-toggle {
		display: none;
	}
	.cockpit-nav,
	.toggled .cockpit-nav {
		position: static;
		transform: none;
	}
	.content-area {
		flex-grow: 1;
	}
	

}


@media (min-width: 90em) {
	/* 1440px */
	.cockpit-menu {
		width: 360px;
	}
		
}




/*--------------------------------------------------------------
## Content
--------------------------------------------------------------*/

/* Single posts and pages */
.no-cockpit-nav .entry-header,
.no-cockpit-nav .entry-content,
.no-cockpit-nav .entry-footer {
	padding: 0 20px;
}

/* Make sure we contain any floated images */
.entry-content:after {
	content: '';
	display: table;
	clear: both;	
}


@media (min-width: 48em) {
	
	.no-cockpit-nav .entry-header,
	.no-cockpit-nav .entry-content,
	.no-cockpit-nav .entry-footer {
		padding: 0 50px;
		max-width: 51.25em;
		margin: 0 auto;	
	}
	
}


/* Needs to be different on WC pages */
.woocommerce-page.no-cockpit-nav .entry-header,
.woocommerce-page.no-cockpit-nav .entry-content,
.woocommerce-page.no-cockpit-nav .entry-footer {
	padding: 0;
	max-width: 100%;
}





/* Tips Posts */
.single-tips .site-header {
	box-shadow: 0em 0.15em 2em rgba(0,0,0,0.15);	
}

/* Polls html was migrated as-is. Same for these styles */
.poll-box {
    border-radius: 3px;
    padding: 15px 20px;
    margin-bottom: 35px;
    margin-top: 35px;
    border: 2px solid #dbdfe4;
}
.poll-question {
    color: #333;
    font-size: 20px;
    font-weight: bold;
}
.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    margin: 0 auto 20px;
    /*display: none;*/
}
.poll-result {
    margin-bottom: 15px;
}
.mbn {
	margin-bottom: 0;		
}
.poll-radio input {
	margin-right: 0.5em;
}
.poll-progressbar {
    width: 100%;
    background-color: #e9ebee;
    border-radius: 3px;
}
.poll-progressbar div {
    background: hsl(212,100%,38%);
    border-radius: 3px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 12px;
    line-height: 25px;
	height: 15px;
}
.poll-result .poll-count {
    color: hsl(212,100%,38%);
    text-align: right;
    font-size: 14px;
    display: block;
}

.poll-submit {
	margin-top: 1em;	
}


.next-weeks-tip {
	font-size: 19px;	
}
.next-weeks-tip dt {
	display: inline;
	font-weight: 600;
	color: #f4b822;
}
.next-weeks-tip dt:after {
	content: ':';
}
.next-weeks-tip dd {
	display: inline;
	margin: 0;
	padding-left: 0.25em;
	font-weight: 600;
	color: #1e242a;
	text-transform: uppercase;
}


/* Tips posts use disquss for comments */
#disqus_thread {
	padding: 20px 0;	
}









/* Mastery Posts */
.mastery-tracker-el {
	margin: 1em 0;	
}
/* Mastery posts sections */
.mastery-section {
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
	margin: 40px auto;
	padding: 20px;
}
.mastery-section h2 {
	margin-top: 0;	
}

/* These sections are a little different */
.watch-the-overview,
.learn-from-the-instructor,
.instructors {
	text-align: center;
	box-shadow: none;
	padding: 0;
}

/* Download links for videos */
.video-download p {
	margin-bottom: 0;
}

/* listen-to-the-roundtable */
.listen-to-the-roundtable audio {
	display: block;
	width: 100%;	
}

/* Instructors section */
.instructors {
	text-align: left;
}
.instructor-image {
	text-align: center;
}
.instructor-image img {
	display: block;
	margin: 0 auto;
	border-radius: 50%;
}


/* Survey forms */
.community-survey fieldset {
	margin: 0;
	padding: 0;
	border: none;	
}
.community-survey p {
	margin: 0;	
}
.community-survey ul {
	list-style: none;
	margin: 0;
	padding: 0;	
}
.community-survey li {
	margin: 1em 0;
	position: relative;
	padding-left: 40px;
}
/* We don't actually show the radio inputs*/
.community-survey input {
	position: absolute;
	left: -9999em;
}
.community-survey label {
	
}
/* Fake radio buttons */
.community-survey label:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	border: 2px solid;
	border-radius: 50%;
}
.community-survey label:hover {
	color: #0d6caa;	
}
.community-survey label:hover:before {
	border-color: #0d6caa;
}
.community-survey input:checked + label {
	color: #0d6caa;
}
.community-survey input:checked + label:after {
	content: '';
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	top: 7px;
	left: 7px;
	border-radius: 50%;
	background-color: #0d6caa;
}

/* Results */
.result-bar,
.result-text {
	display: block;	
}
.result-bar {
	height: 1em;
	background-color: #0d6caa;
}
.result-text {
	font-size: 0.875em;	
}

/* Submitted info */
.survey-submitted-info {
	font-size: 0.875em;
}

.survey-submitted-info dt {
	
}
.survey-submitted-info dt:after {
	content: ':';
}

.survey-submitted-info dd {
	margin: 0;
	font-weight: bold;
}

/* Completion form */
.mastery-single-completion-form {
	text-align: center;	
}

/* Uses fake checkboxes like resources lists */
.mastery-completion input {
	position: absolute;
	left: -9999em;
}
.mastery-completion label {
	position: relative;
	padding-left: 34px;
}

/* Check box */
.mastery-completion label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
}

/* Check mark */
.mastery-completion label:after {
	font-family: 'pilotworkshops' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e5ca";
	color: #03b760;
	font-size: 2em;
	position: absolute;
	top: -0.33em;
	left: -2px;
	display: none;
}
.mastery-completion input:checked + label:after {
	display: inline-block;	
}
.mastery-completion-text {
	font-size: 1.5em;
	font-weight: bold;
}


/*
.training-block-resources label {
	position: absolute;
	right: 0;
	top: 2px;
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
}
.training-block-resources label .pwicon-check2 {
	color: #03b760;
	font-size: 2em;
	position: absolute;
	top: -0.33em;
	left: -2px;
	display: none;
}
.training-block-resources input:checked + label .pwicon-check2 {
	display: inline-block;
}
*/





/* 11-9-18 - Created a mastery_content page section to output all the mastery fields stuff */
.page-section-mastery-content {
	padding: 0 20px;	
}
.page-section-mastery-content-inner {
	max-width: 1080px;
	margin: 0 auto;	
}
@media (min-width: 37.5em) {
	
	.learn-from-the-instructor .instructor {
		display: flex;
		align-items: center;
	}
	.learn-from-the-instructor .instructor-image {
		min-width: 180px;
		margin: 1em 0;	
	}
	.learn-from-the-instructor .instructor-bio {
		padding-left: 20px;
	}
	
}
@media (min-width: 48em) {
	
	.page-section-mastery-content {
		padding: 0 50px;	
	}
		
}





/* Wings forms are used on mastery pasts and training posts */
.page-section-wings-form {
	margin-top: 40px;
	margin-bottom: 20px;
	background-color: #0d6caa;
	color: #fff;
	padding: 20px;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
	border-radius: 4px;
	
}
.faast-logo {
	padding: 20px;
	border-radius: 4px;
	background-color: #fff;	
}
.wings-credits-content,
.wings-credits-content-inner {
	position: relative;
}
.wings-credits-content:before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(images/logo-swoosh-white.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: top right;
	opacity: 0.1;
}
.mastery-wings-form:before {
	content: '';
	display: table;	
}
/* Need to override heading color */
.wings-credits-content h2,
.ps-wf .gform_title {
	color: #fff;	
}

.page-section-wings-form .gform_button {
	background-color: #fff;
	border-color: #fff;	
	color: #0d6caa;
}



/* 1-29-19 Added opt-in-form section - put styles here because of the bg image and these are always at the bottom of Tips posts */
/* Styled just like the Wings form above */
.page-section-opt-in-form {
	margin: 20px 0;
	padding: 0 20px;
	
}
.opt-in-form {
	padding: 0.25em 20px;
	background-color: #0d6caa;
	color: #fff;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
	border-radius: 4px;	
}
.opt-in-form-inner {
	position: relative;	
}

.opt-in-form-inner:after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(images/logo-swoosh-white.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: top right;
	opacity: 0.1;
	z-index: 0;
}

.opt-in-form-content,
.opt-in-form-form {
	position: relative;
	z-index: 1;	
}

/* Need to override heading color */
.opt-in-form h2,
.opt-in-form h3,
.opt-in-form .gform_title,
.opt-in-form .validation_message {
	color: #fff;	
}
.opt-in-form .gform_button {
	/*
	background-color: #fff;
	border-color: #fff;	
	color: #0d6caa;
	*/
	background-color: #03b760;
	border-color: #03b760;	
	color: #fff;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
	/*
	--blue: #0d6caa;
	--yellow: #f4b822;
	--green: #03b760;
	
	--box_shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2); 
	*/
}


@media (min-width: 48em){
	
	.page-section-opt-in-form {
		padding: 0 50px;
		max-width: 51.25em;
		margin: 40px auto;	
	}
	
}





@media only screen and (min-width: 37.5em) {

	/* some sections start to display in rows */
	.mastery-row {
		display: flex;
		justify-content: space-between;
	}

	.mastery-row section {
		width: calc(50% - 10px);
	}
	
	/* wings form starts to have the image on the left, content on right */
	.wings-credits {
		position: relative;	
	}
	.wings-credits-inner {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.faast-logo {
		max-width: 40%;	
	}
	.wings-credits-content {
		position: static;
		max-width: 60%;
		padding-left: 20px;
	}
	.wings-credits-content::before {
		height: 270px; 	
	}
	.mastery-wings-form {
		width: 100%;	
	}
	
}


@media only screen and (min-width: 48em) {
	.wings-credits-inner {
		max-width: 720px;
		margin: 0 auto;	
	}
	.wings-credits-content {
		padding-left: 40px;	
	}
}






/* Will this work for all pages that get the cockpit nav? */
.has-cockpit-nav main {
	padding: 20px;	
}
.has-cockpit-nav h1.entry-title,
.has-cockpit-nav h1.page-title  {
	margin-top: 0;	
}

.access-restricted.single-ifr_mastery main {
	padding: 20px;
	max-width: 48em;
	margin: 0 auto;	
}

@media (min-width: 48em) {
	
	/* Maybe all pages? */
	.has-cockpit-nav main {
		padding-left: 50px;
		padding-right: 50px;
	}
	
}

@media (min-width: 90em) {
	
	/* 1440px */
	
	.site-header {
		padding: 0 80px;	
	}
	
	/* Maybe all pages? */
	.has-cockpit-nav main {
		padding-left: 80px;
		padding-right: 80px;
		max-width: 1240px
	}
	
}


@media (min-width: 100em) {
	
	
		
}



/*--------------------------------------------------------------
## Archives
--------------------------------------------------------------*/

.archive main {
	padding: 20px;
	max-width: 1240px;
	margin: 0 auto;	
}
.archive .page-title {
	margin-top: 0;	
}

/* Mastery archives have a filter select for Completion Status */
.archive-filters {
	padding-bottom: 1em;	
}


.mastery-filters-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}
/*
.mastery-filters-form p {
	margin-right: 20px;
}
*/
.mastery-filters-form .form-row {
	margin: 1em 20px 1em 0;	
}

/*
.mastery-filters-form p {
	display: inline-block;
	margin: 0 1em 0 0;
}
*/

.archive-filters label {
	display: block;
	font-weight: bold;	
}
.archive-filters  select {
	width: auto;
}

.archive-posts {
	display: grid;	
	
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 20px;
}
.archive-post {
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
	border-radius: 4px;
	overflow: hidden;
}

/* Individual post elements (all post types?) */
.archive-post .entry-image img {
	display: block;
}
.archive-post .entry-header {
	padding: 0 1em;
}
.archive-post .entry-title {
	margin: 1rem 0 0.5rem;
	font-size: 1.125em;
	line-height: normal;
}
.archive-post .entry-title a {
	color: inherit;	
}
/* Mastery posts show instructors */
.entry-header dl {
	margin-top: 0;	
}
.entry-header dd {
	margin: 0;
}
.archive-post .entry-summary {
	padding: 0 1em;
	margin: 1em 0;
}
.archive-post .entry-footer {
	padding: 0 1em;
}

.entry-footer span[class*="pwicon-"] {
	line-height: inherit;
	vertical-align: bottom;
	margin-left: 0.5em;	
}


/* Special layout for news post type archives */
/* News post type also has taxonomy (locations) */
/* What about actual posts and those categories/tags? */
.post-type-archive-news main {
	/*
	max-width: 690px;
	margin: 0 auto;
	*/
}
.post-type-archive-news .archive-posts {
	
}



/* Going to 2 columns here (620px) means .grid-post is again the same width it was at 320 (280px) */
@media (min-width: 38.75em) {
	.archive-posts {
		grid-template-columns: repeat(2, 1fr);
	}		
}

/* Going to 3 columns here (920px) means .grid-post is again the same width it was at 320 (280px) */
@media (min-width: 57.5em) {
	.archive-posts {
		grid-template-columns: repeat(3, 1fr);
	}		
}

/* Go back to 2 columns at 1024 if the cockpit nav is present */
@media (min-width: 64em) {
	.has-cockpit-nav .archive-posts {
		grid-template-columns: repeat(2, 1fr);
	}		
}

/* Going to 3 columns here (1160px) means .grid-post is again the same width it was at 320 (280px) */
@media (min-width: 72.5em) {
	.has-cockpit-nav .archive-posts {
		grid-template-columns: repeat(3, 1fr);
	}		
}


/* Going to 4 columns here (1220px) means .grid-post is again the same width it was at 320 (280px) */
@media (min-width: 76.25em) {
	.archive-posts {
		grid-template-columns: repeat(4, 1fr);
	}		
}

/* Different if cockpit nav is showing */
@media (min-width: 91.25em) {
	.has-cockpit-nav .archive-posts {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.has-cockpit-nav .archive-posts.columns-3 {
		grid-template-columns: repeat(3, 1fr);
	}			
}






/*--------------------------------------------------------------
## Pagination
--------------------------------------------------------------*/
.archive-pagination {
	margin-top: 20px;	
}

.nav-links {
	text-align: center;	
}

.nav-links .page-numbers {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 4px;	
}

.page-numbers.current {
	background-color: #0d6caa;
	color: #fff;	
}


/*--------------------------------------------------------------
## Single Posts
--------------------------------------------------------------*/





/*--------------------------------------------------------------
## Page Sections
--------------------------------------------------------------*/

/* Teaser Cards */
.page-section-teaser-cards {
	margin-bottom: 40px;	
}









/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
.site-footer {
	padding: 20px;
	background-color: #f3f3f3;
	color: #363e46;
}

.site-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
}


.footer-top {
	border-bottom: 1px solid #e0e0e0;
	padding: 20px 0;
	margin-bottom: 20px;
}

.footer-image {
	padding-bottom: 20px;
	text-align: center;	
}

.site-footer a {
	color: #0d6caa;	
}

@media (min-width: 37.5em) {
	/* 600px */
	
	.footer-images {
		display: flex;	
		align-items: center;
		justify-content: space-between;
	}
	.footer-images-3 {
		max-width: 700px;
		margin: 0 auto;	
	}
	.footer-images-3 .footer-image {
		max-width: 33.3333%;	
	}
	
	.footer-columns {
		display: flex;
		flex-wrap: wrap;
	}
	.footer-column {
		width: 50%;
	}
}


@media (min-width: 48em) {
	/* 768 */
	.site-footer {
		padding: 20px 50px;
	}
}

@media (min-width: 64em) {
	/* 1024 */
	.footer-columns {
		justify-content: space-between;
	}
	.footer-column {
		width: auto;
		max-width: 25%;
	}
}



/*--------------------------------------------------------------
# 404 Page
--------------------------------------------------------------*/
/* This page has a gray background and white text with a radar screen */
.error-404-page-content {
	background-color: #363E46;
	color: #fff;
	text-align: center;
	padding: 40px 20px;
}
.error-404-page-content h2 {
	color: inherit;
}
.error-404-radar {
	display: inline-block;
}
.error-404-text {
	max-width: 680px;
	margin: 0 auto;
}
.radar-wrapper {
	width: 270px;
	height: 270px;
	background: radial-gradient(#022702 16.6666%, #038f03);
	border-radius: 50%;
	border: 1px solid #13e213;
	overflow: hidden;
	box-shadow: 0 0 20px #13e213;
}
.radar {
	position: relative;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	background: radial-gradient(
		circle at center,
		transparent 0%,
		transparent 14.5%,
		#13e213 15%,
		transparent 15.5%,
		transparent 29.5%,
		#13e213 30%,
		transparent 30.5%,
		transparent 44.5%,
		#13e213 45%,
		transparent 45.5%,
		transparent 59.5%,
		#13e213 60%,
		transparent 60.5%,
		transparent 100%);
}
.cross-section,
.cross-section:after {
	position: absolute;
	width: 1px;
	height: 100%;
	background: #13e213;
}
.cross-section {
	left: 50%;
	transform: translateX(-50%);
}
.cross-section:after {
	content: '';
	display: block;
	transform: rotate(90deg);
}
.spinner {
	position: absolute;
	height: 50%;
	width: 20%;
	background: linear-gradient(-290deg, #13e213 0%, transparent 49%);
	transform-origin: 0 0;
	left: 50%;
	top: 50%;
	animation: scan 5s linear infinite;
	border-left: 1px solid #13e213;
}
.blip {
	width: 2%;
	height: 2%;
	position: absolute;
	background: #13e213;
	border-radius: 50%;
	top: 25%;
	left: 75%;
	opacity: 0;
	animation: blip 5s linear infinite;
}
.blip + .blip {
	animation-delay: -1.252s;
	top: 16%;
	left: 18%;
}

@keyframes scan {
	0% {
		transform: translate3d(0, 0, 0) rotate(70deg);
	}
	100% {
		transform: translate3d(0, 0, 0) rotate(430deg);
	}
}

@keyframes blip {
	0% {
		opacity: 0;
	}
	43% {
		opacity: 0;
	}
	45.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}




/*----------------------------------------------
# Course Tracker 
----------------------------------------------*/


.tracker-el {
	white-space: nowrap;
	font-size: 0.75em;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0.5em 1.5em;
	background-color: #f3f3f3;
	border-radius: 1.5em;
}
.tracker-el.completed {
	background-color: #03b760;
	color: #fff;
}
.pw-user-meta legend {
	font-size: 1.25em;
	font-weight: bold;	
}





/* Completion forms on archive views */
.post-completion-form {
	position: relative;
		
}

.completion-fields-toggle {
	float: right;
	padding: 0;
	width: 32px;
	height: 30px;
	border: 0;
	background: none;
	background-coolor: transparent;
	color: #ddd;	
}

.completion-form-fields {
	position: absolute;
	width: 180px;
	background-color: #fff;
	padding: 0.5em 1em;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
	top: -9999em;
	right: 9999em;
	opacity: 0;
	transition: opacity .25s ease-out;
}
/* EDIT: 9-18-18 - Make these fields appear on hover now */
.post-completion-form:hover .completion-form-fields,
.post-completion-form.active .completion-form-fields {
	top: 100%;
	right: 0;
	opacity: 1;	
}





/* EDIT: 1-2-20 Also using these in traning_block sections */
.tb-tracker-progress {
	position: relative;
	max-width: 250px;
}
.tb-tracker-progress:hover .completion-form-fields,
.tb-tracker-progress.active .completion-form-fields {
	top: 100%;
	right: 0;
	opacity: 1;
	/* Put on top of resource rows */
	z-index: 2;	
}
.completion-form-fields a {
	display: block;
	font-size: 0.875em;
	margin: 0.5rem 0;
	color: inherit;	
}
.completion-form-fields a:hover {
	color: var(--blue);
}





.completion-form-fields label {
	display: block;
	font-size: 0.875em;
	margin: 0.5rem 0;	
}
.completion-form-fields label:hover {
	color: var(--blue);
}
.completion-form-fields input {
	position: absolute;
	left: -9999em;	
}

/* EDIT: 9-18-18 - Make these fields appear on hover now - Should this only happen n a big monitor? */
/*
@media (min-width: 1367px) {
	
	.post-completion-form:hover .completion-form-fields {
		top: 100%;
		right: 0;
		opacity: 1;	
	}
	
}
*/

/* Option for "sales page header" */

/* Always sticky on these pages */
@media(min-height: 25em) {
	.site-header.sales-page-header {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		background: #fff;
		z-index: 21;	
	}
}


.sales-page-header-button {
	position: absolute;
	top: 50%;
	right: 20px;
	
	transform: translateY(-50%);
}

/* 6-19-19 Made these buttons slightly smaller */
@media(max-width: 48em){
	.sales-page-header-button .button {
		font-size: 13px;
	}
}




/* 6-13-19 Added "Challenge Header" */
.challenge-header-text {
	font-size: 1.2em;
	font-weight: bold;
	color: #aaa;	
}


@media (min-width: 48em) {
	
	.sales-page-header-button {
		right: 50px;	
	}
	
	.challenge-header-text {
		font-size: 1.5em;	
	}
	
}

@media (min-width: 64em) {
	
	.sales-page-header-button {
		right: 0;	
	}
	
	.challenge-header-text {
		font-size: 2em;	
	}
	
}






/* regular header becomes sticky at 1440px */
@media (min-width: 90em) {
	/* 1200 */
	.site-header {
		position: sticky;
		top: 0;
		background: #fff;
		z-index: 21;	
	}
	
	/* 10-14-20 Added this because jeff changed "Products" main menu item to point to this section on homepage */
	.page-section[id="ifr-mastery"] {
		scroll-snap-margin-top: 94px;
		scroll-margin-top: 94px;
	}

	
}



/* 10-18-18 Added leadpage post type - no sticky header for these */
.single.single-leadpage .site-header {
	position: static;	
}
.single.single-leadpage .site-header .sales-page-header-button {
	display: none;
}
article.type-leadpage {
	margin: 1em 0;	
}









/* 3-18-19 refactor landing page css and move styles here */









/* Quote Section */
.page-section-quote {
	margin: 0;
	padding: 40px 20px;
	/*background-color: #006BA8;*/
	background-color: #0d6caa; 
	color: #fff;
	text-align: center;
}
.page-section-quote.bluegray {
	color: #005BC0;
	background-color: #F3F3F3;
	/*padding: 80px 30px;*/
}
.ps-quote-content {
	max-width: 1020px;
	margin: 0 auto;
	font-size: 1.125em;
}
.ps-quote-content blockquote {
	margin: 0;
	font-style: italic;
}
.ps-quote-content blockquote p {
	margin: 0;
}
.page-section-quote .author {
	margin-top: 1em;
	font-weight: 300;
}
.page-section-quote:not(.bluegray) .author:before {
	content: "\2014 ";
}

@media (min-width: 48em) {
	
	.page-section-quote {
		padding: 60px 50px;
	}
	.ps-quote-content blockquote {
		font-size: 1.25em;
	}
}

@media (min-width: 64em) {
	
	
	.ps-quote-content blockquote {
		font-size: 1.5625em;
	}
}












/* Wysiwyg & Wysiwyg 2-column Page Sections */
.page-section-wysiwyg {
	padding: 0 20px;
}

.page-section-wysiwyg.graybg,
.page-section-wysiwyg.blue {
	margin: 0;
	padding: 40px 20px;
	background-color: #f3f3f3;	
}
.page-section-wysiwyg.blue {
	background-color: #f5fcff;
}
.page-section-wysiwyg.graybg .page-section-header {
	margin-top: 0;
}
/* Has option for less margin on top/bottom */
.page-section-wysiwyg.smalltop {
	 margin-top: 20px;
}
.page-section-wysiwyg.smallbot {
	 margin-bottom: 20px;
}

.page-section-wysiwyg-inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* Has option for narrow width (but not the 785px size) */
.narrow .page-section-wysiwyg-inner,
.narrowwidth .page-section-wysiwyg-inner { 
	max-width: 960px; 
}

/* 9-28-20 - Force narrow width to match tips width? */
article.type-tips .narrowwidth .page-section-wysiwyg-inner {
	max-width: 720px; 
}

/* 9-28-20 Always clear floated images? */
.page-section-wysiwyg-inner::after {
	content: '';
	display: block;
	clear: both;	
}


/* Has option for reverse stacking on mobile */
.wysiwyg-two-col-wrapper {
	display: flex;
	flex-direction: column;
}
.mobile-reverse .wysiwyg-two-col-wrapper {
	flex-direction: column-reverse;
}
.wysiwyg-left {
	margin: 0 0 20px;
}
.wysiwyg-right {
	margin: 20px 0 0;
}
.mobile-reverse .wysiwyg-left {
	margin: 20px 0 0;
}
.mobile-reverse .wysiwyg-right {
	margin: 0 0 20px;
}

/* Becuase we're always using flex */
.wysiwyg-col-inner > *:first-child {
	margin-top: 0;	
}
.wysiwyg-col-inner > *:last-child {
	margin-bottom: 0;	
}




/* TODO: get rid of this */
/*
.page-section-wysiwyg.smalltop { padding-top: 15px; }
.page-section-wysiwyg.smallbot { padding-bottom: 15px; }
.page-section-wysiwyg.graybg, 
.page-section-wysiwyg.gray, 
.page-section-teaser-cards.gray {
	background-color: #F3F3F3;
}
*/

/*
.page-section-wysiwyg.blue, 
.page-section-teaser-cards.blue {
	background-color: #f5fcff;
	padding: 20px 0; 
}
*/

/* Not sure about this */
.page-section-wysiwyg img.round-border {
	border-radius: 5px;
}

/* Not sure where/if this is used */
@media (max-width: 32em) {
	.page-section-wysiwyg img.responsive-center {
		display: block;
		float: none;
		margin: 0 auto 1em auto;
	}
}

/* Not sure where/if this is used */
@media (min-width: 32em) {
	.page-section-wysiwyg ul.cols-2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.page-section-wysiwyg ul.cols-2 li {
		width: 47%;
		line-height: 2.5;
	}
}



@media (min-width: 48em) {
	
	.page-section-wysiwyg {
		padding: 0 50px;	
	}
	
	.page-section-wysiwyg.graybg,
	.page-section-wysiwyg.blue {
		padding: 60px 50px;
	}
	
	/* Starts to have columns */
	.wysiwyg-two-col-wrapper,
	.mobile-reverse .wysiwyg-two-col-wrapper {
		flex-direction: row;
	}

	.wysiwyg-left,
	.wysiwyg-right,
	.mobile-reverse .wysiwyg-left,
	 .mobile-reverse .wysiwyg-right {
		margin: 0;
		width: 50%;
	}
	
	.wysiwyg-left {
		padding-right: 20px;	
	}
	.wysiwyg-right {
		padding-left: 20px;	
	}
	
	
}
/*
@media (min-width: 64em) {
	
	.wysiwyg-two-col-wrapper {
		align-items: center;	
	}
	
}
*/




/* Teaser Card Sections */
.page-section-teaser-cards {
	padding: 0 20px;
}
/* 11-16-18 added styles to make these not get so narrow when the cockpit nav exists */
.has-cockpit-nav .page-section-teaser-cards {
	padding: 0;
}
.page-section-inner-teaser-cards {
	max-width: 1200px;
	margin: 0 auto;	
}
.teaser-card {
	margin: 40px 0;	
}
.teaser-card-inner {
	padding: 20px;
	background-color: white;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
}
.teaser-card img {
	display: block;	
}
.teaser-card h3 {
	margin: 1rem 0;
	font-size: 1.25em;
	color: #005ac2;
}
.teaser-card .card-text {
	margin-bottom: -1em;	
}

@media (min-width: 40em) {
	.cards-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: center; /* In case there's an odd number */
		margin: 40px -10px 0;
	}

	.teaser-card {
		width: 50%;
		padding: 0 10px;
		margin: 0 0 40px
	}
	
	.teaser-card-inner {
		height: 100%;	
	}
	
}

@media (min-width: 48em) {
	
	.page-section-teaser-cards {
		padding: 0 50px;
	}
	
	.cards-wrapper {
		margin: 40px -20px;
	}

	.teaser-card {
		width: 50%;
		padding: 0 20px;
	}
	/* Can't go to more than two per row until quite large screen size */
	.has-cockpit-nav .teaser-card {
		width: 50%;
	}
	
}

@media (min-width: 64em) {

	.teaser-card {
		width: 33.3333%;
	}
	
}

@media (min-width: 90em) {

	.has-cockpit-nav .teaser-card {
		width: 33.3333%;
	}

}



/* Product Add-ToCart sections */
.page-section-product-add-to-cart {
	padding: 0 20px;
}
.product-add-to-cart-inner {
	box-shadow: 0px 0px 5px 0px rgba(182,209,250,.6);
	padding: 1.5em 20px;
	text-align: center;
	max-width: 580px;
	margin: 40px auto;
}
.product-add-to-cart h3 {
	color: #005ac2;
}

/* 11-27-18 Added default WC price html to these sections */
/* No member discount */
.price > span {
	font-weight: bold;
	color: #272727;	
}
/* has member discount or sale price */
.price > del {
	display: block;	
}
.price > ins {
	font-weight: bold;
	color: #272727;
	text-decoration: none;
}
.product-add-to-cart .button {
	/* NOTE: This is same as .button.big class */
	font-size: 1.125em;	
	padding: 0.75em 1.5em;
}

@media (min-width: 48em) {
	
	.page-section-product-add-to-cart {
		padding: 0 50px;	
	}

	.products-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: -20px auto;
		max-width: 1200px;
	}
	.product-add-to-cart {
		padding: 0 20px;
		margin: 20px 0;
		width: 50%;
	}
	
	.one-column .product-add-to-cart {
		width: auto;	
	}
	
	.product-add-to-cart-inner {
		margin: 0 auto;
		height: 100%;	
	}
	
	/*
	.page-section-product-add-to-cart.two-column .products-wrapper .product-add-to-cart,
	.page-section-product-add-to-cart.three-column .products-wrapper .product-add-to-cart,
	.page-section-product-add-to-cart.four-column .products-wrapper .product-add-to-cart {
		width: 48%;
		display: inline-block;
	}

	.page-section-product-add-to-cart .products-wrapper .product-add-to-cart {
		padding: 40px;
	}

	.page-section-product-add-to-cart .products-wrapper .product-add-to-cart h3 {
		letter-spacing: 2px;
		font-size: 30px;
	}
	*/
}

@media (min-width: 64em) {
	.page-section-product-add-to-cart.three-column .products-wrapper .product-add-to-cart,
	.page-section-product-add-to-cart.four-column .products-wrapper .product-add-to-cart {
		width: 30%;
	}
}

@media (min-width: 75em) {
	.page-section-product-add-to-cart.four-column .products-wrapper .product-add-to-cart {
		width: 23.5%;
	}
}





/* Video Embed Section */
.page-section-video-embed {
	padding: 0 20px;
}
.embed-wrapper {
	max-width: 1200px;
	margin: 0 auto;
}
/* Has option for background color (not sure if it's used anywhere though...) */
.page-section-video-embed.background-gray {
	background-color: #f3f3f3;
	margin: 0;
	padding: 40px 20px;
}
.page-section-video-embed.background-gray .page-section-header {
	margin-top: 0;	
}
.embed-code.with-border .iframeContainer {
	border: 1px solid;
}

/* This section (maybe others?) uses a wysiwyg field for section title & text :(  - Will need to match styles applied to all page-section-headers */
.page-section-header.embed-description h2 {
	margin: 0;
	font-size: 1.6875em;
	line-height: 1.26;
}
.page-section-header.embed-description p {
	margin-bottom: 0;
}


@media (min-width: 48em) {
	.page-section-video-embed {
		padding: 0 50px;
	}
	.page-section-video-embed.background-gray {
		padding: 60px 50px;
	}
	.page-section-header.embed-description h2 {
		font-size: 2em;
		line-height: 1.2;
	}
}

@media (min-width: 64em) {

	.page-section-header.embed-description h2 {
		font-size: 2.5em;
	}
}


/* Users Page Section */



/* Users Page Section */
.page-section-users {
	margin: 0;
	padding: 40px 20px;
	background-color: #f3f3f3;
}
.page-section-users-inner {
	max-width: 1200px;
	margin: 0 auto;	
}
.page-section-users .page-section-header {
	margin-top: 0;	
}


.user-card {
	margin: 40px 0;
}
.user-cards .user-card:first-child {
	margin-top: 0;	
}
.user-cards .user-card:last-child {
	margin-bottom: 0;
}

.user-card-inner {
	display: flex;
	flex-direction: column;
	align-items: center;	
}

.user-card-image {
	max-width: 200px;	
}
.user-card-image img {
	border-radius: 50%;
}
.user-card-content {
	margin-bottom: -1em;	
}
.user-card-content h3 {
	margin: 1rem 0 0;
	text-align: center;	
}
.user-card-content .user-title {
	margin: 0.5rem 0;
	font-size: 1.125em;
	line-height: 1.1666;
	text-align: center;
}


/* Has option for different layout */
.layout-columns .user-card-inner {
	flex-direction: row;
	align-items: flex-start;	
}
.layout-columns .user-card-image {
	max-width: 26%;	
}
.layout-columns .user-card-content {
	padding-left: 20px;
	margin: 0;
}

.layout-columns .user-card-content h3 {
	margin: 0;
	text-align: left;
	font-size: 1.125em;
	line-height: 1.1666;
}
.layout-columns .user-card-content .user-title {
	text-align: left;
	font-size: inherit;	
}
.user-bio-link {
	font-size: 1.125em;
	line-height: 1.1666;
	font-weight: bold;	
}


/* This same content gets displayed in popups */

/* Some styling adjustments */
/* Content won't always fit on screen */
.popup-user-card {
	padding: 55px 20px 0;
	background-color: #f3f3f3;
	max-height: 100%;
	overflow: auto;	
}
.ft-popup.popup-user-card {
	max-width: 785px;	
}


@media (min-width: 48em) {
	.page-section-users {
		padding: 60px 50px;
	}
	
	.user-card {
		margin: 60px 0;	
	}
	
	.user-card-inner {
		flex-direction: row;
		align-items: flex-start;
	}
	
	.user-card-image {
		min-width: 200px;	
	}
	
	.user-card-content {
		padding-left: 40px;	
	}
	
	.user-card-content h3 {
		margin: 0;
		text-align: left;
	}
	.user-card-content .user-title {
		text-align: left;
	}
	
	/* Columns layout option displays differently */
	/* Starts to have columns */
	.layout-columns .user-cards {
		display: flex;
		flex-wrap: wrap;
		margin: -30px -20px;	
	}
	.layout-columns .user-card {
		width: 50%;
		padding: 0 20px;
		margin: 30px 0;	
	}
	.user-cards .user-card:first-child {
		margin-top: 30px;
	}
	.user-cards .user-card:last-child {
		margin-bottom: 30px;
	}
	
	/* Rows start to be vertical cards */
	.layout-columns .user-card-inner {
		flex-direction: column;
		align-items: center;
	}
	.layout-columns .user-card-content {
		padding: 0;
		text-align: center;	
	}
	.layout-columns .user-card-content h3 {
		text-align: inherit;
		font-size: 1.25em;
		line-height: 1.2;
		margin: 1rem 0;
	}
	.layout-columns .user-card-content .user-title {
		text-align: inherit;
		margin: -0.5rem 0 1rem;
	}
	.user-bio-link {
		margin-top: 1rem;	
	}
	
	
}

@media (min-width: 64em) {
	
	
	.page-section-users {
		padding: 80px 50px;
	}
	.user-card-image {
		max-width: none;
		min-width: 270px;
	}
	.user-card-content {
		padding-left: 60px;	
	}
	
	
	/* Columns layout starts to show three across */
	.layout-columns .user-card {
		width: 33.3333%;
	}
	.layout-columns .user-card-image {
		min-width: 200px;
	}
	
	
	/* 11-16-18 added styles to make these not get so narrow when the cockpit nav exists */
	/* 3-20-19 This needs to be checked */
	.has-cockpit-nav .user-card-image {
		width: 180px;
		min-width: 180px;
		max-width: 180px;	
	}
	.has-cockpit-nav .page-section-users .user-card img {
		width: 100%;	
	}
	.has-cockpit-nav .page-section-users .user-card .user-card-content {
		padding-left: 40px;
	}
	
	
}


@media (min-width: 75em) {
	
	.user-card-content {
		padding-left: 80px;	
	}
	
	/* Columns layout starts to show three across */
	.layout-columns .user-card {
		width: 25%;
	}
	
}


@media (min-width: 90em) {
	
	/* Site header is now sticky :( */
	.user-card {
		margin-top: 0;
		padding-top: 90px;	
	}
	
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/

.alignleft,
.alignright,
.aligncenter {
	display: block;	
	margin-bottom: 1em;
}

.aligncenter {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
}

@media(min-width: 37.5em){
	.alignleft {
		float: left;
		margin-right: 1.5em;
	}
	
	.alignright {
		float: right;
		margin-left: 1.5em;
	}
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	padding: 20px 0;
}
.widget-title {
	margin: 0;
}
/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}

.textwidget p:last-child {
	margin-bottom: 0;
}

/* special case for last column in footer */
.fc-4 p {
	margin: 0;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}


/*--------------------------------------------------------------
## Form elements
--------------------------------------------------------------*/
input,
textarea,
select {
	font: inherit;
	padding: 0.5em;
	border: 1px solid #ddd;
	border-radius: 4px;
	width: 100%;
}

/* not these though */
input[type="submit"] {
	width: auto;	
}
input[type="radio"],
input[type="checkbox"] {
	width: auto;
	padding: inherit;
	border-color: #ddd;
}

input[type="number"] {
	width: 60px;
}

/* Gravity forms specific */
.gform_fields,
.gfield_radio,
.gfield_checkbox {
	list-style: none;
	margin: 0;
	padding: 0;	
}
.gform_fields > li {
	margin: 1em 0;	
}
.gform_fields > li.gform_hidden {
	margin: 0;
}
.gfield > label {
	display: block;
	font-weight: bold;
}

.gfield_radio input {
	margin-right: 0.25em;	
}

/* required field has no value */
.invalid > input {
	box-shadow: inset 2px 0 0 #e2401c;	
}
/* required field has value */
.valid > input {
	box-shadow: inset 2px 0 0 #0f834d;	
}
.gfield_description {
	font-size: 0.875em;	
}
.validation_message {
	color: #e2401c;	
}
.gform_footer {
	margin-top: 1em;	
}

/* honeypot fields */
.gform_validation_container {
	position: absolute;
	left: -9999em;
	top: -9999em;
}



.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gf_invisible {
    visibility: hidden;
    position: absolute;
    left: -9999px;
}


/* Multi step forms */
#gform_wrapper_53 .gform_previous_button {
	display: none;	
}



@media only screen and (min-width: 100em) {




} /* end 1600 */





/* 7-1-20 new checkout styles */
.woocommerce-billing-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin-left: -0.5rem;
	margin-right: -0.5rem;
}

.woocommerce-billing-fields__field-wrapper > p.form-row {
	width: auto;
	margin-left: 0;
	margin-right: 0;
	flex-basis: 50%;
	margin: 0.5rem 0;
	padding-left: 0.5rem;
	padding-right: 0.5rem;	
}

/* Some (most) fields are still full-width */
.woocommerce-billing-fields__field-wrapper > p.form-row-wide {
	flex-basis: 100%;
}

/* Added toggle buttons, but they should look like text? */
.checkout-field-toggle {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	background-color: transparent;
	color: var(--blue);
	text-decoration: underline;
}


/* 9-28-20 - Hide the Downloads section on the order thank you page */
.woocommerce-order-received .woocommerce-order-downloads {
	display: none;	
}


/* ==========================================================================
   Helper classes
   ========================================================================== */
pre {
	text-align: left !important;
}
/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://goo.gl/yc91cM
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    p:first-letter,
    div:first-letter,
    blockquote:first-letter,
    li:first-letter,
    p:first-line,
    div:first-line,
    blockquote:first-line,
    li:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
	
	
	/* Pilot workshops print styles */
	
	.site-header,
	.cockpit-menu,
	.site-footer {
		display: none;	
	}
	
	/* bbpress specific */
	.bbp-breadcrumb,
	.bbp-template-notice,
	.bbp-pagination {
		display: none;	
	}
	
	.bbp-header,
	.bbp-footer,
	.bbp-reply-form {
		display: none;	
	}
	
	.bbp-reply-header:not(:first-child) {
		margin-top: 2em;
		padding-top: 2em;	
	}
	
	.bbp-reply-header .bbp-reply-permalink,
	.bbp-reply-header .bbp-admin-links,
	.gdbbx-footer-meta {
		display: none;
	}
	
	.bbp-reply-author a[href]:after {
		content: '';	
	}
	
	.bbp-author-role,
	.bbp-reply-ip {
		display: none;	
	}
	#bbpress-forums ul {
		list-style: none;	
	}
	
	
	
}
