/* styles for homepage */


/* **************************************** MOHELA lOGIN CONTAINER **************************************** */
.homepage-banner {
    display: flex;
}

.homepage-banner.searchOpen {
    margin-top: 42px;
}

.homepage-bannerLogin {
    width: 100%;
    height: auto;
    position: relative;
}

.homepage-bannerLogin img {
    max-width: 100%;
    width: 100%;
    display: block;
}

.homepage-bannerText {
    background-color: #007772;
    color: #FFFFFF;    
    font-weight: bold;
}

.homepage-bannerText h2 {
    text-align: center;
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    line-height: 1.4;
    color: #FFFFFF;
}

.homepage-bannerLogin-loginBox {
   border: 2px solid #0775bc;
   border-radius: 3px;
   padding: 20px 0;
   font-weight: bold;
   font-size: 1.2rem;
   z-index: 1;
   /*width: 300px;*/
   width: 40%;
   text-align: center;
   position: absolute;
   top: 0;
   margin: 3% 0 0 3%;
   display: flex;
   flex-direction: column;
   background-color: #FFFFFF;
}

.homepage-bannerLogin-loginBox input[type=submit],
a.primary,
a.secondary {
    margin:5px 20px 20px 20px;
    padding:10px;
    min-width: 0;
}

.homepage-bannerLogin-loginBox a.loginHelp {
   font-size: 1rem;
}

.homepage-bannerLogin-loginBox-links {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: 0 20px 16px 20px;
}

.homepage-bannerLogin-loginBox-RegisterText {
   margin: 0 20px;
}

.homepage-bannerLogin-loginBox-RegisterText p {
   font-weight: normal;
   font-size: 1rem;
}

.homepage-bannerLogin-loginBox-button {
   margin-left: 15px;
   margin-right: 15px;
}


.loginBoxShow {
   display: flex !important;
}
.loginBoxHide { display: flex; }

img.defaultBannerImage {
   display: none;
}

/* **************************************** Home page content ************************************* */
.homepage-content {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
}

/* **************************************** NEWS CONTAINER **************************************** */
.homepage-news {
   padding: 0.5rem 0;
   display: flex;
   flex-direction: row;
}

.homepage-newsArticles {
    display: flex;
    flex-direction: row;
}

.homepage-newsArticles-graphic {
    display: flex;
    justify-content: center;
    width: 20%;
}

.homepage-newsArticles-graphic img {
    margin: 25px;
    align-self: center;
}

.homepage-newsArticles-articles {
    width: 80%;
    justify-content: space-between;
}

.homepage-newsArticles-title {
    display: none;
    /*color: #008035;*/
}

.homepage-newsArticles-article {
    margin-right: 20px;
    margin-bottom: 5px;
}

.homepage-newsArticles-article h3 {
    color: #007772;
    margin-bottom: 5px;
}

/*.homepage-NewsArticle-logo {
   display: none;
}*/



/* **************************************** LIST OF LINKS **************************************** */

.homepage-listOfLinks {
    background-color: #FFFFFF;
    color: #231F20;
    padding-top: 10px;
    width: 100%;
    display: flex;
}

.homepage-listOfLinks h2 {
    text-align: center;
    color: #231F20;
}

.homepage-listOfLinks h3 {
    color: #231F20;
}

.homepage-listOfLinks-links {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: space-around;
    padding: 10px 10px 0 10px;
}

.homepage-listOfLinks-linksSection {
    width: 31%;
    display: flex;
    flex-flow: row nowrap;

    padding-bottom: 10px;

    color: #231F20;
}

.homepage-listOfLinks-linksSection-links h4 {
    margin-bottom: 0;
}

.homepage-listOfLinks-linksSection-links ul {
    margin-top: 0;
}

.homepage-listOfLinks-linksSection-links ul li a {
    color: #231F20;
}

.homepage-listOfLinks-linksSection-links ul li a:hover {
    font-weight: bold;
}

.homepage-listOfLinks-linksSection-Graphic {
    margin-right: 10px;
}


/* *************************************** INFO CENTER ARTICLES ******************************* */
.homepage-InfoCenter {
   padding: 2rem 0;
   width: 100%;
   display: flex;
}

   .homepage-InfoCenter h2 {
      padding: 0 0 1.5rem 0;
      text-align: center;
      color: #A2ADB4;
   }

.homepage-InfoCenter-Topics {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-content: space-around;
   padding: 10px 20px 0 20px;
}

.homepage-InfoCenter-Topics-Topic {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   width: 23%;
   padding-bottom: 10px;
}

   .homepage-InfoCenter-Topics-Topic img {
      max-width: 48px;
      height: auto;
   }

   .homepage-InfoCenter-Topics-Topic p {
      color: #63B4E4;
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 0;
   }

