/*
Theme: ISA: Comadres Saludables 2
Description: For the main program. 
Author: Redmon Group, Inc
*/

@charset "UTF-8";

@font-face {
	font-family: "segoeui";
	src: url("fonts/segoeui.woff2") format("woff2"), local("sans-serif"), local("Arial");
	font-display: swap;
}

@font-face {
	font-family: "segoeuib";
	src: url("fonts/segoeuib.woff2") format("woff2"), local("sans-serif"), local("Arial");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "segoeuii";
	src: url("fonts/segoeuii.woff2") format("woff2"), local("sans-serif"), local("Arial");
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "segoeuiz";
	src: url("fonts/segoeuiz.woff2") format("woff2"), local("sans-serif"), local("Arial");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "seguisb";
	src: url("fonts/seguisb.woff2") format("woff2"), local("sans-serif"), local("Arial");
	font-display: swap;
}

@font-face {
	font-family: "seguisbi";
	src: url("fonts/seguisbi.woff2") format("woff2"), local("sans-serif"), local("Arial");
	font-display: swap;
}

@font-face {
	font-family: "seguibl";
	src: url("fonts/seguibl.woff2") format("woff2"), local("sans-serif"), local("Arial");
	font-display: swap;
}

@font-face {
	font-family: "seguibli";
	src: url("fonts/seguibli.woff2") format("woff2"), local("sans-serif"), local("Arial");
	font-display: swap;
}

@font-face {
	font-family: "roboto-regular";
	src: url("fonts/roboto-regular.woff2") format("woff2"), local("sans-serif"), local("Arial");
	font-display: swap;
}

@font-face {
	font-family: "roboto-bold";
	src: url("fonts/roboto-bold.woff2") format("woff2"), local("sans-serif"), local("Arial");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "roboto-italic";
	src: url("fonts/roboto-italic.woff2") format("woff2"), local("sans-serif"), local("Arial");
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "roboto-bold-italic";
	src: url("fonts/roboto-bold-italic.woff2") format("woff2"), local("sans-serif"), local("Arial");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

:root {
	--browser-mode: desktop;
	--max-width: 1800px;
	--border-color: #1b73bc;
	--image-border-color: #707070;
	--background-color: #fff;
	--alt-background-color: #e9f4ff;
	--title-bar-background-color: #c6e2ff;
	--font-color: #303030;
	--instructions-color: #1b73bc;
	--link-color: #1b73bc;
	--content-controls-font-color: #fff;
	--button-background-color: #1b73bc;
	--button-font-color: #fff;
	--border-radius: 22px;
	--border-drop-shadow: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
	--title-bar-height: 44px;

	--module-color-1: #d9d4ec;
	--module-color-2: #b0d5fa;
	--module-color-3: #7fbdfe;
	--module-color-4: #c5bbec;
	--module-color-5: #a994fe;
}

/*------------------------------------------------------------
	Safari Only
------------------------------------------------------------*/
@media not all and (min-resolution:.001dpcm) { 
	@supports (-webkit-appearance: none) {
	  
	}
}

/*------------------------------------------------------------
	General
------------------------------------------------------------*/
[data-theme="mobile"] {
	display: none;
}

body {
	overflow-x: hidden;
	margin: 0;
	font-family: "segoeui";
	font-size: 18px;
	color: var(--font-color);
}

h1, h2, h3, h4 {
	font-family: "seguisb";
}

h1 {
	font-size: 28px;
}

p {
	margin: 20px 0;
}

ol > li::marker {
	font-weight: bold;
}

.debug {
	/* display: block; */
	display: none;
}

.instructions {
	font-style: italic;
	color: var(--instructions-color);
}

a {
	color: var(--link-color);
}

button,
#login main input[type="submit"] {
	font-family: "segoeui";
	width: 150px;
	height: 58px;
	border: 2px solid var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--button-background-color);
	font-size: 18px;
	text-align: center;
	color: var(--button-font-color);
}

button:hover,
button a:hover,
#login main input[type="submit"]:hover {
	color: var(--button-font-color);
	filter: saturate(115%) brightness(125%) contrast(165%);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	cursor: pointer;
}

button.control {
	width: auto;
	height: auto;
	border: none;
	border-radius: 0;
	background-color: transparent;
	padding: 15px 24px;
	font-family: "segoeui";
}

a button.control {
	color: var(--font-color);
}

button.control:hover,
button.control a:hover {
	color: var(--font-color);
	text-decoration: underline;
	filter: none;
}

button.nav-home,
button.nav-menu {
	display: block;
	margin: 20px auto 60px;
}

button.close {
	position: absolute;
	top: 0px;
	right: 430px;
	width: 45px;
	height: 45px;
	border: none;
	background: url("images/icon-close-button.svg") no-repeat 8px/24px;
	filter: invert(11%) sepia(0%) saturate(1532%) hue-rotate(156deg) brightness(87%) contrast(76%);
}

button.close:hover {
	opacity: 0.5;
	cursor: pointer;
}

img.content-icon {
	max-width: 30px;
	max-height: 30px;
	vertical-align: bottom;
}

.program-logo {
	display: block;
	width: 658px;
	height: auto;
}

/*------------------------------------------------------------
	Splash
------------------------------------------------------------*/
body#splash {
	background: #3896E4 url("images/splash_bkgd.svg");
}

#splash-en,
#splash-es {
	display: none;
}

section[id^="splash-"] {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 760px;
	height: 480px;
	padding: 0 40px;
	border: 4px solid var(--border-color);
	border-radius: 20px;
	background: var(--background-color);
}

#splash-es {
	height: 530px;
}

#splash-en .program-logo,
#splash-es .program-logo {
	width: 90%;
}

#splash-en .program-logo {
	margin: 70px auto 0;
}

#splash-es .program-logo {
	margin: 64px auto 0;
}

section[id^="splash-"] button {
	display: block;
	margin: auto;
}

section[id^="splash-"] p {
	text-align: center;
	font-size: 23px;
	line-height: 34px;
}

section[id^="splash-"] p.subtitle {
	margin: 24px 20px 60px;
	font-size: 28px;
}

section[id^="splash-"] button.lang-toggle {
	font-size: 23px;
	color: var(--link-color);
}

/*------------------------------------------------------------
	Login
------------------------------------------------------------*/
#login main {
	width: 55%;
	max-width: 920px;
	margin: 60px auto;
}

#login main .instructions {
	text-align: center;
}

#login main .form-container {
	margin: 80px auto;
}

#login main .form-container .form-item {
	display: grid;
	grid-template-columns: 150px 1fr;
	height: 52px;
	margin: 50px 0px;
}

#login main .form-container .form-item.error-message {
	height: auto;
	margin: -50px 0;
	color:#fd0007;
	text-align: center;
	grid-template-columns: 100%;
}

#login main .form-container label {
	font-size: 20px;
	font-weight: 700;
	color: #848484;
}

#login main .form-container input[type="text"],
#login main .form-container input[type="password"] {
	height: 100%;
	margin-top: -15px;
	padding: 0 30px;
	font-size: 16px;
}

#login main .form-item.button-row {
	display: block;
	margin-top: 100px;
}

#login main input[type="submit"] {
	float: right;
}

#login main .bottom-message {
	text-align: center;
}
/*
#login main .bottom-message {
	position: relative;
	left: 50%;
}

#login main .bottom-message p {
	position: relative;
	left: -50%;
}
*/

/*------------------------------------------------------------
	Wrapper
------------------------------------------------------------*/
header {
	z-index: 500;
	position: relative;
}

header .system-controls-container {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "logo gap controls";
	column-gap: 62px;
	justify-content: left;
	margin: 0 380px 0 380px;
	background-color: var(--background-color);
	max-height: 122px;
}

