/*Designed, Developed, and Coded By: Shawna Burtis For question, please contact: shawna.burtis@mail.waldenu.edu */
 p.developer-notes {
     display: none;
}
/*One Sheet to Rule Them All*/
 :root {
    /*Walden brand colors*/
     --slate: #003b4c;
     --cyan: #00687f;
     --teal: #008ea9;
     --gold: #fdb71a;
     --green: #00a887;
     --light-gray: #dbdee0;
     --dark-gray: #5a5d66;
     --hover-bg: #b2d1d7;
    /*fonts and headings*/
     --headers: noto-serif, serif;
     --default: Arial, sans-serif;
}
/*Backend*/
/*Admin Page Breadcrumb*/
 #s-lib-admin-bc .breadcrumb, #s-lib-bc .breadcrumb {
     float: left !important;
}
/*LibGuides Layout Elements*/
/*must include LG custom body class*/
 body, .s-lg-guide-body {
     font-family: var(--default);
     font-size: 1.6rem;
     font-weight: normal;
     line-height: 150%;
     color: #333;
     background-color: #fff;
     padding-left: 0;
     padding-right: 0;
     overflow-x: hidden;
}
 .container {
     width: 98% !important;
}
/*Page Layout*/
 #s-lg-guide-main {
     padding-top: 10px !important;
     padding-bottom: 10px !important;
     width: 100% !important;
     padding-left: 75px;
     padding-right: 75px;
}
 @media (min-width: 1600px) {
     #s-lg-guide-main {
         width: 90% !important;
    }
}
 @media (max-width: 991px) {
     #s-lg-guide-main {
         padding-left: 20px;
         padding-right: 20px;
    }
     .container {
         width: 100%;
    }
     ul.list-group.s-lg-boxnav {
         display: none;
    }
}
 .s-lib-box {
     padding: 5px !important;
     background-color: transparent !important;
     -webkit-box-shadow: none;
     box-shadow: none;
}
 div.active:focus {
     outline: none;
}
/*Boxes*/
/*box titles are h2 headings, box title supersedes h2*/
 .s-lib-box .s-lib-box-title {
     font-size: 3rem;
     border: none;
     padding-left: 0px !important;
}
 .s-lib-box {
     border-color: transparent;
     border-radius: 0px;
     padding: 25px;
     box-shadow: none;
}
 div.s-lib-box.s-lib-box-std.s-lib-floating-box {
     background-color: #fff;
     padding: 4px 20px 4px 19px;
     box-shadow: none !important;
    /*needs important tag*/
}
 .s-lib-box-content li {
     margin-top: 1rem;
}
/*Headings and Font Styles*/
/*Fonts and Headings must include LG custom guide name class WE NEED TO LOOK AT GUIDE NAME IT IS DIFFERENT THAN THE H1 HEADER*/
 h1 {
     font-family: var(--headers);
     font-size: 6rem !important;
     color: var(--slate) !important;
     font-weight: normal;
     line-height: 150%;
}
 h2 {
     font-family: noto-serif, serif;
     font-size: 3rem;
     color: var(--slate) !important;
     font-weight: normal;
     line-height: 150%;
}
 h2:after {
     content: "";
     display: block;
     width: 6rem;
     height: 0.2rem;
     margin-left: -0.1rem;
     margin-top: 1rem;
     background-color: var(--gold);
}
 h2.large-h2 {
     font-family: noto-serif, serif;
     font-size: 6rem;
     color: var(--slate) !important;
     font-weight: normal;
     line-height: 150%;
}
 h2.large-h2:after {
     content: "";
     display: block;
     width: 6rem;
     height: 0.2rem;
     margin-left: -0.1rem;
     margin-top: 1rem;
     background-color: var(--gold);
}
 @media (max-width: 424px) {
     h1 {
         font-size: 3.25rem;
    }
     h2 {
         font-size: 2.5rem;
    }
	   h2.large-h2 {
         font-size: 3.25rem;
    }
}
 h3 {
     font-family: var(--headers);
     font-size: 2.5rem;
     font-weight: normal;
     color: var(--slate);
     line-height: 150%;
}
 h4 {
     font-family: var(--headers);
     font-size: 2.25rem;
     font-weight: normal;
     color: var(--slate);
     line-height: 150%;
}
 h5, h6 {
     font-family: var(--headers);
     font-size: 2rem;
     font-weight: bold;
     line-height: 150%;
}
 h1.bold-feature-font-medium {
     letter-spacing: .025em;
     margin-top: 0;
     margin-bottom: 0;
     font-family: WF Visual Sans,sans-serif;
     font-size: 5rem !important;
     font-weight: 600;
     font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0;
     line-height: 150%;
     color: #fff !important;
}
 h1.bold-feature-font {
     letter-spacing: .025em;
     margin-top: 0;
     margin-bottom: 0;
     font-family: WF Visual Sans,sans-serif;
     font-size: 8rem !important;
     font-weight: 600;
     font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0;
     line-height: 150%;
     color: #fff !important;
}
 h1.white {
     color: #fff !important;
}
 h1.center {
     text-align: center;
}

 h2.white {
     color: #fff !important;
}
 h2.white:after {
     content: "";
     display: block;
     width: 10%;
     height: 0.2rem;
     margin-top: 1rem;
     background-color: var(--gold);
}
 h2.center {
     text-align: center;
}
 h2.center:after {
     content: "";
     display: block;
     width: 10%;
     height: 0.2rem;
     margin-left: 45%;
     margin-top: 1rem;
     background-color: var(--gold);
}
 h2.left {
     text-align: left;
}
 h2.left:after {
     content: "";
     display: block;
     width: 10%;
     height: 0.2rem;
     margin-left: 0px;
     margin-top: 1rem;
     background-color: var(--gold);
}
 h2.large {
     font-size: 5rem;
}
 h2.bold-black {
     color: black !Important;
     font-size: 4rem;
     font-weight: bold;
     font-family: var(--default);
}
 h2.bold-black:after {
     display: none;
}
 h3.center {
     text-align: center;
}
 h3.center:after {
     content: "";
     display: block;
     width: 10%;
     height: 0.2rem;
     margin-left: 45%;
     margin-top: 1rem;
     background-color: var(--gold);
}
 h3.left {
     text-align: left;
}
 h3.left:after {
     content: "";
     display: block;
     width: 10%;
     height: 0.2rem;
     margin-left: 0px;
     margin-top: 1rem;
     background-color: var(--gold);
}
 h3.white {
     color: #fff !important;
}
 h3.white:after {
     content: "";
     display: block;
     width: 10%;
     height: 0.2rem;
     margin-top: 1rem;
     background-color: var(--gold);
}
 h3.large-white {
     font-size: 4.75rem;
     letter-spacing: .15ch;
     color: #fff;
     font-family: var(--default);
}
 @media screen and (max-width: 991px) {
     h3.large-white {
         font-size: 3.75rem;
    }
}
 @media screen and (max-width: 600px) {
     h3.large-white {
         font-size: 2.5rem;
    }
}
 h3.left-rule:before {
     content: "";
     border-left: 10px solid #fdb71a;
     padding-left: 15px;
}
 h3.no-after:after, h2.no-after:after {
     display: none !important;
}
 h4.center {
     text-align: center;
}
 p {
     line-height: 150%;
}
 td p {
     line-height: 150%;
}
 p.bold-slate {
     font-weight: bold;
     color: var(--cyan);
     font-size: 1.8rem;
}
 p.white {
     color: #fff !important;
     line-height: 150%;
}
 p.center {
     text-align: center;
}
 p.large-white-quote {
     font-size: 3.5rem;
     color: #fff;
     text-align: center;
}
 @media screen and (max-width: 1280px) {
     p.large-white-quote {
         font-size: 2.75rem;
         width: 70%;
         margin-left: 15%;
    }
}
 @media screen and (max-width: 991px) {
     p.large-white-quote {
         font-size: 2rem;
         width: 80%;
         margin-left: 10%;
    }
}
 p.gold {
     color: var(--gold) !important;
     text-align: center;
     line-height: 180%;
     font-size: 1.85rem;
}
 p.small-caps {
     font-variant: small-caps;
     font-size: 3rem;
     color: #fff;
}
 p.small-caps-slate {
     font-variant: small-caps;
     font-size: 3rem;
     color: var(--slate);
}
 @media screen and (max-width: 991px) {
     p.small-caps, p.small-caps-slate {
         font-size: 2.5rem;
    }
}
 p.subtitle {
     font-size: 2.5rem;
     color: var(--slate);
}
 ul.white li {
     color: #fff !important;
}
/*Adds an outgoing icon after each LI in an FAQ list of links*/
 ul.faq-list li:after {
     content: "\f08e";
     font-family: "fontawesome";
     display: inline-block;
     padding-left: 5px;
     color: #00687f;
}
/*Unordered List with checkmarks*/
 ul.bullet-checkmark {
     list-style: none;
}
 ul.bullet-white-checkmark {
     list-style: none;
}
 ul.bullet-checkmark li:before {
     content: '\f00c';
     font-family: 'FontAwesome';
     padding-right: 15px;
     color: #00687f;
     font-size: 2.5rem;
     font-weight: bold;
}
 ul.bullet-white-checkmark li:before {
     content: '\f00c';
     font-family: 'FontAwesome';
     padding-right: 15px;
     color: #fff;
     font-size: 2.5rem;
     font-weight: bold;
}
/*Ordered lists with graphic numbers*/
 ol.green-blocks {
     list-style: none;
     counter-reset: item;
     width: 80%;
     margin-left: 5%;
     margin-top: 50px;
     margin-bottom: 50px;
}
 ol.green-blocks li {
     counter-increment: item;
     margin-bottom: 40px;
     margin-top: 5px;
     min-height: 60px;
}
 ol.green-blocks li:before {
     content: counter(item);
     background: var(--green);
     color: white;
     width: 85px;
     height: 75px;
     text-align: center;
     display: inline-block;
     padding-top: 25px;
     float: left;
     font-size: 6rem;
}
 ol.green-blocks li p {
     margin-left: 120px;
     font-size: 2rem;
     line-height: 180%;
}
 ol.slate-blocks {
     list-style: none;
     counter-reset: item;
     width: 80%;
     margin-left: 5%;
     margin-top: 50px;
     margin-bottom: 50px;
}
 ol.slate-blocks li {
     counter-increment: item;
     margin-bottom: 40px;
     margin-top: 5px;
     min-height: 60px;
}
 ol.slate-blocks li:before {
     content: counter(item);
     background: var(--slate);
     color: white;
     width: 85px;
     height: 75px;
     text-align: center;
     display: inline-block;
     padding-top: 25px;
     float: left;
     font-size: 6rem;
}
 ol.slate-blocks li p {
     margin-left: 120px;
     font-size: 2rem;
     line-height: 180%;
}
 ol.cyan-blocks {
     list-style: none;
     counter-reset: item;
     width: 80%;
     margin-left: 5%;
     margin-top: 50px;
     margin-bottom: 50px;
}
 ol.cyan-blocks li {
     counter-increment: item;
     margin-bottom: 40px;
     margin-top: 5px;
     min-height: 60px;
}
 ol.cyan-blocks li:before {
     content: counter(item);
     background: var(--cyan);
     color: white;
     width: 85px;
     height: 75px;
     text-align: center;
     display: inline-block;
     padding-top: 25px;
     float: left;
     font-size: 6rem;
}
 ol.cyan-blocks li p {
     margin-left: 120px;
     font-size: 2rem;
     line-height: 180%;
}
 @media screen and (max-width: 991px) {
     ol.green-blocks li:before, ol.slate-blocks li:before, ol.cyan-blocks li:before {
         width: 60px;
         height: 50px;
         padding-top: 15px;
         font-size: 5rem;
    }
     ol.green-blocks li p, ol.cyan-blocks li p, ol.cyan-blocks li p {
         margin-left: 70px;
    }
}
 p.large-page-text-underline {
     text-align: left;
     color: #003b4c !important;
     font-family: "Times New Roman", Georgia, Serif;
     font-size: 3.5rem !important;
     line-height: 150%;
     width: 90%;
}
 p.large-page-text-underline::after {
     content: " ";
     width: 60px;
     border-bottom: 3px solid #fbb84b;
     height: 2px;
     display: block;
     padding-top: 15px;
     margin-bottom: 15px;
}
 p.large-page-text {
     text-align: left;
     color: #003b4c !important;
     font-family: "Times New Roman", Georgia, Serif;
     font-size: 3.5rem !important;
     line-height: 150%;
     width: 90%;
}
 p.large-page-center-text-underline {
     text-align: center;
     color: #003b4c !important;
     font-family: "Times New Roman", Georgia, Serif;
     font-size: 3.5rem !important;
     line-height: 150%;
     width: 90%;
     margin-left: 5%;
}
 p.large-page-center-text-underline::after {
     content: " ";
     width: 5%;
     border-bottom: 3px solid #fbb84b;
     height: 2px;
     display: block;
     padding-top: 15px;
     margin-bottom: 15px;
     margin-left: 47.5%;
}
 p.large-page-center-text {
     text-align: center;
     color: #003b4c !important;
     font-family: "Times New Roman", Georgia, Serif;
     font-size: 3.5rem !important;
     line-height: 150%;
     width: 90%;
     margin-left: 5%;
}
 @media screen and (max-width: 600px) {
     p.large-page-center-text, p.large-page-center-text-underline {
         font-size: 2.5rem;
    }
}
 p.quote {
     font-size: 2.2rem;
     color: #00687f;
     width: 66%;
     margin-left: 16.5%;
     text-align: center;
     line-height: 150%;
     margin-top: 50px;
     margin-bottom: 50px;
}
 p.large-24 {
     font-size: 2.4rem;
     line-height: 150%;
}
 p.mid-20 {
     font-size: 2rem;
     line-height: 150%;
}
 caption {
     font-size: 1.6rem;
     font-weight: bold;
     color: #333 !important;
     line-height: 150%;
}
 p.citation {
     text-indent: -50px;
     padding-left: 50px;
     line-height: 150%;
}
 cite {
     padding-left: 50px;
     text-indent: -50px;
     font-style: normal;
     display: block;
     line-height: 3em !important;
     line-height: 150%;
}
 blockquote {
     font-size: 1.6rem;
     margin-left: 25px !important;
     line-height: 150%;
}
 var {
     font-size: 1.6rem;
     font-family: Arial, sans-serif !important;
     font-style: italic !important;
     line-height: 150%;
}
 var > a:link, var > a:visited, var > a:active {
     font-size: 1.6rem;
     font-family: Arial, sans-serif !important;
     font-style: italic !important;
     line-height: 150%;
}
 p.large-embellished-text {
     font-size: 5rem !important;
     color: #00687f;
     line-height: 150%;
}
 p.medium-embellished-text {
     font-size: 4rem !important;
     color: #00687f;
     line-height: 150%;
}
 p.smaill-embellished-text {
     font-size: 3.25rem !important;
}
 @media screen and (max-width: 1084px) {
     p.large-embellished-text {
         font-size: 4rem !important;
    }
     p.medium-embellished-text {
         font-size: 3rem !important;
    }
     p.small-embellished-text {
         font-size: 2.25rem !important;
    }
}
 p.blog-image-caption {
     color: var(--dark-gray);
     text-align: center;
     font-style: italic;
     letter-spacing: .015em;
}
 p.gray-border {
     font-size: 2.2rem !important;
     border-left: 3px solid var(--light-gray);
     border-right: 3px solid var(--light-gray);
     margin: 45px;
     padding: 30px;
     text-align: center;
     width: 70%;
     margin-left: 15%;
     line-height: 150%;
}
/*used to create a thick gold border on the right side of a div*/
 .yellow-border-right {
     border-right: 5px solid var(--gold);
     padding-right: 25px;
}
 @media screen and (max-width: 1024px) {
     .yellow-border-right {
         border-right: none;
    }
 }
 @media screen and (max-width: 767px) {
     p.gray-border {
         width: 90%;
         margin-left: 5%;
    }

}
/*CREATES LARGE FONTS WITH ABILITY TO ALTERNATE WORD COLORS*/ 

