@charset "UTF-8";
/*********************************************************************/
/***** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION  ****************/
/*********************************************************************/
/* Import statements need to be at the top of your CSS file */

/* For Main CSS files */
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);
/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/

:root {
    --dt-color-primary: #a61e2f;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #a61e2f;
    --dt-color-secondary: #ffc82e;
    --dt-color-secondary-contrast: #000000;
    --dt-color-secondary-dark-text: #474747;
    --dt-color-accent: #CECFD1;
    --dt-color-accent-contrast: #000000;
    --dt-color-accent-dark-text: #6E6E70;
    --dt-color-gray: #CCCCCC;
    --dt-color-gray-contrast: #000000;
    --dt-color-gray-dark-text: #636363;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #000000;
    --dt-color-white-dark-text: #707070;
}

/*********************************************************************/
/***** END DESIGNPLUS THEME IMPORT & CUSTOMIZATION   *****************/
/*********************************************************************/

/* Grow card on hover */
.grow {
transition: transform 0.2s ease-in-out; /* Optional:
Add a smooth transition */
}
.grow:hover {
transform: scale(1.05); /* Increase size
to 105% on hover */
}

.amber-glow {
box-shadow: 0 0 12px #fc0;
}

.magenta-glow {
box-shadow: 0 0 12px #f0f;
}

.cyan-glow {
box-shadow: 0 0 12px #0ff;
}

.silver-glow {
box-shadow: 0 0 12px #ccc;
}

/* CSS Document */
/* Last update by Paula 
            on 2/14/23 */

/* CSS for Pipes project */
.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 
}

/* Begin Paula's Auto Grid.  */
/* Author: Paula */
/* COMMENTS: Autofill Grid. Use articles instead of div tags for grid and cards
    Use grid class as outside grid wrapper
    Use article as internal card
    >>see ccc_grid-auto for atomic design version  (Allows design modifications at atomic level)
    >>see also fixed 2 and 3 column  versions
*/
.fh_grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.fh_grid-auto>article {
    text-align: center;
    border: 3px solid #e7e7e7;
    overflow: hidden;
    /* padding: 20px 10px; */
}

.fh_grid-auto .fh_gridimage-fit,
.fh_grid-2col .fh_gridimage-fit,
.fh_grid-3col .fh_gridimage-fit,
.fh_grid-3col-plain .fh_gridimage-fit {
    min-width: 100%;
    width: 100% !important;
}

/* Small cards with default square corners */
.fh_grid-auto-sm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}


/* Small cards with default square corners */

@media only screen and (max-width: 850px) {
    .fh_grid-3col-plain {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        justify-items: center;
        justify-content: space-evenly;

    }
}

@media only screen and (min-width: 850px) {
    .fh_grid-3col-plain {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        justify-items: center;
        justify-content: space-evenly;
    }
}

@media only screen and (min-width: 1450px) {
    .fh_grid-3col-plain {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
        justify-items: center;
        justify-content: space-evenly;
    }
}

.fh_grid-3col-plain>article {
    overflow: hidden;
    /* padding: 20px 10px; */
}

.fh_grid-auto-sm>article,
.fh_grid-auto-xsm>article {
    text-align: center;
    border: 1px solid #e7e7e7;
}

/* Smaller cards with default square corners */
.fh_grid-auto-xsm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

/* end Paula's Auto Grid */

/* ------------------------------------------------------------------ */

fh_gap-15 { gap: 15px; }
fh_gap-20 { gap: 20px; }

/* Begin 4 column Grid.  */
.fh_grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* create 4 columns with equal width */
  gap: 10px; /* add a 10px gap between grid items */
}

.fh_grid-4col>article {
  text-align: center; /* center the text within grid items */
    border-radius: 4px;
    border: 3px solid #e7e7e7;
}

/* Media queries for responsive layout */
@media (max-width: 1100px) {
  .fh_grid-4col {
    grid-template-columns: repeat(2, 1fr); /* switch to 2 columns for small screens */
  }
}

@media (max-width: 550px) {
  .fh_grid-4col {
    grid-template-columns: 1fr; /* switch to 1 column for extra small screens */
  }
}

/* end Grid with 4 columns */

/* ------------------------------------------------------------------ */

/* Begin 3 column Grid.  */
/* Author: Paula */
/* COMMENTS: fixed 3 column Grid. Use articles instead of div tags for grid and cards
    Use grid class as outside grid wrapper
    Use article as internal card
    NOTE: Media Query for min-width means that for medium tablet screen and larger this will be 3 column. For less, the grid goes away but the cards stay in 1 column
    >>see ccc_grid-3col for atomic design version  (Allows design modifications at atomic level)
    >>see also fixed 2 and auto column  versions
*/

.fh_grid-3col {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* create 3 columns with equal width */
        gap: 15px;
}

@media (max-width: 1100px) {
    .fh_grid-3col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}
@media (max-width: 550px) {
    .fh_grid-3col {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

.fh_grid-3col>article {
    text-align: center;
    border: 3px solid #e7e7e7;
    border-radius: 10px;
    overflow: hidden;
}


/* end Grid with 3 columns */

/* ------------------------------------------------------------------ */

/* Begin Grid with 2 columns */
/* Author: Paula */
/* COMMENTS: fixed 2 column Grid. Use articles instead of div tags for grid and cards
    Use grid class as outside grid wrapper
    Use article as internal card
    NOTE: Media Query for min-width means that for medium tablet screen and larger this will be 3 column. For less, the grid goes away but the cards stay in 1 column
    >>see ccc_grid-2col for atomic design version  (Allows design modifications at atomic level)
    >>see also fixed 3 and auto column  versions
*/

.fh_grid-2col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
}

@media (max-width: 900px) {
    .fh_grid-2col {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

.fh_grid-2col>article {
    text-align: center;
    border: 3px solid #e7e7e7;
    border-radius: 10px;
    overflow: hidden;
}


/* End Grid with 2 columns */

/* ------------------------------------------------------------------ */

/* Begin rad sizes*/
/* Author: Paula */
/* COMMENTS: Several choices for how round to make border corners
Updated with 0 on 8/17/20
*/
.fh_rad-0 {
    border-radius: 0 !important;
}

.fh_rad-4 {
    border-radius: 4px !important;
}

.fh_rad-10 {
    border-radius: 10px !important;
}

.fh_rad-round {
    border-radius: 50% !important;
}

/* End rad sizes */


.fh_home-btn-bottom {
    text-align: center;
    font-size: .8em;
    /* padding: 8px 8px; */

    position: absolute;
    bottom: 0px;
    left: 40%;
}





/* Begin Flex Containers */
/* Author: Paula */
/* COMMENTS: Needs Comments
*/
.fh_container {
    display: -webkit-flex;
    /* Safari */
    display: flex;
    -webkit-flex-direction: row;
    /* Safari */
    flex-direction: row;
    -webkit-justify-content: center;
    /* Safari */
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.fh_container-item {
    text-align: center;
    margin-right: 20px;
}

.fh_container-edge {
    display: -webkit-flex;
    /* Safari */
    display: flex;
    -webkit-flex-direction: row;
    /* Safari */
    flex-direction: row;
    -webkit-justify-content: space-around;
    /* Safari */
    justify-content: space-around;
    margin-top: 20px;
    margin-bottom: 20px;
}

.fh_container-edge {
    -webkit-justify-content: space-between;
    /* Safari */
    justify-content: space-between;
}

/* End Flex Containers */

/* ------------------------------------------------------------------ */

/* Begin Gray Shadow */
/* Author: Paula */
/* COMMENTS: Jolie also added this as fh_shadow-1 for consistency
*/
.fh_gray-shadow {
    box-shadow: 10px 10px 5px grey;
}

/* End Grey Shadow */

/* ------------------------------------------------------------------ */

/* Begin Image Floats left and right */
/* Author: Paula */
/* COMMENTS: Needs Comments
Adds image floats for left and right but the Clears both should be added to following first item to stop floating.
*/
.fh_img-right {
    float: right;
    margin-left: 25px;
    margin-bottom: 25px;
    margin-top: 15px;
}

.fh_img-left {
    float: left;
    margin-right: 25px;
    margin-bottom: 25px;
    margin-top: 15px;
}

.fh_clear-both {
    clear: both;
}

/* End Image Floats */

/* ------------------------------------------------------------------ */

/* Begin Callout Box*/
/* Author: Paula */
/* COMMENTS: Needs Comments
*/
.fh_callout-box {
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 20px;
}

/* End Callout Box */


/* ------------------------------------------------------------------ */

/* Begin enhanceable tabs */
/* Author: Paula */
/* COMMENTS: The tabs are added because Instructure removed them. Javacript was added to make them work, too. See the .js file
*/

#tab-1,
#tab-2,
#tab-3,
#tab-4,
#tab-5,
#tab-6 {
    border-bottom: 1px solid #ddd !important;
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
}

.tabs a:not(.btn):not(.Button):not(.ui-button) {
    text-decoration: underline;
    color: #2056a7;
}

.tabs a:hover:not(.btn):not(.Button):not(.ui-button) {
    color: #2056a7;
}

/* End enhanceable tabs */

/* ------------------------------------------------------------------ */

/* Begin Border Colors */
/* Author: Paula */
/* COMMENTS: Needs Comments
*/
.borderblue {
    border: 5px solid #3268F4;
}

.borderred {
    border: 1px solid #f00;
}

/* End Border Colors */

/* ------------------------------------------------------------------ */

/* Begin Top Float Button.  */
/* Author: Paula */
/* COMMENTS: */
/*Floating Back-To-Top Button on Canvas Page with right menu as on Home and Syllabus page*/
#fh_topBtnRmenu,
#fh_topBtn {
  
    position: fixed; /* Fixed/sticky position */
    bottom: 10px;
    float: right;
    right: 18.5%;
    left: 77.25%;
    max-width: 30px;
    width: 100%;
    border: solid 1px #aaa;
    background-color: #efefef;
    padding: 2px;
    border-radius: 4px;
}

#fh_topBtnRmenu>a,
#fh_topBtn>a {
    text-decoration: none;
}

/*On Hover Color Change*/
#fh_topBtnRmenu,
#fh_topBtn:hover {
    background-color: #ddd;
}

