/*
============== 
Table of Contents
0. Colors for Root variables
1. Global styles and Utilities 
2. Nav and Header (added to all pages with php files)
3. Contact Us and Connect (added to all landing pages with php files)
4. Footer (added to all pages with php files)
5. Home index html page styles
6. About html page styles
7. Training html page styles
8. How to Begin html page styles
9. Free resources html page styles
10. Subpage and other language websites html page styles
11. Article html page styles
12. Media queries

==============
*/



/*
==============================================================================================================================
0. Colors for Root variables  --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/
/*these get used with: var(name)**/
:root {
	--lightblue:  #e6f5ff;
	--darkblue:  #001978;
	--royalblue: #0128BD;
	--periwinkle:  #ACCEFF;
	--darkestblue: #011666;
	--softgold: rgb(214, 180, 13);

	--softgoldTransparent: rgb(214, 180, 13, .3);
	--topofStarsNavyTransparent: rgb(25, 40, 70, .5);
	--lowertopofStarsNavyTransparent: rgb(27, 43, 76, .5);
	--whiteTransparent:  rgb(255, 255, 255, .3);
	--topofStarsNavy: rgb(25, 40, 70);
	--lowertopofStarsNavy: rgb(27, 43, 76);
	--whiteTinted: #e3e9ee ;
	--superlightblue: #bbcde5;
	--lightskyBlue: #789bd1;
	--skyBlue: #4068b4;
	--darkblueInsky: #273e6f;
	--darkestblueInsky: #1a2949;

	--lightblueNebula: #9eb8e6;
	--darkestblueNebula: #0e2658 ;
	--softgoldNebula: #d1cdad;
	--deepblueNebula: #13398b;
	--blueNebula: #3462b7;

	--warmwhite: #f7efe4;
	--bannerblue: #9db3d8;
	--bannermixblue: #c2cadd;

	--navyblueText: #304d8a;
	--blueText: #265f94;
	--blueTextLink: #567cc2;
	--lightblueText: #b5caed		;
	--darkblueText: #1a2b50;
	--darkblueTextLink: #28437d	;

/*new*/
	--heroBlue: #052984;
	--LightBlue1: #e0e6f6;
	--LightBlue2: #d1ddf7; 
	--LightBlue3: #e0e7f8; /*about page h2*/
	--LightBlue4: #b2c1e5; /*about page p*/
	--goldenWhite: #f4f2e6;
	--grayblue: #9ba3c2;
	--twilightblue: #6d82b6;

	--bgBlueWhiteWarm: #e6e8e1; /*about page Nav*/
	--bgDeepBlue: #13255a; /*training page Nav*/
	--bgWarmWhite: #f0f2ea; /*how2begin page Nav*/
	--bgLightGold: #f0e9cc; /* long article pages*/

	--dropShadow: rgb(59, 71, 93, .5);
}


/*
==============================================================================================================================
1. Global styles and Utilities   --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html {
	width: 100%;
	height: 100%;
	scroll-padding-top: 5rem;
}

body {
	font-family: CooperHewittBook, Helvetica, sans-serif; /*Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.*/
	font-size: clamp(1rem, 1.2vw, 1.5rem);
	width: 100%;
	/*line-height: 1.5;*/
	/*overflow-x: hidden;*/ 	/*remove horizontal scrollbar*/
}

header {
 	color: white;
 	text-shadow: 2px 2px 4px var(--royalblue);
 	font-family: CooperHewittLight, Helvetica, sans-serif;
 	letter-spacing: 2px;
 	font-size: clamp(3rem, 5vw, 5rem);
 	margin: .5rem .75rem;
 	padding-top: 2rem;
 	text-align: center;
}

/*change padding in mobile*/
h1, h2, h3, h4 {
 	margin-top: .75rem;
 	margin-bottom: .5rem;
 	padding-top: 1rem;
}

h1 {
	color: white; /*default is white, can also be hero blue or light blue*/
 	font-family: CooperHewittMedium, Helvetica, sans-serif;
 	letter-spacing: 2px;
 	font-size: clamp(2rem, 2.1vw, 2.2rem); /*2.2rem is about 35px*/
 	text-align: center;
	}

h2 {
	color: white;
 	font-family: CooperHewittMedium, Helvetica, sans-serif;
 	font-size: clamp(1.5rem, 1.7vw, 1.9rem);
 	text-align: center; 	
	}

h3 {
	color: white;
	font-size: clamp(1.3rem, 1.5vw, 1.7rem);
	font-family: CooperHewittBook, Helvetica, sans-serif;
 	text-align: center;	
	}

h4 {
	color: white;
	font-size: clamp(1.2rem, 1.3vw, 1.5rem);
	font-family: CooperHewittMedium, Helvetica, sans-serif;
	text-align: left;
	}

p {
	margin-bottom: .75rem;
	font-size: clamp(1.1rem, 1.2vw, 1.4rem);
	line-height: 1.5;
	text-align: left;
/*	max-width:  40em;*/ /*this is attempt to get under 85 characters per line*/
}

/*should only be used for text less than 3 lines*/
.p-center {
	text-align: center;
}

ul {
    margin: 0;
    text-align: left;
  	text-decoration: none;
		list-style: none;
}


li {
	text-decoration: none;
	list-style: none;
	padding: 10px;
	font-size: clamp(1rem, 1.2vw, 1.5rem);
}


img {
  border-radius: 5px;
  max-inline-size: 100%;
  max-width: 100%; 
	height: auto;
	block-size: auto;
	object-fit: cover;
  object-position: top center;
}

.center-image {
	display: flex;
	justify-content: space-around;
}

.sr-only {
	visibility: hidden;
	display: none;
}

section {
	padding: 1.5rem 5rem;
	padding-bottom: 2.5rem;
}

address {
	padding: 1.5rem 5rem;
	font-style: normal;
}

a {
	position: relative;
	text-decoration: none; 
	letter-spacing: 1.7px;
	font-size: clamp(1rem, 1.2vw, 1.5rem);
	color: white;
	scroll-margin-top: 3rem;
	text-underline-offset: 5px;
}

a:hover {
	cursor: pointer;
	text-underline-offset: 5px;
}

a.animatedLink:focus-visible {
	outline: 1px solid inherit;
	border-radius: 5px;
}

a:active {
	outline: none; 
}


/*Animated link class - hero blue text color*/
.animatedLink {
	color: var(--heroBlue);
	text-decoration: underline .5px;
	text-decoration-style: dotted;
	text-underline-offset: 5px;
	font-family: CooperHewittSemibold, Helvetica, sans-serif;
	line-height: 1.7;
	padding-top: 3px;
	font-weight: bold;
}

/*This makes the border appear when hovering over a link*/
a.animatedLink::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--heroBlue);
    bottom: -2px;
    left: 0;
    transform-origin: center;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

a.animatedLink:hover::before {
  transform-origin: center;
  transform: scaleX(1);
}


/*Animated link class - WHITE text color*/
.animatedLink-white {
	color: var(--goldenWhite);
	text-decoration: underline .5px;
	text-decoration-style: dotted;
	text-underline-offset: 5px;
	font-family: CooperHewittSemibold, Helvetica, sans-serif;
	font-weight: bold;
	padding-top: 3px;
	line-height: 1.7;
}

/*This makes the border appear when hovering over a link*/
a.animatedLink-white::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--goldenWhite);
    bottom: -2px;
    left: 0;
    transform-origin: center;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

a.animatedLink-white:hover::before {
  transform-origin: center;
  transform: scaleX(1);
}


/*EMAIL link class - white text color*/
.emailLink-white {
	color: var(--goldenWhite);
	font-size: clamp(1rem, 1.2vw, 1.5rem);
	font-family: CooperHewittSemibold, Helvetica, sans-serif;
	font-weight: bold;
	padding-bottom: 3px;
	padding-top: 3px;
	line-height: 1.7;
	letter-spacing: normal;
/*	text-decoration: underline;*/
}

/*This makes the border appear when hovering over a link*/
a.emailLink-white::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--goldenWhite);
    bottom: 0;
    left: 0;
    transform-origin: center;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

a.emailLink-white:hover::before {
  transform-origin: center;
  transform: scaleX(1);
}

.emailLink-blue {
	color: var(--heroBlue);
	font-size: clamp(1rem, 1.2vw, 1.5rem);
	font-family: CooperHewittSemibold, Helvetica, sans-serif;
	font-weight: bold;
	padding-bottom: 3px;
	padding-top: 3px;
	line-height: 1.7;
	letter-spacing: normal;
/*	text-decoration: underline;*/
}

/*This makes the border appear when hovering over a link*/
a.emailLink-blue::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--heroBlue);
    bottom: 0;
    left: 0;
    transform-origin: center;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

a.emailLink-blue:hover::before {
  transform-origin: center;
  transform: scaleX(1);
}

button {
	padding: 10px;
	border-radius: 5px;
	border: 0px transparent;
	cursor: pointer;
	font-weight: bold;
	margin: 5px;
	background: transparent;
}

/*to ensure table is readable on multiple devices*/
.responsive-table {
	width: 100%;
	margin: 0 auto;
	padding: 10px 0;
}

