@charset "UTF-8";

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: #f7f7f7;
    height: 100vh;
    -webkit-text-size-adjust: 100%;
    /* if webkit 100% does not work, try none */
}

body {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    min-height: 100%;
    overflow: hidden visible;
}
/* overflow: hidden visible; this was in body tag*/

/*.provider-enrollment {
    max-width: 1280px;
} */

#grid {
    display: grid;
    grid-template-columns: 640px 640px;
    grid-template-rows: 284px 117px 286px;
    margin-top: -4px;
    justify-content: space-between;
}
/* justify-content: center;
    align-content: safe center; */

#A {
    grid-column: 1 / span 2;
    grid-row: 2;
    align-self: end;
}

#B {
    grid-column: 1;
    grid-row: 1;
    z-index: 10;
    justify-self: start;
    align-self: center;
    padding-left: 8em;
    padding-top: 50px;
}

#C {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    z-index: 8;
    padding-top: 16px;
    padding-left: 85px;
    justify-self: center;
    align-self: center;
}

#D {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    align-self: end;
}

#E {
    grid-column: 1 / span 2;
    grid-row: 1 / span 3;
    z-index: 5;
    justify-self: end;
    align-self: center;
}

#F {
    grid-column: 1;
    grid-row: 3;
    z-index: 6;
    align-self: center;
    justify-self: center;
    padding-top: 1em;
}

#G {
    display: none;
    grid-column: 2;
    grid-row: 1 / span 2;
    z-index: 7;
    justify-self: center;
    align-self: start;
    padding-top: 16px;
}

a {
    text-decoration: none;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.35;
    text-align: left;
    color: #544c4a;
}

label {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: white;
    padding-left: 7px;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
    font-size: 2em;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.25em;
    font-size: 28px; /* was 1.90em */
}

h3 {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
    font-size: 1.25em;
    text-indent: 5em;
}

.heading-three {
    text-align: center;
    line-height: 1.25em;
    padding-left: 35px;
}

h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    line-height: 2;
    color: #f48472;
    text-indent: 4em;
}

h5 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px; /* was 1em */
    color: white;
}

h6 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px; /* was .80em */
    line-height: 1.50;
    color: white;
}

.space-words {
    word-spacing: 1px;
}

.space-even {
    word-spacing: 2px;
}

.space-types {
    word-spacing: 3px;
    font-size: 1.15em;
    font-weight: bolder;
}

.space-newwords {
    word-spacing: 1px;
    font-size: 1.15em;
    font-weight: bolder;
}

.announcement {
    color: #544c4a;
}

.work {
    font-style: italic;
    font-weight: bold;
    color: #49a3da;
}

.contact {
    text-indent: 0%;
    font-size: 28px;
    color: #f48472;
}

.types {
    text-indent: 0%;
    font-size: 1.25em;
    line-height: 1.5;
    font-weight: bolder;
    color: #f48472;
}

.quote-contact {
    text-indent: 0%;
    font-size: 28px;
    color: #49a3da;
    margin-top: 5px;
}

.count {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 4.5em;
    line-height: 1;
    color: white;
}

.easy-four {
    text-indent: 0%;
    line-height: 1.25;
    color: #544c4a;
}

.four {
    color: #f48472;
}

.full-quote {
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: #544c4a;
}

.steps-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    color: rgb(143, 141, 141);
    font-weight: bolder;
}

.check-list {
    color: white;
}

.area-code {
    font-style: italic;
    padding-right: 5px;
}

.footer-text {
    font-size: 14px;
    color: white;
    font-weight: normal;
}

.text-one {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-indent: .55em; /* was 1.29em */
}

.text-two {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-indent: 1.35em; /* was 2.10em */
}

.text-three {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-indent: 3.75em; /* was 4.75em */
}