#fh_topBtn {
    left: 96%;
}


@media (max-width: 1140px) {

    #fh_topBtnRmenu,
    #fh_topBtn {
        left: 93%;
    }
}

/* End Top Float Button */

/* ------------------------------------------------------------------ */



/* Begin Box Shadows/*/
/* Author: Jolie */
/* COMMENTS: 
    1 = bold shadow.  The others are more subtle 
    Adds a box shadow to a container such as an image or a box
*/

.fh_shadow-1 {
    box-shadow: 10px 10px 5px grey;
}

.fh_shadow-2 {
    box-shadow: 0px 0px 8px #bebaba;
}

.fh_shadow-3 {
    box-shadow: 3px 3px 8px 0px #a2a2a2;
}

.fh_shadow-4 {
    box-shadow: 1px -4px 6px 2px #a2a2a2;
}

.fh_shadow-5 {
    box-shadow: -5px 5px 3px 3px #aaaaaa;
}

.fh_shadow-6 {
    box-shadow: -3px 3px 8px 3px #a2a2a2;
}

.fh_btn-pd {
    box-shadow: 3px 3px 8px 0px #a2a2a2;
}

.fh_btn-pd:hover {
    box-shadow: -3px 3px 8px 5px #a2a2a2;
}

.fh_btn-pd:active {
    box-shadow: 0px 0px 0px 0px #a2a2a2;
}

.fh_btn-mouseover {
    box-shadow: 3px 3px 8px 0px #a2a2a2;
}

.fh_btn-mouseover:hover {
    box-shadow: -2px -2px 5px 3px #a2a2a2;
}

.fh_btn-mouseover:active {
    box-shadow: 0px 0px 0px 0px #a2a2a2;
}

/* End Box Shadows/*/

/* Color Boxes */
/* Begin Color Boxes*/
/* Author: Paula */
/* COMMENTS: 
    Created for Canvas HTML training*/

.fh_bg-foothillred {
    padding: 5px 10px;
    background-color: #A61E2F;
    color: white;
}

.fh_bg-darkblue {
    padding: 5px 10px;
    background-color: darkblue;
    color: white;
}

.fh_bg-green {
    padding: 5px 10px;
    background-color: green;
    color: white;
}

.fh_bg-fhred {
    padding: 5px 10px;
    background-color: #A61E2F;
    color: white;
}

.fh_bg-indigo {
    padding: 5px 10px;
    background-color: indigo;
    color: white;
}

.fh_bg-dimgrey {
    padding: 5px 10px;
    background-color: dimgrey;
    color: white;
}

.fh_bg-mostlyblack {
    padding: 5px 10px;
    background-color: #333;
    color: white;
}

.fh_bg-skyblue {
    padding: 5px 10px;
    background-color: skyblue;
    color: black;
}

.fh_bg-orange {
    padding: 5px 10px;
    background-color: orange;
    color: black;
}

.fh_bg-goldenrod {
    padding: 5px 10px;
    background-color: goldenrod;
    color: black;
}

.fh_bg-mistyrose {
    padding: 5px 10px;
    background-color: mistyrose;
    color: black;
}

.fh_bg-khaki {
    padding: 5px 10px;
    background-color: khaki;
    color: black;
}

.fh_bg-lightgrey {
    padding: 5px 10px;
    background-color: lightgrey;
    color: black;
}

.fh_bg-limegreen {
    padding: 5px 10px;
    background-color: limegreen;
    color: black;
}

.fh_bg-darkolivegreen {
    padding: 5px 10px;
    background-color: darkolivegreen;
    color: white;
}

.fh_bg-black {
    padding: 5px 10px;
    background-color: black;
    color: white;
}

.fh_bg-dodgerblue {
    padding: 5px 10px;
    background-color: dodgerblue;
    color: black;
}

/* ------------------------------------------------------------------ */

/* Begin Box Classes*/
/* Author: Paula */
/* COMMENTS: 
    Create boxes, one that is indented by 20% on both sides and another that isn't. The border styles can be used with the box classes
*/

.fh_box {
    margin: 20px 20%;
    border: 1px solid lightgrey;
    padding: 10px 20px;
}

.fh_box-full {
    margin: 20px auto;
    border: 1px solid lightgrey;
    padding: 10px 20px;
}

.fh_border-dashed {
    border-style: dashed;
}

.fh_border-dotted {
    border-style: dotted;
}

.fh_border-double {
    border-style: double;
}


/* ------------------------------------------------------------------ */

/* Begin Shapes*/
/* Author: Jolie */
/* COMMENTS: 
    Created for home pages in Quickstart template
*/
/*Shapes - Round with grey border*/
.fh_shape-avatar {
    border-radius: 50%;
    border: 3px double #e5e5e5;
    position: relative;
    padding: 0px;
}

/* End shape avatar/*/

/* Begin Horizontal Lines*/
/* Author: Paula & Jolie*/
/* COMMENTS: 
    Created for HTML for Canvas course
*/
.fh_table-fixed {
    table-layout: fixed;
    width: 100%;
}

.fh_line-1 {
    border-width: 1px;
}

.fh_line-3 {
    border-width: 3px;
}

.fh_line-5 {
    border-width: 5px;
}

.fh_line-10 {
    border-width: 10px;
}

.fh_line-black {
    border-color: black;
}

.fh_line-green {
    border-color: darkgreen;
}

.fh_line-blue {
    border-color: darkblue;
}

.fh_line-goldenrod {
    border-color: goldenrod;
}

.fh_line-foothillred {
    border-color: #A61E2F;
}

.fh_line-dashed {
    border-top-style: dashed;
}

.fh_line-dotted {
    border-top-style: dotted;
}

.fh_line-double {
    border-top-style: double;
}

.fh_line-dodgerblue {
    border-color: dodgerblue;
}

.fh_line-darkolivegreen {
    border-color: darkolivegreen;
}

.fh_line-indigo {
    border-color: indigo;
}

.fh_line-dimgrey {
    border-color: dimgrey;
}

.fh_line-mostlyblack {
    border-color: #333;
}

.fh_line-skyblue {
    border-color: skyblue;
}

.fh_line-orange {
    border-color: orange;
}

.fh_line-khaki {
    border-color: khaki;
}

.fh_line-mistyrose {
    border-color: mistyrose;
}

.fh_line-lightgrey {
    border-color: lightgrey;
}

.fh_line-limegreen {
    border-color: limegreen;
}

/*/////// End Horizontal Lines ///////////*/

/* Begin Layout*/
/* Author: Jolie*/
/* COMMENTS: 
    Created for Jamie's Pipes Course
*/

.fh_showlayout {
    background-color: #dddbdb;
    color: white;
    border: 1px solid #a3a3a3;
}

.fh_showlayout div {
    background-color: #fafafa;
    color: Black;
    border: 1px solid #a3a3a3;
}

.fh_showlayout-all div,
.fh_showlayout-all p,
.fh_showlayout-all h2,
.fh_showlayout-all h3,
.fh_showlayout-all h4,
.fh_showlayout-all h5,
.fh_showlayout-all h6,
.fh_showlayout-all a,
.fh_showlayout-all img {
    background-color: #fafafa;
    color: Black;
    border: 1px solid red;
}

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

    .fh_layout-5050,
    .fh_layout-2575,
    .fh_layout-7525,
    .fh_layout-3366 {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        padding: 5px;
        width: 100%;
        margin: 15px auto;
        object-fit: contain;
        align-items: center;
        justify-content: center;
    }

    .fh_layout-nospace {
        gap: 0;
        margin: 0;
        padding: 0;
    }
}

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

    .fh_layout-5050,
    .fh_layout-2575,
    .fh_layout-7525,
    .fh_layout-3366 {
        display: grid;
        gap: 7px;
        padding: 5px;
        width: 100%;
        margin: 15px auto;
    }

    .fh_layout-5050 {
        grid-template-columns: minmax(0, 2fr) minmax(0, 2fr);

    }


    .fh_layout-2575 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }


    .fh_layout-7525 {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }


    .fh_layout-3366 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .fh_layout-nospace {
        gap: 0;
        margin: 0;
        padding: 0;
    }
}