@media only screen and (max-width: 900px) {
   .homepage-InfoCenter-Topics {
      justify-content: flex-start;
   }


   .homepage-InfoCenter-Topics-Topic {
      width: 33%;
   }
}

@media only screen and (max-width: 700px) {
   .homepage-InfoCenter-Topics {
      justify-content: space-between;
   }

   .homepage-InfoCenter-Topics-Topic {
      width: 48%;
   }
}

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

   .homepage-InfoCenter-Topics {
      padding-left: 3.5rem;
   }


   .homepage-InfoCenter-Topics-Topic {
      width: 100%;
   }
}

@media only screen and (max-width: 350px) {
   .homepage-InfoCenter-Topics {
      padding-left: 2rem;
   }
}

/* **************************************** FEEDBACK **************************************** */
.feedbackTab {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index:5;
}


/* **************************************** Emergency message ****************************** */
/* ************************************** Announcements dialog ***************************** */
.homepage-emergency {
   background-color: var(--Accent3);
}

   .homepage-emergency .homepage-emergencyArticleContainer {
      padding: 0;
   }

.homepage-emergencyArticleContainerList {
   width: 100%;
}

.homepage-emergency .homepage-emergencyArticle {
   background-color: #FFFFFF;
   padding: 10px 25px;
   margin-left: 20px;
   margin-right: 20px;
   margin-bottom: 1rem;
}

      .homepage-emergency .homepage-emergencyArticle h1 {
         font-size: 1.83rem;
         color: #AE1212;
      }
   .homepage-emergency .homepage-emergencyArticle h2 {
      font-size: 1.5rem;
      color: var(--ADARed);
   }
   .homepage-emergency .homepage-emergencyArticle h3 { font-size: 1.25rem; }
   .homepage-emergency .homepage-emergencyArticle h4,
   .homepage-emergency .homepage-emergencyArticle h5,
   .homepage-emergency .homepage-emergencyArticle h6 { font-size: 1rem; }




ul.homepage-AnnouncementArticles li.homepage-AnnouncementArticle {
  margin-bottom: 1.5rem;
}

  ul.homepage-AnnouncementArticles li.homepage-AnnouncementArticle h3 {
    background-color: #003c71;
    color: #FFFFFF;
    padding: 5px 10px;
  }


.ui-dialog.AnnouncementsDialog {
  top: 160px !important;
}

.AnnouncementsDialog .ui-widget-header {
  color: #53565A;
  background-color: #FFFFFF;
  border: none;
}

.AnnouncementsDialog.ui-dialog .ui-widget-header {
  padding: 0;
}

  .AnnouncementsDialog.ui-dialog .ui-widget-header .ui-dialog-titlebar-close {
    background-color: #FFFFFF;
    border: none;
  }

.AnnouncementsDialog button.close {
  min-width: 10rem;
  float: right;
}



/* **************************************** MISC **************************************** */
h1, h2, h3, h4, h5, h6 {
   margin-bottom: 10px;
}

.sectionWhite {
    width: 100%;
    background-color: #FFFFFF;
    color: #231F20
}

.sectionWhite h2 {
   color: #231F20;
}

.sectionBlue
 {
    width: 100%;
    background-color: #0576BC;
    color: #FFFFFF;
}

.sectionBlue h2 {
   color: #FFFFFF;
}


/* ************************************ Responsive ********************************* */


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

    .homepage-bannerText h2 {
        font-size: 1.75rem;
    }

}

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

    .homepage-newsArticles-graphic img {
        width: 96px;
    }

}


@media only screen and (max-width: 800px) {
	
	.homepage-listOfLinks-linksSection {
		width: 50%;
	}	
		
	.homepage-listOfLinks-linksSection-links {
		font-size: 0.9em;
	}
	 
}


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

    .homepage-bannerText h2 {
        font-size: 1.35rem;
    }

}

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

    .homepage-newsArticles-graphic {
        display: none;
    }

    .homepage-newsArticles-articles {
        width: 100%;
        margin-left: 20px;
    }
	
    .homepage-newsArticles-title {
	     display: block;
	     text-align: center;
    }

}


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

    .homepage-bannerText h2 {
        font-size: 1.15rem;
    }

}


@media only screen and (max-width: 500px) {
	
	.homepage-listOfLinks-linksSection {
		width: 100%;
	}
	
	.homepage-listOfLinks-links {
		padding-left: 70px;
	}	
}

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

    .homepage-bannerText h2 {
        font-size: 0.95rem;
    }
}



/* ****************************** MOHELA Homepage Revamp ********************************** */

.homepage-subtitle {
   color: var(--SecondaryColor1);
   font-weight: bold;
}


/* ***** IconTitleText1 ***** */