header .system-controls-container .controls-container {
	grid-area: controls;
	padding-top: 10px;
	width: 340px;
}

header .content-controls-container {
	height: var(--title-bar-height);
	background: url("images/content-controls-bkgd.png");
	background-size: contain;
	color: var(--content-controls-font-color)
}

[id^="p"].program-wrapper header .content-controls-container {
	display: grid;
	grid-template-columns: 210px 130px auto 130px 130px 222px;
	/* padding-left: 5%; */
	/* padding: 0px 300px 0px 200px; */
}

header .content-controls-container nav {
	z-index: 400;
	justify-self: center;
	width: 130px;
	height: var(--title-bar-height);
	border-left: 2px solid;
	background: url("images/icon-menu.svg") no-repeat 56px 14px/24px;
}

header[data-theme="default"]  .content-controls-container nav:hover,
header .content-controls-container button.home:hover,
header .content-controls-container button.tools:hover {
	background-color: rgba(176, 213, 250, 0.7);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

header .content-controls-container nav ul {
	display: none;
	width: max-content;
	margin-top: var(--title-bar-height);
	padding: 0;
	line-height: 40px;
	list-style-type: none;
/**/
	background: var(--link-color);
}

header .content-controls-container nav li {
/* 	
	display: none;
	position: relative;
	top: -25px;
*/
	position: relative;
	padding: 4px 40px 4px 40px;
	background: var(--link-color);
	font-size: 24px;
}

header .content-controls-container nav li:first-child {
	display: list-item;
	top: 0;
	padding: 12px 40px 4px 40px;
}

header .content-controls-container nav li:last-child {
	padding: 4px 40px 12px 40px;
}

header .content-controls-container nav li:hover {
	background: var(--link-color);
	filter: brightness(125%);
	cursor: pointer;
}

header .content-controls-container nav li.visited {
	padding: 4px 40px 4px 20px;
	list-style-type: disc;
	list-style-position: inside;
}

header .content-controls-container nav li.visited:first-child {
	padding: 12px 40px 4px 20px;
}

header .content-controls-container nav li.visited:last-child {
	padding: 4px 40px 12px 20px;
}

header .content-controls-container nav li.visited::marker {
	content: "● ";
}

header .content-controls-container nav ul a {
	font-size: 24px;
	color: var(--background-color);
	text-decoration: none;
}

header .content-controls-container nav li ul li.current-page-link:hover {
	filter: brightness(100%);
	cursor: default;
}

header .content-controls-container nav li .bookmark img {
	float: right;
	position: relative;
	top: 6px;
	right: -16px;
	width: 25px;
}

header .content-controls-container nav ul li ul {
	position: absolute;
	margin: 0;
}

header .content-controls-container .title {
	width: 70%;
	margin: auto;
	padding: 8px 20px 8px 60px;
	border-left: 2px solid;
	border-right: 2px solid;
	font-size: 20px;
}

[id^="p"].program-wrapper header .content-controls-container .title {
	width: calc(100% - 80px);
	min-width: 364px;
}

header .content-controls-container a {
	width: 100%;
}

header .content-controls-container button.control {
	width: 100%;
	height: 100%;
	padding: 0;
	font-size: 20px;
	color: var(--content-controls-font-color);
	text-decoration: none;
}

header .content-controls-container button a:hover {
	text-decoration: underline;
}

header .content-controls-container button.home {
	border-right: 2px solid;
}

header .content-controls-container button.tools {
    border-right: 2px solid;
}

header .content-page-info-container {
	/* display: flex;*/
	display: grid;
	grid-template-columns: 260px auto 130px 352px;
	border-bottom: 4px solid var(--border-color);
	background-color: var(--module-color-1);
	filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
}

header .content-page-info-container .title {
	width: auto;
	max-width: 1500px;
	margin: 8px 0;
	padding: 0px 0px 0px 0px;
	font-size: 20px;
}

header .content-page-info-container #bookmark {
	width: 80px;
	margin-right: 20px;
	background: url("images/icon-page-bookmark-unselected.svg") no-repeat 58px 10px/20px;
}

header .content-page-info-container #bookmark.selected {
	background: url("images/icon-page-bookmark.svg") no-repeat 58px 10px/20px;
}

header section.tools-container {
	z-index: 700;
	display: none;
	position: absolute;
	left: 0;
	background: #e9f4ff;
}

section.tools-container .tools-header {
	margin: 0;
	padding: 6px 260px 6px 260px;
	border-bottom: 4px solid var(--border-color);
	background-color: #fffed8;
	color: var(--font-color);
	font-size: 20px;
	text-align: left;
}

section.tools-container .home-tools .tools-header {
	text-align: center;
}

section.tools-container .tools-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	/* max-width: 1225px; */
	margin: auto;
	width: 50%;
}

section.tools-container .home-tools .tools-buttons {
	display: grid;
	grid-template-columns: 2.6fr 1fr 1fr 1fr;
	gap: 8px;
	/* max-width: 1225px; */
	margin: auto;
	width: auto;
}

section.tools-container button.tool {
	padding-top: 38px;
	border: none;
	background-color: transparent;
}

header .content-controls-container section.tools-container button.tool a {
	color: var(--font-color);
}

section.tools-container button.tool h1 {
	padding: 0 46px;
	font-size: 20px;
}

footer {
	position: relative;
	height: 92px;
	border-bottom: 4px solid var(--border-color);
	background-color: var(--title-bar-background-color);
}

/*------------------------------------------------------------
	Home
------------------------------------------------------------*/
:root {
	--module-progress-diameter: 120px;
	--module-progress-border-left: 60px;
	--module-progress-border-thickness: 8px;
	--module-progress-percentage-1: 0;
	--module-progress-percentage-2: 0;
	--module-progress-percentage-3: 0;
	--module-progress-percentage-4: 0;
	--module-progress-percentage-5: 0;
}

section.module-container {
	z-index: 10;
	display: grid;
	position: relative;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	column-gap: 18px;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0px 244px 0px 244px;
}

section.module-container button.module {
	display: grid;
	grid-template-rows: max-content auto var(--module-progress-diameter);
	row-gap: 20px;
	width: auto;
	height: 100%;
	padding: 30px 0;
	border: none;
	border-radius: 0;
	color: var(--font-color);
	text-decoration: none;
}

section.module-container button.module:hover,
section.tools-container button.tool:hover {
	color: var(--font-color);
	text-decoration: underline;
	filter: saturate(150%) brightness(90%) contrast(135%) drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
	transform: scale(1.02);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	cursor: pointer;
}

section.tools-container button.tool:hover {
	filter: saturate(150%) brightness(90%) contrast(135%) drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));
}

section.module-container button.module img {
	/* width: 100%; JHoward changed for post alpha changes.*/
	width: 98%;
}

section.module-container a,
section.tools-container a {
	text-decoration: none;
}

section.module-container button.module h1 {
	margin: 0 16px;
}

section.tools-container button.tool {
	width: auto;
	height: auto;
	color: var(--font-color);
}

section.module-container button.module .module-progress-container {
	position: relative;
	align-self: end;
	height: 100%;
}

section.module-container button.module .module-progress-container .module-progress {
	z-index: 10;
	float: left;
	position: relative;
	top: 27%;
	width: 100%;
	font-family: "roboto-regular";
	font-size: 12px;
	color: #9F9F9F;
}

section.module-container button.module .module-progress-container .module-progress .percent-value {
	font-family: "roboto-bold";
	font-size: 20px;
}

section.module-container button.module .module-progress-container.status-in-progress .module-progress,
section.module-container button.module .module-progress-container.status-completed .module-progress {
	color: #000;
}

