/*
Theme Name: NCWU APS
Theme URI: https://liaisonedu.com
Author: Liaison International / Tom Bartling
Author URI: https://liaisonedu.com
Description: NCWU APS landing pages.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 2.0
License:
License URI:
Text Domain: ncwu-aps
Tags:
*/

/* -------------- DEFAULTS & GENERAL 	-------------- */
:root {
	/* NOT USING GOTHAM... font has bug in Safari */

	--font-primary: Raleway, Helvetica, sans-serif;
	--font-headings: 'Open sans', sans-serif;

    --color-default_text: #000000;
	--color-white: #FFFFFF;
	--color-text-primary: #000000;
	--color-text-headings: #000000;
	--color-primary: #013d69;
	--color-secondary: #d7aa00;
	--color-blue: #013d69;
	--color-gold: #d7aa00;
	--color-gray: #f4f4f4;
	--color-blue-transparent: #013d69bb;
	--color-gold-transparent: #d7aa00bb;
	--color-gray-transparent: #f4f4f4bb;
	--color-blue-semi-transparent: #013d69bf;
	
	--color-blue-light: #0561a5;

    /*      UPDATE THIS  */
    --btn-color-background: var(--color-gold);
    --btn-color-text: #ffffff;

}

/* HTML element classes */

BODY, HTML {
	width: 100%;
	font-size: 16px;
	font-family: var(--font-primary);
	color: #000000;
	font-weight: 300;
	padding: 0;
	margin: 0;
	min-width: 390px;
}

IMG, IFRAME {
	max-width: 100%;
}

FORM, INPUT, TEXTAREA, SELECT, OPTION {
	/* width: 90%; */ /* this causes Gravity Forms to not display the form in the admin. */
	max-width: 100%;
	line-height: 200%;
}

/* used with js function goToForm() to scroll to 1st input... selector needs to match js */
INPUT[type='email'] {
	scroll-margin-top: 60px;
}
  

/* overwriting bootstrap */
	B, STRONG {
		font-weight: 700;;
	}

	/* not importing bootstrap typography just for this */
	.text-left {
		text-align: left;
	}
	.text-center {
		text-align: center;
	}
	.text-right {
		text-align: right;
	}



A,
A:link,
A:active,
A:visited,
A:hover {
	font-weight: 700;
	/* color: var(--color-primary); */
}

BUTTON {
    background-color: var(--btn-color-background);
    color: var(--btn-color-text); 
    cursor: pointer;
	border: 0;
	padding: 4px 16px 3px 16px;
	border-radius: 4px;
}

A.cta-btn {
	display: inline-block;	
    background-color: var(--color-blue);
    color: #ffffff;
    cursor: pointer;
	border: 0;
	padding: 6px 16px 3px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-weight:400;
	font-size: 1.0rem;
}

A.cta-btn-blue {
    background-color: var(--color-blue);
    color: #ffffff;
}

A.cta-btn-gold {
    background-color: var(--color-gold);
}

A.cta-btn-white {
    background-color: #ffffff;
	color: var(--color-blue);
}


A.cta-btn:hover,
A.cta-btn-blue:hover {
	background-color: var(--color-blue-light);
}