/* Style the right column */
/* see below */

/* Style the left column */
.fh_layout-txt {
    padding: 25px 25px 15px 40px;
}

.fh_layout-top {
    display: grid;
    align-items: start;
}

.fh_layout-middle {
    display: grid;
    align-items: center;
}

.fh_layout-bottom {
    display: grid;
    align-items: end;
}

.fh_layout-left {
    display: grid;
    text-align: left;
    justify-content: start;
}

.fh_layout-center {
    display: grid;
    text-align: center;
    justify-content: center;
}

.fh_layout-right {
    display: grid;
    text-align: right;
    justify-content: end;
}

.fh_nav {
    width: 99%;
    /* background-color: #ffffff;  */
    /* float: left;  */
    /* margin: 10px 5px; */
    padding: .5%;
    border: 1px solid grey;
}

.fh_nav nav {
    width: 100%;
    background-color: #ededed;
    margin: 0px;
    padding: 5px 0px;
    font-size: 0.9em;
    color: #000;
    text-align: center;
}

.fh_pipes-slide1 {
    margin: 10px 0px;
    padding: 0px;
    border: 1px solid grey;
    width: 100% !important;
}


.fh_pipes-slide1>h2 {
    width: 99%;
    margin-top: 0px;
    margin-bottom: 20px;
    padding: 10px 0px 10px 1%;
    font-size: 1.05em;
    font-weight: bold;
    color: #ffffff;
    text-align: left;
    background-color: grey;
}


.fh_pipes-slide1 .fh_pipes-banner {
    object-fit: cover;
    width: 100% !important;
    max-height: 100%;
    margin: -20px auto 0px auto;
    padding: 0px;
    border-bottom: 1px solid grey;
}

/* .fh_pipes-slide1>p:nth-child(2)>img {

    padding: 0px;
    object-fit: contain;
    width: 100% !important;
    max-height: 100%;
    border-bottom: 1px solid grey;
  
} */

.fh_layout-img {
    display: grid;
    text-align: center;
    width: 99%;
    max-width: 99%;
    max-height: 100%;
    /* overflow: hidden; */
    object-fit: cover;
    align-items: center;
    justify-content: center;
    /*  */
}

/* Begin Color Overrides */
.fh_pipes-blue {
    border: 1px solid #336699;
}

.fh_pipes-slide1.fh_pipes-blue>p:nth-child(2)>img {
    border-bottom: 1px solid #336699;

}

.fh_pipes-blue nav {
    background-color: #336699;
    color: #ffffff;
}

.fh_pipes-slide1.fh_pipes-blue>h2 {
    background-color: #336699;
}

.fh_pipes-slide1.fh_pipes-blue {
    border: 1px solid #336699;
}

/* green */
.fh_pipes-slide1.fh_pipes-green {
    border: 1px solid darkgreen;
}

.fh_pipes-slide1.fh_pipes-green>p:nth-child(2)>img {
    border-bottom: 1px solid darkgreen;

}

.fh_pipes-green nav {
    background-color: darkgreen;
    color: #ffffff;
}

.fh_pipes-slide1.fh_pipes-green>h2 {
    background-color: darkgreen;
}



/*/////// End Layout ///////////*/
/* Begin Pipes Home Classes */
.fh_grid-auto-pipes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(375px, 1fr));
    grid-auto-rows: min-content;
    gap: 15px;
    object-fit: contain;
    align-items: center;
    justify-content: center;
    padding: 15px 25px 25px;
    overflow: hidden;
}


article.fh_card-pipes {
    text-align: center;
    text-align: left;
    border: 1px solid #336699;
    object-fit: contain;
    padding-bottom: 10px;
}

article.fh_card-pipes>p>img {

    width: 100%;
    max-height: 100%;
    object-fit: cover;
    margin-top: 0px;
}

article.fh_card-pipes>p {
    margin: 0px;
    padding: 0px;
}

article.fh_card-pipes>p>a {
    margin-right: 10px;
}

article.fh_card-pipes div {
    /* border: 1px solid blue; */
    height: 200px;
    overflow-y: auto;
    padding: 10px 20px 20px;
    text-align: left;
    object-fit: contain;
}

article.fh_card-pipes div.fh_hidden {
    overflow-y: hidden;
}

article.fh_card-pipes h2 {
    width: 96%;
    background-color: #336699;
    margin: 0px;
    padding: 5px 0px;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    padding: 2%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

article.fh_card-pipes h2:hover {
    /* white-space: wrap; */
    overflow: visible;
    /* z-index: 0; */
}

/* ------------------------------------------------------------------ */

/* begin accordion widget */
/* Author: Jolie */
/* COMMENTS: global - Override of default color for selected accordion section. */
h3.fh_accordion-color-yellow.ui-accordion-header-active {
    background-color: #f4b41b !important;
    color: #133e59 !important;
    border: 1px solid #f4b41b !important;
}

.jqueryUIWidgetized.fh_accordion-color-yellow .ui-state-active {
    background-color: #f4b41b !important;
    color: #133e59 !important;
    border: 1px solid #f4b41b !important;
}

.jqueryUIWidgetized.fh_accordion-color-yellow .ui-accordion-header-collapsed {
    background-color: #dbdbdb !important;
    color: #000 !important;
    border: 1px solid #f4b41b !important;
}

h3.fh_accordion-color-grey.ui-accordion-header-active,
h3.fh_accordion-color-gray.ui-accordion-header-active {
    background-color: #9c9c9c !important;
    color: #fff !important;
    border: 1px solid #7a7a7a !important;
}

.jqueryUIWidgetized.fh_accordion-color-grey .ui-accordion-header-collapsed,
.jqueryUIWidgetized.fh_accordion-color-gray .ui-accordion-header-collapsed {
    background-color: #dbdbdb !important;
    color: #000 !important;
    border: 1px solid #575757 !important;
}

.jqueryUIWidgetized.fh_accordion-color-grey .ui-state-active,
.jqueryUIWidgetized.fh_accordion-color-gray .ui-state-active {
    background-color: #9c9c9c !important;
    color: #fff !important;
    border: 1px solid #7a7a7a !important;
}



h3.fh_accordion-color-green.ui-accordion-header-active {
    background-color: darkgreen !important;
    color: #fff !important;
    border: 1px solid #043304 !important;
}

.jqueryUIWidgetized.fh_accordion-color-green .ui-accordion-header-collapsed {
    background-color: #dbdbdb !important;
    color: #000 !important;
    border: 1px solid #043304 !important;
}

.jqueryUIWidgetized.fh_accordion-color-green .ui-state-active {
    background-color: darkgreen !important;
    color: #fff !important;
    border: 1px solid #043304 !important;
}


h3.fh_accordion-color-darkblue.ui-accordion-header-active {
    background-color: darkblue !important;
    color: #fff !important;
    border: 1px solid #030346 !important;
}

.jqueryUIWidgetized.fh_accordion-color-darkblue .ui-accordion-header-collapsed {
    background-color: #dbdbdb !important;
    color: #000 !important;
    border: 1px solid #030346 !important;
}

.jqueryUIWidgetized.fh_accordion-color-darkblue .ui-state-active {
    background-color: darkblue !important;
    color: #fff !important;
    border: 1px solid #030346 !important;
}

h3.fh_accordion-color-lightblue.ui-accordion-header-active {
    background-color: #88bbee !important;
    color: #000 !important;
    border: 1px solid #336699 !important;
}

.jqueryUIWidgetized.fh_accordion-color-lightblue .ui-accordion-header-collapsed {
    background-color: #dbdbdb !important;
    color: #000 !important;
    border: 1px solid #336699 !important;
}

.jqueryUIWidgetized.fh_accordion-color-lightblue .ui-state-active {
    background-color: #88bbee !important;
    color: #000 !important;
    border: 1px solid #336699 !important;
}

h3.fh_accordion-color-brand.ui-accordion-header-active {
    background-color: #A61E2F !important;
    color: #ffffff !important;
    border: 1px solid #A61E2F !important;
}

.jqueryUIWidgetized.fh_accordion-color-brand .ui-accordion-header-collapsed {
    background-color: #dbdbdb !important;
    color: #000 !important;
    border: 1px solid #A61E2F !important;
}

.jqueryUIWidgetized.fh_accordion-color-brand .ui-state-active {
    background-color: #A61E2F !important;
    color: #ffffff !important;
    border: 1px solid #A61E2F !important;
}

.jqueryUIWidgetized .ui-icon {
    margin-right: 7px !important;
}

/* End accordion widget */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Begin Alt Tabs Widget */
/* Author: Jolie */


/* ---------------blue */
.fh_tabs-blue .ui-tabs-nav li {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: darkblue !important;
    color: #fff !important;
}

.fh_tabs-blue .ui-tabs-nav li a {
    text-decoration: none !important;
    color: #fff !important;
}

.fh_tabs-blue .ui-tabs-nav li.ui-tabs-active {
    background-color: #fff !important;
    color: #000 !important;
}

.fh_tabs-blue .ui-tabs-nav li.ui-tabs-active a {
    font-weight: bold !important;
    text-decoration: none !important;
    color: #000 !important;
}

.fh_tabs-blue .ui-tabs-nav li:hover {
    border-color: darkblue !important;
    background-color: lightblue !important;
    color: #000 !important;
}

.fh_tabs-blue .ui-tabs-nav a:hover {
    color: #000 !important;
}

/* -------green */

.fh_tabs-green .ui-tabs-nav li {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: darkgreen !important;
    color: #fff !important;
}

.fh_tabs-green .ui-tabs-nav li a {
    text-decoration: none !important;
    color: #fff !important;
}

.fh_tabs-green .ui-tabs-nav li.ui-tabs-active {
    background-color: #fff !important;
    color: #000 !important;
}

.fh_tabs-green .ui-tabs-nav li.ui-tabs-active a {
    font-weight: bold !important;
    text-decoration: none !important;
    color: #000 !important;
}

.fh_tabs-green .ui-tabs-nav li:hover {
    border-color: darkgreen !important;
    background-color: lightgreen !important;
    color: #000 !important;
}

.fh_tabs-green .ui-tabs-nav a:hover {
    color: #000 !important;
}

/* -------yellow */

.fh_tabs-yellow .ui-tabs-nav li {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: goldenrod !important;
    color: #000 !important;
}

.fh_tabs-yellow .ui-tabs-nav li a {
    text-decoration: none !important;
    color: #000 !important;
}

.fh_tabs-yellow .ui-tabs-nav li.ui-tabs-active {
    background-color: #fff !important;
    color: #000 !important;
}

.fh_tabs-yellow .ui-tabs-nav li.ui-tabs-active a {
    font-weight: bold !important;
    text-decoration: none !important;
    color: #000 !important;
}

.fh_tabs-yellow .ui-tabs-nav li:hover {
    border-color: goldenrod !important;
    background-color: lightyellow !important;
    color: #000 !important;
}

.fh_tabs-yellow .ui-tabs-nav a:hover {
    color: #000 !important;
}

/* -------foothillred */


.fh_tabs-foothillred .ui-tabs-nav li {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #A61E2F !important;
    color: #fff !important;
}

.fh_tabs-foothillred .ui-tabs-nav li a {
    text-decoration: none !important;
    color: #fff !important;
}

.fh_tabs-foothillred .ui-tabs-nav li.ui-tabs-active {
    background-color: #fff !important;
    color: #000 !important;
}

.fh_tabs-foothillred .ui-tabs-nav li.ui-tabs-active a {
    font-weight: bold !important;
    text-decoration: none !important;
    color: #000 !important;
}

.fh_tabs-foothillred .ui-tabs-nav li:hover {
    border-color: #A61E2F !important;
    background-color: #f88895 !important;
    color: #000 !important;
}

.fh_tabs-foothillred .ui-tabs-nav a:hover {
    color: #000 !important;
}

#tab-alt-1,
#tab-alt-2,
#tab-alt-3,
#tab-alt-4,
#tab-alt-5,
#tab-alt-6 {
    border-bottom: 1px solid #ddd !important;
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;

}