p.bold-feature-font { 
    letter-spacing: .025em;
    margin-top: 0;
    margin-bottom: 0;
    font-family: WF Visual Sans,sans-serif;
    font-size: 6.5rem;
    font-weight: 600;
	font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0;
	text-align: center;
    text-transform: uppercase;
	line-height: 140%; 
}
@media screen and (min-width: 1920px) {
	p.bold-feature-font { 
		font-size: 7.5rem;
	}
}
@media screen and (max-width: 1200px) {
	p.bold-feature-font { 
		font-size: 4.5rem;
	}
}
span.font-slate {
	color: var(--slate);
} 
span.font-teal {
	color: var(--teal);
} 
span.font-green {
	color: var(--green);
} 
span.font-gold {
	color: var(--gold);
} 
span.font-dark-gray {
	color: var(--dark-gray);
} 
/*encases content in a rounded background, can be used as a span class in mid-sentence*/
 .circled-element {
     width: auto;
     padding-left: 35px;
     padding-right: 35px;
     padding-top: 15px;
     padding-bottom: 15px;
     background-size: contain;
     display: inline;
     color: #fff;
     border-radius: 90px;
     font-size: 4.5rem;
     margin-right: 25px;
}
 h3.circled-element-header {
     font-size: 4.5rem !important;
     margin-bottom: 25px;
     display: inline-flex;
}
/*HR variations*/
 hr {
     background: var(--gold);
     height: 2px;
     border-top: none;
     margin-top: 10px;
     margin-bottom: 10px;
}
 hr.thin-gray {
     margin-top: 20px;
     margin-bottom: 20px;
     border: 0;
     height: 1px;
     background: #dedede;
     border-top: none;
}
 hr.gold {
     background: var(--gold);
     height: 2px;
     border-top: none;
}
 hr.green {
     background: var(--green);
     height: 2px;
     border-top: none;
}
 hr.slate {
     background: var(--slate);
     height: 2px;
     border-top: none;
}
 hr.thick-slate {
     background: var(--slate);
     height: 7px;
     border-top: none;
}
 hr.thick-cyan {
     background: var(--cyan);
     height: 7px;
     border-top: none;
}
 hr.cyan {
     background: var(--cyan);
     height: 2px;
     border-top: none;
}
 hr.center {
     margin: auto;
     border-top: none;
}
 hr.left {
     margin-left: 0px;
}
 .vl {
     border-left: 2px solid #00a887;
     height: 250px;
     display: inline-grid;
     float: left;
     margin-left: 5px;
     margin-right: 5px;
     margin-top: 10px;
}
/*Links and Buttons*/
/*s-la-widget list of links from LibAnswers*/
 a:link, a:visited, a:active, .s-la-widget a:link, .s-la-widget a:visited, .s-la-widget a:active {
     text-decoration: underline;
     color: var(--cyan);
}
 a:hover, a:focus, .s-la-widget a:focus, .s-la-widget a:hover {
     background-color: var(--hover-bg);
     color: #333333;
     outline: none;
     text-decoration: none;
}
 a.white:link, a.white:visited, a.white:active, .s-la-widget a.white:link, .s-la-widget a.white:visited, .s-la-widget a.white:active {
     text-decoration: underline;
     color: #fff;
}
 a.white:hover, a.white:focus, .s-la-widget a.white:focus, .s-la-widget a.white:hover {
     background-color: var(--hover-bg);
     color: #003b4c;
     outline: none;
     text-decoration: none;
}
 a.white {
     color: #fff !important;
}
 a.white:hover, a.white:focus {
     color: #003b4c;
}
/* Buttons */
/*white ghost button*/
 a.button {
     display: inline-flex;
     background-color: #fff;
     justify-content: center;
     align-items: center;
     min-height: 4rem;
     padding: 0 2rem;
     font-weight: bold;
     color: var(--cyan);
     font-size: 2rem;
     line-height: 150%;
     text-decoration: none;
     min-width: 280px;
     border-radius: 2rem;
     border: 0.2rem solid var(--cyan);
     margin: 1rem;
     text-align: center;
     margin: 10px;
}
 a.button:hover, a.button:focus {
     background-color: var(--cyan);
     color: #fff;
     border: 0.2rem solid #fff !important;
}
/*gold ghost button*/
 a.gold-button {
     display: inline-flex;
     background-color: var(--gold);
     justify-content: center;
     align-items: center;
     min-height: 4rem;
     padding: 0 2rem;
     font-weight: 700;
     color: #333;
     font-size: 2rem;
     line-height: 150%;
     text-decoration: none;
     min-width: 280px;
     border-radius: 2rem;
     border: 0.2rem solid var(--gold);
     text-align: center;
     margin: 10px;
}
 a.gold-button:hover, a.gold-button:focus {
     background-color: #45b29c !important;
    /*#86D0C1 meets AAA color contrast*;
     #45B29C is Walden button color*/
     border: 0.2rem solid #45b29c;
}
/*Mobile adjusting buttons*/
 @media screen and (max-width: 1280px) {
     a.button, a.gold-button {
         min-height: auto;
         text-align: center;
    }
}
 @media (max-width: 800px) {
     a.button, a.gold-button {
         min-width: 90% !important;
        /*verify mobile size displays properly*/
    }
}
/*Arrow Links Large and Small*/
 a.arrow-link {
     font-size: 2rem;
     color: #00687f;
     font-weight: 600;
     letter-spacing: 0.08rem;
     text-decoration: none !important;
     text-align: center !important;
}
 a.arrow-link:hover, a.arrow-link:focus {
     color: #00a887 !important;
     background-color: transparent;
     text-decoration: underline !important;
}
 a.arrow-link::after {
     content: "\f061";
     font-family: FontAwesome;
     padding-left: 5px;
}
 @media screen and (min-width: 900px) and (max-width: 1280px) {
     a.arrow-link {
         font-size: 1.6rem;
    }
}
 a.small-arrow-underlined-link {
     color: #fff !important;
     padding: 5px;
     font-size: 1.75rem;
}
 a.small-arrow-underlined-link::after {
     content: "\f061";
     font-family: FontAwesome;
     position: absolute;
     padding-left: 10px;
     font-size: 1.6rem;
}
 a.small-arrow-underlined-link:hover, a.small-arrow-underlined-link:focus {
     background-color: transparent;
     text-decoration: none;
     color: #fbb84b !important;
}
/*Ghost Shadow Buttons*/
 a.ghost-shadow {
     display: grid;
     grid-template-columns: 15% 80% 5%;
     padding: 15px;
     width: 95%;
     text-decoration: none;
     font-size: 1.75rem !important;
     color: #00687f !important;
     margin-left: 2%;
     margin-top: 5px;
     margin-bottom: 5px;
}
 a.ghost-shadow .fa {
     display: inline-grid;
     justify-content: right;
     padding-right: 15px;
     font-size: 2.5rem;
     color: #00687f;
}
 a.ghost-shadow:hover, a.ghost-shadow:focus {
     box-shadow: 0px 1px 5px 0px #dedede, 0px 2px 2px 0px #dedede, 0px 3px 1px -2px #dedede !important;
     border-radius: 0px !important;
     background-color: #fff;
}
 i.hdn.fa.fa-angle-right {
     visibility: hidden;
}
 a.ghost-shadow:hover i.hdn.fa.fa-angle-right, a.ghost-shadow:focus i.hdn.fa.fa-angle-right {
     visibility: visible;
}
/*Walden W hover button*/
 a.catalog-sqr-btn {
     display: inline-grid;
     padding: 35px;
     background-image: url(https://libapps.s3.amazonaws.com/accounts/31417/images/walden-w-long.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: left;
     color: #fff !important;
     text-decoration: none !important;
     width: 375px;
     height: 200px;
     font-size: 4rem !important;
     text-align: center;
     line-height: 150%;
     margin: 25px;
     box-shadow: 0px 1px 5px 0px #5a5d66, 0px 2px 2px 0px #5a5d66, 0px 3px 1px -2px #5a5d66;
}
 a.catalog-sqr-btn:hover, a.catalog-sqr-btn:focus {
     background-image: url(https://libapps.s3.amazonaws.com/accounts/31417/images/walden-long-w-inverted.jpg);
}
 @media screen and (max-width: 500px) {
     a.catalog-sqr-btn {
         width: 80%;
         height: auto;
         font-size: 2.25rem !important;
         background-position: center;
    }
}
/*Hidden skip links only visible on focus*/
 a.skip-link {
     position: absolute;
     transform: translateY(-100%);
     background: transparent;
     position: absolute;
     transform: translateY(-50%);
     transition: transform 0.3s;
     z-index: -100;
     color: transparent !important;
}
 a.skip-link:focus {
     transform: translateY(0%);
     z-index: 1000;
     color: #333 !important;
     background-color: var(--hover-bg) !important;
}
/*Blog Card Button*/
 a.blog-link {
     color: #333;
     text-decoration: none;
     background-color: #fff;
     display: inline-grid;
     margin: 20px;
     max-width: 375px;
}
 a.blog-link:hover .blog-card, a.blog-link:focus .blog-card {
     background-color: #003b4c;
}
 .blog-card {
     border: 1px solid #dbdee6;
     max-width: 375px;
     height: 425px;
}
 .blog-card img {
     width: 100%;
     height: 150px;
}
 h3.blog-title {
     padding-left: 20px;
     padding-right: 20px;
     color: #003b4c !important;
}
 a.blog-link p.blog-blurb {
     padding-left: 20px;
     padding-right: 20px;
     text-decoration: none !important;
     color: #333;
     line-height: 150%;
}
 a.blog-link:hover, a.blog-link:hover h3.blog-title, a.blog-link:hover p.blog-blurb, a.blog-link:focus, a.blog-link:focus h3.blog-title, a.blog-link:focus p.blog-blurb {
     color: #fff !important;
}
 @media screen and (max-width: 600px) {
     .blog-card {
         height: auto !important;
    }
}
/*Card Panels Button with Photo and Text*/
/*style the link behavior for entire panel*/
 .media-card-stretch {
     text-decoration: none;
     width: 250px;
     height: 315px;
     margin-bottom: 50px;
     display: inline-grid;
     margin-right: 20px;
     margin-left: 20px;
}
 .media-card-stretch:hover img, .media-card-stretch:focus img {
     text-decoration: none;
}
 a.media-card {
     width: 250px;
     height: 315px;
     text-decoration: none;
     color: black;
}
 .media-card-inner {
     width: 250px;
     height: 315px;
     border: 1px solid #b5c4c3;
     box-shadow: 0px 1px 5px 0px #5a5d66, 0px 2px 2px 0px #5a5d66, 0px 3px 1px -2px #5a5d66 !important;
     border-radius: 0px;
     margin-top: 20px;
     margin-bottom: 20px;
     background-color: white;
     display: grid;
     grid-template-rows: 150px 105px 1fr;
}
 .media-card h3 {
     margin: 10px;
     color: #003b4c;
     font-size: 2rem;
     text-align: center;
     line-height: 140%;
}
 .media-card-bg-img {
     display: block;
     width: 100%;
     height: 150px;
     object-fit: cover;
     vertical-align: center;
}
 a.media-card:hover , a.media-card:focus {
     background-color: transparent !important;
}
 a.media-card:hover .media-card-inner , a.media-card:focus .media-card-inner {
     background-image: linear-gradient(45deg, #008ea9, #00687f, #003b4c, #00687f, #008ea9);
     !important;
}
 a.media-card:hover .media-card-inner h3, a.media-card:focus .media-card-inner h3 {
     color: #fff !important;
}
 a.media-card:hover .media-card-inner p, a.media-card:focus .media-card-inner p {
     color: #fff !important;
}
 @media screen and (max-width: 800px) {
     .media-card-stretch {
         display: inline-block;
         margin-left: 0px;
         height: 100px;
         width: 250px;
         margin-top: 10px;
    }
     .media-card-bg-img {
         display:none;
    }
     .media-card-inner {
         width: 250px;
         height: 150px;
         grid-template-rows: 2fr 1fr;
    }
     .media-card-inner h3 {
         font-size: 1.75rem;
    }
}
/*Rise Module Card Buttons with Gold Border*/
 .card-link-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
}
 @media screen and (min-width: 1921px) {
     .card-link-grid {
         grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
 @media screen and (max-width: 1300px) {
     .card-link-grid {
         grid-template-columns: 1fr 1fr;
    }
}
 @media screen and (max-width: 900px) {
     .card-link-grid {
         grid-template-columns: 1fr;
    }
}
 a.card-link-rise-module {
     background-color: #fff;
     box-shadow: 0px 1px 5px 0px #5a5d66, 0px 2px 2px 0px #5a5d66, 0px 3px 1px -2px #5a5d66 !important;
     border-radius: 0px;
     text-decoration: none;
     color: #333;
     display: inline-block;
     margin: 5%;
     height: 480px;
     display: grid;
     grid-template-rows: 180px auto 1fr auto;
}
 a.card-link-rise-module h3 {
     margin-top: 0px;
     font-size: 2.25rem !important;
     color: var(--slate) !important;
     text-align: center;
     letter-spacing: .035ch;
     margin: 5px;
     align-items: center;
}
 a.card-link-rise-module p {
     padding: 10px;
}
 .card-link-rise-module img {
     height: 180px;
     width: 100%;
     border-bottom: 15px solid var(--gold);
}
 a.card-link-rise-module:hover, a.card-link-rise-module:focus, a.card-link-rise-module:hover, a.card-link-rise-module:focus, a.card-link-rise-module:hover h3, a.card-link-rise-module:focus h3, a.card-link-rise-module:hover h3, a.card-link-rise-module:focus h3, a.card-link-rise-module:hover p, a.card-link-rise-module:focus p, a.card-link-rise-module:hover p, a.card-link-rise-module:focus p {
     color: #fff !important;
     background-color: #00657c !important;
}
 a.card-link-rise-module:hover img, a.card-link-rise-module:focus img {
     text-decoration: none;
     opacity: 0.5;
}
 @media screen and (min-width: 1921px) {
     a.card-link-rise-module {
         height: 500px;
    }
}
 @media screen and (min-width: 1301px) and (max-width: 1440px) {
     a.card-link-rise-module {
         height: 500px;
    }
}
 @media screen and (max-width: 900px) {
     a.card-link-rise-module {
         height: auto;
         grid-template-rows: auto auto auto;
    }
     a.card-link-rise-module img {
         display: none;
    }
}
/*Plain card to mimic rise-module button height for including quotes*/
.rise-quote-box  {
  height: 480px;
  background-color: #163a4a; 
  color: #fff; 
  text-align: center; 
  padding: 35px; 
  margin: 5%; 
  align-content: center; 
font-size: 1.8rem; 
}
   @media screen and (min-width: 1921px) {
   .rise-quote-box  {
         height: 500px;
    }
}
 @media screen and (min-width: 1301px) and (max-width: 1440px) {
    .rise-quote-box  {
         height: 500px;
    }
}
 @media screen and (max-width: 900px) {
    .rise-quote-box  {
         height: auto;
    }
 
}
/*Used to filter Rise Module Cards*/
 .filterDiv {
     display: none;
}
 .show-button-filter {
     display: block;
}
 .button-filter {
     border: none;
     outline: none;
     padding: 12px 16px;
     background-color: #f1f1f1;
     cursor: pointer;
     margin: 3px;
}
 .button-filter:hover {
     background-color: #00687f;
     color: #fff;
}
 .button-filter:focus {
     background-color: #003b4c;
     color: #fff !important;
}
/*ICON BUTTONS*/
 a.icon-btn-adj {
     border: 1px solid var(--slate);
     width: 85%;
     height: 150px;
     background-color: #fff;
     color: var(--slate) !important;
     padding: 20px;
     display: inline-grid;
     text-align: center;
     text-decoration: none !important;
     font-size: 2rem;
     margin: 10px;
}
 a.icon-btn-adj:hover, a.icon-btn-adj:focus, a.gold:hover, a.gold:focus, a.slate:hover, a.slate:focus {
     background-color: var(--cyan);
     border: 1px solid #fff;
     color: #fff !important;
}
 @media screen and (max-width: 991px) {
     a.icon-btn-adj {
         height: auto;
    }
}
 @media screen and (max-width: 600px) {
     a.icon-btn-adj {
         width: 100%;
    }
}
/*background-color-variances*/
 a.gold {
     background-color: var(--gold) !important;
     font-weight: bold;
}
 a.gold:focus, a.gold:hover {
     background-color: var(--slate) !important;
}
 a.cyan {
     background-color: var(--cyan) !important;
     color: #fff !important;
}
 a.cyan:focus, a.cyan:hover {
     background-color: var(--slate) !important;
}
 a.slate {
     background-color: var(--slate) !important;
     color: #fff !important;
}
 a.slate:focus, a.slate:hover {
     background-color: var(--cyan) !important;
}
 a.dark-gray {
     background-color: var(--dark-gray) !important;
     color: #fff !important;
}
 a.dark-gray:focus, a.dark-gray:hover {
     background-color: var(--slate) !important;
}
 a.icon-btn-adj:hover .fa, a.icon-btn-adj:focus .fa {
     color: #fff !important;
}
/*fontawesome color options for icon buttons, but can be used anywhere*/
 .gold-fa {
     color: var(--gold);
}
 .slate-fa {
     color: var(--slate);
}
 .cyan-fa {
     color: var(--cyan);
}
 .teal-fa {
     color: var(--teal);
}
 .green-fa {
     color: var(--green);
}
 .light-gray-fa {
     color: var(--light-gray);
}
 .dark-gray-fa {
     color: var(--dark-gray);
}
 .large-fa {
     font-size: 6rem;
     padding-bottom: 15px;
}
 .med-fa {
     font-size: 3.5rem;
     padding-bottom: 15px;
}
/*ICON BUTTON GRIDS, 2x2, 3x, 4x indicate how many buttons will appear in a row*/
 .icon-btn-2x2 {
     padding: 25px;
     display: grid;
     justify-items: center;
     grid-template-columns: 1fr 1fr;
}
 .icon-btn-3x {
     padding: 25px;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     justify-items: center;
}
 .icon-btn-4x {
     padding: 25px;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     justify-items: center;
}
 @media screen and (max-width: 1200px) {
     .icon-btn-3x, .icon-btn-4x {
         grid-template-columns: 1fr 1fr;
    }
}
 @media screen and (max-width: 600px) {
     .icon-btn-3x, .icon-btn-4x {
         grid-template-columns: 1fr;
    }
}
/*Cards with images and a border*/
a.card-link-img {
     background-color: #fff;
     box-shadow: 0px 1px 5px 0px #5a5d66, 0px 2px 2px 0px #5a5d66, 0px 3px 1px -2px #5a5d66 !important;
     border-radius: 0px;
     text-decoration: none;
     color: #333;
     display: inline-block;
     margin: 5%;
     height: 375px;
	width: 375px; 
     display: grid;
}
 a.card-link-img h3 {
     margin-top: 0px;
     font-size: 2.25rem !important;
     color: var(--slate) !important;
     text-align: center;
     letter-spacing: .035ch;
     margin: 5px;
     align-items: center;
}

 .card-link-img img {
     height: 225px;
     width: 100%;
     border-bottom: 15px solid var(--gold);
}
 a.card-link-img:hover, a.card-link-img:focus, a.card-link-img:hover, a.card-link-img:focus, a.card-link-img:hover h3, a.card-link-img:focus h3, a.card-link-img:hover h3, a.card-link-img:focus h3, a.card-link-img:hover p, a.card-link-img:focus p, a.card-link-img:hover p, a.card-link-img:focus p {
     color: #fff !important;
     background-color: #00657c !important;
}
 a.card-link-img:hover img, a.card-link-img:focus img {
     text-decoration: none;
     opacity: 0.5;
}

 @media screen and (max-width: 900px) {
     a.card-link-img {
         height: auto;
width: 90%;
margin-left: 5%; 
    }
     a.card-link-img img {
         display: none;
    }
}
a.offset-icon-btn  {
    width: 65%;
	margin-left: 17.5%;
display: grid;
min-height: 150px; 
    grid-template-columns: 15%  83%;
grid-column-gap: 2%;
    padding: 5px;
    color: #fff;
    border-radius: 15px;
text-decoration: none; 
margin-top: 20px; 
margin-bottom: 20px; 
}
a.offset-icon-btn h3 {
font-family: var(--default); 
}
a.offset-icon-btn .fa {
    font-size: 6rem;
    justify-content: center;
    display: grid;
    align-self: center;
    align-content: center;
}
.offset-icon  {
    border: 2px solid #fff;
height: 80%; 
margin-top: 10%; 
    border-radius: 15px;
    margin-right: 10px;
margin-left: -25%;
box-shadow: 4px 3px 6px 0px black; 
display: grid; 
}
a.offset-slate, .offset-slate {
	background-color: var(--slate);
} 
a.offset-cyan, .offset-cyan {
	background-color: var(--cyan);
} 
a.offset-dark-gray, .offset-dark-gray {
	background-color: var(--dark-gray);
} 

a.offset-icon-btn:hover,  a.offset-icon-btn:focus,
a.offset-icon-btn:hover .offset-icon, a.offset-icon-btn:focus .offset-icon,  
a.offset-icon-btn:hover h3, a.offset-icon-btn:focus h3,
a.offset-icon-btn:hover p, a.offset-icon-btn:focus p
a.offset-icon-btn:hover fa, a.offset-icon-btn:focus fa {
background-color: var(--hover-bg) !important;
color: var(--slate) !important; 
}
a.offset-icon-btn:hover,  a.offset-icon-btn:focus,
a.offset-icon-btn:hover .offset-icon, a.offset-icon-btn:focus .offset-icon {
border: 2px solid var(--slate); 
}
@media screen and (max-width: 1280px) { 
a.offset-icon-btn  {
	width: 80%; 
	margin-left: 10%; 
}
}
@media screen and (max-width: 700px) { 
a.offset-icon-btn .fa {
	font-size: 3rem;
}
} 
/*WRITING CENTER HOMEPAGE BUTTONS*/
.grid-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
}

a.grid-button {
min-height: 150px; 
display: grid;
grid-template-columns: 90% 10%; 
text-align: center; 
text-decoration: none !important;
line-height: 150%;  
padding: 15px;
font-size: 2.5rem;
color: #fff !important; 
align-items: center;
display: inline-grid;
}
a.grid-button:hover, a.grid-button:focus {
color: var(--slate) !important;
} 

#writing-center-landing {
display: grid;
grid-template-columns: 60% 40%;
}
#writing-center-left {
    background-image: linear-gradient(141deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .85),rgba(33,35,34,0) 100%), url(https://libapps.s3.amazonaws.com/accounts/31417/images/laptop-tabletop-crumpled-postit.png);
    background-position:center;
    background-size: cover;
padding: 50px;
display: grid;
grid-template-rows: 2fr 1fr; 
grid-row-gap: 50px;
}
@media screen and (max-width: 991px) { 
#writing-center-landing {
display: block;
}
}
/*Customizable and stackable elements*/
/*Other Elements*/
/*TABBED box styling - widths should be added on-page with widgets*/
 .s-lib-jqtabs ul.nav.nav-tabs li {
     min-height: 100px;
}
 .s-lib-jqtabs .nav-tabs > li {
     margin-bottom: -2px;
}
 .s-lib-jqtabs .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
     text-decoration: none;
     color: var(--slate);
     font-size: 2.5rem !important;
     border-top: 5px solid var(--cyan);
     min-height: 100px;
     margin-bottom: -3px;
}
 .s-lib-jqtabs .nav-tabs > li > a, .nav-tabs > li > a:focus, .nav-tabs > li > a:hover {
     text-decoration: none;
     color: var(--cyan);
     font-size: 2.5rem !important;
}
 .s-lib-jqtabs .nav-tabs {
     border-bottom: 2px solid var(--light-gray);
}
 .s-lib-jqtabs .nav > li > a:focus, .s-lib-jqtabs .nav > li > a:hover {
     text-decoration: none;
     height: 95px;
     background-color: var(--hover-bg);
     outline: none !important;
}
 .s-lib-jqtabs .nav-pills .list-group-item:last-child {
     padding-bottom: 0px !important;
}
 .s-lib-jqtabs div.tab-content {
     padding: 10px;
     border-bottom: 2px solid var(--light-gray);
     border-left: 2px solid var(--light-gray);
     border-right: 2px solid var(--light-gray);
}
 @media screen and (max-width: 991px) {
     .s-lib-jqtabs .nav-tabs > li > a, .s-lib-jqtabs .nav-tabs > li > a:focus, .s-lib-jqtabs .nav-tabs > li > a:hover, .s-lib-jqtabs .nav-tabs > li.active > a, .s-lib-jqtabs .nav-tabs > li.active > a:focus, .s-lib-jqtabs .nav-tabs > li.active > a:hover {
         font-size: 2.25rem !important;
         text-align: center;
    }
}
 @media screen and (max-width: 767px) {
     .s-lib-jqtabs .nav-tabs > li > a, .s-lib-jqtabs .nav-tabs > li > a:focus, .s-lib-jqtabs .nav-tabs > li > a:hover, .s-lib-jqtabs .nav-tabs > li.active > a, .s-lib-jqtabs .nav-tabs > li.active > a:focus, .s-lib-jqtabs .nav-tabs > li.active > a:hover {
         font-size: 1.8rem !important;
    }
}
/*Accordions*/
 .panel {
     box-shadow: none;
}
 .panel-group .panel {
     border-radius: 0px;
}
 .panel-default {
     margin-bottom: 0px !important;
     border: none;
}
 .panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body {
     border: none;
}
 .panel-default > .panel-heading {
     background-color: transparent;
     box-shadow: none;
     width: 100% !important;
     padding-top: 15px !important;
     padding-left: 25px;
     margin: 0px !important;
}
 .panel-heading h3.panel-title {
     display: inline-block;
     font-family: noto-serif, serif;
     font-size: 2rem !important;
     font-weight: 500;
     color: #003b4c !important;
}
 .panel-heading h4.panel-title {
     display: inline-block;
     font-family: noto-serif, serif;
     font-size: 2.25rem;
     font-weight: 500;
     color: #003b4c !important;
}
 .panel-title a {
     text-decoration: none !important;
     font-weight: 500;
     color: #003b4c !important;
}
 .panel-title a::before {
     font-family: FontAwesome;
     margin-right: 20px;
}
 .panel-title a[aria-expanded="false"]::before {
     content: "\f067";
}
 .panel-title a[aria-expanded="true"]::before {
     content: "\f068";
}
 .panel-body {
     padding: 10px;
}
 .panel-body .s-lib-box.s-lib-box-std.s-lib-floating-box {
     background-color: transparent !important;
     box-shadow: none !important;
}
 .panel-default > .panel-heading {
     background: transparent !important;
     width: 100%;
}
 .panel.panel-default:nth-child(odd) {
     background: #dbdee0;
}
 .panel.panel-default:last-child {
     border-bottom: 1px solid #dbdee0;
}
 .collapse.in {
     border-top: none;
}
 @media screen and (max-width: 767px) {
     .panel-heading h3.panel-title {
         font-size: 1.6rem !important;
    }
}
/*new accordion code to link entire panel*/
 .panel-default a[aria-expanded="false"] .panel-title::before {
     content: "\f067";
     display: inline-block;
     font-family: "FontAwesome";
     margin-right: 20px;
     margin-left: 10px;
}
 .panel-default a[aria-expanded="true"] .panel-title::before {
     content: "\f068";
     display: inline-block;
     font-family: "FontAwesome";
     margin-right: 20px;
     margin-left: 10px;
}
 .panel-heading {
     padding: 15px 15px 10px 15px;
}
 .panel-default a:hover .panel-heading, .panel-default a:focus .panel-heading {
     background-color: var(--hover-bg);
}
/*hides libguides box title when mapped to accordion*/
 .panel-group h2.s-lib-box-title {
     display: none;
}
 .panel-group .s-lib-box {
     margin-bottom: 0px !important;
}
/*Design Elements*/
/*light gray box with border*/
.gray-callout {
background:#eee;
border:1px solid #ccc;
padding:5px 10px;
}
/*slate row for creates a slate box, the h2 or h3 header will have a thick gold bar ABOVE the header*/
 .slate-row {
     background-color: var(--slate);
     font-size: 1.8rem;
     color: #fff;
     line-height: 180%;
     padding: 25px;
     overflow-x: hidden;
     margin-top: 20px;
     margin-bottom: 50px;
}
 .slate-row ol {
     margin-left: 3%;
}
 .slate-row h2 {
     color: #fff !important;
}
 .slate-row h2::before {
     content: "";
     display: block;
     height: 5px;
     border-top: 8px solid var(--gold);
     width: 10%;
     margin-bottom: 10px;
}
 .slate-row h2::after {
     display: none;
}
 .slate-row h3 {
     color: #fff !important;
}
 .slate-row h3::before {
     content: "";
     display: block;
     height: 5px;
     border-top: 8px solid var(--gold);
     width: 10%;
     margin-bottom: 10px;
}
 .slate-row h3::after {
     display: none;
}
 .slate-row a {
     color: #fff !important;
}
 .slate-row a:focus, .slate-row a:hover {
     color: var(--slate) !important;
}
 .slate-row a.button {
     color: var(--cyan) !important;
}
 .slate-row a.button:focus, .slate-row a.gold-button:hover {
     background-color: var(--cyan);
     color: #fff !important;
}
 .slate-row a.gold-button {
     color: #333 !important;
}
 .slate-row a.gold-button:focus, .slate-row a.gold-button:hover {
     background-color: #45b29c !important;
     border: 0.2rem solid #45b29c;
}
/*SHORT GRAY ROW UPPER BORDER 0 will have a thick slate border at the top of the p element - use only one p element - Generally used for things like definitions*/
 .short-gray-row {
     background-color: var(--light-gray);
     font-size: 2rem;
     line-height: 180%;
     padding: 25px;
     overflow-x: hidden;
     width: 90%;
}
 .short-gray-row p {
     width: 90%;
     margin-left: 5%;
}
 .short-gray-row p::before {
     content: "";
     display: block;
     height: 5px;
     border-top: 8px solid var(--slate);
     width: 10%;
     margin-bottom: 10px;
}
 @media screen and (max-width: 991px) {
     .short-gray-row {
         font-size: 1.75rem;
    }
}
/*STACKABLE DIVS*/
/*Used to create color backgrounds, adjustable cards, etc.*/
/*Stackable classes to create color block backgrounds*/
/*COLOR CHOICES*/
 .slate-bg {
     background-color: var(--slate);
     padding: 25px;
     margin-top: 50px;
     margin-bottom: 50px;
}
 .teal-bg {
     background-color: #00687f;
     padding: 25px;
     margin-top: 50px;
     margin-bottom: 50px;
}
.cyan-bg {
background-color: #008ea9;
}
 .dark-gray-bg {
     background-color: var(--dark-gray);
     padding: 25px;
     margin-top: 50px;
     margin-bottom: 50px;
}
 .light-gray-bg {
     background-color: #dedede;
     padding: 25px;
     margin-top: 50px;
     margin-bottom: 50px;
}
 .white-bg {
     background-color: #fff;
     padding: 25px;
     margin-top: 50px;
     margin-bottom: 50px;
}
 .white-bg-85-opacity {
     background-color: rgba(255, 255, 255, .85);
	 padding: 25px;
}
 .gradient-bg {
     background-image: linear-gradient( 45deg, var(--slate), var(--slate), var(--cyan), var(--teal) );
     padding: 25px;
     margin-top: 50px;
     margin-bottom: 50px;
}
 .gold-bg {
     background-color: rgba(253, 183, 26, .8);
     padding:30px;
}
 .gold-bg p, .gold-bg li {
     color: black;
}
 .gold-bg h2:after {
     background-color: var(--green);
}
/*TO BE USED WITH BACKGROUND IMAGES WHEN IN CONJUNCTION GRID ELEMENTS*/
 .no-margin {
     margin-top: 0px !important;
     margin-bottom: 0px !important;
}
 .half-margin {
     margin-top: 25px !important;
     margin-bottom: 40px !important;
}
/*ADJUSTING TEXT, LINKS, and BUTTONS FOR BACKGROUNDS*/
 .slate-bg p, .slate-bg li, .slate-bg body, .slate-bg h3, .slate-bg h4, .slate-bg a, .teal-bg p, .teal-bg li, .teal-bg body, .teal-bg h3, .teal-bg h4, .teal-bg a, .dark-gray-bg p, .dark-gray-bg li, .dark-gray-bg body, .dark-gray-bg h3, .dark-gray-bg h4, .dark-gray-bg a, .gradient-bg p, .gradient-bg li, .gradient-bg body, .gradient-bg h3, .gradient-bg h4, .gradient-bg a, .slate-bg td, .teal-bg td, .dark-gray td, .gradient-bg td {
     color: #fff !important;
}
 .slate-bg a:hover, .slate-bg a:focus, .teal-bg a:hover, .teal-bg a:focus, .dark-gray-bg a:hover, .dark-gray-bg a:focus, .gradient-bg a:hover, .gradient-bg a:focus {
     color: var(--slate) !important;
}
 .slate-bg a.icon-btn-adj, .teal-bg a.icon-btn-adj, .dark-gray-bg a.icon-btn-adj, .gradient-bg a.icon-btn-adj, .slate-bg a.gold-button, .teal-bg a.gold-button, .dark-gray-bg a.gold-button, .gradient-bg a.gold-button {
     color: var(--slate) !important;
}
 .slate-bg a.icon-btn-adj:hover, .teal-bg a.icon-btn-adj:hover, .dark-gray-bg a.icon-btn-adj:hover, .gradient-bg a.icon-btn-adj:hover, .slate-bg a.icon-btn-adj:focus, .teal-bg a.icon-btn-adj:focus, .dark-gray-bg a.icon-btn-adj:focus, .gradient-bg a.icon-btn-adj:focus, .slate-bg a.button:hover, .teal-bg a.button:hover, .dark-gray-bg a.button:hover, .gradient-bg a.button:hover, .slate-bg a.button:focus, .teal-bg a.button:focus, .dark-gray-bg a.button:focus, .gradient-bg a.button:focus {
     color: #fff !important;
}
 .slate-bg a.blog-link p.blog-blurb, .teal-bg a.blog-link p.blog-blurb, .dark-gray-bg a.blog-link p.blog-blurb, .gradient-bg a.blog-link p.blog-blurb {
     color: #333 !important;
}
 .slate-bg a.blog-link:hover p.blog-blurb, .slate-bg a.blog-link:focus p.blog-blurb, .teal-bg a.blog-link:hover p.blog-blurb, .teal-bg a.blog-link:focus p.blog-blurb, .dark-gray-bg a.blog-link:hover p.blog-blurb, .dark-gray-bg a.blog-link:focus p.blog-blurb, .gradient-bg a.blog-link:hover p.blog-blurb, .gradient-bg a.blog-link:focus p.blog-blurb {
     color: #fff !important;
}
 .slate-bg a.button:hover, .slate-bg a.button:focus, .teal-bg a.button:hover, .teal-bg a.button:focus, .dark-gray-bg a.button:hover, .dark-gray-bg a.button:focus, .gradient-bg a.button:hover, .gradient-bg a.button:focus {
     border: 2px solid #fff;
}
 .slate-bg a.button, .teal-bg a.button, .dark-gray-bg a.button, .gradient-bg a.button {
     color: var(--cyan) !important;
}
 .slate-bg a.button:hover, .slate-bg a.button:focus, .teal-bg a.button:hover, .teal-bg a.button:focus, .dark-gray-bg a.button:hover, .dark-gray-bg a.button:focus, .gradient-bg a.button:hover, .gradient-bg a.button:focus {
     background-color: var(--cyan);
     color: #fff !important;
}
 .slate-bg a.gold-button, .teal-bg a.gold-button, .dark-gray-bg a.gold-button, .gradient-bg a.gold-button {
     color: #333 !important;
}
 .slate-bg a.gold-button:hover, .slate-bg a.gold-button:focus, .teal-bg a.button:hover, .teal-bg a.gold-button:focus, .dark-gray-bg a.gold-button:hover, .dark-gray-bg a.gold-button:focus, .gradient-bg a.gold-button:hover, .gradient-bg a.gold-button:focus {
     background-color: #45b29c !important;
     border: 0.2rem solid #45b29c;
}
 .white-bg p {
     color: #333 !important;
}
 .white-bg h3, .white-bg h2 {
     color: var(--slate) !important;
}
 .slate-bg p.gold, .teal-bg p.gold, .dark-gray-bg p.gold, .light-gray-bg p.gold, .gradient-bg p.gold, .white-bg p.gold {
     color: var(--gold) !important;
}
/*BACKGROUND BORDER COLORS to be combined with background colors*/
 .slate-border-bg {
     border: 5px solid var(--slate);
}
.slate-border {
border: 2px solid var(--slate); 
padding: 15px;
}

