/*------------------------------------*\
    
    CSS Custom Properties (aka CSS Variables)
 
    Custom properties are entities defined by CSS authors that contain specific values to be reused throughout a document
    Example usage: brand colors, common margins, drop-shadows, border styles, and more!
    
    Visit the CSS Custom Properties guru card for more info: https://app.getguru.com/card/ceE54p4i/CSS-Custom-Properties-AKA-CSS-Variables 

\*------------------------------------*/


/**
 * Global Variables (Optional - Remove anything that's not being used)
 */

 :root {
    /* spacing */
    --section-margins: 60px; 
    --section-paddings: 60px;

    /* colors */
    --black: #000;
    --blue: #164A7C;
    --white: #fff;
    --light-gray: #c9cbcc;
    --light-gray-1: #E0E0E0; 
    --pale-gray: #434345;
    --fuchsia-red: #AB1355;
    --btn-red-hover: #7d0e3e;
    --gray: #425968;
    --btn-gray-hover: #354752;

    /* transition */
    --transition: all 0.25s ease-in-out;

    /* box-shadow */
    --box-shadow: 0px 0px 15px rgba(0,0,0,0.15);

    /* transparent color */
    --transparent:  rgba( 0, 0, 0, .25 );
}

@media (min-width: 768px) {
    :root {
        --section-margins: 95px; 
        --section-paddings: 95px;
    }
}

@media (min-width: 1025px) {
    :root {
        --section-margins: 102px;
        --section-paddings: 102px;
    }
}