.responsive-table table {
	width: 100%;
}


/* Layout */
.wrapper {
	background-color: var(--lightblue);
	margin: auto;
	padding: 2px;
	width: 100%;
	justify-content: center;
}


/*
==============================================================================================================================
2. Nav and Header     --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/

/*basic style for all pages that have a hero image and nav bar*/
.TOP {
	background: linear-gradient(var(--topofStarsNavy), var(--lowertopofStarsNavy), var(--skyBlue), var(--warmwhite));
	background-image:url(/images/Home-Landing-image.jpg); 	
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	min-height: 40vmax;
	height: 100%;
	padding: 0px;
	white-space: normal;
	display: grid;
	grid-template-areas: 
	"navBar"
	"header"
}

.menuIcon {
	font-size: 1rem;
	justify-content: right;
}

.topbar {
	grid-area: navBar;
	display: flex;
	position: fixed;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	color: white;
	width: 100%;
	z-index: 999;
	top: 0;
	right: 0;
	left: 0;
	padding: 3px;
	margin: 0 2px;
	background-color: var(--topofStarsNavyTransparent);
}

/*For top nav on home page, once under TOP section*/
.opaque_topbar {
	background-color: var(--topofStarsNavy);
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
}


.topbar a {
	color: white;
}

.logo {
	display: flex;
	padding: 15px 10px;
	grid-gap: 5px;
}

.logo .logoImage {
	align-self: center;
	justify-self: center;
}

.TOP .eye-logo-blue {
	display: none;
}

.logo img {
	width: clamp(2.5rem, 3vw, 4rem);	
	height: auto;
}

.logo .logoText {
	align-self: center;
	justify-self: center;
}

/*CV School logo text*/
.logo a {
	font-family: Arial Light, Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: 100;
	font-size: clamp(1.6rem, 1.9vw, 2.2rem);
	letter-spacing: 3px;
	color: white;
	padding: 5px;
	margin: 0px;
	text-align: left;
	align-self: center;
}

.RegTrademark {
		font-size: clamp(.6rem, .6vw, .7rem);
}


#header {
 	grid-area: header;
 	width: 100%;
 	height: 100%;
 	min-height: 40vmax; /*changes in media queries*/
}

#header header {
	margin-top: 12%;
	text-align: center;
}

/*REMOVE, not used - just meant to be something fun for curious people to find*/
#SunInside {
	grid-area: header;
	display: flex;
	height:400px; 
	width:400px;
	border-radius: 50%;
/*	background-color: white;*/
	margin: 0 auto;
	align-items: center;
	justify-content: center;
	color: rgb(0, 0, 0, 0);
}

#SunInside:hover {
	cursor: pointer;
}
/*^^^^^ end remove*/


.navbar {
  flex-wrap: wrap;
	margin: 5px 10px;
	padding: 2px;
	justify-content: right;
}

.mainNav {
	display: flex;
	list-style: none;
	width: 100%;
}

.mainNav li {
	color: white;
	padding: 8px 10px;
}

.mainNav a {
	color: white;
	padding: 8px 10px;
	font-size: clamp(1.2rem, 1.6vw, 2rem);
	letter-spacing: 1px;
}

.mainNav span {
  color: white;
  padding: 8px 10px;
  font-size: clamp(1.2rem, 1.6vw, 2rem);
  letter-spacing: 1px;
 }

.mainNav h2 {
	color: white;
	padding: 8px 15px;
	font-size: clamp(1.3rem, 1.6vw, 2rem);
	letter-spacing: 1px;
}

.mainNav li a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}


.Nav-Dropdown {
  position: relative;
  display: inline-block;
}

/*this div is for dropdowns that are close to right edge and need to be kept from overflowing on page*/
.DropDownBoxCONTAINER {
	position: fixed;
	width: 300px;
	right: 12px;
}

.DropDownBox {
	position: absolute;
	display: none;
	right: 0;
	left: 0px;
	margin-left: 10px;
	padding: 10px;
	width: 300px;
	z-index: 1;
	background: linear-gradient(var(--topofStarsNavy), var(--lowertopofStarsNavy), var(--darkblueInsky));
}

.mainNav .Nav-Dropdown:hover .DropDownBox {
	display: block;
}


/*UPDATE - added all the page specific menu stuff here so it is all in one place and shorten*/

.TOP .DropDownBox .dropDownlinks .main-nav-dropdown-h1 a, 
.TOP_training .DropDownBox .dropDownlinks .main-nav-dropdown-h1 a {
	color: white;
	font-size: clamp(1.2rem, 1.4vw, 1.6rem);
	font-family: CooperHewittBook, Helvetica, sans-serif;
	text-decoration: underline;
	padding: 0px;
	text-align: left;
}


.TOP_about .DropDownBox .dropDownlinks .main-nav-dropdown-h1 a, 
.TOP_getStarted .DropDownBox .dropDownlinks .main-nav-dropdown-h1 a, 
.TOP_subpage .DropDownBox .dropDownlinks .main-nav-dropdown-h1 a,
.TOP_resources .DropDownBox .dropDownlinks .main-nav-dropdown-h1 a  {
	color: var(--heroBlue);
	font-size: clamp(1.2rem, 1.4vw, 1.6rem);
	font-family: CooperHewittBook, Helvetica, sans-serif;
	text-decoration: underline;
	padding: 0px;
	text-align: left;
}


.DropDownBox .dropDownlinks li {
	padding: 10px 15px;
	display: block;
}

.DropDownBox .dropDownlinks li a {
	padding: 0px 5px;
	color: white;
	font-size: clamp(1.1rem, 1.1vw, 1.4rem);
	display: block;
/*	text-decoration: underline .5px;
	text-decoration-style: dotted;
	text-underline-offset: 5px;*/
}


 .subNavLinks li .orderLink {
	color: white;
	display: block;
	padding-top: 8px;
}


.subNavLinks .orderLink a {
 	font-family: CooperHewittSemibold, Helvetica, sans-serif;
 	font-style: bold;
	padding: 10px;
}

.dropDownlinks li a {
  width: 100%;
  display: block;
  padding: 0 0 0 15px;
  border-radius: 0px;
	color: white;
	font-size: clamp(.9rem, 1vw, 1.1rem);
}

.LangDropDownBox {
	position: absolute;
	display: none;
	padding: 10px;
	right: -15px;
	min-width: 100px;
	z-index: 1;
	background: linear-gradient(var(--topofStarsNavy), var(--lowertopofStarsNavy), var(--darkblueInsky));
}


.mainNav .Nav-Dropdown:hover .LangDropDownBox {
	display: block;
}

.Navlanguage h2 {
	margin: 0;
	font-family: CooperHewittBook, Helvetica, sans-serif;
	font-size: clamp(1rem, 1.1vw, 1.5rem);
	padding: 0;
}

.Navlanguage p {
	font-size: clamp(.7rem, .8vw, .9rem);
	white-space: normal;
	font-style: italic;
	margin: 0px;
}

.Navlanguage li {
	padding: 10px;
	text-align: left;
}

.Navlanguage a {
	font-size: clamp(.9rem, 1.2vw, 1.5rem);
}

.Navlanguage .dropDownlinks {
  display: block;
}

/*Nav color changes for specific pages - BACKGROUND */
.TOP_about .topbar, .TOP_about .subNavBox, .TOP_about .DropDownBox, .TOP_about .LangDropDownBox  {
	background: none;
	background-color: var(--bgBlueWhiteWarm);
}

.TOP_training .topbar, .TOP_training .subNavBox,.TOP_training .DropDownBox, .TOP_training .LangDropDownBox {
	background: none;	
	background-color: var(--bgDeepBlue);
}

.TOP_getStarted .topbar, .TOP_getStarted .subNavBox, .TOP_getStarted .DropDownBox, .TOP_getStarted .LangDropDownBox  {
	background: none;
	background-color: var(--bgWarmWhite);
}

.TOP_resources .topbar, .TOP_resources .subNavBox, .TOP_resources .DropDownBox, .TOP_resources .LangDropDownBox  {
	background: none;
	background-color: white;
}

.TOP_subpage .topbar, .TOP_subpage .subNavBox, .TOP_subpage .DropDownBox, .TOP_subpage .LangDropDownBox  {
	background: none;
	background-color: white;
}

/*Nav color changes for specific pages - FONT */
.TOP_about .topbar .topMenulink, .TOP_getStarted .topbar .topMenulink, .TOP_resources .topbar .topMenulink, .TOP_subpage .topbar .topMenulink {
	color: var(--heroBlue);
}

.TOP_about .topbar .logo a, .TOP_getStarted .topbar .logo a, .TOP_resources .topbar .logo a, .TOP_subpage .topbar .logo a {
	color: var(--heroBlue);
}

.TOP_about .subNavContent .subNavRow h1 a, .TOP_getStarted .subNavContent .subNavRow h1 a, .TOP_resources .subNavContent .subNavRow h1 a, .TOP_subpage .subNavContent .subNavRow h1 a {
		color: var(--heroBlue);
}