.border-slate {
border-color: var(--slate); 
}
.border-cyan {
border-color: var(--cyan); 
}
.border-teal {
border-color: var(--teal); 
}
.border-green {
border-color: var(--green); 
}
.border-gold {
border-color: var(--gold); 
}
.border-dark-gray {
border-color: var(--dark-gray); 
}
.border-light-gray {
border-color: var(--light-gray); 
}
.border-1px {
	border-width: 1px;
	border-style: solid;
	margin-bottom: 25px;
}

.border-3px {
	border-width: 3px;
	border-style: solid;
	margin-bottom: 25px;
}
.border-shadow-dark-gray {
    box-shadow: 1px 1px 6px 0px var(--dark-gray);
}
.border-shadow-mixed-gray {
    box-shadow: 5px 5px 10px 1px var(--light-gray), 1px 1px 5px 0px var(--dark-gray);
}
.border-shadow-light-gray {
    box-shadow: 3px 3px 8px 1px var(--light-gray);
}
h2.header-slate-bg, h3.header-slate-bg, h4.header-slate-bg {
background-color: var(--slate); 
color: #fff !important;
margin-top: 0px !important; 
padding-left: 5px;
}
h2.header-cyan-bg, h3.header-cyan-bg, h4.header-cyan-bg  {
background-color: var(--cyan); 
color: #fff !important;
margin-top: 0px !important; 
padding-left: 5px;
}
h2.header-teal-bg, h3.header-teal-bg, h4.header-teal-bg   {
background-color: var(--teal); 
color: #fff !important;
margin-top: 0px !important; 
padding-left: 5px;
font-weight: bold; 
}
h2.header-green-bg, h3.header-green-bg, h4.header-green-bg  {
background-color: var(--green); 
margin-top: 0px !important; 
padding-left: 5px;
color: #000 !important;
font-weight: bold;
}
h2.header-gold-bg, h3.header-gold-bg, h4.header-gold-bg {
background-color: var(--gold); 
margin-top: 0px !important; 
padding-left: 5px;
}
h2.header-dark-gray-bg, h3.header-dark-gray-bg, h4.header-dark-gray-bg  {
background-color: var(--dark-gray); 
color: #fff !important;
margin-top: 0px !important; 
padding-left: 5px;
}
h2.header-light-gray-bg, h3.header-light-gray-bg, h4.header-light-gray-bg   {
background-color: var(--light-gray); 
margin-top: 0px !important; 
padding-left: 5px;
color: #000 !important; 
}
.border-1px p, .border-3px p, 
.border-1px li, .border-3px li {
padding-left: 15px; 
padding-right: 15px; 
}	

 .gold-border-bg {
     border: 5px solid var(--gold);
}
 .green-border-bg {
     border: 5px solid var(--green);
}
 .left-gold-border {
     border-left: 20px solid var(--gold);
}
 .left-slate-border-bg {
     border-left: 20px solid var(--slate);
}
 @media screen and (min-width: 1025px) {
     .div-left-gold-border {
         border-left: 2px solid var(--gold);
         padding-left: 50px;
    }
}
 @media screen and (max-width: 1024px) {
     .div-left-gold-border {
         border-top: 2px solid var(--gold);
         padding-top: 25px;
         margin-top: 25px;
    }
}
 @media screen and (min-width: 1025px) {
     .div-left-slate-border {
         border-left: 5px solid var(--slate);
         padding-left: 50px;
    }
}
 @media screen and (max-width: 1024px) {
     .div-left-slate-border {
         border-top: 5px solid var(--slate);
         padding-top: 25px;
         margin-top: 25px;
    }
}
/*Background sizes*/
 .bg-span {
     width: 150%;
     margin-left: -25%;
     padding-left: 25%;
     padding-right: 25%;
}
 .bg-80-center {
     width: 80%;
     margin-left: 10%;
     padding: 25px;
     margin-top: 50px;
     margin-bottom: 50px;
}
 .bg-80-left {
     width: 80%;
     padding: 25px;
     margin-top: 50px;
     margin-bottom: 50px;
}
 .bg-75-center {
     padding: 25px;
     margin-top: 50px;
     margin-bottom: 50px;
     width: 75%;
     margin-left: 12.5%;
}
 .bg-75-left {
     padding: 25px;
     margin-top: 50px;
     margin-bottom: 50px;
     width: 75%;
}
 .bg-66-center {
     width: 66%;
     margin-left: 16.5%;
}
 .bg-66-left {
     width: 66%;
}
 .bg-66-right{
     width: 66%;
     margin-left: 34%;
}
 .bg-50-center {
     width: 50%;
     margin-left: 25%;
}
 .bg-50-left {
     width: 50%;
}
 @media screen and (max-width: 1240px) {
     .bg-50-left, .bg-66-left, .bg-50-center, .bg-66-center, .bg-66-center {
         margin-left: 10%;
         width: 80%;
         padding: 5px;
    }
     .bg-66-right {
         margin-left: 20%;
         width: 80%;
    }
     .bg-80-left, .bg-80-center {
         margin-left: 2.5%;
         width: 95%;
    }
}
 @media screen and (max-width: 991px) {
     .bg-50-left, .bg-66-left, .bg-50-center, .bg-66-center, .bg-80-left, .bg-80-center {
         margin-left: 2.5%;
         width: 95%;
         padding: 5px;
    }
     .bg-66-right {
         margin-left: 5%;
         width: 95%;
    }
}
/*Adds Short Text in slate box - used at top of colored backgrounds */
 p.banner-callout {
     background-color: var(--slate);
     padding: 15px;
     color: #fff;
     display: table;
     font-weight: bold;
     letter-spacing: 0.75ch;
     font-size: 2rem;
     justify-content: center;
     margin: auto;
     margin-bottom: 25px;
     font-variant: small-caps;
}
/*LAYOUT GRIDS*/
 .split-grid-50-50 {
     display: grid;
     grid-template-columns: 48% 48%;
     grid-column-gap: 4%;
     padding: 20px;
     grid-row-gap: 25px;
}
 .split-grid-40-60 {
     display: grid;
     grid-template-columns: 38% 58%;
     grid-column-gap: 4%;
     padding: 20px;
     grid-row-gap: 25px;
}
 .split-grid-60-40 {
     display: grid;
     grid-template-columns: 58% 38%;
     grid-column-gap: 4%;
     padding: 20px;
     grid-row-gap: 25px;
}
 .split-grid-25-75 {
     display: grid;
     grid-template-columns: 23% 73%;
     grid-column-gap: 4%;
     padding: 20px;
     grid-row-gap: 25px;
}
 .split-grid-75-25 {
     display: grid;
     grid-template-columns: 73% 23%;
     grid-column-gap: 4%;
     padding: 20px;
     grid-row-gap: 25px;
}
 .split-grid-30-70 {
     display: grid;
     grid-template-columns: 30% 68%;
     grid-column-gap: 2%;
     grid-row-gap: 25px;
}
 .split-grid-70-30 {
     display: grid;
     grid-template-columns: 68% 30%;
     grid-column-gap: 2%;
     grid-row-gap: 25px;
}
 .split-grid-20-80 {
     display: grid;
     grid-template-columns: 20% 78%;
     grid-column-gap: 2%;
     grid-row-gap: 25px;
}
 .split-grid-80-20 {
     display: grid;
     grid-template-columns: 78% 20%;
     grid-column-gap: 2%;
     grid-row-gap: 25px;
}
 .split-grid-center {
     align-items: center;
}
 .split-grid-three-columns {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-column-gap: 50px;
}
 @media screen and (max-width: 1024px) {
     .split-grid-50-50, .split-grid-60-40, .split-grid-40-60, .split-grid-75-25, .split-grid-25-75, .split-grid-70-30, .split-grid-three-columns {
         display: block;
    }
}
/*50-50 split grid with optional two-toned background colors*/
 .split-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-column-gap: 20px;
     grid-row-gap: 20px;
     align-items: center;
     padding: 20px;
}
 .split-1 {
     background-color: var(--slate);
     padding: 50px;
}
 .split-2 {
     background-color: var(--cyan);
     padding: 50px;
}
 .split-1 a, .split-1 li .split-1 p, .split-1 h3, .split-2 a, .split-2 li, .split-1 p, .split-2 h3 {
     color: #fff !important;
}
 .split-1 a:hover, .split-1 a:focus, .split-2 a:hover, .split-2 a:focus {
     color: var(--slate) !important;
}