.homepage-Callouts.IconTitleText1 {
   background-color: var(--PrimaryColor1);
   color: var(--PrimaryTextColor1);
   padding: 0 1rem;
   height: auto;
}

   .homepage-Callouts.IconTitleText1 .homepage-Callouts-Container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
   }

   .homepage-Callouts.IconTitleText1 a.callout {
/*      background-color: #007772;
      color: #FFFFFF;*/
      width: 75%;
      display: block;
      text-align: center;
      margin-bottom: 0;
      outline-color: var(--PrimaryTextColor1);
   }

   .homepage-Callouts.IconTitleText1 .homepage-Callout {
      width: 31.0%;
      padding: 2rem 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
   }

      .homepage-Callouts.IconTitleText1 .homepage-Callout .homepage-Callout-text {
         margin-bottom: 1rem;
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         align-items: flex-start;
      }

      .homepage-Callouts.IconTitleText1 .homepage-Callout .homepage-Callout-button {
         display: flex;
         flex-direction: column;
      /*   align-items: center;*/
      }

      .homepage-Callouts.IconTitleText1 .homepage-Callout > * {
         margin: 0 1rem;
      }

      .homepage-Callouts.IconTitleText1 .homepage-Callout h3 {
         color: var(--PrimaryTextColor1);
      }

      .homepage-Callouts.IconTitleText1 .homepage-Callout img {
         height: 75px;
         width: 75px;
         margin-right: 1rem;
      }

/* ************** TitleText1 ****************** */

.homepage-Callouts.TitleText1 {
   background-color: #FFFFFF;
   color: var(--TextColor);
   padding: 2rem 1rem;
}

   .homepage-Callouts.TitleText1 .homepage-Callouts-Container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
   }

   .homepage-Callouts.TitleText1 a.callout {
/*      background-color: #0576BC;
      color: #FFFFFF;*/
      width: 75%;
      display: block;
      text-align: center;
      margin-bottom: 0;
   }


   .homepage-Callouts.TitleText1 .homepage-Callout .homepage-Callout-text {
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
      text-align: center;
   }

   .homepage-Callouts.TitleText1 .homepage-Callout {
      width: 45%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
   }

      .homepage-Callouts.TitleText1 .homepage-Callout .homepage-Callout-button {
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 94%;
      }

      .homepage-Callouts.TitleText1 .homepage-Callout > * {
         margin: 0 1rem;
      }

      .homepage-Callouts.TitleText1 .homepage-Callout h3 {
         text-align: center;
      }

/* ************** TitleText2 ****************** */