.TOP_about .subNavRow .subNavLinks li a, .TOP_getStarted .subNavRow .subNavLinks li a, .TOP_resources .subNavRow .subNavLinks li a, .TOP_subpage .subNavRow .subNavLinks li a {
	color: var(--heroBlue);
}

.TOP_about .subNavRow .subNavLinks li a:hover, .TOP_getStarted .subNavRow .subNavLinks li a:hover, .TOP_resources .subNavRow .subNavLinks li a:hover, .TOP_subpage .subNavRow .subNavLinks li a:hover {
	text-decoration: underline var(--heroBlue); solid 2px;
}

.TOP_about .dropDownlinks li a, .TOP_getStarted .dropDownlinks li a, .TOP_resources .dropDownlinks li a, .TOP_subpage .dropDownlinks li a {
	color: var(--heroBlue);
}

.TOP_about .Navlanguage a, .TOP_getStarted .Navlanguage a, .TOP_resources .Navlanguage a, .TOP_subpage .Navlanguage a {
	color: var(--heroBlue);
}	


.mobile_nav_toggle{
	display: none;
}


/*
==============================================================================================================================
3. Contact us and Connect Sections  --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/

.contact {
	background-color: var(--deepblueNebula);
	background-image: url(/images/Contact_Banner.jpg);
	/*background-image: url(images/Contact_Banner_02.jpg);*/ /*new form mar 5*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.contact h1 {
	text-align: center;
}

.contact h3, .contact a {
	color: white;
}

.contact a::before {
	background: white;
}

/*3 or less lines, so centerd text*/
.contact p {
	color: var(--LightBlue2);
	text-align: center;
}

.contact-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.contact-info-row {
	width: 100%;
}

.mailing-list {
	padding: 1rem 0;
}

/*Form styling*/

form {
	border: none;
	text-align: center;
}

/*check and see if impacts form for auz*/

form {
	max-width: 50%;
	min-width: 300px;
	margin: 0 auto;
	border: none;
}

input[type=text] {
  width: 50%;
  padding: 6px 12px;
  margin: 8px 0;
  border: 1px solid var(--heroBlue);
  box-sizing: border-box;
  color: var(--heroBlue);
	font-family: CooperHewittBook, Helvetica, sans-serif;
	font-style: italic;
}


input[type=email] {
  width: 50%;
  padding: 6px 12px;
  margin: 8px 0;
  border: 1px solid var(--heroBlue);
  box-sizing: border-box;
  color: var(--heroBlue);
	font-family: CooperHewittBook, Helvetica, sans-serif;
	font-style: italic;
}

input[type=button], input[type=submit], input[type=reset] {
  background-color:var(--lightblueText);
  border: none;
  color: var(--heroBlue);
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
	font-family: CooperHewittSemibold, Helvetica, sans-serif;
	font-size: 1rem;
  cursor: pointer;
  text-align: center;
}

/*
==============================================================================================================================
4.5. Connect Section (Social Media account links)   --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/

.connect {
	background-color: white;
	background: url(/images/Free_Resources_01.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.connect h1 {
	color: var(--heroBlue);
	font-family: CooperHewittBook, Helvetica, sans-serif;
}

.connect-icons {
	display: flex;
	flex-direction: row;
	justify-content: center;
	grid-gap: 20px;
}

	.fa {
	  padding: 20px;
	  font-size: 30px;
	  width: 60px;
	  text-align: center;
	  text-decoration: none;
	  margin: 5px 2px;
	  border-radius: 50%;
	}

	.fa:hover {
	    opacity: 0.7;
	}

	.fa-facebook {
	  background: white;
	  color: white;
	  border: 1px solid var(--heroBlue);
	}

/*twitter is currently hidden in html, this will need to be updated if we display twitter as the logo has changed*/
	.fa-twitter {
	  background: white;
	  color: white;
	  border: 1px solid var(--heroBlue);
	}

	.fa-linkedin {
	  background: white;
	  color: white;
	  border: 1px solid var(--heroBlue);
	}

	.fa-instagram {
	  background: white;
	  color: white;
	  border: 1px solid var(--heroBlue);
	}

	.fa-pinterest {
	  background: white;
	  color: white;
	  border: 1px solid var(--heroBlue);
	}

	.fa-youtube {
	  background: white;
	  color: white;
	  border: 1px solid var(--heroBlue);
	}


.connect a {
	color: var(--heroBlue);
}



/*
==============================================================================================================================
4. Footer    --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/

footer {
	background-color: var(--darkestblueNebula);	
	padding: 10px;
	margin: 0px;
	align-self: end;
	color: white;
	text-align: center;
	font-size: clamp(1rem, 1.2vw, 1.3rem);
}

.copyright {
	padding: 5px;
}

.privacy-policy a {
	font-size: clamp(1rem, 1.1vw, 1.1rem);
}

footer .VirtualSchoolLinksBOX {
	display: flex;
	grid-gap: 10px;
	justify-content: center;
/*	padding: 10px 40px;*/
}

footer .VirtualSchoolLinks {
	padding: 5px 10px;
/*	margin: 0px 50px*/;
}


footer .animatedLink {
	color: var(--lightblueText);
}

footer .animatedLink::before {
	background: var(--lightblueText);
}

footer .VirtualSchoolLinks .animatedLink {
	font-size: clamp(.7rem, .8vw, .9rem);
}

/*
==============================================================================================================================
5. HOME index HTML PAGE STYLES   --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/

#subheader {
	background-color: white;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: var(--heroBlue);
}

#subheader h1 {
	color: var(--heroBlue);
}

#subheader p {
	color: var(--heroBlue);
	text-align: center;
/*	padding: 10px 20px;*/
}


/*------------------------  <<<  Explore training section >>>> ------------------------*/
.exploreTraining {
	background-color: var(--deepblueNebula);
	background-image:url(/images/Home-Explore.jpg);  /*skyNeb*/
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: white;
}

.exploreTraining p {
	color: white;
	padding: 10px 20px;
}

.TrainingPaths {
	color: white;
}

.TrainingPaths h1 {
	color: white;
	text-shadow: none;
	font-family: CooperHewittBook, Helvetica, sans-serif;
}

.threepathways {
	display: flex;
  grid-gap: 20px;
	color: white;
	padding: 10px;
}

.threepathways .pathway h2 {
	color: white;
	text-align: center;
}

.threepathways a {
	color: white;
}

.threepathways a::before {
    background-color: white;
}

.pathway {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: flex-start;
	width: 100%;
	padding: 10px;
}

.pathwayIcon {
	text-align: center;
	padding: 10px;
}

.pathwayIcon img {
	width: 50%;
	float: none;
	justify-content: center;

}


.threepathways-home {
	display: flex;
  grid-gap: 20px;
	color: white;
	padding: 10px;
}

.threepathways-home h2 {
	color: whites;
}

.pathway-home {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: flex-start;
	width: 100%;
/*	TODO - find a way to make the h2 line up. above two lines do not work*/
	padding: 10px;
/*	width: calc(100% / 3);*/
}


/*------------------------  <<< Upcoming courses >>>> ------------------------*/
/* 2024 Nov - created a new table that is sortable using:
<div class="upcomingCoursesTable">
<table id="courseTable">*/

#homepageUpcomingCourses {
	color: var(--heroBlue);
/*	padding: 20px min(20vh, 60px); */
	padding-bottom: 20%;
	background-color: var(--LightBlue2);
	background: url(/images/Home-Upcoming-bg-02.jpg); /*skyCloud*/
/*	background: url(images/Home_Upcoming_bg.jpg);*/ /*skyCloud*/
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}


#homepageUpcomingCourses h1 {
	color: var(--heroBlue);
}

#homepageUpcomingCourses h3 {
	color: var(--heroBlue);
	font-family: CooperHewittBook, Helvetica, sans-serif;
}

/*upcoming courses table styles, found on home page and training page:
note - nov 2024 changed this from a css grid to an html table*/

.upcomingCoursesTable p {
	text-align: center;
}

/*new table that replaced grid: */
.upcomingCoursesTable table  {
	max-width: fit-content;
	margin: 0 auto;
	color: var(--heroBlue);
	text-align: left;
	padding: 5px;
}

#courseTable th {
  cursor: pointer; /* Make headers clickable for sorting */
  text-align: center;
}	

#courseTable td, th {
	padding: 15px;
	border: 2px solid var(--blueTextLink);
	background-color: var(--whiteTransparent);
}

#courseTable th:hover {
  background-color: var(--lightblueText); /* Highlight row on hover */
}

/*REMOVE THIS ONCE OFF GRID*/
/*
.CoursesTableHeader table {
	border: 2px solid var(--blueTextLink);
	padding: 10px;
	text-align: center;
	background-color: var(--whiteTransparent);
}

.CoursesTableHeader tr {
		padding: 10px;
		margin: 0;
	}

.CoursesTableContent {
	color: var(--heroBlue);
	border: 2px solid var(--blueTextLink);
	padding: 16px;
	padding-left: 10px;
	background-color: var(--whiteTransparent);
}


.CoursesTableContent p {
	color: var(--heroBlue);	
	margin-bottom: 0;
}

*/
/*^^^^^^^^^^^^^^^^^^^ REMOVE THIS ONCE OFF GRID*/


