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

/* -------------- DEFAULTS & GENERAL 	-------------- */
@font-face {
    font-family: "Gotham-Thin";
    font-display: auto;
    font-fallback: Arial;font-weight: 100;
    src: url(/wp-content/themes/ncwu-undergrad/fonts/Gotham-Thin.otf) format('OpenType');
}

@font-face {
    font-family: "Gotham-XLight";
    font-display: auto;
    font-fallback: Arial;font-weight: 200;
    src: url(/wp-content/themes/ncwu-undergrad/fonts/Gotham--XLight.otf) format('OpenType');
}

@font-face {
    font-family: "Gotham-Light";
    font-display: auto;
    font-fallback: Arial;font-weight: 300;
    src: url(/wp-content/themes/ncwu-undergrad/fonts/Gotham-Light.otf) format('OpenType');
}

@font-face {
    font-family: "Gotham-Book";
    font-display: auto;
    font-fallback: Arial;font-weight: 400;
    src: url(/wp-content/themes/ncwu-undergrad/fonts/Gotham-Book.ttf) format('TrueType');
}

@font-face {
    font-family: "Gotham-Medium";
    font-display: auto;
    font-fallback: Arial;font-weight: 500;
    src: url(/wp-content/themes/ncwu-undergrad/fonts/Gotham-Medium.ttf) format('TrueType');
}

@font-face {
    font-family: "Gotham-Bold";
    font-display: auto;
    font-fallback: Arial;font-weight: 700;
    src: url(/wp-content/themes/ncwu-undergrad/fonts/Gotham-Bold.ttf) format('TrueType');
}

@font-face {
    font-family: "Gotham-Black";
    font-display: auto;
    font-fallback: Arial;font-weight: 800;
    src: url(/wp-content/themes/ncwu-undergrad/fonts/Gotham-Black.otf) format('OpenType');
}


:root {
	--font-primary: Raleway, Helvetica, sans-serif;
	--font-headings: "Open sans", sans-serif;
	--font-btn: Raleway, Helvetica, sans-serif;

	--color-default_text: #000000;
	--color-white: #FFFFFF;
	--color-text-primary: #000000;
	--color-text-headings: #000000;
	--color-bg-primary: #013d69;
	--color-bg-secondary: #d7aa00;
	--color-blue: #013d69;
	--color-gold: #d7aa00;
	--color-gray: #f4f4f4;
	--color-light-gray: #f4f4f4;
	/* --color-blue-transparent: #013d69bb; */
	--color-blue-transparent: #013d69;
	--color-blue-super-transparent: #013d69dd;
	--color-gold-transparent: #d7aa00bb;
	--color-gray-transparent: #f4f4f4bb;


    /*      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;
	padding: 0;
	margin: 0;
	min-width: 390px;
}

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

/* 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); */
}

A.cta-btn, 
A.cta-btn:link, 
A.cta-btn:active, 
A.cta-btn:visited, 
A.cta-btn:hover, 
.cta-btn, 
BUTTON {
    background-color: var(--btn-color-background);
    color: var(--btn-color-text); 
    cursor: pointer;
	display: inline-block;
	padding: 0.5rem 1.0rem;
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: none;
}



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

H1, H2, H3, H4, H5, H6 {
	font-family: var(--font-headings);
	font-weight: 700;
  	line-height: 125%;
  	/* padding: 15px 0; */
  	margin: 20px 0 15px 0;
  	letter-spacing: 5px;
	text-transform: uppercase;
}

H1 { font-size: 1.5rem; }
H2 { font-size: 1.5rem; }
H3 { font-size: 1.25rem; }
H4 { font-size: 1.0rem; }
H5 { font-size: 1.0rem; }
H6 { font-size: 1.0rem; }


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='text'] {
	scroll-margin-top: 60px;
}
    
  
  .form-row {
	  margin: 0 0 20px 0;
  }
  
  
  .page-container {
	/* max-width: 993px; */
	max-width: 1200px; 
  }
  


/* 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-bg-primary { 
	background-color: var(--color-bg-primary); 
	color: #000000; 
}

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

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

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

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

.bg-light-gray {
	background-color: var(--color-light-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; 
}


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


.cta-btn {
	background-color: var(--color-gold);
	color: #ffffff;
	display: inline-block;
	padding: 5px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-family: var(--font-btn);
  
	/* filter: drop-shadow(10px 10px 0px var(--color-blue)); */
  }
  
  .cta-btn-dropshadow {
	filter: drop-shadow(10px 10px 0px var(--color-blue));
  }
  
  .cta-btn-blue {
	background-color: var(--color-blue);
  }


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