.homepage-Callouts.TitleText2 {
  background-color: #0778B0;
  color: var(--PrimaryTextColor1);
  padding: 2rem 1rem;
}

  .homepage-Callouts.TitleText2 .homepage-Callouts-Container {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .homepage-Callouts.TitleText2 a.callout {
    width: 75%;
    display: block;
    text-align: center;
    margin-bottom: 0;
  }


  .homepage-Callouts.TitleText2 .homepage-Callout .homepage-Callout-text {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .homepage-Callouts.TitleText2 .homepage-Callout {
    /*    width: 45%;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

    .homepage-Callouts.TitleText2 .homepage-Callout .homepage-Callout-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 94%;
    }

    .homepage-Callouts.TitleText2 .homepage-Callout > * {
      margin: 0 1rem;
    }

    .homepage-Callouts.TitleText2 .homepage-Callout h3 {
      text-align: center;
      color: var(--PrimaryTextColor1);
    }

/* ************** IconTitle1 ***************** */

.homepage-Callouts.IconTitle1 {
   background-color: var(--Accent2);
   color: var(--TextColor);
   padding: 2rem 1rem 1rem 1rem;
}

   .homepage-Callouts.IconTitle1 .homepage-Callouts-Container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
   }

   .homepage-Callouts.IconTitle1 .homepage-Callout {
      background-color: #FFFFFF;
      width: 15%;
      padding: 1rem;
      margin-bottom: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 0 8px 2px #333333;
   }

      .homepage-Callouts.IconTitle1 .homepage-Callout .homepage-Callout-text {
         display: flex;
         flex-direction: column;
         align-items: center;
         color: var(--TextColor);
         text-align: center;
      }

         .homepage-Callouts.IconTitle1 .homepage-Callout .homepage-Callout-text a:hover {
            text-decoration: none;
         }

         .homepage-Callouts.IconTitle1 .homepage-Callout img {
            margin-bottom: 1rem;
         }

      .homepage-Callouts.IconTitle1 .homepage-Callout:hover {
         cursor: pointer;
         background: #FFFFFF;
         box-shadow: 0 0 15px 0 #000000;
      }

/* ************** IconTitleText2 ************** */

.homepage-Callouts.IconTitleText2 {
   background-color: var(--PrimaryColor2);
   color: var(--PrimaryTextColor2);
   padding: 0 1rem;
   height: auto;
}

   .homepage-Callouts.IconTitleText2 .homepage-Callouts-Container {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
   }

   .homepage-Callouts.IconTitleText2 .homepage-Callout {
      width: 31.5%;
      padding: 2rem 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
   }

      .homepage-Callouts.IconTitleText2 .homepage-Callout .homepage-Callout-text {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         align-items: center;
      }

      .homepage-Callouts.IconTitleText2 .homepage-Callout > * {
         margin: 0 1rem;
      }

      .homepage-Callouts.IconTitleText2 .homepage-Callout h3 {
         color: var(--PrimaryTextColor2);
      }

      .homepage-Callouts.IconTitleText2 .homepage-Callout img {
         height: 75px;
         width: 75px;
      }

    .homepage-Callouts.IconTitleText2 .homepage-Callout .homepage-Callout-text a {
        color: var(--PrimaryTextColor1);
        font-size: 0.95rem;
        outline-color: var(--PrimaryTextColor1);
        display: inline-block;
    }

        .homepage-Callouts.IconTitleText2 .homepage-Callout .homepage-Callout-text a p {
            margin-bottom: 0;
        }

      .homepage-Callouts.IconTitleText2 .homepage-Callout .homepage-Callout-text div {
         margin-left: 1rem;
      }


/* ************** IconTitleText2 - calloutAD **************** */
.homepage-Callouts.IconTitleText2.calloutAD {
   background-color: #e9e9e9;
}

   .homepage-Callouts.IconTitleText2.calloutAD .homepage-Callout {
      width: 100%;
      padding: 3rem 0;
   }

      .homepage-Callouts.IconTitleText2.calloutAD .homepage-Callout .homepage-Callout-text p,
      .homepage-Callouts.IconTitleText2.calloutAD .homepage-Callout .homepage-Callout-text h3 {
         color: var(--PrimaryColor1);
      }

    .homepage-Callouts.IconTitleText2.calloutAD .homepage-Callout .homepage-Callout-text a {
        color: var(--LinkColor);
        outline-color: var(--LinkColor);
    }

    .homepage-Callouts.IconTitleText2.calloutAD .homepage-Callout .homepage-Callout-text div {
        margin-left: 3rem;
    }

   /* ************** IconTitleText3 ************** */
   .homepage-Callouts.IconTitleText3 {
      background-color: var(--PrimaryColor1);
      color: var(--PrimaryTextColor1);
      padding: 0 1rem;
      height: auto;
   }

   .homepage-Callouts.IconTitleText3 .homepage-Callouts-Container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 2rem 0;
   }

   /*.homepage-Callouts.IconTitleText3 a.callout {*/
      /*      background-color: #007772;
      color: #FFFFFF;*/
      /*width: 75%;
      display: block;
      text-align: center;
      margin-bottom: 0;
      outline-color: var(--PrimaryTextColor1);
   }*/

.homepage-Callouts.IconTitleText3 .homepage-Callout {
   width: 30%;
   padding: 2rem 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.homepage-Callouts.IconTitleText3 .homepage-Callout .homepage-Callout-text {
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
   }

   /*.homepage-Callouts.IconTitleText3 .homepage-Callout .homepage-Callout-button {
      display: flex;
      flex-direction: column;*/
      /*   align-items: center;*/
   /*}*/

   .homepage-Callouts.IconTitleText3 .homepage-Callout > * {
      margin: 0 1rem;
   }

   .homepage-Callouts.IconTitleText3 .homepage-Callout h3 {
      color: var(--PrimaryTextColor1);
      margin-bottom: 1rem;
   }

   .homepage-Callouts.IconTitleText3 .homepage-Callout img {
      height: 75px;
      width: 75px;
      margin-right: 1rem;
      margin-bottom: 2rem;
   }

   .homepage-Callouts.IconTitleText3 .homepage-Callout p {
      text-align: center;
   }

   /* ********** Primary1  ********** */
   .homepage-Callouts.Primary1 {
      padding: 2rem 1rem;
   }

   .homepage-Callouts.Primary1 .homepage-Callouts-Container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
   }

   .homepage-Callouts.Primary1 .homepage-Callout {
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
   }

      .homepage-Callouts.Primary1 .homepage-Callout .homepage-Callout-text {
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
         justify-content:flex-start;
         height: 100%;
      }

      .homepage-Callouts.Primary1 .homepage-Callout .homepage-Callout-text div:first-child {
         margin-bottom: 1rem;
      }

      .homepage-Callouts.Primary1 .homepage-Callout img {
         margin-bottom: 1rem;
      }

/* ********** Media Queries ********** */

@media only screen and (max-width: 1000px) {
   .homepage-Callouts a.callout {
      font-size: 0.9rem;
   }

   .homepage-Callouts.IconTitle1 .homepage-Callout {
      width: 31.5%;
   }

}

@media only screen and (max-width: 850px) {
   .homepage-Callouts .homepage-Callout h3 {
      font-size: 1.25rem;
   }

   .homepage-Callouts.IconTitleText1 a.callout {
      width: 90%;
   }
}

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

   .homepage-Callouts.Primary1 .homepage-Callout .homepage-Callout-text ul {
      font-size: 0.9rem;
   }
}

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

   .homepage-Callouts.IconTitleText2 .homepage-Callout {
      align-items: center;
      flex-direction: column;
   }

      .homepage-Callouts.IconTitleText2 .homepage-Callout .homepage-Callout-text {
         flex-direction: column;
         text-align: center;
      }

      .homepage-Callouts.IconTitleText2 .homepage-Callout img {
         margin-bottom: 1rem;
         margin-right: 0;
      }

  .homepage-Callouts.IconTitleText1 .homepage-Callout {
    align-items: center;
    flex-direction: column;
  }

    .homepage-Callouts.IconTitleText1 .homepage-Callout .homepage-Callout-text {
      flex-direction: column;
      text-align: center;
      align-items: center;
    }

    .homepage-Callouts.IconTitleText1 .homepage-Callout img {
      margin-bottom: 1rem;
      margin-right: 0;
    }
}