.announcements {
	background-color: white;
}

.announcements h1 {
	color: var(--heroBlue);
		font-family: CooperHewittBook, Helvetica, sans-serif;
}

.announcements p {
	color: var(--heroBlue);
	padding:  0px 10px;
	padding-left: 5px;
}

/*
==============================================================================================================================
6. ABOUT HTML PAGE STYLES    --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/

.TOP_about {
	width: 100%;
	display: grid;
	grid-template-areas: 
	"navBar"
	"image";
}

.about_topbar_area {
	grid-area: navBar;
	min-height: 60px;
}


.TOP_about #header {
	grid-area: image;
	background-color: var(--warmwhite);
/*	background-image:url(images/About_Us_landing.jpg);
	background-image:url(images/About_Us_landing_smallScreen.jpg);*/
	background-image:url(/images/About_Us_landing_largeScreen.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
 	min-height: 25vmax; /*changes in media queries*/
	margin: 0px;
}

.TOP_about #header header {
	text-shadow: 3px 3px 4px var(--dropShadow);
	-webkit-text-stroke: 1px var(--dropShadow);
	margin-top: 12%; /*changes in media queries*/
	font-family: CooperHewittMedium, Helvetica, sans-serif;
}


.aboutSection1 {
	background-color: var(--bgBlueWhiteWarm);
	background: url(/images/About_section1.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.aboutSection1 h1 {
	color: var(--heroBlue);
}

.aboutSection1 h2 {
	color: var(--heroBlue);
	text-align: left;
/*	padding: 10px 10px;
	padding-top: 30px;*/
}

.aboutSection1 p {
	color: var(--heroBlue);
/*	text-align: center;*/
/*	padding: 10px 20px;*/
}

.kk-quote {
	display: flex;
	justify-content: center;
}

.kk-quote blockquote {
	border: none;
	padding: 20px;
	color: var(--heroBlue);
	display: inline-block;
	width: 60%;
	font-size: clamp(.9rem, 1vw, 1.2rem);
	text-align: center;
}

.quote {
	font-style: italic;
	padding-bottom: 10px;
}


.aboutSection2 {
	background-color: var(--deepblueNebula);
	background: url(/images/About_section2.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: left;
}

.aboutSection2 h2 {
	color: var(--LightBlue3);
	text-align: left;
}
.aboutSection2 p {
	color: var(--LightBlue4);
}


/*this is for both the about page and the free resources page:*/
.about_articles_listing {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 2rem;
}

.cv_article {
	padding-bottom: 20px;
	padding-top: 30px;
}

*/
/*
==============================================================================================================================
7. THE TRAINING HTML PAGE STYLES    --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/

.TOP_training {
	grid-area: TOP;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
/*	min-height: 50vmax;*/
	display: grid;	
	grid-template-areas: 
		"navBar"
		"image";
}


.training_topbar_area {
	grid-area: navBar;
	min-height: 60px;
}


.TOP_training #header {
	grid-area: image;
	background-color: var(--blueNebula);
	background-image:url(/images/Nebula_Landing_image.jpg); 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
 	min-height: 35vmax; /*changes in media queries*/
	margin: 0px;
}

.TOP_training #header header {
	text-shadow: 2px 2px 4px var(--deepblueNebula);
	margin-top: 0%; /*changes in media queries*/
	padding-top: 12%; 
/*	^^ added above line for padding nov 2024 as the latest changes introduced a blank space above image under nav*/
}


.subheader_training {
	background-color: var(--blueNebula);;
	background-image: url(/images/Training_subheader_banner.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	color: var(--heroBlue);
}

.subheader_training h1 {
	color: var(--heroBlue);
}

.subheader_training p {
	color: var(--heroBlue);
	/*text-align: center;*//*
	padding-left: 20%;
	padding-right: 20%;*/
}


/*------------------------  <<< Section 1 >>>> ------------------------*/


.trainingSection1 {
	background-color: var(--darkestblueNebula);
/*	background-image:url(/images/Home-Explore-nebula_og.jpg); */ /*skyNeb*/
	background-image:url(/images/Home-Explore.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
}


.trainingOptions {
	display: flex;
	justify-items: center;
	grid-gap: 5%;
	padding-top: 40px;
}

.trainingOption_column {
	padding: 25px;
	width: calc(100% / 3);
}

.trainingOption_column p {
	padding: 10px;
	text-align: left;
	color: white;
	line-height: 1.2;
}

.trainingOption_column a {
	color: var(--goldenWhite);
}

.trainingOption_column a::before {
    background-color: var(--goldenWhite);
}

.trainingOptions .trainingOption_column li {
	list-style: none;
	font-family: CooperHewittBook, Helvetica, sans-serif;
	font-size: clamp(1rem, 1.2vw, 1.3rem);
	text-align: left;
	padding-top: 40px;
}

.trainingOption_column h2 {
	padding: 10px;
	border-bottom: 2px white solid;
	font-family: CooperHewittBook, Helvetica, sans-serif;
}

.trainingOption_column .trainingHeaders {
  font-size: clamp(1.7rem, 2vw, 1.9rem);
	font-family: CooperHewittBook, Helvetica, sans-serif;
}


.trainingOptions h3 {
	padding: 10px 0;
	text-align: center;
	padding-top: 50px;
}

.trainingOptions h3 a {
	text-align: center;
/*	border-bottom: 2px white solid;*/
	font-size: clamp(1.4rem, 1.6vw, 1.7rem);
	font-family: CooperHewittBook, Helvetica, sans-serif;
	padding: 20px max(10%, 30px);
}

.trainingOption_column .p-center {
	text-align: center;
	padding-top: 20px;
}

.trainingOption-other h2 {
	color: white;
}

.trainingOptions .courseLocations li {
	padding-top: 15px;
}

.courseLocations {
	padding-top: 20px;
}
/*------------------------  <<< Section 2 >>>> ------------------------*/

.trainingSection2 {
background-color: var(--LightBlue2);
	background: url(/images/Home-Upcoming-bg-02.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--heroBlue);
	padding-bottom: 20%;
}


.trainingSection2 h1 {
 	color: var(--heroBlue);
}	

.trainingSection2 h2 {
 	color: var(--heroBlue);
}	

.trainingSection2 h3 {
 	color: var(--heroBlue);
}	

.trainingSection2 .CoursesTableHeader {
 	font-family: CooperHewittLight, Helvetica, sans-serif;
}




/*
==============================================================================================================================
8. How to Begin HTML PAGE STYLES   --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/

.TOP_getStarted {
	grid-area: TOP;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-areas: 
	"navBar"
	"image";
}


.getStarted_topbar_area {
	grid-area: navBar;
	min-height: 60px;
}


.TOP_getStarted #header {
	grid-area: image;
	background-color: var(--warmwhite);
	background-image:url(/images/How_to_Begin.jpg); 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
 	min-height: 30vmax; /*changes in media queries*/
	margin: 0px;
}


/*NO HEADER on this page*/

.subheader_getStarted {
	background-color: var(--warmwhite);
	background-image:url(/images/HowtoBegin_subheader_banner.jpg); 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--heroBlue);
}

.subheader_getStarted p {
	color: var(--heroBlue);
	text-align: center;
}

.subheader_getStarted h1 {
	color: var(--heroBlue);
}


.getStartedSection1 {
	background-color: var(--warmwhite);
	background-image: url(/images/HowtoBeing_section1.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--heroBlue);
}


.getStartedSection1 p, .getStartedSection1 h1  {
	color: var(--heroBlue);
}

.ways2start {
	display: flex;
	flex-direction: column;
	text-align: left;
	width: 100%;
}

.beginning_pathway {
	padding: 20px;
}

.beginning_pathway_withImage {
	display: flex;
	width: 100%;
	padding-left: 20px;
}

.pathwayTextImage {
	width: 20%;
	padding: 2%;
}

.pathwayText {
	width: 80%;
	padding: 2%;
}

.pathwayTextImage img {
	width: 100%;
	max-width: 150px;
}	

.beginning_pathway h2 {
	color: var(--heroBlue);
	text-align: left;
}

.beginning_pathway a {
 color: var(--heroBlue);
}	

.beginning_pathway .animatedLink a::before {
 color: var(--heroBlue);
}	


.articlesListing {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	text-align: left;
	margin: 0 auto;
	text-decoration: underline;
}



/*
==============================================================================================================================
9. FREE RESOURCES HTML PAGE STYLES    --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/

.TOP_resources {
	grid-area: TOP;
	width: 100%;
	height: 100%;
	display: grid;	
/*	min-height: 50vmax;*/
	grid-template-areas: 
	"navBar"
	"image";
}

.resources_topbar_area {
	grid-area: navBar;
	min-height: 60px;
}


.TOP_resources #header {
	grid-area: image;
	background-color: var(--warmwhite);
	background-image:url(/images/Free_Resources_01.jpg); 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
 	min-height: 30vmax; /*changes in media queries*/
	margin: 0px;
}

.TOP_resources #header header {
	margin-top: 10%; /*changes in media queries*/
	color: var(--grayblue);
	text-shadow: none;
}