A.cta-btn-white:hover {
    background-color: #ffffff;
	color: var(--color-blue);
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

.h1, H1, .h2, H2, .h3, H3 {
	display: block;
	font-family: var(--font-headings);
	font-size: 2.75rem;
    text-transform: uppercase;
	/* 
	letter-spacing: .8px;
	line-height: 1.1rem; 
	*/
	margin:0;
}

.h1, H1 {    font-size: 2.5rem;  }
.h2, H2 {    font-size: 2.0rem;  }
.h3, H3 {    font-size: 1.75rem;  }
.h4, H4 {    font-size: 1.50rem;  }


/* generic classes */
.bg-default_text { 
	background-color: var(--color-default_text); 
	color: #000000; 
}

.bg-white { 
	background-color: var(--color-white); 
	color: #000000; 
}

.bg-text-primary { 
	background-color: var(--color-text-primary); 
	color: #000000; 
}

.bg-text-headings { 
	background-color: var(--color-text-headings); 
	color: #000000; 
}

.bg-primary { 
	background-color: var(--color-primary); 
	color: #000000; 
}

.bg-secondary { 
	background-color: var(--color-secondary); 
	color: #000000; 
}

.bg-blue { 
	background-color: var(--color-blue); 
	color: #000000; 
}

.bg-gold { 
	background-color: var(--color-gold); 
	color: #000000; 
}

.bg-gray { 
	background-color: var(--color-gray); 
	color: #000000; 
}

.bg-blue-transparent { 
	background-color: var(--color-blue-transparent); 
	color: #000000; 
}

.bg-gold-transparent { 
	background-color: var(--color-gold-transparent); 
	color: #000000; 
}

.bg-gray-transparent { 
	background-color: var(--color-gray-transparent); 
	color: #000000; 
}

.bg-blue-semi-transparent { 
	background-color: var(--color-blue-semi-transparent); 
	color: #ffffff; 
}

.color-gold {
	color: var(--color-gold);
}


/* --------------------------------------------------------- */
/* --------- Header row    */
.header-page-row {
	/* border-bottom: solid var(--color-gold) 2px; */
}

.header-row {
	color: #ffffff;
	font-family: var(--font-headings);
	text-transform: uppercase;
	border-bottom: solid var(--color-gold) 2px;
}

.header-left {
	text-align: left;
	font-size: 1.0rem;
}

.header-left IMG {
	max-width: 100px;
	width: 100%;
}

.header-center {
	text-align: center;
	font-size: 1.1rem;
	letter-spacing: 4px;
	padding: 20px 0;
}

.header-right {
	text-align: center;
	font-size: 0.9rem;
	letter-spacing: 1px;
	margin: 0.2rem 0;
}

.header-br {
	display: inline;
}

/* --------------------------------------------------------- */
/* --------- Hero row     */
.hero-row, 
.hero-brand-row {
	/* background-image: url(images/hero-brand.jpg); */
	background-color: var(--color-blue);
	background-size: cover;
	background-position: top left;	
	color: #ffffff;
	font-weight: 300;
	letter-spacing: 1px;
	padding: 40px 0;
}

/*
.hero-affordable-row, 
.hero-affordability-row {
	background-image: url(images/hero-affordability.jpg);
}

.hero-flexibility-row {
	background-image: url(images/hero-flexibility.jpg);
}

.hero-business-administration-row {
	background-image: url(images/hero-business-administration-3-flipped.jpg);
}

.hero-career-advancement-row {
	background-image: url(images/hero-career-advancement.jpg);
}

.hero-healthcare-administration-row {
	background-image: url(images/hero-healthcare-admin.jpg);
}

.hero-organizational-leadership-row {
	background-image: url(images/hero-organization-leadership.jpg);
}
*/


.hero-right-col {
	text-align: center;
}

.hero-row H1 {
	line-height: 125%;
	font-size: 2.0rem;
	margin-bottom: 2.0rem;
}

.hero-right-col IMG {
	width: 175px;
}

IMG.badge-reduction {
	width: 165px;
}

.opt-in-policy {
	margin: 20px 0 0 0;
	font-size: 0.8rem;
}

.opt-in-policy H4 {
	font-size: 0.8rem;
	font-weight: 400;
}


/* --------------------------------------------------------- */
/* --------- Primary row     */
/*
.primary-row  {
	
}
*/

/* --------------------------------------------------------- */
/* --------- Fast Facts row     */
.fast-facts-row {
	font-size: 1.0rem;
}

.fast-facts-row H4, 
.fast-facts-row H2 {
	color: #ffffff;
	font-weight: 300;
	text-transform: none;
	margin-bottom: 2.0rem;
}


.fact-container {
	background-color: #ffffff;
	border-radius: 32px;
	text-align: center;
	padding: 15px 10px;
	height: 100%;
}

.fact-container IMG {
	width: 100px;
}	

.fact-container IMG.fact-img-wide {
	width: 250px;
}


/* --------------------------------------------------------- */
/* --------- video row     */
/*
.video-row {
	background-image: url(URL_GOES_HERE);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}
*/

.video-row {
	font-family: var(--font-headings);
	font-size: 1.45rem;
	color: var(--color-blue);
	line-height: 120%;
	letter-spacing: 1px;
	font-weight: 300;
}

.video-row IMG {
	max-width: 100%;
	width: 100%;
}

.testimonial {
	color: #000000;
	font-size: 1.2rem;
	line-height: 120%;
	letter-spacing: normal;
	font-weight: 300;
}

.testimonial-attribution {
	color: var(--color-blue);
	font-weight: 700;
	margin: 30px 0;
	font-size: 1.0rem;
}

.video-row-stat-container {
	color: #666666;
	border-top: solid #666666 1px;
	padding-top: 3.0rem;
}

.video-row-stat {
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--color-gold);
}

