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

/* CUSTOM VARIABLES */
	:root {
        
        /* buttons */
        --button-text-default: #FFFFFF;
        --button-text-home: #FFFFFF;
        --button-text-contact: #fff;
        --button-text-news: #FFFFFF;
        --button-text-questions: #FFFFFF; /* sidebar */
        --button-text-emphasize: #fff;
        --button-text-alternate: #fff; /* secondary menu */
        --button-text-hover: #FFFFFF;
        --button-text-active: #4B4B4B;
        
        --button-bg-default: #234EB5;
        --button-bg-home: #B0B0B0;
        --button-bg-contact: #29584E;
        --button-bg-news: #662132;
        --button-bg-questions: #985B0C;
        --button-bg-emphasize: #B50003;
        --button-bg-alternate: #676767; /* secondary menu */
        --button-bg-hover: #2F7466;
        --button-bg-active: #FFFFFF;
        
        
        /* text */
        --color-body-headings: #32477A;
        --color-body-text: #45414A;
        --color-light: #fff;
        --color-medium: #A3A3A3;
        --color-dark: #255356;
        
        
        /* bullets */
        --bullet-light: #fff;
        --bullet-medium: #848484;
        --bullet-dark: #32477A;
        --bullet-sub: #808080;
        
        /* box backgrounds */
        --bg-white: #fff;
        --bg-light: #EFEFEF;
        --bg-medium: #A8A8A8;
        --bg-dark: #122949;
        --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;
                
        /* decorations */ 
		--deco-color-light: rgba(255,255,255,0.70);
		--deco-color-dark: #868686;
        
		/* SVG fill colors - can also be used as bg-color */
		--fill-white: #fff;
        --fill-light: #D9D9D9;
        --fill-medium: #868686;
        --fill-medium-dark: #7B7B7B;
        --fill-dark: #0A4595;
        --fill-darkest: #122949;
        --fill-icon-page-header: #fff;
        --fill-icon-deco: #ACACAC; /* SVG decorations on page */
        
        /* nav cards with SVG */
		/* default fill color of icon is the same as button bg color --button-bg-default */
        --card-bg: #606060; /* card bg color default */
        --card-bg-hover: #fff; /* circle bg color default + card bg color on hover */
        --card-circle-outline: #FFFFFF;
        --card-text: #fff;
        --card-text-hover: #585858;
        /* 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-default: #fff;
        --faq-category-text-hover: ;
        --faq-category-bg-default: #727272;
        --faq-category-bg-hover: #535353;
        --faq-question-text-default: #333333; /* 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-emph-default: #686DC3; /* hover state set by default buttons */
        --faq-answer-text-default: #000;
        --faq-answer-bg: #fff;
        
        /* Fill colors */
        --bg-social-bar: #fff;
        --bg-logo-bar: #234EB5; /* logo background on scroll down */
        --bg-social-icon: #6F6F6F;
        --bg-page: #fff;
        --bg-footer: #1D387A;
        
        /* Misc */
        --nav-side-button-shadow: 2px 2px 6px -1px rgba(0,0,0,0.60); /* includes sticky logo */
        
        /* 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 */

	}


    /* logo sizes default */
	#header_logo-center .main-page img {
        max-width: 220px;
        margin-top: 10px;
	}
    #header_logo-center .sub-page img,
    #header_logo-center .sub-page_hide img {
        max-width: 160px;
        margin-top: 10px;
	}

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

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

        #header_logo-center .sub-page img,
        #header_logo-center .sub-page_hide img {
            max-width: 200px;
        }        
        
        /* on scroll */
        #header_logo-center .main-page .shrink-logo {
            margin-top: 0px; /* where is stops after scrolling down */
            max-width: 120px;
        }

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