.resourcesSection1 {
	background-color: var(--warmwhite);
	background-image: url(/images/Resources_section1.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--heroBlue);
}


.resourcesSection1 h1 {
	color: var(--heroBlue);
	padding-bottom: 3px;
}

.free_resources_flex_container {
	display: flex;
	flex-direction: column;
	grid-gap: 20px;
	justify-content: space-between;
	padding: 5px;
}

.free_resources_header {
	margin-bottom: 3px;
	border-bottom: 2px solid var(--blueText);
}

.free_resources_section_grid_container {
	display: grid;
/*	display: flex;
	flex-direction: column;*/
	padding: 5px 20px;
	text-align: left;
/*	width: calc(100% / 2);*/
}

.free_resource_item {
	padding: 10px 30px;
}


.resourcesSection1 img {
	width: 15%;
	padding: 8px;
}

.resourcesSection1 h2 {
	color: var(--heroBlue);
	text-align: left;
	padding-bottom: 5px;
	margin-bottom: 3px;
	padding-top: 30px;
}

.resourcesSection1 h3, .resourcesSection1 p {
	color: var(--heroBlue);
}



.resourcesSection2 {
/*	grid-area: section2;*/
	background-color: var(--warmwhite);
	background: url(/images/Resources_Articles.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--heroBlue);

}

.resourcesSection2 h1 {
	text-align: center;
	color: var(--heroBlue);
	padding-bottom: 0;
	padding-top: 30px;
}

.resourcesSection2 h2 {
	color: var(--heroBlue);
	text-align: left;
}

.resourcesSection2 h3,.resourcesSection2 p {
	color: var(--heroBlue);
}

.resourcesSection2 a {
	color: var(--twilightblue);
}

.resourcesSection2 a::before {
	background: var(--twilightblue);
}

.cv_articles_listing {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	padding: 20px;
	text-align: left;
}

.resourcesSection2 .cv_article {
	padding: 20px;
	padding-top: 30px	;
}


/*
==============================================================================================================================
1O. Subpage html PAGE STYLES   --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/
.TOP_subpage {
	width: 100%;
	min-height: 60px;
}

/*       ~ ~ ~ Nav ~ ~ ~       */

.TOP_subpage .topbar {
	min-height: 60px;
}


/*       ~ ~ ~      Subpages       ~ ~ ~       */

b {
	font-family: CooperHewittMedium, Helvetica, sans-serif;
}
.subpageContentContainer {
	background-color: var(--darkestblueNebula);
	background-image: url(/images/Subpage-bg.jpg);
/*	background-image: url(/images/Articles-bg.jpg);*/
/*	background-image: url(/images/Resources_Articles.jpg);*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
}

.subpageContentContainer header {
	padding-top: 60px; /*changes in media queries*/
 	font-size: clamp(3rem, 3.3vw, 4rem);
	color: white;
	text-shadow: none;
}

.subpageContent h2 {
	text-align: left;
	border-bottom: 1px solid white;
  padding-bottom: 3px;
  padding-top: 30px;
}

.subpageContent h3 {
	text-align: left;
}

/*.subpageContent p {
	padding-left: 175px;
}
*/
.subpageContent img {
	max-width: 1000px;
	padding: 10px;
}


.subpageContent a {
	color: var(--goldenWhite);
}

.subpageContent a::before {
	background: var(--goldenWhite);
}

.subpageContent ul {
		padding: 10px 30px;
	}

.subpageContentContainer blockquote {
	color: white;
}


/*       ~ ~ ~      Books pages       ~ ~ ~       */

.bookspage img {
	max-width: 150px;
	padding: 10px;
	margin: 10px 40px;
}


/*       ~ ~ ~  Knowledge Tracks  ~ ~ ~       */
	.KT-map {
		display: flex;
		justify-content: center;
	}
	.KT-map img {
		width: 100%;
		max-width: 1000px;
		padding: 10px;
		margin: 5px;
		padding-bottom: 2.5rem;
	}

	.KT-listing {
		display: flex;
		grid-gap: 2rem;
		justify-content: center;
	}

	.KT-listing-row {
		width: calc(100% / 3);
		justify-content: center;
	}

	.new-kt-tag {
		color: var(--softgold);
		padding-left: 20px;
	}

	.KT-section {
		padding: 10px;
	}

	.KT-section ul {
		padding: 10px;
	}

	.KT-section h3 {
		border-bottom: 1px solid var(--goldenWhite);
	}	

	.kt-page ul {
	padding: 10px 15%;
}



/*       ~ ~ ~  The Spire  ~ ~ ~       */
	.spireImage {
		width: 100%;
		justify-content: space-around;
		padding: 20px;
	}

	.spireImage img {
		width: 100%;
		max-width: 500px;
		margin: 5px;
	}

	.ate_spire {
		padding: 10px 30px;
		padding-bottom: 25px;
	}
	


/*       ~ ~ ~  Knowledge Base  ~ ~ ~       */


.knowledgeBase-listing h3 {
	text-align: center;
	padding-top: 2rem;
}

.knowledgeBase-listing p {
	padding-top: 1rem;
}



/*       ~ ~ ~  Courses  ~ ~ ~       */

	.coursesPageImage {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.coursesPageImage img {
		width: 100%;
	}

	.coursesPage h2 {
		padding-top: 50px;
	}

	.coursesPage p {
		padding: 10px 40px;
	}

	#courseContactInfo h3 {
		padding-top: 40px;
	}

	.NA-courses p {
		padding: 10px 0px;
	}

	.EUR-courses h2 {
		padding-top: 40px;
	} 
	
	.europe-contact-list h3 {
		padding-bottom: 5px;

	}
	
	.europe-contact-list p {
		padding-left: 20px;
		padding-bottom: 20px;
		padding-top: 5px;

	}


/*	Table formatting for subpage and article page*/
	thead {
	  display: table-header-group;
	  vertical-align: middle;
	  border-color: inherit;
		font-size: clamp(1.2rem, 1.3vw, 1.6rem);
		font-family: CooperHewittSemibold, Helvetica, sans-serif;
	}

/*for musical image audio player tables*/
	.music-table {
		display: flex;
		justify-content: center;
		justify-items: center;
		padding: 20px 10px;
	}

	.kt-music-table {
		display: flex;
		justify-items: center;
		padding: 20px 10px;
	}

	.subpageContent table {
	    border-collapse: collapse;
	    border: 1px solid var(--goldenWhite);
	}
		.subpageContent table th {
	    background-color: transparent;
	    border: 1px solid var(--goldenWhite);
	    padding: 10px;
	    line-height: 1.8em;
	    font-size: 1rem;
	    vertical-align: top;
    	font-size: clamp(1.2rem, 1.3vw, 1.6rem);
	}

	.subpageContent table td {
	    border: 1px solid var(--goldenWhite);
	    background-color: transparent;
	    padding: 10px;
	    line-height: 1.8em;
	    font-size: 1rem;
	    vertical-align: top;
	    font-size: clamp(1rem, 1.2vw, 1.5rem);
	}


	.articleContentContainer .subpageContent  table {
	    border-collapse: collapse;
	    border: 1px solid var(--heroBlue);
	}

	.articleContentContainer .subpageContent table td {
	    border: 1px solid var(--heroBlue);
		    padding: 10px;
		    line-height: 1.8rem;
		    font-size: 1rem;
		    vertical-align: top;
		    font-size: clamp(1rem, 1.2vw, 1.5rem);
		}

	.articleContentContainer .subpageContent table th {
	    border: 1px solid var(--heroBlue);
		    padding: 10px;
		    line-height: 1.8rem;
		    font-size: 1rem;
		    vertical-align: top;
		    font-size: clamp(1.2rem, 1.3vw, 1.6rem);
		}

 /*For german site --------------------------------------------------------------------------------------------------------------------------------------*/
 	
