:root {

    /* Colors
    ==============================================*/
    --white: rgba(255, 255, 255, 1);
    --black: #000;
    --primary-light: #f0522d;
    --primary-dark: #53565c;
    --primary-bgcolor: #52565C;
    --primary-bgcolor-acsent: #EBEDED;
    --secondary-light: #ebeded;
    --secondary-dark: #eae9d6;
    --secondary-bgcolor: #F2F2F2;
    --secondary-bgcolor-acsent: #F2F2F2;
    --btn-primary: #52565c;
    --btn-hover: #707070;
    --btn-orange-hover: rgb(240, 82, 45, .75);
    --menu-font-color: #707070;


    /*  Measurements  */
    --txt-box-max-width: 1081px;
    --content-box-wide: 1425px;
    --txt-box-min-height: 450px;
    --contentbox-w-responive: clamp(375px, 91vw, var(--txt-box-max-width));
    --contentbox-h-responsive: min(40vw, var(--txt-box-min-height));
    --content-box-margin: 0 0 65px;
    --content-box-padding: max(2%,3rem) max(10%,1rem);
    --content-box-padding-narrow: 4% 12%;
    --content-box-margin-narrow: 2% 5% 4% 5%;
    --content-box-lead: 0 10% 2% 10%;
    --ourteam: 4% auto 4% auto;

    /*    Background
    ====================================================*/
    --header-height: 35px;
    --hero-window-height: calc(66vw - var(--header-height));
    --max-page-width: 1600px;
    --max-background-width: 1600px;
    --max-content-width: 1600px;
    --hero-bg-shape-width: 1100px;
    --hero-bg-shape-from-top: -480px;
    --hero-bg-shape-from-right: -230px;
    --hero-bg-shape-filler-size: 0;

    --shape-color: var(--secondary-bgcolor-acsent);
    --shape-slice-color: var(--primary-bgcolor);

    --content-top-offset: -65px;
    --content-min-height: 60vh;
    /* was 900px */
    /* Bio Background */
    --bio-pg-hero-window-height: 700px;
    --bio-pg-hero-bg-secondary-shape-from-top: -1200px;
    /*--bio-hero-bg-shape-from-top: -500px;*/
    /* Secondary Title Insurance Background */
    --title-insurance-pg-hero-window-height: 815px;
    --title-insurance-pg-hero-bg-secondary-shape-from-top: -1050px;
    --resources-guides-pg-hero-window-height: 500px;
    --resources-guides-pg-hero-bg-secondary-shape-from-top: -900px;
    --secondary-ourteam-hero-window-height: 900px;
    --secondary-ourteam-hero-bg-secondary-shape-from-top: -900px;


    /*    Positioning
    ====================================================*/
    /*--img-rt-1: */
    /* Line heights
    =============================================*/
    /* Buttons & Inputs
=========================================================*/
    --border-radius: 5px;
    /* Fonts
=========================================================*/

    --primary-font-family: "futura", sans-serif;
    --secondary-font-family: "brandon grotesque", sans-serif;

    --text-font-weight: 400;
    --font-weight-subheading: bolder;
    --heading: min(4.8vw, 22px);
    --font-content: 18px;
    /* 18px */
    --font-lead: 125%;
    /* 20px */
    --font-subheading: 137.5%;
    /* 22px */
    --font-heading: 237.5%;
    /* 38px */
    --font-title: 343.75%;
    /* 55px */

    /* SVGs
    ======================================================*/
    --svg-small: min(4vw, 20px);
}

/* Responsive Background Secondary Template */
@media only screen and (min-width: 350px) and (max-width: 750px) {
    :root {
        --hero-bg-secondary-shape-from-top: -740px;
    }
}

/* End Responsive Background Secondary Template */

@media screen and (min-width: 350px) and (max-width: 640px) {
    :root {
        --hero-bg-shape-width: 2000px;
        --hero-bg-shape-from-top: -980px;
        --hero-bg-secondary-shape-from-top: -895px;

        --hero-bg-shape-from-right: -490px;

        --content-top-offset: -115px;
    }
}

