@charset "utf-8";
/* CSS Document */

/* CUSTOM VARIABLES */
	:root {
    /* font sizes */        
        --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
        --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
        --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
        --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
        --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
        --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
        --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);        
        
    /* colors - logo */
        --color-brand-light: hsla(194,100%,47%,1.00);
        --color-brand-dark: hsla(218,54%,41%,1.00);
		
        
    /* fonts & text */
        --body-headings-font: "Neogray", sans-serif;
        --body-sub-headings-font: "Neogray", serif; /* h2 & h3 */
		--body-page-sub-heading-font: "Lato", sans-serif; /* #page-name h2 */
        --body-headings-weight: 400;
        --body-text-font: "Lato", sans-serif;
        --body-text-weight: 400;
        --color-body-headings: hsla(0,0%,0%,1.00); /* h1 - h3 */
		--color-body-sub-headings: hsla(0,0%,0%,.8); /* h4 - h5 */
        --color-body-text: hsla(0,0%,26%,.7);
        --color-body-text-bold: hsla(218,54%,21%,1.00);
		--color-text-drop-cap: hsla(0,0%,0%,1.00);
		--font-text-drop-cap: "Neogray", sans-serif;
		--font-weight-drop-cap: 500;
        --color-news-header: #464646;
		--color-testimonial-header: hsla(0,0%,100%,.7);
		--color-testimonial-text: hsla(0,0%,100%,0.90);
		--color-testimonial-text-name: hsla(0,0%,100%,0.70);
		--color-testimonial-quotes: hsla(0,0%,100%,.6);
		--color-videos-header: hsla(0,0%,100%,.7);
        --font-size-mobile: 1.2rem; /* includes list text */
        --line-height-mobile: 1.6; /* applies to lists as well */
        --font-size-large: 1.3rem;
        --line-height-large: 1.5;
        --font-weight-bold: 500;
		
		/* for heading sizes refer to CLAMP at bottom */
		/* --color-light: #fff;
        --color-medium: #A3A3A3;
        --color-dark: #008A58;*/
		
        
    /* lists */
        --list-item-margin-bottom-mobile: 10px;
        --list-item-margin-bottom-large: 10px;
        --line-height-bullet-large: 1.3;
        --line-height-bullet-mobile: 1.3;		

        
    /* buttons */
        --button-text-default: #FFFFFF;
        --button-text-home: #FFFFFF;
        --button-text-contact: #fff;
        --button-text-news: hsl(174,55%,20%);;
        --button-text-questions: #fff; /* sidebar */
        --button-text-emphasize: #fff;
        --button-secondary-text-emphasize: #fff;
        --button-text-alternate: #fff; /* secondary menu */
        --button-text-dropdownup: #fff;
        --button-text-hover: hsla(0,0%,0%,0.90); /* links */
        --button-text-rev-hover: #FFFFFF; /* links on opposite background color */
        --button-text-active: #3A3A3A;
		--button-txt-default-not-hovered: #fff;
        
        --button-bg-default: hsla(70,89%,23%,1.00); /* also text link color */
        --button-bg-rev-default: #FFFFFF; /* links on dark bg */
        --button-bg-home: hsla(0,0%,0%,1.00);
        --button-bg-contact: hsla(233,67%,24%,1.00);
        --button-bg-news: hsl(174,55%,52%); /* sets bg color of news section as well */
        --button-bg-questions: #464A97;
        --button-bg-jobs: hsl(201,100%,31%);
        --button-bg-emphasize: hsla(180,50%,30%,1.00);
        --button-secondary-bg-emphasize: hsl(218,34%,61%); /* used for Resources on FAQ pages */
        --button-bg-alternate: hsl(201,100%,31%); /* buttons originating from drop-up menu button */
        --button-bg-dropdownup: hsl(201,80%,26%);
        --button-bg-default-hover: hsla(70,89%,40%,1.00);
		--button-bg-on-click: hsl(195,60%,20%);
        --button-bg-default-not-hovered: hsla(0,0%,49%,1.00); /* fades out buttons not hovered */
        --button-bg-rev-default-hover: #B1FF00;
        --button-bg-active: #EDEDED;
		
        
        --button-ouline: #fff; /* if button parent has box-style applied to make the button stand out */
        
    /* Announcements/News */
        /* background color controlled by --button-bg-news */
        --news-title-color: hsl(180,100%,10%);
        --news-text-color: hsl(180,100%,16%);
        
    /* box styles - backgrounds */
        --box-1_bg-base: hsla(70,69%,43%,.8);
        --box-1_bg-highlight: hsla(218,64%,61%,.4);
        --box-1_text-heading: hsla(0,0%,0%,.8);
        --box-1_text-content: hsla(0,0%,0%,.7);
        --box-1_border-top: hsla(70,30%,30%,.8);
        --box-1_border-bottom: hsla(70,30%,30%,.8);
		--box-1-li_bg-base: hsla(0,0%,100%,0.20); /* with shadow-box class */
		--box-1-li_bg-hover: hsla(0,0%,100%,0.5);
		--box-1-li_heading-base: hsla(218,50%,21%,.8);
		--box-1-li_heading-hover: hsla(218,70%,21%,1);
		--box-1-li_text-base: hsla(0,0%,0%,.8);
		--box-1-li_text-hover: hsla(218,50%,21%,1);
        
		--box-2_bg-base: hsla(0,0%,65%,0.20);
        --box-2_bg-highlight: hsla(194,80%,40%,.2);
        --box-2_text-heading: hsla(0,0%,34%,1.00);
        --box-2_text-content: hsla(0,0%,34%,.8);
        --box-2_border-top: hsla(194,70%,47%,.7);
        --box-2_border-bottom: hsla(194,70%,47%,.7);
		--box-2-li_bg-base: hsla(0,0%,100%,0.20); /* with shadow-box class */
		--box-2-li_bg-hover: hsla(0,0%,100%,0.5);
		--box-2-li_text-hover: hsla(218,50%,31%,.8);
		
		--box-3_bg-base: hsla(194,40%,70%,.2);
        --box-3_bg-highlight: hsla(194,80%,40%,.2);
        --box-3_text-heading: hsla(218,50%,31%,1);
        --box-3_text-content: hsla(218,50%,31%,.8);
        --box-3_border-top: hsla(194,70%,47%,.7);
        --box-3_border-bottom: hsla(194,70%,47%,.7);
		--box-3-li_bg-base: hsla(0,0%,100%,0.20); /* with shadow-box class */
		--box-3-li_bg-hover: hsla(0,0%,100%,0.5);
		--box-3-li_text-hover: hsla(218,50%,31%,.8);
		
		--box-4_bg-base: hsla(218,60%,85%,.7);
        --box-4_bg-highlight: hsla(218,64%,61%,.4);
        --box-4_text-heading: hsla(218,50%,21%,1);
        --box-4_text-content: hsla(218,50%,21%,.8);
        --box-4_border-top: hsla(194,70%,47%,.7);
        --box-4_border-bottom: hsla(194,70%,47%,.7);
		--box-4-li_bg-base: hsla(0,0%,100%,0.20); /* with shadow-box class */
		--box-4-li_bg-hover: hsla(0,0%,100%,0.5);
		--box-4-li_heading-base: hsla(218,50%,21%,.8);
		--box-4-li_heading-hover: hsla(218,70%,21%,1);
		--box-4-li_text-base: hsla(218,50%,21%,.7);
		--box-4-li_text-hover: hsla(218,50%,21%,1);
        
        --bg-light: #fff;
        --bg-light-1: #EFEFEF;
        --bg-light-2: #EFEFEF;
        --bg-light-3: #EFEFEF;
        --bg-medium: #A8A8A8;
        --bg-medium-1: #A8A8A8;
        --bg-medium-2: #A8A8A8;
        --bg-medium-3: #A8A8A8;
        --bg-dark: #122949;
        --bg-dark-1: #122949;
        --bg-dark-2: #122949;
        --bg-dark-3: #122949;
        --bg-caution: #7C0000;
        --bg-light_hover: #E3E3E3;
        --bg-medium_hover: rgba(0,64,69,0.10);
        --bg-dark_hover: rgba(0,64,69,0.10);
        --box-border-width: 0px;
        --box-border-radius: 6px;
        --box-higlight-left: 50%;
        --box-higlight-top: 200%;
		
	/* Random Content */
		--wrapper-bg-random-content: hsla(70,50%,50%,.3);
		--color-random-content-title: hsla(0,0%,31%,1.00);
		--color-random-content-text: hsla(0,0%,33%,1.00);
		--random-content-text-size: 99%;
                
    /* box text colors */
        --box-text-on-white: #333333;
        --box-text-on-light: #4F4F4F;
        --box-text-on-medium: #FFFFFF;
        --box-text-on-dark: #FFFFFF;
        --box-text-on-caution: #FFFFFF;
                
    /* decorations */ 
		--deco-color-light: hsla(70,89%,43%,.4);
		--deco-color-dark: hsla(70,69%,23%,.8);
        --fill-icon-color-1: #DCDCDC;
        --fill-icon-color-2: #C88200;
        --fill-icon-color-3: #658B32;
        --fill-icon-color-4: #82160B;
		--fill-icon-page-header: hsla(0,0%,100%,0.80); /* SVG superimposed on header background photo on sub-pages */
        /* dividers */
        /* transparent: fill = --bg-page */
        /* triangle */
        --triangle-height-large: 40px;
        --triangle-height-mobile: 40px;
		--shape-accent-color: #aecf0c; /* hero bottom shape --> 
		
       
    /* bullets */
        --bullet-light: hsla(70,89%,43%,1.00);
        --bullet-medium: hsl(162, 40%, 40%);
        --bullet-dark: hsla(70,59%,43%,1.00);
		--bullet-warning: hsla(0,100%,33%,1.00);
        --bullet-sub: hsl(162, 5%, 50%);
        --bullet-sub-size: .8rem;		

        
    /* nav cards with SVG */
		/* default fill color of icon is the same as button bg color --button-bg-default */
        --card-bg: hsla(0,0%,0%,1.00); /* card bg color default */
        --card-bg-empasize: #FFF;
        --card-circle-default: hsl(162, 100%, 100%); /* circle outline color around svg */
		--card-inner-circle-default: hsla(70,89%,23%,1.00); /* inside circle-default */
        --card-svg-default: hsla(70,89%,23%,1.00); /* color of SVG */
		--card-svg-hover: hsla(0,0%,0%,1.00); /* color of SVG when card is hovered */
        --card-bg-hover: hsla(70,89%,40%,1.00); /* circle bg color default + card bg color on hover */
        --card-circle-bg-default: #fff; /* background behin SVG */
		--card-circle-bg-hover: #fff;
		--card-circle-outline: hsl(162, 100%, 100%);
        --card-circle-outline-hover: #fff;
        --card-text: hsl(162, 0%, 100%);
        --card-text-hover: #000;
        /* if the color scheme for boxes should be different, assign classes to the main anchor tags */
		
	/* Profile Cards */
		--profile-card-bg: hsla(194,30%,80%,.7);
		--profile-card-header: hsla(194,30%,20%,.8);
		--profile-card-text: hsla(194,30%,20%,.9);
		--profile-card-icons: hsla(0,0%,100%,1.00);
		--profile-card-clr-scheme-1: hsla(0,44%,37%,1.00); /* PEI */
		--profile-card-clr-scheme-2: hsla(158,30%,20%,1.00); /* NB */
		--profile-card-clr-scheme-3: hsla(218,80%,36%,1.00); /* NS */
		--profile-card-clr-scheme-4: hsla(39,60%,40%,1.00); /* NL */
		--profile-card-header-size-small: 1.5rem;
		--profile-card-header-size-large: 1.4rem;
		
        
    /* outlines */
        --border-light: #ccc;
        --border-dark: #7E7E7E;
        --border-menu-buttons: #fff; /* includes secondary and tertiary */
        --border-gallery-mobile-button: #ffffff;
        
    /* Accordions / Drop-Down Buttons / FAQ */
        --faq-category-text-size-mobile: 1.2rem; /* FAQ only */
        --faq-category-text-size-large: 1.3rem;
		
		--faq-category-bg-default: hsla(0,0%,100%,1.00);
		--faq-category-bg-hover: hsla(0,0%,100%,1.00);
		--faq-category-text: #808080; /* p */
        --faq-category-text-hover: hsla(0,0%,20%,1.00);
		
		/* Common Accordions */
			--accordion-title-radius: 3px;
			--accordion-title-text: hsl(0, 0%, 100%); /* hover state set by default buttons */
			--accordion-title-bg-default: hsla(0,0%,50%,1.00); /* bar default color, also sets the border color of the answer. hover state set by default buttons */
				/* hover: controlled by --button-bg-default-hover */

			--accordion-content-title: hsl(162, 0%, 20%); /* h3 */
			--accordion-content-text: hsla(0,0%,29%,1.00);
			--accordion-content-bg: hsla(0,0%,81%,0.30);
		
			--font-size-mobile_accordion: 1rem; /* includes list text */
			--font-size-mobile_accordion-header: 1.3rem; /* h3  */

			--font-size-large_accordion: 1.1rem;
			--font-size-mobile_accordion-header: 1.3rem; /* h3  */		
        
    /* Element fill colors */
        --bg-social-bar: #fff;
		--bg-logo-bar-initial: rgba(255,255,255,0.70); /* logo background */
        --bg-logo-bar: #fff; /* logo background on scroll down */
        --bg-social-icon: #6F6F6F;
        --bg-page: #fff; /* page background */
        /*--bg-page: hsl(24, 100%, 50%);*/
        --bg-testimonials: hsla(0,0%,16%,1.00);
		--bg-videos: hsla(218,54%,21%,1.00);
        --bg-footer: hsla(70,89%,13%,1.00);
        

    /* SVG fill colors: add class to SVG wrapper */
        --fill-default:hsla(70,89%,43%,.4); /* icons used on pages */
		--fill-light: #fff;
        --fill-medium: hsla(194,40%,67%,.4);
        --fill-dark: hsla(194,40%,57%,.6);
        --fill-page-header: hsl(162, 0%, 70%, 0.3);
        --fill-hours: #ACACAC; /* footer clock */
        --fill-announcement: #fff;
		/* --fill-testimonials: --bg-testimonials */
		/* --fill-videos: --bg-videos */
		

        
    /* Slider */
        --slider-text-title: #000000;
        --slider-text-description: #272727;
        --slider-bg-title: rgba(255,255,255,1);
        --slider-bg-description: rgba(255,255,255,1);
        --slider-bg-border-width: 0px;
        --slider-bg-border-color: #fff;
        
    /* Menus */
        --button-padding-mobile: 14px 15px; /* Secondary */
        --button-padding-large: 8px 15px;
        
    /* Side navigation */
        --nav-edge-font-size-mobile: 1rem;
        --nav-edge-font-size-large: 1.2rem;
		--nav-edge-font-size_drop-up: 85%; /* make font smaller for buttons originating from drop-up */
        --nav-edge-font-weight: 700;
        --nav-edge-padding-mobile: 16px;  /* defines top and bottom */
        --nav-edge-padding-large: 10px; 
        --nav-edge-button-radius: 6px;
        --nav-edge-side-spacing-mobile: 10px;
        --nav-edge-side-spacing-large: 6px;
        --nav-edge-bottom-spacing-mobile: 2px;
        --nav-edge-bottom-spacing-large: 6px;
        --nav-side-button-shadow: 2px 2px 4px -1px rgba(0,0,0,0.60); /* includes sticky logo */
        --font-size-outside-buttons-mobile: 1rem; /* side navigation: left and bottom */
        --font-size-outside-buttons-large: 1.1rem;
        
    /* Form - wrapper and element spacing in custom.css */
        --form-max-width: 1200px;
        --form-description: #3A3A3A;
        --color-form-headings: hsla(0,0%,17%,1.00);
		--form-headings-underline-color: hsla(218,24%,31%,.3);
        --bg-color-form: rgba(255,255,255,.4);
        /* options = color-body-text */
        
    /* Scrollbars */
        --scrollbar-color: hsla(70,69%,33%,1.00);
        --scrollbar-color-hover: hsla(70,89%,43%,1.00);
        
        --scrollwatcher-color-main: #aecf0c;
        --scrollwatcher-color-bg: rgba(255,255,255,0.70);
        
    /* Content padding */
        --mobile-maxcol-size-left-padding: 54px; /* how wide content can get on mobile, accounting for width of side buttons */
        --mobile-maxcol-size-right-padding: 30px;
        --large-maxcol-size-left-padding: 66px; /* how wide content can get on large screens */
        --large-maxcol-size-right-padding: 20px;
    
    /* Video Player */    
        /* thumb outlines specified in jQuery script: thumbsBorderColorON + thumbsBorderColorOFF */
        /* suggested: make all the same - choose complementary bg color: borderColor, thumbsBorderColorOFF, thumbsWrapperBg */
        
   
		
	/* Miscellaneous */
        --logo-border-radius: 4px;
		--text-color-tagline: hsl(0,0%,100%);
        --carousel-width: 900px;
        --shadow-text: 2px 2px 2px rgba(0,0,0,0.50); /* on text */
        --shadow-box: rgba(30, 30, 73, 0.25) 0px 8px 10px -3px, rgba(0, 0, 0, 0.3) 0px 8px 12px -6px; /* on boxes */
        --edge-fade-amount: 15px; /* carousel content fading into transparent https://www.youtube.com/watch?v=Ca8L8iqnmdw */
        --deco-svg-size-mobile: 80px; /* size of decorative SVG icons */
        --deco-svg-size-large: 120px;
        /* link colors: --button-text-hover + --button-text-rev-hover */
        --card-slant: 20%;
        --card-slant_margin: 2rem;
	    --card-slant_padding: 2rem;
	}