section.module-container button.module .module-progress-container .bkgd {
	position: relative;
	top: 8px;
	left: 8px;
	text-align: center;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	border-radius: 100%;
	background-color: #e2e5e6;
}

section.module-container button.module .module-progress-container.status-in-progress .bkgd {
	background-color: #d1e5fa;
}

section.module-container button.module .module-progress-container.status-completed .bkgd {
	background-color: #d0e072;
}

section.module-container button.module .module-progress-container .bkgd-border {
/*
	--progress-border-thickness: 10px;
	--progress-border-color: #0098c7;
	--progress-diameter: 200px;
*/
	width: var(--module-progress-diameter);
	height: var(--module-progress-diameter);
	margin: auto;
	border-radius: 100%;
	background-color: #fff;
	aspect-ratio: 1/1;
}

section.module-container button.module .module-progress-container .bkgd-border::before,
section.module-container button.module .module-progress-container .bkgd-border::after {
	content: "";
	position: absolute;
	border-radius: 50%;
}

section.module-container button.module .module-progress-container.status-in-progress .bkgd-border::before,
section.module-container button.module .module-progress-container.status-completed .bkgd-border::before {
	inset: 0;
	left: var(--module-progress-border-left);
	width: inherit;
	height: inherit;
	/* background:
		radial-gradient(farthest-side, #0098c7 98%, #0000) top/var(--module-progress-border-thickness) var(--module-progress-border-thickness) no-repeat,
		conic-gradient(#0098C7 calc(0 * 1%), #0000 0); */
	-webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--module-progress-border-thickness)), #000 calc(100% - var(--module-progress-border-thickness)));
	-moz-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--module-progress-border-thickness)), #000 calc(100% - var(--module-progress-border-thickness)));
	-o-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--module-progress-border-thickness)), #000 calc(100% - var(--module-progress-border-thickness)));
	mask: radial-gradient(farthest-side, #0000 calc(99% - var(--module-progress-border-thickness)), #000 calc(100% - var(--module-progress-border-thickness)));

	/* mask: radial-gradient(farthest-side,#0000 calc(99% - var(--progress-border-thickness)),#000 calc(100% - var(--progress-border-thickness))); */
}

section.module-container button.module .module-progress-container.status-in-progress .bkgd-border::after,
section.module-container button.module .module-progress-container.status-completed .bkgd-border::after {
	inset: calc(50% - var(--module-progress-border-thickness) / 2);
	background-color: #0098C7;
	transform: rotate(calc(0 * 3.6deg - 90deg)) translate(calc(var(--module-progress-diameter) / 2 - 50%));
}

section.module-container button.module .module-progress-container.status-completed .bkgd-border::after {
	background-color: #5ea344;
}

section.module-container button.module .module-progress-container .bkgd-border.no-round:before {
	background-size: 0 0, auto;
}

section.module-container button.module .module-progress-container .bkgd-border.no-round:after {
	content: none;
}

section.module-container a:nth-child(5n + 1) button.module,
[id^="p"].program-wrapper[data-module="1"] header .content-page-info-container {
	background-color: var(--module-color-1);
}

