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

/* CUSTOM VARIABLES */
	:root {
        
        /* buttons */
        --button-text-default: #FFFFFF;
        --button-text-home: #FFFFFF;
        --button-text-contact: #fff;
        --button-text-news: #000;
        --button-text-questions: #fff; /* sidebar */
        --button-text-emphasize: #fff;
        --button-text-alternate: #000; /* secondary menu */
        --button-text-dropdown: #fff;
        --button-text-hover: #FFFFFF;
        --button-text-rev-hover: #FFFFFF;
        --button-text-active: #fff;
        
        --button-bg-default: #464A97; /* also text link color */
        --button-bg-rev-default: #FFFFFF; /* links on dark bg */
        --button-bg-home: #000000;
        --button-bg-contact: #007C54;
        --button-bg-news: #fdb815;
        --button-bg-questions: #464A97;
        --button-bg-emphasize: #B7B7B7;
        --button-bg-alternate: #FF5F00;
        --button-bg-dropdown: #5B5B5B;
        --button-bg-default-hover: #000;
        --button-bg-rev-default-hover: #B1FF00;
        --button-bg-active: #737373;
        
        
        /* fonts & text */
        --body-headings-font: "Ethnocentric", sans-serif;
        --body-text-font: "Montserrat", sans-serif;
        --color-body-headings: #5F5F5F;
        --color-body-text: #6B6B6B;
        --color-body-text-bold: #3A3A3A;
        --font-size-mobile: 1rem; /* includes list text */
        --line-height-mobile: 1.2; /* applies to lists as well */
        --font-size-large: 1.1rem;
        --line-height-large: 1.5;
        --color-light: #fff;
        --color-medium: #A3A3A3;
        --color-dark: #255356;
        
        /* bullets */
        --bullet-light: #fff;
        --bullet-medium: #848484;
        --bullet-dark: #000000;
        --bullet-sub: #808080;
        --bullet-sub-size: .8rem;
        
        /* box backgrounds */
        --bg-white: #fff;
        --bg-light: #EFEFEF;
        --bg-medium: #A8A8A8;
        --bg-dark: #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 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: #A8A8A8;
        --fill-icon-color-2: #C88200;
        --fill-icon-color-3: #658B32;
        --fill-icon-color-4: #82160B;

		/* SVG fill colors - can also be used as bg-color */
		--fill-white: #fff;
        --fill-light: #D9D9D9;
        --fill-medium: #868686;
        --fill-medium-dark: #3E561A;
        --fill-dark: #0A4595;
        --fill-darkest: #122949;
        --fill-icon-page-header: #fff;
        --fill-icon-deco: #C5C5C5; /* SVG decorations on page */
        --fill-icon-hours: #ACACAC; /* footer clock */
        
        /* nav cards with SVG */
		/* default fill color of icon is the same as button bg color --button-bg-default */
        --card-bg: #ADADAD; /* card bg color default */
        --card-bg-empasize: #;
        --card-circle-default: #fff; /* circle outline color around svg */
        --card-svg-hover: #000;
        --card-bg-hover: #fff; /* circle bg color default + card bg color on hover */
        --card-circle-outline: #FFFFFF;
        --card-circle-hover-outline: #766B5E;
        --card-text: #fff;
        --card-text-hover: #0008;
        /* 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;
        
        /* FAQ */
        --faq-category-text: #fff;
        --faq-category-text-hover: #fff;
        --faq-category-text-size-mobile: 1.2rem;
        --faq-category-text-size-large: 1.3rem;
        --faq-category-bg: rgba(78,78,78,1.00);
        --faq-category-bg-hover: #000000;
        --faq-question-text: #535353; /* hover state set by default buttons */
        --faq-question-bg-default: #E4E4E4; /* also sets the border color of the answer. hover state set by default buttons */
        --faq-question-bg-emphasis: #84859F; /* hover state set by default buttons */
        --faq-question-text-emphasis: #fff;
        --faq-answer-text: #3A3A3A;
        --faq-answer-bg: #fff;
        
        /* Fill colors */
        --bg-social-bar: #fff;
        --bg-logo-bar: #fff; /* logo background on scroll down */
        --bg-social-icon: #6F6F6F;
        --bg-page: #fff;
        --bg-testimonials: rgba(21,21,21,0.50);
        --bg-footer: #3A3A3A;
        
        /* 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;
        
        /* Form - wrapper and element spacing in custom.css */
        --form-max-width: 900px;
        --form-description: #5F5F5F;
        --color-form-headings: #565656;
        /* options = color-body-text */
        
        /* Lists */
        --list-item-margin-bottom-mobile: 10px;
        --list-item-margin-bottom-large: 6px;
        
        /* Miscellaneous */
        --carousel-width: 900px;
        --nav-side-button-shadow: 2px 2px 4px -1px rgba(0,0,0,0.60); /* includes sticky logo */
        --shadow-text: 2px 2px 2px rgba(0,0,0,0.50); /* on text */
        --shadow-box: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; /* on boxes */
        --link-color-reverse: #000;
        --font-size-outside-buttons-mobile: 1rem; /* side navigation: left and bottom */
        --font-size-outside-buttons-large: 1.1rem;
        --mobile-maxcol-size-left-padding: 52px; /* 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;
        --edge-fade-amount: 5%; /* carousel content fading into transparent https://www.youtube.com/watch?v=Ca8L8iqnmdw */
	}


    /* logo sizes default */
        #header_logo-center .main-page img {
            margin-top: 0px;
            max-width: 260px;
            margin-right: auto;
            margin-left: auto;
        }

        #header_logo-center .sub-page img,
        #header_logo-center .sub-page_hide img {
            max-width: 260px;
        } 


    /* on scroll down */
        #header_logo-center .shrink-logo {
            padding: 0px!important;
            border: 0px;
            border-radius: 6px;
        }

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

        #header_logo-center .sub-page .shrink-logo { /* docked at top */
            margin-top: -100px!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: 100px;
        } 


    /* 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: 0px;
            max-width: 400px;
            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: -46px!important; /* where is stops after scrolling down */
            max-width: 220px;
        }

        #header_logo-center .sub-page .shrink-logo { /* docked at top */
            margin-top: -146px!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;
        }        
    }