@media screen and (min-width: 640px) and (max-width: 800px) {
    :root {
        --hero-bg-shape-width: 2000px;
        --hero-bg-shape-from-top: -980px;
        --hero-bg-secondary-shape-from-top: -895px;

        --hero-bg-shape-from-right: -490px;

        --content-top-offset: -125px;
    }
}

@media screen and (min-width: 800px) and (max-width: 1024px) {
    :root {
        --hero-bg-shape-width: 2000px;
        --hero-bg-shape-from-top: -980px;
        --hero-bg-secondary-shape-from-top: -895px;

        --hero-bg-shape-from-right: -490px;

        --content-top-offset: -175px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
    :root {
        --hero-bg-shape-width: 2000px;
        --hero-bg-shape-from-top: -980px;
        --hero-bg-secondary-shape-from-top: -895px;

        --hero-bg-shape-from-right: -490px;

        --content-top-offset: -175px;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1280px) {
    :root {
        --hero-bg-shape-width: 2000px;
        --hero-bg-shape-from-top: -980px;
        --hero-bg-secondary-shape-from-top: -895px;

        --hero-bg-shape-from-right: -490px;

        --content-top-offset: -125px;
    }
}

@media screen and (min-width: 1200px) {
    :root {
        --header-height: 120px;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1366px) {
    :root {
        --hero-bg-shape-width: 2390px;
        --hero-bg-shape-from-top: -1050px;
        --hero-bg-secondary-shape-from-top: -895px;

        --hero-bg-shape-from-right: -490px;

        --content-top-offset: -125px;
    }
}

@media screen and (min-width: 1366px) and (max-width: 1600px) {
    :root {
        --hero-bg-shape-width: 2390px;
        --hero-bg-shape-from-top: -1235px;
        --hero-bg-secondary-shape-from-top: -895px;

        --hero-bg-shape-from-right: -490px;

        --content-top-offset: -225px;
    }
}

@media screen and (min-width: 1600px) and (max-width: 1850px) {
    :root {
        --hero-bg-shape-width: 2560px;
        --hero-bg-shape-from-top: -1235px;
        --hero-bg-secondary-shape-from-top: -895px;
        --hero-bg-shape-from-right: -490px;

        --content-top-offset: -225px;
        --max-page-width: 100%;
    }
}

@media screen and (min-width: 1850px) and (max-width: 2200px) {
    :root {
        --hero-bg-shape-width: 2830px;
        --hero-bg-shape-from-top: -1230px;
        --hero-bg-secondary-shape-from-top: -895px;
        --hero-bg-shape-from-right: -490px;

        --content-top-offset: -95px;
        --max-page-width: 100%;
    }
}

@media screen and (min-width: 2200px) and (max-width: 2700px) {
    :root {
        --hero-bg-shape-width: 3250px;
        --hero-bg-shape-from-top: -1415px;
        --hero-bg-secondary-shape-from-top: -895px;
        --hero-bg-shape-from-right: -370px;

        --content-top-offset: -95px;
        --max-page-width: 100%;
    }
}

@media screen and (min-width: 2700px) and (max-width: 3600px) {
    :root {
        --hero-bg-shape-width: 4350px;
        --hero-bg-shape-from-top: -1900px;
        --hero-bg-secondary-shape-from-top: -895px;
        --hero-bg-shape-from-right: -490px;

        --content-top-offset: -22px;
        --max-page-width: 100%;
    }
}

@media screen and (min-width: 3600px) {
    :root {
        --hero-bg-shape-width: 5530px;
        --hero-bg-shape-from-top: -2400px;
        --hero-bg-secondary-shape-from-top: -895px;
        --hero-bg-shape-from-right: -500px;

        --content-top-offset: -22px;
        --max-page-width: 100%;
    }
}

/*    Fonts
===================================================*/


@font-face {
    font-family: 'brandon grotesque';
    src: url("/app/fonts/BrandonGrotesque-Bold.woff") format("woff");
}

@font-face {
    font-family: 'futura';
    src: url("/app/fonts/FuturaBook-Regular.woff") format("woff");
}

/* unclear where this might be used, but overwrites any normal futura font with bold on safari
any bold futura needed and not achieved with font-weight will need changed to specify 'futura bold' instead of plain 'futura' */
@font-face {
    font-family: 'futura bold';
    src: url("/app/fonts/FuturaBook-Bold.woff") format("woff");
}