@media only screen and (max-width: 750px) {
  .homepage-Callouts.IconTitleText1 .homepage-Callout .homepage-Callout-text {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

    .homepage-Callouts.IconTitleText1 .homepage-Callout .homepage-Callout-text img {
      margin-bottom: 1rem;
    }
}

@media only screen and (max-width: 700px) {
   .homepage-Callouts.IconTitleText1 .homepage-Callout {
      width: 100%;
      margin-bottom: 1.5rem;
   }

  .homepage-Callouts.IconTitleText1 .homepage-Callout:not(:last-child) {
    border-bottom: 1px solid #FFFFFF;
  }

   .homepage-Callouts.IconTitleText1 .homepage-Callouts-Container {
      flex-direction: column;
   }

}

@media only screen and (max-width: 600px) {
   .homepage-Callouts.IconTitle1 .homepage-Callout {
      width: 47.5%;
   }


   .homepage-Callouts.TitleText1 .homepage-Callout {
      width: 100%;
      margin-bottom: 3rem;
   }

      .homepage-Callouts.TitleText1 .homepage-Callout:last-child {
         margin-bottom: 1rem;
      }

   .homepage-Callouts.TitleText1 .homepage-Callouts-Container {
      flex-direction: column;
   }

   .homepage-Callouts.Primary1 .homepage-Callout {
      width: 100%;
   }

      .homepage-Callouts.Primary1 .homepage-Callout .homepage-Callout-text ul {
         font-size: 1rem;
      }
}

@media only screen and (max-width: 700px) {
   .homepage-Callouts.IconTitleText2 .homepage-Callouts-Container {
      flex-direction: column;
   }

   .homepage-Callouts.IconTitleText2 .homepage-Callout {
      align-items: center;
      flex-direction: row;
      width: 95%;
      flex-wrap: wrap;
      margin: 0;
   }

    .homepage-Callouts.IconTitleText2 .homepage-Callout:not(:last-child) {
      border-bottom: 1px solid #FFFFFF;
    }

    .homepage-Callouts.IconTitleText2 .homepage-Callout .homepage-Callout-text {
      flex-direction: row;
      text-align: left;
    }

      .homepage-Callouts.IconTitleText2 .homepage-Callout img {
         margin-bottom: 1rem;
         margin-right: 1rem;
      }

}

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


  .homepage-Callouts.IconTitleText2.calloutAD .homepage-Callout .homepage-Callout-text {
    flex-direction: column;
  }

}


@media only screen and (max-width: 350px) {
   .homepage-Callouts.IconTitle1 .homepage-Callout {
      width: 100%;
   }

   .homepage-Callouts.IconTitleText2 .homepage-Callout {
      margin: 0;
   }
}

/* *********************************** TEACH Grant ******************************************** */
.TeachGrantArticles {
   background-color: #003c71; 
}

.TeachGrantArticle {
   padding: 2rem 1rem 1rem 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;

}

.TeachGrantArticle h2 {
   color: #FFFFFF;
   font-size: 1.41rem;
   font-weight: 700;
   margin-bottom: 1.5rem;

}

/* ************************************** Carousel ******************************************** */
.homepage-Carousel-Options {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: -50px;
    /*   display: block;
   position: absolute;
   left: 0;
   right: 0;
   text-align: center;*/
}

.homepage-Carousel-Options-Pause {
    margin-right: 2.5rem;
}

.homepage-Carousel-Options-Pause,
.homepage-Carousel-Options-Play {
    padding: 0.5rem;
    z-index: 10;
}

