/*updated 8/31/2024*/
 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);
}
h2.thick-underline {
    overflow: hidden;
    position: relative;
    font-family: "Noto Serif", sans-serif;
    font-weight: 800;
	font-size: 6rem;
	z-index: 1;
}
h2.thick-underline:after {
    content: "";
    display: block;
    width: 33%;
    height: 20px;
    margin-left: -10px;
    background-color: var(--gold);
    transform: skew(150deg);
    margin-top: -25px;
    margin-bottom: 15px;
    position: absolute;
    z-index: -1;
}

 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;
}


 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.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.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;
}

h1.small-caps, h2.small-caps, h3.small-caps, h4.small-caps {
	font-variant: all-small-caps;
	margin-top: 0px;
}


 p.bold-slate {
     font-weight: bold;
     color: var(--cyan);
     font-size: 1.8rem;
}

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

 @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%;
}
 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;
}

 .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*/


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

/*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*/

/*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*/
 .gold-bg p, .gold-bg li {
     color: black;
}
 .gold-bg h2:after {
     background-color: var(--green);
}
/*TO BE USED WITH BACKGROUND IMAGES/COLORS 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;
}
.no-padding {
padding: 0px !important; 
} 
.padding-10 {
padding: 10px;
}
/*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-padding-sm {
padding: 3px;
}
.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);
}
.border-shadow {
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.12);
	}
	
	
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);
}
 .right-gold-border {
     border-right: 20px solid var(--gold);
}
 .left-slate-border-bg {
     border-left: 20px solid var(--slate);
}
 .right-slate-border-bg {
     border-right: 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;
    }
}

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

/*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);
    }
}
/*Use ID to place background image*/
.image-bg-grid-right-overlap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px 0px;
    background-size: 66%;
  background-repeat: no-repeat;

}
@media screen and (min-width: 1084px) { 
.image-bg-grid-right-overlap {
min-height: 500px;
    grid-template-columns: 1fr 2fr;
}
}
@media screen and (max-width: 767px) { 
.image-bg-grid-right-overlap {
    grid-template-columns: 1fr;
    background-size: cover;
}
}
/*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 */