.tabs-alt .ui-tabs-nav li {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #c7c7c7 !important;
}

.tabs-alt .ui-tabs-nav li a {
    text-decoration: none !important;
    color: #000 !important;
}

.tabs-alt .ui-tabs-nav li.ui-tabs-active {
    background-color: #fff !important;
    color: #000 !important;
}

.tabs-alt .ui-tabs-nav li.ui-tabs-active a {
    font-weight: bold !important;
    text-decoration: none !important;
    color: #000 !important;
}

.tabs-alt .ui-tabs-nav li:hover {
    border-color: rgb(152, 167, 177) !important;
    background-color: rgb(219, 218, 218) !important;
}

/* End Alt Tabs widget */
/* ------------------------------------------------------------------ */

/* begin line rule section in Offset */
.fh_fancyheader-sm,
.fh_fancyheader-md,
.fh_fancyheader-lg {
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 0px;
}

.fh_fancyheader-sm>h2,
.fh_fancyheader-sm>h3,
.fh_fancyheader-sm>h4,
.fh_fancyheader-sm>h5,
.fh_fancyheader-sm>h6,
.fh_fancyheader-md>h2,
.fh_fancyheader-md>h3,
.fh_fancyheader-md>h4,
.fh_fancyheader-md>h5,
.fh_fancyheader-md>h6,
.fh_fancyheader-lg>h2,
.fh_fancyheader-lg>h3,
.fh_fancyheader-lg>h4,
.fh_fancyheader-lg>h5,
.fh_fancyheader-lg>h6 {
    border-top: 2px solid #979797;
    box-sizing: border-box;
    color: #000;
    /* font-weight: 800; */
    /* letter-spacing: 3px; */
    line-height: 1.5;
    margin: 30px 0px 6px;
    text-align: center;
    text-rendering: optimizelegibility;

}


.fh_fancyheader-sm>h2>img,
.fh_fancyheader-sm>h3>img,
.fh_fancyheader-sm>h4>img,
.fh_fancyheader-sm>h5>img,
.fh_fancyheader-sm>h6>img {
    box-sizing: border-box;
    display: block;
    text-align: center;
    width: 60px;
    height: 60px;
    padding: 0px;
    margin: -30px auto 0px;
    /* border-radius: 60px; */
}

.fh_fancyheader-md>h2>img,
.fh_fancyheader-md>h3>img,
.fh_fancyheader-md>h4>img,
.fh_fancyheader-md>h5>img,
.fh_fancyheader-md>h6>img {
    box-sizing: border-box;
    display: block;
    text-align: center;
    width: 90px;
    height: 90px;
    padding: 0px;
    margin: -45px auto 0px;
    /* border-radius: 60px; */
}


.fh_fancyheader-lg>h2>img,
.fh_fancyheader-lg>h3>img,
.fh_fancyheader-lg>h4>img,
.fh_fancyheader-lg>h5>img,
.fh_fancyheader-lg>h6>img {
    box-sizing: border-box;
    display: block;
    text-align: center;
    width: 120px;
    height: 120px;
    padding: 0px;
    margin: -60px auto 0px;
    /* border-radius: 60px; */
}


.fh_notepaper {
    position: relative;
    margin: 30px auto;
    padding: 29px 20px 20px 45px;
    line-height: 30px;
    color: #6a5f49;
    text-shadow: 0 1px 1px white;
    background-color: #f2f6c1;
    background-image: radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
    border: 1px solid #c3baaa;
    border-color: rgba(195, 186, 170, 0.9);
    box-sizing: border-box;
}

.fh_notepaper:before,
.fh_notepaper:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
}

.fh_notepaper:before {
    left: 28px;
    width: 2px;
    border: solid #efcfad;
    border-color: rgba(239, 207, 173, 0.9);
    border-width: 0 1px;
}

.fh_rotate-2 {
    transform: rotate(-2deg);
}

.fh_rotate-5 {
    transform: rotate(-5deg);
}

.fh_rotate-10 {
    transform: rotate(-10deg);
}

.fh_rotate-15 {
    transform: rotate(-15deg);
}

.fh_rotate5 {
    transform: rotate(5deg);
}

/* --End section offset */

/* Begin Interior Grids */
/* Author: Jolie */
/* COMMENTS: fixed 2 column Grid. Use any thing inside but every other container will alternate 1/4 and 3/4 of container width or 50/50
    Atomic Design: Molecule
    Use grid class as outside grid wrapper
    Was created for Student Support Portal header on front home page with an icon image and on left and text header on right
    NOTE: There are two Media Queries  min-width means that for medium tablet screen and larger 
    and a smaller screen for media table where these stack in 2 equal single columns with some child modifications
    >>see also 50-50 version also used for Student Support Portal
*/

@media (min-width: 768px) {

    .fh_grid-interior-5-95 {
        display: grid;
        grid-template-columns: 1fr 19fr;
    }

    .fh_grid-interior-10-90 {
        display: grid;
        grid-template-columns: 1fr 9fr;
    }

    .fh_grid-interior-20-80 {
        display: grid;
        grid-template-columns: 1fr 4fr;
    }

    .fh_grid-interior-75-25 {
        display: grid;
        grid-template-columns: 3fr 1fr;
    }

    .fh_grid-interior-25-75 {
        display: grid;
        grid-template-columns: 1fr 3fr;
    }

    .fh_grid-interior-50-50 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .fh_grid-interior-25-75>article {
        padding: 8px;
    }
}

@media (max-width: 768px) {

    .fh_grid-interior-5-95,
    .fh_grid-interior-10-90,
    .fh_grid-interior-25-75,
    .fh_grid-interior-50-50,
    .fh_grid-interior-20-80,
    .fh_grid-interior-75-25 {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 0px;
    }

    .fh_grid-interior-25-75>div:nth-child(2) {
        padding-bottom: 2em;
    }
}

/* End Interior Grids */
/* Begin RSLS Grid.  */
/* Author: Jolie */
/* COMMENTS: fixed 4+1 column Grid. 

*/