.homepage-Carousel-Options-Pause,
.homepage-Carousel-Options-Play {
   color: #000000 !important;
   cursor: pointer;
}

.homepage-Carousel-Options-Pause:hover,
.homepage-Carousel-Options-Play:hover {
   outline: #000000 solid 2px;
}

.homepage-Carousel-item {
   padding: 2rem;
   display: flex;
}

   .homepage-Carousel-item.mobileApp {
      background-color: #0778b0;
      color: #FFFFFF;
   }

   .homepage-Carousel-item.greySlide {
      background-color: #e9e9e9;
      color: var(--TextColor);
   }

.homepage-Carousel-item.lightGreenSlide {
   background-color: #c7edda;
   color: var(--TextColor);
}

.homepage-Carousel-item.blueSlide {
   background-color: #0778b0;
   color: #FFFFFF;
}

.homepage-Carousel-item-Container {
   width: 100%;
   height: auto;
   position: relative;
}

.homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content h3 {
   font-size: 2rem;
}

.homepage-Carousel-item.AutoDebit .homepage-Carousel-item-Container-content h3,
.homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content h3,
.homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content h3,
.homepage-Carousel-item.ParentTips .homepage-Carousel-item-Container-content h3 {
   font-size: 2.5rem;
}

   .homepage-Carousel-item-Container img {
      max-width: 100%;
      width: 100%;
      display: block;
      position: relative;
      right: 0;
   }

/*.homepage-Carousel-item-Container-content {
   common stuff here
}*/

.homepage-Carousel-item-Container-content-text ul li {
   margin-left: 1rem;
   margin-bottom: 2rem;
   font-size: 1.41rem;
}

.homepage-Carousel-item.greySlide .homepage-Carousel-item-Container-content-text h3,
.homepage-Carousel-item.lightGreenSlide .homepage-Carousel-item-Container-content-text h3,
.homepage-Carousel-item.blueSlide .homepage-Carousel-item-Container-content-text h3 {
   margin-bottom: 2rem;
}

.homepage-Carousel-item.greySlide .homepage-Carousel-item-Container-content-text ul,
.homepage-Carousel-item.lightGreenSlide .homepage-Carousel-item-Container-content-text ul,
.homepage-Carousel-item.blueSlide .homepage-Carousel-item-Container-content-text ul {
   margin-bottom: 1rem;
}

.homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content {
   position: absolute;
   top: 10%;
   right: 3rem;
   margin: 0 3% 0 0;
   width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
}

.homepage-Carousel-item.greySlide .homepage-Carousel-item-Container-content,
.homepage-Carousel-item.lightGreenSlide .homepage-Carousel-item-Container-content,
.homepage-Carousel-item.blueSlide .homepage-Carousel-item-Container-content {
   position: absolute;
   top: 0;
   width: 100%;
/*   display: flex;
   flex-direction: row;
   justify-content: space-between;
*/
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   height: 100%;
   padding: 0 2rem;
}

.homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content {
   width: 95%;
}

/* ***** The next four styles (leftGraphic, rightGraphc, topGraphic, and bottomGraphic) assume there are only 2 "item" on the row */
.homepage-Carousel-item .homepage-Carousel-item-Container-content.leftGraphic {
   flex-direction: row;
}

.homepage-Carousel-item .homepage-Carousel-item-Container-content.rightGraphic {
   flex-direction: row-reverse;
}

.homepage-Carousel-item .homepage-Carousel-item-Container-content.topGraphic {
   flex-direction: column;
}

.homepage-Carousel-item .homepage-Carousel-item-Container-content.bottomGraphic {
   flex-direction: column-reverse;
}


.homepage-Carousel-item.greySlide .homepage-Carousel-item-Container-content {
   color: var(--TextColor);
}

.homepage-Carousel-item.lightGreenSlide .homepage-Carousel-item-Container-content {
   color: var(--TextColor);
}

.homepage-Carousel-item.blueSlide .homepage-Carousel-item.homepage-Carousel-item-Container-content {
   color: #FFFFFF;
}

.homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content h3,
.homepage-Carousel-item.blueSlide .homepage-Carousel-item-Container-content h3 {
   color: #FFFFFF;
}

.homepage-Carousel-item.greySlide .homepage-Carousel-item-Container-content h3,
.homepage-Carousel-item.lightGreenSlide .homepage-Carousel-item-Container-content h3 {
   color: var(--PrimaryColor1);
}

   .homepage-Carousel-item-Container-content p {
      font-size: 1.41rem;
      margin-bottom: 4rem;
   }

.homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content p {
   margin-bottom: 2rem;
}

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content p:last-child {
       margin-bottom: 3rem;
   }

.homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content .AppButtons > * {
   width: 150px;
}

.homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content .AppButtons input:focus {
   outline-color: #FFFFFF;
   outline-width: 1px;
}

.homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content .AppButtons input:hover {
   outline-color: #FFFFFF;
   outline-style: solid;
   outline-width: 1px;
}


.homepage-Carousel-item.greySlide .homepage-Carousel-item-Container-content-image,
.homepage-Carousel-item.lightGreenSlide .homepage-Carousel-item-Container-content-image,
.homepage-Carousel-item.blueSlide .homepage-Carousel-item-Container-content-image {
   padding: 0 1.5rem;
}

   .homepage-Carousel-item.greySlide .homepage-Carousel-item-Container-content-image img,
   .homepage-Carousel-item.lightGreenSlide .homepage-Carousel-item-Container-content-image img,
   .homepage-Carousel-item.blueSlide .homepage-Carousel-item-Container-content-image img {
      width: 100%;
      max-width: 150px;
      height: auto;
   }

.homepage-Carousel-item.greySlide .homepage-Carousel-item-Container-content-text,
.homepage-Carousel-item.lightGreenSlide .homepage-Carousel-item-Container-content-text,
.homepage-Carousel-item.blueSlide .homepage-Carousel-item-Container-content-text {
   display: flex;
   flex-direction: column;
   width: 60%;
}

.homepage-Carousel-item.ParentTips .homepage-Carousel-item-Container-content-text {
   width: 50%;
   padding-left: 2rem;
}

.homepage-Carousel-item.ParentTips .homepage-Carousel-item-Container-content-image {
   width: 30%;
}

.homepage-Carousel-item .homepage-Carousel-item-Container-content.topGraphic .homepage-Carousel-item-Container-content-text,
.homepage-Carousel-item .homepage-Carousel-item-Container-content.bottomGraphic .homepage-Carousel-item-Container-content-text {
   width: 100%;
}

/*.homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content .homepage-Carousel-item-Container-content-text {
   width: 75%;
}*/

.homepage-Carousel-item .homepage-Carousel-item-Container-content.topGraphic .homepage-Carousel-item-Container-content-text p,
.homepage-Carousel-item .homepage-Carousel-item-Container-content.bottomGraphic .homepage-Carousel-item-Container-content-text p {
   margin-bottom: 1rem;
}

.homepage-Carousel-item.blueSlide .homepage-Carousel-item-Container-content .homepage-Carousel-item-Container-content-text a {
   color: #FFFFFF;
}

   .homepage-Carousel-item.greySlide .homepage-Carousel-item-Container-content-text a.primary,
   .homepage-Carousel-item.lightGreenSlide .homepage-Carousel-item-Container-content-text a.primary,
   .homepage-Carousel-item.blueSlide .homepage-Carousel-item-Container-content-text a.primary {
      width: auto;
      text-align: center;
      max-width: 200px;
      min-width: 200px;
   }

/*@media only screen and (max-width: 1000px) {
   .homepage-Carousel-item-Container-content {
      right: 3rem;
   }
}*/

.homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-text,
.homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content-text {
   align-items: center;
   text-align: center;
}

   .homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content-text h3,
   .homepage-Carousel-item.ParentTips .homepage-Carousel-item-Container-content-text h3 {
      text-shadow: 4px 4px 5px #FFFFFF;
   }

.homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content-text {
   width: 50%;
   padding-left: 2rem;
   text-align: center;
}

.homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content-image {
   width: 30%;
}

@media only screen and (max-width: 1000px) {
   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-text h3 {
      font-size: 2rem;
   }

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-text p {
      font-size: 1.25rem;
   }

}

@media only screen and (max-width: 900px) {
   .homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content {
      width: 60%;
      margin: 0;
      right: 0;
   }

   .homepage-Carousel-item-Container-content h3 {
      font-size: 1.25rem;
   }

   .homepage-Carousel-item-Container-content p {
      font-size: 1.15rem;
   }

   .homepage-Carousel-item-Container-content-text ul li {
      font-size: 1rem;
   }

   .homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content .AppButtons .imgButton {
      width: 150px;
   }

   .homepage-Carousel-item-Container-content-text ul li {
      margin-bottom: 0.5rem;
   }

   .homepage-Carousel-item.AutoDebit .homepage-Carousel-item-Container-content-text h3 {
      font-size: 2rem;
   }

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-text h3 {
      font-size: 1.75rem;
   }

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content .homepage-Carousel-item-Container-content-image img {
      width: 100px;
   }

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content p {
      margin-bottom: 1rem;
   }

      .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content p:last-child {
         margin-bottom: 2rem;
      }
}

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

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-text {
      width: 65%;
   }
}

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

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-text p {
      font-size: 1rem;
   }
}