section.module-container a:nth-child(5n + 1) button.module .module-progress-container.status-in-progress .bkgd-border::before {
	background:
		radial-gradient(farthest-side, #0098c7 98%, #0000) top/var(--module-progress-border-thickness) var(--module-progress-border-thickness) no-repeat,
		conic-gradient(#0098C7 calc(var(--module-progress-percentage-1) * 1%), #0000 0);
}

section.module-container a:nth-child(5n + 1) button.module .module-progress-container.status-completed .bkgd-border::before {
	background:
		radial-gradient(farthest-side, #5ea344 98%, #0000) top/var(--module-progress-border-thickness) var(--module-progress-border-thickness) no-repeat,
		conic-gradient(#5ea344 calc(var(--module-progress-percentage-1) * 1%), #0000 0);
}

section.module-container a:nth-child(5n + 1) button.module .module-progress-container.status-in-progress .bkgd-border::after,
section.module-container a:nth-child(5n + 1) button.module .module-progress-container.status-completed .bkgd-border::after {
	transform: rotate(calc(var(--module-progress-percentage-1) * 3.6deg - 90deg)) translate(calc(var(--module-progress-diameter) / 2 - 50%));
}

section.module-container a:nth-child(5n + 2) button.module,
[id^="p"].program-wrapper[data-module="2"] header .content-page-info-container {
	background-color: var(--module-color-2);
}

section.module-container a:nth-child(5n + 2) button.module .module-progress-container.status-in-progress .bkgd-border::before {
	background:
		radial-gradient(farthest-side, #0098c7 98%, #0000) top/var(--module-progress-border-thickness) var(--module-progress-border-thickness) no-repeat,
		conic-gradient(#0098C7 calc(var(--module-progress-percentage-2) * 1%), #0000 0);
}

section.module-container a:nth-child(5n + 2) button.module .module-progress-container.status-completed .bkgd-border::before {
	background:
		radial-gradient(farthest-side, #5ea344 98%, #0000) top/var(--module-progress-border-thickness) var(--module-progress-border-thickness) no-repeat,
		conic-gradient(#5ea344 calc(var(--module-progress-percentage-2) * 1%), #0000 0);
}

section.module-container a:nth-child(5n + 2) button.module .module-progress-container.status-in-progress .bkgd-border::after,
section.module-container a:nth-child(5n + 2) button.module .module-progress-container.status-completed .bkgd-border::after {
	transform: rotate(calc(var(--module-progress-percentage-2) * 3.6deg - 90deg)) translate(calc(var(--module-progress-diameter) / 2 - 50%));
}

section.module-container a:nth-child(5n + 3) button.module,
[id^="p"].program-wrapper[data-module="3"] header .content-page-info-container {
	background-color: var(--module-color-3);
}

section.module-container a:nth-child(5n + 3) button.module .module-progress-container.status-in-progress .bkgd-border::before {
	background:
		radial-gradient(farthest-side, #0098c7 98%, #0000) top/var(--module-progress-border-thickness) var(--module-progress-border-thickness) no-repeat,
		conic-gradient(#0098C7 calc(var(--module-progress-percentage-3) * 1%), #0000 0);
}

section.module-container a:nth-child(5n + 3) button.module .module-progress-container.status-completed .bkgd-border::before {
	background:
		radial-gradient(farthest-side, #5ea344 98%, #0000) top/var(--module-progress-border-thickness) var(--module-progress-border-thickness) no-repeat,
		conic-gradient(#5ea344 calc(var(--module-progress-percentage-3) * 1%), #0000 0);
}

section.module-container a:nth-child(5n + 3) button.module .module-progress-container.status-in-progress .bkgd-border::after,
section.module-container a:nth-child(5n + 3) button.module .module-progress-container.status-completed .bkgd-border::after {
	transform: rotate(calc(var(--module-progress-percentage-3) * 3.6deg - 90deg)) translate(calc(var(--module-progress-diameter) / 2 - 50%));
}

section.module-container a:nth-child(5n + 4) button.module,
[id^="p"].program-wrapper[data-module="4"] header .content-page-info-container {
	background-color: var(--module-color-4);
}

section.module-container a:nth-child(5n + 4) button.module .module-progress-container.status-in-progress .bkgd-border::before {
	background:
		radial-gradient(farthest-side, #0098c7 98%, #0000) top/var(--module-progress-border-thickness) var(--module-progress-border-thickness) no-repeat,
		conic-gradient(#0098C7 calc(var(--module-progress-percentage-4) * 1%), #0000 0);
}

section.module-container a:nth-child(5n + 4) button.module .module-progress-container.status-completed .bkgd-border::before {
	background:
		radial-gradient(farthest-side, #5ea344 98%, #0000) top/var(--module-progress-border-thickness) var(--module-progress-border-thickness) no-repeat,
		conic-gradient(#5ea344 calc(var(--module-progress-percentage-4) * 1%), #0000 0);
}

section.module-container a:nth-child(5n + 4) button.module .module-progress-container.status-in-progress .bkgd-border::after,
section.module-container a:nth-child(5n + 4) button.module .module-progress-container.status-completed .bkgd-border::after {
	transform: rotate(calc(var(--module-progress-percentage-4) * 3.6deg - 90deg)) translate(calc(var(--module-progress-diameter) / 2 - 50%));
}

section.module-container a:nth-child(5n + 5) button.module,
[id^="p"].program-wrapper[data-module="5"] header .content-page-info-container {
	background-color: var(--module-color-5);
}

section.module-container a:nth-child(5n + 5) button.module .module-progress-container.status-in-progress .bkgd-border::before {
	background:
		radial-gradient(farthest-side, #0098c7 98%, #0000) top/var(--module-progress-border-thickness) var(--module-progress-border-thickness) no-repeat,
		conic-gradient(#0098C7 calc(var(--module-progress-percentage-5) * 1%), #0000 0);
}

section.module-container a:nth-child(5n + 5) button.module .module-progress-container.status-completed .bkgd-border::before {
	background:
		radial-gradient(farthest-side, #5ea344 98%, #0000) top/var(--module-progress-border-thickness) var(--module-progress-border-thickness) no-repeat,
		conic-gradient(#5ea344 calc(var(--module-progress-percentage-5) * 1%), #0000 0);
}

section.module-container a:nth-child(5n + 5) button.module .module-progress-container.status-in-progress .bkgd-border::after,
section.module-container a:nth-child(5n + 5) button.module .module-progress-container.status-completed .bkgd-border::after {
	transform: rotate(calc(var(--module-progress-percentage-5) * 3.6deg - 90deg)) translate(calc(var(--module-progress-diameter) / 2 - 50%));
}

/*------------------------------------------------------------
	Content
------------------------------------------------------------*/
main section.tools-container {
	z-index: 50;
	/* display: flex; */
	position: relative;
	width: 100%;
	border-top: 4px solid var(--border-color);
	background: var(--alt-background-color) url("images/home-tools-bkgd.png") repeat-y;
}

main section.tools-container .tools-empty {
	width: 20%;
}

main section.tools-container .tools-content {
	/* width: 80%; */
}

main section.tools-container .tools-header {
	background-color: var(--title-bar-background-color);
}

main section.tools-container .tools-buttons {
	/* margin: 0px 240px 0px 320px; */
	padding: 0px 194px 0px 194px;
}

main section.tools-container button.tool {
	color: var(--font-color);
}

section.tools-container button.tool img {
	width: 180px;
}

[id^="p"].program-wrapper main {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 360px 20px 260px;
}

[id^="p"].program-wrapper main section {
	margin: 0 auto;
}

[id^="p"].program-wrapper main section > img:first-child {
	margin: 20px 0;
}

[id^="p"].program-wrapper main section p.instructions img {
	border: none;
}

[id^="p"].program-wrapper main section.left,
[id^="p"].program-wrapper .editable section.left {
	float: left;
	width: calc(32% - 50px);
	padding-right: 40px;
}

[id^="p"].program-wrapper main section.right,
[id^="p"].program-wrapper .editable section.right {
	float: right;
	width: 62%;
}

[id^="p"].program-wrapper main nav {
	display: inline-block;
	width: 100%;
}

[id^="p"].program-wrapper main nav .buttons {
	float: right;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 100px;
	width: fit-content;
	margin: 20px auto;
}

[id^="p"].program-wrapper main img {
	width: 100%;
	border: 1px solid var(--image-border-color);
}

[id^="p"].program-wrapper main ul.checkmark {
	width: fit-content;
	margin: 40px auto;
}

[id^="p"].program-wrapper main ul.checkmark li {
	padding: 0 0 20px 40px;
	background: url(images/icon-check-mark.svg) no-repeat transparent;
	background-size: 30px;
	list-style-type: none;
}

main .video {
	position: relative;
	margin-bottom: 20px;
	padding: 56.25% 0 0;
}

main .video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 1600px;
}

[id^="p"].program-wrapper main[data-theme="desktop"].video {
	padding: 0px 350px 20px 260px;
}

main .audio-player {
	margin: 20px 0;
}

main .audio-player .audio-btn {
	height: 74px;
	border: 3px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #fff;
    filter: var(--border-drop-shadow);
}

main .audio-player .audio-btn.paused {
	background-position: 50px 14px;
	background-size: 52px;
}

main .audio-btn.playing {
	background-color: #cdecff;
	background-position: 62px 16px;
	background-size: 22px;
}

main .audio-btn a p {
	margin: 0;
	padding: 24px 20px 0 50px;
	font-size: 18px;
}

.content-2-columns ul {
    /* display: grid; */
    /* grid-template-columns: [col-1] 50% [col-2] 50%; */
    margin: 20px 0;
    padding: 0;
    border: 3px solid var(--border-color);
    background-color: var(--border-color);
}

.content-2-columns ul.grid-two-column {
	display: grid;
	grid-template-columns: [col-1] 50% [col-2] 50%;
}

.content-2-columns li {
    /* display: grid; */
    padding: 0;
    border: 3px solid var(--border-color);
    background-color: #707070;
    list-style-type: none;
}

.content-2-columns img {
    display: inline;
    object-fit: cover;
    width: 100%;
    /* height: 100%; */
    height: auto;
	border: none !important;
}

.content-2-columns h3 {
    padding: 10px;
	margin: 0px;
    background-color: #707070;
    font-size: 18px;
    color: #fff;
}

main #page-navigation {
	float: right;
	font-family: "segoeui";
	width: 242px;
	height: 42px;
	padding: 22px 0;
	border: 2px solid var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--button-background-color);
	font-size: 28px;
	text-align: center;
	color: var(--button-font-color);
}

main #page-navigation.nav-home {
	float: none;
	margin: 40px auto;
}

main #page-navigation a {
	color: #fff;
	text-decoration: none;
}

/*------------------------------------------------------------
	Content: Icons
------------------------------------------------------------*/
.image.icon-key-steps {
	width: 320px;
	margin: 20px auto;
}

[id^="p"].program-wrapper main .image.icon-key-steps img {
	border: none;
}

.image.icon-module-end.completed img,
.image.icon-module-end.incomplete img {
	margin: 40px 0;
	border: none;
}

.image.icon-module-end.completed img {
	max-height: 320px;
}

.image.icon-module-end.incomplete img {
	max-height: 260px;
}

/*------------------------------------------------------------
	Content: Tip Pop-Up
------------------------------------------------------------*/
[class^="tip-"] {
	position: relative;
	width: 122px;
	height: 122px;
	margin: 40px 0;
	border: 3px solid var(--border-color);
	border-radius: 100px;
	background: #ffead8 url("images/icon-key-notes.svg") no-repeat 36px 27px/50px;
	filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1));
	color: var(--border-color);
	cursor: pointer;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

[class^="tip-"].open {
	width: 100%;
	/* height: 122px; */
	height: auto;
	min-height: 124px;
	border-radius: 32px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

[class^="tip-"] article {
	height: 0;
}

[class^="tip-"] button.close {
	display: none;
}

[class^="tip-"].open button.close {
	display: block;
}

[class^="tip-"].open article {
	display: block;
	height: 100%;
	opacity: 1;
	animation: 1s kf-tip-open-article;
}

@keyframes kf-tip-open-article {
	0% {
		height: 0;
		opacity: 0;
	}

	40% {
		height: 0;
		opacity: 0;
	}

	100% {
		height: 100%;
		opacity: 1;
	}
}

[class^="tip-"].close article {
	animation: 0.5s kf-tip-close-article;
}

@keyframes kf-tip-close-article {
	0% {
		height: 100%;
		opacity: 1;
	}

	50% {
		height: 122px;
		opacity: 0;
	}

	100% {
		height: 122px;
		opacity: 0;
	}
}

[class^="tip-"] article {
	overflow: hidden;
	width: 70%;
	margin-left: 120px;
}

[class^="tip-"] button.close {
	right: 10px;
	filter: invert(29%) sepia(97%) saturate(1120%) hue-rotate(184deg) brightness(96%) contrast(84%);
}

.tip-activities {
	background: #fffed8 url("images/icon-experience.svg") no-repeat 27px 26px/68px;
}

.tip-experience {
	background: #ddffd8 url("images/icon-activities.svg") no-repeat 23px 28px/76px;
}

.tip-no-image {
	background: #ffffff;
}

/*------------------------------------------------------------
	Content: 2-Column
------------------------------------------------------------*/
ul.content-2-column {
	display: grid;
	grid-template-columns: [col-1] calc(50% - 15px) [col-2] calc(50% - 15px);
	column-gap: 40px;
	margin: 20px 0;
	padding: 0;
}

ul.content-2-column li {
	display: grid;
	padding: 0;
	list-style-type: none;
}

ul.content-2-column h3 {
	padding: 10px;
	background-color: var(--content-border-color);
	font-size: 16px;
	color: #fff;
}

ul.content-2-column img {
	display: inline;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

ul.content-2-column.icons {
	margin: 20px 0 0;
}

ul.content-2-column.icons li {
	display: grid;
	grid-template-columns: [col-1] 160px [col-2] auto;
	column-gap: 16px;
	padding: 20px 0;
	border: none;
	list-style-type: none;
}

ul.content-2-column.icons li:first-child,
ul.content-2-column.icons li:nth-child(2) {
	padding: 0 0 20px;
}

ul.content-2-column.icons li img {
	display: flex;
	align-self: center;
	object-fit: contain;
	max-height: 112px;
	border: none;
}

ul.content-2-column.icons li p {
	align-self: center;
	margin: 0;
	padding: 0;
}

/*------------------------------------------------------------
	Desktop 1920px and Over
------------------------------------------------------------*/
@media only screen and (min-width : 1920px) {

	:root {
		--title-bar-height: 44px;
	}

	/*------------------------------------------------------------
		Wrapper
	------------------------------------------------------------*/
	[id^="p"].program-wrapper header .content-controls-container {
		grid-template-columns: 210px 130px auto 130px 130px 222px;
	}

	header .content-controls-container nav {
		/* background: url("images/icon-menu.svg") no-repeat 18px 24px/38px; */
		background: url("images/icon-menu.svg") no-repeat 56px 14px/24px;
	}

	header .content-controls-container .title {
		padding: 8px 40px 8px 40px;
	}

}

/*------------------------------------------------------------
	Desktop Less Than 1920px
------------------------------------------------------------*/
@media only screen and (max-width : 1920px) {

	header .system-controls-container {
		column-gap: 60px;
	}

	/*------------------------------------------------------------
		Login
	------------------------------------------------------------*/
	/* #login main .form-container .form-item {
		grid-template-columns: 160px 1fr;
		height: 82px;
	}

	#login main .form-container label {
		font-size: 28px;
	}

	#login main .form-container input[type="text"],
	#login main .form-container input[type="password"] {
		font-size: 28px;
	} */

	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	section.module-container button.module h1 {
		font-size: 20px;
	}

	section.module-container {
		padding: 0px 234px 0px 234px;
	}	
}

@media only screen and (max-width : 1720px) {

	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	section.module-container button.module h1 {
		/* font-size: 28px; */
	}

	section.module-container {
		padding: 0px 214px 0px 214px;
	}	

	/*------------------------------------------------------------
		Wrapper
	------------------------------------------------------------*/
	header .system-controls-container {
		column-gap: 40px;
		/* margin: 0 320px 0 380px; */
		/* margin: 0 80px 0 60px; */
		margin: 0 280px 0 340px;
	}

	header .system-controls-container .program-logo {
		/* width: 658px; */
		width: 580px;
	}

	header .system-controls-container button.control {
		/* font-size: 24px; */
	}

	/* header .content-controls-container,
	[id^="p"].program-wrapper header .content-controls-container,
	header .content-controls-container nav {
		grid-template-columns: var(--title-bar-height) auto 250px 250px;
		grid-template-rows: var(--title-bar-height);
		height: var(--title-bar-height);
	} */

	button.close {
		right: 400px;
	}
}

@media only screen and (max-width : 1628px) {
	
	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	section.module-container button.module h1 {
		/* font-size: 26px; */
	}

	section.module-container {
		padding: 0px 194px 0px 194px;
	}	

	/*------------------------------------------------------------
		Content
	------------------------------------------------------------*/
}

@media only screen and (max-width : 1540px) {

	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	section.module-container button.module h1 {
		font-size: 18px;
	}
	
	section.module-container {
		padding: 0px 174px 0px 174px;
	}	

	section.tools-container button.tool img {
		/* width: 280px; */
	}

	/*------------------------------------------------------------
		Content: Tip Pop-Up
	------------------------------------------------------------*/
	[class^="tip-"] article {
		width: 62%;
	}

	button.close {
		right: 360px;
	}
}

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

	/*------------------------------------------------------------
		Wrapper
	------------------------------------------------------------*/
	header .system-controls-container .controls-container {
		padding-top: 0;
	}

	header .content-controls-container,
	[id^="p"].program-wrapper header .content-controls-container,
	header .content-controls-container nav {
		grid-template-columns: 140px 130px auto 130px 130px 122px;
	}
	
	header .content-page-info-container {
		grid-template-columns: 200px auto 130px 250px;
	}

	header .system-controls-container {
		margin: 0 240px 0 300px;
	}

	header .system-controls-container .program-logo {
		/* width: 658px; */
		width: 520px;
	}

	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	section.module-container {
		padding: 0px 164px 0px 164px;
	}	

	/*------------------------------------------------------------
		Content: Tip Pop-Up
	------------------------------------------------------------*/
	[class^="tip-"] article {
		width: 62%;
	}

	[id^="p"].program-wrapper main[data-theme="desktop"].video {
		padding: 0px 250px 20px 200px;
	}

	/*------------------------------------------------------------
		Content
	------------------------------------------------------------*/
	[id^="p"].program-wrapper main {
		padding: 0px 260px 20px 200px;
	}

	button.close {
		right: 280px;
	}
}

@media only screen and (max-width : 1340px) {

	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	section.module-container button.module h1 {
		font-size: 16px;
	}
	
	section.tools-container button.tool img {
		/* width: 240px; */
	}

	section.tools-container button.tool h1 {
		padding: 0 40px;
	}

	section.module-container {
		padding: 0px 154px 0px 154px;
	}	

	/*------------------------------------------------------------
		Content
	------------------------------------------------------------*/
	[id^="p"].program-wrapper main {
		/* padding: 0 160px 20px; */
	}

	button.close {
		right: 240px;
	}
}

@media only screen and (max-width : 1250px) {

	[id^="p"].program-wrapper header .content-controls-container,
	header .content-controls-container nav {
		grid-template-columns: 10px 60px auto 130px 130px 10px;
	}

	header .system-controls-container {
		/* margin: 0 320px 0 380px; */
		margin: 0 200px 0 260px;
	}

	header .system-controls-container .program-logo {
		/* width: 658px; */
		width: 480px;
	}

	header .content-controls-container .title {
		padding: 8px 20px 8px 20px;
	}

	header .content-controls-container nav {
		width: 60px;
		background: url(images/icon-menu.svg) no-repeat 24px 14px/24px;
	}

	header .content-page-info-container {
		grid-template-columns: 50px auto 130px 150px;
	}
	
	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	section.module-container button.module h1 {
		font-size: 15px;
	}

	section.module-container {
		padding: 0px 144px 0px 144px;
	}	

	/*------------------------------------------------------------
		Content
	------------------------------------------------------------*/
	[id^="p"].program-wrapper main {
		padding: 0px 140px 20px 50px;
	}

	/*------------------------------------------------------------
		Content: Tip Pop-Up
	------------------------------------------------------------*/
	[class^="tip-"] article {
		width: 68%;
	}

	[id^="p"].program-wrapper main[data-theme="desktop"].video {
		padding: 0px 140px 20px 50px
	}

	button.close {
		right: 200px;
	}
}

@media only screen and (max-width : 1180px) {

	/*------------------------------------------------------------
		General
	------------------------------------------------------------*/
	header .system-controls-container {
		column-gap: 40px;
		/* margin: 0 320px 0 380px; */
		margin: 0 200px 0 260px;
	}

	header .system-controls-container .program-logo {
		/* width: 658px; */
		width: 460px;
	}

	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	section.module-container button.module h1 {
		font-size: 14px;
	}

	section.module-container {
		padding: 0px 104px 0px 104px;
	}	

	/*------------------------------------------------------------
		Content
	------------------------------------------------------------*/
	[id^="p"].program-wrapper main section.left,
	[id^="p"].program-wrapper main section.right {
		float: none;
		width: auto;
		padding: 0;
	}

	[id^="p"].program-wrapper main[data-theme="desktop"].video {
		/* padding: 0 120px 20px; */
	}

	/*------------------------------------------------------------
		Content: Tip Pop-Up
	------------------------------------------------------------*/
	[class^="tip-"] article {
		width: 75%;
	}

	button.close {
		right: 180px;
	}
}

@media only screen and (max-width : 1100px) {

	/*------------------------------------------------------------
		General
	------------------------------------------------------------*/
	header .system-controls-container {
		/* column-gap: 60px; */
		/* margin: 0 320px 0 380px; */
		margin: 0 180px 0 220px;
	}

	header .system-controls-container .program-logo {
		/* width: 658px; */
		width: 400px;
	}

	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	section.module-container {
		/* grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); */
		/* row-gap: 18px; */
		column-gap: 10px;
	}

	section.module-container button.module h1 {
		/* font-size: 26px; */
	}
	
	section.tools-container button.tool img {
		width: 140px;
	}

	section.tools-container button.tool h1 {
		padding: 0 20px;
		font-size: 24px;
	}

	section.module-container {
		padding: 0px 70px 0px 70px;
	}	

	/*------------------------------------------------------------
		Content: Tip Pop-Up
	------------------------------------------------------------*/
	[class^="tip-"] article {
		width: 72%;
	}
}

@media only screen and (max-width : 1000px) {

	/*------------------------------------------------------------
		Wrapper
	------------------------------------------------------------*/
	header .system-controls-container {
		column-gap: 40px;
		/* margin: 0 320px 0 380px; */
		margin: 0 140px 0 120px;
	}

	header .system-controls-container .program-logo {
		/* width: 658px; */
		width: 380px;
	}

	header .system-controls-container button.control {
		/* font-size: 22px; */
	}

	header .content-controls-container {
		/* height: 60px; */
		height: var(--title-bar-height)
	}

	header .content-controls-container .title {
		/* padding: 8px 40px; */
		font-size: 20px;
	}

	header .content-page-info-container {
		grid-template-columns: 10px auto 100px 0px;
	}

	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	section.module-container {
		padding: 0px 10px 0px 10px;
	}	

	/*------------------------------------------------------------
		Content: Tip Pop-Up
	------------------------------------------------------------*/
	[class^="tip-"] article {
		width: 74%;
	}

	section.tools-container .tools-buttons {
		width: 80%;
	}
}

@media only screen and (max-width : 880px) {

	header .system-controls-container {
		column-gap: 30px;
		/* margin: 0 320px 0 380px; */
		margin: 0 120px 0 100px;
	}

	header .system-controls-container .program-logo {
		/* width: 658px; */
		width: 360px;
	}

	header .content-controls-container .title {
		font-size: 16px;
	}

	/*------------------------------------------------------------
		Login
	------------------------------------------------------------*/
	#login main {
		width: auto;
		margin: 60px 100px;
	}

	#login main .instructions,
	#login main .form-container label,
	#login main .bottom-message {
		font-size: 18px;
	}

	#login main .form-container .form-item {
		grid-template-columns: 132px 1fr;
		height: 52px;
		margin: 40px 0px;
	}

	#login main .form-container input[type="text"],
	#login main .form-container input[type="password"] {
		width: calc(100% - 40px);
		margin-top: -18px;
		padding: 0 20px;
		font-size: 16px;
	}

	#login main input[type="submit"] {
		width: 200px;
		height: 70px;
		border-radius: calc(var(--border-radius) / 1.25);
		font-size: 24px;
	}
	
	#login main .form-item.button-row {
		margin-top: 80px;
	}

	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	section.module-container {
		display: block;
	}

	section.module-container button.module {
		grid-template-columns: calc(40% - 10px) calc(60% - 10px);
		grid-template-rows: auto;
		grid-template-areas:
			"img title"
			"img progress";
		column-gap: 20px;
		row-gap: 20px;
		width: 100%;
		height: auto;
		margin: 0 0 20px;
		padding: 30px;
	}

	section.module-container button.module > img {
		grid-area: img;
		margin: auto;
	}

	section.module-container button.module h1 {
		grid-area: title;
		margin: auto;
	}
	
	section.module-container button.module .progress {
		grid-area: progress;
		align-self: start;
	}
	
	section.module-container button.module .module-progress-container.status-in-progress .bkgd-border::before, section.module-container button.module .module-progress-container.status-completed .bkgd-border::before {
		left: 11px;
	}

	section.tools-container .tools-empty {
		display: none;
	}

	main section.tools-container .tools-header {
		padding: 12px 0;
		text-align: center;
	}

	main section.tools-container .tools-content {
		width: auto;
	}

	/* section.tools-container .home-tools .tools-buttons { */
	section.tools-container .tools-buttons {
			display: block;
		text-align: center;
	}

	section.tools-container button.tool img {
		width: 180px;
	}
	
	
	/*------------------------------------------------------------
		Content
	------------------------------------------------------------*/
	[id^="p"].program-wrapper main[data-theme="desktop"].video {
		padding: 0 60px 20px;
	}

	/*------------------------------------------------------------
		Content: Tip Pop-Up
	------------------------------------------------------------*/
	[class^="tip-"] article {
		width: 40%;
	}

	button.close {
		right: 100px;
	}
}

@media only screen and (max-width : 800px) {

	/*------------------------------------------------------------
		General
	------------------------------------------------------------*/
	button.control {
		padding: 10px 18px;
	}

	/*------------------------------------------------------------
		Wrapper
	------------------------------------------------------------*/
	header .system-controls-container {
		column-gap: 10px;
		/* margin: 0 320px 0 380px; */
		margin: 0 80px 0 60px;
	}

	header .system-controls-container .program-logo {
		/* width: 658px; */
		width: 360px;
	}

	header .system-controls-container button.control {
		/* font-size: 22px; */
	}

	header .content-controls-container {
		/* height: 50px; */
		height: var(--title-bar-height)
	}

	header .content-controls-container .title {
		font-size: 16px;
	}

	header .content-page-info-container {
		grid-template-columns: 10px auto 100px 0px;
	}

	header .content-controls-container,
	[id^="p"].program-wrapper header .content-controls-container,
	header .content-controls-container nav {
		grid-template-columns: 10px 60px auto 80px 130px 10px;
	}
	
	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	main section.tools-container {
		display: block;
		background: var(--alt-background-color) url("images/home-tools-bkgd-mobile.png");
	}
	
	main section.tools-container .tools-content {
		width: auto;
	}
	
	section.tools-container .home-tools .tools-buttons {
		display: block;
		padding: 20px 0;
	}

	section.tools-container .home-tools button.tool {
		width: 62%;
	}

	section.tools-container .home-tools button.tool h1 {
		width: auto;
		font-size: 22px;
	}

	section.tools-container .tools-buttons {
		display: block;
		padding: 20px 0;
	}
	
	main section.tools-container button.tool {
		margin: 20px 0;
		padding: 0;
	}

	main section.tools-container button.tool img {
		width: 240px;
	}

	main section.tools-container button.tool h1 {
		width: calc(100vw - 80px);
		margin: 10px auto;
		padding: 0;
		font-size: 20px;
	}

	button.close {
		right: 10px;
	}
}

@media only screen and (max-width : 650px) {

	/*------------------------------------------------------------
		General
	------------------------------------------------------------*/
	button.control {
		padding: 10px;
	}

	/*------------------------------------------------------------
		Wrapper
	------------------------------------------------------------*/
	header .system-controls-container {
		column-gap: 0px;
		/* margin: 0 320px 0 380px; */
		margin: 0 60px 0 10px;
	}

	header .system-controls-container .program-logo {
		/* width: 658px; */
		width: 300px;
	}

	header .system-controls-container button.control {
		font-size: 18px;
	}

	/*------------------------------------------------------------
		Login
	------------------------------------------------------------*/
	#login main {
		margin: 60px;
	}

	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	section.module-container button.module h1 {
		font-size: 24px;
	}
}

/*------------------------------------------------------------
	Mobile
------------------------------------------------------------*/
@media only screen and (max-width : 499px) {
	:root {
		--browser-mode: mobile;
		--module-progress-diameter: 128px;
	}

	/*------------------------------------------------------------
		General
	------------------------------------------------------------*/
	[data-theme="mobile"] {
		display: block;
	}

	html {
		overflow-x: hidden
	}

	body {
		font-size: 16px;
	}
	
	h1 {
		font-size: 22px;
	}

	button,
	#login main input[type="submit"] {
		font-size: 18px;
	}

/*------------------------------------------------------------
		Wrapper
	------------------------------------------------------------*/
	header .system-controls-container {
		column-gap: 0px;
		/* margin: 0 320px 0 380px; */
		margin: 0 60px 0 100px;
	}

	header .system-controls-container .program-logo {
		/* width: 658px; */
		width: 240px;
		margin: 0 auto;
	}

	header .content-controls-container, [id^="p"].program-wrapper header .content-controls-container, header .content-controls-container nav {
		/* display: block; */
	}

	header .content-page-info-container {
		grid-template-columns: auto 100px;
		width: 99%;
	}

	header .content-controls-container a {
		width: auto;
	}

	/*------------------------------------------------------------
		Splash
	------------------------------------------------------------*/
	section[id^="splash-"] {
		width: 78vw;
		height: auto;
		padding: 20px;
	}

	#splash-en .program-logo,
	#splash-es .program-logo {
		margin: 20px auto 30px;
	}

	section[id^="splash-"] p.subtitle {
		margin: 0 0 30px;
		font-size: 24px;
	}

	section[id^="splash-"] p {
		font-size: 20px;
		line-height: 28px;
	}

	section[id^="splash-"] button.lang-toggle {
		margin-bottom: 6px;
		font-size: 20px;
	}

	/*------------------------------------------------------------
		Login
	------------------------------------------------------------*/	
	#login header .system-controls-container .controls-container {
		text-align: center;
	}

	#login header .content-controls-container .title {
		margin: 0 40px;
		padding: 10px 0;
		border: none;
	}

	#login main {
		margin: 20px 40px;
	}

	#login main .instructions,
	#login main .form-container label {
		font-size: 18px;
	}

	#login main .bottom-message {
		font-size: 16px;
	}

	#login main .form-container {
		margin: 30px auto;
	}

	#login main .form-container .form-item {
		display: block;
		height: 38px;
		margin: 20px 0px 50px;
	}

	#login main .form-container input[type="text"],
	#login main .form-container input[type="password"] {
		width: calc(100% - 28px);
		margin: 6px 0 0;
		font-size: 18px;
		padding: 0 14px;
	}

	#login main .form-container .form-item.error-message {
		margin: 0;
	}

	#login main input[type="submit"] {
		width: 140px;
		height: 50px;
		margin: 20px 0;
		border-radius: calc(var(--border-radius) / 1.5);
		font-size: 18px;
	}

	#login main .bottom-message {
		padding: 20px 0;
	}

	/*------------------------------------------------------------
		Wrapper
	------------------------------------------------------------*/
	header[data-theme="default"] {
		display: none;
	}

	header[data-theme="mobile"] {
		display: block;
		left: -1px;
		margin: 10px 0 20px;
	}
	
	header .system-controls-container {
		display: block;
		margin: 0px 40px 50px 40px;
	}
	
	header .content-controls-container nav ul li ul {
		position: relative;
	}

	header .content-controls-container nav li.current-page-link:hover {
		filter: brightness(120%);
	}

	[id^="p"].program-wrapper header .content-controls-container {
		grid-template-columns: 44px 110px auto;
		grid-template-rows: var(--title-bar-height);
		grid-template-areas:
			"nav tools"
			"title title";
		/* height: calc(var(--title-bar-height) * 2); */
		height: auto;
		padding: 0;
	}

	[id^="p"].program-wrapper header .content-controls-container nav {
		grid-area: nav;
		width: 72px;
	}
	
	[id^="p"].program-wrapper header .content-controls-container nav .content-container {
		display: none;
		position: absolute;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(217, 212, 236, 0.98);
	}

	[id^="p"].program-wrapper header .content-controls-container nav .content-container button.control {
		font-size: 18px;
	}

	header .content-controls-container button.home {
		border-right: none;
		border-left: 2px solid;
	}

	[id^="p"].program-wrapper header .content-controls-container nav .content-container button.control.lang-toggle,
	[id^="p"].program-wrapper header .content-controls-container nav .content-container button.control.logout {
		float: left;
		width: 40%;
		height: 50px;
		color: var(--font-color);
	}

	[id^="p"].program-wrapper header .content-controls-container nav .content-container button.control.close {
		right: 5px;
		width: 50px;
		height: 50px;
		background-position: 10px 12px;
		background-size: 30px;
	}
	
	[id^="p"].program-wrapper header .content-controls-container nav .content-container button.control.home {
		height: 50px;
		border: none;
		border-top: 2px solid;
		border-bottom: 2px solid;
		background: url("images/content-controls-bkgd.png");
		font-size: 24px;
	}

	[id^="p"].program-wrapper header .content-controls-container nav .content-container > ul {
		display: block;
		width: auto;
		margin: 50px 0px 0px 0px;
	}

	[id^="p"].program-wrapper header .content-controls-container nav .content-container ul {
		line-height: 26px;
	}
	
	[id^="p"].program-wrapper header .content-controls-container nav .content-container ul ul {
		display: none;
		width: auto;
	}

	[id^="p"].program-wrapper header .content-controls-container nav .content-container li {
		padding: 10px 40px 4px 20px;
	}

	[id^="p"].program-wrapper header .content-controls-container nav .content-container li:first-child {
		padding: 20px 40px 4px 20px;
	}

	[id^="p"].program-wrapper header .content-controls-container nav .content-container li:last-child {
		padding: 10px 40px 20px 20px;
	}

	[id^="p"].program-wrapper header .content-controls-container nav .content-container ul a {
		position: relative;
		left: 40px;
		margin-left: -40px;
		font-size: 22px;
	}

	[id^="p"].program-wrapper header .content-controls-container nav .content-container li .bookmark img {
		top: 2px;
		right: 14px;
		width: 18px;
	}

	[id^="p"].program-wrapper header .content-controls-container .tools {
		grid-area: tools;
		border-left: 2px solid;
		font-size: 20px;
	}
	
	[id^="p"].program-wrapper header .content-controls-container .title {
		grid-area: title;
		width: 100%;
		margin: 0;
		padding: 6px 30px;
		border-top: 2px solid;
		text-align: left;
	}

	[id^="p"].program-wrapper header .content-page-info-container .title {
		width: 100%;
		padding: 0 10px 0 30px;
		font-size: 20px;
	}

	[id^="p"].program-wrapper header .content-page-info-container #bookmark {
		background-size: 22px;
	}
	
	[id^="p"].program-wrapper main {
		width: calc(100% - 60px);
		padding: 0;
	}

	[id^="p"].program-wrapper main section.left,
	[id^="p"].program-wrapper main section.right {
		float: initial;
		margin: 10px;
	}

	[id^="p"].program-wrapper main nav .buttons {
		column-gap: 0;
		width: 90%;
		text-align: center;
		margin-right: 20px;
	}
	
	[id^="p"].program-wrapper main nav .buttons a:last-child {
		justify-self: end;
	}

	[id^="p"].program-wrapper main nav button {
		width: 150px;
		height: 60px;
		border-radius: calc(var(--border-radius) / 2);
		font-size: 18px;
	}

	main section.tools-container .tools-header {
		width: 100vw;
		padding: 4px 0;
	}

	main section.tools-container button.tool img {
		width: calc(100% - 60px);
	}
	section.tools-container .tools-header {
		padding: 6px 60px 6px 160px;
	}
	
	footer {
		height: 72px;
	}

	/*------------------------------------------------------------
		Home
	------------------------------------------------------------*/
	header .system-controls-container .controls-container {
		text-align: right;
		width: 90%;
	}

	header .content-controls-container .title {
		width: auto;
		padding: 11px 0;
		border: none;
		text-align: center;
		font-size: 18px;
	}

	section.module-container {
		padding: 0 20px;
	}

	button.control {
		padding: 10px 20px;
	}	

	header .system-controls-container button.control {
		padding: 4px 30px;
	}

	header .system-controls-container button.logout {
		padding: 4px 30px;
		margin-right: -40px;
	}

	section.module-container button.module {
		grid-template-columns: calc(50% - 5px) calc(50% - 5px);
		grid-template-areas:
			"title title"
			"img progress";
		column-gap: 10px;
		row-gap: 10px;
		padding: 20px;
	}

	section.module-container button.module h1 {
		font-size: 22px;
	}
	
	section.module-container button.module .progress {
		align-self: center;
		/* max-width: 100px; */
	}

	section.tools-container .home-tools button.tool h1 {
		font-size: 24px;
	}



	/* section.module-container button.module .module-progress-container.status-in-progress .bkgd-border::before,
	section.module-container button.module .module-progress-container.status-completed .bkgd-border::before {
		left: 0;
	} */

	/*------------------------------------------------------------
		Content
	------------------------------------------------------------*/
	main .audio-player {
		margin: 10px 0;
	}

	main .audio-player .audio-btn {
		height: 60px;
		border-radius: calc(var(--border-radius) / 2);
	}
	
	main .audio-player .audio-btn.paused {
		background-position: 12px 12px;
		background-size: 42px;
	}
	
	main .audio-btn.playing {
		background-position: 20px 12px;
		background-size: 20px;
	}
	
	main .audio-btn a p {
		padding: 15px 16px 0 50px;
   		font-size: 20px;
	}

	/*------------------------------------------------------------
		Content: Icons
	------------------------------------------------------------*/
	.image.icon-key-steps {
		width: 220px;
		margin: 20px auto;
	}

	ul.content-2-column.icons li {
		display: block;
		grid-template-columns: [col-1] 100px [col-2] auto;
		column-gap: 2px;
		padding: 10px 0px;
	}

}