.rsls_row>article.time {
    background-color: #a61F38;
    display: block;
    position: relative;
    width: 110px;
}

.rsls_row>article.time>h3 {
    text-align: center;
    margin: 20% auto;
    font: normal 84px Sans-Serif;
    letter-spacing: 6px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #fff;
    word-wrap: none;
    line-break: strict;
    overflow: visible;
}



.rsls_links {
    text-align: center;
}

.rsls_grid-3>article .sess_content {
    text-align: left;
    border-top: 0;
    margin: 0px;
    margin-top: -5px;
   
}

@media only screen and  (max-width: 1175px) {
    .rsls_sched-list{
        padding: 0px 50px;
        margin: auto;
        
        width: 550px;
    }

    .rsls_row>article.time {

    width: 100%;
    margin-bottom: 20px;
    }

    .rsls_row>article.time>h3 {
        font: normal 64px Sans-Serif;
    }
    
    .rsls_row>article.time>h3 {
        margin: 10px auto;
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
    }

    .rsls_grid-10-90 {
        display: grid;
        grid-template-columns: 1fr;
    }

 
    
    .rsls_grid-3 {
        display: grid;
        grid-template-columns: minmax(375px, 1fr);
        gap: 5px;
        justify-items: center;
        justify-content: space-evenly;
    }
    .rsls_sessionlist {
        text-align: left;
        max-width: 375px;
    }
}
@media only screen and (min-width: 1175px) {
    .rsls_sched-list{
        padding: 0px 50px;
        margin: auto;
        
        width: 550px;
    }


    .rsls_grid-10-90 {
        display: grid;
        grid-template-columns: 1fr 9fr;
    }
    .rsls_grid-10-80-10 {
        display: grid;
        grid-template-columns: 1fr 8fr 1fr;
    }
    .rsls_grid-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(325px, 1fr));
        gap: 5px;
        justify-items: center;
        justify-content: space-evenly;
    }
    .rsls_sessionlist {
        text-align: left;
        max-width: 325px;
    }
}

.rsls_bio-pic {
    width: 100px;
    max-width: 100px;
    padding: 0px;
    margin: 0px 40px;
    box-shadow: 3px 3px 8px 0px #a2a2a2;
}
.rsls_buttons {
    width: 300px;
    margin: auto;
    text-align: center;
    display: grid;
    gap: 7px;
 
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr);
}
.rsls_buttons div{
    width: 125px;
    padding:5px 8px;
}

.rsls_buttons div img{
    max-width: 115px;
    
}
@media only screen and (min-width: 1250px) {
    .rsls_sched-list{
        padding: 0px 50px;
        margin: auto;
        width: 550px;
    }



    .rsls_grid-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(400px, 1fr));
        gap: 5px;
        justify-items: center;
        justify-content: space-evenly;
    }
    .sess_content {
        
        max-width: 400px;
    }
}



.rsls_grid-3>article .sess_content-special {
    text-align: center;
    /* padding: 20px 10px; */
    /* border: 1px solid rgb(136, 136, 248); */
    border-top: 0;
    margin: 0px;
    margin-top: -5px;
   
}

.rsls_grid-3>article .title {
    text-align: left;
    margin: 10px;
    padding: 15px 5%;
    font-size: 20px;
    line-height: 24px;
}

.special_color {
    background-color: #D94625;
    margin: 0;
    padding: 0;
}

.special_color p {
    color: #fff;
    margin: 0;
    padding: 0;
}

.rsls_main_sess {
    margin: 0;
    padding: 0;
    width: 100%;
}

.rsls_grid-3>article .theme,
.fh_grid-rsls-special>article .theme {
    text-align: center;
    margin: 0px;
    font-size: 20px;
    line-height: 0px;
    height: 28px;
    padding: 0px;
    font-weight: 800;
    color: #fff;
    width: 100%;
}


.rsls_grid-3>article .col1{
    background-color: #D9B95B;
    color: #000000;
}

.rsls_grid-3>article .col2 {
    background-color: #8C1D04;
}

.rsls_grid-3>article .col3 {
    background-color: #D94625;
}

/* end RSLS Grid with 4 columns */

.rsls_textover {
    white-space: nowrap;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;

}

.rsls_textover:hover {
    white-space: normal;
    overflow: visible;
    z-index: 999;

    background-color: #efefef;
}

h2.rsls_gallery-header {
    font-weight: 800;
    text-align: center;
    font-size: 64px;
    color:#D94625;
    
    text-shadow: -4px 4px 3px rgba(129, 129, 129, 0.836);
}

.fh_grid-auto-rsls_gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(375px, 1fr));
    grid-auto-rows: min-content;
    gap: 45px;
    object-fit: contain;
    align-items: center;
    justify-content: center;
    padding: 15px 25px 25px;
    overflow: hidden;
}
.rsls_gallery-credit{
    font-weight: 800;
    text-align: center;
    font-size: 11px;
    color:darkred;

}

article.fh_card-rsls_gallery {
    background-color:#fff;
    text-align: center;
    text-align: left;
    border: 1px solid #6e6e6e;
    object-fit: contain;
    padding-bottom: 10px;
    
    box-shadow: -4px 4px 3px rgba(129, 129, 129, 0.836);
}

article.fh_card-rsls_gallery>img {

    width: 100%;
    max-height: 100%;
    object-fit: cover;
    margin: 0px auto;
}


.rsls_gallery-darkwood {
    /* background-color: grey; */
    width: 100%;
    padding: 40px;

    /* background-image: url("../gallery_images/redwood.jpg"); */
   background-image: url("https://foothillcollege.instructure.com/courses/15067/files/4363100/preview");
    background-repeat: repeat;
  
}
.rsls_gallery-lightwood {
    /* background-color: grey; */
    width: 100%;
    padding: 40px;

    /* background-image: url("../gallery_images/redwood.jpg"); */
   background-image: url("https://foothillcollege.instructure.com/courses/15067/files/4363102/preview");
    background-repeat: repeat;
  
}

.rsls_gallery-bricks {
    /* background-color: grey; */
    width: 100%;
    padding: 40px;

    /* background-image: url("../gallery_images/redwood.jpg"); */
   background-image: url("https://foothillcollege.instructure.com/courses/15067/files/4379941/preview");
    background-repeat: repeat;
  
}


/*/////// End Foothill Design ///////////*/

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

/*/////// Begin Atomic Design - Generic for State Wide distribution ///////////*/

/* Begin Column Grid.  */
/* Author: Jolie */
/* COMMENTS: A 2 column format for Canvas Cert
    To replace the flexgrid
*/
@media only screen and (max-width: 820px) {
    .ccc_show-grid .ccc_grid {
        border: 1px solid grey;
    }

    .ccc_show-grid .ccc_grid-column-1 {
        border: 1px solid blue;
    }

    .ccc_show-grid .ccc_grid-column-2 {
        border: 1px solid red;
    }

    .ccc_show-grid .ccc_grid-column-footer {
        border: 1px solid green;
    }

    .ccc_grid-row-100 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0px;
        justify-items: center;
    }


    .ccc_grid-row-90-10 .ccc_grid-column-1 {
        width: 100%;
    }

    .ccc_grid-row-90-10 .ccc_grid-column-2 {
        width: 100%;
    }

    .ccc_grid-row-100 .ccc_grid-footer {
        width: 100%;
    }

    /* .ccc_grid-column-1 p,
    .ccc_grid-column-1 ol,
    .ccc_grid-column-1 ul{
        padding-left: 35px;
        padding-right:35px;
    } */
    .ccc_grid-top {
        display: grid;
        align-items: start;
        align-items: start;
    }

    .ccc_grid-middle {
        display: grid;
        align-items: center;
    }

    .ccc_grid-bottom {
        display: grid;
        align-items: end;
    }

    .ccc_grid-left {
        display: grid;
        text-align: left;
        justify-content: start;
    }

    .ccc_grid-center {
        display: grid;
        text-align: center;
        justify-content: center;
    }

    .ccc_grid-right {
        display: grid;
        text-align: right;
        justify-content: end;
    }
}

@media only screen and (min-width: 820px) {
    .ccc_show-grid>* {
        border: 1px solid grey;
    }

    .ccc_show-grid .ccc_grid-column-1 {
        border: 1px solid blue;
    }

    .ccc_show-grid .ccc_grid-column-2 {
        border: 1px solid red;
    }

    .ccc_show-grid .ccc_grid-column-footer {
        border: 1px solid green;
    }

    .ccc_grid-row-100 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0px;
        justify-items: center;
    }

    .ccc_grid-row-90-10 {
        display: grid;
        grid-template-columns: 9fr 1fr;
        gap: 0px;
        justify-items: center;
        justify-content: space-evenly;
    }

    .ccc_grid-row-90-10 .ccc_grid-column-1 {
        width: 100%;
    }

    .ccc_grid-row-90-10 .ccc_grid-column-2 {
        width: 100%;
        /* border: 1px solid red; */
    }

    .ccc_grid-row-100 .ccc_grid-footer {
        width: 100%;
    }

    /* .ccc_grid-column-1 p,
    .ccc_grid-column-1 ol,
    .ccc_grid-column-1 ul{
        padding-left: 35px;
        padding-right: 35px;
    } */
    .ccc_grid-top {
        display: grid;
        align-items: start;
    }

    .ccc_grid-middle {
        display: grid;
        align-items: center;
    }

    .ccc_grid-bottom {
        display: grid;
        align-items: end;
    }

    .ccc_grid-left {
        display: grid;
        text-align: left;
        justify-content: start;
    }

    .ccc_grid-center {
        display: grid;
        text-align: center;
        justify-content: center;
    }

    .ccc_grid-right {
        display: grid;
        text-align: right;
        justify-content: end;
    }
}