/*	REMOVE - but first check, old note:
this can be deleted once German site is live*/
	/*.german-contact-info p {
		padding-left: 50px;
	}
*/
/*German contact page is light bg, use blue text*/
 	.german-contact {
		background-color: var(--LightBlue2);
		background-image: url(/images/Home-Upcoming-bg-02.jpg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		color: var(--heroBlue);
 	}

  .german-3 {
  	display: flex;
  	flex-direction: row;
  	justify-content: center;
  	grid-gap: 50px;
  	align-items: baseline;
  }

  .german-3-row {
  	justify-content: center;
  	padding: 10px;
  }
 	
 	.german-contact a, .german-contact h1, 	.german-contact h3  {
		color: var(--heroBlue);;
	}

 	.german-contact h3 {
		text-align: left;
	}
 	
 	.german-contact p {
		text-align: left;
	}

	 	/*remove old header image from the form:*/
	
	.german-contact	.german-nl-form h3 {
		font-size: 1.3rem;
		text-align: center;
	}

	form img {
		display: none;
	}

	.german-contact	form {
		max-width: 50%;
		min-width: 300px;
		margin: 0 auto;
		border: 1px solid var(--heroBlue);
	}
	
.german-contact .connect {
	background-color: none;
	background-image: none;
}


/*German courses - background blue, keep text white*/

 .german-courses table {
	    border-collapse: collapse;
	    border: 1px solid var(--goldenWhite);
	    margin: 0 auto;
	}

.german-courses table td {
	    border-right: 1px solid var(--goldenWhite);
	    border-bottom: 1px solid var(--goldenWhite);
	    padding: 10px;
	    line-height: 1.8em;
	    vertical-align: top;
	    color: white;
	}

.german-courses table th {
	    border-right: 1px solid var(--goldenWhite);
	    border-bottom: 1px solid var(--goldenWhite);
	    padding: 10px;
	    line-height: 1.8em;
	    vertical-align: top;
	    color: white;
	}
	
	#German-ATE {
		background-color: var(--warmwhite);
		background: url(/images/Resources_Articles.jpg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		color: var(--heroBlue);
	}

	#German-ATE h1 {
		color: var(--heroBlue);
	}

	#German-ATE h2 {
		color: var(--heroBlue);
	}

	#German-ATE h3 {
		color: var(--heroBlue);
	}

	#German-Meditation {
		background-color: var(--darkestblueNebula);
		color: white;
	}

	#German-IST {
		background-color: var(--goldenWhite);
		color: var(--heroBlue);
	}

	#German-IST h2 {
		color: var(--heroBlue);
	}

	#German-IST h3 {
		color: var(--heroBlue);
	}


	.german-resources {
		background-color: var(--warmwhite);
		background-image: url(/images/Resources_section1.jpg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		color: var(--heroBlue);
	}

	.german-resources h1 {
	color: var(--heroBlue);
	padding-bottom: 3px;
	text-align: center;
	}

	.german-resources h2 {
		color: var(--heroBlue);
		text-align: left;
		border-bottom: solid 1px var(--heroBlue);
	}

	.german-resources h3 {
		color: var(--heroBlue);
		text-align: left;
		padding-left: 10px;
		font-style: italic;
	}

	.german-kts {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.german-music {
	background-color: var(--deepblueNebula);
	background-image: url(/images/Contact_Banner.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
}
	.german-music h1 {
		color: white;
}

.german-books {
		background-color: var(--warmwhite);
		background-image: url(/images/Resources_Articles.jpg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		color: var(--heroBlue);
}

	.german-books h1 {
	color: var(--heroBlue);
	padding-bottom: 3px;
	text-align: center;
	}

	.german-books h2 {
		color: var(--heroBlue);
		text-align: center;
		
	}

	.german-books h3 {
		color: var(--heroBlue);
		text-align: left;
		border-bottom: solid 1px var(--heroBlue);
		font-style: italic;
	}

	.german-books h4 {
		color: var(--heroBlue);
		text-align: left;
		font-style: italic;
	}

	.german-books img {
		max-width: 150px;
		margin: 10px 20px;
	}

	.german-books-legend {
		min-height: 350px;
		padding: 20px 10px;
	}

	.german_Regression_ToC {
		text-align: left;
	}


/* spanish site -------------------------------------------------------------------------------------------------------------------------------------- */
 .ensenanzas h2 {
 		text-align: center;
 		padding-top: 15px;
 		padding-bottom: 5px;
 		padding-left: 10px;
 }

/* Libros:  Makes the links on the ALTMC sub pages for english-spanish equivalents underline to show they are a link instead of using antimatedLink*/
.altmc-esp a {
	text-decoration: underline;
}

.es-training .beginning_pathway_withImage {
	justify-content: center;
	flex-direction: column;
}

.es-training .pathwayTextImage, .es-training .pathwayText {
    margin: auto;
   }

/* italian site -------------------------------------------------------------------------------------------------------------------------------------- */
 .italian-site .kk-quote blockquote {
	color: white;
}

/* translated sites -------------------------------------------------------------------------------------------------------------------------------------- */
 .wbg-section {
	background-color: white;
 }

 .wbg-section  h1,  .wbg-section  h2,  .wbg-section  h3,  .wbg-section p, .wbg-section li {
	color: var(--heroBlue);
}

.wbg-section h2, .wbg-section h3 {
	text-align: left;
}

.wbg-section h2 {
	padding-top: 25px;
}

/*the ul should have this class*/
.pageLinks {
	padding: 2rem 0;
}
 .pageLinks li {
	color: var(--heroBlue);
}
 

/* makes subpageContent <section> have all links underlined for migrated language pages:*/
.subpageContent a { 	
	text-decoration: underline .5px;
	text-decoration-style: dotted;
	text-underline-offset: 5px;
 }

/* latin courses page -------------------------------------------------------------------------------------------------------------------------------------- */

.latin-america-courses .htabs li {
	list-style: none;
}

 .latin-america-courses h3 {
	font-family: CooperHewittMedium, Helvetica, sans-serif; 
	padding-left: 0px;
	padding-bottom: 5px;
	}

 .latin-america-courses h2 {
 	padding-left: 0px;
 }

  .latin-america-courses p {
  	padding-left: 15px;
  }

 .latin-america-courses li {
 	list-style: circle;
 }

 .latin-america-courses ul {
 	padding-left: 50px;
 }


/* Slovenian*/

.book-images {
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 15px;
}

/*Portugueses*/
	.ate-blue img {
		background-color: white;
		margin: 20px;
		padding: 1px;
	}

/*
==============================================================================================================================
11.  Articles  HTML PAGE STYLES   --------------------------------------------------------------------------------------------------------------------------------------
==============================================================================================================================
*/

.articleContentContainer {
	background-color: var(--goldenWhite);
	background-image: url(/images/Resources_Articles.jpg); /*image from free resources article listing*/
/*	background-image: url(/images/Articles-bg.jpg);*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--heroBlue);
	padding-bottom: 30px;
}

.articleContentContainer-long {
		background: linear-gradient(var(--bgLightGold), var(--goldenWhite), white);
/*	background-color: var(--goldenWhite);*/
/*	background-image: url(/images/Articles-bg.jpg);*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--heroBlue);
	padding-bottom: 30px;
}

.articleContentContainer header {
	padding-top: 3%; /*changes in media queries*/
 	font-size: clamp(3rem, 3.3vw, 4rem);
	color: var(--heroBlue);
	text-shadow: none;
}

.articleContentContainer .subpageContent h1 {
	color: var(--heroBlue);
}

.articleContentContainer .subpageContent h2 {
	color: var(--heroBlue);
	text-align: left;
  border-bottom: 1px solid var(--heroBlue);
  padding-bottom: 3px;
}

.articleContentContainer .subpageContent h3 {
	color: var(--heroBlue);
	text-align: left;
}

.articleContentContainer .subpageContent h4 {
	color: var(--heroBlue);
	text-align: left;
}

.articleContentContainer .subpageContent p {
	color: var(--heroBlue);
}

.articleContentContainer .subpageContent img {
	width: 150px;
	padding: 10px;
}

.articleContentContainer .subpageContent a {
	color: var(--blueNebula);
}

.articleContentContainer .subpageContent a::before {
	background: var(--blueNebula);
}

.article-back-and-forward {
	display: flex;
	justify-content: space-between;
	padding-top: 20px;
}

/*this makes the hover animation in line with dotted underline*/
.article-back-and-forward  a {
	text-underline-offset: 12px;
}


.legends_book_images {
	display: flex;
	width: 100%;
	justify-content: center;
}


.aphorismsToC {
	text-align: left;
}

.subpageContent .altmc-header h2 {
	text-align: center;
}

.subpageContent .altmc-header h3 {
	text-align: center;
}

/*.AS-overview table {
	background-color: transparent;
}*/

	/*       ~ ~ ~  KT subpages  ~ ~ ~       */
.kt-page li {
	list-style: circle;
}



blockquote {
	border: 1px solid var(--heroBlue);
	padding: 10px;
	margin: 20px;
	color: var(--heroBlue);
	display: inline-block;
}


.blockquote {
	display: flex;
	justify-content: space-around;
}

.quote-bg blockquote {
	background-color: white;
}

	/*       ~ ~ ~  Musical Images  ~ ~ ~       */

.books-with-music {
	display: flex;
	justify-content: space-between;
}

.online-music-book-images {
	display: flex;
	flex-direction: column;
	padding-top: 40px;
	grid-gap: 10%;
}

.online-music li {
	padding: 15px;
}

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  white-space: nowrap;
  border-radius: 4px;
}


/*       ~ ~ ~ Articles - Related Resources Section ~ ~ ~       */

.RelatedResources {
	background-color: var(--deepblueNebula);
	background-image: url(/images/Contact_Banner.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--lightblueText);
	padding: 10px 40px;
}

.RelatedResources h1 {
	text-align: center;
}

.RelatedResources h3 {
	text-align: left;
	padding-left: 20px;
}

.RelatedResources p {
	text-align: left;
	padding: 10px 70px;
}

.RelatedResources a {
	color: var(--goldenWhite);
}

.RelatedResources a::before {
	background: var(--goldenWhite);
}

.privacy-policy li {
	list-style: circle;
	color: var(--heroBlue);
	padding: 10px;
	padding-left: 5px;
	padding-bottom: 3px;
}

/*
==============================================================================================================================
12. Media Queries    --------------------------------------------------------------------------------------------------------------------------------------
Changes for different screen sizes
==============================================================================================================================

Table of contents: 
1. Large computer screens - min-width: 1600px
2. computer screens - min-width: 1281px
3. small computer screens - max-width: 1280px
4. Small Computer or Tablet Devices - max-width:  1200px
5. Where nav bar starts to wrap - max-width:  1086px
6. Tablet Devices - max-width:  950px
7.  Tablets and Mobile Devices - max-width:  768px
8. Mobile device - max-width:  501px


NOTES - 
320px - 480px: Mobile (Smartphone) max-width: 480px
481px - 768px:Low Resolution Tablets and ipads max-width: 767px
769px - 1024px: Tablets Ipads portrait mode max-width:1024px
1025px - 1280px: Desktops max-width:1280px
Huge size (Larger screen) max-width: 1281px and greater

320px - 480px: Mobile devices
481px - 768px: iPads, Tablets
769px - 1024px: Small screens, laptops
1025px - 1200px: Desktops, large screens
1201px and more: Extra large screens, TV

*/



/* ==============================================================================================================================*/
	/*  --------------------------       Computer Screens      --------------------------  */

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

	#header header {
		margin-top: 15%; /*tablet similar*/
	}

	.free_resources_flex_container {
		flex-direction: row;
		align-items: baseline;
	}

	.free_resources_section_grid_container {
		width: calc(100% / 2);
	}

	.TOP_getStarted #header {
	 	min-height: 25vmax;
	 }

 	.getStarted_topbar_area {
		min-height: 65px;
	}

	.contact-info {
		justify-content: center;
		padding: 10px 10%;
	}

	section {
		padding: 2rem 15%;
	}

	address {
		padding: 2rem 15%;
	}

}