@media only screen and (max-width: 750px) {
   .homepage-Carousel-item-Container-content p {
      margin-bottom: 2rem;
   }

   .homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content {
      width: 55%;
      right: 3rem;
   }

   .homepage-Carousel-item.AutoDebit .homepage-Carousel-item-Container-content-image img {
      max-width: 100px;
   }
   .homepage-Carousel-item.AutoDebit .homepage-Carousel-item-Container-content-text {
      width: 70%;
   }

   .homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content-image img {
      max-width: 100px;
   }

   .homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content-text {
      width: 70%;
   }

      .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-text h3 {
         margin-bottom: 1rem;
      }

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content .homepage-Carousel-item-Container-content-image img {
      width: 75px;
   }
}

@media only screen and (max-width: 700px) {
   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-image {
      display: none;
   }

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-text {
      width: 95%;
   }

   .homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content-text h3 {
      font-size: 2rem;
   }

   .homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content h3 {
      font-size: 1.75rem;
   }

   .homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content p {
      font-size: 1rem;
   }

   .homepage-Carousel-item.ParentTips .homepage-Carousel-item-Container-content h3 {
      font-size: 1.75rem;
   }

   .homepage-Carousel-item.ParentTips .homepage-Carousel-item-Container-content p {
      font-size: 1rem;
   }

   .homepage-Carousel-item.ParentTips .homepage-Carousel-item-Container-content-image img {
      max-width: 100px;
   }

}

@media only screen and (max-width: 675px) {
/*   .homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content .AppButtons > * {
      width: 150px;
   }*/

   .homepage-Carousel-item-Container-content p {
      margin-bottom: 2rem;
   }
}

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

   .homepage-Carousel-item-Container-content-text ul li {
      margin-bottom: 1rem;
   }
}*/

@media only screen and (max-width: 625px) {
   .homepage-Carousel-item .homepage-Carousel-item-Container {
      height: 243px;
   }

   .homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container img {
      display: none;
   }

   .homepage-Carousel-item-Container-content p {
      font-size: 1.1rem;
   }

/*   .homepage-Carousel-item-Container-content-text ul li {
      font-size: 1.1rem;
   }*/

   .homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content {
      width: 80%;
      text-align: center;
   }

}

@media only screen and (max-width: 600px) {
   .homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content-text h3 {
      font-size: 1.8rem;
   }

   .homepage-Carousel-item.AutoDebit .homepage-Carousel-item-Container-content-image {
      display: none;
   }

   .homepage-Carousel-item.AutoDebit .homepage-Carousel-item-Container-content-text {
      width: 100%;
   }

}

@media only screen and (max-width: 550px) {
   .homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content-image {
      display: none;
   }

   .homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content-text {
      width: 100%;
      padding-left: 0;
   }

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-text h3 {
      font-size: 1.41rem;
   }

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-text p {
      font-size: 0.9rem;
   }

   .homepage-Carousel-item.ParentTips .homepage-Carousel-item-Container-content-image {
      display: none;
   }

   .homepage-Carousel-item.ParentTips .homepage-Carousel-item-Container-content-text {
      width: 100%;
      text-align: center;
      align-items: center;
      padding-left: 0;
   }

}

/*@media only screen and (max-width: 500px) {
}*/

@media only screen and (max-width: 450px) {
/*   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-text h3 {
      font-size: 1.35rem;
   }

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content-text p {
      font-size: 0.9rem;
   }*/

  .homepage-Carousel-item-Container-content h3 {
      font-size: 1rem;
   }

   .homepage-Carousel-item-Container-content p {
      font-size: 0.9rem;
      margin-bottom: 1rem;
   }

   .homepage-Carousel-item-Container-content-text ul li {
      font-size: 0.9rem;
   }

   .homepage-Carousel-item.mobileApp .homepage-Carousel-item-Container-content {
      top: 0;
      right: 1.5rem;
   }

   .homepage-Carousel-item.greySlide.AutoDebit .homepage-Carousel-item-Container-content-text h3 {
      margin-bottom: 1rem;
   }

   .homepage-Carousel-item.greySlide.AutoDebit .homepage-Carousel-item-Container-content-text ul {
      margin-bottom: 1rem;
   }

   .homepage-Carousel-item.greySlide.AutoDebit .homepage-Carousel-item-Container-content-text ul li {
      margin-bottom: 0.5rem;
   }

   .homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content-image {
      display: none;
   }

   .homepage-Carousel-item.Paperless .homepage-Carousel-item-Container-content-text {
      width: 100%;
   }

   .homepage-Carousel-item.Payments .homepage-Carousel-item-Container-content {
      width: 100%;
   }

   .homepage-Caoursel-item.Payments .homepage-Carousel-item-Container-content text p {
      font-size: 0.85rem;
   }
}