/* end Column Grid */


/* Begin Auto Grid.  */
/* Author: Paula (cards modified by Jolie) */
/* COMMENTS: Autofill Grid. Use ANY container for Card with one of the two (round or square)
    Use grid class as outside grid wrapper
    Use ' ccc_card-square' or ' ccc_card-round' as internal card
    rather than having my-container contain center and margin, it is here in the card
*/
.ccc_grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    justify-items: center;
    justify-content: space-evenly;
    object-fit: contain;
}

/* end Auto Grid */
/* ------------------------------------------------------------------ */

/* Begin Fixed Col Grid.  */
/* Author: Paula (cards modified by Jolie) */
/* COMMENTS: 2 and 3 column Grid. Use ANY container for Card with one of the two (round or square)
    Use grid class as outside grid wrapper
    Use ' ccc_card-square' or ' ccc_card-round' as internal card
    rather than having my-container contain center and margin, it is here in the card
*/
@media (min-width: 768px) {
    .ccc_grid-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding: 10px;
    }

    .ccc_grid-3col {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
        padding: 10px;
    }
}

@media (max-width: 768px) {
    .ccc_grid-2col {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px;
    }

    .ccc_grid-3col {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px;
    }
}

/* end Fixed Col Grid */
/* ------------------------------------------------------------------ */

/* Begin Grid Cards.  */
/* Author: Jolie (based on Article cards/tiles by Paula) */
/* COMMENTS:  Use ANY container for Card with one of the two (round or square)
    Use grid class as outside grid wrapper
    Use ' ccc_card-square' or ' ccc_card-round' as internal card
    rather than having my-container contain center and margin, it is here in the card
*/
.ccc_card-round,
.ccc_card-square {
    text-align: center;
    border: 3px solid #e7e7e7;
    margin: 0px 0px 0px 0px;
}

.ccc_card-round {
    border-radius: 10px;
}

.ccc_grid-2col>.ccc_card-round,
.ccc_grid-2col>.ccc_card-square,
.ccc_grid-3col>.ccc_card-round,
.ccc_grid-3col>.ccc_card-square {
    padding: 20px 10px;
}

/* end Auto Grid */
/* ------------------------------------------------------------------ */

/* Begin Interior Grids */
/* Author: Jolie */
/* COMMENTS: fixed 2 column Grid. Use any thing inside but every other container will alternate 1/4 and 3/4 of container width or 50/50
    Atomic Design: Molecule
    Use grid class as outside grid wrapper
    Was created for Student Support Portal header on front home page with an icon image and on left and text header on right
    NOTE: There are two Media Queries  min-width means that for medium tablet screen and larger 
    and a smaller screen for media table where these stack in 2 equal single columns with some child modifications
    >>see also 50-50 version also used for Student Support Portal
*/

@media (min-width: 768px) {
    .ccc_grid-interior-20-80 {
        display: grid;
        grid-template-columns: 1fr 4fr;
    }

    .ccc_grid-interior-75-25 {
        display: grid;
        grid-template-columns: 3fr 1fr;
    }

    .ccc_grid-interior-25-75 {
        display: grid;
        grid-template-columns: 1fr 3fr;
    }

    .ccc_grid-interior-50-50 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .ccc_grid-interior-25-75>article {
        padding: 8px;
    }
}

@media (max-width: 768px) {

    .ccc_grid-interior-25-75,
    .ccc_grid-interior-50-50,
    .ccc_grid-interior-20-80,
    .ccc_grid-interior-75-25 {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 0px;
    }

    .ccc_grid-interior-25-75>div:nth-child(2) {
        padding-bottom: 2em;
    }
}

/* End Interior Grids */

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Begin Home page headers */
/* Author: Jolie */
/* COMMENTS: 
    Created for home pages in Student Support Portal
    This collection assumes the top level container (e.g. DIV) then headers and images that follow are styled 
    so class is only needed at the top level
*/
/* .ccc_home-header {
    margin: 8px;
    padding: 0px 8px 8px 8px;
    background-color: var(--ic-brand-button--primary-bgd);
}

.ccc_home-header>h2 {
    color: #ffffff;
    font-size: 20px;
    line-height: 22px;
    margin: 20px 0px 0px 0px;
}

.ccc_home-header>img {
    margin: 5px auto 0px auto;
} */

.ccc_home-header {
    min-height: 72px;
    margin: 8px;
    padding: 0px 8px 8px 8px;
    background-color: #a61c21;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}

.ccc_home-header>h2 {
    color: #ffffff;
    /* margin-top: 30px;  */
    font-size: 20px;
    line-height: 22px;
    margin: 0px;
}

.ccc_home-header>img {
    margin: 0px auto;
    object-fit: contain;
}


.ccc_home-body {
    height: 6em;
}

.ccc_home-body p {
    margin: 15px 1em;
    line-height: 20px;
}

.ccc_home-btn_bottom-right {
    text-align: right;
    padding-right: 20px;
    font-size: .8em;
}

/* End Home Header collection */

/* ------------------------------------------------------------------ */

/* Begin Button Bottom*/
/* Author: Jolie */
/* COMMENTS: 
    Created for SSP.  Uses absolute positioning to keep the zoom room buttons 
    at bottom of tile regardless of tile height
    NOTE:  The button outline uses canvas theme primary color variable which can be overridden with inline border color.
*/
@media (max-width: 768px) {
    .ccc_btn-bottom {
        right: 5%;
    }
}

.ccc_btn-bottom {
    text-align: center;
    font-size: .8em;
    border: 2px solid var(--ic-brand-button--primary-bgd);
    padding: 8px 8px;
    width: 80%;
    position: absolute;
    right: 10%;
    bottom: 1em;
    border-radius: 13px;
}

/* End Button Bottom/*/

/* ------------------------------------------------------------------ */

/* Begin Corners - square/*/
/* Author: Jolie */
/* COMMENTS: fixed 2 column Grid. Use any thing inside but every other container will alternate 1/4 and 3/4 of container width or 50/50
    Atomic Design: Molecule
    Use grid class as outside grid wrapper
    Was created for Student Support Portal header on front home page with an icon image and on left and text header on right
    NOTE: There are two Media Queries  min-width means that for medium tablet screen and larger 
    and a smaller screen for media table where these stack in 2 equal single columns with some child modifications
    >>see also 50-50 version also used for Student Support Portal
*/
.ccc_square-corner {
    /* this is actually default so its not needed but for continuity with roundish corners */
    border-radius: 0px;
}

.ccc_roundish-corner {
    border-radius: 5px;
}

.ccc_round-corner {
    border-radius: 10px;
}

.ccc_opacity-90 {
    opacity: 0.9;
}

.ccc_opacity-80 {
    opacity: 0.8;
}

.ccc_opacity-70 {
    opacity: 0.7;
}

.ccc_opacity-60 {
    opacity: 0.6;
}

.ccc_opacity-50 {
    opacity: 0.5;
}

/* ------------------------------------------------------------------ */

/**/
/* Begin Brand Color Variables/*/
/* Author: Jolie */
/* COMMENTS: This uses the Theme variables.  During Development outside of canvas there are commented options to test other colors or replicate your teheme colors
*/
.ccc_theme-primary-color {

    background-color: var(--ic-brand-button--primary-bgd);
    color: #ffffff;
}

/* End Brand Colors */
/* Begin Box Shadows/*/
/* Author: Jolie */
/* COMMENTS: 
    1 = bold shadow.  The others are more subtle 
    Adds a box shadow to a container such as an image or a box
*/

.ccc_shadow-1 {
    box-shadow: 10px 10px 5px grey;
}

.ccc_shadow-2 {
    box-shadow: 0px 0px 8px #bebaba;
}

.ccc_shadow-3 {
    box-shadow: 3px 3px 8px 0px #a2a2a2;
}

.ccc_shadow-4 {
    box-shadow: 1px -4px 6px 2px #a2a2a2;
}

.ccc_shadow-5 {
    box-shadow: -5px 5px 3px 3px #aaaaaa;
}

.ccc_shadow-6 {
    box-shadow: -3px 3px 8px 3px #a2a2a2;
}

/* End Box Shadows/*/

/* ------------------------------------------------------------------ */


/* Begin SSP Tile Header/*/
/* Author: Jolie */
/* COMMENTS: 
    Was created for Student Support Portal header on front home page with an icon image and on left and text header on right
    NOTE: There are two Media Queries  min-width means that for medium tablet screen and larger 
    and a smaller screen Which assumes a single column grid so centers instead of left align
*/

@media (min-width: 768px) {
    .ccc_tile-header {
        text-align: left;
        font-family: sans-serif;
        color: var(--ic-brand-button--primary-bgd);
        font-weight: 800;
    }
}

@media (max-width: 768px) {
    .ccc_tile-header {
        text-align: center;
        font-family: sans-serif;
        color: var(--ic-brand-button--primary-bgd);
        font-weight: 800;
    }
}

/* End SSP Tile Header/*/


/* ------------------------------------------------------------------ */

/* Begin Button Bottom*/
/* Author: Jolie */
/* COMMENTS: 
    Created for SSP.  Uses absolute positioning to keep the zoom room buttons 
    at bottom of tile regardless of tile height
*/
@media (max-width: 768px) {
    .ccc_btn-bottom {
        right: 5%;
    }
}

.ccc_btn-bottom {
    text-align: center;
    font-size: .8em;
    border: 2px solid #a61e2f;
    padding: 8px 8px;
    width: 80%;
    position: absolute;
    right: 10%;
    bottom: 1em;
    border-radius: 13px;
}

/* End Button Bottom/*/


.ccc_top-marg15 {
    margin-top: 15px;
}

.ccc_top-marg50 {
    margin-top: 50px;
}

.ccc_top-marg75 {
    margin-top: 75px;
}

.ccc_top-pad15 {
    padding-top: 15px;
}

.ccc_left-pad25 {
    padding-left: 25px;
}

.ccc_bot-pad25 {
    padding-bottom: 25px;
}

.ccc_section-head-subtle {
    margin: 10px auto 10px auto;
    width: 90%;

    /* padding: 10px; */
    text-align: left;
    font-size: 32px;
    line-height: 44px;
    height: auto;
    font-weight: 500;
}

.ccc_section-head-subtle {
    text-align: center;
}

.ccc_head-rule-top {
    padding: 10px auto 20px auto;
}

.ccc_head-rule-bottom {
    padding: 10px auto 10px auto;
}

.ccc_pad-light {
    padding: .3em;
}

.ccc_pad-medium {
    padding: .7em;
}

.ccc_pad-heavy {
    padding: 2em;
}

.ccc_pad-lineh40 {
    line-height: 40px;
}

/*font*/
.ccc_font-script {
    font-family: sofia, Sofia, cursive;
}

/* Color-box */
.ccc_colorbox-almostBlack {
    background-color: #333;
    color: white;
}


/* ------------------------------------------------------------------ */
/* Begin Alt VERTICAL Tabs Widget */
/* Author: Jolie */
/* COMMENTS: Test to create a simple Slideshow carousel widget */
.tabs-alt.tabs-vertical {
    padding: 0;
    width: 42em;
}

.tabs-alt.tabs-vertical .ui-widget-header {
    border: none;
}

.tabs-alt.tabs-vertical .ui-tabs-nav {
    float: left;
    width: 10em;
    background: #CCC;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid gray;
}

.tabs-alt.tabs-vertical .ui-tabs-nav li {
    clear: left;
    width: 100%;
    margin: 0.2em 0;
    border: 1px solid gray;
    border-width: 1px 0 1px 1px;
    border-radius: 4px 0 0 4px;
    overflow: hidden;
    position: relative;
    right: -2px;
    z-index: 2;
}

.tabs-alt.tabs-vertical .ui-tabs-nav li a {
    display: block;
    width: 100%;
    padding: 0.6em 1em;
}

.tabs-alt.tabs-vertical .ui-tabs-nav li a:hover {
    cursor: pointer;
}

.tabs-alt.tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0.2em;
    padding-bottom: 0;
    border-right: 1px solid white;
}