/* ==============================================================================================================================*/
	/*  --------------------------  Large Computer Screens  --------------------------  */

@media only screen and (min-width: 1600px) {
	section {
		padding: 2rem 20%;
	}

	address {
		padding: 2rem 20%;
	}

	#header header {
		margin-top: 10%;
	}
}


/* ==============================================================================================================================*/
	/*  --------------------------  Small Computer Screens  --------------------------  */

@media only screen and (max-width: 1280px) {
	.topbar  {
			justify-content: space-evenly;
	}
	.topbar .logo {
			justify-items: left;
	}

	.topbar .navbar {
			justify-content: left;
	}


/*Home page specific styles*/
	#header header {
		margin-top: 20%; /*tablet similar*/
	}

	.TOP {
	 	min-height: 40vmax;
	}

/*About page specific styles*/
	
	.TOP_about #header {
	 	min-height: 30vmax;
		background-image:url(/images/About_Us_landing_smallScreen.jpg);	 	
	}

	.TOP_about #header header {
		margin-top: 12%;
		padding: 0 35%; 
	}


/*Training page specific styles*/

	.trainingOptions {
		flex-direction: column;
		justify-content: center;
	}

	.trainingOption_column {
			width: 100%;
		}


/*How-to-Begin page specific styles*/
/*note -no header*/
	.TOP_getStarted #header {
	 	min-height: 25vmax;
	 }

/*Free-Resources page specific styles*/


.cv_articles_listing {
	grid-template-columns: 1fr;
}


}

/* ==============================================================================================================================*/
	/*  --------------------------  Small Computer or Tablet Devices  --------------------------  */
@media only screen and (max-width:  1200px) {

	/*Subpage page specific styles*/
		.articleContentContainer header {
			padding-top: 10%; 
		}

		.subpageContentContainer header {
			padding-top: 10%; 
		}
	
	.TOP_getStarted #header {
	 	min-height: 25vmax;
	 }

	 .KT-listing {
	 	flex-direction: column;
	 	grid-gap: 1px;
	 }

 	.KT-listing-row {
		width: 100%;
	}

	.TOP_resources #header header {
		margin-top: 15%;
	}
}



/* ==============================================================================================================================*/
	/*  --------------------------  Where nav bar starts to wrap --------------------------  */
@media only screen and (max-width:  1224px) {

	.about_topbar_area {
    min-height: 100px;
  }

	.getStarted_topbar_area {
		min-height: 100px;
	}

	.TOP_getStarted #header {
	 	min-height: 35vmax;
	 }

	.TOP_about #header header {
		margin-top: 15%;
	}

	.TOP_resources #header header {
		margin-top: 18%;
	}

		html {
	scroll-padding-top: 5rem;
	}

	a {
		scroll-margin-top: 5rem;
	}


}



/* ==============================================================================================================================*/
	/*  --------------------------        Tablet Devices       --------------------------  */
@media only screen and (max-width:  950px) and (-webkit-max-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3) and (-webkit-min-device-pixel-ratio: 4) {
	
	.topbar  {
			justify-content: space-evenly;
	}
	.topbar .logo {
			justify-items: left;
	}

	.topbar .navbar {
			justify-content: left;
	}

	.mainNav li:hover .subNavBox {
		visibility: hidden;
	}
	
	.mainNav li:hover .DropDownBox {
		visibility: hidden;
	}	

	.mainNav li:hover .LangDropDownBox {
		top: 110px;
		right: 5%;
	}

	.mainNav a, .mainNav h2 {
		text-align: center;
		font-size: clamp(1.3rem, 1.6vw, 2rem);
	}

	.trainingOptions {
		flex-direction: column;
		justify-content: center;
	}

	.trainingOption_column {
		width: 100%;
	}

	.TOP_training #header header {
/*		margin-top: 18%;	*/
		padding-top: 18%;
	}

	.TOP_about #header header {
		padding: 0 30%; /*20% works better under 400*/
	}

	.articleContentContainer header {
			padding-top: 15%; 
		}
	
	.subpageContentContainer header {
			padding-top: 15%; 
		}

	 .pathwayTextImage {
	    width: 375px;
	  }
/*	  above is not working*/

	.TOP_resources #header header {
		margin-top: 15%;
	}

}


/* ==============================================================================================================================*/
	/*  --------------------------      Small  Tablet Devices       --------------------------  */
@media only screen and (max-width:  850px) and (min-width:  769px) {
		

		.mainNav a {
			padding: 0;
		}


	}


/* ==============================================================================================================================*/
	/*  --------------------------  Tablets and Mobile Devices  --------------------------  */