.video-row-stat-detail {
	text-transform: uppercase;
	font-weight: 300;
	font-size: 0.9rem;
}

.video-row-stat-detail-source {
	font-size: 0.8rem;
	margin: 20px 0;
}

.video-row-stat-inner-container {
	display: inline-block;
	margin-right: 40px;
}


/* --------------------------------------------------------- */
/* --------- Foundation row     */
/*
.foundation-row {
	background-color: #ffffff;
	font-weight: 500;
}

.foundation-row H2 {
	color: #ffffff;
	font-size: 1.95rem;
}
*/

.affordability-foundation-row {
	border-top: 8px solid var(--color-gold);
	font-size: 1.1rem;
	letter-spacing: 1px;
}



/* --------------------------------------------------------- */
/* --------- Take The Next Step row     */
.take_next_step_row H2 {
	text-transform: none;
}

.take_next_step_row P {
	letter-spacing: 1px; 
}



/* --------------------------------------------------------- */
/* --------- Footer row     */
.footer-row {
	padding: 40px 0;
	min-height: 200px;
	color: #ffffff;
	font-size: 1.2rem;
	font-weight: 300;
	letter-spacing: 4px;
}

.footer-logo {
	max-width: 90%;
	width: 200px;
	margin: 40px auto;
}

.footer-address {
	font-size: 0.8rem;
	line-height: 150%;
	margin: 40px auto;
}	

.footer-tagline {
	font-family: var(--font-headings);
	text-transform: uppercase;
}



.footer-row A,
.footer-row A:link,
.footer-row A:active,
.footer-row A:visited,
.footer-row A:hover {
	color: #FFFFFF;
	text-decoration: none;
	
	font-weight: 300;
	font-family: var(--font-headings);
	text-transform: uppercase;
}



/* --------------------------------------------------------- */
/* --------- Gravity Forms button      */

.gform-theme--framework.gform-theme.gform_wrapper
    .gform-theme-button:where(:not(.gform-theme-no-framework)):where(
        :not(.gform-theme__disable):not(.gform-theme__disable *):not(
                .gform-theme__disable-framework
            ):not(.gform-theme__disable-framework *)
    ),
.gform-theme--framework.gform-theme.gform_wrapper
    :where(:not(.mce-splitbtn))
    > button:not([id*="mceu_"]):not(.mce-open):where(
        :not(.gform-theme-no-framework)
    ):where(
        :not(.gform-theme__disable):not(.gform-theme__disable *):not(
                .gform-theme__disable-framework
            ):not(.gform-theme__disable-framework *)
    ),