/*Three "Card" grids - to be used on backgrounds or photos*/
/*ROW WITH CONTENT BOXES - combine with class for background color*/
 .three-cols-solid {
     display: grid;
     grid-template-columns: 30% 30% 30%;
     grid-column-gap: 5%;
     padding: 80px;
     grid-row-gap: 2.5rem;
}
/*IMAGE ID ADDED TO PAGE*/
 .three-cols-img {
     display: grid;
     grid-template-columns: 30% 30% 30%;
     grid-column-gap: 5%;
     padding: 80px;
     background-repeat: no-repeat;
     background-size: cover;
}
/*OPTIONAL TITLE AT TOP*/
 .three-cols-img h3 {
     grid-area: 1 / 1 / span 1 / span 3;
     text-align: center;
     margin-bottom: 20px;
     font-size: 5rem;
}
 .three-cols-solid h3 {
     grid-area: 1 / 1 / span 1 / span 3;
     text-align: center;
     margin-bottom: 20px;
     font-size: 5rem;
}
 @media screen and (max-width: 1024px) {
     .three-cols-img, .three-cols-solid {
         grid-template-columns: 100%;
         grid-row-gap: 2%;
    }
     .three-cols-solid h3, .three-cols-img h3 {
         grid-area: 1;
    }
}
/*COLUMNS - 3 equal columns*/
 .col-1, .col-2, .col-3 {
     background-color: #fff;
     border: 1px solid;
     padding: 15px;
}
 .three-cols-solid .col-1 p, .three-cols-solid .col-2 p, .three-cols-solid .col-3 p, .three-cols-img .col-1 p, .three-cols-img .col-2 p, .three-cols-img.col-3 p, .three-cols-solid .col-1 li, .three-cols-solid .col-2 li, .three-cols-solid .col-3 li, .three-cols-img .col-1 li, .three-cols-img .col-2 li, .three-cols-img.col-3 li {
     color: #333 !important;
}
 .three-cols-solid .col-1 a, .three-cols-solid .col-2 a, .three-cols-solid .col-3 a, .three-cols-img .col-1 a, .three-cols-img .col-2 a, .three-cols-img.col-3 a {
     color: var(--cyan) !important;
}
 .three-cols-solid .col-1 a:hover, .three-cols-solid .col-2 a:hover, .three-cols-solid .col-3 a:hover, .three-cols-img .col-1 a:hover, .three-cols-img .col-2 a:hover, .three-cols-img.col-3 a:hover, .three-cols-solid .col-1 a:focus, .three-cols-solid .col-2 a:focus, .three-cols-solid .col-3 a:focus, .three-cols-img .col-1 a:focus, .three-cols-img .col-2 a:focus, .three-cols-img.col-3 a:focus {
     color: #333 !important;
}
 .three-cols-solid .col-1 a.button:hover, .three-cols-solid .col-2 a.button:hover, .three-cols-solid .col-3 a.button:hover, .three-cols-img .col-1 a.button:hover, .three-cols-img .col-2 a.button:hover, .three-cols-img.col-3 a.button:hover, .three-cols-solid .col-1 a.button:hover, .three-cols-solid .col-2 a.button:focus, .three-cols-solid .col-3 a.button:focus, .three-cols-img .col-1 a.button:focus, .three-cols-img .col-2 a.button:focus, .three-cols-img.col-3 a.button:focus {
     color: #fff !important;
}
 .three-cols-solid .col-1 a.gold-button, .three-cols-solid .col-2 a.gold-button, .three-cols-solid .col-3 a.gold-button, .three-cols-img .col-1 a.gold-button, .three-cols-img .col-2 a.gold-button, .three-cols-img.col-3 a.gold-button {
     color: #333 !important;
}
 .three-cols-solid .col-1 h3, .three-cols-solid .col-2 h3, .three-cols-solid .col-3 h3, .three-cols-img .col-1 h3, .three-cols-img .col-2 h3, .three-cols-img.col-3 h3 {
     font-size: 2.5rem !important;
     margin-bottom: 5px !important;
     color: var(--slate) !important;
}
 .three-cols-solid .col-1 a, .three-cols-solid .col-2 a, .three-cols-solid .col-3 a, .three-cols-img .col-1 a, .three-cols-img .col-2 a, .three-cols-img.col-3 a {
     color: var(--cyan) !important;
}
/*First Column Spans 2 columns*/
 @media screen and (min-width: 1025px) {
     .span-row2-col-1-2 {
         grid-area: 2 / 1 / 2 / span 2;
    }
     .span-row2-col-2-3 {
         grid-area: 2 / 2 / 2 / span 2;
    }
     .span-row3-col-1-2 {
         grid-area: 3 / 1 / 3 / span 2;
    }
     .span-row3-col-2-3 {
         grid-area: 3 / 2 / 3 / span 2;
    }
}
/*Image banner with two columns, use with white-bg to place content on left or right of image*/
 .image-bg-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     width: 80%;
     padding: 20px 0px;
     margin: 20px 10%;
     background-size: cover;
}
 @media screen and (max-width: 1024px) {
     .image-bg-grid {
         width: 100%;
         margin: 20px 0%;
    }
}
 @media screen and (max-width: 600px) {
     .image-bg-grid {
         grid-template-columns: 1fr;
         padding-left: 25px;
         padding-right: 25px;
    }
     .image-bg-grid .white-bg {
         background-color: rgba(255, 255, 255, .85);
    }
}
/*IMAGE STYLING*/
 img.rounded-img {
     border-width: 1px;
     border-style: solid;
     border-radius: 45px;
}
 img.blog-image-right {
     border-width: 1px;
     border-style: solid;
     width: 40%;
     height: auto;
     border-radius: 45px;
     float: right;
     margin-left: 3%;
     margin-right: 10%;
     max-width: 500px;
}
 img.blog-image-left {
     border-width: 1px;
     border-style: solid;
     width: 40%;
     height: auto;
     border-radius: 45px;
     float: left;
     margin-left: 3%;
     margin-right: 3%;
     max-width: 500px;
}
 @media screen and (max-width: 767px) {
     img.blog-image-right, img.blog-image-left {
         width: 53%;
    }
}
/*use grid-img to set the image to fill up one side of the grid*/
 .grid-img {
     width: 90%;
     margin-left: 5%;
     height: auto;
}
/*CALENDAR GRID - aligns content in rows of 3, with large banner h3*/
 .calendar-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-column-gap: 5%;
     grid-row-gap: 5%;
     margin-bottom: 250px;
}
 .calendar-grid div {
     border: 3px solid var(--slate);
     padding: 15px;
}
 .calendar-grid h3 {
     background-color: var(--slate);
     color: #fff;
     text-align: center;
     margin: -15px -15px 10px -15px;
}
/*COMPLEX DESIGN ELEMENTS*/
/*Icon Bar Grid (a 50-50 split, with indented text) combined with bordered icon*/
 .grid-icon-bar {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-column-gap: 100px;
     grid-row-gap: 25px;
}
 .grid-icon-bar p {
     margin-right: 100px;
     margin-top: -20px;
}
 .bordered-icon {
     display: grid;
     grid-template-columns: 90% 80px;
}
 .bordered-icon-icon {
     border: 2px solid #003b4c;
     border-radius: 90px;
     color: var(--green);
     width: 80px;
     font-size: 4rem;
     align-items: center;
     justify-items: center;
     padding: 18px;
     text-align: center;
     margin-top: -50%;
}
 @media screen and (max-width: 1084px) {
     .grid-icon-bar {
         grid-template-columns: 1fr;
         width: 80%;
         margin-left: 10%;
    }
}
/*Layered Elements*/
/*Blue text block*/
 .medium-panel-block {
     background-color: #003b4c;
     width: 75%;
     height: 200px;
     margin-left: 12.5%;
     margin-bottom: 75px;
}
 .medium-panel-block h3 {
     padding: 15px;
     color: #fff !important;
     margin-left: 10%;
     font-size: 3rem;
}
 .medium-panel-block h3::after {
     border-bottom: 3px solid #fdb71a;
     width: 5%;
     text-align: left;
     content: " ";
     display: block;
     padding-top: 5px;
}
 .medium-pushed-down-panel {
     width: 95%;
     background-color: #00687f !important;
     margin-left: 10%;
     padding: 15px;
     color: #fff;
     height: 175px;
     font-size: 1.95rem;
}
/*STACKED STEPS*/
 .stacked-steps {
     background-color: #dbdee0;
     display: block;
     height: auto;
     padding: 50px;
}
 .step-line {
     width: 50%;
     border-right: 3px solid #5a5d66;
}
 .stacked-steps-content {
     width: 200%;
     background-color: #fff;
     padding: 15px;
     border-radius: 5px;
     border-left: 5px solid #003b4c;
     margin-bottom: 50px;
     position: relative;
}
 p.step-number {
     color: #003b4c;
     font-size: 2.4rem;
     font-style: italic;
     margin-top: 15px;
     line-height: 150%;
}
 p.step-title {
     font-size: 2.8rem;
     font-weight: bold;
     line-height: 150%;
}
 p.stacked-steps-content {
     margin-bottom: 15px;
     line-height: 150%;
}
 @media screen and (max-width: 770px) {
     .stacked-steps {
         padding: 20px;
    }
     .stacked-steps p {
         font-size: 1.6rem;
    }
}
/*STACKED STEP WITH IMAGE GRID*/
 .step-img-grid {
     display: grid;
     grid-template-columns: 70% 30%;
}
 .step-img-grid-right {
     align-items: center;
     justify-items: center;
     display: inline-grid;
     padding: 10px;
     margin-right: -10px;
}
 @media screen and (max-width: 770px) {
     .step-img-grid-right img {
         max-height: 200px;
    }
}
/*Photo Fact - Left and Right Text Options*/
 #photo-fact {
     width: 85%;
     margin-left: 7.5%;
     height: 500px;
     background-repeat: no-repeat;
     display: inline-flex;
     margin-top: 25px;
     margin-bottom: 25px;
}
 .photo-fact-right {
     background-color: #fff;
     width: 50%;
     margin-left: 50%;
     height: 65%;
     margin-top: 10%;
     padding: 25px;
     color: #5a5d66;
     padding-right: 50px;
}
 .photo-fact-right h3 {
     font-size: 3rem;
     color: #003b4c !important;
     font-family: serif;
}
 .photo-fact-left {
     background-color: #fff;
     width: 50%;
     height: 65%;
     margin-top: 10%;
     padding: 25px;
     color: #5a5d66;
     padding-right: 50px;
}
 .photo-fact-left h3 {
     font-size: 3rem;
     color: #003b4c !important;
     font-family: serif;
}
 @media screen and (max-width: 1084px) {
     #photo-fact {
         width: 95%;
         margin-left: 2.5%;
    }
     .photo-fact-right, .photo-fact-left {
         background-color: #fff;
         width: 45%;
         margin-left: 55%;
         height: 80%;
         margin-top: 5%;
    }
}
 @media screen and (max-width: 950px) {
     .photo-fact-right h3, .photo-fact-left h3 {
         font-size: 2.5rem;
    }
     .photo-fact-right, .photo-fact-left {
         font-size: 1.25rem;
         width: 45%;
         margin-left: 55%;
         height: 75%;
         margin-top: 25%;
    }
}
 @media screen and (max-width: 850px) {
     .photo-fact-right, .photo-fact-left {
         width: 90%;
         margin-left: 5%;
         height: auto;
         margin-top: 35%;
         padding: 10px;
    }
     #photo-fact {
         margin-bottom: 175px;
         height: 300px;
    }
}
 @media screen and (max-width: 550px) {
     .photo-fact-right, .photo-fact-left {
         height: 350px;
         margin-top: 55%;
    }
     #photo-fact {
         margin-bottom: 225px;
    }
}
/*News and Announcements Creates grid with 3 items, gray border, teal banded h3 top*/
 .news-announce {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-column-gap: 3rem;
     grid-row-gap: 3rem;
}
 .news-announce div {
     border: 1px solid var(--dark-gray);
}
 .news-announce p {
     padding-left: 20px;
     padding-right: 20px;
}
 .news-announce div img {
     width: 90%;
     margin-left: 5%;
     padding: 15px;
     height: 160px;
}
 h3.news-announce-title {
     background-color: #00687f;
     color: #fff !important;
     padding: 5px;
     font-size: 2rem !important;
     text-align: center;
     margin-top: 0px;
}
 .news-announce a.arrow-link {
     font-variant: small-caps;
}
 @media screen and (max-width: 1280px) {
     .news-announce {
         grid-template-columns: 1fr;
         grid-row-gap: 3rem;
    }
}
/*VIDEOS*/
/*Large iframe with blue text-box*/
 #large-iframe {
     width: 100%;
     display: block;
     margin-left: 20%;
}
 #large-iframe iframe {
     height: 480px;
     width: 854px;
     display: inline-flex;
     right: 0;
}
 .large-video-text {
     color: #fff;
     width: 600px;
     margin-left: 254px;
     min-height: 50px;
     display: block;
     background-color: #00687f;
     padding: 20px;
     margin-top: -7px;
     font-size: 1.5rem;
}
 @media screen and (max-width: 1150px) {
     #large-iframe {
         margin-left: 10%;
    }
}
 @media screen and (max-width: 990px) {
     #large-iframe iframe {
         height: 365px;
         width: 650px;
    }
     .large-video-text {
         width: 500px;
         margin-left: 150px;
    }
}
 @media screen and (max-width: 765px) {
     #large-iframe {
         margin-left: 0%;
    }
     .large-video-text {
         width: 80%;
         margin-left: 18%;
    }
}
 @media screen and (max-width: 500px) {
     #large-iframe iframe {
         height: 250px;
         width: 100%;
    }
     .large-video-text {
         width: 90%;
         margin-left: 10%;
         font-size: 1.25rem;
    }
}
/*Module Video*/
 .mod-video {
     border: 2px solid #dbdee0;
     border-radius: 5px;
     padding: 50px;
     max-width: 900px;
}
 .mod-video-container {
     position: relative;
     height: 0;
     width: 100%;
     padding-bottom: 56.25%;
}
 .mod-video-embed {
     position: absolute;
     top: 0;
     left: 0;
     width: 100% !important;
     height: 100% !important;
}
 .mod-video-descript {
}
 p.video-title {
     margin-top: 25px;
     font-weight: bold;
     font-size: 3rem;
     letter-spacing: 0.15ch;
     margin-bottom: 15px;
     line-height: 150%;
}
 a.mod-video-link {
     font-variant: small-caps;
     letter-spacing: 0.1ch;
     color: #00687f;
     font-size: 2rem;
     text-decoration: none;
}
 a.mod-video-link::after {
     content: "\f054";
     display: inline-block;
     font-family: "fontAwesome";
     padding-left: 7px;
}
/*Video Grid to be combined with background color and bg-span*/
 .video-banner {
     display: grid;
     grid-template-columns: 2fr 1fr;
     align-items: center;
     justify-items: center;
}
 @media screen and (min-width: 1600px) {
     .video-banner iframe {
         height: 400px;
         width: 711px;
    }
}
 @media screen and (max-width: 1599px) {
     .video-banner iframe {
         height: 315px;
         width: 560px;
    }
}
 @media screen and (max-width: 991px) {
     .video-banner {
         grid-template-columns: 1fr;
    }
}
 .video-text {
     color: #fff;
     font-size: 2.25rem;
     line-height: 150%;
}
/*Text and video right*/
 .video-right {
     display: grid;
     grid-template-columns: 1fr 2fr;
     align-items: center;
     justify-items: center;
     margin-bottom: 75px;
     padding: 50px;
}
 @media screen and (max-width: 991px) {
     .video-right {
         grid-template-columns: 1fr;
    }
}
/*HOMEPAGE SPECIAL - IMAGE LEFT ICON BUTTONS RIGHT*/
 .hmpg-btns {
     display: grid;
     grid-template-columns: 35% 65%;
     width: 90%;
     margin-left: 5%;
     margin-bottom: 50px;
}
 .hmpg-info {
     padding: 25px;
     color: #fff;
     font-size: 2rem;
     background-size: cover;
     background-repeat: no-repeat;
     padding-top: 35%;
}
 .hmpg-info p {
     margin-top: 0px;
     text-align: center;
     color: #fff !important;
     font-size: 5rem;
     line-height: 120%;
}
 @media screen and (max-width: 991px) {
     .hmpg-btns {
         grid-template-columns: 1fr;
    }
     .hmpg-info p {
         font-size: 3rem;
    }
     .hmpg-info {
         padding-top: 20%;
    }
}
/*Funnel Hero*/
 .funnel-hero {
     background-repeat: no-repeat;
     background-size: cover;
     padding: 50px;
     text-align: center;
     width: 120%;
     margin-left: -10%;
     padding-left: 10%;
     padding-right: 10%;
     background-position: bottom;
}
 .funnel-hero h1 {
     color: #fff !important;
     margin-top: -15px;
     margin-bottom: 50px;
     font-size: 5rem !important;
}
 p.funnel-tagline {
     font-size: 3rem;
     color: #fff;
     margin: 25px;
     line-height: 150%;
}
 p.funnel-tagline {
     font-size: 3rem;
     color: #fff;
     margin: 25px;
}
 .funnel-content {
     margin-top: 120px;
     background-color: rgba(0, 59, 76, 0.8);
     padding: 50px;
     width: 66%;
     margin-left: 17%;
}
 p.funnel-filter {
     font-size: 2.5rem;
     color: #fff;
}
 a.funnel-btn {
     background-color: #fff;
     color: #003b4c;
     padding: 15px;
     text-align: center;
     margin: 15px;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 2rem;
     display: inline-block;
     width: 275px;
}
 a.funnel-btn:hover, a.funnel-btn:focus {
     background-color: var(--slate);
     color: #fff;
}
/*Left or Right Ghost Shadow Buttons on Image*/
 .photo-overlay {
     padding-top: 50px;
     padding-bottom: 50px;
     padding-left: 50px;
     background-size: cover;
     background-repeat: no-repeat;
     margin-bottom: 75px;
}
 .ghost-block-left {
     display: block;
     margin-left: 60%;
     background-color: #fff;
     padding: 25px;
     width: 40%;
     border: 1px solid;
     border-right: none;
}
 .ghost-block-right {
     display: block;
     margin-right: 60%;
     background-color: #fff;
     padding: 25px;
     width: 40%;
     border: 1px solid;
     border-right: none;
}
/*IMAGE WITH NAVIGATION TYPE BUTTONS - Add Image ID to the page*/
 .photo-nav-hero {
     background-repeat: no-repeat;
     background-size: cover;
     padding: 100px;
     padding-top: 50px;
     height: 700px;
     margin-bottom: 50px;
}
 .photo-nav-box-title h1, .photo-nav-box-title h2, .photo-nav-box-title h3 {
     font-size: 5.5rem !important;
     color: var(--cyan) !important;
     font-weight: bold;
     font-family: serif;
}
 .photo-nav-box-title p {
     font-size: 3.5rem !important;
     color: var(--cyan) !important;
     font-family: serif;
     width: 50%;
     line-height: 150%;
}
 @media screen and (max-width: 1200px) {
     .photo-nav-box-title p {
         width: 100%;
         font-size: 2.5rem;
    }
     .photo-nav-box-title h1, .photo-nav-box-title h2, .photo-nav-box-title h3 {
         font-size: 4.5rem !important;
    }
}
 @media screen and (max-width: 1024px) {
     .photo-nav-hero {
         padding: 25px;
    }
}
 .nav-box-btns-3 {
     position: absolute;
     bottom: 50px;
     display: grid;
     grid-column-gap: 5%;
     grid-template-columns: 30% 30% 30%;
     margin-bottom: 50px;
}
 .nav-box-btns-4 {
     position: absolute;
     bottom: 50px;
     display: grid;
     grid-column-gap: 5%;
     grid-template-columns: 22% 22% 22% 22%;
}
 @media screen and (max-width: 991px) {
     .photo-nav-box-title p {
         width: 50%;
         font-size: 2rem;
    }
}
 @media screen and (max-width: 715px) {
     .photo-nav-hero {
         height: auto;
         background-image: none;
    }
     .nav-box-btns-3 {
         position: relative;
         grid-template-columns: 40% 40%;
    }
     .nav-box-btns-3 {
         bottom: auto;
    }
     a.icon-btn-adj {
         width: 100%;
    }
}
 @media screen and (max-width: 550px) {
     .nav-box-btns-3 {
         grid-template-columns: 100%;
    }
}
/*New Elements Added for Faculty Distinction*/
/*WRAPS AN H3 HEADER WITH A GREEN BORDER WITH EXTENDED PADDING TO BE USED WITH IMAGE CLASS img.squarted-border-left-img WHICH PULLS AN IMAGE ON TOP OF THE HEADER (GIVING A LAYERED LOOK)*/
 h3.squared-left {
     border: 3px solid var(--green);
     padding: 15px 15px 125px 15px;
     text-align: center;
     width: 70%;
     font-size: 4rem;
}
 h3.squared-left:after, h3.squared-right:after {
     display: none;
}
 img.squared-border-left-img {
     margin-top: -125px;
     margin-right: 15%;
     float: right;
     width: 70%;
}
/*WRAPS AN H3 HEADER WITH A GREEN BORDER WITH EXTENDED PADDING TO BE USED WITH IMAGE CLASS img.squarted-border-right-img WHICH PULLS AN IMAGE ON TOP OF THE HEADER (GIVING A LAYERED LOOK)*/
 h3.squared-right {
     border: 3px solid var(--green);
     padding: 15px 15px 125px 15px;
     text-align: center;
     width: 70%;
     font-size: 4rem;
     margin-left: 15%;
}
 img.squared-border-right-img {
     margin-top: -125px;
     margin-left: 10%;
     float: left;
     width: 70%;
}
 @media screen and (max-width: 1240px) {
     h3.squared-right, h3.squared-left {
         font-size: 3.5rem;
    }
}
 @media screen and (max-width: 1024px) {
     img.squared-border-right-img, img.squared-border-left-img {
         display: none !important;
    }
     h3.squared-right, h3.squared-left {
         padding: 15px 15px 15px 15px;
         width: 80%;
         margin-left: 10%;
         font-size: 2.5rem;
    }
}
 img.bottom-border-right {
     width: 80%;
     margin-left: 20%;
}
 .green-bottom-border-right-img {
     height: 60px;
     background-color: var(--green);
     width: 80%;
     margin-left: 20%;
     transform: skew(0deg, 6deg);
     margin-top: -40px;
     position: relative;
     z-index: -2;
}
 img.bottom-border-left {
     width: 80%;
     margin-right: 20%;
}
 .green-bottom-border-left-img {
     height: 60px;
     background-color: var(--green);
     width: 80%;
     margin-right: 20%;
     transform: skew(0deg, 354deg);
     margin-top: -40px;
     position: relative;
     z-index: -2;
}
 img.image-white-border-radius {
     border: 2px solid #fff;
     border-radius: 45px;
}
 img.round-bio-small {
     border-radius: 50%;
     padding: 20px;
     height: 180px;
}
 img.round-bio-medium {
     border-radius: 50%;
     padding: 20px;
     height: 250px;
}
 img.round-bio-large {
     border-radius: 50%;
     padding: 20px;
     height: 325px;
}
 a.button-green {
     background-color: #5FA688;
     color: black;
     text-transform: uppercase;
     width: 100%;
     padding: 25px 15%;
     text-align: center;
     text-decoration: none !important;
     height: 100%;
}
 a.button-green:nth-child(even) {
     background-color: #4B856C;
}
/*NOTE WRAPPING THE BUTTON TEXT IN THIS HEADER WILL MAKE THE TEXT LARGER AND WHITE YOU CAN ALSO INCLUDE TEXT NOT WRAPPED IN THIS SPAN, WHICH IS WHAT GIVES THE WHITE AND BLACK TEXT LOOK*/
 span.button-green-header {
     color: #fff !important;
     text-transform: uppercase;
     font-size: 2.15rem;
}
 a.button-green:hover, a.button-green:focus {
     background-color: var(--cyan);
     color: #fff !important;
     border: 1px solid #fff;
}
/*ALIGNS 3 GREEN BUTTONS IN A ROW*/
 .button-green-span-3 {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     justify-items: center;
     align-items: center;
     margin-top: 50px;
     margin-bottom: 50px;
}
/*ALIGNS 5 GREEN BUTTONS IN A ROW*/
 .button-green-span-5 {
     display: grid;
     grid-template-columns: 20% 20% 20% 20% 20%;
     justify-items: center;
     align-items: center;
     margin-top: 50px;
     margin-bottom: 50px;
}
 @media screen and (max-width: 1150px) {
     .button-green-span-5 {
         grid-template-columns: 1fr 1fr 1fr;
    }
}
 @media screen and (max-width: 700px) {
     .button-green-span-3, .button-green-span-5 {
         grid-template-columns: 1fr;
    }
}
 img.image-white-border-radius {
     border: 2px solid #fff;
     border-radius: 45px;
}
/*Designed, Developed, and Coded By: Shawna Burtis For question, please contact: shawna.burtis@mail.waldenu.edu */