.line {
    display: block;
    border: 1px solid white;
    width: 150px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.line-up {
    display: block;
    border-left: 1px solid white;
    height: 80px;
}

/* Button element styled here */
.first-btn {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: #544c4a;
    border: 4.5px solid #544c4a;
    border-radius: 20px;
    padding: 2px 8px 2px 8px;
    background-color: #fff;
    cursor: pointer;
    margin-left: 43%;
    margin-bottom: 10%;
}

.second-btn {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: #544c4a;
    border: 4.5px solid #544c4a;
    border-radius: 20px;
    padding: 2px 8px 2px 8px;
    background-color: #fff;
    cursor: pointer;
}

.first-btn:hover {
    background-color: darkgrey;
}

.second-btn:hover {
    background-color: darkgrey;
}

/*.first-btn:active {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: white;
    border: 4.5px solid white;
    border-radius: 20px;
    padding: 2px 8px 2px 8px;
    background-color: #544c4a;
    cursor: pointer;
    margin-left: 47%;
}
 focus changes the button style as below */
.first-btn:focus {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: white;
    border: 4.5px solid white;
    border-radius: 20px;
    padding: 2px 8px 2px 8px;
    background-color: #544c4a;
    cursor: pointer;
    margin-left: 47%;
}

.second-btn:focus {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: white;
    border: 4.5px solid #f48472;
    border-radius: 20px;
    padding: 2px 8px 2px 8px;
    background-color: #544c4a;
    cursor: pointer;
}

#navgrid {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 70px 70px;
}
/* background-color: #6b605d; */

#item1 {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: end;
    padding-left: 20px;
    z-index: 5;
}

#item2 {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: center;
    align-self: end;
    z-index: 10;
    margin-bottom: -1.29em;
}

#item3 {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    padding-left: 25px;
    z-index: 6;
}

#item4 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    align-self: center;
}

#bluegrid {
    display: grid;
    grid-template-columns: 280px 245px 245px 245px 245px; /* was= auto auto auto auto auto */
    grid-template-rows: 150px 85px 225px 565.25px; /* was= auto .15fr auto 1fr */
    margin-top: -4px
}
/* -6px */

#banner {
    grid-column: 1 / span 5;
    grid-row: 1 / span 3;
    justify-self: start;
    align-self: start;
}

#first {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    padding-top: 10%;
}

#second {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    padding-top: 15%;
}

#third {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    padding-top: 15%;
}

#forth {
    grid-column: 4;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    padding-top: 15%;
}

#fifth {
    grid-column: 5;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    padding-top: 15%;
}

#orange {
    grid-column: 2 / span 2;
    grid-row: 3;
    align-self: start;
    justify-self: start;
    margin-left: 8px;
    padding-right: 5%;
    padding-top: 4.5%;
}

#her {
    grid-column: 1 / span 2;
    grid-row: 3 / span 4;
    justify-self: end;
    align-self: end;
    padding-top: 25%;
}

/*padding-left: 80px;*/
#check {
    grid-column: 3 / span 2;
    grid-row: 3;
    justify-self: center;
    align-self: center;
    line-height: 1.5;
    width: 100%;
    padding-left: 80px;
}

#steps {
    grid-column: 3 / span 3;
    grid-row: 4;
    justify-self: start;
    align-self: center;
    width: 100%;
    padding-bottom: 150px;
    padding-left: 50px;
}

#easy {
    grid-column: 3 / span 3;
    grid-row: 4;
    justify-self: start;
    align-self: start;
    padding-top: 50px;
}

#quote {
    grid-column: 3 / span 2;
    grid-row: 4;
    justify-self: center;
    align-self: center;
    padding-top: 150px;
    padding-left: 16px;
}

#quoteform {
    display: none;
    grid-column: 1 / span 2;
    grid-row: 3 / span 2;
    z-index: 7;
    justify-self: end;
    align-self: center;
    padding-left: 10px;
}

#lastgrid {
    display: grid;
    grid-template-columns: 320px 350px 200px 410px;
    grid-template-rows: 136px;
    margin-top: -.45em;
}

#foot-one {
    grid-column: 1 / span 4;
    grid-row: 1;
    justify-self: end;
    align-self: center;
}

#logo-footer {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    padding-right: 50px;
    padding-bottom: 15px;
}

#address-footer {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    padding-right: 50px;
}

#contact-footer {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    padding-right: 50px;
}

#website-footer {
    grid-column: 4;
    grid-row: 1;
    justify-self: start;
    align-self: center;
}

/* Arrow Anchors start here */ 
.anchor-arrow {
    anchor-name: --anchor-ar;
    padding-bottom: 10px;
}

