@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: hsl(119, 44%, 51%);
        --color-brand-dark: hsl(162, 100%, 24%);
        
    /* fonts & text */
        --body-headings-font: "Oswald", serif;
        --body-headings-weight: 700;
        --body-text-font: "Arial", sans-serif;
        --body-text-weight: 400;
        --color-body-headings: hsla(0,0%,20%,1.00);
        --color-body-text: hsla(0,0%,30%,1.00);
        --color-body-text-bold: hsl(162, 20%, 30%);
        --color-announcement-header: #464646;
        --color-announcement-text: #1B1B1B;
        --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;
        --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;
        
    /* bullets */
        --bullet-light: hsl(162, 10%, 100%);
        --bullet-medium: hsl(162, 40%, 40%);
        --bullet-dark: hsl(0,0%,33%);
        --bullet-sub: hsl(162, 5%, 50%);
        --bullet-sub-size: .8rem;
        
    /* buttons */
        --button-text-default: #FFFFFF;
        --button-text-home: #FFFFFF;
        --button-text-contact: #FFFFFF;
        --button-text-news: #262626;
        --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: hsl(0, 0%, 20%); /* links */
        --button-text-rev-hover: #FFFFFF; /* links on opposite background color */
        --button-text-active: #3A3A3A;
        
        --button-bg-default: hsl(163, 100%, 20%); /* also text link color */
        --button-bg-rev-default: #FFFFFF; /* links on dark bg */
        --button-bg-home: #000;
        --button-bg-contact: hsl(163, 100%, 20%);
        --button-bg-contact-hover: hsl(163, 100%, 30%);
        --button-bg-news: #f7bd27; /* sets bg color of news section as well */
        --button-bg-questions: #464A97;
        --button-bg-jobs: hsl(201,100%,31%);
        --button-bg-emphasize: #B7B7B7;
        --button-secondary-bg-emphasize: hsl(201,10%,40%); /* used for Resources on FAQ pages */
        --button-bg-alternate: hsl(201,100%,31%);
        --button-bg-dropdownup: hsl(201,80%,26%);
        --button-bg-default-hover: hsl(0, 0%, 70%);
        --button-bg-default-not-hovered: hsl(201, 30%, 50%); /* 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 */
        
    /* box backgrounds */
        --box-1_bg-base: hsl(0,0%,85%);
        --box-1_bg-highlight: hsl(0,0%,95%);
        --box-1_text-heading: hsl(0,0%,40%);
        --box-1_text-content: hsl(0,0%,30%);
        --box-1_border-top: hsl(0,0%,85%);
        --box-1_border-bottom: hsl(0,0%,95%);
        
        --box-2_bg-base: hsl(201,100%,25%);
        --box-2_bg-highlight: hsl(201,100%,40%);
        --box-2_text-heading: hsl(201,100%,90%);
        --box-2_text-content: hsl(201,100%,100%);
        --box-2_border-top: hsl(201,100%,70%);
        --box-2_border-bottom: hsl(201,100%,40%);
        
        --box-3_bg-base: hsl(0,0%,74%);
        --box-3_bg-highlight: hsl(0,0%,97%);
        --box-3_text-heading: hsl(0,0%,20%);
        --box-3_text-content: hsl(0,0%,30%);
        --box-3_border-top: hsl(0,0%,70%);
        --box-3_border-bottom: hsl(0,0%,20%);
        
        --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%;
                
    /* 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: #fff;
		--deco-color-dark: #ccc;
        --fill-icon-color-1: #DCDCDC;
        --fill-icon-color-2: #C88200;
        --fill-icon-color-3: #658B32;
        --fill-icon-color-4: #82160B;
        /* dividers */
        /* transparent: fill = --bg-page */
        /* triangle */
        --triangle-height-large: 40px;
        --triangle-height-mobile: 40px;

    /* SVG fill colors - can also be used as bg-color */
        --fill-light: #fff;
        --fill-medium: #868686;
        --fill-medium-dark: #3E561A;
        --fill-dark: #0A4595;
        --fill-darkest: #122949;
        --fill-icon-page-header: hsl(162, 0%, 70%, 0.3);
        --fill-icon-deco: hsl(162, 5%, 80%); /* SVG decorations on page */
        --fill-icon-hours: #ACACAC; /* footer clock */
        --announcement-svg: #fff;
        
    /* nav cards with SVG */
		/* default fill color of icon is the same as button bg color --button-bg-default */
        --card-bg:  hsl(162, 0%, 70%); /* card bg color default */
        --card-bg-empasize: #;
        --card-circle-default: hsl(162, 100%, 100%);; /* circle outline color around svg */
        --card-svg-hover: #000;
        --card-bg-hover: hsl(162, 100%, 100%); /* circle bg color default + card bg color on hover */
        --card-circle-outline: hsl(162, 100%, 100%);
        --card-circle-hover-outline: hsl(162, 40%, 30%);
        --card-text: hsl(162, 0%, 100%);
        --card-text-hover: hsl(162, 30%, 20%);
        /* if the color scheme for boxes should be different, assign classes to the main anchor tags */
        
    /* outlines */
        --border-light: #ccc;
        --border-dark: #7E7E7E;
        --border-menu-buttons: #fff; /* includes secondary and tertiary */
        --border-gallery-mobile-button: #ffffff;
        
    /* Drop-Down Buttons / FAQ */
        --faq-category-text-size-mobile: 1.2rem;
        --faq-category-text-size-large: 1.3rem;
        
        --faq-question-text: hsl(0, 0%, 20%); /* hover state set by default buttons */
        --faq-question-bg-default: hsl(0, 0%, 90%); /* bar default color, also sets the border color of the answer. hover state set by default buttons */
        /* bar hover controlled by --button-bg-default-hover */
        
        --faq-category-text: #fff; /* p */
        --faq-category-text-hover: #fff;
        
        --faq-answer-title: hsl(162, 0%, 20%); /* h3 */
        --faq-answer-text: #3A3A3A;
        --faq-answer-bg: hsl(0, 0%, 90%);
        
    /* Fill colors */
        --bg-social-bar: #fff;
        --bg-logo-bar: #fff; /* logo background on scroll down */
        --bg-social-icon: #6F6F6F;
        --bg-page: #fff;
        /*--bg-page: hsl(24, 100%, 50%);*/
        --bg-testimonials: rgba(140,140,140,1.00);
        --bg-footer: #414141;
        
    /* logo - on scroll down add classes */
        --main-page-shrink-margin-top: -2px; /* where is stops after scrolling down */
        --main-page-shrink-max-width: 200px;

        --sub-page-shrink-margin-top: -2px; /* where is stops after scrolling down */
        --sub-page-shrink-max-width: 140px;

        --sub-page-hide-shrink-margin-top: -210px; /* where is stops after scrolling down */
        --sub-page-hide-shrink-max-width: 200px;
        
    /* Slider */
        --slider-text-title: #313131;
        --slider-text-description: #313131;
        --slider-bg-title: #fff;
        --slider-bg-description: #fff;
        --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-weight: 700;
        --nav-edge-padding-mobile: 16px;  /* defines top and bottom */
        --nav-edge-padding-large: 15px; 
        --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: #5F5F5F;
        --color-form-headings: #003F28;
        --bg-color-form: #F4F4F4;
        /* options = color-body-text */
        
    /* Scrollbar */
        --scrollbar-color: #005940;
        --scrollbar-color-hover: #00805B;
        --scrollwatcher-color-main: #939393;
        --scrollwatcher-color-bg: #fff;
        
    /* Content padding */
        --mobile-maxcol-size-left-padding: 48px; /* how wide content can get on mobile, accounting for width of side buttons */
        --mobile-maxcol-size-right-padding: 30px;
        --large-maxcol-size-left-padding: 56px; /* 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 */
        --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(50, 50, 93, 0.25) 0px 8px 20px -3px, rgba(0, 0, 0, 0.3) 0px 8px 12px -6px; /* on boxes */
        --edge-fade-amount: 5%; /* 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;
	}


    /* logo sizes default */
        #header_logo-center .main-page img {
	margin-top: 50px;
	max-width: 320px;
	margin-right: auto;
	margin-left: auto;
            
            /*shape-outside: url("images/logos/Traffic-Services.png");
            filter:
                drop-shadow(2px 2px 2px #000);*/
            /* hor (+ = right) vert (+ = down) blur spread */  
            /* adds to the drop shadow of the shape after scroll down */
        }

        #header_logo-center .sub-page img,
        #header_logo-center .sub-page_hide img {
            max-width: 250px;
            margin-top: 20px;
        } 


    /* on scroll down */
        #header_logo-center .shrink-logo {
            padding: 10px 10px 6px 10px; /* make top padding larger so the logo can be pulled up to hide the drop shadow */
            border: 0px;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
        }

        #header_logo-center .main-page .shrink-logo {
            margin-top: -4px!important; /* where is stops after scrolling down */
            max-width: 260px;
        }

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


    /* variables CANNOT be used in media queries so use regular css */
    @media (min-width: 660px) {       
        
        /* logo sizes default */
        #header_logo-center .main-page img {
	margin-top: 44px;
	max-width: 440px;
	margin-right: auto;
	margin-left: auto;
        }

        #header_logo-center .sub-page img,
        #header_logo-center .sub-page_hide img {
            max-width: 360px;
        }        
        
        /* on scroll */
        #header_logo-center .main-page .shrink-logo {
            margin-top: -4px!important; /* where is stops after scrolling down. Pull up the amount of drop shadow */
            max-width: 220px;
        }

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