/* =============================================================================================
==============CUSTOM CSS FOR COLOR STYLING, FONTS, AND HIDDEN ELEMENTS/EXCLUSIONS===============
============================================================================================= */
/* FONTS */
/* @import url('https://fonts.googleapis.com/css2?family=Just+Another+Hand&family=Roboto:wght@300;400;700&display=swap'); */

@font-face {
  font-family: "PPNeueMontreal-Light";
  src: url("/fonts/PPNeueMontreal-Light.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PPNeueMontreal-Medium";
  src: url("/fonts/PPNeueMontreal-Medium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PPEiko-LightItalic";
  src: url("/fonts/PPEiko-LightItalic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}


:root {
/*defaults set in default.css and admin but these will override default.css*/
 	--primary-color: rgb(0, 133, 202);
  --secondary-color: rgb(242, 125, 0);
  --accent-color: rgb(64, 177, 233);
  --gradient-1: var(--primary-color);
  --gradient-2: var(--primary-color);
  --gradient-3: var(--primary-color);
  --primary-font: 'PPNeueMontreal-Light';
  --secondary-font: 'PPNeueMontreal-Medium';
  --accent-font: 'PPEiko-LightItalic';
  
  /* ===========MAIN================ */
  --ribbonBackground-color: var(--primary-color);
  /*color for header ribbon*/
  --ribbonText-color: rgb(255, 255, 255);
  --paragraphFont: var(--primary-font);
  --heroOverlay-color: rgba(255, 255, 255, .7);
  --focus-color: rgb(215, 30, 247);

  /* ========Breaking News=========== */
  --breakingNewsBackground-color: rgb(148, 34, 34);/*news link background color if ribbon view*/
  --breakingNewsText-color: red;/*news link text color*/
  --newsHideAndShow: block;/*toggles breaking news link display in top right corner of header...none == hidden, block == shown*/
  --breakingNewsPosition: absolute;/*leave value blank for news banner above ribbon, value==absolute for top right header alignment*/
  /* ==========Logo Styling========== */
  /*--companyLogoMobile-width: 10rem;
  --companyLogo768-width: 15rem;
  --companyLogo1024-width: 20rem;*/
  
  --companyLogoMobile-width: auto;
  --companyLogo768-width: auto;
  --companyLogo1024-width: auto;

  /* ==========BUTTON STYLING======= */
  --helpButtons-color: var(--secondary-color);
  --button-color: var(--secondary-color);
  --buttonText-color: rgb(255, 255, 255);
  --buttonOnHover-color: var(--primary-color);
  --buttonTextOnHover-color: rgb(255, 255, 255);
  --carouselButton-color: var(--secondary-color);
  --carouselButtonText-color: rgb(255, 255, 255);
  --carouselButtonHover-color: var(--primary-color);
  --carouselButtonTextHover-color: rgb(255, 255, 255);

  --aboutButton-color: #107cfb;

  /* =======Headings==================== */
  --nav-color: rgb(128, 128, 128);
  --h1Font-family: var(--primary-font);
  --h2Text-color: rgb(255, 255, 255);
  --h2Font-family: var(--secondary-font);
  --featuredText-color: var(--primary-color);
  --featuredParagraph-color: rgb(0, 0, 0);
  --galleryHeader-color: var(--primary-color);
  --galleryHeader-font: var(--secondary-font);
  --galleryText-color: rgb(255, 255, 255);

  /* =======contact/popup=============== */
  --contactInfo-color: rgb(0, 0, 0);
  --companyName-color: rgb(128, 128, 128);
  --contactBorder-color: rgb(92, 87, 87);
  --popupText-color: rgb(85, 84, 84);
  --backgroundOverlay-color: rgba(0, 0, 0, 0.6);

  /* =======Carousel==================== */
  --carouselBackground-color: linear-gradient(to right, var(--gradient-1) 0%, var(--gradient-2) 50%, var(--gradient-3) 100%);
  /* --carouselBackground-color: var(--primary-color); */
  /*color for carousel background*/
  --carouselText-color: rgb(255, 255, 255);
  --carousel-font: var(--primary-font);

  /*========================STORY AND TOPIC============================================== */
  --breadcrumbText-color: rgb(255, 255, 255);

  --storyH1-color: var(--primary-color);
  --storyParagraph-color: rgb(0, 0, 0);
  --storyImageText-color: rgb(255, 255, 255);
  --storyImageOverlay-color: rgba(0, 0, 0, .6);

  --topicCarouselText-color: rgb(255, 255, 255);
  --topicHeading-color: rgb(0, 0, 0);
  --topicPageFilterText: rgb(0, 0, 0);

  /* ================SITEMAP============= */
  --sitemapPersonal-color: var(--primary-color);
  /*color of "your favorites", "your courses", and "your history" text in sitemap*/
  --sitemapCurated-color: var(--accent-color);
  /*color of "assessments", "calculators", etc in sitemap.*/

  /* ========footer===================== */
  --notices-color: rgb(85, 84, 84);

  /* Learning Center */
  --notePadText-color: rgb(0, 0, 0);
  

  /*From Page macro*/
  --link-color: rgb(0, 45, 190);
  --trim-color: rgb(255, 214, 0);
  --tile-color: rgba(250, 250, 250, 0.8);
  --pane-color: rgba(241, 241, 241, 0.5);
  --text-color: rgb(0, 2, 92);
  --page-color: rgb(255, 255, 255);
  --line-color: rgba(222, 222, 222, 0.5);
  --line-width: 3px;
  --line-round: 6px;
}

/* ++++++++++++++++++Custom CSS Start++++++++++++++++++++++ */
@media screen and (min-width: 0px) {
  
    #sitemap h2 {
    font-family: var(--secondary-font);
  }
    .popup .subject h2 b {
    font-size: 4rem;
  }
  
  #sitemap .subject>ul>li a {
  	font-family: var(--primary-font);
    font-size: 1.3rem;
  }
  
  #sitemap p:not(.modal p) {
    font-size: 1.3rem;
	}
  
  #genesys-mxg-frame {
  background: transparent;
  }
  
}

@media screen and (min-width: 768px) {
  
  
}

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

}

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

}

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

}