.tabs-alt.tabs-vertical .ui-tabs-nav li:last-child {
    margin-bottom: 10px;
}

.tabs-alt.tabs-vertical .ui-tabs-panel {
    float: left;
    width: 28em;
    border-left: 1px solid gray;
    border-radius: 0;
    position: relative;
    left: -1px;
}

/* ------------------------------------------------------------------ */
/* begin accordion widget */
/* Author: Jolie */
/* COMMENTS: global - Override of default color for selected accordion section. */
h3.ccc_accordion-color-yellow.ui-accordion-header-active {
    background-color: #f4b41b !important;
    color: #133e59 !important;
    border: 1px solid #f4b41b !important;
}

.jqueryUIWidgetized.ccc_accordion-color-yellow .ui-state-active {
    background-color: #f4b41b !important;
    color: #133e59 !important;
    border: 1px solid #f4b41b !important;
}

.jqueryUIWidgetized.ccc_accordion-color-yellow .ui-accordion-header-collapsed {
    background-color: #dbdbdb !important;
    color: #000 !important;
    border: 1px solid #f4b41b !important;
}

h3.ccc_accordion-color-grey.ui-accordion-header-active,
h3.ccc_accordion-color-gray.ui-accordion-header-active {
    background-color: #9c9c9c !important;
    color: #fff !important;
    border: 1px solid #7a7a7a !important;
}

.jqueryUIWidgetized.ccc_accordion-color-grey .ui-accordion-header-collapsed,
.jqueryUIWidgetized.ccc_accordion-color-gray .ui-accordion-header-collapsed {
    background-color: #dbdbdb !important;
    color: #000 !important;
    border: 1px solid #575757 !important;
}

.jqueryUIWidgetized.ccc_accordion-color-grey .ui-state-active,
.jqueryUIWidgetized.ccc_accordion-color-gray .ui-state-active {
    background-color: #9c9c9c !important;
    color: #fff !important;
    border: 1px solid #7a7a7a !important;
}



h3.ccc_accordion-color-green.ui-accordion-header-active {
    background-color: darkgreen !important;
    color: #fff !important;
    border: 1px solid #043304 !important;
}

.jqueryUIWidgetized.ccc_accordion-color-green .ui-accordion-header-collapsed {
    background-color: #dbdbdb !important;
    color: #000 !important;
    border: 1px solid #043304 !important;
}

.jqueryUIWidgetized.ccc_accordion-color-green .ui-state-active {
    background-color: darkgreen !important;
    color: #fff !important;
    border: 1px solid #043304 !important;
}


h3.ccc_accordion-color-darkblue.ui-accordion-header-active {
    background-color: darkblue !important;
    color: #fff !important;
    border: 1px solid #030346 !important;
}

.jqueryUIWidgetized.ccc_accordion-color-darkblue .ui-accordion-header-collapsed {
    background-color: #dbdbdb !important;
    color: #000 !important;
    border: 1px solid #030346 !important;
}

.jqueryUIWidgetized.ccc_accordion-color-darkblue .ui-state-active {
    background-color: darkblue !important;
    color: #fff !important;
    border: 1px solid #030346 !important;
}

h3.ccc_accordion-color-lightblue.ui-accordion-header-active {
    background-color: #88bbee !important;
    color: #000 !important;
    border: 1px solid #336699 !important;
}

.jqueryUIWidgetized.ccc_accordion-color-lightblue .ui-accordion-header-collapsed {
    background-color: #dbdbdb !important;
    color: #000 !important;
    border: 1px solid #336699 !important;
}

.jqueryUIWidgetized.ccc_accordion-color-lightblue .ui-state-active {
    background-color: #88bbee !important;
    color: #000 !important;
    border: 1px solid #336699 !important;
}

h3.ccc_accordion-color-brand.ui-accordion-header-active {
    background-color: #A61E2F !important;
    color: #ffffff !important;
    border: 1px solid #A61E2F !important;
}

.jqueryUIWidgetized.ccc_accordion-color-brand .ui-accordion-header-collapsed {
    background-color: #dbdbdb !important;
    color: #000 !important;
    border: 1px solid #A61E2F !important;
}

.jqueryUIWidgetized.ccc_accordion-color-brand .ui-state-active {
    background-color: #A61E2F !important;
    color: #ffffff !important;
    border: 1px solid #A61E2F !important;
}

.jqueryUIWidgetized .ui-icon {
    margin-right: 7px !important;
}

/* End accordion widget */
/* ------------------------------------------------------------------ */

/* begin line rule section in Offset */
.ccc_offset-section {
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 0px;
}

.ccc_offset-section>h2,
.ccc_offset-section>h3,
.ccc_offset-section>h4 {
    border-top: 2px solid #979797;
    box-sizing: border-box;
    color: #000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 1.5;
    margin: 10px 0px 6px;
    text-align: center;
    text-rendering: optimizelegibility;
    text-transform: uppercase;
}

.ccc_offset-section>h2>img,
.ccc_offset-section>h3>img,
.ccc_offset-section>h4>img {
    box-sizing: border-box;
    display: block;
    text-align: center;
    width: 60px;
    height: 60px;
    padding-left: 0px;
    margin: -30px auto 0px;
    border-radius: 60px;
}

.ccc_offset-section-left {
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 0px;
}

.ccc_offset-section-left>h2,
.ccc_offset-section-left>h3,
.ccc_offset-section-left>h4 {
    border-top: 2px solid #979797;
    box-sizing: border-box;
    color: #000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* font-size: 22px; */
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 1.5;
    margin: 10px 0px 6px;
    text-align: center;
    text-rendering: optimizelegibility;
    text-transform: uppercase;
}