.anchored-notice-arrow {
    position: absolute;
    position-anchor: --anchor-ar;
    position-area: right center;
    padding-left: 14px;
}

.anchor-arrowtwo {
    anchor-name: --anchor-as;
    padding-bottom: 10px;
}

.anchored-notice-arrowtwo {
    position: absolute;
    position-anchor: --anchor-as;
    position-area: right center;
    padding-left: 14px;
}

.anchor-arrowthree {
    anchor-name: --anchor-at;
    padding-bottom: 10px;
}

.anchored-notice-arrowthree {
    position: absolute;
    position-anchor: --anchor-at;
    position-area: right center;
    padding-left: 14px;
}

.anchor-arrowfour {
    anchor-name: --anchor-au;
    padding-bottom: 10px;
}

.anchored-notice-arrowfour {
    position: absolute;
    position-anchor: --anchor-au;
    position-area: right center;
    padding-left: 14px;
}

/* Checklist Anchors start here */ 
/* was position-area: right center;
    padding-left: 7px; and was position: absolute */

.anchor {
    anchor-name: --anchor-el;
}

.anchored-notice {
    position: absolute;
    position-anchor: --anchor-el;
    position-area: center span-right;
    padding-left: 25px;
    padding-bottom: 4px;
}

.anchor-two {
    anchor-name: --anchor-ca;
}

.anchored-notice-two {
    position: absolute;
    position-anchor: --anchor-ca;
    position-area: center span-right;
    padding-left: 25px;
    padding-bottom: 4px;
}

.anchor-three {
    anchor-name: --anchor-pr;
}

.anchored-notice-three {
    position: absolute;
    position-anchor: --anchor-pr;
    position-area: center span-right;
    padding-left: 25px;
    padding-bottom: 4px;
}

.anchor-four {
    anchor-name: --anchor-ap;
}

.anchored-notice-four {
    position: absolute;
    position-anchor: --anchor-ap;
    position-area: center span-right;
    padding-left: 25px;
    padding-bottom: 4px;
}

.anchor-five {
    anchor-name: --anchor-fo;
}

.anchored-notice-five {
    position: absolute;
    position-anchor: --anchor-fo;
    position-area: center span-right;
    padding-left: 25px;
    padding-bottom: 4px;
}

.anchor-six {
    anchor-name: --anchor-co;
}

.anchored-notice-six {
    position: absolute;
    position-anchor: --anchor-co;
    position-area: center span-right;
    padding-left: 25px;
    padding-bottom: 4px;
}

.anchor-seven {
    anchor-name: --anchor-pm;
}

.anchored-notice-seven {
    position: absolute;
    position-anchor: --anchor-pm;
    position-area: center span-right;
    padding-left: 25px;
    padding-bottom: 4px;
}

/* steps - circles start here */

.anchor-stepone {
    anchor-name: --anchor-st;
}

.anchored-notice-stepone {
    position: absolute;
    position-anchor: --anchor-st;
    position-area: center span-right;
    margin-left: 50px;
}

.anchor-steptwo {
    anchor-name: --anchor-tw;
}

.anchored-notice-steptwo {
    position: absolute;
    position-anchor: --anchor-tw;
    position-area: center span-right;
    margin-left: 50px;
}

.anchor-stepthree {
    anchor-name: --anchor-sa;
}

.anchored-notice-stepthree {
    position: absolute;
    position-anchor: --anchor-sa;
    position-area: center span-right;
    margin-left: 50px;
}

.anchor-stepfour {
    anchor-name: --anchor-or;
}

.anchored-notice-stepfour {
    position: absolute;
    position-anchor: --anchor-or;
    position-area: center span-right;
    margin-left: 50px;
}

.anchor-bar {
    anchor-name: --anchor-br;
}

.anchored-notice-bar {
    position: absolute;
    position-anchor: --anchor-br;
    position-area: left center;
    padding-right: 16px;
}

.anchor-otherbar {
    anchor-name: --anchor-ba;
}

.anchored-notice-otherbar {
    position: absolute;
    position-anchor: --anchor-ba;
    position-area: left center;
    padding-right: 16px;
}

.abspos {
    grid-row-start: 4;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 4;
    position: absolute;
    top: 70px;
    bottom: 40px;
    left: 100px;
    right: 30px;
}