.header-left,
.header-center,
.header-right {
	padding: 6px 0;
}

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

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

.header-center {
	text-align: center;
	font-weight: 600;
	font-size: 1.0rem;
	letter-spacing: 4px;
}

.header-right {
	text-align: center;
	font-weight: 700;
	font-size: 1.0rem;
	letter-spacing: 1px;
}

.header-br {
	display: inline;
}

/* --------------------------------------------------------- */
/* --------- Hero row     */
/*
.hero-row, 
.hero-row-brand {
	background-image: url(ADD_URL_HERE);
	background-size: cover;
	background-position: top left;	
}
*/

.hero-row {
	background-image: url(images/hero-msitm-2.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: solid var(--color-gold) 10px;
}

.hero-msitm {
	background-image: url(images/hero-msitm-2.jpg);
	background-position: top left;
}

.hero-mssm {
	background-image: url(images/hero-mssm-3.jpg);
	background-position: top left;
}

/*--- CJ v2 - Cops in Airport */
/*
.hero-mscj {
	background-image: url(images/hero-mscj-v2-1.jpg);
	background-position: top right;
}
.hero-mscj-2 {
	background-image: url(images/hero-mscj-v2-2.jpg);
	background-position: center left;
}
*/
.hero-mscj-3 {
	background-image: url(images/hero-mscj-v2-3.jpg);
	background-position: top right;
}


.hero-thank-you-row {
	background-image: url(images/hero-mssm-3.jpg);
	background-position: top left;
}

.hero-blur-container {
	backdrop-filter: blur(10px);
}



.hero-row H1,
.hero-row H2,
.hero-row P {
	color: #ffffff;
}



.hero-row-content-container H2 {
	font-size: 1.9rem;
	margin: 15px 0;
	text-transform: uppercase;
	line-height: 110%;
}

.hero-row-content-container {
	padding: 20px;
	background-color: var(--color-blue-transparent); 
}



/* --- Hero row - Thank You page     */
.hero-thank-you-row LI {
	margin-bottom: 1.4rem;
}

.hero-thank-you-row A, 
.hero-thank-you-row A:link, 
.hero-thank-you-row A:active, 
.hero-thank-you-row A:visited, 
.hero-thank-you-row A:hover {
	color: var(--color-gold);
	text-decoration: underline;
	background-color: var(--color-blue);
}

.thankyou-section {
	color: #ffffff;
	margin-bottom: 20px;
}

.thankyou-badges-container IMG {
	
	max-height: 250px;
	margin: 10px auto;
	text-align: center;
}




.intro-start-future {
	font-weight: 500;
	font-size: 1.2rem;
}


.new-tab-icon {
	margin: 0 0.5rem;
}

.new-tab-icon IMG {
	max-height: 1.0rem;
}



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

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

.fast-facts-subhead {
	font-size: 1.2rem;
	font-weight: 600;
	font-family: var(--font-headings);
}

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

.fact-number {
	font-size: 2.0rem;
}
.fact-number IMG {
	width: 80px;
	margin: 10px;
}


.fact-text {
	font-size: 1.0rem;
	color: #000000;
}

.fact-container-mscj .fact-number IMG {
	width: initial;
	max-height: 200px;
	margin: 20px;
	background-color: transparent;
}

.fact-container-mscj .fact-text {
	color: #000000;
}



/* --------------------------------------------------------- */
/* --------- Program Benefits row     */
.program-benefits-row {
	/* border-bottom: solid var(--color-blue) 10px; */
	/*
	background: linear-gradient(90deg, var(--color-blue), var(--color-blue)), linear-gradient(90deg, #ffffff, #ffffff);
	background-size: 50%, 50%;
	background-position: left center, right center;
	background-repeat: no-repeat, no-repeat;
	*/
}

/*
.program-benefits-photo-background {
	background-image: url(images/benefits-brand.jpg);
	background-size: cover;
	background-position: center;
}
*/

.program-benefits-row IMG, 
.foundation-row IMG {
	border-radius: 6px;
}




/* --------------------------------------------------------- */
/* --------- Foundation row     */
.foundation-row {
	background-color: #ffffff;
	font-weight: 500;
	border-top: solid var(--color-blue) 10px;
}



/* testimonial */
/*
.testimonial-container {
    background-image: radial-gradient(circle at center,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.5)),
        radial-gradient(circle at center,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.5)
    );
    background-color: rgb(0, 0, 0, 0); 
    background-size: cover, cover;
    background-position: center center, top center;
    background-repeat: no-repeat, no-repeat;
    min-height: 600px;
    padding-bottom: 20px;
}

.testimonial-container-PERSON_NAME {
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url(images/testimonials/PHOTO_FILENAME);
}
*/

.testimonial-quote {
	font-size: 1.3rem;
	/* padding: 2.0rem 2.0rem 1.0rem 2.0rem; */
	padding: 0 2.0rem 1.0rem 2.0rem;
	font-style: italic;
	color: #000000;
}
.testimonial-quote::before {
	content: '\201C';
}
.testimonial-quote::after {
	content: '\201D';
}

.testimonial-attribution {
	font-weight: 700;
	padding: 0 1.25rem 1.25rem;
	color: #000000;
}


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

/* can't find any campus photos */
.photo-row {
	display: none;
}

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



/* --------------------------------------------------------- */
/* --------- Skills row     */
.skills-row {
	background-image: linear-gradient(to right, var(--color-blue) 50%, transparent), url(images/graduates-in-event-center_2.jpg);
	background-size: cover, cover;
	background-position: left, 200px;
	background-repeat: repeat-x, no-repeat;
	color: #ffffff;
}

.skills-row.skills-row-mscj {
	background-position: right top;
	background-image: linear-gradient(to right, var(--color-blue-super-transparent)), url(images/graduation-hero-image-1-resized.jpg);
}

.skills-row-msitm {
	background-position: left top;
	background-image: linear-gradient(to right, var(--color-blue-super-transparent)), url(images/graduation-hero-image-2-resized.jpg);
}

.skills-item-bold {
	color: var(--color-gold);
	font-weight: 700;;
}

.skills-row LI {
	list-style: url(images/bullet-chevron.svg);
	line-height: normal;
	margin: 0 0 10px 0;
}


/* --------------------------------------------------------- */
/* --------- Footer row     */
.footer-row {
	border-top: solid var(--color-gold) 10px;
}

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

.footer-logo {
	max-width: 100px;
}

.footer-tagline {
	font-weight: 700;
}

.footer-row A,
.footer-row A:link,
.footer-row A:active,
.footer-row A:visited,
.footer-row A:hover {
	color: #FFFFFF;
	text-decoration: none;
}

.footer-left, 
.footer-right {
	text-align: center;
}

/* --- GRAVITY FORMS OVERRIDES ARE IN footer-scripts-row.php BECAUSE style.css CAN LOAD BEFORE GRAVITY FORMS ON SOME SITES --- */

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

@media screen and (min-width: 576px) {
	.header-left {
		text-align: left;
	}

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

	.footer-left {
		text-align: center;
	}
	
	.footer-right {
		text-align: right;
	}
	
}


@media screen and (min-width: 768px) {
	.header-center {
		font-size: 1.25rem;
	}
	.header-right {
		font-size: 1.0rem;
	}

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

	.icon {
		max-width: 100%;
	}
	
	.hero-row,
	.hero-msitm,
	.hero-mssm, 
	.hero-mscj {
		background-position: top right;
	}
	
	.program-benefits-row IMG, 
	.foundation-row IMG {
		width: 85%;
	}
	
	/* only applies to CJ for REVIEW */
	.hero-blur-container {
		backdrop-filter: initial;
	}

	/*--- CJ v2 */
		.hero-mscj-3 {
			background-position: top right;
		}
	
	.skills-row {
		background-position: left, 400px;
	}

	.skills-row.skills-row-mscj {
		background-image: linear-gradient(to left, var(--color-blue) 50%, transparent), url(images/graduation-hero-image-1-resized.jpg);
		background-position: left top;
	}
	
	.skills-row.skills-row-msitm {
		background-image: linear-gradient(to left, var(--color-blue) 50%, transparent), url(images/graduation-hero-image-2b-resized.jpg);
		background-position: left top;
		background-size: cover, auto 100%;
	}
			
}


@media screen and (min-width: 993px) {
	/*--- CJ v2 - Cops in Airport */
		/*
		.hero-mscj {
			background-position: top 0 right -450px;
		}
		
		.hero-mscj-2 {
			background-position: center left;
		}
		*/

		.hero-mscj-3 {
			background-position: top right;
		}

}

@media screen and (min-width: 1200px) {
	.header-br {
		display: none;
	}
	
	/*--- CJ v2 - Cops in Airport */
		/*
		.hero-mscj {
			background-position: top 0 right -400px;
		}
		*/
}


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

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

}