.ccc_offset-section-left>h2>img,
.ccc_offset-section-left>h3>img,
.ccc_offset-section-left>h4>img {
    float: left;
    box-sizing: border-box;
    display: block;
    text-align: left;
    width: 60px;
    height: 60px;
    padding-left: 0px;
    margin: -30px 0px 0px 10px;
    border-radius: 60px;
}

.ccc_sunset-section {
    box-sizing: border-box;
     /* : auto; */
    overflow-y: hidden;
    padding: 40px 0px 15px 0px;
}

.ccc_sunset-section>h2 {
    border-top: 2px solid #979797;
    box-sizing: border-box;
    color: #000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* font-size: 22px; */
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 1.5;
    margin: 10px 0px 6px;
    text-align: center;
    text-rendering: optimizelegibility;
    text-transform: uppercase;
}

.ccc_sunset-section>h2>img {
    box-sizing: border-box;
    display: block;
    text-align: center;
    width: 100px;
    height: 100px;
    padding-left: 0px;
    margin: -50px auto 0px;
    border-radius: 60px;
}


.ccc_notepaper {
    position: relative;
    margin: 30px auto;
    padding: 29px 20px 20px 45px;
    /*  width: 60%;*/
    line-height: 30px;
    color: #6a5f49;
    text-shadow: 0 1px 1px white;
    background-color: #f2f6c1;
    background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
    background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -moz-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
    background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -o-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
    border: 1px solid #c3baaa;
    border-color: rgba(195, 186, 170, 0.9);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02); */
    /* box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02); */

}

.ccc_notepaper:before,
.ccc_notepaper:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
}

.ccc_notepaper:before {
    left: 28px;
    width: 2px;
    border: solid #efcfad;
    border-color: rgba(239, 207, 173, 0.9);
    border-width: 0 1px;
}

.ccc_skew {
    /* background: rgba(242, 246, 193, 0.9); */
    /* border: 1px solid rgba(170, 157, 134, 0.7); */
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

/* --End section offset */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* begin Intersectional Box */
/* Author: Jolie */
/* COMMENTS: A box with attractive eye-cathing double div insectional 
            design where the combined color is stronger than each individual color. */
/* Withs with the box color classes for atomic design control */
.ccc_box-intersectional {
    border: 4px solid rgba(0, 0, 0, 1);
    background-color: rgba(0, 0, 0, .07);
    width: 80%;

    margin: 2% auto;
}

.ccc_box-intersectional>div {
    border: 4px solid rgba(0, 0, 0, .5);
    background-color: rgba(0, 0, 0, .07);
    width: 91%;
    /* height: 28vh; */
    padding: 35px 25px;
    margin: -25px 2%;
    overflow: hidden;
}

.ccc_box-color-gold {
    border-color: rgba(235, 174, 8, 1);
    /* background-color: #fab90725; */
    background-color: rgba(250, 185, 7, .1);
}

.ccc_box-color-gold>div {
    border-color: rgba(235, 174, 8, .5);
    /* background-color: #ecdd0a3b; */
    background-color: rgba(236, 221, 10, 0.2);
    color: #000;
}

.ccc_box-color-blue {
    border-color: rgba(0, 0, 255, 1);
    /* background-color: #fab90725; */
    background-color: rgba(0, 0, 255, .5);

}

.ccc_box-color-blue>div {
    border-color: rgba(0, 0, 255, .5);
    /* background-color: #ecdd0a3b; */
    background-color: rgba(0, 0, 255, .6);
    color: #fff;
}

.ccc_box-color-red {
    border-color: rgb(143, 1, 1);
    /* background-color: #fab90725; */
    background-color: rgba(143, 1, 1, .6);

}

.ccc_box-color-red>div {
    border-color: rgba(143, 1, 1, .5);
    /* background-color: #ecdd0a3b; */
    background-color: rgba(143, 1, 1, .7);
    color: #fff;
}

.ccc_box-color-green {
    border-color: rgb(2, 63, 2);
    /* background-color: #fab90725; */
    background-color: rgba(2, 63, 2, .6);

}

.ccc_box-color-green>div {
    border-color: rgba(2, 63, 2, .5);
    /* background-color: #ecdd0a3b; */
    background-color: rgba(2, 63, 2, .7);
    color: #fff;
}

/* ------------------------------------------------------------------ */
/* End Atomic Design */

/* ------------------------------------------------------------------ */
/* Begin Discussion Colored Indentation */
/* Author: Paula */
/* COMMENTS:
	Add colored indentation to discussions. Enhances Instructure classes so don't add fh to them. */
.replies {
    padding-left: 0;
    border-left: solid #f2f2f2 16px;
}

.discussion-read-state-btn {
    top: 32px;
}

div.entry-content {
    padding-left: 0px !important;
}

.discussion-read-state-btn {
    top: 32px;
    left: -25px !important;
}

/* End Discussion Colored Indentation */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Begin Legacy code
Let's try to test & Convert and get rid of this */


/* Autofill Grid. Use section and articles instead of div tags for grid and cards */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.grid-auto>article {
    text-align: center;
    border: 3px solid #e7e7e7;
    border-radius: 10px;
}

/* Grid with 3 columns */
@media (min-width: 768px) {
    .grid-3col {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
        padding: 10px;
    }
}

.grid-3col>article {
    text-align: center;
    padding: 20px 10px;
    border: 3px solid #e7e7e7;
    border-radius: 10px;
}

/* Grid with 2 columns */
@media (min-width: 768px) {
    .grid-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding: 10px;
    }
}

.grid-2col>article {
    text-align: center;
    padding: 20px 10px;
    border: 3px solid #e7e7e7;
    border-radius: 10px;
}

/* ------------------------------------------------------------------ */



/* Grid for inside with 2 columns 25% and 75%*/

@media (min-width: 768px) {
    .grid-interior-25-75 {
        display: grid;
        grid-template-columns: 1fr 3fr;
    }

    .grid-interior-50-50 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tile-header {
        text-align: left;
        font-family: sans-serif;
        color: #a61e2f;
        font-weight: 800;
    }
}

@media (max-width: 768px) {

    .grid-interior-25-75,
    .grid-interior-50-50 {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 0px;
    }

    .grid-interior-25-75>div:nth-child(2) {
        padding-bottom: 2em;
    }

    .tile-header {
        text-align: center;
        font-family: sans-serif;
        color: #a61e2f;
        font-weight: 800;
    }

    .btn-bottom {
        right: 5%;
    }
}

.grid-interior-25-75>article {
    padding: 8px;
}

/* Flex Container */
.my-container {
    display: -webkit-flex;
    /* Safari */
    display: flex;
    -webkit-flex-direction: row;
    /* Safari */
    flex-direction: row;
    -webkit-justify-content: center;
    /* Safari */
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.my-container-item {
    text-align: center;
    margin-right: 20px;
}

.my-container-edge {
    display: -webkit-flex;
    /* Safari */
    display: flex;
    -webkit-flex-direction: row;
    /* Safari */
    flex-direction: row;
    -webkit-justify-content: space-around;
    /* Safari */
    justify-content: space-around;
    margin-top: 20px;
    margin-bottom: 20px;
}

.my-container-edge {
    -webkit-justify-content: space-between;
    /* Safari */
    justify-content: space-between;
}

/*Shadow Box*/
.fhda-shadow-1 {
    box-shadow: 3px 3px 6px #bebaba;
}

.fhda-shadow-2 {
    box-shadow: 0px 0px 8px #bebaba;
}

.fhda-shadow-3 {
    box-shadow: 3px 3px 8px 0px #a2a2a2;
}

.fhda-shadow-4 {
    box-shadow: 1px -4px 6px 2px #a2a2a2;
}

/*Shapes*/


.fhda-shape-avatar {
    border-radius: 50%;
    border: 3px double #e5e5e5;
    position: relative;
    padding: 0px;
}

.btn-bottom {
    text-align: center;
    font-size: .8em;
    border: 2px solid #a61e2f;
    padding: 8px 8px;
    width: 80%;
    position: absolute;
    right: 10%;
    bottom: 1em;
    border-radius: 13px;
}

.home-header {

    margin: 8px;
    padding: 0px 8px 8px 8px;
    background-color: #a61e2f;
}

.home-header>h2 {
    color: #fff;
    /* margin-top: 30px;  */
    font-size: 20px;
    line-height: 22px;
    margin: 20px 0px 0px 0px;

}

.home-header>img {
    margin: 5px auto 0px auto;
}

.home-body {
    height: 5em;
}

.home-body a {
    font-size: .8em;
}

.home-bodyCopy {
    margin: 15px 1em;

    line-height: 20px;
}

.gray-shadow {
    box-shadow: 10px 10px 5px grey;
}

.img-right {
    float: right;
    margin-left: 25px;
    margin-bottom: 25px;
    margin-top: 15px;
}

.img-left {
    float: left;
    margin-right: 25px;
    margin-bottom: 25px;
    margin-top: 15px;
}

.clear-both {
    clear: both;
}

.callout-box {
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 20px;
}

.rad-small {
    border-radius: 4px;
}