@media only screen and (max-width:  768px) {

	html {
	scroll-padding-top: 3rem;
	}

	section {
		padding: 1.5rem 2rem;
	}

	address {
		padding: 1.5rem 2rem;
	}

	a {
		text-decoration: underline;
		scroll-margin-top: 3rem;
	}

	.logo {
		padding: 8px;
	}

	.topbar .logo {
		margin-right: 60px;
	}

	.logo img {
		width: clamp(3rem, 3vw, 4rem);	
	}

	.logo a {
		font-size: clamp(1.6rem, 2vw, 2.2rem);
		text-decoration: none;
	}


	.mainNav {
		position: fixed;
    overflow-y: auto;
    overflow-x: hidden;
		z-index: 1000;
		inset: 0 0 0 35%;
		background: linear-gradient(var(--topofStarsNavy), var(--lowertopofStarsNavy));
		flex-direction: column;
		padding: min(20vh, 60px) 5px;
		justify-self: right;
		margin: 2px;
		grid-gap: 8px;
		transform: translateX(100%);
		transition: transform 350ms ease-out;
	}

	.mainNav[data-visible="true"]	{
	transform: translateX(0%);
	}

	.topbar  {
		justify-content: space-between;
		min-height: 80px;
	}

	.mainNav .topMenulink {
	color: white;
	}

	.mainNav li {
		text-align: left;
		font-size: clamp(1.8rem, 2.2vw, 2.5rem);
		color: white;
	}

	.mainNav a {
		text-align: left;
		font-size: clamp(1.8rem, 2.2vw, 2.5rem);
		color: white;
		text-decoration: none;
	}

	.mainNav h2 {
		text-align: left;
		font-size: clamp(1.4rem, 1.8vw, 2rem);
		color: white;
		padding: 10px;
	}

	.mainNav li:hover .subNavBox {
		visibility: hidden;
	}

	.mainNav li:hover .DropDownBox {
		visibility: hidden;
	}	

	.mainNav li:hover .mobile-dropdown-visible .DropDownBox {
		visibility: visible;
	}	



	.mobile-dropdown-visible {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		grid-gap: 10%;
		width: 100%;
		position: relative;
	}

	.mobile-dropdown-visible .DropDownBoxCONTAINER {
    position: relative;
    /*width: 300px;
    right: 12px;*/
  }

	.mobile-dropdown-visible .DropDownBox {
		display: block;
		position: relative;
    margin-left: 0px;
    padding: 10px;
    width: 100%;
		background: var(--topofStarsNavy);
		background-color: var(--topofStarsNavy);
	}

.german-nav .mobile-dropdown-visible li a {
	color: white;
}


	.LangDropDownBox {
		z-index: 9999;
		position: relative;
		width: min-content;
	}

	.TOP_subpage .LangDropDownBox {
		background-color: var(--topofStarsNavy);
	}

	.TOP_subpage .dropDownlinks li a {
    color: white;
	}



	.mobile-language-dropdown {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		grid-gap: 10%;
		width: 100%;
		color: white;
	}
	
	.mobile-language-dropdown-row {
		width: calc(100%/2);
	}


	.LangDropDownBox li {
		padding: 15px 10px;
	}
	
	.mainNav li:hover .LangDropDownBox {
		top: 10px;
		right: 10px;
	}

		.TOP .LangDropDownBox {
			background: none;
			background-color: var(--topofStarsNavy);
		}


		.TOP_training .LangDropDownBox {
			background-color: var(--topofStarsNavy);
		}

		.TOP_about .LangDropDownBox {
			background-color: var(--topofStarsNavy);
		}

		.TOP_about .Navlanguage li a {
			color: white;
		}	

		
		.TOP_getStarted .LangDropDownBox {
			background-color: var(--topofStarsNavy);
		}

		.TOP_getStarted .Navlanguage li a {
			color: white;
		}	

		
		.TOP_resources .LangDropDownBox {
			background-color: var(--topofStarsNavy);
		}

		.TOP_resources .Navlanguage li a {
			color: white;
		}	


	.mobile_nav_toggle {
		position: absolute;
		display: block;
		z-index: 9999;
		border: 0;
		width: 60px;
		max-height: 60px;
		top: 12px;
		right: 1rem;
		padding: 8px;
		border-radius: 0;
		border-width: 0;
		border-style: none;
		/*transition: 0.25s ease;*/
		background: transparent;
		margin: 0;
		align-items: center;
		justify-self: center;
	}


	.TOP_subpage .mobile_nav_toggle {
		top: 2px;
	}
	
	.menuIcon {
		display: inline-block;
		cursor: pointer;
	}

	/*Menu icon - normal state*/
		.menuIconbar1, .menuIconbar2, .menuIconbar3 {
		  width: 40px;
		  height: 3px;
		  background-color: white;
		  margin: 8px 0;
		  transition: 0.4s;
		}

	/*Menu icon - clicked state*/
	.changeToggle .menuIconbar1 {
	  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
	  transform: rotate(-45deg) translate(-9px, 6px);
	}

	.changeToggle .menuIconbar2 {
	  opacity: 0;
	}

	.changeToggle .menuIconbar3 {
	  -webkit-transform: rotate(45deg) translate(-8px, -8px);
	  transform: rotate(45deg) translate(-8px, -8px);
	}


	/*.mobile_nav_toggle[aria-expanded="true"]	{
		}
	*/
		.contact-info {
			display: flex;
			flex-direction: column;
		}

	/* connect / social icons*/
		.connect-icons {
			flex-wrap: wrap;
			grid-gap: 5px;
			}

	/*  -------------  Home page specific styles  -------------  */
		.TOP #header header {
			margin-top: 20%; 
		}

		#header header {
			margin-top: 20%; 
		}

		/*below is for other languages that have larger header*/
		.mobile-header header {
			font-size: clamp(2.5rem, 4vw, 4rem);
			margin-top: 25%; 
		}
		

		.TOP {
		 	min-height: 50vmax;
		}

		#subheader h1 {
 			font-size: clamp(1.5rem, 2vw, 2rem); 
		}
		
		.threepathways {
			flex-direction: column;
		}

		.pathwayIcon img {
			width: 40%;
		}

		#homepageUpcomingCourses {
			padding: 1rem;
		}

		.upcomingCoursesTable table {
		  padding: 2px;
		}

		#courseTable td, th {
			padding: 8px;
		}

		.CoursesTableHeader {
			padding: 3px;
		}

		.CoursesTableContent {
			padding: 5px;
		}
		
		#subheader p {
			padding: 10px 20px;
		}
		
		.exploreTraining p {
			padding: 10px 20px;
		}



	.threepathways-home {
		flex-direction: column;
		}


	.pathway-home {
		display: flex;
		flex-direction: column;
		align-content: center;
		justify-content: flex-start;
		width: 100%;
	}


	/*     -------------    About page specific styles ------------- */

	.TOP_about #header {
	 	min-height: 20vmax;	
	}

	.TOP_about #header header {
		margin-top: 12%;
		padding: 0 28%; /*20% works better under 400*/
		font-size: clamp(3rem, 5vw, 5rem);
	}

	.about_topbar_area {
		min-height: 75px;
	}

	.TOP_about .topbar .topMenulink {
		color: white;
	}

	/*Menu icon - normal state*/
	.TOP_about .menuIconbar1, .TOP_about .menuIconbar2, .TOP_about .menuIconbar3 {
		  background-color: var(--heroBlue);
		}

	.TOP_about .changeToggle .menuIconbar1 {
	  background-color: white;
	}

	.TOP_about .changeToggle .menuIconbar3 {
	  background-color: white;
	}

	.about_articles_listing {
		grid-template-columns: 1fr;
	}

	.aboutSection1 p {
		padding: 10px 20px
	}

	/*  -------------  Training page specific styles  -------------  */

	.TOP_training #header header {
/*		margin-top: 20%;*/
		padding-top: 10%;
	}


	.trainingOptions {
		flex-direction: column;
		justify-content: center;
	}

	.trainingOption_column {
			width: 100%;
		}
	.subheader_training p {
		color: var(--heroBlue);
		/*text-align: center;*/
		padding: 10px 20px
	}

	.trainingSection1 p {
		padding: 10px 20px;
	}

	/*  -------------  How-to-Begin page specific styles  -------------   */
	/*note -no header*/

	.TOP_getStarted #header {
	 	min-height: 20vmax;
	 }

 	.getStarted_topbar_area {
		min-height: 70px;
	}

	.TOP_getStarted .topbar .topMenulink {
		color: white;
	}

	.TOP_getStarted .menuIconbar1, .TOP_getStarted .menuIconbar2, .TOP_getStarted .menuIconbar3 {
		  background-color: var(--heroBlue);
		}

	.TOP_getStarted .changeToggle .menuIconbar1 {
	  background-color: white;
	}

	.TOP_getStarted .changeToggle .menuIconbar3 {
	  background-color: white;
	}

	.pathwayTextImage {
		width: 30%;
	}

	.pathwayText {
		width: 70%;
	}


.subheader_getStarted p {
	text-align: left;
}

	/*  -------------  Free-Resources page specific styles  -------------  */
	.TOP_resources #header header {
		margin-top: 25%;
	}

	.TOP_resources .topbar .topMenulink {
		color: white;
	}

	.TOP_resources .menuIconbar1, .TOP_resources .menuIconbar2, .TOP_resources .menuIconbar3 {
		  background-color: var(--heroBlue);
		}	

	.TOP_resources .changeToggle .menuIconbar1 {
	  background-color: white;
	}

	.TOP_resources .changeToggle .menuIconbar3 {
	  background-color: white;
	}

	.free_resources_section_grid_container {
		padding: 0px;
	}

	.free_resource_item {
		padding: 10px 0px;
	}

	.cv_articles_listing {
		grid-template-columns: 1fr;
	}



	/*  -------------  Subpage page specific styles  -------------  */
	

		.TOP_subpage .topbar .topMenulink {
			color: white;
		}

		/*Menu icon - normal state*/
		.TOP_subpage .menuIconbar1, .TOP_subpage .menuIconbar2, .TOP_subpage .menuIconbar3 {
			  background-color: var(--heroBlue);
			}

		.TOP_subpage .changeToggle .menuIconbar1 {
		  background-color: white;
		}

		.TOP_subpage .changeToggle .menuIconbar3 {
		  background-color: white;
		}

		.articleContentContainer header {
			padding-top: 15%; 
		}

	.subpageContentContainer header {
			padding-top: 15%; 
		}

	.article-back-and-forward {
	    justify-content: space-between;
	    grid-gap: 2.5rem;
	}


	.legends_book_images {
		flex-wrap: wrap;
	}

	.responsive-table {
		overflow-x: scroll;
		scrollbar-width: auto;
	}

	::-webkit-scrollbar {
		width: 40px;
		height: 20px;
	}

	::-webkit-scrollbar-track {
		background: var(--warmwhite);
		 border-radius: 20px;
	}

	::-webkit-scrollbar-thumb {
	  background: #aeafc5;
	  border-radius: 20px;
	  border: var(--bgDeepBlue);
	}

	/*  -------------  GERMAN SITE specific styles  -------------  */

	.german-3 {
	  	flex-direction: column;
	  }


	 	.german-kts {
		flex-direction: column;
		} 
} /*end mobile media query for 768px */



/* ==============================================================================================================================*/
	/*  --------------------------       Mobile    Devices        --------------------------  */
@media only screen and (max-width:  501px) {

	.TOP_about #header header {
		margin-top: 20%;
		padding: 0 27%;
	}

	.TOP_resources #header header {
		margin-top: 15%;
	}

		.TOP_about #header header {
		margin-top: 15%;
	}

	.TOP_training #header header {
/*	margin-top: 15%;*/
padding-top: 10%;
	}
	#courseTable td, th {
			padding: 5px;
		}

}