@media only screen and (max-width : 360px) {
	:root {
		--module-progress-diameter: 110px;
	}

	section.module-container button.module .module-progress-container.status-in-progress .bkgd-border::before, section.module-container button.module .module-progress-container.status-completed .bkgd-border::before {
		left: 12px;
	}

	/*------------------------------------------------------------
		Wrapper
	------------------------------------------------------------*/
	header .system-controls-container {
		column-gap: 0px;
		/* margin: 0 320px 0 380px; */
		margin: 0px;
	}

	header .system-controls-container .program-logo {
		/* width: 658px; */
		width: 220px;
		margin: 0 auto;
	}

	header .system-controls-container .controls-container {
		text-align: right;
		width: 80%;
	}
	
	/*------------------------------------------------------------
		Splash
	------------------------------------------------------------*/
	section[id^="splash-"] p {
		line-height: 26px;
	}

	/*------------------------------------------------------------
		Content
	------------------------------------------------------------*/
	[id^="p"].program-wrapper main nav button {
		width: 100px;
		font-size: 20px;
	}
	
	[id^="p"].program-wrapper header .content-controls-container .title {
		padding: 6px 20px;
	}

	[id^="p"].program-wrapper header .content-page-info-container .title {
		padding: 0 4px 0 20px;
		font-size: 16px;
	}

	[id^="p"].program-wrapper main {
		width: calc(100% - 2px);
	}

	[id^="p"].program-wrapper main section p {
		margin: 20px 12px;
	}


	ul.content-2-column.icons li {
		display: block;
		grid-template-columns: [col-1] 100px [col-2] auto;
		column-gap: 2px;
		padding: 10px 0px;
	}

}


