/* COLORINGS */
/*Filter styles*/
.saturate {-webkit-filter: saturate(3); filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}

/*========== Change as necessary for each client -----
            When using CSS Variables in other skin files, use the following reference
            background: var(--primary, blue);
            After calling the CSS variable, use a comma and enter in the actual color or font as a 
            fallback.
    ==========*/

:root {
    /*========== DEFAULT SETTINGS ==========*/
    --primary-width: 100vw;
    --primary-height: 100vh;
    /*========== BORDERS ==========*/
    --border: 1px solid var(--secondary-color); /* Black */
    --border-top-width: 1px;
    --border-right-width: 1px;
    --border-bottom-width: 1px;
    --border-left-width: 1px;
    --border-top-style: solid;
    --border-right-style: solid;
    --border-bottom-style: solid;
    --border-left-style: solid;
    --border-top-color: var(--secondary-color); /* Black */
    --border-right-color: var(--secondary-color); /* Black */
    --border-bottom-color: var(--secondary-color); /* Black */
    --border-left-color: var(--secondary-color); /* Black */
    --border-radius: 0px;
    --border-radius-8: 8px;
    --border-radius-12: 12px;
    --border-radius-25: 25px;
    --border-width: 1px;
    --border-width-medium: medium;
    --border-width-thin: thin;
    --border-width-thick: thick;
    --border-width-length: 1vw; /* Good for using calc() JS */
    --border-style: solid;
    --border-style-dotted: dotted;
    --border-style-dashed: dashed;
    --border-style-double: double;
    --border-style-groove: groove;
    --border-style-ridge: ridge;
    --border-style-inset: inset;
    --border-style-outset: outset;
    --border-color: var(--secondary-color); /* Black */
    --border-color-trans: var(--primary-color); /* Transparent */
    --border-color-white: var(--tertiary-color); /* White */
    --border-none: none;
    /*========== FONTS ==========*/
    --primary-font-size: 16px;
    /*========== WEBSAFE FONTS ==========*/
    --primary-font-family: Arial, Helvetica, sans-serif;
    --secondary-font-family: "Times New Roman", Times, serif;
    --tertiary-font-family: "Lucida Console", Monaco, monospace;
    --sans-serif-font: sans-serif;
    --serif-font: serif;
    /*========== GOOGLE FONTS ==========*/
    --roboto-font: "Roboto", var(--sans-serif-font);
    --open-sans-font: "Open Sans", var(--sans-serif-font);
    --lato-font: "Lato", var(--sans-serif-font);
    --montserrat-font: "Montserrat", var(--sans-serif-font);
    --raleway-font: "Raleway", var(--sans-serif-font);
    --poppins-font: "Poppins", var(--sans-serif-font);
    --pt-sans-font: "PT Sans", var(--sans-serif-font);
    --exo-font: "Exo", var(--sans-serif-font);
    --arvo-font: "Arvo", var(--serif-font);
    --pt-serif-font: "PT Serif", var(--serif-font);
    /*========== COLORS ==========*/
    --primary-color: transparent;
    --secondary-color: #000000;
    --tertiary-color: #ffffff;
    /*========== Greys ==========*/
    --grey: #808080;
    --grey-light: #d3d3d3;
    --grey-dark: #a9a9a9;
    --grey-eee: #eeeeee;
    --grey-ccc: #cccccc;
    --grey-333: #333333;
    --grey-555: #555555;
    --grey-666: #666666;
    /*========== Blacks ==========*/
    --black: var(--secondary-color, black);
    --black-19: #191919;
    /*========== Reds ==========*/
    --red: #ff0000;
    /*========== Greens ==========*/
    --green: #008000;
    --green-light: #90ee90;
    --green-dark: #006400;
    /*========== Blues ==========*/
    --blue: #0000ff;
    --blue-secondary: #265d9e;
    --blue-intermediate: #1888C9;
    --blue-tertiary: #4473a6;
    --blue-light: #add8e6;
    --blue-dark: #00008b;
    /*========== GRADIENTS ==========*/
    --primary-gradient: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(41,137,216,0.88) 50%,rgba(125,185,232,0.76) 100%); /* Left to right gradient */
    --secondary-gradient: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,0.88) 50%,rgba(125,185,232,0.76) 100%); /* Vertical (top to bottom) gradient */
    --tertiary-gradient: radial-gradient(ellipse at center, rgba(30,87,153,1) 0%,rgba(41,137,216,0.88) 50%,rgba(125,185,232,0.76) 100%); /* Radial gradient */
    /*========== CLIENT SPECIFIC SETTINGS/OVERRIDES ==========*/
}