.gform-theme--framework.gform-theme.gform_wrapper
    button.button:where(:not(.gform-theme-no-framework)):where(
        :not(.gform-theme__disable):not(.gform-theme__disable *):not(
                .gform-theme__disable-framework
            ):not(.gform-theme__disable-framework *)
    ),
.gform-theme--framework.gform-theme.gform_wrapper
    input:is([type="submit"], [type="button"], [type="reset"]).button:where(
        :not(.gform-theme-no-framework)
    ):where(
        :not(.gform-theme__disable):not(.gform-theme__disable *):not(
                .gform-theme__disable-framework
            ):not(.gform-theme__disable-framework *)
    ),
.gform-theme--framework.gform-theme.gform_wrapper
    input:is([type="submit"], [type="button"], [type="reset"]):where(
        :not(.gform-theme-no-framework)
    ):where(
        :not(.gform-theme__disable):not(.gform-theme__disable *):not(
                .gform-theme__disable-framework
            ):not(.gform-theme__disable-framework *)
    ),
.gform-theme--framework.gform-theme.gform_wrapper
    input[type="submit"].button.gform_button:where(
        :not(.gform-theme-no-framework)
    ):where(
        :not(.gform-theme__disable):not(.gform-theme__disable *):not(
                .gform-theme__disable-framework
            ):not(.gform-theme__disable-framework *)
    ) {
    /* all of that was to select the button in Gravity Forms */
    background-color: var(--btn-color-background);
    color: var(--btn-color-text);
	width: 100%;
}

/*--  Fix styles for WARNINGS for pages with a dark background */
.gform-theme--framework .gform_validation_errors, 
.gform-theme--framework .gform_validation_errors .gform-icon, 
.gform-theme--framework .gfield_validation_message,
.gform-theme--framework .gfield_description,
.gform-theme--framework .gform_validation_errors .gform_submission_error {
	background-color: #ffffff;
	padding: 4px 12px;
	border: solid #000000 1px;
	display: inline-block;
	margin-top: 0;
}


.gform-theme--framework .gform_validation_errors .gform_submission_error {
	display: flex;
}


.gform-theme--framework .gform_validation_errors .gform-icon {
	display: none;
}

/* --------------------------------------------------------- */
/* --------- RESPONSIVE 				 */

@media screen and (min-width: 576px) {

	.header-left {
		text-align: left;
	}

	.header-center {
		text-align: left;
		font-size: 1.0rem;
	}	
	
	.header-right {
		text-align: right;
		font-size: 0.8rem;
	}
	
	.hero-right-col IMG {
		width: 200px;
	}
	
	IMG.badge-reduction {
		width: 185px;
	}
	
	.footer-left {
		text-align: center;
	}
	
	.footer-right {
		text-align: left;
	}
	
}


@media screen and (min-width: 768px) {
/* --------- Hero row     */
	.hero-row, 
	.hero-brand-row {
		background-image: url(images/hero-brand.jpg);
	}

	.hero-affordable-row, 
	.hero-affordability-row {
		background-image: url(images/hero-affordability.jpg);
	}

	.hero-flexibility-row {
		background-image: url(images/hero-flexibility.jpg);
	}

	.hero-business-administration-row {
		background-image: url(images/hero-business-administration-3-flipped.jpg);
	}

	.hero-career-advancement-row {
		background-image: url(images/hero-career-advancement.jpg);
	}

	.hero-healthcare-administration-row {
		background-image: url(images/hero-healthcare-admin.jpg);
	}

	.hero-organizational-leadership-row {
		background-image: url(images/hero-organization-leadership.jpg);
	}

	.header-center {
		font-size: 1.0rem;
	}	
	
	.header-right {
		font-size: 0.8rem;
	}
	

	.fast-facts-row {
		font-size: 0.9rem;
	}

}


@media screen and (min-width: 993px) {
	.hero-right-col {
		text-align: right;
	}
}

@media screen and (min-width: 1200px) {
	.header-br {
		display: none;
	}
}


@media screen and (min-width: 1400px) {

}