@media only screen and (max-width : 280px) {
	section.module-container button.module .module-progress-container.status-in-progress .bkgd-border::before, section.module-container button.module .module-progress-container.status-completed .bkgd-border::before {
		left: 0px;
	}
}


/*------------------------------------------------------------
	From Participants Resources Library Tool
------------------------------------------------------------*/
.program-wrapper.resource {
	margin: 0 40px;
}

/* jhoward changed 12/14/2023 */
/*
.program-wrapper.resource .program-logo {
	width: 400px;
}
*/

[id^="p"].program-wrapper main section .from-resource > img:first-child {
	margin: 20px 0;
}

.program-wrapper.resource .title {
	margin: 0px 0px 10px 0px;
	text-align: center;
	background-color: #FFFED8;
	border-bottom: 5px solid #1B73BC;
	font-size: 20px;
	padding: 8px 0px 8px 0px;
}

.program-wrapper.resource main {
	padding: 0;
}

[id^="p"].program-wrapper.resource main section.left,
[id^="p"].program-wrapper.resource main section.right {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.program-wrapper.resource main section > :not(.from-resource) {
	display: none;
}

.program-wrapper.resource main h1 {
	font-size: 24px;
}

.program-wrapper.resource main h2 {
	font-size: 22px;
}

.program-wrapper.resource main h3 {
	font-size: 20px;
}

.program-wrapper.resource main p {
	font-size: 18px;
}

.program-wrapper.resource main .interactive-container {
	margin: 0;
}

/*------------------------------------------------------------
	Print
------------------------------------------------------------*/
@media print {

	header,
	footer,
	[id^="p"].program-wrapper main nav {
		display: none;
	}

	[id^="p"].program-wrapper.resource main section.left,
	[id^="p"].program-wrapper.resource main section.right {
		width: 100%;
	}

	.program-wrapper.resource .program-logo {
		width: 200px;
	}
}