/* Font Sizes */
	#page-name h1 {
	font-size: clamp(2.2rem, 8vw, 4rem);
	line-height: 100%;
	}

	#page-name h2 {
		font-size: clamp(1.4rem, 3vw, 1.6rem);
	}


    /* logo sizes default */
		
        #header_logo-center img {
			padding: 20px 20px 10px 20px;
            max-width: 280px;
			border-bottom-left-radius: 3px;
			border-bottom-right-radius: 3px;			
        }    
		
        #header_logo-center {
			margin-top: 0px; /* where it starts before scrolling down. */
        }		
        
        /* on scroll */
        #header_logo-center .shrink-logo,
		#header_logo-center .shrink-logo {
            margin-top: 0px!important; /* where is stops after scrolling down. ADD size of of drop shadow */
			max-width: 180px;
			padding: 14px 24px 6px 24px;
        }

        #header_logo-center .sub-page_hide .shrink-logo { /* move out of view */
            margin-top: -200px!important; /* where is stops after scrolling down */
        }   


    /* variables CANNOT be used in media queries so use regular css */
    @media (min-width: 660px) {       
        
        /* logo sizes default */
        #header_logo-center img {
			padding: 20px 30px 14px 30px;
            max-width: 460px;
        }    
		
        #header_logo-center .main-page,
		#header_logo-center .sub-page {
			margin-top: 0px!important; /* where is stops after scrolling down. Pull up the amount of drop shadow */
        }		
        
        /* on scroll */
        #header_logo-center .main-page .shrink-logo,
		#header_logo-center .sub-page .shrink-logo {
            margin-top: -2px!important; /* where is stops after scrolling down. Pull up the amount of drop shadow */
			max-width: 240px;
			padding: 14px 24px 6px 24px;
        }

        #header_logo-center .sub-page_hide .shrink-logo { /* move out of view */
            margin-top: -200px!important; /* where is stops after scrolling down */
        }        
    }