@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);
		--bg-page: hsl(60,11%,96%); /* page background */
		
        
    /* fonts & text */
        --body-headings-font: "Lato", sans-serif;
        --body-sub-headings-font: "Lato", sans-serif; /* h2 & h3 */
        --body-headings-weight: 400;
        --body-text-font: "Lato", sans-serif;
        --body-text-weight: 400;
        --color-body-headings: hsla(0,0%,18%,1.00);
        --color-body-text: hsla(0,0%,18%,.8);
        --color-body-text-bold: hsla(218,54%,21%,1.00);
		--color-body-text-drop-cap: hsla(0,0%,11%,1.00);
        --color-news-header: hsla(0,0%,100%,.8);
		--color-testimonial-header: hsla(0,0%,30%,.7);
		--color-testimonial-text: hsla(0,0%,20%,.9);
		--color-testimonial-text-name: hsla(0,0%,40%,.9);
		--color-testimonial-quotes: hsla(0,0%,50%,.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.4;
        --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;		

        
    /* buttons */
        --button-text-default: #FFFFFF;
        --button-text-home: #FFFFFF;
        --button-text-contact: #FFFFFF;
        --button-text-news: hsla(0,0%,100%,1.00);;
        --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%,100%,1); /* links */
        --button-text-rev-hover: #FFFFFF; /* links on opposite background color */
        --button-text-active: #fff;
		--button-txt-default-not-hovered: #fff;
        
        --button-bg-default: hsla(216,47%,20%,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: hsl(180,60%,24%);
        --button-bg-contact-hover: hsl(180,100%,15%);
        --button-bg-news: hsla(235,46%,38%,1.00); /* sets bg color of news section as well */
        --button-bg-questions: #8A3300;
        --button-bg-jobs: hsl(201,100%,31%);
        --button-bg-emphasize: hsla(180,50%,30%,1.00);
        --button-secondary-bg-emphasize: hsla(0,0%,30%,1.00); /* used for Resources on FAQ pages */
        --button-bg-alternate: hsla(0,0%,53%,1.00); /* buttons originating from drop-up menu button */
        --button-bg-dropdownup: hsla(0,0%,34%,1.00);
        --button-bg-default-hover: hsla(216,47%,50%,1.00);
		--button-bg-on-click: hsl(195,60%,20%);
        --button-bg-default-not-hovered: hsl(195,10%,40%); /* fades out buttons not hovered. NOT MOBILE because it does not work properly since it cannot be hovered */
        --button-bg-rev-default-hover: #B1FF00;
        --button-bg-active: #8A3300; /* #E8821A; */
		        
        --button-ouline: #fff; /* if button parent has box-style applied to make the button stand out */

        
    /* box styles - backgrounds */
        --box-1_bg-base: hsla(0,0%,90%,0.70);
        --box-1_bg-highlight: hsla(218,64%,61%,.4);
        --box-1_text-heading: hsla(0,0%,50%,0.90);
        --box-1_text-content: hsla(0,0%,30%,0.90);
        --box-1_border-top: hsla(194,70%,47%,.7);
        --box-1_border-bottom: hsla(194,70%,47%,.7);
		--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(218,50%,21%,.7);
		--box-1-li_text-hover: hsla(218,50%,21%,1);
        
        --box-2_bg-base: hsla(194,50%,60%,.7);
        --box-2_bg-highlight: hsla(194,50%,60%,.3);
        --box-2_text-heading: hsla(218,50%,31%,1);
        --box-2_text-content: hsla(218,50%,31%,.8);
        --box-2_border-top: hsla(194,70%,47%,.7);
        --box-2_border-bottom: hsla(194,70%,47%,.7);
		--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-2-li_text-hover: hsla(218,50%,31%,.8);
		
		--box-3_bg-base: hsla(194,80%,40%,.7);
        --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-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-3-li_text-hover: hsla(218,50%,31%,.8);
        
        --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: 0px;
        --box-higlight-left: 50%;
        --box-higlight-top: 200%;
		
		
	/* Cards with top image slider */
		--cards-with-image-slider-header: hsla(0,0%,22%,1.00);
		--cards-with-image-slider-bg: hsla(0,0%,35%,.8);
		--cards-with-image-slider-bg: hsla(0,0%,90%,.8);
		
		--button-disabled-bg: hsla(0,0%,84%,1);
		--button-disabled-text: hsla(0,0%,54%,1);
		
		--card-min-width: 35ch;
		--card-spacing: 1rem;
		--card-image-ratio: 3/2;
		
		
	/* Random Content */
		--wrapper-bg-random-content: hsla(0,0%,90%,0.30);
		--color-random-content-title: hsla(0,0%,50%,0.90);
		--color-random-content-text: hsla(0,0%,30%,0.90);
                
    /* 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(0,0%,100%,.7);
		--deco-color-dark: hsla(0,0%,23%,0.3);
        --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;
		
       
    /* bullets */
        --bullet-light: hsl(162, 10%, 100%);
        --bullet-medium: hsl(162, 40%, 40%);
        --bullet-dark: hsla(0,0%,16%,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%,30%,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(218,41%,34%,1.00); /* inside circle-default */
        --card-svg-default: hsla(218,41%,34%,1.00); /* color of SVG */
		--card-svg-hover: hsla(218,41%,34%,1.00); /* color of SVG when card is hovered */
        --card-bg-hover: hsla(0,0%,60%,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: #fff;
        /* 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;
        
    /* Accordions / Drop-Down Buttons / FAQ */
        --faq-category-text-size-mobile: 1.2rem; /* FAQ only */
        --faq-category-text-size-large: 1.3rem;
		
		/* change of header when hover over any questions in that category */
		--faq-category-bg-default: hsla(0,0%,50%,1.00);
		--faq-category-text: #fff; /* p */
		--faq-category-bg-hover: hsla(0,0%,30%,1.00);
        --faq-category-text-hover: #fff;
		
		/* Common Accordions */
			--accordion-title-radius: 0px;
			--accordion-title-text: hsla(0,0%,23%,1.00); /* hover state set by default buttons */
			--accordion-title-bg-default: hsla(0,0%,80%,.70); /* 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: hsl(162, 0%, 20%);
			--accordion-content-bg: hsl(162, 0%, 95%);
		
			--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: #fff; /* logo background on scroll down */
        --bg-social-icon: #6F6F6F;
        /*--bg-page: hsl(24, 100%, 50%);*/
        --bg-testimonials: hsla(0,0%,90%,1.00);
		--bg-videos: hsla(218,54%,21%,1.00);
        --bg-footer: hsla(0,0%,27%,1.00);
        

    /* SVG fill colors: add class to SVG wrapper */
        --fill-default: hsl(60,11%,80%); /* icons used on pages */
		--fill-light: #fff;
        --fill-medium: hsla(194,60%,47%,.4);
        --fill-dark: hsla(194,40%,47%,.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 */
		
    /* 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-size_drop-up: 90%; /* 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: 15px; 
        --nav-edge-button-radius: 0px;
        --nav-edge-side-spacing-mobile: 4px;
        --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;
		--form-label: hsla(216,27%,20%,1.00)
        --color-form-headings: hsla(216,27%,20%,1.00);
        --bg-color-form: hsl(60,11%,90%);
		--form-divider-color: hsla(0,0%,37%,.4);
		--form-label-color: #fff;
        /* options = color-body-text */
        
    /* Scrollbars */
        --scrollbar-color: hsla(0,0%,29%,0.60);
        --scrollbar-color-hover: hsla(0,0%,29%,0.80);
        
        --scrollwatcher-color-main: hsla(0,0%,0%,0.50);
        --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(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;
	}


    /* logo sizes default */
        #header_logo-center .main-page img {
			margin-top: 30px;
			margin-right: auto;
			margin-left: auto;
			max-width: 240px;
            
            /*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: 220px;
            margin-top: 20px;
        } 


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

        #header_logo-center .main-page .shrink-logo {
            margin-top: 0px; /* where is stops after scrolling down */
        }

        #header_logo-center .sub-page .shrink-logo { /* docked at top */
            margin-top: 0px; /* where is stops after scrolling down */
        }
        #header_logo-center .sub-page_hide .shrink-logo { /* move out of view */
            margin-top: -100px; /* 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 .main-page img {
			margin-top: 6px;
			max-width: 380px;
			margin-right: auto;
			margin-left: auto;
        }

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

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